/**
 * Longitudinal Panel - Full Timeline View
 *
 * ARCHITECTURE: ALL days visible at once, color-coded, maximum context
 * WHY: No tab switching - see everything, scroll through the full hospitalization
 */

/* ============================================================================
   Container
   ============================================================================ */

.sol-longitudinal-panel .sol-panel-content {
    padding: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
}

.lp-timeline {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
}

.lp-timeline-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%) !important;
    border-bottom: 1px solid var(--sol-border-subtle, #334155) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    background-color: #1e293b; /* Fallback */
}

.lp-timeline-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sol-text-primary, #f1f5f9) !important;
}

.lp-timeline-meta {
    font-size: 11px !important;
    color: var(--sol-text-tertiary, #64748b) !important;
}

.lp-timeline-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    background: var(--sol-bg-tertiary, rgba(0, 0, 0, 0.2)) !important;
}

/* ============================================================================
   Day Block
   ============================================================================ */

.lp-day-block {
    background: var(--sol-bg-primary, #0f172a) !important;
    border-left: 4px solid var(--sol-border-subtle, #334155) !important;
    margin-bottom: 2px;
}

.lp-day-block.is-today {
    border-left-color: var(--sol-accent, #38bdf8) !important;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.05) 0%, transparent 30%) !important;
}

.lp-day-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 14px !important;
    background: var(--sol-bg-secondary, rgba(255, 255, 255, 0.02)) !important;
    border-bottom: 1px solid var(--sol-border-subtle, #1e293b) !important;
}

.lp-day-badge {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.lp-day-badge.today .lp-day-num {
    color: var(--sol-accent, #38bdf8) !important;
}

.lp-day-num {
    font-size: 15px !important;
    font-weight: 800 !important;
    color: var(--sol-text-primary, #f1f5f9) !important;
}

.lp-day-date {
    font-size: 12px !important;
    color: var(--sol-text-secondary, #94a3b8) !important;
}

.lp-today-badge {
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: var(--sol-accent, #38bdf8) !important;
    color: #000 !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
}

.lp-day-stats {
    display: flex !important;
    gap: 6px !important;
}

.lp-stat-chip {
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

.lp-stat-chip.worsening {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #fca5a5 !important;
}

.lp-stat-chip.active {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fcd34d !important;
}

.lp-stat-chip.improving {
    background: rgba(34, 197, 94, 0.2) !important;
    color: #86efac !important;
}

.lp-stat-chip.stable {
    background: rgba(100, 116, 139, 0.2) !important;
    color: #94a3b8 !important;
}

.lp-stat-chip.resolved {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
}

.lp-stat-chip.none {
    background: rgba(100, 116, 139, 0.1) !important;
    color: #64748b !important;
}

/* ============================================================================
   Day Body
   ============================================================================ */

.lp-day-body {
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* Raw Input Block */
.lp-raw-block {
    background: var(--sol-bg-tertiary, rgba(0, 0, 0, 0.3)) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.lp-raw-label {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 12px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--sol-text-secondary, #94a3b8) !important;
}

.lp-char-count {
    font-size: 10px !important;
    color: var(--sol-text-tertiary, #64748b) !important;
    font-weight: 400 !important;
}

.lp-raw-text {
    margin: 0 !important;
    padding: 12px !important;
    font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    color: var(--sol-text-secondary, #94a3b8) !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.lp-empty-raw {
    padding: 16px !important;
    text-align: center !important;
    color: var(--sol-text-tertiary, #64748b) !important;
    font-size: 11px !important;
    font-style: italic !important;
}

/* ============================================================================
   Problems Grid
   ============================================================================ */

.lp-problems-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
    gap: 10px !important;
}

.lp-no-problems {
    grid-column: 1 / -1 !important;
    padding: 20px !important;
    text-align: center !important;
    color: var(--sol-text-tertiary, #64748b) !important;
    font-size: 12px !important;
}

/* ============================================================================
   Problem Card
   ============================================================================ */

.lp-problem-card {
    border-radius: 8px !important;
    padding: 12px !important;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.lp-problem-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.lp-problem-top {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 8px !important;
}

.lp-severity-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 6px currentColor !important;
}

.lp-problem-name {
    flex: 1 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--sol-text-primary, #f1f5f9) !important;
    line-height: 1.3 !important;
}

.lp-status-badge {
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    flex-shrink: 0 !important;
}

/* Field (Assessment/Plan) */
.lp-field {
    display: flex !important;
    gap: 6px !important;
    margin-top: 6px !important;
    padding: 8px !important;
    background: rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px !important;
}

.lp-field-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--sol-text-tertiary, #64748b) !important;
    flex-shrink: 0 !important;
}

.lp-field-text {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: var(--sol-text-secondary, #cbd5e1) !important;
}

/* Evidence */
.lp-evidence {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    margin-top: 8px !important;
}

.lp-ev-chip {
    padding: 2px 8px !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    font-size: 10px !important;
    color: var(--sol-text-secondary, #94a3b8) !important;
}

.lp-ev-more {
    padding: 2px 6px !important;
    font-size: 10px !important;
    color: var(--sol-text-tertiary, #64748b) !important;
}

.lp-no-detail {
    margin-top: 6px !important;
    font-size: 11px !important;
    color: var(--sol-text-tertiary, #64748b) !important;
    font-style: italic !important;
}

/* ============================================================================
   States
   ============================================================================ */

.lp-loading,
.lp-empty,
.lp-error,
.lp-no-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 40px 20px !important;
    text-align: center !important;
    color: var(--sol-text-secondary, #94a3b8) !important;
}

.lp-empty {
    flex-direction: row !important;
}

.lp-spinner {
    width: 28px !important;
    height: 28px !important;
    border: 3px solid var(--sol-border-subtle, #334155) !important;
    border-top-color: var(--sol-accent, #38bdf8) !important;
    border-radius: 50% !important;
    animation: lp-spin 0.8s linear infinite !important;
}

@keyframes lp-spin {
    to { transform: rotate(360deg); }
}

.lp-error {
    color: var(--sol-error, #ef4444) !important;
}

.lp-no-data-icon {
    font-size: 32px !important;
    opacity: 0.6 !important;
}

.lp-no-data-title {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.lp-no-data-hint {
    font-size: 12px !important;
    color: var(--sol-text-tertiary, #64748b) !important;
}

/* ============================================================================
   Responsive
   ============================================================================ */

@media (max-width: 768px) {
    .lp-problems-grid {
        grid-template-columns: 1fr !important;
    }

    .lp-day-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
}