/**
 * Finance Manager — responsive layout pass.
 *
 * Loaded after sixorbit-ui.css in layouts/app.php. CSS-only — no markup
 * changes. Reflows the worst offenders on phone- and tablet-sized
 * viewports:
 *   - Multi-column grids collapse to fewer columns or stack.
 *   - The sidebar (already pin-toggleable on desktop) defaults to
 *     hidden on phones; the existing topbar menu button toggles it.
 *   - Tables become horizontally scrollable wrappers so users can
 *     pan the row contents without breaking the table layout.
 *   - Forms become single-column at the narrowest breakpoint.
 *   - Touch-friendly minimum button heights at phone widths.
 */

/* ── Tablet & smaller — collapse 4-column grids ──────────────────────── */
@media (max-width: 1024px) {
    .so-grid-cols-4 { grid-template-columns: repeat(2, 1fr) !important; }
    .so-grid-cols-3 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Phone — single column, tighter spacing, scrollable tables ───────── */
@media (max-width: 768px) {
    .so-grid-cols-4,
    .so-grid-cols-3,
    .so-grid-cols-2 { grid-template-columns: 1fr !important; }

    /* Settings 2-column nav+content → single column with nav on top */
    .fm-settings-layout { grid-template-columns: 1fr !important; }

    /* Cards lose their fat margins on tiny screens */
    .so-card { margin-inline: 8px !important; }
    .so-card-header { padding: 12px 14px !important; }
    .so-card-body   { padding: 12px 14px !important; }

    /* Tables: let the parent scroll horizontally instead of cropping */
    .so-card-body > table.so-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
    .so-card-body > table.so-table th,
    .so-card-body > table.so-table td { padding: 8px 10px !important; }

    /* Inline action button rows wrap onto a second line */
    .so-card-body td form { display: inline-block; margin-block: 2px; }

    /* Hide the desktop sidebar — topbar's existing menu button shows it */
    .so-sidebar { transform: translateX(-100%); transition: transform .22s ease; }
    body.so-sidebar-open .so-sidebar { transform: translateX(0); }
    .so-sidebar-overlay { display: none; }
    body.so-sidebar-open .so-sidebar-overlay {
        display: block; position: fixed; inset: 0;
        background: rgba(0,0,0,.35); z-index: 90;
    }

    /* Main content full-width when sidebar isn't pinned */
    .so-main, .so-page-main, .so-app-main { margin-left: 0 !important; }

    /* Topbar / search compress */
    .so-navbar-search { display: none !important; }
}

/* ── Small phone — single-column forms, larger tap targets ───────────── */
@media (max-width: 480px) {
    .so-form-control { padding: 12px 12px !important; }
    .so-btn, .so-btn-sm, .so-btn-xs {
        min-height: 40px;
        line-height: 1.2;
    }
    .so-card-header-content .so-card-title { font-size: 16px !important; }
    .so-card-header { flex-wrap: wrap; gap: 8px !important; }
    .so-card-header > a, .so-card-header > button { flex: 1 1 auto; }
    .fm-modal { max-width: 96vw; }
}