/*
 * Small-screen layout for the dashboard (phones, small tablets, split windows).
 * Loaded after the page's own <style> block. Desktop layouts are untouched: every rule
 * here is inside a max-width media query.
 */

@media (max-width: 900px) {
    .main { padding: 14px; }
    .main h1 { font-size: 1.55em; }

    /* Page headers with an action button (Workbench, All Devices) wrap instead of squeezing */
    .header-row { flex-wrap: wrap; gap: 10px; }

    /* Data tables keep readable column widths and scroll sideways inside their card */
    .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .master-table:not(#table-custom) { min-width: 880px; }
    #table-software { min-width: 760px; }
    .stack-box .master-table { min-width: 760px; }

    /* Group headers: title on one line, copy buttons wrap underneath, and stay in view
       while the table under them scrolls sideways */
    .group-header {
        flex-wrap: wrap; gap: 8px; font-size: 1.05em;
        position: sticky; left: 0;
    }
    .group-header > div { flex-wrap: wrap; }
    .copy-table-btn { padding: 5px 9px; font-size: 0.78em; }

    /* Tracked Devices: the two cards stack full width */
    .roster-box, .tags-box { min-width: 0 !important; max-width: none !important; flex-basis: 100% !important; }

    /* Documentation: article list above the article instead of beside it */
    #docs > div { height: auto !important; }
    #docs > div > div:last-child { flex-direction: column !important; }
    #docs > div > div:last-child > div:first-child {
        width: auto !important; min-width: 0 !important; max-height: 38vh;
    }
    #docs > div > div:last-child > div:last-child { min-height: 60vh; }
    #docContent img { max-width: 100%; height: auto; }
    #docContent table { display: block; overflow-x: auto; }
    #docContent pre { overflow-x: auto; }
    #docToolbar { flex-wrap: wrap; gap: 8px; }

    /* Modals fill the screen width and scroll inside themselves */
    .modal-content {
        width: auto !important; max-width: none !important;
        margin: 70px 10px 10px !important;           /* clear the fixed 60px top nav */
        max-height: calc(100vh - 80px) !important;
        max-height: calc(100dvh - 80px) !important;
    }
    .modal-header { padding: 14px 14px 8px; }
    .modal-header h2 { font-size: 1.2em; word-break: break-all; }

    /* Device details: Advanced View's source / overview / destination columns stack,
       and the whole dialog scrolls instead of each column scrolling separately */
    #detailsModal .modal-content { height: auto !important; overflow-y: auto !important; display: block !important; }
    #detailsBody { display: block !important; padding: 10px !important; clear: both; }   /* clear the floated header buttons */
    #detailsBody > div[style*="display: flex"] { flex-direction: column !important; padding: 0 !important; gap: 12px !important; }
    #detailsBody [style*="overflow-y: auto"] { overflow: visible !important; flex: none !important; }
    #detailsBody > div[style*="display: flex"] > div { width: 100% !important; flex: none !important; }
    #detailsModal .modal-content td { white-space: normal; word-break: break-word; }

    /* Custom View toolbar buttons wrap */
    #custom button { flex-shrink: 0; }
    #custom > div { flex-wrap: wrap; }
}

@media (max-width: 600px) {
    /* iOS zooms into any focused input under 16px; keep fields at 16px on phones */
    input[type="text"], textarea, select { font-size: 16px !important; }

    .main h1 { font-size: 1.35em; }
    .group-header { font-size: 0.98em; padding: 8px 10px; }
    .modal-content { margin: 66px 6px 6px !important; max-height: calc(100dvh - 72px) !important; }
}