/* =====================================================================
   modern-base — account & admin consoles (PatternFly 5).
   A neutral light/dark look driven by --t-* tokens, the same idea as the
   login theme's base.css. Child themes load their own stylesheet after
   this one and override tokens (and add flourishes).

   Both consoles lazy-load PatternFly CSS chunks *after* theme styles, so
   component rules are prefixed with `html` to win on specificity, and the
   token blocks use `html:root` / `html.pf-v5-theme-dark:root`.
   ===================================================================== */

html:root {
  color-scheme: light;

  /* typography */
  --t-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-font-heading: var(--t-font);
  --t-heading-tracking: -0.015em;

  /* page & surfaces */
  --t-page-bg: #f5f6f8;
  --t-page-backdrop: none;              /* extra background layers on body (e.g. gradients) */
  --t-surface: #ffffff;                 /* cards, tables, menus, modals */
  --t-surface-2: #f0f2f5;               /* hover, striped rows, raised */
  --t-chrome-bg: #ffffff;               /* sidebar */
  --t-masthead-bg: #15171c;             /* top bar: PatternFly treats it as a dark area
                                           (light text, Keycloak's light logo), so keep it dark */
  --t-masthead-border: transparent;
  --t-chrome-backdrop: none;            /* e.g. blur(20px) for glass chrome */
  --t-border: #e4e6eb;
  --t-border-strong: #d3d7de;

  /* text */
  --t-fg: #14161a;
  --t-fg-muted: #5d6370;
  --t-fg-disabled: #9aa1ad;

  /* accent */
  --t-accent: #2f6fed;
  --t-accent-hover: #1f5ad4;
  --t-accent-fg: #ffffff;
  --t-accent-soft: rgb(47 111 237 / 0.1);   /* current nav item, focus rings, labels */
  --t-link: var(--t-accent);
  --t-link-hover: var(--t-accent-hover);
  --t-btn-primary-bg: var(--t-accent);
  --t-btn-primary-bg-hover: var(--t-accent-hover);

  /* inputs */
  --t-input-bg: #ffffff;
  --t-input-border: var(--t-border-strong);
  --t-input-border-hover: #aab0bb;
  --t-focus-ring: 0 0 0 3px var(--t-accent-soft);

  /* shape */
  --t-radius: 10px;
  --t-radius-lg: 14px;
  --t-card-shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 8px 24px -12px rgb(16 24 40 / 0.12);
}

html.pf-v5-theme-dark:root {
  color-scheme: dark;

  --t-page-bg: #0d0f12;
  --t-surface: #15181d;
  --t-surface-2: #1c2026;
  --t-chrome-bg: #111317;
  --t-masthead-bg: #111317;
  --t-masthead-border: #262a31;
  --t-border: #262a31;
  --t-border-strong: #343a43;

  --t-fg: #eceef2;
  --t-fg-muted: #9aa1ad;
  --t-fg-disabled: #646b77;

  --t-accent: #5b8ff9;
  --t-accent-hover: #7aa5fb;
  --t-accent-fg: #0b1020;
  --t-accent-soft: rgb(91 143 249 / 0.16);

  --t-input-bg: #0f1115;
  --t-input-border-hover: #4b525d;
  --t-card-shadow: 0 16px 32px -16px rgb(0 0 0 / 0.6);
}

/* ---------- PatternFly global mapping ---------- */
html:root,
html.pf-v5-theme-dark:root {
  --pf-v5-global--FontFamily--text: var(--t-font);
  --pf-v5-global--FontFamily--text--vf: var(--t-font);
  --pf-v5-global--FontFamily--heading: var(--t-font-heading);
  --pf-v5-global--FontFamily--heading--vf: var(--t-font-heading);

  --pf-v5-global--primary-color--100: var(--t-accent);
  --pf-v5-global--primary-color--200: var(--t-accent-hover);
  --pf-v5-global--primary-color--300: var(--t-accent);
  --pf-v5-global--link--Color: var(--t-link);
  --pf-v5-global--link--Color--hover: var(--t-link-hover);
  --pf-v5-global--link--Color--visited: var(--t-link);
  --pf-v5-global--link--Color--dark: var(--t-link);
  --pf-v5-global--link--Color--dark--hover: var(--t-link-hover);
  --pf-v5-global--active-color--100: var(--t-accent);
  --pf-v5-global--active-color--300: var(--t-accent);
  --pf-v5-global--active-color--400: var(--t-accent);

  --pf-v5-global--Color--100: var(--t-fg);
  --pf-v5-global--Color--200: var(--t-fg-muted);
  --pf-v5-global--BorderColor--100: var(--t-border);
  --pf-v5-global--BorderColor--200: var(--t-border-strong);
  --pf-v5-global--BorderColor--300: var(--t-border);

  --pf-v5-global--BackgroundColor--100: var(--t-surface);
  --pf-v5-global--BackgroundColor--150: var(--t-surface-2);
  --pf-v5-global--BackgroundColor--200: var(--t-page-bg);
  --pf-v5-global--BackgroundColor--300: var(--t-surface);
  --pf-v5-global--BackgroundColor--400: var(--t-surface-2);
  --pf-v5-global--BackgroundColor--light-100: var(--t-surface);
  --pf-v5-global--BackgroundColor--light-200: var(--t-page-bg);
  --pf-v5-global--BackgroundColor--light-300: var(--t-surface-2);
  --pf-v5-global--BackgroundColor--dark-100: var(--t-surface);
  --pf-v5-global--BackgroundColor--dark-200: var(--t-page-bg);
  --pf-v5-global--BackgroundColor--dark-300: var(--t-surface);
  --pf-v5-global--BackgroundColor--dark-400: var(--t-surface-2);
  --pf-v5-global--disabled-color--100: var(--t-fg-disabled);
  --pf-v5-global--disabled-color--200: var(--t-surface-2);
  --pf-v5-global--disabled-color--300: var(--t-surface-2);

  --pf-v5-global--BorderRadius--sm: var(--t-radius);
  --pf-v5-global--BorderRadius--lg: var(--t-radius-lg);
}

::selection { background: var(--t-accent-soft); }

/* ---------- page ---------- */
html,
html body {
  background-color: var(--t-page-bg);
}
html body {
  background: var(--t-page-backdrop), var(--t-page-bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}

html .keycloak__loading-container {
  background: transparent !important;
  color: var(--t-fg) !important;
}

html .pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: transparent;
  background: transparent;
}

html :is(.pf-v5-c-page__main, .pf-v5-c-page__main-container, .pf-v5-c-page__main-group,
         .pf-v5-c-page__main-section, .pf-v5-c-page__main-tabs, .pf-v5-c-page__main-breadcrumb,
         .pf-v5-c-page__main-nav) {
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
  --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent;
  --pf-v5-c-page__main-breadcrumb--BackgroundColor: transparent;
  --pf-v5-c-page__main-tabs--BackgroundColor: transparent;
  --pf-v5-c-page__main-nav--BackgroundColor: transparent;
  background-color: transparent;
}

/* sticky bars (admin Save/Revert etc.) need a backing so content doesn't show through */
html .pf-v5-c-page__main-section:is(.pf-m-sticky-bottom, .pf-m-sticky-top),
html .pf-v5-c-page__main-group:is(.pf-m-sticky-bottom, .pf-m-sticky-top),
html .pf-v5-c-page__main-section [class*="pf-m-sticky"],
html .pf-v5-c-form__group.pf-m-action[class*="buttonGroup"] {
  --pf-v5-c-page__main-section--BackgroundColor: var(--t-page-bg);
  background-color: color-mix(in srgb, var(--t-page-bg) 94%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--t-border);
}

/* ---------- masthead & sidebar ---------- */
html .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--t-masthead-bg);
  background-color: var(--t-masthead-bg);
  border-bottom: 1px solid var(--t-masthead-border);
  -webkit-backdrop-filter: var(--t-chrome-backdrop);
  backdrop-filter: var(--t-chrome-backdrop);
}
html .pf-v5-c-masthead .pf-v5-c-toolbar,
html .pf-v5-c-masthead__content {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
  background-color: transparent;
}
html .pf-v5-c-masthead .pf-v5-c-menu-toggle { border-radius: var(--t-radius); }
html .pf-v5-c-masthead :is(.pf-v5-c-brand, .pf-v5-c-masthead__brand img) { max-height: 36px; }

html .pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--t-chrome-bg);
  background-color: var(--t-chrome-bg);
  border-right: 1px solid var(--t-border);
  -webkit-backdrop-filter: var(--t-chrome-backdrop);
  backdrop-filter: var(--t-chrome-backdrop);
}

/* admin dashboard hero logo */
html .keycloak__dashboard_icon { max-height: 56px; margin-bottom: 0.5rem; }

/* ---------- navigation ---------- */
html .pf-v5-c-nav {
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--t-surface-2);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--t-accent-soft);
  --pf-v5-c-nav__link--Color: var(--t-fg-muted);
  --pf-v5-c-nav__link--hover--Color: var(--t-fg);
  --pf-v5-c-nav__link--m-current--Color: var(--t-fg);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: var(--t-accent);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--t-accent);
  --pf-v5-c-nav__section-title--Color: var(--t-fg-muted);
  --pf-v5-c-nav__section--section--before--BorderColor: var(--t-border);
  /* the sidebar is light in light mode, so undo PatternFly's always-dark nav text */
  --pf-v5-c-nav__link--m-current--Color: var(--t-fg);
  --pf-v5-c-nav__toggle--Color: var(--t-fg-muted);
}
html .pf-v5-c-nav__link { border-radius: var(--t-radius); }
html .pf-v5-c-nav .pf-v5-c-divider { --pf-v5-c-divider--BackgroundColor: var(--t-border); }

/* ---------- surfaces ---------- */
html .pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: var(--t-surface);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  box-shadow: var(--t-card-shadow);
}

html .pf-v5-c-data-list {
  --pf-v5-c-data-list--BackgroundColor: transparent;
  --pf-v5-c-data-list__item--BackgroundColor: var(--t-surface);
  --pf-v5-c-data-list__item--BorderBottomColor: var(--t-border);
  --pf-v5-c-data-list--BorderTopColor: var(--t-border);
  border: 1px solid var(--t-border);
  border-radius: var(--t-radius-lg);
  overflow: hidden;
}

html .pf-v5-c-table {
  --pf-v5-c-table--BackgroundColor: var(--t-surface);
  --pf-v5-c-table--m-striped__tr--BackgroundColor: var(--t-surface-2);
  --pf-v5-c-table--BorderColor: var(--t-border);
}
html .pf-v5-c-toolbar { --pf-v5-c-toolbar--BackgroundColor: transparent; }
html .pf-v5-c-pagination { --pf-v5-c-pagination--m-bottom--BackgroundColor: var(--t-surface); }

html .pf-v5-c-tabs {
  --pf-v5-c-tabs__link--BackgroundColor: transparent;
  --pf-v5-c-tabs__link--after--BorderColor: transparent;
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--t-accent);
  --pf-v5-c-tabs__item--m-current__link--Color: var(--t-fg);
  --pf-v5-c-tabs--before--BorderColor: var(--t-border);
}

html :is(.pf-v5-c-modal-box, .pf-v5-c-menu, .pf-v5-c-dropdown__menu, .pf-v5-c-select__menu, .pf-v5-c-popover__content) {
  --pf-v5-c-modal-box--BackgroundColor: var(--t-surface);
  --pf-v5-c-menu--BackgroundColor: var(--t-surface);
  --pf-v5-c-popover__content--BackgroundColor: var(--t-surface);
  border: 1px solid var(--t-border);
}
html .pf-v5-c-modal-box { border-radius: var(--t-radius-lg); }
html .pf-v5-c-menu { border-radius: var(--t-radius); }
html .pf-v5-c-backdrop {
  --pf-v5-c-backdrop--BackgroundColor: color-mix(in srgb, var(--t-page-bg) 30%, rgb(0 0 0 / 0.55));
  backdrop-filter: blur(3px);
}

/* ---------- typography ---------- */
html :is(.pf-v5-c-title, .pf-v5-c-content h1, .pf-v5-c-content h2) {
  letter-spacing: var(--t-heading-tracking);
}

/* ---------- form controls ---------- */
html .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--t-input-bg);
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--t-surface-2);
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--t-surface-2);
  --pf-v5-c-form-control--m-disabled--Color: var(--t-fg-disabled);
  --pf-v5-c-form-control--m-readonly--Color: var(--t-fg-muted);
  --pf-v5-c-form-control--before--BorderTopColor: var(--t-input-border);
  --pf-v5-c-form-control--before--BorderRightColor: var(--t-input-border);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--t-input-border);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--t-input-border);
  --pf-v5-c-form-control--before--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
  border-radius: var(--t-radius);
}
html .pf-v5-c-form-control::before,
html .pf-v5-c-form-control::after { border-radius: inherit; }
html .pf-v5-c-form-control:hover::before { border-color: var(--t-input-border-hover); }
html .pf-v5-c-form-control:focus-within::before { border-color: var(--t-accent); }
html .pf-v5-c-form-control:focus-within { box-shadow: var(--t-focus-ring); }
html .pf-v5-c-form-control:is(.pf-m-disabled, .pf-m-readonly) > :is(input, textarea) {
  color: var(--t-fg-disabled);
  -webkit-text-fill-color: var(--t-fg-disabled);
}
html .pf-v5-c-form-control.pf-m-error::before { border-color: var(--pf-v5-global--danger-color--100); }

html .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary) {
  --pf-v5-c-menu-toggle--BackgroundColor: var(--t-input-bg);
  --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--t-input-bg);
  --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--t-input-bg);
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: var(--t-input-bg);
  --pf-v5-c-menu-toggle--focus--BackgroundColor: var(--t-input-bg);
  --pf-v5-c-menu-toggle--active--BackgroundColor: var(--t-input-bg);
  --pf-v5-c-menu-toggle--before--BorderColor: var(--t-input-border);
  --pf-v5-c-menu-toggle--before--BorderBottomColor: var(--t-input-border);
  --pf-v5-c-menu-toggle--after--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-menu-toggle--expanded--after--BorderBottomColor: transparent;
  border-radius: var(--t-radius);
}
html .pf-v5-c-menu-toggle::before,
html .pf-v5-c-menu-toggle::after { border-radius: inherit; }
/* draw the border directly: PatternFly's dark palette otherwise drops it */
html .pf-v5-c-page__main :is(.pf-v5-c-menu-toggle, .pf-v5-c-select__toggle):not(.pf-m-plain):not(.pf-m-primary):not(.pf-m-typeahead)::before {
  border: 1px solid var(--t-input-border);
}
html .pf-v5-c-page__main :is(.pf-v5-c-menu-toggle, .pf-v5-c-select__toggle):not(.pf-m-plain):not(.pf-m-primary)::after {
  border-bottom-width: 0;
}
html .pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):hover::before { border-color: var(--t-input-border-hover); }
html .pf-v5-c-page__main .pf-v5-c-menu-toggle.pf-m-expanded:not(.pf-m-plain)::before { border-color: var(--t-accent); }

/* ---------- buttons ---------- */
html .pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--t-radius);
  --pf-v5-c-button--after--BorderRadius: var(--t-radius);
}
html .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--Color: var(--t-accent-fg);
  --pf-v5-c-button--m-primary--hover--Color: var(--t-accent-fg);
  --pf-v5-c-button--m-primary--focus--Color: var(--t-accent-fg);
  --pf-v5-c-button--m-primary--active--Color: var(--t-accent-fg);
  background: var(--t-btn-primary-bg);
  font-weight: 600;
}
html .pf-v5-c-button.pf-m-primary:is(:hover, :focus-visible) {
  background: var(--t-btn-primary-bg-hover);
}
html .pf-v5-c-button.pf-m-primary:is(:disabled, .pf-m-disabled, .pf-m-aria-disabled) {
  background: var(--t-surface-2);
  color: var(--t-fg-disabled);
  box-shadow: none;
}
html .pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--t-accent);
  --pf-v5-c-button--m-secondary--hover--Color: var(--t-accent-hover);
  --pf-v5-c-button--m-secondary--after--BorderColor: color-mix(in srgb, var(--t-accent) 55%, transparent);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--t-accent);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--t-accent-soft);
}

/* ---------- misc ---------- */
html .pf-v5-c-switch { --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--t-accent); }
html :is(.pf-v5-c-check__input, .pf-v5-c-radio__input) { accent-color: var(--t-accent); }

html .pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: var(--t-accent-soft);
  --pf-v5-c-label--m-blue__content--Color: var(--t-accent);
}
html .pf-v5-c-jump-links {
  --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--t-accent);
}

/* ---------- light/dark toggle (login/modern-base/js/theme-toggle.js) ---------- */
.kc-theme-toggle--floating {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 9000;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--t-border-strong);
  border-radius: 999px;
  background: var(--t-surface);
  color: var(--t-fg-muted);
  box-shadow: var(--t-card-shadow);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.kc-theme-toggle--floating:hover { color: var(--t-fg); border-color: var(--t-accent); }
.kc-theme-toggle--floating:focus-visible { outline: none; box-shadow: var(--t-focus-ring); }
.kc-theme-toggle--floating svg { width: 1.15rem; height: 1.15rem; }