/*
 * infra/keycloak/themes/bleep/login/resources/css/bleep.css
 *
 * Reskins Keycloak 26's default keycloak.v2 (PatternFly v5) login theme to
 * match the Bleep ESSP login page (src/app/login/login.css), so the SAML
 * redirect from the app to Keycloak doesn't feel like landing on a different
 * product. Covers every keycloak.v2 screen (login, OTP, WebAuthn, reset
 * password, register, error, account-console-adjacent pages) because it
 * overrides shared PatternFly global tokens rather than forking per-page
 * FreeMarker templates.
 *
 * Applied unconditionally (not gated behind the `pf-v5-theme-dark` class
 * keycloak.v2 toggles based on `prefers-color-scheme`): this screen is
 * always the same dark "machine voice" regardless of the visitor's OS theme,
 * matching the app's own login page. `!important` is used deliberately —
 * keycloak.v2's dark-mode rules are `:where(...)`-scoped (zero specificity),
 * so overriding them reliably needs it rather than relying on cascade order
 * alone surviving a future Keycloak upgrade reordering the stylesheet.
 */

:root {
  /* Global PatternFly tokens that keycloak.v2's components read from via var() */
  --pf-v5-global--BackgroundColor--100: #0a0a0a !important;
  --pf-v5-global--BackgroundColor--dark-100: #0a0a0a !important;
  --pf-v5-global--BackgroundColor--light-100: #121418 !important;
  --pf-v5-global--BackgroundColor--150: #121418 !important;
  --pf-v5-global--BackgroundColor--200: #0a0a0a !important;
  --pf-v5-global--BackgroundColor--dark-200: #0a0a0a !important;

  --pf-v5-global--Color--100: #f4f5f6 !important;
  --pf-v5-global--Color--dark-100: #f4f5f6 !important;
  --pf-v5-global--Color--light-100: #f4f5f6 !important;
  --pf-v5-global--Color--200: #a6abb3 !important;
  --pf-v5-global--Color--dark-200: #a6abb3 !important;
  --pf-v5-global--Color--light-200: #a6abb3 !important;

  --pf-v5-global--primary-color--100: #f89820 !important;
  --pf-v5-global--primary-color--dark-100: #f89820 !important;
  --pf-v5-global--primary-color--light-100: #f89820 !important;
  --pf-v5-global--primary-color--200: #e07d05 !important;
  --pf-v5-global--primary-color--300: #f89820 !important;
  --pf-v5-global--primary-color--400: #0a0a0a !important;

  --pf-v5-global--link--Color: #f89820 !important;
  --pf-v5-global--link--Color--hover: #e07d05 !important;
  --pf-v5-global--link--Color--dark: #f89820 !important;
  --pf-v5-global--link--Color--dark--hover: #e07d05 !important;

  --pf-v5-global--BorderColor--100: #23262c !important;
  --pf-v5-global--BorderColor--200: #23262c !important;
  --pf-v5-global--BorderColor--300: #23262c !important;

  /* keycloak.v2's own styles.css tokens (see resources/css/styles.css) */
  --keycloak-bg-logo-url: none !important;
  --keycloak-card-top-color: #f89820 !important;
}

html,
body#keycloak-bg,
.login-pf body {
  background: #0a0a0a !important;
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgba(248, 152, 32, 0.07) 0%, transparent 55%),
    radial-gradient(120% 120% at 0% 100%, rgba(0, 0, 0, 0.55) 0%, transparent 60%),
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
  background-size:
    100% 100%,
    100% 100%,
    60px 60px,
    60px 60px !important;
  color: #f4f5f6 !important;
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
}

.pf-v5-c-login {
  background: transparent !important;
}

.pf-v5-c-login__main {
  background: #121418 !important;
  border: 1px solid #23262c !important;
  border-radius: 12px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.pf-v5-c-login__main-header {
  border-top: 4px solid #f89820 !important;
}

#kc-header-wrapper {
  color: #a6abb3 !important;
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
}

.pf-v5-c-title,
#kc-page-title {
  color: #f4f5f6 !important;
}

.pf-v5-c-form__label-text,
.pf-v5-c-check__label {
  color: #a6abb3 !important;
}

/* Inputs */
.pf-v5-c-form-control {
  background: #0a0a0a !important;
  border-color: #23262c !important;
  color: #f4f5f6 !important;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  border-color: #f89820 !important;
  box-shadow: 0 0 0 1px #f89820 !important;
}

.pf-v5-c-form-control::placeholder {
  color: #6b7079 !important;
}

/* Primary button — same orange CTA as the app's own login page */
.pf-v5-c-button.pf-m-primary {
  background: #f89820 !important;
  color: #0a0a0a !important;
  border: none !important;
  font-weight: 600 !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.pf-v5-c-button.pf-m-primary:active {
  background: #e07d05 !important;
  color: #0a0a0a !important;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  color: #f89820 !important;
  border-color: #23262c !important;
}

a,
a:visited {
  color: #f89820 !important;
}

a:hover,
a:focus {
  color: #e07d05 !important;
}

.pf-v5-c-alert.pf-m-danger {
  background: rgba(224, 61, 54, 0.12) !important;
  border-color: #e03d36 !important;
  color: #ffb4b0 !important;
}

.pf-v5-c-alert.pf-m-success {
  background: rgba(76, 175, 80, 0.12) !important;
  border-color: #4caf50 !important;
  color: #b8ecba !important;
}

.pf-v5-c-alert.pf-m-warning {
  background: rgba(248, 152, 32, 0.12) !important;
  border-color: #f89820 !important;
  color: #fad48d !important;
}

.pf-v5-c-login__main-footer,
.pf-v5-c-login__main-footer-band-item,
.kc-login-tooltip .kc-tooltip-text {
  color: #6b7079 !important;
}

/* Language selector */
#login-select-toggle {
  background: #0a0a0a !important;
  color: #f4f5f6 !important;
  border-color: #23262c !important;
}