/* ============================================================
   RKD ERP — Mobile Responsive Overrides
   Shared across all dashboards. Include via <link rel="stylesheet" href="mobile.css">
   Uses !important to override inline styles (highest specificity).
   ============================================================ */

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {
    /* KPI grids: 5-col → 3, 4-col → 2 */
    [style*="grid-template-columns:repeat(5,1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* === MOBILE BOTTOM NAV (shared across all pages) === */
.mobile-bottom-nav {
    display:none; position:fixed; bottom:0; left:0; right:0; height:60px;
    background:white; border-top:1px solid #e2e8f0; z-index:50;
    justify-content:space-around; align-items:center;
    box-shadow:0 -2px 10px rgba(0,0,0,0.06);
    padding-bottom:env(safe-area-inset-bottom,0);
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.mobile-bottom-nav a {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    text-decoration:none; color:#94a3b8; font-size:0.65rem; font-weight:600;
    padding:10px 18px; border-radius:10px; min-width:64px; min-height:48px;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
    cursor:pointer; user-select:none; -webkit-user-select:none;
}
.mobile-bottom-nav a:active { background:#f1f5f9; transform:scale(0.95); }
.mobile-bottom-nav a.active { color:#3b82f6; }
.mobile-bottom-nav a i { font-size:1.1rem; }

/* ---- MOBILE (max 768px) ---- */
@media (max-width: 768px) {

    /* Show bottom nav + body padding */
    .mobile-bottom-nav { display:flex; }
    body { padding-bottom: 60px; }

    /* ============================================================
       HEADER — STANDARD (white flex header with logo + nav)
       ============================================================ */
    body[data-header="standard"] header {
        background: white !important;
        border-bottom: 1px solid #e2e8f0 !important;
        box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
        padding: 0 14px !important;
        height: 56px !important;
        min-height: 56px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        z-index: 50 !important;
    }
    body[data-header="standard"] header > div:first-child {
        flex: 1 !important;
        min-width: 0;
    }
    body[data-header="standard"] header > nav {
        display: none !important;
    }
    body[data-header="standard"] .sidebar-toggle {
        display: none !important;
    }
    /* Hide brand badges/subtitles — standard only */
    body[data-header="standard"] header [style*="background"][style*="border-radius"][style*="font-size:0.7"] {
        display: none !important;
    }
    body[data-header="standard"] header p.text-xs {
        display: none !important;
    }
    body[data-header="standard"] header [style*="font-size:1.15rem"],
    body[data-header="standard"] header [style*="font-size:1.1rem"],
    body[data-header="standard"] header [style*="font-size:1.2rem"] {
        font-size: 0.95rem !important;
    }
    body[data-header="standard"] .profile-group .user-name,
    body[data-header="standard"] .profile-group .user-name-display,
    body[data-header="standard"] .profile-group .user-role-display,
    body[data-header="standard"] .profile-group .text-right,
    body[data-header="standard"] .profile-group .hidden,
    body[data-header="standard"] header [style*="font-size:0.85rem"][style*="font-weight:600"],
    body[data-header="standard"] header [style*="font-size:.85rem"][style*="font-weight:600"] {
        display: none !important;
    }
    body[data-header="standard"] .profile-group .w-8,
    body[data-header="standard"] .profile-group .w-9 {
        width: 34px !important;
        height: 34px !important;
    }
    body[data-header="standard"] header button[style*="border-radius"],
    body[data-header="standard"] header a[style*="border-radius"] {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
    }
    body[data-header="standard"] header [style*="width:1px"][style*="height:"],
    body[data-header="standard"] header .h-8.w-px,
    body[data-header="standard"] header .h-6.w-px {
        display: none !important;
    }

    /* ============================================================
       HEADER — TAB-BAR (costing_hub, bom_hub, po_hub)
       Keep dark bg, show compact scrollable tabs
       ============================================================ */
    body[data-header="tabbar"] header {
        padding: 0 10px !important;
        height: 56px !important;
        min-height: 56px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        z-index: 50 !important;
    }
    body[data-header="tabbar"] .tab-bar {
        flex: 1 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 4px !important;
        align-items: center !important;
        scrollbar-width: none;
    }
    body[data-header="tabbar"] .tab-bar::-webkit-scrollbar { display: none; }
    body[data-header="tabbar"] .tab-bar .tab {
        white-space: nowrap !important;
        padding: 6px 12px !important;
        font-size: 0.72rem !important;
        min-width: auto !important;
        flex-shrink: 0 !important;
    }
    body[data-header="tabbar"] .tab-bar #new-tab-btn {
        padding: 6px 10px !important;
        font-size: 0.72rem !important;
        flex-shrink: 0 !important;
    }
    body[data-header="tabbar"] header > nav {
        display: none !important;
    }

    /* ============================================================
       HEADER — DARK (ai_copilot, create_po, grn_list, etc.)
       Keep dark bg + white text, just compact it
       ============================================================ */
    body[data-header="dark"] header {
        padding: 0 14px !important;
        height: 56px !important;
        min-height: 56px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        z-index: 50 !important;
    }
    body[data-header="dark"] header > nav {
        display: none !important;
    }
    body[data-header="dark"] header > div:first-child {
        flex: 1 !important;
        min-width: 0;
    }

    /* ============================================================
       HEADER — CUSTOM (gm_dashboard, hr_dashboard, etc.)
       Minimal overrides — just compact padding
       ============================================================ */
    body[data-header="custom"] header {
        padding: 0 14px !important;
        height: 56px !important;
        min-height: 56px !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        z-index: 50 !important;
    }
    body[data-header="custom"] header > nav {
        display: none !important;
    }
    body[data-header="custom"] header > div:first-child {
        flex: 1 !important;
        min-width: 0;
    }

    /* ============================================================
       SHARED MOBILE ELEMENTS (class-based, safe for all pages)
       ============================================================ */
    /* Mobile page title — hidden on desktop, shown on mobile */
    .mobile-page-title {
        display: flex !important;
        align-items: center;
        gap: 10px;
        flex: 1;
    }

    /* ============================================================
       ROWS THAT CANNOT FIT A PHONE
       ------------------------------------------------------------
       Nearly every overflow found in the sweep of all 94 pages was the
       same thing: a header or toolbar built as a flex row that never
       wraps, so its controls are pushed off the right of the screen —
       top-bar links, profile chips, tab strips, action groups.

       flex-wrap:wrap does nothing while a row already fits, so this only
       acts where the layout is broken today. The min-width:0 is the other
       half: a flex child keeps min-width:auto by default and refuses to
       shrink below its own content, which is what shoves the last button
       past the edge.
       ============================================================ */
    /* `header` itself, not only a .flex inside it — several pages put the
       classes straight on the header, which this rule used to walk past. */
    header,
    header .flex,
    .top-bar, .top-bar-right, .top-bar-left,
    .topbar, .topbar-right, .nav-bar, .navbar,
    .tab-container, .nav-tab, .tabs,
    .profile-group, .userchip,
    .save-btn-group, .glass-dock, .btn-group,
    .merchant-actions, #merchant-actions {
        flex-wrap: wrap !important;
    }

    /* A spacer exists to shove the rest of the bar to the right edge. Once the
       bar wraps, it only pushes the links off the screen again. */
    .topbar .spacer, .top-bar .spacer, header .spacer { display: none !important; }
    header > *,
    header .flex > *,
    .top-bar > *, .top-bar-right > *, .top-bar-left > *,
    .topbar > *, .profile-group > *, .save-btn-group > * {
        min-width: 0;
    }

    /* A button whose label is clipped is worse than one that wraps: you
       cannot tell what it does. Let the text breathe. */
    button, .btn, a.tbtn {
        white-space: normal;
        overflow: visible;
    }

    /* A form laid out in three, four or six columns gives each field about
       80px on a phone — the fields come out 17-18px wide, narrower than one
       character, on Create BOM, Create PO and Style Details. Two columns at
       most; one where the fields are still cramped. */
    [class*="grid-cols-3"], [class*="grid-cols-4"], [class*="grid-cols-5"],
    [class*="grid-cols-6"], [class*="grid-cols-7"], [class*="grid-cols-8"],
    [class*="grid-cols-12"] {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .grid > * { min-width: 0; }

    /* The app shell on 32 screens is a 300px side panel next to the content,
       both children of one flex row. On a 375px phone the panel keeps its
       300px and the content is left with about 75px — on Create PO that made
       every field 8px wide, narrower than the cursor. Stack them instead:
       the panel takes the full width and the content drops below it. */
    main > [class*="w-["],
    main > [class*="w-1/"], main > [class*="w-2/"],
    main > [class*="w-3/"], main > [class*="w-4/"],
    main > .w-64, main > .w-72, main > .w-80, main > .w-96,
    main > div > [class*="w-["],
    main > div > [class*="w-1/"], main > div > [class*="w-2/"],
    main > div > [class*="w-3/"], main > div > [class*="w-4/"],
    main > div > .w-64, main > div > .w-72, main > div > .w-80, main > div > .w-96 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
    }
    /* Wrapping the row is not enough: the content pane is flex-1, so its
       hypothetical width is 0 — it "fits" beside the 300px panel and stays on
       the same line at zero width. Turn the row into a column instead, which
       is what the few pages that already handle phones do by hand. */
    main.flex:not(.flex-col), main > .flex:not(.flex-col) {
        flex-direction: column;
        /* A couple of pages reach for flex-wrap instead. Wrapping a column
           container lays the children out in side-by-side columns, which is
           the opposite of stacking, so the direction has to win. */
        flex-wrap: nowrap !important;
        height: auto !important;
        max-height: none !important;
    }

    /* A stacked shell is taller than the viewport, so the shell's own
       overflow:hidden would cut the lower half off with nothing to scroll. */
    body.overflow-hidden, body.h-screen {
        overflow: visible !important;
        height: auto !important;
    }
    main.overflow-hidden, main > .overflow-hidden {
        overflow: visible !important;
    }

    /* A canvas cannot shrink below its width attribute. */
    canvas { max-width: 100%; }

    /* Fixed-height toolbar strips inside a page body (h-12/h-14/h-16 with
       justify-between) are 538px of min-content on Staging Dashboard. The
       shell's overflow:hidden used to hide the right-hand buttons rather
       than scroll to them. Let the strip wrap and grow. */
    .h-12.flex, .h-14.flex, .h-16.flex {
        flex-wrap: wrap;
        height: auto !important;
        min-height: 3rem;
        row-gap: 8px;
    }
    .h-12.flex > *, .h-14.flex > *, .h-16.flex > * { min-width: 0; }
    .h-12.flex .flex, .h-14.flex .flex, .h-16.flex .flex { flex-wrap: wrap; }

    /* A text input keeps min-width:auto, which resolves to its declared
       width — a `w-64` search box therefore refuses to go below 256px and
       drags the whole page out to 538px on Staging Dashboard. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select, textarea {
        min-width: 0;
        max-width: 100%;
    }

    /* Inputs were coming out 17-22px tall on several screens — a date field
       on Attendance, the shift-hours boxes on Capacity Planner, the version
       select on Costing. Too short to tap accurately and too short to read. */
    input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
    select, textarea {
        min-height: 34px;
    }

    /* A finger is about 9mm. Icon buttons styled with background:none end up
       as small as 13x20px — the refresh control on the Order Pipeline card is
       one — which is not reachable on a phone however steady your hand. Give
       every button a floor without changing how it looks. */
    button {
        min-height: 36px;
    }
    button:not([class*="w-"]):not([class*="px-"]) {
        min-width: 36px;
    }
    /* The px-* exemption let padded icon buttons stay 20-30px wide anyway —
       Tech Pack, Costing Hub, Pattern Calibration. The floor is about the
       finger, not about the padding, so it applies to those too. */
    button { min-width: 36px; }

    /* Two controls were still under the tap floor because the page sets
       their size with its own id rules: the "+" that opens a costing tab,
       and the version picker on Costing Gold, which had shrunk to 20px —
       narrower than one character of the version it is showing. */
    #new-tab-btn { min-width: 40px !important; }
    #versionSelect { min-width: 110px !important; flex-shrink: 0; }

    /* A horizontal tab strip already scrolls, but its tabs are flex items
       and shrank anyway, cutting "Supply Chain" to "Supply Cha" on the GM,
       HR and Accounts dashboards. Let them keep their width and scroll. */
    .tabs-bar > *, .tab-bar > *, .tab-strip > * {
        flex-shrink: 0 !important;
    }

    /* Buttons whose label is wider than the button: the text was being cut
       mid-word on the GM, HR and Accounts dashboards. Let it wrap onto a
       second line instead of disappearing. */
    button, .btn, a[class*="px-"][class*="py-"] {
        white-space: normal;
        word-break: break-word;
        height: auto;
    }

    /* Hamburger button — polished */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid #e2e8f0;
        background: white;
        border-radius: 10px;
        font-size: 18px;
        color: #334155;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.15s;
        flex-shrink: 0;
    }
    .mobile-menu-btn:active {
        transform: scale(0.93);
        background: #f1f5f9;
    }
    /* Dark header variant for hamburger */
    body[data-header="dark"] .mobile-menu-btn,
    body[data-header="tabbar"] .mobile-menu-btn {
        border-color: rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.1);
        color: white;
    }
    body[data-header="dark"] .mobile-menu-btn:active,
    body[data-header="tabbar"] .mobile-menu-btn:active {
        background: rgba(255,255,255,0.2);
    }

    /* === MOBILE NAV DRAWER === */
    .mobile-nav-drawer {
        position: fixed;
        top: 56px;
        left: 0;
        right: 0;
        background: white;
        z-index: 100;
        border-bottom: 1px solid #e2e8f0;
        box-shadow: 0 10px 40px rgba(0,0,0,0.12);
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        display: none;
        -webkit-overflow-scrolling: touch;
    }
    .mobile-nav-drawer.open {
        display: block;
    }
    .mobile-nav-drawer .mobile-nav-link {
        display: block;
        padding: 14px 20px;
        color: #334155;
        font-size: 0.88rem;
        font-weight: 500;
        border-bottom: 1px solid #f1f5f9;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }
    .mobile-nav-drawer .mobile-nav-link:active {
        background: #f1f5f9;
    }
    .mobile-nav-drawer .mobile-nav-link i {
        width: 24px;
        margin-right: 10px;
        text-align: center;
        color: #64748b;
    }
    .mobile-nav-drawer .mobile-nav-section {
        padding: 10px 20px 6px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #94a3b8;
    }
    .mobile-nav-backdrop {
        position: fixed;
        inset: 0;
        top: 56px;
        background: rgba(0,0,0,0.25);
        z-index: 99;
        display: none;
    }
    .mobile-nav-backdrop.open {
        display: block;
    }

    /* === MAIN CONTENT === */
    main[style*="padding:24px 32px"],
    main[style*="padding: 24px 32px"] {
        padding: 14px !important;
    }
    main[style*="max-width:1400px"] {
        max-width: 100% !important;
    }

    /* === KPI GRIDS === */
    [style*="grid-template-columns:repeat(5,1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .widget-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
    .snap-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .merch-kpi-strip {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 10px 14px !important;
    }

    /* KPI card sizing */
    .kpi-card,
    .snap-card,
    .merch-kpi {
        padding: 12px 14px !important;
    }
    .kpi-value {
        font-size: 1.35rem !important;
    }
    .kpi-label {
        font-size: 0.62rem !important;
    }
    .kpi-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 16px !important;
    }

    /* === CHART PANELS — grid-column spans === */
    [style*="grid-column:span 2"],
    [style*="grid-column:span 3"],
    [style*="grid-column: span 2"],
    [style*="grid-column: span 3"],
    .col-span-2, .col-span-3, .col-span-4 {
        grid-column: span 1 !important;
    }
    /* Chart heights */
    [style*="height:260px"],
    [style*="height:250px"],
    [style*="height:280px"],
    [style*="height:300px"] {
        height: 200px !important;
    }

    /* === GLASS PANELS === */
    .glass-panel {
        border-radius: 14px !important;
    }
    .panel-header {
        padding: 14px 16px !important;
        font-size: 0.78rem !important;
    }

    /* === TABLES & LISTS === */
    .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    /* A table wider than the phone used to run off the page with no way to
       reach the right-hand columns — the data was on screen and unreachable.
       Let the table scroll itself. Where a .table-scroll wrapper already does
       that, leave the table alone so there are not two scrollbars. */
    table {
        font-size: 0.78rem !important;
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-scroll table,
    [style*="overflow-x"] table {
        display: table;
        overflow-x: visible;
    }

    /* Making the table scroll is only half of it. Its container is usually a
       flex child, and a flex child keeps min-width:auto — it refuses to shrink
       below its content, so the table stayed at its full width and stretched
       the page instead of scrolling inside it. Audit Log was 433px wide on a
       375px screen for exactly this reason, with the table already set to
       scroll and unable to. */
    main, .flex-1, .flex > .flex-1, [class*="flex-1"] {
        min-width: 0;
    }
    table th, table td {
        padding: 8px 10px !important;
    }

    /* Pipeline / PO rows */
    [class*="pipeline-row"],
    [class*="po-row"],
    .shortage-item {
        padding: 10px 12px !important;
        gap: 8px !important;
        flex-wrap: wrap;
    }

    /* === ACTION CARDS === */
    .action-card {
        padding: 16px 12px !important;
    }
    .action-icon {
        width: 44px !important;
        height: 44px !important;
        font-size: 18px !important;
    }

    /* === MISC === */
    /* Dropdown menus off-screen fix */
    .dropdown-menu {
        min-width: 200px !important;
    }
    /* Profile dropdown */
    .profile-menu {
        width: 200px !important;
        right: 0 !important;
    }
    /* Flatpickr date input in header */
    input[type="text"][style*="width:200px"],
    input[type="text"][style*="width:220px"] {
        width: 120px !important;
        font-size: 0.72rem !important;
    }
    /* Move AI copilot FAB above bottom nav */
    .ai-copilot-fab {
        bottom: 72px !important;
    }
}

/* ---- SMALL PHONES (max 480px) ---- */
@media (max-width: 480px) {
    /* KPI grids stack to 1 column */
    [style*="grid-template-columns:repeat(5,1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr !important;
    }
    .snap-grid,
    .merch-kpi-strip {
        grid-template-columns: 1fr !important;
    }
    /* Action card grids also 1 col */
    [style*="grid-template-columns:repeat(3,1fr)"][style*="action"],
    div[id="action-grid"] {
        grid-template-columns: 1fr !important;
    }
    main[style*="padding:24px 32px"],
    main[style*="padding: 24px 32px"] {
        padding: 10px !important;
    }
    .kpi-value {
        font-size: 1.2rem !important;
    }
}

/* ---- AI COPILOT FLOATING BUTTON (all screens) ---- */
.ai-copilot-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 52px;
    height: 52px;
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 4px 14px rgba(99, 102, 241, 0.45);
    z-index: 90;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.ai-copilot-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.6);
}
.ai-copilot-fab:active {
    transform: scale(0.95);
}

/* ---- DESKTOP — hide mobile elements ---- */
@media (min-width: 769px) {
    .mobile-menu-btn {
        display: none !important;
    }
    .mobile-nav-drawer,
    .mobile-nav-backdrop {
        display: none !important;
    }
    .mobile-page-title {
        display: none !important;
    }
}

/* ---- LAPTOPS — the top bar does not fit 1440px ----
   The shared header is a 118px logo, a nav of nine items that needs 992px,
   and a right group (omnibox, Customize, profile) that needs 547px: 1657px
   against 1376px of usable width. None of the three can shrink, because a
   flex child keeps min-width:auto, so the right group was pushed off the
   right edge and the whole page scrolled sideways — the Admin Dashboard
   measured 1705px wide at 1440px. Tighten the three in steps instead. */
@media (min-width: 769px) and (max-width: 1600px) {
    header .nav-item {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 0.8rem !important;
    }
    header .omnibox-wrapper,
    header .omnibox-input { width: 180px !important; }
    header .omnibox-wrapper { margin-right: 10px !important; }
    header .profile-group .text-right { display: none !important; }
    header > div:last-child > button { margin-right: 12px !important; }
}
@media (min-width: 769px) and (max-width: 1366px) {
    header .nav-item {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 0.76rem !important;
    }
    header .omnibox-wrapper,
    header .omnibox-input { width: 140px !important; }
    /* Customize keeps its icon; the word is what costs 70px. */
    header > div:last-child > button {
        font-size: 0 !important;
        gap: 0 !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    header > div:last-child > button i { font-size: 13px !important; }
}

/* Small laptops and tablets in landscape: the same three elements again,
   now against 960px. Everything stays reachable — the nav keeps all nine
   items and the search box keeps working, just narrower. */
@media (min-width: 769px) and (max-width: 1200px) {
    header { padding-left: 10px !important; padding-right: 10px !important; }
    header .nav-item {
        padding-left: 5px !important;
        padding-right: 5px !important;
        font-size: 0.7rem !important;
    }
    header .omnibox-wrapper,
    header .omnibox-input { width: 110px !important; }
    header .w-48 { width: auto !important; }
}

/* Below about 1100px even a tightened nav cannot fit on one line beside the
   logo and the right-hand group. The mobile drawer is not an option here —
   its styles only exist below 769px — so give the nav its own full-width row
   and let it wrap. The header grows to two or three rows and every item stays
   clickable, with the dropdowns still escaping the header as before. */
@media (min-width: 769px) and (max-width: 1100px) {
    header {
        height: auto !important;
        min-height: 4rem;
        flex-wrap: wrap;
        row-gap: 6px;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
    header > nav {
        flex: 0 0 100% !important;
        order: 3;
        height: auto !important;
        flex-wrap: wrap;
        row-gap: 4px;
        justify-content: flex-start;
    }
    header .nav-item { height: auto !important; padding-top: 6px !important; padding-bottom: 6px !important; }
}