/* ==========================================================================
   PATIENT HEADER - PRECISION TERMINAL THEME
   Terminal aesthetics for patient identity, severity, and trajectory bar

   ARCHITECTURE: Additive theme layer - activates via data-theme="terminal"
   WHY: Consistent terminal design language across census sidebar, note rail,
        and patient header for unified visual identity
   TRADEOFF: Additional CSS layer vs modifying existing styles

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

   PERFORMANCE:
   - All `transition: all` replaced with specific properties
   - `will-change` hints on elements with box-shadow/transform animations
   - GPU-composited layers for glow effects
   ========================================================================== */


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

/* Variables extracted to terminal-core.css */


/* ==========================================================================
   SECTION 2: HEADER CONTAINER
   Void black bg, sharp corners, L-bracket embellishments
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] {
    background: var(--term-bg-void) !important;
    border: 1px solid var(--term-border-default) !important;
    border-radius: var(--term-radius-none) !important;
    box-shadow: none !important;
    font-family: var(--term-font-mono);
    position: relative;
    overflow: visible;
}

/* Kill the radial glow overlay from base styles */
.sol-patient-header[data-theme="terminal"]::before {
    background: none !important;
    display: none;
}

/* L-bracket corner - top-right (Art Deco) */
.sol-patient-header[data-theme="terminal"]::after {
    content: '';
    position: absolute;
    top: var(--term-corner-offset);
    right: var(--term-corner-offset);
    width: var(--term-corner-size);
    height: var(--term-corner-size);
    border-top: var(--term-corner-width) solid var(--term-accent-dim);
    border-right: var(--term-corner-width) solid var(--term-accent-dim);
    pointer-events: none;
    z-index: 2;
    transition: border-color var(--term-duration-theatrical) var(--term-easing);
}

.sol-patient-header[data-theme="terminal"]:hover::after {
    border-color: var(--term-accent);
}


/* ==========================================================================
   SECTION 3: IDENTITY ROW
   Remove blue-tinted gradient, transparent bg
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-header-identity-row {
    background: transparent !important;
    padding: var(--term-space-lg) var(--term-space-xl);
    position: relative;
    z-index: 1;
}


/* ==========================================================================
   SECTION 4: AVATAR
   Square (0px radius), electric mint border, kill gradient/glow
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-patient-avatar {
    border-radius: var(--term-radius-none) !important;
    background: var(--term-bg-surface) !important;
    border: 2px solid var(--term-accent-dim);
    color: var(--term-accent);
    box-shadow: none !important;
    font-family: var(--term-font-mono);
    font-weight: 600;
    transition: border-color var(--term-duration-theatrical) var(--term-easing),
                box-shadow var(--term-duration-theatrical) var(--term-easing);
    will-change: border-color, box-shadow;
}

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

/* Warning state override */
.sol-patient-header[data-theme="terminal"] .sol-patient-avatar.sol-avatar-warning {
    border-color: var(--term-severity-critical);
    color: var(--term-severity-critical);
}


/* ==========================================================================
   SECTION 5: PATIENT NAME
   JetBrains Mono, uppercase, wide tracking
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-patient-name {
    font-family: var(--term-font-mono) !important;
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-wider);
    color: var(--term-fg-primary);
    font-weight: 600;
    font-size: 1.375rem;
}


/* ==========================================================================
   SECTION 6: SEVERITY BADGE
   Hollow outline style (border only, no fill), glow per status color
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-severity-badge {
    border-radius: var(--term-radius-none) !important;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-widest);
    transition: box-shadow var(--term-duration-theatrical) var(--term-easing),
                border-color var(--term-duration-theatrical) var(--term-easing);
    will-change: box-shadow;
}

.sol-patient-header[data-theme="terminal"] .sol-severity-badge:hover {
    transform: none;
    filter: none;
}

/* Severity dot - square in terminal theme */
.sol-patient-header[data-theme="terminal"] .sol-severity-dot {
    border-radius: var(--term-radius-none);
    width: 6px;
    height: 6px;
}

/* Stable - mint accent */
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="stable"] {
    background: transparent;
    color: var(--term-severity-stable);
    border: 1px solid var(--term-severity-stable);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="stable"]:hover {
    box-shadow: 0 0 12px rgba(0, 255, 208, 0.3);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="stable"] .sol-severity-dot {
    background: var(--term-severity-stable);
    box-shadow: 0 0 6px rgba(0, 255, 208, 0.6);
}

/* Worsening / Guarded - amber */
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="worsening"] {
    background: transparent;
    color: var(--term-severity-worsening);
    border: 1px solid var(--term-severity-worsening);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="worsening"]:hover {
    box-shadow: 0 0 12px rgba(255, 170, 0, 0.3);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="worsening"] .sol-severity-dot {
    background: var(--term-severity-worsening);
    box-shadow: 0 0 6px rgba(255, 170, 0, 0.6);
}

/* Critical / High - red */
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="critical"],
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="high"] {
    background: transparent;
    color: var(--term-severity-critical);
    border: 1px solid var(--term-severity-critical);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="critical"]:hover,
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="high"]:hover {
    box-shadow: 0 0 12px rgba(255, 68, 68, 0.3);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="critical"] .sol-severity-dot,
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="high"] .sol-severity-dot {
    background: var(--term-severity-critical);
    box-shadow: 0 0 6px rgba(255, 68, 68, 0.6);
}

/* Improving - blue */
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="improving"] {
    background: transparent;
    color: var(--term-severity-improving);
    border: 1px solid var(--term-severity-improving);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="improving"]:hover {
    box-shadow: 0 0 12px rgba(68, 136, 255, 0.3);
}
.sol-patient-header[data-theme="terminal"] .sol-severity-badge[data-severity="improving"] .sol-severity-dot {
    background: var(--term-severity-improving);
    box-shadow: 0 0 6px rgba(68, 136, 255, 0.6);
}


/* ==========================================================================
   SECTION 7: META ITEMS
   Monospace font, dim labels, bright values, kill pill shape
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-patient-meta {
    gap: var(--term-space-md);
}

.sol-patient-header[data-theme="terminal"] .sol-meta-item {
    background: transparent !important;
    border: 1px solid var(--term-border-subtle) !important;
    border-radius: var(--term-radius-none) !important;
    font-family: var(--term-font-mono);
    font-size: var(--term-text-sm);
    color: var(--term-fg-secondary);
    padding: 2px 8px;
    letter-spacing: var(--term-tracking-wide);
    transition: color var(--term-duration-normal) var(--term-easing),
                border-color var(--term-duration-normal) var(--term-easing);
}

.sol-patient-header[data-theme="terminal"] .sol-meta-item:hover {
    transform: none !important;
    background: transparent !important;
    color: var(--term-fg-primary);
    border-color: var(--term-accent-dim) !important;
    box-shadow: none !important;
}


/* ==========================================================================
   SECTION 8: ACTION BUTTONS
   Square corners, mint border, glow hover, kill blue effects
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-patient-actions {
    background: var(--term-bg-surface);
    border: 1px solid var(--term-border-default);
    border-radius: var(--term-radius-none);
    box-shadow: none;
    gap: var(--term-space-xs);
    padding: var(--term-space-xs) var(--term-space-sm);
}

.sol-patient-header[data-theme="terminal"] .sol-patient-actions-divider {
    background: var(--term-border-default);
}

.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn {
    background: transparent;
    border: 1px solid var(--term-border-subtle);
    border-radius: var(--term-radius-none);
    color: var(--term-fg-secondary);
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    letter-spacing: var(--term-tracking-wide);
    text-transform: uppercase;
    transition: color var(--term-duration-theatrical) var(--term-easing),
                border-color var(--term-duration-theatrical) var(--term-easing),
                box-shadow var(--term-duration-theatrical) var(--term-easing),
                background-color var(--term-duration-theatrical) var(--term-easing);
    will-change: box-shadow, border-color;
}

.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn:hover {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
    transform: none;
    box-shadow: var(--term-glow-accent);
}

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

.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn:active {
    background: var(--term-accent-subtle);
    transform: none;
}

/* Primary action (Create Note) - mint accent instead of blue gradient */
.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn.primary {
    background: transparent;
    border: 2px solid var(--term-accent);
    color: var(--term-accent);
    font-weight: 600;
    box-shadow: none;
}

.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn.primary:hover {
    background: var(--term-accent);
    color: var(--term-fg-inverse);
    box-shadow: var(--term-glow-accent-intense);
}

/* Voice recording state */
.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn.recording {
    background: transparent;
    border-color: var(--term-severity-critical);
    color: var(--term-severity-critical);
    box-shadow: var(--term-glow-critical);
}

/* Action badge */
.sol-patient-header[data-theme="terminal"] .sol-action-badge {
    background: var(--term-accent);
    color: var(--term-fg-inverse);
    border-radius: var(--term-radius-none);
    font-family: var(--term-font-mono);
}

/* Disabled state */
.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn:disabled {
    opacity: 0.3;
    border-color: var(--term-border-subtle);
}

.sol-patient-header[data-theme="terminal"] .sol-patient-action-btn:disabled:hover {
    background: transparent;
    border-color: var(--term-border-subtle);
    color: var(--term-fg-secondary);
    box-shadow: none;
}


/* --------------------------------------------------------------------------
   SECTION 8b: ID-LEVEL BUTTON OVERRIDES
   Base CSS uses ID selectors (specificity 1,0,0) for individual buttons.
   These overrides combine [data-theme] + #id for specificity 1,1,0.
   WHY: Beats base #addNoteBtn (1,0,0) without !important
   -------------------------------------------------------------------------- */

/* View Notes (#addNoteBtn) — kill blue tint */
.sol-patient-header[data-theme="terminal"] #addNoteBtn {
    background: transparent;
    border: 1px solid var(--term-border-subtle);
    border-radius: var(--term-radius-none);
    color: var(--term-fg-secondary);
    width: auto;
    height: 36px;
}
.sol-patient-header[data-theme="terminal"] #addNoteBtn:hover {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
    transform: none;
    box-shadow: var(--term-glow-accent);
}

/* Add Clinical Data (#addClinicalDataBtn) — kill green tint */
.sol-patient-header[data-theme="terminal"] #addClinicalDataBtn {
    background: transparent;
    border: 1px solid var(--term-border-subtle);
    border-radius: var(--term-radius-none);
    color: var(--term-fg-secondary);
    width: auto;
    height: 36px;
}
.sol-patient-header[data-theme="terminal"] #addClinicalDataBtn:hover {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
    transform: none;
    box-shadow: var(--term-glow-accent);
}

/* Voice (#headerVoiceBtn) — kill purple tint, remove ::before separator */
.sol-patient-header[data-theme="terminal"] #headerVoiceBtn {
    background: transparent;
    border: 1px solid var(--term-border-subtle);
    border-radius: var(--term-radius-none);
    color: var(--term-fg-secondary);
    min-width: auto;
    padding: 0 12px;
    margin-left: 0;
}
.sol-patient-header[data-theme="terminal"] #headerVoiceBtn::before {
    display: none;
}
.sol-patient-header[data-theme="terminal"] #headerVoiceBtn:hover {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
    transform: none;
    box-shadow: var(--term-glow-accent);
}

/* Approve (#approveProblemsBtn) — terminal style */
.sol-patient-header[data-theme="terminal"] #approveProblemsBtn {
    background: transparent;
    border: 1px solid var(--term-border-subtle);
    border-radius: var(--term-radius-none);
    color: var(--term-fg-secondary);
    padding: 0 12px;
}
.sol-patient-header[data-theme="terminal"] #approveProblemsBtn:hover {
    background: var(--term-accent-ghost);
    border-color: var(--term-accent-dim);
    color: var(--term-accent);
    box-shadow: var(--term-glow-accent);
}

/* Create Note (#showNotePanelBtn) — terminal primary: mint outline, kills gradient/shimmer/pulse */
.sol-patient-header[data-theme="terminal"] #showNotePanelBtn {
    background: transparent;
    border: 2px solid var(--term-accent);
    border-radius: var(--term-radius-none);
    color: var(--term-accent);
    font-weight: 600;
    box-shadow: none;
    animation: none;
    padding: 10px 20px;
}
.sol-patient-header[data-theme="terminal"] #showNotePanelBtn::before {
    display: none;
}
.sol-patient-header[data-theme="terminal"] #showNotePanelBtn span {
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: var(--term-accent);
    animation: none;
}
.sol-patient-header[data-theme="terminal"] #showNotePanelBtn:hover {
    background: var(--term-accent);
    color: var(--term-fg-inverse);
    transform: none;
    box-shadow: var(--term-glow-accent-intense);
    animation: none;
}
.sol-patient-header[data-theme="terminal"] #showNotePanelBtn:hover span {
    -webkit-text-fill-color: var(--term-fg-inverse);
}
.sol-patient-header[data-theme="terminal"] #showNotePanelBtn svg {
    filter: none;
}


/* ==========================================================================
   SECTION 9: TRAJECTORY BAR CONTAINER
   Void bg, 0px radius, terminal border
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-trajectory-bar {
    background: var(--term-bg-header);
    border-top: 1px solid var(--term-border-default);
    border-bottom: none;
    padding: var(--term-space-md) var(--term-space-xl);
    position: relative;
    z-index: 1;
}

/* L-bracket corner - bottom-left (pairs with header's top-right) */
.sol-patient-header[data-theme="terminal"] .sol-trajectory-bar::after {
    content: '';
    position: absolute;
    bottom: var(--term-corner-offset);
    left: var(--term-corner-offset);
    width: var(--term-corner-size);
    height: var(--term-corner-size);
    border-bottom: var(--term-corner-width) solid var(--term-accent-dim);
    border-left: var(--term-corner-width) solid var(--term-accent-dim);
    pointer-events: none;
    z-index: 2;
    transition: border-color var(--term-duration-theatrical) var(--term-easing);
}

.sol-patient-header[data-theme="terminal"]:hover .sol-trajectory-bar::after {
    border-color: var(--term-accent);
}


/* ==========================================================================
   SECTION 10: TRAJECTORY SEGMENTS
   Square, monospace, mint accent on hover
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-trajectory-segment {
    border-radius: var(--term-radius-none);
    padding: var(--term-space-xs) var(--term-space-lg);
    transition: background-color var(--term-duration-normal) var(--term-easing),
                border-color var(--term-duration-normal) var(--term-easing);
}

.sol-patient-header[data-theme="terminal"] .sol-trajectory-segment:first-child {
    padding-left: var(--term-space-xs);
    margin-left: calc(-1 * var(--term-space-xs));
}

.sol-patient-header[data-theme="terminal"] .sol-trajectory-segment:hover {
    transform: none;
    background: var(--term-accent-ghost);
    box-shadow: none;
    border-left: 2px solid var(--term-accent-dim);
    padding-left: calc(var(--term-space-lg) - 2px);
}

.sol-patient-header[data-theme="terminal"] .sol-trajectory-segment:first-child:hover {
    padding-left: calc(var(--term-space-xs) - 2px);
}


/* ==========================================================================
   SECTION 11: TRAJECTORY LABELS
   ALL-CAPS, wide tracking, dim color
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-traj-label {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-xs);
    text-transform: uppercase;
    letter-spacing: var(--term-tracking-widest);
    color: var(--term-fg-muted);
    font-weight: 500;
}


/* ==========================================================================
   SECTION 12: TRAJECTORY VALUES
   Bright mint, monospace, tabular-nums
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-traj-value {
    font-family: var(--term-font-mono);
    font-size: var(--term-text-base);
    font-weight: 600;
    color: var(--term-fg-primary);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   SECTION 13: TRAJECTORY DIVIDERS
   Fade-centered gradient dividers
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-trajectory-divider {
    width: 1px;
    height: 28px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--term-border-strong) 30%,
        var(--term-border-strong) 70%,
        transparent 100%
    );
    margin: 0 var(--term-space-md);
}


/* ==========================================================================
   SECTION 14: PROGRESS INDICATOR
   Mint glow, square shape
   ========================================================================== */

.sol-patient-header[data-theme="terminal"] .sol-progress-indicator {
    font-family: var(--term-font-mono);
    font-variant-numeric: tabular-nums;
}

.sol-patient-header[data-theme="terminal"] .sol-progress-arrow {
    transition: transform var(--term-duration-normal) var(--term-easing);
}

/* Terminal progress states */
.sol-patient-header[data-theme="terminal"] .sol-progress-indicator[data-trend="improving"] {
    color: var(--term-severity-stable);
}

.sol-patient-header[data-theme="terminal"] .sol-progress-indicator[data-trend="stable"] {
    color: var(--term-fg-secondary);
}

.sol-patient-header[data-theme="terminal"] .sol-progress-indicator[data-trend="worsening"] {
    color: var(--term-severity-critical);
}


/* ==========================================================================
   SECTION 15: RESPONSIVE BREAKPOINTS
   Stack adjustments for narrow viewports
   ========================================================================== */

@media (max-width: 1400px) {
    .sol-patient-header[data-theme="terminal"] .sol-patient-action-btn span:not(.sol-action-badge) {
        display: none;
    }
    .sol-patient-header[data-theme="terminal"] .sol-patient-action-btn {
        padding: 0 10px;
    }
}

@media (max-width: 1100px) {
    /* Stack identity and actions vertically */
    .sol-patient-header[data-theme="terminal"] .sol-header-identity-row {
        flex-direction: column;
        gap: var(--term-space-md);
        align-items: stretch;
    }

    .sol-patient-header[data-theme="terminal"] .sol-patient-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Compact trajectory bar */
    .sol-patient-header[data-theme="terminal"] .sol-trajectory-bar {
        flex-wrap: wrap;
        gap: var(--term-space-sm);
    }

    .sol-patient-header[data-theme="terminal"] .sol-trajectory-divider {
        display: none;
    }

    .sol-patient-header[data-theme="terminal"] .sol-trajectory-segment {
        border-left: 2px solid var(--term-border-subtle);
        padding-left: calc(var(--term-space-md) - 2px);
    }
}

@media (max-width: 768px) {
    .sol-patient-header[data-theme="terminal"] .sol-header-identity-row {
        padding: var(--term-space-md);
    }

    .sol-patient-header[data-theme="terminal"] .sol-trajectory-bar {
        padding: var(--term-space-sm) var(--term-space-md);
    }

    .sol-patient-header[data-theme="terminal"] .sol-patient-name {
        font-size: 1.125rem;
    }

    .sol-patient-header[data-theme="terminal"] .sol-patient-avatar {
        width: 48px;
        height: 48px;
        font-size: 1rem;
    }
}


/* ==========================================================================
   SECTION 16: REDUCED MOTION
   Respect prefers-reduced-motion — disable glow/animation effects
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .sol-patient-header[data-theme="terminal"],
    .sol-patient-header[data-theme="terminal"] *,
    .sol-patient-header[data-theme="terminal"] *::before,
    .sol-patient-header[data-theme="terminal"] *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    .sol-patient-header[data-theme="terminal"] .sol-severity-dot {
        animation: none;
    }

    .sol-patient-header[data-theme="terminal"] .sol-patient-action-btn:hover,
    .sol-patient-header[data-theme="terminal"] .sol-patient-action-btn.primary:hover {
        box-shadow: none;
    }

    .sol-patient-header[data-theme="terminal"] .sol-severity-badge:hover {
        box-shadow: none;
    }

    .sol-patient-header[data-theme="terminal"] .sol-patient-avatar:hover {
        box-shadow: none;
    }
}