/* ── OCLD Account Console Theme ──────────────────────────────────────────── */
/* Extends keycloak.v2 with OCLD Dark Mode, DIN OT, Glassmorphism            */

/* ── Fonts ─────────────────────────────────────────────────────────────── */
@font-face { font-family: 'DIN OT'; src: url('../fonts/DINOT-Light.ttf') format('truetype');  font-weight: 300; font-display: swap; }
@font-face { font-family: 'DIN OT'; src: url('../fonts/DINOT.ttf')        format('truetype');  font-weight: 400; font-display: swap; }
@font-face { font-family: 'DIN OT'; src: url('../fonts/DINOT-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'DIN OT'; src: url('../fonts/DINOT-Bold.ttf')   format('truetype'); font-weight: 700; font-display: swap; }

/* ── Design Tokens ─────────────────────────────────────────────────────── */
:root {
  --ocld-new-dark:    #07264C;
  --ocld-dark-blue:   #0d456b;
  --ocld-lavendel:    #9d599f;
  --ocld-dark-grey:   #54585b;
  --ocld-light-blue:  #35abe2;
  --ocld-light-grey:  #f4f4f4;
  --ocld-white:       #ffffff;

  --ocld-bg:          #1c2230;
  --ocld-card-bg:     rgba(255, 255, 255, 0.06);
  --ocld-card-border: rgba(53, 171, 226, 0.45);
  --ocld-text-primary:   #ffffff;
  --ocld-text-secondary: rgba(255, 255, 255, 0.8);
  --ocld-text-muted:     rgba(255, 255, 255, 0.55);
  --ocld-divider:        rgba(255, 255, 255, 0.08);
  --ocld-amber:          rgba(200, 160, 50, 0.4);

  --ocld-transition:      400ms cubic-bezier(0.4, 0, 0.2, 1);
  --ocld-transition-fast: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* PatternFly v5 token overrides */
  --pf-v5-global--FontFamily--sans-serif:   'DIN OT', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pf-v5-global--Color--100:               var(--ocld-text-primary);
  --pf-v5-global--Color--200:               var(--ocld-text-secondary);
  --pf-v5-global--link--Color:              var(--ocld-light-blue);
  --pf-v5-global--link--Color--hover:       var(--ocld-lavendel);
  --pf-v5-global--BackgroundColor--100:     var(--ocld-bg);
  --pf-v5-global--BackgroundColor--200:     var(--ocld-bg);
  --pf-v5-global--BackgroundColor--dark:    var(--ocld-bg);
  --pf-v5-global--BorderColor--100:         var(--ocld-divider);
  --pf-v5-global--BorderColor--200:         var(--ocld-card-border);
  --pf-v5-global--primary-color--100:       var(--ocld-dark-blue);
  --pf-v5-global--primary-color--200:       var(--ocld-new-dark);

  color-scheme: dark;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
html, body {
  background-color: var(--ocld-bg) !important;
  background-image:
    radial-gradient(ellipse at 25% 0%, rgba(13, 69, 107, 0.40) 0%, transparent 60%),
    radial-gradient(ellipse at 75% 0%, rgba(157, 89, 159, 0.28) 0%, transparent 60%) !important;
  color: var(--ocld-text-primary) !important;
  font-family: 'DIN OT', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  color-scheme: dark;
}

/* Natives <select>: color-scheme:dark erzwingt helle Schrift im OS-Popup */
select {
  color-scheme: dark;
  color: var(--ocld-text-primary) !important;
  background: rgba(13, 69, 107, 0.35) !important;
  border: none !important;
  outline: none !important;
}
select option {
  background: #1a2d42 !important;
  color: var(--ocld-text-primary) !important;
}

/* pf-m-disabled: gleicher Hintergrund, kein abweichendes grau */
.pf-v5-c-form-control.pf-m-disabled {
  background: rgba(13, 69, 107, 0.35) !important;
  box-shadow: 0 0 0 1px var(--ocld-card-border) !important;
  opacity: 0.7;
  --pf-v5-c-form-control--m-disabled--BackgroundColor: rgba(13, 69, 107, 0.35);
}

/* Explizite Farbvererbung nur auf normale Elemente anwenden.
   ::before / ::after weglassen — PF5 nutzt sie für Borders und Form-Decorations. */
* {
  color: inherit;
}

/* ── Page Layout ───────────────────────────────────────────────────────── */
.pf-v5-c-page {
  background-color: var(--ocld-bg);
}

.pf-v5-c-page__main {
  background-color: var(--ocld-bg);
  color: var(--ocld-text-primary);
}

/* PF5 setzt für Sections und den Main-Body helle Hintergründe — alle auf dark überschreiben */
.pf-v5-c-page__main-section,
.pf-v5-c-page__main-body,
.pf-v5-c-page__main-breadcrumb,
.pf-v5-c-page__main-nav {
  --pf-v5-c-page__main-container--BackgroundColor: var(--ocld-bg);
  --pf-v5-c-page__main-section--BackgroundColor: var(--ocld-bg);
  background-color: var(--ocld-bg) !important;
  color: var(--ocld-text-primary);
}

/* ── Page Header Section (Titel + Beschreibung) ─────────────────────────── */
/* Nur die allererste Section (Titel) bekommt einen dezenten Gradient */
.pf-v5-c-page__main-section.pf-m-light:first-of-type {
  border-bottom: 1px solid rgba(53, 171, 226, 0.1);
}

/* ── TextContent / pf-v5-c-content ─────────────────────────────────────── */
/* Wird von Page.tsx für den Seitentitel genutzt */
.pf-v5-c-content {
  color: var(--ocld-text-primary);
}

.pf-v5-c-content h1,
.pf-v5-c-content .pf-v5-c-title {
  font-size: 1.4rem;
  font-weight: 600;
  font-family: 'DIN OT', 'Inter', sans-serif;
  color: var(--ocld-text-primary) !important;
  margin-bottom: 0.35rem;
  letter-spacing: 0.01em;
}

.pf-v5-c-content p {
  color: var(--ocld-text-muted);
  font-size: 0.9rem;
  margin: 0;
}

/* ── Masthead / Header ─────────────────────────────────────────────────── */
.pf-v5-c-masthead {
  /* patternfly.min.css setzt BackgroundColor auf dark-100 (≈ schwarz) und
     gibt das per --c-toolbar--BackgroundColor an Toolbar-Kinder weiter.
     Beides auf transparent setzen damit der Gradient sichtbar bleibt. */
  --pf-v5-c-masthead--BackgroundColor: transparent;
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: transparent;
  /* background-image statt background-Shorthand: Shorthand würde background-color zurücksetzen
     und getComputedStyle().backgroundColor wäre wieder rgba(0,0,0,0) */
  background-color: var(--ocld-new-dark);
  background-image: linear-gradient(135deg, var(--ocld-new-dark) 0%, var(--ocld-dark-blue) 100%);
  border-bottom: 1px solid rgba(53, 171, 226, 0.15);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35), inset 0 -1px 0 rgba(53, 171, 226, 0.1);
  color: var(--ocld-text-primary);
}

/* Toolbar und expandable Content explizit transparent — CSS-Variable
   allein reicht nicht wenn der Wert von dark-100 schon konkret aufgelöst ist */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__expandable-content {
  background-color: transparent !important;
}

.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content {
  color: var(--ocld-text-primary);
}

.pf-v5-c-brand {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}

/* ── Sidebar / Nav ─────────────────────────────────────────────────────── */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body {
  --pf-v5-c-page__sidebar--BackgroundColor: transparent;
  background: linear-gradient(180deg, rgba(7, 38, 76, 0.6) 0%, rgba(13, 69, 107, 0.4) 100%);
  border-right: 1px solid rgba(53, 171, 226, 0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 2px 0 24px rgba(0, 0, 0, 0.25), inset -1px 0 0 rgba(53, 171, 226, 0.08);
}

.pf-v5-c-nav {
  background: transparent;
}

.pf-v5-c-nav__list {
  padding: 0.5rem 0;
}

.pf-v5-c-nav__item {
  border-bottom: none;
}

.pf-v5-c-nav__link {
  color: var(--ocld-text-secondary) !important;
  font-family: 'DIN OT', 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  padding: 0.6rem 1.25rem;
  transition: background var(--ocld-transition-fast), color var(--ocld-transition-fast);
  text-decoration: none;
}

.pf-v5-c-nav__link:hover {
  background: rgba(53, 171, 226, 0.1) !important;
  color: var(--ocld-text-primary) !important;
}

/* ── Nav active: border-left / border-inline-start komplett entfernen ─────── */
/* PF5 setzt den blauen Balken via border-inline-start-width auf ::after.
   Custom-Property-Override allein reicht nicht — direktes !important nötig. */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: 0px;
  --pf-v5-c-nav__link--after--BorderLeftWidth: 0px;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"] {
  --pf-v5-c-nav__link--m-current--after--BorderLeftWidth: 0px !important;
  --pf-v5-c-nav__link--after--BorderLeftWidth: 0px !important;
  --pf-v5-c-nav__link--m-current--BackgroundColor: transparent;
  background: rgba(53, 171, 226, 0.12) !important;
  color: var(--ocld-light-blue) !important;
  font-weight: 500;
  box-shadow: 0 0 16px rgba(53, 171, 226, 0.08);
  overflow: hidden;
  position: relative;
}

.pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav__link[aria-current="page"]::after,
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__link[aria-current="page"]::before {
  display: none !important;
  content: none !important;
  border: none !important;
  border-inline-start: none !important;
  border-inline-start-width: 0 !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.pf-v5-c-nav__section-title {
  color: var(--ocld-text-muted) !important;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem 0.25rem;
}

/* ── Cards / Content Blocks ─────────────────────────────────────────────── */
.pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: transparent !important;
  background-color: transparent !important;
  background: linear-gradient(135deg, rgba(13, 69, 107, 0.35), rgba(7, 38, 76, 0.25)) !important;
  border: 1px solid rgba(53, 171, 226, 0.18) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ocld-text-primary);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: box-shadow var(--ocld-transition-fast), border-color var(--ocld-transition-fast);
}

.pf-v5-c-card:hover {
  border-color: rgba(53, 171, 226, 0.3) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.pf-v5-c-card__header,
.pf-v5-c-card__title {
  color: var(--ocld-text-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
}

.pf-v5-c-card__title-text {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pf-v5-c-card__body {
  color: var(--ocld-text-secondary);
}

/* OCLD utility card class */
.ocld-card {
  background: linear-gradient(135deg, rgba(13, 69, 107, 0.35), rgba(7, 38, 76, 0.25));
  border: 1px solid rgba(53, 171, 226, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 1.25rem 1.5rem;
  color: var(--ocld-text-primary);
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--ocld-dark-blue), var(--ocld-light-blue)) !important;
  border: none !important;
  border-radius: 8px !important;
  color: var(--ocld-white) !important;
  font-family: 'DIN OT', 'Inter', sans-serif;
  font-weight: 600;
  box-shadow: 0 4px 20px rgba(13, 69, 107, 0.4);
  transition: transform var(--ocld-transition-fast), box-shadow var(--ocld-transition-fast), opacity var(--ocld-transition-fast);
}

.pf-v5-c-button.pf-m-primary::after,
.pf-v5-c-button.pf-m-primary::before {
  display: none !important;
  border: none !important;
  content: none !important;
}

.pf-v5-c-button.pf-m-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(13, 69, 107, 0.5), 0 0 30px rgba(53, 171, 226, 0.12);
  opacity: 0.95;
}

.pf-v5-c-button.pf-m-secondary {
  background: transparent !important;
  /* border via box-shadow statt border-property — wird vom Browser weicher (anti-aliased) gerendert */
  border: none !important;
  box-shadow: inset 0 0 0 1px var(--ocld-light-blue) !important;
  border-radius: 8px !important;
  color: var(--ocld-light-blue) !important;
  font-family: 'DIN OT', 'Inter', sans-serif;
  font-weight: 500;
  transition: background var(--ocld-transition-fast), box-shadow var(--ocld-transition-fast);
}

/* PF5 zeichnet einen eigenen ::after-Border der die stufigen Kanten verursacht — ausblenden */
.pf-v5-c-button.pf-m-secondary::after,
.pf-v5-c-button.pf-m-secondary::before {
  display: none !important;
  border: none !important;
  content: none !important;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: rgba(53, 171, 226, 0.08) !important;
  box-shadow: inset 0 0 0 1px var(--ocld-light-blue), 0 4px 16px rgba(53, 171, 226, 0.15) !important;
}

.pf-v5-c-button.pf-m-link {
  color: var(--ocld-light-blue) !important;
  font-family: 'DIN OT', 'Inter', sans-serif;
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--ocld-lavendel) !important;
}

.pf-v5-c-button.pf-m-danger {
  background: rgba(157, 89, 159, 0.85) !important;  /* Lavendel — kein Rot im Brand */
  border: none !important;
  border-radius: 10px;
  color: var(--ocld-white) !important;
}

/* ── Form Layout (Persönliche Angaben, Kontosicherheit) ─────────────────── */

/* Horizontale Gruppen: feiner Separator */
.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group:last-child {
  border-bottom: none;
}

/* ── DataList (Anwendungen, Gruppen) ─────────────────────────────────────── */

/* Header-Zeile (Name / Application type / Status) deutlich abheben */
.pf-v5-c-data-list #applications-list-header,
.pf-v5-c-data-list #groups-list-header,
.pf-v5-c-data-list #groups-list-columns-names {
  background: rgba(13, 69, 107, 0.4) !important;
  border-bottom: 1px solid rgba(53, 171, 226, 0.2) !important;
}
.pf-v5-c-data-list #applications-list-header strong,
.pf-v5-c-data-list #groups-list-columns-names strong {
  color: var(--ocld-text-muted) !important;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Toggle-Button in DataList (▶) */
.pf-v5-c-data-list__toggle .pf-v5-c-button {
  color: var(--ocld-light-blue) !important;
}

/* Expandierter Content */
.pf-v5-c-data-list__expandable-content {
  background: rgba(7, 38, 76, 0.3) !important;
  border-top: 1px solid rgba(53, 171, 226, 0.08) !important;
}

/* ── Form Controls ─────────────────────────────────────────────────────── */
.pf-v5-c-form-control {
  background: rgba(13, 69, 107, 0.35) !important;
  border: 1px solid var(--ocld-card-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--ocld-text-primary) !important;
  font-family: 'DIN OT', 'Inter', sans-serif;
  /* PF5 ::before/::after Borders komplett deaktivieren */
  --pf-v5-c-form-control--before--BorderTopColor: transparent;
  --pf-v5-c-form-control--before--BorderRightColor: transparent;
  --pf-v5-c-form-control--before--BorderLeftColor: transparent;
  --pf-v5-c-form-control--before--BorderTopWidth: 0px;
  --pf-v5-c-form-control--before--BorderRightWidth: 0px;
  --pf-v5-c-form-control--before--BorderLeftWidth: 0px;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--after--BorderBottomWidth: 0px;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
  --pf-v5-c-form-control--BoxShadow: none;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:hover {
  outline: none;
  border-color: var(--ocld-light-blue) !important;
  box-shadow: none !important;
}

/* Innere input/select/textarea: kein eigener Border, kein weißer Hintergrund */
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea {
  background: transparent !important;
  border: none !important;
  color: var(--ocld-text-primary) !important;
  font-family: 'DIN OT', 'Inter', sans-serif;
  border-radius: 10px !important;
  outline: none !important;
}

/* Webkit Autofill — verhindert weißen Hintergrund bei browser-autocomplete */
.pf-v5-c-form-control input:-webkit-autofill,
.pf-v5-c-form-control input:-webkit-autofill:hover,
.pf-v5-c-form-control input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px rgba(13, 69, 107, 0.3) inset !important;
  -webkit-text-fill-color: var(--ocld-text-primary) !important;
  caret-color: var(--ocld-text-primary);
}

/* overflow:hidden entfernt — border ist jetzt echter border, kein box-shadow mehr */
.pf-v5-c-form-control {

.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea,
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control:focus-visible {
  outline: none !important;
  outline-color: transparent !important;
  box-shadow: none;
}

.pf-v5-c-form__label {
  color: var(--ocld-text-secondary) !important;
  font-size: 0.85rem;
  font-weight: 500;
}

.pf-v5-c-form__helper-text {
  color: var(--ocld-text-muted) !important;
}

/* ── OCLD utility alerts (kein PF5-Markup nötig) ───────────────────────── */
.ocld-alert {
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  border: 1px solid var(--ocld-card-border);
  background: var(--ocld-card-bg);
  color: var(--ocld-text-primary);
}
.ocld-alert--danger  { border-color: rgba(200,50,50,0.4)  !important; background: rgba(200,50,50,0.1)  !important; }
.ocld-alert--warning { border-color: var(--ocld-amber)    !important; background: rgba(200,160,50,0.1) !important; }
.ocld-alert--info    { border-color: rgba(53,171,226,0.3) !important; background: rgba(53,171,226,0.08)!important; }

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.pf-v5-c-alert {
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid var(--ocld-card-border);
  background: var(--ocld-card-bg);
}

.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-error {
  border-color: rgba(200, 50, 50, 0.4) !important;
  background: rgba(200, 50, 50, 0.1) !important;
}

.pf-v5-c-alert.pf-m-success {
  border-color: rgba(80, 200, 80, 0.4) !important;
  background: rgba(80, 200, 80, 0.1) !important;
}

.pf-v5-c-alert.pf-m-info {
  border-color: rgba(53, 171, 226, 0.3) !important;
  background: rgba(53, 171, 226, 0.08) !important;
}

.pf-v5-c-alert.pf-m-warning {
  border-color: var(--ocld-amber) !important;
  background: rgba(200, 160, 50, 0.1) !important;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
.pf-v5-c-table {
  --pf-v5-c-table--BackgroundColor: transparent !important;
  background: transparent !important;
  background-color: transparent !important;
  color: var(--ocld-text-primary);
}

/* Alle Tabellen-Zellen und Rows auf dark */
.pf-v5-c-table tr,
.pf-v5-c-table td,
.pf-v5-c-table th {
  --pf-v5-c-table__tr--BackgroundColor: transparent !important;
  background-color: transparent !important;
}

.pf-v5-c-table thead tr,
.pf-v5-c-table thead th {
  background: rgba(13, 69, 107, 0.35);
  color: var(--ocld-text-muted) !important;
  border-bottom: 1px solid var(--ocld-divider);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pf-v5-c-table tbody tr {
  border-bottom: 1px solid var(--ocld-divider);
  transition: background var(--ocld-transition-fast);
}

.pf-v5-c-table tbody tr:hover {
  background: rgba(53, 171, 226, 0.05);
}

/* Device activity expandable rows — Card-Optik */
.pf-v5-c-table tr[class*="pf-m-expanded"],
.pf-v5-c-table tbody tr:has(.pf-v5-c-description-list) {
  background: rgba(13, 69, 107, 0.35);
  border: 1px solid rgba(53, 171, 226, 0.15);
  border-radius: 10px;
}

.pf-v5-c-table td {
  color: var(--ocld-text-secondary);
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
.pf-v5-c-backdrop {
  background: rgba(7, 38, 76, 0.75);
  backdrop-filter: blur(4px);
}

.pf-v5-c-modal-box {
  background: #1e2a3a !important;
  border: 1px solid var(--ocld-card-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
}

.pf-v5-c-modal-box__header {
  border-bottom: 1px solid var(--ocld-divider);
  padding: 1.25rem 1.5rem 1rem;
}

.pf-v5-c-modal-box__title {
  color: var(--ocld-text-primary) !important;
  font-weight: 600;
}

.pf-v5-c-modal-box__body {
  color: var(--ocld-text-secondary);
  padding: 1.25rem 1.5rem;
}

.pf-v5-c-modal-box__footer {
  border-top: 1px solid var(--ocld-divider);
  padding: 1rem 1.5rem;
}

/* ── Dropdown / Select ─────────────────────────────────────────────────── */
/* Natives <select> auf dark stylen */
select,
.pf-v5-c-form-control select {
  color: var(--ocld-text-primary) !important;
  background: rgba(13, 69, 107, 0.35) !important;
  color-scheme: dark;
}

select option {
  background: #1e2a3a !important;
  color: var(--ocld-text-primary) !important;
}

.pf-v5-c-menu,
.pf-v5-c-dropdown__menu {
  background: #1e2a3a !important;
  border: 1px solid var(--ocld-card-border) !important;
  border-radius: 10px;
}

.pf-v5-c-menu__item:hover,
.pf-v5-c-dropdown__menu-item:hover {
  background: rgba(53, 171, 226, 0.1) !important;
}

/* ── Titles / Headings ─────────────────────────────────────────────────── */
h1, h2, h3, h4, .pf-v5-c-title {
  color: var(--ocld-text-primary) !important;
  font-family: 'DIN OT', 'Inter', sans-serif !important;
}

/* ── Links ──────────────────────────────────────────────────────────────── */
a {
  color: var(--ocld-light-blue);
  transition: color var(--ocld-transition-fast);
}

a:hover {
  color: var(--ocld-lavendel);
}

/* ── Dividers ───────────────────────────────────────────────────────────── */
hr, .pf-v5-c-divider {
  border-color: var(--ocld-divider) !important;
}

/* ── Spinner ──────────────────────────────────────────────────────────────────── */
/* PF5-Spinner mit OCLD-Farbe stylen — kein JS nötig */
.pf-v5-c-spinner {
  overflow: visible !important;
  animation: none !important;
}
.pf-v5-c-spinner__path { display: none !important; }

/* ── Skeleton ───────────────────────────────────────────────────────────── */
.pf-v5-c-skeleton {
  background: rgba(255, 255, 255, 0.08) !important;
}

.pf-v5-c-skeleton::before {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  ) !important;
}

/* ── Switch / Toggle ────────────────────────────────────────────────────── */
.pf-v5-c-switch__toggle {
  background: rgba(255, 255, 255, 0.15) !important;
}

.pf-v5-c-switch input:checked ~ .pf-v5-c-switch__toggle {
  background: var(--ocld-light-blue) !important;
}

/* ── Labels / Badges ────────────────────────────────────────────────────── */
.pf-v5-c-label {
  background: var(--ocld-card-bg) !important;
  border: 1px solid var(--ocld-card-border) !important;
  border-radius: 6px;
  color: var(--ocld-text-secondary) !important;
}

/* ── Description List ───────────────────────────────────────────────────── */
.pf-v5-c-description-list__term {
  color: var(--ocld-text-muted) !important;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.pf-v5-c-description-list__description {
  color: var(--ocld-text-primary) !important;
}

/* ── Toolbar ────────────────────────────────────────────────────────────── */
.pf-v5-c-toolbar {
  background: transparent;
}

/* ── Empty State ────────────────────────────────────────────────────────── */
.pf-v5-c-empty-state {
  color: var(--ocld-text-muted);
}

.pf-v5-c-empty-state__icon {
  color: var(--ocld-light-blue) !important;
}

.pf-v5-c-empty-state__title {
  color: var(--ocld-text-primary) !important;
}

.pf-v5-c-empty-state__body {
  color: var(--ocld-text-muted) !important;
}

/* ── Expandable Section ─────────────────────────────────────────────────── */
.pf-v5-c-expandable-section__toggle {
  color: var(--ocld-light-blue) !important;
}

/* ── Data List ─────────────────────────────────────────────────────────── */
.pf-v5-c-data-list {
  border-color: var(--ocld-divider) !important;
  background: transparent !important;
}

.pf-v5-c-data-list__item {
  --pf-v5-c-data-list__item--BackgroundColor: transparent !important;
  background-color: rgba(13, 69, 107, 0.2) !important;
  border-color: var(--ocld-divider) !important;
  color: var(--ocld-text-primary) !important;
}

.pf-v5-c-data-list__item-row,
.pf-v5-c-data-list__item-content,
.pf-v5-c-data-list__cell {
  background: transparent !important;
  color: var(--ocld-text-primary) !important;
}

.pf-v5-c-data-list__item:hover {
  background-color: rgba(53, 171, 226, 0.06) !important;
}

/* ── Scrollbar ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ocld-lavendel); }

/* Nav active: PF5 border-left via ::before komplett entfernen */
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__link[aria-current]::before {
  display: none !important;
  content: none !important;
  border: none !important;
  background: none !important;
  width: 0 !important;
}

/* ── Language Select (pf-v5-c-menu-toggle) ─────────────────────────────── */
.pf-v5-c-menu-toggle {
  background: rgba(13, 69, 107, 0.35) !important;
  border: none !important;
  box-shadow: 0 0 0 1px var(--ocld-card-border) !important;
  border-radius: 10px !important;
  color: var(--ocld-text-primary) !important;
}

.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after {
  display: none !important;
  border: none !important;
  content: none !important;
}

.pf-v5-c-menu-toggle:hover,
.pf-v5-c-menu-toggle.pf-m-expanded {
  background: rgba(13, 69, 107, 0.5) !important;
  box-shadow: 0 0 0 1px var(--ocld-light-blue) !important;
}

/* ── JumpLinks ──────────────────────────────────────────────────────────── */
.pf-v5-c-jump-links__label {
  color: var(--ocld-text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pf-v5-c-jump-links__link {
  color: var(--ocld-light-blue) !important;
  text-decoration: none;
}
.pf-v5-c-jump-links__link:hover {
  color: var(--ocld-lavendel) !important;
  text-decoration: underline;
}