/* ==========================================================================
   kroener.digital - shared console chrome (account + admin)
   --------------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH. Copies under <type>/resources/css/kroener.css are
   written by ./sync-tokens.sh.

   tokens.css already re-points PatternFly's global custom properties, which is
   what recolours the bulk of both React consoles. What is left here is the
   chrome PatternFly paints from component-level tokens or literal hex values,
   plus the loading screen, which index.ftl hard-codes in a <style> block
   before any stylesheet loads.
   ========================================================================== */

/* The SPA bootstrap paints a white splash (#fff / #151515) inline in <head>,
   ahead of every stylesheet, so it flashes white for as long as the React
   bundle takes to boot. This is the one place !important is genuinely needed:
   the target is an inline <style> rule that cannot be reordered. */
.keycloak__loading-container {
  background-color: var(--kd-bg) !important;
  color: var(--kd-fg) !important;
}

#loading-text { color: var(--kd-muted); font-family: var(--kd-font); }

.pf-v5-c-spinner { --pf-v5-c-spinner--Color: var(--kd-primary); }

html, body, #app {
  background-color: var(--kd-bg);
  color: var(--kd-fg);
  font-family: var(--kd-font);
}

/* --- masthead ------------------------------------------------------------ */

.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--kd-surface);
  border-bottom: 1px solid var(--kd-border);
}

.pf-v5-c-masthead__brand img,
.pf-v5-c-brand { max-height: 2.25rem; }

.pf-v5-c-masthead .pf-v5-c-button { color: var(--kd-fg); }

/* --- side navigation ----------------------------------------------------- */

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--kd-surface);
  border-right: 1px solid var(--kd-border);
}

.pf-v5-c-nav__link { color: var(--kd-muted); border-radius: var(--kd-radius-control-sm); }
.pf-v5-c-nav__link:hover { color: var(--kd-fg); background-color: var(--kd-primary-08); }

.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current {
  color: var(--kd-fg);
  background-color: var(--kd-primary-15);
}

/* PatternFly marks the active nav item with a coloured bar drawn as a
   ::before pseudo-element, not a border, so it needs its own rule. */
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::before {
  border-inline-start-color: var(--kd-primary);
}

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

.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section { background-color: var(--kd-bg); }

.pf-v5-c-card,
.pf-v5-c-panel {
  background-color: var(--kd-surface);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius-card);
  box-shadow: none;
}

.pf-v5-c-card__title, .pf-v5-c-title { color: var(--kd-fg); font-family: var(--kd-font); }

/* --- tables -------------------------------------------------------------- */

.pf-v5-c-table { background-color: transparent; color: var(--kd-fg); }
.pf-v5-c-table thead th { color: var(--kd-muted); border-bottom-color: var(--kd-border-strong); }
.pf-v5-c-table tbody tr { border-bottom: 1px solid var(--kd-border); }
.pf-v5-c-table tbody tr:hover { background-color: var(--kd-primary-05); }

/* --- tabs ---------------------------------------------------------------- */

.pf-v5-c-tabs__link { color: var(--kd-muted); }
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link { color: var(--kd-fg); }
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after { border-color: var(--kd-primary); }

/* --- form controls ------------------------------------------------------- */

.pf-v5-c-form-control,
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
  background-color: var(--kd-bg);
  color: var(--kd-fg);
  border-radius: var(--kd-radius-control-sm);
}

.pf-v5-c-form-control { border: 1px solid var(--kd-border-strong); }
.pf-v5-c-form-control:focus-within {
  border-color: var(--kd-primary);
  box-shadow: 0 0 0 3px var(--kd-primary-20);
}

.pf-v5-c-form__label-text { color: var(--kd-fg); }

/* --- buttons ------------------------------------------------------------- */

.pf-v5-c-button { border-radius: var(--kd-radius-control-sm); font-family: var(--kd-font); font-weight: 600; }
.pf-v5-c-button.pf-m-primary { background-color: var(--kd-primary); color: var(--kd-primary-fg); }
.pf-v5-c-button.pf-m-primary:hover { background-color: var(--kd-primary-hover); }
.pf-v5-c-button.pf-m-secondary { border-color: var(--kd-border-strong); color: var(--kd-fg); background-color: transparent; }
.pf-v5-c-button.pf-m-secondary:hover { border-color: var(--kd-primary); background-color: var(--kd-primary-08); }
.pf-v5-c-button.pf-m-link { color: var(--kd-primary-hover); }

/* --- overlays ------------------------------------------------------------ */

.pf-v5-c-modal-box,
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu {
  background-color: var(--kd-surface-light);
  border: 1px solid var(--kd-border);
  border-radius: var(--kd-radius-control);
  box-shadow: var(--kd-shadow-panel);
  color: var(--kd-fg);
}

.pf-v5-c-menu__list-item:hover,
.pf-v5-c-dropdown__menu-item:hover { background-color: var(--kd-primary-10); }

.pf-v5-c-backdrop { background-color: rgb(0 0 0 / .7); }

.pf-v5-c-tooltip__content {
  background-color: var(--kd-surface-raised);
  color: var(--kd-fg);
  border: 1px solid var(--kd-border-strong);
}

/* --- status -------------------------------------------------------------- */

.pf-v5-c-alert { background-color: var(--kd-surface-light); border: 1px solid var(--kd-border); border-radius: var(--kd-radius-control-sm); }
.pf-v5-c-alert.pf-m-danger  { border-left: 3px solid var(--kd-danger);  background-color: var(--kd-danger-bg); }
.pf-v5-c-alert.pf-m-warning { border-left: 3px solid var(--kd-warning); background-color: var(--kd-warning-bg); }
.pf-v5-c-alert.pf-m-success { border-left: 3px solid var(--kd-success); background-color: var(--kd-success-bg); }
.pf-v5-c-alert.pf-m-info    { border-left: 3px solid var(--kd-info);    background-color: var(--kd-info-bg); }

/* Labels are the one component the global remap does not reach: PatternFly
   builds every label variant out of --pf-v5-global--palette--<hue>-50/-100,
   the LIGHT end of its raw colour scale, which renders as a bright chip on a
   near-black page (the "Current realm" badge is the visible one). The palette
   tokens themselves are deliberately left alone - they are the raw scale and
   remapping them would distort every chart and status colour - so the fix is
   at the component level instead.

   There is no --pf-v5-c-label--m-grey--* family; PatternFly's grey label IS
   the unmodified default, so the base tokens cover it. Every other name here
   was checked against the shipped patternfly.min.css. */
.pf-v5-c-label {
  --pf-v5-c-label--BackgroundColor: var(--kd-surface-raised);
  --pf-v5-c-label--Color: var(--kd-fg);
  border-radius: var(--kd-radius-pill);
}

.pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: var(--kd-info-bg);
  --pf-v5-c-label--m-blue__content--Color: var(--kd-info);
  --pf-v5-c-label--m-blue__content--before--BorderColor: var(--kd-border);
}

.pf-v5-c-label.pf-m-green {
  --pf-v5-c-label--m-green--BackgroundColor: var(--kd-success-bg);
  --pf-v5-c-label--m-green__content--Color: var(--kd-success);
  --pf-v5-c-label--m-green__content--before--BorderColor: var(--kd-border);
}

.pf-v5-c-label.pf-m-red {
  --pf-v5-c-label--m-red--BackgroundColor: var(--kd-danger-bg);
  --pf-v5-c-label--m-red__content--Color: var(--kd-danger);
  --pf-v5-c-label--m-red__content--before--BorderColor: var(--kd-border);
}

.pf-v5-c-label.pf-m-orange,
.pf-v5-c-label.pf-m-gold {
  --pf-v5-c-label--m-orange--BackgroundColor: var(--kd-warning-bg);
  --pf-v5-c-label--m-orange__content--Color: var(--kd-warning);
  --pf-v5-c-label--m-orange__content--before--BorderColor: var(--kd-border);
  --pf-v5-c-label--m-gold--BackgroundColor: var(--kd-warning-bg);
  --pf-v5-c-label--m-gold__content--Color: var(--kd-warning);
  --pf-v5-c-label--m-gold__content--before--BorderColor: var(--kd-border);
}

.pf-v5-c-label.pf-m-purple,
.pf-v5-c-label.pf-m-cyan {
  --pf-v5-c-label--m-purple--BackgroundColor: var(--kd-primary-15);
  --pf-v5-c-label--m-purple__content--Color: var(--kd-emphasis);
  --pf-v5-c-label--m-purple__content--before--BorderColor: var(--kd-border);
  --pf-v5-c-label--m-cyan--BackgroundColor: var(--kd-primary-15);
  --pf-v5-c-label--m-cyan__content--Color: var(--kd-emphasis);
  --pf-v5-c-label--m-cyan__content--before--BorderColor: var(--kd-border);
}

.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle { background-color: var(--kd-primary); }

/* --- code / JSON editors ------------------------------------------------- */

.pf-v5-c-code-block,
.pf-v5-c-code-editor,
pre, code {
  background-color: var(--kd-bg);
  color: var(--kd-fg);
  font-family: var(--kd-font-mono);
  border-radius: var(--kd-radius-control-sm);
}

/* --- accessibility ------------------------------------------------------- */

:focus-visible { outline: 2px solid var(--kd-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  .pf-v5-c-card, .pf-v5-c-form-control { border: 1px solid CanvasText; }
  :focus-visible { outline: 2px solid Highlight; }
}