/* =============================================================================
 * FILE: mobile.css
 * TÊN TIẾNG VIỆT: Tối ưu giao diện di động và cảm ứng
 * PHẠM VI: CSS nền tảng dùng chung; không chứa nghiệp vụ riêng của app.
 * ============================================================================= */

@media (max-width:768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        -webkit-text-size-adjust:100%;
    }

    body{
        background:#eef3f8;
    }

    .app-shell{
        width:100%;
        min-height:100dvh;
        display:block;
    }

    .app-content{
        width:100%;
        margin-left:0 !important;
        padding:10px !important;
        min-height:100dvh;
    }

    body.sidebar-collapsed .app-content{
        margin-left:0 !important;
    }

    .main-content{
        padding:0 !important;
    }

    /* TOPBAR MOBILE */
    .topbar{
        position:sticky;
        top:8px;
        z-index:900;
        min-height:auto;
        padding:12px;
        margin-bottom:12px;
        border-radius:20px;
        gap:10px;
    }

    .topbar-title{
        min-width:0;
    }

    .page-heading{
        font-size:18px !important;
        line-height:1.25;
        margin:0;
    }

    .page-desc{
        font-size:12px !important;
        line-height:1.35;
        margin-top:3px;
    }

    .user-box{
        flex-shrink:0;
    }

    /* SIDEBAR MOBILE */
    .app-sidebar{
        width:280px;
        max-width:84vw;
        height:100dvh;
        min-height:100dvh;
        transform:translateX(-105%);
        overflow:hidden !important;
        overflow-x:hidden !important;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    .app-sidebar.show{
        transform:translateX(0);
    }

    .sidebar-nav{
        padding-bottom:20px;
    }

    .sidebar-overlay{
        display:block;
        position:fixed;
        inset:0;
        z-index:1100;
        background:rgba(15,23,42,.38);
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
        opacity:0;
        visibility:hidden;
        transition:.25s ease;
    }

    .sidebar-overlay.show{
        opacity:1;
        visibility:visible;
    }

    body.sidebar-open{
        overflow:hidden;
    }

    /* CARD / PANEL */
    .page-card,
    .glass-card,
    .dashboard-card,
    .summary-card,
    .stat-card,
    .filter-card{
        border-radius:20px !important;
        padding:14px !important;
        margin-bottom:12px !important;
    }

    .page-card-header,
    .card-header,
    .section-header{
        flex-direction:column;
        align-items:flex-start !important;
        gap:10px;
    }

    .page-card-header h4,
    .section-title,
    .card-title{
        font-size:17px !important;
        line-height:1.3;
    }

    /* BUTTON */
    .btn,
    .qp-btn,
    button{
        min-height:40px;
        border-radius:14px;
        font-size:13px;
    }

    .btn-group,
    .action-group,
    .page-actions{
        width:100%;
        display:flex;
        flex-wrap:wrap;
        gap:8px;
    }

    .btn-group .btn,
    .action-group .btn,
    .page-actions .btn{
        flex:1 1 auto;
    }

    /* FORM */
    .form-control,
    .form-select,
    input,
    select,
    textarea{
        min-height:40px;
        border-radius:14px !important;
        font-size:14px !important;
    }

    label,
    .form-label{
        font-size:13px;
        font-weight:700;
    }

    .row{
        --bs-gutter-x:10px;
        --bs-gutter-y:10px;
    }

    /* TABLE MOBILE */
    .table-responsive{
        border-radius:18px;
        overflow:auto;
        -webkit-overflow-scrolling:touch;
    }

    table{
        font-size:13px;
        min-width:720px;
    }

    th,
    td{
        white-space:nowrap;
        vertical-align:middle;
    }

    /* MODAL MOBILE */
    .modal-dialog{
        margin:10px;
        max-width:calc(100% - 20px);
    }

    .modal-content{
        border-radius:22px !important;
        max-height:calc(100dvh - 20px);
        overflow:hidden;
    }

    .modal-body{
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
    }

    .modal-header,
    .modal-footer{
        padding:14px;
    }

    /* DASHBOARD / GRID */
    .dashboard-grid,
    .summary-grid,
    .stats-grid,
    .kpi-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    canvas{
        max-width:100% !important;
    }

    /* IMAGE / QR / SCANNER */
    img,
    video{
        max-width:100%;
        height:auto;
    }

    .scanner-box,
    .qr-box,
    .camera-box{
        width:100% !important;
        max-width:100% !important;
        border-radius:20px !important;
    }
}