/* =============================================================
   BcBB Keycloak Account Console theme — bcbb-account.css

   Loaded via theme.properties `styles=` on top of the stock
   `keycloak.v3` (React/PatternFly 5) account console. We cannot
   restructure the React layout, but we can re-skin it by remapping
   PatternFly design tokens to the BcBB palette + overriding key
   component classes.

   PatternFly version: KC 26.6.2's account-ui bundle is PatternFly 5
   (verified live: ~3.9k --pf-v5-global tokens, zero PF6). Targets
   PF5 tokens (--pf-v5-global--*, --pf-v5-c-*) and .pf-v5-c-* only.

   CASCADE NOTE: the account-ui applies its palette through PF5
   *component-level* custom properties (e.g.
   --pf-v5-c-button--m-primary--BackgroundColor) and, under an OS
   dark-mode preference, darkens the masthead/sidebar/loading splash.
   Plain property overrides lose to those, so brand overrides here
   use `!important` on BOTH the global tokens and the component
   selectors. This is deliberate — it's the only reliable way to
   win the cascade against the bundled + runtime-injected styles.

   Design language copied from the login theme (bcbb-auth.css) /
   bcbb-portal.css: gradient primary→accent CTAs, --bcbb-radius-sm,
   focus ring rgba(60,91,169,.12).
   ============================================================= */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

/* ── BcBB brand tokens ──────────────────────────────────────── */
:root {
  --bcbb-primary:     #3C5BA9;
  --bcbb-primary-600: #324c8e;
  --bcbb-primary-700: #283e74;
  --bcbb-accent:      #3B93CD;
  --bcbb-cyan:        #C1E7EF;
  --bcbb-ink:         #0F122C;

  --bcbb-success:     #2dce89;
  --bcbb-warning:     #fb8c00;
  --bcbb-danger:      #e53935;
  --bcbb-info:        #3B93CD;

  --bcbb-bg:          #f4f5fa;
  --bcbb-surface:     #ffffff;
  --bcbb-surface-2:   #f8f9fc;
  --bcbb-border:      #e6e8ef;
  --bcbb-text:        #1a1f36;
  --bcbb-text-muted:  #67748e;

  --bcbb-radius:      0.75rem;
  --bcbb-radius-sm:   0.5rem;
  --bcbb-shadow-sm:   0 1px 2px rgba(15,18,44,.06), 0 1px 3px rgba(15,18,44,.04);
  --bcbb-shadow:      0 4px 8px rgba(15,18,44,.06), 0 2px 4px rgba(15,18,44,.04);

  /* Sidebar rail (matches the masthead's darker stop) */
  --bcbb-rail:        #12152e;
}

/* ── Global token remap (PF5) — !important so it beats the bundle,
   which redefines these at :root as well. Component vars whose
   defaults reference these globals inherit the brand color. ──── */
:root {
  --pf-v5-global--FontFamily--text:        'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  --pf-v5-global--FontFamily--heading:     'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  --pf-v5-global--FontFamily--sans-serif:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;

  --pf-v5-global--primary-color--100:       var(--bcbb-primary) !important;
  --pf-v5-global--primary-color--200:       var(--bcbb-primary-700) !important;
  --pf-v5-global--active-color--100:         var(--bcbb-primary) !important;
  --pf-v5-global--active-color--200:         var(--bcbb-primary-700) !important;
  --pf-v5-global--active-color--300:         var(--bcbb-accent) !important;
  --pf-v5-global--active-color--400:         var(--bcbb-primary) !important;
  --pf-v5-global--link--Color:               var(--bcbb-primary) !important;
  --pf-v5-global--link--Color--hover:        var(--bcbb-primary-700) !important;
  --pf-v5-global--BackgroundColor--100:      var(--bcbb-surface) !important;
  --pf-v5-global--BackgroundColor--200:      var(--bcbb-bg) !important;
  --pf-v5-global--BorderColor--100:          var(--bcbb-border) !important;
  --pf-v5-global--success-color--100:        var(--bcbb-success) !important;
  --pf-v5-global--warning-color--100:        var(--bcbb-warning) !important;
  --pf-v5-global--danger-color--100:         var(--bcbb-danger) !important;
  --pf-v5-global--info-color--100:           var(--bcbb-info) !important;
  --pf-v5-global--BorderRadius--sm:          var(--bcbb-radius-sm) !important;
}

body,
.pf-v5-c-page {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv11', 'ss03';
  -webkit-font-smoothing: antialiased;
}

/* ── Loading splash ─────────────────────────────────────────────
   Rendered from the HTML shell BEFORE the app mounts. Its inline
   <style> has a @media(prefers-color-scheme:dark) rule that darkens
   it on OS dark mode; we override to the BcBB navy gradient, add the
   wordmark above the spinner, and light the spinner + text. ────── */
.keycloak__loading-container {
  background: linear-gradient(135deg, var(--bcbb-ink) 0%, var(--bcbb-primary) 100%) !important;
  color: #fff !important;
}
.keycloak__loading-container::before {
  content: "";
  display: block;
  width: 260px;
  height: 60px;
  margin-bottom: 1.5rem;
  background: url("../img/logo-wordmark-on-dark.png") no-repeat center center;
  background-size: contain;
}
.keycloak__loading-container .pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: var(--bcbb-cyan) !important;
}
#loading-text {
  color: #fff !important;
}

/* ── Second loading state: React Suspense fallback ──────────────
   After the HTML-shell splash above is torn down (app mounted), the
   account-ui shows a BARE <Spinner> Suspense fallback (fallback:E(Bn,{}),
   no Bullseye) while it loads route chunks + account data — which renders
   as a lone spinner on a white body. Match it to the first splash: brand
   #app when it holds a spinner but NOT yet the mounted page (.pf-v5-c-page)
   and NOT the shell splash (.keycloak__loading-container, to avoid a double
   logo). Uses :has() — supported in current Chrome/Safari/Firefox; older
   browsers simply keep the plain white fallback (graceful degradation). ── */
#app:has(.pf-v5-c-spinner):not(:has(.pf-v5-c-page)):not(:has(.keycloak__loading-container)) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--bcbb-ink) 0%, var(--bcbb-primary) 100%);
}
#app:has(.pf-v5-c-spinner):not(:has(.pf-v5-c-page)):not(:has(.keycloak__loading-container))::before {
  content: "";
  display: block;
  width: 260px;
  height: 60px;
  margin-bottom: 1.5rem;
  background: url("../img/logo-wordmark-on-dark.png") no-repeat center center;
  background-size: contain;
}
#app:has(.pf-v5-c-spinner):not(:has(.pf-v5-c-page)):not(:has(.keycloak__loading-container)) .pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: var(--bcbb-cyan) !important;
  --pf-v5-c-spinner--Width: 3rem;
  --pf-v5-c-spinner--Height: 3rem;
}

/* ── Page background (white content surface) ────────────────── */
.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background-color: var(--bcbb-bg) !important;
}

/* ── Masthead: solid BcBB navy, white-text wordmark ─────────────
   Earlier attempts left a split masthead (white brand area + a black
   toolbar bar) because the toolbar sub-elements re-paint from the PF
   masthead's OWN dark background variable. Fix decisively: force the
   masthead background variable + every sub-element (brand, content,
   toolbar) to the BcBB navy, so the whole bar is ONE consistent colour,
   and use the white-text wordmark (logo=on-dark in theme.properties). */
.pf-v5-c-masthead,
.pf-v5-c-page__header {
  --pf-v5-c-masthead--BackgroundColor: var(--bcbb-ink) !important;
  --pf-v5-global--BackgroundColor--dark-100: var(--bcbb-ink) !important;
  background: var(--bcbb-ink) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
  box-shadow: var(--bcbb-shadow-sm);
}
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section,
.pf-v5-c-masthead .pf-v5-c-toolbar__item {
  background: transparent !important;
  color: #fff !important;
}
.pf-v5-c-masthead a,
.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead__toggle .pf-v5-c-button {
  color: #fff !important;
}
.pf-v5-c-masthead__brand,
.pf-v5-c-brand,
.pf-v5-c-masthead__brand img {
  height: 34px;
  max-height: 34px;
  width: auto;
}

/* ── Left sidebar / nav: BcBB blue gradient (matches admin portal) ──
   primary→accent gradient, white text, and a WHITE active "pill" with
   primary-blue text — the admin sidebar signature. */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav,
.pf-v5-c-nav__list {
  background: linear-gradient(160deg, var(--bcbb-primary) 0%, var(--bcbb-accent) 100%) !important;
  color: #fff !important;
}
.pf-v5-c-nav__link {
  color: rgba(255, 255, 255, .88) !important;
}
.pf-v5-c-nav__link:hover {
  color: #fff !important;
  background-color: rgba(255, 255, 255, .14) !important;
}
/* Active = white pill, primary-blue text (admin-portal style) */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  color: var(--bcbb-primary) !important;
  background-color: rgba(255, 255, 255, .96) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px -3px rgba(60, 91, 169, .35) !important;
}
/* Kill PF's own left-border current indicator (the pill replaces it) */
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::before,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::after {
  border-color: transparent !important;
  background-color: transparent !important;
}

/* ── Neutralise the collapsed NotificationDrawer's tinted edge ───
   The account-ui mounts a PF NotificationDrawer; collapsed, its panel
   border/splitter showed as a stray blue vertical bar at the masthead's
   right edge (it picked up the now-brand primary token). Fade it to the
   normal hairline border + drop the shadow so it's invisible when shut. */
.pf-v5-c-drawer__panel {
  border-color: var(--bcbb-border) !important;
  box-shadow: none !important;
}
.pf-v5-c-drawer__splitter,
.pf-v5-c-drawer__splitter-handle {
  background: transparent !important;
}

/* ── Cards / panels ─────────────────────────────────────────── */
.pf-v5-c-card {
  background: var(--bcbb-surface) !important;
  border: 1px solid var(--bcbb-border);
  border-radius: var(--bcbb-radius);
  box-shadow: var(--bcbb-shadow-sm);
}

/* ── Primary CTA: gradient primary→accent (matches login) ───── */
.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--bcbb-primary) 0%, var(--bcbb-accent) 100%) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--bcbb-radius-sm) !important;
  box-shadow: 0 4px 12px rgba(60, 91, 169, .30) !important;
}
.pf-v5-c-button.pf-m-primary:hover {
  box-shadow: 0 6px 18px rgba(60, 91, 169, .40) !important;
  filter: brightness(1.02);
}
.pf-v5-c-button.pf-m-primary:active {
  filter: brightness(.96);
}
/* Secondary + link buttons → brand primary */
.pf-v5-c-button.pf-m-secondary {
  color: var(--bcbb-primary) !important;
  border-color: var(--bcbb-primary) !important;
  border-radius: var(--bcbb-radius-sm) !important;
  background: transparent !important;
}
.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-inline {
  color: var(--bcbb-primary) !important;
}
.pf-v5-c-button.pf-m-link:hover {
  color: var(--bcbb-primary-700) !important;
}

/* ── Generic links / brand text ─────────────────────────────── */
a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link) {
  color: var(--bcbb-primary);
}
a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):hover {
  color: var(--bcbb-primary-700);
}

/* ── "Jump to section" (JumpLinks) current item → primary ───── */
.pf-v5-c-jump-links__item.pf-m-current > .pf-v5-c-jump-links__link {
  color: var(--bcbb-primary) !important;
}
.pf-v5-c-jump-links__item.pf-m-current > .pf-v5-c-jump-links__link::before,
.pf-v5-c-jump-links__list::before {
  border-color: var(--bcbb-primary) !important;
}

/* ── Form inputs: brand focus ring (matches login .auth-input) ─ */
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > textarea:focus {
  --pf-v5-c-form-control--BorderColor: var(--bcbb-primary) !important;
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--bcbb-primary) !important;
  outline-color: var(--bcbb-primary) !important;
  box-shadow: 0 0 0 3px rgba(60, 91, 169, .12);
}

/* ── Switches / checkboxes checked → brand ──────────────────── */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background-color: var(--bcbb-primary) !important;
}
.pf-v5-c-check__input:checked {
  accent-color: var(--bcbb-primary);
}

/* ── Content-area text contrast (portal-match) ──────────────────
   PF's default label / secondary-text colors are a pale grey that
   washes out on our light content surface (labels + section headings
   were barely legible). Scope BcBB's dark text palette to the main
   content region ONLY — the masthead + sidebar re-declare their own
   light text, so they're untouched. */
.pf-v5-c-page__main {
  --pf-v5-global--Color--100: var(--bcbb-text) !important;
  --pf-v5-global--Color--200: var(--bcbb-text-muted) !important;
  color: var(--bcbb-text);
}
/* Form field labels + section/page headings → dark, Inter, weighted */
.pf-v5-c-page__main .pf-v5-c-form__label,
.pf-v5-c-page__main .pf-v5-c-form__label-text {
  color: var(--bcbb-text) !important;
  font-weight: 600 !important;
}
.pf-v5-c-page__main .pf-v5-c-title,
.pf-v5-c-page__main h1,
.pf-v5-c-page__main h2,
.pf-v5-c-page__main h3,
.pf-v5-c-page__main .pf-v5-c-content h1,
.pf-v5-c-page__main .pf-v5-c-content h2,
.pf-v5-c-page__main .pf-v5-c-content h3 {
  color: var(--bcbb-text) !important;
  font-weight: 700 !important;
}
/* Descriptions / helper copy → muted (readable) */
.pf-v5-c-page__main .pf-v5-c-content small,
.pf-v5-c-page__main .pf-v5-c-content--small,
.pf-v5-c-page__main .pf-v5-c-form__helper-text {
  color: var(--bcbb-text-muted) !important;
}
/* "Jump to section" list → readable, current item primary */
.pf-v5-c-jump-links__link-text {
  color: var(--bcbb-text-muted) !important;
}

/* ── Form inputs: portal look (bordered, rounded, brand focus) ── */
.pf-v5-c-page__main .pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderRadius: var(--bcbb-radius-sm) !important;
  --pf-v5-c-form-control--BorderTopColor: var(--bcbb-border) !important;
  --pf-v5-c-form-control--BorderRightColor: var(--bcbb-border) !important;
  --pf-v5-c-form-control--BorderLeftColor: var(--bcbb-border) !important;
  --pf-v5-c-form-control--BorderBottomColor: var(--bcbb-border) !important;
  border-radius: var(--bcbb-radius-sm) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — @media (prefers-color-scheme: dark)

   The account-ui has no native dark theme (no JS toggle / matchMedia),
   so on a dark-OS visitor the page either stays light or a browser
   extension force-darkens it into an ugly near-black mess. We instead
   ship our OWN dark theme: declare support via color-scheme (so the UA
   + any auto-darkening extension defer to us) and paint the content
   area BcBB navy with light text. The masthead is already navy and the
   sidebar's blue gradient reads well on dark, so both are left as-is.
   ═══════════════════════════════════════════════════════════════ */
:root {
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bcbb-dark-bg:      #0d1230;  /* page — deep navy, not black */
    --bcbb-dark-surface: #141a3d;  /* cards / inputs */
    --bcbb-dark-border:  #2a3366;
    --bcbb-dark-text:    #eaefff;
    --bcbb-dark-muted:   #aab4d8;
  }

  /* Page + content surfaces → navy */
  .pf-v5-c-page,
  .pf-v5-c-page__main,
  .pf-v5-c-page__main-section,
  .pf-v5-c-page__drawer,
  .pf-v5-c-drawer,
  .pf-v5-c-drawer__content {
    background-color: var(--bcbb-dark-bg) !important;
  }

  /* Content text → light */
  .pf-v5-c-page__main {
    --pf-v5-global--Color--100: var(--bcbb-dark-text) !important;
    --pf-v5-global--Color--200: var(--bcbb-dark-muted) !important;
    color: var(--bcbb-dark-text) !important;
  }
  .pf-v5-c-page__main .pf-v5-c-form__label,
  .pf-v5-c-page__main .pf-v5-c-form__label-text,
  .pf-v5-c-page__main .pf-v5-c-title,
  .pf-v5-c-page__main h1,
  .pf-v5-c-page__main h2,
  .pf-v5-c-page__main h3,
  .pf-v5-c-page__main .pf-v5-c-content h1,
  .pf-v5-c-page__main .pf-v5-c-content h2,
  .pf-v5-c-page__main .pf-v5-c-content h3 {
    color: var(--bcbb-dark-text) !important;
  }
  .pf-v5-c-page__main .pf-v5-c-content small,
  .pf-v5-c-page__main .pf-v5-c-form__helper-text,
  .pf-v5-c-jump-links__link-text {
    color: var(--bcbb-dark-muted) !important;
  }
  /* "Jump to section" current still brand-accent (readable on navy) */
  .pf-v5-c-jump-links__item.pf-m-current > .pf-v5-c-jump-links__link {
    color: var(--bcbb-accent) !important;
  }

  /* Cards + inputs → darker navy surface, light text */
  .pf-v5-c-card {
    background: var(--bcbb-dark-surface) !important;
    border-color: var(--bcbb-dark-border) !important;
  }
  .pf-v5-c-page__main .pf-v5-c-form-control,
  .pf-v5-c-page__main .pf-v5-c-form-control > input,
  .pf-v5-c-page__main .pf-v5-c-form-control > select,
  .pf-v5-c-page__main .pf-v5-c-form-control > textarea {
    --pf-v5-c-form-control--BackgroundColor: var(--bcbb-dark-surface) !important;
    --pf-v5-c-form-control--BorderTopColor: var(--bcbb-dark-border) !important;
    --pf-v5-c-form-control--BorderRightColor: var(--bcbb-dark-border) !important;
    --pf-v5-c-form-control--BorderLeftColor: var(--bcbb-dark-border) !important;
    --pf-v5-c-form-control--BorderBottomColor: var(--bcbb-dark-border) !important;
    background-color: var(--bcbb-dark-surface) !important;
    color: var(--bcbb-dark-text) !important;
  }
  /* Disabled (read-only) fields — slightly inset, muted text */
  .pf-v5-c-page__main .pf-v5-c-form-control.pf-m-disabled,
  .pf-v5-c-page__main .pf-v5-c-form-control[disabled],
  .pf-v5-c-page__main .pf-v5-c-form-control[readonly] {
    background-color: rgba(255, 255, 255, .04) !important;
    color: var(--bcbb-dark-muted) !important;
  }

  /* Masthead stays navy; sidebar stays the blue gradient — no overrides
     needed (both already read correctly against dark). */
}