/* ==========================================================================
   Health-Dashboard
   Reihenfolge: Tokens · Grundlagen · Layout · Komponenten · Utilities
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */

:root {
    --bg: #f6f7f9;
    --panel: #fff;
    --panel-alt: #fafbfc;
    --border: #dfe3e8;
    --border-soft: #eef0f3;
    --text: #1c2330;
    --muted: #6b7684;
    --accent: #2b5fd9;
    --accent-hover: #2450b8;
    --header: #1c2330;

    --ok-bg: #e8f7ee;    --ok-border: #b6e3c8;    --ok-text: #14663c;    --ok: #1e9e5a;
    --warn-bg: #fdf4e3;  --warn-border: #f0dbaa;  --warn-text: #7d5804;  --warn: #c8880d;
    --err-bg: #fdeeed;   --err-border: #f2c3bf;   --err-text: #92221c;   --err: #cf3b33;

    --chip-bg: #eef1f5;      --chip-text: #495261;
    --chip-ok-bg: #e3f5ea;   --chip-ok-text: #14663c;
    --chip-warn-bg: #fdf1da; --chip-warn-text: #8a6100;
    --chip-err-bg: #fdeae8;  --chip-err-text: #a3271f;
    --badge-bg: #e6e9ee;     --badge-text: #56606e;
    --badge-warn-bg: #f7dfae; --badge-warn-text: #7d5804;
    --badge-err-bg: #f6c9c5;  --badge-err-text: #92221c;

    --radius: 6px;
    --focus: 0 0 0 3px rgba(43, 95, 217, .35);
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* Das Dashboard schaut man auch abends an. */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14181f;
        --panel: #1b212b;
        --panel-alt: #202733;
        --border: #2e3846;
        --border-soft: #262e3a;
        --text: #e4e8ee;
        --muted: #8e9aab;
        --accent: #5b8def;
        --accent-hover: #74a0f5;
        --header: #10141a;

        --ok-bg: #16311f;    --ok-border: #2a5c3b;    --ok-text: #7fd6a2;    --ok: #35b46f;
        --warn-bg: #332a12;  --warn-border: #5f4c1c;  --warn-text: #f0c775;  --warn: #d99b1c;
        --err-bg: #3a1e1c;   --err-border: #6b322d;   --err-text: #f5a29b;   --err: #e2564d;

        --chip-bg: #2a3240;      --chip-text: #b6c0cf;
        --chip-ok-bg: #16311f;   --chip-ok-text: #7fd6a2;
        --chip-warn-bg: #3b2f14; --chip-warn-text: #edc274;
        --chip-err-bg: #3d211e;  --chip-err-text: #f0a49d;
        --badge-bg: #313b4a;     --badge-text: #a4b0c0;
        --badge-warn-bg: #4a3a17; --badge-warn-text: #edc274;
        --badge-err-bg: #532723;  --badge-err-text: #f0a49d;

        --focus: 0 0 0 3px rgba(91, 141, 239, .45);
    }
}

/* --- Grundlagen ---------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
}

/* Ohne Unterstreichung: In einer Tabelle mit hundert Zeilen ist jede Zeile ein
   Link — durchgehend unterstrichen wird das unruhig. Die Farbe reicht als
   Hinweis, beim Überfahren kommt die Unterstreichung zurück. */
a {
    color: var(--accent);
    text-decoration: none;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

/* Namen in der Liste bleiben ruhig — dort ist alles ein Link */
td a:hover strong { text-decoration: none; }

/* Sichtbarer Fokus für alle bedienbaren Elemente — ohne den ist das
   Dashboard per Tastatur praktisch unbenutzbar. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

h1, h2, h3 { line-height: 1.3; }

/* --- Layout -------------------------------------------------------------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: var(--header);
    color: #fff;
}
.topbar .brand {
    font-weight: 700;
    font-size: 16px;
    letter-spacing: .3px;
    color: #fff;
    text-decoration: none;
}
.topbar .brand:focus-visible { outline-color: #fff; }

main {
    padding: 20px;
    max-width: 1500px;
    margin: 0 auto;
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 18px;
    align-items: start;
}
@media (max-width: 1000px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
}

/* Kopfzeile einer Seite: Zurück-Link, Titel, Aktionen */
.page-head {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.page-head h1 {
    margin: 0;
    font-size: 19px;
    flex: 1;
    min-width: 0;
}

/* --- Panel --------------------------------------------------------------- */

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.panel + .panel { margin-top: 14px; }

.panel-head {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.panel-head h2 { margin: 0; font-size: 14px; }

.panel-body { padding: 14px; }
.panel-note {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    background: var(--panel-alt);
}
.panel-note.is-error { background: var(--err-bg); color: var(--err-text); }

/* --- Tabellen ------------------------------------------------------------ */

/* Wrapper, damit breite Tabellen scrollen statt die Seite zu sprengen */
.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }

th {
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
}
td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--panel-alt); }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Label/Wert-Liste in der Seitenspalte */
.data-list { width: 100%; }
.data-list th,
.data-list td {
    padding: 6px 0;
    border-bottom: 1px solid var(--border-soft);
    text-transform: none;
    letter-spacing: 0;
    font-size: 14px;
}
.data-list th {
    font-weight: 400;
    color: var(--muted);
    width: 42%;
}
.data-list td { text-align: right; word-break: break-word; }
.data-list tr:last-child th,
.data-list tr:last-child td { border-bottom: none; }

/* --- Status und Kennzeichnung -------------------------------------------- */

.dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 7px;
    flex: none;
}
.dot-ok { background: var(--ok); }
.dot-warn { background: var(--warn); }
.dot-err { background: var(--err); }
.dot-idle { background: var(--muted); opacity: .5; }

.chip {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 12px;
    background: var(--chip-bg);
    color: var(--chip-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.chip-ok { background: var(--chip-ok-bg); color: var(--chip-ok-text); }
.chip-warn { background: var(--chip-warn-bg); color: var(--chip-warn-text); }
.chip-err { background: var(--chip-err-bg); color: var(--chip-err-text); }
.chip-mono { font-family: var(--mono); }

/* Trefferzähler — zeigt die Verteilung, bevor man klickt */
.badge {
    display: inline-block;
    min-width: 17px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 10px;
    line-height: 15px;
    text-align: center;
    font-weight: 600;
}
.badge-warn { background: var(--badge-warn-bg); color: var(--badge-warn-text); }
.badge-err { background: var(--badge-err-bg); color: var(--badge-err-text); }

/* --- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}
.btn:hover { background: var(--panel-alt); border-color: var(--muted); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.btn-danger { color: var(--err); border-color: var(--err-border); }
.btn-danger:hover { background: var(--err-bg); border-color: var(--err); color: var(--err); }
.btn-sm { padding: 3px 8px; font-size: 12px; }
.btn-block { width: 100%; text-align: center; }

/* --- Meldungen ----------------------------------------------------------- */

.flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    margin-bottom: 14px;
    border: 1px solid;
}
.flash-success { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); }
.flash-warning { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }
.flash-error { background: var(--err-bg); border-color: var(--err-border); color: var(--err-text); }

/* --- Filter -------------------------------------------------------------- */

.filter-group + .filter-group { margin-top: 18px; }
.filter-group h3 {
    margin: 0 0 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
}
.filter-list { display: flex; flex-wrap: wrap; gap: 5px; }

.filter-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel);
    font-size: 12px;
    text-decoration: none;
    color: var(--text);
}
.filter-item:hover { border-color: var(--muted); background: var(--panel-alt); color: var(--text); }
.filter-item.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.filter-item.is-active .badge { background: rgba(255, 255, 255, .28); color: #fff; }

/* --- Formulare ----------------------------------------------------------- */

.field + .field { margin-top: 14px; }
.field label {
    display: block;
    font-weight: 600;
    margin-bottom: 4px;
    font-size: 13px;
}
.field input[type="text"],
.field input[type="password"],
.field input:not([type]),
.field textarea,
.field select {
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    color: var(--text);
    background: var(--panel);
}
.field input:focus,
.field textarea:focus,
.field select:focus {
    border-color: var(--accent);
    box-shadow: var(--focus);
    outline: none;
}
.field .help { color: var(--muted); font-size: 12px; margin-top: 3px; }
.field .error { color: var(--err); font-size: 12px; margin-top: 3px; }

/* Pflichtfeld — Symfony setzt die Klasse selbst auf das Label */
.field label.required::after {
    content: " *";
    color: var(--err);
    font-weight: 400;
}

.field-checkbox label { font-weight: 400; font-size: 13px; }
.field-checkbox input { width: auto; margin-right: 5px; }

/* Kompaktes Eingabefeld für Werkzeugleisten */
.input-sm {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--panel);
}
.input-sm:focus { border-color: var(--accent); box-shadow: var(--focus); outline: none; }

/* --- Secret -------------------------------------------------------------- */

.secret-box {
    background: #10141a;
    color: #8fe3b0;
    padding: 11px 13px;
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 12px;
    word-break: break-all;
    user-select: all;
    border: 1px solid #2e3846;
}

/* --- Anmeldung ----------------------------------------------------------- */

.login-page {
    background: var(--header);
    min-height: 100vh;
}
.login-box {
    max-width: 340px;
    margin: 0 auto;
    padding: 12vh 20px 20px;
}
.login-box h1 {
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin: 0 0 20px;
}

/* --- Utilities ----------------------------------------------------------- */

.stack { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stack-between { justify-content: space-between; }
.stack-end { justify-content: flex-end; }
.grow { flex: 1; min-width: 0; }

.muted { color: var(--muted); }
.small { font-size: 12px; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.break { word-break: break-all; }
.pre-wrap { white-space: pre-wrap; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 14px; }

.form-narrow { max-width: 620px; }

.empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--muted);
}

code.inline {
    background: var(--chip-bg);
    color: var(--chip-text);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
    font-family: var(--mono);
}

.list-compact { padding-left: 18px; margin: 0; }

/* Zeile wird gerade abgerufen */
tr.is-syncing > td { opacity: .45; }

tr.is-syncing > td:first-child {
    box-shadow: inset 3px 0 0 var(--accent, #4a7dff);
}

/* Verfügbarkeitsverlauf: ein Balken je Tag */
.uptime-bars {
    display: flex;
    gap: 2px;
    align-items: stretch;
    height: 34px;
}

.uptime-bar {
    flex: 1 1 0;
    min-width: 3px;
    border-radius: 2px;
    background: var(--ok);
}

.uptime-bar.is-warn { background: var(--warn); }
.uptime-bar.is-err  { background: var(--err); }
.uptime-bar.is-empty {
    background: var(--border);
    opacity: .5;
}

.sparkline {
    width: 100%;
    height: 40px;
    display: block;
}

.sparkline polyline {
    fill: none;
    stroke: var(--accent);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

/* Geratene Werte: gestrichelt und blasser als gemessene.
   Die Tilde davor macht es auch ohne Farbe erkennbar. */
.chip.is-guess {
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--muted);
}

.chip.is-guess.chip-warn { border-color: var(--warn); color: var(--warn-text); }
.chip.is-guess.chip-err  { border-color: var(--err); color: var(--err-text); }

.legend {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
    color: var(--muted);
}

/* Sortierbare Spaltenköpfe */
th.sortable { padding: 0; }

th.sortable a {
    display: block;
    padding: 10px 12px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

th.sortable a:hover { background: var(--hover, rgba(127,127,127,.08)); }
th.sortable.num a { text-align: right; }

.sort-arrow {
    font-size: 10px;
    opacity: .3;
    margin-left: 2px;
}

th.is-sorted .sort-arrow { opacity: 1; }
th.is-sorted a { font-weight: 600; }

/* Favicon der überwachten Seite */
.favicon {
    width: 16px;
    height: 16px;
    object-fit: contain;
    vertical-align: -3px;
    margin-right: 6px;
    flex: none;
}

.favicon-empty {
    display: inline-block;
    border-radius: 3px;
    background: var(--border);
    opacity: .4;
}