/* ==========================================================================
   SOL LAYOUT SYSTEM - somaNotes Clinical Census Dashboard
   Full migration from census-* to sol-* namespace
   Dark theme as default (medical shift work optimized)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS VARIABLES - Clinical Color System (Dark First)
   -------------------------------------------------------------------------- */
:root {
    /* Background Hierarchy (Dark Theme Default) */
    --sol-bg-primary: #0f1117;
    --sol-bg-secondary: #161922;
    --sol-bg-tertiary: #1c1f2a;
    --sol-bg-elevated: #232736;
    --sol-bg-hover: #2a2e3d;
    --sol-bg-panel: #232736;

    /* Clinical Severity Colors */
    --sol-critical: #ef4444;
    --sol-critical-bg: rgba(239, 68, 68, 0.12);
    --sol-critical-border: rgba(239, 68, 68, 0.3);

    --sol-warning: #f59e0b;
    --sol-warning-bg: rgba(245, 158, 11, 0.12);
    --sol-warning-border: rgba(245, 158, 11, 0.3);

    --sol-stable: #22c55e;
    --sol-stable-bg: rgba(34, 197, 94, 0.12);
    --sol-stable-border: rgba(34, 197, 94, 0.3);

    --sol-resolved: #6b7280;
    --sol-resolved-bg: rgba(107, 114, 128, 0.12);

    /* Signal System Colors (info/notice levels) */
    --sol-info: #3b82f6;
    --sol-info-bg: rgba(59, 130, 246, 0.12);
    --sol-info-border: rgba(59, 130, 246, 0.3);

    --sol-notice: #eab308;
    --sol-notice-bg: rgba(234, 179, 8, 0.12);
    --sol-notice-border: rgba(234, 179, 8, 0.3);

    /* Dynamic EKG Vitals */
    --ekg-color: var(--sol-stable);
    --ekg-pulse-rate: 1s;

    /* Trend Colors */
    --sol-trend-up: #ef4444;
    --sol-trend-down: #22c55e;
    --sol-trend-stable: #6b7280;

    /* Accent Colors */
    --sol-accent: #3b82f6;
    --sol-accent-primary: #3b82f6;
    --sol-accent-secondary: #8b5cf6;
    --sol-accent-hover: #60a5fa;

    /* Text Colors */
    --sol-text-primary: #f8fafc;
    --sol-text-secondary: #94a3b8;
    --sol-text-tertiary: #64748b;
    --sol-text-muted: #475569;

    /* Borders */
    --sol-border: rgba(255, 255, 255, 0.1);
    --sol-border-subtle: rgba(255, 255, 255, 0.06);
    --sol-border-default: rgba(255, 255, 255, 0.1);
    --sol-border-strong: rgba(255, 255, 255, 0.15);

    /* Spacing */
    --sol-space-xs: 4px;
    --sol-space-sm: 8px;
    --sol-space-md: 12px;
    --sol-space-lg: 16px;
    --sol-space-xl: 24px;
    --sol-space-2xl: 32px;

    /* Border Radius */
    --sol-radius-sm: 6px;
    --sol-radius-md: 8px;
    --sol-radius-lg: 12px;
    --sol-radius-xl: 16px;

    /* Shadows */
    --sol-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --sol-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
    --sol-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);

    /* Enhanced Card System (2025-12-08) */
    --sol-card-bg: #1e222d;
    --sol-card-bg-hover: #252a38;
    --sol-card-shadow-base:
        0 1px 3px rgba(0, 0, 0, 0.4),
        0 4px 6px rgba(0, 0, 0, 0.3),
        0 8px 24px rgba(0, 0, 0, 0.25);
    --sol-card-shadow-hover:
        0 4px 8px rgba(0, 0, 0, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.4),
        0 16px 32px rgba(0, 0, 0, 0.3);
    --sol-card-shadow-selected:
        0 0 0 2px var(--sol-accent-primary),
        0 4px 12px rgba(59, 130, 246, 0.3);
    --sol-glow-critical: 0 0 12px rgba(239, 68, 68, 0.5);
    --sol-glow-warning: 0 0 12px rgba(245, 158, 11, 0.4);
    --sol-glow-stable: 0 0 8px rgba(34, 197, 94, 0.3);

    /* Transitions */
    --sol-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --sol-transition-fast: 150ms ease;
    --sol-transition-base: 200ms ease;

    /* Layout */
    /* ARCHITECTURE: Nav height is synced at runtime (see initNavHeightSync in census JS). */
    /* WHY: Fallback must approximate actual nav height (~88px) to minimize deadspace before JS runs. */
    --sol-nav-height: 88px;
    --sol-header-height: 88px;
    --sol-sidebar-width: 360px;
    --sol-actions-width: 280px;
}

/* DISABLED: Dark mode only - light theme commented out for potential future use
   To re-enable light mode: uncomment below and add 'theme' back to AppState._persistedKeys
@media (prefers-color-scheme: light) {
    :root {
        --sol-bg-primary: #fafafa;
        --sol-bg-secondary: #ffffff;
        --sol-bg-tertiary: #f8f9fa;
        --sol-bg-elevated: #ffffff;
        --sol-bg-hover: #f3f4f6;
        --sol-bg-panel: #f8f9fa;

        --sol-border: #e5e7eb;
        --sol-border-subtle: #f0f1f3;
        --sol-border-default: #e5e7eb;
        --sol-border-strong: #d1d5db;

        --sol-text-primary: #1f2937;
        --sol-text-secondary: #6b7280;
        --sol-text-tertiary: #9ca3af;
        --sol-text-muted: #d1d5db;

        --sol-accent: #3b82f6;
        --sol-accent-hover: #2563eb;
    }
}
*/

/* --------------------------------------------------------------------------
   LEGACY VARIABLE ALIASES (Modal Compatibility)
   --------------------------------------------------------------------------
   The problem-approval-modal.css and handp-approval-modal.css files use
   these older variable names. These aliases ensure compatibility.
   -------------------------------------------------------------------------- */
:root {
    /* Background mapping (legacy naming is inverted from SOL convention) */
    --bg-primary: var(--sol-bg-secondary);      /* Elevated surfaces in modals */
    --bg-secondary: var(--sol-bg-primary);      /* Base app background */
    --bg-tertiary: var(--sol-bg-tertiary);      /* Panel backgrounds */

    /* Border colors */
    --border-color: var(--sol-border);

    /* Text colors */
    --text-primary: var(--sol-text-primary);
    --text-secondary: var(--sol-text-secondary);
    --text-tertiary: var(--sol-text-tertiary);

    /* Brand accent (used for selected states, buttons) */
    --brand-primary: #6366f1;  /* Indigo to match modal design */
}

/* --------------------------------------------------------------------------
   SOL LAYOUT RESET
   -------------------------------------------------------------------------- */
.sol-app-root,
.sol-dashboard {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--sol-bg-primary);
    color: var(--sol-text-primary);
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.sol-app-root *,
.sol-app-root *::before,
.sol-app-root *::after,
.sol-dashboard *,
.sol-dashboard *::before,
.sol-dashboard *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   TOP NAVIGATION (HEADER)
   -------------------------------------------------------------------------- */
.sol-header,
.sol-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 0;
    height: auto;
    background:
        radial-gradient(circle at 15% 30%, rgba(59, 130, 246, 0.12), transparent 35%),
        radial-gradient(circle at 85% 10%, rgba(139, 92, 246, 0.10), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0.01)),
        var(--sol-bg-secondary);
    border-bottom: 1px solid var(--sol-border-subtle);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sol-space-sm) var(--sol-space-lg);
    z-index: 100;
}

/* ── GUEST AUTH GATING ──
   WHY: Guest visitors should see logo + Sign In only. Clinical tools
   (search, patient count, Quick Gen, Voice, etc.) appear after auth.
   TRADEOFF: CSS visibility vs JS removal — CSS keeps DOM intact for
   instant reveal on auth without re-render. */
.sol-top-nav[data-auth="guest"] .sol-nav-greeting,
.sol-top-nav[data-auth="guest"] .sol-nav-status-chip,
.sol-top-nav[data-auth="guest"] .sol-section-switcher,
.sol-top-nav[data-auth="guest"] .sol-nav-tabs,
.sol-top-nav[data-auth="guest"] .sol-quick-actions,
.sol-top-nav[data-auth="guest"] .sol-quickgen-dropdown,
.sol-top-nav[data-auth="guest"] .sol-search-box,
.sol-top-nav[data-auth="guest"] .sol-refresh-btn,
.sol-top-nav[data-auth="guest"] .sol-settings-btn,
.sol-top-nav[data-auth="guest"] .sol-voice-btn,
.sol-top-nav[data-auth="guest"] .voice-nav-btn {
    display: none;
}

.sol-header-left,
.sol-header-right,
.sol-nav-left,
.sol-nav-right {
    display: flex;
    align-items: center;
    gap: var(--sol-space-lg);
}

.sol-nav-left {
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.sol-nav-right {
    align-items: center;
    margin-left: auto;
    flex-shrink: 0;
}

.sol-brand-block {
    display: flex;
    align-items: center;
    gap: var(--sol-space-md);
    flex-wrap: nowrap;
    flex-shrink: 0;
}

.sol-nav-greeting {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}

.sol-nav-hello {
    display: none;
}

.sol-nav-substats {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(148, 163, 184, 0.95);
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 999px;
}

.sol-nav-substats #navCriticalCount {
    color: rgba(252, 165, 165, 0.95);
    font-weight: 600;
}

.sol-nav-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(59, 130, 246, 0.08));
    color: #dbeafe;
    border: 1px solid rgba(16, 185, 129, 0.2);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}

.sol-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15);
}

.sol-status-dot.live {
    animation: pulse-live 2s ease-in-out infinite;
}

@keyframes pulse-live {
    0% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
    50% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18); }
}

.sol-status-text {
    font-weight: 700;
    color: #ecfeff;
}

.sol-status-sep {
    color: rgba(255, 255, 255, 0.6);
}

.sol-status-sub {
    color: rgba(148, 163, 184, 0.9);
}

/* Header EKG - compact vitals indicator */
.sol-header-ekg {
    position: relative;
    display: block;
    width: 60px;
    min-width: 60px;
    height: 16px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 4px;
}

.sol-header-ekg-svg {
    display: block;
    width: 120px;
    height: 16px;
    animation: ekg-scroll 4s linear infinite;
}

.sol-header-ekg-svg .header-ekg-path,
.header-ekg-path {
    fill: none;
    stroke: var(--ekg-color, #22c55e);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: ekg-glow-pulse var(--ekg-pulse-rate, 1s) ease-in-out infinite;
}

@keyframes ekg-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes ekg-glow-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 4px currentColor);
        opacity: 0.8;
    }
    50% {
        filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 16px currentColor);
        opacity: 1;
    }
}

.sol-quick-actions {
    display: flex;
    gap: var(--sol-space-sm);
    margin-top: 6px;
    flex-wrap: nowrap;
}

.sol-quick-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    color: var(--sol-text-primary);
    font-weight: 600;
    cursor: pointer;
    transition: var(--sol-transition-base);
    flex-shrink: 0;
    white-space: nowrap;
}

.sol-quick-action-btn.primary {
    background: linear-gradient(135deg, var(--sol-accent-primary), #6366f1);
    border-color: rgba(255, 255, 255, 0.15);
    color: white;
    box-shadow: 0 10px 24px rgba(59, 130, 246, 0.35);
}

.sol-quick-action-btn.secondary {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.28), rgba(59, 130, 246, 0.16));
    border-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sol-quick-action-btn.ghost {
    background: transparent;
}

.sol-quick-action-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
    border-color: var(--sol-border-default);
}

.sol-quick-action-btn:active {
    transform: translateY(0);
}

/* WHY: Keyboard nav through census header needs visible focus ring.
   focus-visible avoids ring on mouse click. */
.sol-quick-action-btn:focus-visible {
    outline: 2px solid var(--sol-accent, #3b82f6);
    outline-offset: 2px;
}

/* Top-nav emphasis: make Add patient / Refresh feel like primary affordances */
#navAddPatientBtn,
#navRefreshBtn {
    padding: 9px 14px;
}

#navAddPatientBtn:hover,
#navRefreshBtn:hover {
    transform: translateY(-2px);
}

#navAddPatientBtn {
    box-shadow:
        0 12px 26px rgba(59, 130, 246, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

#navRefreshBtn:hover {
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.28),
        0 0 0 1px rgba(99, 102, 241, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

/* Logo */
.sol-logo {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    font-size: 1.25rem;
    font-weight: 700;
}

.sol-logo.glow {
    position: relative;
    padding: 6px 10px;
    border-radius: var(--sol-radius-md);
    background: radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.2), transparent 60%);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.25), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.sol-brand-stack {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
}

.sol-brand-crest {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(59, 130, 246, 0.08));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 10px 22px rgba(59, 130, 246, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: #e5e7eb;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.sol-logo-mark {
    font-size: 1.2rem;
}

.sol-logo-icon {
    color: var(--sol-accent-primary);
    font-size: 1.5rem;
}

.sol-logo-accent {
    color: var(--sol-accent-primary);
}

.sol-logo-text {
    font-weight: 700;
}

/* Nav Tabs */
.sol-nav-tabs {
    display: flex;
    gap: var(--sol-space-xs);
    flex-wrap: wrap;
}

.sol-nav-tab {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-sm) var(--sol-space-md);
    background: transparent;
    border: none;
    border-radius: var(--sol-radius-md);
    color: var(--sol-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-nav-tab:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
    transform: translateY(-1px);
}

.sol-nav-tab.active {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.sol-tab-icon {
    width: 18px;
    height: 18px;
}

.sol-alert-badge {
    background: var(--sol-critical);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: var(--sol-space-xs);
}

/* Search Box */
.sol-search-box {
    position: relative;
    width: 280px;
}

.sol-search-box input {
    width: 100%;
    padding: 10px var(--sol-space-md);
    padding-left: 40px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
        var(--sol-bg-tertiary);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--sol-radius-lg);
    color: var(--sol-text-primary);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sol-search-box input:focus {
    outline: none;
    border-color: rgba(59, 130, 246, 0.5);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
        var(--sol-bg-elevated);
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.15),
        0 0 0 3px rgba(59, 130, 246, 0.15);
}

.sol-search-box input::placeholder {
    color: var(--sol-text-muted);
    font-weight: 400;
}

.sol-search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--sol-text-tertiary);
    transition: color 0.2s ease;
}

.sol-search-box:focus-within .sol-search-icon {
    color: var(--sol-accent-primary);
}

/* Refresh Button */
.sol-refresh-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    color: var(--sol-text-secondary);
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-refresh-btn:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-refresh-btn svg {
    width: 18px;
    height: 18px;
}

.sol-refresh-btn.spinning svg {
    animation: sol-spin 1s linear infinite;
}

@keyframes sol-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Settings Button */
.sol-settings-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    color: var(--sol-text-secondary);
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-settings-btn:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-settings-btn svg {
    width: 18px;
    height: 18px;
}

/* User Menu */
.sol-user-menu {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    align-self: flex-start;
}

.sol-user-avatar {
    width: 32px;
    height: 32px;
    background: var(--sol-accent-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.sol-user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--sol-text-secondary);
}

.sol-sign-in-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow:
        0 4px 12px rgba(59, 130, 246, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.sol-sign-in-btn:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #a78bfa 100%);
    transform: translateY(-1px);
    box-shadow:
        0 6px 16px rgba(59, 130, 246, 0.45),
        0 4px 8px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-sign-in-btn:active {
    transform: translateY(0);
}

.sol-sign-in-btn i {
    font-size: 1.1rem;
}

/* --------------------------------------------------------------------------
   MAIN LAYOUT
   -------------------------------------------------------------------------- */
.sol-main-layout {
    display: grid;
    grid-template-columns: var(--sol-sidebar-width) 1fr;
    height: calc(100vh - (var(--sol-header-height) + 16px));
    margin-top: calc(var(--sol-header-height) + 16px);
}

/* --------------------------------------------------------------------------
   SIDEBAR (Left)
   -------------------------------------------------------------------------- */
.sol-sidebar {
    background:
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.08), transparent 28%),
        radial-gradient(circle at 80% 0%, rgba(139, 92, 246, 0.06), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    border-right: 1px solid var(--sol-border-subtle);
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sol-sidebar-header {
    padding: var(--sol-space-lg);
    padding-top: calc(var(--sol-space-lg) + 20px); /* Extra space to clear header overlap */
    border-bottom: 1px solid var(--sol-border-subtle);
}

.sol-sidebar-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--sol-space-md);
}

.sol-sidebar-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sol-space-md);
}

.sol-sidebar-title-row .sol-sidebar-title {
    margin-bottom: 0;
}

.sol-stats {
    display: flex;
    gap: var(--sol-space-md);
}

.sol-stat {
    display: flex;
    flex-direction: column;
    padding: var(--sol-space-sm) var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-md);
    flex: 1;
    text-align: center;
}

.sol-stat.critical {
    background: var(--sol-critical-bg);
    border: 1px solid var(--sol-critical-border);
}

.sol-stat.critical .sol-stat-value {
    color: var(--sol-critical);
}

.sol-stat.warning {
    background: var(--sol-warning-bg);
    border: 1px solid var(--sol-warning-border);
}

.sol-stat.warning .sol-stat-value {
    color: var(--sol-warning);
}

.sol-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}

.sol-stat-label {
    font-size: 0.7rem;
    color: var(--sol-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: var(--sol-space-xs);
}

.sol-stats-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sol-space-sm);
    margin-bottom: var(--sol-space-sm);
    color: var(--sol-text-secondary);
}

.sol-stats-title {
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #e5e7eb;
}

.sol-stats-sub {
    font-size: 0.8rem;
    color: rgba(148, 163, 184, 0.9);
}

/* Filters */
.sol-filters {
    display: flex;
    gap: var(--sol-space-xs);
    padding: var(--sol-space-md) var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
}

.sol-filter-btn {
    padding: var(--sol-space-xs) var(--sol-space-md);
    background: transparent;
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    color: var(--sol-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-filter-btn:hover {
    background: var(--sol-bg-hover);
    border-color: var(--sol-border-default);
}

.sol-filter-btn.active {
    background: var(--sol-accent-primary);
    border-color: var(--sol-accent-primary);
    color: white;
}

/* Patient List */
.sol-patient-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--sol-space-md);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0)),
        var(--sol-bg-secondary);
}

/* Skeleton Loader */
.sol-loading-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-sm);
}

.sol-loading-skeleton.hidden {
    display: none;
}

.sol-skeleton-card {
    height: 80px;
    background: linear-gradient(
        90deg,
        var(--sol-bg-tertiary) 0%,
        var(--sol-bg-elevated) 50%,
        var(--sol-bg-tertiary) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--sol-radius-md);
    animation: sol-shimmer 1.5s ease-in-out infinite;
}

@keyframes sol-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Panel Skeleton Loaders */
.sol-panel-skeleton {
    display: none;
    padding: var(--sol-space-sm);
}

.sol-panel-skeleton.visible {
    display: block;
}

.sol-skeleton-line {
    height: 16px;
    background: linear-gradient(
        90deg,
        var(--sol-bg-tertiary) 0%,
        var(--sol-bg-elevated) 50%,
        var(--sol-bg-tertiary) 100%
    );
    background-size: 200% 100%;
    border-radius: var(--sol-radius-sm);
    animation: sol-shimmer 1.5s ease-in-out infinite;
    margin-bottom: var(--sol-space-xs);
}

.sol-skeleton-line:last-child {
    margin-bottom: 0;
}

.sol-skeleton-line.short {
    width: 60%;
}

.sol-skeleton-line.medium {
    width: 80%;
}

/* Problem skeleton */
.sol-skeleton-problem {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-xs) 0;
}

.sol-skeleton-problem .sol-skeleton-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sol-bg-tertiary);
    animation: sol-shimmer 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

.sol-skeleton-problem .sol-skeleton-line {
    flex: 1;
    margin-bottom: 0;
}

/* Lab skeleton */
.sol-skeleton-lab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sol-space-xs) 0;
    border-bottom: 1px solid var(--sol-border-subtle);
}

.sol-skeleton-lab .sol-skeleton-line {
    margin-bottom: 0;
}

.sol-skeleton-lab .name {
    width: 35%;
}

.sol-skeleton-lab .value {
    width: 20%;
}

/* Vital skeleton */
.sol-skeleton-vital {
    padding: var(--sol-space-xs);
    text-align: center;
}

.sol-skeleton-vital .sol-skeleton-line {
    height: 12px;
    margin: 0 auto var(--sol-space-xs);
}

.sol-skeleton-vital .label {
    width: 30px;
}

.sol-skeleton-vital .value {
    width: 50px;
    height: 20px;
}

/* Medication skeleton */
.sol-skeleton-med {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sol-space-xs) 0;
}

.sol-skeleton-med .info {
    flex: 1;
}

.sol-skeleton-med .status {
    width: 50px;
    height: 20px;
}

/* ==========================================================================
   PATIENT CARDS - High Contrast 3D Design (2025-12-08)
   ========================================================================== */

/* Staggered entrance animation for patient cards */
@keyframes card-entrance {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sol-patient-card {
    padding: 16px 16px 16px 20px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.02) 10%,
        #252a38 30%,
        #1a1e2a 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    margin-bottom: 12px;
    cursor: pointer;
    position: relative;
    isolation: isolate;
    /* WHY: Canonical 2-layer shadow (26.1-03). Was 5-layer stack with inset highlights.
       The inset highlights created a "raised" effect but over-engineered for a list item.
       2-layer matches problem-card-2d and reduces hover repaint cost. */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.3),
        0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
    /* Staggered entrance animation */
    animation: card-entrance 0.3s ease-out backwards;
    animation-delay: calc(var(--card-index, 0) * 30ms);
}

/* Radial glow overlay - base (subtle white) */
.sol-patient-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
        ellipse 120% 80% at 20% 0%,
        rgba(255, 255, 255, 0.06),
        transparent 50%
    );
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.sol-patient-card:hover {
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 10%,
        #2d3344 30%,
        #1e2230 100%
    );
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-4px) scale(1.01);
    /* WHY: 2-layer hover shadow matches canonical pattern; spread grows to signal hover lift. */
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.35),
        0 3px 6px rgba(0, 0, 0, 0.25);
}

.sol-patient-card:hover::after {
    opacity: 1;
}

.sol-patient-card.selected {
    background: linear-gradient(
        180deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(59, 130, 246, 0.03) 10%,
        #2a3040 30%,
        #1c2030 100%
    );
    border-color: #3b82f6;
    transform: translateY(-2px);
    /* WHY: Focus ring (layer 1) + blue accent glow (layer 2) + base drop (layer 3). Inset removed (26.1-03). */
    box-shadow:
        0 0 0 2px rgba(59, 130, 246, 0.5),
        0 8px 24px rgba(59, 130, 246, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.3);
}

.sol-patient-card.selected::after {
    background: radial-gradient(
        ellipse 120% 80% at 20% 0%,
        rgba(59, 130, 246, 0.15),
        transparent 50%
    );
    opacity: 1;
}

/* Severity: CRITICAL - Subtle red tint, not bright */
.sol-patient-card.critical,
.sol-patient-card--critical {
    background: linear-gradient(145deg, #282230 0%, #1c1924 100%);
}

.sol-patient-card.critical:hover,
.sol-patient-card--critical:hover {
    background: linear-gradient(145deg, #2e2838 0%, #201c28 100%);
}

/* Severity: HIGH - Same as critical */
.sol-patient-card.high,
.sol-patient-card--high {
    background: linear-gradient(145deg, #282230 0%, #1c1924 100%);
}

/* Severity: WORSENING - Subtle magenta tint */
.sol-patient-card.worsening,
.sol-patient-card--worsening {
    background: linear-gradient(145deg, var(--severity-worsening-bg, var(--sol-warning-bg, #2a1f26)) 0%, var(--sol-bg-secondary, #1c1a16) 100%);
}

.sol-patient-card.worsening:hover,
.sol-patient-card--worsening:hover {
    background: linear-gradient(145deg, var(--sol-warning-border, rgba(194, 95, 144, 0.20)) 0%, var(--sol-bg-hover, #201d18) 100%);
}

/* Severity: STABLE - Subtle olive tint */
.sol-patient-card.stable,
.sol-patient-card--stable {
    background: linear-gradient(145deg, var(--severity-stable-bg, var(--sol-stable-bg, #1e2825)) 0%, var(--sol-bg-secondary, #181f1c) 100%);
}

/* Severity-specific radial glow overlays */
.sol-patient-card.critical::after,
.sol-patient-card.high::after,
.sol-patient-card--critical::after,
.sol-patient-card--high::after {
    background: radial-gradient(
        ellipse 120% 80% at 20% 0%,
        rgba(239, 68, 68, 0.15),
        transparent 50%
    );
}

.sol-patient-card.worsening::after,
.sol-patient-card--worsening::after {
    background: radial-gradient(
        ellipse 120% 80% at 20% 0%,
        var(--severity-worsening-bg, var(--sol-warning-bg, rgba(194, 95, 144, 0.12))),
        transparent 50%
    );
}

.sol-patient-card.stable::after,
.sol-patient-card--stable::after {
    background: radial-gradient(
        ellipse 120% 80% at 20% 0%,
        var(--severity-stable-bg, var(--sol-stable-bg, rgba(135, 154, 57, 0.10))),
        transparent 50%
    );
}

/* ==========================================================================
   ARCHIVE SECTION — Collapsible patient bin (2026-02-25)
   WHY: Separates active patients from old/test patients
   ========================================================================== */

.sol-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin: 4px 0 2px;
    cursor: pointer;
    user-select: none;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    transition: color 0.15s ease;
}

.sol-section-header:hover {
    color: rgba(255, 255, 255, 0.7);
}

.sol-section-chevron {
    font-size: 0.6rem;
    line-height: 1;
    transition: transform 0.2s ease;
}

.sol-section-label {
    flex: 1;
}

.sol-section-count {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 7px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.4);
}

.sol-section-body.hidden {
    display: none;
}

/* Archived patient cards: dimmed to visually separate from active */
.sol-patient-card--archived {
    opacity: 0.55;
    transition: opacity 0.15s ease;
}

.sol-patient-card--archived:hover {
    opacity: 0.8;
}

.sol-patient-card--archived::after {
    display: none;
}

/* Other-doctor patient cards (admin two-section view, 2026-04-25):
   muted but readable, with a left rail to make the not-mine state obvious.
   WHY: Admin sees every doctor's patients; rows owned by other clinicians
   need to look distinct from "mine" without being so dim they're hard to scan. */
.sol-patient-card--other-owner {
    opacity: 0.78;
    border-left: 3px solid rgba(160, 180, 220, 0.35);
}
.sol-patient-card--other-owner:hover {
    opacity: 0.95;
}

.sol-owner-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(180, 200, 235, 0.85);
    background: rgba(80, 110, 160, 0.18);
    border: 1px solid rgba(160, 180, 220, 0.25);
    border-radius: 4px;
    white-space: nowrap;
}

.sol-section-header--others {
    /* Same shape as the archive header, just a hint of cooler tint */
    color: rgba(180, 200, 235, 0.75);
}

/* Patient card internal header row — scoped to avoid conflict with .sol-card-header panel strips (26.1-03) */
.sol-patient-card .sol-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
    /* FIX (2026-07-10): the panel-strip .sol-card-header rule (~:2880) leaks
       into the patient card's internal header via the shared class name —
       uppercase inherited into every patient name, and its padding/border
       shrank the name column by ~40px. Neutralize everything the panel strip
       sets that a card row must not have. */
    text-transform: none;
    padding: 0;
    border-bottom: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: normal;
    color: inherit;
}

.sol-card-patient-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    /* UX (2026-07-10): fill the header row so the meta row (and its
       right-aligned diagnoses) spans the card width */
    flex: 1;
}

.sol-card-text {
    min-width: 0;
    flex: 1;
}

/* ==========================================================================
   ROOM NUMBER - The Primary Identifier (replaces avatar)
   Subtle glow effect, not bright Lego colors
   ========================================================================== */

.sol-card-room {
    min-width: 54px;
    height: 54px;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Dark base with subtle blue tint */
    background: linear-gradient(145deg, #2a3344 0%, #1e2433 100%);
    border: 1px solid rgba(100, 150, 255, 0.15);
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #94a3b8;
    /* Subtle outer glow */
    box-shadow:
        0 0 12px rgba(100, 150, 255, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Room colors by severity - subtle glows, not bright fills */
.sol-patient-card.critical .sol-card-room,
.sol-patient-card--critical .sol-card-room,
.sol-patient-card.high .sol-card-room,
.sol-patient-card--high .sol-card-room {
    background: linear-gradient(145deg, #2d2535 0%, #231c28 100%);
    border-color: rgba(239, 68, 68, 0.25);
    color: #fca5a5;
    box-shadow:
        0 0 16px rgba(239, 68, 68, 0.15),
        0 0 8px rgba(239, 68, 68, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sol-patient-card.worsening .sol-card-room,
.sol-patient-card--worsening .sol-card-room {
    background: linear-gradient(145deg, rgba(194, 95, 144, 0.14) 0%, var(--sol-bg-secondary, #23201a) 100%);
    border-color: rgba(194, 95, 144, 0.25);
    color: var(--severity-worsening, #C25F90);
    box-shadow:
        0 0 16px rgba(194, 95, 144, 0.12),
        0 0 8px rgba(194, 95, 144, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.sol-patient-card.stable .sol-card-room,
.sol-patient-card--stable .sol-card-room {
    background: linear-gradient(145deg, rgba(135, 154, 57, 0.14) 0%, var(--sol-bg-secondary, #1a2520) 100%);
    border-color: rgba(135, 154, 57, 0.2);
    color: var(--severity-stable, #879A39);
    box-shadow:
        0 0 12px rgba(135, 154, 57, 0.1),
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Hide the old avatar - no longer used */
.sol-card-avatar {
    display: none;
}

/* Severity-colored avatar rings */
.sol-patient-card.critical .sol-card-avatar,
.sol-patient-card--critical .sol-card-avatar {
    border-color: var(--sol-critical);
    box-shadow: var(--sol-glow-critical);
}

.sol-patient-card.high .sol-card-avatar,
.sol-patient-card--high .sol-card-avatar {
    border-color: var(--sol-critical);
    box-shadow: var(--sol-glow-critical);
}

.sol-patient-card.worsening .sol-card-avatar,
.sol-patient-card--worsening .sol-card-avatar {
    border-color: var(--severity-worsening, var(--sol-warning));
    box-shadow: var(--severity-worsening-glow, var(--sol-glow-warning));
}

.sol-patient-card.stable .sol-card-avatar,
.sol-patient-card--stable .sol-card-avatar {
    border-color: var(--severity-stable, var(--sol-stable));
    box-shadow: var(--severity-stable-glow, var(--sol-glow-stable));
}

/* ==========================================================================
   PATIENT NAME & METADATA - Colorful, Readable
   ========================================================================== */

.sol-card-name {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    /* Warm white - easier to read than pure white */
    color: #f1f5f9;
    /* UX (2026-07-10): one ellipsized line — full name in the title tooltip.
       Wrapped 2-3 lines when the name column sat beside the old room box. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sol-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.4;
    margin-top: 4px;
}

/* Demographics - cyan tint for visibility */
.sol-card-demo {
    color: #67e8f9;
    font-weight: 600;
}

/* Length of Stay - purple tint */
.sol-card-los {
    color: #c4b5fd;
    font-weight: 600;
}

/* ==========================================================================
   SEVERITY BADGES - Bold 3D Pills
   ========================================================================== */

.sol-card-severity {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
}

.sol-card-severity.critical {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(220, 38, 38, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-card-severity.high {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 50%, #b91c1c 100%);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(220, 38, 38, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-card-severity.worsening {
    background: linear-gradient(135deg, #C25F90 0%, #A9497A 50%, #873B62 100%);
    color: #ffffff;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(194, 95, 144, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-card-severity.stable {
    background: linear-gradient(135deg, #879A39 0%, #6F822C 50%, #576A22 100%);
    color: #ffffff;
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 8px rgba(135, 154, 57, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   DIAGNOSES - Replaces severity badge (severity shown via room color)
   ========================================================================== */

/* UX (2026-07-10): diagnoses moved from the card's actions column onto the
   meta row (renderPatientCard) — row layout, right-aligned via margin-left */
.sol-card-diagnoses {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    min-width: 0;
    overflow: hidden;
}

/* Merged worsening/review pill row (was two stacked rows) */
.sol-card-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sol-space-sm);
    position: relative;
    z-index: 1;
}

.sol-diagnosis {
    font-size: 0.78rem;
    font-weight: 600;
    color: #e2e8f0;
    text-align: right;
    line-height: 1.3;
    /* Truncate long diagnoses */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

.sol-diagnosis:first-child {
    /* Primary diagnosis - slightly more prominent */
    color: #f8fafc;
    font-weight: 700;
}

/* Patient card action menu */
.sol-card-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
}

.sol-card-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--sol-text-tertiary);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.sol-patient-card:hover .sol-card-menu-btn {
    opacity: 1;
}

.sol-card-menu-btn:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-card-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: var(--sol-bg-secondary);
    border: 1px solid var(--sol-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    min-width: 160px;
    z-index: 100;
    overflow: hidden;
    /* Animated visibility */
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.sol-card-dropdown.hidden {
    opacity: 0;
    transform: translateY(-4px) scale(0.95);
    pointer-events: none;
}

.sol-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: none;
    color: var(--sol-text-secondary);
    font-size: 0.85rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;
}

.sol-dropdown-item:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-dropdown-item--danger {
    color: var(--sol-critical);
}

.sol-dropdown-item--danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: var(--sol-critical);
}

.sol-dropdown-item svg {
    flex-shrink: 0;
}

.sol-card-problems {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sol-space-xs);
    margin-bottom: var(--sol-space-sm);
}

/* Problem Tags - More Prominent */
.sol-problem-tag {
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--sol-border-strong);
    border-radius: var(--sol-radius-sm);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--sol-text-secondary);
    transition: background 0.15s ease;
}

.sol-problem-tag.critical {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    font-weight: 700;
}

.sol-problem-tag.worsening {
    background: var(--severity-worsening-bg, rgba(194, 95, 144, 0.18));
    border-color: rgba(194, 95, 144, 0.35);
    color: var(--severity-worsening, #C25F90);
}

/* Clinical Signal Badges - More Prominent */
.sol-card-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: var(--sol-space-sm);
    position: relative;
    z-index: 1;
}

.sol-signal-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--sol-radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* Critical signals - AKI, Hyperkalemia, Hypoxia, Hypotension */
.sol-signal-badge.aki,
.sol-signal-badge.hyperkalemia,
.sol-signal-badge.hypoxia,
.sol-signal-badge.hypotension {
    background: rgba(239, 68, 68, 0.22);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.45);
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.2);
}

/* Warning signals - Hypokalemia, Lactate */
.sol-signal-badge.hypokalemia,
.sol-signal-badge.lactate {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
    border: 1px solid rgba(245, 158, 11, 0.4);
}

/* --------------------------------------------------------------------------
   PATIENT DETAIL (Center)
   -------------------------------------------------------------------------- */
.sol-patient-detail {
    background: var(--sol-bg-primary);
    overflow: visible; /* FIX (2026-02-02): Changed from hidden - blocks child scroll context */
    padding: var(--sol-space-xl);
    padding-bottom: 0; /* Remove bottom padding, workspace handles scroll */
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%; /* FIX: Explicitly fill grid cell for flex children to work */
    min-height: 0; /* FIX (2026-02-02): Allow flex children to shrink and establish scroll */
    /* FIX (2026-07-16, sweep finding 5): min-width was auto, so the 1fr grid
       track's floor became this cell's intrinsic content (workspace-main's
       min-content + the 800px rail = ~1620px) — with the rail expanded at a
       1440px viewport, the rail's right edge landed at ~1708px and its
       collapse control was unreachable offscreen. min-width: 0 lets the track
       shrink; the workspace panes already carry min-width: 0 + own scroll. */
    min-width: 0;
}

/* Clinical Workspace - Flex container for grid + rail (2026-02) */
.sol-clinical-workspace {
    display: flex;
    flex: 1;
    min-height: 0; /* Allow flex children to shrink */
    gap: 0;
}

.sol-clinical-grid-container {
    flex: 1;
    min-width: 0; /* Allow container to shrink below content size */
    overflow-y: auto;
    padding-bottom: var(--sol-space-xl);
}

/* Patient Detail Loading Overlay */
.sol-detail-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 17, 23, 0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sol-space-md);
    z-index: 100;
    color: var(--sol-text-secondary);
    font-size: 0.875rem;
}

.sol-detail-loading.hidden {
    display: none;
}

.sol-detail-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--sol-border-subtle);
    border-top-color: var(--sol-accent-primary);
    border-radius: 50%;
    animation: sol-spin 0.8s linear infinite;
}

/* Empty State */
.sol-empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    position: relative;
    padding: var(--sol-space-xl);
    /* Animated visibility */
    transition: opacity 0.2s ease;
}

.sol-empty-state.hidden {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.sol-empty-card {
    position: relative;
    padding: var(--sol-space-xl);
    max-width: 560px;
    width: 100%;
    background:
        radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.08), transparent 35%),
        radial-gradient(circle at 85% 0%, rgba(139, 92, 246, 0.08), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
    border: 1px solid var(--sol-border-default);
    border-radius: var(--sol-radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(4px);
}

.sol-empty-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto var(--sol-space-lg);
    color: var(--sol-accent-primary);
}

.sol-empty-icon svg {
    width: 100%;
    height: 100%;
}

.sol-empty-state h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #e5e7eb;
    margin-bottom: var(--sol-space-xs);
}

.sol-empty-lede {
    font-size: 0.95rem;
    color: rgba(148, 163, 184, 0.9);
    margin-bottom: var(--sol-space-md);
}

.sol-empty-actions {
    display: flex;
    gap: var(--sol-space-sm);
    align-items: center;
    justify-content: center;
    margin-bottom: var(--sol-space-md);
}

.sol-empty-actions .sol-action-btn.ghost {
    background: transparent;
    color: var(--sol-text-secondary);
    border: 1px solid var(--sol-border-default);
}

.sol-empty-tips {
    display: flex;
    gap: var(--sol-space-sm);
    justify-content: center;
    flex-wrap: wrap;
    color: var(--sol-text-tertiary);
    font-size: 0.85rem;
}

.sol-empty-tip {
    padding: 6px 10px;
    border-radius: var(--sol-radius-sm);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--sol-border-subtle);
}

/* ── Architecture Infographic Promo (post-login empty state) ── */
/* WHY: Lead the post-login empty state with the brand-defining architectural argument.
   Replaces the verbose Voice Companion guide block (moved to /help) so the first
   thing a signed-in hospitalist sees is the reasoning-artifact thesis, not a tutorial.
   FIXME (2026-04-25): User feedback — "you made the entire goddam hero on the welcome
   back to somaNotes the size of a chipmunk." Current dimensions (max-width: 560px,
   font-size: 1.05rem on the title) match the empty-card width and read as a button
   rather than a hero. Follow-up: rebuild as a real hero — break out of the
   .sol-empty-card container, span viewport width, push the welcome card / actions /
   tips below it, lift title to ~2-2.5rem, deck to ~1.1rem, add an inline SVG or
   stat-grid mini-preview. See todos.md "Empty-state architecture promo: chipmunk → hero". */
.sol-arch-promo {
    display: block;
    text-decoration: none;
    color: inherit;
    margin: var(--sol-space-lg) auto 0;
    max-width: 560px;
    padding: 22px 24px;
    border: 1px solid rgba(245, 158, 11, 0.32);
    border-radius: var(--sol-radius-md);
    background:
        radial-gradient(ellipse 600px 240px at 80% 20%, rgba(245, 158, 11, 0.14), transparent 70%),
        linear-gradient(180deg, rgba(245, 158, 11, 0.05), rgba(245, 158, 11, 0.02));
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.sol-arch-promo:hover {
    border-color: rgba(245, 158, 11, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32), 0 0 24px rgba(245, 158, 11, 0.1);
}

.sol-arch-promo::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, #f59e0b, #e879f9, #22d3ee);
    opacity: 0.65;
}

.sol-arch-promo-kicker {
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #f59e0b;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sol-arch-promo-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 10px #f59e0b;
}

.sol-arch-promo-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #f3f0e8;
    line-height: 1.3;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.sol-arch-promo-title em {
    font-style: normal;
    color: #fbbf24;
}

.sol-arch-promo-deck {
    font-size: 0.83rem;
    color: rgba(218, 201, 180, 0.85);
    line-height: 1.55;
    margin-bottom: 14px;
}

.sol-arch-promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #f59e0b;
    font-weight: 600;
}

/* ── Help hub link (post-login empty state) ── */
/* WHY: Quiet secondary link to /help where voice guide and recent changes now live.
   Deliberately lower visual weight than the architecture promo above. */
.sol-help-link {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: var(--sol-space-md) auto 0;
    max-width: 560px;
    padding: 12px 16px;
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    background: rgba(255, 255, 255, 0.02);
    text-decoration: none;
    color: var(--sol-text-secondary);
    font-size: 0.85rem;
    transition: border-color 0.2s, background 0.2s;
}

.sol-help-link:hover {
    border-color: var(--sol-accent-primary);
    background: rgba(255, 255, 255, 0.04);
    color: #e5e7eb;
}

.sol-help-link > span:first-child {
    font-weight: 600;
    color: #e5e7eb;
}

.sol-help-link-meta {
    flex: 1;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 0.72rem;
    color: var(--sol-text-tertiary);
    letter-spacing: 0.04em;
}

.sol-help-link svg {
    flex-shrink: 0;
    color: var(--sol-text-tertiary);
}

.sol-help-link:hover svg {
    color: var(--sol-accent-primary);
}

/* ── Voice Companion Quick Reference Guide ── */
.sol-voice-guide {
    margin-top: var(--sol-space-lg);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    background: rgba(255, 255, 255, 0.02);
    text-align: left;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

.sol-voice-guide-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sol-border-subtle);
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--term-accent, #00ffc8);
}

.sol-voice-guide-header svg {
    stroke: var(--term-accent, #00ffc8);
    flex-shrink: 0;
}

.sol-voice-guide-body {
    padding: 12px 16px;
}

.sol-voice-guide-label {
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--sol-text-secondary, #9a9590);
    margin-bottom: 6px;
}

.sol-voice-guide-steps {
    margin: 0 0 0 18px;
    padding: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sol-text-secondary, #b0aaa0);
}

.sol-voice-guide-steps li {
    margin-bottom: 2px;
}

.sol-voice-guide-steps strong {
    color: var(--sol-text-primary, #e8e4dc);
}

.sol-voice-guide-steps kbd {
    display: inline-block;
    padding: 1px 5px;
    font-family: var(--term-font-mono, 'JetBrains Mono', monospace);
    font-size: 11px;
    border: 1px solid var(--sol-border-default, #2a2720);
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--sol-text-primary, #e8e4dc);
}

.sol-voice-guide-divider {
    height: 1px;
    background: var(--sol-border-subtle);
    margin: 10px 0;
}

.sol-main-layout.hidden {
    display: none;
}

/* Guest Hero styles live in guest-hero-research.css */

/* Patient Header - Animated visibility */
.sol-patient-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
    margin-bottom: var(--sol-space-lg);
    flex-shrink: 0; /* FIX: Don't collapse header in flex column */
    /* Animated visibility */
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sol-patient-header.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.sol-patient-identity {
    display: flex;
    gap: var(--sol-space-lg);
}

.sol-patient-avatar {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--sol-accent-primary) 0%, var(--sol-accent-secondary) 100%);
    border-radius: var(--sol-radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
}

.sol-patient-name {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: var(--sol-space-xs);
}

.sol-patient-meta {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    color: var(--sol-text-secondary);
    font-size: 0.9rem;
}

.sol-meta-divider {
    color: var(--sol-text-muted);
}

.sol-meta-item {
    /* Individual metadata items (MRN, Age, Room, LOS) */
}

.sol-patient-info {
    /* Patient info container within header */
}

.sol-patient-actions {
    display: flex;
    gap: var(--sol-space-sm);
}

.sol-action-btn {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-sm) var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    color: var(--sol-text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-action-btn:hover {
    background: var(--sol-bg-hover);
    border-color: var(--sol-border-default);
    color: var(--sol-text-primary);
}

.sol-action-btn.primary {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 50%, #8b5cf6 100%);
    border: none;
    color: white;
    font-weight: 600;
    box-shadow:
        0 4px 14px rgba(59, 130, 246, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.sol-action-btn.primary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #818cf8 50%, #a78bfa 100%);
    transform: translateY(-1px);
    box-shadow:
        0 6px 18px rgba(59, 130, 246, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sol-action-btn.warning {
    background: var(--sol-warning);
    border-color: var(--sol-warning);
    color: #1a1a1a;
}

.sol-action-btn.warning:hover {
    background: #e6a700;
    border-color: #e6a700;
}

.sol-action-btn.warning:disabled {
    background: var(--sol-bg-tertiary);
    border-color: var(--sol-border-default);
    color: var(--sol-text-muted);
}

/* FIX (2026-02-25): Generic disabled state for all sol-action-btn variants
   BUG: Disabled buttons showed cursor:pointer because only .warning:disabled
        and context-specific disabled rules existed. The base .sol-action-btn
        cursor:pointer on line 2169 won the specificity contest.
   FIX: Add a generic :disabled rule that covers all variants. */
.sol-action-btn:disabled,
.sol-action-btn[disabled] {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: auto; /* keep auto so cursor:not-allowed is visible */
}

/* Prevent hover effects on disabled buttons */
.sol-action-btn:disabled:hover,
.sol-action-btn[disabled]:hover {
    transform: none;
    box-shadow: none;
}

.sol-action-btn.ghost {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(226, 232, 240, 0.95);
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 2px 4px rgba(0, 0, 0, 0.1);
}

.sol-action-btn.ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(59, 130, 246, 0.4);
    color: #f1f5f9;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        0 0 16px rgba(59, 130, 246, 0.15);
    transform: translateY(-1px);
}

.sol-action-btn.ghost:focus-visible {
    outline: 2px solid var(--sol-accent-primary);
    outline-offset: 2px;
}

.sol-action-btn svg {
    width: 18px;
    height: 18px;
}

/* Voice Dictation Recording State (2025-12-27) */
.sol-action-btn.recording {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.5);
    color: #f87171;
    animation: sol-pulse-recording 1.5s infinite;
}

.sol-action-btn.recording:hover {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.7);
    color: #fca5a5;
}

@keyframes sol-pulse-recording {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(239, 68, 68, 0);
    }
}

/* Audio Upload Transcribing State (2026-02-14) */
.sol-action-btn.transcribing {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    color: #60a5fa;
    cursor: wait;
}

.sol-action-btn.transcribing:hover {
    background: rgba(59, 130, 246, 0.2);
    border-color: rgba(59, 130, 246, 0.6);
    color: #93c5fd;
}

/* Rail inline audio/voice quick reference (2026-02-26) */
/* FIX (2026-03-09): Hidden permanently — consumed 42px of dead weight after day 1.
   Tooltips on Upload Audio and mic button provide the same guidance on hover. */
.rail-audio-help {
    display: none;
}

.rail-audio-help kbd {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    font-family: inherit;
}

.rail-audio-help i.ph {
    font-size: 12px;
    vertical-align: -1px;
}

/* Audio Upload Controls Group (2026-02-26) */
/* WHY: Preset selector, diarize toggle, and SRT download grouped next to upload button */
.audio-upload-group {
    display: flex;
    align-items: center;
    gap: 4px;
}

.audio-preset-select {
    appearance: none;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid rgba(148, 163, 184, 0.15);
    border-radius: var(--sol-radius-md, 6px);
    color: var(--sol-text-secondary, #94a3b8);
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
    max-width: 72px;
}

.audio-preset-select:focus {
    border-color: rgba(59, 130, 246, 0.5);
    outline: none;
}

.audio-diarize-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 4px;
    border-radius: var(--sol-radius-md, 6px);
    color: var(--sol-text-tertiary, #64748b);
    transition: color 0.15s, background 0.15s;
}

.audio-diarize-toggle input { display: none; }

.audio-diarize-toggle:hover {
    color: var(--sol-text-secondary, #94a3b8);
    background: rgba(148, 163, 184, 0.08);
}

.audio-diarize-toggle:has(input:checked) {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.12);
}

.audio-diarize-toggle i { font-size: 16px; }

/* SRT download button — shown after diarized transcription completes */
.audio-srt-download {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--sol-radius-md, 6px);
    padding: 3px 8px;
    cursor: pointer;
    transition: background 0.15s;
}

.audio-srt-download:hover {
    background: rgba(59, 130, 246, 0.15);
}

/* Audio Upload Status Strip (2026-02-25) */
/* WHY: Shows filename + size during transcription so user sees their file was received */
.audio-upload-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    margin: 4px 0;
    font-size: 12px;
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: var(--sol-radius-md, 6px);
    animation: audioStatusPulse 2s ease-in-out infinite;
}

.audio-upload-status strong {
    color: #93c5fd;
    font-weight: 600;
}

@keyframes audioStatusPulse {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}

/* Voice Dictation Hint Popup (2025-12-27) */
.sol-hint-popup {
    position: fixed;
    bottom: 80px;
    right: 24px;
    z-index: 1000;
    max-width: 320px;
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    animation: sol-hint-fade-in 0.3s ease;
}

.sol-hint-content {
    padding: var(--sol-space-md);
}

.sol-hint-content strong {
    display: block;
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-xs);
}

.sol-hint-content p {
    color: var(--sol-text-secondary);
    font-size: 0.875rem;
    line-height: 1.5;
    margin: 0 0 var(--sol-space-sm) 0;
}

.sol-hint-content kbd {
    display: inline-block;
    padding: 2px 6px;
    font-family: var(--sol-font-mono);
    font-size: 0.75rem;
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: 4px;
}

.sol-hint-dismiss {
    display: block;
    width: 100%;
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: var(--sol-accent);
    color: var(--sol-bg-primary);
    border: none;
    border-radius: var(--sol-radius-sm);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.sol-hint-dismiss:hover {
    background: var(--sol-accent-hover);
}

@keyframes sol-hint-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Signals Banner */
.sol-signals-banner {
    display: none;
    flex-wrap: wrap;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-md);
    background: var(--sol-bg-secondary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    margin-bottom: var(--sol-space-lg);
}

.sol-signals-banner.visible {
    display: flex;
}

.sol-signal-alert {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-sm) var(--sol-space-md);
    border-radius: var(--sol-radius-md);
    font-size: 0.85rem;
    font-weight: 500;
}

.sol-signal-alert.critical {
    background: var(--sol-critical-bg);
    border: 1px solid var(--sol-critical-border);
    color: var(--sol-critical);
}

.sol-signal-alert.warning {
    background: var(--sol-warning-bg);
    border: 1px solid var(--sol-warning-border);
    color: var(--sol-warning);
}

.sol-signal-alert svg {
    width: 16px;
    height: 16px;
}

/* Clinical Grid - Animated entrance */
@keyframes grid-entrance {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes panel-entrance {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.sol-clinical-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sol-space-lg);
    /* Hidden by default */
    opacity: 0;
    pointer-events: none;
}

.sol-clinical-grid.visible {
    opacity: 1;
    pointer-events: auto;
    animation: grid-entrance 0.35s ease-out;
}

/* Staggered panel entrance within grid */
.sol-clinical-grid.visible > * {
    animation: panel-entrance 0.3s ease-out backwards;
}

.sol-clinical-grid.visible > *:nth-child(1) { animation-delay: 50ms; }
.sol-clinical-grid.visible > *:nth-child(2) { animation-delay: 100ms; }
.sol-clinical-grid.visible > *:nth-child(3) { animation-delay: 150ms; }
.sol-clinical-grid.visible > *:nth-child(4) { animation-delay: 200ms; }
.sol-clinical-grid.visible > *:nth-child(5) { animation-delay: 250ms; }
.sol-clinical-grid.visible > *:nth-child(6) { animation-delay: 300ms;
}

/* ==========================================================================
   SIGNAL SYSTEM - Color-blind-safe problem severity indicators
   Auto-computed from priority_score + severity + trajectory
   Hatch patterns provide redundant visual encoding for CVD/grayscale
   ========================================================================== */

/* Problem Signal Badge - shown in problem cards */
.problem-signal-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    margin-left: 6px;
    position: relative;
    flex-shrink: 0;
    transition: transform var(--sol-transition-fast);
}

.problem-signal-badge .signal-indicator {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: 800;
    color: var(--sol-bg-primary);
}

/* Neutral - hidden */
.problem-signal-badge.signal-neutral {
    display: none;
}

/* Info - blue solid */
.problem-signal-badge.signal-info .signal-indicator {
    background: var(--sol-info);
    box-shadow: 0 0 6px var(--sol-info-bg);
}

/* Notice - yellow solid */
.problem-signal-badge.signal-notice .signal-indicator {
    background: var(--sol-notice);
    box-shadow: 0 0 6px var(--sol-notice-bg);
}

/* Warning - orange with diagonal stripes (color-blind-safe) */
.problem-signal-badge.signal-warning .signal-indicator {
    background:
        repeating-linear-gradient(
            45deg,
            var(--sol-warning),
            var(--sol-warning) 2px,
            rgba(255, 255, 255, 0.3) 2px,
            rgba(255, 255, 255, 0.3) 4px
        );
    box-shadow: 0 0 8px var(--sol-warning-bg);
}

/* Critical - red with crosshatch (color-blind-safe) */
.problem-signal-badge.signal-critical .signal-indicator {
    background:
        repeating-linear-gradient(
            45deg,
            var(--sol-critical),
            var(--sol-critical) 2px,
            rgba(255, 255, 255, 0.25) 2px,
            rgba(255, 255, 255, 0.25) 4px
        ),
        repeating-linear-gradient(
            -45deg,
            var(--sol-critical),
            var(--sol-critical) 2px,
            rgba(255, 255, 255, 0.25) 2px,
            rgba(255, 255, 255, 0.25) 4px
        );
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
    animation: signal-pulse-critical 2s ease-in-out infinite;
}

@keyframes signal-pulse-critical {
    0%, 100% {
        box-shadow: 0 0 8px rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
    }
}

/* Hover/focus states for accessibility */
.problem-card-2d:hover .problem-signal-badge,
.problem-card-2d:focus-within .problem-signal-badge,
.background-card:hover .problem-signal-badge {
    transform: scale(1.15);
}

/* Signal badge in patient sidebar cards */
.sol-patient-card .problem-signal-badge {
    width: 14px;
    height: 14px;
}

.sol-patient-card .problem-signal-badge .signal-indicator {
    width: 10px;
    height: 10px;
    font-size: 7px;
}

/* High contrast mode support */
@media (forced-colors: active) {
    .problem-signal-badge .signal-indicator {
        forced-color-adjust: none;
        border: 2px solid CanvasText;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .problem-signal-badge.signal-critical .signal-indicator {
        animation: none;
    }

    /* WHY: Header radial gradients are decorative motion-adjacent complexity.
       Flatten to solid background for reduced-motion users. */
    .sol-header,
    .sol-top-nav {
        background: var(--sol-bg-secondary);
    }

    .sol-sidebar {
        background: none;
    }
}

/* ==========================================================================
   Clinical Grid V2 (2025-12-11)
   3-column layout: Timeline | Problems | Labs+Vitals
   Optimized for timeline-focused clinical workflow
   ========================================================================== */

.sol-clinical-grid.sol-clinical-grid-v2 {
    grid-template-columns: 2fr 1.5fr 1.5fr;
    /* FIX (2026-04-09): Row 1 must guarantee enough height for Labs+Vitals stack.
       ROOT CAUSE: auto rows collapsed to near-zero when Timeline/Problems had little content,
       crushing the Labs+Vitals stack panels to 1-2 visible lines. */
    grid-template-rows: minmax(420px, auto) auto;
}

/* Timeline: prominent left column, spans both rows */
.sol-timeline-prominent {
    grid-column: 1;
    grid-row: 1 / 3;
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
}

/* Problems: center column, row 1 */
.sol-clinical-grid-v2 .sol-problems-panel {
    grid-column: 2;
    grid-row: 1;
}

/* Labs + Vitals stack: right column, row 1 */
.sol-labs-vitals-stack {
    grid-column: 3;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-md);
}

.sol-labs-vitals-stack .sol-clinical-panel {
    flex: 1;
    /* FIX (2026-04-09): Changed from min-height:0 which allowed panels to collapse to nothing.
       ROOT CAUSE: flex:1 of a short parent + min-height:0 = zero visible content.
       180px guarantees at least the panel header + ~4 lab items or 2 rows of vitals. */
    min-height: 180px;
}

/* Medications: spans columns 2-3, row 2 */
.sol-clinical-grid-v2 .sol-meds-panel {
    grid-column: 2;
    grid-row: 2;
}

/* Clinical Scores: column 3, row 2 */
.sol-clinical-grid-v2 .sol-scores-panel {
    grid-column: 3;
    grid-row: 2;
}

/* Responsive: fall back to 2-column on narrower screens */
@media (max-width: 1200px) {
    .sol-clinical-grid.sol-clinical-grid-v2 {
        grid-template-columns: 1fr 1fr;
        /* FIX (2026-04-09): Row 2 (Problems + Labs/Vitals) needs min-height guarantee */
        grid-template-rows: auto minmax(380px, auto) auto;
    }

    .sol-timeline-prominent {
        grid-column: 1 / 3;
        grid-row: 1;
        max-height: 350px;
    }

    .sol-clinical-grid-v2 .sol-problems-panel {
        grid-column: 1;
        grid-row: 2;
    }

    .sol-labs-vitals-stack {
        grid-column: 2;
        grid-row: 2;
    }

    .sol-clinical-grid-v2 .sol-meds-panel {
        grid-column: 1;
        grid-row: 3;
    }

    .sol-clinical-grid-v2 .sol-scores-panel {
        grid-column: 2;
        grid-row: 3;
    }
}

/* Responsive: single column on mobile */
@media (max-width: 768px) {
    .sol-clinical-grid.sol-clinical-grid-v2 {
        grid-template-columns: 1fr;
    }

    .sol-timeline-prominent,
    .sol-clinical-grid-v2 .sol-problems-panel,
    .sol-labs-vitals-stack,
    .sol-clinical-grid-v2 .sol-meds-panel,
    .sol-clinical-grid-v2 .sol-scores-panel {
        grid-column: 1;
        grid-row: auto;
    }

    .sol-timeline-prominent {
        max-height: 300px;
    }
}

.sol-clinical-panel {
    background: var(--sol-bg-secondary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-lg);
    /* FIX (2026-04-09): Changed from overflow:hidden which clipped panel-content scrollbar.
       ROOT CAUSE: Parent overflow:hidden prevented child overflow-y:auto from working,
       so labs/vitals/meds content beyond the visible area was silently clipped.
       Using overflow:clip preserves border-radius clipping without creating a scroll context
       that interferes with children's scroll behavior. Horizontal clip prevents layout blowout. */
    overflow: clip;
    overflow-x: clip;
    /* Smooth content transitions */
    transition: opacity 0.15s ease;
}

.sol-clinical-panel.full-width {
    grid-column: span 2;
}

/* Panel type variants (extend .sol-clinical-panel) */
.sol-problems-panel,
.sol-labs-panel,
.sol-vitals-panel,
.sol-meds-panel {
    /* Inherits from .sol-clinical-panel */
}

/* Shared card header pattern — unifies labs/vitals/problem/kanban header strips (26.1-03).
   Defines the canonical values; existing selectors (.sol-panel-header, .kanban-column-header,
   .problem-card__header) are aligned to match these values below. */
.sol-card-header {
    padding: var(--sol-space-md) var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--sol-text-primary);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sol-space-sm);
}

.sol-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Canonical values per .sol-card-header (26.1-03) */
    padding: var(--sol-space-md) var(--sol-space-lg);
    background: var(--sol-bg-tertiary);
    border-bottom: 1px solid var(--sol-border-subtle);
    font-size: 0.9rem;
    font-weight: 600;
    gap: var(--sol-space-sm);
}

.sol-panel-title {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    font-size: 0.9rem;
    font-weight: 600;
}

.sol-panel-title svg {
    width: 18px;
    height: 18px;
    color: var(--sol-accent-primary);
}

.sol-panel-count,
.sol-panel-timestamp {
    font-size: 0.75rem;
    color: var(--sol-text-tertiary);
}

.sol-panel-action {
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: transparent;
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    color: var(--sol-text-secondary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-panel-action:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-panel-content {
    padding: var(--sol-space-md);
    max-height: 400px;
    overflow-y: auto;
}

/* Problems and Labs panels: remove height constraint for better content flow */
.sol-problems-panel .sol-panel-content,
.sol-labs-panel .sol-panel-content {
    max-height: none;
}

/* Problem Space View: expand panel to accommodate MVP 2D visualization */
.sol-problems-panel:has(.problem-space-container:not(.hidden)) {
    min-height: 850px;
    height: calc(100vh - 150px);
    max-height: 1250px;
}

/* Fallback for browsers without :has() - JS can add this class */
.sol-problems-panel.space-view-active {
    min-height: 850px;
    height: calc(100vh - 150px);
    max-height: 1250px;
}

.sol-panel-empty {
    text-align: center;
    padding: var(--sol-space-lg);
    color: var(--sol-text-tertiary);
    font-size: 0.875rem;
}

.sol-panel-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--sol-space-md);
    color: var(--sol-text-muted);
}

.sol-panel-empty-icon svg {
    width: 100%;
    height: 100%;
}

.sol-panel-empty-title {
    font-weight: 600;
    color: var(--sol-text-secondary);
    margin-bottom: var(--sol-space-xs);
}

.sol-panel-empty-desc {
    color: var(--sol-text-tertiary);
    font-size: 0.8rem;
}

/* Empty state variations */
.sol-empty,
.sol-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    text-align: center;
    color: var(--sol-text-tertiary);
}

.sol-empty--error {
    color: var(--sol-critical);
}

/* Utility classes */
.sol-text-tertiary {
    color: var(--sol-text-tertiary);
}

/* Pill/badge styles */
.sol-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--sol-radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
    background: var(--sol-bg-hover);
    color: var(--sol-text-secondary);
}

.sol-pill--pending {
    background: var(--sol-warning-bg);
    color: var(--sol-warning);
}

.sol-pill--worsening {
    background: var(--severity-worsening-bg, var(--sol-warning-bg));
    color: var(--severity-worsening, var(--sol-warning));
}

/* Link button */
.sol-link-btn {
    background: transparent;
    border: none;
    color: var(--sol-accent-primary);
    cursor: pointer;
    font-size: inherit;
    text-decoration: underline;
}

.sol-link-btn:hover {
    color: var(--sol-accent-hover);
}

/* Filter group */
.sol-filter-group {
    display: flex;
    gap: var(--sol-space-xs);
}

/* Card review state */
.sol-card-review {
    border-color: var(--sol-accent-primary);
    background: var(--sol-bg-elevated);
}

.sol-card-worsening {
    border-left-color: var(--severity-worsening, var(--sol-warning));
}

/* Slide-in animation */
@keyframes sol-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.sol-slide-in {
    animation: sol-slide-in 0.3s ease;
}

/* Problem Items */
.sol-problem-item {
    display: flex;
    align-items: flex-start;
    gap: var(--sol-space-md);
    padding: var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-md);
    margin-bottom: var(--sol-space-sm);
    transition: var(--sol-transition-base);
}

.sol-problem-item:hover {
    background: var(--sol-bg-hover);
}

.sol-problem-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 6px;
    flex-shrink: 0;
}

.sol-problem-indicator.critical { background: var(--severity-critical, var(--sol-critical)); }
.sol-problem-indicator.worsening { background: var(--severity-worsening, var(--sol-warning)); }
.sol-problem-indicator.stable { background: var(--severity-stable, var(--sol-stable)); }
.sol-problem-indicator.resolved { background: var(--severity-resolved, var(--sol-resolved)); }

.sol-problem-content {
    flex: 1;
}

.sol-problem-name {
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: var(--sol-space-xs);
}

.sol-problem-evidence {
    font-size: 0.8rem;
    color: var(--sol-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: var(--sol-space-sm);
}

.sol-evidence-tag {
    padding: 2px 6px;
    background: var(--sol-bg-hover);
    border-radius: var(--sol-radius-sm);
    font-size: 0.7rem;
}

.sol-problem-trajectory {
    display: flex;
    align-items: center;
    gap: var(--sol-space-xs);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--sol-radius-sm);
}

.sol-problem-trajectory.worsening {
    background: var(--severity-worsening-bg, var(--sol-warning-bg));
    color: var(--severity-worsening, var(--sol-warning));
}

.sol-problem-trajectory.improving {
    background: var(--severity-improving-bg, var(--sol-stable-bg));
    color: var(--severity-improving, var(--sol-stable));
}

.sol-problem-trajectory.new {
    background: var(--sol-critical-bg);
    color: var(--sol-critical);
}

.sol-problem-trajectory.stable {
    background: var(--sol-bg-hover);
    color: var(--sol-text-tertiary);
}

.sol-problem-trajectory.resolved {
    background: var(--sol-resolved-bg);
    color: var(--sol-resolved);
}

/* Lab Items */
.sol-lab-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-sm) var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-sm);
    margin-bottom: var(--sol-space-xs);
}

.sol-lab-name {
    font-size: 0.85rem;
    font-weight: 500;
}

.sol-lab-value {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.9rem;
    font-weight: 600;
}

.sol-lab-value.high { color: var(--sol-critical); }
.sol-lab-value.low { color: var(--sol-warning); }
.sol-lab-value.normal { color: var(--sol-stable); }

.sol-lab-unit {
    color: var(--sol-text-tertiary);
    font-size: 0.75rem;
    font-weight: 400;
}

.sol-lab-trend {
    display: flex;
    align-items: center;
    font-size: 0.7rem;
}

.sol-lab-trend.up { color: var(--sol-trend-up); }
.sol-lab-trend.down { color: var(--sol-trend-down); }
.sol-lab-trend.stable { color: var(--sol-trend-stable); }

.sol-lab-trend svg {
    width: 14px;
    height: 14px;
}

/* Vitals Grid */
.sol-vitals-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sol-space-sm);
    /* FIX (2026-04-09): 6 vitals in 3x2 grid needs minimum height to display both rows.
       ROOT CAUSE: Without this, grid collapsed to show only 1 row when parent was short. */
    min-height: 120px;
}

.sol-vital-item {
    padding: var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-md);
    text-align: center;
}

.sol-vital-label {
    font-size: 0.7rem;
    color: var(--sol-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: var(--sol-space-xs);
}

.sol-vital-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 1.25rem;
    font-weight: 700;
}

.sol-vital-value.abnormal { color: var(--sol-critical); }
.sol-vital-value.borderline { color: var(--sol-warning); }
.sol-vital-value.critical {
    color: var(--sol-critical);
    font-weight: 800;
}

/* Vital out-of-range background tints — scannable at a glance */
/* WHY: Text color alone is insufficient for rapid triage scanning */
/* TRADEOFF: :has() unsupported in very old browsers; degrades to text-color-only */
.sol-vital-item:has(.sol-vital-value.critical) {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
}

.sol-vital-item:has(.sol-vital-value.abnormal) {
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.15);
}

.sol-vital-item:has(.sol-vital-value.borderline) {
    background: rgba(245, 158, 11, 0.05);
    border: 1px solid rgba(245, 158, 11, 0.12);
}

.sol-vital-unit {
    font-size: 0.75rem;
    color: var(--sol-text-tertiary);
    font-weight: 400;
}

.sol-vital-trend {
    font-size: 0.7rem;
    margin-top: var(--sol-space-xs);
}

.sol-vital-trend.improving { color: var(--severity-improving, var(--sol-stable)); }
.sol-vital-trend.worsening { color: var(--severity-worsening, var(--sol-critical)); }

/* Medication Items */
.sol-med-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--sol-space-sm) var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-sm);
    margin-bottom: var(--sol-space-xs);
}

.sol-med-info {
    flex: 1;
}

.sol-med-name {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 2px;
}

.sol-med-dose {
    font-size: 0.75rem;
    color: var(--sol-text-secondary);
}

.sol-med-status {
    padding: 2px 6px;
    border-radius: var(--sol-radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.sol-med-status.active {
    background: var(--sol-stable-bg);
    color: var(--sol-stable);
}

.sol-med-status.prn {
    background: var(--sol-warning-bg);
    color: var(--sol-warning);
}

.sol-med-status.hold {
    background: var(--sol-resolved-bg);
    color: var(--sol-resolved);
}

/* --------------------------------------------------------------------------
   HOSPITALIZATION TIMELINE
   -------------------------------------------------------------------------- */
.sol-timeline-panel {
    min-height: 320px;
}

.sol-timeline-panel .sol-panel-header {
    flex-wrap: wrap;
    gap: var(--sol-space-md);
}

.sol-timeline-header-controls {
    display: flex;
    align-items: center;
    gap: var(--sol-space-lg);
}

.sol-timeline-zoom {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-md);
}

.sol-zoom-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sol-bg-hover);
    border: none;
    border-radius: var(--sol-radius-sm);
    color: var(--sol-text-secondary);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--sol-transition-fast);
}

.sol-zoom-btn:hover {
    background: var(--sol-accent-primary);
    color: white;
}

.sol-zoom-label {
    font-size: 0.7rem;
    color: var(--sol-text-tertiary);
    min-width: 60px;
    text-align: center;
}

.sol-timeline-range-btns {
    display: flex;
    gap: var(--sol-space-xs);
}

.sol-timeline-btn {
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: transparent;
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    color: var(--sol-text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-timeline-btn:hover {
    background: var(--sol-bg-hover);
}

.sol-timeline-btn.active {
    background: var(--sol-accent-primary);
    border-color: var(--sol-accent-primary);
    color: white;
}

/* Timeline Legend */
.sol-timeline-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sol-space-md);
    padding: var(--sol-space-sm) var(--sol-space-lg);
    background: var(--sol-bg-tertiary);
    border-bottom: 1px solid var(--sol-border-subtle);
}

.sol-legend-item {
    display: flex;
    align-items: center;
    gap: var(--sol-space-xs);
    font-size: 0.7rem;
    color: var(--sol-text-tertiary);
}

.sol-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.sol-legend-dot.diagnosis { background: #ef4444; }
.sol-legend-dot.procedure { background: #8b5cf6; }
.sol-legend-dot.consult { background: #3b82f6; }
.sol-legend-dot.medication { background: #22c55e; }
.sol-legend-dot.lab-critical { background: #f59e0b; }
.sol-legend-dot.clinical-change { background: #ec4899; }

/* Main Timeline Container */
.sol-hospitalization-timeline {
    display: flex;
    align-items: stretch;
    padding: var(--sol-space-lg);
    min-height: 220px;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Admission/Discharge Markers */
.sol-timeline-admission-marker,
.sol-timeline-discharge-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 40px;
    width: 50px;
    flex-shrink: 0;
}

.sol-admission-label,
.sol-discharge-label {
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: var(--sol-accent-primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: var(--sol-radius-sm);
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
}

.sol-discharge-label {
    background: var(--sol-stable);
}

.sol-hidden {
    display: none !important;
}

/* Timeline Track Container */
.sol-timeline-track-container {
    flex: 1;
    position: relative;
    min-width: 400px;
}

/* Timeline Track (days grid) */
.sol-timeline-track {
    display: flex;
    height: 100%;
    border-left: 2px solid var(--sol-border-default);
    border-right: 2px solid var(--sol-border-default);
}

.sol-timeline-day-column {
    flex: 1;
    min-width: 80px;
    border-right: 1px solid var(--sol-border-subtle);
    position: relative;
}

.sol-timeline-day-column:last-child {
    border-right: none;
}

.sol-timeline-day-column.today {
    background: rgba(59, 130, 246, 0.05);
}

.sol-timeline-day-column.weekend {
    background: rgba(255, 255, 255, 0.02);
}

/* Day Header */
.sol-day-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: var(--sol-bg-tertiary);
    border-bottom: 1px solid var(--sol-border-subtle);
    text-align: center;
}

.sol-day-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sol-text-primary);
}

.sol-day-date {
    font-size: 0.65rem;
    color: var(--sol-text-tertiary);
}

.sol-day-header.today .sol-day-label {
    color: var(--sol-accent-primary);
}

/* Trajectory Lanes */
.sol-trajectory-lanes {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 30px;
    pointer-events: none;
}

.sol-trajectory-lane {
    position: absolute;
    left: 0;
    right: 0;
    height: 24px;
}

.sol-trajectory-line {
    position: absolute;
    height: 4px;
    border-radius: 2px;
    top: 10px;
}

.sol-trajectory-line.critical { background: var(--severity-critical, var(--sol-critical)); opacity: 0.7; }
.sol-trajectory-line.worsening { background: var(--severity-worsening, var(--sol-warning)); opacity: 0.7; }
.sol-trajectory-line.stable { background: var(--severity-stable, var(--sol-stable)); opacity: 0.7; }
.sol-trajectory-line.resolved { background: var(--severity-resolved, var(--sol-resolved)); opacity: 0.5; }

.sol-trajectory-label {
    position: absolute;
    left: 4px;
    top: -2px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--sol-text-secondary);
    white-space: nowrap;
    background: var(--sol-bg-secondary);
    padding: 0 4px;
    border-radius: 2px;
}

/* Event Markers Layer */
.sol-timeline-events-layer {
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.sol-event-marker {
    position: absolute;
    pointer-events: auto;
    cursor: pointer;
    z-index: 10;
    transition: transform var(--sol-transition-fast);
}

.sol-event-marker:hover {
    transform: scale(1.3);
    z-index: 20;
}

.sol-event-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--sol-bg-secondary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.sol-event-dot.diagnosis { background: #ef4444; }
.sol-event-dot.procedure { background: #8b5cf6; }
.sol-event-dot.consult { background: #3b82f6; }
.sol-event-dot.medication { background: #22c55e; }
.sol-event-dot.lab-critical { background: #f59e0b; }
.sol-event-dot.clinical-change { background: #ec4899; }

.sol-event-marker.stacked .sol-event-dot {
    box-shadow:
        0 2px 8px rgba(0,0,0,0.3),
        3px 3px 0 -1px var(--sol-bg-secondary),
        3px 3px 0 0 currentColor,
        6px 6px 0 -1px var(--sol-bg-secondary),
        6px 6px 0 0 currentColor;
}

.sol-event-count {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 16px;
    height: 16px;
    background: var(--sol-critical);
    color: white;
    font-size: 0.6rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Now Indicator */
.sol-now-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    z-index: 15;
    pointer-events: none;
}

.sol-now-line {
    position: absolute;
    top: 45px;
    bottom: 0;
    left: 0;
    width: 2px;
    background: var(--sol-accent-primary);
    box-shadow: 0 0 8px var(--sol-accent-primary);
}

.sol-now-label {
    position: absolute;
    top: 45px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    padding: 2px 6px;
    background: var(--sol-accent-primary);
    color: white;
    font-size: 0.6rem;
    font-weight: 600;
    border-radius: var(--sol-radius-sm);
    white-space: nowrap;
}

/* Timeline Detail Panel */
.sol-timeline-detail-panel {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: var(--sol-space-sm);
    padding: var(--sol-space-md);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border-default);
    border-radius: var(--sol-radius-md);
    min-width: 250px;
    max-width: 350px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    z-index: 100;
}

.sol-timeline-detail-panel.visible {
    display: block;
    animation: sol-fade-in-up 0.2s ease;
}

@keyframes sol-fade-in-up {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.sol-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--sol-space-sm);
}

.sol-detail-time {
    font-size: 0.75rem;
    color: var(--sol-text-tertiary);
    font-family: 'JetBrains Mono', monospace;
}

.sol-detail-type {
    padding: 2px 8px;
    border-radius: var(--sol-radius-sm);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}

.sol-detail-type.diagnosis { background: rgba(239, 68, 68, 0.2); color: #ef4444; }
.sol-detail-type.procedure { background: rgba(139, 92, 246, 0.2); color: #8b5cf6; }
.sol-detail-type.consult { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }
.sol-detail-type.medication { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.sol-detail-type.lab-critical { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.sol-detail-type.clinical-change { background: rgba(236, 72, 153, 0.2); color: #ec4899; }

.sol-detail-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: var(--sol-space-xs);
}

.sol-detail-content {
    font-size: 0.85rem;
    color: var(--sol-text-secondary);
    line-height: 1.5;
    margin-bottom: var(--sol-space-sm);
}

.sol-detail-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sol-space-xs);
    padding-top: var(--sol-space-sm);
    border-top: 1px solid var(--sol-border-subtle);
}

.sol-detail-link {
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    font-size: 0.7rem;
    color: var(--sol-text-secondary);
    cursor: pointer;
    transition: var(--sol-transition-fast);
}

.sol-detail-link:hover {
    background: var(--sol-accent-primary);
    border-color: var(--sol-accent-primary);
    color: white;
}

/* --------------------------------------------------------------------------
   ACTIONS SIDEBAR (Right)
   -------------------------------------------------------------------------- */
.sol-actions-sidebar {
    background: var(--sol-bg-secondary);
    border-left: 1px solid var(--sol-border-subtle);
    padding: var(--sol-space-lg);
    padding-top: calc(var(--sol-space-lg) + 60px); /* Extra space for header overlap */
    overflow-y: auto;
}

.sol-sidebar-section {
    margin-bottom: var(--sol-space-xl);
}

.sol-section-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--sol-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--sol-space-md);
}

/* Alerts List */
.sol-alerts-list {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-sm);
}

.sol-alert-item {
    padding: var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-md);
    border-left: 3px solid var(--sol-critical);
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-alert-item:hover {
    background: var(--sol-bg-hover);
}

.sol-alert-item.warning {
    border-left-color: var(--sol-warning);
}

.sol-alert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sol-space-xs);
}

.sol-alert-type {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--sol-critical);
}

.sol-alert-item.warning .sol-alert-type {
    color: var(--sol-warning);
}

.sol-alert-time {
    font-size: 0.7rem;
    color: var(--sol-text-muted);
}

.sol-alert-patient {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: var(--sol-space-xs);
}

.sol-alert-message {
    font-size: 0.8rem;
    color: var(--sol-text-secondary);
}

.sol-alert-empty {
    text-align: center;
    padding: var(--sol-space-lg);
    color: var(--sol-text-tertiary);
    font-size: 0.875rem;
}

/* Quick Actions (Sidebar only - uses 2-column grid) */
.sol-actions-sidebar .sol-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sol-space-sm);
}

/* Sidebar-only button styling (vertical layout) */
.sol-actions-sidebar .sol-quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    color: var(--sol-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-actions-sidebar .sol-quick-action-btn:hover {
    background: var(--sol-bg-hover);
    border-color: var(--sol-border-default);
    color: var(--sol-text-primary);
}

.sol-actions-sidebar .sol-quick-action-btn svg {
    width: 20px;
    height: 20px;
}

/* Primary/Highlighted Quick Action Button */
.sol-quick-action-btn--primary {
    background: var(--sol-accent);
    border-color: var(--sol-accent);
    color: #fff;
}

.sol-quick-action-btn--primary:hover {
    background: var(--sol-accent-hover);
    border-color: var(--sol-accent-hover);
    color: #fff;
}

/* API Status */
.sol-api-status {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-sm);
}

.sol-status-item {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    font-size: 0.8rem;
}

.sol-status-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sol-text-muted);
}

.sol-status-indicator.online {
    background: var(--sol-stable);
    box-shadow: 0 0 8px var(--sol-stable);
}

.sol-status-indicator.offline {
    background: var(--sol-warning);
}

.sol-status-indicator.error {
    background: var(--sol-critical);
    animation: sol-pulse 2s ease-in-out infinite;
}

@keyframes sol-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.sol-status-label {
    color: var(--sol-text-secondary);
}

/* System Status Row */
.sol-system-status {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-sm);
}

.sol-status-row {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    font-size: 0.8rem;
}

.sol-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sol-text-muted);
}

.sol-status-dot.online {
    background: var(--sol-stable);
    box-shadow: 0 0 8px var(--sol-stable);
}

/* --------------------------------------------------------------------------
   MODAL
   -------------------------------------------------------------------------- */
.sol-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
}

.sol-modal-overlay.visible {
    display: flex;
}

.sol-modal-content {
    background: var(--sol-bg-secondary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-xl);
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.sol-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
}

.sol-modal-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
}

.sol-modal-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--sol-text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    border-radius: var(--sol-radius-sm);
    transition: var(--sol-transition-base);
}

.sol-modal-close:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-modal-body {
    flex: 1;
    padding: var(--sol-space-lg);
    overflow-y: auto;
}

.sol-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-lg);
    border-top: 1px solid var(--sol-border-subtle);
}

.sol-modal-btn {
    padding: var(--sol-space-sm) var(--sol-space-lg);
    border-radius: var(--sol-radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-modal-btn.secondary {
    background: transparent;
    border: 1px solid var(--sol-border-subtle);
    color: var(--sol-text-secondary);
}

.sol-modal-btn.secondary:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-modal-btn.primary {
    background: var(--sol-accent-primary);
    border: none;
    color: white;
}

.sol-modal-btn.primary:hover {
    background: var(--sol-accent-hover);
}

.sol-modal-btn.danger {
    background: var(--sol-critical);
    border: none;
    color: white;
}

.sol-modal-btn.danger:hover {
    background: #dc2626;
}

/* Toggle Switch */
.sol-toggle-switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
}

.sol-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.sol-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sol-critical);
    transition: var(--sol-transition-base);
    border-radius: 26px;
}

.sol-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    transition: var(--sol-transition-base);
    border-radius: 50%;
}

.sol-toggle-switch input:checked + .sol-toggle-slider {
    background: var(--sol-success);
}

.sol-toggle-switch input:checked + .sol-toggle-slider:before {
    transform: translateX(22px);
}

.sol-toggle-switch input:disabled + .sol-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Settings Modal */
.sol-settings-modal {
    width: min(1180px, 95vw);
    max-width: 1180px;
    max-height: 92vh;
}

#settingsModal {
    /* The global voice bar intentionally lives above ordinary app chrome.
       Settings is a modal control plane and must fully occlude that bar and
       its first-use hint while the operator is reading or changing controls. */
    z-index: 10020;
}

.sol-settings-section {
    margin-bottom: var(--sol-space-lg);
}

.sol-settings-section:last-child {
    margin-bottom: 0;
}

.sol-settings-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-sm);
}

.sol-settings-description {
    font-size: 0.875rem;
    color: var(--sol-text-muted);
    margin-bottom: var(--sol-space-md);
    line-height: 1.5;
}

.sol-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border-radius: var(--sol-radius-md);
    border: 1px solid var(--sol-border-subtle);
}

.sol-settings-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sol-settings-label > span:first-child {
    font-weight: 500;
    color: var(--sol-text-primary);
}

.sol-settings-sublabel {
    font-size: 0.75rem;
    color: var(--sol-text-muted);
}

.sol-settings-sublabel.enabled {
    color: var(--sol-success);
}

.sol-settings-sublabel.disabled {
    color: var(--sol-warning);
}

.sol-settings-hint {
    font-size: 0.75rem;
    color: var(--sol-text-muted);
    margin-top: var(--sol-space-sm);
    line-height: 1.4;
    opacity: 0.8;
}

.sol-settings-admin {
    margin-top: var(--sol-space-lg);
    padding-top: var(--sol-space-lg);
    border-top: 1px solid var(--sol-border-subtle);
}

.sol-settings-admin .sol-settings-section-title {
    color: var(--sol-warning);
}

/* Feature control deck (admin UI, 2026-07-18) */
.sol-settings-subsection {
    margin-top: 22px;
}

.sol-settings-subsection-title {
    margin: 0 0 6px;
    color: var(--sol-text-primary);
    font-size: 0.9rem;
    letter-spacing: 0.03em;
}

.sol-control-overview {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    overflow: hidden;
    border: 1px solid rgba(230, 154, 76, 0.22);
    border-radius: 14px;
    background:
        radial-gradient(circle at 92% 5%, rgba(230, 154, 76, 0.16), transparent 34%),
        linear-gradient(145deg, rgba(38, 32, 26, 0.96), rgba(20, 20, 20, 0.98));
}

.sol-control-overview::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.3;
    background-image: linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
    background-size: 100% 6px;
}

.sol-control-overview-copy,
.sol-control-tally {
    position: relative;
    z-index: 1;
}

.sol-control-overview-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sol-control-kicker {
    color: #d89c58;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.18em;
}

.sol-control-overview-copy strong {
    color: #fff8ec;
    font-size: 1.05rem;
    font-weight: 620;
}

.sol-control-overview-copy > span:last-child {
    color: #a79785;
    font-size: 0.74rem;
}

.sol-control-contract-warning {
    margin-top: 9px;
    padding: 9px 11px;
    border: 1px solid var(--sol-warning-border);
    border-radius: 8px;
    background: var(--sol-warning-bg);
    color: var(--sol-warning);
    font-size: 0.7rem;
    line-height: 1.4;
}

.sol-control-tally {
    display: flex;
    gap: 7px;
}

.sol-control-tally span {
    display: flex;
    align-items: baseline;
    gap: 5px;
    min-width: 58px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.2);
    color: #a99d90;
    font-size: 0.66rem;
    text-transform: uppercase;
}

.sol-control-tally b {
    color: #f5eee4;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
}

.sol-control-tally .is-attention {
    border-color: rgba(230, 154, 76, 0.24);
}

.sol-control-tally .is-attention b {
    color: #e6a45f;
}

.sol-control-toolbar {
    position: sticky;
    top: -16px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 0 8px;
    padding: 10px 0;
    background: linear-gradient(
        to bottom,
        var(--sol-bg-secondary) 82%,
        rgba(22, 25, 34, 0)
    );
}

.sol-control-search-wrap {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.sol-control-search-icon {
    position: absolute;
    top: 50%;
    left: 11px;
    color: #8e8377;
    font-size: 1rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.sol-flag-search {
    width: 100%;
    padding: 9px 12px 9px 32px;
    border: 1px solid var(--sol-border-default);
    border-radius: 9px;
    outline: none;
    background: rgba(10, 11, 14, 0.72);
    color: var(--sol-text-primary);
    font-size: 0.78rem;
}

.sol-flag-search:focus {
    border-color: rgba(230, 154, 76, 0.64);
    box-shadow: 0 0 0 3px rgba(230, 154, 76, 0.1);
}

.sol-control-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}

.sol-control-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 32px;
    padding: 5px 8px;
    border: 1px solid var(--sol-border-subtle);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--sol-text-secondary);
    font-size: 0.68rem;
    cursor: pointer;
}

.sol-control-filter span {
    min-width: 17px;
    padding: 1px 4px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--sol-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6rem;
    text-align: center;
}

.sol-control-filter:hover,
.sol-control-filter.is-active {
    border-color: rgba(230, 154, 76, 0.4);
    background: rgba(230, 154, 76, 0.09);
    color: #f0c58e;
}

.sol-control-filter.is-active span {
    background: rgba(230, 154, 76, 0.18);
    color: #f4c98f;
}

.sol-control-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
    color: var(--sol-text-muted);
    font-size: 0.65rem;
}

.sol-control-legend > span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.sol-control-legend i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--sol-stable);
}

.sol-control-legend i.is-evaluation {
    background: #d7954f;
}

.sol-control-legend i.is-dormant {
    background: #6c6a67;
}

.sol-control-legend .sol-control-legend-note {
    margin-left: auto;
    color: #8b7e70;
    font-style: italic;
}

.sol-control-areas {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sol-control-area {
    overflow: hidden;
    border: 1px solid var(--sol-border-subtle);
    border-radius: 13px;
    background: rgba(8, 9, 12, 0.28);
}

.sol-control-area-header {
    width: 100%;
    display: grid;
    grid-template-columns: 116px minmax(0, 1fr) auto 20px;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    border: 0;
    border-bottom: 1px solid var(--sol-border-subtle);
    background: linear-gradient(100deg, rgba(255, 255, 255, 0.035), transparent);
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.sol-control-area-header:hover {
    background: linear-gradient(100deg, rgba(230, 154, 76, 0.08), transparent);
}

.sol-control-area-index {
    color: #c79258;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.sol-control-area-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sol-control-area-copy strong {
    color: var(--sol-text-primary);
    font-size: 0.9rem;
}

.sol-control-area-copy small {
    overflow: hidden;
    color: var(--sol-text-muted);
    font-size: 0.69rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sol-control-area-count {
    color: #897f75;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.65rem;
}

.sol-control-area-chevron {
    color: #c79258;
    font-size: 1rem;
    text-align: center;
}

.sol-control-area-body {
    padding: 14px;
}

.sol-control-group + .sol-control-group {
    margin-top: 18px;
}

.sol-control-group-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px 8px;
    color: #c8beb3;
}

.sol-control-group-heading::after {
    content: "";
    height: 1px;
    flex: 1;
    background: linear-gradient(to right, rgba(255,255,255,0.1), transparent);
}

.sol-control-group-heading span {
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sol-control-group-heading small {
    order: 3;
    color: var(--sol-text-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.6rem;
}

.sol-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.sol-control-card {
    position: relative;
    min-width: 0;
    padding: 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 11px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.025), transparent 48%),
        rgba(23, 23, 24, 0.88);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
}

.sol-control-card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2px;
    background: #5f625f;
}

.sol-control-card.is-on::before {
    background: var(--sol-stable);
}

.sol-control-card.needs-attention::before {
    background: #d7954f;
}

.sol-control-card.lifecycle-stub::before,
.sol-control-card.lifecycle-inert::before,
.sol-control-card.lifecycle-dormant::before,
.sol-control-card.lifecycle-paused::before {
    background: #686864;
}

.sol-control-card:hover {
    border-color: rgba(230, 154, 76, 0.22);
    background-color: rgba(29, 28, 27, 0.96);
}

.sol-control-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sol-control-identity {
    min-width: 0;
}

.sol-control-title-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.sol-control-title-line h6 {
    margin: 0;
    color: #f1ece5;
    font-size: 0.82rem;
    font-weight: 620;
    line-height: 1.25;
}

.sol-control-identity > code {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #746e68;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.57rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sol-control-state {
    padding: 2px 5px;
    border-radius: 4px;
    background: rgba(110, 110, 110, 0.12);
    color: #96938f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.sol-control-state.is-on {
    background: var(--sol-stable-bg);
    color: #62cf7e;
}

.sol-control-switch {
    width: 40px;
    height: 22px;
    transform: scale(0.86);
    transform-origin: top right;
}

.sol-control-switch .sol-toggle-slider::before {
    width: 16px;
    height: 16px;
}

.sol-control-switch input:checked + .sol-toggle-slider {
    background: var(--sol-stable);
}

.sol-control-switch input:checked + .sol-toggle-slider::before {
    transform: translateX(18px);
}

.sol-control-readonly {
    flex-shrink: 0;
    padding: 4px 6px;
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 5px;
    background: rgba(148, 163, 184, 0.04);
    color: #716e6b;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
}

.sol-control-badges {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 9px;
}

.sol-control-badge {
    padding: 3px 6px;
    border: 1px solid rgba(74, 222, 128, 0.14);
    border-radius: 5px;
    background: rgba(74, 222, 128, 0.06);
    color: #78bb88;
    font-size: 0.57rem;
    line-height: 1.2;
}

.sol-control-badge.lifecycle-experimental,
.sol-control-badge.lifecycle-limited {
    border-color: rgba(230, 154, 76, 0.18);
    background: rgba(230, 154, 76, 0.07);
    color: #d7a263;
}

.sol-control-badge.lifecycle-paused,
.sol-control-badge.lifecycle-dormant,
.sol-control-badge.lifecycle-stub,
.sol-control-badge.lifecycle-inert {
    border-color: rgba(148, 163, 184, 0.12);
    background: rgba(148, 163, 184, 0.045);
    color: #8d8c89;
}

.sol-control-badge.is-timing {
    border-color: rgba(105, 160, 205, 0.16);
    background: rgba(105, 160, 205, 0.055);
    color: #85a9c5;
}

.sol-control-badge.is-warning {
    border-color: rgba(245, 158, 11, 0.2);
    background: var(--sol-warning-bg);
    color: var(--sol-warning);
}

.sol-control-purpose {
    margin: 9px 0 0;
    color: #aea59b;
    font-size: 0.7rem;
    line-height: 1.45;
}

.sol-control-impact {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 8px;
    margin-top: 9px;
    padding: 7px 8px;
    border-left: 2px solid rgba(230, 154, 76, 0.28);
    background: rgba(230, 154, 76, 0.045);
}

.sol-control-impact span {
    color: #c79358;
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.sol-control-impact p {
    margin: 0;
    color: #9f968d;
    font-size: 0.64rem;
    line-height: 1.35;
}

.sol-control-dependencies {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 7px;
}

.sol-control-dependency {
    padding: 2px 5px;
    border: 1px dashed rgba(230, 154, 76, 0.2);
    border-radius: 4px;
    color: #a9845c;
    font-size: 0.55rem;
}

.sol-control-life {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

.sol-control-life::before {
    content: "";
    position: absolute;
    top: 13px;
    right: 14%;
    left: 14%;
    height: 1px;
    background: linear-gradient(to right, #65594d, #97734d, #466451);
}

.sol-control-life-step {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

.sol-control-life-step i {
    width: 10px;
    height: 10px;
    margin-bottom: 3px;
    border: 2px solid #716353;
    border-radius: 50%;
    background: #1b1a19;
}

.sol-control-life-step.is-built i {
    border-color: #a4784b;
}

.sol-control-card.is-on .sol-control-life-step.is-today i {
    border-color: var(--sol-stable);
    background: #315d3b;
}

.sol-control-card.is-off .sol-control-life-step.is-today i {
    border-color: #77736e;
}

.sol-control-life-step span {
    color: #77716b;
    font-size: 0.5rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.sol-control-life-step strong {
    max-width: 100%;
    overflow: hidden;
    color: #aaa098;
    font-size: 0.58rem;
    font-weight: 560;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sol-control-life-step code {
    max-width: 100%;
    overflow: hidden;
    color: #69645f;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.49rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sol-control-empty {
    display: flex;
    min-height: 130px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    color: #a89f96;
    text-align: center;
}

.sol-control-empty[hidden] {
    display: none;
}

.sol-control-empty small {
    color: var(--sol-text-muted);
}

@media (max-width: 900px) {
    .sol-control-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .sol-control-filters {
        justify-content: flex-start;
    }

    .sol-control-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 640px) {
    .sol-settings-modal {
        width: 98vw;
        max-height: 96vh;
    }

    .sol-settings-modal .sol-modal-body {
        padding: 12px;
    }

    .sol-control-overview {
        align-items: stretch;
        flex-direction: column;
    }

    .sol-control-tally {
        flex-wrap: wrap;
    }

    .sol-control-area-header {
        grid-template-columns: minmax(0, 1fr) auto 18px;
    }

    .sol-control-area-index {
        grid-column: 1 / -1;
    }

    .sol-control-area-copy small,
    .sol-control-legend-note {
        display: none;
    }

    .sol-control-area-body {
        padding: 8px;
    }

    .sol-control-impact {
        grid-template-columns: 1fr;
    }
}

/* Confirm Modal */
.sol-confirm-modal {
    max-width: 400px;
}

.sol-confirm-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.sol-confirm-modal-overlay.visible {
    display: flex;
}

.sol-confirm-header {
    display: flex;
    align-items: center;
    gap: var(--sol-space-md);
    padding: var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
}

.sol-confirm-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sol-warning-bg);
    color: var(--sol-warning);
    border-radius: var(--sol-radius-md);
}

.sol-confirm-icon.danger {
    background: var(--sol-critical-bg);
    color: var(--sol-critical);
}

.sol-confirm-body {
    padding: var(--sol-space-lg);
    color: var(--sol-text-secondary);
    font-size: 0.9rem;
}

.sol-confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-lg);
    border-top: 1px solid var(--sol-border-subtle);
}

/* Problem Approval Checkboxes */
.sol-modal-subtitle {
    color: var(--sol-text-secondary);
    font-size: 0.875rem;
    margin-bottom: var(--sol-space-md);
}

.sol-problems-checklist {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-sm);
}

.sol-problem-checkbox {
    padding: var(--sol-space-sm) var(--sol-space-md);
    border-radius: var(--sol-radius-md);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border-subtle);
    transition: var(--sol-transition-base);
}

.sol-problem-checkbox:hover {
    background: var(--sol-bg-hover);
}

.sol-problem-checkbox.worsening {
    border-color: var(--severity-worsening, var(--sol-warning));
}

.sol-problem-checkbox.improving {
    border-color: var(--severity-improving, var(--sol-stable));
}

.sol-problem-checkbox label {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    cursor: pointer;
}

.sol-problem-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--sol-accent-primary);
}

.sol-problem-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--sol-radius-sm);
    background: var(--sol-bg-panel);
}

.sol-problem-status.worsening {
    background: var(--severity-worsening-bg, var(--sol-warning-bg));
    color: var(--severity-worsening, var(--sol-warning));
}

.sol-problem-status.improving {
    background: var(--severity-improving-bg, var(--sol-stable-bg));
    color: var(--severity-improving, var(--sol-stable));
}

.sol-problem-severity.critical {
    font-size: 0.625rem;
    padding: 2px 6px;
    border-radius: var(--sol-radius-sm);
    background: var(--sol-critical);
    color: white;
    font-weight: 600;
    text-transform: uppercase;
}

/* Modal Loading State */
.sol-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sol-space-xl);
    gap: var(--sol-space-md);
    color: var(--sol-text-secondary);
}

/* Duplicate Warning Banner */
.sol-duplicate-warning {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid var(--sol-warning);
    border-radius: var(--sol-radius-md);
    padding: var(--sol-space-md);
    margin-bottom: var(--sol-space-md);
}

.sol-duplicate-warning-title {
    font-weight: 600;
    color: var(--sol-warning);
    margin-bottom: var(--sol-space-xs);
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
}

.sol-duplicate-warning-list {
    font-size: 0.875rem;
    color: var(--sol-text-secondary);
}

/* Merge Suggestions Section */
.sol-merge-suggestions {
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    padding: var(--sol-space-md);
    margin-bottom: var(--sol-space-md);
}

.sol-merge-suggestions-title {
    font-weight: 600;
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-sm);
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
}

.sol-merge-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-sm) var(--sol-space-md);
    background: var(--sol-bg-panel);
    border-radius: var(--sol-radius-sm);
    margin-bottom: var(--sol-space-xs);
}

.sol-merge-suggestion:last-child {
    margin-bottom: 0;
}

.sol-merge-suggestion-text {
    flex: 1;
}

.sol-merge-child {
    color: var(--sol-accent-primary);
    font-weight: 500;
}

.sol-merge-arrow {
    color: var(--sol-text-tertiary);
    margin: 0 var(--sol-space-xs);
}

.sol-merge-parent {
    color: var(--sol-text-primary);
    font-weight: 500;
}

.sol-merge-reason {
    font-size: 0.75rem;
    color: var(--sol-text-tertiary);
    font-style: italic;
    margin-top: var(--sol-space-xs);
}

.sol-merge-actions {
    display: flex;
    gap: var(--sol-space-xs);
}

.sol-merge-btn {
    padding: 4px 12px;
    border-radius: var(--sol-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-merge-btn.accept {
    background: var(--sol-accent-primary);
    border: none;
    color: white;
}

.sol-merge-btn.accept:hover {
    background: var(--sol-accent-hover);
}

.sol-merge-btn.reject {
    background: transparent;
    border: 1px solid var(--sol-border-default);
    color: var(--sol-text-secondary);
}

.sol-merge-btn.reject:hover {
    background: var(--sol-bg-hover);
}

.sol-no-suggestions {
    text-align: center;
    padding: var(--sol-space-md);
    color: var(--sol-text-tertiary);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   ADD PATIENT MODAL
   -------------------------------------------------------------------------- */
.sol-add-patient-btn {
    display: flex;
    align-items: center;
    gap: var(--sol-space-xs);
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: var(--sol-accent-primary);
    color: white;
    border: none;
    border-radius: var(--sol-radius-md);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-add-patient-btn:hover {
    background: var(--sol-accent-hover);
}

.sol-add-patient-btn svg {
    width: 14px;
    height: 14px;
}

.sol-add-patient-modal {
    max-width: 500px;
}

.sol-patient-search-section {
    margin-bottom: var(--sol-space-md);
}

.sol-input-label {
    display: block;
    font-size: 0.75rem;
    color: var(--sol-text-secondary);
    margin-bottom: var(--sol-space-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sol-search-input-wrapper {
    position: relative;
}

.sol-input {
    width: 100%;
    padding: var(--sol-space-sm) var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    color: var(--sol-text-primary);
    font-size: 0.875rem;
    transition: var(--sol-transition-base);
}

.sol-input:focus {
    outline: none;
    border-color: var(--sol-accent-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.sol-input::placeholder {
    color: var(--sol-text-tertiary);
}

.sol-required {
    color: var(--sol-critical);
}

.sol-field-hint {
    font-size: 0.7rem;
    color: var(--sol-text-tertiary);
    margin-top: var(--sol-space-xs);
}

.sol-field-validation {
    font-size: 0.75rem;
    color: var(--sol-critical);
    margin-top: var(--sol-space-xs);
}

.sol-form-warning {
    font-size: 0.875rem;
    color: var(--sol-warning);
    padding: var(--sol-space-md);
    background: var(--sol-warning-bg);
    border-radius: var(--sol-radius-md);
    margin-top: var(--sol-space-md);
}

.sol-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    margin-top: var(--sol-space-xs);
    z-index: 10;
    display: none;
}

.sol-search-results.visible {
    display: block;
}

.sol-search-result-item {
    padding: var(--sol-space-sm) var(--sol-space-md);
    cursor: pointer;
    border-bottom: 1px solid var(--sol-border-subtle);
    transition: var(--sol-transition-base);
}

.sol-search-result-item:last-child {
    border-bottom: none;
}

.sol-search-result-item:hover {
    background: var(--sol-bg-hover);
}

.sol-search-result-item .patient-name {
    font-weight: 500;
    color: var(--sol-text-primary);
}

.sol-search-result-item .patient-info {
    font-size: 0.75rem;
    color: var(--sol-text-secondary);
}

.sol-modal-divider {
    display: flex;
    align-items: center;
    gap: var(--sol-space-md);
    margin: var(--sol-space-lg) 0;
    color: var(--sol-text-tertiary);
    font-size: 0.75rem;
    text-transform: uppercase;
}

.sol-modal-divider::before,
.sol-modal-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--sol-border-subtle);
}

.sol-new-patient-form {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-md);
}

.sol-form-row {
    display: flex;
    gap: var(--sol-space-md);
}

.sol-form-group {
    flex: 1;
}

.sol-form-group-wide {
    flex: 2;
}

.sol-form-group .sol-input {
    width: 100%;
}

select.sol-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
}

/* --------------------------------------------------------------------------
   TOAST NOTIFICATIONS
   -------------------------------------------------------------------------- */
.sol-toast-container {
    position: fixed;
    bottom: var(--sol-space-xl);
    right: var(--sol-space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-sm);
    z-index: 300;
}

.sol-toast {
    padding: var(--sol-space-md) var(--sol-space-lg);
    background: var(--sol-bg-elevated);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    font-size: 0.875rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: sol-slide-in 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
}

.sol-toast.success {
    border-left: 3px solid var(--sol-stable);
}

.sol-toast.error {
    border-left: 3px solid var(--sol-critical);
}

.sol-toast.warning {
    border-left: 3px solid var(--sol-warning);
}

.sol-toast.info {
    border-left: 3px solid var(--sol-accent-primary);
}

.sol-toast-message {
    flex: 1;
}

.sol-toast-action {
    background: transparent;
    border: 1px solid currentColor;
    padding: 4px 12px;
    border-radius: var(--sol-radius-sm);
    color: inherit;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background 0.15s ease, opacity 0.15s ease;
    white-space: nowrap;
}

.sol-toast-action:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sol-toast-action:active {
    opacity: 0.8;
}

.sol-toast-close {
    background: transparent;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0 4px;
    margin-left: var(--sol-space-xs);
    transition: opacity 0.15s ease;
}

.sol-toast-close:hover {
    opacity: 1;
}

@keyframes sol-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   CONNECTION BANNER
   -------------------------------------------------------------------------- */
.sol-connection-banner {
    position: fixed;
    top: var(--sol-nav-height);
    left: 0;
    right: 0;
    padding: var(--sol-space-sm) var(--sol-space-lg);
    background: var(--sol-warning-bg);
    border-bottom: 1px solid var(--sol-warning-border);
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--sol-space-sm);
    z-index: 99;
    color: var(--sol-warning);
    font-size: 0.875rem;
}

.sol-connection-banner.visible {
    display: flex;
}

.sol-banner-icon {
    width: 18px;
    height: 18px;
}

/* --------------------------------------------------------------------------
   SCROLLBAR STYLING
   -------------------------------------------------------------------------- */
.sol-app-root ::-webkit-scrollbar,
.sol-dashboard ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.sol-app-root ::-webkit-scrollbar-track,
.sol-dashboard ::-webkit-scrollbar-track {
    background: transparent;
}

.sol-app-root ::-webkit-scrollbar-thumb,
.sol-dashboard ::-webkit-scrollbar-thumb {
    background: var(--sol-border-default);
    border-radius: 3px;
}

.sol-app-root ::-webkit-scrollbar-thumb:hover,
.sol-dashboard ::-webkit-scrollbar-thumb:hover {
    background: var(--sol-text-muted);
}

/* --------------------------------------------------------------------------
   NOTE GENERATION (overlay removed — content lives in rail template)
   -------------------------------------------------------------------------- */

.sol-back-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--sol-border-subtle);
    border-radius: 6px;
    color: var(--sol-text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sol-back-btn:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
    border-color: var(--sol-accent-primary);
}

.sol-back-btn svg {
    width: 16px;
    height: 16px;
}

.sol-note-type-select {
    background: var(--sol-bg-secondary);
    border: 1px solid var(--sol-border);
    border-radius: 6px;
    color: var(--sol-text-primary);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 160px;
}

.sol-note-type-select:hover {
    border-color: var(--sol-accent-primary);
    background: var(--sol-bg-hover);
}

.sol-note-type-select:focus {
    outline: none;
    border-color: var(--sol-accent-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.sol-note-type-select option {
    background: var(--sol-bg-secondary);
    color: var(--sol-text-primary);
    padding: 8px;
}

/* Note Type Picker Button (replaces dropdown) */
.sol-note-type-btn {
    display: inline-flex;
    align-items: center;
    background: var(--sol-bg-secondary);
    border: 1px solid var(--sol-border);
    border-radius: 6px;
    color: var(--sol-text-primary);
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 160px;
}

.sol-note-type-btn:hover {
    border-color: var(--sol-accent-primary);
    background: var(--sol-bg-hover);
}

.sol-note-type-btn:focus {
    outline: none;
    border-color: var(--sol-accent-primary);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.sol-note-type-btn svg {
    flex-shrink: 0;
    opacity: 0.6;
}

/* Note Type Dropdown (contextual, appears below button) */
.sol-note-type-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 200px;
    background: var(--sol-bg-elevated, #1a1a1a);
    border: 1px solid var(--sol-border, #333);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 100;
    padding: 6px 0;
    animation: dropdownFadeIn 0.15s ease-out;
}

@keyframes dropdownFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.sol-note-type-dropdown.hidden {
    display: none;
}

.sol-note-type-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--sol-text-primary, #fff);
    transition: background 0.1s ease;
}

.sol-note-type-dropdown-item:hover {
    background: var(--sol-bg-hover, #2a2a2a);
}

.sol-dropdown-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.sol-dropdown-divider {
    height: 1px;
    background: var(--sol-border-subtle, #333);
    margin: 6px 0;
}

/* Dropdown content with label and description */
.sol-dropdown-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.sol-dropdown-label {
    font-weight: 500;
    white-space: nowrap;
}

.sol-dropdown-desc {
    font-size: 11px;
    color: var(--sol-text-secondary, #888);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sol-dropdown-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 3px;
    background: var(--sol-accent, #3b82f6);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sol-note-panel-actions {
    display: flex;
    gap: 8px;
}

/* Input Section */
.sol-note-input-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sol-note-textarea {
    width: 100%;
    min-height: 180px;
    padding: 16px;
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: 8px;
    color: var(--sol-text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    transition: border-color 0.15s ease;
}

.sol-note-textarea:focus {
    outline: none;
    border-color: var(--sol-accent-primary);
}

.sol-note-textarea::placeholder {
    color: var(--sol-text-tertiary);
}

.sol-note-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* Output Section */
.sol-note-output-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sol-note-output-section.hidden {
    display: none;
}

/* Progress Bar */
.sol-note-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--sol-bg-tertiary);
    border-radius: 8px;
}

.sol-note-progress.hidden {
    display: none;
}

.sol-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--sol-bg-elevated);
    border-radius: 3px;
    overflow: hidden;
}

.sol-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--sol-accent-primary), var(--sol-accent-secondary));
    border-radius: 3px;
    transition: width 0.3s ease;
}

.sol-progress-details {
    display: flex;
    align-items: center;
    gap: var(--sol-space-md);
}

.sol-progress-text {
    font-size: 13px;
    color: var(--sol-text-secondary);
    white-space: nowrap;
}

.sol-progress-stats {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    font-size: 0.75rem;
    color: var(--sol-text-tertiary);
}

/* Generated Note Content */
.sol-note-content {
    flex: 1;
    min-height: 300px;
    padding: 24px;
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: 8px;
    overflow-y: auto;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: var(--sol-text-primary);
}

.sol-note-content h1,
.sol-note-content h2,
.sol-note-content h3 {
    margin: 1.5em 0 0.5em;
    font-weight: 600;
    color: var(--sol-text-primary);
}

.sol-note-content h1 {
    font-size: 1.4em;
    border-bottom: 1px solid var(--sol-border-subtle);
    padding-bottom: 0.3em;
}

.sol-note-content h2 {
    font-size: 1.2em;
}

.sol-note-content h3 {
    font-size: 1.1em;
    color: var(--sol-accent-primary);
}

.sol-note-content p {
    margin: 0.8em 0;
}

.sol-note-content ul,
.sol-note-content ol {
    margin: 0.8em 0;
    padding-left: 1.5em;
}

.sol-note-content li {
    margin: 0.3em 0;
}

/* Skip Link (Accessibility) */
.sol-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--sol-accent);
    color: white;
    padding: 0.5rem 1rem;
    text-decoration: none;
    z-index: 1000;
}

.sol-skip-link:focus {
    top: 0;
}

/* --------------------------------------------------------------------------
   NOTES VIEWER SLIDE-OUT PANEL
   -------------------------------------------------------------------------- */
.sol-notes-viewer {
    position: fixed;
    top: var(--sol-nav-height);
    right: 0;
    width: 400px;
    height: calc(100vh - var(--sol-nav-height));
    background: var(--sol-bg-secondary);
    border-left: 1px solid var(--sol-border-subtle);
    z-index: 150;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
    overflow: hidden; /* Contain absolutely positioned children */
}

.sol-notes-viewer.visible {
    transform: translateX(0);
}

.sol-notes-viewer.hidden {
    transform: translateX(100%);
    display: flex; /* Override .hidden utility */
}

/* Header */
.sol-notes-viewer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
    background: var(--sol-bg-tertiary);
}

.sol-notes-viewer-title {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sol-text-primary);
    margin: 0;
}

.sol-notes-viewer-title svg {
    width: 20px;
    height: 20px;
    color: var(--sol-accent-primary);
}

.sol-notes-viewer-close {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--sol-radius-sm);
    color: var(--sol-text-secondary);
    cursor: pointer;
    transition: var(--sol-transition-fast);
}

.sol-notes-viewer-close:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-notes-viewer-close svg {
    width: 18px;
    height: 18px;
}

/* Filter Tabs */
.sol-notes-viewer-filters {
    display: flex;
    gap: var(--sol-space-xs);
    padding: var(--sol-space-md) var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
    overflow-x: auto;
}

.sol-notes-filter-btn {
    padding: var(--sol-space-xs) var(--sol-space-md);
    background: transparent;
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    color: var(--sol-text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--sol-transition-base);
    white-space: nowrap;
}

.sol-notes-filter-btn:hover {
    background: var(--sol-bg-hover);
    border-color: var(--sol-border-default);
}

.sol-notes-filter-btn.active {
    background: var(--sol-accent-primary);
    border-color: var(--sol-accent-primary);
    color: white;
}

/* Notes List */
.sol-notes-viewer-list {
    flex: 1;
    overflow-y: auto;
    padding: var(--sol-space-md);
    min-height: 0; /* Required for flexbox scrolling */
}

/* Loading State */
.sol-notes-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sol-space-2xl);
    color: var(--sol-text-secondary);
    gap: var(--sol-space-md);
}

.sol-notes-loading.hidden {
    display: none;
}

/* Empty State */
.sol-notes-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--sol-space-2xl);
    text-align: center;
    color: var(--sol-text-tertiary);
}

.sol-notes-empty.hidden {
    display: none;
}

.sol-notes-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: var(--sol-space-md);
    opacity: 0.5;
}

.sol-notes-empty p {
    margin-bottom: var(--sol-space-lg);
}

/* Note Cards */
.sol-notes-cards {
    display: flex;
    flex-direction: column;
    gap: var(--sol-space-sm);
}

.sol-note-card {
    padding: var(--sol-space-md);
    background: var(--sol-bg-tertiary);
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-md);
    cursor: pointer;
    transition: var(--sol-transition-base);
}

.sol-note-card:hover {
    background: var(--sol-bg-elevated);
    border-color: var(--sol-accent-primary);
}

.sol-note-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sol-space-xs);
}

.sol-note-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: var(--sol-accent-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.sol-note-type-badge.progress { background: #3b82f6; }
.sol-note-type-badge.handp { background: #8b5cf6; }
.sol-note-type-badge.discharge { background: #22c55e; }
.sol-note-type-badge.aandp { background: #f59e0b; }
.sol-note-type-badge.transfer { background: #ec4899; }
.sol-note-type-badge.cheatsheet { background: #14b8a6; }

.sol-note-card-date {
    font-size: 0.75rem;
    color: var(--sol-text-tertiary);
}

.sol-note-card-title {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sol-text-primary);
    margin-bottom: var(--sol-space-xs);
    line-height: 1.3;
}

.sol-note-card-preview {
    font-size: 0.8rem;
    color: var(--sol-text-secondary);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Note Detail View - takes over the entire panel when shown */
.sol-note-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    background: var(--sol-bg-secondary);
    z-index: 10;
    overflow: hidden;
}

.sol-note-detail.hidden {
    display: none;
}

.sol-note-detail-header {
    display: flex;
    align-items: center;
    gap: var(--sol-space-md);
    padding: var(--sol-space-md) var(--sol-space-lg);
    border-bottom: 1px solid var(--sol-border-subtle);
    background: var(--sol-bg-tertiary);
    flex-shrink: 0;
}

.sol-back-btn {
    display: flex;
    align-items: center;
    gap: var(--sol-space-xs);
    padding: var(--sol-space-xs) var(--sol-space-sm);
    background: transparent;
    border: 1px solid var(--sol-border-subtle);
    border-radius: var(--sol-radius-sm);
    color: var(--sol-text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: var(--sol-transition-fast);
}

.sol-back-btn:hover {
    background: var(--sol-bg-hover);
    color: var(--sol-text-primary);
}

.sol-back-btn svg {
    width: 16px;
    height: 16px;
}

.sol-note-detail-meta {
    display: flex;
    align-items: center;
    gap: var(--sol-space-sm);
    margin-left: auto;
}

.sol-note-date {
    font-size: 0.8rem;
    color: var(--sol-text-tertiary);
}

.sol-note-detail-content {
    flex: 1 1 0;
    overflow-y: auto;
    padding: var(--sol-space-lg);
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--sol-text-primary);
    white-space: pre-wrap;
    font-family: var(--sol-font-mono, monospace);
    min-height: 0; /* Required for flexbox scrolling */
}

.sol-note-detail-actions {
    display: flex;
    gap: var(--sol-space-sm);
    padding: var(--sol-space-md) var(--sol-space-lg);
    border-top: 1px solid var(--sol-border-subtle);
    background: var(--sol-bg-tertiary);
    flex-shrink: 0;
}

/* Overlay Backdrop */
.sol-notes-overlay {
    position: fixed;
    top: var(--sol-nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 149;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sol-notes-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.sol-notes-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1400px) {
    :root {
        --sol-sidebar-width: 280px;
        --sol-actions-width: 240px;
    }
}

@media (max-width: 1200px) {
    .sol-vitals-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .sol-main-layout {
        grid-template-columns: 1fr;
    }

    .sol-sidebar {
        position: fixed;
        left: 0;
        top: var(--sol-nav-height);
        bottom: 0;
        width: var(--sol-sidebar-width);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 50;
    }

    .sol-sidebar.open {
        transform: translateX(0);
    }

    .sol-patient-detail {
        padding: var(--sol-space-lg);
    }

    .sol-clinical-grid {
        grid-template-columns: 1fr;
    }

    .sol-clinical-panel.full-width {
        grid-column: span 1;
    }

    .sol-vitals-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sol-timeline-header-controls {
        flex-wrap: wrap;
    }

    .sol-hospitalization-timeline {
        min-height: 180px;
    }

    .sol-timeline-day-column {
        min-width: 60px;
    }

}

@media (max-width: 768px) {
    .sol-vitals-grid {
        grid-template-columns: 1fr;
    }

    .sol-notes-viewer {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   UTILITY CLASSES
   -------------------------------------------------------------------------- */
.hidden {
    display: none !important;
}

.visible {
    display: block !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.spinning {
    animation: sol-spin 1s linear infinite;
}

.streaming {
    animation: sol-pulse 1s ease-in-out infinite;
}

/* Generic spinner class for loading states */
.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--sol-border);
    border-top-color: var(--brand-primary, #6366f1);
    border-radius: 50%;
    animation: sol-spin 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   QUICK GENERATE (Patient-Optional Notes)
   -------------------------------------------------------------------------- */

/* Divider in toolbar for visual separation */
.sol-quick-actions-divider {
    width: 1px;
    height: 24px;
    background: var(--sol-border-subtle, rgba(255, 255, 255, 0.1));
    margin: 0 8px;
    flex-shrink: 0;
}

/* Top toolbar label to make patient-optional notes discoverable */
.sol-quick-notes-group {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    flex-wrap: nowrap;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    overflow: hidden;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(255, 255, 255, 0.03) 55%,
        rgba(0, 0, 0, 0.08) 100%
    );
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;
}

.sol-quick-notes-group::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(99, 102, 241, 0.16), transparent 55%),
        radial-gradient(140% 140% at 100% 0%, rgba(59, 130, 246, 0.10), transparent 60%);
    opacity: 0.95;
    transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.sol-quick-notes-group:hover {
    border-color: rgba(255, 255, 255, 0.12);
    transform: translateY(-3px) scale(1.01);
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.09) 0%,
        rgba(255, 255, 255, 0.04) 55%,
        rgba(0, 0, 0, 0.10) 100%
    );
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.28),
        0 22px 44px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
}

.sol-quick-notes-group:hover::before {
    opacity: 1;
    transform: scale(1.02);
    filter: saturate(1.08);
}

.sol-quick-notes-group:active {
    transform: translateY(-1px) scale(1.005);
}

.sol-quick-notes-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.06) 0%,
        rgba(255, 255, 255, 0.03) 100%
    );
    border: 0;
    position: relative;
    z-index: 1;
    color: var(--sol-text-secondary, #94a3b8);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
    cursor: default;
}

.sol-quick-notes-badge i {
    color: var(--brand-primary, #6366f1);
    font-size: 0.95rem;
}

.sol-quick-notes-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    line-height: 1.05;
}

.sol-quick-notes-title {
    font-weight: 800; /* make it read as a section label */
    letter-spacing: 0.01em;
    color: rgba(255, 255, 255, 0.92);
}

.sol-quick-notes-sub {
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--sol-text-tertiary, #64748b);
}

/* Make the header + buttons feel like one connected control */
.sol-quick-notes-group .sol-quick-action-btn {
    border: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
    z-index: 1;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

.sol-quick-notes-group .sol-quick-action-btn i {
    transition: transform 0.2s ease, filter 0.2s ease;
}

.sol-quick-notes-group .sol-quick-action-btn:hover {
    transform: none;
    box-shadow: none;
    background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.07) 0%,
        rgba(99, 102, 241, 0.10) 100%
    );
}

.sol-quick-notes-group .sol-quick-action-btn:hover i {
    transform: translateY(-1px) scale(1.05);
    filter: brightness(1.05);
}

.sol-quick-notes-group .sol-quick-action-btn:active {
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .sol-quick-notes-group,
    .sol-quick-notes-group::before,
    .sol-quick-notes-group .sol-quick-action-btn,
    .sol-quick-notes-group .sol-quick-action-btn i {
        transition: none !important;
        transform: none !important;
        animation: none !important;
    }

    /* Disable patient card entrance animation */
    .sol-patient-card {
        animation: none !important;
    }

    /* Disable clinical grid animations */
    .sol-clinical-grid,
    .sol-clinical-grid.visible,
    .sol-clinical-grid.visible > *,
    .sol-patient-header {
        animation: none !important;
        transition: none !important;
    }
}

/* Quick Generate Modal */
.sol-quick-generate-modal {
    max-width: 650px;
    width: 90vw;
}

.sol-quick-generate-modal .sol-modal-icon {
    margin-right: 8px;
}

.sol-quick-gen-textarea {
    width: 100%;
    min-height: 250px;
    resize: vertical;
    font-family: var(--sol-font-mono, 'SF Mono', Monaco, 'Cascadia Code', monospace);
    font-size: 0.875rem;
    line-height: 1.5;
    padding: 12px;
    background: var(--sol-bg-input, #1e293b);
    border: 1px solid var(--sol-border, #334155);
    border-radius: var(--sol-radius-md, 8px);
    color: var(--sol-text-primary, #f1f5f9);
}

.sol-quick-gen-textarea:focus {
    outline: none;
    border-color: var(--brand-primary, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.sol-quick-gen-textarea::placeholder {
    color: var(--sol-text-tertiary, #64748b);
}

/* Quick Generate Input Actions (2025-12-27) - Voice Dictation */
.sol-quick-gen-input-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

.sol-quick-gen-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 10px 12px;
    background: var(--sol-bg-hover, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--sol-border-subtle, rgba(255, 255, 255, 0.06));
    border-radius: var(--sol-radius-md, 8px);
    color: var(--sol-text-secondary, #94a3b8);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.sol-quick-gen-hint i {
    font-size: 1rem;
    color: var(--brand-primary, #6366f1);
    flex-shrink: 0;
    margin-top: 1px;
}

/* Quick Generate Output Panel */
.sol-quick-generate-output {
    position: fixed;
    inset: 0;
    background: var(--sol-bg-primary, #0f172a);
    z-index: 300;
    display: flex;
    flex-direction: column;
}

.sol-quick-generate-output[hidden] {
    display: none;
}

.sol-quick-gen-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 20px;
    background: var(--sol-bg-secondary, #1e293b);
    border-bottom: 1px solid var(--sol-border, #334155);
}

.sol-quick-gen-title {
    flex: 1;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--sol-text-primary, #f1f5f9);
}

.sol-quick-gen-actions {
    display: flex;
    gap: 8px;
}

.sol-quick-gen-associate-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: var(--sol-bg-tertiary, rgba(30, 41, 59, 0.7));
    border-bottom: 1px solid var(--sol-border-subtle, rgba(255, 255, 255, 0.06));
    font-size: 0.875rem;
    color: var(--sol-text-secondary, #94a3b8);
}

.sol-quick-gen-associate-bar .sol-select {
    min-width: 250px;
    padding: 6px 10px;
    background: var(--sol-bg-input, #1e293b);
    border: 1px solid var(--sol-border, #334155);
    border-radius: var(--sol-radius-sm, 6px);
    color: var(--sol-text-primary, #f1f5f9);
    font-size: 0.875rem;
}

.sol-quick-gen-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.sol-quick-gen-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--sol-bg-secondary, #1e293b);
    border-radius: var(--sol-radius-md, 8px);
}

.sol-quick-gen-progress[hidden] {
    display: none;
}

.sol-quick-gen-progress .sol-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--sol-bg-tertiary, #334155);
    border-radius: 2px;
    overflow: hidden;
}

.sol-quick-gen-progress .sol-progress-fill {
    height: 100%;
    background: var(--brand-primary, #6366f1);
    width: 0%;
    transition: width 0.3s ease;
    animation: sol-progress-indeterminate 1.5s ease-in-out infinite;
}

@keyframes sol-progress-indeterminate {
    0% { transform: translateX(-100%); width: 40%; }
    50% { transform: translateX(100%); width: 60%; }
    100% { transform: translateX(300%); width: 40%; }
}

.sol-quick-gen-progress .sol-progress-text {
    font-size: 0.875rem;
    color: var(--sol-text-secondary, #94a3b8);
    white-space: nowrap;
}

.sol-quick-gen-content {
    background: var(--sol-bg-secondary, #1e293b);
    border: 1px solid var(--sol-border, #334155);
    border-radius: var(--sol-radius-lg, 12px);
    padding: 20px 24px;
    font-family: var(--sol-font-mono, 'SF Mono', Monaco, monospace);
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--sol-text-primary, #f1f5f9);
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 200px;
}

.sol-quick-gen-content:empty::before {
    content: 'Generated note will appear here...';
    color: var(--sol-text-tertiary, #64748b);
    font-style: italic;
}

/* Responsive: Stack associate bar on mobile */
@media (max-width: 640px) {
    .sol-quick-gen-associate-bar {
        flex-wrap: wrap;
    }

    .sol-quick-gen-associate-bar .sol-select {
        min-width: 100%;
        order: 1;
    }

    .sol-quick-gen-associate-bar .sol-btn {
        order: 2;
        margin-top: 8px;
    }
}

/* ===========================================================================
   MOBILE SIDEBAR TOGGLE (FAB)
   =========================================================================== */

.sol-mobile-sidebar-toggle {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: 60;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--sol-accent-primary, #22c55e);
    color: white;
    border: none;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.4);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.sol-mobile-sidebar-toggle svg {
    width: 24px;
    height: 24px;
}

.sol-mobile-sidebar-toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(34, 197, 94, 0.5);
}

.sol-mobile-sidebar-toggle:active {
    transform: scale(0.95);
}

.sol-mobile-sidebar-toggle:focus {
    outline: 2px solid var(--sol-accent-primary, #22c55e);
    outline-offset: 3px;
}

/* Show toggle and handle sidebar on mobile */
@media (max-width: 900px) {
    .sol-mobile-sidebar-toggle {
        display: flex;
    }

    /* Sidebar slides off-screen by default on mobile */
    .sol-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        z-index: 50;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    /* When sidebar is open */
    .sol-sidebar.open {
        transform: translateX(0);
    }

    /* Main layout takes full width on mobile */
    .sol-main-layout {
        margin-left: 0 !important;
    }

    /* Overlay when sidebar is open */
    .sol-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 45;
    }

    .sol-sidebar.open ~ .sol-sidebar-overlay {
        display: block;
    }
}

/* ── Board-Dominant Layout (2026-03-30) ─────────────────────────────────
   WHY: When the 2D Problem Space is active, it should fill the entire
   center workspace. Timeline and labs move to the data drawer below.
   ARCHITECTURE: Triggered by data-board-mode="space" on .sol-clinical-grid-container,
   set by JS when CensusState.problemViewMode === 'space'.
   List/kanban views retain the original 3-column grid unchanged. */

/* FIX (2026-04-04): Board mode vertical space
   BUG: .ai-overnight-summary (332px) + data panels consumed all vertical space,
   leaving Problem Board canvas at ~250px (barely 1 card visible).
   ROOT CAUSE: (1) Overnight summary not hidden in board mode, (2) grid container
   scrolled instead of constraining children, (3) no viewport-based height on board.
   FIX: Hide overnight summary in board mode, constrain overflow, set viewport height. */
.sol-clinical-grid-container[data-board-mode="space"] {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
    padding-bottom: 0;
}

/* Hide grid columns that move to the data drawer */
.sol-clinical-grid-container[data-board-mode="space"] .sol-timeline-prominent,
.sol-clinical-grid-container[data-board-mode="space"] .sol-labs-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-vitals-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-labs-vitals-stack,
.sol-clinical-grid-container[data-board-mode="space"] .sol-meds-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-scores-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-cultures-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-data-timeline-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-longitudinal-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-snapshot-panel,
.sol-clinical-grid-container[data-board-mode="space"] .sol-changes-summary,
.sol-clinical-grid-container[data-board-mode="space"] .ai-overnight-summary {
    display: none !important;
}

/* Grid becomes single-column pass-through in board mode
   FIX (2026-04-04): !important needed because base .sol-clinical-grid { display: grid }
   and note-rail.css rules compete at similar specificity. CDN stale-cache also a factor. */
.sol-clinical-grid-container[data-board-mode="space"] .sol-clinical-grid,
.sol-clinical-grid-container[data-board-mode="space"] .sol-clinical-grid-v2 {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-height: 0;
}

/* Problems panel fills the board zone */
.sol-clinical-grid-container[data-board-mode="space"] .sol-problems-panel {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-height: 0;
    border: none;
    overflow: hidden !important;
}

/* Override the hardcoded heights on problem space in board mode */
.sol-clinical-grid-container[data-board-mode="space"] .sol-problems-panel:has(.problem-space-container:not(.hidden)) {
    min-height: 0;
    height: auto;
    max-height: none;
}

/* Tapestry Convergence Phase 4f (2026-05-17).
   WHY: when ENABLE_TAPESTRY_PRIMARY mounts the converged surface, the legacy
   .problem-space-container is given .hidden, so the :has(...:not(.hidden))
   rule above stops matching and the Problems panel would collapse to content
   height. Mirror the height release keyed on the tapestry mount instead.
   NOTE: inert when the flag is OFF — #tapestryPrimaryMount is never created,
   so the legacy path is byte-identical. .nev-tap is display:grid with no
   intrinsic height (episode-tapestry.css), so the mount node must supply the
   flex height for the column to fill the expanded Problems panel. */
.sol-clinical-grid-container[data-board-mode="space"] .sol-problems-panel:has(#tapestryPrimaryMount) {
    min-height: 0;
    height: auto;
    max-height: none;
}
.tapestry-primary-mount {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Tapestry Convergence — Phase 5 NO-GO remediation (2026-05-17).
   WHY: the surface rendered as a clipped strip with legacy chrome + the
   clinical data panels still around it. The ONLY height-release rule
   above used `:has(#tapestryPrimaryMount)` and every other host rule was
   scoped to [data-board-mode="space"] — a fragile two-fold dependency
   (a stale problemViewMode left the tapestry host-less; a :has() miss
   collapsed it). FIX: a JS-added `.tapestry-primary-active` marker class
   (index.js, on .sol-clinical-grid-container + .sol-problems-panel)
   drives ALL host geometry + data-panel suppression via PLAIN class
   selectors — no :has(), no reliance on the board-mode cascade.
   ARCHITECTURE: mirrors the proven [data-board-mode="space"] rules
   (:6176/:6202/:6211) so the geometry is identical; the class is just a
   robust, explicit trigger. INERT when the flag is OFF — the class is
   only ever added inside `if (window.__ENABLE_TAPESTRY_PRIMARY===true)`,
   so the legacy path is byte-identical.
   NOTE: the mount min-height is a viewport FLOOR — a hard guarantee the
   converged surface can never again degrade to a 1-row strip even if a
   competing rule breaks the flex ancestry. This is load-bearing: it is
   the regression fuse for the exact Phase 5 NO-GO symptom. */
.sol-clinical-grid-container.tapestry-primary-active {
    display: flex;
    flex-direction: column;
    overflow: hidden !important;
}
.sol-clinical-grid-container.tapestry-primary-active .sol-clinical-grid,
.sol-clinical-grid-container.tapestry-primary-active .sol-clinical-grid-v2 {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-height: 0;
}
.sol-problems-panel.tapestry-primary-active {
    display: flex !important;
    flex-direction: column !important;
    flex: 1;
    min-height: 0;
    width: 100%;
    border: none;
    overflow: hidden !important;
}
.sol-problems-panel.tapestry-primary-active .tapestry-primary-mount {
    flex: 1;
    min-height: 70vh;   /* regression fuse — never a strip again */
    width: 100%;
    overflow: auto;
    /* UX pass (2026-07-09): clearance for the floating dictate bar — the
       board's last rows (legend, A&P time machine, compile footer) must be
       scrollable ABOVE it, not permanently hidden behind it. */
    padding-bottom: 96px;
    scroll-padding-bottom: 96px;
}
/* Suppress the clinical data panels for the Problems-area takeover
   independent of board mode (mirrors :6184-6196, class-keyed). */
.sol-clinical-grid-container.tapestry-primary-active .sol-timeline-prominent,
.sol-clinical-grid-container.tapestry-primary-active .sol-labs-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-vitals-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-labs-vitals-stack,
.sol-clinical-grid-container.tapestry-primary-active .sol-meds-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-scores-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-cultures-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-data-timeline-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-longitudinal-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-snapshot-panel,
.sol-clinical-grid-container.tapestry-primary-active .sol-changes-summary,
.sol-clinical-grid-container.tapestry-primary-active .ai-overnight-summary {
    display: none !important;
}

/* Phase 5 NO-GO #3 (2026-05-17) — two leaks the marker-class rules above
   could not reach, found via the hardened dry-run's empirical output:

   (A) "PROBLEM SPACE" text leak. The JS hide-loop adds `.hidden` to the
   legacy Problems-panel children ONCE at mount, but `initViewToggle`
   (problem-kanban.js) subscribes to `problemViewMode` and re-runs
   `applyView('space')` → `container.classList.toggle('hidden', false)`,
   STRIPPING `.hidden` back off `#problemSpaceContainer` every time the
   view-mode fires. A one-shot JS hide cannot win a live subscription.
   FIX: a child-combinator rule with `!important` + ID-in-:not()
   specificity that hides every non-mount panel child REGARDLESS of the
   `.hidden` class — the toggle can add/remove `.hidden` freely; this
   still wins. This is load-bearing: it is the actual suppression
   mechanism, the JS loop is now only a pre-paint belt.

   (B) Reparented data drawer. DataDrawer `appendChild`s the labs/vitals/
   meds/timeline/scores panels OUT of `.sol-clinical-grid-container` into
   `#dataDrawer` (census.html:1528, deliberately outside the grid so the
   board-mode `display:none` ancestor rule can't reach them). Every
   data-panel rule above is grid-scoped → can't touch them. FIX: hide
   `#dataDrawer` itself, keyed on `#patientDetail.tapestry-primary-active`
   (the common ancestor of both the grid container and the drawer). */
.sol-problems-panel.tapestry-primary-active > :not(#tapestryPrimaryMount) {
    display: none !important;
}
#patientDetail.tapestry-primary-active #dataDrawer {
    display: none !important;
}

/* ── Board-Mode Chrome Compaction (2026-04-04) ──────────────────────────
   WHY: On a 720px viewport, 530px (74%) was UI chrome and only 190px (26%)
   was the physician's thinking surface. A doctor cannot reason about a
   life-and-death patient in 190px. These rules invert the ratio: minimize
   chrome, maximize the Problem Board canvas.
   ARCHITECTURE: Scoped to [data-board-mode="space"] on .sol-patient-detail
   (set by JS alongside the grid container attribute). List/kanban views
   are completely unaffected — they keep the full spacious header.
   ──────────────────────────────────────────────────────────────────────── */

/* --- Patient detail: kill excess padding in board mode --- */
.sol-patient-detail[data-board-mode="space"] {
    padding-top: var(--sol-space-xs) !important; /* 4px vs 24px */
}

/* --- Patient header: compact single-line bar ---
   WHY: Full header is 172px (avatar 64px, name 1.75rem, trajectory bar 70px,
   padding, margins). In board mode we compress to ~48px: small avatar, compact
   name, no trajectory, tight padding. Trajectory info is redundant when the
   doctor is actively working the Problem Board — they already know why the
   patient is here. */
.sol-patient-detail[data-board-mode="space"] .sol-patient-header {
    padding-bottom: var(--sol-space-xs) !important;
    margin-bottom: var(--sol-space-xs) !important;
    align-items: center !important;
    flex-direction: row !important;       /* force single row */
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

/* Identity row: inline, tight */
.sol-patient-detail[data-board-mode="space"] .sol-header-identity-row {
    padding: var(--sol-space-xs) var(--sol-space-sm) !important; /* 4px 8px */
    align-items: center !important;
}

/* Shrink avatar to inline badge */
.sol-patient-detail[data-board-mode="space"] .sol-patient-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
}

/* Compact identity gap */
.sol-patient-detail[data-board-mode="space"] .sol-patient-identity {
    gap: var(--sol-space-sm) !important;
    align-items: center !important;
}

/* Name + meta on one line */
.sol-patient-detail[data-board-mode="space"] .sol-patient-info {
    flex-direction: row !important;
    align-items: baseline !important;
    gap: var(--sol-space-md) !important;
}

.sol-patient-detail[data-board-mode="space"] .sol-patient-name {
    font-size: 0.95rem !important;
    margin-bottom: 0 !important;
}

.sol-patient-detail[data-board-mode="space"] .sol-name-row {
    gap: var(--sol-space-sm) !important;
    align-items: center !important;
}

.sol-patient-detail[data-board-mode="space"] .sol-patient-meta {
    font-size: 0.7rem !important;
    gap: var(--sol-space-xs) !important;
}

.sol-patient-detail[data-board-mode="space"] .sol-meta-item {
    padding: 1px 6px !important;
    font-size: 0.65rem !important;
}

/* Severity badge: inline, smaller */
.sol-patient-detail[data-board-mode="space"] .sol-severity-badge {
    font-size: 0.6rem !important;
    padding: 1px 6px !important;
}

/* Collapse trajectory bar.
   WHY: Day/admission/progress is 70px of pure chrome. The doctor is
   LOOKING AT the patient's problems — they don't need a banner telling
   them what day it is. */
.sol-patient-detail[data-board-mode="space"] .sol-trajectory-bar {
    display: none !important;
}

/* Compact action buttons — keep functional, shrink visual weight */
.sol-patient-detail[data-board-mode="space"] .sol-patient-actions {
    gap: 2px !important;
}

.sol-patient-detail[data-board-mode="space"] .sol-patient-action-btn {
    padding: 3px 6px !important;
    font-size: 0.6rem !important;
    gap: 3px !important;
}

.sol-patient-detail[data-board-mode="space"] .sol-patient-action-btn svg {
    width: 13px !important;
    height: 13px !important;
}

.sol-patient-detail[data-board-mode="space"] .sol-patient-actions-divider {
    height: 16px !important;
}

/* FIX (2026-05-12): Visuospatial Wave 1 redesign — icon-only action buttons
   ONLY when the rail is open AND space mode is active. The first attempt
   gated only on data-board-mode="space" which is the default, so it killed
   every doctor's button labels on load. Now dual-gated:
     - body.rail-open is set by note-rail.js:804 when the rail expands
     - data-board-mode="space" mirrors problemViewMode (state.js:122) via
       index.js:6189-6207
   Both must be true for collapse. Default load (rail closed) keeps labels.
   Primary "Create Note" CTA keeps text in all states. .sol-action-badge
   (count chip inside Approve) stays visible. */
body.rail-open .sol-patient-detail[data-board-mode="space"] .sol-patient-action-btn:not(.primary) > span:not(.sol-action-badge) {
    display: none;
}

body.rail-open .sol-patient-detail[data-board-mode="space"] .sol-patient-actions {
    flex-wrap: nowrap;
    overflow: hidden;
}

body.rail-open .sol-patient-detail[data-board-mode="space"] .sol-patient-action-btn:not(.primary) {
    padding: 4px;
    min-width: auto;
}

/* --- PROBLEM LIST panel header: minimal ---
   WHY: 53px panel header with title + view toggles. In board mode
   the doctor already chose board view — minimize this to a slim toolbar. */
.sol-clinical-grid-container[data-board-mode="space"] .sol-problems-panel > .sol-panel-header {
    padding: 2px var(--sol-space-sm) !important;
    min-height: 0 !important;
    flex-shrink: 0 !important;
}

.sol-clinical-grid-container[data-board-mode="space"] .sol-problems-panel > .sol-panel-header .sol-panel-title {
    font-size: 0.65rem !important;
}

.sol-clinical-grid-container[data-board-mode="space"] .sol-problems-panel > .sol-panel-header .sol-panel-title svg {
    width: 12px !important;
    height: 12px !important;
}

/* --- Problem Space header: thin toolbar --- */
.sol-clinical-grid-container[data-board-mode="space"] .problem-space-header {
    padding: 2px 8px !important;
    flex-shrink: 0 !important;
}

.sol-clinical-grid-container[data-board-mode="space"] .problem-space-header .space-title {
    font-size: 0.6rem !important;
}

.sol-clinical-grid-container[data-board-mode="space"] .problem-space-header .toggle-btn {
    padding: 1px 6px !important;
    font-size: 0.55rem !important;
}

/* --- Background strip: compact single row --- */
.sol-clinical-grid-container[data-board-mode="space"] .background-strip {
    padding: 3px 8px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.sol-clinical-grid-container[data-board-mode="space"] .background-strip .category-toggle {
    padding: 3px 6px !important;
    font-size: 0.6rem !important;
}

/* --- Triage strip: tighter --- */
.sol-clinical-grid-container[data-board-mode="space"] .triage-strip {
    padding: 2px 8px !important;
    min-height: 24px !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
}

.sol-clinical-grid-container[data-board-mode="space"] .triage-strip .triage-label {
    font-size: 0.6rem !important;
}

/* ==========================================================================
   VISUOSPATIAL WAVE 3 (2026-05-12) — Compact census cards (flag-gated, default OFF)

   Activated by body.compact-cards, toggled by static/js/census/index.js from
   window.__ENABLE_COMPACT_CENSUS_CARDS (set from Settings.ENABLE_COMPACT_CENSUS_CARDS
   via somaNotes.py:5849 census_dashboard).

   Goal: census sidebar reads as a fast triage surface. Card width and sidebar
   width are NOT a knob (per user memory). Saves ~22 px per card via three
   overrides + 2 CSS-hides of demotable rows.

   PRESERVE in compact mode (do NOT override):
     - Severity color encoding (.sol-patient-card.critical/.high/.worsening/.stable
       at :1156-1211) — across-station readability.
     - .sol-patient-card.selected blue border + glow (:1129) — selection clarity.
     - Hover affordance and recently-touched highlight (when added).

   Rail-safe: note-rail.css and note-rail-terminal.css have zero refs to these
   selectors. Selection-bus-safe: reads .selected-problem on problem cards only.
   ========================================================================== */

body.compact-cards .sol-patient-card {
    padding: 12px 12px 12px 16px;
    margin-bottom: 8px;
}

body.compact-cards .sol-signal-badge {
    /* Sharpened from initial draft (was 0.65rem + 2/6 padding): verified prod
       labels include HYPERKALEMIA (12 ch), HYPOTENSION (11 ch), HYPOKALEMIA
       (11 ch). At 0.65rem + 2/6 they wrap. 0.70rem + 3/8 keeps single-line. */
    padding: 3px 8px;
    font-size: 0.70rem;
}

body.compact-cards .sol-pill {
    padding: 1px 6px;
    font-size: 0.65rem;
}

/* Demote-via-hide: both chips have their own parent classes, so CSS-only
   hiding works without touching patient-list.js. .cs-risk-badges is the verbose
   clinical-scores chip row at patient-list.js:179-181. .sol-card-sparkline is
   the creatinine sparkline at :192-202. Both are nice-to-have, not essential
   at triage glance. Worsening pill, "needs review" pill, signal badges,
   severity color all stay visible — they're workflow-critical. */
body.compact-cards .cs-risk-badges,
body.compact-cards .sol-card-sparkline {
    display: none;
}