/* ============================================================
   POS Mobile Responsive Additions
   Add AFTER pos.css in <head>. Also ensure:
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ============================================================ */

/* ── Global: prevent horizontal scroll ── */
body,
#content {
    overflow-x: hidden;
    max-width: 100%;
}

/* ─────────────────────────────────────────────────────────────
   Mobile & Tablet  (max 1024px)
───────────────────────────────────────────────────────────── */
@media screen and (max-width: 1024px) {

    /* ── Stack columns vertically ── */
    #content {
        height: auto;
        overflow-y: auto;
    }

    #_tabContent,
    #_tabContent tbody,
    #_tabContent tr {
        display: block;
        width: 100%;
    }

    #_tabContentL,
    #_tabContentC,
    #_tabContentR {
        display: block;
        width: 100% !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 2px solid #99bcd7;
        box-sizing: border-box;
    }

    #_tabContentC,
    #_tabContentR {
        margin-top: 10px;
    }

    #_tabContentR {
        border-bottom: none;
    }

    /* ── Box-model fixes ── */
    ._dataKat {
        width: auto !important;
        margin: 6px !important;
        box-sizing: border-box;
    }

    ._dataSKat,
    ._dataMejaDet,
    ._dataMenuDet {
        width: 100% !important;
        margin-left: 6px !important;
        margin-right: 6px !important;
        box-sizing: border-box;
    }

    ._dataSKat td,
    ._dataMejaDet td,
    ._dataMenuDet td {
        overflow: hidden;
    }

    /* ── LEFT: table list ── */
    #_tabContentL ._dataMejaDet {
        width: 100% !important;
        box-sizing: border-box;
    }

    ._iconMeja {
        width: 80px;
        height: 44px;
        font-size: 13px;
        padding: 6px;
        margin-right: 6px;
        margin-left: 6px;
        margin-bottom: 8px;
    }

    ._iconLantai {
        font-size: 13px;
        padding: 6px 10px;
        margin-bottom: 8px;
    }

    /* Hide print buttons */
    ._btnPrint {
        display: none !important;
    }

    /* Petugas selector */
    ._petugas {
        float: none;
        display: block;
        text-align: right;
        margin-top: 4px;
        font-size: 13px;
    }

    ._iconKat,
    ._iconSKat {
        font-size: 13px;
        padding: 5px 8px;
        margin-bottom: 6px;
    }

    /* ── CENTER: menu grid ── */
    ._dataMenuItem {
        height: auto !important;
        overflow-y: visible;
    }

    ._iconMenu {
        width: 140px;
        font-size: 13px;
    }

    ._iconMenu img {
        width: 120px !important;
        height: 120px !important;
    }

    /* ── RIGHT: bill ── */
    #_detBill {
        height: auto !important;
        max-height: 50vh;
    }

    ._tabTotal {
        display: none !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   Small phones  (max 480px)
───────────────────────────────────────────────────────────── */
@media screen and (max-width: 480px) {

    ._hedAtas {
        font-size: 18px;
        padding: 6px 4px;
    }
    
    ._back {
        font-size: 10px;
    }

    ._iconMeja {
        width: 68px;
        height: 40px;
        font-size: 12px;
        margin-right: 4px;
        margin-left: 4px;
    }
    
    #_dialogPindahMeja, #_dialogBatal{
        width: 90% !important;
    }

    /* ── 2-column menu grid ── */

    /* Switch the td that wraps all ._iconMenu cards to a grid */
    ._dataMenuDet td:last-child {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px !important;
    }

    /* Cards fill their grid cell, drop the float */
    ._iconMenu {
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        font-size: 12px;
        box-sizing: border-box;
    }

    /* Images and their class-based equivalents scale to card width */
    ._iconMenu img,
    ._menuItemImg {
        width: 100% !important;
        height: 100px !important;
        object-fit: cover;
    }

    /* Cap the scroll area to 2 card rows before scrolling.
       Each card ≈ 100px img + 50px name + 20px price + 60px controls
       + 50px textarea + 30px button + padding ≈ 340px per row × 2 = 680px */
    ._dataMenuItem {
        max-height: 680px !important;
        overflow-y: auto !important;
    }

    ._btnPlusMin { width: 26px; height: 26px; }
    ._qtyItem    { width: 26px; height: 26px; }

    ._btnTambah {
        width: 60px;
        height: 28px;
        font-size: 12px;
    }

    ._menuSearch {
        width: 80vw;
        font-size: 13px;
    }

    ._btnPindah,
    ._btnAccept {
        font-size: 12px;
        padding: 6px 10px;
    }
}