/* ============================================
   RESPONSIVE / MOBILE / TABLET CSS
   Gold System — All Screen Sizes Support
   ============================================ */

/* ---- Viewport meta safety ---- */
html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
}

/* ===== MOBILE TOP BAR ===== */
.mobile-top-bar {
    display: none;
}

/* ===== SIDEBAR responsive ===== */
/* On screens < 768px (md), hide the sidebar off-canvas */
@media (max-width: 767px) {
    /* Show the mobile top bar */
    .mobile-top-bar {
        display: flex !important;
    }

    /* The sidebar nav */
    #main-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        height: 100vh !important;
        width: 220px !important;
        z-index: 9999 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    #main-sidebar.sidebar-open {
        transform: translateX(0) !important;
    }

    /* Mobile overlay */
    #mobile-sidebar-overlay.overlay-active {
        display: block !important;
        opacity: 1 !important;
    }
}

/* ===== MAIN CONTENT PADDING ===== */
/* Reduce padding on smaller screens */
@media (max-width: 767px) {
    main {
        padding: 12px !important;
    }
    .main-content-wrapper {
        padding: 12px !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    main {
        padding: 16px !important;
    }
}

/* ===== HEADER BARS ===== */
@media (max-width: 767px) {
    header {
        padding: 10px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
    }
    header h1 {
        font-size: 1rem !important;
    }
    header p {
        font-size: 0.65rem !important;
    }
    /* Header action buttons */
    header .flex.items-center.gap-4,
    header .flex.items-center.gap-3,
    header .flex.items-center.gap-2 {
        flex-wrap: wrap;
        gap: 6px !important;
    }
    header button,
    header a[class*="bg-"] {
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }
}

/* ===== PAGE TITLE SECTIONS ===== */
@media (max-width: 767px) {
    /* The white card section with title + buttons */
    .flex.justify-between.items-center.mb-6.bg-white {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 12px !important;
    }
    .flex.justify-between.items-center.mb-6.bg-white h1 {
        font-size: 1.25rem !important;
    }
    .flex.justify-between.items-center.mb-6.bg-white .flex.items-center.gap-4 {
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ===== FILTER BARS ===== */
@media (max-width: 767px) {
    /* Filter containers */
    .flex.flex-wrap.gap-4.items-end {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .flex.flex-wrap.gap-4.items-end > div {
        width: 100% !important;
        min-width: unset !important;
    }
    .flex.flex-wrap.gap-4.items-end input,
    .flex.flex-wrap.gap-4.items-end select {
        width: 100% !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .flex.flex-wrap.gap-4.items-end > div {
        min-width: calc(50% - 8px) !important;
        flex: 1 1 calc(50% - 8px) !important;
    }
}

/* ===== STAT CARDS ===== */
@media (max-width: 767px) {
    /* Stat card rows */
    #stats-cards,
    .flex.flex-wrap.items-center.justify-center.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
        overflow-x: visible !important;
    }
    #stats-cards > div {
        min-width: unset !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    #stats-cards,
    .flex.flex-wrap.items-center.justify-center.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
}

/* ===== TABLES ===== */
@media (max-width: 767px) {
    /* Make table containers horizontally scrollable */
    .overflow-x-auto {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Tables that aren't inside overflow-x-auto need a wrapper approach */
    table {
        min-width: 550px;
    }
    table th,
    table td {
        white-space: nowrap;
        padding: 6px 8px !important;
        font-size: 0.7rem !important;
    }
    /* Hide less important columns on mobile */
    .hide-on-mobile {
        display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    table th,
    table td {
        padding: 8px 10px !important;
        font-size: 0.78rem !important;
    }
}

/* ===== CARDS / GRID VIEWS ===== */
@media (max-width: 767px) {
    /* Invoice/product cards grid */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .md\:grid-cols-2,
    .md\:grid-cols-3,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4,
    .xl\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-cols-3,
    .grid-cols-4,
    .lg\:grid-cols-3,
    .lg\:grid-cols-4,
    .xl\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== MODALS ===== */
@media (max-width: 767px) {
    /* Full-screen modals on mobile */
    .fixed.inset-0 > div[class*="max-w-"],
    .fixed.inset-0 > .bg-white,
    #invoiceModal > div,
    #productModal > div,
    #customerModal > div,
    #purchaseModal > div,
    #sale-invoice-modal > div > div {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }
    /* Modals with max-w-sm, max-w-md, max-w-lg, etc */
    .max-w-sm,
    .max-w-md,
    .max-w-lg,
    .max-w-xl,
    .max-w-2xl,
    .max-w-3xl,
    .max-w-4xl,
    .max-w-5xl,
    .max-w-6xl,
    .max-w-7xl {
        max-width: 100% !important;
    }
    /* Scrollable modal content */
    .fixed.inset-0 {
        overflow-y: auto !important;
        padding: 0 !important;
    }
    /* Modal content inner padding */
    .fixed.inset-0 .p-6 {
        padding: 12px !important;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .max-w-5xl,
    .max-w-6xl,
    .max-w-7xl {
        max-width: 95% !important;
    }
}

/* ===== POS PAGE (Point of Sale) ===== */
@media (max-width: 767px) {
    /* POS: stack the layout vertically */
    body.pos-page .flex.flex-grow,
    body > .flex.flex-grow {
        flex-direction: column !important;
    }

    /* Cart sidebar */
    #cart-sidebar {
        width: 100% !important;
        height: auto !important;
        max-height: 55vh !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 40 !important;
        border-radius: 20px 20px 0 0 !important;
        border-top: 2px solid #e2e8f0 !important;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.15) !important;
    }

    /* POS product grid */
    #pos-products-grid {
        padding-bottom: 120px !important;
    }

    /* Gold price bar in POS */
    .gold-price-bar,
    .v2-card {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

/* ===== BUTTONS ===== */
@media (max-width: 767px) {
    /* Action button groups */
    .flex.gap-2,
    .flex.gap-3 {
        flex-wrap: wrap;
    }
    /* Make large action buttons full-width on very small screens */
    button[class*="py-3"][class*="px-6"],
    a[class*="py-3"][class*="px-6"] {
        width: 100% !important;
        justify-content: center !important;
    }
    /* Smaller button text */
    button[class*="py-2.5"],
    a[class*="py-2.5"] {
        font-size: 0.75rem !important;
        padding: 8px 12px !important;
    }
}

/* ===== INPUTS / FORMS ===== */
@media (max-width: 767px) {
    input, select, textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
    /* Form grid layouts */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr !important;
    }
    /* Form row flex layouts */
    .flex.gap-4:not(.items-center):not(header *):not(nav *) {
        flex-direction: column;
        gap: 10px;
    }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ===== TABS ===== */
@media (max-width: 767px) {
    /* Tab buttons horizontal scroll */
    .flex.gap-2.mb-6 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        flex-wrap: nowrap !important;
    }
    .flex.gap-2.mb-6 > button {
        flex-shrink: 0;
        font-size: 0.7rem !important;
        padding: 8px 12px !important;
        white-space: nowrap;
    }
}

/* ===== MULTI-BRANCH BAR ===== */
@media (max-width: 767px) {
    .bg-slate-900.text-white.px-4.py-2.flex.justify-between {
        flex-direction: column !important;
        gap: 8px !important;
        padding: 8px 12px !important;
        text-align: center;
    }
    .bg-slate-900.text-white.px-4.py-2 .flex.items-center.gap-3 {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
    }
}

/* ===== DEMO BAR ===== */
@media (max-width: 767px) {
    .bg-gradient-to-r.from-slate-900 {
        flex-direction: column !important;
        gap: 6px !important;
        text-align: center;
    }
}

/* ===== FOOTER ===== */
@media (max-width: 767px) {
    footer.text-center.text-xs {
        padding: 8px 12px !important;
        font-size: 0.6rem !important;
    }
}

/* ===== PRINT HIDE ===== */
@media print {
    .mobile-top-bar,
    #mobile-sidebar-overlay,
    .print-hide {
        display: none !important;
    }
}

/* ===== SCROLLBAR (mobile thin) ===== */
@media (max-width: 767px) {
    ::-webkit-scrollbar {
        width: 3px !important;
        height: 3px !important;
    }
}

/* ===== TYPOGRAPHY SCALE ===== */
@media (max-width: 767px) {
    .text-3xl { font-size: 1.25rem !important; }
    .text-2xl { font-size: 1.1rem !important; }
    .text-xl  { font-size: 1rem !important; }
    .text-lg  { font-size: 0.9rem !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .text-3xl { font-size: 1.5rem !important; }
}

/* ===== RESPONSIVE SPACING UTILITIES ===== */
@media (max-width: 767px) {
    .mb-6 { margin-bottom: 12px !important; }
    .gap-6 { gap: 12px !important; }
    .p-6  { padding: 12px !important; }
    .px-6 { padding-left: 12px !important; padding-right: 12px !important; }
    .py-4 { padding-top: 10px !important; padding-bottom: 10px !important; }
    .rounded-2xl { border-radius: 14px !important; }
    .rounded-3xl { border-radius: 16px !important; }
}

/* ===== PURCHASES / GOLD PRICE BAR ===== */
@media (max-width: 767px) {
    .flex-grow.max-w-xl.bg-slate-900 {
        max-width: 100% !important;
        width: 100% !important;
        flex-wrap: wrap;
        padding: 6px 10px !important;
        gap: 4px !important;
        justify-content: center !important;
    }
}

/* ===== SAFE AREA (notch support) ===== */
@supports (padding: env(safe-area-inset-bottom)) {
    footer.text-center {
        padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    }
    #cart-sidebar {
        padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    }
}

/* ===== TOUCH TARGETS ===== */
@media (max-width: 767px) {
    /* Ensure minimum 44px touch targets */
    a.nav-link,
    button {
        min-height: 44px;
    }
}

/* ===== LANDSCAPE PHONE ===== */
@media (max-width: 767px) and (orientation: landscape) {
    #main-sidebar {
        width: 200px !important;
    }
    #cart-sidebar {
        max-height: 45vh !important;
    }
}

/* ===== MOBILE SCROLLING FIX ===== */
@media (max-width: 767px) {
    body, html {
        height: auto !important;
        min-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }
    body.h-screen {
        height: auto !important;
    }
    main, #main-content {
        overflow-y: visible !important;
        height: auto !important;
    }
}