/**
 * Responsive layout — 1366×768 laptops + 1920×1080
 * Must load after Tailwind; uses !important to win over utility classes.
 */

/* Prevent horizontal bleed */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

#mainContent {
    min-width: 0;
}

/* =========================================================
   ADMIN — laptop (≤1440px) compact mode
   ========================================================= */
@media (max-width: 1440px) {
    /* Sidebar narrower so content gets more room */
    body.admin-page .sidebar.sidebar-expanded {
        max-width: 220px !important;
        min-width: 200px !important;
        width: 220px !important;
    }

    body.admin-page .sidebar.sidebar-expanded .sidebar-link {
        padding: 0.45rem 0.65rem !important;
        font-size: 0.8rem !important;
    }

    body.admin-page .sidebar.sidebar-expanded .sidebar-icon-container {
        width: 2rem !important;
        height: 2rem !important;
    }

    body.admin-page .sidebar .h-20 {
        height: 3.5rem !important;
    }

    body.admin-page .sidebar h1 {
        font-size: 1.1rem !important;
    }

    /* Header */
    body.admin-page #mainContent > header.header-white,
    body.admin-page #mainContent > header {
        height: 3.5rem !important;
        min-height: 3.5rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    body.admin-page #mainContent > header h2 {
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }

    body.admin-page #mainContent > header h2 svg,
    body.admin-page #mainContent > header h2 .w-7 {
        width: 1.15rem !important;
        height: 1.15rem !important;
    }

    body.admin-page #mainContent > header a.rounded-2xl span {
        display: none !important;
    }

    body.admin-page #mainContent > header a.rounded-2xl {
        padding: 0.45rem 0.6rem !important;
    }

    body.admin-page #mainContent > header .w-12.h-12 {
        width: 2.1rem !important;
        height: 2.1rem !important;
    }

    body.admin-page #mainContent > header .space-x-6 > :not([hidden]) ~ :not([hidden]),
    body.admin-page #mainContent > header .space-x-4 > :not([hidden]) ~ :not([hidden]) {
        margin-left: 0.5rem !important;
    }

    /* Main content padding */
    body.admin-page #mainContent > main {
        padding: 0.75rem !important;
    }

    /* Cards / panels */
    body.admin-page #mainContent main .bg-white.p-6,
    body.admin-page #mainContent main .p-6 {
        padding: 0.85rem !important;
    }

    body.admin-page #mainContent main .bg-white.p-4,
    body.admin-page #mainContent main .p-4 {
        padding: 0.75rem !important;
    }

    body.admin-page #mainContent main .mb-6 {
        margin-bottom: 0.85rem !important;
    }

    body.admin-page #mainContent main .mb-4 {
        margin-bottom: 0.65rem !important;
    }

    body.admin-page #mainContent main .gap-6 {
        gap: 0.75rem !important;
    }

    body.admin-page #mainContent main .gap-4 {
        gap: 0.65rem !important;
    }

    /* Filter forms: wrap instead of 5–6 cramped columns */
    body.admin-page #mainContent main form.grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
        gap: 0.65rem !important;
        align-items: end !important;
    }

    body.admin-page #mainContent main form.grid label {
        font-size: 0.75rem !important;
    }

    body.admin-page #mainContent main form.grid input,
    body.admin-page #mainContent main form.grid select,
    body.admin-page #mainContent main form.grid button {
        font-size: 0.8125rem !important;
        padding-top: 0.4rem !important;
        padding-bottom: 0.4rem !important;
    }

    /* Summary / stat cards */
    body.admin-page #mainContent main .grid.lg\:grid-cols-12,
    body.admin-page #mainContent main .grid[class*="lg:grid-cols-12"] {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
        gap: 0.75rem !important;
    }

    body.admin-page #mainContent main .text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }

    body.admin-page #mainContent main .text-2xl {
        font-size: 1.25rem !important;
    }

    /* Tables denser */
    body.admin-page #mainContent main table {
        font-size: 0.8125rem !important;
    }

    body.admin-page #mainContent main table th,
    body.admin-page #mainContent main table td {
        padding-left: 0.55rem !important;
        padding-right: 0.55rem !important;
        padding-top: 0.45rem !important;
        padding-bottom: 0.45rem !important;
    }

    body.admin-page #mainContent main .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
    }

    /* Row ACTION buttons only (a/button) — never hide badges / numbers */
    body.admin-page #mainContent main td a.inline-flex,
    body.admin-page #mainContent main td button.inline-flex {
        padding: 0.4rem 0.55rem !important;
        gap: 0.25rem !important;
        white-space: nowrap;
        font-size: 0.7rem !important;
    }

    body.admin-page #mainContent main td a.inline-flex svg,
    body.admin-page #mainContent main td button.inline-flex svg,
    body.admin-page #mainContent main td a.inline-flex i,
    body.admin-page #mainContent main td button.inline-flex i {
        width: 0.95rem !important;
        height: 0.95rem !important;
        flex-shrink: 0;
    }

    /* Status / payment badges must stay readable */
    body.admin-page #mainContent main td span.inline-flex,
    body.admin-page #mainContent main td span.rounded-full,
    body.admin-page #mainContent main td .rounded-full {
        font-size: 0.75rem !important;
        line-height: 1.25rem !important;
    }

    body.admin-page #mainContent main td .flex.flex-wrap {
        gap: 0.35rem !important;
    }

    /* Top action buttons (print report etc.) */
    body.admin-page #mainContent main button.px-6,
    body.admin-page #mainContent main a.px-6 {
        padding-left: 0.85rem !important;
        padding-right: 0.85rem !important;
        font-size: 0.8125rem !important;
    }
}

/* Short laptop height */
@media (max-width: 1440px) and (max-height: 820px) {
    body.admin-page #mainContent > main {
        padding: 0.6rem 0.75rem !important;
    }

    body.admin-page #mainContent main table th,
    body.admin-page #mainContent main table td {
        padding-top: 0.35rem !important;
        padding-bottom: 0.35rem !important;
    }
}

/* Full HD admin — roomier */
@media (min-width: 1920px) {
    body.admin-page #mainContent > main {
        padding: 1.75rem 2rem !important;
    }

    body.admin-page #mainContent > header.header-white {
        height: 5rem;
        padding-left: 2rem;
        padding-right: 2rem;
    }

    body.admin-page .sidebar.sidebar-expanded {
        max-width: 280px;
    }
}

/* =========================================================
   POS
   ========================================================= */
body.pos-page {
    overflow: hidden;
}

body.pos-page #product-grid-container {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 0.5rem !important;
}

body.pos-page .product-card-img {
    width: 100%;
    height: 7.5rem;
    object-fit: cover;
    border-radius: 0.375rem;
    pointer-events: none;
}

body.pos-page aside.pos-cart-aside {
    width: 100%;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    body.pos-page aside.pos-cart-aside {
        width: min(480px, 38vw);
        max-width: 520px;
    }
}

@media (min-width: 1024px) and (max-width: 1440px) {
    body.pos-page #product-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)) !important;
        gap: 0.5rem !important;
    }

    body.pos-page .product-card-img {
        height: 6.25rem;
    }

    body.pos-page .product-card h3 {
        font-size: 0.75rem !important;
    }

    body.pos-page .product-card .product-price {
        font-size: 0.875rem !important;
    }

    body.pos-page aside.pos-cart-aside {
        width: 440px;
        max-width: 440px;
    }

    body.pos-page header .pos-header-inner {
        height: 3.25rem !important;
        gap: 0.5rem !important;
    }

    body.pos-page header .pos-brand-text {
        font-size: 0.95rem !important;
    }

    body.pos-page header .pos-header-actions > a span,
    body.pos-page header .pos-header-actions > button span:not(.theme-icon-moon):not(.theme-icon-sun):not(#search-status-text) {
        display: none !important;
    }

    body.pos-page header .pos-header-actions > a,
    body.pos-page header .pos-header-actions > button {
        padding: 0.45rem 0.55rem !important;
    }

    body.pos-page #product-grid-wrapper {
        padding: 0.75rem !important;
        padding-bottom: 0 !important;
    }

    body.pos-page #categories-wrapper {
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.25rem !important;
    }

    body.pos-page .category-btn {
        padding: 0.4rem 0.85rem !important;
        font-size: 0.8rem !important;
    }

    body.pos-page .pos-inline-checkout-body {
        padding: 0.7rem 0.85rem !important;
        gap: 0.55rem !important;
    }

    body.pos-page .pos-summary-total #modal-total {
        font-size: 1.2rem !important;
    }

    body.pos-page .pos-cart-actions {
        padding: 0.6rem 0.85rem 0.85rem !important;
        gap: 0.4rem !important;
    }

    body.pos-page .pos-secondary-actions button {
        padding: 0.55rem 0.3rem !important;
        font-size: 0.7rem !important;
    }

    body.pos-page .pos-pay-btn {
        padding: 0.75rem !important;
        font-size: 0.9rem !important;
    }

    body.pos-page .pos-bill-preview-btn {
        flex-basis: 2.85rem !important;
        font-size: 0.55rem !important;
    }
}

@media (max-height: 800px) {
    body.pos-page .pos-inline-checkout {
        max-height: 70% !important;
    }

    body.pos-page .pos-inline-checkout-body {
        padding: 0.55rem 0.75rem !important;
        gap: 0.4rem !important;
    }

    body.pos-page .pos-cart-actions {
        padding: 0.5rem 0.75rem 0.75rem !important;
    }

    body.pos-page #cart-items {
        padding: 0.65rem !important;
    }
}

@media (min-width: 1920px) {
    body.pos-page #product-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)) !important;
        gap: 0.75rem !important;
    }

    body.pos-page .product-card-img {
        height: 8.5rem;
    }

    body.pos-page aside.pos-cart-aside {
        width: 520px;
        max-width: 520px;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    body.pos-page #product-grid-container {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
    }

    body.pos-page aside.pos-cart-aside {
        width: 360px;
        max-width: 360px;
    }

    body.pos-page header .pos-header-actions > a span,
    body.pos-page header .pos-header-actions > button span:not(.theme-icon-moon):not(.theme-icon-sun):not(#search-status-text) {
        display: none !important;
    }
}

/* ---------- POS inline checkout (in cart sidebar) ---------- */
body.pos-page .pos-inline-checkout {
    display: flex;
}

body.pos-page .pos-inline-checkout-body {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

body.pos-page .pos-inline-checkout-body::-webkit-scrollbar {
    width: 5px;
}

body.pos-page .pos-inline-checkout-body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

@media (max-width: 1440px), (max-height: 820px) {
    body.pos-page .pos-inline-checkout {
        max-height: 68% !important;
    }

    body.pos-page .pos-pay-methods {
        grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
    }
}

@media (max-height: 700px) {
    body.pos-page .pos-inline-checkout {
        max-height: 72% !important;
    }

    body.pos-page #cart-items {
        min-height: 4rem;
    }
}