/* Gemeinsames Stylesheet des Doku-Panels „Maier Doku" (Details: docs/styling.md, docs/doku-app.md).
   Eingebettet vom DokuPanelProvider. Seiten-eigene <style>-Blöcke enthalten nur, was nur diese Seite braucht.
   Dark Mode ausschließlich über `.dark`. */

:root{--dok-breite:44rem;--dok-fehler:#b91c1c;--dok-touch:2.75rem}
.dark{--dok-fehler:#fca5a5}

/* Touch-Höhe: Buttons und Eingaben im Doku-Panel */
.fi-btn,.fi-input{min-height:var(--dok-touch)}

/* Kopfleiste (Menü + Filialwahl) bleibt einzeilig; Seitentitel in der Inhaltsspalte, nicht am Fensterrand */
.fi-topbar nav,.fi-topbar-nav-groups{flex-wrap:nowrap;white-space:nowrap}
.fi-page .fi-header{max-width:var(--dok-breite);margin-inline:auto;width:100%}
.fi-page:has(.dok-kacheln) .fi-header{max-width:60rem}

/* Inhalts- und Suchbereich: eine Breite für alle Seiten */
.dok-stack{display:flex;flex-direction:column;gap:1rem;max-width:var(--dok-breite);margin:0 auto;width:100%}
.dok-stack *{box-sizing:border-box}
.dok-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.dok-row>.dok-grow,.dok-grow{flex:1 1 12rem;min-width:0}
.dok-muted{font-size:.8rem;color:#6b7280}
.dark .dok-muted{color:#9ca3af}
.dok-fehler{font-size:.8rem;color:var(--dok-fehler)}

/* Karte und Hinweisbox */
.dok-karte{border:1px solid #e5e7eb;border-radius:.75rem;padding:1rem;background:#fff}
.dark .dok-karte{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.dok-status{border:1px solid rgba(128,128,128,.35);border-radius:.5rem;padding:.625rem .75rem;min-height:2.5rem;font-size:.9rem;word-break:break-word}
.dok-status--fehler{border-color:var(--dok-fehler);color:var(--dok-fehler)}
.dok-hinweis{margin-top:.6rem;padding:.5rem .75rem;border-radius:.5rem;background:#fef9c3;color:#854d0e;font-size:.9rem}
.dark .dok-hinweis{background:rgba(234,179,8,.15);color:#fde68a}

/* Suchfeld <x-doku.suche>: gleiche Breite wie die Inhalte, Höhe über --dok-touch (.fi-input) */
.dok-suche{width:100%;min-width:0}
.dok-suche-hinweis{margin-top:.5rem}

/* Trefferliste */
.dok-treffer{display:flex;flex-direction:column;gap:.5rem;margin-top:.75rem}
.dok-treffer button{text-align:left;width:100%;min-height:3rem;border:1px solid rgba(128,128,128,.35);border-radius:.5rem;padding:.625rem .75rem;background:transparent;color:inherit;cursor:pointer;font:inherit}
.dok-treffer button:hover{border-color:#05131e}
.dark .dok-treffer button:hover{border-color:#9fb3c8}

/* Pill, Tag und Badge */
.dok-pill{display:inline-flex;gap:.375rem;align-items:center;border:1px solid #05131e;background:#e6ecf2;color:#05131e;border-radius:9999px;padding:.375rem .875rem;font-size:.9rem}
.dark .dok-pill{border-color:#9fb3c8;background:#1c2e3d;color:#9fb3c8}
.dok-pill--klein{display:inline-block;padding:0 .5rem;font-size:.7rem}
.dok-badge{display:inline-block;padding:.1rem .55rem;border-radius:9999px;font-size:.78rem;background:#dcfce7;color:#166534}
.dark .dok-badge{background:rgba(34,197,94,.15);color:#86efac}
.dok-badge--gray{background:#e5e7eb;color:#374151}
.dark .dok-badge--gray{background:rgba(156,163,175,.2);color:#d1d5db}
.dok-badge--info{background:#dbeafe;color:#1e40af}
.dark .dok-badge--info{background:rgba(59,130,246,.2);color:#93c5fd}
.dok-badge--warning{background:#fef3c7;color:#92400e}
.dark .dok-badge--warning{background:rgba(245,158,11,.2);color:#fcd34d}
.dok-badge--danger{background:#fee2e2;color:#991b1b}
.dark .dok-badge--danger{background:rgba(239,68,68,.2);color:#fca5a5}

/* Dokumentzeile mit Vorschaubild */
.dok-docs{display:flex;flex-direction:column;gap:.5rem}
.dok-doc{display:flex;align-items:center;gap:.75rem;border:1px solid rgba(128,128,128,.35);border-radius:.625rem;padding:.5rem}
.dok-doc-text{flex:1;min-width:0;overflow-wrap:anywhere}
.dok-doc-text a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:inherit;font-weight:500}
.dok-thumb{position:relative;flex:0 0 auto;width:3.5rem;height:3.5rem;border-radius:.5rem;overflow:hidden;background:rgba(128,128,128,.2);display:flex;align-items:center;justify-content:center;font-size:1.5rem}
.dok-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dok-foto{display:block;max-width:100%;height:auto;border-radius:.5rem;border:1px solid rgba(128,128,128,.35)}

/* Fortschrittsbalken */
.dok-balken{height:.5rem;border-radius:9999px;background:rgba(128,128,128,.25);overflow:hidden}
.dok-balken>div{height:100%;background:#05131e;transition:width .2s}
.dark .dok-balken>div{background:#9fb3c8}

/* Ankreuzfeld mit Beschriftung: eine Größe für alle Seiten */
.dok-check{display:flex;gap:.625rem;align-items:center;min-height:var(--dok-touch);font-size:1rem;cursor:pointer}
.dok-check input{width:1.5rem;height:1.5rem;flex:none}

/* Startseite: Bereichsauswahl */
.dok-kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:1rem;max-width:60rem;margin:0 auto;width:100%}
.dok-kachel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;min-height:9rem;border:1px solid rgba(128,128,128,.35);border-radius:.75rem;padding:1rem;color:inherit;text-decoration:none;font-size:1.1rem;font-weight:600;text-align:center}
.dok-kachel:hover{border-color:#05131e}
.dark .dok-kachel:hover{border-color:#9fb3c8}
.dok-kachel svg{width:2.5rem;height:2.5rem}
.dok-kachel--zuletzt{border:2px solid #05131e;background:#e6ecf2;color:#05131e}
.dark .dok-kachel--zuletzt{border-color:#9fb3c8;background:#1c2e3d;color:#9fb3c8}
.dok-kachel--aus{opacity:.55}

/* Kamera <x-doku.kamera>: Aufnahmefläche, Schalter, Aktionen (einmal hier statt bei jeder Einbindung) */
.kam-box{position:relative;width:100%;border-radius:.75rem;overflow:hidden;background:#111827;min-height:16rem;aspect-ratio:4/3;max-height:60vh}
.kam-box video,.kam-box img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}
.kam-box .kam-aus{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#9ca3af;font-size:.95rem}
.kam-schalter{display:inline-flex;gap:.5rem;align-items:center;cursor:pointer;user-select:none;font-size:.9rem}
.kam-schalter input{width:1.25rem;height:1.25rem;accent-color:#05131e}
.dark .kam-schalter input{accent-color:#9fb3c8}
.kam-aktionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.kam-aktionen > *{justify-content:center;min-height:2.75rem}
.kam-versteckt{display:none !important}

/* Bereich Vorführen (Doku\Pages\Vorfuehren): Kacheln der Pickerl-Aufträge und Mängelkatalog als Akkordeon */
.vf-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:.75rem}
.vf-kachel{display:flex;flex-direction:column;gap:.25rem;align-items:flex-start;text-align:left;border:1px solid rgba(128,128,128,.35);border-radius:.75rem;padding:.75rem;min-width:0;overflow-wrap:anywhere;background:transparent;color:inherit;font:inherit;cursor:pointer}
.vf-kachel:hover,.vf-kachel:focus-visible{border-color:#05131e;outline:none}
.dark .vf-kachel:hover,.dark .vf-kachel:focus-visible{border-color:#9fb3c8}
.vf-kachel:active{background:rgba(128,128,128,.12)}
.vf-kachel-kopf{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;justify-content:space-between;width:100%}
.vf-uebersicht{display:grid;grid-template-columns:minmax(7rem,max-content) 1fr;gap:.25rem .75rem;margin:0}
.vf-uebersicht dt{font-size:.85rem;font-weight:500;color:#6b7280}
.dark .vf-uebersicht dt{color:#9ca3af}
.vf-uebersicht dd{margin:0;min-width:0;word-break:break-word}
.vf-balken{display:block;width:100%;height:.75rem;border-radius:9999px;background:rgba(128,128,128,.25);overflow:hidden}
.vf-balken > span{display:block;height:100%;background:var(--success-500)}
.vf-abstand{margin-top:.5rem}
.vf-liste{max-width:none;margin-top:.75rem;gap:.5rem}
.vf-gruppe{font-weight:600;margin-top:.5rem}
.vf-untergruppe{font-size:.85rem;font-weight:500;opacity:.75;margin-top:.25rem}
.vf-punkt{border:1px solid rgba(128,128,128,.35);border-radius:.625rem;min-width:0;scroll-margin-top:5.5rem}
.vf-punkt--erledigt{border-color:var(--success-500)}
.vf-punkt-kopf{display:flex;gap:.5rem;align-items:center;justify-content:space-between;width:100%;min-height:var(--dok-touch);padding:.5rem .75rem;background:transparent;color:inherit;border:0;cursor:pointer;font:inherit;text-align:left}
.vf-punkt-titel{display:flex;gap:.5rem;align-items:center;min-width:0;font-weight:500}
.vf-punkt-haken{width:1.5rem;height:1.5rem;flex:none;color:var(--success-600)}
.vf-punkt-leer{width:1.5rem;height:1.5rem;flex:none;border:2px solid rgba(128,128,128,.5);border-radius:9999px}
.vf-punkt-inhalt{display:flex;flex-direction:column;gap:.75rem;padding:.25rem .75rem .75rem}
.vf-ergebnisse{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9rem),1fr));gap:.5rem}
.vf-feld{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.vf-feld > label{font-size:.85rem;font-weight:500}
.vf-messwerte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.75rem}
.vf-text{display:block;width:100%;min-height:6rem;border:1px solid rgba(128,128,128,.45);border-radius:.5rem;padding:.625rem .75rem;background:transparent;color:inherit;font:inherit;resize:vertical}
/* Foto-Aufnahme (Ankaufstest und Vorführen, ak-*): Übersichts-Kacheln, Vorschaubilder der Mangelfotos, Vollbild-Kamera — Blade-Komponenten doku.foto-kacheln und doku.foto-vollbild. */
.ak-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9rem),1fr));gap:.5rem}
.ak-kachel{display:flex;flex-direction:column;gap:.25rem;align-items:stretch;text-align:left;border:2px solid rgba(128,128,128,.35);border-radius:.625rem;padding:.5rem;min-width:0;background:transparent;color:inherit;cursor:pointer;font:inherit}
.ak-kachel:disabled{cursor:default}
.ak-kachel--da{border-color:var(--success-500)}
.ak-kachel-titel{display:flex;gap:.25rem;align-items:center;justify-content:space-between;font-weight:500;font-size:.9rem}
.ak-kachel-haken{width:1.25rem;height:1.25rem;flex:none;color:var(--success-600)}
.ak-kachel img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.375rem;display:block}
.ak-kachel-leer{width:100%;aspect-ratio:4/3;border-radius:.375rem;border:2px dashed rgba(128,128,128,.6);display:flex;flex-direction:column;gap:.25rem;align-items:center;justify-content:center;font-size:.8rem;color:#6b7280;background:rgba(128,128,128,.08)}
.ak-kachel-kamera{width:1.75rem;height:1.75rem}
.ak-mangel-fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,6rem),1fr));gap:.5rem}
.ak-mangel-fotos img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:.375rem;display:block}
.ak-thumb{position:relative;min-width:0}
.ak-thumb-x{position:absolute;top:0;right:0;width:var(--dok-touch);height:var(--dok-touch);display:flex;align-items:flex-start;justify-content:flex-end;padding:.125rem;background:transparent;border:0;cursor:pointer}
.ak-thumb-x-icon{width:1.5rem;height:1.5rem;padding:.25rem;border-radius:9999px;background:rgba(5,19,30,.8);color:#fff}
.ak-thumb-plus{display:flex;align-items:center;justify-content:center;aspect-ratio:4/3;min-height:var(--dok-touch);border:2px dashed rgba(128,128,128,.6);border-radius:.375rem;background:rgba(128,128,128,.08);color:inherit;cursor:pointer}
.ak-thumb-plus-icon{width:1.75rem;height:1.75rem}
.ak-vollbild{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;background:#05131e;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.ak-vollbild-kopf{display:flex;gap:.75rem;align-items:flex-start;justify-content:space-between;padding:.75rem;color:#fff}
.ak-vollbild-titel{min-width:0;display:flex;flex-direction:column;gap:.125rem}
.ak-vollbild-titel strong{font-size:1.1rem}
.ak-vollbild-titel span{font-size:.9rem;opacity:.85}
.ak-vollbild-knopf{flex:none;min-width:var(--dok-touch);height:var(--dok-touch);display:flex;gap:.5rem;align-items:center;justify-content:center;padding:0 .75rem;border:0;border-radius:9999px;background:rgba(255,255,255,.18);color:#fff;font:inherit;font-weight:600;cursor:pointer}
.ak-vollbild-knopf--ok{background:var(--success-600)}
.ak-vollbild-icon{width:1.5rem;height:1.5rem}
.ak-vollbild-kamera{flex:1;min-height:0;overflow-y:auto;padding:0 .75rem .75rem}
.ak-vollbild .kam-box{aspect-ratio:auto;max-height:none;height:calc(100vh - 19rem);height:calc(100dvh - 19rem);min-height:12rem}
.ak-vollbild .kam-box video,.ak-vollbild .kam-box img{object-fit:contain}