/**
 * Mobile-first refinements — applies to all authenticated pages (≤767px).
 *
 * Goals:
 *  1. Listings show real content in the first screenful (compact headers,
 *     collapsible filters, denser cards).
 *  2. Tables never break the layout — they scroll horizontally inside
 *     their card instead of overflowing the page.
 *  3. Touch targets stay ≥40px.
 */

@media (max-width: 767px) {

    /* ── Page headers: tighter, actions become full-width button row ── */
    .page-header {
        gap: 0.5rem;
        margin-bottom: 0.875rem;
    }
    .page-header h1 {
        font-size: 1.35rem;
        line-height: 1.25;
    }
    .page-header p,
    .page-header .page-subtitle {
        font-size: 0.85rem;
    }
    .page-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .page-header-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
        text-align: center;
        min-height: 42px;
    }

    /* ── Cards: less padding so more content fits on screen ── */
    .card {
        padding: 0.875rem;
        margin-bottom: 0.75rem;
    }

    /* ── Data tables: horizontal scroll inside the card, never page overflow.
         .routes-table is excluded — it has its own stacked-card conversion. ── */
    .data-table:not(.routes-table) {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .data-table:not(.routes-table) th,
    .data-table:not(.routes-table) td {
        white-space: nowrap;
    }
    /* First column (usually the name) can wrap so it stays readable. */
    .data-table:not(.routes-table) td:first-child,
    .data-table:not(.routes-table) th:first-child {
        white-space: normal;
        min-width: 140px;
    }

    /* ── Listing grids: single column, tighter gap ── */
    .tasks-grid,
    .incidents-grid,
    .opportunities-grid,
    .locations-grid,
    .stores-grid {
        grid-template-columns: 1fr !important;
        gap: 0.75rem !important;
    }

    /* ── Card density (tasks / incidents / opportunities) ── */
    .task-card-header,
    .incident-card-header,
    .opportunity-card-header {
        padding: 0.875rem 0.875rem 0.5rem;
    }
    .task-card-body,
    .incident-card-body,
    .opportunity-card-body {
        padding: 0 0.875rem 0.625rem;
    }
    .task-card-footer,
    .incident-card-footer,
    .opportunity-card-footer {
        padding: 0.625rem 0.875rem;
    }
    .task-card-title h3,
    .incident-card-title h3,
    .opportunity-card-title h3 {
        font-size: 0.9375rem;
    }
    .task-card-meta,
    .incident-card-meta,
    .opportunity-card-meta {
        gap: 0.5rem 0.875rem;
        font-size: 0.78rem;
        margin-bottom: 0.5rem;
    }

    /* Footer action buttons: comfortable touch targets, share the row. */
    .task-card-footer .btn,
    .incident-card-footer .btn,
    .opportunity-card-footer .btn {
        min-height: 40px;
        flex: 1 1 auto;
        justify-content: center;
    }
    .task-card-footer,
    .incident-card-footer,
    .opportunity-card-footer {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    /* ── Collapsible filters (JS adds .filters-collapsible + .open) ── */
    .filters-collapsible > .filter-form,
    .filters-collapsible > form {
        display: none;
    }
    .filters-collapsible.open > .filter-form,
    .filters-collapsible.open > form {
        display: block;
        margin-top: 0.625rem;
    }
    .filters-collapsible [class$="-filters-header"] {
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        min-height: 42px;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }
    /* Chevron indicator appended by JS */
    .filters-collapsible [class$="-filters-header"] .filters-chevron {
        margin-left: auto;
        transition: transform 0.2s ease;
        color: var(--color-text-muted);
        font-size: 0.8rem;
    }
    .filters-collapsible.open [class$="-filters-header"] .filters-chevron {
        transform: rotate(180deg);
    }

    /* Filter selects: full width, big enough to avoid iOS zoom */
    .filter-group select,
    .filter-group input {
        width: 100%;
        font-size: 16px;
        min-height: 42px;
    }

    /* ── Filter chips row (routes etc.): horizontal scroll, no wrap-explosion ── */
    .filters-bar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 0.25rem;
        scrollbar-width: none;
    }
    .filters-bar::-webkit-scrollbar { display: none; }
    .filters-bar .filter-chip {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    /* ── Generic action buttons inside table rows: don't crush ── */
    .data-table .btn-sm {
        min-height: 38px;
        display: inline-flex;
        align-items: center;
    }

    /* ── KPI / stat strips: 2 per row instead of a long single column ── */
    .kpi-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 0.625rem !important;
    }

    /* ── Dual-panel pickers (routes: store selection; lists: location picker;
         route duplicate). These use inline 1fr 1fr grids, hence !important. ── */
    .store-selection-container,
    .list-location-picker {
        grid-template-columns: 1fr !important;
    }
    .store-selection-container .store-list,
    .list-location-picker .store-list,
    .list-location-picker .location-list {
        max-height: 45vh !important;
    }
    /* Shared store/location row polish: truncate long names, keep the
       add/remove buttons at comfortable touch size. */
    .store-item .store-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .store-item .store-city {
        max-width: 34%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .store-item .btn-add,
    .store-item .btn-remove {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    /* route-duplicate: inline 1fr 1fr form rows */
    .form-row[style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}

/* ── Mobile full-page menu (opened from the bottom-nav "Menu" button) ── */
.mobile-menu-toggle {
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
}
.mobile-menu-sheet {
    position: fixed;
    inset: 0;
    bottom: var(--mobile-nav-height, 64px);
    background: var(--color-bg);
    z-index: 999;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1rem;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}
.mobile-menu-sheet[hidden] { display: none; }
body.mobile-menu-open { overflow: hidden; }

.mobile-menu-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 1rem;
}
.mobile-menu-sheet-header button {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--color-text-muted);
    padding: 0.5rem;
    cursor: pointer;
}
.mobile-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
.mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 52px;
}
.mobile-menu-item i {
    font-size: 1.05rem;
    color: var(--color-brand);
    width: 1.25em;
    text-align: center;
    flex-shrink: 0;
}
.mobile-menu-item.active {
    border-color: var(--color-brand);
    box-shadow: inset 0 0 0 1px var(--color-brand);
}
.mobile-menu-sheet-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
    margin-top: 0.625rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--color-border);
}
.mobile-menu-logout,
.mobile-menu-logout i { color: var(--color-danger, #dc2626); }

/* Desktop: menu button and sheet never show */
@media (min-width: 768px) {
    .mobile-menu-toggle,
    .mobile-menu-sheet { display: none !important; }
}

/* Very small phones */
@media (max-width: 380px) {
    .kpi-cards {
        grid-template-columns: 1fr !important;
    }
    .page-header h1 {
        font-size: 1.2rem;
    }
}