/* ==========================================================================
   mobile.css  --  phone & tablet layer for Analytically
   --------------------------------------------------------------------------
   Loaded AFTER css/index.css, so every design token (--surface, --border,
   --color-primary, --radius, --overlay, --shadow-md, ...) is already defined.

   Nothing here touches the desktop layout: every rule is inside
     @media (max-width: 991.98px)   -> handheld  (sidebar becomes a drawer)
     @media (max-width: 767.98px)   -> phone     (full-screen modals, cards)
     @media (min-width:576px) and (max-width:991.98px) -> tablet band
   plus the ".mod-field" opt-in touch layout for the field-operator screens
   (Cassa, Rifornimenti, Tavoli, Prenotazioni, Movimenti di magazzino).
   ========================================================================== */


/* ═══════════════════════════════════════════════════════════════════════════
   1. HANDHELD FOUNDATION  (<= 991.98px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {

    /* No sideways scrolling of the page itself. Wide content (tables) must
       scroll inside its own card -- see §4. `clip` (with a `hidden` fallback
       for old engines) does NOT create a scroll container, so it can't swallow
       the vertical page scroll or break position:sticky. */
    html, body { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
    #main-container, #wrapper { max-width: 100vw; overflow-x: hidden; overflow-x: clip; }

    /* iOS zooms any focused field whose font-size is < 16px. index.css sets
       inputs/selects to .85rem !important, so we must be !important too. */
    input, select, textarea,
    .form-control, .form-select, .form-control-sm, .form-select-sm,
    .select2-search__field, .swal2-input, .swal2-textarea {
        font-size: 16px !important;
    }
    label, .form-label { font-size: .92rem !important; }

    /* Fields must be comfortably tappable. index.css forces .form-control-sm to
       height:1.5rem (~24px) -- unusable on a phone. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    .form-control, .form-select,
    .form-control-sm, .form-select-sm {
        height: auto;
        min-height: 46px;
        padding-top: .5rem;
        padding-bottom: .5rem;
    }
    textarea, textarea.form-control { min-height: 84px; }
    .input-group > .form-control,
    .input-group > .form-select { min-height: 46px; }

    /* Comfortable touch targets. */
    .btn { min-height: 40px; padding: .5rem .9rem; }
    .btn-sm { min-height: 36px; }
    .nav_link { min-height: 48px; }
    .page-link, .paginate_button { min-height: 40px; display: inline-flex; align-items: center; }

    /* Oversized display headings (home, splash) must not overflow. */
    h1.display-1, .display-1 { font-size: clamp(2rem, 12vw, 4rem); }
    h4.display-6, .display-6 { font-size: clamp(1.1rem, 5vw, 1.6rem); }
    .row.text-center.mt-5 { margin-top: 2rem !important; }


    /* ─────────────────────────────────────────────────────────────────────
       2. TOP NAVBAR
       ───────────────────────────────────────────────────────────────────── */
    .navbar { height: auto; min-height: 56px; padding-left: .75rem; padding-right: .75rem; }

    /* index.css / navbar.php push the hamburger right by the sidebar width. */
    .header_toggle { padding-left: .25rem !important; }
    #header.body-pd { padding-left: .25rem !important; }
    #header-toggle { font-size: 1.7rem; padding: .25rem .5rem; line-height: 1; }

    .nav-container { margin-right: .25rem; gap: .3rem; font-size: .9rem; }
    .nav-container > a#business { display: none !important; }
    .theme-toggle-btn, .profile-img { width: 38px; height: 38px; }
    #nav-lang-btn { height: 38px; }
    .plan-badge { height: 38px; }


    /* ─────────────────────────────────────────────────────────────────────
       3. SIDEBAR  ->  OFF-CANVAS DRAWER
       navbar.php ships an inline <style> that loads AFTER this file and wins
       specificity ties, so the drawer rules are keyed on the #nav-bar id to
       stay authoritative. The markup always carries class "show-nav" (desktop
       rail); on handheld we ignore it and drive open/closed from body.nav-open,
       toggled by navbar.js together with #nav-backdrop.
       ───────────────────────────────────────────────────────────────────── */
    #nav-bar.l-navbar {
        left: -100%;
        width: min(84vw, 300px);
        height: 100vh;
        height: 100dvh;
        padding: .5rem 0 1rem 0;
        box-shadow: none;
        overflow-y: auto;
        transition: left .28s ease;
    }
    body.nav-open #nav-bar.l-navbar {
        left: 0;
        box-shadow: var(--shadow-md);
    }

    #nav-bar .nav_logo,
    #nav-bar .nav_link {
        grid-template-columns: max-content 1fr;
        column-gap: 1rem;
        padding: .95rem 1.25rem;
        font-size: 1rem;
        margin-bottom: .1rem;
        border-radius: 0;
        min-height: 50px;
    }
    #nav-bar .nav_name { display: inline !important; white-space: normal; }
    #nav-bar .nav_icon { font-size: 1.4rem; }
    #nav-bar .side-nav { overflow: visible; }

    /* content sits flush; kill the desktop left padding that follows the rail */
    #wrapper.body-pd,
    #wrapper.wrapper.body-pd { padding-left: .8rem !important; padding-right: .8rem !important; }
    .wrapper { padding-left: .8rem; padding-right: .8rem; margin-bottom: 4rem; }

    #nav-backdrop {
        position: fixed;
        inset: 0;
        background: var(--overlay);
        z-index: 99;           /* under .l-navbar (z-index:100), over content */
        opacity: 0;
        pointer-events: none;
        transition: opacity .25s ease;
    }
    #nav-backdrop.show { opacity: 1; pointer-events: auto; }
    body.nav-open { overflow: hidden; }


    /* ─────────────────────────────────────────────────────────────────────
       4. DATATABLES  --  controls stack; wide tables scroll inside their card
       ───────────────────────────────────────────────────────────────────── */
    .mod-table-card { overflow-x: auto; }
    .dataTables_wrapper { padding: .5rem; overflow-x: auto; }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        text-align: left;
        width: 100%;
        margin-bottom: .5rem;
    }
    .dataTables_wrapper .dataTables_filter label { display: block; }
    .dataTables_wrapper .dataTables_filter input { width: 100%; margin-left: 0; }
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate { float: none; text-align: center; }
    .dataTables_wrapper .dataTables_paginate { margin-top: .5rem; }

    /* ─────────────────────────────────────────────────────────────────────
       5. SHARED MODULE CHROME
       ───────────────────────────────────────────────────────────────────── */
    .mod-page-header {
        flex-wrap: wrap;
        gap: .5rem;
        padding: .6rem .75rem;
    }
    .mod-page-header-title { font-size: .95rem; }

    .mod-action-bar {
        justify-content: stretch;
        padding: .6rem;
        gap: .5rem;
    }
    .mod-action-bar > div { width: 100%; }
    .mod-action-bar input,
    .mod-action-bar select,
    .mod-action-bar .form-control,
    .mod-action-bar .form-select,
    .mod-action-bar .btn,
    .mod-action-bar .select2-container {
        width: 100% !important;
        max-width: none !important;
    }

    /* a stacked col-md-6 split shouldn't keep a dangling vertical rule */
    .row.g-0 > .border-end,
    .row > .border-end { border-right: 0 !important; }

    /* select2 single -> touch height */
    .select2-container--default .select2-selection--single { height: 44px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 44px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px; }

    /* analytics: tab strip scrolls instead of wrapping into a jumble */
    .nav-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .nav-tabs .nav-link { white-space: nowrap; }
    #analytics_date_panel { flex-wrap: wrap; }
    #analytics_date_panel input { flex: 1 1 45%; max-width: none !important; }

    /* charts never wider than the screen */
    canvas { max-width: 100% !important; height: auto !important; }

    /* auth / plans */
    .auth-wrapper { padding: 1rem .75rem; min-height: auto; }
    .auth-card { padding: 1.75rem 1.25rem; box-shadow: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. PHONE  (<= 767.98px)  --  full-screen modals
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    .modal { padding: 0 !important; }
    .modal-dialog,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-md,
    .modal-dialog.modal-sm {
        width: 100%;
        max-width: 100%;
        min-height: 100%;
        margin: 0 !important;
    }
    .modal-content {
        height: 100vh !important;
        height: 100dvh !important;
        border: 0;
        border-radius: 0;
    }
    .modal-header {
        position: sticky;
        top: 0;
        z-index: 5;
        background: var(--surface);
        padding: .75rem 1rem;
    }
    .modal-header .close,
    .modal-header .btn-close {
        font-size: 1.9rem;
        line-height: 1;
        padding: .1rem .6rem;
        margin: -.25rem -.25rem -.25rem auto;
    }
    .modal-body { overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .modal-body > .container-fluid,
    .container-fluid[name="modal-content"] { padding-left: .75rem; padding-right: .75rem; }

    /* record forms inside modals: one column, roomy rows */
    .modal-body .row > [class*="col-"] { margin-bottom: .35rem; }


    /* ─────────────────────────────────────────────────────────────────────
       7. DESKTOP TABLES  ->  REAL CARDS   (every list view on a phone)
       MOBILE.labelCells() (js/mobile.js) stamps data-th + a data-role on the
       key cells; the row then becomes a 2-column CSS grid with a proper
       hierarchy: headline, status badge, "stat" metadata blocks, and big
       full-width action buttons at the bottom. No nodes are moved, so
       DataTables' delegated click handlers keep working.
       ───────────────────────────────────────────────────────────────────── */

    /* on a phone the wrapper card is just a transparent container -- each row
       carries its own card styling */
    .mod-table-card {
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }
    .mod-table-card > .dataTables_wrapper,
    .mod-table-card > .p-3 { padding: 0 !important; }

    table.dataTable,
    .mod-field table.table { border: 0; width: 100% !important; }
    table.dataTable thead, table.dataTable colgroup,
    .mod-field table.table thead, .mod-field table.table colgroup { display: none; }
    table.dataTable tbody,
    .mod-field table.table tbody { display: block; }

    /* ---- the card ---------------------------------------------------------- */
    table.dataTable tbody tr,
    .mod-field table.table tbody tr {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .6rem .9rem;
        align-content: start;
        padding: .95rem 1rem;
        margin-bottom: .85rem;
        border: 1px solid var(--border-strong) !important;
        border-radius: 12px;
        background: var(--surface) !important;
        box-shadow: var(--shadow-sm);
    }
    table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > *,
    .mod-field table.table-striped > tbody > tr:nth-of-type(odd) > * { background: transparent !important; }

    /* ---- generic cell reset -> "stat" block (label over value) ----------- */
    table.dataTable tbody td,
    .mod-field table.table tbody td {
        display: block;
        width: auto !important;      /* beats index.css .dt-actions-cell{width:1%!important} */
        max-width: 100% !important;
        min-width: 0;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
        white-space: normal !important;
        overflow-wrap: anywhere;
        font-size: 1rem !important;
        font-weight: 500;
        color: var(--text);
        order: 5;
    }
    table.dataTable tbody td::before,
    .mod-field table.table tbody td::before {
        content: attr(data-th);
        display: block;
        margin-bottom: .1rem;
        font-size: .72rem;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-faint);
    }
    /* a metadata cell with no value adds nothing -- drop it */
    table.dataTable tbody td:not([data-role]):empty,
    .mod-field table.table tbody td:not([data-role]):empty { display: none; }

    /* ---- headline ------------------------------------------------------- */
    table.dataTable tbody td[data-role="title"],
    .mod-field table.table tbody td[data-role="title"] {
        order: 0;
        grid-column: 1 / -1;
        font-size: 1.1rem !important;
        font-weight: 700;
        line-height: 1.3;
    }
    table.dataTable tbody tr[data-badge] td[data-role="title"],
    .mod-field table.table tbody tr[data-badge] td[data-role="title"] {
        grid-column: 1; align-self: center;
    }
    table.dataTable tbody td[data-role="title"]::before,
    .mod-field table.table tbody td[data-role="title"]::before { content: none; }

    /* ---- status badge (top-right, next to the headline) ----------------- */
    table.dataTable tbody td[data-role="badge"],
    .mod-field table.table tbody td[data-role="badge"] {
        order: 1;
        grid-column: 2;
        justify-self: end;
        align-self: center;
    }
    table.dataTable tbody td[data-role="badge"]::before,
    .mod-field table.table tbody td[data-role="badge"]::before { content: none; }

    /* ---- lone thumbnail (top strip) ----------------------------------- */
    table.dataTable tbody td[data-role="media"],
    .mod-field table.table tbody td[data-role="media"] {
        order: -1;
        grid-column: 1 / -1;
    }
    table.dataTable tbody td[data-role="media"]::before,
    .mod-field table.table tbody td[data-role="media"]::before { content: none; }
    table.dataTable tbody td[data-role="media"] img,
    .mod-field table.table tbody td[data-role="media"] img {
        width: 48px; height: 48px; object-fit: cover; border-radius: 8px; display: block;
    }

    /* ---- actions: bottom of the card, big full-width buttons ---------- */
    table.dataTable tbody td[data-role="action"],
    .mod-field table.table tbody td[data-role="action"] {
        grid-column: 1 / -1;         /* always full width -> robust regardless of
                                       how many metadata cells precede them */
        display: flex;
        gap: .5rem;
        margin-top: .35rem !important;
        padding-top: .75rem !important;
        border-top: 1px solid var(--border) !important;
    }
    /* stack multiple action cells in DOM order, just below the metadata */
    table.dataTable tbody td[data-role="action"][data-act-index="0"],
    .mod-field table.table tbody td[data-role="action"][data-act-index="0"] { order: 90; }
    table.dataTable tbody td[data-role="action"][data-act-index="1"],
    .mod-field table.table tbody td[data-role="action"][data-act-index="1"] { order: 91; border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
    table.dataTable tbody td[data-role="action"][data-act-index="2"],
    .mod-field table.table tbody td[data-role="action"][data-act-index="2"] { order: 92; border-top: 0 !important; margin-top: 0 !important; padding-top: 0 !important; }
    table.dataTable tbody td[data-role="action"]::before,
    .mod-field table.table tbody td[data-role="action"]::before { content: none; }

    table.dataTable tbody td[data-role="action"] .btn,
    table.dataTable tbody td[data-role="action"] > a,
    .mod-field table.table tbody td[data-role="action"] .btn,
    .mod-field table.table tbody td[data-role="action"] > a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: .4rem;
        flex: 1 1 0;                 /* buttons that share a cell split it evenly */
        min-height: 46px;
        margin: 0;
        font-size: .95rem;
    }
    table.dataTable tbody td[data-role="action"] i,
    .mod-field table.table tbody td[data-role="action"] i { font-size: 1.15rem; }
    /* label the icon-only "open" control of the operator lists */
    .mod-field table tbody td[data-role="action"] a[name="open_session"]::after,
    .mod-field table tbody td[data-role="action"] a[name="open_restock"]::after,
    table.dataTable tbody td[data-role="action"] a[name="open_session"]::after,
    table.dataTable tbody td[data-role="action"] a[name="open_restock"]::after { content: "Apri"; }

    /* ---- "no data" row ------------------------------------------------- */
    table.dataTable tbody td[colspan],
    table tbody td[colspan] {
        display: block;
        grid-column: 1 / -1;
        text-align: center !important;
        color: var(--text-muted);
    }
    table.dataTable tbody td[colspan]::before,
    table tbody td[colspan]::before { content: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. FIELD MODE  --  genuinely simplified touch layout for on-the-floor use
   Scope: .mod-field (added to the root of each field view) + phone width.
   Shares the phone boundary with §7; genuine tablets (>=768) fall to §9.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

    /* ---- 8a.  CASSA  (sales_session_record.php, inside #modal-1-lg-window) --- */
    .mod-field .row.g-0 { flex-direction: column; }
    .mod-field .row.g-0 > .col-md-6 {
        max-width: 100%;
        flex: 0 0 100%;
        max-height: none !important;
        overflow: visible !important;
        border-right: 0 !important;
    }
    .mod-field .row.g-0 > .col-md-6.border-end { border-bottom: 1px solid var(--border); }

    .mod-field #pos_drink_filter {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--surface);
        padding: .4rem 0;
        height: 46px;
    }

    .mod-field #pos_drink_grid > .col-6 { flex: 0 0 100%; max-width: 100%; }
    .mod-field .pos-drink-card {
        position: relative;
        padding: .6rem !important;
        padding-right: 3.5rem !important;
        min-height: 68px;
        gap: .75rem !important;
    }
    .mod-field .pos-drink-card img { width: 52px !important; height: 52px !important; }
    .mod-field .pos-drink-name { font-size: 1rem !important; white-space: normal !important; }
    .mod-field .pos-drink-price { font-size: 1rem !important; }
    /* "tap to add" affordance, no markup change */
    .mod-field .pos-drink-card::after {
        content: "+";
        position: absolute;
        right: .7rem;
        top: 50%;
        transform: translateY(-50%);
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
        background: var(--color-primary-soft);
        color: var(--color-primary);
        font-size: 1.3rem;
        font-weight: 700;
        line-height: 2rem;
        text-align: center;
    }

    /* right column becomes an explicit flex stack so the checkout bar is last */
    .mod-field .row.g-0 > .col-md-6:last-child { display: flex; flex-direction: column; }
    .mod-field .pos-receipt-scroll { order: 1; max-height: none !important; overflow: visible !important; }
    .mod-field .pos-receipt-history { order: 2; margin-top: 1.5rem !important; }
    .mod-field .pos-checkout-bar {
        order: 3;
        position: sticky;
        bottom: 0;
        z-index: 3;
        background: var(--surface);
        border-top: 1px solid var(--border);
        margin: 1rem -1rem 0;
        padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
        box-shadow: 0 -6px 16px -8px rgba(0, 0, 0, .25);
    }
    .mod-field #pos_total { font-size: 1.4rem !important; }
    .mod-field #pos_confirm_btn { min-height: 52px; font-size: 1.05rem; }

    /* receipt + history lines: card rows already handled in §7; enlarge the
       qty steppers so they are thumb-sized */
    .mod-field #pos_order_body .qty-dec,
    .mod-field #pos_order_body .qty-inc {
        min-width: 40px;
        min-height: 40px;
        font-size: 1.15rem;
        padding: 0 !important;
    }
    .mod-field #pos_order_body a[name="remove_item"] i,
    .mod-field #session_history_body a[name="del_sale"] i { font-size: 1.4rem; }

    .mod-field #close_session_btn { min-height: 40px; padding: .4rem .8rem; }
    .mod-field .session-status-badge { font-size: .8rem; padding: 4px 10px; }


    /* ---- 8b.  RIFORNIMENTI  (restock_record.php) ------------------------- */
    .mod-field #restock_ing_select,
    .mod-field .row.g-2 > [class*="col-"] { width: 100%; }
    .mod-field .row.g-2 > [class*="col-"] { flex: 0 0 100%; max-width: 100%; margin-bottom: .5rem; }
    .mod-field #restock_qty,
    .mod-field #restock_cost { height: 46px; font-size: 16px; }
    .mod-field #add_restock_item_btn { width: 100%; min-height: 48px; }
    .mod-field .restock-ing-img { width: 44px !important; height: 44px !important; }


    /* ---- 8c.  TAVOLI / PIANTINA  (tables_landing_page.php) --------------- */
    /* the card that wraps the 3 columns must not clip its (now tall) content */
    .mod-field .mod-table-card { overflow: visible; }
    .mod-field .row.g-0 > .tables-col,
    .mod-field .row.g-0 > .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
        min-height: 0;
        border-right: 0;
        border-bottom: 1px solid var(--border-strong);
        padding: 1.1rem 1rem;
    }
    .mod-field .row.g-0 > [class*="col-"]:first-child { padding-top: .5rem; }
    .mod-field .tables-col:last-child,
    .mod-field .row.g-0 > .col-md-4:last-child { border-bottom: 0; padding-bottom: 2rem; }
    .mod-field .tables-item {
        min-height: 50px;
        font-size: .95rem;
        padding: .7rem .85rem;
        margin-bottom: .6rem;
    }
    .mod-field .tables-item-actions button { min-height: 38px; min-width: 38px; }
    .mod-field #add_floor_btn,
    .mod-field #add_room_btn,
    .mod-field #add_table_btn { padding: .45rem .8rem; white-space: nowrap; }


    /* ---- 8d.  PRENOTAZIONI  (reservations_landing_page.php + record) ----- */
    .mod-field .res-status-badge { font-size: .8rem; padding: 4px 10px; }
    /* row->card handled in §7 */
    .mod-field #res_save_btn { width: 100%; min-height: 48px; }
    .mod-field .p-2 > .text-end { text-align: center !important; }


    /* ---- 8e.  MOVIMENTI DI MAGAZZINO  (stock_movements.php) ------------- */
    .mod-field #movements_filter_stock { max-width: none !important; width: 100%; }
    .mod-field #load_movements_btn { width: 100%; min-height: 44px; }
    .mod-field .d-flex.align-items-center.gap-2.mb-3 { flex-wrap: wrap; }
    .mod-field .movement-badge-in,
    .mod-field .movement-badge-out { font-size: .8rem; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. TABLET BAND  (576px – 991.98px)  --  a few grid nudges
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* genuine tablets keep the field POS as a real 2-pane layout, just tighter;
       phones (incl. landscape, < 768) keep the single-column touch flow of §8 */
    .mod-field .row.g-0 { flex-direction: row; }
    .mod-field .row.g-0 > .col-md-6 { flex: 0 0 50%; max-width: 50%; }
    .mod-field #pos_drink_grid > .col-6 { flex: 0 0 50%; max-width: 50%; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. THEME FIX  --  modal close "x"  (all widths)
   modal.php renders a text "x" as <button class="close">. index.css's dark
   rule `[data-theme="dark"] .close { filter: invert(1) ... }` is meant for the
   SVG .btn-close, but on the text "x" it flips an already-light glyph dark, so
   it disappears on the dark header. It is also invisible under system-dark
   (no [data-theme] attr) where .close keeps color:#000. Pin it to the theme
   text colour and give it a real 44px tap target. .btn-close (SVG) is left to
   index.css. */
.modal-header .close,
.modal .close {
    filter: none !important;
    color: var(--text) !important;
    text-shadow: none !important;
    opacity: .85;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    font-size: 1.7rem;
    line-height: 1;
}
.modal-header .close:hover,
.modal .close:hover { opacity: 1; }