/*
 * app.css - Hauptstylesheet fuer den Infinity Labs Bandbreitenmonitor.
 *
 * Liefert das komplette Frontend-Design-System: Farb-Token (light/dark),
 * Typografie (self-hosted Inter + JetBrains Mono, CSP font-src 'self'),
 * Layout, Komponenten und Print-Variante.
 *
 * Aufbau dieser Datei:
 *   1. @font-face       - Self-hosted Schriftarten
 *   2. :root tokens     - CSS-Variablen, Light-Theme als Default
 *   3. Dark-Theme       - prefers-color-scheme + manueller Toggle [data-theme]
 *   4. Reset / Base     - Box-Sizing, Body-Defaults, Fokus-Ring
 *   5. Typografie       - Headings, Listen, Code, Links, Helper-Klassen
 *   6. Layout           - Header, Nav, Main, Footer
 *   7. Komponenten      - Card, KPI, Badge, Tabellen, Buttons, Forms, Alerts
 *   8. Charts           - Container und Legende
 *   9. Utilities        - sr-only, mono, dichte Reihen, Spacing-Helfer
 *  10. @media print     - Reduziertes Schwarz/Weiss-Layout fuer Browser-Druck
 *
 * Verbindlich: hohe Information-Density (Profi-Tool, kein Consumer-Dashboard).
 * Akzentfarben sind den ISPs zugeordnet (Vodafone-Rot, O2-Blau) und werden
 * ueber [data-role="primary|fallback"] selektiert.
 *
 * PDF-Reports rendern in mPDF mit eigenem _styles.php — dieses Stylesheet
 * wird dort nicht verwendet, der @media-print-Block ist nur fuer Browser-
 * Druck (Strg+P) gedacht.
 *
 * Version: 1.0 (Phase 7a)
 */


/* ============================================================================
 * 1. @font-face — Self-hosted Schriftarten
 * ============================================================================
 * Inter als variable Font deckt Gewichts-Bereich 100..900 ueber EINE Datei ab.
 * JetBrains Mono kommt in zwei statischen Gewichten (Regular/Bold), das reicht
 * fuer Tabellen-Werte, IPs und Zeitstempel. font-display:swap verhindert das
 * "unsichtbarer Text"-Problem bei langsamen Verbindungen.
 * ========================================================================== */

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/InterVariable.woff2') format('woff2-variations'),
         url('/assets/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/fonts/InterVariable-Italic.woff2') format('woff2-variations'),
         url('/assets/fonts/InterVariable-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('/assets/fonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ============================================================================
 * 2. Tokens — Light-Theme als Default
 * ============================================================================
 * Bewusste Trennung in semantische Token (--color-bg) und Rohwerte. Das
 * erlaubt es, einzelne Komponenten gegen die semantischen Token zu schreiben
 * und beim Dark-Theme nur den Token-Wert zu kippen, ohne dass die Komponente
 * etwas davon mitbekommt.
 * ========================================================================== */

:root {
    /* Hintergruende */
    --color-bg: #fafafa;                     /* Seitenhintergrund Light-Theme */
    --color-surface: #ffffff;                /* Karten, Tabellen, Panels */
    --color-surface-muted: #f1f5f9;          /* Hover, schwacher Header-Hintergrund */
    --color-surface-elevated: #ffffff;       /* Tooltips, Dropdowns, Popups */

    /* Text */
    --color-text: #0f172a;                   /* Primaerer Fliesstext */
    --color-text-strong: #020617;            /* Headings, KPI-Werte */
    --color-text-muted: #64748b;             /* Sekundaer, Meta, Achsen */
    --color-text-faint: #94a3b8;             /* Caption, Hilfstexte */
    --color-text-inverse: #f8fafc;           /* Auf farbigem Hintergrund */

    /* Rahmen / Trenner */
    --color-border: #e2e8f0;                 /* Standardlinien */
    --color-border-strong: #cbd5e1;          /* Markantere Trenner */

    /* Akzente — Markenfarben der ISPs (bleiben in BEIDEN Themes identisch) */
    --color-accent-vodafone: #e60000;        /* Vodafone-Rot */
    --color-accent-o2: #0019a5;              /* O2-Blau */

    /* Status — Semantik fuer Mess-/Vertragslage */
    --color-status-ok: #10b981;              /* OK / im Vertragsrahmen */
    --color-status-degraded: #f59e0b;        /* Degraded / Warnung */
    --color-status-outage: #ef4444;          /* Outage / Vertragsbruch */

    /* Chart-spezifisch */
    --color-chart-grid: #e2e8f0;             /* ApexCharts Grid */
    --color-chart-axis: #64748b;             /* Achsen-Beschriftung */
    --color-chart-contract: #94a3b8;         /* Vertragslinien (gestrichelt) */
    --color-chart-failover: #f59e0b;         /* Vertikale Failover-Annotation */

    /* Typografie */
    --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', Consolas, 'Cascadia Code', Menlo, monospace;
    --font-size-base: 14px;                  /* Profi-Density, nicht 16 */
    --line-height-base: 1.45;                /* Etwas straffer als 1.5 */

    /* Geometrie */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 10px;
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.75rem;

    /* Schatten */
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-popup: 0 4px 12px rgba(15, 23, 42, 0.12);

    /* Misc */
    --header-height: 3.25rem;                /* Sticky-Header-Hoehe */
    --content-max: 1400px;                   /* Max. Breite Hauptcontainer */
    --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent-primary);
    --transition-fast: 120ms ease;
    --transition-base: 200ms ease;

    /* Rollen-bezogener Akzent — wird per [data-role] dynamisch ueberschrieben.
       Default ist Vodafone, weil das der Primaer-Anschluss ist. */
    --color-accent-primary: var(--color-accent-vodafone);
    --color-accent-primary-soft: rgba(230, 0, 0, 0.12);
}


/* ============================================================================
 * 3. Dark-Theme
 * ============================================================================
 * Anwendung in dieser Reihenfolge (spaeter ueberschreibt frueher):
 *   a) prefers-color-scheme: dark   - OS-Setting
 *   b) [data-theme="dark"]          - manueller Toggle, ueberschreibt OS
 *   c) [data-theme="light"]         - manueller Toggle "Hell" ueberschreibt OS-Dark
 * Akzentfarben (Vodafone-Rot, O2-Blau) bleiben unveraendert; nur Neutralwerte
 * werden gekippt.
 * ========================================================================== */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg: #0f1115;
        --color-surface: #161a22;
        --color-surface-muted: #1d222c;
        --color-surface-elevated: #21262f;
        --color-text: #e2e8f0;
        --color-text-strong: #f8fafc;
        --color-text-muted: #94a3b8;
        --color-text-faint: #64748b;
        --color-border: #2a2f3a;
        --color-border-strong: #3a4150;
        --color-chart-grid: #2a2f3a;
        --color-chart-axis: #94a3b8;
        --color-chart-contract: #64748b;
        --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
        --shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.5);
        --color-accent-primary-soft: rgba(230, 0, 0, 0.18);
    }
}

[data-theme="dark"] {
    --color-bg: #0f1115;
    --color-surface: #161a22;
    --color-surface-muted: #1d222c;
    --color-surface-elevated: #21262f;
    --color-text: #e2e8f0;
    --color-text-strong: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-text-faint: #64748b;
    --color-border: #2a2f3a;
    --color-border-strong: #3a4150;
    --color-chart-grid: #2a2f3a;
    --color-chart-axis: #94a3b8;
    --color-chart-contract: #64748b;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.6), 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-popup: 0 4px 12px rgba(0, 0, 0, 0.5);
    --color-accent-primary-soft: rgba(230, 0, 0, 0.18);
}

/* Connection-Rolle bestimmt den Primaer-Akzent (Vodafone vs O2-Fallback).
   Das HTML-Attribut wird im base-Layout abhaengig von der aktiven Connection
   gesetzt: <body data-role="fallback"> -> O2-Akzent. */
:root[data-role="fallback"],
[data-role="fallback"] {
    --color-accent-primary: var(--color-accent-o2);
    --color-accent-primary-soft: rgba(0, 25, 165, 0.14);
}


/* ============================================================================
 * 4. Reset & Base
 * ============================================================================ */

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

html {
    /* Body-Scroll erst hier setzen, damit der Sticky-Header korrekt klebt. */
    overflow-y: scroll;
    /* Vermeidet horizontalen Scroll bei Sub-Pixel-Layouts. */
    overflow-x: hidden;
    color-scheme: light dark;                /* Native Scrollbars passen sich an */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-ui);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    font-feature-settings: 'cv11', 'ss01', 'ss03';  /* Inter-Stylistic-Sets */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

img, svg, video {
    display: block;
    max-width: 100%;
}

a {
    color: var(--color-accent-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { text-decoration: underline; }
a:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Globale Fokus-Sichtbarkeit. Wir nutzen :focus-visible, damit Maus-Klicks
   keinen Outline erzeugen, Tab-Navigation aber sehr wohl. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--color-accent-primary);
    outline-offset: 2px;
}


/* ============================================================================
 * 5. Typografie
 * ============================================================================ */

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--space-3);
    line-height: 1.25;
    color: var(--color-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
}
h1 { font-size: 1.55rem; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; margin-top: var(--space-6); }
h3 { font-size: 1rem; margin-top: var(--space-4); }
h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); }

p { margin: 0 0 var(--space-3); }

ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25rem; }
li { margin-bottom: var(--space-1); }

small { font-size: 0.825rem; color: var(--color-text-muted); }

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.875em;
}
code {
    background: var(--color-surface-muted);
    padding: 0.05em 0.35em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}


/* ============================================================================
 * 6. Layout — Header, Nav, Main, Footer
 * ============================================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-5);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}

.site-header .brand {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.site-header .brand::before {
    /* Kleines Akzent-Quadrat in der jeweiligen ISP-Farbe. */
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--color-accent-primary);
}

.site-header nav {
    display: flex;
    gap: var(--space-1);
    flex: 1;
}
.site-header nav a {
    padding: 0.45rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-weight: 500;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.site-header nav a:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
    text-decoration: none;
}
.site-header nav a.is-active {
    color: var(--color-text-strong);
    background: var(--color-surface-muted);
}

.site-header .userbox {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: 0.85rem;
}
.site-header .userbox form { margin: 0; }

main {
    flex: 1;
    width: 100%;
    max-width: var(--content-max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-5) var(--space-6);
}

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-5);
    color: var(--color-text-faint);
    font-size: 0.8rem;
    text-align: center;
}


/* ============================================================================
 * 7. Komponenten
 * ============================================================================ */

/* --- Section / Page-Header -------------------------------------------------- */

section { margin-bottom: var(--space-6); }

.page-toolbar {
    /* Buttonleiste neben Page-H1: Filter/Bereichswahl/Actions. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}


/* --- Status-Bar / Badge ---------------------------------------------------- */

.status-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    background: var(--color-surface-muted);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}
.badge::before {
    /* Status-Dot. Default ist neutral; semantische Klassen unten ueberschreiben. */
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* Connection-Rollen (kommen aus DB-Spalte connections.role). */
.badge-primary {
    color: var(--color-accent-vodafone);
    background: rgba(230, 0, 0, 0.08);
    border-color: rgba(230, 0, 0, 0.28);
}
.badge-fallback {
    color: var(--color-accent-o2);
    background: rgba(0, 25, 165, 0.08);
    border-color: rgba(0, 25, 165, 0.28);
}

/* Status-Klassen — semantisch. */
.badge-ok    { color: var(--color-status-ok);       background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.28); }
.badge-warn  { color: var(--color-status-degraded); background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); }
.badge-error { color: var(--color-status-outage);   background: rgba(239, 68, 68, 0.10);  border-color: rgba(239, 68, 68, 0.30); }


/* --- Karten / KPIs --------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
}

.kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.kpi {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    /* Akzent-Streifen links — wird per [data-role] eingefaerbt. */
    border-left: 3px solid var(--color-accent-primary);
}
.kpi h3 {
    margin: 0;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--color-text-muted);
    font-weight: 600;
}
.kpi-value {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--color-text-strong);
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.kpi-value small {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--color-text-muted);
    margin-left: 0.25rem;
    letter-spacing: 0;
}
.kpi-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.kpi-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-muted);
    padding: var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}


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

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4);
    font-size: 0.85rem;
}

thead th {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.45rem 0.65rem;
    text-align: left;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}

tbody td, tbody th {
    padding: 0.4rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
tbody tr:last-child td,
tbody tr:last-child th { border-bottom: 0; }
tbody tr:hover {
    background: var(--color-surface-muted);
}
tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--color-text-strong);
    white-space: nowrap;
}

/* Zahlenspalten — tabular-nums + Mono fuer saubere Ausrichtung. */
.stats-table tbody td,
.recent-tests tbody td {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
    white-space: nowrap;
}
.recent-tests tbody td:nth-child(2) {
    /* ISP-Spalte wieder in Sans. */
    font-family: var(--font-ui);
}


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

button,
.button {
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.85rem;
    background: var(--color-accent-primary);
    color: var(--color-text-inverse);
    border: 1px solid var(--color-accent-primary);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    line-height: 1.2;
    transition: filter var(--transition-fast), transform var(--transition-fast),
                box-shadow var(--transition-fast);
    text-decoration: none;
}
button:hover:not(:disabled),
.button:hover:not(:disabled) {
    filter: brightness(0.95);
    text-decoration: none;
}
button:active:not(:disabled),
.button:active:not(:disabled) {
    transform: translateY(1px);
}
button:disabled,
.button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Sekundaer-Button: dezent, fuer Filterleisten, Abbrechen, Zuruecksetzen. */
.button-secondary,
button.button-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border-strong);
}
.button-secondary:hover:not(:disabled),
button.button-secondary:hover:not(:disabled) {
    background: var(--color-surface-muted);
    filter: none;
}

/* Ghost-Button: nur Text + Hover-Hintergrund (z.B. Header-User-Logout). */
.button-ghost,
button.button-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}
.button-ghost:hover:not(:disabled),
button.button-ghost:hover:not(:disabled) {
    background: var(--color-surface-muted);
    color: var(--color-text);
    filter: none;
}

/* Destruktiv (Loeschen, Sperren). */
.button-danger,
button.button-danger {
    background: var(--color-status-outage);
    border-color: var(--color-status-outage);
}


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

label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-1);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="datetime-local"],
input[type="date"],
input[type="time"],
select,
textarea {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.4;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
input:focus,
select:focus,
textarea:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px var(--color-accent-primary-soft);
    outline: none;
}

textarea { min-height: 5rem; resize: vertical; }

input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--color-accent-primary);
    margin: 0 0.4rem 0 0;
    cursor: pointer;
}

.form-row {
    /* Stapelbare Form-Zeile: Label oben, Eingabe unten. */
    margin-bottom: var(--space-3);
}
.form-grid {
    /* Zwei-Spalten-Grid fuer Settings-Forms. */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
}

/* Number-Input mit nachgestelltem Einheits-Suffix (Mbit/s, GB, Min., ...).
   Suffix sitzt visuell IM Input rechts, ist aber semantisch ein eigener
   <span>, damit Eingabe und Einheit klar trennbar bleiben.
   Verwendet z.B. im Connection-Form fuer Vertragswerte. */
.input-with-suffix {
    position: relative;
    display: flex;
    align-items: center;
}
.input-with-suffix input {
    /* Platz fuer das Suffix-Label am rechten Rand */
    padding-right: 4.5rem;
}
.input-with-suffix .suffix {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
    background: var(--color-surface);
    padding: 0 0.15rem;
}


/* --- Alerts / Hints -------------------------------------------------------- */

.alert {
    border: 1px solid var(--color-border-strong);
    background: var(--color-surface-muted);
    color: var(--color-text);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    margin: var(--space-3) 0;
}
.alert-info {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.32);
    color: var(--color-status-ok);
}
.alert-warn {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.32);
    color: var(--color-status-degraded);
}
.alert-error {
    background: rgba(239, 68, 68, 0.10);
    border-color: rgba(239, 68, 68, 0.32);
    color: var(--color-status-outage);
}

.hint {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    margin: var(--space-2) 0;
}


/* --- Manual-Test-Komponente (Dashboard) ----------------------------------- */

.manual-test {
    margin-top: var(--space-5);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
}
.manual-test button {
    min-width: 14rem;
    justify-content: center;
}


/* ============================================================================
 * 8. Charts — Container und Legende
 * ============================================================================
 * ApexCharts rendert in einen einfachen <div id="..." class="chart">-Slot.
 * Wir setzen Default-Hoehen und sorgen dafuer, dass der SVG-Renderer keine
 * Layout-Spruenge erzeugt (CLS), waehrend ApexCharts noch initialisiert.
 * ========================================================================== */

.chart-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4);
}

/* Fritzbox-Section (Phase 10f) — uebernimmt das chart-section-Frame, hat
 * aber einen flexiblen Header mit Badge fuer den aktuellen WAN-Interface-
 * Status, und das KPI-Grid darunter braucht keinen zusaetzlichen
 * unteren Abstand. */
.fritzbox-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4);
}
.fritzbox-section-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
}
.fritzbox-section-header h2 {
    margin: 0;
}
.fritzbox-section .kpi-grid {
    margin-bottom: 0;
}
/* Kleine Health-Badges im Signal-Tile-Header brauchen weniger vertikales
 * Gewicht als die normalen .badge-Pillen — sie sitzen direkt neben dem h3
 * und sollten nicht groesser als das Label wirken. */
.fritzbox-section .kpi h3 .badge {
    margin-left: var(--space-2);
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    vertical-align: baseline;
}
.chart-section header {
    /* Lokale chart-section header; ueberschreibt nichts global. */
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-3);
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    height: auto;
    position: static;
}
.chart-section h2,
.chart-section h3 {
    margin: 0;
}
.chart-section .chart-meta {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

.chart {
    width: 100%;
    /* Reservierte Hoehe verhindert CLS bevor ApexCharts gerendert hat. */
    min-height: 280px;
}
.chart-tall { min-height: 380px; }
.chart-brush { min-height: 110px; margin-top: -0.5rem; }

/* Sparkline-Container fuer das Fritzbox-Cockpit (Mini-Trend-Charts ohne Achsen).
   Reservierte Hoehe verhindert dass ApexCharts beim Konstruktor 0-Hoehe sieht
   (siehe CLAUDE.md "Chart-Container-Reservation"-Regel). */
.cockpit-sparkline { width: 100%; min-height: 80px; }
.cockpit-sparkline-tall { min-height: 140px; }

/* ApexCharts setzt eigene Klassen — wir biegen nur Farben/Schriftarten. */
.apexcharts-text,
.apexcharts-yaxis text,
.apexcharts-xaxis text,
.apexcharts-legend-text {
    font-family: var(--font-ui) !important;
    fill: var(--color-chart-axis) !important;
    color: var(--color-chart-axis) !important;
}
.apexcharts-tooltip {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-border-strong) !important;
    box-shadow: var(--shadow-popup) !important;
    font-family: var(--font-ui) !important;
}
.apexcharts-tooltip-title {
    background: var(--color-surface-muted) !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-family: var(--font-mono) !important;
    font-variant-numeric: tabular-nums;
}
.apexcharts-xaxistooltip,
.apexcharts-yaxistooltip {
    background: var(--color-surface-elevated) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border-strong) !important;
    font-family: var(--font-mono) !important;
}


/* ============================================================================
 * 9. Utilities
 * ============================================================================ */

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--color-text-muted); }
.faint { color: var(--color-text-faint); }
.strong { color: var(--color-text-strong); font-weight: 600; }

/* Alpine-Cloak: Elemente mit x-cloak werden verborgen, bis Alpine die
   Direktive entfernt (passiert mit dem ersten Bind-Pass). Verhindert,
   dass Alpine-Direktiven-Container fuer einen Moment leer/falsch
   sichtbar werden. */
[x-cloak] { display: none !important; }

/* Loading-Overlay fuer synchrone Long-Running-Aktionen (z.B. PDF-Report-
   Generation in 7d.2). Halbtransparenter Vollbild-Layer, der die Seite
   sperrt, plus Spinner + Wait-Text. Wird durch Alpine x-show kontrolliert. */
.overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 17, 21, 0.78);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    z-index: 1000;
    color: #f8fafc;
    padding: var(--space-5);
    text-align: center;
    backdrop-filter: blur(2px);
}
.overlay p { margin: 0; max-width: 36rem; }
.overlay .muted { color: rgba(248, 250, 252, 0.65); }

/* CSS-only Spinner: rotierender Kreis mit Akzent-Farben-Kante. Bewusst
   ohne JS-Animation - CSS reicht und ist GPU-beschleunigt. */
.spinner {
    width: 48px;
    height: 48px;
    border: 4px solid rgba(248, 250, 252, 0.18);
    border-top-color: var(--color-accent-primary);
    border-radius: 50%;
    animation: ilb-spin 1s linear infinite;
}
@keyframes ilb-spin {
    to { transform: rotate(360deg); }
}

.sr-only {
    /* Visuell versteckt, fuer Screenreader sichtbar. */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.flex-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
.flex-grow { flex: 1; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.nowrap { white-space: nowrap; }


/* ============================================================================
 * 10. Print — Browser-Druck (Strg+P)
 * ============================================================================
 * Schwarz-weiss-orientiert, hoher Kontrast, keine Schatten, keine Hover-
 * Effekte. Akzentfarben werden bewusst entfernt — einzige Ausnahme ist
 * Status-Rot (Outage/Breach), weil es bei Vertragsverletzungen sichtbar
 * bleiben muss. PDF-Reports nutzen ein eigenes Stylesheet (mPDF), dieser
 * Block ist nur fuer Strg+P aus dem Browser gedacht.
 * ========================================================================== */

@media print {
    :root {
        --color-bg: #ffffff;
        --color-surface: #ffffff;
        --color-surface-muted: #f5f5f5;
        --color-surface-elevated: #ffffff;
        --color-text: #000000;
        --color-text-strong: #000000;
        --color-text-muted: #444444;
        --color-text-faint: #666666;
        --color-border: #bbbbbb;
        --color-border-strong: #888888;
        --color-accent-primary: #000000;            /* Akzent-Streifen entfaerben */
        --color-accent-primary-soft: transparent;
        --color-chart-grid: #bbbbbb;
        --color-chart-axis: #444444;
        --color-chart-contract: #888888;
        --shadow-card: none;
        --shadow-popup: none;
    }
    body {
        background: #fff;
        color: #000;
    }
    .site-header,
    .site-footer,
    .manual-test,
    button,
    .button {
        display: none !important;
    }
    main {
        max-width: none;
        padding: 0;
    }
    .card, .kpi, .chart-section, table {
        border-color: #bbb;
        page-break-inside: avoid;
    }
    /* Nur Outage/Breach behaelt rot — alles andere wird Schwarz/Grau. */
    .badge,
    .badge-primary,
    .badge-fallback,
    .badge-ok,
    .badge-warn {
        color: #000 !important;
        background: #f5f5f5 !important;
        border-color: #888 !important;
    }
    .badge-error,
    .alert-error {
        color: var(--color-status-outage) !important;
        border-color: var(--color-status-outage) !important;
        background: #fff !important;
    }
    a {
        color: #000;
        text-decoration: underline;
    }
    h1, h2, h3 { color: #000; }
}