/*
 * Phone ergonomics, loaded by Includes/MobileBottomNav.ss (so every page that has a sidebar gets it).
 * Everything is inside a <= 768px media query: desktop is unchanged.
 */
@media (max-width: 768px) {
    html { -webkit-text-size-adjust: 100%; }

    /* Media never wider than the screen */
    img, video { max-width: 100%; height: auto; }

    /* Inputs at 16px stop iOS Safari zooming in on focus; 44px is the usual touch target */
    input:not([type=checkbox]):not([type=radio]):not([type=range]),
    select,
    textarea,
    .form-control,
    .form-select { font-size: 16px; }
    .form-control,
    .form-select,
    select.form-control,
    .btn { min-height: 40px; }

    /* Tables that the script below wraps scroll sideways inside their own box */
    .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .table-scroll > table { margin-bottom: 0; }

    /* Dialogs use the full width, minus a small gutter */
    .modal-dialog { margin: 0.5rem; max-width: calc(100% - 1rem); }
    .modal-content { max-height: calc(100vh - 1rem); overflow-y: auto; }

    /* Page padding: less side padding so content has room */
    .main-content .container-fluid,
    .main-content .container { padding-left: 12px; padding-right: 12px; }

    /* Keep content clear of the fixed bottom bar */
    body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Mobile filter popup (markup + behaviour: Includes/MobileFilters.ss) ── */
.mf-trigger { display: none; }
.mf-overlay, .mf-actions { display: none; }

@media (max-width: 768px) {
    /* the filter area is hidden behind a button... */
    .mf-target:not(.mf-open) { display: none !important; }
    .mf-trigger {
        display: inline-flex; align-items: center; gap: 6px;
        min-height: 40px; padding: 6px 14px; margin: 0 0 10px;
        background: #fff; color: #212529; border: 1px solid #ced4da; border-radius: 20px;
        font-size: 14px; font-weight: 600; line-height: 1;
    }
    .mf-trigger:active { background: #f0f7ff; }
    .mf-badge {
        min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
        background: #0d6efd; color: #fff; font-size: 12px; line-height: 20px; text-align: center;
    }

    /* ...and opens as a sheet over everything, including the tab bar */
    .mf-overlay.show { display: block; position: fixed; inset: 0; z-index: 1085; background: rgba(0, 0, 0, .45); }
    .mf-target.mf-open {
        display: block !important;
        position: fixed !important; left: 0; right: 0; bottom: 0; top: auto;
        z-index: 1090; width: auto !important; max-width: none !important; min-width: 0 !important;
        max-height: 82vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
        margin: 0 !important; padding: 56px 16px calc(84px + env(safe-area-inset-bottom, 0px)) !important;
        background: #fff; border-radius: 18px 18px 0 0; box-shadow: 0 -4px 28px rgba(0, 0, 0, .25);
    }
    .mf-target.mf-open::before {
        content: 'Filters'; position: absolute; top: 0; left: 0; right: 0; padding: 16px 18px 12px;
        background: #fff; border-bottom: 1px solid #f0f0f0; font-weight: 700; font-size: 16px;
    }
    /* stack the controls one per line inside the sheet */
    .mf-target.mf-open .row > [class*="col"],
    .mf-target.mf-open [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
    .mf-target.mf-open input:not([type=checkbox]):not([type=radio]),
    .mf-target.mf-open select,
    .mf-target.mf-open textarea { width: 100% !important; max-width: 100% !important; margin-bottom: 8px; }
    .mf-target.mf-open .form-group,
    .mf-target.mf-open .btn-group { margin-bottom: 10px; }

    .mf-actions.show {
        display: flex; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1095;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid #e9ecef;
    }
    .mf-btn { flex: 1; min-height: 44px; border-radius: 10px; font-weight: 600; font-size: 15px; border: 1px solid #ced4da; background: #fff; }
    .mf-btn-done { flex: 2; background: #0d6efd; border-color: #0d6efd; color: #fff; }
    body.mf-sheet-open { overflow: hidden; }
    .ui-datepicker, .daterangepicker, .flatpickr-calendar { z-index: 1100 !important; }
}