/* ═══════════════════════════════════════════════════════════════════
   Mobile & Tablet Responsive Overrides
   Comprehensive UX revamp for phones, tablets, and iPads
   ───────────────────────────────────────────────────────────────────
   BREAKPOINT STRATEGY:
     ≤576px  — Phones (portrait)
     577-767 — Large phones / small tablets (phablet)
     768-991 — Tablets (iPad mini portrait, iPad landscape)
     992-1024 — iPad Pro portrait
     1025-1366 — iPad Pro landscape / small laptops
   ═══════════════════════════════════════════════════════════════════ */

/* ===========================================
   CSS CUSTOM PROPERTIES — Mobile Tokens
   =========================================== */
:root {
    --mobile-gutter: 0.625rem;       /* 10px */
    --mobile-card-gap: 0.5rem;       /* 8px */
    --mobile-font-base: 0.8125rem;   /* 13px */
    --mobile-font-sm: 0.75rem;       /* 12px */
    --mobile-font-xs: 0.6875rem;     /* 11px */
    --tablet-gutter: 0.75rem;        /* 12px */
    --tablet-font-base: 0.84rem;     /* ~13.5px */
}

/* ===========================================
   0. GLOBAL — Reduce all font sizes by 2px on mobile
   =========================================== */

@media (max-width: 767.98px) {
    html {
        font-size: 93.75%; /* 15px base instead of 16px = 1px smaller globally */
    }
}

/* ===========================================
   1. SIDEBAR — Mobile UX Overhaul
   =========================================== */

@media (max-width: 991.98px) {

    /* Sidebar: full-height slide-out drawer, flex column to stack header/nav/footer */
    .app-sidebar {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 260px !important;
        z-index: 1060 !important;
        overflow: hidden !important;
        height: 100% !important;
        /* iOS Safari safe area — extend behind bottom URL bar */
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Main sidebar area: take remaining space, scroll vertically */
    .main-sidebar {
        flex: 1 1 0 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,255,255,0.2) transparent;
        min-height: 0 !important; /* allow flex child to shrink for scroll */
    }

    /* Sidebar footer: stop being absolute, sit in the flow after nav */
    .sidebar-footer {
        position: static !important;
        flex-shrink: 0 !important;
    }

    .main-sidebar::-webkit-scrollbar { width: 3px; }
    .main-sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
    .main-sidebar::-webkit-scrollbar-track { background: transparent; }

    /* Fix slide-left/right nav arrows */
    .slide-left, .slide-right { display: none !important; }

    /* Main menu: no horizontal overflow */
    .main-menu-container { overflow-x: hidden !important; overflow-y: visible !important; }
    .main-menu { overflow-x: hidden !important; }

    /* Sidebar header logo area */
    .main-sidebar-header {
        padding: 0.75rem 1rem !important;
        min-height: 56px !important;
        display: flex !important;
        align-items: center !important;
    }

    .main-sidebar-header .header-logo {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
    }

    .main-sidebar-header .logo-img { max-height: 32px !important; max-width: 160px !important; }

    /* Collapse/expand chevron — compact, just enough touch target */
    .side-menu__angle {
        font-size: 0.65rem !important;
        width: 24px !important;
        height: 24px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        opacity: 0.6 !important;
    }

    /* Side menu icons — smaller and tighter */
    .side-menu__item .side-menu__icon,
    .side-menu__item > i {
        font-size: 0.85rem !important;
        width: 16px !important;
        min-width: 16px !important;
        text-align: center !important;
        margin-right: 0 !important;
    }

    /* Side menu labels — slightly smaller */
    .side-menu__label {
        font-size: 0.82rem !important;
        line-height: 1.3 !important;
    }

    /* Side menu items — tighter padding, smaller minimum height */
    .side-menu__item {
        padding: 0.5rem 0.85rem !important;
        min-height: 36px !important;
        font-size: 0.82rem !important;
        gap: 0.55rem !important;
    }

    /* Sub menu items — tighter indent on mobile */
    .slide-menu .side-menu__item {
        padding: 0.4rem 0.85rem 0.4rem 1.25rem !important;
        min-height: 32px !important;
        font-size: 0.78rem !important;
        gap: 0.5rem !important;
    }
    .slide-menu .side-menu__item .side-menu__icon,
    .slide-menu .side-menu__item > i {
        font-size: 0.75rem !important;
        width: 14px !important;
        min-width: 14px !important;
    }
    .slide-menu .side-menu__label {
        font-size: 0.78rem !important;
    }
    .slide-menu.child2 .side-menu__item {
        padding-left: 1.65rem !important;
    }
    .slide-menu.child3 .side-menu__item {
        padding-left: 2.05rem !important;
    }

    /* Section headers / category labels — more compact */
    .category-name,
    .slide__category {
        font-size: 0.62rem !important;
        padding: 0.5rem 0.85rem 0.25rem !important;
        letter-spacing: 0.05em !important;
        opacity: 0.55 !important;
    }

    /* Tighter spacing between top-level slides */
    .slide {
        margin-bottom: 0 !important;
    }

    /* Entity separator in sidebar */
    .slide[style*="border-top"] { margin: 4px 12px !important; }

    /* Sidebar toggle in header — larger touch target */
    .sidemenu-toggle {
        width: 42px !important;
        height: 42px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 0.25rem !important;
    }

    .sidebar-toggle-icon { font-size: 1rem !important; }
    .sidebar-toggle-icon.d-lg-none { font-size: 1.125rem !important; }

    /* Responsive overlay */
    #responsive-overlay { z-index: 1055 !important; }

    /* Entity favicon icons in sidebar */
    .entity-favicon-icon {
        width: 22px !important;
        height: 22px !important;
        flex-shrink: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .entity-favicon-img { width: 22px !important; height: 22px !important; object-fit: contain !important; }
}

/* ===========================================
   2. HEADER — Compact Mobile Header
   =========================================== */

@media (max-width: 991.98px) {

    .app-header { height: 52px !important; min-height: 52px !important; }

    .main-header-container { height: 52px !important; padding: 0 0.5rem !important; }

    /* Reorder: hamburger before logo on mobile */
    .header-content-left {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
    }

    .header-content-left > .header-element:first-child { order: 2 !important; }   /* logo */
    .header-content-left > .header-element:nth-child(2) { order: 1 !important; }  /* hamburger */

    /* Header logo */
    .app-header .horizontal-logo .header-logo img {
        height: 1.75rem !important;
        max-width: 120px !important;
        object-fit: contain !important;
    }

    /* Profile avatar */
    .mainuserProfile .avatar-sm { width: 30px !important; height: 30px !important; }
    .mainuserProfile .avatar-sm img { width: 30px !important; height: 30px !important; }

    /* Hide the vertical divider element on mobile */
    .header-content-left > .header-element.d-none.d-xl-flex { display: none !important; }
}

/* ===========================================
   3. PAGE HEADER / BREADCRUMB
   =========================================== */

@media (max-width: 991.98px) {

    /* White topbar on mobile — override gradient/color/dark header styles */
    [data-header-styles="gradient"] .app-header,
    [data-header-styles="color"] .app-header,
    [data-header-styles="dark"] .app-header,
    .app-header {
        background: #fff !important;
        border-bottom: 1px solid #e9ecef !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
    }

    /* Header text/icons adapt to white background */
    .app-header .header-link,
    .app-header .header-link-icon,
    .app-header .sidebar-toggle-icon {
        color: #374151 !important;
    }

    /* Show ONLY toggle-logo on mobile white header, hide all others */
    [data-header-styles="gradient"] .app-header .horizontal-logo .header-logo .desktop-logo,
    [data-header-styles="gradient"] .app-header .horizontal-logo .header-logo .desktop-dark,
    [data-header-styles="gradient"] .app-header .horizontal-logo .header-logo .toggle-dark,
    [data-header-styles="color"] .app-header .horizontal-logo .header-logo .desktop-logo,
    [data-header-styles="color"] .app-header .horizontal-logo .header-logo .desktop-dark,
    [data-header-styles="color"] .app-header .horizontal-logo .header-logo .toggle-dark,
    [data-header-styles="dark"] .app-header .horizontal-logo .header-logo .desktop-logo,
    [data-header-styles="dark"] .app-header .horizontal-logo .header-logo .desktop-dark,
    [data-header-styles="dark"] .app-header .horizontal-logo .header-logo .toggle-dark,
    .app-header .horizontal-logo .header-logo .desktop-logo,
    .app-header .horizontal-logo .header-logo .desktop-dark,
    .app-header .horizontal-logo .header-logo .toggle-dark {
        display: none !important;
    }

    [data-header-styles="gradient"] .app-header .horizontal-logo .header-logo .toggle-logo,
    [data-header-styles="color"] .app-header .horizontal-logo .header-logo .toggle-logo,
    [data-header-styles="dark"] .app-header .horizontal-logo .header-logo .toggle-logo,
    .app-header .horizontal-logo .header-logo .toggle-logo {
        display: block !important;
    }

    .page-header-breadcrumb {
        min-height: auto !important;
        padding: 0.5rem 0.75rem !important;
        top: 0 !important;
        margin: 0 !important;
        padding-inline-start: 0.75rem !important;
    }

    .page-header-breadcrumb h4 { font-size: 0.95rem !important; margin-bottom: 0 !important; }
    .page-header-breadcrumb .breadcrumb { font-size: 0.7rem !important; }
    .page-header-breadcrumb .breadcrumb-item { font-size: 0.7rem !important; }

    /* Content area: tight to topbar, no side margin — let container-fluid handle padding */
    .app-content {
        margin-block-start: 52px !important;
        margin-inline-start: 0 !important;
        margin-inline-end: 0 !important;
        padding: 0 !important;
    }
}

@media (max-width: 576px) {
    .page-header-breadcrumb { padding: 0.5rem 0.625rem !important; }
    .page-header-breadcrumb h4 { font-size: 0.875rem !important; }

    /* Hide breadcrumb on phones — title is enough */
    .page-header-breadcrumb .breadcrumb { display: none !important; }
}

/* ===========================================
   4. CONTAINER & CARD SPACING
   =========================================== */

@media (max-width: 991.98px) {
    .main-content .container-fluid { padding: var(--tablet-gutter) !important; }
}

@media (max-width: 767.98px) {
    .main-content .container-fluid { padding: var(--mobile-gutter) !important; }
}

@media (max-width: 576px) {
    .card.custom-card { margin-bottom: var(--mobile-card-gap) !important; }
    .card-body { padding: 0.5rem !important; }
    .card-header { padding: 0.5rem 0.625rem !important; }
}

/* ===========================================
   5. STAT BLOCKS — Compact, Space-Efficient
   Override BOTH stat card definitions in styles.css
   (lines 17776 and 18558)
   =========================================== */

/* ── Tablet (768px–991px) — 2-column grid ── */
@media (max-width: 991.98px) {
    .sa-stats-dashboard { margin-bottom: 0.75rem !important; }

    .sa-stats-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
        flex-wrap: unset !important;
        flex-direction: unset !important;
    }

    .sa-stat-card {
        min-width: 0 !important;
        padding: 0.75rem !important;
        min-height: auto !important;
    }

    .sa-stat-card__value { font-size: 1.25rem !important; }
    .sa-stat-card__title { font-size: 0.65rem !important; }
    .sa-stat-card__subtitle { font-size: 0.7rem !important; }
    .sa-stat-card__icon { width: 30px !important; height: 30px !important; font-size: 0.8rem !important; }

    .sa-stat-card__breakdown {
        margin-top: 0.5rem !important;
        padding-top: 0.5rem !important;
        gap: 0.5rem !important;
        flex-direction: row !important;
    }

    .sa-stat-card__breakdown-value { font-size: 0.95rem !important; }
    .sa-stat-card__breakdown-label { font-size: 0.6rem !important; }

    .sa-stat-card--wide {
        grid-column: span 2 !important;
        min-width: 0 !important;
    }

    .sa-stat-card__carriers { flex-direction: row !important; flex-wrap: wrap !important; }
}

/* ── Mobile (≤576px) — Horizontal scrolling row ── */
@media (max-width: 576px) {
    .sa-stats-row {
        display: flex !important;
        grid-template-columns: unset !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 0.5rem !important;
        padding-bottom: 0.375rem !important;
        scroll-snap-type: x proximity;
        scroll-behavior: smooth;
        -webkit-scroll-behavior: smooth;
        scrollbar-width: none;
    }

    .sa-stats-row::-webkit-scrollbar { display: none; }

    .sa-stat-card {
        flex: 0 0 155px !important;
        min-width: 155px !important;
        max-width: 180px !important;
        padding: 0.625rem !important;
        scroll-snap-align: start;
        min-height: auto !important;
    }

    .sa-stat-card__header { margin-bottom: 0.375rem !important; }
    .sa-stat-card__value { font-size: 1.1rem !important; margin-bottom: 0.25rem !important; }
    .sa-stat-card__title { font-size: 0.6rem !important; }
    .sa-stat-card__icon { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; }
    .sa-stat-card__subtitle { font-size: 0.625rem !important; }

    .sa-stat-card__breakdown {
        flex-direction: row !important;
        gap: 0.375rem !important;
        margin-top: 0.375rem !important;
        padding-top: 0.375rem !important;
    }

    .sa-stat-card__breakdown-value { font-size: 0.85rem !important; }
    .sa-stat-card__breakdown-label { font-size: 0.55rem !important; }

    .sa-stat-card--wide {
        flex: 0 0 200px !important;
        min-width: 200px !important;
        max-width: 240px !important;
    }

    .sa-stats-dashboard { margin-bottom: 0.5rem !important; }

    /* Hide clickable hint on mobile */
    .sa-stat-card--clickable .sa-stat-card__subtitle::after { display: none !important; }
}

/* ===========================================
   6. DATA TABLES — Cleaner Mobile Layout
   =========================================== */

/* ── Tablet ── */
@media (max-width: 991.98px) {
    .card-title { font-size: 0.875rem !important; }

    .card-header .btn-list {
        display: flex !important;
        gap: 0.375rem !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }

    .card-header .btn-list .btn {
        padding: 0.3rem 0.625rem !important;
        font-size: 0.75rem !important;
        margin: 0 !important;
    }

    .sa-table-header-row { gap: 0.5rem !important; margin-bottom: 0.5rem !important; padding-bottom: 0.5rem !important; }
    .sa-table-title { font-size: 1rem !important; }
    .table-responsive { margin: 0 !important; }
}

/* ── Phablet (577-767px) ── */
@media (min-width: 577px) and (max-width: 767.98px) {
    .card-title { font-size: 0.85rem !important; }

    .card-header .btn-list .btn {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.72rem !important;
    }
}

/* ── Mobile ── */
@media (max-width: 576px) {
    .card-title { font-size: 0.8rem !important; }

    /* Card header: stack title and buttons vertically */
    .card-header { flex-wrap: wrap !important; gap: 0.375rem !important; }

    .card-header .btn-list {
        width: 100% !important;
        display: flex !important;
        gap: 0.25rem !important;
    }

    .card-header .btn-list .btn {
        flex: 1 !important;
        text-align: center !important;
        padding: 0.375rem 0.5rem !important;
        font-size: 0.7rem !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .sa-table-title { font-size: 0.875rem !important; }

    table.sa-table th {
        font-size: 0.68rem !important;
        padding: 6px 8px !important;
        letter-spacing: 0.02em !important;
    }

    table.sa-table td { font-size: 0.75rem !important; }
}

/* ===========================================
   7. TYPOGRAPHY — Scale Down
   =========================================== */

@media (max-width: 991.98px) {
    body { font-size: var(--tablet-font-base) !important; }

    h1, .h1 { font-size: 1.25rem !important; }
    h2, .h2 { font-size: 1.125rem !important; }
    h3, .h3 { font-size: 1rem !important; }
    h4, .h4 { font-size: 0.9375rem !important; }
    h5, .h5 { font-size: 0.875rem !important; }
    h6, .h6 { font-size: 0.8125rem !important; }
}

@media (max-width: 576px) {
    body { font-size: var(--mobile-font-base) !important; }

    h1, .h1 { font-size: 1.125rem !important; }
    h2, .h2 { font-size: 1rem !important; }
    h3, .h3 { font-size: 0.9375rem !important; }
    h4, .h4 { font-size: 0.875rem !important; }
    h5, .h5 { font-size: 0.8125rem !important; }
    h6, .h6 { font-size: 0.75rem !important; }

    .form-label, label { font-size: 0.75rem !important; }

    .form-control, .form-select {
        font-size: 0.8125rem !important;
        padding: 0.375rem 0.625rem !important;
    }
}

/* Prevent iOS zoom on input focus (16px minimum) — all mobile breakpoints */
@media (max-width: 991.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}

/* ===========================================
   8. TABS — Horizontal Scroll, No Vertical
   =========================================== */

@media (max-width: 991.98px) {
    .sa-underline-tabs,
    .nav-tabs,
    .nav.nav-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        white-space: nowrap !important;
        gap: 0 !important;
    }

    .sa-underline-tabs::-webkit-scrollbar,
    .nav-tabs::-webkit-scrollbar,
    .nav.nav-tabs::-webkit-scrollbar { display: none !important; }

    .sa-underline-tabs .nav-item,
    .nav-tabs .nav-item { flex-shrink: 0 !important; }

    .sa-underline-tabs .nav-link,
    .nav-tabs .nav-link {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.78rem !important;
        white-space: nowrap !important;
    }

    .sa-underline-tabs .nav-link .badge,
    .nav-tabs .nav-link .badge {
        font-size: 0.6rem !important;
        padding: 0.15rem 0.4rem !important;
        margin-left: 0.25rem !important;
    }

    .sa-tab-card-top .card-body { padding-bottom: 0 !important; }
}

@media (max-width: 576px) {
    .sa-underline-tabs .nav-link,
    .nav-tabs .nav-link {
        padding: 0.4rem 0.625rem !important;
        font-size: 0.72rem !important;
    }

    /* Hide tab icons on mobile to save space, but keep accessibility */
    .sa-underline-tabs .nav-link i.me-2,
    .nav-tabs .nav-link i.me-2,
    .sa-underline-tabs .nav-link i.me-1,
    .nav-tabs .nav-link i.me-1 {
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ===========================================
   9. ANALYTICS PAGE — KPI Cards, Controls, Charts
   =========================================== */

/* ── Tablet (768-991px) ── */
@media (max-width: 991.98px) {
    .sa-kpi-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        margin-bottom: 16px !important;
    }

    .sa-kpi-card__inner { padding: 14px 14px 10px !important; }
    .sa-kpi-card__value { font-size: 1.15rem !important; }
    .sa-kpi-card__label { font-size: 0.62rem !important; }
    .sa-kpi-card__icon { width: 32px !important; height: 32px !important; font-size: 0.8rem !important; }
    .sa-kpi-card__sparkwrap { height: 36px !important; }
    .sa-kpi-card__sparkwrap canvas { height: 36px !important; }

    .sa-controls-bar { padding: 8px 12px !important; gap: 10px !important; margin-bottom: 16px !important; }
    .sa-time-pill { padding: 5px 10px !important; font-size: 0.68rem !important; }
    .sa-date-field input { width: 120px !important; font-size: 0.72rem !important; padding: 6px 10px 6px 26px !important; }
    .sa-export-pill { padding: 6px 12px !important; font-size: 0.72rem !important; }

    .sa-chart-card__header { padding: 12px 14px !important; }
    .sa-chart-card__title { font-size: 0.78rem !important; }
    .sa-chart-card__body { padding: 12px !important; }

    .sa-mini-stat { padding: 10px !important; }
    .sa-mini-stat__value { font-size: 1.35rem !important; }
    .sa-mini-stat__label { font-size: 0.58rem !important; }

    .sa-legend-item { gap: 6px !important; margin-bottom: 10px !important; }
    .sa-legend-value { font-size: 0.95rem !important; }
    .sa-legend-label { font-size: 0.65rem !important; }

    .sa-funnel__step { padding: 8px 12px !important; gap: 8px !important; }
    .sa-funnel__bar { height: 26px !important; }
    .sa-funnel__label { font-size: 0.72rem !important; min-width: 80px !important; }
    .sa-funnel__value { font-size: 0.78rem !important; }

    .sa-perf-table thead th { font-size: 0.62rem !important; padding: 8px 10px !important; }
    .sa-perf-table tbody td { font-size: 0.75rem !important; padding: 8px 10px !important; }
    .sa-last-updated { font-size: 0.62rem !important; }
}

/* ── Phablet (577-767px) — 2 columns still, tighter ── */
@media (min-width: 577px) and (max-width: 767.98px) {
    .sa-kpi-row { gap: 8px !important; }
    .sa-kpi-card__inner { padding: 12px 12px 8px !important; }
    .sa-kpi-card__value { font-size: 1.05rem !important; }
    .sa-kpi-card__icon { width: 28px !important; height: 28px !important; }
    .sa-kpi-card__sparkwrap { height: 32px !important; }
    .sa-kpi-card__sparkwrap canvas { height: 32px !important; }
}

/* ── Mobile (≤576px) ── */
@media (max-width: 576px) {
    .sa-kpi-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .sa-kpi-card__inner { padding: 10px 10px 6px !important; }
    .sa-kpi-card__value { font-size: 0.95rem !important; margin-bottom: 4px !important; }
    .sa-kpi-card__top { margin-bottom: 6px !important; }
    .sa-kpi-card__icon { width: 26px !important; height: 26px !important; font-size: 0.7rem !important; }
    .sa-kpi-card__label { font-size: 0.58rem !important; }
    .sa-kpi-card__sparkwrap { height: 28px !important; }
    .sa-kpi-card__sparkwrap canvas { height: 28px !important; }
    .sa-kpi-card__bar { margin-top: 6px !important; }
    .sa-kpi-card__change { font-size: 0.6rem !important; padding: 2px 6px !important; }
    .sa-kpi-card__prev { font-size: 0.58rem !important; }
    .sa-kpi-card__sub { font-size: 0.58rem !important; }

    /* Controls bar: stack */
    .sa-controls-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 8px !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .sa-time-pills { width: 100% !important; justify-content: center !important; flex-wrap: wrap !important; }
    .sa-time-pill { flex: 1 1 auto !important; text-align: center !important; padding: 6px 8px !important; font-size: 0.65rem !important; }
    .sa-date-group { width: 100% !important; flex-wrap: wrap !important; gap: 4px !important; }
    .sa-date-field { flex: 1 !important; }
    .sa-date-field input { width: 100% !important; font-size: 0.72rem !important; }
    .sa-date-sep { display: none !important; }
    .sa-export-pill { width: 100% !important; justify-content: center !important; }

    /* Charts */
    .sa-chart-card__body { padding: 8px !important; }
    canvas { max-height: 220px !important; }

    .sa-mini-stat__value { font-size: 1.1rem !important; }
    .sa-mini-stat__label { font-size: 0.55rem !important; margin-bottom: 4px !important; }
    .sa-mini-stat { padding: 10px !important; }

    .sa-legend-value { font-size: 0.85rem !important; }
    .sa-legend-dot { width: 8px !important; height: 8px !important; }

    .sa-funnel__bar { height: 22px !important; font-size: 0.65rem !important; }
    .sa-funnel__label { font-size: 0.65rem !important; min-width: 60px !important; }

    .sa-report-card { padding: 12px !important; }
    .sa-report-card__title { font-size: 0.8rem !important; }
    .sa-report-card__desc { font-size: 0.68rem !important; }
}

/* ===========================================
   10. FILTERS & SEARCH
   =========================================== */

@media (max-width: 991.98px) {
    .sa-search-filter-wrapper { gap: 0.5rem !important; margin-bottom: 0.5rem !important; }
    .sa-advanced-toggle__btn { font-size: 0.78rem !important; padding: 5px 10px !important; }
    .sa-filter-group__options .btn { padding: 5px 10px !important; font-size: 0.78rem !important; }
    .sa-filter-group .form-select { font-size: 0.78rem !important; }
    .sa-customer-cards-count { font-size: 0.75rem !important; }
}

@media (max-width: 576px) {
    .sa-advanced-toggle__btn { font-size: 0.72rem !important; }
    .sa-filter-group__options .btn { padding: 4px 8px !important; font-size: 0.72rem !important; }
    .sa-filter-group__label { font-size: 0.6rem !important; }
}

/* ===========================================
   11. MODALS
   =========================================== */

@media (max-width: 576px) {
    .modal-dialog { margin: 0.25rem !important; max-width: calc(100% - 0.5rem) !important; }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl { max-width: calc(100% - 0.5rem) !important; }
    .modal-header { padding: 0.625rem 0.75rem !important; }
    .modal-title { font-size: 0.9rem !important; }
    .modal-body { padding: 0.75rem !important; max-height: 75vh !important; overflow-y: auto !important; }
    .modal-footer { padding: 0.5rem 0.75rem !important; gap: 0.375rem !important; }
    .modal-footer .btn { font-size: 0.78rem !important; padding: 0.375rem 0.75rem !important; }
}

/* ===========================================
   12. BUTTONS — Touch-Friendly
   =========================================== */

@media (max-width: 576px) {
    .btn { min-height: 36px !important; }
    .btn-sm { min-height: 30px !important; font-size: 0.72rem !important; }
    .btn-primary { font-size: 0.78rem !important; }
}

/* ===========================================
   13. DROPDOWN MENUS
   =========================================== */

@media (max-width: 576px) {
    .dropdown-menu { font-size: 0.8rem !important; }
    .dropdown-item { padding: 0.5rem 0.75rem !important; font-size: 0.8rem !important; }
    .sa-profile-dropdown { min-width: 200px !important; }
}

/* ===========================================
   14. CUSTOMER CARDS GRID
   =========================================== */

/* ── Tablet (768-991px) ── */
@media (max-width: 991.98px) {
    .sa-customer-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
        gap: 0.625rem !important;
    }
}

/* ── Phablet (577-767px) ── */
@media (min-width: 577px) and (max-width: 767.98px) {
    .sa-customer-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}

/* ── Mobile (≤576px) ── */
@media (max-width: 576px) {
    .sa-customer-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .sa-customer-card__header { padding: 0.625rem 0.75rem !important; gap: 0.5rem !important; }
    .sa-customer-card__logo { width: 40px !important; height: 40px !important; }
    .sa-customer-card__name { font-size: 0.85rem !important; min-height: auto !important; }
    .sa-customer-card__stat-value { font-size: 0.9rem !important; }
    .sa-customer-card__stat-label { font-size: 0.62rem !important; }
    .sa-customer-card__actions { gap: 0.25rem !important; }
    .sa-customer-card__action { padding: 0.375rem 0.5rem !important; font-size: 0.7rem !important; }
}

/* ===========================================
   15. TOAST NOTIFICATIONS
   =========================================== */

@media (max-width: 576px) {
    .toast-container { left: 0.5rem !important; right: 0.5rem !important; top: 0.5rem !important; }
    .toast { width: 100% !important; max-width: 100% !important; }
}

/* ===========================================
   16. PAGINATION
   =========================================== */

@media (max-width: 576px) {
    .dt-paging .pagination .page-link {
        padding: 0.2rem 0.4rem !important;
        font-size: 0.72rem !important;
        min-width: 28px !important;
        text-align: center !important;
    }

    .dt-info { font-size: 0.7rem !important; }
    .dt-length label { font-size: 0.72rem !important; }
    .dt-length select { font-size: 0.72rem !important; min-width: 55px !important; padding: 0.25rem 0.5rem !important; }
}

/* ===========================================
   17. SCROLL-TO-TOP
   =========================================== */

@media (max-width: 576px) {
    .scrollToTop { bottom: 1rem !important; right: 0.75rem !important; }
    .scrollToTop .arrow { width: 36px !important; height: 36px !important; }
}

/* ===========================================
   18. iPAD & TABLET OPTIMIZATIONS
   =========================================== */

/* ── iPad Mini / Standard (portrait ~768px, landscape ~1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .sa-stats-row { grid-template-columns: repeat(3, 1fr) !important; }
    .sa-stat-card { padding: 0.875rem !important; }
    .sa-stat-card__value { font-size: 1.35rem !important; }

    .sa-kpi-row { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }

    table.sa-table td, table.sa-table th { padding: 8px 10px !important; }
    table.sa-table td { font-size: 0.8rem !important; }
    table.sa-table th { font-size: 0.72rem !important; }

    .card-header .btn-list .btn { padding: 0.3rem 0.75rem !important; font-size: 0.78rem !important; }
    .card-title { font-size: 0.9rem !important; }

    .sa-chart-card__body { padding: 14px !important; }
    .sa-customer-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── iPad Pro (portrait ~1024px, landscape ~1366px) ── */
@media (min-width: 1024px) and (max-width: 1366px) {
    .sa-stats-row { gap: 0.625rem !important; }
    .sa-stat-card { padding: 1rem !important; }
    .sa-stat-card__value { font-size: 1.5rem !important; }
    .sa-kpi-row { gap: 14px !important; }
    .sa-kpi-card__inner { padding: 16px 16px 12px !important; }
}

/* ── iPad portrait specifically ── */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .sa-stats-row { grid-template-columns: repeat(2, 1fr) !important; }
    .app-sidebar { width: 240px !important; }
}

/* ===========================================
   19. FORM ELEMENTS — Touch Optimized
   =========================================== */

@media (max-width: 576px) {
    .form-check-input { width: 1.125rem !important; height: 1.125rem !important; }
    .form-check-input[type="checkbox"] { min-width: 1.125rem !important; }
    .form-switch .form-check-input { width: 2.25rem !important; height: 1.125rem !important; }
}

/* ===========================================
   20. TOUCH DEVICE BEHAVIOR
   Disable hover transforms, respect reduced motion
   =========================================== */

@media (prefers-reduced-motion: reduce) {
    .sa-kpi-card, .sa-stat-card, .sa-report-card,
    .sa-mini-stat, .sa-stat-card--clickable,
    .sa-customer-card { transition: none !important; }

    .sa-kpi-card:hover, .sa-stat-card--clickable:hover,
    .sa-customer-card:hover { transform: none !important; }
}

/* Disable hover effects on touch devices (prevents iOS sticky hover) */
@media (hover: none) and (pointer: coarse) {
    .sa-kpi-card:hover { transform: none !important; box-shadow: none !important; }
    .sa-stat-card:hover { box-shadow: none !important; transform: none !important; }
    .sa-stat-card--clickable:hover { transform: none !important; }
    .sa-mini-stat:hover { transform: none !important; }
    .sa-report-card:hover { box-shadow: none !important; }
    .sa-customer-card:hover { transform: none !important; box-shadow: none !important; }
    .sa-folder-toolbar .btn-sa-action:hover { transform: none !important; }
}

/* ===========================================
   21. DOCUMENT LIBRARY — Mobile
   (Overrides inline styles in entity-admin-document-library.php)
   =========================================== */

@media (max-width: 991.98px) {
    .sa-folder-toolbar {
        flex-wrap: wrap !important;
        gap: 0.375rem !important;
    }

    .sa-folder-toolbar .sa-folder-search {
        max-width: 100% !important;
        width: 100% !important;
        order: -1 !important;
    }

    .sa-folder-toolbar .ms-auto {
        width: 100% !important;
    }

    .sa-folder-toolbar .btn-sa-action {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        flex: 1 !important;
    }
}

@media (max-width: 576px) {
    .sa-folder-breadcrumb {
        font-size: 0.75rem !important;
        padding: 0.3rem 0 !important;
    }

    .sa-folder-breadcrumb .sa-bc-sep { font-size: 0.5rem !important; }

    .sa-file-row {
        gap: 0.5rem !important;
        padding: 0.5rem 0.5rem !important;
    }

    .sa-file-row .sa-fr-icon { width: 28px !important; height: 28px !important; font-size: 0.85rem !important; }
    .sa-file-row .sa-fr-name { font-size: 0.78rem !important; }
    .sa-file-row .sa-fr-meta { font-size: 0.68rem !important; }

    .sa-folder-card { padding: 0.4rem 0.5rem !important; gap: 0.4rem !important; }
    .sa-folder-card .sa-fc-name { font-size: 0.78rem !important; }
    .sa-folder-card .sa-fc-icon { font-size: 1rem !important; width: 22px !important; }

    /* Always show folder actions on mobile (no hover) */
    .sa-folder-card .sa-fc-actions { opacity: 1 !important; }

    .sa-empty-folder { padding: 2rem 0.75rem !important; }
    .sa-empty-folder i { font-size: 2rem !important; }

    .sa-upload-file-item { font-size: 0.75rem !important; padding: 0.35rem 0.5rem !important; }
}

/* ===========================================
   22. DASHBOARD PAGE — Panel Grid
   (Overrides inline styles in entities/205/dashboard/)
   =========================================== */

@media (max-width: 991.98px) {
    .sa-dash-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.75rem !important;
    }

    .sa-dash-panel,
    .sa-stats-row .sa-stat-card {
        min-height: 220px !important;
    }

    .sa-dash-panel__header { padding: 0.5rem 0.65rem !important; }
    .sa-dash-panel__title { font-size: 0.72rem !important; }

    .sa-dash-table thead th { font-size: 0.62rem !important; padding: 0.35rem 0.5rem !important; }
    .sa-dash-table td { font-size: 0.72rem !important; padding: 0.35rem 0.5rem !important; }
    .sa-dash-table-wrap { max-height: 200px !important; }
}

@media (max-width: 576px) {
    .sa-dash-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .sa-dash-panel,
    .sa-stats-row .sa-stat-card {
        min-height: 180px !important;
    }

    .sa-dash-panel__header { padding: 0.4rem 0.5rem !important; }
    .sa-dash-panel__title { font-size: 0.68rem !important; }
    .sa-dash-panel__view-all { font-size: 0.65rem !important; }
    .sa-dash-table-wrap { max-height: 180px !important; }
}

/* ===========================================
   23. ORDER FORM — Mobile
   =========================================== */

@media (max-width: 576px) {
    .sa-order-type-grid { grid-template-columns: 1fr !important; gap: 0.5rem !important; }
    .sa-order-type-content { padding: 0.75rem !important; gap: 0.75rem !important; }
    .sa-order-type-icon { width: 36px !important; height: 36px !important; font-size: 1rem !important; }
    .sa-order-type-title { font-size: 0.9rem !important; }
    .sa-order-type-desc { font-size: 0.75rem !important; }
    .sa-product-category-tabs .nav-link { font-size: 0.78rem !important; padding: 0.625rem 0.875rem !important; }
    .sa-product-category-header { padding: 0 0.75rem !important; }
    .sa-order-type-selector { padding: 0.75rem !important; }
}

/* ===========================================
   24. WELCOME HEADER / CLINIC DASHBOARD
   =========================================== */

@media (max-width: 576px) {
    .sa-welcome-header { padding: 0.75rem !important; }
    .sa-welcome-header__logo { width: 40px !important; height: 40px !important; }
    .sa-clinic-dashboard { padding-top: 0.75rem !important; }
}

/* ===========================================
   25. NOTIFICATION PANEL
   =========================================== */

@media (max-width: 576px) {
    .sa-notification-panel { width: 100vw !important; max-width: 100vw !important; right: 0 !important; }
}

/* ===========================================
   26. PATIENT LIST
   =========================================== */

@media (max-width: 576px) {
    .sa-patient-card { padding: 0.625rem !important; }
}

/* ===========================================
   27. EMAIL ENGINE — Stat Cards (uses .sa-stat-card)
   Covered by section 5 above, but ensure specificity
   =========================================== */

@media (max-width: 576px) {
    .sa-stats-dashboard .sa-stats-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
    }

    .sa-stats-dashboard .sa-stat-card {
        flex: 0 0 155px !important;
        min-width: 155px !important;
    }
}

/* ===========================================
   28. GLOBAL — Prevent Horizontal Page Overflow
   =========================================== */

@media (max-width: 991.98px) {
    html, body { overflow-x: hidden !important; }
    .page { overflow-x: hidden !important; }
    .main-content { max-width: 100vw !important; overflow-x: hidden !important; }
}

/* ===========================================
   29. NOTIFICATION DROPDOWN — Fix 380px Overflow
   =========================================== */

@media (max-width: 576px) {
    .sa-notification-dropdown {
        width: calc(100vw - 1rem) !important;
        max-width: calc(100vw - 1rem) !important;
        max-height: 65vh !important;
        right: 0.5rem !important;
        left: auto !important;
    }

    .sa-notification-header { padding: 0.5rem 0.75rem !important; }
    .sa-notification-header h6 { font-size: 0.8rem !important; }
    .sa-notification-body { max-height: 50vh !important; }
    .sa-notif-title { font-size: 0.72rem !important; }
    .sa-notif-message { font-size: 0.68rem !important; }
    .sa-notif-meta { font-size: 0.62rem !important; }
    .sa-notif-time { font-size: 0.58rem !important; }
    .sa-notif-link { padding: 0.5rem 2rem 0.5rem 0.5rem !important; gap: 0.4rem !important; }
}

/* ===========================================
   30. AUTOCOMPLETE DROPDOWNS — Mobile Constrained
   =========================================== */

@media (max-width: 576px) {
    .ui-autocomplete {
        max-width: calc(100vw - 1.5rem) !important;
    }

    .ui-menu-item-wrapper {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.78rem !important;
    }

    .pac-container {
        max-width: calc(100vw - 1rem) !important;
    }

    .pac-item {
        padding: 0.5rem 0.625rem !important;
        font-size: 0.78rem !important;
    }

    .pac-item-query { font-size: 0.78rem !important; }

    .patient-dropdown-list { max-height: 250px !important; }
    .patient-dropdown-item { padding: 0.4rem 0.625rem !important; font-size: 0.78rem !important; }
}

/* ===========================================
   31. PATIENT PROFILE MODAL — Mobile Layout
   =========================================== */

@media (max-width: 991.98px) {
    .pp-headshot {
        width: 90px !important;
        height: 90px !important;
        font-size: 2rem !important;
    }

    .pp-upload-btn {
        width: 28px !important;
        height: 28px !important;
    }

    #modalPatientProfile .pp-sidebar .nav-link {
        font-size: 0.78rem !important;
        padding: 0.5rem 0.625rem !important;
    }

    .pp-stat-card { padding: 0.625rem !important; }
    .pp-info-card .card-header { padding: 0.5rem 0.75rem !important; }
}

@media (max-width: 576px) {
    .pp-headshot {
        width: 70px !important;
        height: 70px !important;
        font-size: 1.5rem !important;
        border-width: 3px !important;
    }

    .pp-upload-btn { width: 24px !important; height: 24px !important; border-width: 2px !important; }

    #modalPatientProfile .pp-sidebar .nav-link {
        font-size: 0.72rem !important;
        padding: 0.4rem 0.5rem !important;
    }

    #modalPatientProfile .pp-sidebar .nav-link i { width: 14px !important; font-size: 0.7rem !important; }

    /* Dropzone — compact */
    .pp-docs-dropzone { padding: 1rem 0.75rem !important; }
    .pp-docs-dropzone__icon { width: 40px !important; height: 40px !important; margin-bottom: 0.5rem !important; }
    .pp-docs-dropzone__icon i { font-size: 1rem !important; }
    .pp-docs-empty { padding: 1.5rem 1rem !important; }
    .pp-docs-empty__circle { width: 56px !important; height: 56px !important; }
    .pp-docs-empty__circle i { font-size: 1.25rem !important; }
    .pp-docs-empty__title { font-size: 0.82rem !important; }
    .pp-docs-empty__text { font-size: 0.72rem !important; }

    /* File preview */
    .pp-docs-file { padding: 0.5rem 0.625rem !important; gap: 0.5rem !important; }
    .pp-docs-file__icon { width: 34px !important; height: 34px !important; font-size: 0.95rem !important; }
    .pp-docs-file__name { font-size: 0.75rem !important; }
    .pp-docs-file__size { font-size: 0.65rem !important; }

    /* Bulk upload stepper */
    .sa-bulk-stepper { padding: 0.5rem 0.75rem !important; flex-wrap: wrap !important; gap: 0.25rem !important; }
    .sa-bulk-step-label { font-size: 0.68rem !important; }
    .sa-bulk-step-num { width: 22px !important; height: 22px !important; font-size: 0.68rem !important; }
    .sa-bulk-step-line { width: 20px !important; }
    .sa-bulk-dropzone-inner { padding: 1.25rem 0.75rem !important; }
}

/* ===========================================
   32. STAFF PROFILE HERO — Mobile Stack
   =========================================== */

@media (max-width: 991.98px) {
    .sp-hero {
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .sp-hero__name { font-size: 1.1rem !important; }
    .sp-hero__title { font-size: 0.78rem !important; }
    .sp-hero__contact { gap: 0.75rem !important; }
    .sp-contact-link { font-size: 0.75rem !important; }
    .sp-meta-chip { font-size: 0.68rem !important; padding: 0.2rem 0.5rem !important; }
}

@media (max-width: 576px) {
    .sp-hero {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.75rem !important;
        padding: 0.75rem !important;
    }

    .sp-hero__name { font-size: 1rem !important; }
    .sp-hero__contact { justify-content: center !important; gap: 0.5rem !important; }
    .sp-contact-link { font-size: 0.7rem !important; }
    .sp-hero__meta { justify-content: center !important; }
}

/* ===========================================
   33. MODAL FORMS — Tighter Inner Spacing
   =========================================== */

@media (max-width: 576px) {
    /* Modal sections */
    .sa-modal-section { padding: 0.625rem 0.75rem !important; }
    .sa-modal-section__title { font-size: 0.78rem !important; margin-bottom: 0.625rem !important; padding-bottom: 0.5rem !important; }

    /* Form sections inside modals */
    .modal-body .sa-form-section { padding: 0.625rem 0.5rem !important; }
    .sa-form-section-title { font-size: 0.72rem !important; margin-bottom: 0.5rem !important; padding-bottom: 0.375rem !important; }
    .sa-form-section .form-label,
    .sa-form-section label { font-size: 0.7rem !important; margin-bottom: 0.15rem !important; }
    .sa-form-section .form-control,
    .sa-form-section .form-select { font-size: 0.8rem !important; }

    /* Modal close button — bigger touch target */
    .modal-header .btn-close { width: 1.75rem !important; height: 1.75rem !important; padding: 0.25rem !important; }

    /* Product lot table inside modals */
    .sa-product-lot-table thead th { font-size: 0.68rem !important; padding: 0.4rem 0.5rem !important; }
    .sa-product-lot-table tbody td { font-size: 0.78rem !important; padding: 0.4rem 0.5rem !important; }
    .sa-product-lot-table .lot-number-input { max-width: 100px !important; font-size: 0.75rem !important; }

    /* Form col stacking — force small cols to full width in modals */
    .modal-body .row .col-3,
    .modal-body .row .col-4,
    .modal-body .row .col-6,
    .modal-body .row .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Modal row gutters */
    .modal-body .row.g-2 { --bs-gutter-y: 0.5rem !important; }
    .modal-body .row.g-3 { --bs-gutter-y: 0.625rem !important; }

    /* Form-control-sm inside modals */
    .modal-body .form-control-sm {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.5rem !important;
    }
}

/* ===========================================
   34. GLOBAL TIGHTENING — Smaller Fonts, Less Padding
   Final polish for a clean mobile experience
   =========================================== */

@media (max-width: 576px) {
    /* All .mb-3 and .mb-4 — reduce vertical spacing */
    .mb-3 { margin-bottom: 0.5rem !important; }
    .mb-4 { margin-bottom: 0.75rem !important; }
    .mt-3 { margin-top: 0.5rem !important; }
    .mt-4 { margin-top: 0.75rem !important; }
    .mt-5 { margin-top: 1rem !important; }

    /* Row gutters — tighter globally */
    .row.g-3 { --bs-gutter-x: 0.5rem; --bs-gutter-y: 0.5rem; }
    .row.g-4 { --bs-gutter-x: 0.625rem; --bs-gutter-y: 0.625rem; }

    /* py-4, py-5 — reduce vertical padding */
    .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
    .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
    .p-3 { padding: 0.625rem !important; }

    /* Gap utilities — tighter */
    .gap-3 { gap: 0.5rem !important; }
    .gap-4 { gap: 0.625rem !important; }

    /* Alerts — smaller everywhere */
    .alert {
        font-size: 0.72rem !important;
        padding: 0.5rem 0.625rem !important;
    }

    .alert i { font-size: 0.7rem !important; }
    .alert strong { font-size: 0.72rem !important; }

    /* Badge — smaller */
    .badge {
        font-size: 0.62rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* Form label icons */
    .form-label i,
    label i { font-size: 0.72rem !important; }

    /* fw-semibold labels — smaller on mobile */
    .form-label.fw-semibold,
    label.fw-semibold {
        font-size: 0.72rem !important;
    }

    /* Small/muted helper text */
    small, .small, .text-muted small {
        font-size: 0.68rem !important;
    }

    /* Card with mt-5 — kill the huge top margin */
    .card.custom-card.mt-5,
    .card.mt-5 {
        margin-top: 0.5rem !important;
    }

    /* Table truncation cell */
    .sa-truncate-cell {
        max-width: 100px !important;
    }

    /* Choices.js select — smaller */
    .choices__inner {
        font-size: 0.8rem !important;
        min-height: 36px !important;
        padding: 0.25rem 0.5rem !important;
    }

    .choices__list--dropdown .choices__item {
        font-size: 0.78rem !important;
        padding: 0.4rem 0.625rem !important;
    }

    /* Flatpickr — constrain width */
    .flatpickr-calendar {
        width: calc(100vw - 1rem) !important;
        max-width: 300px !important;
    }
}

/* ── Tablet tightening (768-991px) ── */
@media (min-width: 577px) and (max-width: 991.98px) {
    .mb-3 { margin-bottom: 0.625rem !important; }
    .mb-4 { margin-bottom: 0.875rem !important; }
    .mt-5 { margin-top: 1.5rem !important; }

    .row.g-4 { --bs-gutter-x: 0.75rem; --bs-gutter-y: 0.75rem; }

    .alert { font-size: 0.78rem !important; padding: 0.5rem 0.75rem !important; }

    small, .small { font-size: 0.72rem !important; }
}

/* ===========================================
   35. ORDER FORM — Text Wrapping Fixes
   Provider name, NPI, alerts, labels
   =========================================== */

@media (max-width: 991.98px) {
    /* Meta items (Phone, NPI, Address, Email) — label on own line, data below */
    .sa-meta__item {
        display: block !important;
        flex-direction: unset !important;
        gap: unset !important;
    }

    .sa-meta__label {
        display: block !important;
        font-size: 0.62rem !important;
        font-weight: 600 !important;
        color: #6b7280 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.03em !important;
        margin-bottom: 0.1rem !important;
        white-space: nowrap !important;
    }

    .sa-meta__value {
        display: block !important;
        font-size: 0.8rem !important;
        overflow-wrap: break-word !important;
        word-break: break-word !important;
        margin-left: 0 !important;
    }

    /* When two values sit together (NPI number + type), keep inline */
    .sa-meta__value + .sa-meta__value {
        display: inline !important;
    }

    .sa-meta__item + .sa-meta__item {
        margin-top: 0.375rem !important;
        padding-top: 0.375rem !important;
        border-top: 1px solid #f1f5f9 !important;
    }

    .sa-meta {
        padding: 0.625rem 0.75rem !important;
    }

    /* Provider/billing dropdown text — allow wrap */
    .sa-billing-dropdown__text {
        white-space: normal !important;
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }

    .sa-billing-dropdown__trigger {
        min-height: auto !important;
        padding: 0.375rem 0.625rem !important;
    }

    /* Section title — wrap on mobile */
    .sa-section-title {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        font-size: 0.8rem !important;
    }

    /* Order type header */
    .sa-order-type-header h5 { font-size: 0.85rem !important; }
    .sa-order-type-header p { font-size: 0.72rem !important; }
}

@media (max-width: 576px) {
    .sa-meta__label { font-size: 0.58rem !important; }
    .sa-meta__value { font-size: 0.75rem !important; }
    .sa-meta { padding: 0.5rem 0.625rem !important; }
    .sa-billing-dropdown__text { font-size: 0.72rem !important; }
    .sa-section-title { font-size: 0.75rem !important; }
}

/* ===========================================
   36. AUTH PAGES — Login, Signup, Forgot/Set Password
   =========================================== */

/* ── Tablet (≤991px) — hero already hidden ── */
@media (max-width: 991.98px) {
    .login-form-section {
        padding: 1.5rem 1rem !important;
        min-height: 100vh;
    }

    .login-form-title { font-size: 1.25rem !important; }
    .login-form-subtitle { font-size: 0.82rem !important; margin-bottom: 1.5rem !important; }
    .login-toggle-wrapper { margin-bottom: 1rem !important; }

    /* Auth page card (Velvet template) */
    .authentication .card.custom-card { margin-block-end: 2rem !important; }
    .authentication-style { padding: 2.5rem !important; margin: 2rem !important; }
}

/* ── Mobile (≤576px) ── */
@media (max-width: 576px) {
    .login-form-section {
        padding: 1rem 0.75rem !important;
    }

    .login-form-container { padding: 0 !important; }

    .login-card { padding: 1rem 0.75rem !important; }

    .login-form-title { font-size: 1.1rem !important; margin-bottom: 0.375rem !important; }
    .login-form-subtitle { font-size: 0.78rem !important; margin-bottom: 1.25rem !important; }

    /* Form inputs — proper touch targets */
    .form-floating-custom { margin-bottom: 0.875rem !important; }
    .form-floating-custom input {
        padding: 0.75rem 0.75rem !important;
        font-size: 16px !important; /* prevent iOS zoom */
    }
    .form-floating-custom label { font-size: 0.78rem !important; }

    /* Buttons — full width, good touch targets */
    .btn-login, .btn-clinic-login {
        padding: 0.75rem !important;
        font-size: 0.875rem !important;
        min-height: 44px !important;
        margin-top: 0.75rem !important;
    }

    /* Login type selector (admin/clinic toggle) */
    .login-type-selector { margin-bottom: 1.5rem !important; gap: 0.375rem !important; }
    .login-type-btn { padding: 0.625rem 0.375rem !important; font-size: 0.72rem !important; }
    .login-type-btn i { font-size: 0.95rem !important; margin-bottom: 0.125rem !important; }
    .login-type-btn span { font-size: 0.65rem !important; }

    /* Divider */
    .divider { margin: 0.875rem 0 !important; font-size: 0.72rem !important; }
    .divider span { padding: 0 0.5rem !important; }

    /* Links */
    .forgot-link { font-size: 0.8rem !important; }
    .login-help-text { font-size: 0.75rem !important; }
    .login-help-link { font-size: 0.78rem !important; }
    .login-toggle-link { font-size: 0.72rem !important; }
    .login-toggle-link i { font-size: 0.65rem !important; }
    .login-toggle-wrapper { margin-bottom: 0.75rem !important; }

    /* Login actions row */
    .login-actions { margin-bottom: 1rem !important; }
    .login-actions .d-flex { flex-direction: column !important; gap: 0.5rem !important; }

    /* Logo on auth pages — constrain */
    img[style*="max-width: 260px"],
    img[style*="max-width:260px"] {
        max-width: 160px !important;
    }

    /* Auth page card (Velvet template) */
    .authentication-style { padding: 1.25rem !important; margin: 1rem !important; }
    .authentication .card.custom-card { margin-block-end: 1rem !important; }

    /* Password checklist */
    .checklist-item { margin-bottom: 0.375rem !important; padding: 0.25rem 0 !important; }

    /* Registration form — stack col-6 fields */
    .login-card .row .col-6,
    .login-card .row .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ===========================================
   37. CUSTOMER PORTAL — Clinic Header, CTA, Stats
   =========================================== */

@media (max-width: 991.98px) {
    /* Clinic header — wrap and tighten */
    .sa-clinic-header {
        padding: 0.875rem 1rem !important;
        gap: 0.75rem !important;
    }

    .sa-clinic-header__name { font-size: 1rem !important; }
    .sa-clinic-header__logo { width: 42px !important; height: 42px !important; }
    .sa-clinic-header__stats { gap: 0.75rem !important; }

    /* Mini stats in clinic header */
    .sa-clinic-header__stats .sa-mini-stat {
        padding: 0.375rem 0.625rem !important;
        min-width: 55px !important;
    }

    .sa-clinic-header__stats .sa-mini-stat__value { font-size: 1rem !important; }
    .sa-clinic-header__stats .sa-mini-stat__label { font-size: 0.6rem !important; }

    /* Phone link */
    .sa-clinic-header__phone { font-size: 0.78rem !important; padding: 0.5rem 0.75rem !important; }

    /* Primary CTA */
    .sa-primary-cta { padding: 0.75rem 1rem !important; gap: 0.625rem !important; }
    .sa-primary-cta__icon { width: 34px !important; height: 34px !important; font-size: 0.875rem !important; }
    .sa-primary-cta__title { font-size: 0.875rem !important; }
    .sa-primary-cta__desc { font-size: 0.68rem !important; }

    /* Quick actions */
    .sa-quick-action-mini { padding: 0.5rem 0.75rem !important; font-size: 0.75rem !important; }
    .sa-actions-row { gap: 0.5rem !important; }

    /* Welcome header */
    .sa-welcome-header { padding: 0.875rem 1rem !important; }
    .sa-welcome-header__logo { width: 44px !important; height: 44px !important; }
    .sa-welcome-header__title { font-size: 1rem !important; }
}

@media (max-width: 576px) {
    /* Clinic header — slim logo + name bar only */
    .sa-clinic-header {
        padding: 0.5rem 0.625rem !important;
        gap: 0.5rem !important;
        margin-bottom: 0.375rem !important;
        border-radius: 0 !important;
    }

    .sa-clinic-header__info { gap: 0.5rem !important; }
    .sa-clinic-header__logo { width: 28px !important; height: 28px !important; padding: 3px !important; }
    .sa-clinic-header__name { font-size: 0.85rem !important; }
    .sa-clinic-header__website { display: none !important; }
    .sa-clinic-header__date { display: none !important; }

    /* Hide stats row entirely on phone — data is visible in dashboard below */
    .sa-clinic-header__stats { display: none !important; }

    /* Primary CTA — compact */
    .sa-primary-cta { padding: 0.5rem 0.75rem !important; gap: 0.5rem !important; }
    .sa-primary-cta__icon { width: 28px !important; height: 28px !important; font-size: 0.8rem !important; border-radius: 6px !important; }
    .sa-primary-cta__title { font-size: 0.8rem !important; }
    .sa-primary-cta__desc { font-size: 0.65rem !important; }

    /* Actions row — horizontal, not stacked */
    .sa-actions-row { gap: 0.375rem !important; }
    .sa-quick-actions-mini { flex-direction: row !important; gap: 0.375rem !important; }
    .sa-quick-action-mini { padding: 0.4rem 0.5rem !important; font-size: 0.68rem !important; flex: 1 !important; text-align: center !important; justify-content: center !important; }
    .sa-quick-action-mini i { font-size: 0.65rem !important; }

    /* Welcome header */
    .sa-welcome-header { padding: 0.5rem 0.625rem !important; }
    .sa-welcome-header__logo { width: 30px !important; height: 30px !important; }
    .sa-welcome-header__title { font-size: 0.85rem !important; }
    .sa-welcome-header__subtitle { font-size: 0.68rem !important; }

    /* Onboarding wizard — tight */
    .sa-onboarding-wizard { margin-bottom: 0.5rem !important; }
    .sa-onboarding-wizard__header { padding: 0.625rem 0.75rem !important; }
    .sa-onboarding-wizard__header-text strong { font-size: 0.8125rem !important; }
    .sa-onboarding-wizard__header-text span { font-size: 0.6875rem !important; }
    .sa-onboarding-wizard__stepper { padding: 0.625rem 0.5rem !important; }
    .sa-wizard-step__circle { width: 26px !important; height: 26px !important; font-size: 0.6875rem !important; }
    .sa-wizard-step__label { font-size: 0.5625rem !important; }
    .sa-wizard-connector { min-width: 16px !important; margin-bottom: 1rem !important; }
    .sa-wizard-panel { padding: 0.75rem !important; }

    /* mb-4 sections — reduce globally on customer portal */
    .sa-clinic-dashboard .mb-4 { margin-bottom: 0.5rem !important; }
}

/* ===========================================
   38. CUSTOMER PORTAL — Pending Approvals, Help Center
   =========================================== */

@media (max-width: 576px) {
    /* Pending approval cards */
    .pending-approval-card { padding: 0.625rem !important; }
    .pending-approval-card .btn-sm {
        min-height: 36px !important;
        padding: 0.375rem 0.625rem !important;
        font-size: 0.72rem !important;
    }

    /* Help center / resources jump buttons */
    .sa-jump-btn {
        font-size: 0.72rem !important;
        padding: 0.375rem 0.625rem !important;
    }

    /* Search inputs in modals with fixed max-width */
    [style*="max-width:260px"],
    [style*="max-width: 260px"] {
        max-width: 100% !important;
    }

    /* Inline font-size:13px in info boxes */
    [style*="font-size:13px"],
    [style*="font-size: 13px"] {
        font-size: 0.78rem !important;
    }
}

/* ===========================================
   PRINT STYLES
   =========================================== */

@media print {
    .app-sidebar, .app-header, .scrollToTop,
    .page-header-breadcrumb, .sa-controls-bar,
    .sa-advanced-toggle, .dt-search,
    .dt-paging, .dt-length, .btn-list { display: none !important; }

    .main-content { margin: 0 !important; padding: 0 !important; }
    .card { box-shadow: none !important; border: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Clinic Home v2 — Mobile-First Polish
   Target viewports: iPhone SE (375), iPhone 15 (390), Pro Max (430),
   iPad mini (768), iPad Pro (1024)
   Touch target minimum: 44px  ·  Font minimum: 12px (0.75rem)
   ══════════════════════════════════════════════════════════════════════ */

/* ── Overflow protection ─────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sa-clinic-dashboard {
        overflow-x: hidden;
    }
}

/* ── Layout: Grid → single column on tablet ──────────────────────── */
@media (max-width: 991.98px) {
    .sa-home-grid {
        grid-template-columns: 1fr;
    }
    .sa-clinic-dashboard .sa-pipeline-list {
        max-height: none;
        overflow: visible;
    }
}

/* ── Welcome Header ──────────────────────────────────────────────── */
@media (max-width: 576px) {
    .sa-home-welcome__text h1 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: calc(100vw - 2rem);
    }
}

/* ── KPI Cards (label readability) ───────────────────────────────── */
@media (max-width: 767.98px) {
    .sa-home-kpi-card__label {
        font-size: 0.7rem;
        white-space: normal;
        line-height: 1.25;
    }
}

/* ── Onboarding Wizard ───────────────────────────────────────────── */
@media (max-width: 576px) {
    .sa-wizard-step__label {
        font-size: 0.6875rem;
    }
    .sa-wizard-step {
        min-height: 44px;
        min-width: 44px;
        padding: 0.375rem;
    }
    .sa-wizard-step__circle {
        width: 32px;
        height: 32px;
        font-size: 0.6875rem;
    }
    .sa-wizard-panel__nav .btn {
        min-height: 44px;
        padding: 0.5rem 0.875rem;
        font-size: 0.8rem;
    }
    .sa-wizard-panel__actions .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
        font-size: 0.82rem;
    }
    .sa-onboarding-complete .btn {
        min-height: 40px;
        width: 100%;
    }
}
@media (max-width: 520px) {
    .sa-wizard-step__label {
        display: none;
    }
}
@media (max-width: 479.98px) {
    .sa-onboarding-wizard__stepper {
        padding: 0.75rem 0.5rem;
    }
    .sa-wizard-step__circle {
        width: 30px;
        height: 30px;
    }
    .sa-wizard-connector {
        min-width: 12px;
        margin-bottom: 0;
    }
    .sa-onboarding-wizard__header-icon {
        display: none;
    }
}

/* ── Primary CTA ─────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .sa-primary-cta__icon {
        width: 32px;
        height: 32px;
    }
    .sa-primary-cta__desc {
        font-size: 0.75rem;
    }
}

/* ── Quick Actions (5-item grid) ─────────────────────────────────── */
@media (max-width: 767.98px) {
    .sa-quick-actions-mini {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        width: 100%;
    }
    .sa-quick-action-mini {
        min-width: 0;
        min-height: 44px;
        padding: 0.6rem 0.375rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .sa-quick-action-mini i {
        font-size: 0.95rem;
    }
    .sa-quick-action-mini span {
        font-size: 0.75rem;
    }
}
@media (max-width: 479.98px) {
    .sa-quick-actions-mini {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.375rem;
    }
    .sa-quick-action-mini {
        padding: 0.5rem 0.25rem;
    }
    .sa-quick-action-mini i {
        font-size: 0.85rem;
    }
}

/* ── Alert Banners ───────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sa-clinic-dashboard .alert {
        font-size: 0.8rem;
        padding: 0.6rem 0.75rem;
    }
    .sa-clinic-dashboard .alert .btn {
        font-size: 0.78rem;
        padding: 0.375rem 0.625rem;
        min-height: 36px;
    }
}
@media (max-width: 576px) {
    .sa-clinic-dashboard .alert.d-flex {
        flex-wrap: wrap;
    }
    .sa-clinic-dashboard .alert .btn.flex-shrink-0 {
        flex-shrink: 1;
        margin-left: 0;
        margin-top: 0.375rem;
        width: 100%;
    }
}

/* ── Dashboard Cards (headers, bodies, links) ────────────────────── */
@media (max-width: 767.98px) {
    .sa-clinic-dashboard .sa-dashboard-card__body {
        padding: 0.75rem;
    }
    .sa-clinic-dashboard .sa-dashboard-card__header {
        padding: 0.6rem 0.75rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .sa-clinic-dashboard .sa-dashboard-card__link {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.375rem;
        font-size: 0.78rem;
    }
}

/* ── Order Pipeline Cards ────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sa-pipeline-contents__toggle {
        min-height: 36px;
        padding: 0.375rem 0;
        font-size: 0.75rem;
        display: inline-flex;
        align-items: center;
    }
    .sa-pipeline-card__tracking-link {
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0;
    }
}
@media (max-width: 479.98px) {
    .sa-pipeline-card__header {
        padding: 0.375rem 0.5rem;
    }
    .sa-pipeline-card__body {
        padding: 0.375rem 0.5rem;
    }
}

/* ── Pending Approval Buttons ────────────────────────────────────── */
@media (max-width: 576px) {
    .sa-clinic-dashboard .sa-dashboard-card__body .d-flex.gap-2 .btn-sm {
        min-height: 40px;
        font-size: 0.78rem;
        padding: 0.375rem 0.5rem;
    }
    .sa-clinic-dashboard .sa-dashboard-card__body a[data-bs-toggle="collapse"] {
        min-height: 36px;
        display: inline-flex;
        align-items: center;
    }
}

/* ── Staff Directory ─────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .sa-staff-card__contact a {
        width: 40px;
        height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
@media (max-width: 479.98px) {
    .sa-staff-grid {
        grid-template-columns: 1fr;
    }
    .sa-staff-card {
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
        padding: 0.6rem;
    }
    .sa-staff-card__avatar {
        width: 32px;
        height: 32px;
    }
    .sa-staff-card__contact {
        margin-left: auto;
    }
}

/* ── Empty States & CTA Buttons (44px touch targets) ─────────────── */
@media (max-width: 576px) {
    .sa-clinic-dashboard .sa-empty-state .btn {
        min-height: 44px;
        padding: 0.5rem 1rem;
    }
    .sa-clinic-dashboard .text-center .btn-sm {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .sa-clinic-dashboard .sa-home-grid__side .btn-sm {
        min-height: 40px;
        font-size: 0.78rem;
    }
}

/* ===========================================
   39. CUSTOMER HOME — Quick Actions & 2-Col Grid
   =========================================== */

@media (max-width: 576px) {
    /* Quick actions card — single column on phones */
    .sa-primary-actions {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
        padding: 0.625rem !important;
    }

    .sa-primary-action {
        padding: 0.75rem 1rem !important;
        gap: 0.75rem !important;
    }

    .sa-primary-action__icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.1rem !important;
    }

    .sa-primary-action__text h5 { font-size: 0.82rem !important; }
    .sa-primary-action__text p { font-size: 0.7rem !important; }

    /* 2-col grid → single column on phones */
    .sa-dash-grid--2col {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }
}

/* ===========================================
   40. ADMIN CONSIGNMENT INVENTORY — Filter Overflow
   =========================================== */

@media (max-width: 576px) {
    /* Prevent min-width from causing overflow on filter selects */
    #filterClinic,
    #filterLocation,
    #filterProduct {
        min-width: 0 !important;
        width: 100% !important;
    }
}

/* ===========================================
   41. LOT TIMELINE — Mobile Touch Targets
   =========================================== */

@media (max-width: 576px) {
    .sa-lot-timeline__item {
        padding-bottom: 1rem !important;
    }

    .sa-lot-timeline__icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 0.6rem !important;
    }

    .sa-lot-timeline__content h6 { font-size: 0.75rem !important; }
    .sa-lot-timeline__content p { font-size: 0.7rem !important; }

    /* Lot chips — ensure wrapping */
    .sa-order-products {
        gap: 3px !important;
    }

    .sa-product-chip {
        font-size: 0.6rem !important;
        padding: 2px 5px !important;
    }
}

/* ===========================================
   42. RETURNS FORM — Full-Width Fields on Mobile
   =========================================== */

@media (max-width: 576px) {
    /* Return form completed-by/provider rows — stack on phones */
    #returnReasonSection + .mb-4 .col-md-4,
    #returnReasonSection ~ .mb-4 .col-md-4,
    #returnReasonSection ~ .mb-4 .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Eligible lots table — ensure scrollable */
    #eligibleLotsContainer .table-responsive {
        max-height: 300px !important;
    }

    /* Selected lots summary — compact */
    #selectedLotsSummary {
        font-size: 0.78rem !important;
    }

    /* Return disclaimers — better spacing */
    .return-disclaimer-checkbox + .form-check-label {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
    }
}

/* ===========================================
   43. AGREEMENT TYPE SELECTION — Mobile Cards
   =========================================== */

@media (max-width: 576px) {
    .sa-ats { padding: 0.75rem !important; }
    .sa-ats__header h5 { font-size: 0.95rem !important; }
    .sa-ats__header p { font-size: 0.78rem !important; }

    .sa-ats__callout {
        padding: 0.75rem !important;
        font-size: 0.75rem !important;
    }

    .sa-ats__card {
        padding: 0.875rem 1rem !important;
        gap: 0.75rem !important;
    }

    .sa-ats__card-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
    }

    .sa-ats__card-title { font-size: 0.82rem !important; }
    .sa-ats__card-desc { font-size: 0.72rem !important; }
}