/* The admin console, wearing the SPA's world (frontend/src/index.css) — the same
 * tokens as themes/dialer/login: Inter Variable, monochrome near-black on paper white,
 * hairline borders, 0.5rem radius. Markup is keycloak.v2 (admin) / PatternFly v5, untouched;
 * this file only restyles it, mostly by overriding PF's global tokens so every
 * component that derives from them follows without per-component rules. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-standard-normal.woff2") format("woff2-variations");
}

:root {
  --d-background: oklch(0.985 0 0);
  --d-card: oklch(1 0 0);
  --d-foreground: oklch(0.145 0 0);
  --d-muted-foreground: oklch(0.556 0 0);
  --d-border: oklch(0.922 0 0);
  --d-primary: oklch(0.145 0 0);
  --d-primary-hover: oklch(0.235 0 0);
  --d-primary-foreground: oklch(1 0 0);
  --d-destructive: oklch(0.577 0.245 27.325);
  --d-warning: oklch(0.55 0.13 72);
  --d-warning-surface: oklch(0.55 0.13 72 / 0.12);
  --d-info: oklch(0.55 0.13 245);
  --d-ring: oklch(0.145 0 0);
  --d-radius: 0.5rem;
  --d-font: "Inter Variable", "Inter", -apple-system, "Segoe UI", sans-serif;

  /* PF v5 global tokens — the blue brand becomes the SPA's near-black, links and
   * focus follow, and both font roles become Inter. Components read these. The build
   * aliases blue through SEVERAL globals (primary --100/--200/--300, the --dark-100
   * on-light variant, link light/dark pairs, active, and the palette slots that feed
   * selected/info backgrounds) — override the whole family or PF's secondary buttons
   * and links keep resolving #06c through the alias this sheet missed. */
  --pf-v5-global--FontFamily--text: var(--d-font);
  --pf-v5-global--FontFamily--heading: var(--d-font);
  --pf-v5-global--primary-color--100: var(--d-primary);
  --pf-v5-global--primary-color--200: var(--d-primary-hover);
  --pf-v5-global--primary-color--300: var(--d-primary-hover);
  --pf-v5-global--primary-color--dark-100: var(--d-primary);
  --pf-v5-global--active-color--100: var(--d-primary);
  --pf-v5-global--active-color--400: var(--d-primary);
  --pf-v5-global--selected-color--100: var(--d-primary);
  --pf-v5-global--link--Color: var(--d-foreground);
  --pf-v5-global--link--Color--hover: var(--d-primary-hover);
  --pf-v5-global--link--Color--dark: var(--d-foreground);
  --pf-v5-global--link--Color--dark--hover: var(--d-primary-hover);
  --pf-v5-global--palette--blue-400: var(--d-primary);
  --pf-v5-global--palette--blue-500: var(--d-primary-hover);
  --pf-v5-global--palette--blue-600: var(--d-primary-hover);
  --pf-v5-global--palette--blue-300: var(--d-muted-foreground);
  --pf-v5-global--palette--blue-200: var(--d-border);
  --pf-v5-global--palette--blue-100: oklch(0.145 0 0 / 0.08);
  --pf-v5-global--palette--blue-50: oklch(0.145 0 0 / 0.05);
  --pf-v5-global--BackgroundColor--100: var(--d-card);
  --pf-v5-global--BackgroundColor--200: var(--d-background);
  --pf-v5-global--BorderColor--100: var(--d-border);
  --pf-v5-global--Color--100: var(--d-foreground);
  --pf-v5-global--Color--200: var(--d-muted-foreground);
  --pf-v5-global--danger-color--100: var(--d-destructive);
  --pf-v5-global--warning-color--100: var(--d-warning);
  --pf-v5-global--info-color--100: var(--d-info);
}

body {
  font-family: var(--d-font);
  background: var(--d-background);
}

/* The console's lazy route chunks RE-SCOPE the blue globals onto component classes
 * (.pf-v5-c-data-list carries its own --pf-v5-global--primary-color--100: #06c), so a
 * :root override loses by inheritance proximity on exactly the elements it matters
 * for. The chrome is monochrome BY DESIGN — no context is allowed a different brand
 * color — so assert the family on every element with importance and end the game.
 * Deliberately narrow: only the blue-brand family; fonts, surfaces, and semantic
 * colors stay ordinarily-cascaded above. */
* {
  --pf-v5-global--primary-color--100: var(--d-primary) !important;
  --pf-v5-global--primary-color--200: var(--d-primary-hover) !important;
  --pf-v5-global--primary-color--300: var(--d-primary-hover) !important;
  --pf-v5-global--primary-color--dark-100: var(--d-primary) !important;
  --pf-v5-global--active-color--100: var(--d-primary) !important;
  --pf-v5-global--active-color--400: var(--d-primary) !important;
  --pf-v5-global--selected-color--100: var(--d-primary) !important;
  --pf-v5-global--link--Color: var(--d-foreground) !important;
  --pf-v5-global--link--Color--hover: var(--d-primary-hover) !important;
  --pf-v5-global--link--Color--dark: var(--d-foreground) !important;
  --pf-v5-global--link--Color--dark--hover: var(--d-primary-hover) !important;
  --pf-v5-global--palette--blue-400: var(--d-primary) !important;
  --pf-v5-global--palette--blue-500: var(--d-primary-hover) !important;
  --pf-v5-global--palette--blue-600: var(--d-primary-hover) !important;
  --pf-v5-global--palette--blue-300: var(--d-muted-foreground) !important;
  --pf-v5-global--palette--blue-200: var(--d-border) !important;
  --pf-v5-global--palette--blue-100: oklch(0.145 0 0 / 0.08) !important;
  --pf-v5-global--palette--blue-50: oklch(0.145 0 0 / 0.05) !important;
}

/* ---- masthead -------------------------------------------------------------
 * v3 ships a black masthead with the Keycloak wordmark; the SPA has no dark
 * chrome anywhere, so the masthead joins the app shell: paper ground, hairline
 * bottom border, near-black brand. */

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

.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle {
  color: var(--d-foreground);
}

/* The sidebar toggle is a plain button whose icon inherits PF's washed-out grey on
 * the recolored light masthead; the user-menu toggle keeps PF's square corners. */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
  color: var(--d-muted-foreground);
}
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover {
  color: var(--d-foreground);
}
.pf-v5-c-menu-toggle {
  border-radius: var(--d-radius);
  font-family: var(--d-font);
}

/* The brand is the login page's lockup: the mark (logo=/img/mark.svg, sized here)
 * plus the wordmark as text, set in the page's own Inter — an <img> cannot load
 * the webfont, styled text can. */
.pf-v5-c-masthead__brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.pf-v5-c-masthead__brand img {
  height: 1.375rem;
  width: auto;
}

/* The welcome page's hero mark (empty-state brand): sized like a hero, centered like
 * one — without this it inherits the raw SVG's intrinsic box and sits off-center. */
.pf-v5-c-brand.keycloak__dashboard_icon {
  height: 4rem;
  width: auto;
  margin-inline: auto;
}

.pf-v5-c-masthead__brand::after {
  content: "CognifAI";
  font-family: var(--d-font);
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--d-foreground);
}

/* ---- nav ------------------------------------------------------------------ */

.pf-v5-c-page__sidebar {
  background: var(--d-background);
  border-right: 1px solid var(--d-border);
  /* PF's sidebar is dark by default and paints its text white through component
   * tokens; on the light shell that made the realm name and section titles
   * white-on-paper — invisible (caught on the delegated console, 2026-08-19). */
  color: var(--d-foreground);
  --pf-v5-c-nav__link--Color: var(--d-foreground);
  --pf-v5-c-nav__section-title--Color: var(--d-muted-foreground);
}

/* !important for the same reason as the blue family above: the nav's lazy chunk
 * loads AFTER this sheet and re-declares the white-on-dark default. The realm-name
 * block at the sidebar top is ALSO a section-title (measured), so this rule is what
 * makes it readable at all. */
.pf-v5-c-nav__section-title {
  color: var(--d-foreground) !important;
  font-family: var(--d-font);
}

/* The realm selector at the sidebar top (realm name + "Current realm" chip). */
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle,
.pf-v5-c-page__sidebar button {
  color: var(--d-foreground);
}

.pf-v5-c-nav__link {
  font-family: var(--d-font);
  color: var(--d-foreground);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover {
  background: oklch(0.145 0 0 / 0.05);
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current:hover {
  background: oklch(0.145 0 0 / 0.07);
  color: var(--d-foreground);
}

.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::after {
  border-color: var(--d-primary);
}

/* ---- content -------------------------------------------------------------- */

.pf-v5-c-page__main {
  background: var(--d-card);
}

.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2 {
  font-family: var(--d-font);
  letter-spacing: -0.015em;
  color: var(--d-foreground);
}

.pf-v5-c-button {
  font-family: var(--d-font);
  border-radius: var(--d-radius);
}

.pf-v5-c-button.pf-m-primary {
  background: var(--d-primary);
  color: var(--d-primary-foreground);
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--d-primary-hover);
}

.pf-v5-c-button:focus-visible {
  outline: 2px solid var(--d-ring);
  outline-offset: 2px;
}

.pf-v5-c-form-control {
  border-radius: var(--d-radius);
  font-family: var(--d-font);
}

.pf-v5-c-form-control:focus-within {
  border-color: var(--d-ring);
  box-shadow: 0 0 0 3px oklch(0.145 0 0 / 0.12);
}

.pf-v5-c-alert {
  font-family: var(--d-font);
  border-radius: var(--d-radius);
}

/* ---- the shadcn read of PF's data surfaces ---------------------------------
 * Tables, toolbars, menus, switches: the app's world is hairline borders, muted
 * headers, a whisper of hover, radius 0.5rem. PF's markup stays; only tokens and
 * a few component rules move. */

.pf-v5-c-table {
  font-family: var(--d-font);
  --pf-v5-c-table--BorderColor: var(--d-border);
}
.pf-v5-c-table th {
  color: var(--d-muted-foreground);
  font-size: 0.8125rem;
  font-weight: 550;
}
.pf-v5-c-table tbody tr:hover {
  background: oklch(0.145 0 0 / 0.03);
}

.pf-v5-c-toolbar {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
}

.pf-v5-c-tabs__link {
  font-family: var(--d-font);
}

.pf-v5-c-menu {
  border-radius: var(--d-radius);
  border: 1px solid var(--d-border);
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.04), 0 8px 24px -8px oklch(0 0 0 / 0.10);
}

.pf-v5-c-modal-box {
  border-radius: calc(var(--d-radius) * 1.4);
  border: 1px solid var(--d-border);
}

/* PF draws its own checkboxes/radios/switches from primary tokens; the native ones
 * some panels use follow via accent-color. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--d-primary);
}
.pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--d-primary);
}

/* Browser surfaces carry the design too: selection, caret, focus. */
::selection {
  background: var(--d-primary);
  color: var(--d-primary-foreground);
}
input,
textarea {
  caret-color: var(--d-primary);
}
:focus-visible {
  outline-color: var(--d-ring);
}