/* ============================================================================
   mobile.css — the phone layer of the sidebar shell (core/base.html).

   Loaded after app.css by both shells; everything here sits under a
   max-width query, so it changes nothing at desktop width. It is the
   shape a back-office page takes on a phone, decided once here rather
   than thirty times in thirty templates:

     tables      → a card per row, each cell labelled by its column header
                   (app.js UI.mobile labels the cells; see .table-stack)
     filter bars → the search box stays, the rest fold behind "Filters"
     page actions→ one floating Actions button opening a bottom sheet
     tabs        → one row that scrolls sideways
     modals      → full-screen sheets
     targets     → 44px, the size a fingertip needs

   A table that must stay a grid — a prospectus, a schedule — opts out with
   class "table-scroll" and keeps .table-responsive's sideways scroll.
   ========================================================================= */

/* ── Top navbar brand, shown wherever the sidebar is hidden (below lg) ──── */
.mob-brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--brand-700);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.3px;
    min-width: 0;
}
.mob-brand img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid var(--brand-200);
}
.mob-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


@media (max-width: 767.98px) {

    /* ── Density: a phone is read at arm's length, held in one hand ─────── */
    :root {
        --ui-scale: 0.75;
        --ui-text:  0.9;
        --tap-min:  44px;
    }

    /* ── Page title area: title alone; the actions live in the FAB ──────── */
    .page-title-area { gap: 6px; }
    .page-actions-wrap:has(.ui-fab-moved) { display: none; }

    /* ── Tables → cards ─────────────────────────────────────────────────── */
    .table-stack { border: 0; }
    .table-stack thead { display: none; }
    .table-stack tbody { display: block; }
    .table-stack tbody tr {
        display: block;
        position: relative;
        margin: 0 10px 10px;
        padding: 10px 12px;
        border: 1px solid var(--surface-3);
        border-radius: 12px;
        background: var(--surface-0);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }
    .table-stack tbody tr:first-child { margin-top: 10px; }
    .table-stack tbody td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 5px 0;
        border: 0;
        text-align: right;
        font-size: 0.85rem;
    }
    .table-stack tbody td::before {
        content: attr(data-label);
        flex: 0 0 38%;
        max-width: 38%;
        text-align: left;
        font-size: 0.68rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--ink-500);
    }
    .table-stack tbody td:not([data-label])::before,
    .table-stack tbody td[data-label=""]::before { display: none; }
    /* The first cell is the row's identity: full width, largest, no label. */
    .table-stack tbody td:first-child {
        display: block;
        text-align: left;
        padding-top: 0;
        padding-right: 40px;             /* room for a checkbox */
        font-size: 0.95rem;
        border-bottom: 1px solid var(--surface-3);
        margin-bottom: 4px;
    }
    .table-stack tbody td:first-child::before { display: none; }
    /* When the first column is a row number or a checkbox, the second
       cell is the card's title instead; the number becomes a corner note. */
    .table-stack tbody tr:has(> td:first-child.ui-index) > td:nth-child(2),
    .table-stack tbody tr:has(> td:first-child > input[type="checkbox"]:only-child) > td:nth-child(2),
    .table-stack tbody tr:has(> td:first-child > .form-check:only-child) > td:nth-child(2) {
        display: block;
        text-align: left;
        padding-top: 0;
        padding-right: 40px;
        font-size: 0.95rem;
        border-bottom: 1px solid var(--surface-3);
        margin-bottom: 4px;
    }
    .table-stack tbody tr:has(> td:first-child.ui-index) > td:nth-child(2)::before,
    .table-stack tbody tr:has(> td:first-child > input[type="checkbox"]:only-child) > td:nth-child(2)::before,
    .table-stack tbody tr:has(> td:first-child > .form-check:only-child) > td:nth-child(2)::before { display: none; }
    .table-stack tbody td.ui-index {
        position: absolute;
        top: 10px;
        right: 12px;
        display: block;
        padding: 0;
        border: 0;
        margin: 0;
        font-size: 0.7rem;
        color: var(--ink-500);
    }
    .table-stack tbody td.ui-index::before { content: '#'; display: inline; font-size: inherit; }
    /* An empty / loading row spans the card. */
    .table-stack tbody td[colspan] {
        display: block;
        text-align: center;
        padding: 16px 0;
        border-bottom: 0;
    }
    .table-stack tbody td[colspan]::before { display: none; }
    /* The row's actions — the Actions burger, or a page's own buttons —
       become the card's last line, right-aligned, whatever the column is
       called in the markup. */
    .table-stack tbody td.ui-actions,
    .table-stack tbody td[data-label="Actions" i],
    .table-stack tbody td[data-label="Action" i] {
        display: flex;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 6px;
        width: auto;
        padding: 8px 0 0;
        margin-top: 6px;
        border-top: 1px solid var(--surface-3);
        text-align: right;
    }
    .table-stack tbody td.ui-actions::before,
    .table-stack tbody td[data-label="Actions" i]::before,
    .table-stack tbody td[data-label="Action" i]::before { display: none; }
    .table-stack tbody td.ui-actions .btn,
    .table-stack tbody td[data-label="Actions" i] .btn { min-height: 38px; }
    /* Checkbox column: a small control beside the identity, not a row. */
    .table-stack tbody td:has(> .form-check-input:only-child),
    .table-stack tbody td:has(> input[type="checkbox"]:only-child) {
        position: absolute;
        top: 12px;
        right: 0;
        padding: 0;
        display: block;
    }
    .table-stack tbody td:has(> input[type="checkbox"]:only-child)::before { display: none; }
    .table-stack .ui-clamp-2 { -webkit-line-clamp: 3; }
    .table-responsive:has(> .table-stack) { overflow: visible; }

    /* A table that opts out keeps its grid and scrolls sideways. */
    .table-scroll { min-width: 640px; }

    /* ── Filter bars: search first, the rest behind a toggle ────────────── */
    .ui-filters-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: var(--tap-min);
        padding: 0 14px;
        border-radius: var(--radius-sm, 8px);
        border: 1px solid var(--ink-200);
        background: var(--surface-0);
        color: var(--ink-700);
        font-weight: 600;
        font-size: 0.85rem;
        font-family: inherit;
    }
    .ui-filters-toggle .badge { background: var(--brand-600); }
    /* The bar is a column here, so nothing may grow into leftover height. */
    .ui-filters > * { flex: 0 0 auto !important; width: 100%; }
    /* app.css's `.ui-filters > div:not(...)` outranks a bare class, hence the specificity here. */
    .ui-filters > .ui-filters-more:not(.open) { display: none !important; }
    .ui-filters > .ui-filters-more.open { display: flex; flex-direction: column; gap: 10px; }
    .ui-filters-more > div { width: 100%; }
    .ui-filters .ui-filters-end, .ui-filters > .ms-auto { width: 100%; margin-left: 0 !important; display: flex; gap: 8px; }
    .ui-filters .ui-filters-end .btn, .ui-filters > .ms-auto .btn { flex: 1; }
    .ui-filters > div[style*="max-width"] { max-width: none !important; width: 100%; }

    /* ── Page actions → floating button + sheet ─────────────────────────── */
    .ui-fab {
        position: fixed;
        right: 16px;
        bottom: calc(16px + var(--safe-bottom));
        z-index: 1028;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-height: 48px;
        padding: 0 18px 0 16px;
        border: 0;
        border-radius: 999px;
        background: var(--brand-600);
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
        font-family: inherit;
        box-shadow: 0 6px 18px rgba(0, 105, 92, 0.35);
    }
    .ui-fab:hover, .ui-fab:focus-visible { background: var(--brand-700); color: #fff; }
    .main-content:has(~ .ui-fab), body:has(.ui-fab) .main-content { padding-bottom: 88px; }
    .ui-sheet { height: auto; max-height: 80vh; border-radius: 18px 18px 0 0; }
    .ui-sheet .offcanvas-header { padding: 14px 18px 6px; }
    .ui-sheet .offcanvas-title { font-size: 1rem; font-weight: 700; }
    .ui-sheet .offcanvas-body { padding: 6px 12px calc(16px + var(--safe-bottom)); display: flex; flex-direction: column; gap: 6px; }
    .ui-sheet .offcanvas-body > .btn, .ui-sheet .offcanvas-body .dropdown-item,
    .ui-sheet .offcanvas-body > a, .ui-sheet .offcanvas-body > button,
    .ui-sheet .offcanvas-body form > .btn {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 48px;
        padding: 0 14px;
        border-radius: 12px;
        text-align: left;
        font-size: 0.92rem;
        font-weight: 600;
        justify-content: flex-start;
    }
    .ui-sheet .dropdown-item { border: 1px solid var(--surface-3); color: var(--ink-800); }
    .ui-sheet .dropdown-item:hover { background: var(--brand-50); }
    .ui-sheet .dropdown-item.text-danger { border-color: rgba(198, 40, 40, 0.25); }
    .ui-sheet .me-2 { margin-right: 0 !important; }
    .ui-sheet form { display: contents; }

    /* ── Tabs scroll sideways ───────────────────────────────────────────── */
    .ui-tabs, .ui-track-tabs, .nav-tabs, .nav-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ui-tabs::-webkit-scrollbar, .ui-track-tabs::-webkit-scrollbar, .nav-tabs::-webkit-scrollbar { display: none; }
    .ui-tabs .nav-link, .ui-track-tabs .nav-link, .nav-tabs .nav-link, .nav-pills .nav-link { white-space: nowrap; min-height: var(--tap-min); }

    /* ── Cards, stats, pagination ───────────────────────────────────────── */
    .card-header { flex-wrap: wrap; }
    .ui-stat-grid, .row.g-3 > [class*="col-"] { min-width: 0; }
    .card-footer .btn-group-sm > .btn { min-height: var(--tap-min); padding-left: 14px; padding-right: 14px; }
    .card-footer > .d-flex.w-100 { justify-content: center; }
    .card-footer > .d-flex.w-100 > small { width: 100%; text-align: center; }

    /* A control sized 'auto' for a desktop row takes the row here. */
    .main-content .form-select.w-auto, .main-content .form-control.w-auto,
    .main-content .form-select[style*="width"], .main-content .form-control[style*="width"] {
        width: 100% !important;
        max-width: none !important;
    }

    /* ── Controls a finger can hit ──────────────────────────────────────── */
    .btn:not(.btn-close), .form-control, .form-select { min-height: var(--tap-min); }
    .form-control, .form-select, input.auth-input { font-size: 16px; }   /* no iOS zoom */
    .dropdown-item { min-height: var(--tap-min); display: flex; align-items: center; }
    .dropdown-menu { font-size: 0.9rem; }
}

/* ── Modals go full-screen on a phone (a .modal-compact one stays a sheet) ─ */
@media (max-width: 575.98px) {
    .modal-dialog:not(.modal-sm):not(.modal-compact) {
        margin: 0;
        width: 100%;
        max-width: none;
        min-height: 100%;
        height: 100%;
    }
    .modal-dialog:not(.modal-sm):not(.modal-compact) .modal-content {
        min-height: 100%;
        border-radius: 0;
        border: 0;
    }
    .modal-dialog:not(.modal-sm):not(.modal-compact) .modal-body { overflow-y: auto; }
    .modal-dialog:not(.modal-sm):not(.modal-compact) .modal-footer { position: sticky; bottom: 0; background: var(--surface-0); }
    .modal-dialog:not(.modal-sm):not(.modal-compact) .modal-footer .btn { flex: 1; min-height: 44px; }
}