/*
 * NAC login theme — light, matching the portal's Tabler look so login ->
 * portal feels like one product (owner request 2026-08-31). Theme
 * directory/name kept as "nac-darkhorizon" only to avoid re-pointing the
 * realm's loginTheme/accountTheme — the name is now a legacy misnomer.
 *
 * Selectors verified against the ACTUAL rendered markup of this pinned
 * Keycloak version (26.6.4) by fetching a live login page and inspecting
 * classes directly — the base keycloak.v2 theme uses PatternFly 5 classes
 * prefixed `pf-v5-c-*`, NOT `pf-c-*` (no version segment). The first
 * version of this file used the wrong prefix throughout, so none of the
 * card/title/label overrides ever matched — only the plain-element
 * selectors (input[type=], html/body) and the #kc-login ID selector took
 * effect, producing dark text (my override) on keycloak.v2's own default
 * dark card background (unmatched selector) = unreadable. Confirmed via a
 * live screenshot 2026-09-01. Don't reintroduce the bare `pf-c-` prefix.
 *
 * Token values kept in sync BY HAND with portal/web/static/theme.css (teal
 * accent #1ca08f, body bg #f6f8fb).
 */

:root {
  --nac-bg: #f6f8fb;
  --nac-surface: #ffffff;
  --nac-border: #e6e7e9;
  --nac-accent: #1ca08f;
  --nac-accent-hover: #178a7b;
  --nac-text: #354052;
  --nac-text-muted: #667382;
  --nac-danger: #d63939;

  --pf-v5-global--BackgroundColor--100: var(--nac-surface);
  --pf-v5-global--BackgroundColor--200: var(--nac-bg);
  --pf-v5-global--Color--100: var(--nac-text);
  --pf-v5-global--Color--200: var(--nac-text-muted);
  --pf-v5-global--primary-color--100: var(--nac-accent);
  --pf-v5-global--primary-color--200: var(--nac-accent-hover);
  --pf-v5-global--link--Color: var(--nac-accent);
  --pf-v5-global--link--Color--hover: var(--nac-accent-hover);
  --pf-v5-global--BorderColor--100: var(--nac-border);
  --pf-v5-global--danger-color--100: var(--nac-danger);
}

html,
body {
  background: var(--nac-bg) !important;
  color: var(--nac-text) !important;
}

/* Login card — real classes confirmed live: pf-v5-c-login, ...__container,
   ...__main, ...__main-body, ...__main-header, ...__main-footer. */
.pf-v5-c-login,
.pf-v5-c-login__container {
  background: transparent !important;
}

.pf-v5-c-login__main,
.pf-v5-c-login__main-body {
  background: var(--nac-surface) !important;
  color: var(--nac-text) !important;
  border: 1px solid var(--nac-border);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(24, 36, 51, 0.08), 0 1px 2px rgba(24, 36, 51, 0.06);
}

.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  color: var(--nac-text) !important;
}

.pf-v5-c-title,
#kc-page-title {
  color: var(--nac-text) !important;
  letter-spacing: 0.01em;
}

/* Field labels — confirmed live class: pf-v5-c-form__label. */
.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--nac-text) !important;
}

/* The actual <input> has no class of its own here — it's wrapped in a
   <span class="pf-v5-c-form-control">. Style both so this holds even if a
   future Keycloak version puts the class directly on the input. */
.pf-v5-c-form-control,
input[type="text"],
input[type="password"],
input[type="email"] {
  background: var(--nac-surface) !important;
  color: var(--nac-text) !important;
  border-color: var(--nac-border) !important;
}

.pf-v5-c-form-control:focus-within,
input:focus {
  border-color: var(--nac-accent) !important;
  box-shadow: 0 0 0 2px rgba(28, 160, 143, 0.25) !important;
}

.pf-v5-c-button.pf-m-primary,
#kc-login {
  background: var(--nac-accent) !important;
  border-color: var(--nac-accent) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  background: var(--nac-accent-hover) !important;
  border-color: var(--nac-accent-hover) !important;
}

a,
.pf-v5-c-login__main-footer-links a {
  color: var(--nac-accent) !important;
}
a:hover {
  color: var(--nac-accent-hover) !important;
}

@media (max-width: 480px) {
  .pf-v5-c-login {
    padding: 1rem !important;
  }
  .pf-v5-c-form-control,
  .pf-v5-c-button {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}