/**
 * Caprish Admin — Mobile Responsiveness v2.0
 * Targets: /admin/index.html  ·  /admin/seller.html
 * Breakpoints: ≤1024px (tablet)  ·  ≤768px (mobile)  ·  ≤400px (small)
 */

/* =======================================================
   TABLET  (≤1024px)
   ======================================================= */
@media (max-width: 1024px) {

    .container { padding: 1.5rem !important; }

    .module-hub-container {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    }

    /* Compact table action buttons */
    td > button {
        padding: 0.28rem 0.55rem !important;
        font-size: 0.75rem !important;
    }

    /* Dashboard accordion slight compression */
    .dashboard-group.expanded .dashboard-content-panel {
        padding: 1.5rem !important;
    }
}

/* =======================================================
   MOBILE  (≤768px)
   ======================================================= */
@media (max-width: 768px) {

    /* ------ Global ------ */
    *, *::before, *::after {
        box-sizing: border-box !important;
    }
    body { font-size: 14px; }

    .container {
        padding: 0.85rem !important;
        padding-bottom: 8rem !important;
    }

    /* ------ Sticky Header (Admin Panel) ------ */
    header.p-glass-nav {
        padding: 0.55rem 0.9rem !important;
        gap: 0.5rem !important;
        flex-wrap: wrap !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }

    /* Logo row */
    header.p-glass-nav > div:first-child {
        width: auto !important;
        flex: 1 !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* User/logout row */
    header.p-glass-nav > div:last-child {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        flex-shrink: 0 !important;
    }

    header.p-glass-nav img   { height: 30px !important; }
    header.p-glass-nav button { padding: 0.35rem 0.75rem !important; font-size: 0.8rem !important; width: auto !important; }
    .role-badge               { font-size: 0.75rem !important; padding: 0.2rem 0.6rem !important; }

    /* ------ Seller Header ------ */
    header:not(.p-glass-nav) {
        padding: 0.55rem 0.9rem !important;
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 100 !important;
    }
    header:not(.p-glass-nav) h2 {
        font-size: 1rem !important;
    }

    /* ------ Module Search Bar ------ */
    #module-search {
        font-size: 0.9rem !important;
        padding: 0.7rem 1.1rem !important;
        border-radius: 24px !important;
    }

    /* ------ Dashboard Accordion ------ */
    .dashboard-container {
        padding: 0 !important;
        gap: 0.6rem !important;
    }

    .dashboard-group {
        border-radius: 10px !important;
        margin-bottom: 0 !important;
    }

    .dashboard-header {
        padding: 0.9rem 1rem !important;
    }

    .dashboard-header-label {
        font-size: 0.82rem !important;
        letter-spacing: 0.04em !important;
    }

    .dashboard-group.expanded .dashboard-content-panel {
        padding: 0.85rem !important;
    }

    /* Module hub grid inside accordion */
    .module-hub-container {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)) !important;
        gap: 0.65rem !important;
    }

    .module-card {
        min-height: 120px !important;
        padding: 0.9rem 0.5rem !important;
        border-radius: 12px !important;
    }

    .module-card-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 1.5rem !important;
        margin-bottom: 0.45rem !important;
    }

    .module-card-label { font-size: 0.78rem !important; }

    /* ------ Section headers & back nav ------ */
    .section-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.4rem !important;
        padding: 0 !important;
        margin-bottom: 1rem !important;
    }

    .section-title { font-size: 1.2rem !important; }

    .back-nav  { margin-bottom: 0.85rem !important; }
    .btn-back  { font-size: 0.8rem !important; padding: 0.45rem 0.9rem !important; }

    /* ------ Generic flex button bars (inline-style rows) ------ */
    div[style*="display: flex; justify-content: space-between"] {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    div[style*="display: flex; gap: 1rem; align-items: center"] {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }

    /* Touch-friendly buttons in bars */
    div[style*="display: flex; gap"] > button {
        flex: 1 1 auto !important;
        min-width: 100px !important;
        width: auto !important;
        font-size: 0.82rem !important;
        padding: 0.55rem 0.75rem !important;
        border-radius: 8px !important;
        min-height: 40px !important;
    }

    /* ------ Filter / search bar rows ------ */
    div[style*="display: flex; gap: 1rem; margin-bottom"],
    div[style*="display: flex; gap: 1rem; align-items: center; background"] {
        flex-direction: column !important;
        gap: 0.55rem !important;
    }

    div[style*="display: flex; gap: 1rem; margin-bottom"] > *,
    div[style*="display: flex; gap: 1rem; align-items: center; background"] > * {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* ------ Tables ------ */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.06) !important;
    }

    .table-container table { min-width: 560px !important; }

    th, td {
        padding: 0.65rem 0.55rem !important;
        font-size: 0.8rem !important;
        white-space: nowrap;
    }

    /* Allow name cells to wrap */
    td:first-child {
        white-space: normal !important;
        max-width: 150px;
        word-break: break-word;
    }

    td > button {
        padding: 0.28rem 0.5rem !important;
        font-size: 0.7rem !important;
        min-width: unset !important;
        border-radius: 6px !important;
    }

    /* ------ Alerts Dashboard ------ */
    .alerts-kpis {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .alerts-kpi-card {
        padding: 0.7rem 0.85rem !important;
        border-radius: 8px !important;
    }

    .alerts-kpi-value  { font-size: 1.35rem !important; }
    .alerts-kpi-title  { font-size: 0.7rem !important; }

    .alerts-row-header { padding: 0.8rem 0.85rem !important; }

    .alerts-row-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 0.75rem !important;
    }

    .alerts-variants-table { min-width: 460px !important; }

    .alerts-action-panel {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    .alerts-tabs {
        gap: 0.5rem !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }
    .alerts-tabs::-webkit-scrollbar { display: none !important; }
    .alerts-tab-btn { font-size: 0.8rem !important; padding: 0.6rem 0.4rem !important; }

    /* ------ POS Layout (Seller Panel) ------ */
    .pos-layout {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 1rem !important;
    }

    .pos-products-container {
        overflow-y: visible !important;
        padding-right: 0 !important;
        max-height: none !important;
        padding: 0.85rem !important;
    }

    .pos-grid {
        grid-template-columns: repeat(auto-fill, minmax(115px, 1fr)) !important;
        gap: 0.55rem !important;
    }

    .pos-item {
        padding: 0.6rem 0.5rem !important;
        border-radius: 10px !important;
    }

    .pos-image-container { height: 85px !important; }

    .pos-item-title { font-size: 0.76rem !important; line-height: 1.2 !important; }
    .pos-item-price { font-size: 0.82rem !important; }
    .pos-item-stock { font-size: 0.7rem !important; }

    .pos-cart {
        height: auto !important;
        min-height: 420px !important;
        max-height: 500px !important;
        border-radius: 14px !important;
        padding: 1rem !important;
    }

    .cart-items { margin: 0.75rem 0 !important; }
    .grand-total { font-size: 1.25rem !important; }

    /* ------ Modals (bottom-sheet style on mobile) ------ */
    .modal,
    .modal-overlay-custom {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    .modal-content,
    .modal-content-custom {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 1.5rem 1rem 2rem !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        box-shadow: 0 -8px 40px rgba(0,0,0,0.18) !important;
    }

    /* Drag handle pill */
    .modal-content::before,
    .modal-content-custom::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: #d1d5db;
        border-radius: 2px;
        margin: 0 auto 1.25rem;
    }

    /* Keep discount/centered modals as centered overlays */
    #discount-products-modal .modal-overlay-custom,
    #discount-modal .modal-overlay-custom {
        align-items: center !important;
        padding: 1rem !important;
    }

    #discount-products-modal .modal-content-custom,
    #discount-modal .modal-content-custom {
        border-radius: 16px !important;
        max-height: 88vh !important;
    }

    /* ------ Credits / Layaway Layout ------ */
    .credits-grid-layout {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Inline grid layouts with 1fr 2fr etc */
    div[style*="grid-template-columns: 1fr 2fr"],
    div[style*="grid-template-columns: 2fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Seller panel table scroll */
    table {
        min-width: 500px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 10px;
    }

    /* Price Adjustment Table --- */
    #price-adj-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* ------ Module Search Bar ------ */
    #module-search {
        font-size: 0.9rem !important;
        padding: 0.7rem 1.1rem !important;
        border-radius: 24px !important;
    }

    /* ------ Login Box ------ */
    .login-box {
        margin: 2.5rem auto !important;
        padding: 2rem 1.25rem !important;
        border-radius: 20px !important;
    }

    /* ------ Pagination ------ */
    #inv-pagination {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
        padding: 0.75rem 0 !important;
    }

    #inv-page-info { font-size: 0.8rem !important; }

    /* ------ Tabs (seller panel) ------ */
    .tabs {
        overflow-x: auto !important;
        flex-wrap: nowrap !important;
        gap: 0.5rem !important;
        padding-bottom: 0.75rem !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .tabs::-webkit-scrollbar { display: none !important; }

    .tabs button {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        width: auto !important;
        font-size: 0.82rem !important;
        padding: 0.5rem 0.85rem !important;
        min-height: 38px !important;
    }
}

/* =======================================================
   VERY SMALL SCREENS  (≤400px)
   ======================================================= */
@media (max-width: 400px) {

    .alerts-kpis {
        grid-template-columns: 1fr !important;
    }

    .module-hub-container {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .module-card {
        min-height: 105px !important;
        padding: 0.75rem 0.4rem !important;
    }

    .module-card-label { font-size: 0.7rem !important; }

    .pos-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    header.p-glass-nav img { height: 26px !important; }
}