/* ==========================================================================
   modern.css – Moderne Oberfläche, vor allem für Mobile.
   Additive Schicht NACH app.css. Nutzt die bestehenden Tokens (Hell/Dunkel
   automatisch). Verändert keine Funktion – nur Optik/Layout.
   Bausteine:
     1) Look-Refresh (weichere Radien, dezente Tiefe) – global
     2) Untere Tab-Leiste (Start/Lager/Labor/Dokumente/Mehr) – nur Mobile
     3) Touch-First (grössere Tap-Ziele, klebende Primäraktion) – nur Mobile
     4) Tabellen als Karten (per JS ausgezeichnet) – nur schmale Schirme
   ========================================================================== */

/* --- 1) Look-Refresh (global, dezent) ---------------------------------- */
.karte, .info-box { border-radius: 12px; }
.kachel           { border-radius: 12px; }
.btn              { border-radius: 8px; transition: filter .12s, transform .06s, background .12s, border-color .12s; }
.btn:active       { transform: translateY(1px); }

/* Konto/Abmelden im Menü – nur auf Mobile sichtbar (siehe Mobile-Block) */
.sb-konto { display: none; }

/* --- 2) Untere Tab-Leiste ---------------------------------------------- */
.kio-tabbar { display: none; }

@media (max-width: 768px) {
    .kio-tabbar {
        display: flex;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--flaeche);
        border-top: 1px solid var(--rahmen);
        box-shadow: 0 -2px 10px rgba(20, 30, 45, .06);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .kio-tabbar a, .kio-tabbar label {
        flex: 1 1 0; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        padding: .5rem .15rem .55rem; min-height: 48px;
        font-size: .68rem; line-height: 1.1; text-align: center;
        color: var(--text-leise); text-decoration: none;
        background: none; border: none; cursor: pointer; position: relative;
        -webkit-tap-highlight-color: transparent;
    }
    .kio-tabbar svg { width: 22px; height: 22px; display: block; }
    .kio-tabbar a span, .kio-tabbar label span {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .kio-tabbar .ist { color: var(--akzent); }
    .kio-tabbar .ist::before {
        content: ""; position: absolute; top: 0; left: 22%; right: 22%; height: 3px;
        border-radius: 0 0 3px 3px; background: var(--akzent);
    }
    .kio-tabbar a:active, .kio-tabbar label:active { background: var(--flaeche-2); }

    /* Platz schaffen, damit Inhalt/Fuss nicht hinter der Leiste verschwinden */
    body.app { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0)); }

    /* Topbar auf Mobile schlank halten – Konto/Abmelden wandern ins Menü ("Mehr"),
       der Topbar-Hamburger entfällt (übernimmt "Mehr"). Verhindert den Überlauf. */
    .topbar { flex-wrap: wrap; }
    .topbar .nav-toggle,
    .topbar .menu-pos-btn,
    .topbar .benutzer-chip,
    .topbar form.inline { display: none; }

    .sb-konto {
        display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
        margin-top: .6rem; padding-top: .7rem; border-top: 1px solid var(--rahmen);
    }
    .sb-konto-name { display: flex; flex-direction: column; line-height: 1.2; font-size: .92rem; color: var(--text); flex: 1 1 auto; min-width: 0; }
    .sb-konto-name small { color: var(--text-leise); font-size: .78rem; }
    .sb-konto .btn { flex: 0 0 auto; }
}

/* --- 3) Touch-First (Mobile) ------------------------------------------- */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="image"]),
    select, textarea {
        min-height: 2.85rem; padding: .65rem .75rem;
        font-size: 16px;            /* verhindert Auto-Zoom auf iOS */
        border-radius: 8px;
    }
    .btn { min-height: 2.85rem; padding: .72rem 1.05rem; }

    /* Klebende Primäraktion (opt-in: <div class="kio-aktion">…</div>) –
       bleibt über der Tab-Leiste sichtbar. */
    .kio-aktion {
        position: sticky; bottom: calc(60px + env(safe-area-inset-bottom, 0)); z-index: 6;
        background: var(--flaeche); border-top: 1px solid var(--rahmen);
        margin: var(--abstand) calc(-1 * var(--abstand)) 0;
        padding: .6rem var(--abstand) calc(.6rem + env(safe-area-inset-bottom, 0));
    }
    .kio-aktion .btn { width: 100%; text-align: center; }
}

/* --- 4) Tabellen als Karten (per JS markiert: class="kio-karten") ------ */
@media (max-width: 640px) {
    table.kio-karten { border: none; box-shadow: none; background: none; width: 100%; }
    table.kio-karten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.kio-karten, table.kio-karten tbody, table.kio-karten tr, table.kio-karten td { display: block; width: auto; }
    table.kio-karten tr {
        background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: 12px;
        padding: .55rem .85rem; margin-bottom: .6rem; box-shadow: var(--schatten);
    }
    table.kio-karten td {
        display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
        border: none; padding: .32rem 0; text-align: right;
    }
    table.kio-karten td::before {
        content: attr(data-label); color: var(--text-leise); font-weight: 600;
        text-align: left; flex: 0 0 auto;
    }
    table.kio-karten td:empty { display: none; }
    table.kio-karten td[data-label=""]::before { display: none; }
}

/* --- Labor-Messprotokoll: Becken als aufklappbare, farbige Blöcke ------- */
.lab-akkordeon-leiste { display: flex; gap: .5rem; margin-bottom: .7rem; flex-wrap: wrap; }

/* Petrol-Akzentkante je Becken-Karte */
.lab-karte { border-left: 4px solid var(--akzent); }

/* Becken-Kopf: petrol getönt, klickbar */
.lab-karte > summary.lab-karte-kopf {
    list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: .55rem;
    padding: .5rem .6rem; margin-bottom: .45rem;
    background: var(--akzent-bg); border-radius: var(--radius-s);
}
.lab-karte > summary::-webkit-details-marker { display: none; }
.lab-karte > summary:hover { filter: brightness(.98); }
.lab-karte > summary:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.lab-karte-titel { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 1.02rem; color: var(--akzent-tf); }
.lab-karte-kopf .bez { display: inline; margin: 0; font-weight: 400; color: var(--text-leise); font-size: .85rem; }

/* Füllstand als farbige Status-Pille */
.lab-karte-meta {
    flex: 0 0 auto; padding: .12rem .55rem; border-radius: 20px;
    font-size: .76rem; font-weight: 600; font-variant-numeric: tabular-nums;
    background: var(--flaeche); color: var(--text-leise); border: 1px solid var(--rahmen);
}
.lab-karte-meta.stand-teil { background: var(--warn-bg); color: var(--warn); border-color: transparent; }
.lab-karte-meta.stand-voll { background: var(--ok-bg);   color: var(--ok);   border-color: transparent; }

/* Chevron (petrol) */
.lab-karte-kopf::after {
    content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-left: .1rem;
    border-right: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent);
    transform: rotate(45deg); transition: transform .15s;
}
.lab-karte[open] > summary.lab-karte-kopf::after { transform: rotate(-135deg); }

/* --- Menüpunkte, die der Admin auf Mobile ausgeblendet hat ------------- */
@media (max-width: 768px) {
    .sb-nav .menu-mobil-aus { display: none !important; }
}

/* --- Kostensätze-Editor (Einstellungen ▸ Kalkulation) ------------------ */
.kalk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1.2rem; }
.kalk-einheit { color: var(--text-leise); font-weight: 400; }
@media (max-width: 768px) { .kalk-grid { grid-template-columns: 1fr; } }

/* --- Kosten je m² (Rechner) -------------------------------------------- */
.km2-tabelle .num, table th.num, table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.km2-summe { margin-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.km2-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6rem .8rem; background: var(--flaeche-2); border-radius: var(--radius-s); }
.km2-zeile small { color: var(--text-leise); font-weight: 400; }
.km2-zeile strong { font-size: 1.05rem; white-space: nowrap; }
.km2-preis { background: var(--akzent-bg); border-left: 4px solid var(--akzent); }
.km2-preis strong { color: var(--akzent-tf); font-size: 1.2rem; }
.zurueck-link { color: var(--text-leise); text-decoration: none; }
.zurueck-link:hover { color: var(--akzent); }

/* --- Auftragsliste (gespeicherte Kalkulationen) ----------------------- */
.auf-aktion { white-space: nowrap; }
.auf-aktion form.inline { display: inline; }
.link-knopf { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: #c0392b; text-decoration: underline; }
.link-knopf:hover { opacity: .8; }

/* --- Auftrag: Vorlage-Aktion ------------------------------------------ */
.auf-vorlage-aktion { display: flex; align-items: center; gap: .7rem; margin-top: .9rem; flex-wrap: wrap; }
.auf-vorlage-aktion .hilfe { margin: 0; }

/* --- Touch-Ziele: Knöpfe auf Mobile mindestens 44px hoch ------------------ */
@media (max-width: 768px) {
    .btn {
        min-height: 44px;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .stamm-akt .btn { padding: .55rem .8rem; }
    /* Scan-Tab leicht hervorheben (häufigster mobiler Einstieg) */
    .kio-tabbar .kio-tab-scan svg { width: 26px; height: 26px; }
}

/* --- Testleiste (Rollen-Vorschau): Desktop flach, Mobile einklappbar ------ */
.tl-details { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: .6rem; align-items: center; min-width: 0; }
.tl-summary { list-style: none; display: inline-flex; align-items: center; min-width: 0; }
.tl-summary::-webkit-details-marker { display: none; }
@media (min-width: 769px) {
    /* Auf Desktop immer offen und nicht klickbar (JS klappt nur Mobile zu). */
    .tl-summary { cursor: default; pointer-events: none; }
}
@media (max-width: 768px) {
    .testleiste-inner { padding: .3rem .6rem; gap: .4rem; }
    .tl-details { display: block; }
    .tl-summary { cursor: pointer; width: 100%; font-size: .78rem; padding: .15rem 0; -webkit-tap-highlight-color: transparent; }
    .tl-summary::after { content: "▾"; margin-left: .4rem; color: inherit; opacity: .7; }
    .tl-details[open] .tl-summary::after { content: "▴"; }
    .testleiste-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
    .tl-details .testleiste-wechsel { display: flex; flex-wrap: wrap; gap: .35rem; padding: .4rem 0 .2rem; }
    .testleiste-zurueck .btn { min-height: 36px; }
}