/* ============================
   GLOBAL STYLE
============================ */
body {
    margin: 0;
    font-family: "Inter", sans-serif;
    /* Background hijau pastel yang kalem dan menarik */
    background-image: url('../img/bg.jpg'); /* Gradien hijau-kuning pastel */
    padding: 30px;
    /* Dot-dot pink pastel yang lucu */
    background-image: linear-gradient(rgba(249, 249, 249, 0.4), rgba(255, 255, 255, 0.4)), 
                      url('../img/bg.jpg'); /* Hijau muda */
    background-size: cover; /* Ukuran dot */
    background-position: center /* Offset untuk pola yang rapi */
    /* min-height: 100vh; */
}

/* ============================
   LAYOUT WRAPPER
============================ */
/* ============================
   LAYOUT WRAPPER (Dikembalikan ke Glassmorphism)
============================ */


/* ============================
   TITLE
============================ */
.title {
    font-size: 30px; /* Ukuran judul wajar */
    font-weight: 600; 
    color: #4a656a; /* Warna teks yang lebih kalem, abu-abu kehijauan */
    text-shadow: none; /* Hilangkan shadow teks untuk kesan lebih clean */
}

.subtitle {
    color: #8c9b9e; /* Abu-abu yang lebih lembut */
    margin-top: 5px;
    margin-bottom: 30px; 
    font-size: 14px;
    font-style: normal;
}

/* ============================
   CARD CONTAINER (Memastikan susunan horizontal)
============================ */
/* Menggunakan .card-container atau .cards sesuai HTML Anda */
.card-container, .cards {
    display: flex;
    gap: 20px; 
    margin-bottom: 30px;
    flex-wrap: wrap; 
    position: center;
}

/* ============================
   CARD INDIVIDUAL (Layout Kolom dan Warna Gradien)
============================ */
.card {
    flex: 1; 
    min-width: 250px; /* Sedikit dikecilkan agar muat lebih baik */
    max-width: 380px; 
    
    /* Background: Menggunakan Gradien Lembut untuk meniru gambar */
    /* Kita gunakan background putih transparan/gradien lembut agar terlihat di atas background body */
    background: linear-gradient(135deg, rgba(175, 216, 241, 0.95), rgba(194, 190, 190, 0.648));
     
    
    padding: 25px; 
    border-radius: 22px; /* Sudut lebih membulat */
    
    /* Shadow lebih lembut */
    box-shadow: 0 5px 15px rgba(0,0,0,0.04), inset 0 0 5px rgba(255,255,255,0.7);
    
    /* Layout Utama: Menyusun item ke bawah */
    display: flex;
    flex-direction: column; 
    position: relative;
    z-index: 1;
}

/* ============================
   ICON CONTAINER (Tambahan Warna Gradien Individual)
============================ */
.card-icon {
    width: 50px; /* Ukuran icon sedikit lebih besar */
    height: 50px;
    border-radius: 12px; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
    z-index: 1;
    
    /* Tambahkan efek transisi pada icon hover jika diinginkan */
    transition: transform 0.2s; 
}

/* Ikon spesifik dengan gradien warna uniknya (sesuai gambar referensi) */
.bg-spo2 { background: linear-gradient(45deg, #ffb4c8, #ff80a0); } /* Pinkish */
.bg-heart { background: linear-gradient(45deg, #ffc9a0, #ff9e60); } /* Peach/Orange */
.bg-bp { background: linear-gradient(45deg, #a0c9ff, #609eff); } /* Bluish */

.card-icon img {
    width: 28px; /* Ukuran gambar di dalam icon */
    height: 28px;
}

/* ============================
   CARD TITLE (SPO2, Heart Rate)
============================ */
.card-title {
    font-size: 16px; 
    font-weight: 600;
    color: #5d6f73; /* Abu-abu kebiruan yang kontras */
    margin-bottom: 12px;
}

/* ============================
   CARD VALUE & UNIT (100%, 96 bpm, 110/75 mmHg)
============================ */
.card-value {
    font-size: 38px; /* Ukuran nilai sedikit lebih besar */
    font-weight: 700; 
    color: #2b3a3d; /* Warna teks data yang sangat gelap/hitam */
    line-height: 1.1;
    margin-bottom: 15px; 
    
    /* Menyusun Angka dan Unit dalam satu baris, sejajar rata kiri */
    display: flex;
    align-items: baseline; 
    gap: 5px; 
}

.card-unit {
    font-size: 16px; /* Unit sedikit lebih besar dari sebelumnya */
    font-weight: 500;
    color: #7f9094; /* Warna unit yang lebih lembut */
}

/* ============================
   STATUS LABEL (Normal)
============================ */
.status {
    /* Margin top auto untuk mendorong ke bawah jika ada sisa ruang */
    margin-top: auto; 
    
    /* Warna Status: Menggunakan Gradien Lembut (sesuai gambar) */
    background: linear-gradient(90deg, #ffc9e0, #ffafc8); /* Pinkish soft gradient */
    color: #a93a64; /* Warna teks pink/merah yang kalem */
    
    padding: 6px 14px; /* Padding lebih besar */
    border-radius: 16px; 
    font-size: 12px;
    font-weight: 600; 
    display: inline-block; /* Agar lebarnya hanya sebesar konten */
    box-shadow: inset 0 0 5px rgba(255,255,255,0.4); /* Inner shadow lembut */
}

/* Status label - Tetap badge, warna lebih lembut */
.status {
    margin-top: 10px;
    padding: 5px 12px;
    background: #e6f7eb; /* Background hijau pastel sangat lembut */
    color: #2e8b57; /* Warna hijau yang kalem */
    border-radius: 14px; 
    font-size: 11px;
    font-weight: 600; 
    text-transform: capitalize; 
    letter-spacing: 0;
    box-shadow: 0 1px 3px rgba(46, 139, 87, 0.1);
}

/* Icon BG - Gradient Ikon tetap ada, warna lebih soft pastel */
.bg-spo2 { background: linear-gradient(45deg, #ffd3e0, #ffb0c8); } /* Pink lebih kalem */
.bg-heart { background: linear-gradient(45deg, #ffe0c9, #ffc0a0); } /* Orange lebih kalem */
.bg-bp { background: linear-gradient(45deg, #c9e0ff, #a0c0ff); } /* Biru lebih kalem */

/* ============================
   SECTION CARD (Untuk Grafik/Tabel)
============================ */
.section {
    background: #ffffff;
    padding: 22px;
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.05); 
    margin-bottom: 25px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    font-size: 17px; 
    font-weight: 600;
    color: #4a656a;
}

.select-box {
    border: 1px solid #e0e0e0; 
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 13px;
    background: #fdfdfd;
    cursor: pointer;
    transition: 0.2s;
}
.select-box:hover {
    border-color: #c4e6c4;
    box-shadow: 0 0 6px rgba(196, 230, 196, 0.2);
}

/* Legend */
.legend {
    display: flex;
    gap: 15px;
    margin-top: 18px;
    font-size: 12px; 
    color: #7f9094;
}

.dot {
    width: 10px; 
    height: 10px;
    border-radius: 50%;
    margin-right: 4px;
    box-shadow: none;
}

/* ============================
   UPCOMING APPOINTMENT
============================ */
.upcoming {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.date-tag {
    background: #e0fae7; /* Hijau pastel */
    color: #27ae60;
    padding: 5px 10px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
}

/* ============================
   NOTIFICATION
============================ */
.notif-bell {
    position: absolute;
    right: 20px;
    top: 20px;
    font-size: 24px; /* Bell sedikit lebih kecil */
    color: #f7b447; /* Warna kuning lebih hangat */
    cursor: pointer;
    padding: 7px 10px;
    border-radius: 10px; 
    background: #fffbe6; /* Background kuning sangat lembut */
    box-shadow: 0 0 8px rgba(247, 180, 71, 0.2); 
    transition: 0.2s ease; 
    z-index: 10;
}

.notif-bell:hover {
    transform: rotate(8deg) scale(1.05); /* Rotasi dan skala lebih ringan */
    background: #fff5d1;
}

/* Panel Notifikasi */
.notif-panel {
    position: fixed;
    top: -70px; /* Posisi awal */
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: 0.3s ease-out;
    z-index: 9999;
}

.notif-panel.show {
    top: 15px; /* Posisi akhir */
}

.notif-icon {
    background: #e0fae7; /* Hijau pastel */
    color: #27ae60;
    padding: 8px;
    border-radius: 50%;
}

.notif-text {
    font-weight: 500; /* Font weight sedikit dikurangi */
    color: #4a656a;
    font-size: 14px;
}

.hidden {
    display: none !important;
}

/* ============================
   ALERT TOP RIGHT (Notifikasi Bahaya)
============================ */
.alert-notif {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #e74c3c; 
    padding: 12px 18px;
    color: white;
    border-radius: 8px;
    font-weight: 600;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    animation: fadeIn .3s ease forwards;
    z-index: 9998;
}

.status {
    margin-top: 12px;
    background: linear-gradient(90deg, rgba(255,180,200,0.55), rgba(255,130,170,0.40));

    /* Safari first */
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);

    color: #a93a64;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 16px;
    display: inline-block;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.4);
}



@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}