/* Projekteigene Ergaenzungen zum CSS-Framework.
   Bewusst schlank - die Oberflaeche wird ueberwiegend auf einem Tablet bedient. */

/* Bedienelemente der Begehung gross genug fuer Handschuhe/Winter. */
.touch-target {
    min-height: 3rem;
}

/* Zustands-Kennzeichnung der Bereichspruefung. */
.state-ok {
    color: #0a3622;
    background-color: #d1e7dd;
}

.state-not-ok {
    color: #58151c;
    background-color: #f8d7da;
}

.state-not-checked {
    color: #664d03;
    background-color: #fff3cd;
}

/* Dauerhinweis: sichtbar abgesetzt vom aktuellen Zustand (Konzept 5). */
.standing-issue {
    border-left: 4px solid #6c757d;
    background: #f8f9fa;
    padding: .5rem .75rem;
    font-size: .9rem;
}

/* ---------------------------------------------------------------------------
   Einheitliche Stammdaten-Listen
   ---------------------------------------------------------------------------
   Alle Pflegelisten (Objekte, Bereiche, Reinigungsvarianten, Textbausteine)
   folgen demselben Aufbau: links die Eingabefelder, rechts die Aktionen in
   fester Reihenfolge - Reihenfolge, Speichern, Aktiv, Bearbeiten, Löschen.

   Vorher hatte jede Liste ihr eigenes Raster; Felder standen unterschiedlich
   hoch und die Knöpfe mal links, mal rechts. */

.data-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.data-row:last-child {
    border-bottom: 0;
}

/* Die Felder nehmen den verfügbaren Platz, die Aktionen bleiben rechts. */
.data-row-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    flex: 1 1 20rem;
    min-width: 0;
}

/* Damit alle Textfelder einer Liste gleich hoch sitzen, auch wenn darunter
   ein Hinweistext steht. */
.data-row-fields .form-control,
.data-row-fields .form-select {
    height: calc(1.5em + .5rem + 2px);
}

/* [2026-08] Unterhalb der Tablet-Breite darf die Feldergruppe schrumpfen. Mit der
   Basis von 20rem sprengte sie die Zeile, sodass Felder und Symbole untereinander
   rutschten - gewollt ist eine Zeile: Kürzel, Name, Symbole.

   Die Grenze liegt bei 768px und nicht bei 576px: Zwischen beiden gilt der
   Bootstrap-Container mit 540px Breite, in der Zeile bleiben davon rund 508px - zu
   wenig für Pfeile, Feldergruppe und Symbole nebeneinander. Erst ab 768px ist der
   Container 720px breit und der Platz reicht ohne Nachhilfe. */
@media (max-width: 767.98px) {
    /*
     * [2026-08] Wie bei den Tabellen (.table-stack): Die Felder stehen oben über die
     * volle Breite, die Schaltflächen darunter. Der Versuch, alles in eine Zeile zu
     * zwingen, ließ das Bezeichnungsfeld auf 85 Pixel schrumpfen - darin ist
     * "V1A – beide Häuser, Komplettreinigung" nicht mehr zu lesen, und genau darum
     * geht es beim Bearbeiten.
     */
    .data-row-fields {
        flex: 1 1 100%;
        order: -1;
    }

    /*
     * Die Symbole stehen am ENDE des Blocks, hinter den Zusatzangaben - genau wie in
     * den Tabellen (.table-stack). Ohne diese Reihenfolge landeten sie zwischen den
     * Eingabefeldern und den Bereichs-Ankreuzfeldern und zerschnitten den Block in
     * der Mitte.
     */
    .data-row-meta {
        order: 0;
    }

    .data-row-actions {
        order: 1;
        margin-left: 0;
        margin-top: .25rem;
    }

    /* Das Kürzel bleibt schmal, die Bezeichnung nimmt den Rest der Zeile.
       "width: auto" hebt die 100%-Breite des Frameworks auf - sonst stünde jedes
       Feld allein auf einer Zeile. */
    .data-row-fields > .form-control:not(.data-row-code),
    .data-row-fields > .form-select {
        flex: 1 1 8rem;
        width: auto;
        min-width: 0;
    }
}

.data-row-actions {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
    white-space: nowrap;
}

/* Jede Aktion ist ein eigenes Formular - ohne diese Regel bräche das Layout,
   weil Formulare Blockelemente sind. */
.data-row-actions form {
    margin: 0;
    display: inline-flex;
}

/* Gleich breite Knöpfe: Die Symbole sollen in einer Spalte stehen. */
.data-row-actions .btn {
    min-width: 2.25rem;
}

/* Zusatzangaben unter der Zeile, etwa "24 Objekte, davon 24 aktiv". */
.data-row-meta {
    flex: 1 1 100%;
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* Kürzel-Spalte: so schmal wie der Inhalt, nicht breiter. */
.data-row-code {
    flex: 0 0 auto;
    min-width: 3.5rem;
    font-family: var(--bs-font-monospace);
    font-size: .8125rem;
    color: var(--bs-secondary-color);
}

/* [2026-08] Seit das Kürzel ein Eingabefeld ist, greift die Regel des Frameworks
   ".form-control { width: 100% }" - das Feld schob damit alles Weitere in die
   nächste Zeile. Als Text (span) stellte sich die Frage nicht. */
input.data-row-code {
    width: auto;
    flex: 0 0 5rem;
    color: inherit;
}

/* [2026-08] Lange Zeichenketten ohne Leerzeichen dürfen umbrechen.

   Aufgefallen an den Systemeinstellungen: Schlägt "Verbindung prüfen" fehl, steht
   in der Meldung eine API-Adresse samt Parametern - ein einziges "Wort" von 100
   Zeichen. Es ragte aus seinem Kasten heraus und dehnte damit die ganze Seite, die
   sich seitwärts schieben ließ. Sichtbar war das nicht als überstehender Text,
   sondern als Seitenhintergrund, der breiter war als der Bildschirm.

   "anywhere" statt "break-word": Nur damit fließt die Mindestbreite in die
   Berechnung der umgebenden Flex- und Grid-Container ein - sonst blähen dieselben
   Zeichenketten weiterhin die Tabellenspalte auf, in der sie stehen.

   [2026-08] "td" wieder herausgenommen. Global auf jede Tabellenzelle angewandt,
   traf dieselbe Regel nicht nur einzelne lange API-Antworten, sondern jeden ganz
   normalen, kurzen Namen in einer schmal gewordenen Spalte - "Familientreffen"
   wurde in der Belegungs-Historie zu "Familientr / effen", sobald die Spalte eng
   genug war (z. B. genau an der Grenze zu .table-stack). Derselbe Effekt, den der
   Kommentar bei ".table th" weiter unten für Spaltenüberschriften schon beschreibt
   - dort war die Ausnahme schon gesetzt, bei normalen Zellen fehlte sie noch.
   Das eigentliche Sicherheitsnetz gegen einen echten Übervoll-Zellinhalt ist jetzt
   ".table-responsive" (Bootstrap) um jede betroffene Tabelle: Ein einzelnes langes
   "Wort" erzeugt dann einen Rollbalken auf der Tabelle, statt mitten im Wort
   umzubrechen oder die Seite seitwärts zu schieben. */
.alert,
code,
.data-row-meta {
    overflow-wrap: anywhere;
}

/* Nicht für Spaltenüberschriften.

   [2026-08] Sie standen anfangs mit in der Liste darüber. Überschriften sind aber
   immer kurze, redaktionelle Wörter - dort gibt es nichts umzubrechen, wohl aber
   etwas zu verlieren: "anywhere" senkt die Mindestbreite der Spalte auf ein Zeichen,
   also gab die Kopfzeile klaglos nach, sobald eine Nachbarspalte Platz wollte. Auf
   breiten Bildschirmen stand dann "Überga / ben" oder "Herkun / ft" - mitten im Wort,
   bei reichlich freiem Platz daneben.

   Zusätzlich "nowrap", weil "normal" allein nur den Wortbruch verhindert hätte:
   Zweiwortige Überschriften wie "Zuletzt geändert" standen weiterhin zweizeilig über
   einer einzeiligen Tabelle. Die Spalte ist damit mindestens so breit wie ihre
   Überschrift - bei durchweg kurzen Überschriften ist das ein paar Pixel wert.
   Auf schmalen Geräten greift das nicht: Dort ist die Kopfzeile ausgeblendet und
   jede Zeile ein Block (siehe .table-stack weiter unten). */
.table th {
    overflow-wrap: normal;
    white-space: nowrap;
}

/* [2026-08] Dieselbe Ausnahme für gewöhnliche Zellen, aus demselben Grund wie oben
   bei ".table th" - nur ohne "white-space: nowrap": Zellinhalte sind oft mehrere
   Wörter ("beide Häuser, Komplettreinigung") und sollen an Leerzeichen weiter
   umbrechen duerfen, nur eben nicht MITTEN in einem einzelnen Wort.

   Wichtig: Ohne diese Regel erbt eine Zelle "overflow-wrap: break-word" vom
   Framework - und das erlaubt denselben Wortbruch wie "anywhere" (der Unterschied
   zwischen beiden betrifft nur die Mindestbreiten-Berechnung umliegender Flex-/
   Grid-Container, nicht das Umbruchverhalten selbst).

   Allein haette diese Regel ein zu schmal geratenes Wort nur vom Wortbruch in einen
   horizontalen Rollbalken verwandelt - beides unerwuenscht. Die eigentliche Abhilfe
   ist die auf 991.98px angehobene .table-stack-Grenze weiter unten: Dort, wo eine
   echte Tabelle mit mehreren Spalten eng werden koennte, greift jetzt der Blockmodus,
   und jeder Wert bekommt die volle Zeilenbreite. ".table-responsive" um jede
   betroffene Tabelle bleibt nur als Auffangnetz fuer den unwahrscheinlichen Rest. */
.table td {
    overflow-wrap: normal;
}

/* Nicht für Bedienelemente: "overflow-wrap" wird vererbt, und "anywhere" senkt die
   Mindestbreite eines Elements auf ein einzelnes Zeichen. In einer Tabellenzelle
   führte das dazu, dass die Spalte den Knopf schmaler machte als sein Text - aus
   "Öffnen" wurde ein zweizeiliges "Öff / nen". Umbrüche an Leerzeichen bleiben
   erlaubt ("Vor Ort anlegen" darf auf dem Telefon weiterhin umbrechen). */
.btn,
.badge {
    overflow-wrap: normal;
}

/* --------------------------------------------------------------------------
   Tabellen auf schmalen Geräten: aus jeder Zeile wird ein Block

   [2026-08] Einheitlich für ALLE Tabellen im Portal. Davor gab es drei Wege
   nebeneinander - Querlauf, Ausblenden einzelner Spalten und eine zweite,
   getrennt gepflegte Kartenliste. Alle drei hatten Nachteile: Der Querlauf
   versteckte ausgerechnet die Knöpfe am rechten Rand, das Ausblenden nahm
   Angaben ganz weg, und die doppelte Liste musste bei jeder Änderung zweimal
   gepflegt werden - eine davon wurde regelmäßig vergessen.

   Hier bleibt es EINE Tabelle im Markup. Unterhalb der Grenze verliert sie ihr
   Spaltenraster: Der Kopf verschwindet, jede Zeile wird zu einem Block, und
   jeder Wert trägt seine Spaltenüberschrift als Beschriftung neben sich
   (data-label). Nichts entfällt, nichts wird zu schmal, und Sortierung wie
   Filter arbeiten unverändert auf denselben Zeilen.

   Zellen ohne data-label - der Name vorn, die Schaltflächen hinten - stehen
   ohne Beschriftung über die volle Breite.

   [2026-08] Grenze von 767.98px auf 991.98px angehoben (wie navbar-expand-lg
   weiter unten) - vorher blieb ein Tablet im Hochformat (768px, die "Tablet"-
   Voreinstellung dieses Projekts) im Modus mit echten Spalten, und dort mussten
   sich oft sechs, sieben Spalten dieselbe Breite teilen. Die Namensspalte wurde
   dabei schmaler als ein einzelnes langes Wort wie "Familientreffen" - ohne
   Leerzeichen zum Umbrechen blieb dann nur ein Bruch mitten im Wort oder ein
   horizontaler Rollbalken, beides unerwuenscht. Im Blockmodus gibt es diese
   Enge nicht: jeder Wert bekommt die volle Zeilenbreite. -------------------- */
@media (max-width: 991.98px) {
    .table-stack thead {
        display: none;
    }

    .table-stack,
    .table-stack tbody,
    .table-stack tbody td {
        display: block;
        width: auto;
    }

    /*
     * Der Block ordnet sich selbst, statt der Spaltenreihenfolge zu folgen: Zellen
     * ohne Beschriftung sind der Name (nach oben) und die Schaltflächen (nach
     * unten), alles mit Beschriftung liegt dazwischen. So führt der Name den Block
     * an, auch wenn in der Tabelle links davon noch etwas steht - im Objekt-Katalog
     * etwa die Pfeile für die Reihenfolge.
     */
    .table-stack tbody tr {
        display: flex;
        flex-direction: column;
        padding: .75rem .25rem;
        border-bottom: 1px solid var(--bs-border-color);
    }

    .table-stack tbody td:not([data-label]) {
        order: -1;
    }

    .table-stack tbody td:last-child:not([data-label]) {
        order: 1;
    }

    .table-stack tbody tr:last-child {
        border-bottom: 0;
    }

    /* Bootstrap zeichnet die Trennlinien sonst je Zelle - im Block ergäbe das
       einen Strich unter jedem einzelnen Wert. */
    .table-stack tbody td {
        border: 0;
        padding: .15rem 0;
    }

    .table-stack tbody td[data-label] {
        display: flex;
        gap: .75rem;
        align-items: baseline;
    }

    .table-stack tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 7.5rem;
        font-size: .8125rem;
        color: var(--bs-secondary-color);
    }

    /* Die Zelle ohne Beschriftung am Anfang ist der Name und führt den Block an. */
    .table-stack tbody td:not([data-label]):not(:last-child) {
        font-weight: 500;
        margin-bottom: .25rem;
    }

    /* Schaltflächen ans Ende des Blocks, linksbündig - am rechten Rand wären
       sie auf dem Telefon schlecht zu treffen. */
    .table-stack tbody td:last-child:not([data-label]) {
        margin-top: .5rem;
        text-align: left !important;
    }

    .table-stack tbody td:last-child:not([data-label]) > .d-flex {
        justify-content: flex-start !important;
    }

    /* Ohne Inhalt keine leere Zeile im Block. */
    .table-stack tbody td:empty {
        display: none;
    }

    /* Kein Hover-Hintergrund: Als Zeile war er eine Lesehilfe, über einem ganzen
       Block wirkt er wie eine Auswahl, die es nicht gibt - und auf dem Telefon
       bleibt er nach einer Berührung sogar hängen. */
    .table-stack.table-hover > tbody > tr:hover > * {
        --bs-table-bg-state: transparent;
        --bs-table-accent-bg: transparent;
        background-color: transparent;
    }
}

/* --------------------------------------------------------------------------
   Hamburger-Menü: keine blaue Umrandung um die obersten Menüpunkte

   [2026-08] Das Framework legt auf einen fokussierten Menüpunkt einen Ring in
   einem fest verdrahteten Blau (.nav-link:focus-visible). Es ist keine
   CSS-Variable, also bleibt der Ring auch dann blau, wenn ein Theme mit ganz
   anderen Farben aktiv ist - über der dunklen Leiste wirkt er wie ein
   Darstellungsfehler. Auf dem Telefon bleibt er nach dem Antippen außerdem
   stehen, weil der Menüpunkt den Fokus behält: dasselbe Muster wie beim
   Hover-Hintergrund der Tabellen oben.

   Bewusst ersetzt statt ersatzlos entfernt: Wer mit einer Tastatur bedient -
   auch am Tablet mit Tastaturhülle -, muss weiterhin sehen können, wo er
   steht. Eine dezente helle Fläche leistet das über der dunklen Leiste ebenso
   gut, ohne den fremden blauen Rahmen.

   Nur im aufgeklappten Menü, also unterhalb der Aufklapp-Breite von
   navbar-expand-lg (991.98px). Auf breiten Bildschirmen steht die Navigation
   offen nebeneinander, dort ist der Ring nie aufgefallen und bleibt
   unangetastet. Zweite Ebene (.dropdown-item) ebenfalls unberührt - sie liegt
   auf hellem Grund, wo der Ring nicht stört.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .navbar-collapse .nav-link:focus-visible {
        box-shadow: none;
        background-color: rgba(255, 255, 255, .12);
        border-radius: var(--bs-border-radius-sm, .25rem);
    }
}

/* --------------------------------------------------------------------------
   Angaben-Listen auf schmalen Geräten: Bezeichnung über den Wert

   [2026-08] Die Detailansicht einer Belegung stellt Bezeichnung und Wert
   nebeneinander (5/12 zu 7/12). Auf dem Telefon bleiben für die Bezeichnung
   damit rund 140 px - zu wenig für ein einzelnes langes Wort wie
   "Reinigungsvariante" (gemessen: 142 px Spalte, zwei Zeilen). Da vom
   Framework ein "overflow-wrap: break-word" vererbt wird, lief es nicht etwa
   über den Rand hinaus, sondern brach mitten im Wort um - "Reinigungs /
   variante".

   Statt die Spalte zu verbreitern (was beim nächsten längeren Begriff wieder
   knapp würde) stellt sich die Liste unterhalb von 576 px um: Bezeichnung
   oben, Wert darunter, beide über die volle Breite. Dieselbe Idee wie bei
   .table-stack weiter oben - schmale Geräte bekommen Blöcke statt Spalten.

   Nur dort, wo die Klasse gesetzt ist. Kurze Bezeichnungen wie auf der
   Systemseite ("Version", "PHP") passen auch nebeneinander und bleiben
   unangetastet. -------------------------------------------------------- */
@media (max-width: 575.98px) {
    .detail-stack > dt,
    .detail-stack > dd {
        flex: 0 0 100%;
        width: 100%;
        max-width: 100%;
    }

    .detail-stack > dt {
        margin-bottom: 0;
    }

    /* Abstand zum nächsten Paar, nicht zwischen Bezeichnung und Wert. */
    .detail-stack > dd {
        margin-bottom: .5rem;
    }

    .detail-stack > dd:last-child {
        margin-bottom: 0;
    }
}

/* [2026-08] <summary> ist per UA-Stylesheet "display: list-item" - kein Bootstrap-
   Baustein hebt das auf. In Safari/WebKit kann ein <summary> mit mehreren Kindern
   (Text + Badge, wie bei "Originaltext aus Lexware" mit der Belegnummer daneben,
   stays/form.php) dadurch schmaler eingeschaetzt werden, als es tatsaechlich braucht,
   und ueber den Rand seiner Karte hinauswachsen - auf dem iPhone sichtbar als
   horizontale Scrollbar beim Bearbeiten einer Belegung, in Chrome nicht nachstellbar.
   Als normaler Block verhaelt sich <summary> wie jeder andere Card-Header und bleibt
   innerhalb seiner Karte.

   "display: list-item" ist zugleich die einzige Voraussetzung fuer den nativen
   Aufklapp-Pfeil - der faellt mit "block" in JEDEM Browser weg, nicht nur in Safari.
   Deshalb ein eigener, kleiner Pfeil per ::before statt des nativen Markers. */
summary {
    display: block;
    cursor: pointer;
}

summary::-webkit-details-marker {
    display: none;
}

summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    margin-right: .25rem;
    transition: transform .15s ease;
}

details[open] > summary::before {
    transform: rotate(90deg);
}