/* ──────────────────────────────────────────────────────────────
   Desktop Sidebar — Shared Styles
   Loaded on every page. Shows the fixed left sidebar at >=1024px
   and hides the mobile chrome (hamburger header + nav-menu). Below
   1024px everything is display: none and the mobile hamburger menu
   remains the only navigation.
   ────────────────────────────────────────────────────────────── */

/* Hidden by default; the desktop media query below reveals it. */
.desktop-sidebar { display: none; }

/* Sidebar width — single source of truth. The collapsed-sidebar
   selector (html.sidebar-collapsed) overrides this to shrink the
   sidebar to an icon strip. All layout offsets and the flyout's
   left position read this variable so they stay in sync. */
:root {
    --sidebar-width: 220px;
}
html.sidebar-collapsed {
    --sidebar-width: 48px;
}

@media (min-width: 1024px) {
    /* Hide the mobile chrome — header, hamburger, slide-out nav, overlay.
       !important guards against per-page CSS that might re-show .header. */
    .header,
    .hamburger-button,
    .nav-menu,
    .nav-overlay {
        display: none !important;
    }

    /* DEV badge: hidden at desktop because the sidebar now renders its
       own badge (.desktop-sidebar-dev-badge) just above the .desktop-
       sidebar-bottom separator. The original sidebar-upper-left position
       overlapped the collapse toggle chevron. The body::before is still
       used on mobile (shared.css). */
    body::before {
        display: none;
    }

    /* App container: padding-left makes room for the fixed-position
       sidebar. This is the canonical offset — it handles both standard
       tile pages (where .main is inside .app-container) AND dealer-locator
       (which has content like .search-section and .content-container as
       direct children of .app-container with no .main wrapper). The old
       per-child margin-left rules were brittle because elements like
       .content-container had no width constraint and overflowed when
       shifted. With padding-left on the container, every descendant
       naturally lives inside the offset content box. */
    .app-container {
        /* shared.css already gives .app-container `flex-direction: column`,
           which is what we want at every viewport: direct children stack
           vertically. We do NOT override to row here — the fixed-position
           sidebar lives outside the flex flow, and forcing row caused
           dealer-locator's search-section + content-container (both
           direct children) to sit side-by-side instead of stacking. */
        padding-left: var(--sidebar-width);
        box-sizing: border-box;
        transition: padding-left 200ms ease;
    }

    /* Main content fills the .app-container content box. No margin-left
       needed — the parent's padding already shifts everything right. */
    .main {
        max-width: none;
        padding: 2rem 2.5rem;
        width: auto;
    }

    /* delivery-schedule.html uses its own .ds-layout shell instead of
       .app-container, so the padding rule above doesn't reach it. Shift
       the entire .ds-layout by the sidebar width to make room for the
       desktop sidebar without breaking the page's internal driver-list
       + map flex layout. */
    .ds-layout {
        margin-left: var(--sidebar-width);
        transition: margin-left 200ms ease;
    }

    /* ── Sidebar shell ── */

    .desktop-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        width: var(--sidebar-width);
        height: 100vh;
        background: var(--brand-primary-dark);
        color: white;
        z-index: 100;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
        transition: width 200ms ease;
    }

    .desktop-sidebar-top {
        padding: 1.5rem 1rem 1rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .desktop-sidebar-logo-link {
        display: block;
        cursor: pointer;
        transition: opacity 0.15s ease;
    }

    .desktop-sidebar-logo-link:hover {
        opacity: 0.85;
    }

    .desktop-sidebar-logo {
        max-width: 140px;
        max-height: 56px;
        width: auto;
        height: auto;
        display: block;
        margin-bottom: 0.75rem;
    }

    .desktop-sidebar-username {
        font-size: 0.75rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.6);
        line-height: 1.3;
        word-break: break-word;
    }

    .desktop-sidebar-nav {
        flex: 1;
        list-style: none;
        margin: 0;
        padding: 0.75rem 0;
        overflow-y: auto;
    }

    .desktop-sidebar-nav li {
        margin: 0;
    }

    .desktop-sidebar-nav a {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.7rem 1rem;
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
        font-size: 0.875rem;
        font-weight: 500;
        border-left: 3px solid transparent;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        cursor: pointer;
    }

    .desktop-sidebar-nav a:hover {
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.9);
    }

    .desktop-sidebar-nav a.active {
        background: rgba(255, 255, 255, 0.1);
        border-left-color: #5DCAA5;
        color: white;
    }

    .desktop-sidebar-nav svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    /* ── Section nav: chevron on flyout-trigger links ── */

    .desktop-sidebar-nav a.has-flyout {
        position: relative;
    }

    .desktop-sidebar-nav-label {
        flex: 1;
    }

    .flyout-chevron {
        margin-left: auto;
        font-size: 0.7rem;
        opacity: 0.5;
        transition: opacity 0.15s, transform 0.15s;
    }

    .desktop-sidebar-nav a.has-flyout:hover .flyout-chevron,
    .desktop-sidebar-nav a.has-flyout[aria-expanded="true"] .flyout-chevron {
        opacity: 1;
        transform: translateX(2px);
    }

    /* ── Flyout panel ── */
    /* Position: fixed so it escapes the sidebar's overflow-y context and
       can extend rightward. JS sets `top` from the trigger link's bounding
       rect (viewport-relative). z-index 95 sits above main content but
       below the sidebar (100) and DEV badge (110). */

    .sidebar-flyout {
        position: fixed;
        left: var(--sidebar-width);
        top: 0;
        min-width: 400px;
        max-width: 500px;
        background: var(--surface);
        color: var(--text-primary);
        border: 1px solid var(--border);
        border-left: none;
        border-radius: 0 8px 8px 0;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
        padding: 0.85rem 1rem 1rem;
        z-index: 95;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-4px);
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0.12s, left 200ms ease;
    }

    .sidebar-flyout.active {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        transition: opacity 0.12s ease, transform 0.12s ease, visibility 0s linear 0s;
    }

    .flyout-title {
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--section-fg, var(--primary-green));
        margin: 0 0 0.6rem 0;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--border);
    }

    .flyout-tiles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .flyout-tile {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.65rem;
        padding: 0.6rem 0.7rem;
        background: transparent;
        border: 1px solid transparent;
        border-radius: 6px;
        text-decoration: none;
        color: var(--text-primary);
        transition: background 0.12s, border-color 0.12s;
        cursor: pointer;
    }

    .flyout-tile:hover,
    .flyout-tile:focus-visible {
        background: var(--surface-hover);
        border-color: var(--border);
        outline: none;
    }

    /* Current-page tile gets a subtle highlight so the user can see
       where they are when the flyout is open on a tile page. */
    .flyout-tile.active {
        background: var(--surface-hover);
        border-color: var(--section-fg, var(--brand-primary));
    }

    .flyout-tile .tool-icon {
        width: 36px;
        height: 36px;
        margin: 0;
        flex-shrink: 0;
        background: var(--section-bg, var(--primary-green));
        color: var(--section-fg, white);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .flyout-tile .tool-icon svg {
        width: 20px;
        height: 20px;
    }

    .flyout-tile-text {
        flex: 1;
        min-width: 0;
    }

    .flyout-tile-title {
        font-size: 0.85rem;
        font-weight: 600;
        line-height: 1.2;
        margin-bottom: 0.15rem;
    }

    .flyout-tile-desc {
        font-size: 0.72rem;
        color: var(--text-secondary);
        line-height: 1.3;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    /* App-only tiles — hide their sidebar flyout entries on desktop.
       Same set hidden from the index dashboard via css/home.css. The
       pages still load if reached by direct URL. */
    .flyout-tile[href="shipment-photos.html"],
    .flyout-tile[href="my-deliveries.html"],
    .flyout-tile[href="transaction-viewer.html"] {
        display: none;
    }

    /* ── Section color cascade ──
       Unified selector — catches:
         - index dashboard sections (#section-items, ...)
         - cloned favorite tiles in index (.tool-tile[data-section="..."])
         - sidebar flyout panels on any page (.sidebar-flyout[data-section="..."])
         - flyout tiles on any page (.flyout-tile[data-section="..."])
       Defined once here so the dashboard, favorites, and sidebar flyouts
       all share the same palette. */

    #section-items,
    [data-section="section-items"] {
        --section-bg: #E6F1FB;
        --section-fg: #185FA5;
    }

    #section-orders,
    [data-section="section-orders"] {
        --section-bg: #E1F5EE;
        --section-fg: #0F6E56;
    }

    #section-customers,
    [data-section="section-customers"] {
        --section-bg: #EEEDFE;
        --section-fg: #534AB7;
    }

    #section-reports,
    [data-section="section-reports"] {
        --section-bg: #FAEEDA;
        --section-fg: #854F0B;
    }

    /* Explicit dark mode overrides */
    body.theme-dark #section-items,
    body.theme-dark [data-section="section-items"] {
        --section-bg: #0C447C;
        --section-fg: #85B7EB;
    }

    body.theme-dark #section-orders,
    body.theme-dark [data-section="section-orders"] {
        --section-bg: #085041;
        --section-fg: #5DCAA5;
    }

    body.theme-dark #section-customers,
    body.theme-dark [data-section="section-customers"] {
        --section-bg: #3C3489;
        --section-fg: #AFA9EC;
    }

    body.theme-dark #section-reports,
    body.theme-dark [data-section="section-reports"] {
        --section-bg: #633806;
        --section-fg: #FAC775;
    }

    /* ── Sidebar footer ── */

    /* DEV badge — small red pill sitting just above .desktop-sidebar-
       bottom's border-top, taking the same visual language as the
       shared.css body::before that this replaces at desktop. Centered
       cross-axis via align-self because the sidebar is a flex column;
       margin-bottom hugs it close to the footer separator. pointer-
       events: none mirrors body::before so the chip never blocks a
       click on the footer area underneath. */
    .desktop-sidebar-dev-badge {
        align-self: center;
        margin: 0 0 0.625rem 0;
        padding: 0.125rem 0.5rem;
        background: #dc2626;
        color: white;
        font-size: 0.625rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        border-radius: 0.25rem;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
        pointer-events: none;
    }

    .desktop-sidebar-bottom {
        padding: 0.85rem 1rem 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .desktop-sidebar-footer-section {
        margin-bottom: 0.85rem;
    }

    .desktop-sidebar-footer-section:last-child {
        margin-bottom: 0;
    }

    .desktop-sidebar-footer-label {
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: 0.35rem;
        text-align: center;
    }

    /* Theme picker — Auto / Light / Dark. Inherits .theme-btn so
       app.updateThemeButtons() can sync .active state across mobile
       menu and desktop sidebar. */
    .desktop-sidebar-theme-buttons {
        display: flex;
        gap: 2px;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 6px;
        padding: 3px;
    }

    .desktop-sidebar-theme-buttons button {
        flex: 1;
        /* Reset shared.css .theme-btn (designed for mobile menu) */
        min-width: 0;
        min-height: 0;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        font-size: 0.72rem;
        font-weight: 500;
        padding: 0.4rem 0.2rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
    }

    .desktop-sidebar-theme-buttons button:hover {
        color: white;
        background: rgba(255, 255, 255, 0.08);
    }

    .desktop-sidebar-theme-buttons button.active {
        background: rgba(255, 255, 255, 0.18);
        color: white;
    }

    /* Display-size picker — three A glyphs of increasing size. Same
       .display-size-btn class as the mobile menu so app.js syncs both. */
    .desktop-sidebar-size-buttons {
        display: flex;
        gap: 2px;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 6px;
        padding: 3px;
    }

    .desktop-sidebar-size-buttons .display-size-btn {
        flex: 1;
        /* Reset shared.css .display-size-btn (designed for mobile menu) */
        min-width: 0;
        min-height: 0;
        background: transparent;
        border: none;
        color: rgba(255, 255, 255, 0.6);
        padding: 0.35rem 0.2rem;
        border-radius: 4px;
        cursor: pointer;
        transition: background 0.15s, color 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .desktop-sidebar-size-buttons .display-size-btn:hover {
        color: white;
        background: rgba(255, 255, 255, 0.08);
    }

    .desktop-sidebar-size-buttons .display-size-btn.active {
        background: rgba(255, 255, 255, 0.18);
        color: white;
    }

    .desktop-sidebar-size-buttons .display-size-a {
        font-weight: 700;
        font-family: inherit;
    }

    .desktop-sidebar-size-buttons .display-size-a-sm { font-size: 0.7rem; }
    .desktop-sidebar-size-buttons .display-size-a-md { font-size: 0.85rem; }
    .desktop-sidebar-size-buttons .display-size-a-lg { font-size: 1rem; }

    /* Refresh Data button + cache timestamp readout */
    .desktop-sidebar-refresh-btn {
        width: 100%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.78rem;
        font-weight: 500;
        padding: 0.45rem 0.6rem;
        border-radius: 6px;
        cursor: pointer;
        text-align: left;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    .desktop-sidebar-refresh-btn:hover {
        background: rgba(255, 255, 255, 0.12);
        color: white;
        border-color: rgba(255, 255, 255, 0.2);
    }

    .desktop-sidebar-refresh-icon {
        font-size: 0.95rem;
        line-height: 1;
    }

    .desktop-sidebar-cache-ts {
        font-size: 0.65rem;
        color: rgba(255, 255, 255, 0.45);
        margin-top: 0.3rem;
        padding: 0 0.1rem;
        line-height: 1.3;
    }

    /* Support + About + Logout links */
    .desktop-sidebar-footer-links {
        display: flex;
        flex-direction: column;
        gap: 0.1rem;
        padding-top: 0.5rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .desktop-sidebar-link {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.45rem 0.55rem;
        font-size: 0.8rem;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.95);
        text-decoration: none;
        border-radius: 4px;
        transition: background 0.15s, color 0.15s;
        cursor: pointer;
    }

    .desktop-sidebar-link:hover {
        background: rgba(255, 255, 255, 0.06);
        color: white;
    }

    .desktop-sidebar-link-icon {
        font-size: 0.85rem;
        width: 1.1rem;
        text-align: center;
        opacity: 0.7;
    }

    .desktop-sidebar-logout {
        margin-top: 0.2rem;
    }

    .desktop-sidebar-logout:hover {
        color: #FCA5A5;
        background: rgba(220, 38, 38, 0.12);
    }

    /* ── Collapse toggle button ── */
    /* Direct child of .desktop-sidebar, positioned absolutely in the
       top corner. The sidebar's position:fixed serves as the containing
       block, so the toggle is anchored to a known location regardless
       of what happens to .desktop-sidebar-top's layout (logo+username
       hidden in collapsed state was zeroing out the toggle's footprint
       when it lived inside that flex column). The 1px border-bottom on
       .desktop-sidebar-top still serves as the visual divider between
       the toggle and the nav sections below. */
    .desktop-sidebar-toggle {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        padding: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.5);
        border: none;
        border-radius: 4px;
        font: inherit;
        line-height: 1;
        cursor: pointer;
        transition: color 150ms ease, background 150ms ease, left 200ms ease, right 200ms ease;
    }

    .desktop-sidebar-toggle:hover {
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.9);
    }

    .desktop-sidebar-toggle:focus-visible {
        outline: 2px solid #5DCAA5;
        outline-offset: 2px;
    }

    /* SVG chevron wrapper. line-height:0 collapses the inline-baseline
       gap browsers add around inline-block SVG; flex centers the icon
       inside the wrapper regardless of intrinsic line-height. */
    .desktop-sidebar-toggle-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 0;
    }

    .desktop-sidebar-toggle-arrow svg {
        display: block;
        transition: transform 200ms ease;
    }

    /* Collapsed state rotates the chevron 180° so it points right (»).
       Combined with the .sidebar-collapsed override below for layout,
       this is the entire visual swap — no JS textContent dance. */
    html.sidebar-collapsed .desktop-sidebar-toggle-arrow svg {
        transform: rotate(180deg);
    }

    /* ── Settings trigger (gear icon in footer) ── */
    /* Looks and behaves like a nav-section link but lives in the
       .desktop-sidebar-bottom and opens the .settings-flyout. The
       generic .has-flyout chevron rule below handles the chevron
       opacity/translate on hover and open state. */
    .desktop-sidebar-settings-trigger {
        position: relative;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.7rem 1rem;
        background: transparent;
        border: none;
        border-left: 3px solid transparent;
        color: rgba(255, 255, 255, 0.95);
        font: inherit;
        font-size: 0.875rem;
        font-weight: 500;
        text-align: left;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
    }

    .desktop-sidebar-settings-trigger:hover,
    .desktop-sidebar-settings-trigger[aria-expanded="true"] {
        background: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.9);
    }

    .desktop-sidebar-settings-trigger svg {
        width: 18px;
        height: 18px;
        flex-shrink: 0;
    }

    /* Generic chevron rotate — broadened from the previous nav-a-only
       selector so the settings trigger in the footer animates the same
       way as section nav links. */
    .has-flyout:hover .flyout-chevron,
    .has-flyout[aria-expanded="true"] .flyout-chevron {
        opacity: 1;
        transform: translateX(2px);
    }

    /* ── Settings flyout ── */
    /* Additional class on the .sidebar-flyout panel for the gear's
       flyout. Inherits positioning, background, border, shadow, and
       transitions from .sidebar-flyout. Narrower than tile flyouts
       since the controls are compact, and contains theme-aware
       overrides for the controls that were moved out of the dark
       sidebar footer onto a light surface bg. */
    .settings-flyout {
        min-width: 240px;
        max-width: 320px;
        padding: 0.85rem;
    }

    .settings-section + .settings-section,
    .settings-section + .settings-divider + .settings-section {
        /* spacing handled by .settings-divider; no margin-top needed */
    }

    .settings-section {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .settings-section + .settings-section {
        margin-top: 0.75rem;
    }

    .settings-label {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--text-secondary);
        margin: 0;
    }

    .settings-divider {
        height: 1px;
        background: var(--border);
        margin: 0.85rem -0.85rem;
    }

    /* Display size + theme button rows: override the dark-sidebar
       palette with light-surface equivalents. */
    .settings-flyout .desktop-sidebar-size-buttons,
    .settings-flyout .desktop-sidebar-theme-buttons {
        background: var(--background);
        border: 1px solid var(--border);
        gap: 0;
    }

    .settings-flyout .desktop-sidebar-size-buttons .display-size-btn,
    .settings-flyout .desktop-sidebar-theme-buttons button {
        color: var(--text-secondary);
    }

    .settings-flyout .desktop-sidebar-size-buttons .display-size-btn:hover,
    .settings-flyout .desktop-sidebar-theme-buttons button:hover {
        background: var(--surface-hover);
        color: var(--text-primary);
    }

    .settings-flyout .desktop-sidebar-size-buttons .display-size-btn.active,
    .settings-flyout .desktop-sidebar-theme-buttons button.active {
        background: var(--primary-green);
        color: white;
    }

    /* Refresh button + cache timestamp inside the flyout */
    .settings-flyout .desktop-sidebar-refresh-btn {
        background: var(--surface-hover);
        border: 1px solid var(--border);
        color: var(--text-primary);
        font-size: 0.85rem;
    }

    .settings-flyout .desktop-sidebar-refresh-btn:hover {
        background: var(--background);
        border-color: var(--primary-green);
        color: var(--text-primary);
    }

    .settings-flyout .desktop-sidebar-cache-ts {
        color: var(--text-secondary);
    }

    /* Tech Support + About links inside the flyout */
    .settings-flyout .desktop-sidebar-link {
        color: var(--text-primary);
    }

    .settings-flyout .desktop-sidebar-link:hover {
        background: var(--surface-hover);
        color: var(--text-primary);
    }

    .settings-flyout .desktop-sidebar-link-icon {
        opacity: 1;
        color: var(--text-secondary);
    }

    /* ── Collapsed state ── */
    /* Triggered by html.sidebar-collapsed class (set by desktop-sidebar.js
       both pre-paint from localStorage and in response to toggle clicks).
       The --sidebar-width custom property already shrinks the sidebar
       to 48px; the rules below clean up the inner content so only icons
       remain visible. Tooltips on hover (via title attribs in the JS)
       let the user identify each icon. */

    /* Hide the text/chevron decorations on every icon. Display/Theme/
       Refresh/Tech Support/About now live inside .settings-flyout
       (not directly in the sidebar) so they don't need collapsed-mode
       hide rules — the flyout shows them in their full layout when
       opened, regardless of sidebar collapsed state. */
    html.sidebar-collapsed .desktop-sidebar-nav-label,
    html.sidebar-collapsed .desktop-sidebar-username,
    html.sidebar-collapsed .desktop-sidebar-logo,
    html.sidebar-collapsed .flyout-chevron {
        display: none;
    }

    /* Collapsed toggle: shift from top-right to top-center of the 48px
       strip. (48 - 24) / 2 = 12px from the left edge. The transition on
       `left`/`right` in the base rule animates this smoothly alongside
       the sidebar's width transition. */
    html.sidebar-collapsed .desktop-sidebar-toggle {
        right: auto;
        left: 12px;
    }

    /* Top area becomes minimal — no logo or username, just enough
       room for the centered » chevron. */
    html.sidebar-collapsed .desktop-sidebar-top {
        padding: 0.5rem 0;
        min-height: 40px;
    }

    /* Nav links + settings trigger: center the icon, kill the gap. */
    html.sidebar-collapsed .desktop-sidebar-nav a,
    html.sidebar-collapsed .desktop-sidebar-settings-trigger {
        justify-content: center;
        padding: 0.7rem 0;
        gap: 0;
    }

    /* Logout link in the footer (direct child of .desktop-sidebar-bottom).
       Direct-child selector prevents this rule from leaking into
       .settings-flyout's Tech Support / About links, which should keep
       their full text when the flyout is open. */
    html.sidebar-collapsed .desktop-sidebar-bottom > .desktop-sidebar-link {
        justify-content: center;
        padding: 0.5rem 0;
        gap: 0;
        font-size: 0;
    }

    html.sidebar-collapsed .desktop-sidebar-bottom > .desktop-sidebar-link .desktop-sidebar-link-icon {
        font-size: 1rem;
    }
}

/* Auto-mode dark section colors (no explicit theme class, system prefers dark) */
@media (min-width: 1024px) and (prefers-color-scheme: dark) {
    body:not(.theme-light) #section-items,
    body:not(.theme-light) [data-section="section-items"] {
        --section-bg: #0C447C;
        --section-fg: #85B7EB;
    }

    body:not(.theme-light) #section-orders,
    body:not(.theme-light) [data-section="section-orders"] {
        --section-bg: #085041;
        --section-fg: #5DCAA5;
    }

    body:not(.theme-light) #section-customers,
    body:not(.theme-light) [data-section="section-customers"] {
        --section-bg: #3C3489;
        --section-fg: #AFA9EC;
    }

    body:not(.theme-light) #section-reports,
    body:not(.theme-light) [data-section="section-reports"] {
        --section-bg: #633806;
        --section-fg: #FAC775;
    }
}