/*
 * Eigene Ergänzungen für das Filament-Panel. Seit Filament 4 ohne eigenes Vite-Theme (das bräuchte Tailwind 4
 * und einen npm-Build auf dem Server): AppServiceProvider registriert die Datei als Filament-Asset,
 * "php artisan filament:assets" kopiert sie nach public/css/app/nordhilfe-admin.css.
 */
.fi-sidebar-nav {
    border-right: 1px solid #e4e4e5;
}

.dark .fi-sidebar-nav {
    border-right: 1px solid #18181B;
}

/*
 * Eingeschaltete Schalter (z. B. "Teilgenommen") kräftig wie in Filament 3. Filament 5 nimmt die hellste Stufe mit
 * ausreichendem Kontrast (bei Rot 400), dann sind "an" und "aus" schwer zu unterscheiden.
 */
.fi-toggle.fi-toggle-on.fi-color {
    --bg: var(--color-600);
}

/* Seite „Statistik“, Website-Details: Listen nebeneinander, am Handy untereinander. */
.nh-stats-grid {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .nh-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nh-stats-table {
    width: 100%;
    font-size: 0.875rem;
    border-collapse: collapse;
}

.nh-stats-table th {
    text-align: left;
    font-weight: 600;
    padding: 0.5rem 0.5rem 0.5rem 0;
    border-bottom: 1px solid #e4e4e7;
}

.nh-stats-table td {
    padding: 0.5rem 0.5rem 0.5rem 0;
    border-bottom: 1px solid #f4f4f5;
}

/* Lange Pfade ohne Leerzeichen dürfen überall umbrechen, sonst wird die Tabelle am Handy breiter als der Bildschirm. */
.nh-stats-table td.nh-stats-path {
    overflow-wrap: anywhere;
}

.nh-stats-table th:not(:first-child),
.nh-stats-table td:not(:first-child) {
    text-align: right;
    white-space: nowrap;
    padding-right: 0;
    padding-left: 1rem;
}

.dark .nh-stats-table th {
    border-bottom-color: #3f3f46;
}

.dark .nh-stats-table td {
    border-bottom-color: #27272a;
}

.nh-stats-table td.nh-stats-empty {
    text-align: left;
    color: #71717a;
}

/* Seite „Statistik“ ------------------------------------------------------------------------------------------- */

/*
 * Datenfarben der Diagramme und Balken: ein ruhiges Blau statt der roten Hauptfarbe (Rot heißt für Laien „Problem“).
 * Kräftig für den Hauptteil (Zahlung vor Ort), heller Ton für den zweiten Teil (online). Im Dunkelmodus umgekehrt
 * abgestuft, damit beide Töne sich vom dunklen Hintergrund abheben.
 */
:root {
    --nh-daten-stark: var(--info-600);
    --nh-daten-hell: var(--info-300);
}

.dark {
    --nh-daten-stark: var(--info-400);
    --nh-daten-hell: var(--info-700);
}

/* Der Satz ganz oben mit dem Wichtigsten. */
.nh-zusammenfassung {
    display: block;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: var(--gray-950);
}

.dark .nh-zusammenfassung {
    color: var(--gray-100);
}

/* Kachel-Beschreibung: oben der Vergleich (farbig), darunter eine graue Zusatzzeile. */
.nh-stat-vergleich,
.nh-stat-zusatz {
    display: block;
}

.nh-stat-zusatz {
    margin-top: 0.125rem;
    color: var(--gray-500);
}

.dark .nh-stat-zusatz {
    color: var(--gray-400);
}

/* Kein richtiger Wert („zu wenige Termine“, „10 von 39 online“): kleiner und grau, damit die Kachel ruhig bleibt. */
.nh-stat-leer .fi-wi-stats-overview-stat-value {
    font-size: 1.25rem;
    line-height: 2.25rem;
    color: var(--gray-500);
}

.nh-stats-grau,
.nh-stats-leer,
.nh-stats-fuss {
    color: var(--gray-500);
}

.dark .nh-stats-grau,
.dark .nh-stats-leer,
.dark .nh-stats-fuss {
    color: var(--gray-400);
}

.nh-stats-leer {
    font-size: 0.875rem;
}

.nh-stats-fuss {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
}

.nh-stats-table td.nh-stats-text {
    overflow-wrap: break-word;
}

/* „zu wenig Termine“ darf am Handy umbrechen. */
.nh-stats-table td .nh-stats-grau {
    white-space: normal;
}

.nh-stats-unterueberschrift {
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

/* Mini-Balken in Tabellen und liegende Balken (Zusatzleistungen). */
.nh-balken {
    display: inline-block;
    width: 5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--gray-100);
    overflow: hidden;
    vertical-align: middle;
}

.dark .nh-balken {
    background: var(--gray-800);
}

.nh-balken > span {
    display: block;
    height: 100%;
    border-radius: 9999px;
    background: var(--nh-daten-stark);
}

.nh-stats-wert-balken {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.nh-balkenliste {
    display: grid;
    gap: 0.875rem;
    font-size: 0.875rem;
}

.nh-balkenliste-zeile dt {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.nh-balkenliste-zeile dd {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.nh-balkenliste-zeile .nh-balken {
    flex: 1 1 auto;
    width: auto;
    height: 0.75rem;
}

.nh-balkenliste-wert {
    flex: 0 0 auto;
    min-width: 6.5rem;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nh-balkenliste-wert .nh-stats-grau {
    display: block;
    font-size: 0.75rem;
}

/* Geräte als drei Zahlen nebeneinander. */
.nh-zahlenreihe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.nh-zahlenreihe dt {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.nh-zahlenreihe dd {
    font-size: 1.5rem;
    font-weight: 600;
}

/* Mini-Balken in der Kursort-Tabelle erst ab 640 px, am Handy wäre die Tabelle sonst zu breit. */
@media (max-width: 639px) {
    .nh-ab-sm {
        display: none !important;
    }
}

/*
 * Zeitraumfilter: am Computer eine Zeile ohne Umbruch. Am Handy einzelne Knöpfe, die je Zeile die ganze Breite füllen
 * (keine leeren Felder, kein Umbruch im Knopf).
 */
.nh-zeitraum-filter .fi-btn {
    white-space: nowrap;
}

@media (max-width: 639px) {
    .nh-zeitraum-filter.fi-btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
        width: 100%;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        overflow: visible;
    }

    .nh-zeitraum-filter.fi-btn-group > .fi-btn {
        flex: 1 1 auto;
        justify-content: center;
        border-radius: 0.5rem;
        box-shadow: 0 0 0 1px var(--gray-200);
    }

    .dark .nh-zeitraum-filter.fi-btn-group > .fi-btn {
        box-shadow: 0 0 0 1px var(--gray-700);
    }
}

/* Kursort-Tabelle am Handy: vier schmale Spalten, Überschriften dürfen umbrechen, damit nichts abgeschnitten wird. */
@media (max-width: 639px) {
    .nh-stats-table.nh-kursorte {
        font-size: 0.8125rem;
    }

    .nh-stats-table.nh-kursorte th:not(:first-child),
    .nh-stats-table.nh-kursorte td:not(:first-child) {
        padding-left: 0.5rem;
    }

    .nh-stats-table.nh-kursorte th {
        white-space: normal;
        vertical-align: bottom;
    }
}

/* Kacheln am Handy (zwei nebeneinander) kompakter, damit Wert und Vergleich ohne viele Umbrüche passen. */
@media (max-width: 639px) {
    .fi-wi-stats-overview-stat {
        padding: 1rem;
    }

    .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-value {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .fi-wi-stats-overview-stat .fi-wi-stats-overview-stat-description {
        font-size: 0.8125rem;
    }
}