/* ══════════════════════════════════════════════════════════════════
   mobile.css — site-wide phone / small-tablet responsive layer.

   Loaded by BOTH base templates (dashboard_base.html and
   dilla/template/base.html) after style.css and the inline design
   system. Page templates put their own <style> blocks in the body,
   which beats head stylesheets on source order — so every override
   here that fights a template rule carries !important on purpose.
   Everything is scoped inside max-width media queries: desktop is
   untouched.
   ══════════════════════════════════════════════════════════════════ */

/* ── Tablets and below ─────────────────────────────────────────── */
@media (max-width: 991.98px) {

    /* Modals: use the full width minus a small gutter */
    .modal-dialog {
        max-width: calc(100vw - 24px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Phones (landscape) and below ──────────────────────────────── */
@media (max-width: 767.98px) {

    /* Safety net: one stray fixed-width element must not put the
       whole page into horizontal scroll */
    html, body {
        overflow-x: hidden;
    }
    img, video, canvas, svg {
        max-width: 100%;
    }

    /* iOS Safari zooms the page when a focused input's font-size is
       under 16px — the design system sets .875rem, so pin 16px here */
    .form-control, .form-select, textarea {
        font-size: 16px !important;
    }

    /* ── Dashboard shell ──────────────────────────────────────── */
    .page-content .page-content-wrapper {
        padding: 16px 14px 48px !important;
    }
    .top-bar {
        padding: 10px 12px !important;
    }
    .top-bar .gap-3 {
        gap: .5rem !important;
    }
    /* Bootstrap's .nav wraps by default, which stacks the credits
       pill on top of the profile chip in a ragged second row — keep
       the top bar a single row and let the chip truncate instead */
    .top-bar .nav {
        flex-wrap: nowrap !important;
    }
    .top-bar .nav .nav-item {
        min-width: 0;
    }
    #profileDropdown span {
        max-width: 72px !important;
    }

    /* Cards: desktop padding eats too much of a small screen */
    .card-s-hd {
        padding: 14px 16px !important;
    }
    .card-s-body, .card-body {
        padding: 16px !important;
    }
    .card-s-hd h2 {
        font-size: .95rem !important;
    }

    /* Card headers (title + tutorial link) wrap instead of colliding */
    .card-s-hd {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Dropdown menus carry min-width:220px inline — never let one
       poke past the viewport */
    .dropdown-menu {
        max-width: calc(100vw - 24px) !important;
    }

    /* ── AI hardware panels (music gen / sound / voice / stems) ── */
    /* LED readouts lock 200-260px minimums — guaranteed overflow on
       a 360px screen once page + card padding are subtracted */
    .led-readout, .led-readout-status, #currentPhase {
        min-width: 0 !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: break-word;
    }
    .proc-panel {
        padding: 18px 14px !important;
    }
    .mixer {
        padding: 14px 12px 16px !important;
    }
    /* The sound-effects mixer is a single flex row (title + LED +
       controls) — let it wrap on phones instead of overflowing */
    .mixer, .mixer-right, .proc-hd {
        flex-wrap: wrap;
        row-gap: 10px;
    }

    /* Knobs: shrink so knob + value + labels fit beside each other */
    .knob-dial {
        width: 76px !important;
        height: 76px !important;
    }
    .knob-body {
        inset: 12px !important;
    }
    .knob-unit {
        min-width: 0 !important;
    }
    .knob-value {
        min-width: 0 !important;
    }

    /* ── Search + filter bars ─────────────────────────────────── */
    .fold-search {
        max-width: 100% !important;
        width: 100%;
    }

    /* ── Waveform players ─────────────────────────────────────── */
    .waveform-player, .wave-player {
        gap: 8px !important;
        padding: 8px 10px !important;
    }
    .waveform-player .time-display, .wave-player .time-display {
        font-size: .7rem !important;
    }
    /* Slightly larger play button = comfortable touch target */
    .pbn {
        width: 36px !important;
        height: 36px !important;
        font-size: .85rem !important;
    }

    /* ── File-picker folder accordions (stem splitter) ────────── */
    /* .accordion-body ships p-4 — 24px of dead inset on every side,
       leaving the file cards floating well inside their folder
       header. Utilities carry !important, so these must too */
    .accordion-modern .accordion-body {
        padding: 10px 6px !important;
    }
    .audio-file-item {
        padding: 12px !important;
        margin-bottom: 10px !important;
    }
    .audio-file-item:last-child {
        margin-bottom: 0 !important;
    }
    /* Wide data tables (credit history, admin) scroll inside the
       card instead of blowing the page open */
    .page-content-wrapper .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Phones (portrait) ─────────────────────────────────────────── */
@media (max-width: 575.98px) {

    .page-content .page-content-wrapper {
        padding: 12px 10px 40px !important;
    }

    /* Top bar: drop the username label, keep avatar + chevron, and
       tighten the credits pill so everything fits on 360px */
    .top-bar #profileDropdown > span {
        display: none !important;
    }
    .top-bar #profileDropdown {
        gap: 6px !important;
        padding: 5px 8px 5px 5px !important;
    }
    .top-bar .nav-item > a {
        font-size: .75rem !important;
    }

    /* ── Segmented tab pills (stem splitter source tabs) ──────── */
    /* The inline-flex pill group is ~410px wide — too wide for a
       phone, so it wraps one-per-line at ragged widths. Stack the
       tabs full-width so they align */
    .nav-tabs-modern {
        display: flex !important;
        flex-direction: column;
        width: 100%;
    }
    .nav-tabs-modern .nav-item {
        width: 100%;
    }
    .nav-tabs-modern .nav-link {
        width: 100%;
        text-align: center;
    }
    /* Stacked, the pill group is tall — it doesn't need the 24px gap
       the inline row carried below it */
    .card-s-body .nav-tabs-modern {
        margin-bottom: 1rem !important;
    }

    /* ── Sound library listing rows (kits/drums/loops/presets, and
       shared + personal folder contents) ───────────────────────── */
    /* Every listing template pins its action pills (Download / Save /
       Bookmark) as a no-shrink flex item ~300px wide, which crushes
       the title column into nothing on phones. Give the pills their
       own full-width line and trim the 24px desktop row gutters. */
    .kit-row, .sf-row, .f-top {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .kit-acts, .f-acts, .sf-acts {
        flex-basis: 100%;
    }
    .kit-row, .f-row, .sf-row {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
    /* Nested subfolder indent eats a sixth of the screen */
    .nsf {
        padding-left: 36px !important;
    }
    /* Personal-folders counter pills ("2 files") break mid-pill when
       the header row squeezes them */
    .cpill {
        white-space: nowrap;
    }

    /* ── Auth pages (login / signup / password reset) ─────────── */
    /* _auth_styles.html only adapts at 992px; give phones a real
       breakpoint so the card doesn't sit inside 3rem padding */
    .mm-auth {
        padding: 24px 0 32px !important;
        align-items: flex-start !important;
    }
    .mm-auth .mm-card {
        padding: 1.5rem 1.25rem !important;
        border-radius: 16px !important;
    }
    .mm-auth h1 {
        font-size: 1.35rem !important;
    }

    /* Marketing navbar: the floating pill margins waste width */
    .custom-navbar {
        margin: 0 8px !important;
    }

    /* Buttons that sit in flex rows may stack — give them room */
    .card-s-body .d-flex.gap-2, .card-s-body .d-flex.gap-3 {
        flex-wrap: wrap;
    }

    /* Modals hug the screen on small phones */
    .modal-dialog {
        max-width: calc(100vw - 16px);
    }
    .modal-header {
        padding: 16px 18px 12px !important;
    }
}