/* =========================================================
   PROCUREMENT MOBILE UI
   v1.16.75-mobile.1
   ---------------------------------------------------------
   Responsive application shell for phones/tablets.
   Desktop layout is intentionally left untouched.
   ========================================================= */

:root{
    --proc-mobile-header-h:56px;
    --proc-mobile-nav-h:64px;
    --proc-mobile-gutter:12px;
    --proc-mobile-blue:#a37a0b;
}

.mobile-app-header,
.mobile-app-nav,
.mobile-menu-backdrop{display:none}

@media (max-width:900px){
    html,body{max-width:100%;overflow-x:hidden}
    body.mobile-menu-open{overflow:hidden;touch-action:none}
    .app-sidebar,.mobile-app-header,.mobile-app-nav,.mobile-menu-backdrop{-webkit-user-select:none;user-select:none}

    /* Disable the desktop zoom compensation on mobile. */
    body.procurement-zoom-stable{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        zoom:1 !important;
    }

    body.has-app-sidebar{
        padding:calc(var(--proc-mobile-header-h) + env(safe-area-inset-top,0px)) 0 calc(var(--proc-mobile-nav-h) + env(safe-area-inset-bottom,0px)) !important;
        margin:0 !important;
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        background:#f1f3f5;
    }

    /* Mobile top app bar */
    .mobile-app-header{
        position:fixed;
        display:flex;
        align-items:center;
        gap:10px;
        left:0;
        right:0;
        top:0;
        height:var(--proc-mobile-header-h);
        padding:0 12px;
        padding-top:env(safe-area-inset-top,0px);
        box-sizing:content-box;
        background:#fff;
        border-bottom:1px solid #e5e7eb;
        box-shadow:0 2px 10px rgba(15,23,42,.08);
        z-index:7000;
        font-family:Arial,sans-serif;
    }
    .mobile-menu-button{
        width:40px;height:40px;flex:0 0 40px;
        display:inline-flex;align-items:center;justify-content:center;
        border:0;border-radius:10px;background:#f3f4f6;color:#111827;
        font-size:22px;line-height:1;cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }
    .mobile-menu-button:active{transform:scale(.97)}
    .mobile-app-title{min-width:0;display:flex;flex-direction:column;justify-content:center}
    .mobile-app-title strong{font-size:15px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mobile-app-title span{font-size:10px;color:#6b7280;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

    /* Existing sidebar becomes a slide-in navigation drawer. */
    .app-sidebar{
        position:fixed !important;
        left:0 !important;
        top:0 !important;
        bottom:0 !important;
        width:min(84vw,320px) !important;
        height:100dvh !important;
        min-height:0 !important;
        max-height:none !important;
        margin:0 !important;
        padding:calc(16px + env(safe-area-inset-top,0px)) 13px calc(18px + env(safe-area-inset-bottom,0px)) !important;
        border-radius:0 16px 16px 0 !important;
        overflow-y:auto !important;
        box-shadow:8px 0 30px rgba(15,23,42,.18) !important;
        transform:translateX(-105%);
        transition:transform .22s ease;
        z-index:7100 !important;
    }
    .app-sidebar.mobile-open{transform:translateX(0)}
    .app-sidebar-links{display:flex !important;flex-direction:column !important;gap:2px !important}
    .app-sidebar-link{min-height:46px;padding:11px 12px;font-size:15px;border-radius:9px}
    .app-sidebar-brand{padding-top:2px}

    .mobile-menu-backdrop{
        position:fixed;
        inset:0;
        display:block;
        background:rgba(15,23,42,.42);
        opacity:0;
        pointer-events:none;
        transition:opacity .2s ease;
        z-index:7050;
    }
    body.mobile-menu-open .mobile-menu-backdrop{opacity:1;pointer-events:auto}

    /* Bottom navigation, familiar to Android/iOS web apps. */
    .mobile-app-nav{
        position:fixed;
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        left:0;right:0;bottom:0;
        min-height:var(--proc-mobile-nav-h);
        padding:5px 6px env(safe-area-inset-bottom,0px);
        box-sizing:content-box;
        background:rgba(255,255,255,.98);
        border-top:1px solid #e5e7eb;
        box-shadow:0 -3px 14px rgba(15,23,42,.08);
        z-index:7000;
        font-family:Arial,sans-serif;
        transform:translateY(0);
        transition:transform .22s ease;
        will-change:transform;
    }
    .mobile-app-nav.admin{grid-template-columns:repeat(4,minmax(0,1fr))}
    /*
     * Menyembunyikan bilah navigasi saat scroll ke bawah (diaktifkan oleh
     * script di includes/sidebar.php), supaya konten yang kebetulan berada
     * di garis lipat viewport (fold) tidak tertutup bilah fixed ini saat
     * pengguna scroll untuk melihatnya. Kondisi drawer/menu terbuka
     * mengunci bilah tetap tampil (lihat sidebar.php) karena backdrop sudah
     * menutupi seluruh layar di atasnya.
     */
    .mobile-app-nav.nav-hidden{transform:translateY(110%)}

    .mobile-nav-item{
        min-width:0;
        display:flex;flex-direction:column;align-items:center;justify-content:center;
        gap:3px;
        border:0;background:transparent;color:#6b7280;
        text-decoration:none;cursor:pointer;
        border-radius:9px;
        font:700 10px/1 Arial,sans-serif;
        -webkit-tap-highlight-color:transparent;
    }
    .mobile-nav-item .nav-icon{font-size:19px;line-height:20px}
    .mobile-nav-item.active{color:var(--proc-mobile-blue);background:#fdf6e3}
    .mobile-nav-item:active{transform:scale(.97)}

    /* Main page sizing */
    body.has-app-sidebar .page,
    body.has-app-sidebar .container{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        margin:0 !important;
        padding-left:var(--proc-mobile-gutter) !important;
        padding-right:var(--proc-mobile-gutter) !important;
    }

    body.has-app-sidebar .page{padding-top:10px !important;padding-bottom:8px !important}

    body.has-app-sidebar .card,
    body.has-app-sidebar .panel{
        max-width:100% !important;
        border-radius:12px;
    }

    /* Prevent text and controls from escaping the viewport. */
    body.has-app-sidebar img,
    body.has-app-sidebar video,
    body.has-app-sidebar canvas,
    body.has-app-sidebar iframe{max-width:100%;height:auto}

    body.has-app-sidebar input,
    body.has-app-sidebar select,
    body.has-app-sidebar textarea{
        max-width:100%;
    }

    body.has-app-sidebar button,
    body.has-app-sidebar .btn,
    body.has-app-sidebar .row-btn,
    body.has-app-sidebar a.button{
        min-height:42px;
    }

    /* Mobile-friendly common headers/toolbars. */
    body.has-app-sidebar .header,
    body.has-app-sidebar .header-content,
    body.has-app-sidebar .topbar{
        flex-wrap:wrap !important;
        align-items:flex-start !important;
    }
    body.has-app-sidebar .header-actions,
    body.has-app-sidebar .actions,
    body.has-app-sidebar .toolbar,
    body.has-app-sidebar .top-actions{
        width:100%;
        flex-wrap:wrap;
    }
    body.has-app-sidebar .header-actions > *,
    body.has-app-sidebar .actions > *,
    body.has-app-sidebar .toolbar > *,
    body.has-app-sidebar .top-actions > *{
        flex:1 1 140px;
    }

    /* Forms/grids collapse to a comfortable single column. */
    body.has-app-sidebar .grid,
    body.has-app-sidebar .form-grid,
    body.has-app-sidebar .filter-grid,
    body.has-app-sidebar .filter,
    body.has-app-sidebar .filters,
    body.has-app-sidebar .admin-tools,
    body.has-app-sidebar .outlet-form-grid,
    body.has-app-sidebar .project-form-grid,
    body.has-app-sidebar .user-form-grid{
        grid-template-columns:1fr !important;
    }

    /* Data-heavy tables stay available through a controlled horizontal scroll
       instead of forcing the entire page wider than the phone. */
    body.has-app-sidebar .table-wrap,
    body.has-app-sidebar .matrix-wrap{
        width:100% !important;
        max-width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
    }

    body.has-app-sidebar table{max-width:none}

    /* Compact typography for small screens. */
    body.has-app-sidebar h1{font-size:22px !important;line-height:1.2}
    body.has-app-sidebar h2{font-size:19px !important;line-height:1.25}
    body.has-app-sidebar h3{font-size:16px !important;line-height:1.3}

    /* PR list: turn the wide desktop table into stacked cards. */
    body.has-app-sidebar .pr-mobile-table thead{display:none}
    body.has-app-sidebar .pr-mobile-table,
    body.has-app-sidebar .pr-mobile-table tbody,
    body.has-app-sidebar .pr-mobile-table tr,
    body.has-app-sidebar .pr-mobile-table td{display:block;width:100%;min-width:0 !important}
    body.has-app-sidebar .pr-mobile-table{border:0 !important}
    body.has-app-sidebar .pr-mobile-table tr{
        margin-bottom:12px;
        padding:12px;
        background:#fff;
        border:1px solid #e5e7eb;
        border-radius:11px;
        box-shadow:0 2px 9px rgba(15,23,42,.06);
    }
    body.has-app-sidebar .pr-mobile-table td{
        padding:7px 0 !important;
        border:0 !important;
        text-align:left !important;
    }
    body.has-app-sidebar .pr-mobile-table td::before{
        display:block;
        margin-bottom:3px;
        color:#6b7280;
        font-size:9px;
        font-weight:800;
        letter-spacing:.35px;
    }
    body.has-app-sidebar .pr-mobile-table td:nth-child(1)::before{content:'PURCHASE REQUEST'}
    body.has-app-sidebar .pr-mobile-table td:nth-child(2)::before{content:'INPUT OLEH'}
    body.has-app-sidebar .pr-mobile-table td:nth-child(3)::before{content:'PROYEK / OUTLET'}
    body.has-app-sidebar .pr-mobile-table td:nth-child(4)::before{content:'PRIORITAS / ITEM'}
    body.has-app-sidebar .pr-mobile-table td:nth-child(5)::before{content:'STATUS PROSES'}
    body.has-app-sidebar .pr-mobile-table td:nth-child(6)::before{content:'AKSI'}
    body.has-app-sidebar .pr-mobile-table .row-actions{min-width:0 !important;width:100%;display:grid;grid-template-columns:1fr 1fr;gap:7px}
    body.has-app-sidebar .pr-mobile-table .row-actions .row-btn{min-height:42px;display:flex;align-items:center;justify-content:center}

    /* Price history is also much easier to read as stacked records. */
    body.has-app-sidebar .history-mobile-table thead{display:none}
    body.has-app-sidebar .history-mobile-table,
    body.has-app-sidebar .history-mobile-table tbody,
    body.has-app-sidebar .history-mobile-table tr,
    body.has-app-sidebar .history-mobile-table td{display:block;width:100%;min-width:0 !important}
    body.has-app-sidebar .history-mobile-table{border:0 !important}
    body.has-app-sidebar .history-mobile-table tr{
        margin-bottom:10px;padding:11px 12px;background:#fff;
        border:1px solid #e5e7eb;border-radius:10px;
    }
    body.has-app-sidebar .history-mobile-table td{padding:5px 0 !important;border:0 !important;text-align:left !important}
    body.has-app-sidebar .history-mobile-table td::before{
        display:inline-block;width:88px;margin-right:5px;color:#6b7280;font-size:9px;font-weight:800;vertical-align:top;
    }
    body.has-app-sidebar .history-mobile-table td:nth-child(1)::before{content:'TANGGAL'}
    body.has-app-sidebar .history-mobile-table td:nth-child(2)::before{content:'BARANG'}
    body.has-app-sidebar .history-mobile-table td:nth-child(3)::before{content:'SUPPLIER'}
    body.has-app-sidebar .history-mobile-table td:nth-child(4)::before{content:'SATUAN'}
    body.has-app-sidebar .history-mobile-table td:nth-child(5)::before{content:'HARGA'}
    body.has-app-sidebar .history-mobile-table td:nth-child(6)::before{content:'OUTLET'}
    body.has-app-sidebar .history-mobile-table td:nth-child(7)::before{content:'SUMBER'}
    body.has-app-sidebar .history-mobile-table td:nth-child(8)::before{content:'USER'}

    /* Supplier cards become one column. */
    body.has-app-sidebar .supplier-grid,
    body.has-app-sidebar .member-grid{grid-template-columns:1fr !important}

    /* Search result cards on Home. */
    body.has-app-sidebar .card-grid{grid-template-columns:1fr 1fr !important}

    /* Fixed side panels become normal content on phones. */
    body.has-app-sidebar .database-period{
        position:static !important;
        width:100% !important;
        max-width:100% !important;
        max-height:none !important;
        margin:0 0 12px !important;
    }
    body.has-app-sidebar .period-list{grid-template-columns:1fr !important}

    /* Avoid desktop hover transforms on touch screens. */
    body.has-app-sidebar .period-item:hover{transform:none;box-shadow:none}

    /* Settings/admin content should not become microscopic. */
    body.has-app-sidebar .member,
    body.has-app-sidebar .tool-card,
    body.has-app-sidebar .box,
    body.has-app-sidebar .supplier-card{min-width:0}

    /* Prevent long IDs / hashes from creating page overflow. */
    body.has-app-sidebar .mono,
    body.has-app-sidebar pre,
    body.has-app-sidebar code{overflow-wrap:anywhere;word-break:break-word;white-space:pre-wrap}
}

@media (max-width:600px){
    :root{--proc-mobile-gutter:10px}

    body.has-app-sidebar input,
    body.has-app-sidebar select,
    body.has-app-sidebar textarea{
        font-size:16px !important;
    }

    body.has-app-sidebar .card,
    body.has-app-sidebar .panel{padding:14px !important}

    body.has-app-sidebar .header h1{font-size:20px !important}
    body.has-app-sidebar .header p{font-size:12px !important}

    body.has-app-sidebar .card-grid{grid-template-columns:1fr !important}

    body.has-app-sidebar .summary{grid-template-columns:1fr 1fr !important;gap:8px !important}
    body.has-app-sidebar .stat{min-width:0 !important;padding:10px !important}

    body.has-app-sidebar .mobile-hide{display:none !important}

    /* Touch targets in the main workflows. */
    body.has-app-sidebar .btn,
    body.has-app-sidebar button,
    body.has-app-sidebar .row-btn{font-size:14px !important}
}

/* Standalone authentication pages */
@media (max-width:600px){
    .login-container,
    .register-container,
    .password-container{
        width:calc(100% - 24px) !important;
        max-width:420px !important;
        padding:24px !important;
        border-radius:12px;
    }
    body:has(.login-container),
    body:has(.register-container),
    body:has(.password-container){padding:12px !important}
}

@media print{
    .mobile-app-header,
    .mobile-app-nav,
    .mobile-menu-backdrop{display:none !important}
}

@media (prefers-reduced-motion:reduce){
    .mobile-app-nav{transition:none}
}