/* ============================================================
   mobile.css — Mobile-First-Basis (ergaenzt style.css).
   Laedt nach style.css. Regeln greifen NUR bei schmalen
   Viewports (<=992px); der Desktop bleibt unveraendert.
   Schrittweise erweitert und je Seite am Geraet getestet.
   ============================================================ */

/* ---- Globales Sicherheitsnetz: kein horizontaler SEITEN-Scroll am Handy.
   `clip` (nicht `hidden`) vermeidet Scroll-Container-/position:sticky-
   Nebenwirkungen. Innere Container (Datagrids, .dt-container, .es-table)
   behalten ihren EIGENEN horizontalen Scroll. Faengt Rest-Strays ab, die
   einzelne EasyUI-Datagrids (z. B. order/ordert, lieferscheine) erzeugen. */
@media (max-width: 992px) {
    html { overflow-x: clip; }
}

/* ---- DataTables auf TABLET (769-992px): breite Tabelle horizontal
   scrollen lassen, statt die ganze Seite zu sprengen. */
@media (min-width: 769px) and (max-width: 992px) {
    .dt-container,
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .dt-container table.dataTable,
    .dataTables_wrapper table.dataTable {
        width: max-content !important;
        min-width: 100%;
    }
}

/* ---- DataTables auf HANDY (<=768px): jede Zeile als KARTE darstellen.
   thead aus, Zeile = Karte, Zelle = "Label : Wert" (Label kommt aus dem
   data-label-Attribut, das mobile.js je Zelle aus der Spaltenueberschrift
   setzt). Deutlich lesbarer als horizontales Scrollen am Handy. */
@media (max-width: 768px) {
    .dt-container table.dataTable,
    .dataTables_wrapper table.dataTable { width: 100% !important; min-width: 0 !important; }

    table.dataTable thead { display: none; }
    table.dataTable,
    table.dataTable tbody,
    table.dataTable tr { display: block !important; width: 100% !important; }

    table.dataTable tr {
        margin: 0 0 10px;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        background: #fff;
        padding: 4px 10px;
        box-shadow: 0 1px 2px rgba(0,0,0,.05);
    }
    table.dataTable td {
        display: flex !important;
        width: auto !important;
        justify-content: flex-start;   /* Wert direkt neben dem Label */
        align-items: baseline;
        gap: 10px;
        text-align: left;              /* nicht rechtsbuendig */
        white-space: normal !important;
        border: 0 !important;
        border-bottom: 1px solid #f1f3f6 !important;
        padding: 7px 2px !important;
    }
    table.dataTable tr td:last-child { border-bottom: 0 !important; }
    table.dataTable td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        text-align: left;
        flex: 0 0 122px;               /* feste Label-Spalte, Wert schliesst dicht an */
        white-space: normal;
    }
}

/* ---- Monitoring/Geraete: Aktions-Buttons in der nowrap-Zelle der
   eigenen .mon-tbl duerfen am Handy umbrechen (sonst ragt die
   Button-Reihe ueber den Viewport). */
@media (max-width: 992px) {
    .mon-tbl td { white-space: normal !important; }
}

/* ---- Touchartikel-Verwaltung: Kopfzeile umbrechen lassen und das
   feste Zwei-Spalten-Grid (300px 194px) am Handy einspaltig stapeln. */
@media (max-width: 992px) {
    .ta-head { display: flex !important; flex-wrap: wrap !important; align-items: center; gap: 6px 8px; }
    .ta-head > * { max-width: 100%; }
    .ta-grid { grid-template-columns: 1fr !important; }
}

/* ---- Eingang-Log: Eintrittsstatistik-Tabelle (.es-table) am Handy
   horizontal scrollbar statt den Viewport zu sprengen. */
@media (max-width: 992px) {
    .es-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}