/* webapp/static/style.css (최종 수정 버전) */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Roboto:wght@300;400;700&display=swap');

:root {
    --bg-color: #101216;
    --panel-color: #1c1e24;
    --border-color: #3a3d4b;
    --text-primary: #f0f0f0;
    --text-secondary: #a0a4b8;
    --color-stable: #00b894;
    --color-critical: #d63031;
    --color-ecg: #25d366;
    --color-ppg: #0984e3;
    --color-cbp: #ff4d4d;
    --color-resp: #fdcb6e;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Roboto', 'Noto Sans KR', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 15px; 
}

.dashboard-container {
    width: 100%;
    max-width: 1500px;
    height: calc(100vh - 30px);
    max-height: 880px;
    display: grid;
    grid-template-columns: 3fr 1fr;
    grid-template-rows: auto 2fr 1fr 45px;
    grid-template-areas:
        "header header"
        "main numeric"
        "trend numeric"
        "status status";
    gap: 12px;
    background-color: var(--bg-color);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    border: 1px solid var(--border-color);
}

.panel {
    background-color: var(--panel-color);
    border-radius: 10px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.header {
    grid-area: header;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
    padding: 10px 20px;
}
.patient-info .name { font-size: 1.8rem; font-weight: 700; }
.patient-info .details { font-size: 1rem; color: var(--text-secondary); }

.simulation-controls {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #2a2d35;
    padding: 8px;
    border-radius: 8px;
    flex-grow: 1;
    justify-content: center;
}
.control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 15px;
    border-right: 1px solid var(--border-color);
}
.control-group:last-child {
    border-right: none;
    padding-right: 0;
}

.simulation-controls input[type="file"] { display: none; }
.simulation-controls .custom-file-upload {
    background-color: var(--color-ppg);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-block;
    white-space: nowrap;
}
.simulation-controls .custom-file-upload:hover { opacity: 0.9; }
.simulation-controls select,
.simulation-controls input[type="text"] {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 6px 10px;
    border-radius: 4px;
}
.simulation-controls button {
    background-color: #4a4e5a;
    border: none;
    color: var(--text-primary);
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
}
.simulation-controls button:hover { background-color: #6a6e7a; }
.simulation-controls button:disabled { background-color: #333; color: #777; cursor: not-allowed; }
.simulation-controls #simulation-status {
    font-weight: bold;
    color: var(--color-stable);
    padding: 0 10px;
    min-width: 50px;
    text-align: center;
}

.master-alert {
    width: 250px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    font-size: 1.8rem;
    font-weight: 700;
    transition: all 0.3s ease;
}
.stable { background-color: var(--color-stable); }
.critical { background-color: var(--color-critical); animation: blink 1s infinite; }
@keyframes blink {
    50% { opacity: 0.7; }
}

/* Main Display */
.main-display { grid-area: main; gap: 8px; min-height: 0; }
.waveform-card {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 5px 15px;
    border-left: 5px solid;
    background-color: #23252b;
    min-height: 0;
}
.waveform-card .info { width: 200px; }
.waveform-card .info h3 { font-size: 1.3rem; }
.waveform-card .info .value-unit { display: flex; align-items: baseline; }
.waveform-card .info .value { font-size: 2.8rem; font-weight: 700; line-height: 1; }
.waveform-card .info .unit { font-size: 1rem; margin-left: 8px; color: var(--text-secondary); }
.waveform-card .info .desc { font-size: 0.8rem; color: #ffc107; margin-top: 3px; }
.waveform-graph { flex-grow: 1; height: 100%; }
.waveform-graph svg,
.waveform-graph svg polyline {
    transition: none !important;
    animation: none !important;
}

#ecg { border-color: var(--color-ecg); }
#ecg .value, #ecg h3 { color: var(--color-ecg); }
#ppg { border-color: var(--color-ppg); }
#ppg .value, #ppg h3 { color: var(--color-ppg); }
#cbp { border-color: var(--color-cbp); }
#cbp .value, #cbp h3 { color: var(--color-cbp); }
#cbp .value { font-size: 2.2rem; }

/* Numeric Panel */
.numeric-panel { grid-area: numeric; padding: 20px; }
.numeric-panel h2 { margin-bottom: 20px; font-size: 1.5rem; text-align: center; color: var(--text-secondary); }
.vitals-table { width: 100%; border-collapse: collapse; }
.vitals-table td { padding: 14px 8px; border-bottom: 1px solid var(--border-color); }
.vitals-table td:nth-child(1) { font-weight: 500; font-size: 1.2rem; }
.vitals-table td:nth-child(2) { font-weight: 700; font-size: 1.5rem; text-align: right; }
.vitals-table td:nth-child(3) { color: var(--text-secondary); text-align: left; padding-left: 5px; }

/* Trend & Infusion Panel */
.trend-infusion-panel { grid-area: trend; flex-direction: row; gap: 15px; min-height: 0; }
.mini-trends, .infusion-pumps { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.infusion-pumps { flex: 0.8; }
.panel-title { font-weight: 500; color: var(--text-secondary); margin-bottom: 5px; border-bottom: 1px solid var(--border-color); padding-bottom: 5px; }
.trend-graph { background-color: #2a2d35; border-radius: 5px; flex: 1; position: relative; padding: 5px; min-height: 0; }
.trend-label { position: absolute; top: 5px; left: 10px; font-weight: bold; }
.infusion-card { background-color: #2a2d35; border-radius: 5px; flex: 1; padding: 10px; display: flex; flex-direction: column; justify-content: center; }
.infusion-card .drug-name { font-size: 1.1rem; font-weight: 700; color: #ffc107; }

/* Status Bar */
.status-bar { grid-area: status; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 20px; background-color: #000; font-size: 0.85rem; }
.connection-status span { margin-right: 15px; color: var(--text-secondary); }
.connection-status .connected { color: var(--color-stable); font-weight: bold; }
.trust-mark { display: flex; align-items: center; gap: 10px; }
.trust-mark .icon { width: 22px; height: 22px; }
.trust-mark .text { font-weight: bold; font-size: 1rem; color: var(--color-stable); }


/* ========== [핵심] 반응형 레이아웃: 모바일 & 태블릿 ========== */
/* 화면 너비가 1024px 이하일 때 아래 스타일이 적용됩니다. */
@media (max-width: 1024px) {
    body {
        padding: 0;
        align-items: flex-start; /* 화면 상단부터 콘텐츠 시작 */
    }

    .dashboard-container {
        /* 1. 레이아웃을 단일 열(single-column)로 변경 */
        grid-template-columns: 1fr;
        grid-template-rows: auto; /* 각 행의 높이를 콘텐츠에 맞게 자동 조절 */
        grid-template-areas:
            "header"
            "main"
            "numeric"
            "trend"
            "status";
        
        /* 2. 전체 화면을 사용하도록 조정 */
        height: auto;
        max-height: none;
        min-height: 100vh;
        border-radius: 0;
        gap: 8px;
    }

    .panel {
        border-radius: 0;
        padding: 12px;
    }
    
    /* 3. 헤더 레이아웃 조정 */
    .header {
        flex-direction: column; /* 헤더 내부 요소들을 세로로 쌓음 */
        gap: 12px;
    }
    .simulation-controls {
        flex-direction: column; /* 컨트롤 요소들도 세로로 쌓음 */
        width: 100%;
        gap: 10px;
    }
    .control-group {
        width: 100%;
        justify-content: center;
        border-right: none;
        padding-right: 0;
    }
    .master-alert {
        width: 100%;
        padding: 8px 0;
        font-size: 1.5rem;
    }

    /* 4. 메인 파형 카드 레이아웃 조정 */
    .main-display {
        min-height: 450px; /* 모바일에서 파형 영역 최소 높이 확보 */
    }
    .waveform-card {
        flex-direction: column; /* 정보와 그래프를 세로로 쌓음 */
        align-items: stretch; /* 내부 요소들이 카드의 전체 너비를 사용하도록 함 */
        gap: 8px;
    }
    .waveform-card .info {
        width: 100%;
        text-align: center;
    }
    .waveform-card .info .value-unit {
        justify-content: center; /* 값과 단위를 중앙 정렬 */
    }
    .waveform-card .value {
        font-size: 2.4rem; /* 모바일 화면에 맞게 폰트 크기 축소 */
    }
    .waveform-graph {
        height: 70px; /* 모바일에서 파형 그래프의 높이를 고정 */
    }
    
    /* 5. 하단 패널 레이아웃 조정 */
    .trend-infusion-panel {
        flex-direction: column; /* 트렌드 그래프와 약물 정보를 세로로 쌓음 */
    }
    .status-bar {
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        text-align: center;
    }
}