/* Smartphone-Schicht für alle Billing-Seiten (eingebunden in includes/header.php,
   accounting/includes/header.php und die eigenständigen Seiten).
   Ziel: nichts ragt seitlich raus, alles einspaltig, Tabellen als einfache Karten
   (mobile.js). Opt-outs: .mobile-hide (ausblenden), .mobile-keep (Tabelle unverändert). */

@media (max-width: 768px) {
    html, body { overflow-x: hidden; }
    body { overflow-wrap: break-word; -webkit-text-size-adjust: 100%; }

    .mobile-hide { display: none !important; }

    /* --- Navigation --- */
    .navbar-menu { max-height: calc(100vh - 60px); overflow-y: auto; }
    .navbar-menu .dropdown-content { display: none !important; }
    .navbar-menu .dropdown.active .dropdown-content { display: block !important; }
    .navbar-menu .dropdown > a::after { content: ' ▾'; opacity: .7; }
    .navbar-menu .dropdown.active > a::after { content: ' ▴'; }
    .online-users-dropdown { display: none !important; }

    /* --- Container & Boxen --- */
    .container { max-width: 100% !important; width: auto !important; }
    .content-box, .card, .box, [class*="-card"], [class*="-box"] { max-width: 100%; }
    img, video, iframe, embed, object { max-width: 100% !important; height: auto; }
    canvas, svg { max-width: 100% !important; }
    pre, code { white-space: pre-wrap; word-break: break-word; }

    /* Inline-Layouts der Seiten entschärfen */
    [style*="grid-template-columns"]:not([style*="repeat(7"]):not(.mobile-keep) { grid-template-columns: 1fr !important; }
    [style*="display:flex"], [style*="display: flex"] { flex-wrap: wrap; }
    [style*="min-width"] { min-width: 0 !important; }
    /* flex:1-Textblöcke nicht auf Buchstabenbreite quetschen, sondern in eigene Zeile */
    span[style*="flex:1"], span[style*="flex: 1"], div[style*="flex:1"], div[style*="flex: 1"], p[style*="flex:1"], p[style*="flex: 1"] { flex: 1 1 100% !important; }
    [style*="width:"][style*="px"]:not(img):not(canvas):not(svg):not(span):not(td):not(th):not(.badge) { max-width: 100% !important; }
    [style*="position:fixed"][style*="width"], [style*="position: fixed"][style*="width"] { max-width: calc(100vw - 20px) !important; }

    /* Inline-Raster mit lauter kurzen Kacheln (setzt mobile.js): zweispaltig */
    [style*="grid-template-columns"].m-grid2:not([style*="repeat(7"]):not(.mobile-keep) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .m-grid2 > * { min-width: 0 !important; padding: 12px !important; margin: 0 !important; }
    /* Kennzahlen zweispaltig statt endlos untereinander */
    .stats-grid, .stat-grid, .kpi-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .stat-card, .stat-box, .kpi { padding: 12px !important; min-width: 0 !important; }
    .stat-card .stat-value, .stat-value, .kpi-value { font-size: 1.3rem !important; }

    /* Formulare: volle Breite, kein Zoom beim Antippen (iOS braucht >= 16px) */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
    select, textarea { max-width: 100%; font-size: 16px; }
    form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([size]),
    form select, form textarea { width: 100% !important; box-sizing: border-box; }
    .form-row, .form-grid, .filter-row, .filters { display: flex !important; flex-direction: column !important; gap: 10px !important; }
    .form-row > *, .form-grid > *, .filter-row > *, .filters > * { width: 100% !important; }

    /* Kopfzeilen und Button-Leisten */
    h1 { font-size: 1.45rem; line-height: 1.25; }
    .page-header, .header-actions, .toolbar, .actions { flex-wrap: wrap; gap: 8px; }
    .btn-group, .button-group { display: flex; flex-wrap: wrap; gap: 8px; }
    /* Button-Leisten kompakt: nebeneinander umbrechen statt jeder Button eine volle Zeile */
    .action-buttons, .form-actions { flex-direction: row !important; flex-wrap: wrap !important; gap: 8px !important; }
    .action-buttons .btn, .form-actions .btn { width: auto !important; flex: 1 1 calc(50% - 8px); }
    .btn { padding: 9px 14px !important; min-height: 40px !important; font-size: 14px !important; }
    .btn-sm, .btn-small { padding: 6px 10px !important; min-height: 34px !important; font-size: 13px !important; }

    /* Toasts nicht breiter als das Display */
    #toast-container { left: 10px; right: 10px; top: 70px; }
    .toast { min-width: 0 !important; max-width: none !important; }

    /* Modale Dialoge */
    .modal-content, .modal-dialog, .modal > div { width: auto !important; max-width: calc(100vw - 20px) !important; margin: 10px auto !important; max-height: calc(100vh - 20px); overflow-y: auto; }

    /* Kassabuch-Kopf */
    .header .nav { flex-wrap: wrap; gap: 6px !important; }
    .header .nav a { padding: 8px 10px; }

    /* --- Tabellen als Karten (Klassen setzt mobile.js) --- */
    .data-table, .table-container table { min-width: 0 !important; }
    .m-wrap { overflow-x: visible !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
    /* nicht umgebaute breite Tabellen (.mobile-keep, ohne Kopfzeile) bleiben wischbar */
    .m-scroll { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

    table.m-cards, table.m-cards tbody, table.m-cards tfoot { display: block; width: 100% !important; min-width: 0 !important; border: 0; }
    table.m-cards thead, table.m-cards colgroup { display: none; }
    table.m-cards tfoot tr { background: #f4f7fa; }
    table.m-cards tr {
        display: flex; flex-direction: column; position: relative;
        background: #fff; border: 1px solid #e3e6ea; border-radius: 10px;
        margin: 0 0 10px; padding: 10px 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    table.m-cards tr.m-headrow { display: none; }
    table.m-cards td, table.m-cards th {
        display: block; overflow: hidden;
        border: 0 !important; padding: 3px 0 !important; width: auto !important; max-width: none !important;
        text-align: right !important; background: none !important; font-size: 14px; white-space: normal !important;
    }
    table.m-cards td::before, table.m-cards th::before {
        content: attr(data-label); float: left; max-width: 45%; margin-right: 10px;
        text-align: left; color: #7a8591; font-size: 12px; font-weight: 600; line-height: 1.6;
    }
    table.m-cards td[data-label=""]::before, table.m-cards th[data-label=""]::before { display: none; }
    table.m-cards td[data-label=""] .btn, table.m-cards td[data-label=""] button { margin: 2px 0 2px 6px; }
    /* erste Spalte = Kartentitel */
    table.m-cards tr > .m-title {
        display: block; text-align: left !important; font-weight: 600; font-size: 15px;
        padding-bottom: 6px !important; margin-bottom: 4px; border-bottom: 1px solid #f0f2f4 !important;
    }
    table.m-cards tr > .m-title::before { display: none; }
    table.m-cards td.m-empty { display: none; }
    /* nur die wichtigsten Felder, Rest per Antippen */
    table.m-cards tr:not(.m-open) > .m-extra { display: none; }
    table.m-cards tr.m-has-extra { cursor: pointer; padding-bottom: 26px; }
    table.m-cards tr.m-has-extra::after {
        content: 'mehr ▾'; position: absolute; right: 12px; bottom: 6px; font-size: 12px; color: #3498db;
    }
    table.m-cards tr.m-open::after { content: 'weniger ▴'; }
    table.m-cards tr.m-overflow { display: none; }
    table.m-cards.m-show-all tr.m-overflow { display: flex; }
    .m-more-btn {
        display: block; width: 100%; margin: 4px 0 14px; padding: 12px; border: 1px dashed #b8c2cc;
        border-radius: 10px; background: #f8fafc; color: #2c3e50; font-size: 14px; cursor: pointer;
    }
    /* Formular-Elemente in Karten nicht strecken */
    table.m-cards td input, table.m-cards td select { width: auto !important; max-width: 60%; }
    table.m-cards td .btn, table.m-cards td button { min-height: 36px; padding: 6px 12px; font-size: 13px; }
}

@media (max-width: 400px) {
    .stats-grid, .stat-grid, .kpi-grid, .stats { grid-template-columns: 1fr 1fr !important; }
    .content-box { padding: 12px !important; }
}