/* T24 — Navigation Shell (UX §3, DesignSystem §3.1-3.3). Player-facing chrome only: the persistent
   status bar, the collapsible sidebar, the Wire drawer, and the responsive breakpoints UX §3.5 names.
   Admin's own shell (admin.css) is a deliberately separate, staff-only surface — see that file's own
   comment for why it shares none of this. */

.sd-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.sd-shell__loading,
.sd-shell__onboarding-placeholder {
    padding: var(--sd-space-6);
    color: var(--sd-text-secondary);
}

.sd-shell__body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.sd-shell__content {
    flex: 1;
    max-width: 1600px;
    margin: 0 auto;
    padding: var(--sd-space-6);
    width: 100%;
}

/* ---- Status bar (UX §3.2) — 56px fixed, never scrolls away 🔒 ---- */

.sd-statusbar {
    height: 56px;
    flex: 0 0 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sd-space-4);
    padding: 0 var(--sd-space-5);
    background: var(--sd-surface-1);
    border-bottom: 1px solid var(--sd-border-subtle);
    position: sticky;
    top: 0;
    z-index: 10;
}

.sd-statusbar__slots {
    display: flex;
    align-items: center;
    gap: var(--sd-space-5);
    overflow-x: auto;
}

.sd-statusbar__slot {
    position: relative;
}

.sd-statusbar__slot > summary {
    list-style: none;
    cursor: pointer;
}

.sd-statusbar__slot > summary::-webkit-details-marker {
    display: none;
}

.sd-statusbar__value {
    display: flex;
    align-items: center;
    gap: var(--sd-space-1);
    font-family: var(--sd-font-data);
    font-variant-numeric: var(--sd-numeric);
    font-size: var(--sd-text-sm);
    color: var(--sd-text-primary);
    white-space: nowrap;
    padding: var(--sd-space-1) var(--sd-space-2);
    border-radius: var(--sd-radius-sm);
}

.sd-statusbar__slot:hover > .sd-statusbar__value,
.sd-statusbar__slot:focus-within > .sd-statusbar__value {
    background: var(--sd-surface-3);
}

.sd-statusbar__value--clean { color: var(--sd-clean); }
.sd-statusbar__value--dirty { color: var(--sd-dirty); }
.sd-statusbar__value--energy { color: var(--sd-energy); }
.sd-statusbar__value--reputation { color: var(--sd-reputation); }

.sd-statusbar__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--sd-radius-full);
    background: currentColor;
}

.sd-statusbar__tier {
    font-size: var(--sd-text-xs);
    color: var(--sd-text-secondary);
}

.sd-statusbar__popover {
    display: none;
    position: absolute;
    top: calc(100% + var(--sd-space-2));
    left: 0;
    min-width: 200px;
    background: var(--sd-surface-2);
    border: 1px solid var(--sd-border-default);
    border-radius: var(--sd-radius-md);
    box-shadow: var(--sd-shadow-overlay);
    padding: var(--sd-space-3);
    font-size: var(--sd-text-xs);
    color: var(--sd-text-secondary);
    z-index: 20;
}

.sd-statusbar__slot[open] > .sd-statusbar__popover {
    display: block;
}

.sd-statusbar__heat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-1);
}

.sd-statusbar__heat-list li {
    display: flex;
    justify-content: space-between;
    gap: var(--sd-space-3);
}

/* Heat tier colouring — DesignSystem §1.2's heat scale. 🔒 Tier is always named in text too (above), never colour-only. */
.sd-statusbar__slot--heat-flagged .sd-statusbar__value--heat { color: var(--sd-heat-flagged); }
.sd-statusbar__slot--heat-investigated .sd-statusbar__value--heat { color: var(--sd-heat-investigated); }
.sd-statusbar__slot--heat-target .sd-statusbar__value--heat { color: var(--sd-heat-target); }
.sd-statusbar__slot--heat-target::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 6px;
    height: 6px;
    border-radius: var(--sd-radius-full);
    background: var(--sd-heat-target);
}

.sd-pulse {
    animation: sd-pulse var(--sd-dur-slow) var(--sd-ease);
}

@keyframes sd-pulse {
    0% { transform: scale(1); }
    40% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .sd-pulse {
        animation: none;
    }
}

.sd-meter {
    display: inline-block;
    width: 48px;
    height: 4px;
    border-radius: var(--sd-radius-full);
    background: var(--sd-surface-3);
    overflow: hidden;
}

.sd-meter__fill {
    display: block;
    height: 100%;
    background: var(--sd-energy);
}

.sd-countdown {
    font-family: var(--sd-font-data);
    font-variant-numeric: var(--sd-numeric);
}

.sd-countdown--ready {
    color: var(--sd-success);
}

.sd-statusbar__wire-toggle {
    position: relative;
    background: none;
    border: 1px solid var(--sd-border-default);
    border-radius: var(--sd-radius-sm);
    color: var(--sd-text-primary);
    font-family: var(--sd-font-ui);
    font-size: var(--sd-text-sm);
    padding: var(--sd-space-1) var(--sd-space-3);
    cursor: pointer;
    min-height: 32px;
}

.sd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin-left: var(--sd-space-1);
    border-radius: var(--sd-radius-full);
    background: var(--sd-danger);
    color: var(--sd-text-inverse);
    font-size: var(--sd-text-xs);
    font-family: var(--sd-font-data);
}

.sd-badge--muted {
    background: var(--sd-surface-3);
    color: var(--sd-text-secondary);
}

/* ---- Sidebar (UX §3.1) — 240px fixed, collapsible to a 64px icon rail ---- */

.sd-sidebar {
    flex: 0 0 240px;
    background: var(--sd-surface-1);
    border-right: 1px solid var(--sd-border-subtle);
    display: flex;
    flex-direction: column;
    transition: flex-basis var(--sd-dur-normal) var(--sd-ease);
}

.sd-sidebar--collapsed {
    flex-basis: 64px;
}

.sd-sidebar__brand {
    display: flex;
    justify-content: center;
    padding: var(--sd-space-4) var(--sd-space-3) var(--sd-space-2);
}

.sd-sidebar--collapsed .sd-sidebar__brand {
    padding-left: var(--sd-space-2);
    padding-right: var(--sd-space-2);
}

.sd-sidebar--collapsed .sd-sidebar__label {
    display: none;
}

.sd-sidebar__collapse-toggle {
    align-self: flex-end;
    background: none;
    border: none;
    color: var(--sd-text-secondary);
    cursor: pointer;
    padding: var(--sd-space-3);
    font-size: var(--sd-text-sm);
    min-width: 44px;
    min-height: 44px;
}

.sd-sidebar__items {
    list-style: none;
    margin: 0;
    padding: 0 var(--sd-space-2);
    display: flex;
    flex-direction: column;
    gap: var(--sd-space-1);
}

.sd-sidebar__item {
    display: block;
    position: relative;
    padding: var(--sd-space-3) var(--sd-space-3);
    border-radius: var(--sd-radius-sm);
    color: var(--sd-text-secondary);
    text-decoration: none;
    font-size: var(--sd-text-sm);
    min-height: 44px;
    white-space: nowrap;
    overflow: hidden;
}

/* Break-In arc coachmark (Tutorial-System-Proposal.md §4): one contextual highlight, never a persistent
   tour — CoachmarkState is the one place that decides which item (if any) qualifies. The dot pairs with
   the box-shadow ring so the highlight is never colour-only (DesignSystem §1.2 🔒), same invariant the
   heat/market tokens already carry. */
.sd-sidebar__item--highlight-pulse,
.sd-sidebar__item--highlight-static {
    box-shadow: 0 0 0 1px var(--sd-accent);
    color: var(--sd-accent);
}

.sd-sidebar__item--highlight-pulse {
    animation: sd-sidebar-coachmark-pulse 1.8s var(--sd-ease) infinite;
}

@keyframes sd-sidebar-coachmark-pulse {
    0%, 100% { box-shadow: 0 0 0 1px var(--sd-accent); }
    50% { box-shadow: 0 0 0 4px var(--sd-accent-muted); }
}

.sd-sidebar__coachmark-dot {
    position: absolute;
    top: var(--sd-space-2);
    right: var(--sd-space-2);
    width: 6px;
    height: 6px;
    border-radius: var(--sd-radius-full);
    background: var(--sd-accent);
}

.sd-sidebar__item:hover {
    background: var(--sd-surface-2);
    color: var(--sd-text-primary);
}

.sd-sidebar__item.active {
    background: var(--sd-accent-muted);
    color: var(--sd-accent);
}

/* ---- Wire drawer (UX §3.3) — right-side, toggled from the status bar ---- */

.sd-wire-drawer {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 380px;
    max-width: 100vw;
    background: var(--sd-surface-1);
    border-left: 1px solid var(--sd-border-default);
    box-shadow: var(--sd-shadow-overlay);
    display: flex;
    flex-direction: column;
    z-index: 30;
}

.sd-wire-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sd-space-4);
    border-bottom: 1px solid var(--sd-border-subtle);
}

.sd-wire-drawer__title {
    font-size: var(--sd-text-lg);
    margin: 0;
}

.sd-wire-drawer__close {
    background: none;
    border: none;
    color: var(--sd-text-secondary);
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
    font-size: var(--sd-text-md);
}

.sd-wire-drawer__filters {
    display: flex;
    gap: var(--sd-space-2);
    padding: var(--sd-space-3) var(--sd-space-4);
    overflow-x: auto;
}

.sd-chip {
    background: var(--sd-surface-2);
    border: 1px solid var(--sd-border-default);
    border-radius: var(--sd-radius-full);
    color: var(--sd-text-secondary);
    font-size: var(--sd-text-xs);
    padding: var(--sd-space-1) var(--sd-space-3);
    cursor: pointer;
    white-space: nowrap;
}

.sd-chip--active {
    background: var(--sd-accent-muted);
    color: var(--sd-accent);
    border-color: var(--sd-accent);
}

.sd-wire-drawer__state {
    padding: var(--sd-space-5);
    color: var(--sd-text-tertiary);
    text-align: center;
}

.sd-wire-drawer__entries {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1;
}

.sd-wire-entry {
    padding: var(--sd-space-3) var(--sd-space-4);
    border-bottom: 1px solid var(--sd-border-subtle);
    cursor: pointer;
}

.sd-wire-entry:hover {
    background: var(--sd-surface-2);
}

.sd-wire-entry--unread {
    border-left: 3px solid var(--sd-accent);
}

.sd-wire-entry__body {
    display: flex;
    align-items: flex-start;
    gap: var(--sd-space-2);
}

.sd-wire-entry__text {
    flex: 1;
    min-width: 0;
}

.sd-wire-entry__title {
    font-size: var(--sd-text-sm);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.sd-wire-entry__detail {
    font-size: var(--sd-text-sm);
    color: var(--sd-text-secondary);
    margin-top: var(--sd-space-1);
}

.sd-wire-entry__meta {
    font-size: var(--sd-text-xs);
    color: var(--sd-text-tertiary);
    margin-top: var(--sd-space-1);
}

/* ---- Responsive behaviour (UX §3.5) ---- */

@media (max-width: 1279px) {
    .sd-sidebar:not(.sd-sidebar--collapsed) {
        flex-basis: 64px;
    }

    .sd-sidebar:not(.sd-sidebar--collapsed) .sd-sidebar__label {
        display: none;
    }
}

@media (max-width: 1023px) {
    .sd-shell__body {
        flex-direction: column;
    }

    .sd-sidebar {
        position: fixed;
        left: 0;
        top: 56px;
        bottom: 0;
        z-index: 25;
        flex-basis: 240px;
    }

    .sd-sidebar .sd-sidebar__label {
        display: inline;
    }
}

@media (max-width: 767px) {
    /* UX §3.5: "<768px ... status bar compresses to Clean / Energy / Heat with a tap-to-expand sheet
       for the rest." The "more" toggle expands the hidden slots inline (StatusBar.razor's
       _mobileExpanded) rather than a separate sheet component — same information, less surface. */
    .sd-statusbar__slot:not(.sd-statusbar__slot--mobile-visible) {
        display: none;
    }

    .sd-shell.sd-shell--mobile-expanded .sd-statusbar__slot:not(.sd-statusbar__slot--mobile-visible) {
        display: block;
    }

    .sd-statusbar__more-toggle {
        display: inline-flex;
    }

    /* UX §3.5: "<768px: Bottom tab bar (Dashboard, Missions, Companies, Wire, More)" replaces the sidebar entirely. */
    .sd-sidebar {
        display: none;
    }

    .sd-shell__content {
        padding-bottom: calc(56px + var(--sd-space-6));
    }

    .sd-bottom-tabs {
        display: flex;
    }

    .sd-wire-drawer {
        width: 100vw;
        top: 0;
    }
}

.sd-statusbar__more-toggle {
    display: none;
    background: none;
    border: 1px solid var(--sd-border-default);
    border-radius: var(--sd-radius-sm);
    color: var(--sd-text-secondary);
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sd-bottom-tabs {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: var(--sd-surface-1);
    border-top: 1px solid var(--sd-border-subtle);
    z-index: 15;
}

.sd-bottom-tabs__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sd-text-secondary);
    text-decoration: none;
    font-size: var(--sd-text-xs);
    min-height: 44px;
}

.sd-bottom-tabs__item.active {
    color: var(--sd-accent);
}