/* ============================================================
   mobile.css — ABU (All Business Utility)
   File tập trung toàn bộ mobile responsive rules
   Load sau style.css và custom.css
   ============================================================ */

/* ─── CSS CUSTOM PROPERTIES: BREAKPOINTS & SPACING ─── */
:root {
    --bp-sm: 480px;
    /* Small phone: iPhone SE */
    --bp-md: 768px;
    /* Tablet / phone landscape */
    --bp-lg: 1024px;
    /* Desktop */

    --nav-height: 60px;
    /* Mobile bottom nav height */
    --nav-height-safe: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));

    --touch-target: 44px;
    /* Apple HIG / WCAG 2.5.5 minimum */
    --tap-highlight: transparent;
    /* iOS tap flash */
}

/* ─── 1. GLOBAL MOBILE BASE ─── */
@media screen and (max-width: 768px) {

    /* Tắt iOS auto-zoom khi focus input — 1 rule tập trung thay cho 15+ override rải rác */
    input,
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Tắt iOS tap highlight trên tất cả interactive elements */
    button,
    a,
    [onclick],
    .nav-card,
    .product-card,
    .data-card,
    .mobile-tab,
    .btn-filter,
    .warranty-kpi-card {
        -webkit-tap-highlight-color: var(--tap-highlight);
    }

    /* Chống scroll chain — chỉ giữ cho modal, KHÔNG áp cho .table-wrapper
       vì table-wrapper tạo scroll region riêng → bẫy touch → đơ cảm ứng trên mobile */
    .modal-content-box {
        overscroll-behavior: contain;
    }

    /* [FIX] Tháo internal scroll của panel — để body scroll thay vì panel tự scroll */
    .panel-left,
    .panel-right {
        height: auto !important;
        overflow: visible !important;
        min-height: unset !important;
    }

    /* [FIX] card-grid: tháo overflow-y:auto để không tạo scroll region riêng trên mobile */
    .card-grid {
        overflow-y: visible !important;
        flex: unset !important;
        min-height: unset !important;
    }

    /* [FIX] table-wrapper trong tab bán hàng: tháo scroll riêng, để body scroll
       Giải quyết lỗi đơ cảm ứng khi giỏ hàng có sản phẩm */
    #tab-sale .table-wrapper {
        overflow: visible !important;
        flex: unset !important;
        min-height: unset !important;
        height: auto !important;
    }

    /* will-change cho animated elements — giảm jank trên Android mid-range */
    .nav-card,
    .product-card,
    .data-card,
    .mobile-tab,
    .kpi-mini-card {
        will-change: transform;
    }

    /* dvh — tránh bị che bởi thanh địa chỉ Chrome/Safari mobile */
    .container {
        min-height: 100dvh;
    }

    /* [FIX] Tháo overflow:hidden của desktop layout — cho phép scroll toàn trang trên mobile */
    body {
        overflow-y: auto;
        height: auto;
    }

    .container {
        overflow-y: auto;
        height: auto;
    }

    .tab-content.active {
        overflow: visible;
        height: auto;
    }
}

/* ─── 2. VIEWPORT & SAFE AREA (iPhone notch / home indicator) ─── */

/* Header sticky — cần padding-top để không bị notch che */
@media screen and (max-width: 768px) {
    .header {
        padding-top: max(8px, env(safe-area-inset-top, 8px));
    }
}

/* ─── 3. MODAL — max-height + scroll cho màn hình nhỏ ─── */
@media screen and (max-width: 768px) {

    /* Tất cả modal content: giới hạn chiều cao, cho phép scroll */
    .modal-content-box,
    .modal-content {
        max-height: 92dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 4% auto !important;
        width: 95% !important;
    }

    /* [NEW] Lịch sử đơn hàng & Phiếu nhập: mở rộng sát lề */
    #historyModal .modal-content,
    #purchaseHistoryModal .modal-content {
        width: 98% !important;
        margin: 10px auto !important;
        border-radius: 12px;
    }

    /* Modal rất cao (config, product edit): scroll tốt hơn bằng flexbox */
    #configModal .modal-content-box,
    #productModal .modal-content-box {
        max-height: 96dvh;
        margin: 1dvh auto;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    #productModal .modal-body {
        flex: 1;
        overflow-y: auto;
        max-height: none !important;
        padding-bottom: 20px !important;
    }

    /* Scanner modal: full screen */
    #scannerModal .modal-content {
        width: 100% !important;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0 !important;
        border-radius: 0;
    }

    /* Print confirm modal: compact */
    #printConfirmModal .modal-content-box {
        max-height: 80dvh;
    }

    /* Wrapper table trong modal — horizontal scroll */
    .modal-content-box table,
    .modal-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ─── 4. TOUCH TARGETS — tối thiểu 44px ─── */
@media screen and (max-width: 768px) {

    /* Nút nhỏ trong giỏ hàng (xóa, toggle combo) */
    .btn-sm {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Drag handle — vùng chạm rộng hơn */
    .drag-handle {
        min-width: var(--touch-target);
        min-height: var(--touch-target);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* Nav card — đủ lớn để tap */
    .nav-card {
        min-height: var(--touch-target);
    }

    /* Filter buttons */
    .btn-filter {
        min-height: 40px;
        padding: 8px 14px;
    }

    /* Checkbox + label area rộng hơn */
    .user-perm-list label,
    .combo-switch label {
        min-height: var(--touch-target);
        display: flex;
        align-items: center;
        cursor: pointer;
    }
}

/* ─── 5. BOTTOM NAV — nâng cấp active indicator ─── */
@media screen and (max-width: 768px) {

    /* Active tab: thêm indicator bar ở trên */
    .mobile-tab {
        position: relative;
        padding: 12px 0 14px 0;
        min-height: var(--nav-height);
        transition: color 0.15s ease, background-color 0.2s ease;
    }

    .mobile-tab::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%) scaleX(0);
        width: 32px;
        height: 3px;
        background: var(--secondary-color, #3b82f6);
        border-radius: 0 0 3px 3px;
        transition: transform 0.2s ease;
    }

    .mobile-tab.active::before {
        transform: translateX(-50%) scaleX(1);
    }

    /* Active tab: background pill nhẹ cho icon */
    .mobile-tab.active svg {
        background: rgba(59, 130, 246, 0.1);
        border-radius: 8px;
        padding: 3px;
        width: 24px;
        height: 24px;
        margin-bottom: 2px;
    }

    /* Tap feedback */
    .mobile-tab:active {
        background-color: #f1f5f9;
    }
}

/* ─── 6. CHECKOUT SECTION — flow bình thường trên mobile ─── */
@media screen and (max-width: 768px) {

    .checkout-section {
        position: static;
        border-top: 1px solid var(--border-color);
        border-radius: 8px;
        z-index: auto;
        padding: 12px 15px;
        box-shadow: none;
        background: #f8fafc;
        margin-top: 8px;
    }

    /* Calc rows — compact hơn */
    .calc-row {
        margin-bottom: 4px;
        gap: 10px;
    }

    .calc-row span.label {
        font-size: 13px;
    }

    .calc-row .value {
        font-size: 18px;
    }

    /* Thanh toán button — to và dễ tap */
    .checkout-section .btn-success,
    .checkout-section [onclick*="doCheckout"],
    .checkout-section [onclick*="saveOrder"] {
        min-height: var(--touch-target);
        font-size: 16px;
        font-weight: 700;
    }
}

/* ─── 7. HEADER MOBILE ─── */
@media screen and (max-width: 768px) {

    .header {
        position: sticky;
        top: 0;
        z-index: 900;
        padding: max(8px, env(safe-area-inset-top, 8px)) 12px 8px 12px;
        margin: 0 0 4px 0;
        border-radius: 0;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }

    /* Shop name — truncate khi quá dài */
    .val-shop-name {
        font-size: 16px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55vw;
    }
}

/* ─── 8. TABLE WRAPPERS — horizontal scroll ─── */
@media screen and (max-width: 768px) {

    /* Tất cả table trong modal đều cần scroll ngang */
    .modal-content-box .table-wrapper,
    .modal-content .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
    }

    /* Table không có wrapper riêng */
    #userModal table,
    #configModal table {
        min-width: 480px;
        /* Giữ layout, để scroll container handle */
    }
}

/* ─── 9. KPI CARDS — compact & readable on small screen ─── */
@media screen and (max-width: 480px) {

    .kpi-mini-card {
        padding: 8px;
    }

    .kpi-value {
        font-size: 18px;
    }

    .kpi-label {
        font-size: 11px;
        letter-spacing: 0;
    }

    /* KPI grid từ 4 cột → 2 cột trên màn hình rất nhỏ */
    .report-cards {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
}

/* ─── 10. PRODUCT CARDS ─── */
@media screen and (max-width: 768px) {

    .modal-footer {
        padding: 10px 10px calc(10px + env(safe-area-inset-bottom, 5px)) 10px !important;
        flex-wrap: wrap;
        gap: 6px !important;
    }

    .product-card {
        padding: 12px !important;
        margin-bottom: 10px !important;
        border-radius: 10px;
        /* Smooth active feedback */
        transition: transform 0.1s ease, box-shadow 0.1s ease;
    }

    .product-card:active {
        transform: scale(0.98);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    }
}

/* ─── 11. NOTIFICATION ALERT ─── */
/* Đã fix trong style.css — đây là fallback thêm animation phù hợp mobile */
@media screen and (max-width: 480px) {

    @keyframes slideInMobile {
        from {
            transform: translateY(-120%);
            opacity: 0;
        }

        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .alert {
        animation: slideInMobile 0.25s ease-out;
        top: max(8px, env(safe-area-inset-top, 8px));
    }
}

/* ─── 12. FORM INPUTS — ergonomic on mobile ─── */
@media screen and (max-width: 768px) {

    /* Input height tối thiểu 44px */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px;
        border-radius: 8px;
    }

    /* Exception: input trong cart table — compact hơn */
    #cartTable input {
        min-height: auto;
    }

    /* Search input padding trái cho icon */
    .search-input-wrapper input {
        padding-left: 36px;
    }
}

/* ─── 13. SCROLLABLE LIST CONTAINERS ─── */
@media screen and (max-width: 768px) {

    /* Tất cả list scroll panels: tắt bounce chain */
    .card-grid,
    .panel-left,
    #warrantyCards,
    #productCards,
    #historyCards,
    #reportCards {
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ─── 14. BREAKPOINT OVERRIDE: 480px (small phone) ─── */
@media screen and (max-width: 480px) {

    /* Modal footer: stack buttons */
    .modal-footer {
        flex-direction: column;
        gap: 8px;
    }

    .modal-footer button {
        width: 100% !important;
        justify-content: center;
    }

    /* Exception: footer chỉ có 1 nút → không ép full-width, match size với detail-footer-btns */
    .modal-footer button:only-child {
        width: auto !important;
        align-self: flex-end;
        padding: 10px 24px !important;
        font-size: 14px !important;
        min-height: 40px !important;
    }

    /* Modal footer bảo hành: hiển thị cùng hàng (row) */
    .warranty-footer-btns {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 4px !important;
    }

    .warranty-footer-btns button {
        width: auto !important;
        flex: 1 1 0% !important;
        padding: 10px 2px !important;
        font-size: 12px !important;
        justify-content: center !important;
        min-width: 0 !important;
        order: 0 !important;
        margin-top: 0 !important;
    }

    .warranty-footer-btns .warranty-btn-delete {
        margin-right: 0 !important;
    }

    .warranty-footer-spacer {
        display: none !important;
    }

    /* Detail modals footer (Order, Purchase...): giữ layout 2 hàng ngang, không stack dọc như modal thường */
    .detail-footer-btns {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .detail-footer-btns button {
        width: auto !important;
    }

    /* Grid 2-col → 1-col */
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* Header: logo nhỏ hơn */
    .val-shop-logo {
        width: 32px !important;
        height: 32px !important;
    }
}

/* ─── 15. LANDSCAPE PHONE ─── */
@media screen and (max-width: 896px) and (orientation: landscape) {

    /* Bottom nav ẩn trong landscape để tăng không gian */
    .mobile-bottom-nav {
        display: none !important;
    }

    /* Hiện desktop tabs trong landscape */
    .tabs {
        display: flex !important;
    }

    /* Body không cần padding bottom */
    body {
        padding-bottom: 0 !important;
    }

    /* Modal height: thấp hơn trong landscape */
    .modal-content-box {
        max-height: 95dvh !important;
        margin: 2% auto !important;
    }
}

/* ─── 16. DETAIL MODALS FOOTER (Order, Purchase...) — 2 hàng trên mobile ─── */
@media screen and (max-width: 768px) {

    /* Hàng 1: Sửa | Trả | In (3 nút chia đều)
       Hàng 2: Xóa | Đóng      (2 nút chia đều)
       flex-wrap tự động xuống hàng theo width */
    .detail-footer-btns {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    /* Row 1 buttons (~33% each) */
    .btn-footer-return {
        order: 1 !important;
        flex: 1 1 calc(33.33% - 8px) !important;
    }

    .btn-footer-edit {
        order: 2 !important;
        flex: 1 1 calc(33.33% - 8px) !important;
    }

    .btn-footer-reprint {
        order: 3 !important;
        flex: 1 1 calc(33.33% - 8px) !important;
    }

    /* Row 2 buttons (~50% each) */
    .btn-footer-delete {
        order: 4 !important;
        flex: 1 1 calc(50% - 8px) !important;
        margin-right: 0 !important;
        /* Reset margin-right: auto on mobile */
    }

    .btn-footer-close {
        order: 5 !important;
        flex: 1 1 calc(50% - 8px) !important;
    }

    .detail-footer-btns button {
        min-width: 0 !important;
        justify-content: center !important;
        font-size: 14px !important;
        gap: 6px !important;
        padding: 10px 10px !important;
    }

    /* ─── 16. ORDER DETAIL TABLE — Hiện đủ cột và giãn 100% ─── */
    .order-detail-table {
        display: table !important;
        width: 100% !important;
        min-width: 100% !important;
        table-layout: fixed !important;
        /* Ép bảng phải tuân thủ width 100% */
        margin-top: 15px !important;
        border-collapse: collapse !important;
    }

    .order-detail-table th,
    .order-detail-table td {
        display: table-cell !important;
        padding: 8px 4px !important;
        font-size: 12px !important;
        word-break: break-word !important;
        border: 1px solid #ddd !important;
    }

    /* Thiết lập tỷ lệ cột để bảng giãn hết cỡ */
    .order-detail-table th:nth-child(1),
    .order-detail-table td:nth-child(1) {
        width: 45% !important;
        text-align: left !important;
    }

    /* Sản Phẩm */
    .order-detail-table th:nth-child(2),
    .order-detail-table td:nth-child(2) {
        width: 10% !important;
        text-align: center !important;
    }

    /* SL */
    .order-detail-table th:nth-child(3),
    .order-detail-table td:nth-child(3) {
        width: 22% !important;
        text-align: right !important;
    }

    /* Đơn Giá */
    .order-detail-table th:nth-child(4),
    .order-detail-table td:nth-child(4) {
        width: 23% !important;
        text-align: right !important;
    }

    /* Thành Tiền */
}

/* ─── 17. CART DRAG — chỉ kéo từ handle, vuốt scroll tự do ─── */
@media screen and (max-width: 768px) {

    /* Cart row: cho phép vuốt dọc tự do — KHÔNG chặn scroll */
    .cart-row {
        touch-action: pan-y !important;
    }

    /* Drag handle: chặn touch chỉ TẠI handle để SortableJS nhận drag */
    .drag-handle {
        touch-action: none !important;
        /* Vùng chạm đủ lớn nhưng không rộng quá */
        min-width: 40px !important;
        min-height: 44px !important;
        padding: 0 8px !important;
    }

    /* ─── 17. LỊCH SỬ ĐƠN HÀNG — Bộ lọc ngày ─── */
    .history-date-filters .mobile-only {
        width: 100% !important;
        margin-bottom: 5px !important;
    }

    #historyCustomDateRange,
    #phCustomDateRange {
        width: 100% !important;
        justify-content: space-between !important;
        margin-top: 5px !important;
        background: #f1f5f9 !important;
        padding: 8px !important;
        border-radius: 8px !important;
        align-items: center;
        gap: 8px;
    }

    #historyCustomDateRange input[type="date"],
    #phCustomDateRange input[type="date"] {
        flex: 1 !important;
        height: 36px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        padding: 0 8px !important;
    }

    #historyCustomDateRange span,
    #phCustomDateRange span {
        font-weight: bold;
        color: #64748b;
    }
}

/* ─── 18. KHỐI TỒN KHO TRONG MODAL SẢN PHẨM ─── */
@media screen and (max-width: 480px) {

    /* Kéo rộng khối Tồn hiện tại sang cả cột phải để tránh rớt chữ trên mobile */
    .stock-display-box {
        width: calc(200% + 10px) !important;
        position: relative;
        z-index: 2;
    }
}