/* ============================================================================
   IBH Managementportal — zentrale Theme-Schicht (Redesign, Phase 1)
   Token-basierter Override-Layer über den vendored UIkit3-Build. KEIN Build-Tooling.
   MUSS als letztes Stylesheet nach style.css geladen werden (siehe layout.html.twig).
   Single-Theme hell nach CI-Entscheidung. OpenSpec-Change: redesign-portal-ui.
   ============================================================================ */

:root {
  color-scheme: light;

  /* Marke (IBH Petrol/Kupfer) */
  --brand:        #005C82;
  --brand-light:  #3AAEC1;
  --brand-dark:   #113342;
  --accent:       #D79448;
  --accent-dark:  #824600;

  /* Neutrale — kühl, leicht ins Petrol gezogen (kein reines Grau) */
  --ink:        #12303c;
  --ink-soft:   #435762;
  --muted:      #77878f;
  --line:       #d9e2e6;
  --line-soft:  #e8eef1;
  --bg:         #eef3f5;
  --surface:    #ffffff;
  --surface-2:  #f4f8f9;
  --brand-tint: #e4eff3;

  /* Semantik — bewusst getrennt vom Kupfer-Akzent */
  --ok:       #1f7a52;  --ok-bg:     #e4f2eb;
  --warn:     #9a5a00;  --warn-bg:   #f9ecd6;
  --danger:   #b5342a;  --danger-bg: #fbe7e4;
  --info:     #005C82;  --info-bg:   #e4eff3;

  --radius:      12px;
  --radius-sm:   8px;
  --radius-pill: 999px;
  --shadow-sm:   0 1px 2px rgba(17,51,66,.06);
  --shadow:      0 1px 2px rgba(17,51,66,.05), 0 8px 24px rgba(17,51,66,.06);

  --font: "Trebuchet MS", Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ---------- Basis ---------- */
html { color-scheme: light; }
body {
  font-family: var(--font);
  color: var(--ink);
  background-color: var(--bg);
}
a { color: var(--brand); }
a:hover { color: var(--brand-dark); }

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-card-title {
  color: var(--brand-dark);
}

hr, .uk-hr { border-top-color: var(--line); }

/* ---------- Buttons ---------- */
.uk-button {
  border-radius: var(--radius-sm);
  text-transform: none;      /* UIkit uppercased Buttons — CI ist gemischt */
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.uk-button-primary {
  background-color: var(--brand);
  color: #fff;
}
.uk-button-primary:hover,
.uk-button-primary:focus {
  background-color: var(--brand-dark);
  color: #fff;
}
.uk-button-secondary {
  background-color: var(--accent);
  color: #fff;
}
.uk-button-secondary:hover,
.uk-button-secondary:focus {
  background-color: var(--accent-dark);
  color: #fff;
}
.uk-button-default {
  background-color: var(--surface);
  color: var(--brand-dark);
  border: 1px solid var(--line);
}
.uk-button-default:hover,
.uk-button-default:focus {
  background-color: var(--surface-2);
  border-color: var(--brand-light);
  color: var(--brand-dark);
}
.uk-button-danger { background-color: var(--danger); }
.uk-button-danger:hover, .uk-button-danger:focus { background-color: #93261e; }
.uk-button-text { color: var(--brand); }
.uk-button-text:hover { color: var(--brand-dark); }
.uk-button-link { color: var(--brand); }

/* Icon-Buttons (Nachricht senden, PDF-Download) auf die Marke statt UIkit-Grau */
.uk-icon-button {
  background-color: var(--brand-tint);
  color: var(--brand);
  transition: background-color .15s ease, color .15s ease;
}
.uk-icon-button:hover, .uk-icon-button:focus {
  background-color: var(--brand);
  color: #fff;
}

/* ---------- Cards ---------- */
.uk-card-default {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.uk-card-title { font-size: 1.05rem; }
.uk-card-hover:hover { box-shadow: var(--shadow); }

/* ---------- Formulare / Eingaben ---------- */
.uk-input, .uk-select, .uk-textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.uk-form-label { color: var(--brand-dark); font-weight: 600; }
.uk-form-danger, .uk-input.uk-form-danger, .uk-select.uk-form-danger, .uk-textarea.uk-form-danger {
  border-color: var(--danger);
}
input.uk-radio:checked, input.uk-checkbox:checked {
  background-color: var(--brand);
  border-color: var(--brand);
}
input.uk-radio:focus, input.uk-checkbox:focus { border-color: var(--brand); }

/* ---------- Tabellen ---------- */
.uk-table th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .05em;
}
.uk-table-divider > :first-child > tr:not(:first-child),
.uk-table-divider > :not(:first-child) > tr,
.uk-table-divider > tr:not(:first-child) { border-top-color: var(--line-soft); }
.uk-table-striped > tr:nth-of-type(odd),
.uk-table-striped tbody tr:nth-of-type(odd) { background-color: var(--surface-2); }
.uk-table-hover > tr:hover,
.uk-table-hover tbody tr:hover { background-color: var(--brand-tint); }

/* ---------- Description-List (Show-Screens) ---------- */
.uk-description-list > dt { color: var(--muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; }
.uk-description-list > dd { color: var(--ink); }

/* ---------- Alerts / Flash ---------- */
.uk-alert-primary { background-color: var(--brand-tint); color: var(--brand-dark); }
.uk-alert-success { background-color: var(--ok-bg); color: var(--ok); }
.uk-alert-warning { background-color: var(--warn-bg); color: var(--warn); }
.uk-alert-danger  { background-color: var(--danger-bg); color: var(--danger); }

/* ---------- Labels / Badges ---------- */
.uk-label { background-color: var(--brand); border-radius: var(--radius-pill); text-transform: none; }
.uk-label-success { background-color: var(--ok); }
.uk-label-warning { background-color: var(--warn); }
.uk-label-danger  { background-color: var(--danger); }

/* ---------- Akzent-Utilities ---------- */
.uk-text-primary { color: var(--brand) !important; }
.uk-text-muted   { color: var(--muted) !important; }

/* ============================================================================
   Status-Pill-Utilities (für Phase 2, Kern-Screen-Umbau)
   Punktmarker + tonale Fläche; Semantik getrennt vom Marken-Akzent.
   ============================================================================ */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; line-height: 1.4; white-space: nowrap;
  padding: 3px 10px; border-radius: var(--radius-pill);
}
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill-ok     { color: var(--ok);      background: var(--ok-bg); }
.pill-warn   { color: var(--warn);    background: var(--warn-bg); }
.pill-danger { color: var(--danger);  background: var(--danger-bg); }
.pill-info   { color: var(--info);    background: var(--info-bg); }
.pill-muted  { color: var(--ink-soft); background: var(--surface-2); }

/* ============================================================================
   Header — dunkle Marken-Leiste (.app-header), weißes Logo + Menü.
   Läuft über die volle Breite (außerhalb .uk-container, s. layout.html.twig).
   ============================================================================ */
body { padding-top: 0; }                       /* Leiste flush an den Seitenanfang (style.css: 30px) */

.app-header {
  background-color: var(--brand-dark);
  padding-bottom: 0;                            /* style.css: header{padding-bottom:20px} zurücknehmen */
  margin-bottom: 28px;
  box-shadow: 0 4px 16px rgba(17, 51, 66, .18);
}
.app-header .uk-navbar-nav > li > a {
  min-height: 60px;
  color: #cfe0e7;
  text-transform: none;
  font-size: 14px;
}
.app-header .uk-navbar-nav > li > a:hover,
.app-header .uk-navbar-nav > li > a:focus,
.app-header .uk-navbar-nav > li.uk-open > a { color: #fff; }

.app-header__logo { padding-left: 0; }
.app-header__logo img { height: 40px; width: auto; }

.app-header .uk-navbar-toggle { color: #cfe0e7; }
.app-header .uk-navbar-toggle:hover { color: #fff; }

/* Dropdown-Panels bleiben hell — Linkfarben auf die Marke ziehen */
.uk-navbar-dropdown-nav > li > a,
.uk-nav-default > li > a { color: var(--ink-soft); }
.uk-navbar-dropdown-nav > li > a:hover,
.uk-navbar-dropdown-nav > li > a:focus,
.uk-nav-default > li > a:hover,
.uk-nav-default > li > a:focus { color: var(--brand); }
.uk-navbar-dropdown-nav > li.uk-active > a,
.uk-nav-default > li.uk-active > a { color: var(--brand); }

/* Untermenüs etwas luftiger als der UIkit-Default (Wunsch: mehr Platz) */
.app-header .uk-navbar-dropdown {
  min-width: 232px;
  padding: 26px 28px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.app-header .uk-navbar-dropdown-nav > li > a {
  padding-top: 7px;
  padding-bottom: 7px;
}
.app-header .uk-navbar-dropdown-nav > li + li { margin-top: 2px; }

/* ============================================================================
   Wiederverwendbare Komponenten für die Kern-Screens (Phase 2)
   ============================================================================ */

/* Kennzahl-Kachel (Dashboards) — Karte mit farbigem Akzentstreifen links */
.stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; position: relative; overflow: hidden; box-shadow: var(--shadow-sm); height: 100%;
}
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); }
.stat--accent::before { background: var(--accent); }
.stat--ok::before     { background: var(--ok); }
.stat--warn::before   { background: var(--warn); }
.stat--danger::before { background: var(--danger); }
.stat__label { font-size: 12.5px; color: var(--ink-soft); }
.stat__value { font-size: 30px; font-weight: 700; color: var(--brand-dark); font-variant-numeric: tabular-nums; line-height: 1.05; margin-top: 2px; }
.stat__meta  { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Listen-Zeile (Prüflinge, Kurs-/Prüfungs-Zeilen) — stapelt auf Mobil */
.exrow { display: flex; align-items: center; gap: 14px; padding: 13px 4px; }
.exrow + .exrow { border-top: 1px solid var(--line-soft); }
.exrow__main { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.exrow__detail { color: var(--ink-soft); font-size: 13.5px; text-align: right; }
.exrow__name { font-weight: 600; color: var(--brand-dark); }
.exrow__sub { font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  .exrow { flex-wrap: wrap; align-items: flex-start; }
  .exrow__detail { text-align: left; width: 100%; }
}

/* Zeile in einer Karte ohne eigenen Zeilenabstand (Dashboard-Aufgaben) */
.linkrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; }
.linkrow + .linkrow { border-top: 1px solid var(--line-soft); }
.linkrow__grow { flex: 1; min-width: 0; }

/* Status-Zeile als Karte mit farbigem Randstreifen links (statt voll gefülltem uk-alert) */
.statusrow { border-left: 4px solid var(--line) !important; }
.statusrow--ok     { border-left-color: var(--ok) !important; }
.statusrow--warn   { border-left-color: var(--warn) !important; }
.statusrow--danger { border-left-color: var(--danger) !important; }
.statusrow--info   { border-left-color: var(--brand) !important; }

/* Fortschrittsbalken auf die Marke */
.uk-progress { background-color: var(--surface-2); border-radius: var(--radius-pill); height: 10px; }
.uk-progress::-webkit-progress-bar { background-color: var(--surface-2); border-radius: var(--radius-pill); }
.uk-progress::-webkit-progress-value { background-color: var(--brand); border-radius: var(--radius-pill); }
.uk-progress::-moz-progress-bar { background-color: var(--brand); border-radius: var(--radius-pill); }

/* Semantik-Textfarben (Status-Icons) an die Tokens angleichen */
.uk-text-success { color: var(--ok) !important; }
.uk-text-warning { color: var(--warn) !important; }
.uk-text-danger  { color: var(--danger) !important; }

/* ---------- Fokus-Sichtbarkeit (Barrierefreiheit) ---------- */
:focus-visible { outline: 2px solid var(--brand-light); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .uk-button, .uk-input, .uk-select, .uk-textarea { transition: none; }
}