/* ════════════════════════════════════════════════════════════════════════
   sh-mobile.css — Additive Mobile-/Touch-Politur für den ServiceHub.
   Lädt NACH allen anderen CSS (override-fähig). Greift NICHT in Tokens ein,
   ändert nur Verhalten ab schmalen Breakpoints. Kein Backend/Restart nötig.

   Bestehendes (bleibt unangetastet):
   - Off-canvas Sidebar + Burger + Backdrop (initMobileSidebar / @media 900px)
   - .table-wrap { overflow-x:auto }  → gewrappte Tabellen scrollen schon
   - .sh-kanban { overflow-x:auto }    → Kanban-Board scrollt schon
   - .sh-facets / .sh-smartbtns { flex-wrap }  → wrappen schon
   - .page-header { flex-wrap:wrap }   → Header wrappt schon

   Hier ergänzt: ungewrappte Tabellen, Touch-Targets, Statusbar-Scroll,
   Toolbar-Umbruch, Detail-Grids, Chatter/Composer auf dem Handy.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* 1) APP-FEEL: data-table-Listen werden zu kompakten, tippbaren Karten statt
        breiter Tabellen → KEIN Quer-Scrollen, übersichtlich, weniger Höhe.
        Die erste Zelle wird zum Karten-Titel, Aktionen kommen in eine eigene
        Reihe, „Gruppieren nach"-Header bleiben volle-Breite-Header. */
  .panel .data-table,
  .panel .data-table > tbody { display: block; width: 100%; }
  .panel .data-table > thead { display: none; }
  .panel .data-table > tbody > tr {
    display: block;
    background: var(--elmetic-card, #fff);
    border: 1px solid var(--elmetic-border, #e8ebf0);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 0 0 8px;
    box-shadow: 0 1px 2px rgba(20, 30, 60, .05);
  }
  .panel .data-table > tbody > tr > td {
    display: block;
    padding: 2px 0;
    border: none;
    white-space: normal;
    font-size: 13.5px;
    color: var(--elmetic-text, #1f2937);
  }
  /* Erste Zelle = Karten-Titel (außer reine Leer-/Span-Zellen). */
  .panel .data-table > tbody > tr > td:first-child:not([colspan]) {
    font-weight: 600;
    font-size: 15px;
    padding-bottom: 4px;
  }
  /* Leer-/Platzhalter-Zelle (colspan) bleibt zentriert, nicht fett. */
  .panel .data-table > tbody > tr > td[colspan] {
    font-weight: normal;
    text-align: center;
  }
  /* Aktionszellen: Buttons in eigene, gut tippbare Reihe. */
  .panel .data-table > tbody > tr > td.table-actions {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--elmetic-border-soft, #f0f2f5);
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    text-align: left;
  }
  .panel .data-table > tbody > tr > td.table-actions .btn { flex: 0 0 auto; }
  /* „Gruppieren nach"-Header bleiben Header (keine Karte). */
  .panel .data-table > tbody > tr.sh-group-row {
    background: var(--elmetic-bg-soft, #f1f5f9);
    border: none;
    border-radius: 8px;
    box-shadow: none;
    padding: 9px 12px;
    margin: 12px 0 8px;
  }
  .panel .data-table > tbody > tr.sh-group-row > td { font-size: 13px; padding: 0; font-weight: 600; }
  /* Nur Kernfelder: sekundäre Spalten (per JS markiert) in den Karten ausblenden. */
  .data-table .sh-col-hide-m { display: none !important; }
  /* Tabellen, die NICHT Listen sind (z. B. in .table-wrap mit vielen Spalten),
     dürfen weiterhin scrollen — falls eine Karte unpassend wäre, greift der Wrap. */

  /* 2) Touch-Targets vergrößern (Apple/Google-Empfehlung ~40–44px). */
  .btn { min-height: 40px; }
  .btn-sm { min-height: 36px; }
  .select, .input, select.select, input.input { min-height: 40px; font-size: 15px; }
  /* iOS zoomt bei <16px Inputs rein — 15px+ vermeidet das meist; Editor-Felder ausgenommen. */

  /* Aktions-Buttons in Tabellenzeilen brauchen mobil etwas Abstand. */
  .table-actions { white-space: nowrap; }
  .table-actions .btn-sm { margin: 2px 0; }

  /* 3) Statusbar: auf dem Handy lieber horizontal scrollen als die Chevrons
        umbrechen (umgebrochene Pfeil-Stufen sehen gebrochen aus). */
  .sh-cp-statusbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sh-statusbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .sh-statusbar__stage { flex: 0 0 auto; }

  /* 4) Filter-/Such-Toolbars: umbrechen, Selects volle Breite. */
  .filter-toolbar { flex-wrap: wrap; gap: 8px; }
  .filter-toolbar > .select,
  .filter-toolbar > .input { flex: 1 1 160px; min-width: 0; }
  .filter-toolbar > .btn { flex: 0 0 auto; }

  /* 5) Detail-Karten-Grids einspaltig (sales-grid nutzt teils feste Spalten). */
  .sales-grid { grid-template-columns: 1fr !important; }

  /* 6) Smart-Buttons mobil etwas kompakter, aber gut tippbar. */
  .sh-smartbtn { flex: 1 1 132px; }

  /* 7) Kanban-Spalten auf dem Handy etwas schmaler, damit man die nächste
        Spalte „peeken" kann (Odoo-typisches Swipe-Gefühl). */
  .sh-kanban__col { flex: 0 0 84vw; max-width: 84vw; }

  /* 8) Chatter-Composer + Eingabefeld umbruchsicher / volle Breite. */
  .sh-chatter__composer { flex-wrap: wrap; }
  .sh-chatter__input { width: 100%; box-sizing: border-box; }
  .sh-chatter__composer-actions { width: 100%; display: flex; justify-content: flex-end; }

  /* 9) Modale Dialoge nutzen fast volle Breite. */
  dialog.modal, .modal { width: 96vw; max-width: 96vw; }
}

/* Sehr schmale Geräte (≤430px): KPI-/Smart-Tiles einspaltig, Titel kleiner. */
@media (max-width: 430px) {
  .sh-smartbtn { flex: 1 1 100%; }
  .page-header h1, .sh-header h1 { font-size: 20px; }
  .sh-kanban__col { flex: 0 0 88vw; max-width: 88vw; }
}

/* ════════════════════════════════════════════════════════════════════════
   Kompakte Dichte (weniger Scrollen) + Bottom-Tab-Navigation (App-Leiste).
   ════════════════════════════════════════════════════════════════════════ */

/* Bottom-Nav: per Default unsichtbar (Desktop), nur ≤768px eingeblendet. */
.sh-bottomnav { display: none; }

@media (max-width: 768px) {
  /* Dichter packen → mehr passt auf einen Screen. */
  .content { padding: 10px 12px 78px !important; }
  .panel { padding: 12px; margin-bottom: 10px; }
  .page-header { margin-bottom: 10px; }
  .page-header h1, .sh-header h1 { font-size: 19px; }
  .subtitle, .sh-header__context { font-size: 12px; }

  /* Bottom-Tab-Leiste — wie eine native App. */
  .sh-bottomnav {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    background: var(--elmetic-card, #fff);
    border-top: 1px solid var(--elmetic-border, #e3e6ea);
    box-shadow: 0 -2px 14px rgba(20, 30, 60, .10);
    padding: 4px 2px calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .sh-bottomnav__item {
    flex: 1 1 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    background: none; border: 0; cursor: pointer;
    padding: 6px 2px; min-height: 50px;
    color: var(--elmetic-text-soft, #6b7280);
    font: 500 10.5px/1 inherit; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .sh-bottomnav__item svg { width: 22px; height: 22px; stroke-width: 2; }
  .sh-bottomnav__item.is-active { color: var(--elmetic-red, #e73d25); }
  .sh-bottomnav__item.is-active svg { stroke-width: 2.4; }
  .sh-bottomnav__lbl { font-size: 10.5px; }

  /* Copilot-FAB (Container #assistant-root) über die Bottom-Leiste heben —
     safe-area-bewusst (iPhone Home-Indikator macht die Leiste höher). */
  #assistant-root { bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; right: 14px !important; }
  /* Sidebar-Overlay-Inhalt soll nicht hinter der Leiste enden. */
  .sidebar { padding-bottom: 70px; }
}

/* ════════════════════════════════════════════════════════════════════════
   Mobile-Härtung 2026-05-31 — additiver Feinschliff nach Live-Mobil-Audit
   (Login + 25 Views/Dialoge @390px, 0px horizontaler Overflow überall).
   Adressiert die verbliebenen Rauh-Kanten: Positions-Editor (Touch + Scroll-
   Hinweis), Dialoge (nie höher als Viewport + sticky „Speichern"), Editor-
   Toolbar-Tap-Targets. REINE CSS-Schicht — kein Eingriff in fragile Engines
   (Positions-Tabelle behält ihr <table>-Markup unverändert).
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* 10) Positions-Editor: horizontaler Scroll bleibt (editierbares Raster),
         aber besser bedienbar — größere Tipp-Felder (kein iOS-Zoom) und ein
         dezenter Hinweis an der rechten Kante „hier geht es weiter". */
  .pte-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .pte-scroll-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 20px; pointer-events: none; border-radius: 0 8px 8px 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(20, 30, 60, .08));
  }
  .pte-cell { padding: 6px 7px; }
  .pte-cell input,
  .pte-cell select,
  .pte-cell textarea {
    min-height: 38px;
    font-size: 16px; /* >=16px verhindert das iOS-Reinzoomen beim Fokus */
  }

  /* 11) Modale Dialoge: nie höher als der Bildschirm, Inhalt scrollt, und die
         Aktionsleiste („Abbrechen/Speichern") klebt sichtbar am Fuß — sonst
         liegt „Speichern" bei langen Formularen unerreichbar unter dem Falz. */
  dialog.modal { max-height: 94vh; }
  dialog.modal .panel,
  dialog.modal form.panel {
    max-height: 92vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  dialog.modal .modal-actions,
  dialog.modal .ui-actions {
    position: sticky; bottom: 0; z-index: 2;
    background: var(--elmetic-card, #fff);
    padding-top: 10px; margin-top: 8px;
    border-top: 1px solid var(--elmetic-border-soft, #eef0f4);
  }

  /* 12) Editor-Control-Panel (Angebot/Auftrag/Rechnung): Icon-Buttons
         daumenfreundlich. */
  .ue-toolbar__btn,
  .sh-cp .ue-toolbar__btn,
  .ue-toolbar__actions .btn { min-width: 40px; min-height: 40px; }

  /* 13) Smart-Buttons (Kunden-/Auftragsdetail: Aufträge/Angebote/Rechnungen)
         als komfortable Tap-Kacheln. */
  .sh-smartbtn { min-height: 56px; }
}


/* ════════════════════════════════════════════════════════════════════════
   Mobil-Härtung 2026-05-31 — Teil 2: Terminkalender-Agenda + Positions-Editor als Karten (≤768px).
   Reine CSS-Schicht, additiv. Greift NICHT in internal.js / position-table-
   engine.js ein — nutzt nur die bestehenden Klassen.
   ════════════════════════════════════════════════════════════════════════ */

/* ── (A) Terminkalender → Agenda-Ansicht auf dem Handy ──────────────────────
   Das 7-Spalten-Monatsraster ist auf 390px unbrauchbar. Wir stapeln die Tage
   zu einer Liste, blenden leere Tage aus (nur Tage MIT Terminen + „heute"
   bleiben) → echte Agenda. Greift für den Dispatch-Kalender (internal.js)
   UND die additive sh-calendar.js (gleiche .sh-cal__*-Klassen). */
@media (max-width: 768px) {
  .sh-cal__dows { display: none; }                 /* Wochentagskopf entfällt in der Liste */
  .sh-cal__cells { display: block; }
  .sh-cal__cell {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--elmetic-border, #e8ebf0);
    border-radius: 12px;
    background: var(--elmetic-card, #fff);
    margin: 0 0 8px;
    min-height: 0;
  }
  /* Leere Tage + Tage aus dem Vor-/Folgemonat ausblenden — außer „heute". */
  .sh-cal__cell.is-out { display: none; }
  .sh-cal__cell:not(.is-today):not(:has(.sh-cal__ev)) { display: none; }
  /* Tagnummer als kompakte, gut lesbare Spalte links. */
  .sh-cal__num {
    flex: 0 0 40px;
    font-weight: 700;
    font-size: 17px;
    color: var(--elmetic-text, #1f2937);
    text-align: center;
    line-height: 1.1;
  }
  .sh-cal__cell.is-today .sh-cal__num {
    color: #fff;
    background: var(--elmetic-red, #e73d25);
    border-radius: 9px;
    padding: 4px 0;
  }
  /* Termine: volle Breite, gut tippbar. */
  .sh-cal__evs { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
  .sh-cal__cell .sh-cal__ev {
    display: block;
    white-space: normal;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 13px;
    min-height: 36px;
  }
  /* „heute" ohne Termine bekommt einen dezenten Hinweis statt leerer Fläche. */
  .sh-cal__cell.is-today:not(:has(.sh-cal__ev)) .sh-cal__evs::after {
    content: 'Heute — keine Termine';
    color: var(--elmetic-muted, #9aa3af);
    font-size: 12.5px; font-style: italic;
  }
  /* Tag-Ansicht (sh-cal-daylist) ist schon eine Liste — nur Chips vergrößern. */
  .sh-cal-daylist .sh-cal__ev { display: block; padding: 8px 10px; min-height: 38px; border-radius: 8px; }
  /* Kalender-Kopfzeile (Navigation/Umschalter) umbruchsicher. */
  .sh-cal-toolbar { flex-wrap: wrap; gap: 8px; }
  .sh-cal-title { font-size: 15px; }
}

/* (B) Positions-Editor: bewusst horizontaler Scroll auf dem Handy.
   Ein CSS-only Karten-Layout scheiterte: die Positions-Engine gibt der
   Tabelle eine inline-Pixelbreite + colgroup; bei display:block bekommen
   die Zellen Breite 0 (getBoundingClientRect().width===0) -> leere Karten.
   Inhalt IST im DOM (Titel/Menge/Preis), nur ohne Layoutbreite. Bis das im
   Engine-Render geloest ist, bleibt das editierbare Raster horizontal
   scrollbar mit Touch-Feldern (16px, kein iOS-Zoom) + Scroll-Hinweis aus
   Block "10)" oben. Bewusste, dokumentierte Grenze. */