/*
 * Ergänzungen zu Bootstrap für die Bedienung auf Tablet und Smartphone.
 *
 * Eingebunden von layout.html und damit auf jeder Seite wirksam. Der Pfad /css/**
 * ist in SecurityConfig freigegeben und im PasswortWechselInterceptor ausgenommen,
 * sonst käme die Datei auf der Anmelde- und der Passwortseite nicht durch.
 */

html {
    /* Ohne das vergrößert iOS im Querformat eigenmächtig die Schrift. */
    -webkit-text-size-adjust: 100%;
}

/* ---------- Überschriften ---------- */

/*
 * Bootstrap lässt h1 bei 2,5rem stehen. Auf einem 375px breiten Gerät füllt eine
 * Überschrift wie „Reifenlager-Protokoll“ damit drei Zeilen, bevor der Inhalt beginnt.
 */
@media screen and (max-width: 767.98px) {
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.5rem; }
    h3, .h3 { font-size: 1.25rem; }
    h4, .h4, h5, .h5 { font-size: 1.1rem; }
}

/* ---------- Formularfelder ---------- */

@media screen and (max-width: 767.98px) {
    /*
     * Safari auf dem iPhone zoomt beim Hineintippen in jedes Feld, dessen Schrift
     * kleiner als 16px ist — und kommt danach nicht von selbst wieder heraus.
     * .form-control-sm liegt bei 14px, deshalb hier gleichgezogen.
     */
    .form-control, .form-select, .form-control-sm, .form-select-sm {
        font-size: 1rem;
    }
}

/* ---------- Auswahllisten (picker-list, siehe AGENTS.md) ---------- */

.picker-list {
    /* Im Hochformat wie bisher 260px, im Querformat — wo ein Telefon nur rund
       375px hoch ist — entsprechend weniger. */
    max-height: min(260px, 40vh);
    overflow-y: auto;
}

.picker-list .form-check {
    padding-top: .35rem;
    padding-bottom: .35rem;
}

.picker-list .form-check:has(input:checked) {
    background-color: var(--bs-primary-bg-subtle);
    border-radius: .25rem;
}

/*
 * Auswahl im Aufklappmenue (data-choice): Kunde und Fahrzeug brauchten als offene
 * Listen zusammen ueber 500px, bevor die erste Reifenangabe kam. Zugeklappt ist es je
 * eine Zeile, die die getroffene Wahl anzeigt.
 *
 * Das Menue nimmt die Breite der Schaltflaeche an — Bootstrap richtet es sonst nach
 * seinem Inhalt aus, und ein langer Fahrzeugname zoege es ueber den Rand hinaus.
 */
.choice-menu {
    width: 100%;
    /* max-width statt fester Breite: auf 320px ist die Spalte schmaler als das Menue
       je waere, und ein Ausbrechen nach rechts schoebe die Seite zur Seite. */
    max-width: 100%;
}

/* Die Schaltflaeche traegt die getroffene Wahl. Ein langer Name wird abgeschnitten
   statt umgebrochen: zweizeilig laege er sonst unter dem Auswahlpfeil. */
[data-choice-display] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Fingerbedienung ---------- */

/*
 * pointer: coarse trifft Touchgeräte und lässt Maus-Arbeitsplätze unangetastet.
 * Bootstraps Voreinstellungen liegen durchweg unter den ~44px, die als kleinste
 * sicher treffbare Fläche gelten.
 */
@media (pointer: coarse) {
    .navbar-nav .nav-link {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .picker-list .form-check {
        padding-top: .6rem;
        padding-bottom: .6rem;
    }

    .picker-list .form-check-input {
        width: 1.25em;
        height: 1.25em;
    }

    /* min-height statt mehr Innenabstand: die Schaltflaeche waechst auf die
       Mindestflaeche, ohne dass die Beschriftung zu weit vom Rand rueckt. */
    .btn-sm {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 2.75rem;
        padding: .4rem .85rem;
    }

    .table td a:not(.btn), .table th a:not(.btn) {
        /* Reine Textlinks in Tabellen sind sonst nur eine Zeile hoch. */
        display: inline-block;
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
}

/* ---------- Anklickbare Tabellenzeilen ---------- */

.row-clickable {
    cursor: pointer;
}

@media (pointer: coarse) {
    /* Ersatz für den Hover-Effekt, den es auf dem Touchscreen nicht gibt. */
    .row-clickable:active {
        background-color: var(--bs-secondary-bg);
    }
}

/* ---------- Tabellen auf dem Telefon ---------- */

/*
 * Eine Tabelle mit sechs oder neun Spalten passt auf kein Telefon. Sie seitlich
 * scrollen zu lassen schiebt die Kopfzeile aus dem Blick und zerreißt den
 * Zusammenhang der Zeile. Stattdessen wird unterhalb von 768px jede Zeile zu einer
 * Karte: Spaltenname links, Wert rechts.
 *
 * Die Beschriftung kommt aus data-label am jeweiligen <td> — ohne das Attribut
 * bliebe die Zelle unbeschriftet, deshalb gehört data-label an jede Zelle, deren
 * Spalte eine Überschrift hat. Zellen ohne data-label (Aktionsspalten, Hinweise
 * über colspan) laufen bewusst über die volle Breite.
 *
 * Die Grenze liegt bei 992px und damit hoeher als die Schriftgroessen weiter oben:
 * ein iPad im Hochformat (768px) hat fuer eine Ueberschrift genug Platz, fuer die
 * neun Spalten des Reifenlagers aber nicht — dort laegen die Aktionsknoepfe
 * ausserhalb des sichtbaren Bereichs.
 *
 * screen im Media-Query, damit der Rechnungsausdruck die Tabelle behält.
 */
@media screen and (max-width: 991.98px) {
    .table-stacks thead {
        display: none;
    }

    .table-stacks,
    .table-stacks tbody,
    .table-stacks tfoot,
    .table-stacks tr,
    .table-stacks td,
    .table-stacks th {
        display: block;
        width: auto;
    }

    .table-stacks > tbody > tr,
    .table-stacks > tfoot > tr {
        border: var(--bs-border-width) solid var(--bs-border-color);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .25rem .75rem;
        /*
         * --bs-table-bg setzt Bootstrap auf .table und Varianten wie .table-warning
         * überschreiben es an der Zeile. Über die Zelle gelegt (so macht es Bootstrap)
         * bliebe der Innenabstand der Karte ungefärbt.
         */
        background-color: var(--bs-table-bg);
    }

    .table-stacks > tbody > tr > *,
    .table-stacks > tfoot > tr > * {
        /* Streifen und Hover laufen bei Bootstrap über einen box-shadow auf der
           Zelle; auf Karten mit Rand und Abstand haben sie keine Aufgabe mehr. */
        box-shadow: none;
        background-color: transparent;
        border: 0;
        padding: .35rem 0;
    }

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

    /* Die Summenzeile hat keine data-label; Beschriftung und Betrag stehen dort
       ohnehin schon als zwei Zellen nebeneinander. */
    .table-stacks > tfoot > tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: baseline;
        gap: .5rem;
    }

    .table-stacks td[data-label] + td[data-label] {
        border-top: var(--bs-border-width) solid var(--bs-border-color-translucent);
    }

    .table-stacks td[data-label]::before {
        content: attr(data-label);
        /* Schiebt den Wert nach rechts, ohne ihn — anders als space-between —
           von einem zweiten Element in derselben Zelle wegzureißen. */
        margin-right: auto;
        max-width: 45%;
        flex: 0 0 auto;
        font-weight: 600;
        color: var(--bs-secondary-color);
    }

    /* Eine leere Zelle (etwa ein nicht erfasster Ort) soll keine leere Zeile
       in der Karte hinterlassen. */
    .table-stacks td:empty,
    .table-stacks tfoot th:empty {
        display: none;
    }

    /* Aktionsschaltflächen stehen unter den Daten und dürfen die Breite nutzen. */
    .table-stacks td:not([data-label]) {
        padding-top: .5rem;
    }

    .table-stacks td:not([data-label]) .btn {
        margin-bottom: .25rem;
    }
}

/* ---------- Aus den Templates ausgelagerte Einzelfaelle ---------- */

/*
 * Die Content-Security-Policy (SecurityConfig) laesst kein style-Attribut mehr zu, deshalb
 * stehen die frueheren Inline-Angaben hier.
 */

/* Bestandsfeld der Inventurliste: schmal genug, dass Feld und "Setzen" nebeneinander passen. */
.feld-bestand {
    width: 6rem;
}

/* Der Rechnungsausdruck laesst die Bedienelemente weg (frueher ein <style> in der Vorlage). */
@media print {
    .no-print {
        display: none !important;
    }
}