/* ==========================================================================
   ANEMIAEYE - THEME.CSS (PT BUMA / CORPORATE HEALTHCARE EDITION)
   Palet Warna, Tipografi, dan Gaya Visual Sesuai Folder PT
   Menggunakan --color-primary #00529C, border-radius 0, dan Zero Emoji
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Lato:ital,wght@0,400;0,700;1,400&display=swap');

:root {
    /* Colors - Primary (Identik dengan PT BUMA) */
    --color-primary: #00529C;
    --color-primary-action: #00529B;
    --color-primary-hover: #003D75;
    --color-primary-active: #002D55;
    
    /* Colors - Neutral Scale */
    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-charcoal: #3A3A3A;
    --color-deep-black: #0C0C0C;
    --color-gray-medium: #787878;
    --color-gray-light: #B6B6B6;
    
    /* Colors - Surface */
    --color-surface-light: #E6E5DF;
    --color-surface-card: #FAFAFA;
    
    /* Fonts */
    --font-primary: 'Lato', Arial, sans-serif;
    --font-secondary: 'Inter', Arial, sans-serif;
    --font-system: Arial, sans-serif;
    
    /* Shadows (Depth) */
    --shadow-l0: none;
    --shadow-l1: 0px 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-l2: 0px 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-l3: 0px 8px 32px rgba(0, 0, 0, 0.25);
    
    /* Spacing Scale */
    --spacing-4: 4px;
    --spacing-8: 8px;
    --spacing-12: 12px;
    --spacing-16: 16px;
    --spacing-20: 20px;
    --spacing-24: 24px;
    --spacing-32: 32px;
    --spacing-40: 40px;
    --spacing-100: 100px;

    /* Triage Medical Status Colors (Zero Emoji) */
    --color-status-normal: #127A2A;
    --color-status-normal-bg: #EAF7ED;
    --color-status-ringan: #B86200;
    --color-status-ringan-bg: #FFF5E6;
    --color-status-sedang: #C92A1D;
    --color-status-sedang-bg: #FDECEA;
    --color-status-berat: #94000A;
    --color-status-berat-bg: #FADBDD;
}

/* --- 1. Base Typography & Hierarchy --- */
body {
    font-family: var(--font-primary);
    color: var(--color-black);
    background-color: var(--color-white);
    line-height: 1.6;
    font-size: 16px;
}

h1, .text-display { font-family: var(--font-secondary); font-size: 48px; font-weight: 700; line-height: 1.2; color: var(--color-black); }
h2 { font-family: var(--font-secondary); font-size: 36px; font-weight: 700; line-height: 1.25; color: var(--color-black); }
h3 { font-family: var(--font-secondary); font-size: 28px; font-weight: 700; line-height: 1.3; color: var(--color-black); }
h4 { font-family: var(--font-secondary); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--color-black); }
p, .text-body { font-family: var(--font-primary); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--color-charcoal); }
.text-caption { font-family: var(--font-primary); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--color-gray-medium); }

a {
    color: var(--color-black);
    text-decoration: none;
    transition: all 0.2s ease;
}

/* --- 2. Buttons (Sesuai gaya folder pt: border-radius 0, height 44px) --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-secondary);
    font-size: 16px;
    font-weight: 600;
    padding: 0 24px;
    height: 44px;
    border-radius: 0;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}
.btn-primary:hover { background-color: var(--color-primary-hover); color: var(--color-white); }
.btn-primary:active { background-color: var(--color-primary-active); }
.btn-primary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.btn-primary:disabled { background-color: var(--color-gray-light); cursor: not-allowed; }

.btn-secondary {
    background-color: transparent;
    color: var(--color-black);
    font-family: var(--font-primary);
    padding: 0;
    height: auto;
    font-weight: 700;
}
.btn-secondary:hover {
    color: var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}

.btn-outline {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    height: 44px;
    padding: 0 20px;
}
.btn-outline:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.btn-tab {
    background-color: var(--color-surface-light);
    color: var(--color-charcoal);
    border: 1px solid var(--color-gray-light);
    font-size: 14px;
    height: 42px;
    font-weight: 600;
}
.btn-tab:hover {
    background-color: #DAD9D3;
}
.btn-tab.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.btn-hero-analyze {
    height: 50px;
    font-size: 17px;
    width: 100%;
    margin-top: 16px;
    letter-spacing: 0.02em;
}

.btn-danger {
    background-color: var(--color-status-berat);
    color: var(--color-white);
}
.btn-danger:hover { background-color: #7A0008; }

/* --- 3. Cards & Inputs (border-radius: 0) --- */
.card h4 {
    margin-bottom: var(--spacing-12);
}
.card p {
    flex-grow: 1;
    margin-bottom: var(--spacing-16);
}

.form-input, .form-select {
    width: 100%;
    background-color: var(--color-white);
    color: var(--color-charcoal);
    font-family: var(--font-system);
    font-size: 15px;
    padding: 8px 14px;
    border: 1px solid var(--color-gray-light);
    border-radius: 0;
    height: 44px;
    transition: all 0.2s ease;
    margin-top: 6px;
    margin-bottom: var(--spacing-16);
}

.form-input:focus, .form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
    color: var(--color-black);
}

.form-group {
    margin-bottom: var(--spacing-12);
}

.form-group label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-black);
}

/* --- 4. Optical Viewfinder Styling --- */
.stage-header span {
    font-family: var(--font-secondary);
    font-size: 12px;
    font-weight: 700;
    color: #4CAF50;
    letter-spacing: 0.05em;
}

.stage-header .stage-target-info {
    color: var(--color-gray-light);
    font-weight: 400;
}

.stage-empty h4 { color: var(--color-white); font-size: 20px; }
.stage-empty p { color: var(--color-gray-light); max-width: 440px; }

.sampling-badge-label {
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    letter-spacing: 0.03em;
}

/* --- 5. Diagnostic Report & Triage Styling --- */
.triage-badge {
    display: inline-block;
    padding: 6px 16px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    border-radius: 0;
    border: 1px solid var(--color-gray-light);
    letter-spacing: 0.04em;
}

.triage-badge.status-normal { background-color: var(--color-status-normal-bg); color: var(--color-status-normal); border-color: var(--color-status-normal); }
.triage-badge.status-anemia-ringan { background-color: var(--color-status-ringan-bg); color: var(--color-status-ringan); border-color: var(--color-status-ringan); }
.triage-badge.status-anemia-sedang { background-color: var(--color-status-sedang-bg); color: var(--color-status-sedang); border-color: var(--color-status-sedang); }
.triage-badge.status-anemia-berat { background-color: var(--color-status-berat-bg); color: var(--color-status-berat); border-color: var(--color-status-berat); }

.bm-value {
    font-family: var(--font-secondary);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.1;
}

.bm-unit { font-size: 14px; font-weight: 600; color: var(--color-charcoal); }

.telemetry-track {
    width: 100%;
    height: 12px;
    background-color: var(--color-surface-light);
    border-radius: 0;
    overflow: hidden;
}

.telemetry-fill {
    height: 100%;
    border-radius: 0;
    transition: width 0.6s ease;
}

.t-red { background-color: #D32F2F; }
.t-green { background-color: #388E3C; }
.t-blue { background-color: #1976D2; }

/* --- 6. Notification & Loader UI --- */
.notification {
    pointer-events: auto;
    background-color: var(--color-white);
    color: var(--color-black);
    padding: 16px 20px;
    border-radius: 0;
    box-shadow: var(--shadow-l3);
    border: 1px solid var(--color-gray-light);
    border-left: 5px solid var(--color-primary);
    font-size: 14px;
    line-height: 1.5;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.notification-success { border-left-color: var(--color-status-normal); }
.notification-warning { border-left-color: var(--color-status-ringan); }
.notification-error { border-left-color: var(--color-status-berat); }

.loader-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-gray-light);
    padding: 40px;
    text-align: center;
    max-width: 440px;
    box-shadow: var(--shadow-l3);
}

.loader-circle {
    width: 48px;
    height: 48px;
    border: 4px solid var(--color-surface-light);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    margin: 0 auto 20px auto;
    animation: spin 0.8s linear infinite;
}

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

/* --- 7. Utility Classes --- */
.mb-8 { margin-bottom: var(--spacing-8); }
.mb-16 { margin-bottom: var(--spacing-16); }
.mb-24 { margin-bottom: var(--spacing-24); }
.mb-32 { margin-bottom: var(--spacing-32); }
.mb-40 { margin-bottom: var(--spacing-40); }
.text-center { text-align: center; }