/* =============================================================================
   WMS_12T3_WEB — MOBILE-FIRST OVERRIDES (M1 + M2)
   -----------------------------------------------------------------------------
   Phạm vi:
     §M1.* — Layout chung (NavMenu drawer, Topbar, Login, Touch targets)
     §M2.* — Danh sách + Modal (Toolbar, Data-table, Modal full-screen, Pager)

   File này CHỈ chứa override cho viewport <= 1024px.
   KHÔNG sửa app.css / app.crud.css — file này nạp SAU 2 file đó.
   ============================================================================= */


/* =============================================================================
   §M0 — BLAZOR ERROR BANNER — GLOBAL FIX (áp dụng MỌI viewport)
   -----------------------------------------------------------------------------
   Banner #blazor-error-ui được Blazor framework inject vào body level.
   Rule "display: none" trong MainLayout.razor.css là SCOPED CSS → chỉ apply
   trong scope component MainLayout (ID b-xxx). Banner nằm NGOÀI scope đó
   → rule không match → banner LUÔN HIỂN THỊ ngay cả khi không có lỗi.

   Fix: Đặt display: none ở GLOBAL CSS (file này không scoped, nạp cuối).
   Khi có lỗi thực, Blazor JS inject style="display:block" inline lên
   element → inline style override CSS rule → banner hiện đúng lúc cần.
   ============================================================================= */
#blazor-error-ui {
    display: none;
}


/* =============================================================================
   §M1.1 — VARIABLES & TOKENS MOBILE
   ============================================================================= */
:root {
    --wms-mobile-drawer-w:   280px;
    --wms-mobile-topbar-h:   3.5rem;
    --wms-mobile-touch-min:  44px;
    --wms-mobile-z-drawer:   1050;
    --wms-mobile-z-overlay:  1040;
    --wms-mobile-z-topbar:   1030;
    --wms-mobile-z-modal:    1100;

    --wms-card-radius:       10px;
    --wms-card-shadow:       0 1px 3px rgba(17,24,39,0.06), 0 4px 12px rgba(17,24,39,0.04);
}


/* =============================================================================
   §M1.2 — HAMBURGER BUTTON
   ============================================================================= */
.wms-hamburger {
    display: none;
    background: transparent;
    border: 1px solid var(--wms-border);
    border-radius: var(--radius-md, 6px);
    width: var(--wms-mobile-touch-min);
    height: var(--wms-mobile-touch-min);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    color: var(--wms-ink);
    transition: background-color 0.15s ease;
    flex-shrink: 0;
}
.wms-hamburger:hover,
.wms-hamburger:focus-visible {
    background: var(--wms-sidebar-hover);
    outline: none;
}
.wms-hamburger:active { background: var(--wms-border); }
.wms-hamburger svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}


/* =============================================================================
   §M1.3 — DRAWER OVERLAY
   ============================================================================= */
.wms-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: var(--wms-mobile-z-overlay);
    opacity: 0;
    transition: opacity 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}
.wms-drawer-overlay.is-open {
    display: block;
    opacity: 1;
}


/* =============================================================================
   §M1.4 — RESPONSIVE BREAKPOINTS
   ============================================================================= */

/* ====================== TABLET + MOBILE ( <= 1023px ) ====================== */
@media (max-width: 1023.98px) {

    .wms-app {
        grid-template-columns: 1fr;
    }

    .wms-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: var(--wms-mobile-drawer-w);
        max-width: 85vw;
        height: 100vh;
        z-index: var(--wms-mobile-z-drawer);
        transform: translateX(-100%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.12);
        will-change: transform;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .wms-sidebar.is-open {
        transform: translateX(0);
    }

    .wms-hamburger { display: inline-flex; }

    .wms-topbar {
        padding: 0.5rem 0.75rem;
        gap: 0.5rem;
        min-height: var(--wms-mobile-topbar-h);
        z-index: var(--wms-mobile-z-topbar);
    }
    .topbar-left {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        flex: 1;
        min-width: 0;
    }
    .topbar-right {
        display: flex;
        align-items: center;
        gap: 0.375rem;
        flex-shrink: 0;
    }

    .wms-content { padding: 1rem 0.75rem; }

    /* Khi drawer mở: lock body scroll. KHÔNG dùng touch-action:none vì sẽ
       chặn scroll trong sidebar lẫn tạo "ghost click" khi user vuốt. */
    body.drawer-open,
    body.wms-drawer-open {
        overflow: hidden;
    }
}


/* ============================ MOBILE ONLY ( <= 767px ) ============================ */
@media (max-width: 767.98px) {

    .wms-topbar .tenant-switcher,
    .wms-topbar .chuoi-switcher { display: none; }

    .wms-topbar .user-badge .user-fullname,
    .wms-topbar .user-badge .user-tendangnhap { display: none; }

    .wms-content { padding: 0.75rem 0.5rem; }

    .wms-topbar-logo-mobile {
        font-weight: 700;
        font-size: 1rem;
        color: var(--wms-accent);
        letter-spacing: -0.01em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* ============================ DESKTOP ( >= 1024px ) ============================ */
@media (min-width: 1024px) {
    /* Ẩn hoàn toàn các element mobile-only */
    .wms-hamburger,
    .wms-drawer-overlay,
    .wms-topbar-logo-mobile,
    .wms-drawer-extras {
        display: none !important;
    }
    /* Reset CHỈ các property mà rule mobile có thể leak sang desktop:
       transform (slide-in animation) + box-shadow (drawer lift).
       KHÔNG đụng width/position/left/height — để app.css gốc handle layout. */
    .wms-sidebar {
        transform: none !important;
        -webkit-transform: none !important;
        box-shadow: none !important;
    }
}


/* =============================================================================
   §M1.5 — DRAWER EXTRAS
   ============================================================================= */
.wms-drawer-extras {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wms-sidebar-border);
    background: var(--wms-paper);
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}
@media (max-width: 767.98px) {
    .wms-drawer-extras { display: flex; }
}
.wms-drawer-extras > * { width: 100%; }


/* =============================================================================
   §M1.6 — TOUCH TARGETS & FORM CONTROLS  (v3 — TRUNG THÀNH FONT GỐC)
   -----------------------------------------------------------------------------
   QUAN TRỌNG về font-size trong WMS:
   - app.css đặt `body { font-size: 14px }` → 1rem = 14px
   - .form-control gốc: 0.875rem = ~12.25px
   - .btn gốc: 0.875rem = ~12.25px

   STRATEGY (sửa sau feedback HUY về font quá to):
   1. Tablet + Mobile: GIỮ nguyên font-size gốc (~12px). Chỉ tăng PADDING
      cho touch dễ hơn. Visual giữ tỉ lệ desktop.
   2. iOS auto-zoom workaround: dùng `font-size: 16px` cho input ở :focus
      kèm transform scale để giữ visual. Hoặc đơn giản hơn — chấp nhận user
      pinch-zoom out nếu lỡ zoom (do `maximum-scale=5` cho phép).
   3. Touch target ≥ 40px đạt được qua min-height + padding, KHÔNG qua font.
   ============================================================================= */

/* ===== TABLET + MOBILE: tăng touch target nhưng giữ font gốc ===== */
@media (max-width: 1023.98px) {

    .btn,
    .btn-primary,
    .btn-danger,
    .btn-secondary,
    .btn-outline-primary,
    .btn-outline-secondary,
    .btn-warning,
    .btn-success {
        min-height: var(--wms-mobile-touch-min);
        padding: 0.5rem 0.875rem;
        /* font-size GIỮ GỐC = 0.875rem (~12px) */
    }
    .btn-sm {
        min-height: 36px;
        padding: 0.375rem 0.625rem;
        /* font-size GIỮ GỐC = 0.8125rem (~11.4px) */
    }

    .nav-item {
        min-height: var(--wms-mobile-touch-min);
        padding: 0.625rem 1rem !important;
        /* nav-item có font riêng từ app.css, giữ nguyên */
    }

    .pager .btn,
    .pager button {
        min-width: 36px;
        min-height: 36px;
    }
}


/* ===== MOBILE ONLY (<=767px): touch padding cho form, FONT GIỮ GỐC ===== */
@media (max-width: 767.98px) {

    /* Form-control: KHÔNG đổi font-size, chỉ tăng padding cho dễ tap */
    .form-control,
    .form-select,
    select.form-control,
    input.form-control,
    textarea.form-control {
        min-height: var(--wms-mobile-touch-min);
        padding: 0.625rem 0.625rem;
        /* font-size: KẾ THỪA từ app_crud.css (.form-control = 0.875rem) */
    }

    /* form-control-sm: vẫn nhỏ hơn nhưng đủ chạm */
    .form-control-sm {
        min-height: 36px;
        padding: 0.4375rem 0.5rem;
    }

    /* Textarea: giữ resize vertical, padding rộng hơn 1 chút */
    textarea.form-control {
        min-height: 80px;
        padding: 0.5rem 0.625rem;
    }

    /* iOS AUTO-ZOOM WORKAROUND:
       iOS Safari zoom viewport khi focus input có font < 16px.
       Trick: set font 16px ở :focus → khi user tap, browser thấy 16px → không zoom.
       Khi blur → về font gốc 0.875rem.
       (Một số phiên bản iOS có thể vẫn zoom — nhưng `maximum-scale=5` cho phép
       user pinch-out để zoom lại.) */
    input[type="text"].form-control:focus,
    input[type="email"].form-control:focus,
    input[type="password"].form-control:focus,
    input[type="tel"].form-control:focus,
    input[type="number"].form-control:focus,
    input[type="search"].form-control:focus,
    input[type="url"].form-control:focus,
    textarea.form-control:focus {
        font-size: 16px;
    }

    /* Checkbox / radio: giữ kích thước hợp lý */
    .form-check-input {
        width: 1rem;
        height: 1rem;
        margin-top: 0.25rem;
    }
    .form-check-label {
        padding-left: 0.25rem;
        line-height: 1.5;
        /* font-size kế thừa từ app.css */
    }

    /* Label: giữ font gốc */
    .form-group label,
    .form-label {
        margin-bottom: 0.25rem;
        /* font-size: KẾ THỪA — không override */
    }
}


/* =============================================================================
   §M1.7 — LOGIN PAGE RESPONSIVE
   ============================================================================= */
@media (max-width: 767.98px) {
    .login-page {
        padding: 1rem;
        align-items: flex-start;
        padding-top: 2.5rem;
    }
    .login-card {
        padding: 1.75rem 1.25rem;
        border-radius: var(--radius-md, 8px);
    }
    .brand-mark { font-size: 1.625rem; }
    .brand-title { font-size: 0.875rem; }
    .brand-subtitle { font-size: 0.625rem; }
    .login-form .btn { width: 100%; }
}


/* =============================================================================
   §M1.8 — UTILITIES (visibility helpers)
   ============================================================================= */
.d-mobile-none { /* visible by default */ }
@media (max-width: 767.98px) {
    .d-mobile-none { display: none !important; }
}

.d-mobile-only { display: none; }
@media (max-width: 767.98px) {
    .d-mobile-only { display: block; }
    .d-mobile-only.inline { display: inline-block; }
    .d-mobile-only.flex   { display: flex; }
}


/* =============================================================================
   §M1.9 — SAFE AREA (iOS notch)
   ============================================================================= */
@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 1023.98px) {
        .wms-topbar     { padding-top: max(0.5rem, env(safe-area-inset-top)); }
        .wms-content    { padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
        .wms-sidebar    { padding-bottom: env(safe-area-inset-bottom); }
    }
}


/* =============================================================================
   §M1.10 — REDUCED MOTION
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .wms-sidebar,
    .wms-drawer-overlay,
    .modal-panel,
    .modal-custom { transition: none !important; animation: none !important; }
}


/* =============================================================================
   ============================ GĐ M2 — DANH SÁCH + MODAL ============================
   ============================================================================= */


/* =============================================================================
   §M2.1 — PAGE HEADER (Mobile)
   -----------------------------------------------------------------------------
   Stack title trên, action button (như "+ Thêm") xuống dưới full-width.
   ============================================================================= */
@media (max-width: 767.98px) {
    .page-header,
    .dashboard-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        padding-bottom: 0.75rem;
        margin-bottom: 1rem;
    }
    .page-header h1,
    .dashboard-header h1 {
        font-size: 1.25rem;
    }
    .page-subtitle,
    .subtitle {
        font-size: 0.8125rem;
    }
    .page-actions,
    .dashboard-controls {
        width: 100%;
        flex-wrap: wrap;
    }
    .page-actions .btn,
    .dashboard-controls .btn {
        flex: 1 1 auto;
        min-width: 120px;
    }
}


/* =============================================================================
   §M2.2 — TOOLBAR / FILTER ROW (Mobile)
   -----------------------------------------------------------------------------
   - Search ô full-width
   - Các filter stack dọc
   - Sticky top phía dưới topbar để dễ filter khi scroll
   ============================================================================= */
@media (max-width: 767.98px) {
    .toolbar {
        padding: 0.625rem 0.75rem;
        gap: 0.5rem;
        position: sticky;
        top: var(--wms-mobile-topbar-h);
        z-index: 100;
        margin-bottom: 0.75rem;
        border-radius: var(--wms-card-radius);
    }
    .toolbar-search {
        flex: 1 1 100%;
        min-width: 0;
        max-width: 100%;
        order: -1;       /* search luôn ở trên cùng */
    }
    .toolbar-date,
    .toolbar > .form-control,
    .toolbar > select.form-control,
    .toolbar .form-control-sm {
        flex: 1 1 calc(50% - 0.25rem);
        max-width: 100%;
        min-width: 0;
        /* font-size kế thừa từ §M1.6 — input text 16px (chống iOS zoom),
           select giữ 0.9375rem */
    }
    .toolbar-check {
        flex: 1 1 100%;
    }
    .toolbar .btn {
        flex: 1 1 calc(50% - 0.25rem);
    }

    /* Filter row reports */
    .filter-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    .filter-group,
    .filter-item {
        width: 100%;
        min-width: 0;
    }
}

/* Toolbar collapse trên mobile (thêm class .toolbar-collapsible nếu muốn) */
@media (max-width: 767.98px) {
    .toolbar-collapsible:not(.is-expanded) > *:not(.toolbar-search):not(.toolbar-toggle) {
        display: none;
    }
    .toolbar-toggle {
        display: none;
        background: transparent;
        border: 1px solid var(--wms-border);
        border-radius: var(--radius-sm, 4px);
        padding: 0.4rem 0.6rem;
        font-size: 0.8125rem;
        color: var(--wms-ink-soft);
    }
    .toolbar-collapsible .toolbar-toggle {
        display: inline-flex;
        flex: 0 0 auto;
    }
}


/* =============================================================================
   §M2.3 — DATA TABLE — STRATEGY A: Horizontal Scroll (Default)
   -----------------------------------------------------------------------------
   Mặc định: bảng nào KHÔNG có class .responsive sẽ scroll ngang trên mobile.
   Wrap bảng trong .table-scroll hoặc dùng overflow-x trên parent.
   ============================================================================= */
@media (max-width: 1023.98px) {
    /* Mọi data-table không phải variant grid (phiếu edit) — cho scroll ngang */
    .data-table:not(.responsive):not(.grid) {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .data-table:not(.responsive):not(.grid) thead,
    .data-table:not(.responsive):not(.grid) tbody,
    .data-table:not(.responsive):not(.grid) tr {
        white-space: nowrap;
    }
    /* Hint scroll: subtle gradient ở cạnh phải */
    .data-table:not(.responsive):not(.grid) {
        background:
            linear-gradient(to right, var(--wms-paper) 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), var(--wms-paper) 70%) 0 100%,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}


/* =============================================================================
   §M2.4 — DATA TABLE — STRATEGY B: Card View (Opt-in: .responsive)
   -----------------------------------------------------------------------------
   CÁCH DÙNG: Đổi `class="data-table"` → `class="data-table responsive"`
   Yêu cầu: mỗi <td> phải có attribute data-label="<TÊN CỘT>"
            (nếu không có data-label thì hiện không nhãn — vẫn không vỡ).

   VÍ DỤ:
     <td data-label="SKU"><code>@h.Sku</code></td>
     <td data-label="Tên hàng"><strong>@h.TenHang</strong></td>
   ============================================================================= */
@media (max-width: 767.98px) {
    .data-table.responsive {
        display: block;
        background: transparent;
        border: none;
        box-shadow: none;
        white-space: normal;
    }
    .data-table.responsive thead {
        /* Ẩn header — mỗi cell tự hiện label */
        display: none;
    }
    .data-table.responsive tbody {
        display: block;
    }
    .data-table.responsive tbody tr {
        display: block;
        background: var(--wms-paper);
        border: 1px solid var(--wms-border);
        border-radius: var(--wms-card-radius);
        margin-bottom: 0.625rem;
        padding: 0.5rem 0.75rem;
        box-shadow: var(--wms-card-shadow);
    }
    .data-table.responsive tbody tr:hover {
        background: var(--wms-paper);   /* hover effect không hợp trên mobile */
    }
    .data-table.responsive tbody tr td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 0.4rem 0;
        border: none;
        border-bottom: 1px dashed var(--wms-border-soft);
        text-align: right;
        white-space: normal;
        font-size: 0.875rem;
    }
    .data-table.responsive tbody tr td:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .data-table.responsive tbody tr td:first-child {
        padding-top: 0;
    }
    .data-table.responsive tbody tr td::before {
        content: attr(data-label);
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--wms-muted);
        flex: 0 0 35%;
        text-align: left;
        padding-top: 0.0625rem;
    }
    .data-table.responsive tbody tr td:not([data-label])::before {
        content: "";
    }
    /* Cột "Thao tác" full-width, các button stretch */
    .data-table.responsive tbody tr td.td-actions,
    .data-table.responsive tbody tr td:last-child {
        text-align: left;
    }
    .data-table.responsive tbody tr td.td-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .data-table.responsive tbody tr td.td-actions::before {
        flex: 0 0 auto;
        align-self: center;
    }
    .data-table.responsive tbody tr td.td-actions .btn {
        flex: 0 0 auto;
        margin-left: 0;
    }
    /* td-address bỏ ellipsis trên mobile — cho wrap */
    .data-table.responsive .td-address {
        max-width: none;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    /* Inactive row trong card view: opacity nhẹ */
    .data-table.responsive tbody tr.row-inactive {
        opacity: 0.7;
        border-style: dashed;
    }
}


/* =============================================================================
   §M2.4.B — DATA TABLE Card View — Edit-style override
   -----------------------------------------------------------------------------
   Khi <td> trong .data-table.responsive chứa input/select/textarea (phiếu Edit),
   layout flex 35%/65% bóp input quá hẹp → user không thấy/không tap được.

   Override: chuyển <td> thành column-stack (label TRÊN, input DƯỚI full-width).

   IMPORTANT: §M3.4 (mobile) gắn .data-table.grid { min-width:720px; white-space:nowrap }
   để giữ scroll-ngang. Khi cùng có cả .grid VÀ .responsive thì .responsive thắng:
   ép min-width:auto + white-space:normal để card view collapse về full-width.

   Áp dụng cho mọi <td> mà bên trong nó có:
     - <input>, <select>, <textarea>
     - .form-control (custom Blazor input components đều có class này)
     - <datalist> (autocomplete container)

   Append vào CUỐI block §M2.4 trong app_mobile.css.
   ============================================================================= */
@media (max-width: 767.98px) {
    /* HẠ min-width khi .grid kèm .responsive — KHÔNG cho scroll-ngang nữa */
    .data-table.grid.responsive {
        min-width: 0 !important;
        width: 100% !important;
        white-space: normal !important;
    }
    /* Bỏ wrap nowrap thừa trên td */
    .data-table.grid.responsive tbody tr td {
        white-space: normal !important;
    }
    /* Hủy min-width/max-width cố định trên cột Hàng hóa (nth-child) */
    .data-table.grid.responsive tbody tr td:nth-child(2) {
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Có :has() — modern browsers (Chrome 105+, Safari 15.4+, Firefox 121+).
       Mobile retail App: Chrome/Safari latest → safe. */
    .data-table.responsive tbody tr td:has(input),
    .data-table.responsive tbody tr td:has(select),
    .data-table.responsive tbody tr td:has(textarea),
    .data-table.responsive tbody tr td:has(.form-control),
    .data-table.responsive tbody tr td:has(datalist) {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0.25rem;
    }

    .data-table.responsive tbody tr td:has(input)::before,
    .data-table.responsive tbody tr td:has(select)::before,
    .data-table.responsive tbody tr td:has(textarea)::before,
    .data-table.responsive tbody tr td:has(.form-control)::before,
    .data-table.responsive tbody tr td:has(datalist)::before {
        flex: 0 0 auto;
        text-align: left;
        padding-top: 0;
        margin-bottom: 0.125rem;
    }

    /* Input/select/textarea bên trong td.responsive: full-width của cell */
    .data-table.responsive tbody tr td input,
    .data-table.responsive tbody tr td select,
    .data-table.responsive tbody tr td textarea,
    .data-table.responsive tbody tr td .form-control {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box;
    }

    /* Container relative cho autocomplete .ac-panel: full-width */
    .data-table.responsive tbody tr td > div[style*="position:relative"],
    .data-table.responsive tbody tr td > .ac-wrap {
        width: 100% !important;
    }

    /* Cột # (số thứ tự): hiện compact ở đầu card với nền nhẹ */
    .data-table.responsive tbody tr td[data-label="#"] {
        background: var(--wms-bg, #f8f6ee);
        margin: -0.5rem -0.75rem 0.375rem;
        padding: 0.375rem 0.75rem;
        font-weight: 600;
        color: var(--wms-muted);
        border-bottom: 1px solid var(--wms-border);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
    .data-table.responsive tbody tr td[data-label="#"]::before {
        flex: 0 0 auto;
        margin-bottom: 0;
    }

    /* Cột "Thành tiền" / "Tổng tiền" READONLY (computed value, không có input)
       hiện row-style: label trái, giá trị phải (giữ flex-row default) */
    .data-table.responsive tbody tr td:not(:has(input)):not(:has(select)):not(:has(textarea)):not(:has(.form-control)) {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    /* Last td (cột Xóa/actions) — hiển thị bottom-right */
    .data-table.responsive tbody tr td:last-child {
        justify-content: flex-end;
    }
    .data-table.responsive tbody tr td:last-child .btn {
        flex: 0 0 auto;
    }

    /* tfoot trong card view (Tổng/Subtotal): hiện full-width row, không card */
    .data-table.responsive tfoot {
        display: block;
        margin-top: 0.5rem;
    }
    .data-table.responsive tfoot tr {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: var(--wms-paper-soft, #faf6e8);
        border: 1px solid var(--wms-border);
        border-radius: var(--wms-card-radius);
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.375rem;
    }
    .data-table.responsive tfoot tr td {
        display: inline;
        padding: 0;
        border: none;
        text-align: right;
        font-size: 0.875rem;
    }
    .data-table.responsive tfoot tr td::before {
        content: "";
        display: none;
    }
    .data-table.responsive tfoot tr td:first-child {
        text-align: left;
        font-weight: 600;
        color: var(--wms-muted);
    }
    .data-table.responsive tfoot tr td:last-child {
        font-weight: 700;
        color: var(--wms-ink);
    }
}


/* =============================================================================
   §M2.5 — PAGER (Mobile)
   ============================================================================= */
@media (max-width: 767.98px) {
    .pager {
        padding: 0.625rem 0.25rem;
        flex-direction: column;
        gap: 0.5rem;
        font-size: 0.8125rem;
    }
    .pager-info {
        order: 2;
        text-align: center;
    }
    .pager-controls {
        order: 1;
        justify-content: center;
        width: 100%;
        gap: 0.375rem;
    }
    .pager-current {
        flex: 1;
        text-align: center;
        padding: 0;
        font-weight: 600;
    }
}


/* =============================================================================
   §M2.6 — MODAL (Full-screen on Mobile)
   -----------------------------------------------------------------------------
   - Modal full-screen, slide-up animation
   - Footer sticky (Lưu/Hủy luôn nhìn thấy)
   - Close button to hơn (44px)
   ============================================================================= */
@media (max-width: 767.98px) {

    /* Generic .modal-panel (Modal.razor cũ) */
    .modal-panel,
    .modal-panel.modal-sm,
    .modal-panel.modal-lg,
    .modal-panel.modal-xl,
    .modal-custom,
    .modal-custom.modal-size-small,
    .modal-custom.modal-size-medium,
    .modal-custom.modal-size-large,
    .modal-custom.modal-size-xlarge {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        height: 100vh;
        transform: none;
        border-radius: 0;
        border: none;
        animation: slideUpMobile 0.22s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: var(--wms-mobile-z-modal);
    }

    @keyframes slideUpMobile {
        from { transform: translateY(100%); opacity: 0.5; }
        to   { transform: translateY(0);    opacity: 1; }
    }

    .modal-backdrop,
    .modal-backdrop-custom {
        z-index: calc(var(--wms-mobile-z-modal) - 1);
    }

    /* Header sticky top */
    .modal-header {
        position: sticky;
        top: 0;
        background: var(--wms-paper);
        z-index: 2;
        padding: 0.75rem 1rem;
        padding-top: max(0.75rem, env(safe-area-inset-top));
    }
    .modal-header h3 {
        font-size: 1rem;
    }
    .modal-close {
        width: var(--wms-mobile-touch-min);
        height: var(--wms-mobile-touch-min);
        font-size: 1.5rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Body padding nhỏ + thêm padding bottom cho footer sticky */
    .modal-body {
        padding: 1rem;
        padding-bottom: 5rem;   /* chừa chỗ cho footer sticky */
    }

    /* Footer sticky bottom */
    .modal-footer {
        position: sticky;
        bottom: 0;
        background: var(--wms-paper);
        border-top: 1px solid var(--wms-border);
        padding: 0.75rem 1rem;
        padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
        z-index: 2;
        flex-direction: row;
        gap: 0.5rem;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
    }
    .modal-footer .btn {
        flex: 1;
    }

    /* Section trong modal */
    .modal-section {
        margin-bottom: 1rem;
        padding-bottom: 0.75rem;
    }
    .modal-section-title {
        font-size: 0.875rem;
    }

    /* Form grid 2 cột → 1 cột trong modal */
    .modal-body .form-grid-2,
    .modal-body .form-grid-2col {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
}


/* =============================================================================
   §M2.7 — CONFIRM DIALOG (giữ kích thước nhỏ trên mobile)
   -----------------------------------------------------------------------------
   ConfirmDialog là dialog xác nhận đơn giản → KHÔNG full-screen, vẫn centered.
   ============================================================================= */
@media (max-width: 767.98px) {
    .modal-panel.modal-confirm,
    .modal-custom.modal-confirm {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: 92vw;
        max-width: 360px;
        max-height: 80vh;
        height: auto;
        border-radius: var(--radius-lg);
        border: 1px solid var(--wms-border);
        animation: fadein 0.15s ease;
    }
    .modal-panel.modal-confirm .modal-footer,
    .modal-custom.modal-confirm .modal-footer {
        position: static;
        padding: 0.875rem 1.25rem;
    }
    .modal-panel.modal-confirm .modal-body,
    .modal-custom.modal-confirm .modal-body {
        padding-bottom: 1.25rem;
    }
}


/* =============================================================================
   §M2.8 — TOOLBAR ACTIONS WRAP (gom các nút filter / nút chính)
   ============================================================================= */
@media (max-width: 767.98px) {
    /* Khi toolbar có nhiều button → gom thành grid 2 cột */
    .toolbar-actions {
        display: flex;
        gap: 0.5rem;
        flex: 1 1 100%;
        flex-wrap: wrap;
    }
    .toolbar-actions .btn {
        flex: 1 1 calc(50% - 0.25rem);
    }
}


/* =============================================================================
   §M2.9 — READONLY BANNER & EMPTY STATE (Mobile)
   ============================================================================= */
@media (max-width: 767.98px) {
    .readonly-banner {
        font-size: 0.8125rem;
        padding: 0.625rem 0.75rem;
        line-height: 1.5;
    }
    .empty-state,
    .empty-state-ctx {
        padding: 1.5rem 0.75rem;
        font-size: 0.875rem;
    }
}


/* =============================================================================
   ============================ GĐ M3 — PHIẾU NGHIỆP VỤ ============================
   -----------------------------------------------------------------------------
   Áp dụng cho mọi trang Edit phiếu: Nhập / Xuất / Chuyển kho / Kiểm kê /
   Sản xuất / DeXuat (3 loại) / ThuChi / DeXuatThuChi / KyGui ...

   Các pattern UI chính được override:
   1. .page-header với .form-row-actions (workflow buttons) → bottom sticky bar
   2. .data-table.grid (inline-edit) → scroll ngang + sticky cột # và actions
   3. .autocomplete-panel → full-width trên mobile
   4. .form-row (auto-fit grid) → 1 cột trên mobile
   5. .workflow-bar → đã sticky, chỉ tinh chỉnh padding mobile
   ============================================================================= */


/* =============================================================================
   §M3.1 — FORM ROW (form-row, form-grid-2col, form-col) → 1 cột trên mobile
   ============================================================================= */
@media (max-width: 767.98px) {
    .form-row {
        grid-template-columns: 1fr;
        gap: 0.625rem;
        margin-bottom: 0.75rem;
    }
    .form-grid-2col,
    .form-grid-2 {
        grid-template-columns: 1fr;
        gap: 0.625rem;
    }
    .form-col-wide {
        grid-column: span 1;   /* override desktop's "span 2" */
    }

    /* Reset margin form-group để gọn */
    .form-group {
        margin-bottom: 0.625rem;
    }
}


/* =============================================================================
   §M3.2 — PAGE HEADER (Phiếu Edit) → tách actions xuống mobile-action-bar
   -----------------------------------------------------------------------------
   Page-header trên trang Edit phiếu thường có .form-row-actions chứa
   4-5 buttons (Lưu / Duyệt / Hủy / Quay lại). Trên mobile:
   - Title hiện trên cùng (1 dòng, status pill xuống dòng dưới)
   - .form-row-actions trong page-header → ẨN trên mobile
   - Thay bằng .mobile-action-bar sticky ở bottom (xem §M3.3)
   ============================================================================= */
@media (max-width: 767.98px) {

    /* Page header trên Edit page — title + status pill */
    .page-header h1 {
        font-size: 1.125rem;       /* ~16px — đủ to để đọc, không quá to */
        line-height: 1.3;
    }
    .page-header .page-subtitle {
        margin-top: 0.375rem;
    }
    .page-header .page-subtitle .status-pill {
        display: inline-block;
        margin-bottom: 0.25rem;
    }
    .page-header .page-subtitle .muted.small {
        display: block;
        margin-left: 0 !important;
        margin-top: 0.125rem;
    }

    /* form-row-actions trong page-header — STACK DỌC + full-width trên mobile.
       (Trước đây ẨN với assumption render lại ở bottom workflow-bar, nhưng
       design WMS_PHIEU_DESIGN.md chuẩn là buttons LUÔN ở header → ẩn = mất nút.) */
    .page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }
    .page-header .form-row-actions {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
        margin-top: 0.5rem;
    }
    .page-header .form-row-actions .btn,
    .page-header .form-row-actions a.btn {
        width: 100%;
        min-height: var(--wms-mobile-touch-min, 44px);
        font-size: 0.9375rem;
    }
    /* Nút primary (Lưu) lên đầu, secondary (Hủy/Quay lại) xuống dưới */
    .page-header .form-row-actions .btn-primary {
        order: 1;
    }
    .page-header .form-row-actions .btn-success,
    .page-header .form-row-actions .btn-warning {
        order: 2;
    }
    .page-header .form-row-actions .btn-danger {
        order: 3;
    }
    .page-header .form-row-actions .btn-link,
    .page-header .form-row-actions .btn-secondary,
    .page-header .form-row-actions .btn-outline-secondary,
    .page-header .form-row-actions a:not([class*="btn-"]),
    .page-header .form-row-actions a.btn-link {
        order: 4;
    }

    /* form-row-actions ở ngoài page-header (vd: dưới bảng chi tiết) → cũng stack dọc */
    .form-row-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        width: 100%;
    }
    .form-row-actions .btn {
        width: 100%;
    }
}


/* =============================================================================
   §M3.3 — WORKFLOW BAR (sticky bottom — đã có CSS gốc, chỉ tinh chỉnh mobile)
   ============================================================================= */
@media (max-width: 767.98px) {
    .workflow-bar {
        padding: 0.625rem 0.75rem;
        margin-top: 1rem;
        border-radius: 0;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        gap: 0.375rem;
        flex-direction: row;
        flex-wrap: wrap;
        /* Safe-area cho iOS */
        padding-bottom: max(0.625rem, env(safe-area-inset-bottom));
    }
    .workflow-bar-left,
    .workflow-bar-right {
        flex: 1 1 100%;
        gap: 0.375rem;
    }
    .workflow-bar .btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
}


/* =============================================================================
   §M3.4 — DATA-TABLE.GRID (Bảng chi tiết phiếu — inline-edit)
   -----------------------------------------------------------------------------
   KHÔNG convert thành card view (user cần edit nhanh).
   Strategy: scroll ngang mượt + sticky cột # (đầu) và actions (cuối).
   Cột Hàng hóa cố định min-width đủ để gõ tìm kiếm.
   ============================================================================= */
@media (max-width: 1023.98px) {
    .grid-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        /* Hint scroll */
        background:
            linear-gradient(to right, var(--wms-bg) 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), var(--wms-bg) 70%) 0 100%,
            radial-gradient(farthest-side at 0 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.08), rgba(0,0,0,0)) 0 100%;
        background-repeat: no-repeat;
        background-size: 30px 100%, 30px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    /* Bảng grid: ép min-width đủ để giữ layout cố định khi scroll */
    .data-table.grid {
        min-width: 720px;       /* đủ cho 9-10 cột phiếu Nhập/Xuất */
        white-space: nowrap;
    }

    /* Cột Hàng hóa (cột rộng nhất) — cho phép wrap text nội dung readonly */
    .data-table.grid td:nth-child(2) {
        min-width: 180px;
        max-width: 220px;
        white-space: normal;
    }
    .data-table.grid td:nth-child(2) > div {
        white-space: normal;
        word-break: break-word;
    }

    /* Input nhỏ trong grid — giữ font-size 16px khi focus (chống iOS zoom) */
    .data-table.grid input[type="text"]:focus,
    .data-table.grid input[type="number"]:focus {
        font-size: 16px;
    }
}

/* MOBILE NHỎ (≤ 480px): grid chấp nhận scroll mạnh hơn */
@media (max-width: 480px) {
    .data-table.grid {
        font-size: 0.8125rem;   /* compact hơn cho mobile nhỏ */
    }
    .data-table.grid th,
    .data-table.grid td {
        padding: 0.3125rem 0.375rem;
    }
}


/* =============================================================================
   §M3.5 — AUTOCOMPLETE PANEL (full-width trên mobile)
   -----------------------------------------------------------------------------
   Panel gốc min-width 320px / max-width 480px → tràn viewport mobile.
   Trên mobile: panel full-width của parent input, max-height giới hạn để
   không che bàn phím ảo.
   ============================================================================= */
@media (max-width: 767.98px) {
    .autocomplete-panel {
        min-width: 0;
        max-width: 92vw;
        width: max-content;
        max-height: 240px;       /* tránh che bàn phím ảo iOS/Android */
        font-size: 0.875rem;
        box-shadow: var(--shadow-lg);
    }
    .autocomplete-item {
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.4;
        min-height: 40px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    /* Float right trong autocomplete-item (giá vốn) — wrap xuống dòng */
    .autocomplete-item span[style*="float:right"] {
        float: none !important;
        margin-left: auto !important;
    }
}


/* =============================================================================
   §M3.6 — STATUS PILL trong page-header (compact trên mobile)
   ============================================================================= */
@media (max-width: 767.98px) {
    .page-header .status-pill {
        font-size: 0.6875rem;
        padding: 0.1875rem 0.5rem;
    }
}


/* =============================================================================
   §M3.7 — SECTION CARD (Edit pages dùng <section class="card">)
   ============================================================================= */
@media (max-width: 767.98px) {
    section.card,
    .card {
        padding: 0.875rem 0.75rem;
        margin-bottom: 0.75rem;
        border-radius: var(--radius-md, 6px);
    }
    section.card h3,
    .card h3 {
        font-size: 0.9375rem;     /* ~13px */
        margin-bottom: 0.625rem;
    }
}


/* =============================================================================
   §M3.8 — TOTALS PANEL (panel tổng tiền cuối phiếu Nhập/Xuất)
   -----------------------------------------------------------------------------
   Trên desktop totals panel xếp ngang. Mobile → 1 cột để dễ đọc số tiền.
   ============================================================================= */
@media (max-width: 767.98px) {
    .totals-panel,
    .totals-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem;
    }
    .totals-row {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.375rem 0;
        border-bottom: 1px dashed var(--wms-border-soft);
    }
    .totals-row:last-child {
        border-bottom: none;
        border-top: 2px solid var(--wms-accent);
        padding-top: 0.5rem;
        margin-top: 0.25rem;
        font-weight: 600;
        font-size: 0.9375rem;
    }
}


/* =============================================================================
   §M3.9 — APPROVAL ACTION BAR + APPROVAL HISTORY PANEL
   -----------------------------------------------------------------------------
   ApprovalActionBar.razor và ApprovalHistoryPanel.razor là 2 component dùng
   trên mọi phiếu. Tinh chỉnh padding mobile cho gọn.
   ============================================================================= */
@media (max-width: 767.98px) {
    .approval-action-bar {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        padding: 0.75rem;
    }
    .approval-action-bar .btn {
        width: 100%;
    }
    .approval-history-panel {
        font-size: 0.8125rem;
        padding: 0.75rem;
    }
    .approval-history-panel .approval-row {
        flex-direction: column;
        gap: 0.25rem;
        align-items: flex-start;
    }
}


/* =============================================================================
   §M3.10 — CHB ACCEPTANCE BAR (báo cáo bán ký gửi)
   ============================================================================= */
@media (max-width: 767.98px) {
    .chb-acceptance-bar {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
    }
    .chb-acceptance-bar > * {
        width: 100%;
    }
}


/* =============================================================================
   §M3.11 — MoneyInput component (số tiền có format)
   ============================================================================= */
@media (max-width: 767.98px) {
    .money-input,
    .money-input input {
        font-variant-numeric: tabular-nums;
        text-align: right;
    }
    /* Khi focus money input, font 16px chống zoom */
    .money-input input:focus {
        font-size: 16px;
    }
}


/* =============================================================================
   §M3.12 — IMPORT EXCEL DIALOG (ImportLinesDialog.razor)
   ============================================================================= */
@media (max-width: 767.98px) {
    .import-preview-table {
        font-size: 0.75rem;
    }
    .import-preview-table th,
    .import-preview-table td {
        padding: 0.375rem 0.5rem;
        white-space: nowrap;
    }
}


/* =============================================================================
   §M3.13 — MOBILE ACTION BAR (sticky bottom — auto-populated by JS)
   -----------------------------------------------------------------------------
   Bar này được mobile-action-bar.js TẠO và FILL TỰ ĐỘNG bằng cách di chuyển
   các button từ .page-header .form-row-actions xuống đây.

   - Desktop: KHÔNG hiển thị (display:none), buttons ở trong page-header
   - Mobile:  Hiển thị, buttons được move xuống đây
   ============================================================================= */
.wms-mobile-action-bar {
    display: none;     /* Default: ẩn */
}

@media (max-width: 767.98px) {
    .wms-mobile-action-bar {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
        background: var(--wms-paper);
        border-top: 1px solid var(--wms-border);
        box-shadow: 0 -2px 12px rgba(17, 24, 39, 0.08);
        padding: 0.5rem 0.5rem;
        padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
        gap: 0.375rem;
        flex-wrap: wrap;
        align-items: center;
        justify-content: stretch;
    }

    .wms-mobile-action-bar > * {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 0;
    }
    .wms-mobile-action-bar .btn {
        width: 100%;
        min-height: var(--wms-mobile-touch-min);
    }

    /* Khi action bar tồn tại, content cần thêm padding-bottom để không bị che */
    body:has(.wms-mobile-action-bar) .wms-content {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0));
    }

    /* Fallback cho trình duyệt chưa hỗ trợ :has() (Safari < 15.4, Firefox < 121) */
    .wms-mobile-action-bar ~ .wms-content,
    .wms-content.has-mobile-action-bar {
        padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0));
    }
}


/* =============================================================================
   §M1.20 — CONTEXT SWITCHER trong Drawer Extras (Mobile)
   -----------------------------------------------------------------------------
   MainLayout đã render switchers 2 lần:
     (a) Trong .topbar-switchers — wrapped bằng .d-mobile-none → ẨN trên mobile
     (b) Trong .wms-drawer-extras — ở đầu sidebar drawer, hiện trên mobile

   Switcher thực render <div class="ctx-switcher"> chứa <select>.
   Trong drawer, cần ép select chiếm full-width của drawer để dễ tap.

   Append vào CUỐI file app_mobile.css.
   ============================================================================= */
@media (max-width: 767.98px) {
    /* Container .ctx-switcher trong drawer extras: full-width, stack dọc */
    .wms-drawer-extras .ctx-switcher,
    .wms-drawer-extras .tenant-switcher,
    .wms-drawer-extras .chuoi-switcher {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        width: 100%;
        padding: 0.5rem 0.625rem;
        background: var(--wms-bg, #f8f6ee);
        border: 1px solid var(--wms-border);
        border-radius: var(--radius, 6px);
        min-height: var(--wms-mobile-touch-min, 44px);
    }

    /* Icon ⬡ / ⚙ giữ ở đầu, font lớn hơn để rõ */
    .wms-drawer-extras .ctx-switcher .ctx-switcher-icon {
        flex: 0 0 auto;
        font-size: 1.125rem;
        color: var(--wms-accent);
    }

    /* Select chiếm phần còn lại */
    .wms-drawer-extras .ctx-switcher .ctx-switcher-select,
    .wms-drawer-extras .ctx-switcher select,
    .wms-drawer-extras .tenant-switcher select,
    .wms-drawer-extras .chuoi-switcher select {
        flex: 1 1 auto;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        font-size: 0.9375rem;       /* 15px — dễ đọc, dưới 16px iOS-zoom thresh */
        padding: 0.4375rem 1.75rem 0.4375rem 0.625rem;
        background: var(--wms-paper, #fff);
        border: 1px solid var(--wms-border);
        border-radius: var(--radius, 6px);
        background-position: right 0.5rem center;
    }
    /* :focus dùng 16px để chống iOS auto-zoom */
    .wms-drawer-extras .ctx-switcher select:focus,
    .wms-drawer-extras .tenant-switcher select:focus,
    .wms-drawer-extras .chuoi-switcher select:focus {
        font-size: 16px;
    }

    /* Tiêu đề mục cho user dễ nhận biết — dùng ::before pseudo từ data-attr nếu có,
       hoặc thêm wrapper text trong Razor (không bắt buộc). */
    .wms-drawer-extras .ctx-switcher[data-context="tenant"] .ctx-switcher-icon::after {
        content: " Tenant";
        font-size: 0.75rem;
        color: var(--wms-muted);
        margin-left: 0.25rem;
    }
    .wms-drawer-extras .ctx-switcher[data-context="chuoi"] .ctx-switcher-icon::after {
        content: " Chuỗi";
        font-size: 0.75rem;
        color: var(--wms-muted);
        margin-left: 0.25rem;
    }
}


/* =============================================================================
   §M1.21 — iOS SAFARI FIXES (drawer + viewport units)
   -----------------------------------------------------------------------------
   iOS Safari quirks:
   1. 100vh tính cả URL bar → sidebar bị tràn xuống dưới fold.
      Fix: dùng 100dvh (dynamic viewport height) hoặc -webkit-fill-available.
   2. transform animations đôi khi không trigger compositing layer mới
      → drawer "vô hình" khi slide in.
      Fix: thêm translate3d(0,0,0) hint + backface-visibility: hidden.
   3. body scroll bị "freeze" khi drawer mở (touch event ăn lên overlay)
      → user không close được drawer hoặc thấy overlay nháy.
      Fix: position:fixed cho body khi drawer open.
   ============================================================================= */
@media (max-width: 1023.98px) {
    /* (1) Viewport height fallback chain — Safari 15.4+ hỗ trợ dvh */
    .wms-sidebar {
        height: 100vh;                    /* fallback */
        height: -webkit-fill-available;   /* iOS Safari < 15.4 */
        height: 100dvh;                   /* modern */
        /* (2) Force GPU compositing layer ngay từ đầu — tránh "invisible drawer" */
        -webkit-transform: translate3d(-100%, 0, 0);
        transform: translate3d(-100%, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000;
        perspective: 1000;
    }
    .wms-sidebar.is-open {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }

    /* (3) Khi drawer mở: lock background scroll nhưng KHÔNG block touch
       (touch-action:none ở body sẽ chặn cả scroll trong sidebar lẫn tạo
       "ghost click" — user vuốt = browser nhầm thành click → navigate). */
    body.wms-drawer-open {
        overflow: hidden;
    }

    /* Sidebar phải scroll được khi content dài hơn viewport.
       pan-y cho phép vuốt dọc, ngăn vuốt ngang (không cần). */
    .wms-sidebar {
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* CHỈ overlay mới có touch-action:none — vùng đen không cần scroll,
       block scroll background hiệu quả. */
    .wms-drawer-overlay {
        touch-action: none;
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* iOS Safari notch — đảm bảo drawer-extras không bị che bởi notch */
@supports (padding-top: env(safe-area-inset-top)) {
    @media (max-width: 1023.98px) {
        .wms-sidebar {
            padding-top: env(safe-area-inset-top);
        }
    }
}