/* ==========================================================================
   eReminder Sprint ER-08-R — Universal Responsive Stylesheet
   Breakpoints:
     320–479 px  narrow phones
     480–767 px  larger phones
     768–1023 px tablets
     1024–1439 px laptops / compact desktops
     1440 px+    wide desktop (no changes needed — base CSS handles this)
   ========================================================================== */

/* -----------------------------------------------------------------------
   0. Foundation: Reduce motion, touch targets, global overflow guard
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* Ensure touch-friendly targets everywhere on touch devices */
@media (pointer: coarse) {
    button, .btn-pill-action, .btn-qa-primary, .btn-primary,
    .btn-outline, .btn-action-green, .btn-action-blue,
    .btn-action-view, .btn-export-green, .btn-search-green,
    .btn-commit-valid, .btn-discard-batch, .page-btn,
    .nav-item a, .nav-single-link, .nav-group-header,
    .btn-save-receipt, .btn-reset-receipt {
        min-height: 44px;
        min-width: 44px;
    }

    .financial-grid-table .btn-action-dropdown,
    .financial-table .btn-action-dropdown,
    .data-table .btn-action-dropdown {
        min-height: 30px !important;
        min-width: 42px !important;
        padding: 3px 6px !important;
    }

    .page-btn {
        min-width: 36px;
        min-height: 36px;
        padding: 0 0.5rem;
    }

    .nav-item a {
        padding: 0.6rem 0.75rem;
    }

    .nav-group-header {
        padding: 0.65rem 0.85rem;
    }

    /* Ensure hover-only actions have a visible tap affordance */
    .financial-grid-table tr td .btn-action-dropdown,
    .financial-grid-table tr td .btn-action-view {
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* -----------------------------------------------------------------------
   1. Mobile Bottom Navigation Bar (visible ≤ 767px)
   ----------------------------------------------------------------------- */
#mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #0b192c;
    border-top: 1px solid #1e293b;
    z-index: 200;
    align-items: stretch;
    justify-content: space-around;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
}

#mobile-bottom-nav .mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 600;
    gap: 2px;
    transition: color 0.15s ease;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

#mobile-bottom-nav .mob-nav-item .mob-nav-icon {
    font-size: 1.15rem;
    line-height: 1;
}

#mobile-bottom-nav .mob-nav-item.active,
#mobile-bottom-nav .mob-nav-item:active {
    color: #38bdf8;
}

/* Mobile More Menu Overlay */
#mobile-more-menu {
    display: none;
    position: fixed;
    bottom: 56px;
    left: 0;
    right: 0;
    background: #0b192c;
    border-top: 1px solid #1e293b;
    z-index: 199;
    padding: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.25);
}

#mobile-more-menu.open {
    display: block;
}

#mobile-more-menu .more-menu-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

#mobile-more-menu .more-menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 0.65rem 0.25rem;
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 600;
    border-radius: 8px;
    text-align: center;
    transition: background 0.15s;
}

#mobile-more-menu .more-menu-item:hover,
#mobile-more-menu .more-menu-item:active {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

#mobile-more-menu .more-menu-item .more-icon {
    font-size: 1.25rem;
}

/* -----------------------------------------------------------------------
   2. Responsive: ≥ 1024px and ≤ 1439px — Laptop / compact desktop
   ----------------------------------------------------------------------- */
@media (max-width: 1439px) {
    .kpi-grid-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-row-bottom-trio {
        grid-template-columns: 1fr;
    }

    .row-live-test-ratio,
    .row-webhooks-ratio {
        grid-template-columns: 1fr;
    }

    .er08-top-row-grid {
        grid-template-columns: 1fr;
    }

    .row-bottom-ratio,
    .row-top-ratio,
    .row-middle-ratio {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------------------------------------
   3. Responsive: ≥ 768px and ≤ 1023px — Tablet
   ----------------------------------------------------------------------- */
@media (max-width: 1023px) {
    /* Sprint banner compaction */
    #sprint-top-banner .sprint-header-top {
        flex-direction: column;
        align-items: stretch;
        padding: 0.5rem 0.85rem;
    }

    .sprint-brand-col {
        min-width: 0;
    }

    .sprint-center-pill {
        border-radius: 8px;
        max-width: 100%;
    }

    .sprint-right-badges {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Sidebar — collapsible off-canvas at 1023px */
    #sidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        flex: 0 0 260px !important;
        height: 100vh;
        z-index: 1000;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
        transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #sidebar.mobile-open {
        left: 0;
    }

    /* Override desktop collapsed state for tablet/mobile */
    #sidebar.collapsed {
        width: 260px !important;
        min-width: 260px !important;
        max-width: 260px !important;
        flex: 0 0 260px !important;
        left: -280px;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        pointer-events: auto !important;
    }

    #sidebar.collapsed * {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    #sidebar.collapsed.mobile-open {
        left: 0;
    }

    .btn-topbar-toggle {
        display: inline-flex !important;
    }

    /* Topbar compaction */
    #topbar {
        height: auto;
        min-height: var(--topbar-height);
        flex-wrap: wrap;
        padding: 0.5rem 0.85rem;
        gap: 0.5rem;
    }

    .topbar-left {
        max-width: none;
        flex: 1 1 200px;
    }

    .topbar-actions-row {
        order: 3;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .topbar-actions-row::-webkit-scrollbar {
        display: none;
    }

    .topbar-right {
        flex-shrink: 0;
    }

    .user-text-info {
        display: none;
    }

    /* KPI grids */
    .kpi-grid-row {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Dashboard grid rows */
    .grid-row-debit-aging,
    .grid-row-calls-payments {
        grid-template-columns: 1fr;
    }

    /* Content area padding */
    #content-area {
        padding: 0.85rem;
    }

    /* Tables — ensure horizontal scroll & tablet sticky columns */
    .table-scroll-container,
    .table-responsive {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* Tablet Filter Toolbar: Clean 3-Column Grid */
    .filter-toolbar-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0.6rem;
    }

    .filter-fields-group {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .filter-field-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        font-size: 0.7rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
    }

    .filter-field-select,
    .filter-field-input {
        width: 100%;
        box-sizing: border-box;
        height: 34px;
        padding: 0.35rem 0.5rem;
        font-size: 0.78rem;
        border-radius: 6px;
    }

    .search-input-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    .search-input-box input {
        width: 100%;
        box-sizing: border-box;
        height: 36px;
        font-size: 0.8rem;
        border-radius: 6px;
    }

    .filter-actions-right {
        display: flex;
        gap: 0.5rem;
        width: 100%;
    }

    .filter-actions-right button {
        flex: 1;
        justify-content: center;
        height: 34px;
        font-size: 0.76rem;
        border-radius: 6px;
    }

    /* Tablet Section Header Controls: Clean 3-Column Grid */
    .section-header-controls {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .header-control-item {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        font-size: 0.7rem;
        font-weight: 700;
        color: #475569;
        text-transform: uppercase;
    }

    .header-control-input,
    .header-control-select {
        width: 100%;
        box-sizing: border-box;
        height: 34px;
        font-size: 0.78rem;
        border-radius: 6px;
    }

    .section-header-controls button {
        height: 34px;
        font-size: 0.76rem;
        border-radius: 6px;
        justify-content: center;
    }

    /* Tablet Action & Ledger Name Dual Sticky Columns */
    .financial-grid-table th.col-action-first,
    .financial-grid-table td.col-action-first {
        position: sticky !important;
        left: 0 !important;
        z-index: 20 !important;
        min-width: 58px !important;
        width: 58px !important;
        padding: 4px 2px !important;
        text-align: center !important;
        background-color: #ffffff;
        box-shadow: 2px 0 5px -1px rgba(0, 0, 0, 0.1);
    }

    #lm-grid-table th:nth-child(3),
    #lm-grid-table td:nth-child(3) {
        position: sticky !important;
        left: 58px !important;
        z-index: 18 !important;
        min-width: 150px !important;
        max-width: 160px !important;
        background-color: #ffffff !important;
        box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.12);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #lm-grid-table thead th:nth-child(3) {
        z-index: 28 !important;
        background-color: #f8fafc !important;
    }

    #lm-grid-table thead tr.grid-filter-header-row th:nth-child(3) {
        z-index: 28 !important;
        background-color: #f1f5f9 !important;
    }

    /* Modals */
    .modal-container {
        width: 95%;
        max-height: 85vh;
        display: flex;
        flex-direction: column;
    }

    .modal-body {
        overflow-y: auto;
        flex: 1;
        max-height: calc(85vh - 130px);
    }

    /* Module grids */
    .provider-settings-grid {
        grid-template-columns: 1fr;
    }

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

    /* Receipt form */
    .rf-row-2col {
        grid-template-columns: 1fr;
    }

    /* Bottom target banner */
    #bottom-target-result-banner {
        font-size: 0.72rem;
        padding: 0.4rem 0.85rem;
        flex-wrap: wrap;
        text-align: left;
    }
}

/* -----------------------------------------------------------------------
   4. Responsive: ≤ 767px — Mobile (phones)
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Show mobile bottom nav */
    #mobile-bottom-nav {
        display: flex;
    }

    /* Add bottom padding to main content for bottom nav */
    body {
        padding-bottom: 56px;
    }

    /* Sprint banner — heavily compact */
    #sprint-top-banner {
        font-size: 0.82rem;
    }

    .sprint-header-top {
        padding: 0.4rem 0.65rem !important;
        gap: 0.5rem !important;
    }

    .sprint-brand-col {
        min-width: 0;
        gap: 0.5rem;
    }

    .sprint-logo-icon {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }

    .sprint-brand-title {
        font-size: 1.05rem;
    }

    .sprint-brand-tagline {
        font-size: 0.62rem;
    }

    .sprint-center-pill {
        padding: 0.3rem 0.75rem;
        border-radius: 6px;
    }

    .sprint-pill-title {
        font-size: 0.75rem;
    }

    .sprint-pill-meta {
        font-size: 0.62rem;
    }

    .sprint-right-badges {
        gap: 0.5rem;
    }

    .badge-ed-ref {
        font-size: 0.68rem;
        padding: 0.25rem 0.6rem;
    }

    .badge-completion-box {
        font-size: 0.65rem;
        padding: 0.2rem 0.55rem;
    }

    /* Sidebar — remains off-canvas drawer */
    #sidebar {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        flex: 0 0 280px !important;
        left: -300px;
    }

    #sidebar.mobile-open {
        left: 0;
    }

    .sidebar-footer {
        display: none;
    }

    /* Topbar — single row compact */
    #topbar {
        padding: 0.4rem 0.65rem;
    }

    .topbar-search-box {
        min-width: 0;
    }

    .topbar-search-box input {
        font-size: 0.78rem;
    }

    .topbar-search-box input::placeholder {
        font-size: 0.72rem;
    }

    /* Hide action button text on mobile — show only icons */
    .topbar-actions-row .btn-pill-action span:not([class]) {
        /* This targets the text nodes' sibling spans — keep icons visible */
    }

    .topbar-actions-row {
        gap: 0.3rem;
        flex-wrap: nowrap;
    }

    .topbar-actions-row .btn-pill-action {
        padding: 0.35rem 0.5rem;
        font-size: 0.72rem;
        white-space: nowrap;
    }

    /* Only show Quick Actions and Upload on mobile topbar, rest in bottom nav */
    #btn-top-add-company,
    #btn-top-new-call,
    #btn-top-add-payment,
    #btn-top-send-reminder {
        display: none;
    }

    .topbar-right {
        gap: 0.5rem;
    }

    .user-text-info {
        display: none;
    }

    /* Content area */
    #content-area {
        padding: 0.65rem;
    }

    /* KPI grid — 2 columns on mobile */
    .kpi-grid-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.55rem;
    }

    .kpi-card {
        padding: 0.65rem 0.75rem;
    }

    .kpi-value {
        font-size: 1.15rem;
    }

    .kpi-title {
        font-size: 0.68rem;
    }

    .kpi-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.55rem;
    }

    .kpi-metric-card {
        padding: 0.6rem 0.7rem;
    }

    .kpi-main-number {
        font-size: 1.1rem;
    }

    /* Dashboard grid rows — all stack */
    .grid-row-debit-aging,
    .grid-row-calls-payments,
    .grid-row-bottom-trio {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    /* Card system */
    .card {
        margin-bottom: 0.85rem;
    }

    .card-header {
        padding: 0.65rem 0.85rem;
    }

    .card-title {
        font-size: 0.88rem;
    }

    .card-body {
        padding: 0.85rem;
    }

    .card-footer-toolbar {
        padding: 0.5rem 0.85rem;
    }

    /* Page header */
    .page-header {
        margin-bottom: 0.85rem;
    }

    .page-title {
        font-size: 1.05rem;
    }

    /* Financial tables — horizontal scroll & dual sticky columns */
    .table-scroll-container,
    .table-responsive {
        margin: 0 -0.65rem;
        padding: 0 0.65rem;
        width: calc(100% + 1.3rem);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 #f8fafc;
    }

    .financial-table,
    .financial-grid-table,
    .data-table {
        min-width: 100%;
        font-size: 0.74rem;
    }

    .financial-grid-table th,
    .financial-table th,
    .data-table th {
        padding: 0.45rem 0.5rem;
        font-size: 0.68rem;
    }

    .financial-grid-table td,
    .financial-table td,
    .data-table td {
        padding: 0.4rem 0.5rem;
        font-size: 0.72rem;
    }

    /* Mobile Compact Action Column */
    .financial-grid-table th.col-action-first,
    .financial-grid-table td.col-action-first {
        position: sticky !important;
        left: 0 !important;
        z-index: 20 !important;
        min-width: 50px !important;
        width: 50px !important;
        max-width: 50px !important;
        padding: 4px 2px !important;
        text-align: center !important;
        background-color: #ffffff;
        box-shadow: 2px 0 6px -1px rgba(0, 0, 0, 0.12);
    }

    .financial-grid-table thead th.col-action-first {
        z-index: 30 !important;
        background-color: #f1f5f9 !important;
    }

    .financial-grid-table thead tr.grid-filter-header-row th.col-action-first {
        z-index: 30 !important;
        background-color: #e2e8f0 !important;
    }

    .financial-grid-table .btn-action-dropdown {
        padding: 3px 5px !important;
        font-size: 0.68rem !important;
        min-height: 28px !important;
        min-width: 40px !important;
        border-radius: 4px !important;
        gap: 2px !important;
        justify-content: center !important;
        box-shadow: 0 1px 2px rgba(24, 119, 242, 0.25);
    }

    .financial-grid-table th.col-action-first .btn-clear-col-filters {
        font-size: 0.62rem !important;
        padding: 2px 4px !important;
    }

    /* Mobile Sticky Column 3: Ledger Name (keeps customer name visible on horizontal scroll) */
    #lm-grid-table th:nth-child(3),
    #lm-grid-table td:nth-child(3) {
        position: sticky !important;
        left: 50px !important;
        z-index: 18 !important;
        min-width: 135px !important;
        max-width: 145px !important;
        background-color: #ffffff !important;
        box-shadow: 3px 0 6px -2px rgba(0, 0, 0, 0.12);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #lm-grid-table thead th:nth-child(3) {
        z-index: 28 !important;
        background-color: #f8fafc !important;
    }

    #lm-grid-table thead tr.grid-filter-header-row th:nth-child(3) {
        z-index: 28 !important;
        background-color: #f1f5f9 !important;
    }

    #lm-grid-table tr:hover td:nth-child(3) {
        background-color: #f8fafc !important;
    }

    /* Number filter inputs in subheader */
    .col-filter-input {
        font-size: 0.66rem !important;
        padding: 2px 4px !important;
        height: 22px !important;
    }

    /* Filter Toolbar: Clean 2-Column Mobile Grid */
    .filter-toolbar-row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.55rem !important;
        padding: 0.65rem 0.75rem !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 8px !important;
        margin-bottom: 0.65rem !important;
    }

    .filter-fields-group {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.45rem !important;
        width: 100% !important;
    }

    .filter-field-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        color: #475569 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.02em !important;
    }

    .filter-field-item span {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .filter-field-select,
    .filter-field-input {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 34px !important;
        padding: 0.35rem 0.5rem !important;
        font-size: 0.78rem !important;
        border-radius: 6px !important;
        border: 1px solid #cbd5e1 !important;
        background-color: #ffffff !important;
        color: #0f172a !important;
    }

    .search-input-box {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        margin-top: 0.15rem !important;
        position: relative !important;
        display: flex !important;
    }

    .search-input-box input {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 36px !important;
        padding: 0.4rem 2.2rem 0.4rem 0.75rem !important;
        font-size: 0.8rem !important;
        border-radius: 6px !important;
        border: 1px solid #cbd5e1 !important;
    }

    .search-input-box .search-btn-icon {
        position: absolute !important;
        right: 8px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        padding: 4px !important;
        font-size: 0.85rem !important;
    }

    .filter-actions-right {
        display: flex !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .filter-actions-right button,
    .filter-actions-right .btn-export-green,
    .filter-actions-right .btn-export-red {
        flex: 1 !important;
        justify-content: center !important;
        height: 34px !important;
        font-size: 0.76rem !important;
        border-radius: 6px !important;
    }

    /* Section Card Header Controls: Clean 2-Column Mobile Grid */
    .section-card-header {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
        padding: 0.65rem 0.85rem !important;
    }

    .section-header-controls {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.45rem !important;
        width: 100% !important;
    }

    .header-control-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 2px !important;
        font-size: 0.68rem !important;
        font-weight: 700 !important;
        color: #475569 !important;
        text-transform: uppercase !important;
    }

    .header-control-input,
    .header-control-select {
        width: 100% !important;
        box-sizing: border-box !important;
        height: 34px !important;
        padding: 0.35rem 0.5rem !important;
        font-size: 0.78rem !important;
        border-radius: 6px !important;
        border: 1px solid #cbd5e1 !important;
        background-color: #ffffff !important;
    }

    .section-header-controls button {
        height: 34px !important;
        font-size: 0.76rem !important;
        border-radius: 6px !important;
        justify-content: center !important;
    }

    /* Table Scroll Affordance Strip & View Switcher */
    .table-scroll-hint {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.35rem 0.65rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe;
        border-radius: 6px;
        font-size: 0.7rem;
        color: #1e40af;
        font-weight: 600;
        margin-bottom: 0.45rem;
        gap: 0.5rem;
    }

    .table-scroll-hint .hint-text {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .table-view-toggle {
        display: inline-flex;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 2px;
        gap: 2px;
        flex-shrink: 0;
    }

    .btn-view-toggle {
        border: none;
        background: transparent;
        padding: 4px 10px;
        font-size: 0.72rem;
        font-weight: 600;
        color: #475569;
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
    }

    .btn-view-toggle.active {
        background: #2563eb;
        color: #ffffff;
        box-shadow: 0 1px 3px rgba(37, 99, 235, 0.3);
    }

    /* Mobile Cards View Mode */
    .mobile-ledger-cards-container {
        display: none;
        flex-direction: column;
        gap: 0.65rem;
        margin-top: 0.35rem;
    }

    .mobile-ledger-cards-container.active {
        display: flex !important;
    }

    .mobile-ledger-cards-container.hidden {
        display: none !important;
    }

    .mobile-ledger-card {
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.75rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
        overflow: visible !important;
    }

    .mlc-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    .mlc-name-wrap {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        min-width: 0;
    }

    .mlc-num {
        font-size: 0.72rem;
        color: #94a3b8;
        font-weight: 700;
        flex-shrink: 0;
    }

    .mlc-name {
        font-size: 0.82rem;
        font-weight: 700;
        color: #0f172a;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mlc-badges {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        flex-wrap: wrap;
        font-size: 0.68rem;
        color: #64748b;
    }

    .mlc-badge-status {
        padding: 1px 5px;
        border-radius: 4px;
        font-weight: 700;
        font-size: 0.62rem;
    }
    .mlc-badge-status.regular { background: #dcfce7; color: #15803d; }
    .mlc-badge-status.pending { background: #fef3c7; color: #b45309; }
    .mlc-badge-status.risky { background: #fee2e2; color: #b91c1c; }
    .mlc-badge-status.court { background: #f1f5f9; color: #475569; }

    .mlc-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
        background: #f8fafc;
        padding: 0.5rem;
        border-radius: 6px;
    }

    .mlc-metric {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .mlc-metric-label {
        font-size: 0.62rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
    }

    .mlc-metric-val {
        font-size: 0.78rem;
        font-weight: 700;
        color: #0f172a;
        font-variant-numeric: tabular-nums;
    }

    .mlc-metric-val.diff-red { color: #ef4444; }
    .mlc-metric-val.diff-bold { color: #0f172a; font-weight: 800; }

    .mlc-contact-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 0.7rem;
        color: #475569;
        padding-top: 0.25rem;
        border-top: 1px dashed #e2e8f0;
    }

    .mlc-contact-link {
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
        color: #0284c7;
        text-decoration: none;
        font-weight: 600;
    }

    /* Grid Table Footer / Pagination on Mobile */
    .grid-table-footer,
    .grid-footer-pagination {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.45rem !important;
        padding: 0.65rem !important;
        text-align: center !important;
    }

    .pagination-controls,
    .pagination-btn-list {
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
    }

    .page-btn {
        min-width: 32px !important;
        height: 32px !important;
        font-size: 0.76rem !important;
    }

    /* Modals — full width on mobile */
    .modal-container {
        width: 100%;
        max-width: 100%;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
        margin: auto 0 0 0;
        display: flex;
        flex-direction: column;
    }

    .modal-overlay.open {
        align-items: flex-end;
    }

    .modal-body {
        overflow-y: auto;
        flex: 1;
        max-height: calc(90vh - 130px);
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 0.65rem 0.85rem;
        position: sticky;
        bottom: 0;
    }

    /* Quick Actions modal grid */
    #modal-quick-actions .modal-body > div {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    /* Aging chart */
    .aging-chart-container {
        height: auto;
        min-height: 180px;
    }

    /* Upload card */
    .upload-card-layout {
        grid-template-columns: 1fr;
    }

    /* Pipeline */
    .smart-pipeline-wrapper,
    .pipeline-steps-wrapper {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .pipeline-arrow-divider,
    .pipeline-arrow-icon {
        display: none;
    }

    .pipeline-step-card,
    .pipeline-step-item {
        flex: 0 0 calc(50% - 0.25rem);
        min-width: calc(50% - 0.25rem);
    }

    /* ER-03 fix grids */
    .er03fix-top-grid {
        grid-template-columns: 1fr;
    }

    .er03fix-bottom-grid {
        grid-template-columns: 1fr;
    }

    .er03fix-ed-banner-grid {
        grid-template-columns: 1fr;
    }

    /* ER-04 grids */
    .er04-split-row,
    .er04-half-split-row,
    .er04-bottom-split-row {
        grid-template-columns: 1fr;
    }

    /* Upload layout */
    .upload-compact-layout {
        grid-template-columns: 1fr;
    }

    /* Grid rows */
    .grid-row-two-col,
    .grid-row-three-col {
        grid-template-columns: 1fr;
    }

    /* Reminder scheduler */
    .reminder-kpis-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .provider-cards-grid {
        grid-template-columns: 1fr;
    }

    .reminder-layout-row-middle,
    .analytics-grid-row,
    .reminder-layout-row-three-col,
    .reminder-layout-row-top,
    .reminder-layout-row-bottom {
        grid-template-columns: 1fr;
    }

    .form-row-two-col {
        grid-template-columns: 1fr;
    }

    /* ER-08 Production grids */
    .er08-top-row-grid,
    .row-live-test-ratio,
    .row-webhooks-ratio {
        grid-template-columns: 1fr;
    }

    .row-bottom-ratio,
    .row-top-ratio,
    .row-middle-ratio {
        grid-template-columns: 1fr;
    }

    /* Provider settings */
    .provider-settings-grid {
        grid-template-columns: 1fr;
    }

    /* Monitor grid */
    .monitor-grid {
        grid-template-columns: 1fr;
    }

    /* Webhook modal */
    .modal-webhook-payload {
        max-width: 100%;
    }

    .modal-ledger-detail {
        max-width: 100%;
    }

    /* Pagination */
    .grid-table-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .pagination-controls {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Receipt form */
    .rf-row-2col {
        grid-template-columns: 1fr;
    }

    .rf-actions-row {
        flex-wrap: wrap;
    }

    /* Call status tabs */
    .call-status-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.25rem;
    }

    .call-status-tabs::-webkit-scrollbar {
        display: none;
    }

    .call-tab-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Payment metric pills */
    .payment-metric-pills-row {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .payment-metric-pills-row::-webkit-scrollbar {
        display: none;
    }

    .pay-metric-pill {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Toolbar buttons */
    .toolbar-buttons-group {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    /* Bottom target banner */
    #bottom-target-result-banner {
        font-size: 0.68rem;
        padding: 0.35rem 0.65rem;
        flex-direction: column;
        text-align: center;
        margin-bottom: 56px;  /* above bottom nav */
    }

    /* Reminder tabs */
    .reminder-tab-bar {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap !important;
    }

    .reminder-tab-bar::-webkit-scrollbar {
        display: none;
    }

    .tab-btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* -----------------------------------------------------------------------
   5. Responsive: ≤ 479px — Narrow phones
   ----------------------------------------------------------------------- */
@media (max-width: 479px) {
    /* Sprint banner — hide non-essential on narrow */
    .sprint-center-pill {
        display: none;
    }

    .sprint-right-badges {
        display: none;
    }

    /* KPI grid — 2 columns remains but tighter */
    .kpi-grid-row {
        gap: 0.4rem;
    }

    .kpi-card {
        padding: 0.5rem 0.6rem;
    }

    .kpi-value {
        font-size: 1rem;
    }

    .kpi-metrics-grid {
        gap: 0.4rem;
    }

    .kpi-metric-card {
        padding: 0.5rem 0.6rem;
    }

    .kpi-main-number {
        font-size: 0.95rem;
    }

    /* Card */
    .card-header {
        padding: 0.5rem 0.65rem;
    }

    .card-body {
        padding: 0.65rem;
    }

    .card-title {
        font-size: 0.82rem;
    }

    /* Content area */
    #content-area {
        padding: 0.5rem;
    }

    /* Page title */
    .page-title {
        font-size: 0.95rem;
    }

    /* Topbar */
    #topbar {
        padding: 0.35rem 0.5rem;
    }

    .topbar-search-box {
        padding: 0.3rem 0.6rem;
    }

    .btn-qa-primary {
        padding: 0.35rem 0.65rem;
        font-size: 0.72rem;
    }

    #btn-top-upload {
        display: none;
    }

    /* Quick Actions modal — single column */
    #modal-quick-actions .modal-body > div {
        grid-template-columns: 1fr !important;
    }

    /* Pipeline cards — full width */
    .pipeline-step-card,
    .pipeline-step-item {
        flex: 0 0 100%;
        min-width: 100%;
    }

    /* More menu grid — 3 columns */
    #mobile-more-menu .more-menu-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Aging bars */
    .aging-bar-pillar {
        width: 100%;
    }

    /* Section header controls */
    .section-header-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .header-control-item {
        width: 100%;
    }

    /* Form group */
    .form-group label {
        font-size: 0.72rem;
    }

    .form-control {
        font-size: 0.82rem;
        padding: 0.5rem 0.65rem;
    }

    /* Chart containers */
    .chart-container,
    .delivery-chart-wrap,
    .channel-chart-wrap {
        height: auto !important;
        min-height: 200px;
    }
}

/* -----------------------------------------------------------------------
   6. Sidebar: Close on navigation (all breakpoints < 1024px)
   ----------------------------------------------------------------------- */
/* Handled via JS — see sidebar.js enhancement */

/* -----------------------------------------------------------------------
   7. Focus visibility for keyboard navigation
   ----------------------------------------------------------------------- */
*:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* Remove default outline for non-keyboard interactions */
*:focus:not(:focus-visible) {
    outline: none;
}

/* -----------------------------------------------------------------------
   8. Long text handling utility
   ----------------------------------------------------------------------- */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.text-wrap-break {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* -----------------------------------------------------------------------
   9. Print styles
   ----------------------------------------------------------------------- */
@media print {
    #sidebar,
    #mobile-bottom-nav,
    #mobile-more-menu,
    .sidebar-backdrop,
    #sprint-top-banner,
    #topbar,
    #bottom-target-result-banner {
        display: none !important;
    }

    #app-layout {
        display: block;
    }

    #main-wrapper {
        width: 100%;
    }

    #content-area {
        padding: 0;
    }
}

/* -----------------------------------------------------------------------
   10. Login Screen — Responsive for all breakpoints
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    .login-screen-overlay {
        padding: 0.75rem;
        align-items: flex-end;
    }

    .login-card-container {
        max-width: 100%;
        padding: 1.5rem 1.25rem;
        border-radius: 16px 16px 0 0;
        max-height: 95vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .login-title {
        font-size: 1.15rem;
    }

    .login-subtitle {
        font-size: 0.75rem;
    }

    .login-form {
        gap: 0.75rem;
    }

    .login-input {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
        height: 44px;
    }

    .btn-login-primary {
        height: 44px;
        font-size: 0.85rem;
    }

    .btn-login-google {
        height: 44px;
    }

    .quick-roles-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }

    .btn-quick-role-badge {
        padding: 0.5rem !important;
        font-size: 0.72rem !important;
    }

    .login-footer-meta {
        font-size: 0.62rem;
    }
}

@media (max-width: 479px) {
    .login-card-container {
        padding: 1.25rem 1rem;
    }

    .login-title {
        font-size: 1.05rem;
    }

    .quick-roles-grid {
        grid-template-columns: 1fr !important;
    }

    .login-brand-logo {
        padding: 0.3rem 0.75rem;
    }
}

@media (max-width: 1023px) {
    .login-screen-overlay {
        padding: 1rem;
    }

    .login-card-container {
        max-width: 480px;
    }
}

/* -----------------------------------------------------------------------
   11. Employee & User Management — Module-specific responsive
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Employee cards grid */
    .employee-cards-grid,
    .users-cards-grid,
    .user-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    /* Role permission matrix */
    .role-permission-grid,
    .permission-matrix {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .role-card,
    .user-card,
    .employee-card {
        padding: 0.75rem !important;
    }

    /* User form in modals */
    .user-form-row,
    .employee-form-row {
        grid-template-columns: 1fr !important;
    }

    /* Reset Data page */
    .reset-danger-zone {
        padding: 0.75rem !important;
    }

    .reset-action-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 1023px) {
    .employee-cards-grid,
    .users-cards-grid,
    .user-cards-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* -----------------------------------------------------------------------
   12. User Profile Dropdown — responsive positioning
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    #user-profile-dropdown {
        position: fixed !important;
        right: 0.5rem !important;
        left: 0.5rem !important;
        top: auto !important;
        bottom: 64px !important;
        width: auto !important;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 12px !important;
        z-index: 10001 !important;
    }
}

/* -----------------------------------------------------------------------
   13. Enhanced table-scroll containers at all breakpoints
   ----------------------------------------------------------------------- */
@media (max-width: 1439px) {
    .table-scroll-container,
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

    .table-scroll-container::-webkit-scrollbar {
        height: 6px;
    }

    .table-scroll-container::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-scroll-container::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }
}

/* -----------------------------------------------------------------------
   14. Stock Item Master — responsive
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    .stock-items-grid,
    .stock-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 0.65rem !important;
    }

    .stock-item-card {
        padding: 0.75rem !important;
    }

    .stock-filter-bar {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
}

/* -----------------------------------------------------------------------
   15. Collection sub-modules — responsive table + form enhancements
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Promise to Pay table */
    .ptp-table-container,
    .ptp-grid-container,
    .allocation-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Receipt form responsive */
    .receipt-form-container {
        padding: 0.75rem !important;
    }

    .receipt-summary-grid {
        grid-template-columns: 1fr !important;
    }

    /* Collection customer search */
    .collection-search-bar {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .collection-search-bar input,
    .collection-search-bar select {
        width: 100% !important;
    }

    /* Customer transaction history */
    .txn-history-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* -----------------------------------------------------------------------
   16. Import History — responsive
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    .import-history-grid {
        grid-template-columns: 1fr !important;
    }

    .import-batch-card {
        padding: 0.75rem !important;
    }
}

/* -----------------------------------------------------------------------
   17. Reports module — responsive
   ----------------------------------------------------------------------- */
@media (max-width: 767px) {
    .report-filter-panel {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .report-filter-panel select,
    .report-filter-panel input {
        width: 100% !important;
        box-sizing: border-box;
    }

    .report-export-bar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
}

/* -----------------------------------------------------------------------
   18. Enhanced Escape key sidebar close — visual cue
   ----------------------------------------------------------------------- */
#sidebar.mobile-open .sidebar-header::after {
    content: '✕';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    display: none;
}

@media (max-width: 1023px) {
    #sidebar.mobile-open .sidebar-header {
        position: relative;
    }

    #sidebar.mobile-open .sidebar-header::after {
        display: block;
    }
}

/* -----------------------------------------------------------------------
   19. Safe-area insets for modern mobile (notch / home indicator)
   ----------------------------------------------------------------------- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    #mobile-bottom-nav {
        padding-bottom: env(safe-area-inset-bottom);
        height: calc(56px + env(safe-area-inset-bottom));
    }

    @media (max-width: 767px) {
        body {
            padding-bottom: calc(56px + env(safe-area-inset-bottom));
        }

        #bottom-target-result-banner {
            margin-bottom: calc(56px + env(safe-area-inset-bottom));
        }
    }
}

/* -----------------------------------------------------------------------
   20. Ensure no document-level horizontal overflow at any breakpoint
   ----------------------------------------------------------------------- */
html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

#app-layout {
    max-width: 100vw;
    overflow-x: hidden;
}

#main-wrapper {
    min-width: 0;
    max-width: 100%;
}

#content-area {
    min-width: 0;
}

/* -----------------------------------------------------------------------
   21. Reminder Scheduler — enhanced narrow phone layout
   ----------------------------------------------------------------------- */
@media (max-width: 479px) {
    .reminder-kpis-grid {
        grid-template-columns: 1fr !important;
        gap: 0.4rem !important;
    }

    .provider-card {
        padding: 0.65rem !important;
    }

    .provider-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.35rem !important;
    }

    .worker-status-card {
        padding: 0.65rem !important;
    }

    .delivery-test-form {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }

    .delivery-test-form input,
    .delivery-test-form select,
    .delivery-test-form textarea {
        width: 100% !important;
        box-sizing: border-box;
    }
}