/* ════════════════════════════════════════════════════════════════════════
   sh-mobile-app.css — App-Modus für die mobile Ansicht (≤768px).
   Lädt als LETZTES Stylesheet (nach sh-skin.css) → darf überschreiben.
   Rein additiv, keine Token-Eingriffe; Desktop (>768px) bleibt unberührt.

   Bausteine:
   1) Formularfelder wie in einer nativen App (16px = kein iOS-Zoom,
      44px+ Touch-Höhe, große Checkboxen, klare Labels)
   2) Dialoge als Bottom-Sheets (von unten, Wischgriff, sticky Aktionen)
   3) App-Chrome: sticky Glas-Topbar, kompakte Icon-Aktionen,
      Bottom-Nav-Politur (Blur + Aktiv-Pille), Toasts über der Leiste
   4) Tap-Feedback + installierte PWA (html.sh-standalone, Safe-Areas)

   Partner: sh-mobile-forms.js (Tastatur-Attribute + sh-standalone-Klasse).
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1) FORMULARFELDER ──────────────────────────────────────────────── */
  /* 16px Schrift auf ALLEN Eingaben → iOS zoomt beim Fokus nicht mehr rein.
     Positions-Editor (.pte-table) ist ausgenommen — der hat seine eigene,
     abgestimmte Feld-Politur in sh-mobile.css (fragile Engine!). */
  .content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not(.pte-table *),
  .content select:not(.pte-table *),
  .content textarea:not(.pte-table *),
  dialog input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]),
  dialog select,
  dialog textarea {
    font-size: 16px !important;
    min-height: 46px;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
  }
  .content textarea:not(.pte-table *), dialog textarea { min-height: 88px; line-height: 1.4; }

  /* Eingaben in Dialog-Formularen volle Breite (kein schmales Gestückel).
     Echte Haus-Konvention: <label class="field-label">Text<input></label>. */
  dialog .field-label input:not([type="checkbox"]):not([type="radio"]),
  dialog .field-label select,
  dialog .field-label textarea { width: 100%; }

  /* Mehrspaltige Formular-Grids einspaltig stapeln (2×~170px ist untippbar;
     internal.css macht das bislang nur bei pointer:coarse ≤1024px). */
  .field-grid, .panel .field-grid, .ui-form-grid { grid-template-columns: 1fr !important; }

  /* Checkboxen/Radios daumen-tauglich, im Markenrot. */
  .content input[type="checkbox"], .content input[type="radio"],
  dialog input[type="checkbox"], dialog input[type="radio"] {
    width: 22px; height: 22px;
    accent-color: var(--elmetic-red, #e73d25);
    flex: 0 0 auto;
  }

  /* Label-Typografie kommt aus dem zentralen Formular-System (internal.css
     .field-label > span:first-child = 13px/600) — hier bewusst NICHT doppeln. */

  /* Fokus: EIN ruhiger Ring (statt Browser-Default-Gewusel). */
  .content input:focus-visible, .content select:focus-visible, .content textarea:focus-visible,
  dialog input:focus-visible, dialog select:focus-visible, dialog textarea:focus-visible {
    outline: 2px solid var(--elmetic-red, #e73d25);
    outline-offset: 1px;
  }

  /* ── 2) DIALOGE = BOTTOM-SHEETS ─────────────────────────────────────── */
  dialog.modal {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    max-height: 92dvh;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(10, 16, 30, .28);
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: shSheetUp .22s cubic-bezier(.2, .8, .3, 1);
  }
  dialog.modal::backdrop { background: rgba(10, 16, 30, .45); }
  /* Wischgriff-Optik wie in nativen Sheets. */
  dialog.modal::before {
    content: '';
    display: block;
    width: 42px; height: 4px;
    border-radius: 2px;
    margin: 4px auto 10px;
    background: color-mix(in srgb, var(--elmetic-text, #1f2937) 22%, transparent);
  }
  /* Aktionsleiste: große, gleichbreite App-Buttons (sticky kommt aus sh-mobile.css). */
  dialog.modal .modal-actions .btn,
  dialog.modal .ui-actions .btn { min-height: 48px; flex: 1 1 auto; font-size: 15px; }
  dialog.modal .modal-actions, dialog.modal .ui-actions { display: flex; gap: 10px; }

  /* ── 3) APP-CHROME ──────────────────────────────────────────────────── */
  /* Topbar: klebt oben, „Milchglas"-Fläche wie eine native Titelleiste. */
  .main-area .topbar {
    position: sticky;
    top: 0;
    z-index: 90;
    background: color-mix(in srgb, var(--elmetic-card, #fff) 86%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }
  /* user-box-Ausblendung + „Schnellaktionen"→„+"-Icon macht bereits
     internal-modern.css (Z. 1054 ff.) — hier bewusst NICHT gedoppelt. */
  /* Logout kompakt halten, aber erreichbar. */
  #topbar #logoutBtn { font-size: 12px; padding: 7px 9px; }

  /* Bottom-Nav: Milchglas + Aktiv-Pille hinter dem Icon. */
  .sh-bottomnav {
    background: color-mix(in srgb, var(--elmetic-card, #fff) 84%, transparent);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
  }
  .sh-bottomnav__item { position: relative; }
  .sh-bottomnav__item svg { position: relative; z-index: 1; }
  .sh-bottomnav__item.is-active::before {
    content: '';
    position: absolute;
    top: 5px; left: 50%;
    transform: translateX(-50%);
    width: 46px; height: 27px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--elmetic-red, #e73d25) 13%, transparent);
  }

  /* Toasts über der Bottom-Leiste (statt dahinter/darunter). */
  .sh-toast-container {
    bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
    top: auto !important;
    left: 10px; right: 10px;
    max-width: none;
  }

  /* Filter-/Facetten-Chips: eine wischbare Zeile statt Umbruch-Turm. */
  .sh-facets {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .sh-facets::-webkit-scrollbar { display: none; }
  .sh-facets .btn, .sh-facets button { flex: 0 0 auto; min-height: 36px; border-radius: 18px; }

  /* ── 4) KOMPAKTE DICHTE (weniger Scrollen, App-Gefühl) ──────────────── */
  /* Dashboard-KPI-Kacheln: 2 Spalten statt 1 (sh-dashboard.css stellt ≤640
     auf 1fr → eine lange Kachel-Wurst; diese Datei lädt später und gewinnt).
     Kachel-Innenmaße kompakt, Deko-Sparkline (.mini, keine echte Trendaussage
     lt. sh-dashboard-redesign.js) spart mobil Platz. */
  .sh-redesign .kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
  .sh-redesign .kpi { padding: 11px 12px; }
  .sh-redesign .kpi .kt { margin-bottom: 8px; }
  .sh-redesign .kpi .ki { width: 28px; height: 28px; }
  .sh-redesign .kpi .num { font-size: 22px; }
  .sh-redesign .kpi .kfoot { margin-top: 8px; }
  .sh-redesign .kpi .mini { display: none; }
  /* Hero-Band: mobil deutlich flacher. */
  .sh-redesign .hero { padding: 14px 16px; margin-bottom: 10px; gap: 10px; }
  /* Friendly-Dashboard-Kopf (internal-modern.css): flacher. */
  .db-header { padding: 14px 14px; }
  .db-greeting { font-size: 19px; }
  /* Breadcrumb: EINE Zeile, wischbar statt mehrzeilig umgebrochen. */
  .breadcrumb { padding: 2px 12px 0; }
  .breadcrumb-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .breadcrumb-list::-webkit-scrollbar { display: none; }
  .breadcrumb-item { flex: 0 0 auto; white-space: nowrap; }
  /* Panels + Listen-Karten einen Tick enger (sh-mobile.css: 12px/10px bzw.
     10px 12px/8px) — bleibt gut tippbar, spart pro Karte ~6px Höhe. */
  .panel { padding: 10px; margin-bottom: 8px; }
  .panel .data-table > tbody > tr { padding: 8px 10px; margin: 0 0 6px; }
  /* 🔴 Größter Platzfresser: Desktop-Zeilenhöhe (height/min-height 40px je td)
     bläht im Karten-Modus JEDE gestapelte Zelle auf 40px auf (6 Spalten =
     240px-Karte). sh-mobile-rd.css resettet nur .table-wrap — hier der
     .panel-.data-table-Pfad aus sh-mobile.css. */
  .panel .data-table > tbody > tr > td { height: auto; min-height: 0; }
  /* Smart-Buttons: 48px reichen als Tap-Kachel (statt 56px). */
  .sh-smartbtn { min-height: 48px; }

  /* ── 5) TAP-FEEDBACK ────────────────────────────────────────────────── */
  * { -webkit-tap-highlight-color: transparent; }
  .btn { transition: transform .08s ease; }
  .btn:active { transform: scale(.96); }
  /* Listen-Karten drücken sich beim Antippen leicht ein (Karten-Layout aus
     sh-mobile.css / sh-mobile-rd.css). */
  .data-table > tbody > tr:active,
  .table-wrap table > tbody > tr:active { transform: scale(.985); transition: transform .08s ease; }
}

/* ── Installierte PWA (Home-Bildschirm): Safe-Areas + App-Verhalten ────── */
/* sh-mobile-forms.js setzt html.sh-standalone bei display-mode:standalone. */
html.sh-standalone .main-area .topbar { padding-top: calc(6px + env(safe-area-inset-top, 0px)); }
html.sh-standalone body { overscroll-behavior-y: contain; }

@keyframes shSheetUp {
  from { transform: translateY(24px); opacity: .6; }
  to { transform: translateY(0); opacity: 1; }
}

/* ── Dunkles Theme: Glas-/Schattenwerte nachziehen ─────────────────────── */
@media (max-width: 768px) {
  [data-theme="dark"] dialog.modal { box-shadow: 0 -10px 40px rgba(0, 0, 0, .55); }
  [data-theme="dark"] dialog.modal::backdrop { background: rgba(0, 0, 0, .6); }
}


/* ╔══ Multi-Agenten-Track (2026-07-19): sh-mobile-app-nav.css — gemergt, Reihenfolge = Kaskade ══╗ */

/* ════════════════════════════════════════════════════════════════════════
   sh-mobile-app-nav.css — TRACK A: Sidebar als App-Menü (≤768px).
   Lädt als LETZTES Stylesheet (nach sh-mobile-app.css) → darf überschreiben.
   Rein additiv, KEIN JavaScript, Desktop (>768px) bleibt unberührt.

   Die Off-canvas-MECHANIK bleibt unangetastet (internal.js initMobileSidebar
   toggelt `sidebar--open` auf #sidebarEl + `.visible`/`.hidden` auf dem
   Backdrop; Positionierung/left-Transition kommt aus internal.css @1180px).
   Hier nur Optik + Ergonomie: Sheet-Kante, Tipp-Höhen, App-Suchfeld,
   Inhalts-Einblendung, Backdrop-Blur, Safe-Areas (html.sh-standalone).

   Token-Hinweis: Die Sidebar trägt ihr EIGENES, auf `.sidebar` gescoptes
   Token-System (--sh-surface/--sh-surf-2/--sh-border … aus sh-redesign.css,
   Light UND Dark via [data-theme="dark"]). Farbige Flächen laufen deshalb
   hier über --sh-* mit --elmetic-*-Fallback-Kette — so flippt Dark-Mode
   automatisch mit, ohne eigene Nachzieh-Regeln.

   Bewusst NICHT gedoppelt (existiert bereits):
   - Off-canvas/Backdrop/Burger-Mechanik (internal.css @1180 + internal-modern @900)
   - .sidebar { padding-bottom:70px } Bottom-Nav-Freiraum (sh-mobile.css Z.175)
   - Aktiv-Eintrag Farbe/Feld/Balken (sh-odoo-sidebar.css — besitzt .nav-item.active)
   - -webkit-tap-highlight-color (sh-mobile-app.css §4, global ≤768px)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1) PANEL ALS APP-SHEET ─────────────────────────────────────────────
     Abgerundete rechte Kante + auf schmalen Phones ein sichtbarer Backdrop-
     Streifen zum Antipp-Schließen (native Drawer-Konvention).
     !important bei width: internal.css @1180px setzt `width:320px !important`
     auf .sidebar — ohne !important nicht überstimmbar. min(320px, 88vw) ist
     ≤320px, der Versteck-Offset `left:-330px !important` trägt weiter. */
  #sidebarEl.sidebar {
    width: min(320px, 88vw) !important;
    border-radius: 0 18px 18px 0;
    border-right: 0; /* Radius + 1px-Linie (sh-redesign) beißen sich optisch */
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain; /* Menü-Flick scrollt nicht die Seite dahinter */
  }

  /* ── 2) BACKDROP: Milchglas statt hartem Grauschleier ───────────────────
     internal.css gibt dem Backdrop bereits blur(2px) + Opacity-Transition —
     hier nur vertieft (App-Gefühl). Hintergrundfarbe bleibt die bestehende. */
  .sidebar-backdrop {
    -webkit-backdrop-filter: blur(8px) saturate(.92);
    backdrop-filter: blur(8px) saturate(.92);
  }

  /* ── 3) BRAND-KOPF kompakt ──────────────────────────────────────────────
     Auf dem Handy zählt jede Zeile Menü — der Kopf rückt etwas zusammen. */
  #sidebarEl .brand {
    padding: 2px 6px 12px;
    margin-bottom: 6px;
  }

  /* ── 4) MENÜ-SUCHE als großes App-Suchfeld ──────────────────────────────
     16px Schrift → iOS zoomt beim Fokus nicht rein. Hinweis: internal.css
     (~Z.4100, @1024px + pointer:coarse) setzt auf Touch bereits 16px/40px —
     hier vereinheitlicht auf den App-Standard (46px, Radius 12) und zusätzlich
     schmale Fenster mit feinem Pointer abgedeckt; sh-mobile-app.css §1 greift
     nur für .content/dialog-Eingaben, nicht für die Sidebar. */
  #sidebarEl .sidebar-search-input {
    font-size: 16px;
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 12px;
    box-sizing: border-box;
  }
  /* ⌘K-Tastatur-Kürzel-Hinweis (sh-redesign ::after) ist auf Touch sinnlos. */
  #sidebarEl .sidebar-search-wrap::after { display: none; }

  /* Suchtreffer als gut tippbare Zeilen. */
  .sidebar-search-results .sidebar-search-item {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 10px;
  }

  /* ── 5) GRUPPEN-HEADER: aufgeräumte, tippbare Sektions-Zeilen ─────────── */
  #sidebarEl .nav-group-header {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  #sidebarEl .nav-group-chevron {
    font-size: 12px;   /* Auf-/Zuklapp-Affordance etwas deutlicher */
    width: 20px;
  }
  #sidebarEl .nav-group-items { gap: 2px; }

  /* ── 6) NAV-EINTRÄGE: native Menü-Zeilen (≥48px, größere Schrift/Icons) ─
     Spezifität 1-1-0 schlägt sh-sidebar-polish (.sidebar .nav-group-items
     .nav-item = 0-3-0, setzt .44rem-Paddings) ohne !important.
     padding-left bleibt unangetastet — internal.css steuert damit die
     Einrückung (.nav-item--child 28px) und den Aktiv-Balken-Ausgleich. */
  #sidebarEl .nav-item {
    min-height: 48px;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 15px;
  }
  #sidebarEl .nav-item .nav-item-icon,
  #sidebarEl .nav-item .nav-item-icon svg {
    width: 20px;
    height: 20px; /* sh-redesign verkleinert auf 18px — mobil wieder 20px */
  }
  /* Tap-Feedback wie bei den App-Buttons (Muster aus sh-mobile-app.css §4). */
  #sidebarEl .nav-item:active {
    transform: scale(.98);
    transition: transform .08s ease;
  }

  /* Favoriten-Stern: 18px ist untertippbar → 30px-Tap-Fläche. Und: auf Touch
     gibt es kein Hover — sh-sidebar-polish blendet leere Sterne erst beim
     Hover ein, mobil wären sie also unerreichbar. Dezent sichtbar machen. */
  #sidebarEl .nav-item-fav {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  #sidebarEl .nav-group-items .nav-item-fav:not(.nav-item-fav--active) { opacity: .35; }

  /* ── 7) FOOTER (Rolle + Tour/Hilfe) tippbar machen ──────────────────────
     !important nötig: die Buttons tragen INLINE-Styles (index.html Z.82/85:
     font-size:12px; padding:4px 8px; opacity:0.7) und internal-modern.css
     setzt `.sidebar-footer .btn { font-size:12px !important }` — beides ist
     nur per !important in späterer Kaskade überstimmbar. */
  #sidebarEl .sidebar-footer { gap: 6px; }
  #sidebarEl .sidebar-footer .btn {
    font-size: 13.5px !important;
    padding: 10px 12px !important;
    opacity: 1 !important;
    min-height: 44px;
  }

}

/* ── 8) SANFTE INHALTS-EINBLENDUNG beim Öffnen ────────────────────────────
   Das Panel selbst animiert bereits über die bestehende left-Transition
   (internal.css, `transform:none !important` — dort NICHT eingreifen).
   Zusätzlich gleitet der INHALT kurz nach (Kind-Elemente, kollisionsfrei).
   Nur bei erlaubter Bewegung (prefers-reduced-motion). */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  #sidebarEl.sidebar--open .brand,
  #sidebarEl.sidebar--open .nav-menu,
  #sidebarEl.sidebar--open .sidebar-footer {
    animation: shNavPanelIn .28s cubic-bezier(.2, .8, .3, 1) both;
  }
}
@keyframes shNavPanelIn {
  from { opacity: .25; transform: translateX(-10px); }
  to   { opacity: 1;   transform: none; }
}

/* ── 9) INSTALLIERTE PWA: Safe-Areas (html.sh-standalone via sh-mobile-forms.js) ──
   Grund-Paddings: internal-modern.css .sidebar = 20px oben,
   sh-mobile.css = 70px unten (Bottom-Nav) — hier nur um die Gerätekerbe /
   den Home-Indikator erweitert. */
@media (max-width: 768px) {
  html.sh-standalone #sidebarEl.sidebar {
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
  }
}


/* ╔══ Multi-Agenten-Track (2026-07-19): sh-mobile-app-detail.css — gemergt, Reihenfolge = Kaskade ══╗ */

/* ════════════════════════════════════════════════════════════════════════
   sh-mobile-app-detail.css — TRACK B: Detailseiten & Drawer im App-Modus (≤768px).
   Lädt NACH sh-mobile.css / sh-mobile-rd.css / sh-mobile-app.css → darf per
   Kaskade (gleiche Spezifität, spätere Datei) überschreiben. Rein additiv,
   KEIN JavaScript, Desktop (>768px) bleibt byte-identisch unberührt.

   Bausteine:
   1) Detail-Drawer (sh-detail-drawer) als App-Vollbild-Sheet auf ALLEN
      Mobilbreiten — schließt die Lücke 641–768px (Bottom-Sheet galt bisher
      nur ≤640px, sh-detail-drawer.css Z.135–141) + Safe-Area + 44px-Schließen.
   2) Editor-Toolbar (.ue-toolbar): Aktionsgruppe als eigene volle Zeile unter
      der Kopfzeile (KEINE Scroll-Zeile — würde das ⋮-Menü clippen, s. u.).
   3) Smart-Buttons (.sh-smartbtn) als zentrierte App-Kacheln mit Tap-Feedback.
   4) (gestrichen) PWA-Sticky-Offset — Prämisse widerlegt, s. Block 4.

   Token-Hinweis: Der Drawer läuft im EIGENEN Token-Scope .sh-redesign
   (--surface/--border/--r-* …, Light + Dark via [data-theme="dark"]
   .sh-redesign in sh-detail-drawer.css Z.14–51) — Nachzieher hier bewusst im
   selben Token-System; die Fallback-Hexwerte sind die Light-Werte der Quelle
   und greifen praktisch nie (jeder .shx-*-Knoten trägt .sh-redesign).
   Eigene Dark-Nachzieher sind daher NICHT nötig.

   Bewusst NICHT gedoppelt (existiert bereits):
   - .ue-toolbar__btn / .ue-toolbar__actions .btn Tap-Targets 40×40
     (sh-mobile.css Block 12, Z.228–232)
   - span.ue-btn-label display:none + .ue-menu-dropdown volle Breite
     (editor-toolbar-shared.css Z.246–264)
   - Primär-Aktion-Hervorhebung: .ue-toolbar__btn[data-action*="convert"/
     "send"] ist bereits rot (internal-modern.css Z.1207–1218)
   - Smart-Button-Kachel-Basis: flex 1 1 132px / min-height 56px / @430px
     volle Breite (sh-mobile.css Z.111/128/236)
   - Drawer-Bottom-Sheet ≤640px inkl. Wischgriff + einspaltiges Grid
     (sh-detail-drawer.css Z.135–141) — wird hier nur auf ≤768px verbreitert
   - Scrim-Blur (.shx-scrim hat schon backdrop-filter, Z.72)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1) DETAIL-DRAWER = APP-VOLLBILD-SHEET (jetzt bis 768px) ─────────────
     Repliziert die Sheet-Mechanik des ≤640px-Blocks für die ganze Mobilbreite
     und hebt sie auf „fast Vollbild" (dvh-basiert, Kerbe/Statusleiste bleibt
     frei). Bei ≤640px gewinnen diese identisch aufgebauten Regeln als spätere
     Datei — gleiche Optik, nur höher. Geschlossen-Transform muss mitwandern
     (Basis ist translateX(102%), im Sheet-Modus translateY). */
  .shx-drawer {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    height: 94vh; /* Fallback für Browser ohne dvh */
    height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)));
    border-left: none;
    border-top: 1px solid var(--border, #EEE5DC);
    border-radius: var(--r-xl, 20px) var(--r-xl, 20px) 0 0;
    transform: translateY(102%);
  }
  .shx-drawer.is-open { transform: none; }

  /* Wischgriff wie im nativen Sheet (identisch zum 640px-Block, damit er
     auch zwischen 641–768px erscheint). */
  .shx-drawer::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: var(--r-pill, 999px);
    background: var(--border-2, #E3D9CE);
  }

  /* Kopfzeile: liegt im Flex-Layout AUSSERHALB des Scroll-Containers .shx-db
     (sh-detail-drawer.css Z.74/90) → ist konstruktiv immer sichtbar, sticky
     ist nicht nötig. Nur Platz für den Wischgriff schaffen. */
  .shx-dh { padding-top: 24px; }

  /* Schließen-Knopf daumen-tauglich (Basis 32×32 → 44×44, Apple-Minimum). */
  .shx-dh-x {
    width: 44px;
    height: 44px;
    margin-right: -8px; /* optisch bündig trotz größerer Tipp-Fläche */
  }

  /* Feld-Grid einspaltig auf der ganzen Mobilbreite (bisher nur ≤640px). */
  .shx-dgrid { grid-template-columns: 1fr; }

  /* Scroll-Komfort: Inhalt endet nicht hart am Footer. */
  .shx-db { padding-bottom: 28px; }

  /* Footer: große App-Buttons + Safe-Area (iPhone-Home-Indikator) — der
     Footer sitzt im Sheet direkt an der Geräteunterkante. */
  .shx-df { padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .shx-df .btn { min-height: 48px; }

  /* ── 2) EDITOR-TOOLBAR: AKTIONSGRUPPE ALS EIGENE ZEILE ───────────────────
     internal-modern.css (Z.1129/1184) lässt Toolbar UND Aktionsgruppe frei
     umbrechen → die Aktionsgruppe quetscht sich neben Badge/Belegnummer.
     Hier: die Aktionsgruppe wird eine eigene, volle Zeile UNTER der Kopfzeile
     (Zurück/Badge/Belegnummer) — deterministisch Kopfzeile + Aktionsblock.
     Tap-Targets (40×40) kommen aus sh-mobile.css Block 12.

     Spezifität: .ue-toolbar-Präfix ist NÖTIG — sh-editor.css Z.5056 stylt
     `.ue-toolbar .ue-toolbar__actions` mit (0,2,0); ein nackter (0,1,0)-
     Selektor verlöre unabhängig von der Ladereihenfolge.

     ⚠️ BEWUSST KEINE wischbare nowrap/overflow-x-Zeile (Verifikations-Befund):
     Das ⋮-Menü (.ue-menu-wrap position:relative + .ue-menu-dropdown
     position:absolute, editor-toolbar-shared.css Z.134–140) liegt IN der
     Aktionsgruppe — `overflow-x:auto` macht die Gruppe zum Scroll-Container
     und würde das geöffnete Dropdown in die ~44px hohe Zeile clippen
     (⋮-Menü de facto unbenutzbar). Die Buttons umbrechen stattdessen weiter
     (flex-wrap:wrap aus den Bestandsschichten). */
  .ue-toolbar .ue-toolbar__actions {
    flex: 1 1 100%;
    min-width: 0;
  }

  /* ── 3) SMART-BUTTONS = APP-KACHELN ──────────────────────────────────────
     Kachel-Grundmaße (flex-Basis, min-height) liefert sh-mobile.css — hier
     nur die App-Verfeinerung: zentrierte Zahl/Label-Hierarchie + Eindrücken
     beim Antippen (nur echte <button>-Kacheln, nicht die --info-Anzeigen). */
  .sh-smartbtn {
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 2px;
  }
  /* Spezifität (Verifikations-Befund): sh-redesign.css stylt transition mit
     `.sh-smartbtns .sh-smartbtn` (0,2,0) und hover mit `.sh-smartbtns
     button.sh-smartbtn:hover` (0,3,1) — nacktes `button.sh-smartbtn(:active)`
     (0,1,1/0,2,1) verlöre (Sticky-Hover-Tap: translateY(-1px) statt scale).
     Daher Container-Präfix; gegen die gleich-spezifische Hover-Regel gewinnt
     diese Datei per späterer Kaskade. Alle Button-Kacheln liegen im Markup
     in .sh-smartbtns (internal.js Z.4014 ff., Editor-Integrationen). */
  .sh-smartbtns button.sh-smartbtn { transition: transform .08s ease, border-color .12s ease, box-shadow .12s ease; }
  .sh-smartbtns button.sh-smartbtn:active { transform: scale(.96); }
  /* Zahl/Label-Hierarchie schärfen — Doppelselektor nötig, weil
     sh-redesign.css mit (0,2,0)-Spezifität stylt (Z.2013–2024).
     Grenze (bewusst): auf der Kundenakte überstimmt der ID-starke Scope
     `#mainContent:has(.sh-smartbtns):has([data-customer-detail-tab])`
     (sh-redesign.css Z.4182 ff.) diese Kachel-Politur — dort bleibt das
     eigene Links-Layout mit Akzentkante. Nicht bekämpfen (kein !important). */
  .sh-smartbtns { gap: 8px; }
  .sh-smartbtns .sh-smartbtn__num { font-size: 1.3rem; line-height: 1.15; }
  .sh-smartbtns .sh-smartbtn__lbl { font-size: .66rem; letter-spacing: .04em; }

  /* ── 4) PWA-STICKY-OFFSET der Toolbar — ENTFERNT (Verifikations-Befund) ──
     Ursprüngliche Annahme: die Glas-Topbar „wächst" in der installierten PWA
     um env(safe-area-inset-top) (sh-mobile-app.css Z.162 padding-top).
     FALSCH: die Topbar hat eine FESTE Höhe (internal-modern.css Z.275
     height:var(--sh-topbar-height)=68px, ≤768px Z.1053 height:60px) bei
     globalem box-sizing:border-box (internal.css Z.38) — das padding-top
     vergrößert die Außenhöhe NICHT. Ein Offset
     `top: calc(var(--sh-topbar-height) + env(safe-area-inset-top))` würde
     die sticky Toolbar auf Kerben-Geräten um die Safe-Area zu TIEF kleben
     lassen (durchsichtiger Spalt unter der Topbar) und wäre sonst no-op.
     Es gibt keine Verdeckung, die zu kompensieren wäre → Regel gestrichen. */
}


/* ╔══ Multi-Agenten-Track (2026-07-19): sh-mobile-app-lists.css — gemergt, Reihenfolge = Kaskade ══╗ */

/* ════════════════════════════════════════════════════════════════════════
   sh-mobile-app-lists.css — TRACK C: Listen-Karten 2.0 (≤768px).
   Verfeinert die BESTEHENDEN Karten-Transformationen — ersetzt sie NICHT:
   - sh-mobile.css     (≤768px: .panel .data-table → Karten)
   - sh-mobile-rd.css  (≤640px: .table-wrap table / .data-table → Karten)

   Lädt NACH sh-mobile-app.css (letzte Schicht) → darf per Kaskade gewinnen.
   Rein additiv, kein JavaScript, Desktop (>768px) bleibt unberührt.

   Bausteine:
   1) Status-Badges als Chip-Zeile statt gestapelter Block-Zeilen
   2) Gruppen-Header als sticky Abschnitts-Titel (unter der Glas-Topbar)
   3) Leerzustände als ruhige, randlose Fläche (keine „Geister-Karte")
   4) Aktions-Buttons als gleichmäßige, daumen-taugliche Chip-Reihe
   5) Chevron-Affordance: Karten, die den Detail-Drawer öffnen, zeigen ›
   6) Harmonisierung ≤640px: beide Karten-Systeme mit gleichem Radius/
      Abstand + Karten-Titel auch für klassenlose .table-wrap-Tabellen

   Bewusst NICHT hier (existiert bereits — nicht doppeln):
   - Karten-Grundtransformation tr/td → block (sh-mobile.css Block 1,
     sh-mobile-rd.css) — displays der Basis bleiben unangetastet
   - Tap-Feedback tr:active (sh-mobile-app.css §4)
   - .sh-col-hide-m-Ausblendung (sh-mobile.css Z.76)
   - Filter-Toolbar/Facetten-Chips (sh-mobile.css §4 / sh-mobile-app.css §3)
   - Bottom-Nav, Dialog-Sheets, Formfelder (sh-mobile.css / sh-mobile-app.css)
   - .pte-table (Positions-Editor) bleibt ÜBERALL ausgenommen (dokumentierte
     Grenze, sh-mobile.css Z.306 ff.)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── 1) STATUS-BADGES ALS CHIP-ZEILE ─────────────────────────────────────
     In den Karten wird jede Zelle zum Block → Badges stapeln sich als
     einsame volle-Breite-Zeilen. Zellen, die Badges tragen, fließen jetzt
     inline nebeneinander (Chip-Zeile unter dem Karten-Titel). Die erste
     Zelle (Karten-Titel), colspan-Zellen (Gruppen/Leerzustand) und die
     Aktionszelle bleiben bewusst unangetastet. */
  .panel .data-table > tbody > tr > td:not(:first-child):not([colspan]):not(.table-actions):has(.status-badge, .badge, .sh-badge) {
    display: inline-block;
    vertical-align: middle;
    padding: 2px 8px 2px 0;
    max-width: 100%;
  }
  /* Badges selbst als runde, gut lesbare Pills (mobil einen Tick größer). */
  .panel .data-table > tbody > tr > td .status-badge,
  .panel .data-table > tbody > tr > td .badge,
  .panel .data-table > tbody > tr > td .sh-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }

  /* ── 2) GRUPPEN-HEADER = STICKY ABSCHNITTS-TITEL ─────────────────────────
     Beim Scrollen langer, gruppierter Listen bleibt der aktuelle Gruppen-
     Header unter der sticky Glas-Topbar (sh-mobile-app.css §3, z-index 90)
     sichtbar — wie Abschnitts-Titel in nativen Listen-Apps. Hintergrund ist
     bereits deckend (var(--elmetic-bg-soft), Light+Dark via sh-tokens.css). */
  .panel .data-table > tbody > tr.sh-group-row {
    position: sticky;
    /* Mobil ist die Topbar 60px hoch (internal-modern.css @≤900px: .topbar
       { height: 60px }) — NICHT --sh-topbar-height (68px, gilt nur Desktop). */
    top: 64px; /* 60px Topbar + 4px Luft */
    z-index: 4; /* über den Karten, deutlich unter Topbar (90) / Drawer */
    border: 1px solid var(--elmetic-border, #e8ebf0);
    box-shadow: 0 2px 8px rgba(20, 30, 60, .08);
  }
  /* colspan-Zellen werden von sh-mobile.css zentriert — Gruppen-Header
     sollen aber links stehen (Caret + Label + Zähler, Summe rechts). */
  .panel .data-table > tbody > tr.sh-group-row > td {
    text-align: left;
    font-size: 13.5px;
  }
  /* Caret als größere, klar sichtbare Tap-Affordance (Toggle-Fläche ist
     die ganze Header-Zeile — data-group-toggle in internal.js). */
  .panel .data-table > tbody > tr.sh-group-row .sh-group-caret {
    width: 18px;
    font-size: 15px;
  }
  /* Summen-Chip (Gruppierung mit Beträgen) nicht an den Kartenrand kleben. */
  .panel .data-table > tbody > tr.sh-group-row .sh-group-sum { padding-left: 8px; }

  /* ── 3) LEERZUSTÄNDE OHNE KARTEN-CHROME ─────────────────────────────────
     „Noch keine Einträge"-Zeilen erben sonst Border+Schatten der Karten und
     wirken wie eine kaputte Karte → ruhige, gestrichelt umrandete Fläche.
     (!important nötig: internal.css Z.3512 setzt padding mit !important.) */
  .panel .data-table > tbody > tr:has(> td.empty-state-cell) {
    background: transparent;
    border: 1px dashed var(--elmetic-border, #e8ebf0);
    box-shadow: none;
    padding: 26px 14px;
  }
  .panel .data-table > tbody > tr > td.empty-state-cell { padding: 0 !important; }

  /* ── 4) AKTIONS-ZEILE ALS GLEICHMÄSSIGE CHIP-REIHE ──────────────────────
     Die Aktions-Buttons (bereits eigene Flex-Reihe aus sh-mobile.css) füllen
     die Kartenbreite gleichmäßig und sind sicher daumen-tauglich. */
  .panel .data-table > tbody > tr > td.table-actions .btn {
    flex: 1 1 auto;
    min-width: 96px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin: 0;
  }

  /* ── 5) CHEVRON-AFFORDANCE FÜR DRAWER-KARTEN ────────────────────────────
     Karten mit Detail-Link (öffnen den sh-detail-drawer bzw. die Detail-
     seite) zeigen rechts ein dezentes › — reines Unicode-content, kein
     Bild/data:-URI. Gruppen-Header sind ausgenommen. */
  .panel .data-table > tbody > tr:not(.sh-group-row):has(a[href*="-detail/"]),
  .panel .data-table > tbody > tr:not(.sh-group-row):has([data-open-order], [data-order-id], [data-open-quote], [data-quote-id], [data-open-invoice], [data-invoice-id], [data-open-customer], [data-customer-id]) {
    position: relative;
    padding-right: 28px;
  }
  .panel .data-table > tbody > tr:not(.sh-group-row):has(a[href*="-detail/"])::after,
  .panel .data-table > tbody > tr:not(.sh-group-row):has([data-open-order], [data-order-id], [data-open-quote], [data-quote-id], [data-open-invoice], [data-invoice-id], [data-open-customer], [data-customer-id])::after {
    content: '›';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    line-height: 1;
    color: var(--elmetic-muted, #9aa3af);
    pointer-events: none;
  }
}

/* ── 6) HARMONISIERUNG ≤640px: BEIDE KARTEN-SYSTEME IM GLEICHEN MASS ──────
   Ab hier greifen sh-mobile.css UND sh-mobile-rd.css gleichzeitig; die
   rd-Regeln (laden später) drücken .panel .data-table-Karten auf 8px-Padding.
   Wir vereinheitlichen auf die sh-mobile-Metrik (10/12, Radius 12, 8er-Lücke)
   und ziehen die klassenlosen .table-wrap-Karten optisch nach (Titel-Zelle,
   Badge-Chips, Aktions-Reihe, Leerzustand) — Farben/Tokens der rd-Karten
   bleiben unangetastet. */
@media (max-width: 640px) {
  .table-wrap table:not(.pte-table) tbody tr,
  .data-table:not(.pte-table) tbody tr,
  .panel .data-table > tbody > tr {
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 8px;
  }
  /* Gruppen-Header behalten ihre eigene (flachere) Metrik aus sh-mobile.css. */
  .panel .data-table > tbody > tr.sh-group-row { padding: 9px 12px; }

  /* Karten-Titel auch für klassenlose .table-wrap-Tabellen (rd-System hat
     bislang keine Titel-Hervorhebung; .panel .data-table macht es schon). */
  .table-wrap table:not(.pte-table):not(.data-table) tbody tr > td:first-child:not([colspan]):not(:empty) {
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 4px;
  }
  /* Badge-Chips im rd-System (analog Baustein 1). */
  .table-wrap table:not(.pte-table):not(.data-table) tbody td:not(:first-child):not([colspan]):not(.table-actions):has(.status-badge, .badge, .sh-badge) {
    display: inline-block;
    vertical-align: middle;
    padding: 2px 8px 2px 0;
    max-width: 100%;
  }
  .table-wrap table:not(.pte-table):not(.data-table) tbody td .status-badge,
  .table-wrap table:not(.pte-table):not(.data-table) tbody td .badge,
  .table-wrap table:not(.pte-table):not(.data-table) tbody td .sh-badge {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
  }
  /* Aktions-Zeile im rd-System: eigene, gut tippbare Chip-Reihe (das
     .panel .data-table-System hat das schon aus sh-mobile.css Block 1). */
  .table-wrap table:not(.pte-table):not(.data-table) tbody td.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--elmetic-border-soft, #f0f2f5);
    text-align: left;
  }
  .table-wrap table:not(.pte-table):not(.data-table) tbody td.table-actions .btn {
    flex: 1 1 auto;
    min-width: 96px;
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin: 0;
  }
  /* Leerzustand im rd-System ohne Karten-Chrome (analog Baustein 3). */
  .table-wrap table:not(.pte-table) tbody tr:has(> td.empty-state-cell) {
    background: transparent;
    border: 1px dashed var(--elmetic-border, #e8ebf0);
    box-shadow: none;
    padding: 26px 14px;
  }
  /* Analog Z.91: internal.css setzt .empty-state-cell { padding:24px !important }
     — ohne diesen Konter addiert sich das zum tr-Padding (26+24 ≈ 50px). */
  .table-wrap table:not(.pte-table) tbody td.empty-state-cell { padding: 0 !important; }
}

/* ── Installierte PWA (html.sh-standalone): BEWUSST KEIN Safe-Area-Aufschlag.
   sh-mobile-app.css gibt der Topbar zwar padding-top: env(safe-area-inset-top),
   aber internal-modern.css (@≤900px) hält sie per height: 60px + globalem
   border-box (internal.css `* { box-sizing: border-box }`) auf fixen 60px —
   die Topbar wird im Standalone-Modus also NICHT höher. Die Basis-Regel
   (top: 64px) gilt daher auch in der PWA; ein env()-Aufschlag würde den
   Header um die volle Safe-Area zu tief andocken lassen. Erst nachziehen,
   wenn die Topbar-Höhe im Standalone-Modus real mitwächst. ─────────────────── */

/* ── Dunkles Theme: hartkodierte helle Schattenwerte nachziehen.
   (Flächen/Borders laufen über --elmetic-*-Tokens und drehen via
   sh-tokens.css [data-theme="dark"] automatisch mit.) ─────────────────────── */
@media (max-width: 768px) {
  [data-theme="dark"] .panel .data-table > tbody > tr.sh-group-row {
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  }
  /* --elmetic-border-soft ist NIRGENDS definiert (grep public/ = 0 Treffer)
     → der helle Fallback #f0f2f5 würde sonst auch im Dark-Mode gelten. */
  [data-theme="dark"] .table-wrap table:not(.pte-table):not(.data-table) tbody td.table-actions {
    border-top-color: var(--elmetic-border, #2e2822);
  }
}


/* ╔══ Multi-Agenten-Track (2026-07-19): sh-mobile-app-forms.css — gemergt, Reihenfolge = Kaskade ══╗ */

/* ════════════════════════════════════════════════════════════════════════
   sh-mobile-app-forms.css — TRACK D: Formulare & Filter Feinschliff (≤768px).
   Additive Schicht NACH sh-mobile.css / sh-mobile-rd.css / sh-mobile-app.css
   laden (Kaskade: gleiche Spezifität → spätere Datei gewinnt).
   Desktop (>768px) bleibt unberührt. Kein JavaScript, keine data:-URIs.

   Bausteine:
   1) Selects: Luft für den nativen Pfeil (appearance bleibt nativ!)
   2) Datums-/Zeitfelder auf die 46px-Formlinie (iOS rendert sie sonst flach)
   3) ShFeedback-Dialoge (div-basiert): 16px/46px-Parität — echte Lücke,
      sh-mobile-app.css deckt nur .content + <dialog>-Elemente ab
   4) .filter-toolbar als wischbare App-Filterzeile (analog .sh-facets)
   5) dialog.dialog-Familie (<header><h2>…<footer>) als Bottom-Sheet
   6) .sh-dialog-Familie (shPrompt/ShFeedback) als Bottom-Sheet
   7) .tabs/.tab-btn als wischbare Segmented-Control
   8) Dunkles Theme: Schatten/Backdrops nachgezogen

   Bewusst NICHT gedoppelt (existiert bereits):
   - 16px/46px auf .content-/dialog-Feldern, field-grid 1fr, Checkbox-22px,
     Fokus-Ring, dialog.modal-Bottom-Sheet + sticky .modal-actions
     (sh-mobile-app.css §1/§2 + sh-mobile.css Block 11)
   - .sh-facets-Wischzeile (sh-mobile-app.css §3)
   - .pte-table/Positions-Editor — dokumentierte Grenze, hier ausgenommen
   ════════════════════════════════════════════════════════════════════════ */

/* Eigener Keyframe (kein Verlass auf shSheetUp aus sh-mobile-app.css —
   Datei bleibt eigenständig lauffähig). Inert ohne die Media-Regeln unten. */
@keyframes shFormsSheetUp {
  from { transform: translateY(24px); opacity: .6; }
  to   { transform: translateY(0);    opacity: 1; }
}

@media (max-width: 768px) {

  /* ── 1) SELECTS: Luft für den nativen Pfeil ─────────────────────────────
     Höhe/Schriftgröße (46px/16px) kommen bereits aus sh-mobile-app.css §1 —
     hier NUR: rechter Innenabstand, damit langer Text nicht unter den
     UA-Pfeil läuft, + Ellipsis statt Abschneiden. appearance bleibt nativ
     (internal.css Z.1539/4110 setzt appearance:auto — bewusst respektiert,
     kein eigener Pfeil, keine data:-URIs nötig). */
  .content select:not(.pte-table select),
  .panel select,
  .dialog-body select,
  dialog select,
  .filter-toolbar .select {
    padding-right: 28px;
    text-overflow: ellipsis;
    line-height: 1.3;
  }

  /* ── 2) DATUM/ZEIT AUF DIE 46PX-LINIE ───────────────────────────────────
     iOS/WebKit rendert date/time/datetime-local mit intrinsischer Höhe und
     ignoriert min-height teils → die Felder wirken „flach" neben den 46px-
     Textfeldern. Explizite Höhe zieht sie auf dieselbe Formlinie.
     (datetime-local/time sind in internal.css Z.1518/1519 + Markup
     internal.js Z.2978 nachgewiesen.) */
  .content input[type="date"],
  .content input[type="time"],
  .content input[type="datetime-local"],
  dialog input[type="date"],
  dialog input[type="time"],
  dialog input[type="datetime-local"],
  .sh-dialog-backdrop input[type="date"],
  .sh-dialog-backdrop input[type="time"],
  .sh-dialog-backdrop input[type="datetime-local"] {
    height: 46px;
    box-sizing: border-box;
    line-height: 1.2;
    padding-top: 0;
    padding-bottom: 0;
  }

  /* ── 3) SHFEEDBACK-FORMULARE: 16PX/46PX-PARITÄT ─────────────────────────
     ShFeedback.prompt/.dialog (sh-feedback.js Z.82/95: div.sh-dialog-backdrop
     direkt an document.body) ist WEDER <dialog> NOCH in .content →
     sh-mobile-app.css §1 greift dort nicht. iOS zoomt in diese Felder rein.
     font-size !important: spiegelt exakt das etablierte Muster aus
     sh-mobile-app.css §1 (übersteuert u. a. sh-odoo-theme.css Z.192
     .input/.select font-size .88rem zuverlässig). */
  .sh-dialog-backdrop input:not([type="checkbox"]):not([type="radio"]),
  .sh-dialog-backdrop select,
  .sh-dialog-backdrop textarea {
    font-size: 16px !important;
    min-height: 46px;
    border-radius: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    width: 100%;
  }
  .sh-dialog-backdrop textarea { min-height: 88px; line-height: 1.4; }
  .sh-dialog-backdrop input[type="checkbox"],
  .sh-dialog-backdrop input[type="radio"] {
    width: 22px; height: 22px;
    accent-color: var(--elmetic-red, #e73d25);
    flex: 0 0 auto;
  }

  /* ── 4) FILTER-TOOLBAR = WISCHBARE APP-FILTERZEILE ──────────────────────
     Bisher (sh-mobile.css Block 4) wrappt die Zeile zum Turm. App-Muster wie
     .sh-facets: EINE horizontal wischbare Zeile, nichts wird versteckt.
     !important auf flex-wrap: mehrere Toolbars tragen INLINE
     style="…flex-wrap:wrap…" (internal.js Z.5180, Z.7708) — ohne !important
     blieben genau diese als Türme zurück (inkonsistent). */
  .filter-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .filter-toolbar::-webkit-scrollbar { display: none; }

  /* Kinder scrollen mit statt zu schrumpfen (überschreibt flex:1 1 160px
     aus sh-mobile.css Block 4 — gleiche Spezifität, diese Datei lädt später). */
  .filter-toolbar > .select,
  .filter-toolbar > .input,
  .filter-toolbar > .btn,
  .filter-toolbar > label,
  .filter-toolbar .filter-input {
    flex: 0 0 auto;
    min-width: 0;
  }
  /* Selects: natürliche Breite, aber nie breiter als der Screen. */
  .filter-toolbar > .select { max-width: 70vw; }
  /* Such-/Textfelder: komfortable feste Wischbreite (z. B. #inventorySearch,
     internal.js Z.6065). */
  .filter-toolbar > .input { width: min(64vw, 320px); }
  /* Beschriftungen (z. B. „Datum", internal.js Z.2978) bleiben an ihrem Feld. */
  .filter-toolbar .filter-label { flex: 0 0 auto; white-space: nowrap; }
  /* Chip-Gruppen in der Toolbar (internal.js Z.2321) wischen mit, statt
     innerhalb der Zeile zu wrappen (Basis: sh-design-system.css Z.86 wrap). */
  .filter-toolbar .sh-chips { flex-wrap: nowrap; }
  .filter-toolbar .chip { flex: 0 0 auto; white-space: nowrap; min-height: 36px; }

  /* ── 5) dialog.dialog-FAMILIE ALS BOTTOM-SHEET ──────────────────────────
     Struktur (internal.js Z.8190 ff.): <dialog class="dialog"><form>
     <header><h2>…</h2></header><div class="dialog-body">…</div>
     <footer>Buttons</footer></form></dialog>. Diese Familie (8 Dialoge inkl.
     Rechnung-bezahlt/-Mail, Artikel, Mailbox) bekam bisher KEIN Sheet —
     nur dialog.modal (sh-mobile-app.css §2). Hier die Parität.
     width/max-width !important: internal.css Z.4694–4697 setzt mobil
     width/max-width:95vw !important auf .dialog — anders nicht überstimmbar. */
  dialog.dialog {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    box-sizing: border-box;
    width: auto !important;
    max-width: none !important;
    max-height: 92dvh;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(10, 16, 30, .28);
    background: var(--elmetic-card, #fff);
    padding: 0 14px max(12px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: shFormsSheetUp .22s cubic-bezier(.2, .8, .3, 1);
  }
  dialog.dialog::backdrop { background: rgba(10, 16, 30, .45); }
  /* Spezifitäts-Fix: sh-redesign.css (Z.7313) setzt
     dialog.dialog[open]{animation:shm-pop-in} mit (0,2,1) — das schlägt
     dialog.dialog (0,1,1) und würde die Sheet-Animation ersetzen. Gleiche
     Spezifität hier + spätere Datei → das Sheet fährt wirklich von unten hoch. */
  dialog.dialog[open] { animation: shFormsSheetUp .22s cubic-bezier(.2, .8, .3, 1); }
  /* Wischgriff wie beim dialog.modal-Sheet. */
  dialog.dialog::before {
    content: '';
    display: block;
    width: 42px; height: 4px;
    border-radius: 2px;
    margin: 6px auto 4px;
    background: color-mix(in srgb, var(--elmetic-text, #1f2937) 22%, transparent);
  }
  /* Sheet-Kopf: kompakter, zentrierter Titel. Spezifitäts-Fix: sh-redesign.css
     (Z.7346 ff.) stylt dialog.dialog > form > header mit (0,1,3) — Farbband
     (surf-2) + border-bottom + padding 20/24/14. Ein bloßes
     „dialog.dialog header" (0,1,2) verliert dort → die > form >-Variante
     (Mehrheit der Dialoge: header sitzt im <form>) MUSS explizit stehen,
     und das Farbband wird für die Sheet-Optik neutralisiert. */
  dialog.dialog > header,
  dialog.dialog > form > header {
    padding: 4px 2px 10px;
    background: transparent;
    border-bottom: 0;
  }
  dialog.dialog > header h2,
  dialog.dialog > form > header h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    text-align: center;
    color: var(--elmetic-text, #1f2937);
  }
  /* Aktionsleiste klebt am Fuß (Struktur <footer> internal.js Z.8196;
     Klassen-Variante .dialog-footer internal.css Z.3691). */
  dialog.dialog footer,
  dialog.dialog .dialog-footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 10px;
    background: var(--elmetic-card, #fff);
    border-top: 1px solid var(--elmetic-border, #e8ebf0);
    padding: 10px 0 2px;
    margin-top: 10px;
  }
  dialog.dialog footer .btn,
  dialog.dialog .dialog-footer .btn {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 15px;
  }

  /* ── 6) .sh-dialog-FAMILIE ALS BOTTOM-SHEET ─────────────────────────────
     Zwei Varianten mit identischen Innen-Klassen (__header/__body/__footer):
     a) <dialog class="sh-dialog"> aus sh-dialog.js Z.26–27 (shPrompt/shConfirm)
     b) div.sh-dialog-backdrop > div.sh-dialog aus sh-feedback.js Z.82/90
     Basis-CSS (sh-components-extra.css Z.101–123: zentriert, min-width 360px)
     wird per höherer Spezifität übersteuert — kein !important nötig. */
  dialog.sh-dialog {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    max-height: 92dvh;
    border: 0;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(10, 16, 30, .28);
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    animation: shFormsSheetUp .22s cubic-bezier(.2, .8, .3, 1);
  }
  dialog.sh-dialog::backdrop { background: rgba(10, 16, 30, .45); }

  .sh-dialog-backdrop { align-items: flex-end; }
  .sh-dialog-backdrop .sh-dialog {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(10, 16, 30, .28);
    padding-bottom: max(10px, env(safe-area-inset-bottom, 0px));
    animation: shFormsSheetUp .22s cubic-bezier(.2, .8, .3, 1);
  }
  /* Wischgriff für beide Varianten. */
  dialog.sh-dialog::before,
  .sh-dialog-backdrop .sh-dialog::before {
    content: '';
    display: block;
    width: 42px; height: 4px;
    border-radius: 2px;
    margin: 6px auto 0;
    background: color-mix(in srgb, var(--elmetic-text, #1f2937) 22%, transparent);
  }
  /* Sheet-Kopf: Titel zentriert (Markup: .sh-dialog__title in sh-dialog.js
     Z.42, header>h2 in sh-feedback.js Z.91). */
  .sh-dialog .sh-dialog__title,
  .sh-dialog .sh-dialog__header h2 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    text-align: center;
  }
  /* Aktionsleiste: sticky + große, gleichbreite App-Buttons
     (.sh-dialog__footer: Markup sh-dialog.js Z.44, Basis ux-improvements.css
     Z.384; .sh-btn-Variante laut sh-editor.css Z.4082). */
  .sh-dialog .sh-dialog__footer {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    gap: 10px;
    background: var(--elmetic-card, #fff);
  }
  .sh-dialog .sh-dialog__footer .btn,
  .sh-dialog .sh-dialog__footer .sh-btn {
    flex: 1 1 auto;
    min-height: 48px;
    font-size: 15px;
  }

  /* ── 7) TABS ALS WISCHBARE SEGMENTED-CONTROL ────────────────────────────
     .tabs (internal.css Z.2098: flex+wrap) wrappt mobil zum Turm. App-Muster:
     EINE wischbare Segment-Leiste mit Karten-Pille für den aktiven Tab.
     .tabs-row (internal.js Z.2729) bekommt dieselbe Mechanik.
     Touch-Höhe 44px kommt bereits aus internal.css Z.4611 (pointer:coarse,
     !important) — hier nicht gedoppelt. */
  .tabs, .tabs-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: color-mix(in srgb, var(--elmetic-text, #1f2937) 6%, transparent);
    border-radius: 12px;
    padding: 4px;
    /* internal-modern.css Z.3066 gibt .tabs Rahmen + Schatten, sh-redesign.css
       Z.1022 eine border-bottom-Linie — beides passt nicht zur Segmented-
       Fläche und muss hier explizit weg (gleiche Spezifität, spätere Datei). */
    border: 0;
    box-shadow: none;
  }
  .tabs::-webkit-scrollbar, .tabs-row::-webkit-scrollbar { display: none; }
  .tabs .tab-btn, .tabs-row .tab-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    border: 0;
    border-radius: 9px;
    background: transparent;
    padding: 8px 14px;
    color: var(--elmetic-text-soft, #6b7280);
  }
  .tabs .tab-btn.active, .tabs-row .tab-btn.active {
    background: var(--elmetic-card, #fff);
    color: var(--elmetic-red, #e73d25);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(20, 30, 60, .14);
  }
}

/* ── 8) DUNKLES THEME: Schatten/Backdrops nachziehen ─────────────────────
   (Flächen laufen über die --elmetic-*-Tokens automatisch mit; hartkodiert
   sind hier nur Schatten/Scrims — die brauchen dunklere Werte.) */
@media (max-width: 768px) {
  [data-theme="dark"] dialog.dialog,
  [data-theme="dark"] dialog.sh-dialog,
  [data-theme="dark"] .sh-dialog-backdrop .sh-dialog { box-shadow: 0 -10px 40px rgba(0, 0, 0, .55); }
  [data-theme="dark"] dialog.dialog::backdrop,
  [data-theme="dark"] dialog.sh-dialog::backdrop { background: rgba(0, 0, 0, .6); }
  [data-theme="dark"] .sh-dialog-backdrop { background: rgba(0, 0, 0, .6); }
  [data-theme="dark"] .tabs .tab-btn.active,
  [data-theme="dark"] .tabs-row .tab-btn.active { box-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
}