/* ---------------------------------------------------------------------------
   Dashboard – gemeinsames Aussehen aller Rollen.

   Bisher lag dieses Vokabular dreimal als Inline-<style> in den Rollen-Partials
   (rund 1500 Zeilen). Hier steht es einmal. Die Klassennamen sind bewusst die
   bisherigen (.dashboard-card, .dashboard-stat-card, …), damit die Optik nicht
   springt; für Statusanzeigen wird das globale .pba-status-pill aus
   pba-compact-ui.css genutzt statt eigener Chips.

   Farben kommen über die Branding-Variablen aus ui/main.blade.php
   (--pba-accent, --pba-accent-rgb, …).
--------------------------------------------------------------------------- */

.dashboard-page {
    --db-luecke: 10px;
    --db-rahmen: #e6e9ef;
    --db-gedaempft: #6b7280;
    display: flex;
    flex-direction: column;
    gap: var(--db-luecke);
}

/* --- Aufgabenleiste ------------------------------------------------------ */

.dashboard-aufgaben {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #fff;
    border: 1px solid var(--db-rahmen);
    border-radius: 12px;
}

.dashboard-aufgaben-titel {
    font-size: 13px;
    font-weight: 700;
    color: var(--db-gedaempft);
    margin-right: 4px;
    letter-spacing: .01em;
}

.dashboard-aufgabe {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 11px 4px 7px;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}

.dashboard-aufgabe:hover {
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, .1);
}

.dashboard-aufgabe .db-zahl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .75);
    font-size: 12px;
    font-weight: 800;
}

.dashboard-aufgabe.ist-gefahr { background: rgba(220, 53, 69, .12); color: #a4243b; border-color: rgba(220, 53, 69, .22); }
.dashboard-aufgabe.ist-warn   { background: rgba(253, 126, 20, .14); color: #9a4a06; border-color: rgba(253, 126, 20, .24); }
.dashboard-aufgabe.ist-info   { background: rgba(37, 99, 235, .12);  color: #1d4ed8; border-color: rgba(37, 99, 235, .2); }

/* --- Raster -------------------------------------------------------------- */

/* Zwölf Spalten und FEINE Zeilen von 10px.

   Warum so fein: Wäre eine Rasterzeile so hoch wie ihre größte Kachel, gäbe es
   unter einer kurzen Kachel zwar sichtbar Platz – aber keine Zelle, die man
   ansprechen könnte. Mit 10px-Zeilen ist "unterhalb dieser Kachel" eine eigene
   Position, und Kacheln lassen sich wirklich frei setzen.

   Wo eine Kachel liegt, steht in der Einstellung. Berechnet wird nur, wie viele
   10px-Zeilen ihr Inhalt hoch ist. Lücken bleiben Lücken. */
.dashboard-raster {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 10px;
    column-gap: var(--db-luecke);
    row-gap: 0;              /* der Abstand steckt in der Kachel selbst */
    align-items: start;
}

/* box-sizing ausdrücklich: die App hat keinen globalen border-box-Reset. Ohne
   das zählte eine eingestellte Höhe von 200px als 200px INHALT plus 10px
   Abstand – die Kachel wäre also 21 Rasterzeilen hoch, obwohl 20 reserviert
   sind, und ragte in ihre Nachbarin. */
.dashboard-platz {
    box-sizing: border-box;
    min-width: 0;
    padding-bottom: var(--db-luecke);
}

/* Feste Höhe: die Karte füllt den Platz aus, statt sich am Inhalt zu
   orientieren. Passt der Inhalt nicht, scrollt er INNERHALB der Karte – ein
   Überlaufen würde die Nachbarkacheln überdecken, weil die Position im Raster
   ja gesetzt ist. */
/* Anklickbare Kachel: führt zu ihrer Seite. Der kleine Verweis im Kartenkopf
   bleibt stehen – er benennt das Ziel, die Fläche macht es bequem. */
.dashboard-platz.ist-anklickbar { cursor: pointer; }
/* Reine Angaben in einer anklickbaren Kachel – kein Handzeiger, der einen
   Verweis verspricht (siehe Klick-Handler in dashboard/overview). */
.dashboard-platz.ist-anklickbar .dashboard-kein-kachelklick { cursor: default; }
.dashboard-platz.ist-anklickbar > .dashboard-card {
    transition: border-color .12s ease, box-shadow .12s ease;
}
.dashboard-platz.ist-anklickbar:hover > .dashboard-card,
.dashboard-platz.ist-anklickbar:focus-visible > .dashboard-card {
    border-color: rgba(var(--pba-accent-rgb, 28, 82, 36), .45);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}
.dashboard-platz.ist-anklickbar:focus-visible {
    outline: 2px solid var(--pba-accent, #1c5224);
    outline-offset: 2px;
}

.dashboard-platz.ist-feste-hoehe { display: flex; }
.dashboard-platz.ist-feste-hoehe > .dashboard-card {
    flex: 1 1 auto;
    min-height: 0;
}
.dashboard-platz.ist-feste-hoehe .dashboard-card-header { flex: 0 0 auto; }
.dashboard-platz.ist-feste-hoehe .dashboard-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* --- Container ("übergeordnete Kachel") ---------------------------------
   Ein umrandeter Kasten mit Überschrift, der mehrere Kacheln zusammenfasst.
   Er liegt wie eine Kachel im Top-Level-Raster; der äussere Platz trägt nur
   Lage und Rasterabstand, der sichtbare Kasten steckt in .-innen – dasselbe
   Muster wie .dashboard-platz > .dashboard-card, damit die Höhenmessung
   (10px-Zeilen) für beide gleich aufgeht. */
.dashboard-container {
    box-sizing: border-box;
    min-width: 0;
    padding-bottom: var(--db-luecke);
}
.dashboard-container-innen {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--db-rahmen);
    border-radius: 12px;
    padding: 8px 10px 2px;
}
.dashboard-container-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px 7px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--db-rahmen);
}
.dashboard-container-titel {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #334155;
}
/* Das Innen-Raster füllt den Kasten – kein eigener Aussenrand mehr. */
.dashboard-container-raster { width: 100%; }

/* Feste Höhe / Obergrenze: der Kasten füllt den Platz, die Kacheln scrollen
   darin – wie bei .dashboard-platz.ist-feste-hoehe. */
.dashboard-container.ist-feste-hoehe { display: flex; }
.dashboard-container.ist-feste-hoehe .dashboard-container-innen { flex: 1 1 auto; min-height: 0; }
.dashboard-container.ist-feste-hoehe .dashboard-container-raster {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* Farbkategorie des Containers – dieselbe schwache Tönung wie bei Kacheln. */
.dashboard-container.ist-farbig .dashboard-container-innen {
    background: rgba(var(--kachel-farbe), .05);
    border-color: rgba(var(--kachel-farbe), .30);
}
.dashboard-container.ist-farbig .dashboard-container-kopf {
    border-bottom-color: rgba(var(--kachel-farbe), .28);
}

/* Schmale Bildschirme: das 12er-Raster ergibt keinen Sinn mehr, alles
   untereinander.

   Nicht "ein Raster mit einer Spalte", sondern gar kein Raster mehr: die
   Zeilen des Rasters sind 10px hoch, und wie viele davon eine Kachel belegt,
   setzt pba-dashboard-hoehe.js als Inline-Stil (grid-row: 12 / span 34). Eine
   Regel wie "grid-row: auto" nähme jeder Kachel genau EINE 10px-Zeile – die
   Kacheln lägen übereinander. Als Flex-Spalte sind grid-row und grid-column
   wirkungslos, und jede Kachel ist so hoch wie ihr Inhalt.

   Die Reihenfolge kommt aus --mobil-rang (KachelRegistry), nicht aus der im
   Editor eingerichteten Lage: nebeneinander liegende Kacheln sind gleichrangig,
   untereinander liegende nicht – gestapelt muss aber etwas zuerst kommen. */
@media (max-width: 991.98px) {
    .dashboard-raster {
        display: flex;
        flex-direction: column;
        /* Muss ausdrücklich hier stehen: das Grundgerüst setzt align-items:
           start. Im Raster meint das "oben ausrichten", in einer Flex-Spalte
           aber die Querachse – also die Breite. Ohne diese Zeile ist jede
           Kachel nur so breit wie ihr Inhalt, und untereinander gestellt
           ergibt das eine ausgefranste Kante. */
        align-items: stretch;
    }

    .dashboard-raster > .dashboard-platz {
        order: var(--mobil-rang, 100);
        /* Untereinander gibt es keinen Grund, Inhalt abzuschneiden – beide
           Maße stehen als Inline-Stil an der Kachel, deshalb !important. */
        height: auto !important;
        max-height: none !important;
    }

    /* Feste Höhe heißt auf dem Desktop "Inhalt scrollt in der Karte". Auf dem
       Telefon wäre das ein Scrollbereich im Scrollbereich – die Karte wächst
       stattdessen mit. */
    .dashboard-platz.ist-feste-hoehe { display: block; }
    .dashboard-platz.ist-feste-hoehe .dashboard-card-body { overflow-y: visible; }

    /* Container genauso: untereinander, nach mobilem Rang, ohne Höhendeckel. */
    .dashboard-raster > .dashboard-container {
        order: var(--mobil-rang, 100);
        height: auto !important;
        max-height: none !important;
    }
    .dashboard-container.ist-feste-hoehe { display: block; }
    .dashboard-container.ist-feste-hoehe .dashboard-container-raster { overflow-y: visible; }
}

/* --- Karte --------------------------------------------------------------- */

.dashboard-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    border: 1px solid var(--db-rahmen);
    border-radius: 12px;
    overflow: hidden;
}

/* Farbkategorie: ein sehr schwacher Ton, damit zusammengehörende Kacheln als
   Gruppe erkennbar sind.

   Bewusst so schwach: die Farbe ist Gliederung, nicht Bedeutung. Was eine
   Kachel aussagt, steht in ihrem Text – sonst wäre die Anzeige für Menschen
   mit Farbsehschwäche wertlos. Aus demselben Grund bekommt auch der Kartenkopf
   nur eine Spur mehr, statt kräftig zu färben. */
.dashboard-platz[data-kategorie] > .dashboard-card {
    background: rgba(var(--kachel-farbe), .05);
    border-color: rgba(var(--kachel-farbe), .28);
}
.dashboard-platz[data-kategorie] .dashboard-card-header {
    background: rgba(var(--kachel-farbe), .09);
    border-bottom-color: rgba(var(--kachel-farbe), .22);
}

.dashboard-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--db-rahmen);
    background: #fbfcfe;
}

.dashboard-card-header h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
}

.dashboard-card-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

/* Vor und zurück blättern im Kartenkopf. */
.dashboard-blaettern { display: inline-flex; align-items: center; gap: 2px; }
.dashboard-blaettern button {
    border: 1px solid var(--db-rahmen);
    background: #fff;
    color: #475569;
    border-radius: 5px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 17px;
    cursor: pointer;
}
.dashboard-blaettern button:hover { background: #eef2f7; color: #16345c; }
.dashboard-blaettern button.ist-aktiv {
    background: rgba(var(--pba-accent-rgb, 28, 82, 36), .12);
    border-color: rgba(var(--pba-accent-rgb, 28, 82, 36), .35);
    color: var(--pba-accent, #1c5224);
    font-weight: 600;
}
.dashboard-blaettern button[disabled] { opacity: .35; cursor: default; }
.dashboard-blaettern button[disabled]:hover { background: #fff; color: #475569; }
.dashboard-blaettern.ist-laedt { opacity: .5; pointer-events: none; }
.dashboard-blaettern.ist-fehler button { border-color: rgba(220, 53, 69, .5); color: #a4243b; }

.dashboard-card-body { padding: 10px 12px; }
.dashboard-card-body.ist-eng { padding: 4px 0; }

.dashboard-empty {
    padding: 12px 4px;
    text-align: center;
    color: var(--db-gedaempft);
    font-size: 13px;
}

/* --- Kennzahlen ---------------------------------------------------------- */

.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 8px;
}

/* Im Dashboard-Raster NICHT frei packen.

   auto-fit nimmt so viele Spalten, wie hineinpassen – bei vier Werten ergab
   das je nach Kachelbreite 3 + 1: eine volle Zeile und eine fast leere. Die
   Aufteilung soll aufgehen, deshalb richtet sie sich nach der ANZAHL der
   Werte: schmal zwei Spalten, breit alle nebeneinander. Drei plus eins kommt
   damit nicht mehr vor.

   Gemessen wird die Kachel selbst (Container-Anfrage), nicht das Fenster – die
   gleiche Kachel ist im Editor schmaler als im Dashboard. Kann der Browser
   keine Container-Anfragen, bleibt es bei zwei Spalten; das ist einer der
   beiden erwünschten Zustände, nie der schiefe. */
.dashboard-raster .dashboard-card-body { container-type: inline-size; }

.dashboard-raster .dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Derselbe Selektor wie oben, sonst gewinnt die Zwei-Spalten-Regel: eine
   Container-Abfrage erhöht die Spezifität nicht. */
@container (min-width: 440px) {
    .dashboard-raster .dashboard-stats {
        grid-template-columns: repeat(var(--stats-spalten, 2), minmax(0, 1fr));
    }
}

.dashboard-stat-card {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--db-rahmen);
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

a.dashboard-stat-card:hover {
    text-decoration: none;
    border-color: rgba(var(--pba-accent-rgb, 28, 82, 36), .45);
    box-shadow: 0 4px 14px rgba(15, 23, 42, .08);
}

.dashboard-stat-label {
    font-size: 12px;
    color: var(--db-gedaempft);
    margin-bottom: 2px;
}

.dashboard-stat-value {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--pba-accent, #1c5224);
}

.dashboard-stat-tone { font-size: 12px; color: var(--db-gedaempft); margin-top: 2px; }

/* --- Listen und Zeilen --------------------------------------------------- */

.dashboard-liste { display: flex; flex-direction: column; }

/* Ein Zeilenmaß für alle Listen.

   Manche Kacheln führen eine Unterzeile (Partner · Platz), andere nicht.
   Ohne festen Rahmen waren einzeilige Listen deutlich dichter als zweizeilige,
   und nebeneinander gestellt sah das aus wie zwei verschiedene Bauteile.
   44px ist die natürliche Höhe einer zweizeiligen Zeile (Titel 17 + Unterzeile
   16 + Innenabstand + Trennlinie); einzeilige Listen halten dasselbe Maß.
   box-sizing ist hier ausdrücklich gesetzt: ohne das gilt content-box, und
   die 44 wären 55. */
.dashboard-zeile {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 5px 12px;
    border-bottom: 1px solid #f1f3f7;
    font-size: 13px;
    color: inherit;
    text-decoration: none;
}

.dashboard-zeile:last-child { border-bottom: 0; }
a.dashboard-zeile:hover { background: #f8fafc; text-decoration: none; }

.dashboard-zeile-haupt { min-width: 0; }
.dashboard-zeile-titel { font-weight: 600; color: #1f2937; line-height: 1.25; }
.dashboard-zeile-titel.ist-ungelesen::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--pba-accent, #1c5224);
    vertical-align: middle;
}
.dashboard-zeile-neben { color: var(--db-gedaempft); font-size: 12px; line-height: 1.2; }
.dashboard-zeile-rechts { flex: 0 0 auto; color: var(--db-gedaempft); font-size: 12px; white-space: nowrap; }

.dashboard-zeile-abschnitt {
    padding: 4px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #f1f3f7;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--db-gedaempft);
}

/* --- Stufenliste (Praxisbesuche) ----------------------------------------- */

.dashboard-stufe {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid #f1f3f7;
    text-decoration: none;
    color: inherit;
}

.dashboard-stufe:last-child { border-bottom: 0; }
a.dashboard-stufe:hover { background: #f8fafc; text-decoration: none; }

.dashboard-stufe-punkt {
    flex: 0 0 auto;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.dashboard-stufe-label { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: #1f2937; }
.dashboard-stufe-hinweis { display: block; font-weight: 400; font-size: 12px; color: var(--db-gedaempft); }
.dashboard-stufe-zahl { flex: 0 0 auto; font-size: 14px; font-weight: 800; }
.dashboard-stufe.ist-ruhig .dashboard-stufe-zahl { color: #94a3b8; }

/* --- Diagramm-Farben -----------------------------------------------------
   Bewusst NICHT die Branding-Farbe: --pba-accent wechselt je Betrieb (grün,
   orange, blau …). Datenfarben müssen aber über alle Betriebe hinweg dasselbe
   bedeuten und geprüft bleiben. Der Akzent bleibt der Oberfläche vorbehalten.

   Geprüft gegen die Kartenfläche #fff (Skript validate_palette.js):
   Serienfarben bestehen alle Prüfungen als Dreier-Satz (schlechteste
   CVD-Trennung ΔE 9.2, Normalsicht 24.0). Aqua liegt bei 2.82:1 unter der
   3:1-Marke – deshalb trägt es überall eine sichtbare Beschriftung.

   Statusfarben sind KEIN Serien-Satz; sie stehen immer mit Symbol und Text,
   nie allein über die Farbe.
-------------------------------------------------------------------------- */

.dashboard-page {
    --viz-serie-1: #2a78d6;   /* blau   – Termine, Standard-Balken */
    --viz-serie-2: #eb6834;   /* orange – Praxisbesuche */
    --viz-serie-3: #1baf7a;   /* aqua   – Einsätze */
    --viz-spur:    #cde2fb;   /* hellste Stufe derselben Blau-Rampe */
    --viz-gut:     #0ca30c;
    --viz-warnung: #fab219;
    --viz-ernst:   #ec835a;
    --viz-kritisch:#d03b3b;
    --viz-raster:  #e1e0d9;   /* Hilfslinien, eine Stufe von der Fläche entfernt */
    --viz-achse:   #c3c2b7;
}

/* --- Meter (Anteil gegen ein Ziel) ---------------------------------------
   Die Spur ist eine hellere Stufe derselben Rampe, damit der Zustand über die
   ganze Breite lesbar bleibt – nicht ein neutrales Grau.
-------------------------------------------------------------------------- */

.dashboard-meter {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--viz-spur);
    overflow: hidden;
}

.dashboard-meter-fuellung {
    height: 100%;
    border-radius: 999px;
    background: var(--viz-serie-1);
    transition: width .2s ease;
}

.dashboard-meter-fuellung.ist-gut      { background: var(--viz-gut); }
.dashboard-meter-fuellung.ist-warnung  { background: var(--viz-warnung); }
.dashboard-meter-fuellung.ist-kritisch { background: var(--viz-kritisch); }

/* Zielmarke bei 100 %: zeigt, wo "erfüllt" liegt, wenn die Skala darüber geht. */
.dashboard-meter-ziel {
    position: absolute;
    top: -2px;
    bottom: -2px;
    width: 2px;
    background: var(--viz-achse);
}

/* --- Säulendiagramm ------------------------------------------------------
   Inline-SVG statt Diagramm-Bibliothek: eine Kachel braucht keine 200 KB und
   keinen Initialisierungslauf, und es überlebt den View-Cache unverändert.
-------------------------------------------------------------------------- */

.db-saeulen {
    display: flex;
    align-items: flex-end;
    gap: 2px;                 /* Flächenlücke zwischen benachbarten Säulen */
    width: 100%;
}

.db-saeulen-band {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.db-saeulen-wert {
    font-size: 10px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1;
    min-height: 10px;
    font-variant-numeric: tabular-nums;
}

/* Die Spur gibt die Höhe vor; der Balken wächst darin von der Grundlinie. */
.db-saeulen-spur {
    width: 100%;
    height: 72px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--viz-achse);
}

.db-saeulen-balken {
    display: block;
    width: 100%;
    max-width: 24px;          /* gedeckelt – der Rest des Bandes bleibt Luft */
    background: var(--viz-serie-1);
    border-radius: 4px 4px 0 0;   /* oben gerundet, an der Grundlinie eckig */
}

.db-saeulen-balken.ist-betont { background: var(--viz-kritisch); }

.db-saeulen-tick {
    font-size: 10px;
    color: #6b7280;
    line-height: 1;
    min-height: 10px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.dashboard-chart-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--db-gedaempft);
}

.dashboard-chart-legende span { display: inline-flex; align-items: center; gap: 6px; }

.dashboard-chart-legende i {
    width: 9px; height: 9px;
    border-radius: 50%;
    display: inline-block;
}

/* --- Wochenblick ---------------------------------------------------------
   Sieben Spalten statt eines Monatsrasters: nur so ist Platz für den Eintrag
   selbst statt für einen Punkt.
-------------------------------------------------------------------------- */

.dashboard-woche {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.dashboard-woche-tag {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 82px;
    padding: 5px 5px;
    border-radius: 8px;
    background: #f8fafc;
    color: inherit;
    text-decoration: none;
}

a.dashboard-woche-tag:hover { background: #eef2f7; text-decoration: none; }

/* Leere Woche: nur die Tagesköpfe, keine Eintragshöhe vorhalten. */
.dashboard-woche.ist-leer .dashboard-woche-tag { min-height: 0; }

.dashboard-woche-tag.ist-wochenende { background: #f1f3f7; }

.dashboard-woche-tag.ist-heute {
    background: #fff;
    outline: 2px solid var(--pba-accent, #1c5224);
    outline-offset: -2px;
}

.dashboard-woche-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px;
}

.dashboard-woche-wt {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--db-gedaempft);
}

.dashboard-woche-zahl {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    font-variant-numeric: tabular-nums;
}

.dashboard-woche-tag.ist-heute .dashboard-woche-zahl { color: var(--pba-accent, #1c5224); }
.dashboard-woche-tag.ist-wochenende .dashboard-woche-zahl { color: #9aa3af; }

.dashboard-woche-liste { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

/* Farbige Kante links statt Vollfläche: die Schrift bleibt in Textfarbe und
   damit lesbar, die Identität trägt die Marke daneben. */
.dashboard-woche-eintrag {
    display: block;
    min-width: 0;
    padding: 2px 4px 2px 5px;
    border-left: 3px solid var(--viz-serie-1);
    border-radius: 3px;
    background: #fff;
    font-size: 11px;
    line-height: 1.25;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-woche-eintrag.ist-termin  { border-left-color: var(--viz-serie-1); }
.dashboard-woche-eintrag.ist-besuch  { border-left-color: var(--viz-serie-2); }
.dashboard-woche-eintrag.ist-einsatz { border-left-color: var(--viz-serie-3); }

.dashboard-woche-zeit {
    font-weight: 700;
    color: var(--db-gedaempft);
    margin-right: 3px;
    font-variant-numeric: tabular-nums;
}

.dashboard-woche-mehr { font-size: 10px; color: var(--db-gedaempft); padding-left: 6px; }

/* Kartenkopf: Blättern und Woche als Gruppe. Am Rechner dieselben 8px wie
   zwischen den übrigen Kopfelementen – die Gruppe ändert dort nichts. Die
   kurze Woche und der Punkt davor sind nur fürs Telefon. */
.dashboard-woche-navi,
.dashboard-woche-label { display: inline-flex; align-items: center; gap: 8px; }
.dashboard-woche-trenner,
.dashboard-woche-zeitraum-kurz { display: none; }

/* „+ XX weitere"-Fußzeile gekürzter Listen (siehe partials/mehr_zeile). */
.dashboard-zeile-mehr { font-size: 12px; color: var(--db-gedaempft); padding: 6px 4px 2px; text-align: center; }
.dashboard-zeile-mehr a { color: inherit; text-decoration: none; }
.dashboard-zeile-mehr a:hover { text-decoration: underline; }

/* Auf schmalen Bildschirmen untereinander statt sieben Spalten zu quetschen.
   Dieselbe Grenze wie das Stapeln der Kacheln – sonst stünde die Woche in einer
   vollbreiten Kachel noch als Sieben-Spalten-Raster. */
@media (max-width: 991.98px) {
    /* minmax(0, …) wie oben bei den sieben Spalten: ein blankes 1fr wächst bis
       zur Mindestbreite seines Inhalts, und die war bei nowrap der ganze Titel –
       die Zeilen ragten dann rechts aus der Karte. */
    .dashboard-woche { grid-template-columns: minmax(0, 1fr); }
    .dashboard-woche-tag { min-height: 0; flex-direction: row; align-items: flex-start; gap: 10px; }
    .dashboard-woche-kopf { flex: 0 0 52px; flex-direction: row; gap: 6px; }
    .dashboard-woche-liste { flex: 1 1 auto; }
    /* Untereinander hat der Eintrag die ganze Zeile: der Titel bricht um statt
       mit „…“ zu enden. In den sieben schmalen Spalten bleibt es beim Kürzen. */
    .dashboard-woche-eintrag { white-space: normal; overflow-wrap: anywhere; }

    /* Kartenkopf in zwei Zeilen statt einer, die nicht passt (Pille und
       Zeitraum brachen in sich um). Zeile 1: Titel links, „Kalender" rechts –
       wie bei den anderen Kacheln. Zeile 2: Blättern links, „KW 41 · 05.–11.10."
       rechts. Die Aktionen lösen sich dafür auf, damit Titel, Verweis und
       Gruppe Geschwister im Kopf werden. */
    .dashboard-woche-kopf-zeile { row-gap: 8px; }
    .dashboard-woche-kopf-zeile .dashboard-card-header-actions { display: contents; }
    .dashboard-woche-kopf-zeile h5 { flex: 1 1 auto; min-width: 0; }
    .dashboard-woche-kopf-zeile .dashboard-card-header-actions > a { order: 1; }
    .dashboard-woche-navi { order: 2; flex: 1 0 100%; justify-content: space-between; }

    .dashboard-woche-label { gap: 5px; font-size: 14px; line-height: 1.2; white-space: nowrap; }
    .dashboard-woche-label .pba-status-pill {
        min-width: 0;
        padding: 0;
        background: none;
        font-size: inherit;
        color: #1f2937;
    }
    .dashboard-woche-trenner { display: inline; color: var(--db-gedaempft); }
    .dashboard-woche-label .dashboard-zeile-neben { font-size: inherit; }
    .dashboard-woche-zeitraum-lang { display: none; }
    .dashboard-woche-zeitraum-kurz { display: inline; }
}

/* Legenden-Marke in der Farbe der jeweiligen Art. */
.dashboard-chart-legende i.ist-termin  { color: var(--viz-serie-1); }
.dashboard-chart-legende i.ist-besuch  { color: var(--viz-serie-2); }
.dashboard-chart-legende i.ist-einsatz { color: var(--viz-serie-3); }

/* --- Fortschritt (Altbestand, wird von einigen Kacheln noch genutzt) ------ */

.dashboard-progress {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: var(--viz-spur);
    overflow: hidden;
}

.dashboard-progress-bar { height: 100%; border-radius: 999px; background: var(--viz-serie-1); }
.dashboard-progress-bar.is-success { background: var(--viz-gut); }
.dashboard-progress-bar.is-warning { background: var(--viz-warnung); }
.dashboard-progress-bar.is-danger  { background: var(--viz-kritisch); }

.dashboard-progress-zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    border-bottom: 1px solid #f1f3f7;
    font-size: 13px;
}

.dashboard-progress-zeile:last-child { border-bottom: 0; }
.dashboard-progress-wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--db-gedaempft); font-size: 12px; }

/* --- Zeitstrahl (Stationen der Ausbildung) -------------------------------
   Eine Zeile je Station. Die durchgehende Linie entsteht aus dem Achsen-
   Element, nicht aus Rahmen an den Zeilen – sonst bräuchte jede Zeile eine
   Sonderbehandlung an den Enden.
-------------------------------------------------------------------------- */

.db-station {
    display: flex;
    align-items: stretch;
    gap: 9px;
    padding: 5px 12px;
}

.db-station-achse {
    position: relative;
    flex: 0 0 9px;
    display: flex;
    justify-content: center;
}

/* Die Linie läuft durch; der Punkt liegt darüber. */
.db-station-achse::before {
    content: '';
    position: absolute;
    top: -5px; bottom: -5px;
    width: 2px;
    background: #e6e9ef;
}

.db-station:first-child .db-station-achse::before { top: 9px; }
.db-station:last-child  .db-station-achse::before { bottom: calc(100% - 9px); }

.db-station-punkt {
    position: relative;
    width: 9px; height: 9px;
    margin-top: 5px;
    border-radius: 50%;
    background: #cbd5e1;
    box-shadow: 0 0 0 2px #fff;   /* Flächenring, damit der Punkt die Linie trennt */
}

.db-station.ist-laufend .db-station-punkt { background: var(--viz-serie-1); }
.db-station.ist-geplant .db-station-punkt { background: var(--viz-spur); }

.db-station-inhalt { flex: 1 1 auto; min-width: 0; }

.db-station-kopf {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.db-station-titel {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.db-station-zeit {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--db-gedaempft);
    font-variant-numeric: tabular-nums;
}

.db-station-neben { display: block; font-size: 11px; color: var(--db-gedaempft); }

/* --- Kontakt und Chips --------------------------------------------------- */

.dashboard-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.dashboard-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2f7;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-info-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: 13px;
}

.dashboard-info-row + .dashboard-info-row { border-top: 1px solid #f1f3f7; }
.dashboard-info-label { color: var(--db-gedaempft); }
.dashboard-info-wert { font-weight: 600; color: #1f2937; text-align: right; }

.dashboard-kontakt { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* --- Hinweisstreifen ----------------------------------------------------- */

.dashboard-hinweis {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(253, 126, 20, .1);
    border: 1px solid rgba(253, 126, 20, .24);
    color: #9a4a06;
    font-size: 13px;
}

.dashboard-hinweis.ist-info {
    background: rgba(37, 99, 235, .08);
    border-color: rgba(37, 99, 235, .2);
    color: #1d4ed8;
}

/* --- Vorschau im Editor -------------------------------------------------- */

.dashboard-page.ist-vorschau { pointer-events: none; }
.dashboard-page.ist-vorschau a { cursor: default; }

.dashboard-vorschau-band {
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(37, 99, 235, .1);
    border: 1px dashed rgba(37, 99, 235, .35);
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 600;
}

/* --- Telefon und Tablet --------------------------------------------------
   Was hier steht, ist nicht "kleiner", sondern grobmotorisch bedienbar: mit
   der Maus trifft man 21px, mit dem Daumen nicht. Die Kartenfläche selbst ist
   auf dem Telefon das eigentliche Bedienelement (ein Tipp führt zur Seite),
   die kleinen Verweise im Kartenkopf sind der Notausgang für alle, die genau
   zielen können.
-------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    /* Der Abstand zwischen den Kacheln darf grösser sein: gestapelt trennt er
       zwei Themen, nebeneinander trennte er zwei Spalten. */
    .dashboard-page { --db-luecke: 12px; }

    /* ── Ein Mass für alle Bedienelemente ────────────────────────────────
       34px, dieselbe Höhe wie die Schaltflächen im Kalender und am grossen
       Bildschirm. Vorher standen auf einem Bildschirm 44px (Aufgaben-Chip),
       28px (Verweis im Kartenkopf) und 21px (Blättern) nebeneinander – drei
       Grössen für drei Dinge, die alle nur „hier tippen" bedeuten.

       Sichtbar 34px, treffbar 44px: die Fläche wächst über ::after nach oben
       und unten. Seitlich bleibt sie, wo sie ist – nebeneinander stehende
       Elemente würden sich sonst gegenseitig die Treffer wegnehmen. */
    .dashboard-aufgaben { padding: 10px; gap: 8px; }
    .dashboard-aufgabe {
        position: relative;
        height: 34px;
        padding: 0 12px 0 8px;
        font-size: 14px;
    }

    /* Nur 4px: die Chips stehen 8px auseinander, bei 5px berührten sich die
       Trefferflächen der Nachbarn. */
    .dashboard-aufgabe::after {
        content: '';
        position: absolute;
        top: -4px; bottom: -4px; left: 0; right: 0;
    }

    /* Blättern im Kartenkopf (eine Woche vor, eine zurück). Mit 23×21px war
       das die kleinste Schaltfläche der Anwendung – und die einzige, die für
       schmale Bildschirme nie angepasst wurde. */
    .dashboard-blaettern { gap: 4px; }
    .dashboard-blaettern button {
        position: relative;
        height: 34px;
        min-width: 34px;
        padding: 0 10px;
        font-size: 13px;
        line-height: 1;
    }
    .dashboard-blaettern button::after {
        content: '';
        position: absolute;
        top: -5px; bottom: -5px; left: 0; right: 0;
    }

    /* Der kleine Verweis im Kartenkopf („Alle", „Ganze Historie") bleibt ein
       Verweis und keine Schaltfläche – seine Grösse gehört zur Überschrift,
       nicht zur Bedienung. Er bekommt nur eine grössere Trefferfläche; sie
       darf hier auch seitlich wachsen, weil rechts der Kartenrand kommt. */
    .dashboard-card-header-actions a { position: relative; }
    .dashboard-card-header-actions a::after {
        content: '';
        position: absolute;
        top: -8px; bottom: -8px; left: -6px; right: -6px;
    }

    /* Handlung an einer Aufgabe, z. B. „Alle erinnern". */
    .dashboard-aufgaben form .btn { height: 34px; padding: 0 12px; font-size: 14px; }
    /* Ohne Zeigegerät gibt es kein Hover – die Verschiebung beim Antippen
       wirkte wie ein Ruckeln. */
    .dashboard-aufgabe:hover { transform: none; box-shadow: none; }

    /* Kartenkopf: Überschrift und Verweis brauchen zusammen mehr Platz, als
       eine Zeile hergibt, sobald der Titel lang ist. */
    .dashboard-card-header { flex-wrap: wrap; padding: 10px 12px; }
    .dashboard-card-header h5 { font-size: 15px; }
    .dashboard-card-header-actions { font-size: 13px; }
    .dashboard-card-header-actions a { padding: 4px 0; }

    /* Listenzeilen sind Verweise: 48px statt 44px, und der Text darf umbrechen
       statt den Statuswert nach rechts aus der Karte zu schieben. */
    .dashboard-zeile { min-height: 48px; padding: 8px 12px; font-size: 14px; }
    .dashboard-zeile-neben { font-size: 12.5px; }
    .dashboard-zeile-rechts { white-space: normal; text-align: right; }

    /* Kontaktknöpfe des laufenden Einsatzes ("Anrufen", "E-Mail"). Genau die
       sind auf dem Telefon der Grund, das Dashboard aufzumachen – als
       12px-Pille wären sie kaum zu treffen. */
    .dashboard-kontakt { gap: 10px; }
    .dashboard-kontakt .dashboard-chip {
        position: relative;
        height: 34px;
        padding: 0 14px;
        font-size: 14px;
    }
    .dashboard-kontakt .dashboard-chip::after {
        content: '';
        position: absolute;
        top: -5px; bottom: -5px; left: 0; right: 0;
    }
    a.dashboard-chip {
        background: rgba(var(--pba-accent-rgb, 28, 82, 36), .1);
        color: var(--pba-accent, #1c5224);
    }

    .dashboard-stat-value { font-size: 24px; }
    .dashboard-empty { padding: 16px 4px; }
}

/* Sehr schmal (Telefon hochkant): Bezeichnung und Wert stehen untereinander.
   Nebeneinander gewinnt bei einem langen Partnernamen die Bezeichnung den
   Platz, und der Wert bricht auf drei Zeilen um – ausgerechnet die Angabe,
   wegen der die Zeile da ist. */
@media (max-width: 575.98px) {

    /* Eine Zeile je Aufgabe. Nebeneinander bliebe auf 390px von jeder nur ein
       Bruchteil der Fläche – auf dem Tablet passen dagegen zwei nebeneinander,
       und dort wäre die volle Breite je Chip nur verschenkter Platz. */
    .dashboard-aufgaben-titel { flex: 1 0 100%; margin-right: 0; }
    .dashboard-aufgabe { flex: 1 1 100%; }

    .dashboard-info-row {
        flex-direction: column;
        align-items: stretch;
        gap: 1px;
        padding: 6px 0;
    }
    .dashboard-info-wert { text-align: left; }

    /* Der Zeitstrahl führt Titel und Zeitraum in einer Zeile – gemeinsam
       passen sie hier nicht mehr nebeneinander. */
    .db-station-kopf { flex-direction: column; align-items: flex-start; gap: 0; }
    .db-station-titel { white-space: normal; }
}