/* ============================================================
   VYLAA LIFESTYLE - GLOBAL RESPONSIVE COMPATIBILITY LAYER
   Desktop, tablet and mobile. Loaded after page-specific CSS.
   ============================================================ */

html { -webkit-text-size-adjust: 100%; }
html, body { max-width: 100%; }
body { overflow-x: hidden; }
img, svg, video, canvas { max-width: 100%; height: auto; }
input, select, textarea, button { max-width: 100%; }
pre, code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.table-wrap, .invoice-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table, .invoice-table-wrap table { min-width: max-content; }
.card, .panel, section, article, main { min-width: 0; }
.break-text, td, p, small { overflow-wrap: anywhere; }

/* ---------- Super Admin shell ---------- */
.platform-shell { width: 100%; overflow-x: hidden; }
.topbar { width: 100%; }
.brand { flex: 0 0 auto; }
.platform-nav { min-width: 0; }
.platform-nav a { flex: 0 0 auto; white-space: nowrap; }
.top-actions { flex: 0 0 auto; }
.platform-menu-toggle {
    display: none;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    padding: 0;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 9px;
    background: rgba(255,255,255,.08);
    color: #fff;
    font-size: 20px;
    line-height: 1;
}

/* At normal laptop/desktop widths put the full navigation on its own row.
   This prevents the 100% zoom overflow seen with all platform modules enabled. */
@media (max-width: 1500px) {
    .topbar { flex-wrap: wrap; padding: 14px 20px; gap: 10px 16px; }
    .platform-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 4px;
    }
    .platform-nav a { padding: 7px 9px; font-size: 12px; }
    .top-actions { margin-left: auto; }
}

@media (max-width: 900px) {
    .container { width: min(100% - 24px, 1180px); margin: 18px auto; }
    .topbar { align-items: center; padding: 12px 14px; }
    .brand strong { font-size: 18px; }
    .brand span { font-size: 12px; }
    .platform-menu-toggle { display: grid; order: 2; margin-left: auto; }
    .top-actions { order: 2; margin-left: 0; gap: 8px; }
    .top-actions #adminName { display: none; }
    .top-actions button { padding: 8px 10px; font-size: 12px; }
    .platform-nav {
        display: none;
        order: 3;
        width: 100%;
        max-height: min(66vh, 520px);
        overflow-y: auto;
        padding: 8px;
        border-radius: 10px;
        background: #172033;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    .topbar.nav-open .platform-nav { display: grid; }
    .platform-nav a { width: 100%; padding: 10px 11px; }
    .grid,
    .store-summary-grid,
    .admin-summary-grid,
    .subscription-summary-grid,
    .analytics-summary-grid,
    .analytics-two-column,
    .customer-summary-grid,
    .audience-summary-grid,
    .details-grid,
    .form-grid,
    .feature-control-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .page-heading-row, .section-title { align-items: flex-start; }
}

@media (max-width: 640px) {
    .topbar { gap: 9px; }
    .brand { max-width: calc(100% - 104px); }
    .platform-menu-toggle { width: 40px; height: 40px; }
    .top-actions { width: auto; }
    .platform-nav { grid-template-columns: 1fr; }
    .container { width: min(100% - 20px, 1180px); margin-top: 14px; }
    .hero h1, .page-heading-row h1 { font-size: clamp(24px, 8vw, 30px); }
    .card { padding: 15px; border-radius: 11px; }
    .grid,
    .store-summary-grid,
    .admin-summary-grid,
    .subscription-summary-grid,
    .analytics-summary-grid,
    .analytics-two-column,
    .customer-summary-grid,
    .audience-summary-grid,
    .details-grid,
    .form-grid,
    .feature-control-grid { grid-template-columns: 1fr !important; }
    .page-heading-row, .section-title, .store-toolbar, .store-filters, .modal-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .page-heading-row > *, .store-filters > *, .modal-actions > *, .feature-preset-actions > * { width: 100%; }
    .modal-backdrop { padding: 10px; }
    .modal-card { max-height: calc(100dvh - 20px); padding: 16px; border-radius: 12px; }
    th, td { padding: 10px 8px; }
}

/* ---------- Store Admin shell ---------- */
@media (max-width: 1180px) {
    .admin-main { padding-left: 22px; padding-right: 22px; }
    .admin-topbar { gap: 10px; }
    .dashboard-header, .page-header, .section-header { gap: 14px; }
}

@media (max-width: 820px) {
    .admin-main { width: 100%; min-width: 0; padding: 0 14px 28px; }
    .admin-topbar { min-height: 68px; flex-wrap: wrap; }
    .topbar-left { min-width: 0; display: flex; align-items: center; gap: 8px; }
    .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .admin-topbar .vylaa-notification-wrap { margin-left: auto !important; }
    .dashboard-header, .page-header { padding-top: 24px; }
    .dashboard-grid, .content-grid, .form-layout, .two-column-grid { grid-template-columns: 1fr !important; }
    .panel-header { gap: 10px; }
    .row-actions, .quick-actions { flex-wrap: wrap; }
}

@media (max-width: 560px) {
    .admin-main { padding-left: 10px; padding-right: 10px; }
    .admin-topbar { min-height: 62px; }
    .admin-user-name, .admin-user-role { display: none !important; }
    .topbar-signout-button { margin-left: 4px !important; }
    .dashboard-header h1, .page-header h1 { font-size: clamp(24px, 8vw, 28px); }
    .stats-grid { grid-template-columns: 1fr !important; }
    .quick-actions, .toolbar, .filters, .filter-row, .action-row { width: 100%; }
    .quick-actions > *, .toolbar > button, .filters > *, .filter-row > * { max-width: 100%; }
    .enquiry-row { grid-template-columns: 42px minmax(0,1fr); }
    .enquiry-row > :last-child { grid-column: 1 / -1; }
    .login-form-panel { padding-left: 16px; padding-right: 16px; }
    .login-brand-panel { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Storefront ---------- */
@media (max-width: 900px) {
    .sf-shell, .sf-main, .storefront-shell { max-width: 100%; }
    .sf-product-grid, .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 600px) {
    .sf-product-grid, .product-grid { grid-template-columns: 1fr !important; }
    .sf-customer-order-modal { padding: 8px; }
    .sf-customer-order-modal-card { width: 100%; max-height: 94dvh; padding: 15px; border-radius: 11px; }
}

/* ---------- Invoice / print screens ---------- */
@media (max-width: 720px) {
    .invoice-page { width: 100%; padding-left: 10px; padding-right: 10px; }
    .invoice-toolbar { flex-wrap: wrap; gap: 8px; }
    .invoice-toolbar-actions { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; }
    .invoice-header, .invoice-meta-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   SUPER ADMIN DESKTOP COMPACT FIT
   Keeps dense platform tables readable at 100% browser zoom
   without changing mobile/tablet behaviour.
   ============================================================ */
@media (min-width: 901px) {
    .platform-shell .container {
        width: min(1320px, calc(100% - 20px));
        margin: 22px auto;
    }

    .platform-shell .card {
        padding: 16px;
    }

    .platform-shell .grid {
        gap: 12px;
        margin: 18px 0;
    }

    .platform-shell .stat span { font-size: 12px; }
    .platform-shell .stat strong { font-size: 25px; margin-top: 6px; }

    .platform-shell .table-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .platform-shell .table-wrap table {
        width: 100%;
        min-width: 0;
        table-layout: auto;
        font-size: 12.25px;
    }

    .platform-shell .table-wrap th,
    .platform-shell .table-wrap td {
        padding: 9px 7px;
        line-height: 1.3;
    }

    .platform-shell .table-wrap th {
        font-size: 10.5px;
        letter-spacing: 0;
    }

    .platform-shell .table-wrap td small,
    .platform-shell .table-wrap td .muted-small {
        font-size: 10.5px;
    }

    .platform-shell .status {
        padding: 4px 7px;
        font-size: 10.5px;
    }

    .platform-shell .table-action,
    .platform-shell .table-wrap button,
    .platform-shell .table-wrap .button-link {
        padding: 7px 9px;
        font-size: 10.5px;
        border-radius: 8px;
    }

    .platform-shell .store-filters {
        gap: 8px;
    }

    .platform-shell .store-filters input {
        min-width: 220px;
    }

    .platform-shell input,
    .platform-shell select {
        font-size: 13px;
        padding: 10px;
    }

    .platform-shell button {
        font-size: 12px;
        padding: 9px 12px;
    }

    .platform-shell .audit-filter-grid {
        grid-template-columns: minmax(190px, 1.7fr) minmax(115px, .85fr) minmax(115px, .85fr) minmax(135px, 1fr) minmax(135px, 1fr) auto auto;
        gap: 8px;
    }

    .platform-shell .audit-filter-grid input,
    .platform-shell .audit-filter-grid select {
        min-width: 0;
    }

    /* Long API paths, backup IDs and action text may wrap instead of forcing
       the whole table wider than the card. */
    .platform-shell .table-wrap td {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    .platform-shell .table-wrap th:last-child,
    .platform-shell .table-wrap td:last-child {
        padding-right: 5px;
    }
}

@media (min-width: 901px) and (max-width: 1280px) {
    .platform-shell .container {
        width: calc(100% - 12px);
    }
    .platform-shell .card { padding: 13px; }
    .platform-shell .table-wrap table { font-size: 11.5px; }
    .platform-shell .table-wrap th { font-size: 10px; }
    .platform-shell .table-wrap th,
    .platform-shell .table-wrap td { padding: 8px 5px; }
    .platform-shell .table-action,
    .platform-shell .table-wrap button,
    .platform-shell .table-wrap .button-link {
        padding: 6px 7px;
        font-size: 10px;
    }
}

/* ============================================================
   STORE ADMIN DESKTOP COMPACT FIT
   Keeps dense Inventory / Customers and other seller pages
   readable at 100% browser zoom without changing mobile layout.
   ============================================================ */
@media (min-width: 821px) and (max-width: 1400px) {
    .admin-main {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .inventory-page,
    .customers-page {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .inventory-heading,
    .customers-heading {
        margin-bottom: 13px;
        gap: 10px;
    }

    .inventory-heading h1,
    .customers-heading h1 {
        font-size: 25px;
    }

    .inventory-metrics {
        gap: 7px;
    }

    .inventory-metric {
        padding: 9px 9px;
    }

    .inventory-metric span {
        font-size: 9px;
    }

    .inventory-metric strong {
        font-size: 16px;
    }

    .inventory-grid {
        min-width: 900px !important;
        table-layout: auto;
    }

    .inventory-grid th {
        padding: 9px 7px;
        font-size: 9px;
    }

    .inventory-grid td {
        padding: 9px 7px;
        font-size: 10.5px;
    }

    .inventory-product-cell {
        min-width: 145px !important;
        gap: 7px;
    }

    .inventory-product-cell img,
    .inventory-product-placeholder {
        width: 30px;
        height: 30px;
    }

    .stock-status,
    .availability-status {
        padding: 3px 6px;
        font-size: 9px;
    }

    .inventory-grid .actions button,
    .inventory-grid .actions .button,
    .inventory-grid .actions a {
        padding: 6px 8px !important;
        font-size: 9.5px !important;
        white-space: nowrap;
    }

    .customer-count-card {
        min-width: 115px;
        padding: 10px 12px;
    }

    .customer-count-card strong {
        font-size: 19px;
    }

    .customer-grid {
        min-width: 930px !important;
        table-layout: auto;
    }

    .customer-grid th {
        padding: 9px 6px;
        font-size: 9px;
    }

    .customer-grid td {
        padding: 9px 6px;
        font-size: 10.5px;
    }

    .customer-name-cell {
        min-width: 115px !important;
    }

    .customer-view-button {
        padding: 5px 7px;
        font-size: 9.5px;
        white-space: nowrap;
    }

    .customer-grid td,
    .inventory-grid td {
        line-height: 1.25;
    }

    .customer-grid-wrap,
    .inventory-grid-wrap {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
}

@media (min-width: 821px) and (max-width: 1180px) {
    .admin-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .inventory-page,
    .customers-page {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .inventory-grid {
        min-width: 850px !important;
    }

    .customer-grid {
        min-width: 890px !important;
    }

    .inventory-grid th,
    .customer-grid th {
        font-size: 8.5px;
    }

    .inventory-grid td,
    .customer-grid td {
        font-size: 10px;
    }
}