/* Moveable brand overrides for the keycloak.v3 account console.
   The class prefix depends on the Keycloak image (both verified by inspecting
   the rendered DOM):
   - KC 24 (account-ui 24.x): PatternFly 4, `pf-c-*`, masthead = `.pf-c-page__header`
   - KC 26.7 (account-ui 26.7.5): PatternFly 5, `pf-v5-c-*`, masthead =
     `.pf-v5-c-masthead`, logo = a plain `<img>` in `.pf-v5-c-masthead__brand`
   Every rule carries both selector sets so the theme works on either image
   through the KC 26.7 cutover (#405). Drop the `pf-c-*` half once KC 24 is gone.

   Palette mirrors the email theme + bikeable login theme: moveable navy
   (#005579) as primary, teal (#33bdca) as accent. Sidebar gets a clean
   white-with-navy-accents look instead of the v3 default dark slab. */

:root {
  --mov-brand: #005579;
  --mov-brand-hover: #33bdca;
  --mov-card: #ffffff;
  --mov-border: #e6e6e6;
  --mov-text: #1a1a1a;
  --mov-text-muted: #666666;
  --mov-bg-page: #f7f7f7;
}

/* ------------------------------------------------------------------ */
/* Masthead: white background, navy accents. Tall enough that the wide
   composite logo (moveable + 4 platform marks) reads at scale.        */
/* ------------------------------------------------------------------ */
.pf-c-page__header,
.pf-v5-c-masthead {
  background-color: var(--mov-card) !important;
  color: var(--mov-text);
  border-bottom: 1px solid var(--mov-border);
  --pf-c-page__header--BackgroundColor: var(--mov-card);
  --pf-c-page__header--MinHeight: 80px;
  --pf-v5-c-masthead--BackgroundColor: var(--mov-card);
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: var(--mov-card);
  --pf-v5-c-masthead--item-border-color--base: var(--mov-border);
}
/* PF5 paints the masthead as a dark region by re-pointing the global colour
   tokens at their light-on-dark variants; point them back, the same way PF5's
   own `.pf-m-light` modifier does. */
.pf-v5-c-masthead {
  min-height: 80px;
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
}

/* Sidebar toggle (hamburger), user dropdown, locale picker — dark on white. */
.pf-c-page__header .pf-c-button,
.pf-c-page__header .pf-c-dropdown__toggle,
.pf-c-page__header-tools,
.pf-c-page__header-tools-item,
.pf-c-page__header .pf-c-dropdown__toggle-text,
.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  color: var(--mov-text) !important;
  --pf-c-dropdown__toggle--Color: var(--mov-text);
  --pf-v5-c-menu-toggle--Color: var(--mov-text);
}
.pf-c-page__header .pf-c-button:hover,
.pf-v5-c-masthead .pf-v5-c-button:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover {
  color: var(--mov-brand) !important;
}

/* Brand area: the composite logo. Let it render at a useful height
   instead of the default 35px. On PF5 the `<img>` only carries a hashed
   CSS-module class (`_brand_<hash>`), so target it through its parent. */
.pf-c-page__header-brand-link,
.pf-c-page__header-brand,
.pf-v5-c-masthead__brand {
  height: auto;
}
.pf-c-brand,
.pf-v5-c-masthead__brand img {
  height: 56px !important;
  max-height: 56px;
  width: auto;
  max-width: 100%;
}
/* ------------------------------------------------------------------ */
/* Sidebar: switch the dark v3 default to white with a navy active state. */
/* ------------------------------------------------------------------ */
.pf-c-page__sidebar,
.pf-v5-c-page__sidebar {
  background-color: var(--mov-card) !important;
  border-right: 1px solid var(--mov-border);
  color: var(--mov-text);
  --pf-c-page__sidebar--BackgroundColor: var(--mov-card);
  --pf-v5-c-page__sidebar--BackgroundColor: var(--mov-card);
}
/* Same global-token flip as the masthead: dark text and icons on white. */
.pf-v5-c-page__sidebar {
  --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
  --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
  --pf-v5-global--BorderColor--100: var(--pf-v5-global--BorderColor--dark-100);
  --pf-v5-global--primary-color--100: var(--pf-v5-global--primary-color--dark-100);
  --pf-v5-global--link--Color: var(--pf-v5-global--link--Color--dark);
  --pf-v5-global--link--Color--hover: var(--pf-v5-global--link--Color--dark--hover);
  --pf-v5-global--BackgroundColor--100: var(--pf-v5-global--BackgroundColor--light-100);
  --pf-v5-global--icon--Color--light: var(--pf-v5-global--icon--Color--light--dark);
  --pf-v5-global--icon--Color--dark: var(--pf-v5-global--icon--Color--dark--dark);
}
.pf-c-page__sidebar-body,
.pf-v5-c-page__sidebar-body {
  background-color: var(--mov-card);
}

/* Nav items — dark text on white card. */
.pf-c-nav,
.pf-c-nav__list,
.pf-c-nav__item,
.pf-v5-c-nav,
.pf-v5-c-nav__list,
.pf-v5-c-nav__item {
  background: transparent;
}
/* PF5 dark nav draws a light divider under every item; use the card border. */
.pf-v5-c-nav {
  --pf-v5-c-nav__item--before--BorderColor: var(--mov-border);
  --pf-v5-c-nav__link--before--BorderColor: var(--mov-border);
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: rgba(0, 85, 121, 0.10);
}
.pf-c-nav__link,
.pf-v5-c-nav__link {
  color: var(--mov-text) !important;
  background-color: transparent !important;
  --pf-c-nav__link--Color: var(--mov-text);
  --pf-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--Color: var(--mov-text);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
}
.pf-c-nav__link:hover,
.pf-v5-c-nav__link:hover {
  color: var(--mov-brand) !important;
  background-color: rgba(0, 85, 121, 0.06) !important;
}

/* Active item — navy text, soft tinted background, navy left indicator.
   PF4 draws the indicator with ::before, PF5 with ::after. */
.pf-c-nav__link.pf-m-current,
.pf-v5-c-nav__link.pf-m-current {
  color: var(--mov-brand) !important;
  background-color: rgba(0, 85, 121, 0.10) !important;
  font-weight: 600;
  --pf-c-nav__link--m-current--Color: var(--mov-brand);
  --pf-c-nav__link--m-current--BackgroundColor: rgba(0, 85, 121, 0.10);
  --pf-c-nav__link--before--BorderColor: var(--mov-brand);
  --pf-v5-c-nav__link--m-current--Color: var(--mov-brand);
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(0, 85, 121, 0.10);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--mov-brand);
}
.pf-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__link.pf-m-current::after {
  border-left-color: var(--mov-brand) !important;
  border-left-width: 3px !important;
}

/* ------------------------------------------------------------------ */
/* Buttons: navy primary, navy link-style. */
/* ------------------------------------------------------------------ */
.pf-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary {
  background-color: var(--mov-brand) !important;
  --pf-c-button--m-primary--BackgroundColor: var(--mov-brand);
  --pf-c-button--m-primary--hover--BackgroundColor: var(--mov-brand-hover);
  --pf-c-button--m-primary--focus--BackgroundColor: var(--mov-brand-hover);
  --pf-c-button--m-primary--active--BackgroundColor: var(--mov-brand-hover);
  --pf-v5-c-button--m-primary--BackgroundColor: var(--mov-brand);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--mov-brand-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--mov-brand-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--mov-brand-hover);
}
.pf-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:focus,
.pf-c-button.pf-m-primary:active,
.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-color: var(--mov-brand-hover) !important;
}
.pf-c-button.pf-m-link,
.pf-v5-c-button.pf-m-link {
  color: var(--mov-brand) !important;
  --pf-c-button--m-link--Color: var(--mov-brand);
  --pf-v5-c-button--m-link--Color: var(--mov-brand);
}
.pf-c-button.pf-m-link:hover,
.pf-v5-c-button.pf-m-link:hover {
  color: var(--mov-brand-hover) !important;
}

/* ------------------------------------------------------------------ */
/* Page titles (H1) — match the email theme's navy treatment. */
/* ------------------------------------------------------------------ */
.pf-c-title.pf-m-2xl,
.pf-c-title.pf-m-3xl,
.pf-c-title.pf-m-xl,
.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-title.pf-m-3xl,
.pf-v5-c-title.pf-m-xl {
  color: var(--mov-brand);
}

/* ------------------------------------------------------------------ */
/* Page main background — slightly off-white so cards pop. */
/* ------------------------------------------------------------------ */
.pf-c-page__main,
.pf-v5-c-page__main {
  background-color: var(--mov-bg-page);
}

/* Right-rail jump-link indicator — navy. Only the current item's left strip
   gets the navy fill; the track stays its default subtle grey so we don't
   end up painting a navy block behind the link text. */
.pf-c-jump-links__link.pf-m-current::before {
  background-color: var(--mov-brand) !important;
  --pf-c-jump-links__link--before--BackgroundColor: var(--mov-brand);
}
.pf-c-jump-links__link.pf-m-current {
  color: var(--mov-brand);
  --pf-c-jump-links__link--m-current--Color: var(--mov-brand);
}
/* PF5 puts `pf-m-current` on the item, not the link. */
.pf-v5-c-jump-links__item.pf-m-current {
  --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--mov-brand);
  --pf-v5-c-jump-links__item--m-current__link-text--Color: var(--mov-brand);
}