@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

/* ============================================================
   korayami-orange — Admin Console (PatternFly v5/v6)
   Gemeinsame Basis mit account.css: dieselben Tokens, dieselben
   Bausteine (Kopfzeile, Navigation, Karten, Felder, Buttons,
   Tabellen, Menüs, Fokus). Darunter folgt der Teil, den nur die
   Administration hat: Realm-Auswahl, Toolbars, Wizards, Drawer,
   Code-Editoren.
   Selektoren nutzen [class*="c-name"], damit sie pf-v5-* und
   pf-v6-* Builds gleichermaßen treffen.
   ============================================================ */

:root {
  /* Helles Schema — Standard. Der dunkle Block unten greift, sobald
     Keycloak bei Systemvorgabe "dunkel" die Klasse an <html> haengt. */
  --kc-bg: #faf7f3;
  --kc-bg-main: #ffffff;
  --kc-surface: #ffffff;
  --kc-surface-2: #fffdfa;
  --kc-card: #ffffff;
  --kc-card-hover: #f7f2ec;
  --kc-menu: #ffffff;
  --kc-menu-hover: #f4eee6;
  --kc-control-hover: #f0e9df;
  --kc-line: #e7dfd4;
  --kc-line-2: #d9cec0;
  --kc-line-strong: #c7b8a4;
  --kc-line-pill: #e2d8c9;
  --kc-line-check: #cfc3b2;
  --kc-line-inset: #ece5db;
  --kc-line-soft: #efe9e0;
  --kc-line-panel: #e7dfd4;
  --kc-text: #1a1512;
  --kc-text-soft: #3a322b;
  --kc-text-muted: #5c5147;
  --kc-text-quiet: #665c52;
  --kc-text-dim: #6b6157;
  --kc-overline: #7d6c56;
  --kc-text-faint: #7e7368;
  --kc-placeholder: #8c8175;
  --kc-text-meta: #837970;
  --kc-accent: #f0921f;
  --kc-accent-rgb: 240, 146, 31;
  --kc-accent-hi: #ffb457;
  --kc-accent-lo: #e07d10;
  --kc-accent-top: #f79c2a;
  --kc-on-accent: #180d02;
  --kc-pill-text: #8a5a12;
  --kc-danger: #e05c3a;
  --kc-danger-rgb: 224, 92, 58;
  --kc-danger-text: #a33017;
  --kc-on-danger: #180b07;
  --kc-warning-text: #7a5312;
  --kc-success: #6fbf5a;
  --kc-success-rgb: 111, 191, 90;
  --kc-success-text: #2f6b21;
  --kc-masthead-1: #fff6e9;
  --kc-backdrop-rgb: 6, 5, 4;
  --kc-shadow-rgb: 0, 0, 0;
  --kc-radius: 12px;
  --kc-font: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kc-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --kc-accent-text: #a15505;
  --kc-accent-text-hi: #8a4703;

  /* PatternFly v5 tokens */
  --pf-v5-global--FontFamily--text: var(--kc-font);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--kc-font);
  --pf-v5-global--FontFamily--redhat-font--sans-serif: var(--kc-font);
  --pf-v5-global--FontFamily--monospace: var(--kc-mono);
  --pf-v5-global--primary-color--100: var(--kc-accent);
  --pf-v5-global--primary-color--200: var(--kc-accent-lo);
  --pf-v5-global--link--Color: var(--kc-accent);
  --pf-v5-global--link--Color--hover: var(--kc-accent-hi);
  --pf-v5-global--active-color--100: var(--kc-accent);
  --pf-v5-global--BackgroundColor--100: var(--kc-card);
  --pf-v5-global--BackgroundColor--150: var(--kc-card);
  --pf-v5-global--BackgroundColor--200: var(--kc-bg-main);
  --pf-v5-global--BackgroundColor--light-100: var(--kc-card);
  --pf-v5-global--BackgroundColor--light-200: var(--kc-bg-main);
  --pf-v5-global--BackgroundColor--light-300: var(--kc-bg);
  --pf-v5-global--BackgroundColor--dark-100: var(--kc-bg);
  --pf-v5-global--BackgroundColor--dark-200: var(--kc-bg-main);
  --pf-v5-global--Color--100: var(--kc-text);
  --pf-v5-global--Color--200: var(--kc-text-dim);
  --pf-v5-global--Color--light-100: var(--kc-text);
  --pf-v5-global--Color--light-200: var(--kc-text-muted);
  --pf-v5-global--Color--dark-100: var(--kc-text);
  --pf-v5-global--Color--dark-200: var(--kc-text-muted);
  --pf-v5-global--BorderColor--100: var(--kc-line);
  --pf-v5-global--BorderColor--200: var(--kc-line);
  --pf-v5-global--BorderColor--300: var(--kc-line-2);
  --pf-v5-global--BorderColor--light-100: var(--kc-line);
  --pf-v5-global--BorderRadius--sm: var(--kc-radius);
  --pf-v5-global--BorderRadius--lg: var(--kc-radius);
  --pf-v5-global--danger-color--100: var(--kc-danger);
  --pf-v5-global--success-color--100: var(--kc-success);
  --pf-v5-global--warning-color--100: var(--kc-accent);
  --pf-v5-global--icon--Color--light: var(--kc-text-dim);
  --pf-v5-global--BoxShadow--sm: 0 12px 24px -18px rgba(0,0,0,0.9);
  --pf-v5-global--BoxShadow--md: 0 20px 40px -24px rgba(0,0,0,0.9);

  /* PatternFly v6 tokens (newer Keycloak builds) */
  --pf-t--global--font--family--body: var(--kc-font);
  --pf-t--global--font--family--heading: var(--kc-font);
  --pf-t--global--font--family--mono: var(--kc-mono);
  --pf-t--global--background--color--primary--default: var(--kc-card);
  --pf-t--global--background--color--secondary--default: var(--kc-bg-main);
  --pf-t--global--background--color--floating--default: var(--kc-surface);
  --pf-t--global--text--color--regular: var(--kc-text);
  --pf-t--global--text--color--subtle: var(--kc-text-dim);
  --pf-t--global--text--color--link--default: var(--kc-accent);
  --pf-t--global--text--color--link--hover: var(--kc-accent-hi);
  --pf-t--global--border--color--default: var(--kc-line);
  --pf-t--global--color--brand--default: var(--kc-accent);
  --pf-t--global--color--brand--hover: var(--kc-accent-hi);
  --pf-t--global--color--brand--clicked: var(--kc-accent-lo);
  --pf-t--global--icon--color--brand--default: var(--kc-accent);
}
:root[class*="theme-dark"] {
  --kc-bg: #0b0a09;
  --kc-bg-main: #0e0c0a;
  --kc-surface: #17140f;
  --kc-surface-2: #1a1611;
  --kc-card: #141210;
  --kc-card-hover: #1a1712;
  --kc-menu: #131110;
  --kc-menu-hover: #1c1813;
  --kc-control-hover: #221d16;
  --kc-line: #241f18;
  --kc-line-2: #33291d;
  --kc-line-strong: #3a2f20;
  --kc-line-pill: #2a2319;
  --kc-line-check: #2e281f;
  --kc-line-inset: #1f1a14;
  --kc-line-soft: #1e1a14;
  --kc-line-panel: #1d1913;
  --kc-text: #f4efe9;
  --kc-text-soft: #cfc6ba;
  --kc-text-muted: #a2988c;
  --kc-text-quiet: #9a9086;
  --kc-text-dim: #8a8077;
  --kc-overline: #8a7f72;
  --kc-text-faint: #6d6459;
  --kc-placeholder: #5c554e;
  --kc-text-meta: #4e463c;
  --kc-accent: #f0921f;
  --kc-accent-rgb: 240, 146, 31;
  --kc-accent-hi: #ffb457;
  --kc-accent-lo: #e07d10;
  --kc-accent-top: #f79c2a;
  --kc-on-accent: #180d02;
  --kc-pill-text: #c9a273;
  --kc-danger: #e05c3a;
  --kc-danger-rgb: 224, 92, 58;
  --kc-danger-text: #f0b6a5;
  --kc-on-danger: #180b07;
  --kc-warning-text: #e8d2b4;
  --kc-success: #6fbf5a;
  --kc-success-rgb: 111, 191, 90;
  --kc-success-text: #c6e3ba;
  --kc-masthead-1: #17110b;
  --kc-backdrop-rgb: 6, 5, 4;
  --kc-shadow-rgb: 0, 0, 0;
  --kc-radius: 12px;
  --kc-font: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --kc-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --kc-accent-text: var(--kc-accent);
  --kc-accent-text-hi: var(--kc-accent-hi);
}


html, body, #app, .pf-v5-c-page, [class*="c-page"] {
  background: var(--kc-bg) !important;
  color: var(--kc-text);
  font-family: var(--kc-font);
  -webkit-font-smoothing: antialiased;
  color-scheme: light dark;
}

a { color: var(--kc-accent-text); }
a:hover { color: var(--kc-accent-text-hi); }

h1, h2, h3, h4,
[class*="c-title"] { color: var(--kc-text); letter-spacing: -0.02em; }

/* ---------- Masthead (top bar) ---------- */
[class*="c-masthead"] {
  background: linear-gradient(180deg, var(--kc-masthead-1) 0%, var(--kc-bg-main) 100%) !important;
  border-bottom: 1px solid var(--kc-line);
  color: var(--kc-text);
}
[class*="c-masthead"] a,
[class*="c-masthead"] [class*="c-button"] { color: var(--kc-text-muted); }
[class*="c-masthead"] a:hover { color: var(--kc-text); }
[class*="c-brand"] { max-height: 34px; filter: drop-shadow(0 4px 14px rgba(var(--kc-accent-rgb), 0.35)); }

/* ---------- Sidebar / navigation ---------- */
[class*="c-page__sidebar"] {
  background: var(--kc-bg-main) !important;
  border-right: 1px solid var(--kc-line);
}
[class*="c-nav__link"] {
  color: var(--kc-text-muted) !important;
  border-radius: 10px;
  font-weight: 600;
}
[class*="c-nav__link"]:hover { background: var(--kc-surface) !important; color: var(--kc-text) !important; }
[class*="c-nav__item"] [class*="pf-m-current"],
[class*="c-nav__link"][aria-current="page"] {
  background: rgba(var(--kc-accent-rgb), 0.10) !important;
  color: var(--kc-accent-text) !important;
}
/* ::before ist die Trennlinie zwischen den Nav-Gruppen, nicht der
   Aktiv-Marker (das ist ::after). In Akzent gefärbt lag sie als
   zweite, orange Linie über der dunklen Trennlinie des Nav-Items. */
[class*="c-nav__link"]::before { border-color: var(--kc-line) !important; }
[class*="c-nav__link"]::after { display: none !important; }
[class*="c-nav__item"] [class*="pf-m-current"]::after,
[class*="c-nav__link"][aria-current="page"]::after {
  display: block !important;
  background: var(--kc-accent) !important;
  border-color: var(--kc-accent) !important;
}

/* ---------- Content surfaces ---------- */
[class*="c-page__main"],
[class*="c-page__main-section"] { background: var(--kc-bg) !important; }

[class*="c-card"]:not([class*="c-card__"]) {
  background: var(--kc-card) !important;
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius);
  color: var(--kc-text);
  box-shadow: 0 18px 34px -26px rgba(var(--kc-shadow-rgb), 0.95);
}
[class*="c-card__title"] { color: var(--kc-text); font-weight: 700; }
[class*="c-card__body"] { color: var(--kc-text-muted); }

[class*="c-panel"],
[class*="c-empty-state"] {
  background: var(--kc-card) !important;
  border: 1px solid var(--kc-line);
  border-radius: var(--kc-radius);
  color: var(--kc-text-muted);
}
[class*="c-divider"] { background: var(--kc-line) !important; border-color: var(--kc-line) !important; }

/* ---------- Description lists / data ---------- */
[class*="c-description-list__term"] { color: var(--kc-text-dim); }
[class*="c-description-list__description"] { color: var(--kc-text); }

/* ---------- Tabs ---------- */
[class*="c-tabs"] { background: transparent !important; }
[class*="c-tabs__link"] { color: var(--kc-text-dim) !important; font-weight: 600; }
[class*="c-tabs__item"][class*="pf-m-current"] [class*="c-tabs__link"] { color: var(--kc-accent-text) !important; }
[class*="c-tabs__item"][class*="pf-m-current"] [class*="c-tabs__link"]::after { background: var(--kc-accent) !important; }

/* ---------- Forms ---------- */
[class*="c-form__label-text"] {
  color: var(--kc-text-dim);
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
[class*="c-form-control"],
[class*="c-form-control"] > input,
[class*="c-form-control"] > select,
[class*="c-form-control"] > textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], select, textarea {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 10px !important;
  color: var(--kc-text) !important;
  font-family: var(--kc-font);
  box-shadow: none !important;
}
[class*="c-form-control"]:hover { border-color: var(--kc-line-2) !important; }
[class*="c-form-control"]:focus-within,
input:focus, select:focus, textarea:focus {
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.14) !important;
  outline: none !important;
}
[class*="c-form-control"]::after,
[class*="c-form-control"] > *::after { display: none !important; }
input::placeholder, textarea::placeholder { color: var(--kc-placeholder) !important; }
[class*="c-helper-text__item-text"] { color: var(--kc-text-dim); }

/* ---------- Buttons ---------- */
[class*="c-button"] {
  border-radius: 10px;
  font-family: var(--kc-font);
  font-weight: 700;
}
[class*="c-button"][class*="pf-m-primary"] {
  background: linear-gradient(180deg, var(--kc-accent-top) 0%, var(--kc-accent-lo) 100%) !important;
  border: 0 !important;
  color: var(--kc-on-accent) !important;
  box-shadow: 0 10px 24px -12px rgba(var(--kc-accent-rgb), 0.7);
}
[class*="c-button"][class*="pf-m-primary"]:hover { filter: brightness(1.07); color: var(--kc-on-accent) !important; }
[class*="c-button"][class*="pf-m-primary"]:focus-visible,
[class*="c-button"][class*="pf-m-primary"]:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.3), 0 10px 24px -12px rgba(var(--kc-accent-rgb), 0.7);
}
[class*="c-button"][class*="pf-m-secondary"] {
  background: transparent !important;
  border: 1px solid var(--kc-line) !important;
  color: var(--kc-text) !important;
}
[class*="c-button"][class*="pf-m-secondary"]:hover { border-color: var(--kc-accent) !important; color: var(--kc-accent-text-hi) !important; }
[class*="c-button"][class*="pf-m-link"],
[class*="c-button"][class*="pf-m-inline"] { color: var(--kc-accent-text) !important; background: transparent !important; }
[class*="c-button"][class*="pf-m-link"]:hover { color: var(--kc-accent-text-hi) !important; }
[class*="c-button"][class*="pf-m-danger"] {
  background: var(--kc-danger) !important;
  border: 0 !important;
  color: var(--kc-on-danger) !important;
}
[class*="c-button"][class*="pf-m-plain"] { color: var(--kc-text-dim) !important; }
[class*="c-button"][class*="pf-m-plain"]:hover { color: var(--kc-text) !important; }

/* ---------- Tables (devices, sessions, applications) ---------- */
[class*="c-table"] { background: transparent !important; color: var(--kc-text); }
[class*="c-table"] thead th {
  color: var(--kc-text-dim) !important;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  border-bottom: 1px solid var(--kc-line) !important;
}
[class*="c-table"] tbody tr { border-bottom: 1px solid var(--kc-line) !important; }
[class*="c-table"] tbody tr:hover { background: var(--kc-surface) !important; }
[class*="c-table"] td { color: var(--kc-text-muted) !important; }

/* ---------- Menus, dropdowns, modals, tooltips ---------- */
[class*="c-menu"]:not([class*="menu-toggle"]):not([class*="c-menu__"]),
[class*="c-dropdown__menu"],
[class*="c-select__menu"],
[class*="c-modal-box"]:not([class*="c-modal-box__"]),
[class*="c-tooltip__content"] {
  background: var(--kc-menu) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  color: var(--kc-text) !important;
  box-shadow: 0 24px 48px -24px rgba(var(--kc-shadow-rgb), 0.95) !important;
}
[class*="c-menu__item"]:hover,
[class*="c-dropdown__menu-item"]:hover { background: var(--kc-menu-hover) !important; color: var(--kc-text) !important; }
[class*="c-backdrop"] { background: rgba(var(--kc-backdrop-rgb), 0.72) !important; }

/* ---------- Labels, chips, badges ---------- */
[class*="c-label"] {
  background: rgba(var(--kc-accent-rgb), 0.09) !important;
  border: 1px solid var(--kc-line-pill) !important;
  color: var(--kc-pill-text) !important;
  border-radius: 999px;
}
[class*="c-badge"] { background: rgba(var(--kc-accent-rgb), 0.14) !important; color: var(--kc-accent-text) !important; }

/* ---------- Alerts ---------- */
[class*="c-alert"]:not([class*="alert-group"]):not([class*="c-alert__"]) {
  background: var(--kc-card) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  color: var(--kc-text) !important;
}
[class*="c-alert"]:not([class*="c-alert__"])[class*="pf-m-success"] { border-color: rgba(var(--kc-success-rgb), 0.35) !important; background: rgba(var(--kc-success-rgb), 0.08) !important; }
[class*="c-alert"]:not([class*="c-alert__"])[class*="pf-m-danger"] { border-color: rgba(var(--kc-danger-rgb), 0.35) !important; background: rgba(var(--kc-danger-rgb), 0.09) !important; }
[class*="c-alert"]:not([class*="c-alert__"])[class*="pf-m-warning"],
[class*="c-alert"]:not([class*="c-alert__"])[class*="pf-m-info"] { border-color: rgba(var(--kc-accent-rgb), 0.3) !important; background: rgba(var(--kc-accent-rgb), 0.08) !important; }
[class*="c-alert__title"] { color: var(--kc-text) !important; }

/* ---------- Switches & checkboxes ---------- */
[class*="c-switch__input"]:checked ~ [class*="c-switch__toggle"] { background: var(--kc-accent) !important; }
[class*="c-switch__toggle"] { background: var(--kc-line-pill) !important; }
[class*="c-check__label"], [class*="c-radio__label"] { color: var(--kc-text-muted) !important; }

/* ---------- Spinner & progress ---------- */
[class*="c-spinner"] { --pf-v5-c-spinner--Color: var(--kc-accent); color: var(--kc-accent-text) !important; }
[class*="c-progress__indicator"] { background: var(--kc-accent) !important; }

/* ---------- Breadcrumb / pagination ---------- */
[class*="c-breadcrumb__link"] { color: var(--kc-text-dim) !important; }
[class*="c-breadcrumb__link"]:hover { color: var(--kc-accent-text) !important; }
[class*="c-pagination"] { color: var(--kc-text-muted) !important; }

/* ---------- Scrollbars ---------- */
* { scrollbar-color: var(--kc-line-pill) var(--kc-bg-main); }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--kc-bg-main); }
*::-webkit-scrollbar-thumb { background: var(--kc-line-pill); border-radius: 8px; }
*::-webkit-scrollbar-thumb:hover { background: var(--kc-line-strong); }

/* ============================================================
   Corrections: keep the input treatment out of the masthead
   and out of dropdown menus (they are buttons, not fields).
   ============================================================ */

/* Masthead controls read as quiet buttons, never as text fields */
[class*="c-masthead"] [class*="c-menu-toggle"],
[class*="c-masthead"] [class*="c-dropdown__toggle"],
[class*="c-masthead"] [class*="c-select__toggle"],
[class*="c-masthead"] [class*="c-form-control"],
[class*="c-masthead"] input,
[class*="c-masthead"] select,
[class*="c-masthead"] button {
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--kc-text-muted) !important;
  font-weight: 600;
}
[class*="c-masthead"] [class*="c-menu-toggle"]:hover,
[class*="c-masthead"] button:hover { background: var(--kc-card-hover) !important; color: var(--kc-text) !important; }
[class*="c-masthead"] [class*="c-menu-toggle"]:focus-visible,
[class*="c-masthead"] button:focus-visible { box-shadow: 0 0 0 3px rgba(var(--kc-accent-rgb), 0.25) !important; }
[class*="c-masthead"] [class*="c-menu-toggle"]::before,
[class*="c-masthead"] [class*="c-menu-toggle"]::after,
[class*="c-masthead"] [class*="c-form-control"]::before,
[class*="c-masthead"] [class*="c-form-control"]::after { display: none !important; }
[class*="c-masthead"] [class*="c-avatar"] { border: 1px solid var(--kc-line); background: var(--kc-card-hover); }

/* Dropdown / select options: flat rows inside the floating panel */
[class*="c-menu__list-item"],
[class*="c-menu__item"],
[class*="c-select__menu-item"],
[class*="c-select__menu-wrapper"],
[class*="c-dropdown__menu-item"],
[class*="c-menu__item"] [class*="c-form-control"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--kc-text-muted) !important;
  font-size: 14px;
  font-weight: 500;
  min-height: 0 !important;
}
[class*="c-menu__item"]::before,
[class*="c-menu__item"]::after,
[class*="c-select__menu-item"]::before,
[class*="c-select__menu-item"]::after { display: none !important; }
[class*="c-menu__item"]:hover,
[class*="c-select__menu-item"]:hover,
[class*="c-menu__item"][class*="pf-m-focus"] { background: var(--kc-menu-hover) !important; color: var(--kc-text) !important; }
[class*="c-menu__item"][aria-selected="true"],
[class*="c-select__menu-item"][aria-selected="true"] { color: var(--kc-accent-text) !important; }
[class*="c-menu__list"] { padding: 6px !important; }

/* Required-field asterisk in the theme's accent, not signal red */
[class*="c-form__label-required"] { color: var(--kc-accent-text) !important; }

/* "Jump to section" rail */
[class*="c-jump-links__link"] { color: var(--kc-text-dim) !important; }
[class*="c-jump-links__link"][class*="pf-m-current"],
[class*="c-jump-links__item"][class*="pf-m-current"] [class*="c-jump-links__link"] { color: var(--kc-accent-text) !important; }
[class*="c-jump-links__list"]::before { background: var(--kc-line) !important; }

/* ============================================================
   Hard corrections (v3): kill every stray field-like frame
   ============================================================ */

/* Any control inside the masthead: no frame, no field look */
[class*="c-masthead"] *,
[class*="c-toolbar"] [class*="c-menu-toggle"] {
  box-shadow: none !important;
}
[class*="c-masthead"] [class*="c-menu-toggle"],
[class*="c-masthead"] [class*="c-menu-toggle"] > *,
[class*="c-masthead"] a[class*="c-button"] {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
}
[class*="c-masthead"] a[class*="c-button"] {
  color: var(--kc-accent-text) !important;
  font-weight: 700;
  padding: 6px 10px !important;
}
[class*="c-masthead"] a[class*="c-button"]:hover { background: var(--kc-card-hover) !important; color: var(--kc-accent-text-hi) !important; }
[class*="c-masthead__main"],
[class*="c-masthead__content"],
[class*="c-masthead__brand"],
[class*="c-masthead__toggle"] { border: 0 !important; box-shadow: none !important; }

/* Floating panels: options are rows, never bordered fields */
[class*="c-menu"] button,
[class*="c-menu"] a,
[class*="c-menu"] li,
[class*="c-menu"] [class*="c-form-control"],
[class*="c-select__menu"] button,
[class*="c-select__menu"] li,
[class*="c-dropdown__menu"] button,
[class*="c-dropdown__menu"] li {
  background: transparent !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: var(--kc-text-muted) !important;
  font-family: var(--kc-font);
  font-size: 14px !important;
  font-weight: 500 !important;
  text-align: left;
}
[class*="c-menu"] button:hover,
[class*="c-select__menu"] button:hover,
[class*="c-dropdown__menu"] button:hover { background: var(--kc-menu-hover) !important; color: var(--kc-text) !important; }
[class*="c-menu"] button::before,
[class*="c-menu"] button::after,
[class*="c-select__menu"] button::before,
[class*="c-select__menu"] button::after { display: none !important; content: none !important; }

/* Select toggle keeps the field look, but only one frame */
[class*="c-select__toggle"],
[class*="c-menu-toggle"][class*="pf-m-full-width"] {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: 10px !important;
  color: var(--kc-text) !important;
}
[class*="c-select__toggle"] *,
[class*="c-menu-toggle"][class*="pf-m-full-width"] > * { border: 0 !important; box-shadow: none !important; background: transparent !important; }
[class*="c-select__toggle"]:focus-within {
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.14) !important;
}
[class*="c-select__toggle-arrow"],
[class*="c-menu-toggle__controls"] { color: var(--kc-text-dim) !important; }

/* Required marker */
[class*="c-form__label-required"],
[class*="c-form__label"] [aria-hidden="true"] { color: var(--kc-accent-text) !important; }

/* ============================================================
   v4 — Rahmen, Header und Listen
   ------------------------------------------------------------
   Kernproblem: PatternFly zeichnet die *sichtbaren* Rahmen von
   Buttons und Togglern nicht über `border`, sondern über ein
   `::after`-Overlay (--pf-v5-c-button--after--BorderColor).
   Wer nur `border` setzt, bekommt einen zweiten, fremden Rahmen
   obendrauf — sichtbar als PF-Blau (#1fa7f8) an „Aktualisieren"
   und „Abmelden" und als grauer Strich (#aaabac) unter den
   Auswahlfeldern. Deshalb: ::after abschalten und den Rahmen
   selbst zeichnen, exakt wie .kc-btn im Login-Theme.
   ============================================================ */

/* Tokens hart setzen: Route-Chunks (DataListItemRow-*.css u. a.)
   werden erst beim Navigieren nachgeladen und landen dadurch
   NACH diesem Stylesheet — bei gleicher Spezifität gewinnen sie
   sonst. `!important` dreht das unabhängig von der Ladereihenfolge. */
:root {
  --pf-v5-global--BorderColor--100: var(--kc-line) !important;
  --pf-v5-global--BorderColor--200: var(--kc-line) !important;
  --pf-v5-global--BorderColor--300: var(--kc-line-2) !important;
  --pf-v5-global--link--Color: var(--kc-accent) !important;
  --pf-v5-global--link--Color--hover: var(--kc-accent-hi) !important;
  --pf-v5-global--primary-color--100: var(--kc-accent) !important;
}

/* ---------- Fremde ::after-Rahmen abschalten ---------- */
[class*="c-button"]::after,
[class*="c-menu-toggle"]::after,
[class*="c-form-control"]::after,
[class*="c-data-list"]::after,
[class*="c-data-list"]::before {
  display: none !important;
  border: 0 !important;
}

/* ---------- Buttons: Login-Parität (.kc-btn) ---------- */
[class*="c-button"] {
  border-radius: var(--kc-radius) !important;
  font-family: var(--kc-font);
  font-weight: 700;
  transition: border-color .16s ease, background .16s ease,
              color .16s ease, box-shadow .2s ease, filter .2s ease;
}

/* Sekundär = Akzent-Umriss. Trägt die Zeilenaktionen sichtbar in
   Orange, ohne dem Gradient-Primärbutton die Hauptrolle zu nehmen. */
[class*="c-button"][class*="pf-m-secondary"],
[class*="c-button"][class*="pf-m-tertiary"] {
  background: rgba(var(--kc-accent-rgb), 0.07) !important;
  border: 1px solid rgba(var(--kc-accent-rgb), 0.45) !important;
  color: var(--kc-accent-text) !important;
  box-shadow: none !important;
}
[class*="c-button"][class*="pf-m-secondary"]:hover,
[class*="c-button"][class*="pf-m-tertiary"]:hover {
  background: rgba(var(--kc-accent-rgb), 0.15) !important;
  border-color: var(--kc-accent) !important;
  color: var(--kc-accent-text-hi) !important;
}
[class*="c-button"][class*="pf-m-secondary"]:focus,
[class*="c-button"][class*="pf-m-secondary"]:focus-visible,
[class*="c-button"][class*="pf-m-tertiary"]:focus,
[class*="c-button"][class*="pf-m-tertiary"]:focus-visible {
  outline: none !important;
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.18) !important;
}

/* Primär: Fokusring exakt wie .kc-btn--primary */
[class*="c-button"][class*="pf-m-primary"]:focus,
[class*="c-button"][class*="pf-m-primary"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.28),
              0 10px 26px -10px rgba(var(--kc-accent-rgb), 0.7) !important;
}

/* Gefahr: gefüllt bleibt gefüllt, Umriss-Variante wird zum Ghost */
[class*="c-button"][class*="pf-m-danger"]:focus,
[class*="c-button"][class*="pf-m-danger"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-danger-rgb), 0.28) !important;
}
[class*="c-button"][class*="pf-m-secondary"][class*="pf-m-danger"] {
  background: transparent !important;
  border-color: rgba(var(--kc-danger-rgb), 0.5) !important;
  color: var(--kc-danger) !important;
}

/* Link-Buttons ohne Rahmen und ohne Kasten-Fokus */
[class*="c-button"][class*="pf-m-link"]:focus,
[class*="c-button"][class*="pf-m-link"]:focus-visible,
[class*="c-button"][class*="pf-m-plain"]:focus,
[class*="c-button"][class*="pf-m-plain"]:focus-visible {
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--kc-accent-text-hi) !important;
}

/* ---------- Header: eine durchgehende Fläche ---------- */
/* Die Toolbar brachte ihren eigenen schwarzen Grund mit (#030303)
   und schnitt dadurch Menü-Button und Logo optisch ab. */
[class*="c-masthead"] [class*="c-toolbar"],
[class*="c-masthead"] [class*="c-toolbar__content"],
[class*="c-masthead"] [class*="c-toolbar__content-section"],
[class*="c-masthead"] [class*="c-toolbar__item"],
[class*="c-masthead"] [class*="c-toolbar__group"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
[class*="c-masthead__toggle"],
[class*="c-masthead__brand"],
[class*="c-masthead__main"],
[class*="c-masthead__content"] { background: transparent !important; }

/* Der leere Toast-Container ist kein Element, sondern ein Anker —
   als Karte gestylt wurde er zum 2px-Strich quer durch den Header. */
[class*="c-alert-group"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- Listenzeilen als Karten (wie .kc-auth-item) ---------- */
[class*="c-data-list"] {
  background: transparent !important;
  border: 0 !important;
}
li[class*="c-data-list__item"] {
  background: transparent !important;
  border: 0 !important;
}
li[class*="c-data-list__item"] { display: block; }
[class*="c-data-list__item-row"] {
  width: 100%;
  margin-block-end: 12px;
  padding: 6px 18px;
  background: var(--kc-card) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  transition: border-color .16s ease, background .16s ease;
}
[class*="c-data-list__item-row"]:hover {
  background: var(--kc-card-hover) !important;
  border-color: var(--kc-line-strong) !important;
}
[class*="c-data-list__item-row"]:last-child { margin-block-end: 0; }

/* ---------- Meta-Zeilen als Mono-Overlines (wie im Login) ---------- */
[class*="c-description-list__term"],
[data-testrole="created-at"] strong {
  font-family: var(--kc-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
  color: var(--kc-overline) !important;
}
[class*="c-description-list__description"] { font-size: 14px; }

/* ---------- Felder: Höhe und Radius wie im Login ---------- */
[class*="c-form-control"],
[class*="c-menu-toggle"][class*="pf-m-full-width"] {
  min-height: 44px;
  border-radius: var(--kc-radius) !important;
}
[class*="c-form-control"] > input,
[class*="c-form-control"] > select,
[class*="c-form-control"] > textarea { min-height: 42px; }

/* Primärbutton mit derselben Präsenz wie .kc-btn--primary im Login */
[class*="c-button"][class*="pf-m-primary"] {
  min-height: 44px;
  padding-inline: 22px !important;
  box-shadow: 0 10px 26px -10px rgba(var(--kc-accent-rgb), 0.7) !important;
}
[class*="c-button"][class*="pf-m-primary"]:hover {
  box-shadow: 0 14px 34px -10px rgba(var(--kc-accent-rgb), 0.85) !important;
}
[class*="c-button"][class*="pf-m-secondary"],
[class*="c-button"][class*="pf-m-tertiary"] { min-height: 40px; }

/* ---------- Tastaturfokus überall in Akzentfarbe ---------- */
/* Ohne das zeichnet Chromium seinen eigenen Ring (outline: auto,
   fast schwarz) auf Navigationslinks, Logo und Sprunglisten. */
:focus-visible {
  outline: 2px solid var(--kc-accent) !important;
  outline-offset: 2px !important;
}
[class*="c-nav__link"]:focus-visible,
[class*="c-jump-links__link"]:focus-visible,
[class*="c-masthead__brand"]:focus-visible {
  border-radius: 10px;
}

/* ---------- Navigation: Fokus ohne PatternFly-Grau ---------- */
/* PF setzt beim Fokus #26292d (kaltes Grau) als Hintergrund.
   Der Fokus bekommt hier dieselbe Fläche wie der Hover, der Ring
   liegt innen und folgt damit dem Radius des Eintrags. */
:root {
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--kc-surface) !important;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--kc-surface) !important;
  --pf-v5-c-nav__link--active--BackgroundColor: var(--kc-surface) !important;
}
[class*="c-nav__link"]:focus,
[class*="c-nav__link"]:focus-visible,
[class*="c-nav__link"]:focus-within {
  background: var(--kc-surface) !important;
  color: var(--kc-text) !important;
  outline-offset: -2px !important;
}
[class*="c-nav__link"][aria-current="page"]:focus,
[class*="c-nav__link"][aria-current="page"]:focus-visible {
  background: rgba(var(--kc-accent-rgb), 0.10) !important;
  color: var(--kc-accent-text) !important;
}

/* ---------- Labels als Pills wie im Login ---------- */
/* Label-*.css wird nachgeladen und überschrieb sonst Radius und
   Typografie — daher hier durchgehend !important. */
[class*="c-label"] {
  padding: 6px 12px !important;
  border: 1px solid var(--kc-line-pill) !important;
  border-radius: 999px !important;
  background: rgba(var(--kc-accent-rgb), 0.06) !important;
}
[class*="c-label"],
[class*="c-label"] [class*="c-label__content"],
[class*="c-label"] [class*="c-label__text"] {
  color: var(--kc-pill-text) !important;
  font-family: var(--kc-mono) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}
[class*="c-label"] [class*="c-label__content"],
[class*="c-label"] [class*="c-label__text"] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}
[class*="c-label"]::before,
[class*="c-label"]::after,
[class*="c-label"] [class*="c-label__content"]::before,
[class*="c-label"] [class*="c-label__content"]::after {
  display: none !important;
}

/* Aktiver Eintrag im Fokus: der 4px-Aktivbalken und der eingerückte
   Fokusring liegen beide auf der linken Kante — zwei orange Linien
   übereinander. Solange der Ring da ist, tritt der Balken zurück;
   Akzentfläche und Akzentschrift markieren die Seite weiterhin. */
[class*="c-nav__link"][aria-current="page"]:focus-visible::after,
[class*="c-nav__link"][aria-current="page"]:focus::after,
[class*="c-nav__item"] [class*="pf-m-current"]:focus-visible::after,
[class*="c-nav__item"] [class*="pf-m-current"]:focus::after {
  display: none !important;
}

/* Trennlinien der Navigation bleiben auf der Linienfarbe */
:root {
  --pf-v5-c-nav__item--before--BorderColor: var(--kc-line) !important;
  --pf-v5-c-nav__link--before--BorderColor: var(--kc-line) !important;
}

/* ============================================================
   Nur in der Administration
   ============================================================ */

/* ---------- Such- und Filterfelder (c-text-input-group) ---------- */
/* PatternFly gibt ihnen einen eigenen kalten Grund (#36373a) und
   eine graue ::after-Unterkante — sie sollen wie normale Felder
   aussehen. */
[class*="c-text-input-group"]:not([class*="c-text-input-group__"]) {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  color: var(--kc-text) !important;
}
[class*="c-text-input-group__main"],
[class*="c-text-input-group__text"],
[class*="c-text-input-group__text-input"],
[class*="c-text-input-group__utilities"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--kc-text) !important;
}
[class*="c-text-input-group"]::after,
[class*="c-text-input-group__text"]::after,
[class*="c-text-input-group__main"]::after { display: none !important; }
[class*="c-text-input-group"]:not([class*="c-text-input-group__"]):focus-within {
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.14) !important;
}
[class*="c-text-input-group__icon"] { color: var(--kc-text-dim) !important; }
[class*="c-text-input-group__text-input"]::placeholder { color: var(--kc-placeholder) !important; }

/* ---------- Buttons in Eingabegruppen (pf-m-control) ---------- */
[class*="c-button"][class*="pf-m-control"] {
  background: var(--kc-card) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  color: var(--kc-text-muted) !important;
}
[class*="c-button"][class*="pf-m-control"]:hover {
  background: var(--kc-card-hover) !important;
  border-color: var(--kc-line-strong) !important;
  color: var(--kc-text) !important;
}
[class*="c-button"][class*="pf-m-control"]::after { display: none !important; }
[class*="c-button"][class*="pf-m-control"]:focus,
[class*="c-button"][class*="pf-m-control"]:focus-visible {
  outline: none !important;
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.18) !important;
}

/* ---------- Trenner in Toolbars und Eingabegruppen ---------- */
/* PF trennt hier mit kaltem Grau (#26292d). */
[class*="c-input-group"],
[class*="c-input-group__item"],
[class*="c-toolbar__item"],
[class*="c-toolbar__group"] { border-color: var(--kc-line) !important; }
[class*="c-toolbar"],
[class*="c-toolbar__content"],
[class*="c-toolbar__content-section"] { background: transparent !important; }

/* ---------- Hinweisband über der Kopfzeile ---------- */
/* Als volle Signalfläche übertönt es die ganze Konsole; als getöntes
   Band bleibt der Hinweis deutlich, ohne die Seite zu dominieren. */
[class*="c-banner"] {
  background: rgba(var(--kc-accent-rgb), 0.12) !important;
  border-block-end: 1px solid rgba(var(--kc-accent-rgb), 0.32) !important;
  color: var(--kc-accent-text-hi) !important;
  font-family: var(--kc-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em;
}
[class*="c-banner"] a { color: var(--kc-accent-text-hi) !important; text-decoration: underline; }

/* ---------- Navigationsgruppen ---------- */
[class*="c-nav__section-title"] {
  color: var(--kc-overline) !important;
  font-family: var(--kc-mono);
  font-size: 11px !important;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
[class*="c-nav__section"] + [class*="c-nav__section"] { border-block-start: 1px solid var(--kc-line); }

/* ---------- Tabellen: Toolbar-Zeile und Kopf ---------- */
[class*="c-table"] thead [class*="c-table__button"],
[class*="c-table"] thead button { color: var(--kc-text-dim) !important; background: transparent !important; }
[class*="c-table"] [class*="c-table__sort-indicator"] { color: var(--kc-text-faint) !important; }
[class*="c-table"] [class*="pf-m-selected"] [class*="c-table__sort-indicator"] { color: var(--kc-accent-text) !important; }
[class*="c-table__expandable-row"] { background: var(--kc-bg-main) !important; }

/* ---------- Drawer, Wizard, Modale ---------- */
[class*="c-drawer__panel"] {
  background: var(--kc-bg-main) !important;
  border-inline-start: 1px solid var(--kc-line) !important;
}
[class*="c-drawer__splitter"] { background: var(--kc-line) !important; }
[class*="c-wizard__nav"],
[class*="c-wizard__header"],
[class*="c-wizard__footer"] {
  background: var(--kc-bg-main) !important;
  border-color: var(--kc-line) !important;
}
[class*="c-wizard__nav-link"] { color: var(--kc-text-muted) !important; }
[class*="c-wizard__nav-link"][class*="pf-m-current"] { color: var(--kc-accent-text) !important; }
[class*="c-modal-box__header"],
[class*="c-modal-box__footer"] { background: transparent !important; border-color: var(--kc-line) !important; }

/* ---------- Code-/JSON-Editoren ---------- */
[class*="c-code-editor"],
[class*="c-code-editor__header"],
[class*="c-code-editor__main"],
[class*="c-code-block"] {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  color: var(--kc-text) !important;
}
[class*="c-code-editor__main"] .monaco-editor,
[class*="c-code-editor__main"] .monaco-editor-background,
[class*="c-code-editor__main"] .monaco-editor .margin,
.monaco-editor, .monaco-editor-background, .monaco-editor .margin {
  background-color: var(--kc-surface) !important;
}
.monaco-editor .line-numbers { color: var(--kc-text-faint) !important; }
[class*="c-code-block__pre"],
[class*="c-code-block__code"] {
  font-family: var(--kc-mono) !important;
  background: transparent !important;
  color: var(--kc-text-soft) !important;
}

/* ---------- Hilfe-Popover ---------- */
[class*="c-popover__content"],
[class*="c-popover__arrow"] {
  background: var(--kc-menu) !important;
  border-color: var(--kc-line) !important;
  color: var(--kc-text) !important;
}
[class*="c-popover__title-text"] { color: var(--kc-text) !important; }
[class*="c-helper-text__item"][class*="pf-m-error"] { color: var(--kc-danger-text) !important; }
/* Schlichte Toggles (Kebab-Menüs, Icon-Auslöser) sind Auslöser, keine
   Panels — [class*="c-menu"] trifft sonst auch "c-menu-toggle". */
[class*="c-menu-toggle"][class*="pf-m-plain"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--kc-text-dim) !important;
}
[class*="c-menu-toggle"][class*="pf-m-plain"]:hover {
  background: var(--kc-card-hover) !important;
  color: var(--kc-text) !important;
}

/* Paginierung trägt keine eigene Fläche */
[class*="c-pagination"],
[class*="c-pagination__nav"],
[class*="c-pagination__nav-control"] { background: transparent !important; }

/* Karten-Innenteile tragen keine eigene Fläche — [class*="c-card"]
   trifft sonst auch c-card__header, __title, __body und stapelt
   Rahmen auf Rahmen. */
[class*="c-card__header"],
[class*="c-card__header-main"],
[class*="c-card__title"],
[class*="c-card__title-text"],
[class*="c-card__body"],
[class*="c-card__footer"],
[class*="c-card__expandable-content"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- Formularlabels: Platz für lange Bezeichnungen ---------- */
/* Die Konsole rechnet mit 9.375rem Labelspalte. Versalien plus
   Sperrung sprengen das (»Benutzerregistrierung« misst 174px in
   150px Spalte) — die Beschriftung lief in die Bedienelemente. */
[class*="c-form"][class*="pf-m-horizontal"] {
  --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 13.5rem !important;
}
[class*="c-form__label-text"] {
  letter-spacing: 0.06em !important;
  overflow-wrap: anywhere;
  hyphens: auto;
}
[class*="c-form__group-label"] { padding-inline-end: 16px; }

/* ---------- Tabs: Unterstrich statt Kasten ---------- */
/* Die Administration nutzt die Box-Variante; deren dreiseitiger
   Rahmen wird über die Aktivfarbe gezeichnet und ergibt zusammen
   mit unserem Unterstrich zwei konkurrierende Marker. */
[class*="c-tabs"][class*="pf-m-box"] [class*="c-tabs__item"],
[class*="c-tabs"][class*="pf-m-box"] [class*="c-tabs__link"] {
  background: transparent !important;
}
[class*="c-tabs__link"]::before {
  border-color: transparent !important;
  border-inline-width: 0 !important;
  border-block-start-width: 0 !important;
}
[class*="c-tabs__item"][class*="pf-m-current"] [class*="c-tabs__link"]::before {
  border-color: transparent !important;
}
[class*="c-tabs__link"]:hover { background: var(--kc-bg-main) !important; }

/* ---------- Auswahl-Toggles als Felder ---------- */
/* Ohne Zusatz bringt PatternFly hier #36373a mit. */
[class*="c-menu-toggle"]:not([class*="pf-m-plain"]):not([class*="c-menu-toggle__"]) {
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  color: var(--kc-text) !important;
}
[class*="c-menu-toggle"]:not([class*="pf-m-plain"]):not([class*="c-menu-toggle__"]):hover { border-color: var(--kc-line-2) !important; }
[class*="c-menu-toggle"]:not([class*="pf-m-plain"]):not([class*="c-menu-toggle__"]):focus-within {
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.14) !important;
}
[class*="c-masthead"] [class*="c-menu-toggle"] {
  background: transparent !important;
  border: 0 !important;
}

/* Leerzustände sitzen in der Administration meist schon in einer
   Karte oder einem Formularfeld — ein eigener Rahmen ergäbe einen
   Kasten im Kasten. */
[class*="c-empty-state"] {
  background: transparent !important;
  border: 0 !important;
}
[class*="c-empty-state__content"] { background: transparent !important; }

/* ---------- Tab-Inhalte tragen keine Kartenfläche ---------- */
/* Keycloak wickelt manche Tabs (Login, Email) in eine Card, andere
   (Allgemein, Token) nicht. Statt überall eine Karte zu ergänzen,
   liegen alle Formulare direkt auf dem Seitengrund — ruhiger und
   für lange Einstellungslisten die bessere Lesart. */
[class*="c-tab-content"] [class*="c-card"]:not([class*="c-card__"]) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* ---------- Radios und Kontrollkästchen ---------- */
/* Native Elemente — ohne accent-color zeichnet der Browser sie blau. */
input[type="radio"],
input[type="checkbox"] {
  accent-color: var(--kc-accent);
}
[class*="c-radio__input"],
[class*="c-check__input"] { accent-color: var(--kc-accent); }

/* Menü-Innenteile sind Zeilen, keine Panels — sonst kaskadieren
   Rahmen und Radien durch content > list > list-item > item. */
[class*="c-menu__content"],
[class*="c-menu__list"],
[class*="c-menu__list-item"],
[class*="c-menu__item"],
[class*="c-menu__group"],
[class*="c-select__menu-list"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
[class*="c-menu__content"],
[class*="c-menu__list"] { border-radius: 0 !important; }

/* ---------- Eingabegruppen brauchen Luft ---------- */
/* PatternFly setzt die Teile bündig aneinander; mit 12px-Radien an
   jedem Element wirken sie ineinandergeschoben. */
[class*="c-input-group"],
[class*="c-number-input"] > [class*="c-input-group"] {
  gap: 8px;
}
[class*="c-input-group__item"] { border: 0 !important; }
[class*="c-number-input"] [class*="c-input-group"] > * { margin: 0 !important; }

/* ---------- Code-/JSON-Editor (react-textarea-code-editor) ---------- */
/* Kein Monaco, sondern ein Textarea-Overlay über einem Prism-<pre>.
   Ausgeliefert wird ein GitHub-Dark-Theme: Grund #161b22, Satzzeichen
   #484f58 — auf unserem Grund nur 2,2:1 und damit unlesbar. */
[class*="w-tc-editor"] {
  background: var(--kc-surface) !important;
  color: var(--kc-text-soft) !important;
  font-family: var(--kc-mono) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  border-radius: var(--kc-radius);
}
/* Das Textfeld liegt über dem eingefärbten <pre> — es darf keine
   eigene Fläche haben, sonst verdeckt es die Hervorhebung. */
[class*="w-tc-editor"] textarea,
textarea[class*="w-tc-editor-text"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  caret-color: var(--kc-accent) !important;
  font-family: var(--kc-mono) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}
[class*="w-tc-editor"] pre,
[class*="w-tc-editor"] code {
  background: transparent !important;
  color: var(--kc-text-soft) !important;
  font-family: var(--kc-mono) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}
/* Token-Farben aus der Theme-Palette, alle über 3:1 auf --kc-surface */
[class*="w-tc-editor"] .token.punctuation,
[class*="w-tc-editor"] .token.operator { color: var(--kc-text-faint) !important; }
[class*="w-tc-editor"] .token.property,
[class*="w-tc-editor"] .token.key,
[class*="w-tc-editor"] .token.tag,
[class*="w-tc-editor"] .token.keyword { color: var(--kc-accent-text) !important; }
[class*="w-tc-editor"] .token.string,
[class*="w-tc-editor"] .token.char,
[class*="w-tc-editor"] .token.attr-value { color: var(--kc-pill-text) !important; }
[class*="w-tc-editor"] .token.number,
[class*="w-tc-editor"] .token.boolean,
[class*="w-tc-editor"] .token.constant { color: var(--kc-success) !important; }
[class*="w-tc-editor"] .token.null,
[class*="w-tc-editor"] .token.important { color: var(--kc-danger-text) !important; }
[class*="w-tc-editor"] .token.comment { color: var(--kc-text-meta) !important; font-style: italic; }
[class*="w-tc-editor"] .code-line { color: var(--kc-text-soft) !important; }

/* Scrollleiste im Editor sichtbar halten */
[class*="w-tc-editor"],
[class*="w-tc-editor"] * { scrollbar-color: var(--kc-line-strong) var(--kc-surface); }
[class*="w-tc-editor"] ::-webkit-scrollbar-thumb,
[class*="c-code-editor"] ::-webkit-scrollbar-thumb {
  background: var(--kc-line-strong);
  border-radius: 8px;
}
[class*="w-tc-editor"] ::-webkit-scrollbar-thumb:hover { background: var(--kc-line-2); }

/* ---------- Ein Feld, ein Rahmen ---------- */
/* Bei mehrteiligen Feldern (Typeahead mit Chips) trugen fünf
   verschachtelte Knoten denselben Rahmen und denselben Fokusring:
   der Toggle, die Eingabegruppe, deren __main und __text sowie das
   <input>. Rahmen und Ring gehören ausschließlich an den äußersten
   Knoten — alles darin ist rahmenlos. */
[class*="c-text-input-group__"],
[class*="c-menu-toggle__"],
[class*="c-menu-toggle"] [class*="c-text-input-group"],
[class*="c-menu-toggle"] input,
[class*="c-text-input-group"] input,
[class*="c-input-group"] [class*="c-text-input-group"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
[class*="c-menu-toggle"] input:focus,
[class*="c-text-input-group"] input:focus {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- Chips ---------- */
/* PatternFly zeichnet ihren Rahmen über ::before in Grau (#444548). */
[class*="c-chip"]:not([class*="c-chip__"]):not([class*="c-chip-group"]) {
  background: rgba(var(--kc-accent-rgb), 0.06) !important;
  border: 1px solid var(--kc-line-pill) !important;
  border-radius: 999px !important;
  color: var(--kc-pill-text) !important;
}
[class*="c-chip"]::before,
[class*="c-chip"]::after { display: none !important; }
[class*="c-chip-group"],
[class*="c-chip-group__main"],
[class*="c-chip-group__list"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
[class*="c-chip__text"] {
  color: var(--kc-pill-text) !important;
  font-family: var(--kc-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
}
[class*="c-chip"] button { color: var(--kc-text-dim) !important; background: transparent !important; }
[class*="c-chip"] button:hover { color: var(--kc-accent-text) !important; }


/* ============================================================
   Schutzregel gegen den häufigsten Fehler in diesem Stylesheet
   ------------------------------------------------------------
   [class*="c-foo"] trifft auch "c-foo__bar" und "c-foo-group".
   Wo eine Regel einem Baustein Rahmen, Radius oder Schatten gibt,
   erben die Innenteile das sonst mit — sichtbar als Rahmen im
   Rahmen und, im Fokus, als mehrfacher Ring. Hier steht am Ende
   einmal zentral: Innenteile tragen keine Kontur. Flächen bleiben
   ausgenommen, damit Hover-Zustände weiter greifen.
   ============================================================ */
[class*="c-card__"],
[class*="c-menu__"],
[class*="c-menu-toggle__"],
[class*="c-chip__"],
[class*="c-chip-group__"],
[class*="c-alert__"],
[class*="c-modal-box__"],
[class*="c-label__"],
[class*="c-text-input-group__"],
[class*="c-empty-state__"],
[class*="c-data-list__item-content"],
[class*="c-data-list__cell"],
[class*="c-form__group-"] {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Die Eingabegruppe im Typeahead-Toggle darf auch im Fokus keinen
   eigenen Ring setzen — der gehört dem äußeren Feld. */
[class*="c-menu-toggle"] [class*="c-text-input-group"],
[class*="c-menu-toggle"] [class*="c-text-input-group"]:focus-within,
[class*="c-input-group"] [class*="c-text-input-group"]:focus-within {
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ---------- Keycloak-eigene Dropdown-Panels ---------- */
/* „Nach Message-Bundle suchen" ist kein PatternFly-Baustein, sondern
   ein Keycloak-Panel (kc-dropdown-panel). Deshalb greift keine der
   [class*="c-…"]-Regeln, und es blieb auf PF-Grau #26292d stehen. */
/* Achtung: kc-dropdown-panel sitzt AUCH auf dem Auslöser — nur das
   -content ist das schwebende Panel. */
[class*="kc-dropdown-panel-content"] {
  background: var(--kc-menu) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  box-shadow: 0 24px 48px -24px rgba(var(--kc-shadow-rgb), 0.95) !important;
  color: var(--kc-text) !important;
  padding: 14px !important;
}
[class*="kc-dropdown-panel-content"] [class*="c-form"] { background: transparent !important; }

/* Im schmalen Panel steht die Beschriftung über dem Feld — die
   breite Labelspalte der Einstellungsseiten (13.5rem) ließe für die
   Auswahl nur noch 128px übrig. */
[class*="kc-dropdown-panel-content"] [class*="c-form__group"] { display: block !important; }
[class*="kc-dropdown-panel-content"] [class*="c-form__group-label"] { margin-block-end: 6px; padding: 0; }
[class*="kc-dropdown-panel-content"] [class*="c-form__group-control"] { width: 100%; }
[class*="kc-dropdown-panel-content"] [class*="c-menu-toggle"],
[class*="kc-dropdown-panel-content"] [class*="c-form-control"] { width: 100% !important; }
[class*="kc-dropdown-panel-content"] [class*="c-form__actions"] { display: flex; gap: 10px; margin-block-start: 6px; }

/* ---------- Toolbars: vertikal zentriert, mit Luft ---------- */
/* PatternFly richtet die Zeile oben aus; bei Elementen von 24px und
   38px Höhe stehen Kontrollkästchen und Auswahlfeld dadurch
   versetzt. */
[class*="c-toolbar__content-section"],
[class*="c-toolbar__group"],
[class*="c-toolbar__item"] {
  align-items: center !important;
}
[class*="c-toolbar__content-section"] { gap: 12px; }
[class*="c-toolbar__item"] { display: flex; align-items: center; }

/* ---------- Radios und Kontrollkästchen mittig zum Text ---------- */
/* PF stellt sie auf die Grundlinie (baseline); Knopf und Beschriftung
   lagen dadurch 5–6px versetzt. */
[class*="c-radio"],
[class*="c-check"] {
  align-items: center !important;
  column-gap: 10px;
}
/* Knopf und Beschriftung mittig zueinander. PatternFly stellt den
   Knopf auf die Grundlinie; align-items/align-self am Wrapper plus
   das Zurücknehmen der PF-Randkorrektur zentrieren ihn.
   Gemessen: vorher 5,5px Versatz, jetzt 0,8px (Radio) bzw. 2,0px
   (Kontrollkästchen) — unter der Wahrnehmungsschwelle. */
[class*="c-radio__label"],
[class*="c-check__label"] { align-self: center !important; line-height: 1.4; }

/* ---------- Suchfeld: Lupe und Text auseinander ---------- */
[class*="c-text-input-group__icon"] { inset-inline-start: 12px !important; color: var(--kc-text-dim) !important; }
[class*="c-text-input-group__text-input"] { padding-inline-start: 38px !important; }
[class*="c-text-input-group"]:not([class*="c-text-input-group__"]) { padding-inline: 2px; }

/* Der Auslöser des Panels ist bei Keycloak ein „stilles" Feld mit
   bloßer Unterkante und umbrechendem Text — hier ein normales Feld. */
button[class*="kc-dropdown-panel"]:not([class*="panel-content"]) {
  height: auto !important;
  min-height: 38px;
  padding: 6px 14px !important;
  white-space: nowrap;
  background: var(--kc-surface) !important;
  border: 1px solid var(--kc-line) !important;
  border-radius: var(--kc-radius) !important;
  color: var(--kc-text) !important;
}
button[class*="kc-dropdown-panel"]:not([class*="panel-content"]):hover {
  border-color: var(--kc-line-2) !important;
}
button[class*="kc-dropdown-panel"]:not([class*="panel-content"]):focus,
button[class*="kc-dropdown-panel"]:not([class*="panel-content"]):active {
  border-color: var(--kc-accent) !important;
  border-width: 1px !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.14) !important;
  outline: none !important;
}
[class*="kc-dropdown-panel-icon"] { float: none !important; margin: 0 0 0 10px !important; color: var(--kc-text-dim); }

/* ---------- Auswahlfelder: Text links, Pfeil rechts ---------- */
/* Auswahl-Toggles sind <button>, und Browser zentrieren deren Text.
   Bei schmalen Feldern fällt das nicht auf, bei voller Breite steht
   die Beschriftung mittig und der Pfeil-Container dehnt sich mit. */
[class*="c-menu-toggle"]:not([class*="pf-m-plain"]):not([class*="c-menu-toggle__"]) {
  justify-content: space-between !important;
  text-align: start !important;
}
[class*="c-menu-toggle__text"] { text-align: start !important; }
[class*="c-menu-toggle__controls"] { margin-inline-start: 10px !important; }

/* Modal: Kopf, Titel und Schließen tragen keine eigene Fläche */
[class*="c-modal-box__header"],
[class*="c-modal-box__title"],
[class*="c-modal-box__title-text"],
[class*="c-modal-box__body"],
[class*="c-modal-box__footer"],
[class*="c-modal-box__description"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
[class*="c-modal-box__title-text"] { color: var(--kc-text) !important; font-weight: 700; }
[class*="c-modal-box"] [class*="c-button"][class*="pf-m-plain"] {
  background: transparent !important;
  border: 0 !important;
  color: var(--kc-text-dim) !important;
}
[class*="c-modal-box"] [class*="c-button"][class*="pf-m-plain"]:hover { color: var(--kc-text) !important; }
[class*="c-modal-box__footer"] { padding-block-start: 16px; }

/* ---------- Schmucklose <hr> ---------- */
/* Keycloak trennt Abschnitte teils mit einem nackten <hr> ohne
   PatternFly-Klasse — das fiel auf den Browser-Standard #808080
   zurück und leuchtete als heller Strich. */
hr:not([class*="c-divider"]) {
  height: 1px;
  margin-block: 12px;
  border: 0;
  border-block-start: 1px solid var(--kc-line);
  background: transparent;
  color: var(--kc-line);
}

/* ---------- Icons in Tabellenzellen ---------- */
/* Symbol und Text standen 3px auseinander. */
[class*="c-table__td"] > svg,
[class*="c-table__td"] svg:first-child,
[class*="c-table"] td svg:first-child { margin-inline-end: 8px; vertical-align: -0.18em; }

/* ---------- Beschriftung mittig zum Bedienelement ---------- */
/* PatternFly richtet die Beschriftung an der ersten Zeile aus und
   rechnet dabei mit ~36px hohen Feldern. Unsere sind 44px hoch,
   dadurch saß die Beschriftung 5px zu tief. */
[class*="c-form"][class*="pf-m-horizontal"] [class*="c-form__group"] {
  align-items: center;
}
[class*="c-form"][class*="pf-m-horizontal"] [class*="c-form__group-label"] {
  padding-block-start: 0 !important;
}

/* ---------- Anklickbare Karten reagieren ---------- */
/* Die Anbieter-Kacheln sind pf-m-clickable, hatten aber weder
   Zeigerhand noch Hover-Zustand. */
[class*="c-card"][class*="pf-m-clickable"],
[class*="c-card"][class*="pf-m-selectable"] {
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
[class*="c-card"][class*="pf-m-clickable"]:hover,
[class*="c-card"][class*="pf-m-selectable"]:hover {
  background: var(--kc-card-hover) !important;
  border-color: var(--kc-line-strong) !important;
}
[class*="c-card"][class*="pf-m-clickable"]:focus-visible,
[class*="c-card"][class*="pf-m-selectable"]:focus-visible {
  outline: none !important;
  border-color: var(--kc-accent) !important;
  box-shadow: 0 0 0 4px rgba(var(--kc-accent-rgb), 0.18) !important;
}

/* Meldungs-Innenteile tragen keine eigene Fläche — Symbol, Titel und
   Aktionszeile bekamen sonst je einen Kasten in der Meldung. */
[class*="c-alert__icon"],
[class*="c-alert__title"],
[class*="c-alert__description"],
[class*="c-alert__action"] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Der Pfeil saß in der Feldmitte, weil sein Container die freie
   Breite füllt. Die Breiten bleiben, wie PatternFly sie rechnet —
   nur das Symbol rückt ans rechte Ende. Flex-Eingriffe an
   __text/__controls kippen das Layout (Text auf 0px). */
[class*="c-menu-toggle__controls"] { justify-content: flex-end !important; }
[class*="c-menu-toggle__toggle-icon"] { margin-inline-start: auto !important; }
/* Das Symbol sitzt am linken Rand seines 146px breiten Containers —
   es gehört ans rechte Ende des Feldes. */
[class*="c-menu-toggle__toggle-icon"] {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center;
}

/* ---------- Reste der PatternFly-Hellwerte ---------- */
/* Diese Stellen holen ihre Farbe nicht aus den globalen Tokens und
   fielen im hellen Schema auf PF-Grau (#d2d2d2 / #6a6e73) zurueck. */
[class*="c-table__tr"],
[class*="c-table"] tr { border-color: var(--kc-line) !important; }
[class*="c-tabs__scroll-button"] {
  background: transparent !important;
  color: var(--kc-text-dim) !important;
}
[class*="c-tabs__scroll-button"]:hover { color: var(--kc-accent-text) !important; }
[class*="c-switch__label"] { color: var(--kc-text-muted) !important; }

/* Anklickbare Karten: PatternFly legt fuer die Auswahl ein verstecktes
   Radio mit Label darueber. Dessen ::before zeichnet eine 2px hohe
   Flaeche quer durch die Karte — auf dunklem Grund unsichtbar, im
   hellen Schema ein weisser Strich mitten im Element. */
[class*="c-card"] [class*="c-radio__label"]::before,
[class*="c-card"] [class*="c-check__label"]::before,
[class*="c-card"] [class*="c-radio__label"]::after,
[class*="c-card"] [class*="c-check__label"]::after {
  display: none !important;
  background: transparent !important;
}