/* Bootstack account theme — the site's design tokens applied to Keycloak's
 * account console.
 *
 * Source of truth for every value here is packages/ui/src/tokens.css, and the
 * block structure deliberately mirrors ../../../login/resources/css/bootstack.css
 * so the two Keycloak surfaces cannot drift apart: a visitor reaches the sign-in
 * page and this console from the same launcher, one click apart.
 *
 * The console is a React application on PatternFly v5, the same design system
 * keycloak.v2's login page uses, so the same variable remap works on both. The
 * dark switch is also the same: index.ftl puts `pf-v5-theme-dark` on <html> from
 * prefers-color-scheme, and the dark palette below hangs off that class rather
 * than off a second media query that could disagree with it for a frame.
 *
 * Loaded AFTER the console's own built stylesheet (index.ftl renders
 * `entryStyles` first, then this), so no `!important` is needed anywhere.
 */

/* ------------------------------------------------------------- 1. tokens -- */

:root {
  --bootstack-page: #f4f7fb;
  --bootstack-surface: #ffffff;
  --bootstack-surface-sunken: #eaf0f7;
  --bootstack-line: #d6deea;
  --bootstack-line-strong: #7f8fab;
  --bootstack-ink: #0b192e;
  --bootstack-ink-muted: #4d5878;
  --bootstack-accent: #097560;
  --bootstack-accent-ink: #ffffff;
  --bootstack-accent-quiet: #e6f6f0;
  --bootstack-shadow: 0 1px 2px rgb(28 25 23 / 6%), 0 8px 24px -16px rgb(28 25 23 / 24%);

  --bootstack-radius: 10px;
  --bootstack-font:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;
}

/* `:root.pf-v5-theme-dark` and not a bare `.pf-v5-theme-dark`: PatternFly
 * declares its dark values under `:where(.pf-v5-theme-dark)`, which has zero
 * specificity, so a plain `:root` override would win in dark mode too and dark
 * would never arrive. Same trap, same answer as the login theme. */
:root.pf-v5-theme-dark {
  --bootstack-page: #0b192e;
  --bootstack-surface: #182b45;
  --bootstack-surface-sunken: #0b3341;
  --bootstack-line: #20395f;
  --bootstack-line-strong: #617099;
  --bootstack-ink: #cdd7f5;
  --bootstack-ink-muted: #a5b0d0;
  --bootstack-accent: #0cc9ab;
  --bootstack-accent-ink: #0b192e;
  --bootstack-accent-quiet: #0e3a37;
  --bootstack-shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -16px rgb(0 0 0 / 70%);
}

/* --------------------------------------------- 2. PatternFly, remapped -- */

:root,
:root.pf-v5-theme-dark {
  /* Type. Dropping the Red Hat families also drops the only webfonts this page
     would load; ADR 0014 forbids external font hosts and a system stack is
     both faster and what every other Bootstack surface uses. */
  --pf-v5-global--FontFamily--text: var(--bootstack-font);
  --pf-v5-global--FontFamily--heading: var(--bootstack-font);
  --pf-v5-global--FontFamily--redhatVF--text: var(--bootstack-font);
  --pf-v5-global--FontFamily--redhatVF--heading: var(--bootstack-font);
  --pf-v5-global--FontFamily--redhatFont--text: var(--bootstack-font);
  --pf-v5-global--FontFamily--redhatFont--heading: var(--bootstack-font);

  /* Accent. This is the line that turns Keycloak blue into Bootstack teal on
     links, focus rings, the selected navigation item and the tick marks. */
  --pf-v5-global--primary-color--100: var(--bootstack-accent);
  --pf-v5-global--primary-color--200: var(--bootstack-accent);
  --pf-v5-global--primary-color--light-100: var(--bootstack-accent);
  --pf-v5-global--primary-color--dark-100: var(--bootstack-accent);
  --pf-v5-global--active-color--100: var(--bootstack-accent);
  --pf-v5-global--link--Color: var(--bootstack-accent);
  --pf-v5-global--link--Color--hover: var(--bootstack-accent);
  --pf-v5-global--link--Color--light: var(--bootstack-accent);

  /* Surfaces and ink. */
  --pf-v5-global--BackgroundColor--100: var(--bootstack-surface);
  --pf-v5-global--BackgroundColor--200: var(--bootstack-surface-sunken);
  --pf-v5-global--Color--100: var(--bootstack-ink);
  --pf-v5-global--Color--200: var(--bootstack-ink-muted);
  --pf-v5-global--BorderColor--100: var(--bootstack-line);
  --pf-v5-global--BorderColor--200: var(--bootstack-line-strong);
  --pf-v5-global--BorderColor--300: var(--bootstack-line);
  --pf-v5-global--BorderRadius--sm: var(--bootstack-radius);
}

/* ------------------------------------------------- 3. what tokens miss -- */

/* The page ground. The console paints its own body colour from
   --pf-v5-global--BackgroundColor--200 in light mode, which the remap above
   already moves; this states it so a viewport taller than the content does not
   end in a strip of PatternFly grey. */
body {
  background-color: var(--bootstack-page);
  color: var(--bootstack-ink);
  font-family: var(--bootstack-font);
}

/* The content column paints its own ground and does not inherit the body's, so
 * light mode showed pure white where every other Bootstack surface stands on
 * the paper #f4f7fb, and dark mode showed PatternFly's rgb(27,29,33) beside a
 * navy sidebar -- two different darks with a seam down the middle. */
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background-color: var(--bootstack-page);
}

/* The masthead. keycloak.v3 paints it near-black in both themes; the brand's
   navy is the ground every other Bootstack sign-in surface stands on, and the
   mark in theme.properties is drawn on exactly that navy. */
.pf-v5-c-masthead {
  background-color: #0b192e;
  border-bottom: 1px solid var(--bootstack-line);
}

/* ...and the two children that paint OVER it. Measured from the rendered pixels
 * rather than from getComputedStyle, which is what caught this: the masthead
 * element itself reported the navy correctly while the page still showed
 * rgb(21,21,21) across the middle of the bar, because PatternFly gives
 * `__content` and the toolbar inside it their own opaque ground. Only the strip
 * to the right of the toolbar was ever navy. */
.pf-v5-c-masthead__content,
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content {
  background-color: transparent;
}

.pf-v5-c-masthead__brand img,
.pf-v5-c-brand {
  height: 2rem;
  width: auto;
}

/* The side navigation, painted the SAME navy. PatternFly gives the page
 * sidebar its own near-black (#151515) independently of the masthead, and the
 * two blacks meeting at the top-left corner is the seam that made the branded
 * masthead read as a patch on somebody else's application -- measured on the
 * first render of this theme, 2026-08-21. One colour for the whole chrome. */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav {
  background-color: #0b192e;
}

/* The selected item. PatternFly marks it with a lighter fill and a left rule;
 * the fill has to move with the ground above or it becomes the only grey block
 * on the page, and the rule takes the brand teal rather than PatternFly blue.
 *
 * The SUB-item needs the descendant selectors as well: a bare
 * `.pf-v5-c-nav__link.pf-m-current` wins for the top-level item and loses to
 * PatternFly's own `.pf-v5-c-nav__subnav .pf-v5-c-nav__link.pf-m-current`, which
 * is exactly the state the first render showed -- `Kontosicherheit` navy and
 * `Anmeldung` under it still rgb(79,82,85). */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--BackgroundColor: #182b45;
  --pf-v5-c-nav__link--hover--BackgroundColor: #182b45;
  --pf-v5-c-nav__link--focus--BackgroundColor: #182b45;
  --pf-v5-c-nav__link--active--BackgroundColor: #182b45;
}

.pf-v5-c-nav .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__subnav .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav .pf-v5-c-nav__link:hover,
.pf-v5-c-nav .pf-v5-c-nav__link:focus {
  background-color: #182b45;
}

.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::before {
  border-left-color: #0cc9ab;
}

/* Primary action, matched to .button in packages/ui/src/tokens.css and to the
 * login theme's submit button.
 *
 * NOT --bootstack-accent. The accent is #097560 in light mode and the estate's
 * primary action is #0cc9ab with navy ink in BOTH themes; tokens.css says so
 * explicitly. Before this rule `Speichern` painted rgb(0,102,204) — PatternFly
 * blue-400, measured on the live console on 2026-08-21 — on a product whose
 * primary is teal. */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--Color: #0b192e;
  --pf-v5-c-button--m-primary--BackgroundColor: #0cc9ab;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #0ab99d;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #0ab99d;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #0ab99d;
  border-radius: var(--bootstack-radius);
  font-weight: 600;
}

/* Dark mode has its own hover value in tokens.css, and the same ink. */
:root.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #4fd8c0;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #4fd8c0;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #4fd8c0;
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--bootstack-accent);
  --pf-v5-c-button--m-secondary--BorderColor: var(--bootstack-accent);
  border-radius: var(--bootstack-radius);
}

/* The destructive action on `Angemeldete Geräte` keeps PatternFly's red: it is
 * the one colour on this page that must not be brand-coloured. Stated so a
 * later pass does not "finish the job" by teal-ing it. */

/* Cards and the panels the console lays its sections out in. */
.pf-v5-c-card,
.pf-v5-c-panel {
  background-color: var(--bootstack-surface);
  border-radius: var(--bootstack-radius);
}

/* --------------------------------------------------- touch targets, 44px -- */

/* WCAG 2.5.5 asks 44x44 CSS px and every page on bootstack.app meets it. Same
 * treatment as the login theme: PatternFly sizes form controls from one
 * variable, and the inner control needs its own floor because the variable
 * lands on the wrapper. */
:root,
:root.pf-v5-theme-dark {
  --pf-v5-c-form-control--Height: 2.75rem;
  --pf-v5-c-form-control--m-textarea--Height: auto;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form__group-control .pf-v5-c-button,
.pf-v5-c-form__actions .pf-v5-c-button {
  min-height: 2.75rem;
}

/* One focus treatment for the whole page, the site's. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--bootstack-accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .pf-v5-c-button,
  a {
    transition:
      filter 120ms ease,
      border-color 120ms ease;
  }
}