/* ============================================================
   Bedienbarkeit & Übersicht der Kern-Ansichten (UX-Durchgang, docs/ux/retropixels-befunde.md)
   Nur Größen, Abstände und Umbrüche: keine neuen Funktionen, keine Gradients.
   Teil A gilt überall — auch in Editionen, die Kern-Ansichten und -Dialoge per ctx.fallback zeigen
   (Projekte, Termin, Inventar, Gruppe, Konto, Doku, Dialoge Aufgabe/Termin/Gegenstand/Teilen).
   Teil B gilt nur in der Standard-Oberfläche retropixels (eigene Kopfzeile, Wochenplan, Seitenbreiten):
   :where(…) hält dort die Spezifität der Originalselektoren.
   Diese Datei kommt nach den Kern-Stylesheets, aber VOR dem nachgeladenen edition.css — Editionen können
   gleich starke Regeln also weiter selbst überschreiben.
   ============================================================ */

/* ================= Teil A: Kern, alle Oberflächen ================= */

/* ---------- A1. Tap-Ziele am Handy und bei Touch (Ziel 44 px; vorher 11–30 px) ---------- */
@media (max-width: 699px), (pointer: coarse) {
  /* Listen/Bäume: ⋮-Menüs, Aufklapper, Augen, Abhaken — Zeilenpolster dafür knapper */
  .layer-row { padding-top: 1px; padding-bottom: 1px; }
  .lr-menu { min-width: 44px; min-height: 44px; padding: 0 8px; flex: none; }
  .lr-caret { width: 28px; min-height: 44px; margin: 0 -4px 0 -6px; font-size: .8rem; }
  .lr-eye { min-height: 44px; width: 36px; }
  .chore-check { width: 44px; min-height: 44px; }
  /* Inventar: Menge ± */
  .inv-step { width: 44px; height: 44px; font-size: .95rem; }
  #inv-sort { min-height: 44px; }
  /* Projekt-Aufgaben: Status, 💬 */
  .prj-tstate { width: 44px; min-height: 44px; }
  .prj-tcm { min-width: 40px; min-height: 44px; }
  /* Zurück-Link: Tippfläche statt 14–17 px hoher Textzeile */
  .page-back { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 2px; }
  /* Chips, Reiter, Umschalter */
  .kind-chip, .prj-chip, .hub-stat, .ivp-toggle .btn, .panel-bgtoggle, .panel-close,
  .ua-jump, .lw-chip, .tabs .tab, .view-switch .btn { min-height: 44px; }
  :is(.kind-chip, .hub-stat, .tabs .tab, .view-switch .btn) { display: inline-flex; align-items: center; }
  .et-fld-btns .btn { min-width: 36px; min-height: 44px; }
  /* Whiteboard: Werkzeuge/Zoom 44 px (vorher 34×38, Farbfelder 22) — die Werkzeugreihe bricht um, statt rechts
     aus dem Bild zu laufen (am Handy waren 📊 und folgende nicht erreichbar); Farbfelder 32 px passen in eine Reihe */
  .bd-tools { flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
  .bd-tool, .bd-z { min-width: 40px; min-height: 44px; padding: 6px 4px; }
  a.bd-z { display: inline-flex; align-items: center; justify-content: center; }
  .bd-sw { width: 32px; height: 32px; }
  .board-top { gap: 6px; padding: 8px; }
  .bd-zoom { gap: 3px; }
  .rt-btn, .rt-compact .rt-btn { min-width: 40px; height: 40px; }

  /* Knöpfe in Kern-Ansichten und Dialogen (vorher 23–39 px: „✏️ Bearbeiten", „＋ Gegenstand", „💬 Senden", „Ändern" …);
     dichte Werkzeugleisten (Whiteboard, Coop) behalten ihr Maß */
  :is(#view, .page, .modal) button.btn:not(.bd-tool, .co-ic) { min-height: 44px; }

  /* Kern-Dialoge (Aufgabe, Termin, Gegenstand, Teilen): Checkbox-Zeilen, Tag-Chips, Knöpfe, Felder, Aufklapper */
  .check-line { min-height: 44px; }
  .check-line input { width: 22px; height: 22px; flex: none; }
  .iv-tagchip { min-height: 44px; padding: 4px 12px; }
  .modal .btn { min-height: 44px; }
  .modal summary { padding-block: 12px; min-height: 44px; }
  .modal :is(input[type=text], input[type=search], input[type=email], input[type=url], input[type=number],
             input[type=date], input[type=time], input[type=password], select) { min-height: 44px; }
}

/* ---------- A2. Handy-Layout (< 700 px) ---------- */
@media (max-width: 699px) {
  /* Seitenkopf: Titel über die ganze Zeile, Knöpfe darunter links (statt Treppe aus 3 Reihen neben gequetschtem Titel) */
  .bd-treehead { flex-wrap: wrap; row-gap: 10px; }
  .bd-treehead > h2 { flex: 1 1 100%; }
  .bd-treehead > span { flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-start !important; gap: 8px !important; }
  .bd-treehead .btn { min-height: 44px; padding: 8px 11px; font-size: .68rem; }
  .bd-treehead > span > .btn-primary { order: -1; }   /* Hauptaktion zuerst (z. B. „＋ Gegenstand") */

  /* „Kanal"-Leiste (Projekt, Termin, Gegenstand): Hinweis darf umbrechen statt „…zu diesem Objekt anl…" */
  .co-bound-info { white-space: normal; line-height: 1.3; }

  /* Inventar-Zeile: Name bekommt die Zeile, Badges daneben oder darunter, Menge ± in eine zweite Zeile
     (vorher blieb vom Namen oft nur „Holzschrau…" oder gar nichts). */
  .inv-row .lr-name { flex-wrap: wrap; row-gap: 3px; white-space: normal; }
  .inv-row .inv-name { flex: 1 1 auto; max-width: calc(100% - 30px); }
  .inv-row:has(> .inv-qty) { flex-wrap: wrap; }
  .inv-row:has(> .inv-qty) > .lr-name { flex: 1 1 calc(100% - 56px); }
  .inv-row > .inv-qty { order: 5; margin: 0 44px 2px auto; }

  /* Gegenstand-Dialog: Aktionen kleben unten (vorher „💾 Speichern" erst nach ~2 Bildschirmen Scrollen) */
  .modal.ivx:not(.ivx-cols) #inv-form > .row-btns {
    position: sticky; bottom: calc(-20px - env(safe-area-inset-bottom)); z-index: 4;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: 6px;
    margin: 14px -18px 0; padding: 8px 18px calc(8px + env(safe-area-inset-bottom));
    background: var(--surface); border-top: 2px solid var(--line);
  }
  .modal.ivx:not(.ivx-cols) #inv-form > .row-btns .btn {
    min-height: 44px; padding: 6px 4px; font-size: .56rem; line-height: 1.25; box-shadow: 2px 2px 0 var(--shadow-c);
  }
  .modal.ivx:not(.ivx-cols) #inv-form > .row-btns #iv-cancel { order: 10; }
  .modal.ivx:not(.ivx-cols) #inv-form > .row-btns [type=submit] { order: 11; grid-column: span 2; font-size: .66rem; }
  /* Neuer Gegenstand: nur Abbrechen | Speichern */
  .modal.ivx:not(.ivx-cols) #inv-form > .row-btns:not(:has(#iv-del)) { grid-template-columns: 1fr 2fr; }
  .modal.ivx:not(.ivx-cols) #inv-form > .row-btns:not(:has(#iv-del)) [type=submit] { grid-column: auto; }
}

/* ---------- A3. Dialoge, alle Breiten ---------- */
/* Gegenstand ab 700 px: Warnschwelle/Kritisch je halbe Zeile — in einer Viertelspalte liefen die Beschriftungen
   ineinander („WARNSCHWELLE‼️ KRITISCH"). */
.ivx-cols .ivx-s-stock .iv-b-min > label { grid-column: span 2; }
/* A4-Bogen: Zahlenfelder einer Reihe auf einer Linie („Kopien je Etikett" bricht um) */
:is(.ess-grid, .ess-custom) > label { align-self: end; }
/* Etikett-Feldkonfigurator: Badges NAME/QR/INFO gleich breit → Eingaben bündig */
.et-fld-badge { min-width: 46px; }
/* Projekte/Boards: knapper Leer-Hinweis ab der zweiten leeren Gruppe (grouptree.js) */
.prj-gempty.short { font-size: .78rem; margin-bottom: 6px; }

/* ================= Teil B: nur retropixels ================= */

/* ---------- B1. Listen-Seiten (Inventar, Projekte, Boards, Etiketten, Gruppen-Hub): Breite nutzen ----------
   Vorher 640 px auch auf 1440er-Bildschirmen → Kopf-Knöpfe brachen um, Zeilen wurden abgeschnitten. */
@media (min-width: 700px) {
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .page:has(> .bd-treehead):not(.inv-photos),
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .page.hub { max-width: 780px; }
  /* Reiter (Gruppen-Hub, KI-Modell, Doku …): umbrechen statt versteckt seitlich scrollen — ohne Scrollleiste war
     z. B. „💬 Kommentare" mit der Maus nicht erreichbar. Am Handy bleibt die Wischleiste. */
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .tabs { flex-wrap: wrap; overflow-x: visible; row-gap: 6px; }
  /* Wochenplan: lange Wörter in Terminblöcken trennen statt abschneiden („Kindergeburtsta"); am Handy nicht,
     dort sind 1-h-Blöcke so niedrig, dass eine zweite Titelzeile die Uhrzeit verdrängen würde */
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .event-block { hyphens: auto; overflow-wrap: anywhere; }
}
@media (min-width: 1100px) {
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .page:has(> .bd-treehead):not(.inv-photos),
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .page.hub { max-width: 960px; }
}
/* Tablet: Kopf-Knöpfe etwas kompakter, damit sie in einer Reihe bleiben (vorher „＋ Gegenstand" allein in Reihe 2) */
@media (min-width: 700px) and (max-width: 1099px) {
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .bd-treehead { flex-wrap: wrap; row-gap: 10px; }
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .bd-treehead .btn { padding: 8px 11px; font-size: .7rem; }
}

/* ---------- B2. Handy: Kopfzeile und Wochen-Navigation ---------- */
@media (max-width: 699px) {
  /* Lange Titel (Plan-, Projekt-Namen) einzeilig statt 2–3 Zeilen hoher Kopfzeile */
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .topbar-title {
    flex: 1 1 auto; min-width: 0; margin-right: 10px; font-size: .82rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 🤖 ✨ 🎨 und Profil daumengroß (vorher 34 px) */
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .topbar-right { gap: 8px; }
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .topbar-right .theme-btn,
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .topbar-right .user-chip { width: 44px; height: 44px; }
  /* „KW 39 · 21.09. – 27.09." eigene Zeile über den Knöpfen (vorher in 3–4 Zeilen zwischen die Knöpfe gequetscht) */
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .week-nav { flex-wrap: wrap; row-gap: 8px; }
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .week-nav .btn { min-width: 44px; min-height: 44px; }
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .week-nav-label { order: -1; flex: 1 1 100%; }
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .week-nav-label small { display: inline; margin-left: 8px; }
  :where(html:not([data-edition]), html[data-edition="retropixels"]) .week-nav #wk-today { flex: 1 1 auto; }
}