/* ==========================================================================
   ERP RESPONSIVE LAYOUT STYLESHEET
   Supports Desktop, Laptop, Tablet, and Mobile screens with high visual fidelity.
   ========================================================================== */

/* ==========================================
   1. LAPTOPS & SMALLER DESKTOPS (< 1280px)
   ========================================== */
@media (max-width: 1280px) {
    /* POS Tab Cart - shrink from 520px to 390px to fit product grid */
    .cart-v2-container {
        width: 390px !important;
    }

    /* Product History Tab Left List */
    .ph-sidebar, .ph-v2-left {
        width: 390px !important;
    }
}

/* ==========================================
   2. TABLETS & LANDSCAPE PHONES (< 992px)
   ========================================== */
@media (max-width: 992px) {
    /* POS Page Layout - Stack Product Grid and Cart vertically */
    #tab-pos {
        flex-direction: column !important;
        height: 100% !important;
        overflow-y: auto !important;
    }

    #tab-pos > div:first-child {
        min-height: 400px !important;
        height: 45vh !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .cart-v2-container {
        width: 100% !important;
        height: auto !important;
        min-height: 400px !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
    }

    /* Product History Tab Layout - Stack List and Details Panel */
    #tab-product-history {
        flex-direction: column !important;
        height: 100% !important;
        overflow-y: auto !important;
    }

    .ph-sidebar, .ph-v2-left {
        width: 100% !important;
        height: 280px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .ph-canvas, .ph-v2-right {
        width: 100% !important;
        height: auto !important;
        flex: 1 !important;
    }

    /* Stats grids layout - convert 4-columns to 2-columns */
    #tab-products > div:nth-child(2),
    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Quick stats grid */
    .quick-stats-grid,
    .quick-stats-grid-dynamic {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==========================================
   3. MOBILE SCREEN SIZES (< 768px)
   ========================================== */
@media (max-width: 768px) {
    /* Show mobile hamburger toggle */
    #mobileMenuToggle {
        display: inline-flex !important;
    }

    /* Sidebar Overlay Mode */
    #sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 1000 !important;
        height: 100vh !important;
        transform: translateX(0) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        box-shadow: 10px 0 25px rgba(0, 0, 0, 0.5) !important;
    }

    /* When collapsed on mobile, slide off-screen to the left */
    #sidebar.collapsed {
        transform: translateX(-100%) !important;
        box-shadow: none !important;
    }

    /* Manage Sidebar Backdrop Display via CSS sibling selectors */
    #sidebar:not(.collapsed) + #sidebarBackdrop {
        display: block !important;
    }

    /* Top Bar Header Layout */
    header[style*="height:76px"],
    header[style*="height: 76px"] {
        height: auto !important;
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    header > div {
        font-size: 0.85rem !important;
    }

    #cartWarehouseBlock {
        width: auto !important;
        max-width: 180px !important;
    }

    #cartWarehouseBlock .custom-branch-trigger {
        padding: 4px 8px !important;
        min-height: 36px !important;
        gap: 6px !important;
    }

    #cartWarehouseBlock .branch-trigger-text {
        max-width: 100px !important;
    }

    #cartWarehouseBlock .custom-branch-dropdown {
        left: 0 !important;
        min-width: 280px !important;
        max-width: 90vw !important;
    }

    .custom-currency-badge {
        padding: 4px 8px !important;
        min-height: 36px !important;
        gap: 5px !important;
    }

    .currency-badge-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.8rem !important;
    }

    .price-tier-toggle {
        min-height: 36px !important;
    }

    .price-tier-toggle button {
        padding: 3px 8px !important;
        font-size: 0.72rem !important;
        height: 28px !important;
    }

    /* Responsive Stats Card grid - collapse to single column */
    #tab-products > div:nth-child(2),
    div[style*="grid-template-columns:repeat(4,1fr)"],
    div[style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: 1fr !important;
    }

    .quick-stats-grid,
    .quick-stats-grid-dynamic {
        grid-template-columns: 1fr !important;
     }

    /* Responsive Tables - Hide non-critical columns on mobile */
    .tbl th:nth-child(4), .tbl td:nth-child(4), /* Accepted by / User */
    .tbl th:nth-child(5), .tbl td:nth-child(5), /* Created Date */
    .tbl th:nth-child(7), .tbl td:nth-child(7) { /* Row counts / Item count */
        display: none !important;
    }

    /* Professional Responsive Modals */
    .modal {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto !important;
        top: 3% !important;
        position: relative !important;
        transform: none !important;
        left: auto !important;
        max-height: 94vh !important;
        overflow-y: auto !important;
    }

    .modal-body {
        padding: 14px !important;
    }

    /* Modal Layout Grid Stacking */
    .modal-body div[style*="display:grid"],
    .modal-body div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* POS list items layout stacking for mobile */
    .pos-list-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        padding: 12px !important;
    }

    .pos-item-details {
        width: 100% !important;
    }

    /* Hide large title texts in sidebar if collapsed, otherwise keep readable */
    .sidebar-aside.collapsed {
        transform: translateX(-100%) !important;
    }

    /* Audit Logs Stacking */
    .audit-log-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    /* Category Chart Responsiveness */
    .category-chart-layout {
        flex-direction: column !important;
        height: auto !important;
        gap: 15px !important;
    }

    .category-chart-wrapper {
        width: 100% !important;
        height: 200px !important;
    }

    .category-legend-container {
        width: 100% !important;
        max-height: 180px !important;
    }
}

/* ==========================================
   4. EXTRA SMALL SCREENS (< 480px)
   ========================================== */
@media (max-width: 480px) {
    /* Hide navigation link text in the top-bar header to save space */
    .price-tier-toggle price-tier-toggle button {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }

    /* Compact POS checkout items list */
    #cartItems .cart-item-row {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }
}

/* ==========================================================================
   5. POS CHECKOUT MODAL RESPONSIVE BREAKPOINTS (4K, 2K, Full HD, Laptops, Mobile)
   ========================================================================== */

/* Ultra High-Resolution Displays / 4K Monitors (>= 2500px) */
@media (min-width: 2500px) {
    #posCheckoutModal .pos-checkout-modal {
        width: 85vw !important;
        max-width: 2200px !important;
        height: 85vh !important;
        max-height: 1300px !important;
        font-size: 1rem !important;
    }

    #posCheckoutModal .pos-checkout-hdm-sidebar {
        width: 440px !important;
        min-width: 440px !important;
        padding: 24px !important;
    }

    #posCheckoutModal .pos-checkout-total-val {
        font-size: 1.8rem !important;
    }

    #posCheckoutModal .pos-checkout-btn-pay {
        font-size: 1.15rem !important;
        padding: 12px 24px !important;
    }
}

/* 2K / QHD Monitors (1921px - 2499px) */
@media (min-width: 1921px) and (max-width: 2499px) {
    #posCheckoutModal .pos-checkout-modal {
        width: 90vw !important;
        max-width: 1900px !important;
        height: 88vh !important;
        max-height: 1100px !important;
    }

    #posCheckoutModal .pos-checkout-hdm-sidebar {
        width: 400px !important;
        min-width: 400px !important;
    }
}

/* Full HD & Standard Desktop Monitors (1366px - 1920px) */
@media (min-width: 1366px) and (max-width: 1920px) {
    #posCheckoutModal .pos-checkout-modal,
    #editTransactionModal .pos-checkout-modal {
        width: 94vw !important;
        max-width: 1820px !important;
        height: 90vh !important;
    }

    #posCheckoutModal .pos-checkout-hdm-sidebar,
    #editTransactionModal .pos-checkout-hdm-sidebar {
        width: 360px !important;
        min-width: 360px !important;
    }

    #posCheckoutModal .pos-checkout-footer {
        padding: 10px 18px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    #posCheckoutModal .pos-checkout-footer-secondary-btns {
        flex-wrap: nowrap !important;
        gap: 6px !important;
    }

    #posCheckoutModal .pos-checkout-footer-secondary-btns button {
        padding: 7px 10px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    #posCheckoutModal .pos-checkout-footer-primary-wrapper {
        flex-wrap: nowrap !important;
        gap: 14px !important;
    }

    #posCheckoutModal .pos-checkout-btn-release {
        padding: 9px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }

    #posCheckoutModal .pos-checkout-btn-pay {
        padding: 9px 16px !important;
        font-size: 0.95rem !important;
        white-space: nowrap !important;
    }
}

/* Mid Laptops (1100px - 1365px) */
@media (min-width: 1100px) and (max-width: 1365px) {
    #posCheckoutModal .pos-checkout-modal,
    #editTransactionModal .pos-checkout-modal {
        width: 96vw !important;
        height: 92vh !important;
    }

    #posCheckoutModal .pos-checkout-hdm-sidebar,
    #editTransactionModal .pos-checkout-hdm-sidebar {
        width: 330px !important;
        min-width: 330px !important;
        padding: 12px !important;
    }

    #posCheckoutModal .pos-checkout-footer {
        padding: 8px 12px !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 8px !important;
    }

    #posCheckoutModal .pos-checkout-footer-secondary-btns {
        gap: 4px !important;
    }

    #posCheckoutModal .pos-checkout-footer-secondary-btns button {
        padding: 6px 8px !important;
        font-size: 0.75rem !important;
        white-space: nowrap !important;
    }

    #posCheckoutModal .pos-checkout-footer-total {
        font-size: 0.7rem !important;
    }

    #posCheckoutModal .pos-checkout-total-val {
        font-size: 1.25rem !important;
    }

    #posCheckoutModal .pos-checkout-footer-primary-wrapper {
        gap: 8px !important;
    }

    #posCheckoutModal .pos-checkout-btn-release {
        padding: 7px 10px !important;
        font-size: 0.8rem !important;
        white-space: nowrap !important;
    }

    #posCheckoutModal .pos-checkout-btn-pay {
        padding: 7px 12px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
}

/* Small Screens / Tablets (< 1099px) */
@media (max-width: 1099px) {
    #posCheckoutModal .pos-checkout-modal,
    #editTransactionModal .pos-checkout-modal {
        width: 98vw !important;
        height: 95vh !important;
        max-height: 95vh !important;
    }

    #posCheckoutModal .pos-checkout-body,
    #editTransactionModal .pos-checkout-body {
        flex-direction: column !important;
        overflow-y: auto !important;
    }

    #posCheckoutModal .pos-checkout-left-col,
    #editTransactionModal .pos-checkout-left-col {
        overflow: visible !important;
        min-height: auto !important;
    }

    #posCheckoutModal .pos-checkout-hdm-sidebar,
    #editTransactionModal .pos-checkout-hdm-sidebar {
        width: 100% !important;
        min-width: 100% !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
        overflow-y: visible !important;
    }

    #posCheckoutModal .pos-checkout-footer {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    #posCheckoutModal .pos-checkout-footer-secondary-btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        width: 100% !important;
        gap: 6px !important;
    }

    #posCheckoutModal .pos-checkout-footer-secondary-btns button {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
    }

    #posCheckoutModal .pos-checkout-footer-primary-wrapper {
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    #posCheckoutModal .pos-checkout-footer-main-btns {
        display: flex !important;
        gap: 8px !important;
    }
}