/*
 * Phone-width fixes shared by every layout (staff, portal, public, auth).
 * Everything here is inside one media query — desktop is untouched.
 * Tables become stacked cards via public/js/mobile-tables.js (adds .m-cards + data-label).
 */
@media (max-width: 767.98px) {
    /* iOS Safari zooms into any field under 16px, then the whole page pans sideways. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* A <select> is as wide as its longest option — never wider than its container. */
    select { max-width: 100%; }
    input[type="file"] { max-width: 100%; font-size: 13px; }

    /* Filter bars: fields wrap onto the next line instead of pushing the page sideways. */
    form.flex:not(.flex-col) { flex-wrap: wrap; }
    form.flex:not(.flex-col) > select,
    form.flex:not(.flex-col) > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
        flex: 1 1 140px;
        min-width: 0;
    }
    form.flex:not(.flex-col) > div, form.flex:not(.flex-col) > label { min-width: 0; max-width: 100%; }
    /* Any row of dropdowns/fields (filter bars inside a stacked form, header action rows). */
    .flex:not(.flex-col):has(> select),
    .flex:not(.flex-col):has(> input[type="date"]),
    .flex:not(.flex-col):has(> a + a + a),
    .flex:not(.flex-col):has(> button + a),
    .flex:not(.flex-col):has(> a + button) { flex-wrap: wrap; }
    .flex:not(.flex-col):has(> select) > select { flex: 1 1 130px; min-width: 0; }
    /* Same, when each field sits in its own label+input column. */
    .flex:not(.flex-col):has(> div > input[type="date"]),
    .flex:not(.flex-col):has(> div > select) { flex-wrap: wrap; }
    input[type="date"], input[type="datetime-local"], input[type="month"] { min-width: 0; }

    /* The floating theme gear covers page buttons on a phone; the top bar has the same palette button. */
    .gear-button { display: none !important; }

    /* 9–11px text is unreadable on a phone. */
    .text-\[9px\], .text-\[10px\] { font-size: 12px !important; }
    .text-\[10\.5px\], .text-\[11px\], .text-\[11\.5px\] { font-size: 12.5px !important; }

    /* ── Tables → cards ─────────────────────────────────────────────── */
    /* display:block — a real table can never shrink below its content's min width. */
    table.m-cards { display: block; min-width: 0 !important; width: 100% !important; border-collapse: separate; }
    table.m-cards thead { display: none; }
    table.m-cards tbody, table.m-cards tfoot { display: block; width: 100%; }
    table.m-cards tr {
        display: block;
        margin: .6rem 0;
        padding: .25rem .85rem;
        border: 1px solid var(--border-color, #e5e7eb);
        border-radius: 1rem;
        background: var(--bg-card, #fff);
        box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    }
    table.m-cards td, table.m-cards th {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
        width: 100% !important;
        padding: .45rem 0 !important;
        border: 0 !important;
        text-align: start !important;
        white-space: normal !important;
        min-width: 0 !important;
    }
    table.m-cards td + td, table.m-cards th + td { border-top: 1px dashed var(--border-color, #e5e7eb) !important; }
    table.m-cards td[data-label]::before {
        content: attr(data-label);
        flex-shrink: 0;
        max-width: 42%;
        font-weight: 700;
        font-size: 12.5px;
        color: var(--text-muted, #6b7280);
        font-family: var(--font-family, 'Cairo', system-ui, sans-serif);
        letter-spacing: normal;
    }
    table.m-cards td[data-label] > * { text-align: end; }
    table.m-cards td > * { min-width: 0; max-width: 100%; }
    table.m-cards td form.flex { flex-wrap: wrap; justify-content: flex-end; }
    table.m-cards .whitespace-nowrap { white-space: normal !important; }
    table.m-cards td:not([data-label]) { justify-content: flex-end; }
    table.m-cards td.m-full, table.m-cards td.m-full[data-label] { display: block; text-align: center !important; }
    table.m-cards td.m-full::before { content: none; }
    /* Cells a view hides on small screens stay hidden. */
    table.m-cards .hidden { display: none !important; }
    /* The horizontal-scroll wrapper has nothing left to scroll. */
    .overflow-x-auto:has(> table.m-cards) { overflow-x: visible; }
}

/* Printable documents (invoice, receipt, roster, manifest): on a phone screen a wide
   table scrolls inside its own box instead of dragging the whole page sideways. */
@media screen and (max-width: 767.98px) {
    .print-doc table { display: block; max-width: 100%; overflow-x: auto; }
}