/**
 * Evaluatd — Mobile / Touch / iOS baseline (v13.74+)
 *
 * Loaded by includes/header.php (after Bootstrap + app.css + dashboard.css)
 *      and by includes/header-auth.php (after Bootstrap + auth.css)
 * so the rules below override per-page CSS where it matters.
 *
 * What this fixes:
 *  1. "Stuck hover" on iOS after a tap (paired with per-rule @media (hover: hover) wraps in *.css)
 *  2. iOS double-tap-zoom + 300ms tap delay on interactive elements
 *  3. iOS gray tap-flash on every tap
 *  4. iOS Safari auto-zooming on focus into a <16px input
 *  5. Pull-to-refresh stealing scroll-near-top taps
 *  6. iOS landscape auto font-bump
 *  7. Touch tap-target minimum on coarse pointers (44px / WCAG 2.5.5)
 */

/* iOS landscape font-bump suppression */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Body tap baseline */
body {
    -webkit-tap-highlight-color: transparent;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

/* Touch-action allowlist — disables 300ms delay + double-tap zoom on interactive
   bits only. Non-interactive content keeps default touch-action so pinch-zoom
   still works on text/images. */
a,
button,
input,
select,
textarea,
label,
summary,
[role="button"],
[role="tab"],
[role="menuitem"],
.btn,
.nav-link,
.dropdown-toggle,
.dropdown-item,
.breadcrumb-step,
.breadcrumb-action-btn,
.dt-button,
.pagination .page-link,
.clickable {
    touch-action: manipulation;
}

/* iOS zoom-on-focus guard.
   !important is intentional: per-page CSS sometimes sets sub-16px sizes that
   would otherwise trigger iOS auto-zoom on focus. max() lets explicit ≥16px
   declarations through. */
input,
select,
textarea,
.form-control,
.form-select,
.dataTables_filter input,
.dt-search input,
.select2-search__field,
.select2-selection__rendered,
.ev-searchable {
    font-size: max(16px, 1rem) !important;
}

/* Touch tap-targets on coarse pointers (phones/tablets) — WCAG 2.5.5 target size */
@media (pointer: coarse) {
    .btn,
    .nav-link,
    .dropdown-toggle,
    .dropdown-item,
    .breadcrumb-action-btn,
    .dt-button,
    .pagination .page-link,
    button:not(.btn-link):not(.btn-close):not(.close) {
        min-height: 44px;
    }
    .form-control,
    .form-select {
        min-height: 44px;
    }
    .modal .btn-close,
    .modal-header .btn-close {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Sticky-hover defense.
   The per-rule `@media (hover: hover)` wraps applied across *.css and inline
   <style> blocks cover most cases. The selectors below are a backstop for any
   inline hover rules outside our wrap pipeline (e.g. 3rd-party widget CSS).
   Only resets the most common "stuck after tap" effects (transform/box-shadow). */
@media (hover: none) {
    .btn:hover,
    .btn-primary-gradient:hover,
    .btn-coral:hover,
    .breadcrumb-action-btn:hover,
    .card:hover,
    .nav-link:hover,
    .dropdown-item:hover,
    .stat-card:hover,
    .quick-action-card:hover,
    .action-card:hover,
    .dashboard-card:hover,
    .clickable:hover {
        transform: none;
    }
}

/* Safe-area awareness for the main content shell on devices with notches/home indicator */
@supports (padding: max(0px, env(safe-area-inset-left))) {
    @media (max-width: 991.98px) {
        .main-content {
            padding-left: max(1rem, env(safe-area-inset-left));
            padding-right: max(1rem, env(safe-area-inset-right));
            padding-bottom: max(1rem, env(safe-area-inset-bottom));
        }
        .topbar-container {
            padding-top: env(safe-area-inset-top);
        }
    }
}

/* User-select hardening on chrome elements that should never be selected by accident */
.sidebar .logo,
.breadcrumb-stepper,
.mobile-menu-btn,
.modal-header,
.topbar-container .district-header {
    -webkit-user-select: none;
    user-select: none;
}

/* ----------------------------------------------------------------------------
   Per-page mobile safety nets — generic caps for elements that are commonly
   sized for desktop without realising they overflow phones.
   ---------------------------------------------------------------------------- */

@media (max-width: 575.98px) {
    /* Bootstrap offcanvas with inline width:NNNpx — cap to viewport */
    .offcanvas,
    .offcanvas-end,
    .offcanvas-start,
    .offcanvas-top,
    .offcanvas-bottom {
        max-width: 100vw !important;
    }
    /* Modals: Bootstrap already does this for non-customised .modal-dialog,
       but pages that set custom max-width on the dialog can overflow.
       Force horizontal containment but keep their visual width up to viewport. */
    .modal-dialog {
        max-width: calc(100vw - 1rem) !important;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
    }
    .modal-dialog.modal-dialog-centered { margin-left: 0.5rem; margin-right: 0.5rem; }
    .modal-dialog.modal-xl,
    .modal-dialog.modal-lg,
    .modal-dialog.modal-fullscreen-sm-down {
        max-width: calc(100vw - 1rem) !important;
    }
    /* Tables that aren't wrapped in .table-responsive get a soft scroll wrapper.
       Bootstrap `.table` is `display: table` so wrap behavior comes from the parent.
       Adding `display: block; overflow-x: auto` here without scoping would break
       layout — instead, just ensure the parent has horizontal scroll if it gets
       too wide. */
    .card-body,
    .modal-body,
    .tab-pane,
    .accordion-body {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Bootstrap container fluid padding gets tighter on small phones */
    .container,
    .container-fluid,
    .container-sm {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* Fixed-position floating buttons (support widget, scroll-to-top, etc.) must respect
   safe-area on devices with home indicator so they don't sit inside the gesture bar. */
@supports (padding: max(0px, env(safe-area-inset-bottom))) {
    .ev-support,
    .scroll-to-top-btn,
    .floating-action-btn {
        bottom: max(24px, calc(24px + env(safe-area-inset-bottom)));
        right: max(24px, calc(24px + env(safe-area-inset-right)));
    }
}

/* ----------------------------------------------------------------------------
   Audit M-6: filter pills on very small phones.
   The .filter-pill rows (reports, inbox, etc.) already flex-wrap, but fixed
   padding + count badges make 5-6 pills wrap into several tight rows on
   ≤400px devices. Compress padding/font below 475px so they pack sensibly.
   These pills aren't primary tap targets sized by the coarse-pointer 44px
   rule (they're chips), so the smaller hit area is acceptable here.
   ---------------------------------------------------------------------------- */
@media (max-width: 475px) {
    .filter-pill {
        padding: 0.4rem 0.65rem;
        font-size: 0.78rem;
    }
    .filter-pill .pill-count,
    .filter-pill .filter-pill-count {
        min-width: 1.4rem;
        font-size: 0.68rem;
    }
}