/*
 * Eigene Anpassungen zusätzlich zu Bootstrap 5.3.8 (public/assets/).
 * Bevorzugt Bootstrap-Klassen verwenden; hier nur, was Bootstrap nicht abdeckt.
 */

/* Klickbare Tabellenzeilen (siehe public/js/app.js) */
tr[data-href] {
    cursor: pointer;
}
/* Per Tastatur angesprungene Zeile sichtbar machen (Tab, dann Enter öffnet) */
tr[data-href]:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* Zahlenspalten (Zählerstände, Datum): gleich breite Ziffern, damit sie sauber untereinander stehen */
.table,
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Gewählte Darstellung im Umschalter mit Haken kennzeichnen */
[data-farbschema-wahl].active::after {
    content: "\F272"; /* bi-check2 */
    font-family: "bootstrap-icons";
    float: right;
    margin-left: 1rem;
}

/* Unterzähler in der Anschlussliste (Schachtseite) je Ebene einrücken */
.anschluss-tiefe-1 { padding-left: 2.25rem; }
.anschluss-tiefe-2 { padding-left: 3.5rem; }
.anschluss-tiefe-3 { padding-left: 4.75rem; }
.anschluss-tiefe-4 { padding-left: 6rem; }

/* Zählerbaum (Übersichten, seit 0.3.10 Tabelle): Einzug in der Anschluss-Spalte; muss die Abstände von .table überstimmen.
   Auf dem Handy flacher einrücken, damit neben Weg und Parzelle Platz für Name und Abzeichen bleibt */
.table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-1 { padding-left: 1.5rem; }
.table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-2 { padding-left: 2.75rem; }
.table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-3 { padding-left: 4rem; }
.table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-4 { padding-left: 5.25rem; }
@media (max-width: 575.98px) {
    .table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-1 { padding-left: .75rem; }
    .table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-2 { padding-left: 1.25rem; }
    .table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-3 { padding-left: 1.75rem; }
    .table > tbody > tr > .zaehlerbaum-eintrag.anschluss-tiefe-4 { padding-left: 2.25rem; }
}

/* Absperrhahn im Zählerbaum (seit 0.3.9): zarter roter Rand links, damit er sich von den Zählern abhebt */
.table > tbody > tr.zaehlerbaum-hahn > :first-child {
    box-shadow: inset 3px 0 0 var(--bs-danger), inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}

/* Bereichs-Tabs unter dem blauen Balken (seit 0.3.9, ab md): der aktive Tab geht nahtlos in den Seitenhintergrund über */
.bereichs-tabs {
    padding-top: .5rem;
}
.bereichs-tabs .nav-tabs {
    --bs-nav-tabs-link-active-bg: var(--bs-tertiary-bg);
    --bs-nav-tabs-link-active-border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-tertiary-bg);
    margin-bottom: -1px;
}

/*
 * Lageplan (seit 0.3.11): bleibt auch im Dark Mode hell wie ein gedruckter Plan (data-bs-theme="light" am Bereich), weil
 * die Datei feste Farben und schwarze Beschriftungen mitbringt. Auf dem Handy eigener Scrollbereich mit Mindestbreite,
 * sonst wären die Nummern nur wenige Pixel hoch.
 */
.lageplan,
.lageplan-farbe {
    --lp-a: #0b5ed7;
    --lp-b: #fdba74;
    --lp-offen: #d8b4fe;
    --lp-ohne-anschluss: #f1aeb5;
    --lp-ohne-wasser: #ced4da;
    --lp-fehlt-1: #fff3cd;
    --lp-fehlt-2: #ffda6a;
    --lp-fehlt-3: #fd9843;
    --lp-vollstaendig: #a3cfbb;
    --lp-abgelaufen: #ea868f;
    --lp-laeuft-ab: #ffda6a;
    --lp-unbekannt: #ced4da;
    --lp-gueltig: #a3cfbb;
    --lp-kein-zaehler: #f8f9fa;
    --lp-tausch-verein: #0b5ed7;
    --lp-tausch-paechter: #fdba74;
    --lp-tausch-hww: #d8b4fe;
    --lp-tausch-offen: #ced4da;
    --lp-hahn-standort: #0b5ed7;
    --lp-gesperrt: #fd9843;
    --lp-neutral: #f8f9fa;
}
.lageplan {
    max-height: 75vh;
    overflow: auto;
    background: #fff;
}
.lageplan:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: 2px;
}
.lageplan svg {
    display: block;
    width: 100%;
    min-width: 1100px;
    height: auto;
}
@media (min-width: 992px) {
    .lageplan {
        max-height: none;
        overflow: visible;
    }
    .lageplan svg {
        min-width: 0;
    }
    .lageplan-seite {
        position: sticky;
        top: 1rem;
    }
}
.lageplan .karte-nummern {
    pointer-events: none;
}
.lageplan .karte-hintergrund {
    pointer-events: none;
}
.lp-flaeche {
    fill: transparent;
    stroke: var(--bs-border-color);
    stroke-width: 1.5;
}
.lageplan .lp-schrift-hell {
    fill: #fff;
    font-weight: 700;
}
.lageplan a:hover .lp-flaeche,
.lageplan a:focus-visible .lp-flaeche {
    stroke: #000;
    stroke-width: 6;
}
.lageplan a:focus-visible {
    outline: none;
}
.lageplan-farbe {
    flex: none;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .25rem;
}
.lp-a { fill: var(--lp-a); background: var(--lp-a); }
.lp-b { fill: var(--lp-b); background: var(--lp-b); }
.lp-offen { fill: var(--lp-offen); background: var(--lp-offen); }
.lp-ohne-anschluss { fill: var(--lp-ohne-anschluss); background: var(--lp-ohne-anschluss); }
.lp-ohne-wasser { fill: var(--lp-ohne-wasser); background: var(--lp-ohne-wasser); }
.lp-fehlt-1 { fill: var(--lp-fehlt-1); background: var(--lp-fehlt-1); }
.lp-fehlt-2 { fill: var(--lp-fehlt-2); background: var(--lp-fehlt-2); }
.lp-fehlt-3 { fill: var(--lp-fehlt-3); background: var(--lp-fehlt-3); }
.lp-vollstaendig { fill: var(--lp-vollstaendig); background: var(--lp-vollstaendig); }
.lp-abgelaufen { fill: var(--lp-abgelaufen); background: var(--lp-abgelaufen); }
.lp-laeuft-ab { fill: var(--lp-laeuft-ab); background: var(--lp-laeuft-ab); }
.lp-unbekannt { fill: var(--lp-unbekannt); background: var(--lp-unbekannt); }
.lp-gueltig { fill: var(--lp-gueltig); background: var(--lp-gueltig); }
.lp-kein-zaehler { fill: var(--lp-kein-zaehler); background: var(--lp-kein-zaehler); }
.lp-tausch-verein { fill: var(--lp-tausch-verein); background: var(--lp-tausch-verein); }
.lp-tausch-paechter { fill: var(--lp-tausch-paechter); background: var(--lp-tausch-paechter); }
.lp-tausch-hww { fill: var(--lp-tausch-hww); background: var(--lp-tausch-hww); }
.lp-tausch-offen { fill: var(--lp-tausch-offen); background: var(--lp-tausch-offen); }
.lp-hahn-standort { fill: var(--lp-hahn-standort); background: var(--lp-hahn-standort); }
.lp-neutral { fill: var(--lp-neutral); background: var(--lp-neutral); }
.lp-gesperrt { fill: var(--lp-gesperrt); background: var(--lp-gesperrt); }

/*
 * Ausdruck des Lageplans (seit 0.3.13): die Karte füllt die A4-Seite, Titel, Legende und Hinweise liegen als Kasten links
 * oben auf den Nachbargrundstücken (dort ist keine Parzelle der Kolonie). Auch aus dem Dark Mode heraus hell.
 */
@media print {
    @page {
        size: A4 portrait;
        margin: 10mm;
    }
    html:has(.lageplan),
    body:has(.lageplan) {
        --bs-body-bg: #fff;
        --bs-body-color: #212529;
        --bs-body-color-rgb: 33, 37, 41;
        --bs-secondary-color: rgba(33, 37, 41, .75);
        --bs-secondary-color-rgb: 33, 37, 41;
        --bs-border-color: #dee2e6;
        --bs-emphasis-color: #000;
        --bs-emphasis-color-rgb: 0, 0, 0;
        --bs-tertiary-bg: #f8f9fa;
        --bs-heading-color: inherit;
        color-scheme: light;
        color: #212529;
        background: #fff !important;
    }
    body:has(.lageplan) .navbar,
    body:has(.lageplan) .bereichs-tabs,
    body:has(.lageplan) footer,
    #debug-icon,
    #debug-bar {
        display: none !important;
    }
    body:has(.lageplan) main {
        max-width: none;
        padding: 0 !important;
    }
    .lageplan,
    .lageplan-farbe {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
    .row:has(> div > .lageplan-seite) {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        position: relative;
        margin: 0;
    }
    .lageplan-seite {
        position: absolute;
        top: 4mm;
        left: 4mm;
        z-index: 1;
        width: 88mm;
        padding: 2.5mm;
        border: 1px solid #888;
        background: #fff;
        font-size: 8pt;
    }
    .lageplan-seite a {
        color: #212529 !important;
    }
    .lageplan-seite p {
        margin-bottom: 1.5mm !important;
        font-size: 8pt;
    }
    .lageplan-seite .small {
        font-size: 8pt;
    }
    .lageplan-legende {
        margin-bottom: 1.5mm !important;
    }
    .lageplan-legende li {
        padding: 0 !important;
    }
    .lageplan-seite .lageplan-farbe {
        width: 3mm;
        height: 3mm;
    }
    .lageplan {
        max-height: none;
        overflow: visible;
        border: 0 !important;
        box-shadow: none !important;
    }
    .lageplan svg {
        width: 100%;
        min-width: 0;
        height: auto;
    }
}

/*
 * Mobile Eingabe „Ablesen“ (seit 0.4.6): Zeilen als große Tippflächen mit farbigem Streifen links (offen blau,
 * nicht abgelesen rot, erledigt grün); erledigte und nicht abgelesene sind zurückgenommen und stehen unten.
 */
.ablesen-wege {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    gap: .5rem;
}
.ablesen-weg {
    min-height: 3.5rem;
    flex-direction: column;
    justify-content: center;
}
/* Zurück zur Auswahl: größere Tippfläche */
.ablesen-zurueck {
    display: inline-block;
    padding: .6rem 0;
}
.ablesen-weg-zahl {
    display: block;
}
.ablesen-weg-zahl[hidden] {
    display: none;
}
.ablesen-auswahl {
    min-height: 3.5rem;
    cursor: pointer;
}
.ablesen-liste {
    --ablesen-streifen: var(--bs-primary);
    border-top: 1px solid var(--bs-border-color);
}
.ablesen-zeile {
    border-bottom: 1px solid var(--bs-border-color);
    border-left: 5px solid var(--ablesen-streifen);
    background: var(--bs-body-bg);
}
.ablesen-zeile[data-status="grund"] {
    --ablesen-streifen: var(--bs-danger);
    background: var(--bs-tertiary-bg);
}
.ablesen-zeile[data-status="erledigt"] {
    --ablesen-streifen: var(--bs-success);
    background: var(--bs-tertiary-bg);
}
.ablesen-kopf {
    display: block;
    width: 100%;
    min-height: 3.5rem;
    padding: .65rem .75rem .65rem .85rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
}
.ablesen-kopf:focus-visible {
    outline: 3px solid var(--bs-primary);
    outline-offset: -3px;
}
.ablesen-kopf[aria-expanded="true"] {
    background: var(--bs-primary-bg-subtle);
}
.ablesen-kopf-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .5rem;
}
.ablesen-name {
    font-weight: 600;
    font-size: 1.1rem;
}
.ablesen-info {
    display: block;
    font-size: .875rem;
    color: var(--bs-secondary-color);
}
/* Nach Schacht sortiert: neuer Schacht mit Abstand */
.ablesen-zeile.ablesen-gruppe-neu {
    margin-top: .6rem;
    border-top: 1px solid var(--bs-border-color);
}
/* Zurückgenommen: Name und Angaben grau, Abzeichen bleiben farbig */
.ablesen-zeile[data-status="grund"] .ablesen-name,
.ablesen-zeile[data-status="erledigt"] .ablesen-name {
    color: var(--bs-secondary-color);
    font-weight: 500;
}
/* Nach dem Speichern als Nächstes vorgemerkt (öffnet sich erst beim Antippen) */
.ablesen-zeile.ablesen-naechster .ablesen-kopf {
    background: var(--bs-warning-bg-subtle);
}
.ablesen-zeile.ablesen-naechster .ablesen-name::before {
    content: "\F135"; /* bi-arrow-right-circle */
    font-family: "bootstrap-icons";
    font-weight: normal;
    margin-right: .35rem;
    color: var(--bs-warning-text-emphasis);
}
.ablesen-block {
    padding: .25rem .75rem 1rem .85rem;
    border-top: 1px dashed var(--bs-border-color);
}
.ablesen-block form {
    padding-top: .75rem;
}
.ablesen-stand {
    font-size: 1.6rem;
    font-weight: 600;
}
.ablesen-vorher {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 2.2;
}
/* Schachtfrage im Block (seit 0.4.11): abgesetzt, weil sie für alle Zähler im Schacht gilt */
.ablesen-schacht {
    padding: .75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background: var(--bs-tertiary-bg);
}
.ablesen-schacht .ablesen-wahl {
    min-width: 4.5rem;
    justify-content: center;
}
/* Zählertausch (seit 0.4.13): Schalter mit großem Tippziel, Felder des vorgefundenen Zählers als eigener Kasten */
.ablesen-tausch-schalter {
    min-height: 2.75rem;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 0;
}
.ablesen-tausch-schalter .form-check-input {
    width: 3rem;
    height: 1.5rem;
    margin: 0;
    flex-shrink: 0;
}
.ablesen-tausch {
    padding: .75rem;
    border: 1px solid var(--bs-primary-border-subtle);
    border-radius: var(--bs-border-radius);
    background: var(--bs-primary-bg-subtle);
}
.ablesen-tausch-frage {
    padding: .5rem .75rem;
    border-left: 3px solid var(--bs-primary);
    background: var(--bs-primary-bg-subtle);
    border-radius: var(--bs-border-radius-sm);
}
.ablesen-tausch-frage .btn {
    min-height: 2.75rem;
}
.ablesen-hinweis {
    padding: .5rem .75rem;
    border-left: 3px solid var(--bs-info);
    background: var(--bs-info-bg-subtle);
    border-radius: var(--bs-border-radius-sm);
}
.ablesen-wahl {
    /* Text in Schriftfarbe statt Grau (Kontrast auch im Dunkelmodus), gewählt kräftig blau */
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-hover-color: var(--bs-body-color);
    --bs-btn-hover-bg: var(--bs-secondary-bg);
    --bs-btn-border-color: var(--bs-border-color);
    --bs-btn-hover-border-color: var(--bs-secondary-color);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
}
.ablesen-knoepfe {
    display: flex;
    gap: .5rem;
    margin-top: 1.25rem;
}
.ablesen-knoepfe .btn-primary {
    flex: 1;
}
.ablesen-meldung {
    margin-top: .75rem;
}
@media (min-width: 768px) {
    .ablesen-liste,
    .ablesen-start,
    .ablesen-stand-leiste,
    .ablesen-sortierung {
        max-width: 48rem;
    }
}
/* Meldung nach dem Speichern: unten am Bildschirm, über der Tastatur-Kante */
.ablesen-ansage {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    z-index: 1080;
    width: min(32rem, calc(100% - 2rem));
    transform: translateX(-50%);
}
.ablesen-ansage:empty {
    display: none;
}
.ablesen-ansage .alert {
    margin: 0;
    box-shadow: var(--bs-box-shadow);
}

/* Abrechnung (seit 0.5.3): Tabellenkopf bleibt beim Scrollen sichtbar (darum ohne .table-responsive; die Spalten passen je Breite),
   jede Zeile gleich hoch (kein Umbruch im Rumpf, Hinweise gekürzt mit vollem Text im title) */
.abrechnung-tabelle thead {
    position: sticky;
    top: 0;
    z-index: 2;
}
.abrechnung-tabelle thead th {
    box-shadow: inset 0 -2px 0 var(--bs-border-color);
}
.abrechnung-tabelle tbody td {
    white-space: nowrap;
}
.abrechnung-kurz {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.abrechnung-tabelle .abrechnung-hinweise {
    max-width: 16rem;
}
.abrechnung-tabelle .abrechnung-zeile2 {
    max-width: calc(100vw - 9rem);
}
.abrechnung-tabelle sup {
    line-height: 0;
}
.abrechnung-tabelle tbody td > span.small {
    line-height: 1;
}
.abrechnung-tabelle tbody .badge {
    vertical-align: baseline;
}