/* Voimar ID account console (account theme, parent keycloak.v3 = the React account console on PatternFly 5).
   Re-styled 29 Oct 2026 to the VOIMAR look (voimar-shared/auth-kit tokens; same fonts and red as the Voimar ID sign-in pages).
   Leonard, 29 Oct 2026: "it needs to be better branded and formatted, it does not align with VOIMAR CSS"
   Leonard, 29 Oct 2026: "style approved but black is way too heavy; keep consistent to app colours and neutral"
   So: white masthead with the VOIMAR badge (theme.properties logo=img/voimar-badge.png, the badge image unchanged), VOIMAR red #CC0000 (exact hex, VOIMAR_BRANDING.md) for
   buttons, links, the active menu marker, tabs and focus; neutral light grey page, white sidebar and white cards; grey ink.
   The masthead, sidebar and menu are built "dark" by the React code (no pf-m-light class), so their own variables are redefined
   here, mirroring the bundle's .pf-m-light blocks. darkMode=false in theme.properties keeps the near-black dark palette off.
   Only PF5 variables and selectors that exist in the 26.7.4 bundle (main-*.css) are used. No italic anywhere. */

@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("../fonts/worksans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --vid-red: #cc0000;
  --vid-red-dark: #a30000;
  --vid-red-tint: rgb(204 0 0 / 0.07);
  --vid-ink: #1f2937;
  --vid-grey-600: #4b5563;
  --vid-grey-500: #6b7280;
  --vid-grey-300: #d1d5db;
  --vid-grey-200: #e5e7eb;
  --vid-grey-100: #f3f4f6;
  --vid-grey-50: #f9fafb;
  --vid-page: #f8f8f9;
  /* field borders: neutral mid grey, 3.38:1 on white (WCAG 1.4.11 needs 3:1 for a field's edge); 7.56:1 on hover */
  --vid-field-border: #868c96;
  --vid-field-border-hover: #4b5563;
  --vid-card-shadow: 0 1px 2px rgb(17 24 39 / 0.04), 0 8px 24px -12px rgb(17 24 39 / 0.12);

  /* PF5 globals are declared under :where(:root), so these win */
  --pf-v5-global--FontFamily--text: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: "Work Sans", "Inter", system-ui, sans-serif;
  --pf-v5-global--FontFamily--text--vf: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --pf-v5-global--FontFamily--heading--vf: "Work Sans", "Inter", system-ui, sans-serif;
  --pf-v5-global--primary-color--100: var(--vid-red);
  --pf-v5-global--primary-color--dark-100: var(--vid-red);
  --pf-v5-global--primary-color--200: var(--vid-red-dark);
  --pf-v5-global--active-color--100: var(--vid-red);
  --pf-v5-global--link--Color: var(--vid-red);
  --pf-v5-global--link--Color--hover: var(--vid-red-dark);
  --pf-v5-global--link--Color--dark: var(--vid-red);
  --pf-v5-global--link--Color--dark--hover: var(--vid-red-dark);
  --pf-v5-global--Color--dark-100: var(--vid-ink);
  --pf-v5-global--Color--dark-200: var(--vid-grey-500);
  --pf-v5-global--BorderColor--dark-100: var(--vid-grey-300);
  --pf-v5-global--BorderColor--300: var(--vid-grey-200);
  --pf-v5-global--BackgroundColor--200: var(--vid-grey-100);
  --pf-v5-global--BackgroundColor--light-300: var(--vid-page);
  /* destructive actions stay red but distinct from the brand red of the primary button */
  --pf-v5-global--danger-color--100: #b91c1c;
  --pf-v5-global--danger-color--200: #991b1b;
  --pf-v5-global--success-color--100: #15803d;
}

body { font-family: var(--pf-v5-global--FontFamily--text); color: var(--vid-ink); background: var(--vid-page); }

/* Loading screen (inline in the parent index.ftl): neutral, not white/black */
.keycloak__loading-container { background-color: var(--vid-page); color: var(--vid-ink); font-family: var(--pf-v5-global--FontFamily--text); }
#loading-text { font-family: var(--pf-v5-global--FontFamily--heading); font-weight: 600; color: var(--vid-grey-600); }

/* ---------- Page ---------- */
.pf-v5-c-page { --pf-v5-c-page--BackgroundColor: var(--vid-page); }

/* ---------- Masthead: white bar, thin VOIMAR-red top line, grey bottom border (was the near-black #151515 bar) ---------- */
.pf-v5-c-masthead {
  --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-v5-c-masthead--BackgroundColor: #ffffff;
  --pf-v5-c-masthead--item-border-color--base: var(--vid-grey-200);
  --pf-v5-c-masthead__main--before--BorderBottomColor: var(--vid-grey-200);
  color: var(--pf-v5-global--Color--100);
  border-top: 3px solid var(--vid-red);
  border-bottom: 1px solid var(--vid-grey-200);
}
/* the bundle flips the plain (hamburger / kebab) buttons to light-on-dark with this selector: flip them back */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
  --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-v5-c-masthead__toggle .pf-v5-c-button.pf-m-plain { --pf-v5-c-button--m-plain--Color: var(--vid-grey-600); --pf-v5-c-button--m-plain--hover--Color: var(--vid-red); }

/* Brand: the VOIMAR badge (voimar-badge.png, unchanged) + "Voimar ID" */
.pf-v5-c-masthead__brand { display: inline-flex; align-items: center; gap: 0.625rem; text-decoration: none; }
.pf-v5-c-masthead__brand img {
  box-sizing: border-box; height: 40px; width: auto; border-radius: 8px; display: block;
}
.pf-v5-c-masthead__brand::after {
  content: "Voimar ID";
  font-family: var(--pf-v5-global--FontFamily--heading);
  font-size: 1.125rem; line-height: 1; font-weight: 700; letter-spacing: -0.01em; color: var(--vid-ink);
  white-space: nowrap;
}

/* Toolbar in the masthead: "Back to <app>" link, user menu, avatar */
.pf-v5-c-masthead .pf-v5-c-toolbar { --pf-v5-c-toolbar--BackgroundColor: transparent; }
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--Color: var(--vid-ink);
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--vid-grey-100);
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: var(--vid-grey-100);
  border-radius: 0.5rem;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before { border-radius: 0.5rem; }
[data-testid="referrer-link"] { font-weight: 600; }

/* Menus (user dropdown and others) */
.pf-v5-c-menu {
  --pf-v5-c-menu--BoxShadow: 0 12px 28px -12px rgb(17 24 39 / 0.22), 0 0 0 1px var(--vid-grey-200);
  --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--vid-grey-100);
  border-radius: 0.5rem;
}

/* ---------- Sidebar + menu: white, grey border, VOIMAR-red marker on the current item (was #212427 / #4f5255) ---------- */
.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-v5-c-page__sidebar--BackgroundColor: #ffffff;
  --pf-v5-c-page__sidebar--BoxShadow: 0 12px 32px -12px rgb(17 24 39 / 0.18);
  color: var(--pf-v5-global--Color--100);
  border-inline-end: 1px solid var(--vid-grey-200);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav__item--before--BorderColor: transparent;
  --pf-v5-c-nav__link--Color: var(--vid-grey-600);
  --pf-v5-c-nav__link--hover--Color: var(--vid-ink);
  --pf-v5-c-nav__link--focus--Color: var(--vid-ink);
  --pf-v5-c-nav__link--active--Color: var(--vid-ink);
  --pf-v5-c-nav__link--m-current--Color: var(--vid-red);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--vid-grey-100);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--vid-grey-100);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--vid-grey-100);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--vid-red-tint);
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--vid-red-tint);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: var(--vid-red);
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--vid-red);
  --pf-v5-c-nav__link--focus--after--BorderColor: var(--vid-red);
  --pf-v5-c-nav__link--active--after--BorderColor: var(--vid-red);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--vid-red);
  --pf-v5-c-nav__subnav__link--hover--after--BorderColor: var(--vid-grey-300);
  --pf-v5-c-nav__subnav__link--focus--after--BorderColor: var(--vid-grey-300);
  --pf-v5-c-nav__subnav__link--active--after--BorderColor: var(--vid-grey-300);
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--vid-red);
  --pf-v5-c-nav__section-title--Color: var(--vid-grey-500);
  --pf-v5-c-nav__link--FontSize: 0.9375rem;
  --pf-v5-c-nav__list--PaddingTop: 0.75rem;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link { border-radius: 0 0.5rem 0.5rem 0; margin-inline-end: 0.75rem; }
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link { font-weight: 600; }

/* ---------- Content: page heading on the grey page, the content in a white card ---------- */
.pf-v5-c-page__main-section.pf-m-light { --pf-v5-c-page__main-section--BackgroundColor: transparent; }
/* Top-level sections only (direct children of <main>): the Signing in page nests one light section per credential type inside
   the content section, and those must not become cards of their own. */
.pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light + .pf-v5-c-page__main-section.pf-m-light {
  --pf-v5-c-page__main-section--BackgroundColor: #ffffff;
  margin: 0 var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
  border: 1px solid var(--vid-grey-200);
  border-radius: 1rem;
  box-shadow: var(--vid-card-shadow);
}
@media (min-width: 1200px) {
  .pf-v5-c-page__main > .pf-v5-c-page__main-section.pf-m-light + .pf-v5-c-page__main-section.pf-m-light { margin: 0 var(--pf-v5-global--spacer--lg) var(--pf-v5-global--spacer--xl); }
}

/* Headings: Work Sans 600 (PF5 default is a light 400) */
.pf-v5-c-title {
  --pf-v5-c-title--FontFamily: var(--pf-v5-global--FontFamily--heading);
  --pf-v5-c-title--m-4xl--FontWeight: 600;
  --pf-v5-c-title--m-3xl--FontWeight: 600;
  --pf-v5-c-title--m-2xl--FontWeight: 600;
  --pf-v5-c-title--m-xl--FontWeight: 600;
  --pf-v5-c-title--m-lg--FontWeight: 600;
  --pf-v5-c-title--m-md--FontWeight: 600;
  letter-spacing: -0.01em;
  color: var(--vid-ink);
}
[data-testid="page-heading"] + .pf-v5-c-content, .pf-v5-c-page__main-section .pf-v5-c-content > p { color: var(--vid-grey-600); }

/* Cards, panels and lists inside the content card: flat, grey lines, rounded */
.pf-v5-c-card {
  --pf-v5-c-card--BoxShadow: none;
  --pf-v5-c-card--m-flat--BorderColor: var(--vid-grey-200);
  border-radius: 0.75rem;
}
.pf-v5-c-data-list {
  --pf-v5-c-data-list--BorderTopColor: var(--vid-grey-200);
  --pf-v5-c-data-list--BorderTopWidth: 1px;
  --pf-v5-c-data-list--sm--BorderTopWidth: 1px;
  --pf-v5-c-data-list__item--BorderBottomColor: var(--vid-grey-200);
}

/* ---------- Buttons: 8px radius, 600 weight; one red primary, outlined secondary ---------- */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 0.5rem;
  --pf-v5-c-button--after--BorderRadius: 0.5rem;
  --pf-v5-c-button--FontWeight: 600;
}
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--vid-red);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--vid-red-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--vid-red-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--vid-red-dark);
  --pf-v5-c-button--m-primary--Color: #ffffff;
}
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--vid-red);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--vid-red);
  --pf-v5-c-button--m-secondary--hover--Color: var(--vid-red-dark);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--vid-red-dark);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: rgb(204 0 0 / 0.06);
}
.pf-v5-c-button:disabled, .pf-v5-c-button.pf-m-disabled, .pf-v5-c-button.pf-m-aria-disabled { opacity: 0.55; }

/* ---------- Forms: auth-kit inputs (1px mid-grey border all round, 8px radius, red border + 2px red focus outline) ---------- */
.pf-v5-c-form__label { color: var(--vid-grey-600); }
.pf-v5-c-form__label-text { --pf-v5-c-form__label-text--FontWeight: 600; }
.pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderTopColor: var(--vid-field-border);
  --pf-v5-c-form-control--before--BorderRightColor: var(--vid-field-border);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--vid-field-border);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--vid-field-border);
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-success--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--inset--base: 0.75rem;
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--vid-grey-50);
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--vid-grey-50);
  border-radius: 0.5rem;
  transition: box-shadow 0.15s;
}
.pf-v5-c-form-control::before, .pf-v5-c-form-control::after { border-radius: inherit; }
.pf-v5-c-form-control:hover {
  --pf-v5-c-form-control--before--BorderTopColor: var(--vid-field-border-hover);
  --pf-v5-c-form-control--before--BorderRightColor: var(--vid-field-border-hover);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--vid-field-border-hover);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--vid-field-border-hover);
}
.pf-v5-c-form-control:focus-within, .pf-v5-c-form-control.pf-m-error {
  --pf-v5-c-form-control--before--BorderTopColor: var(--vid-red);
  --pf-v5-c-form-control--before--BorderRightColor: var(--vid-red);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--vid-red);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--vid-red);
}
/* Focus indicator: a 2px VOIMAR-red outline 2px outside the field (5.9:1 on white), so a focused error field still differs from
   an unfocused one, and it survives Windows high-contrast mode (box-shadows are dropped there). Read-only fields get a grey one. */
.pf-v5-c-form-control:focus-within { outline: 2px solid var(--vid-red); outline-offset: 2px; }
.pf-v5-c-form-control.pf-m-readonly:focus-within { outline-color: var(--vid-grey-500); }
.pf-v5-c-form-control > :is(input, select, textarea):focus { outline: none; }

/* ---------- Tabs, alerts, avatar ---------- */
.pf-v5-c-tabs { --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--vid-red); }
.pf-v5-c-alert {
  --pf-v5-c-alert--m-success--BorderTopColor: #15803d;
  --pf-v5-c-alert--m-danger--BorderTopColor: #b91c1c;
  border-radius: 0.5rem;
}

/* Keyboard focus: solid VOIMAR red ring, never a black box (5.9:1 on white, 5.2:1 on the red-tint menu item; a see-through red
   fails the 3:1 a focus indicator needs) */
:where(a, button, [role="button"], summary):focus-visible { outline: 2px solid var(--vid-red); outline-offset: 2px; }

/* ---------- Phones: badge only (no product text) when the masthead is very narrow ---------- */
@media (max-width: 360px) {
  .pf-v5-c-masthead__brand::after { display: none; }
}