/* UX-DS-07 pilot (2026-07-27) — Sidebar Collapse
 * ----------------------------------------------------------------------------
 * Provides a "mini mode" (72px) for the main navigation sidebar so users can
 * reclaim horizontal space on the workspace. State is toggled via the button
 * added at the bottom of NavMenu.razor; persistence + body-class toggle live
 * in wwwroot/js/nav-collapse.js.
 *
 * Rules use `body.nav-collapsed <selector>` which gives higher specificity
 * (0,2,1) than the Blazor-scoped `.sidebar[b-xyz]` (0,2,0) — no !important
 * needed to win the cascade.
 *
 * Only activates at min-width: 641px because below that the sidebar already
 * uses Bootstrap's mobile off-canvas collapse (`navbar-toggler`).
 * ---------------------------------------------------------------------------- */

@media (min-width: 641px) {
    /* ---------- Sidebar container shrinks ---------- */
    body.nav-collapsed .sidebar {
        width: 72px;
    }

    /* ---------- Main content reclaims the freed space ---------- */
    body.nav-collapsed main {
        margin-left: 72px;
    }

    /* ---------- Brand slot shrinks ---------- */
    body.nav-collapsed .sidebar .top-row {
        min-height: 60px;
    }

    body.nav-collapsed .sidebar .navbar-brand-logo {
        object-fit: contain;
        height: 44px;
        padding: 8px;
    }

    /* ---------- Hide text nodes across nav items ----------
     * font-size: 0 collapses whitespace between icon + text; color:transparent
     * hides the text characters themselves. SVG icons rendered by FluentIcon
     * carry their own width/height attributes so they stay visible.
     * (Screen readers still read the collapsed labels — accessibility intact.) */
    body.nav-collapsed .sidebar .nav-link,
    body.nav-collapsed .sidebar .nav-section-title,
    body.nav-collapsed .sidebar .nav-subsection-header {
        font-size: 0;
        color: transparent;
        justify-content: center;
        gap: 0;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reset for icon glyphs. FluentIcon renders SVG with width/height set
       in attributes, so no font-size reset needed for the icon itself. But
       we do restore color for the FluentIcon currentColor mode. */
    body.nav-collapsed .sidebar .nav-link svg,
    body.nav-collapsed .sidebar .nav-section-title svg,
    body.nav-collapsed .sidebar .nav-subsection-header svg {
        color: #d7d7d7;
    }

    /* Chevrons + secondary decorative icons inside section titles hide when
       collapsed — only the module icon stays visible.
       Sequence in razor: <AppIcon Name="chevron-*"/> <AppIcon Name="module"/> <span>Label</span>
       With mtmp360:* pack icons, the module icon is <img>, so `svg:first-of-type`
       reliably picks the chevron (the only svg) — hide it. */
    body.nav-collapsed .sidebar .nav-section-title-clickable svg,
    body.nav-collapsed .sidebar .nav-subsection-header svg {
        display: none;
    }

    /* Module icons carry Bootstrap `ms-1` (margin-left) so they sit right of
       the chevron in expanded mode. When collapsed the chevron is gone and
       we want the module icon flush-centered — kill the margin. Applies to
       both mtmp360 <img> icons and any residual FluentIcon fallbacks. */
    body.nav-collapsed .sidebar .nav-section-title-clickable .app-icon-mtmp360,
    body.nav-collapsed .sidebar .nav-subsection-header .app-icon-mtmp360,
    body.nav-collapsed .sidebar .nav-section-title-clickable svg.ms-1,
    body.nav-collapsed .sidebar .nav-subsection-header svg.ms-1 {
        margin-left: 0 !important;
    }

    /* ---------- Hide subsection items when collapsed ----------
     * User expands the sidebar first, then navigates to sub-items. */
    body.nav-collapsed .sidebar .nav-subsection-items,
    body.nav-collapsed .sidebar .nav-item.px-3.ps-4,
    body.nav-collapsed .sidebar .nav-item.px-3.ps-5,
    body.nav-collapsed .sidebar .nav-features {
        display: none;
    }

    /* Section-title-clickable containers stay visible as icon-only click
       targets. nav-collapse.js intercepts clicks on them when collapsed to
       auto-expand the sidebar first. */
    body.nav-collapsed .sidebar .nav-section-title-clickable {
        cursor: pointer;
    }

    /* ---------- POC Status footer hides in collapsed mode ---------- */
    body.nav-collapsed .sidebar .nav-features,
    body.nav-collapsed .sidebar hr + .nav-item .nav-features {
        display: none;
    }

    /* ---------- Collapse toggle button ---------- */
    .nav-collapse-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: calc(100% - 24px);
        margin: 12px 12px 16px;
        padding: 8px 12px;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 6px;
        color: #d7d7d7;
        font-size: 0.75rem;
        font-weight: 500;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 200ms ease;
        min-height: 40px;
    }

    .nav-collapse-toggle:hover,
    .nav-collapse-toggle:focus-visible {
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        outline: none;
    }

    /* When collapsed the toggle becomes a centered icon-only button. */
    body.nav-collapsed .sidebar .nav-collapse-toggle {
        width: 40px;
        margin: 12px auto 16px;
        padding: 8px 0;
        font-size: 0;
        color: transparent;
    }

    body.nav-collapsed .sidebar .nav-collapse-toggle svg {
        color: #d7d7d7;
    }

    /* mtmp360 pack icon (rendered as <img>) — flip horizontally when the
       sidebar is collapsed so the same collapse chevron indicates "expand". */
    body.nav-collapsed .sidebar .nav-collapse-toggle img.app-icon-mtmp360 {
        transform: scaleX(-1);
    }

    /* Smooth width transitions when toggling. */
    .sidebar,
    main {
        transition: width 220ms ease, margin-left 220ms ease;
    }
}

/* ---------- Reduced motion — cut the transitions ---------- */
@media (prefers-reduced-motion: reduce) {
    .sidebar,
    main {
        transition: none;
    }
}