/* ============================================
   PROGRESS NOTE MODAL - V2 REDESIGN
   ============================================
   ARCHITECTURE: True modal with backdrop, clear boundaries, proper elevation
   WHY: Previous "inline takeover" approach was confusing - unclear if modal or inline
   DESIGN: Medical-grade clarity with glass-morphism, strong borders, and premium feel

   DESIGN PRINCIPLES:
   1. UNMISTAKABLE MODAL - Backdrop + centering + elevation = clearly a modal
   2. STRONG BOUNDARIES - No ambiguity about where modal starts/ends
   3. GLASS-MORPHISM - Premium frosted glass effect matching medical app aesthetic
   4. CLINICAL PRECISION - Clean lines, clear hierarchy, professional feel
   ============================================ */

/* ============================================
   CSS CUSTOM PROPERTIES - MODAL PALETTE
   ============================================ */
:root {
    /* Modal Backdrop */
    --modal-backdrop: rgba(2, 6, 23, 0.85);
    --modal-backdrop-blur: 8px;

    /* Modal Container - Glass Effect */
    --modal-glass-bg: rgba(15, 23, 42, 0.92);
    --modal-glass-border: rgba(148, 163, 184, 0.25);
    --modal-glass-border-glow: rgba(99, 102, 241, 0.4);

    /* Modal Surface Layers */
    --modal-surface-header: rgba(30, 41, 59, 0.95);
    --modal-surface-body: rgba(15, 23, 42, 0.98);
    --modal-surface-footer: rgba(30, 41, 59, 0.95);
    --modal-surface-card: rgba(51, 65, 85, 0.5);

    /* Modal Shadows */
    --modal-shadow-outer:
        0 0 0 1px rgba(148, 163, 184, 0.15),
        0 24px 48px -12px rgba(0, 0, 0, 0.5),
        0 12px 24px -8px rgba(0, 0, 0, 0.4),
        0 4px 12px -4px rgba(0, 0, 0, 0.3);
    --modal-shadow-glow: 0 0 60px -10px rgba(99, 102, 241, 0.3);

    /* Modal Animation */
    --modal-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --modal-duration: 0.35s;

    /* Status Colors */
    --modal-status-active: #3b82f6;
    --modal-status-success: #22c55e;
    --modal-status-warning: #f59e0b;
    --modal-status-critical: #ef4444;
    --modal-status-ai: #8b5cf6;
}

/* ============================================
   MODAL BACKDROP - ESSENTIAL FOR MODAL FEEL
   ============================================ */
.problem-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--modal-backdrop);
    backdrop-filter: blur(var(--modal-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--modal-backdrop-blur));
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--modal-duration) var(--modal-ease),
                visibility var(--modal-duration);
}

.problem-modal-backdrop.visible {
    opacity: 1;
    visibility: visible;
}

/* Click backdrop to close (optional behavior) */
.problem-modal-backdrop.dismissible {
    cursor: pointer;
}

/* ============================================
   MODAL CONTAINER - GLASS MORPHISM
   ============================================ */
.problem-approval-container {
    /* CHANGE: From absolute fill to fixed centered modal */
    /* FIX (2026-01-14): Added !important to override conflicting old CSS files */
    /* NOTE: Must use right/bottom: unset instead of inset: unset - inset shorthand overrides top/left */
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: unset !important;
    bottom: unset !important;
    transform: translate(-50%, -50%) scale(0.95) !important;

    /* Modal Dimensions - Optimized for data density while maintaining readability */
    /* FIX (2026-01-14): Increased max dimensions to use more screen real estate */
    /* FIX (2026-01-13): Removed max-height cap - modal should use available viewport */
    width: calc(100vw - 48px);
    max-width: 1400px;
    height: calc(100vh - 48px);
    max-height: calc(100vh - 48px);

    /* Glass Morphism Container */
    background: var(--modal-glass-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);

    /* STRONG VISIBLE BORDER - No ambiguity */
    border: 2px solid var(--modal-glass-border);
    border-radius: 24px;

    /* Premium Shadow System */
    box-shadow: var(--modal-shadow-outer), var(--modal-shadow-glow);

    /* Layout */
    /* FIX (2026-01-15): Must use !important to override .visible { display: block !important } in sol-layout.css:5176 */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden;
    /* FIX (2026-01-20): Prevent legacy containerSlideIn animation from overriding centering transform */
    animation: none !important;

    /* Z-Index */
    z-index: 1000;

    /* Initial State (hidden) */
    opacity: 0;
    visibility: hidden;

    /* Transition */
    transition: transform var(--modal-duration) var(--modal-ease),
                opacity var(--modal-duration) var(--modal-ease),
                visibility var(--modal-duration);
}

/* Modal Open State */
.problem-approval-container.visible {
    transform: translate(-50%, -50%) scale(1) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide class still works for JS compatibility */
.problem-approval-container.hidden {
    display: none;
}

/* ============================================
   MODAL HEADER - CLEAR HIERARCHY
   ============================================ */
.problem-approval-header {
    flex-shrink: 0;
    background: var(--modal-surface-header);
    border-bottom: 1px solid rgba(148, 163, 184, 0.2);
    position: relative;
    overflow: hidden;
}

/* Decorative Top Gradient Bar */
.problem-approval-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        var(--modal-status-ai) 0%,
        var(--modal-status-active) 50%,
        var(--modal-status-success) 100%
    );
    opacity: 0.8;
}

/* Phase Progress Bar - Enhanced */
.vital-phase-progress {
    height: 4px;
    background: rgba(51, 65, 85, 0.8);
    position: relative;
    overflow: hidden;
    margin-top: 3px;
}

.vital-phase-progress::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--phase-progress, 0%);
    background: linear-gradient(90deg, var(--modal-status-ai), var(--modal-status-success));
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.5);
}

/* Header Content Layout - Compact for data density */
.vital-header-content {
    padding: 16px 24px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
}

.vital-header-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Phase Badge - Compact */
.vital-phase-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 20px;
    width: fit-content;
    font-family: 'JetBrains Mono', 'SF Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.vital-phase-badge .phase-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a78bfa;
    animation: phasePulse 1.5s ease-in-out infinite;
}

@keyframes phasePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

.vital-phase-badge.complete {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.35);
    color: #86efac;
}

.vital-phase-badge.complete .phase-dot {
    background: #22c55e;
    animation: none;
}

/* Header Title - Compact */
.vital-header-title {
    font-size: 20px;
    font-weight: 700;
    color: #f8fafc;
    margin: 4px 0 2px;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.vital-header-subtitle {
    font-size: 13px;
    color: #94a3b8;
    max-width: 500px;
    line-height: 1.4;
}

/* Metrics Grid - Compact for data density */
.vital-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.vital-metric {
    background: rgba(51, 65, 85, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 90px;
    position: relative;
    overflow: hidden;
    transition: all 0.25s ease;
}

.vital-metric::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: var(--metric-color, #64748b);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.vital-metric:hover {
    transform: translateY(-2px);
    border-color: var(--metric-color, rgba(148, 163, 184, 0.4));
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.vital-metric:hover::before {
    opacity: 1;
}

.vital-metric.problems { --metric-color: #3b82f6; }
.vital-metric.suggestions { --metric-color: #f59e0b; }
.vital-metric.selected { --metric-color: #22c55e; }

.vital-metric-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 9px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}

.vital-metric-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1;
}

.vital-metric-status {
    font-size: 10px;
    color: #94a3b8;
    margin-top: 4px;
}

/* ============================================
   MODAL BODY - SCROLLABLE CONTENT
   ============================================ */
.problem-approval-body {
    flex: 1 1 0;  /* FIX (2026-01-15): Explicit flex-basis: 0 ensures proper shrinking */
    min-height: 0;
    overflow: hidden;  /* Children handle their own scrolling */
    background: var(--modal-surface-body);
    position: relative;
    padding: 0;  /* FIX (2026-01-13): Remove padding, let content handle spacing */
    /* FIX (2026-01-15): Use flexbox to properly size content child instead of absolute positioning */
    display: flex;
    flex-direction: column;
}

/* Scroll fade indicators */
.problem-approval-body::before,
.problem-approval-body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    z-index: 5;
}

.problem-approval-body::before {
    top: 0;
    background: linear-gradient(to bottom, var(--modal-surface-body), transparent);
}

.problem-approval-body::after {
    bottom: 0;
    background: linear-gradient(to top, var(--modal-surface-body), transparent);
}

/* Content Grid */
/* FIX (2026-01-15): Removed absolute positioning - use flex: 1 to fill parent instead */
/* WHY: Absolute positioning breaks scroll calculations; flex respects parent bounds */
.problem-modal-content {
    display: grid;
    grid-template-columns: 1fr 220px;
    grid-template-rows: minmax(0, 1fr);  /* Allow row to shrink below content */
    gap: 0;
    min-height: 0;
    flex: 1 1 0;  /* Fill available space in flex parent */
    overflow: hidden;  /* Cells handle their own scroll */
}

/* H&P Modal uses single-column layout (no sidebar) */
#handp-modal-content.problem-modal-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 24px;
    overflow-y: auto;
}

/* FIX (2026-01-13): Grid cell needs explicit height + overflow for scrolling */
.approval-main-content {
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;  /* Constrain to grid cell height */
    height: 100%;      /* Fill grid cell */
    padding: 24px 28px;
    padding-bottom: 40px;  /* FIX (2026-01-15): Extra space at bottom for scroll clearance */
    display: flex;
    flex-direction: column;
    gap: 20px;
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
.approval-main-content::-webkit-scrollbar {
    width: 8px;
}

.approval-main-content::-webkit-scrollbar-track {
    background: transparent;
}

.approval-main-content::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 4px;
}

.approval-main-content::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* ============================================
   SEVERITY GROUPS - CLEAR SECTIONS
   ============================================ */
.severity-group {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid var(--group-border, rgba(148, 163, 184, 0.2));
    background: var(--group-bg, rgba(51, 65, 85, 0.4));
    transition: all 0.25s ease;
    animation: groupSlideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--stagger-delay, 0ms);
    /* FIX (2026-01-15): Prevent flex shrinking so content overflows and creates scroll */
    flex-shrink: 0;
}

@keyframes groupSlideIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.severity-group:hover {
    border-color: var(--group-accent, rgba(148, 163, 184, 0.4));
}

.severity-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    cursor: pointer;
    transition: background 0.2s ease;
    position: relative;
}

/* Left accent bar */
.severity-group-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: var(--group-accent, #64748b);
    border-radius: 0 4px 4px 0;
}

.severity-group-header:hover {
    background: rgba(255, 255, 255, 0.03);
}

.severity-group-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-weight: 600;
    font-size: 15px;
    color: var(--group-text, #e2e8f0);
}

.severity-group-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: var(--group-icon-bg, rgba(51, 65, 85, 0.6));
    color: var(--group-accent, #94a3b8);
    transition: all 0.25s ease;
}

.severity-group:hover .severity-group-icon {
    transform: scale(1.08);
    box-shadow: 0 0 16px var(--group-glow, transparent);
}

.severity-group-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--group-count-bg, rgba(255, 255, 255, 0.08));
    color: var(--group-accent, #94a3b8);
}

/* Severity Variants */
.severity-group.critical {
    --group-border: rgba(239, 68, 68, 0.35);
    --group-bg: linear-gradient(135deg, rgba(239, 68, 68, 0.1), transparent);
    --group-accent: #ef4444;
    --group-text: #fca5a5;
    --group-icon-bg: rgba(239, 68, 68, 0.15);
    --group-glow: rgba(239, 68, 68, 0.3);
    --group-count-bg: rgba(239, 68, 68, 0.15);
}

.severity-group.improving {
    --group-border: rgba(34, 197, 94, 0.35);
    --group-bg: linear-gradient(135deg, rgba(34, 197, 94, 0.08), transparent);
    --group-accent: #22c55e;
    --group-text: #86efac;
    --group-icon-bg: rgba(34, 197, 94, 0.15);
    --group-glow: rgba(34, 197, 94, 0.3);
    --group-count-bg: rgba(34, 197, 94, 0.15);
}

.severity-group.active {
    --group-border: rgba(59, 130, 246, 0.35);
    --group-bg: linear-gradient(135deg, rgba(59, 130, 246, 0.08), transparent);
    --group-accent: #3b82f6;
    --group-text: #93c5fd;
    --group-icon-bg: rgba(59, 130, 246, 0.15);
    --group-glow: rgba(59, 130, 246, 0.3);
    --group-count-bg: rgba(59, 130, 246, 0.15);
}

.severity-group.chronic {
    --group-border: rgba(245, 158, 11, 0.3);
    --group-bg: linear-gradient(135deg, rgba(245, 158, 11, 0.07), transparent);
    --group-accent: #f59e0b;
    --group-text: #fcd34d;
    --group-icon-bg: rgba(245, 158, 11, 0.15);
    --group-glow: rgba(245, 158, 11, 0.3);
    --group-count-bg: rgba(245, 158, 11, 0.15);
}

.severity-group.labs {
    --group-border: rgba(139, 92, 246, 0.3);
    --group-bg: linear-gradient(135deg, rgba(139, 92, 246, 0.07), transparent);
    --group-accent: #8b5cf6;
    --group-text: #c4b5fd;
    --group-icon-bg: rgba(139, 92, 246, 0.15);
    --group-glow: rgba(139, 92, 246, 0.3);
    --group-count-bg: rgba(139, 92, 246, 0.15);
}

.severity-group-body {
    padding: 14px 18px 18px;
}

.severity-group-body.collapsed {
    display: none;
}

/* ============================================
   PROBLEM ITEMS - CLEAN CARDS
   ============================================ */
.problem-item-compact {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(51, 65, 85, 0.5);
    border-radius: 14px;
    margin-bottom: 10px;
    border: 1px solid transparent;
    transition: all 0.2s ease;
    cursor: pointer;
    animation: problemFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--problem-delay, 0ms);
}

@keyframes problemFadeIn {
    from {
        opacity: 0;
        transform: translateX(-12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.problem-item-compact:last-child {
    margin-bottom: 0;
}

.problem-item-compact:hover {
    background: rgba(71, 85, 105, 0.6);
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateX(4px);
}

.problem-item-compact.is-selected {
    border-color: #8b5cf6;
    box-shadow: 0 0 0 1px #8b5cf6, 0 4px 16px rgba(139, 92, 246, 0.25);
}

/* Checkbox Styling */
.problem-item-compact input[type="checkbox"] {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #64748b;
    border-radius: 7px;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: transparent;
}

.problem-item-compact input[type="checkbox"]:checked {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
}

.problem-item-compact input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.problem-item-compact input[type="checkbox"]:hover {
    border-color: #a78bfa;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
}

.problem-item-compact input[type="checkbox"]:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* Problem Name */
.problem-item-compact .problem-name {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.problem-item-compact .problem-name .text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status Badge */
.problem-status-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}

.problem-status-badge.ai {
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    border: 1px solid rgba(139, 92, 246, 0.35);
}

.problem-status-badge.manual {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

/* ============================================
   SUGGESTIONS SECTION - AI INSIGHTS
   ============================================ */
.smart-suggestions-section {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(139, 92, 246, 0.04));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    animation: suggestionsSlideIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 150ms;
}

@keyframes suggestionsSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.suggestion-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
}

.suggestion-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    font-weight: 600;
    color: #c4b5fd;
}

.suggestion-section-title i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 10px;
    font-size: 18px;
}

.suggestion-count-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    background: #8b5cf6;
    color: white;
    padding: 5px 14px;
    border-radius: 20px;
}

.suggestion-list {
    padding: 14px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Suggestion Card */
.suggestion-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 18px;
    background: rgba(51, 65, 85, 0.5);
    border-radius: 14px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    transition: all 0.2s ease;
}

.suggestion-card:hover {
    border-color: #8b5cf6;
    background: rgba(71, 85, 105, 0.5);
}

.suggestion-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.suggestion-icon.merge {
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.suggestion-icon.duplicate {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.suggestion-title .child-name {
    color: #fbbf24;
}

.suggestion-title .parent-name {
    color: #a78bfa;
}

.suggestion-rationale {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.4;
}

.suggestion-actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.suggestion-btn {
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.suggestion-btn.accept {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.35);
}

.suggestion-btn.accept:hover {
    background: #22c55e;
    color: white;
    transform: scale(1.03);
}

.suggestion-btn.dismiss {
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
}

.suggestion-btn.dismiss:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

/* ============================================
   SIDEBAR - PROBLEM TREE OVERVIEW
   ============================================ */
/* FIX (2026-01-13): Grid cell needs explicit height for scrolling */
.problem-tree-sidebar {
    background: rgba(30, 41, 59, 0.8);
    border-left: 1px solid rgba(148, 163, 184, 0.15);
    padding: 20px 16px;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;
    height: 100%;
}

.problem-tree-sidebar h5 {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #64748b;
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.15);
}

.tree-severity-group {
    margin-bottom: 16px;
}

.tree-severity-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding-left: 8px;
}

.tree-problem-item {
    font-size: 12px;
    padding: 8px 10px;
    color: #e2e8f0;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 6px;
    margin-left: 8px;
    margin-bottom: 2px;
}

.tree-problem-item:hover {
    background: rgba(71, 85, 105, 0.4);
    border-left-color: #8b5cf6;
}

.tree-problem-item.is-unchecked {
    opacity: 0.4;
}

.tree-problem-item.is-unchecked .tree-problem-title {
    text-decoration: line-through;
}

/* ============================================
   MODAL FOOTER - ACTIONS
   ============================================ */
.problem-approval-footer {
    flex-shrink: 0;
    flex-grow: 0;  /* FIX (2026-01-15): Ensure footer never grows */
    padding: 14px 24px 16px;
    background: var(--modal-surface-footer);
    border-top: 1px solid rgba(148, 163, 184, 0.2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    position: relative;  /* FIX (2026-01-15): Establish stacking context */
    z-index: 10;  /* FIX (2026-01-15): Keep footer above body content */
}

.problem-footer-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #94a3b8;
}

.problem-footer-info .selection-count {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    color: #a78bfa;
}

.problem-footer-actions {
    display: flex;
    gap: 14px;
}

.problem-footer-secondary {
    padding: 14px 26px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    background: transparent;
    color: #94a3b8;
    border: 1px solid rgba(148, 163, 184, 0.3);
    transition: all 0.2s ease;
}

.problem-footer-secondary:hover {
    border-color: #ef4444;
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.1);
}

.problem-footer-primary {
    padding: 14px 32px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border: none;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.3);
}

.problem-footer-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    opacity: 0;
    transition: opacity 0.25s;
}

.problem-footer-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(99, 102, 241, 0.4);
}

.problem-footer-primary:hover::before {
    opacity: 1;
}

.problem-footer-primary:active {
    transform: translateY(0);
}

.problem-footer-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   LOADING STATE
   ============================================ */
/* FIX (2026-01-13): Loading/error states need absolute positioning to match content grid */
.problem-modal-state {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    text-align: center;
    background: var(--modal-surface-body);
    z-index: 2;  /* Above content when visible */
}

.problem-modal-state.hidden {
    display: none;
}

.vital-loading-container {
    margin-bottom: 32px;
}

/* EKG Waveform */
.ekg-waveform {
    width: 200px;
    height: 60px;
}

.ekg-waveform svg {
    width: 100%;
    height: 100%;
}

.ekg-line {
    fill: none;
    stroke: #8b5cf6;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: ekgDraw 2s ease-in-out infinite;
}

@keyframes ekgDraw {
    0% {
        stroke-dashoffset: 400;
        opacity: 0.3;
    }
    50% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
    100% {
        stroke-dashoffset: -400;
        opacity: 0.3;
    }
}

.vital-loading-text {
    font-size: 17px;
    font-weight: 500;
    color: #f1f5f9;
    margin-bottom: 8px;
}

.vital-loading-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    color: #64748b;
}

/* ============================================
   ERROR STATE
   ============================================ */
/* FIX (2026-01-13): Error state is a centered card within the absolute container */
.problem-modal-state--error {
    /* Override absolute positioning for centered card appearance */
    inset: unset;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 80px);
    max-width: 500px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 18px;
    padding: 40px 24px;
}

.vital-error-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 32px;
    color: #f87171;
}

.vital-error-title {
    font-size: 20px;
    font-weight: 600;
    color: #fca5a5;
    margin-bottom: 8px;
}

.vital-error-message {
    font-size: 14px;
    color: #94a3b8;
    max-width: 400px;
    line-height: 1.5;
}

/* ============================================
   CLOSE BUTTON - MODAL ESSENTIAL
   ============================================ */
.modal-close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(51, 65, 85, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.2s ease;
    z-index: 10;
}

.modal-close-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fca5a5;
    transform: scale(1.05);
}

.modal-close-btn:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */
@media (max-width: 1100px) {
    .problem-approval-container {
        width: calc(100vw - 48px);
        height: calc(100vh - 48px);
    }

    .vital-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .problem-modal-content {
        grid-template-columns: 1fr 180px;
    }
}

@media (max-width: 900px) {
    .problem-approval-container {
        width: calc(100vw - 32px);
        height: calc(100vh - 32px);
        max-height: none;
    }

    .vital-header-content {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px 24px 16px;
    }

    .vital-metrics-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .problem-modal-content {
        grid-template-columns: 1fr;
    }

    .problem-tree-sidebar {
        display: none;
    }
}

@media (max-width: 600px) {
    .problem-approval-container {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
        /* FIX (2026-01-13): Override base !important for mobile slide-up */
        top: 0 !important;
        left: 0 !important;
        transform: translateY(100%) !important;
    }

    .problem-approval-container.visible {
        transform: translateY(0) !important;
    }

    .vital-header-content {
        padding: 16px 20px;
    }

    .vital-header-title {
        font-size: 22px;
    }

    .vital-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .vital-metric {
        padding: 12px 14px;
    }

    .vital-metric-value {
        font-size: 24px;
    }

    .approval-main-content {
        padding: 16px 18px;
    }

    .problem-approval-footer {
        flex-direction: column;
        gap: 16px;
        padding: 16px 20px 24px;
    }

    .problem-footer-actions {
        width: 100%;
        flex-direction: column;
    }

    .problem-footer-secondary,
    .problem-footer-primary {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    .problem-modal-backdrop {
        display: none;
    }

    .problem-approval-container {
        position: static;
        transform: none;
        width: 100%;
        max-width: none;
        height: auto;
        max-height: none;
        box-shadow: none;
        border: 1px solid #ccc;
        background: white;
    }

    .severity-group,
    .problem-item-compact,
    .suggestion-card {
        border: 1px solid #ddd;
        background: white;
    }
}