/* =====================================================
   센터별 Accent 컬러 시스템 (EMR 표준)
   ForNurse Medical Center - Version 5.3.7
   ===================================================== */

/* 
   설계 원칙:
   1. System Blue는 EMR 기본 UI 컬러로 고정 (헤더, 테이블 헤더 등)
   2. 센터 컬러는 Accent Color로만 제한적 사용
   3. 적용 위치: 헤더 하단 컨텍스트 바 (3-4px), 좌측 메뉴 활성 라인 (3px)
   4. 배경색 사용 금지: 좌측 탭, 메인 콘텐츠, 카드, 테이블
   5. 채도 낮은 톤으로 시스템 컬러와 충돌 방지
*/

:root {
    /* ========== EMR 시스템 기본 컬러 (고정) ========== */
    --system-blue: #0066cc;           /* EMR 시스템 블루 - 헤더, 테이블 헤더 */
    --system-blue-light: #e8f4f8;     /* 연한 시스템 블루 - 호버, 선택 */
    --system-blue-dark: #004999;      /* 진한 시스템 블루 - 그라데이션 */
    
    /* ========== 센터별 Accent 컬러 (채도 낮은 톤) ========== */
    /* 뇌신경센터 - 차분한 블루그레이 */
    --accent-stroke: #6B8CAE;         /* 주 컬러 */
    --accent-stroke-light: #E8EEF4;   /* 연한 톤 (호버용) */
    --accent-stroke-dark: #4A6B8A;    /* 진한 톤 */
    
    /* 외상센터 - 절제된 다크 레드 (경고색과 구분) */
    --accent-trauma: #8B5555;         /* 주 컬러 - 차분한 적갈색 */
    --accent-trauma-light: #F0E8E8;   /* 연한 톤 */
    --accent-trauma-dark: #6B4040;    /* 진한 톤 */
    
    /* 척추관절센터 - 조용한 세이지 그린 */
    --accent-spine: #7A9B7E;          /* 주 컬러 */
    --accent-spine-light: #EBF2EC;    /* 연한 톤 */
    --accent-spine-dark: #5A7B5E;     /* 진한 톤 */
    
    /* 암센터 - 중립적 틸 그린 */
    --accent-cancer: #6B8B8B;         /* 주 컬러 */
    --accent-cancer-light: #E8EEEE;   /* 연한 톤 */
    --accent-cancer-dark: #4B6B6B;    /* 진한 톤 */
    
    /* 심혈관센터 - 절제된 와인 레드 */
    --accent-cardio: #9B6B7E;         /* 주 컬러 */
    --accent-cardio-light: #F2EBF0;   /* 연한 톤 */
    --accent-cardio-dark: #7B4B5E;    /* 진한 톤 */
    
    /* 호흡기센터 - 조용한 틸 블루 */
    --accent-respiratory: #6B8B9B;    /* 주 컬러 */
    --accent-respiratory-light: #E8EEF2; /* 연한 톤 */
    --accent-respiratory-dark: #4B6B7B; /* 진한 톤 */
    
    /* 간호간병통합센터 - 부드러운 퍼플 그레이 */
    --accent-integrated: #8B7A9B;     /* 주 컬러 */
    --accent-integrated-light: #F0EBF2; /* 연한 톤 */
    --accent-integrated-dark: #6B5A7B; /* 진한 톤 */
    
    /* 소화기센터 - 따뜻한 베이지 브라운 */
    --accent-gastro: #9B8B6B;         /* 주 컬러 */
    --accent-gastro-light: #F2EFEB;   /* 연한 톤 */
    --accent-gastro-dark: #7B6B4B;    /* 진한 톤 */
    
    /* ========== 환자 상태 컬러 (센터 컬러와 분리) ========== */
    --status-critical: #dc3545;       /* 위험 - 밝은 빨강 */
    --status-high: #ff8800;           /* 주의 - 주황 */
    --status-moderate: #ffc107;       /* 경고 - 노랑 */
    --status-stable: #28a745;         /* 안정 - 초록 */
    --status-info: #17a2b8;           /* 정보 - 청록 */
    
    /* ========== 중립 컬러 (배경용) ========== */
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-gray: #e9ecef;
    --border-color: #dee2e6;
    --text-primary: #212529;
    --text-secondary: #6c757d;
}

/* =====================================================
   센터 컨텍스트 바 (헤더 하단 4px)
   ===================================================== */
.center-context-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--accent-stroke); /* 기본: 뇌신경센터 */
    transition: background-color 0.3s ease;
    z-index: 1001;
}

/* 센터별 컨텍스트 바 색상 */
/* 새 센터 ID 기반 (neuro, emergency, spine, oncology, cardio, resp) */
body.neuro-center .center-context-bar {
    background: var(--accent-stroke);
}

body.emergency-center .center-context-bar {
    background: var(--accent-trauma);
}

body.spine-center .center-context-bar {
    background: var(--accent-spine);
}

body.oncology-center .center-context-bar {
    background: var(--accent-cancer);
}

body.cardio-center .center-context-bar {
    background: var(--accent-cardio);
}

body.resp-center .center-context-bar {
    background: var(--accent-respiratory);
}

body.integrated-center .center-context-bar {
    background: var(--accent-integrated);
}

body.gastro-center .center-context-bar {
    background: var(--accent-gastro);
}

/* 하위 호환성: 구 클래스명 */
body.stroke-center .center-context-bar {
    background: var(--accent-stroke);
}

body.trauma-center .center-context-bar {
    background: var(--accent-trauma);
}

body.cancer-center .center-context-bar {
    background: var(--accent-cardio);
}

body.respiratory-center .center-context-bar {
    background: var(--accent-respiratory);
}

body.no-center-selected .center-context-bar {
    background: var(--bg-gray); /* 센터 미선택 시 회색 */
}

/* =====================================================
   좌측 메뉴 활성 항목 강조 라인 (좌측 3px)
   ===================================================== */

/* 기본 메뉴 아이템 */
.menu-item {
    position: relative;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--text-primary);
    transition: background-color 0.15s ease;
    border-left: 3px solid transparent; /* 강조 라인 공간 확보 */
}

/* 활성 메뉴 - 센터별 강조 라인 */
body.stroke-center .menu-item.active {
    background-color: var(--accent-stroke-light);
    border-left-color: var(--accent-stroke);
    color: var(--text-primary);
}

body.trauma-center .menu-item.active {
    background-color: var(--accent-trauma-light);
    border-left-color: var(--accent-trauma);
    color: var(--text-primary);
}

body.spine-center .menu-item.active {
    background-color: var(--accent-spine-light);
    border-left-color: var(--accent-spine);
    color: var(--text-primary);
}

body.cancer-center .menu-item.active {
    background-color: var(--accent-cancer-light);
    border-left-color: var(--accent-cancer);
    color: var(--text-primary);
}

body.cardio-center .menu-item.active {
    background-color: var(--accent-cardio-light);
    border-left-color: var(--accent-cardio);
    color: var(--text-primary);
}

body.respiratory-center .menu-item.active {
    background-color: var(--accent-respiratory-light);
    border-left-color: var(--accent-respiratory);
    color: var(--text-primary);
}

/* 센터 미선택 시 기본 스타일 */
body.no-center-selected .menu-item.active {
    background-color: var(--bg-light);
    border-left-color: var(--border-color);
    color: var(--text-secondary);
}

/* 호버 효과 - 센터별 연한 톤 */
body.stroke-center .menu-item:hover:not(.active) {
    background-color: rgba(107, 140, 174, 0.08); /* --accent-stroke 8% */
}

body.trauma-center .menu-item:hover:not(.active) {
    background-color: rgba(139, 85, 85, 0.08); /* --accent-trauma 8% */
}

body.spine-center .menu-item:hover:not(.active) {
    background-color: rgba(122, 155, 126, 0.08); /* --accent-spine 8% */
}

body.cancer-center .menu-item:hover:not(.active) {
    background-color: rgba(107, 139, 139, 0.08); /* --accent-cancer 8% */
}

body.cardio-center .menu-item:hover:not(.active) {
    background-color: rgba(155, 107, 126, 0.08); /* --accent-cardio 8% */
}

body.respiratory-center .menu-item:hover:not(.active) {
    background-color: rgba(107, 139, 155, 0.08); /* --accent-respiratory 8% */
}

/* =====================================================
   시스템 블루 고정 영역
   ===================================================== */

/* EMR 헤더 - 시스템 블루 고정 */
.emr-header {
    background: linear-gradient(135deg, var(--system-blue) 0%, var(--system-blue-dark) 100%);
    color: white;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

/* 테이블 헤더 - 시스템 블루 고정 */
.table-header,
.data-table thead,
.patient-list-table thead {
    background: var(--system-blue);
    color: white;
}

/* 버튼 Primary - 시스템 블루 고정 */
.btn-primary,
button.primary {
    background: var(--system-blue);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-primary:hover,
button.primary:hover {
    background: var(--system-blue-dark);
}

/* 링크 - 시스템 블루 고정 */
a {
    color: var(--system-blue);
    text-decoration: none;
}

a:hover {
    color: var(--system-blue-dark);
    text-decoration: underline;
}

/* =====================================================
   중립 배경색 유지 (센터 컬러 사용 금지)
   ===================================================== */

/* 좌측 사이드바 - 화이트 배경 고정 */
.emr-sidebar {
    background: var(--bg-white);
    border-right: 1px solid var(--border-color);
}

/* 메인 콘텐츠 영역 - 연한 회색 배경 */
.content-area {
    background: var(--bg-light);
}

/* 카드 - 화이트 배경 고정 */
.card,
.info-card,
.patient-card {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
    border-radius: 4px;
}

/* 테이블 - 화이트 배경 고정 */
.data-table,
.patient-list-table {
    background: var(--bg-white);
}

/* 섹션 - 중립 배경 */
.section {
    background: var(--bg-white);
    border: 1px solid var(--border-color);
}

/* =====================================================
   센터 선택 안내 화면 - Accent 컬러 사용
   ===================================================== */

/* 센터 카드 - Accent 컬러로 아이콘만 강조 */
.center-card[data-center="stroke"] .center-card-icon {
    color: var(--accent-stroke);
}

.center-card[data-center="trauma"] .center-card-icon {
    color: var(--accent-trauma);
}

.center-card[data-center="spine"] .center-card-icon {
    color: var(--accent-spine);
}

.center-card[data-center="cancer"] .center-card-icon {
    color: var(--accent-cancer);
}

/* 호버 시 Accent 컬러 테두리 */
.center-card[data-center="stroke"]:hover {
    border-color: var(--accent-stroke);
}

.center-card[data-center="trauma"]:hover {
    border-color: var(--accent-trauma);
}

.center-card[data-center="spine"]:hover {
    border-color: var(--accent-spine);
}

.center-card[data-center="cancer"]:hover {
    border-color: var(--accent-cancer);
}

/* =====================================================
   타임라인 네비게이터 - 센터별 Accent 최소화
   ===================================================== */

/* 활성 날짜 점 - 센터별 Accent */
body.stroke-center .timeline-day.active .day-dot {
    background: var(--accent-stroke);
}

body.trauma-center .timeline-day.active .day-dot {
    background: var(--accent-trauma);
}

body.spine-center .timeline-day.active .day-dot {
    background: var(--accent-spine);
}

body.cancer-center .timeline-day.active .day-dot {
    background: var(--accent-cancer);
}

/* 프로그레스 바 - 센터별 Accent */
body.stroke-center .progress-line {
    background: var(--accent-stroke);
}

body.trauma-center .progress-line {
    background: var(--accent-trauma);
}

body.spine-center .progress-line {
    background: var(--accent-spine);
}

body.cancer-center .progress-line {
    background: var(--accent-cancer);
}

/* =====================================================
   환자 상태 컬러 (센터 컬러와 완전 분리)
   ===================================================== */

/* 위험도 배지 */
.badge-critical,
.risk-critical {
    background: var(--status-critical);
    color: white;
}

.badge-high,
.risk-high {
    background: var(--status-high);
    color: white;
}

.badge-moderate,
.risk-moderate {
    background: var(--status-moderate);
    color: #212529;
}

.badge-stable,
.risk-stable {
    background: var(--status-stable);
    color: white;
}

/* 알림 상태 */
.alert-critical {
    border-left: 4px solid var(--status-critical);
}

.alert-warning {
    border-left: 4px solid var(--status-high);
}

.alert-info {
    border-left: 4px solid var(--status-info);
}

/* =====================================================
   EMR 표준 준수 요약
   ===================================================== */
/*
   ✅ 시스템 블루 고정: 헤더, 테이블 헤더, 버튼, 링크
   ✅ 센터 Accent 제한: 헤더 컨텍스트 바 (4px), 메뉴 강조 라인 (3px)
   ✅ 배경색 중립: 사이드바, 콘텐츠, 카드, 테이블 모두 화이트/연회색
   ✅ 상태 컬러 분리: 위험도는 독립적인 색상 체계 사용
   ✅ 채도 낮은 톤: 센터 컬러는 시스템 컬러와 충돌 없이 조화
*/