/**
 * 🏥 ForNurse EMR - Advanced MAR System v1.0
 * 
 * 투약 기록(MAR) 고급 UI 스타일
 * - 시간대별 타임라인 테이블
 * - 11개 컬럼 구조
 * - 고위험약 배지 및 더블체크 표시
 * - PRN/STAT 시각적 구분
 */

/* ========================================
   1) MAR 컨테이너
======================================== */

.mar-advanced-container {
    padding: 20px;
    background: #f9fafb;
    min-height: 100vh;
}

/* ========================================
   2) 상단 필터/액션 바
======================================== */

.mar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mar-date-selector {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mar-date-btn {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    transition: all 0.2s;
}

.mar-date-btn:hover {
    background: #f3f4f6;
}

.mar-date-btn.active {
    background: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.mar-filters {
    display: flex;
    gap: 8px;
}

.mar-filter-btn {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
}

.mar-filter-btn:hover {
    background: #f3f4f6;
}

.mar-filter-btn.active {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}

/* ========================================
   3) MAR 타임라인 테이블
======================================== */

.mar-timeline-table {
    background: white;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    overflow: hidden;
}

.mar-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.mar-table thead {
    background: #f9fafb;
    border-bottom: 2px solid #e5e7eb;
}

.mar-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: #374151;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mar-table td {
    padding: 12px 8px;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.mar-table tbody tr:hover {
    background: #f9fafb;
}

/* 고위험약 행 강조 */
.mar-table tbody tr.high-alert {
    background: #fef3c7;
}

.mar-table tbody tr.high-alert:hover {
    background: #fde68a;
}

/* ========================================
   4) 컬럼별 스타일
======================================== */

/* 시간 컬럼 */
.mar-col-time {
    width: 80px;
    font-weight: 500;
    color: #1f2937;
}

/* 약품코드 */
.mar-col-drug-code {
    width: 90px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 12px;
    color: #6b7280;
}

/* 약품명 */
.mar-col-drug-name {
    min-width: 180px;
}

.drug-name-primary {
    font-weight: 500;
    color: #111827;
    margin-bottom: 2px;
}

.drug-name-generic {
    font-size: 11px;
    color: #6b7280;
}

/* 용량 */
.mar-col-dose {
    width: 100px;
    font-weight: 500;
}

/* 경로 */
.mar-col-route {
    width: 60px;
}

/* 빈도/스케줄 */
.mar-col-frequency {
    width: 120px;
}

.schedule-times {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.schedule-time {
    display: inline-block;
    padding: 2px 6px;
    background: #e5e7eb;
    border-radius: 4px;
    font-size: 11px;
    color: #374151;
}

/* PRN 조건 */
.mar-col-prn {
    width: 150px;
    font-size: 12px;
    color: #6b7280;
    font-style: italic;
}

/* 상태 */
.mar-col-status {
    width: 100px;
}

/* 간호사 */
.mar-col-nurse {
    width: 100px;
    font-size: 12px;
}

.nurse-double-check {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    color: #10b981;
    font-size: 11px;
}

.nurse-double-check i {
    font-size: 12px;
}

/* 비고 */
.mar-col-note {
    min-width: 150px;
    font-size: 12px;
    color: #6b7280;
}

/* ========================================
   5) 배지 및 표시
======================================== */

/* 고위험약 배지 */
.badge-high-alert {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}

/* 항생제 배지 */
.badge-antibiotic {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
}

/* 마약 배지 */
.badge-narcotic {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
}

/* PRN 배지 */
.badge-prn {
    display: inline-block;
    padding: 3px 8px;
    background: #dbeafe;
    color: #1e40af;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #93c5fd;
}

/* STAT 배지 */
.badge-stat {
    display: inline-block;
    padding: 3px 8px;
    background: #fee2e2;
    color: #991b1b;
    font-size: 10px;
    font-weight: 600;
    border-radius: 4px;
    border: 1px solid #fca5a5;
}

/* 투약 상태 배지 */
.mar-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mar-status-given {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.mar-status-held {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.mar-status-refused {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.mar-status-delayed {
    background: #e0e7ff;
    color: #3730a3;
    border: 1px solid #c7d2fe;
}

.mar-status-missed {
    background: #fecaca;
    color: #7f1d1d;
    border: 1px solid #f87171;
}

.mar-status-not-due {
    background: #f3f4f6;
    color: #6b7280;
    border: 1px solid #d1d5db;
}

/* ========================================
   6) 액션 버튼
======================================== */

.mar-action-btn {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    background: white;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s;
    color: #374151;
}

.mar-action-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.mar-action-btn i {
    margin-right: 4px;
}

/* ========================================
   7) 빈 상태
======================================== */

.mar-empty-state {
    padding: 60px 20px;
    text-align: center;
    color: #9ca3af;
}

.mar-empty-state i {
    font-size: 48px;
    margin-bottom: 16px;
    color: #d1d5db;
}

.mar-empty-state p {
    font-size: 14px;
    margin: 0;
}

/* ========================================
   8) PRN 섹션 (별도 표시)
======================================== */

.mar-prn-section {
    margin-top: 20px;
    padding: 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
}

.mar-prn-title {
    font-weight: 600;
    color: #1e40af;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mar-prn-title i {
    font-size: 16px;
}

/* ========================================
   9) 더블체크 경고
======================================== */

.double-check-warning {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #dc2626;
    font-size: 11px;
    font-weight: 600;
}

.double-check-warning i {
    font-size: 14px;
}

/* ========================================
   10) 반응형
======================================== */

@media (max-width: 1200px) {
    .mar-table {
        font-size: 12px;
    }
    
    .mar-table th,
    .mar-table td {
        padding: 10px 6px;
    }
}