/* ===========================================================================
   dispo.css — Ergaenzungen fuer NWT.Dispo (Disposition) zum NWT-Design.
   app.css (Styleguide) bleibt unveraendert; hier stehen nur die Bausteine,
   die es im Kundenportal nicht gibt: Wochenraster, Backlog-Karten,
   Kanban-Board, Diagramme. Farben AUSSCHLIESSLICH ueber die Variablen des
   Designs, damit Hell/Dunkel weiter funktioniert.
   =========================================================================== */

/* ---------- Zusaetzliche Farbvariablen (Planungsfarben) -------------------- */
:root,
[data-theme="light"] {
    --plan-geplant: var(--info);
    --plan-geplant-weich: var(--info-weich);
    --plan-erledigt: var(--ok);
    --plan-erledigt-weich: var(--ok-weich);
    --plan-offen: var(--warn);
    --plan-offen-weich: var(--warn-weich);
    --plan-sperre: repeating-linear-gradient(45deg, var(--flaeche-2), var(--flaeche-2) 5px, var(--flaeche-3) 5px, var(--flaeche-3) 7px);
}

/* ---------- Meldungen / Kleinigkeiten ------------------------------------- */
.meldung-warn {
    background: var(--warn-weich);
    border-color: var(--warn);
    color: var(--text-1);
}

.nav-zaehler {
    margin-left: auto;
    background: var(--akzent);
    color: #fff;
}

.verweis-knopf {
    background: none;
    border: 0;
    padding: 0;
    color: var(--info);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    text-decoration: underline;
}

    .verweis-knopf:hover { color: var(--akzent); }

.abschnitt-titel {
    margin: 26px 0 10px;
    font-size: 18px;
}

.kennzahlen-titel {
    margin: 18px 0 8px;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-2);
}

.avatar {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--info);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}

.anmelde-trenner {
    text-align: center;
    margin: 14px 0 8px;
}

.anmelde-links {
    margin-top: 14px;
    text-align: center;
}

.anmelde-fuss {
    margin-top: 18px;
    text-align: center;
    font-size: 11px;
}

.ticket-fakten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px 24px;
    margin: 0;
}

    .ticket-fakten > div { min-width: 0; }
    .ticket-fakten .feld-breit { grid-column: 1 / -1; }
    .ticket-fakten dt {
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--text-3);
        margin-bottom: 4px;
    }
    .ticket-fakten dd { margin: 0; }
    .ticket-fakten .beschreibung { white-space: pre-wrap; }
    .ticket-fakten.kompakt { grid-template-columns: repeat(3, 1fr); margin: 12px 0; }
    .ticket-fakten.kompakt dd { font-size: 20px; font-weight: 700; }

.deadline { color: var(--info); font-size: 11px; white-space: nowrap; }
.deadline-bald { color: var(--warn); animation: blinken 1.4s ease-in-out infinite; }
.deadline-ueberfaellig { color: var(--akzent); font-weight: 600; animation: blinken 1s ease-in-out infinite; }

@keyframes blinken {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
    .deadline-bald, .deadline-ueberfaellig { animation: none; }
}

.gelesen { opacity: .6; }
.neu { color: var(--akzent); }
.frist-gefaehrdet td { background: var(--warn-weich); }

.dialog-breit { max-width: 860px; max-height: 90vh; overflow-y: auto; }

.ergebnis-liste {
    list-style: none;
    padding: 0;
    margin: 8px 0;
}

    .ergebnis-liste li {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
        border-top: 1px solid var(--rand);
    }

.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }

.ziel-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-top: 1px solid var(--rand);
}

    .ziel-zeile label { flex: 1; display: flex; gap: 8px; align-items: center; }
    .ziel-zeile .eingabe-schmal { width: 80px; }

.abteilungen { display: flex; flex-wrap: wrap; gap: 6px 16px; }
    .abteilungen label { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }

/* ---------- Auslastung ------------------------------------------------------ */
/* Mehrspaltig, sobald Platz ist: 15 Leute sind auf 4K drei Spalten statt einer Latte. */
.auslastung-liste { display: grid; gap: 8px 32px; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }

.auslastung-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .auslastung-zeile .auslastung-name { width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.last-balken {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: var(--flaeche-3);
    overflow: hidden;
    min-width: 60px;
}

.last-fuellung { height: 100%; border-radius: 4px; background: var(--info); transition: width .3s; }
.last-fuellung.last-niedrig { background: var(--ok); }
.last-fuellung.last-mittel { background: var(--info); }
.last-fuellung.last-hoch { background: var(--akzent); }
.last-fuellung.last-keine { background: var(--rand-stark); }

.last-marke {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10px;
    color: var(--text-2);
    white-space: nowrap;
}

    .last-marke i { width: 8px; height: 8px; border-radius: 50%; background: var(--rand-stark); }
    .last-marke.last-niedrig i { background: var(--ok); }
    .last-marke.last-mittel i { background: var(--warn); }
    .last-marke.last-hoch i { background: var(--akzent); }

/* ---------- Wochenplan: Raster aus Kalender, Ansicht, Backlog --------------- */
/* Der Kalender bekommt alles, was uebrig bleibt; Ansicht und Backlog wachsen
   mit der Fensterbreite mit (clamp), statt auf festen Pixeln zu stehen.
   Zusammen mit der Skalierung aus app.css (zoom 1.25 ab 2200px, 1.5 ab 3200px)
   fuellt der Plan damit 16:9, 21:9 und 4K gleichermassen. */
.plan-raster {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(260px, 17vw, 380px) clamp(300px, 21vw, 460px);
    gap: 16px;
    align-items: start;
}

.gruppen-raster {
    display: grid;
    grid-template-columns: clamp(300px, 21vw, 460px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1500px) {
    .plan-raster { grid-template-columns: minmax(0, 1fr) 280px; }
    .plan-raster .plan-backlog { grid-column: 1 / -1; }
}

@media (max-width: 1000px) {
    .plan-raster, .gruppen-raster { grid-template-columns: 1fr; }
    .plan-raster .plan-backlog { grid-column: auto; }
}

.plan-kalender { padding: 0; overflow: hidden; }
    .plan-kalender .tabelle-rahmen { border: 0; border-radius: 0; }
    .plan-kalender .legende { padding: 12px 16px; border-top: 1px solid var(--rand); }

.plan-ansicht .knopf { justify-content: flex-start; text-align: left; }
.plan-ansicht .gruppen-verweis { display: block; text-decoration: none; }
    .plan-ansicht .gruppen-verweis:hover { color: var(--akzent); }

.mitarbeiter-reiter { display: grid; gap: 4px; margin-bottom: 8px; }

.mitarbeiter-reiter-zeile {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
    padding: 2px;
}

    .mitarbeiter-reiter-zeile .knopf { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 7px 10px; }
    .mitarbeiter-reiter-zeile.aktiv { background: var(--akzent-weich); }

.legende-farbe {
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 3px;
    vertical-align: middle;
    margin-right: 6px;
}

.farbe-geplant { background: var(--plan-geplant-weich); border-left: 3px solid var(--plan-geplant); }
.farbe-erledigt { background: var(--plan-erledigt-weich); border-left: 3px solid var(--plan-erledigt); }
.farbe-sperre { background: var(--plan-sperre); }

/* Kalender-Tabelle */
table.kalender { table-layout: fixed; width: 100%; }
    table.kalender th, table.kalender td { vertical-align: top; }
    table.kalender .kalender-zeit { width: 64px; font-size: 11px; color: var(--text-3); white-space: nowrap; }
    table.kalender .kalender-tag { padding: 0; }
    table.kalender .kalender-tag.heute { background: var(--info-weich); box-shadow: inset 0 -2px 0 var(--akzent); }
    table.kalender .kalender-tag.arbeitsfrei { background: var(--warn-weich); }
    table.kalender .kalender-tag.tag-gewaehlt { outline: 2px solid var(--ok); outline-offset: -2px; }

.tag-knopf {
    display: block;
    width: 100%;
    padding: 8px 10px;
    text-align: left;
    background: none;
    border: 0;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    border-radius: 8px;
}

    .tag-knopf:hover { background: var(--ok-weich); }
    .tag-knopf .mono { display: block; font-weight: 400; }

.arbeitsfrei-hinweis { display: block; font-size: 11px; color: var(--warn); font-weight: 600; }

.kalender-zelle {
    position: relative;
    /* Zeilenhoehe folgt der Fensterhoehe: 9 Stundenzeilen + Kopf sollen auf einen
       Bildschirm passen — auf 1080p knapp, auf 4K/Hochkant grosszuegig. */
    min-height: 64px;
    height: clamp(64px, calc((100vh - 300px) / 9), 150px);
    padding: 4px !important;
    border-left: 1px solid var(--rand);
    transition: background .15s;
}

    .kalender-zelle.heute { background: var(--info-weich); }
    .kalender-zelle.ablegbar { cursor: cell; }
    .kalender-zelle.ablegbar:hover { background: var(--akzent-weich); }
    .gruppen-zelle { height: 40px; min-height: 40px; }

.jetzt-linie {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--akzent);
    z-index: 2;
    pointer-events: none;
}

    .jetzt-linie::before {
        content: "";
        position: absolute;
        left: -4px;
        top: -3px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--akzent);
    }

/* Bloecke */
.block {
    border-radius: 8px;
    padding: 5px 7px;
    font-size: 11px;
    line-height: 1.3;
    margin-bottom: 4px;
    box-shadow: var(--schatten);
    cursor: grab;
}

    .block.block-geplant { background: var(--plan-geplant-weich); border-left: 3px solid var(--plan-geplant); }
    .block.block-erledigt { background: var(--plan-erledigt-weich); border-left: 3px solid var(--plan-erledigt); }
    .block.block-sperre { background: var(--plan-sperre); color: var(--text-2); cursor: default; }
    .block.aufgenommen { outline: 2px solid var(--akzent); }

.block-kopf { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.block-zeit { font-size: 10px; opacity: .8; }
.block-titel { font-weight: 600; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-meta { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }

.block-weg {
    background: none;
    border: 0;
    color: var(--text-3);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    border-radius: 4px;
}

    .block-weg:hover { background: var(--akzent-weich); color: var(--akzent); }

.block-dauer {
    display: flex;
    gap: 4px;
    align-items: center;
    margin-top: 4px;
    font-size: 10px;
}

    .block-dauer button {
        background: var(--flaeche-1);
        border: 1px solid var(--rand-stark);
        border-radius: 5px;
        font-size: 10px;
        padding: 1px 5px;
        cursor: pointer;
        color: var(--text-2);
    }

        .block-dauer button:hover:not(:disabled) { color: var(--akzent); border-color: var(--akzent); }
        .block-dauer button:disabled { opacity: .4; cursor: default; }

/* Gruppenplan-Kopf */
.gruppen-kopf { text-align: left; }
.gruppen-name { font-weight: 700; margin-bottom: 4px; }
.gruppen-kalender .last-balken { margin: 4px 0; }

/* ---------- Backlog ---------------------------------------------------------- */
.plan-backlog { position: sticky; top: 16px; }

.backlog-liste {
    display: grid;
    gap: 8px;
    max-height: calc(100vh - 340px);
    overflow-y: auto;
    padding-right: 4px;
}

.backlog-karte {
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 10px;
    font-size: 12px;
    background: var(--flaeche-1);
    cursor: grab;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}

    .backlog-karte:hover { transform: translateY(-1px); border-color: var(--rand-stark); box-shadow: var(--schatten); }
    .backlog-karte.aufgenommen { outline: 2px solid var(--akzent); }
    .backlog-karte.karte-bald { border-color: var(--warn); }
    .backlog-karte.karte-ueberfaellig { border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent-weich); }

.backlog-titel { font-weight: 600; color: var(--text-1); line-height: 1.35; }
.backlog-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 11px; }
.backlog-bearbeiter { display: flex; gap: 4px; align-items: center; margin-top: 6px; font-size: 11px; color: var(--text-3); }
    .backlog-bearbeiter .nav-icon { width: 12px; height: 12px; }
.backlog-hinweis { margin-top: 6px; padding: 3px 6px; border-radius: 6px; background: var(--warn-weich); color: var(--text-1); font-size: 11px; }
.backlog-aktionen { display: flex; gap: 10px; align-items: center; margin-top: 8px; font-size: 12px; }
    .backlog-aktionen a { color: var(--info); }
.backlog-auswahl { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }

.facetten { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; align-items: center; }

.facette {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid var(--rand);
    background: var(--flaeche-1);
    color: var(--text-2);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

    .facette.aktiv { border-color: var(--akzent); color: var(--akzent); background: var(--akzent-weich); }

.facette-zahl {
    background: var(--flaeche-2);
    border-radius: 999px;
    padding: 0 6px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.ansichten-karte { margin-bottom: 16px; }
.ansichten-liste { list-style: none; margin: 8px 0 0; padding: 0; }
    .ansichten-liste li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--rand); }
    .ansichten-liste li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Bildschirmbreite ----------------------------------------------- */
/* Das Styleguide-Layout deckelt den Inhalt bei 1680px (Formulare, Texte). Fuer
   Wochenplan und Zuordnung ist Breite Arbeitsflaeche: volle Fensterbreite nutzen.
   Textlastige Bloecke behalten ihre eigenen ch-Grenzen aus app.css. */
.inhalt { max-width: none; }

/* Keine automatische Zoomstufe (app.css: 125 % ab 2200px, 150 % ab 3200px).
   Sie springt beim Browser-Zoom (Strg+Mausrad) an den Schwellen zurueck — bei
   2560px z. B. von 1,25 auf 1,0, sobald der Browser auf 120 % steht. Im Leitstand
   ist der Browser-Zoom die einzige Skalierung; das Layout selbst ist fluid
   (vw/clamp/auto-fill) und folgt jeder Zoomstufe stufenlos. */
:root { --skalierung: 1 !important; }

/* Tabellenlinien: Mit border-collapse rundet Chrome bei Skalierung (CSS-zoom,
   Windows 125 %/150 %, Browser-Zoom) die zusammengelegten Linien je Zelle
   unterschiedlich — die Zeilen sehen "versetzt" aus. Getrennte Zellraender ohne
   Abstand sehen identisch aus, werden aber je Zelle sauber gezeichnet. */
.gitter { border-collapse: separate; border-spacing: 0; }
    .gitter thead th { border-bottom: 1px solid var(--rand); }
    .gitter th + th, .gitter td + td { border-left: 0; }

/* ---------- Dienstkonten (Benutzerverwaltung) ------------------------------ */
.dienstkonten { margin-top: 12px; }
    .dienstkonten summary { cursor: pointer; }
.dienstkonten-liste { list-style: none; margin: 8px 0; padding: 0; }
    .dienstkonten-liste li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 6px 0; border-top: 1px solid var(--rand); }

/* ---------- Kanban (Ticket-Zuordnung) -------------------------------------- */
/* Links die offenen Tickets (bleibt beim Scrollen stehen), rechts das Team als
   umbrechendes Raster — kein horizontales Scrollband, egal wie viele Mitarbeiter. */
.kanban {
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

    .kanban.kanban-nur-offen { grid-template-columns: minmax(0, 1fr); }
    .kanban.kanban-nur-offen .kanban-unzugewiesen { position: static; max-height: none; }

.kanban-unzugewiesen {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.kanban-team {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 14vw, 320px), 1fr));
    gap: 12px;
    align-items: start;
}

.kanban-spalte {
    background: var(--flaeche-2);
    border-radius: 12px;
    padding: 10px;
    min-height: 120px;
    display: grid;
    gap: 8px;
    align-content: start;
    min-width: 0;
}

    .kanban-spalte.leer { min-height: 0; }
    .kanban-spalte.leer .kanban-kopf { opacity: .75; }

.kanban-leer { margin: 0; padding: 10px; border: 1px dashed var(--rand); border-radius: 8px; text-align: center; font-size: 12px; }

@media (max-width: 900px) {
    .kanban { grid-template-columns: minmax(0, 1fr); }
    .kanban-unzugewiesen { position: static; max-height: none; }
}

    .kanban-spalte.ablegbar { outline: 2px dashed var(--rand-stark); }
    .kanban-spalte.ablegbar:hover { outline-color: var(--akzent); }

.kanban-kopf { display: flex; align-items: center; gap: 8px; }
    .kanban-kopf h3 { margin: 0; flex: 1; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kanban-karte {
    background: var(--flaeche-1);
    border: 1px solid var(--rand);
    border-radius: 10px;
    padding: 8px 10px;
    cursor: grab;
    box-shadow: var(--schatten);
}

    .kanban-karte.ausgewaehlt { border-color: var(--akzent); }

.kanban-karte-kopf { display: flex; gap: 8px; align-items: center; }
    .kanban-karte-kopf a { flex: 1; font-weight: 600; color: var(--text-1); text-decoration: none; }
    .kanban-karte-kopf a:hover { color: var(--akzent); }
.kanban-karte-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 11px; }

.status-punkt { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--plan-offen); }
.status-punkt.status-in_bearbeitung { background: var(--plan-geplant); }
.status-punkt.status-erledigt { background: var(--plan-erledigt); }

.sammel-leiste { position: sticky; bottom: 12px; box-shadow: var(--schatten-tief); }

/* ---------- Diagramme ------------------------------------------------------- */
.statistik-raster { margin-top: 16px; }

.diagramm { width: 100%; height: auto; display: block; }
.diagramm-linie { stroke: var(--rand); stroke-width: 1; }
.diagramm-achse { fill: var(--text-3); font-size: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.diagramm-balken { fill: var(--info); opacity: .85; }
    .diagramm-balken:hover { opacity: 1; }

.ring-wrap { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.ring { width: 160px; height: 160px; flex-shrink: 0; }
.ring-hintergrund { fill: none; stroke: var(--flaeche-3); stroke-width: 14; }
.ring-segment { fill: none; stroke-width: 14; }
.ring-offen { stroke: var(--plan-offen); }
.ring-bearbeitung { stroke: var(--plan-geplant); }
.ring-erledigt { stroke: var(--plan-erledigt); }
.ring-zahl { fill: var(--text-1); font-size: 22px; font-weight: 700; }
.ring-legende { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: 13px; }
    .ring-legende li { display: flex; gap: 8px; align-items: center; }
.ring-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
    .ring-punkt.ring-offen { background: var(--plan-offen); }
    .ring-punkt.ring-bearbeitung { background: var(--plan-geplant); }
    .ring-punkt.ring-erledigt { background: var(--plan-erledigt); }

/* ---------- Druck ------------------------------------------------------------ */
@media print {
    .seitenleiste, .plan-ansicht, .plan-backlog, .kopf-rechts, .legende, .block-weg, .block-dauer, .schleier { display: none !important; }
    .plan-raster { grid-template-columns: 1fr; }
    .inhalt { padding: 0; }
    .karte { box-shadow: none; }
}

/* ---------- Anmeldung: lokaler Notfallzugang ------------------------------- */
.notfall-zugang { margin-top: 18px; border-top: 1px solid var(--rand); padding-top: 10px; }
    .notfall-zugang summary { cursor: pointer; font-size: 12px; }
    .notfall-zugang form { margin-top: 10px; }