/* ==========================================================================
   CENSUS SIDEBAR - PRECISION TERMINAL THEME
   Collapsible patient list with terminal aesthetics

   ARCHITECTURE: Matches note-rail design system for visual consistency
   WHY: Collapsed sidebar saves space when viewing patient chart
   TRADEOFF: Additional complexity for collapse state vs always-visible list

   INFLUENCES (from NOTE_RAIL_DESIGN_SYSTEM.md):
   - Terminal/CLI: Window chrome, monospace, sharp corners
   - Art Deco: Corner embellishments, theatrical hovers, geometric precision
   - Bitcoin DeFi: Colored glows, bottom-border inputs, layered depth
   ========================================================================== */

/* ==========================================================================
   SECTION 1: DESIGN TOKENS (scoped to terminal theme)
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] {
    /* ─────────────────────────────────────────────────────────────────────
       DIMENSIONS
       FIX (2026-07-10): expanded width tracks --sol-sidebar-width instead of
       a hardcoded 360px. sol-layout.css shrinks the layout grid column to
       280px at ≤1400px viewports; the hardcoded width overflowed the column
       and the right ~80px of the sidebar (Add button, filter pills) was
       clipped under the detail panel on laptop screens.
       ───────────────────────────────────────────────────────────────────── */
    --sidebar-width-collapsed: 64px;
    --sidebar-width-expanded: var(--sol-sidebar-width, 360px);
    /* QoL (2026-07-12): 300ms standard-ease → 360ms ease-out-quart. The old
       curve front-loaded almost no deceleration, so the collapse read as a
       snap. Longer tail = the strip settles instead of vanishing.
       If this duration changes, update TRANSITION_LOCK_MS in census/index.js. */
    --sidebar-transition: 360ms cubic-bezier(0.25, 1, 0.5, 1);
}


/* ==========================================================================
   SECTION 2: SIDEBAR CONTAINER
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] {
    background: var(--term-bg-void);
    border-right: 1px solid var(--term-border-default);
    font-family: var(--term-font-mono);
    width: var(--sidebar-width-expanded);
    min-width: var(--sidebar-width-expanded);
    max-width: var(--sidebar-width-expanded);
    flex-shrink: 0;
    transition: width var(--sidebar-transition),
                min-width var(--sidebar-transition),
                max-width var(--sidebar-transition),
                border-color 300ms ease,
                box-shadow 300ms ease;
    will-change: width, box-shadow;
    overflow: hidden;
    position: relative;
}

/* Remove default radial gradients — source order wins, no !important needed */
.sol-sidebar[data-theme="terminal"] {
    background: var(--term-bg-void);
}


/* ==========================================================================
   SECTION 3: COLLAPSED STATE
   ========================================================================== */

.sol-sidebar[data-theme="terminal"].collapsed {
    width: var(--sidebar-width-collapsed);
    min-width: var(--sidebar-width-collapsed);
    max-width: var(--sidebar-width-collapsed);
    cursor: pointer;
    border-right: 2px solid var(--term-accent-dim);
    box-shadow: inset -4px 0 20px rgba(0, 255, 208, 0.15);
}

.sol-sidebar[data-theme="terminal"].collapsed:hover {
    --sidebar-width-collapsed: 72px;
    border-right-color: var(--term-accent);
    box-shadow: inset -4px 0 20px rgba(0, 255, 208, 0.2);
}

/* Hide main content when collapsed - with staggered fades.
   QoL (2026-07-12): fading content at the same speed as the width squish made
   text visibly compress mid-fade. Now: expanding → content fades IN only after
   the width has mostly opened (140ms delay); collapsing → content drops out
   fast (120ms) so nothing squishes on the way down. */
.sol-sidebar[data-theme="terminal"] .sol-sidebar-header,
.sol-sidebar[data-theme="terminal"] .sol-filter-controls,
.sol-sidebar[data-theme="terminal"] .sol-filters,
.sol-sidebar[data-theme="terminal"] .sol-patient-list {
    transition: opacity 200ms ease 140ms, visibility 0s linear 140ms;
}

.sol-sidebar[data-theme="terminal"].collapsed .sol-sidebar-header,
.sol-sidebar[data-theme="terminal"].collapsed .sol-filter-controls,
.sol-sidebar[data-theme="terminal"].collapsed .sol-filters,
.sol-sidebar[data-theme="terminal"].collapsed .sol-patient-list {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
}

/* Prevent click through to hidden elements */
.sol-sidebar[data-theme="terminal"].collapsed > *:not(.sidebar-collapsed-content):not(.sidebar-toggle-btn) {
    pointer-events: none;
}


/* ==========================================================================
   SECTION 3.5: HOVER-PEEK OVERLAY
   QoL (2026-07-13): hover-expansion floats OVER the chart instead of pushing
   it. The layout grid keeps its 64px column (JS retains .sidebar-collapsed on
   .sol-main-layout during a peek) and the sidebar — width restored by losing
   .collapsed — overflows its grid track above the content. A glance at the
   list never reflows the chart the doctor is reading.
   This class carries ONLY stacking + depth cues; width stays owned by
   .collapsed so the two compose while the close transition plays out (JS
   removes .hover-peek after the slide settles — dropping it early would sink
   the closing overlay behind the chart mid-slide).
   z-index 250: above content chrome (≤200), below note-rail top layers and
   modals (300+/1000+).
   ========================================================================== */

.sol-sidebar[data-theme="terminal"].hover-peek {
    z-index: 250;
    justify-self: start;
    box-shadow: 16px 0 48px rgba(0, 0, 0, 0.5),
                inset -4px 0 20px rgba(0, 255, 208, 0.08);
    border-right: 1px solid var(--term-accent-dim);
}


/* ==========================================================================
   SECTION 4: COLLAPSED CONTENT (vertical indicator strip)
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sidebar-collapsed-content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* QoL (2026-07-12): display:none → opacity/visibility so the strip can
       FADE in/out. display toggling is unanimatable — the indicator strip
       popped into existence the instant the class flipped, which read as a
       jarring snap. Kept as flex at all times; hidden via visibility. */
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 120ms ease, visibility 0s linear 120ms;
    flex-direction: column;
    align-items: center;
    /* FIX: Start below the toggle button (32px height + 12px top + 8px gap) */
    padding: 52px 0 12px;
    background: linear-gradient(
        180deg,
        var(--term-bg-void) 0%,
        var(--term-bg-void) 15%,
        var(--term-bg-void) 85%,
        var(--term-accent-ghost) 100%
    );
    z-index: 5;
}

.sol-sidebar[data-theme="terminal"].collapsed .sidebar-collapsed-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Fade in as the width settles (160ms delay ≈ width transition tail) */
    transition: opacity 220ms ease 160ms, visibility 0s linear 160ms;
}

/* Patient count badge */
.sol-sidebar[data-theme="terminal"] .sidebar-collapsed-count {
    width: 100%;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    border-bottom: 1px solid var(--term-border-subtle);
}

.sol-sidebar[data-theme="terminal"] .sidebar-collapsed-count .count-value {
    font-family: var(--term-font-mono);
    font-size: 3rem;
    font-weight: 700;
    color: var(--term-accent);
    line-height: 1;
    text-shadow: 0 0 12px rgba(0, 255, 208, 0.3);
}

.sol-sidebar[data-theme="terminal"] .sidebar-collapsed-count .count-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-display);
    color: var(--term-fg-muted);
}



/* ==========================================================================
   SECTION 5: TOGGLE BUTTON
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sidebar-toggle-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 100;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--term-bg-surface, #111111);
    border: 1px solid var(--term-border-default, #2A2A2A);
    border-radius: 0;
    color: var(--term-fg-secondary, #A0A0A0);
    cursor: pointer;
    transition: border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
    will-change: box-shadow, border-color;
}

.sol-sidebar[data-theme="terminal"] .sidebar-toggle-btn:hover {
    border-color: var(--term-accent, #00FFD0);
    color: var(--term-accent, #00FFD0);
    box-shadow: 0 0 12px rgba(0, 255, 208, 0.3);
}

.sol-sidebar[data-theme="terminal"] .sidebar-toggle-btn svg {
    width: 16px;
    height: 16px;
    transition: transform 300ms ease;
}

/* Rotate chevron when collapsed */
.sol-sidebar[data-theme="terminal"].collapsed .sidebar-toggle-btn svg {
    transform: rotate(180deg);
}

/* Focus-visible indicators (keyboard only, not mouse) */
.sol-sidebar[data-theme="terminal"] .sidebar-toggle-btn:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 255, 208, 0.2);
}

.sol-sidebar[data-theme="terminal"]:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: -2px;
}



/* ==========================================================================
   SECTION 6: HEADER STYLING (expanded state)
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-sidebar-header {
    background: var(--term-bg-header);
    border-bottom: 1px solid var(--term-border-default);
    /* UX (2026-07-10): slimmer header — the stats grid moved out, the title
       row is all that remains. 12px top clearance still clears the window
       chrome dots (10px tall at top: 12px). */
    padding: var(--term-space-md) var(--term-space-lg);
    padding-top: calc(var(--term-space-md) + 14px);
    /* FIX: Clear the absolute-positioned sidebar toggle button (32px + 12px right) */
    padding-right: calc(var(--term-space-lg) + 36px);
    position: relative;
}

/* Window chrome dots (terminal influence) */
.sol-sidebar[data-theme="terminal"] .sol-sidebar-header::before {
    content: '';
    position: absolute;
    left: var(--term-space-md);
    top: 12px;
    width: 44px;
    height: 10px;
    background-image:
        radial-gradient(circle, var(--term-status-critical) 4px, transparent 4px),
        radial-gradient(circle, var(--term-status-worsening) 4px, transparent 4px),
        radial-gradient(circle, var(--term-status-stable) 4px, transparent 4px);
    background-size: 14px 10px;
    background-position: 0 0, 15px 0, 30px 0;
    background-repeat: no-repeat;
    opacity: 0.6;
}

/* Title with prompt prefix */
.sol-sidebar[data-theme="terminal"] .sol-sidebar-title {
    /* DR: dashboard heading — section label for the patient list */
    font-family: var(--term-font-display);
    font-size: var(--term-text-sm);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wider);
    color: var(--term-fg-primary);
    margin: 0;
}

.sol-sidebar[data-theme="terminal"] .sol-sidebar-title::before {
    content: '>';
    color: var(--term-accent);
    margin-right: var(--term-space-sm);
    font-weight: 700;
}


/* ==========================================================================
   SECTION 7: STATS GRID (expanded state)
   ========================================================================== */

/* UX (2026-07-10): the sidebar stats grid markup was removed from census.html
   — its counts triple-duplicated the nav badge and the filter pill counts.
   The former .sol-stat-* rules were deleted with it. The collapsed strip
   (Section 4) keeps its own big numbers. */


/* ==========================================================================
   SECTION 8: FILTER CONTROLS
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-filter-controls {
    background: var(--term-bg-surface);
    border-bottom: 1px solid var(--term-border-subtle);
    padding: var(--term-space-md) var(--term-space-lg);
}

.sol-sidebar[data-theme="terminal"] .sol-filter-meta {
    margin-bottom: var(--term-space-sm);
}

.sol-sidebar[data-theme="terminal"] .sol-filter-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    color: var(--term-fg-muted);
    letter-spacing: var(--term-tracking-wide);
}

.sol-sidebar[data-theme="terminal"] .sol-filter-actions {
    display: flex;
    align-items: center;
    gap: var(--term-space-sm);
}

.sol-sidebar[data-theme="terminal"] .sol-input-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    color: var(--term-fg-muted);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide);
}

/* Bottom-border inputs (Bitcoin DeFi influence) */
.sol-sidebar[data-theme="terminal"] .sol-input {
    background: var(--term-bg-elevated);
    border: none;
    border-bottom: 2px solid var(--term-border-default);
    border-radius: 0;
    color: var(--term-fg-primary);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-sm);
    padding: var(--term-space-sm) var(--term-space-md);
}

.sol-sidebar[data-theme="terminal"] .sol-input:focus {
    outline: none;
    border-bottom-color: var(--term-accent);
    box-shadow: 0 4px 12px rgba(0, 255, 208, 0.15);
}

.sol-sidebar[data-theme="terminal"] .sol-filter-chip {
    background: transparent;
    border: 1px solid var(--term-border-default);
    border-radius: 0;
    color: var(--term-fg-secondary);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide);
    padding: var(--term-space-xs) var(--term-space-md);
    cursor: pointer;
    transition: border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
    /* UX (2026-07-10): "Today changed" must not wrap to two lines */
    white-space: nowrap;
}

.sol-sidebar[data-theme="terminal"] .sol-filter-chip:hover,
.sol-sidebar[data-theme="terminal"] .sol-filter-chip[aria-pressed="true"] {
    border-color: var(--term-accent);
    color: var(--term-accent);
    box-shadow: var(--term-glow-accent);
}


/* ==========================================================================
   SECTION 9: FILTER PILLS
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-filters {
    display: flex;
    /* UX (2026-07-10): wrap instead of clip when four pills don't fit the
       narrow (280px) sidebar width */
    flex-wrap: wrap;
    gap: var(--term-space-xs);
    padding: var(--term-space-md) var(--term-space-lg);
    border-bottom: 1px solid var(--term-border-subtle);
    background: var(--term-bg-void);
}

.sol-sidebar[data-theme="terminal"] .sol-filter-btn {
    background: transparent;
    border: 1px solid var(--term-border-default);
    border-radius: 0;
    color: var(--term-fg-secondary);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide);
    padding: var(--term-space-xs) var(--term-space-sm);
    cursor: pointer;
    transition: border-color 300ms ease, color 300ms ease, box-shadow 300ms ease, background 300ms ease;
    will-change: box-shadow, border-color;
    /* UX (2026-07-10): keep "label + count" on one line — counts used to wrap
       under the label inside the pill. flex-basis 45% yields a balanced 2×2
       grid when all four pills don't fit one row (they don't at 280-360px). */
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--term-space-xs);
    white-space: nowrap;
    flex: 1 1 45%;
}

.sol-sidebar[data-theme="terminal"] .sol-filter-btn:hover {
    border-color: var(--term-accent-dim);
    color: var(--term-fg-primary);
}

.sol-sidebar[data-theme="terminal"] .sol-filter-btn.active {
    background: var(--term-accent);
    border-color: var(--term-accent);
    color: var(--term-fg-inverse);
    box-shadow: var(--term-glow-accent);
}

.sol-sidebar[data-theme="terminal"] .sol-filter-count {
    font-weight: 600;
}


/* ==========================================================================
   SECTION 10: PATIENT LIST
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-patient-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--term-space-md);
    background: var(--term-bg-void);
}

/* Scrollbars extracted to global terminal-core */


/* ==========================================================================
   SECTION 11: PATIENT CARDS
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-patient-card {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-subtle);
    border-radius: 0;
    /* UX (2026-07-10): compact card — was --term-space-md all around with a
       54px-tall room box; cards ran ~148px each and a 20-patient census
       showed ~3.5 cards per screen. */
    padding: var(--term-space-sm) var(--term-space-md);
    margin-bottom: var(--term-space-sm);
    cursor: pointer;
    position: relative;
    transition: transform 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
    will-change: transform, box-shadow;
}

/* Compact rows: the header row carries no trailing margin when it's the only
   row; conditional rows below it space themselves. */
.sol-sidebar[data-theme="terminal"] .sol-patient-card .sol-card-header {
    margin-bottom: 0;
}

.sol-sidebar[data-theme="terminal"] .sol-card-signals,
.sol-sidebar[data-theme="terminal"] .sol-card-flags,
.sol-sidebar[data-theme="terminal"] .cs-risk-badges,
.sol-sidebar[data-theme="terminal"] .sol-card-sparkline {
    margin-top: var(--term-space-sm);
}

.sol-sidebar[data-theme="terminal"] .sol-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--term-space-xs);
}

/* L-bracket corners */
.sol-sidebar[data-theme="terminal"] .sol-patient-card::before,
.sol-sidebar[data-theme="terminal"] .sol-patient-card::after {
    content: '';
    position: absolute;
    width: var(--term-corner-size);
    height: var(--term-corner-size);
    pointer-events: none;
    opacity: 0.3;
    transition: opacity 500ms ease;
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card::before {
    top: var(--term-corner-offset);
    right: var(--term-corner-offset);
    border-top: var(--term-corner-width) solid var(--term-accent-dim);
    border-right: var(--term-corner-width) solid var(--term-accent-dim);
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card::after {
    bottom: var(--term-corner-offset);
    left: var(--term-corner-offset);
    border-bottom: var(--term-corner-width) solid var(--term-accent-dim);
    border-left: var(--term-corner-width) solid var(--term-accent-dim);
}

/* Hover state - theatrical timing */
.sol-sidebar[data-theme="terminal"] .sol-patient-card:hover {
    transform: translateY(-2px);
    border-color: var(--term-accent-dim);
    box-shadow: var(--term-glow-accent);
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card:hover::before,
.sol-sidebar[data-theme="terminal"] .sol-patient-card:hover::after {
    opacity: 1;
}

/* Selected state
   UX (2026-07-10): solid accent border — the previous dashed border read as
   "placeholder/under construction" rather than "active patient". */
.sol-sidebar[data-theme="terminal"] .sol-patient-card.selected {
    border: 2px solid var(--term-accent);
    background: var(--term-accent-ghost);
    /* DR: geo-stripe — warm amber top edge on the active patient card
       (subtle, fallback-safe when DR bridge absent) */
    background-image: linear-gradient(
        to right,
        transparent 0%,
        rgba(230, 154, 76, 0.45) 20%,
        rgba(230, 154, 76, 0.7) 50%,
        rgba(230, 154, 76, 0.45) 80%,
        transparent 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: top left;
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card.selected::before,
.sol-sidebar[data-theme="terminal"] .sol-patient-card.selected::after {
    border-color: var(--term-accent);
    opacity: 1;
}

/* A11Y (2026-07-10): cards are keyboard-focusable now (role=button) */
.sol-sidebar[data-theme="terminal"] .sol-patient-card:focus-visible {
    outline: 2px solid var(--term-accent);
    outline-offset: 2px;
}

/* Severity-based left border accent */
.sol-sidebar[data-theme="terminal"] .sol-patient-card.critical {
    border-left: 3px solid var(--term-status-critical);
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card.critical::before,
.sol-sidebar[data-theme="terminal"] .sol-patient-card.critical::after {
    border-color: rgba(239, 68, 68, 0.5);
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card.worsening,
.sol-sidebar[data-theme="terminal"] .sol-patient-card.moderate {
    border-left: 3px solid var(--term-status-worsening);
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card.stable {
    border-left: 3px solid var(--term-status-stable);
}

/* Card content styling
   UX (2026-07-10): compact room pill. The base .sol-card-room is a 54px-tall
   avatar-replacement box that measured 96px wide, squeezing the patient name
   into a ~112px column (2-3 line wraps on every name). Flattened to an inline
   mono pill; the name owns the row. Selector includes .sol-patient-card so it
   outweighs the base severity gradient rules. */
.sol-sidebar[data-theme="terminal"] .sol-patient-card .sol-card-room {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-sm);
    font-weight: 700;
    color: var(--term-fg-primary);
    margin-right: 0;
    min-width: 0;
    width: auto;
    height: auto;
    padding: 3px 8px;
    background: var(--term-bg-elevated);
    border: 1px solid var(--term-border-subtle);
    border-radius: 0;
    box-shadow: none;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card.critical .sol-card-room,
.sol-sidebar[data-theme="terminal"] .sol-patient-card--critical .sol-card-room,
.sol-sidebar[data-theme="terminal"] .sol-patient-card.high .sol-card-room,
.sol-sidebar[data-theme="terminal"] .sol-patient-card--high .sol-card-room {
    color: var(--term-status-critical);
    border-color: rgba(239, 68, 68, 0.4);
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card.worsening .sol-card-room,
.sol-sidebar[data-theme="terminal"] .sol-patient-card--worsening .sol-card-room {
    color: var(--term-status-worsening);
    border-color: rgba(194, 95, 144, 0.4);
}

.sol-sidebar[data-theme="terminal"] .sol-patient-card.stable .sol-card-room,
.sol-sidebar[data-theme="terminal"] .sol-patient-card--stable .sol-card-room {
    color: var(--term-status-stable);
    border-color: rgba(135, 154, 57, 0.4);
}

.sol-sidebar[data-theme="terminal"] .sol-card-name {
    /* DR: dashboard heading — patient card title (sidebar row) */
    font-family: var(--term-font-display);
    font-size: var(--term-text-base);
    font-weight: 600;
    color: var(--term-fg-primary);
    letter-spacing: 0.01em;
    /* FIX (2026-07-10): the unrelated .sol-card-header panel-strip style
       (sol-layout.css) leaks text-transform: uppercase into the card's
       internal header via inheritance — patient names rendered ALL-CAPS.
       One ellipsized line; full name in title tooltip. */
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sol-sidebar[data-theme="terminal"] .sol-card-meta {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    color: var(--term-fg-muted);
    display: flex;
    align-items: center;
    gap: var(--term-space-xs);
    min-width: 0;
    text-transform: none;
}

/* Top problems live on the meta row now (moved out of the actions column),
   right-aligned, each chip ellipsized */
.sol-sidebar[data-theme="terminal"] .sol-card-diagnoses {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: var(--term-space-xs);
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
}

.sol-sidebar[data-theme="terminal"] .sol-hospital-day-pill {
    background: var(--term-bg-elevated);
    border: 1px solid var(--term-border-subtle);
    border-radius: 0;
    padding: 2px 6px;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    color: var(--term-fg-secondary);
}

/* Diagnosis badge — the patient's main diagnosis on the meta row.
   UX (2026-07-10): clinical content, not chrome — mixed case at 11px fits
   ~2x the characters of the old 10px uppercase, and one generous chip beats
   two clipped ones. Tooltip carries the full top-problem list. */
.sol-sidebar[data-theme="terminal"] .sol-diagnosis {
    display: inline-block;
    background: var(--term-bg-elevated);
    border: 1px solid var(--term-border-subtle);
    border-radius: 0;
    padding: 2px 6px;
    font-family: var(--term-font-mono);
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--term-fg-secondary);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Single chip: shrink to remaining row space with its own ellipsis
       (hard container clipping cut the text without an ellipsis) */
    flex-shrink: 1;
    min-width: 0;
}

/* Signal badges */
.sol-sidebar[data-theme="terminal"] .sol-signal-badge {
    background: var(--term-accent-ghost);
    border: 1px solid var(--term-accent-dim);
    border-radius: 0;
    padding: 2px 6px;
    font-family: var(--term-font-mono);
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide);
    color: var(--term-accent);
}

/* Worsening/Review pills */
.sol-sidebar[data-theme="terminal"] .sol-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 0;
    font-family: var(--term-font-mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide);
}

.sol-sidebar[data-theme="terminal"] .sol-pill--worsening {
    background: var(--severity-worsening-bg, rgba(194, 95, 144, 0.15));
    border: 1px solid var(--term-severity-worsening);
    color: var(--term-status-worsening);
}

.sol-sidebar[data-theme="terminal"] .sol-pill--pending {
    background: rgba(59, 130, 246, 0.15);
    border: 1px solid rgba(59, 130, 246, 0.3);
    color: #3B82F6;
}


/* ==========================================================================
   SECTION 12: EMPTY STATE
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-empty {
    text-align: center;
    padding: var(--term-space-xl);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-sm);
    color: var(--term-fg-muted);
}


/* ==========================================================================
   SECTION 13: ADD PATIENT BUTTON
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-add-patient-btn {
    background: transparent;
    border: 1px solid var(--term-border-default);
    border-radius: 0;
    color: var(--term-fg-secondary);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wide);
    padding: var(--term-space-xs) var(--term-space-md);
    cursor: pointer;
    transition: border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
    display: flex;
    align-items: center;
    gap: var(--term-space-xs);
}

.sol-sidebar[data-theme="terminal"] .sol-add-patient-btn:hover {
    border-color: var(--term-accent);
    color: var(--term-accent);
    box-shadow: var(--term-glow-accent);
}

.sol-sidebar[data-theme="terminal"] .sol-add-patient-btn svg {
    width: 14px;
    height: 14px;
}


/* ==========================================================================
   SECTION 14: DROPDOWN MENU
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-card-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-default);
    border-radius: 0;
    min-width: 160px;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.sol-sidebar[data-theme="terminal"] .sol-dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--term-space-sm);
    width: 100%;
    padding: var(--term-space-sm) var(--term-space-md);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--term-border-subtle);
    color: var(--term-fg-secondary);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    text-align: left;
    cursor: pointer;
    transition: background 200ms ease, color 200ms ease;
}

.sol-sidebar[data-theme="terminal"] .sol-dropdown-item:last-child {
    border-bottom: none;
}

.sol-sidebar[data-theme="terminal"] .sol-dropdown-item:hover {
    background: var(--term-accent-ghost);
    color: var(--term-accent);
}

.sol-sidebar[data-theme="terminal"] .sol-dropdown-item--danger:hover {
    background: rgba(239, 68, 68, 0.1);
    color: var(--term-status-critical);
}


/* ==========================================================================
   SECTION 15: LOADING SKELETON
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-loading-skeleton {
    padding: var(--term-space-md);
}

.sol-sidebar[data-theme="terminal"] .sol-skeleton-card {
    height: 80px;
    background: linear-gradient(
        90deg,
        var(--term-bg-surface) 0%,
        var(--term-bg-elevated) 50%,
        var(--term-bg-surface) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    margin-bottom: var(--term-space-sm);
    border: 1px solid var(--term-border-subtle);
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}


/* ==========================================================================
   SECTION 16: REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    /* FIX (2026-07-12): also cover the sidebar ITSELF (width transition) and
       the layout grid transition — the old `*` selector only hit descendants */
    .sol-sidebar[data-theme="terminal"],
    .sol-sidebar[data-theme="terminal"] *,
    .sol-main-layout:has(.sol-sidebar[data-theme="terminal"]) {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important;
    }
}


/* ==========================================================================
   SECTION 17: LAYOUT GRID ADJUSTMENTS
   ========================================================================== */

/* QoL (2026-07-12): animate the grid column alongside the sidebar width.
   Without this, the sidebar width tweened but the layout column SNAPPED to
   64px instantly, jerking the entire detail panel sideways — the biggest
   contributor to the "too sudden" feel. grid-template-columns is animatable
   in Chrome 107+/Firefox 66+; older browsers just keep the old snap.

   Census-v2 exemption (2026-08-06): when the v2 mount is live
   (.census-app-active) the legacy sidebar stands down in both Census states
   (full page AND docked rail), so Section 17 must stand down with it.
   Without the :not(), this collapsed rule — :has() specificity (0,4,0) —
   outranks chart-shell.css's page grid (0,2,0) even through !important, and
   a persisted localStorage collapsed state pins the layout to 64px 1fr:
   the hidden sidebar's track swallows the census page and the main zone
   renders as void (owner report + screenshot 2026-08-06). */
.sol-main-layout:has(.sol-sidebar[data-theme="terminal"]):not(.census-app-active) {
    /* Literal (not var(--sidebar-transition)): that token lives on the sidebar,
       a CHILD of this element, so it can't be inherited here. Keep in sync
       with --sidebar-transition in Section 1. */
    transition: grid-template-columns 360ms cubic-bezier(0.25, 1, 0.5, 1);
}

/* Adjust main layout grid when sidebar is collapsed */
.sol-main-layout:has(.sol-sidebar[data-theme="terminal"].collapsed):not(.census-app-active) {
    grid-template-columns: 64px 1fr !important;
}

/* Fallback for browsers without :has() - JS adds class to parent */
.sol-main-layout.sidebar-collapsed:not(.census-app-active) {
    grid-template-columns: 64px 1fr !important;
}



/* ==========================================================================
   SECTION 18: RESPONSIVE ADJUSTMENTS
   ========================================================================== */

/* Narrow sidebar (≤1400px viewport → 280px grid column, see sol-layout.css):
   tighten the title and show one diagnosis chip instead of two */
@media (max-width: 1400px) {
    .sol-sidebar[data-theme="terminal"] .sol-sidebar-title {
        font-size: var(--term-text-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sol-sidebar[data-theme="terminal"] .sol-card-diagnoses .sol-diagnosis:nth-child(n+2) {
        display: none;
    }
}

@media (max-width: 768px) {
    .sol-sidebar[data-theme="terminal"] {
        --term-text-huge: 2rem;
        --term-corner-size: 8px;
        --term-corner-offset: 4px;
    }

    /* Hide window chrome dots on mobile */
    .sol-sidebar[data-theme="terminal"] .sol-sidebar-header::before {
        display: none;
    }

    /* Don't collapse sidebar on mobile - use slide-out instead */
    .sol-sidebar[data-theme="terminal"].collapsed {
        width: var(--sidebar-width-expanded);
    }
}


/* ==========================================================================
   SECTION 19: RECENT PATIENTS BAR (terminal theme override)
   WHY: The base .recent-patients-bar uses --census-* blue accents and rounded
        corners, which clash with the terminal green/sharp-corner aesthetic.
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .recent-patients-bar {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-subtle);
    border-radius: 0;
    padding: 6px 8px;
    gap: 4px;
}

.sol-sidebar[data-theme="terminal"] .recent-patient-chip {
    background: var(--term-bg-elevated);
    border: 1px solid var(--term-border-default);
    border-radius: 0;
    color: var(--term-fg-secondary);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    padding: 3px 8px;
    transition: border-color 300ms ease, color 300ms ease, box-shadow 300ms ease;
}

.sol-sidebar[data-theme="terminal"] .recent-patient-chip:hover {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent-dim);
    color: var(--term-fg-primary);
}

.sol-sidebar[data-theme="terminal"] .recent-patient-chip.selected {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent);
    color: var(--term-accent);
    box-shadow: var(--term-glow-accent);
}

.sol-sidebar[data-theme="terminal"] .recent-patient-chip .chip-room {
    color: var(--term-accent);
    font-weight: 600;
}

.sol-sidebar[data-theme="terminal"] .recent-patient-chip .chip-name {
    color: inherit;
}


/* ==========================================================================
   SECTION 20: ARCHIVE SECTION (terminal theme override)
   WHY: The base .sol-section-header uses hardcoded rgba() values and rounded
        count badges. Override to use --term-* tokens and sharp corners.
   ========================================================================== */

.sol-sidebar[data-theme="terminal"] .sol-section-header {
    color: var(--term-fg-muted);
    border-top: 1px solid var(--term-border-subtle);
    font-family: var(--term-font-mono);
}

.sol-sidebar[data-theme="terminal"] .sol-section-header:hover {
    color: var(--term-fg-secondary);
}

.sol-sidebar[data-theme="terminal"] .sol-section-count {
    background: var(--term-bg-elevated);
    border-radius: 0;
    color: var(--term-fg-muted);
    border: 1px solid var(--term-border-subtle);
}