/* Gestaltung nach dem Design von sv49-admin.de: monochrome Graustufen,
 * schwarzer Akzent, Linien statt Schatten, scharfe Ecken, Serifen-Titel und
 * Versal-Beschriftungen. Buntfarben tragen nur Zustände (ok/warn/error) und
 * die vom Nutzer gewählten Tag-Farben. Alle Werte kommen aus tokens.css. */

* { box-sizing: border-box; }
/* Gemeinsame Höhe von Eingabefeld, Auswahl und Knopf (Schrift × Zeilenhöhe +
 * Innenabstand + Rahmen), damit alles in einer Zeile auf einer Linie steht;
 * dazu der Abstand vom Label-Oberrand bis zum Feld. */
:root { --feld-hoehe: calc(var(--svb-size-base) * var(--svb-leading-normal) + 2 * var(--svb-space-2) + 2 * var(--svb-border-hairline));
        --label-hoehe: calc(var(--svb-size-sm) * var(--svb-leading-normal) + var(--svb-space-1)); }
body { margin: 0; background: var(--svb-color-surface-sunken); color: var(--svb-color-text);
       font-family: var(--svb-font-sans); font-size: var(--svb-size-base);
       line-height: var(--svb-leading-normal); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--svb-color-text-muted); }
main { max-width: 1280px; margin: 0 auto; padding: var(--svb-space-5) var(--svb-space-6) var(--svb-space-12); }
h1 { font-family: var(--svb-font-serif); font-size: var(--svb-size-xl); font-weight: var(--svb-weight-semibold);
     line-height: var(--svb-leading-tight); letter-spacing: var(--svb-tracking-tight); margin: var(--svb-space-2) 0 var(--svb-space-5); }
h2 { font-family: var(--svb-font-serif); font-size: var(--svb-size-lg); font-weight: var(--svb-weight-semibold);
     line-height: var(--svb-leading-tight); margin: var(--svb-space-8) 0 var(--svb-space-3); }
code { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); background: var(--svb-color-surface-raised);
       padding: 1px var(--svb-space-1); border-radius: var(--svb-radius-md); word-break: break-all; }
.muted { color: var(--svb-color-text-muted); }
/* Figurinen wie im Report: SVG-Figuren, Größe und Lage relativ zur Schrift */
.fm { white-space: nowrap; }
.fig { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; margin: 0 -0.04em 0 -0.06em; overflow: visible; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }

/* ---------- Kopfzeile: dunkle Leiste, Name in Serifen ---------- */
.top { display: flex; align-items: center; gap: var(--svb-space-6); padding: var(--svb-space-3) var(--svb-space-6);
       background: var(--svb-color-surface-inverse); color: var(--svb-color-text-inverse); flex-wrap: wrap; }
.brand { font-family: var(--svb-font-serif); font-size: var(--svb-size-xl); font-weight: var(--svb-weight-semibold);
         letter-spacing: var(--svb-tracking-tight); }
.brand:hover { color: inherit; }
.top nav { display: flex; gap: var(--svb-space-1); flex: 1; }
.top nav a { padding: var(--svb-space-2) var(--svb-space-3); color: var(--svb-palette-gray-400);
             font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold); letter-spacing: var(--svb-tracking-wide); }
.top nav a:hover { color: var(--svb-color-text-inverse); }
/* Aktive Stelle: Balken statt nur Farbton, wie die Seitenleiste in sv49 */
.top nav a.on { color: var(--svb-color-text-inverse); box-shadow: inset 0 calc(-1 * var(--svb-border-marke)) 0 currentColor; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--feld-hoehe);
       padding: 0 var(--svb-space-4); border: none; border-radius: var(--svb-radius-md);
       background: var(--svb-button-bg); color: var(--svb-color-text-inverse);
       font: inherit; font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold);
       letter-spacing: var(--svb-tracking-wide); cursor: pointer; transition: background .15s; white-space: nowrap; }
.btn:hover { background: var(--svb-button-hover-bg); color: var(--svb-color-text-inverse); }
.btn.primary { background: var(--svb-color-accent); color: var(--svb-color-accent-on); font-weight: var(--svb-weight-bold); }
.btn.primary:hover { background: var(--svb-color-accent-hover); color: var(--svb-color-accent-on); }
.top .btn.primary { background: var(--svb-palette-white); color: var(--svb-palette-gray-900); }
.top .btn.primary:hover { background: var(--svb-palette-gray-200); }
.btn.danger { background: var(--svb-delete-bg); color: var(--svb-palette-white); }
.btn.danger:hover { background: var(--svb-delete-hover-bg); }
.btn.ghost { background: none; color: var(--svb-color-text); text-decoration: underline;
             text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }
.btn.ghost:hover { color: var(--svb-color-text-muted); }
.btn.small { min-height: 1.75rem; padding: 0 var(--svb-space-3); font-size: var(--svb-size-xs); }
.btn[disabled] { opacity: .45; cursor: default; }

/* ---------- Meldungen: Balken links trägt den Zustand mit ---------- */
.msg { padding: var(--svb-space-3) var(--svb-space-4); margin: var(--svb-space-2) 0; font-size: var(--svb-size-sm);
       background: var(--svb-color-surface); border-left: var(--svb-space-1) solid var(--svb-color-border-strong);
       border-radius: 0 var(--svb-radius-md) var(--svb-radius-md) 0; }
.msg.success { border-color: var(--svb-ok); background: var(--svb-ok-bg); }
.msg.warning { border-color: var(--svb-warn); background: var(--svb-warn-bg); }
.msg.error { border-color: var(--svb-error); background: var(--svb-error-bg); }

/* ---------- Eingaben ---------- */
input, select, textarea { font: inherit; font-size: var(--svb-size-base); color: var(--svb-color-text);
                          background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border);
                          border-radius: var(--svb-radius-md); padding: var(--svb-space-2) var(--svb-space-3); max-width: 100%; }
/* Safari und Chrome zeichnen <select> nativ und übergehen dabei Innenabstand
 * und Höhe; mit appearance: none gilt dieselbe Box wie beim Textfeld, den Pfeil
 * zeichnen wir selbst (derselbe wie in sv49-admin.de). */
select:not([multiple]) { -webkit-appearance: none; appearance: none; height: var(--feld-hoehe);
                         background-image: url(img/icon-auswahlpfeil.svg); background-repeat: no-repeat;
                         background-position: right var(--svb-space-3) center; padding-right: var(--svb-space-8); }
input:focus, select:focus, textarea:focus { border-color: var(--svb-color-border-strong);
                                            outline: var(--svb-border-hairline) solid var(--svb-color-border-strong); outline-offset: 0; }
input[type=checkbox] { accent-color: var(--svb-color-accent); }

/* ---------- Filter und Sortierung ----------
 * Filter grenzen ein und stehen als Karte mit beschrifteten Zeilen; die
 * Sortierung ordnet nur und sitzt als Leiste direkt über der Tabelle. */
.filters { margin-bottom: var(--svb-space-6); background: var(--svb-color-surface);
           border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-radius: var(--svb-radius-md); }
.filter-row { display: flex; flex-wrap: wrap; gap: var(--svb-space-2); align-items: center;
              padding: var(--svb-space-3) var(--svb-space-4); }
.filter-row + .filter-row { border-top: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.filter-row > .label { flex: 0 0 6.5rem; }
.filter-row input[type=search] { flex: 1 1 240px; }
.filter-row input[type=search] + .btn { margin-left: var(--svb-space-2); }
.filter-row .btn.ghost { margin-left: auto; }
.tagbar { gap: var(--svb-space-1); }

.list-bar { display: flex; flex-wrap: wrap; gap: var(--svb-space-2) var(--svb-space-4); align-items: center;
            justify-content: space-between; margin-bottom: var(--svb-space-2); font-size: var(--svb-size-sm); }
.sort { display: flex; align-items: center; gap: var(--svb-space-2); }

/* ---------- Tags, ECO-Codes, Chips ----------
 * Tags behalten die gewählte Farbe (sie ist Information, keine Dekoration);
 * ECO-Codes und Chips bleiben monochrom. */
.tag { display: inline-block; padding: 0 var(--svb-space-2); margin: 1px 2px; border-radius: var(--svb-radius-md);
       font-size: var(--svb-size-xs); text-transform: none; letter-spacing: normal; font-weight: var(--svb-weight-normal);
       --tag: var(--svb-color-text-muted); border: var(--svb-border-hairline) solid var(--tag); color: var(--svb-color-text);
       background: color-mix(in srgb, var(--tag) 12%, transparent); }
.tag:hover { color: var(--svb-color-text); background: color-mix(in srgb, var(--tag) 24%, transparent); }
.tag.active, .tag.active:hover { background: var(--tag); color: var(--svb-palette-white); }
.chip { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); padding: 2px var(--svb-space-2);
        border-radius: var(--svb-radius-md); background: var(--svb-color-accent); color: var(--svb-color-accent-on); }
.eco { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); font-weight: var(--svb-weight-semibold); padding: 0 var(--svb-space-1);
       border: var(--svb-border-hairline) solid var(--svb-color-border); border-radius: var(--svb-radius-md);
       background: var(--svb-color-surface-raised); color: var(--svb-color-text); }
a.eco:hover { background: var(--svb-color-accent); border-color: var(--svb-color-accent); color: var(--svb-color-accent-on); }
.kind { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); letter-spacing: var(--svb-tracking-wide);
        color: var(--svb-color-text-muted); border: var(--svb-border-hairline) solid var(--svb-color-border);
        border-radius: var(--svb-radius-md); padding: 0 var(--svb-space-1); margin-left: var(--svb-space-1); }
.line { color: var(--svb-color-text-muted); font-size: var(--svb-size-sm); }
/* Treffer nur über eine benannte Variante (Suche in der Reportliste) */
.hit { color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); }
.count { font-family: var(--svb-font-sans); font-size: var(--svb-size-xs); color: var(--svb-color-text-muted);
         font-weight: var(--svb-weight-normal); margin-left: var(--svb-space-1); font-variant-numeric: tabular-nums; }

.status { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
          letter-spacing: var(--svb-tracking-wide); padding: 1px var(--svb-space-2); border-radius: var(--svb-radius-md);
          border: var(--svb-border-hairline) solid currentColor; white-space: nowrap; }
.status.done { color: var(--svb-ok); background: var(--svb-ok-bg); }
.status.pending, .status.running { color: var(--svb-warn); background: var(--svb-warn-bg); }
.status.failed { color: var(--svb-error); background: var(--svb-error-bg); }
/* Symbol in der Tabelle: quadratisch, Bedeutung im Tooltip */
.status.icon { display: inline-flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem;
               padding: 0; font-size: var(--svb-size-sm); text-transform: none; letter-spacing: 0; cursor: help; }
.status.icon.running { animation: dreht 2s linear infinite; }
@keyframes dreht { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .status.icon.running { animation: none; } }

/* ---------- Tabellen: Versalkopf mit kräftiger Unterlinie, Zebra wie ein Brett ---------- */
table.reports { width: 100%; border-collapse: collapse; background: var(--svb-color-surface);
                border: var(--svb-border-hairline) solid var(--svb-color-border-soft); font-variant-numeric: tabular-nums; }
table.reports.narrow { width: auto; min-width: 420px; }
.reports th, .reports td { text-align: left; padding: var(--svb-space-2) var(--svb-space-3);
                           border-bottom: var(--svb-border-hairline) solid var(--svb-color-border-soft); vertical-align: top; }
.reports .num { text-align: right; }
.reports .center, .reports thead th.center { text-align: center; width: 1%; }
.reports thead th { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
                    letter-spacing: var(--svb-tracking-wider); color: var(--svb-color-text); background: var(--svb-color-surface-sunken);
                    border-bottom: var(--svb-border-strong) solid var(--svb-color-border-strong); }
.reports thead th.num { text-align: right; }
.reports tbody tr:nth-child(even) { background: var(--svb-color-surface-sunken); }
.reports tbody tr:hover > * { background: var(--svb-color-accent-bg); }
.empty { padding: var(--svb-space-6); text-align: center; color: var(--svb-color-text-muted); background: var(--svb-color-surface);
         border: var(--svb-border-hairline) solid var(--svb-color-border-soft); border-radius: var(--svb-radius-md); }
.empty a, .notes a { text-decoration: underline; text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }

/* ---------- Detailseite ---------- */
.detail-head { display: flex; justify-content: space-between; gap: var(--svb-space-4); align-items: flex-start; flex-wrap: wrap; }
.detail-head h1 { margin: var(--svb-space-1) 0 var(--svb-space-2); }
.actions { display: flex; gap: var(--svb-space-2); flex-wrap: wrap; align-items: center; }
.actions form { margin: 0; }
.crumbs { margin: 0; color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); letter-spacing: var(--svb-tracking-wide); }
.crumbs a:not(.eco):hover { color: var(--svb-color-text); }
.meta { display: flex; flex-wrap: wrap; gap: var(--svb-space-2) var(--svb-space-6); padding: var(--svb-space-3) var(--svb-space-4);
        background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
        border-radius: var(--svb-radius-md); margin: var(--svb-space-3) 0; align-items: center; font-size: var(--svb-size-sm); }
.label { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); color: var(--svb-color-text-muted);
         text-transform: uppercase; letter-spacing: var(--svb-tracking-wider); margin-right: var(--svb-space-1); }
.inline-tags { display: flex; align-items: center; gap: var(--svb-space-2); flex-wrap: wrap; flex: 1 1 100%; margin: 0;
               padding-top: var(--svb-space-2); border-top: var(--svb-border-hairline) solid var(--svb-color-border-soft); }
.inline-tags input { flex: 1 1 240px; }
.notes { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
         border-radius: var(--svb-radius-md); margin: var(--svb-space-3) 0; overflow: hidden; }
.notes > :not(h2) { margin-left: var(--svb-space-4); margin-right: var(--svb-space-4); }
/* Modulkopf: schwarze Versalleiste wie in sv49 */
.notes h2, .volume h2 { font-family: var(--svb-font-sans); font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold);
                        text-transform: uppercase; letter-spacing: var(--svb-tracking-wider); margin: 0;
                        padding: var(--svb-space-2) var(--svb-space-3);
                        background: var(--svb-color-surface-inverse); color: var(--svb-color-text-inverse); }
.report-notes { margin: var(--svb-space-3) 0; color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); }
.report-notes summary { cursor: pointer; }
iframe.report { width: 100%; height: 88vh; border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
                border-radius: var(--svb-radius-md); background: #fff; margin-top: var(--svb-space-3); }

/* ---------- Formulare ---------- */
.form { max-width: 720px; }
.form.row, fieldset.row { display: flex; flex-wrap: wrap; gap: var(--svb-space-3); max-width: none;
                          /* Felder mit und ohne Hilfetext: an der Oberkante ausrichten, damit Labels und Eingaben je eine Linie bilden */
                          align-items: flex-start; }
/* Was kein Label über sich hat (Checkbox, Knopf), rückt um die Labelhöhe herunter */
.form.row .field.check, fieldset.row .field.check { margin-top: var(--label-hoehe); min-height: var(--feld-hoehe); }
.form.row > .btn { margin-top: var(--label-hoehe); }
fieldset { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
           border-radius: var(--svb-radius-md); padding: var(--svb-space-3) var(--svb-space-4); margin: 0 0 var(--svb-space-4); }
legend { font-size: var(--svb-size-2xs); font-weight: var(--svb-weight-bold); text-transform: uppercase;
         letter-spacing: var(--svb-tracking-wider); padding: 0 var(--svb-space-1); }
.field { margin-bottom: var(--svb-space-4); display: flex; flex-direction: column; gap: var(--svb-space-1); }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; }
fieldset .field, .form.row .field { margin-bottom: 0; }
.field.check { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--svb-space-2); }
.field label { font-weight: var(--svb-weight-semibold); font-size: var(--svb-size-sm); }
.field small { color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); line-height: var(--svb-leading-relaxed); }
.field ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--svb-space-1) var(--svb-space-4); }
.field ul label { font-weight: var(--svb-weight-normal); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--svb-error); }
.error, .errorlist { color: var(--svb-error); font-size: var(--svb-size-xs); }

/* ---------- ECO-Übersicht ---------- */
.fold-bar { margin-bottom: var(--svb-space-6); }
.volume { background: var(--svb-color-surface); border: var(--svb-border-hairline) solid var(--svb-color-border-soft);
          border-radius: var(--svb-radius-md); padding: 0 0 var(--svb-space-3); margin-bottom: var(--svb-space-5); overflow: hidden; }
.volume h2 { margin-bottom: var(--svb-space-2); }
.volume h2 a:hover { color: var(--svb-palette-gray-400); }
.volume h2 .count { color: var(--svb-palette-gray-400); text-transform: none; letter-spacing: normal; }
.group { padding: 0 var(--svb-space-4); }
.group summary { cursor: pointer; padding: var(--svb-space-1) 0; }
.range { font-family: var(--svb-font-mono); font-size: var(--svb-size-sm); color: var(--svb-color-text-muted); display: inline-block; min-width: 7.5em; }
.codes { list-style: none; padding: 0 0 var(--svb-space-2) var(--svb-space-5); margin: 0; columns: 2 420px; font-size: var(--svb-size-sm); }
.codes li { break-inside: avoid; padding: 1px 0; display: flex; gap: var(--svb-space-2); align-items: baseline; }
.codes li .name { flex: 1; color: var(--svb-color-text-muted); }
.codes li.has .name { color: var(--svb-color-text); font-weight: var(--svb-weight-semibold); }
.codes .moves { font-weight: var(--svb-weight-normal); color: var(--svb-color-text-muted); font-size: var(--svb-size-xs); margin-left: var(--svb-space-1); }
.codes li a { font-size: var(--svb-size-xs); white-space: nowrap; text-decoration: underline;
              text-underline-offset: .15em; text-decoration-color: var(--svb-color-border); }

@media (max-width: 720px) {
  .top { padding: var(--svb-space-3) var(--svb-space-4); gap: var(--svb-space-3); }
  main { padding: var(--svb-space-4) var(--svb-space-4) var(--svb-space-10); }
  .reports .line, .reports th:nth-child(3) { display: none; }
  .filter-row > .label { flex-basis: 100%; }
  table.reports.narrow { min-width: 0; width: 100%; }
}

/* ---------- Benutzer (nur Server) ---------- */
.top .user { display: flex; align-items: center; gap: var(--svb-space-3); font-size: var(--svb-size-sm); }
.top .user a, .top .user .linkish { color: var(--svb-palette-gray-400); }
.top .user a:hover, .top .user .linkish:hover { color: var(--svb-color-text-inverse); }
.top .user form { display: contents; }
.linkish { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.form.narrow { max-width: 360px; }