/* =====================================================================
   D1 + D2/D3 — DESKTOP DASHBOARD NAVIGATION
   ---------------------------------------------------------------------
   Two responsibilities, in this order:

   1. The panel itself: a premium rail that never moves, clones or reorders
      a dashboard node and never writes style.order.
   2. Six-section isolation: one display override, applied only to the
      twenty section roots the selected group does not own. See the block
      after the dashboard offset for the specificity argument.

   Every rule lives inside the >=768px query, so the existing mobile tab
   strip keeps full ownership of navigation below that width. No
   !important is used anywhere.
   ===================================================================== */

/* The panel is built the first time the viewport reaches 768px, so it can
   still exist after the window is narrowed again. This keeps it out of the
   way below that width, where the mobile tab strip owns navigation.
   This is the only rule outside a media query. */
#desktop-dashboard-nav {
    display: none;
}

@media (min-width: 768px) {

    /* Rail width is published on <html> so the panel and the dashboard
       offset below can never disagree, and so the state is observable
       without reading the panel itself. */
    html[data-desktop-nav-state="expanded"] {
        --desktop-dashboard-nav-rail: 240px;
    }

    html[data-desktop-nav-state="collapsed"] {
        --desktop-dashboard-nav-rail: 68px;
    }

    /* Dashboard offset.
       #data-wrapper is the dashboard column (a flex column, no width class)
       inside the centred max-w-5xl #home-main. The panel is 24px from the
       viewport edge, so the space it genuinely needs is
       "rail + 32px" minus whatever page gutter the centred column already
       has at this viewport width. On wide screens the gutter alone clears
       the panel and the dashboard keeps its full width; only when the
       viewport runs out of room does the column give up width. Everything
       is capped at 0px, so no negative margin is ever produced.
       This is the only rule in this file that touches an existing node, and
       it changes layout only: no attribute, class, order or child changes. */
    html[data-desktop-nav-state] body.profile-loaded #data-wrapper {
        margin-left: max(0px, calc(var(--desktop-dashboard-nav-rail, 0px) + 32px - max(0px, (100vw - 1024px) / 2)));
        transition: margin-left 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* -------------------------------------------------------------
       SIX-SECTION ISOLATION (D2/D3)
       The controller marks every root the selected group does not own
       with .desktop-dashboard-section-inactive, and only after it has
       validated all twenty roots. This is the only rule that hides
       dashboard content.

       No !important is needed: the selector is one id plus one
       attribute plus one class (1,2,0), which outranks every Tailwind
       display utility these roots carry (0,1,0) and every id-level
       rule in styles.css (1,0,0). No renderer on this project writes
       inline display on a section root, and a test pins that so a
       future one fails loudly instead of silently leaking a section.
       ------------------------------------------------------------- */
    #data-wrapper[data-desktop-sections-ready="true"] {
        --desktop-dashboard-sections-enabled: 1;
    }

    #data-wrapper[data-desktop-sections-ready="true"] .desktop-dashboard-section-inactive {
        display: none;
    }

    /* An emptied wrapper collapses to zero height but keeps its own
       Tailwind margin, and every wrapper sits inside a column-flex
       parent where margins never collapse. #dw-progression,
       #dw-evolution, #dw-timelapse, #dw-role, #dw-bleed, #dw-udc,
       #dw-trades, #dw-comp, #dw-matrix, #dw-entry and the Profile grid
       in #dw-header would otherwise leave 16-32px each of dead space
       above the selected section.

       Only a wrapper holding a direct inactive child matches, so the
       instant its own group is selected it stops matching and keeps
       its spacing. #data-wrapper is excluded: it is the column that
       carries the persistent context, not a section wrapper, and its
       own margins are not this layer's business. */
    #data-wrapper[data-desktop-sections-ready="true"]
    div:not(#data-wrapper):has(> .desktop-dashboard-section-inactive) {
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Retained shared wrappers keep their ordering and their content,
       but their content-visibility placeholders would reserve 450-800px
       for children that are now display:none. Only the placeholder is
       disabled: nothing is hidden, resized, reordered or moved, and
       #dw-eco still carries the permanent #dw-footer. */
    #data-wrapper[data-desktop-sections-ready="true"] #dw-matrix,
    #data-wrapper[data-desktop-sections-ready="true"] #dw-eco,
    #data-wrapper[data-desktop-sections-ready="true"] #dw-udc,
    #data-wrapper[data-desktop-sections-ready="true"] #dw-trades,
    #data-wrapper[data-desktop-sections-ready="true"] #dw-comp {
        content-visibility: visible;
        contain-intrinsic-size: none;
    }

    /* -------------------------------------------------------------
       Panel shell — glass card matching .hud-container's language:
       midnight glass, blur, hairline green border, deep drop shadow.
       ------------------------------------------------------------- */
    #desktop-dashboard-nav {
        --desktop-dashboard-nav-enabled: 1;

        box-sizing: border-box;
        position: fixed;
        left: 24px;
        top: 50%;
        z-index: 40;
        flex-direction: column;
        width: var(--desktop-dashboard-nav-rail, 240px);
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(47, 244, 114, 0.16);
        border-radius: 18px;
        background: linear-gradient(165deg, rgba(12, 26, 33, 0.94) 0%, rgba(6, 14, 20, 0.97) 62%);
        box-shadow:
            0 24px 60px rgba(0, 0, 0, 0.55),
            0 0 0 1px rgba(0, 0, 0, 0.35),
            inset 0 1px 0 rgba(255, 255, 255, 0.04);
        -webkit-backdrop-filter: blur(18px) saturate(120%);
        backdrop-filter: blur(18px) saturate(120%);
        color: #d9e3e8;
        font-family: 'Geist', sans-serif;
        transform: translateY(-50%);
        transition:
            width 0.18s cubic-bezier(0.4, 0, 0.2, 1),
            padding 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Single decorative accent on the panel edge: a green hairline that
       echoes the 1px HUD borders used across the dashboard. */
    #desktop-dashboard-nav::before {
        content: '';
        position: absolute;
        top: -1px;
        left: 18%;
        right: 18%;
        height: 1px;
        background: linear-gradient(to right, transparent, rgba(47, 244, 114, 0.75), transparent);
    }

    /* The rail only exists on dashboard views. body.profile-loaded is the
       existing view switch (executeSecureSearch adds it, executeLogout and
       the player-not-found panel remove it), so no script drives this. */
    body.profile-loaded #desktop-dashboard-nav {
        display: flex;
    }

    /* -------------------------------------------------------------
       Header mark — the cyan/green diamond used elsewhere as a
       section marker, plus a 9px tracking label.
       ------------------------------------------------------------- */
    #desktop-dashboard-nav .ddn-head {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 24px;
        margin-bottom: 10px;
        padding: 0 4px;
    }

    #desktop-dashboard-nav .ddn-mark {
        flex: 0 0 7px;
        width: 7px;
        height: 7px;
        border: 1px solid #2ff472;
        background: rgba(47, 244, 114, 0.18);
        box-shadow: 0 0 8px rgba(47, 244, 114, 0.55);
        transform: rotate(45deg);
    }

    #desktop-dashboard-nav .ddn-head-label {
        overflow: hidden;
        max-width: 150px;
        opacity: 1;
        color: rgba(255, 255, 255, 0.42);
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        white-space: nowrap;
        transition: max-width 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s ease;
    }

    /* -------------------------------------------------------------
       Section list
       ------------------------------------------------------------- */
    #desktop-dashboard-nav .ddn-list {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    #desktop-dashboard-nav .ddn-item {
        margin: 0;
        padding: 0;
    }

    #desktop-dashboard-nav .ddn-btn {
        box-sizing: border-box;
        position: relative;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 42px;
        padding: 9px 10px;
        border: 1px solid transparent;
        border-radius: 10px;
        background: transparent;
        color: rgba(217, 227, 232, 0.72);
        font-family: inherit;
        font-size: 12.5px;
        font-weight: 600;
        letter-spacing: 0.015em;
        line-height: 1.25;
        text-align: left;
        white-space: nowrap;
        cursor: pointer;
        transition:
            background-color 0.16s ease,
            border-color 0.16s ease,
            color 0.16s ease,
            padding 0.18s cubic-bezier(0.4, 0, 0.2, 1),
            gap 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #desktop-dashboard-nav .ddn-btn:hover {
        color: #eef5f8;
        border-color: rgba(255, 255, 255, 0.08);
        background-color: rgba(255, 255, 255, 0.045);
    }

    /* Cyan focus ring, matching the focus treatment used on the dashboard's
       own controls. Visible only for keyboard users. */
    #desktop-dashboard-nav .ddn-btn:focus-visible,
    #desktop-dashboard-nav .ddn-toggle:focus-visible {
        outline: 2px solid rgba(0, 242, 255, 0.85);
        outline-offset: 2px;
    }

    /* Active section: a 2px green spine plus a very low-opacity wash. The
       item stays readable at a glance without competing with the content. */
    #desktop-dashboard-nav .ddn-btn[aria-current="true"] {
        color: #2ff472;
        border-color: rgba(47, 244, 114, 0.32);
        background-color: rgba(47, 244, 114, 0.1);
    }

    #desktop-dashboard-nav .ddn-btn[aria-current="true"]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 2px;
        height: 18px;
        margin-top: -9px;
        border-radius: 2px;
        background: #2ff472;
        box-shadow: 0 0 10px rgba(47, 244, 114, 0.85);
    }

    /* -------------------------------------------------------------
       Icons and labels
       ------------------------------------------------------------- */
    #desktop-dashboard-nav .ddn-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        color: inherit;
    }

    #desktop-dashboard-nav .ddn-icon svg {
        display: block;
        width: 20px;
        height: 20px;
    }

    /* The label is clipped by its own box instead of by the panel, so the
       collapsed tooltip below can still escape the rail. */
    #desktop-dashboard-nav .ddn-label {
        overflow: hidden;
        max-width: 156px;
        opacity: 1;
        transition: max-width 0.18s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.12s ease;
    }

    /* -------------------------------------------------------------
       Collapsed state — icons only, centred, still intentional.
       ------------------------------------------------------------- */
    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-label,
    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-head-label {
        max-width: 0;
        opacity: 0;
    }

    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-head {
        justify-content: center;
    }

    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-btn {
        gap: 0;
        padding-right: 0;
        padding-left: 0;
        justify-content: center;
    }

    /* -------------------------------------------------------------
       Collapsed tooltip — the accessible name already lives on the
       button, so this is decoration for pointer and keyboard users.
       ------------------------------------------------------------- */
    #desktop-dashboard-nav .ddn-btn::after {
        content: attr(data-label);
        position: absolute;
        top: 50%;
        left: calc(100% + 12px);
        z-index: 2;
        padding: 6px 10px;
        border: 1px solid rgba(47, 244, 114, 0.3);
        border-radius: 8px;
        background: rgba(6, 14, 20, 0.97);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.55);
        color: #d9e3e8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%) translateX(-4px);
        transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0.14s;
    }

    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-btn:hover::after,
    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-btn:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%) translateX(0);
        transition: opacity 0.14s ease, transform 0.14s ease, visibility 0s linear 0s;
    }

    /* -------------------------------------------------------------
       Collapse control
       ------------------------------------------------------------- */
    #desktop-dashboard-nav .ddn-sep {
        height: 1px;
        margin: 10px 2px;
        background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.1), transparent);
    }

    #desktop-dashboard-nav .ddn-toggle {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 38px;
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        background: rgba(255, 255, 255, 0.02);
        color: rgba(217, 227, 232, 0.6);
        font-family: inherit;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.14em;
        line-height: 1.25;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
        cursor: pointer;
        transition:
            background-color 0.16s ease,
            border-color 0.16s ease,
            color 0.16s ease,
            padding 0.18s cubic-bezier(0.4, 0, 0.2, 1),
            gap 0.18s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #desktop-dashboard-nav .ddn-toggle:hover {
        color: #eef5f8;
        border-color: rgba(47, 244, 114, 0.3);
        background-color: rgba(255, 255, 255, 0.06);
    }

    #desktop-dashboard-nav .ddn-chevron {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }

    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-chevron {
        transform: rotate(180deg);
    }

    html[data-desktop-nav-state="collapsed"] #desktop-dashboard-nav .ddn-toggle {
        gap: 0;
        padding-right: 0;
        padding-left: 0;
        justify-content: center;
    }
}

/* Motion is decoration only here, so removing it costs nothing. */
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    #desktop-dashboard-nav,
    #desktop-dashboard-nav .ddn-btn,
    #desktop-dashboard-nav .ddn-btn::after,
    #desktop-dashboard-nav .ddn-toggle,
    #desktop-dashboard-nav .ddn-label,
    #desktop-dashboard-nav .ddn-head-label,
    #desktop-dashboard-nav .ddn-chevron,
    html[data-desktop-nav-state] body.profile-loaded #data-wrapper {
        transition: none;
    }
}