/*
 * FEEC family account console: keycloak.v3 (React, PatternFly 5) restyled with the FEEC family
 * brand, like the sign-in pages (login/resources/css/feec.css: keep the two in sync;
 * values from @feec-asia/tokens).
 * Amber accent (a fill only, with near-black text),
 * slate neutrals, IBM Plex, and the always-dark navy header of the web app shell with the dark
 * lockup; the side navigation is a light (or, in dark mode, slate) surface with a border.
 * Dark mode follows keycloak.v3: its script sets .pf-v5-theme-dark on <html> from
 * prefers-color-scheme.
 * Only PatternFly class names and custom properties are used (the React build's own class
 * names are hashed and change between Keycloak versions).
 */

/* IBM Plex, self-hosted (Keycloak serves theme resources itself; no third-party font host).
   Latin subset, from @fontsource/ibm-plex-sans and -mono 5.3.0; SIL OFL 1.1, licence texts in
   ../fonts/. A copy of these files lives in login/resources/fonts (resources are per theme type). */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}

:root {
  --feec-bg: #ffffff;
  --feec-surface: #ffffff;
  --feec-surface-hover: #f1f5f9;
  --feec-surface-sunken: #f1f5f9;
  --feec-border: #e2e8f0;
  --feec-control-border: #7f8ea3; /* 3.3:1 on white (WCAG 1.4.11) */
  --feec-text: #0f172a;
  --feec-text-muted: #475569; /* 7.6:1 on white */
  --feec-primary: #f59e0b; /* amber fill */
  --feec-primary-hover: #fbbf24;
  --feec-on-primary: #020617; /* 9.4:1 on #f59e0b */
  --feec-ink: #b45309; /* accent as text, links, focus: 5.0:1 on white */
  --feec-danger: #b91c1c; /* 6.5:1 on white */
  --feec-success: #15803d;
  --feec-radius-sm: 6px; /* buttons */
  --feec-radius-md: 8px; /* inputs, alerts */
  --feec-radius-lg: 12px; /* cards, panels */
  --feec-font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --feec-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "SFMono-Regular", Consolas,
    monospace;
  --feec-logo-height: 28px;

  /* always-dark navy header (palette.feec), the same in both schemes */
  --feec-navy: #050a14;
  --feec-navy-raised: #1e293b;
  --feec-navy-border: #1e293b;
  --feec-navy-text: #f1f5f9; /* 18:1 on navy */
  --feec-navy-muted: #94a3b8; /* 7.7:1 on navy */
  --feec-navy-ink: #fbbf24; /* focus ring on navy */

  --pf-v5-global--FontFamily--text: var(--feec-font);
  --pf-v5-global--FontFamily--heading: var(--feec-font);
  --pf-v5-global--FontFamily--text--vf: var(--feec-font);
  --pf-v5-global--FontFamily--heading--vf: var(--feec-font);
  --pf-v5-global--FontFamily--monospace: var(--feec-font-mono);
  --pf-v5-global--FontFamily--monospace--vf: var(--feec-font-mono);
}

:root.pf-v5-theme-dark {
  --feec-bg: #020617;
  --feec-surface: #0f172a;
  --feec-surface-hover: #1e293b;
  --feec-surface-sunken: #020617;
  --feec-border: #1e293b;
  --feec-control-border: #64748b; /* 3.7:1 on the dark surface */
  --feec-text: #f1f5f9;
  --feec-text-muted: #94a3b8;
  --feec-primary: #f59e0b;
  --feec-primary-hover: #fbbf24;
  --feec-on-primary: #020617;
  --feec-ink: #fbbf24; /* 10.7:1 on the dark surface */
  --feec-danger: #f87171;
  --feec-success: #4ade80;
}

/* PatternFly's "primary colour" mostly paints text, icons and active indicators, so it gets the
   ink; the solid primary button is set separately below (amber fill, dark text). */
:root,
:root.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--feec-ink);
  --pf-v5-global--primary-color--200: var(--feec-ink);
  --pf-v5-global--primary-color--dark-100: var(--feec-ink);
  --pf-v5-global--active-color--100: var(--feec-ink);
  --pf-v5-global--link--Color: var(--feec-ink);
  --pf-v5-global--link--Color--hover: var(--feec-ink);
  --pf-v5-global--link--Color--dark: var(--feec-ink);
  --pf-v5-global--link--Color--dark--hover: var(--feec-ink);
  --pf-v5-global--link--Color--visited: var(--feec-ink);
  --pf-v5-global--BackgroundColor--100: var(--feec-surface);
  --pf-v5-global--BackgroundColor--200: var(--feec-bg);
  --pf-v5-global--BackgroundColor--light-100: var(--feec-surface);
  --pf-v5-global--Color--100: var(--feec-text);
  --pf-v5-global--Color--200: var(--feec-text-muted);
  --pf-v5-global--BorderColor--100: var(--feec-border);
  --pf-v5-global--danger-color--100: var(--feec-danger);
  --pf-v5-global--danger-color--200: var(--feec-danger);
  --pf-v5-global--success-color--100: var(--feec-success);
  --pf-v5-global--success-color--200: var(--feec-success);
  --pf-v5-global--BorderRadius--sm: var(--feec-radius-sm);
}

body {
  font-family: var(--feec-font);
  color: var(--feec-text);
  background: var(--feec-bg);
  -webkit-font-smoothing: antialiased;
}

/* --- page --------------------------------------------------------------------------------- */

.pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: var(--feec-bg);
  --pf-v5-c-page__main-section--BackgroundColor: var(--feec-bg);
  --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--feec-surface);
  background-color: var(--feec-bg);
}

.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--feec-surface);
}

.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2 {
  font-family: var(--feec-font);
  color: var(--feec-text);
}

.pf-v5-c-title.pf-m-2xl,
.pf-v5-c-content h1 {
  font-size: 1.5rem;
  font-weight: 600;
}

/* --- header (masthead): the always-dark navy bar of the web app shell -------------------- */

:root .pf-v5-c-masthead.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--feec-navy);
  --pf-v5-c-masthead--item-border-color--base: var(--feec-navy-border);
  --pf-v5-c-masthead--m-display-inline__main--MinHeight: 3.75rem;
  --pf-v5-c-masthead--m-display-inline__content--MinHeight: 3.75rem;
  --pf-v5-c-masthead__main--MinHeight: 3.75rem;
  --pf-v5-c-masthead__content--MinHeight: 3.75rem;
  --pf-v5-global--icon--Color--light: var(--feec-navy-muted);
  --pf-v5-global--icon--Color--dark: var(--feec-navy-text);
  background-color: var(--feec-navy);
  color: var(--feec-navy-text);
  border-bottom: 1px solid var(--feec-navy-border);
}

/* PatternFly's dark palette paints the toolbar inside the masthead black */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead__content {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
  --pf-v5-c-toolbar__content--BackgroundColor: transparent;
  background-color: transparent;
}

/* the lockup links back to the web app (theme.properties logoUrl). theme.properties points
   `logo` at the kit's dark lockup: the header is navy in both schemes. */
.pf-v5-c-masthead__brand {
  display: inline-flex;
  align-items: center;
  border-radius: var(--feec-radius-sm);
}

.pf-v5-c-masthead__brand img {
  display: block;
  height: var(--feec-logo-height);
  width: auto;
}

/* user menu toggle on navy */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--Color: var(--feec-navy-text);
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--hover--Color: var(--feec-navy-text);
  --pf-v5-c-menu-toggle--expanded--Color: var(--feec-navy-text);
  --pf-v5-c-menu-toggle--BorderRadius: var(--feec-radius-sm);
  --pf-v5-c-menu-toggle--before--BorderTopColor: var(--feec-navy-border);
  --pf-v5-c-menu-toggle--before--BorderRightColor: var(--feec-navy-border);
  --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--feec-navy-border);
  --pf-v5-c-menu-toggle--before--BorderLeftColor: var(--feec-navy-border);
  --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--expanded--after--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle__toggle-icon--Color: var(--feec-navy-muted);
  color: var(--feec-navy-text);
  border-radius: var(--feec-radius-sm);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain):hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-expanded {
  background-color: var(--feec-navy-raised);
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain {
  --pf-v5-c-button--m-plain--Color: var(--feec-navy-muted);
  --pf-v5-c-button--m-plain--hover--Color: var(--feec-navy-text);
  --pf-v5-c-menu-toggle--m-plain--Color: var(--feec-navy-muted);
  --pf-v5-c-menu-toggle--m-plain--hover--Color: var(--feec-navy-text);
  color: var(--feec-navy-muted);
}

.pf-v5-c-masthead__brand:focus-visible,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:focus-visible,
.pf-v5-c-masthead .pf-v5-c-button:focus-visible {
  outline: 2px solid var(--feec-navy-ink);
  outline-offset: 2px;
}

/* the user menu opens inline inside the masthead: give it the page surface and text back */
.pf-v5-c-masthead .pf-v5-c-menu,
.pf-v5-c-masthead .pf-v5-c-dropdown__menu {
  --pf-v5-c-menu--BackgroundColor: var(--feec-surface);
  --pf-v5-c-menu__item--Color: var(--feec-text);
  --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--feec-surface-hover);
  --pf-v5-global--Color--100: var(--feec-text);
  --pf-v5-global--Color--200: var(--feec-text-muted);
  background-color: var(--feec-surface);
  color: var(--feec-text);
  border: 1px solid var(--feec-border);
  border-radius: var(--feec-radius-md);
}

/* --- side navigation: light surface, rounded items, current item highlighted -------------- */

:root .pf-v5-c-page__sidebar.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--feec-surface);
  --pf-v5-global--Color--100: var(--feec-text);
  --pf-v5-global--Color--200: var(--feec-text-muted);
  --pf-v5-global--BorderColor--100: var(--feec-border);
  --pf-v5-global--BackgroundColor--100: var(--feec-surface);
  color: var(--feec-text);
  border-inline-end: 1px solid var(--feec-border);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav__item--before--BorderColor: transparent;
  --pf-v5-c-nav__item--before--BorderWidth: 0;
  --pf-v5-c-nav__link--Color: var(--feec-text);
  --pf-v5-c-nav__link--hover--Color: var(--feec-text);
  --pf-v5-c-nav__link--focus--Color: var(--feec-text);
  --pf-v5-c-nav__link--active--Color: var(--feec-text);
  --pf-v5-c-nav__link--m-current--Color: var(--feec-text);
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--feec-surface-hover);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--feec-surface-hover);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--feec-surface-hover);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--feec-surface-hover);
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--feec-surface-hover);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--m-current--after--BorderColor: transparent;
  --pf-v5-c-nav__subnav__link--hover--after--BorderColor: transparent;
  --pf-v5-c-nav__subnav__link--focus--after--BorderColor: transparent;
  --pf-v5-c-nav__subnav__link--active--after--BorderColor: transparent;
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: transparent;
  --pf-v5-c-nav__link--FontSize: 0.9375rem;
  --pf-v5-c-nav__link--PaddingTop: 0.5rem;
  --pf-v5-c-nav__link--PaddingBottom: 0.5rem;
  --pf-v5-c-nav__link--PaddingLeft: 0.75rem;
  --pf-v5-c-nav__link--PaddingRight: 0.75rem;
  --pf-v5-c-nav__subnav--PaddingLeft: 0.75rem;
  background: transparent;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__list {
  padding: 0.75rem;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  border-radius: var(--feec-radius-sm);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--feec-ink); /* active indicator: accent ink */
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle-icon {
  color: var(--feec-text-muted);
}

/* --- form fields (web app inputs: one 1 px border, 8 px radius) ------------------------------ */

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--feec-text);
}

.pf-v5-c-form-control {
  border: 1px solid var(--feec-control-border);
  border-radius: var(--feec-radius-md);
  --pf-v5-c-form-control--BackgroundColor: var(--feec-surface);
  --pf-v5-c-form-control--Color: var(--feec-text);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border: 0;
}

.pf-v5-c-form-control:hover {
  border-color: var(--feec-text-muted);
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--feec-ink);
  outline: 2px solid var(--feec-ink);
  outline-offset: 1px;
}

.pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline: none;
}

.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control.pf-m-disabled {
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--feec-surface-sunken);
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--feec-surface-sunken);
  --pf-v5-c-form-control--m-disabled--Color: var(--feec-text-muted);
  border-color: var(--feec-border);
}

.pf-v5-c-form-control.pf-m-error {
  border-color: var(--feec-danger);
}

/* --- buttons (web app Button: 6 px radius, medium weight, amber fill with dark text) ------- */

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--feec-radius-sm);
  --pf-v5-c-button--after--BorderRadius: var(--feec-radius-sm);
  --pf-v5-c-button--FontWeight: 500;
  --pf-v5-c-button--m-primary--BackgroundColor: var(--feec-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--feec-primary-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--feec-primary-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--feec-primary-hover);
  --pf-v5-c-button--m-primary--Color: var(--feec-on-primary);
  --pf-v5-c-button--m-primary--hover--Color: var(--feec-on-primary);
  --pf-v5-c-button--m-primary--focus--Color: var(--feec-on-primary);
  --pf-v5-c-button--m-primary--active--Color: var(--feec-on-primary);
  --pf-v5-c-button--m-secondary--Color: var(--feec-text);
  --pf-v5-c-button--m-secondary--hover--Color: var(--feec-text);
  --pf-v5-c-button--m-secondary--focus--Color: var(--feec-text);
  --pf-v5-c-button--m-secondary--active--Color: var(--feec-text);
  --pf-v5-c-button--m-secondary--BackgroundColor: var(--feec-surface);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--feec-surface-hover);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--feec-control-border);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--feec-control-border);
  --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--feec-control-border);
  --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--feec-control-border);
  --pf-v5-c-button--hover--after--BorderWidth: 1px;
  --pf-v5-c-button--focus--after--BorderWidth: 1px;
  --pf-v5-c-button--active--after--BorderWidth: 1px;
  --pf-v5-c-button--m-link--Color: var(--feec-ink);
  --pf-v5-c-button--m-link--hover--Color: var(--feec-ink);
  /* fixed dark red in both schemes: white text on the dark-mode danger ink would be 2.8:1 */
  --pf-v5-c-button--m-danger--BackgroundColor: #b91c1c;
  --pf-v5-c-button--m-danger--hover--BackgroundColor: #991b1b;
  --pf-v5-c-button--m-danger--Color: #ffffff;
  --pf-v5-c-button--m-danger--hover--Color: #ffffff;
}

/* --- links, focus --------------------------------------------------------------------------- */

a {
  color: var(--feec-ink);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--feec-ink);
  text-decoration-thickness: 2px;
}

a:focus-visible,
button:focus-visible,
.pf-v5-c-button:focus-visible,
.pf-v5-c-menu-toggle:focus-visible,
.pf-v5-c-nav__link:focus-visible {
  outline: 2px solid var(--feec-ink);
  outline-offset: 2px;
  border-radius: var(--feec-radius-sm);
}

/* --- cards and data lists (Signing in, Device activity, Applications) ---------------------- */

.pf-v5-c-card,
.pf-v5-c-data-list {
  --pf-v5-c-card--BackgroundColor: var(--feec-surface);
  --pf-v5-c-data-list__item--BackgroundColor: var(--feec-surface);
  --pf-v5-c-data-list__item--BorderBottomColor: var(--feec-border);
  --pf-v5-c-data-list--BorderTopColor: var(--feec-border);
}

.pf-v5-c-card {
  border: 1px solid var(--feec-border);
  border-radius: var(--feec-radius-lg);
  box-shadow: none;
}

.pf-v5-c-data-list {
  border: 1px solid var(--feec-border);
  border-radius: var(--feec-radius-lg);
  overflow: hidden;
}

.pf-v5-c-alert {
  border-radius: var(--feec-radius-md);
}

/* --- small screens ---------------------------------------------------------------------------- */

/* one header row on phones too (PatternFly stacks the user menu under the logo) */
@media (max-width: 767.98px) {
  :root .pf-v5-c-masthead.pf-v5-c-masthead {
    --pf-v5-c-masthead--GridTemplateColumns: max-content max-content 1fr;
    --pf-v5-c-masthead__content--GridColumn: 3;
    --pf-v5-c-masthead__content--Order: 0;
    --pf-v5-c-masthead__content--MinHeight: 3.5rem;
    --pf-v5-c-masthead__content--MarginLeft: 0.5rem;
    --pf-v5-c-masthead__content--PaddingTop: 0;
    --pf-v5-c-masthead__content--PaddingBottom: 0;
  }
}

@media (max-width: 480px) {
  :root {
    --feec-logo-height: 24px; /* kit minimum for the horizontal lockup */
  }
}

@media (pointer: coarse) {
  .pf-v5-c-button.pf-m-primary,
  .pf-v5-c-button.pf-m-secondary {
    min-height: 2.75rem;
  }
}