/* =========================================================
   PNEUMONIA SCREENING SYSTEM — DASHBOARD STYLES
   Palette: biru (#2F6FED) + ungu (#7C5CFC) di atas kanvas
   putih/abu lembut. Mode gelap tersedia via [data-theme="dark"]
   ========================================================= */

:root{
  /* brand colors */
  --c-blue:#2F6FED;
  --c-blue-soft:#E7EFFF;
  --c-purple:#7C5CFC;
  --c-purple-soft:#F0EBFF;

  /* status colors */
  --c-green:#1FAE6F;
  --c-green-soft:#E4F8EF;
  --c-amber:#F5A623;
  --c-amber-soft:#FFF5E2;
  --c-red:#F0445B;
  --c-red-soft:#FDE7EA;
  --c-teal:#12B5A6;
  --c-teal-soft:#E1F7F4;

  /* light theme surface */
  --bg:#F3F5FB;
  --surface:#FFFFFF;
  --surface-2:#F8F9FE;
  --ink:#1B2140;
  --ink-soft:#5C6280;
  --muted:#9AA0BF;
  --line:#E9ECF7;
  --shadow: 0 10px 28px rgba(60, 70, 160, 0.07);

  --radius-lg:18px;
  --radius-md:14px;
  --radius-sm:10px;

  --sidebar-w:248px;
}

[data-theme="dark"]{
  --bg:#10142A;
  --surface:#181D3A;
  --surface-2:#1E2444;
  --ink:#EDEFFB;
  --ink-soft:#AEB4D6;
  --muted:#7A80A8;
  --line:#2A2F54;
  --shadow: 0 10px 28px rgba(0,0,0,0.35);

  --c-blue-soft:rgba(47,111,237,0.16);
  --c-purple-soft:rgba(124,92,252,0.18);
  --c-green-soft:rgba(31,174,111,0.16);
  --c-amber-soft:rgba(245,166,35,0.16);
  --c-red-soft:rgba(240,68,91,0.16);
  --c-teal-soft:rgba(18,181,166,0.18);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:'Inter', sans-serif;
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}

/* =========================================================
   LAYOUT SHELL
   ========================================================= */
.app{
  display:grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* =========================================================
   SIDEBAR
   ========================================================= */
.sidebar{
  background: linear-gradient(170deg, #1B2454 0%, #0F1330 100%);
  color:#fff;
  padding:26px 18px;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:sticky;
  top:0;
  height:100vh;
  z-index:40;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 8px;
  margin-bottom:30px;
}
.brand-mark{
  width:42px; height:42px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  flex-shrink:0;
  box-shadow: 0 6px 16px rgba(124,92,252,0.4);
}
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-title{
  font-family:'Sora', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:.3px;
}
.brand-sub{
  font-size:11.5px;
  color:rgba(255,255,255,0.45);
  font-weight:500;
}

.nav-menu{ display:flex; flex-direction:column; gap:4px; }
.nav-item{
  display:flex;
  align-items:center;
  gap:13px;
  padding:11px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  color:rgba(255,255,255,0.58);
  text-decoration:none;
  position:relative;
  transition:background .15s ease, color .15s ease;
}
.nav-item i{ font-size:16px; width:18px; text-align:center; }
.nav-item:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.nav-item.active{
  background: linear-gradient(135deg, rgba(47,111,237,0.35), rgba(124,92,252,0.35));
  color:#fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.nav-badge{
  margin-left:auto;
  background:var(--c-red);
  color:#fff;
  font-size:11px;
  font-weight:700;
  border-radius:999px;
  padding:1px 7px;
}

.sidebar-footer{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.status-row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12.5px;
  color:rgba(255,255,255,0.55);
  font-weight:500;
}
.status-row .status-value{ margin-left:auto; }
.online-text{ color:#5FE3A1; font-weight:700; }
.status-dot{
  width:9px; height:9px;
  border-radius:50%;
  background:#5FE3A1;
  box-shadow:0 0 0 0 rgba(95,227,161,0.6);
  animation: pulse-green 2s infinite;
  flex-shrink:0;
}
.status-dot.esp{ background:#5FE3A1; animation: pulse-green 2s infinite .4s; }
@keyframes pulse-green{
  0%{ box-shadow:0 0 0 0 rgba(95,227,161,0.55); }
  70%{ box-shadow:0 0 0 6px rgba(95,227,161,0); }
  100%{ box-shadow:0 0 0 0 rgba(95,227,161,0); }
}

.sidebar-overlay{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(10,12,30,0.5);
  z-index:39;
}

/* =========================================================
   MAIN
   ========================================================= */
.main{
  padding:22px 28px 50px;
  min-width:0;
}

/* ---- Topbar ---- */
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.topbar-left{
  display:flex;
  align-items:center;
  gap:14px;
}
.page-title{
  font-family:'Sora', sans-serif;
  font-size:21px;
  font-weight:700;
  margin:0 0 4px;
}
.page-sub{
  font-size:12.5px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:6px;
}
.dot-sep{ opacity:.5; }

.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
}

.icon-btn{
  width:40px; height:40px;
  border-radius:12px;
  background:var(--surface);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:var(--ink-soft);
  font-size:16px;
  position:relative;
  transition:all .15s ease;
}
.icon-btn:hover{ color:var(--c-blue); border-color:var(--c-blue); }
.icon-btn.small{ width:34px; height:34px; font-size:14px; }
.menu-toggle{ display:none; }

.badge-dot{
  position:absolute;
  top:8px; right:9px;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--c-red);
  border:2px solid var(--surface);
}

.profile{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
  padding:6px 12px 6px 6px;
  cursor:pointer;
}
.avatar{
  width:34px; height:34px;
  border-radius:50%;
  background: linear-gradient(135deg, var(--c-purple), var(--c-blue));
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-weight:700;
  font-family:'Sora', sans-serif;
  font-size:13px;
}
.profile-text{ display:flex; flex-direction:column; line-height:1.25; }
.profile-name{ font-size:13px; font-weight:600; }
.profile-role{ font-size:11px; color:var(--muted); }
.profile-caret{ font-size:11px; color:var(--muted); }

/* =========================================================
   STATUS BANNER (ringkas, pengganti stat-card besar)
   ========================================================= */
.status-banner{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 16px;
  box-shadow:var(--shadow);
  margin-bottom:14px;
}
.status-banner-icon{
  width:38px; height:38px;
  border-radius:11px;
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
  flex-shrink:0;
  background:var(--c-green-soft); color:var(--c-green);
}
.status-banner-text{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex:1;
  min-width:0;
}
.status-banner-label{
  font-size:12.5px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.4px;
  flex-shrink:0;
}
.status-banner-value{
  font-family:'Sora', sans-serif;
  font-size:16px;
  font-weight:700;
}
.status-banner-value.normal{ color:var(--c-green); }
.status-banner-value.waspada{ color:var(--c-amber); }
.status-banner-value.berbahaya{ color:var(--c-red); }
.status-banner-value.offline{ color:var(--muted); }

/* =========================================================
   MINI STATS — value sensor langsung berdekatan dgn grafik
   ========================================================= */
.mini-stats{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:12px;
}
.mini-stat{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:8px 12px;
  flex:1;
  min-width:160px;
}
.mini-stat-icon{
  width:34px; height:34px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  flex-shrink:0;
}
.mini-stat-icon.spo2{ background:var(--c-blue-soft); color:var(--c-blue); }
.mini-stat-icon.hr{ background:var(--c-red-soft); color:var(--c-red); }
.mini-stat-icon.pressure{ background:var(--c-purple-soft); color:var(--c-purple); }
.mini-stat-icon.co2{ background:var(--c-amber-soft); color:var(--c-amber); }

.mini-stat-body{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.mini-stat-label{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
  white-space:nowrap;
}
.mini-stat-value{
  font-family:'Sora', sans-serif;
  font-size:18px;
  font-weight:700;
  display:flex;
  align-items:baseline;
  gap:3px;
  line-height:1.1;
}
.mini-stat-value small{
  font-size:11px;
  font-weight:600;
  color:var(--muted);
}

.mini-stat .status-chip{ margin-left:auto; flex-shrink:0; }
.mini-stat .stat-time{ flex-shrink:0; white-space:nowrap; }

.status-chip{
  font-size:11px;
  font-weight:700;
  padding:2px 9px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.status-chip.normal{ background:var(--c-green-soft); color:var(--c-green); }
.status-chip.waspada{ background:var(--c-amber-soft); color:var(--c-amber); }
.status-chip.berbahaya{ background:var(--c-red-soft); color:var(--c-red); }
.status-chip.offline{ background:rgba(148,163,184,0.15); color:var(--muted); }

.stat-time{ font-size:11px; color:var(--muted); }

/* =========================================================
   FILTER BAR
   ========================================================= */
.filter-bar{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:12px 16px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.filter-label{
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  display:flex;
  align-items:center;
  gap:7px;
  flex-shrink:0;
}
.filter-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:1;
}
.pill{
  border:1px solid var(--line);
  background:var(--surface-2);
  color:var(--ink-soft);
  font-size:12.5px;
  font-weight:600;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:all .15s ease;
}
.pill:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.pill.active{
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  color:#fff;
  border-color:transparent;
}

.auto-refresh{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  color:var(--ink-soft);
  font-weight:500;
  flex-shrink:0;
}
.switch{
  position:relative;
  display:inline-block;
  width:36px; height:20px;
  flex-shrink:0;
}
.switch input{ opacity:0; width:0; height:0; }
.slider{
  position:absolute; cursor:pointer;
  top:0; left:0; right:0; bottom:0;
  background:var(--line);
  border-radius:999px;
  transition:.2s;
}
.slider::before{
  content:"";
  position:absolute;
  height:14px; width:14px;
  left:3px; bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:.2s;
}
.switch input:checked + .slider{
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
}
.switch input:checked + .slider::before{ transform:translateX(16px); }

/* =========================================================
   CONTENT GRID (charts + side column)
   ========================================================= */
.content-grid{
  display:grid;
  grid-template-columns: 1.7fr 1fr;
  gap:18px;
  margin-bottom:18px;
}
.charts-column, .side-column{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px;
  box-shadow:var(--shadow);
}
.panel-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.panel-title{
  font-family:'Sora', sans-serif;
  font-size:15.5px;
  font-weight:700;
  margin:0 0 4px;
}
.panel-sub{
  font-size:12px;
  color:var(--muted);
  margin:0;
}

.legend-inline{
  display:flex;
  gap:14px;
  font-size:12px;
  color:var(--ink-soft);
  font-weight:500;
}
.legend-inline span{ display:flex; align-items:center; gap:6px; }
.dot{ width:9px; height:9px; border-radius:50%; display:inline-block; }

.chart-box{ position:relative; height:260px; }
.chart-box.small{ height:190px; }

/* ---- Donut ---- */
.donut-wrap{
  position:relative;
  width:100%;
  max-width:220px;
  margin:0 auto 16px;
}
.donut-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.donut-total{
  font-family:'Sora', sans-serif;
  font-size:26px;
  font-weight:800;
}
.donut-caption{
  font-size:11px;
  color:var(--muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.donut-legend{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.donut-legend .row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
}
.donut-legend .row .label{ flex:1; font-weight:500; color:var(--ink); }
.donut-legend .row .val{ font-weight:700; color:var(--muted); }

/* ---- Integration panel ---- */
.info-panel .panel-sub{ margin-bottom:14px; }
.integration-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.integration-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 12px;
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.integration-item i{
  font-size:17px;
  color:var(--c-blue);
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-blue-soft);
  border-radius:9px;
  flex-shrink:0;
}
.integration-item > div{
  display:flex;
  flex-direction:column;
  line-height:1.3;
  min-width:0;
}
.i-title{ font-size:12.5px; font-weight:600; }
.i-sub{ font-size:11px; color:var(--muted); }
.i-status{
  margin-left:auto;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  flex-shrink:0;
}
.i-status.ready{ background:var(--c-green-soft); color:var(--c-green); }

/* =========================================================
   TABLE
   ========================================================= */
.table-panel{ margin-bottom:22px; }
.table-scroll{ overflow-x:auto; }
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  min-width:680px;
}
.data-table thead th{
  text-align:left;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--muted);
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.data-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  white-space:nowrap;
}
.data-table tbody tr{ transition:background .15s ease; }
.data-table tbody tr:hover{ background:var(--surface-2); }
.data-table tbody tr:first-child td{
  animation: rowIn .4s ease;
}
@keyframes rowIn{
  from{ opacity:0; transform:translateY(-6px); }
  to{ opacity:1; transform:translateY(0); }
}

.row-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  padding:3px 10px;
  border-radius:999px;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.row-status.normal{ background:var(--c-green-soft); color:var(--c-green); }
.row-status.waspada{ background:var(--c-amber-soft); color:var(--c-amber); }
.row-status.berbahaya{ background:var(--c-red-soft); color:var(--c-red); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer-note{
  text-align:center;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}
.footer-note code{
  background:var(--surface-2);
  border:1px solid var(--line);
  padding:1px 6px;
  border-radius:6px;
  font-size:11.5px;
}

/* =========================================================
   SKELETON LOADING
   ========================================================= */
[data-skeleton="loading"]{
  position:relative;
  overflow:hidden;
  pointer-events:none;
}
[data-skeleton="loading"] *{ opacity:0; }
[data-skeleton="loading"]::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(100deg,
    var(--surface-2) 30%,
    var(--line) 50%,
    var(--surface-2) 70%);
  background-size:200% 100%;
  animation: shimmer 1.3s infinite;
  border-radius:inherit;
}
@keyframes shimmer{
  0%{ background-position: 200% 0; }
  100%{ background-position: -200% 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px){
  .content-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .app{ grid-template-columns: 1fr; }
  .sidebar{
    position:fixed;
    left:0; top:0;
    height:100vh;
    width:240px;
    transform:translateX(-100%);
    transition:transform .25s ease;
  }
  .sidebar.open{ transform:translateX(0); }
  .sidebar-overlay.show{ display:block; }
  .menu-toggle{ display:flex; }
  .main{ padding:18px 16px 40px; }
  .mini-stats{ flex-direction:column; }
}

/* ==========================================================
   FIX FINAL — gabungkan SEMUA aturan mobile jadi satu blok ini.
   Hapus semua versi patch sebelumnya sebelum menempel yang ini,
   supaya tidak ada aturan lama yang saling menimpa/konflik.
   ========================================================== */

@media (max-width: 520px){

  /* ---------- Topbar & filter (aturan asli, tetap sama) ---------- */
  .topbar{ align-items:flex-start; }
  .filter-bar{ flex-direction:column; align-items:flex-start; }
  .auto-refresh{ width:100%; justify-content:space-between; }

  /* ---------- Profil: nama "dr. Risa" TETAP MUNCUL ---------- */
  .profile{
    padding: 4px 8px 4px 4px;
    gap: 6px;
  }
  .profile-text{
    display: flex;              /* batalkan display:none bawaan */
    flex-direction: column;
    line-height: 1.15;
  }
  .profile-name{
    font-size: 12px;
    max-width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    /* kalau nama kepanjangan, dipotong "..." */
  }
  .profile-role{
    display: none;              /* role disembunyikan, biar nama tetap muat */
  }
  .profile-caret{
    display: none;
  }

  /* ---------- Status banner: "update waktu" turun ke bawah ---------- */
  .status-banner{
    flex-wrap: wrap;
    row-gap: 8px;
  }
  .status-banner-text{
    flex: 1 1 auto;
    min-width: 0;
  }
  .status-banner-value{
    white-space: normal;
    word-break: break-word;
  }
  /* scoped ke ".status-banner .stat-time" SAJA -- supaya TIDAK
     ikut mengubah .stat-time di mini-stats (SpO2/HR/Pressure/CO2) */
  .status-banner .stat-time{
    flex-basis: 100%;
    margin-left: 52px;   /* sejajar bawah label (38px icon + 14px gap) */
  }
}