/* ============================================================
 * mobile.css — systemic mobile-friendliness fixes
 * Source: docs/MOBILE_AUDIT_20260615.md §6 (Systemic Fixes).
 * Global rules that resolve recurring mobile defects across the app
 * without per-page edits. Reference viewport: 375px.
 * Brand palette unchanged (navy/red/white); these are layout-only.
 * ============================================================ */

/* ------------------------------------------------------------
 * S1 — Injected markdown / |safe content tables get a horizontal
 * scroll container. User manuals, expense help, social guides,
 * and news/markdown bodies render raw <table> with no wrapper;
 * this makes them scroll inside their column instead of pushing
 * the whole page wide.
 * ------------------------------------------------------------ */
.markdown-body table,
.manual-content table,
.news-content table,
.guide-content table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ------------------------------------------------------------
 * S3 — Filter bars built from `row + col-auto` keep intrinsic
 * width and overflow on phones. Add class="filter-bar" to the
 * row; its col-auto controls go full-width below 576px.
 * ------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .filter-bar > .col-auto {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .filter-bar > .col-auto > .form-control,
    .filter-bar > .col-auto > .form-select,
    .filter-bar > .col-auto > .btn,
    .filter-bar > .col-auto > .input-group {
        width: 100%;
    }
}

/* ------------------------------------------------------------
 * S4 — Touch-target floor. On coarse (touch) pointers, small
 * buttons meet the ~44px WCAG 2.5.5 minimum without editing each
 * template. Applies globally to btn-sm / btn-group-sm clusters.
 * ------------------------------------------------------------ */
@media (pointer: coarse) {
    .btn-sm,
    .btn-group-sm > .btn {
        min-height: 44px;
        min-width: 44px;
    }
    td .btn + .btn,
    td form + form,
    .table .btn + .btn {
        margin-left: 0.5rem;
    }
}

/* ------------------------------------------------------------
 * S5 — Sticky/fixed side rails only help on wide screens. When
 * the layout stacks (<lg) they pin over content. Apply
 * class="sticky-lg-up" to any sticky rail to neutralize it below lg.
 * ------------------------------------------------------------ */
@media (max-width: 991.98px) {
    .sticky-lg-up {
        position: static !important;
        top: auto !important;
        max-height: none !important;
    }
}