/*
 * Admin Console (keycloak.v2) — gleiche Tokens wie Login (Cross-Import unterhalb /resources/<cache>/).
 * WOFF2 unter ../fonts/ (z. B. ./scripts/download-fonts.sh); keine eingebetteten Fremd-URLs im CSS.
 */
@import url("../../../login/taranio/css/taranio-tokens.css");

/*
 * Theme-lokale Logo-URL: --keycloak-logo-url ist in tokens.css definiert, dessen url()
 * jedoch relativ zur Login-CSS-Datei aufgelöst wird. Hier redefinieren wir die Variable
 * mit Pfaden relativ zu admin/resources/css/, damit das Brand-`<img>` (siehe unten,
 * `content: var(--keycloak-logo-url)`) auf admin/resources/img/... zeigt.
 */
:root[data-theme="light"] {
  --keycloak-logo-url: url("../img/logo-lockup-on-light-bg.svg");
}

:root[data-theme="dark"] {
  --keycloak-logo-url: url("../img/logo-lockup-on-dark-bg.svg");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --keycloak-logo-url: url("../img/logo-lockup-on-dark-bg.svg");
  }
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --keycloak-logo-url: url("../img/logo-lockup-on-light-bg.svg");
  }
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-VariableFont_slnt,wght.woff2") format("woff2"), local("Inter");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono[wght].woff2") format("woff2"), local("JetBrains Mono");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

html {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

body {
  font-family: var(--kc-font-body), var(--pf-v5-global--FontFamily--sans-serif, sans-serif);
  font-size: var(--kc-text-base);
  line-height: 1.72;
  color: var(--kc-text);
  background-color: var(--kc-bg);
  background-image:
    radial-gradient(ellipse 55% 50% at 72% 20%, oklch(0.92 0.35 108 / 0.06), transparent 65%),
    radial-gradient(ellipse 30% 30% at 8% 80%, oklch(0.62 0.14 192 / 0.05), transparent 60%);
  background-attachment: fixed;
}

#app {
  background: transparent;
  min-height: 100vh;
}

/*
 * PatternFly v5 globals — Brand-/Linkfarben spiegeln, damit Tabs, Badges, Buttons
 * und Buttons.pf-m-link sowohl im Light- als auch Dark-Mode unsere Tokens nutzen.
 * Selector deckt Light (:root) und Dark (.pf-v5-theme-dark) ab.
 */
:root,
.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--kc-brand-primary);
  --pf-v5-global--primary-color--200: var(--kc-brand-primary-hover);
  --pf-v5-global--link--Color: var(--kc-brand-text);
  --pf-v5-global--link--Color--hover: var(--kc-brand-primary);
  --pf-v5-global--link--Color--visited: var(--kc-brand-text);
  --pf-v5-global--active-color--100: var(--kc-accent);
  --pf-v5-global--BorderColor--100: var(--kc-border);
  --pf-v5-global--BorderColor--200: var(--kc-border-strong);
}

/*
 * Seitenrahmen / Masthead — kombinierte Selektoren erreichen
 * im Dark-Mode dieselbe Specificity wie PFs `.pf-v5-theme-dark .x`-Regeln.
 */
.pf-v5-c-page,
.pf-v5-theme-dark .pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: transparent;

  background-color: transparent !important;
}

.pf-v5-c-masthead,
.pf-v5-theme-dark .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--kc-surface);
  --pf-v5-c-masthead--Color: var(--kc-text);

  background-color: var(--kc-surface) !important;
  border-bottom: 1px solid var(--kc-border-strong) !important;
  color: var(--kc-text) !important;
}

.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content,
.pf-v5-c-masthead__brand,
.pf-v5-c-masthead__toggle,
.pf-v5-theme-dark .pf-v5-c-masthead__main,
.pf-v5-theme-dark .pf-v5-c-masthead__content,
.pf-v5-theme-dark .pf-v5-c-masthead__brand,
.pf-v5-theme-dark .pf-v5-c-masthead__toggle {
  background-color: transparent !important;
  color: var(--kc-text) !important;
}

/*
 * Brand-Logo: das von Keycloak via theme.properties (`logo=...`) gerenderte
 * statische `<img>` wird per CSS-Replacement auf die theme-passende Variante
 * umgeschaltet. `content: url(...)` auf <img> tauscht das gerenderte Bild,
 * ohne `src`/`alt`/Dimensionen anzufassen.
 */
html .pf-v5-c-masthead img[src*="logo-lockup"],
html .pf-v5-c-masthead__brand img,
html .pf-v5-c-brand img[src*="logo-lockup"] {
  content: var(--keycloak-logo-url);
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
  color: var(--kc-text-muted) !important;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover,
.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover {
  color: var(--kc-text) !important;
  background-color: var(--kc-surface-2) !important;
}

.pf-v5-c-page__sidebar,
.pf-v5-theme-dark .pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--kc-surface);

  background-color: var(--kc-surface) !important;
  border-right: 1px solid var(--kc-border-strong) !important;
}

.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-v5-theme-dark .pf-v5-c-page__main,
.pf-v5-theme-dark .pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--kc-bg);

  background-color: var(--kc-bg) !important;
}

.pf-v5-c-page__main-section .pf-v5-c-page__main-body {
  background-color: transparent !important;
}

/* Karten / Panels */
.pf-v5-c-card,
.pf-v5-theme-dark .pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: var(--kc-surface);

  background-color: var(--kc-surface) !important;
  color: var(--kc-text) !important;
  border: 1px solid var(--kc-border-strong) !important;
  border-radius: var(--kc-radius-xl) !important;
  box-shadow: var(--kc-shadow-card), var(--kc-shadow-1) !important;
}

.pf-v5-c-page__main-section .pf-v5-c-title {
  color: var(--kc-text) !important;
}

.pf-v5-c-page__main-section,
.pf-v5-c-nav__link {
  color: var(--kc-text-muted);
}

.pf-v5-c-nav__link.pf-m-current {
  color: var(--kc-brand-primary) !important;
}

/* Primäraktionen wie Login-Pill */
.pf-v5-c-button.pf-m-primary {
  border-radius: var(--kc-radius-full) !important;
  background-color: var(--kc-brand-primary) !important;
  color: #05070a !important;
  border: none !important;
  box-shadow: 0 6px 20px oklch(0.92 0.35 108 / 0.25) !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(1.07);
}

.pf-v5-c-button.pf-m-secondary {
  border-radius: var(--kc-radius-md) !important;
  border-color: var(--kc-border-strong) !important;
  color: var(--kc-text-muted) !important;
  background: transparent !important;
}

/* Formularfelder */
.pf-v5-c-form-control,
.pf-v5-theme-dark .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--kc-surface-2);
  --pf-v5-c-form-control--Color: var(--kc-text);

  background-color: var(--kc-surface-2) !important;
  border-color: var(--kc-border) !important;
  color: var(--kc-text) !important;
  border-radius: var(--kc-radius-md) !important;
}

.pf-v5-c-form-control:focus,
.pf-v5-theme-dark .pf-v5-c-form-control:focus {
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--kc-accent) 35%, transparent) !important;
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
  color: var(--kc-text) !important;
}

/*
 * Tabs — Underline auf Markenfarbe statt PF-Blau, Hover/Aktive-Texte auf Surface.
 */
.pf-v5-c-tabs,
.pf-v5-theme-dark .pf-v5-c-tabs {
  --pf-v5-c-tabs__link--m-current--after--BorderColor: var(--kc-brand-primary);
  --pf-v5-c-tabs__link--hover--after--BorderColor: var(--kc-brand-primary);
  --pf-v5-c-tabs__link--Color: var(--kc-text-muted);
  --pf-v5-c-tabs__link--m-current--Color: var(--kc-text);
}

.pf-v5-c-tabs__link.pf-m-current,
.pf-v5-theme-dark .pf-v5-c-tabs__link.pf-m-current {
  color: var(--kc-text) !important;
}

/*
 * Badges (z. B. „Current realm") — Read-Variante neutral, Unread in Markenfarbe.
 */
.pf-v5-c-badge.pf-m-read,
.pf-v5-theme-dark .pf-v5-c-badge.pf-m-read {
  background-color: var(--kc-surface-2) !important;
  color: var(--kc-text) !important;
  border: 1px solid var(--kc-border) !important;
}

.pf-v5-c-badge.pf-m-unread,
.pf-v5-theme-dark .pf-v5-c-badge.pf-m-unread {
  background-color: var(--kc-brand-primary) !important;
  color: #05070a !important;
}

/*
 * Dropdown / Menu (User-Dropdown im Masthead, Realm-Switcher, etc.).
 */
.pf-v5-c-menu,
.pf-v5-theme-dark .pf-v5-c-menu {
  --pf-v5-c-menu--BackgroundColor: var(--kc-surface);

  background-color: var(--kc-surface) !important;
  border: 1px solid var(--kc-border-strong) !important;
  color: var(--kc-text) !important;
}

.pf-v5-c-menu__item,
.pf-v5-theme-dark .pf-v5-c-menu__item {
  color: var(--kc-text) !important;
}

.pf-v5-c-menu__item:hover,
.pf-v5-theme-dark .pf-v5-c-menu__item:hover {
  background-color: var(--kc-surface-2) !important;
}

/* Links */
.pf-v5-c-page__main-section a:not(.pf-v5-c-button) {
  color: var(--kc-brand-text);
  text-underline-offset: 0.15em;
}

.pf-v5-c-page__main-section a:not(.pf-v5-c-button):hover {
  color: var(--kc-brand-primary);
}

.pf-v5-c-helper-text__item-text > a {
  color: var(--kc-text-muted);
}

.pf-v5-c-helper-text__item-text > a:hover {
  color: var(--kc-text);
}

/* Ladezustand vor React-Hydration */
.keycloak__loading-container {
  color: var(--kc-text);
  background-color: var(--kc-bg);
}

/* Toggle / Skip-Link (Styles analog login.css) */
.kc-skip-link {
  position: absolute;
  inset-inline-start: var(--kc-space-4);
  top: -100px;
  z-index: 9999;
  background: var(--kc-brand-primary);
  color: #05070a;
  border-radius: var(--kc-radius-md);
  padding: var(--kc-space-3) var(--kc-space-4);
  font-weight: 700;
}

.kc-skip-link:focus {
  top: var(--kc-space-4);
}

.kc-theme-toggle {
  position: fixed;
  inset-inline-end: var(--kc-space-4);
  top: var(--kc-space-4);
  z-index: 9999;
  min-height: 44px;
  min-width: 44px;
  border-radius: 9999px;
  border: 1px solid var(--kc-border);
  background: var(--kc-surface);
  color: var(--kc-text);
  box-shadow: var(--kc-shadow-1);
}

.kc-theme-toggle:hover {
  background: var(--kc-surface-2);
}

@media (max-width: 768px) {
  .kc-theme-toggle {
    top: auto;
    bottom: var(--kc-space-4);
  }
}

:focus-visible {
  outline: 2px solid var(--kc-brand-primary);
  outline-offset: 3px;
  border-radius: var(--kc-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/*
 * High-specificity Dark-Mode Override für PF v5 Layout-Komponenten.
 * PFs interne Dark-Regeln rangieren bei (0,2,0). Wir nutzen `html` + doppelte Klasse
 * (`X.X`) → (0,3,1), und (0,3,0) für Labels — das schlägt PF zuverlässig in beiden
 * Modi, ohne von der Variable-Cascade abzuhängen.
 */
html .pf-v5-c-masthead.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--kc-surface) !important;
  --pf-v5-c-masthead--Color: var(--kc-text) !important;

  background: var(--kc-surface) !important;
  color: var(--kc-text) !important;
  border-bottom: 1px solid var(--kc-border-strong) !important;
}

html .pf-v5-c-masthead.pf-v5-c-masthead::before,
html .pf-v5-c-masthead.pf-v5-c-masthead::after {
  background: transparent !important;
}

html .pf-v5-c-page__sidebar.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--kc-surface) !important;

  background-color: var(--kc-surface) !important;
}

html .pf-v5-c-page__main.pf-v5-c-page__main,
html .pf-v5-c-page__main-section.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--kc-bg) !important;

  background-color: var(--kc-bg) !important;
}

html .pf-v5-c-card.pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: var(--kc-surface) !important;

  background-color: var(--kc-surface) !important;
  color: var(--kc-text) !important;
}

html .pf-v5-c-form-control.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--kc-surface-2) !important;

  background-color: var(--kc-surface-2) !important;
  color: var(--kc-text) !important;
}

/* PF Label color variants (z. B. „Current realm" als pf-m-blue) → neutralisieren. */
html .pf-v5-c-label,
html .pf-v5-c-label.pf-m-blue,
html .pf-v5-c-label.pf-m-cyan,
html .pf-v5-c-label.pf-m-green,
html .pf-v5-c-label.pf-m-orange,
html .pf-v5-c-label.pf-m-purple,
html .pf-v5-c-label.pf-m-red,
html .pf-v5-c-label.pf-m-gold,
html .pf-v5-c-label.pf-m-grey {
  --pf-v5-c-label--BackgroundColor: var(--kc-surface-2) !important;
  --pf-v5-c-label--Color: var(--kc-text) !important;
  --pf-v5-c-label--BorderColor: var(--kc-border) !important;

  background-color: var(--kc-surface-2) !important;
  color: var(--kc-text) !important;
  border-color: var(--kc-border) !important;
}

/*
 * Toolbar im Masthead (Help-Button, „kcadmin"-Dropdown, Avatar) — PF v5 setzt
 * `--pf-v5-c-toolbar--BackgroundColor` standardmäßig auf eine Body-Hintergrund-
 * Variable, die im Dark-Mode tiefschwarz wird. Wir machen die Toolbar transparent,
 * damit unser Masthead-Surface durchschlägt. Gilt für alle Toolbar-Varianten
 * (Topbar wie auch Filter-Toolbars in Tabellen — beide sehen auf transparent korrekt aus,
 * weil ihr jeweiliger Container schon eine Surface-Farbe trägt).
 */
html .pf-v5-c-toolbar.pf-v5-c-toolbar,
html .pf-v5-c-toolbar.pf-v5-c-toolbar .pf-v5-c-toolbar__content,
html .pf-v5-c-toolbar.pf-v5-c-toolbar .pf-v5-c-toolbar__content-section,
html .pf-v5-c-toolbar.pf-v5-c-toolbar .pf-v5-c-toolbar__item,
html .pf-v5-c-toolbar.pf-v5-c-toolbar .pf-v5-c-toolbar__group {
  --pf-v5-c-toolbar--BackgroundColor: transparent !important;
  --pf-v5-c-toolbar__content-section--BackgroundColor: transparent !important;

  background: transparent !important;
  color: var(--kc-text) !important;
}

/* Menu-Toggle Buttons (kcadmin Dropdown, Realm-Switcher, Help) — neutral auf surface. */
html .pf-v5-c-menu-toggle.pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--BackgroundColor: transparent;
  --pf-v5-c-menu-toggle--Color: var(--kc-text);

  background-color: transparent !important;
  color: var(--kc-text) !important;
  border-color: var(--kc-border) !important;
}

html .pf-v5-c-menu-toggle.pf-v5-c-menu-toggle.pf-m-plain {
  border-color: transparent !important;
  color: var(--kc-text-muted) !important;
}

html .pf-v5-c-menu-toggle.pf-v5-c-menu-toggle.pf-m-plain:hover,
html .pf-v5-c-menu-toggle.pf-v5-c-menu-toggle:hover {
  color: var(--kc-text) !important;
  background-color: var(--kc-surface-2) !important;
}