/* =========================================================
   PNEUMONIA SCREENING — SCREENING PAGE STYLES
   screening.css
   ========================================================= */

/* ---- Screen transitions ---- */
.scr-screen{
  display:none;
  animation: fadeUp .35s ease;
}
.scr-screen.active{ display:block; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(12px); }
  to{   opacity:1; transform:translateY(0); }
}

/* =========================================================
   HERO (layar awal)
   ========================================================= */
.scr-hero{
  text-align:center;
  padding:36px 0 28px;
}
.scr-hero-icon{
  width:72px; height:72px;
  border-radius:20px;
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  color:#fff;
  margin:0 auto 18px;
  box-shadow:0 10px 24px rgba(124,92,252,0.35);
}
.scr-hero h2{
  font-family:'Sora', sans-serif;
  font-size:24px;
  font-weight:700;
  margin:0 0 8px;
}
.scr-hero p{
  color:var(--ink-soft);
  font-size:14.5px;
  max-width:520px;
  margin:0 auto;
  line-height:1.6;
}

/* =========================================================
   FORM PASIEN
   ========================================================= */
.form-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 28px;
  box-shadow:var(--shadow);
  max-width:860px;
  margin:0 auto 40px;
}
.form-title{
  font-family:'Sora', sans-serif;
  font-size:16px;
  font-weight:700;
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--c-blue);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 20px;
  margin-bottom:20px;
}
.form-group{ display:flex; flex-direction:column; gap:7px; }
.form-group.full{ grid-column:1/-1; }

.form-group label{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:.4px;
}
.optional{ font-weight:400; text-transform:none; letter-spacing:0; }

.form-group input,
.form-group select{
  padding:11px 14px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--ink);
  font-size:14px;
  font-family:'Inter', sans-serif;
  outline:none;
  transition:border .15s ease;
}
.form-group input:focus,
.form-group select:focus{ border-color:var(--c-blue); }

.duration-opts{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.dur-btn{
  padding:9px 18px;
  border:1.5px solid var(--line);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--ink-soft);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all .15s ease;
}
.dur-btn:hover{ border-color:var(--c-blue); color:var(--c-blue); }
.dur-btn.active{
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  border-color:transparent;
  color:#fff;
}

.form-note{
  background:var(--c-blue-soft);
  border:1px solid rgba(47,111,237,0.18);
  border-radius:12px;
  padding:13px 16px;
  font-size:13px;
  color:var(--c-blue);
  line-height:1.6;
  margin-bottom:22px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.form-note i{ font-size:16px; flex-shrink:0; margin-top:1px; }

.form-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  padding-top:4px;
}
.btn-primary{
  display:flex; align-items:center; gap:8px;
  padding:12px 26px;
  border-radius:12px;
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  color:#fff;
  font-size:14.5px;
  font-weight:700;
  border:none;
  cursor:pointer;
  font-family:'Inter',sans-serif;
  box-shadow:0 6px 18px rgba(124,92,252,0.35);
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(124,92,252,0.45); }
.btn-secondary{
  display:flex; align-items:center; gap:8px;
  padding:12px 22px;
  border-radius:12px;
  border:1.5px solid var(--line);
  background:var(--surface);
  color:var(--ink-soft);
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:border .15s ease, color .15s ease;
}
.btn-secondary:hover{ border-color:var(--c-blue); color:var(--c-blue); }

/* =========================================================
   STEPPER
   ========================================================= */
.stepper-wrap{
  margin-bottom:24px;
  overflow-x:auto;
}
.stepper{
  display:flex;
  align-items:center;
  gap:0;
  min-width:520px;
  max-width:800px;
  margin:0 auto;
  padding:6px 0 14px;
}
.step-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  flex:1;
  position:relative;
}
.step-item:not(:last-child)::after{
  content:"";
  position:absolute;
  top:19px;
  left:calc(50% + 20px);
  right:calc(-50% + 20px);
  height:2px;
  background:var(--line);
  z-index:0;
  transition:background .4s ease;
}
.step-item.done:not(:last-child)::after,
.step-item.active:not(:last-child)::after{
  background: linear-gradient(90deg, var(--c-blue), var(--c-purple));
}

.step-circle{
  width:40px; height:40px;
  border-radius:50%;
  background:var(--surface-2);
  border:2px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-size:15px;
  font-weight:700;
  color:var(--muted);
  position:relative;
  z-index:1;
  transition:all .3s ease;
}
.step-item.active .step-circle{
  background: linear-gradient(135deg, var(--c-blue), var(--c-purple));
  border-color:transparent;
  color:#fff;
  box-shadow:0 6px 16px rgba(124,92,252,0.4);
  animation:stepPulse 2s infinite;
}
.step-item.done .step-circle{
  background: var(--c-green);
  border-color:transparent;
  color:#fff;
}
@keyframes stepPulse{
  0%,100%{ box-shadow:0 6px 16px rgba(124,92,252,0.4); }
  50%{ box-shadow:0 6px 24px rgba(124,92,252,0.7); }
}

.step-label{
  font-size:11.5px;
  font-weight:600;
  color:var(--muted);
  text-align:center;
  line-height:1.3;
  max-width:90px;
  text-transform:uppercase;
  letter-spacing:.3px;
  transition:color .3s ease;
}
.step-item.active .step-label{ color:var(--c-purple); }
.step-item.done .step-label{ color:var(--c-green); }

/* =========================================================
   PANEL PENGUJIAN (wizard)
   ========================================================= */
.test-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 32px;
  box-shadow:var(--shadow);
  max-width:900px;
  margin:0 auto 32px;
}

/* header panel */
.tp-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:22px;
  padding-bottom:18px;
  border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.tp-icon{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  font-size:22px;
  flex-shrink:0;
}
.tp-icon.blue{ background:var(--c-blue-soft); color:var(--c-blue); }
.tp-icon.purple{ background:var(--c-purple-soft); color:var(--c-purple); }
.tp-icon.amber{ background:var(--c-amber-soft); color:var(--c-amber); }
.tp-icon.teal{ background:var(--c-teal-soft); color:var(--c-teal); }

.tp-meta{ flex:1; }
.tp-title{
  font-family:'Sora', sans-serif;
  font-size:18px;
  font-weight:700;
  margin:0 0 4px;
}
.tp-sub{ font-size:13px; color:var(--muted); margin:0; }

.tp-badge{
  font-size:12px;
  font-weight:700;
  padding:5px 14px;
  border-radius:999px;
  background:var(--c-blue-soft);
  color:var(--c-blue);
  flex-shrink:0;
}

/* countdown timer */
.timer-wrap{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.timer-ring{
  position:relative;
  width:80px; height:80px;
  flex-shrink:0;
}
.timer-ring svg{ transform:rotate(-90deg); }
.timer-ring .bg{ fill:none; stroke:var(--line); stroke-width:5; }
.timer-ring .prog{
  fill:none;
  stroke:url(#timerGrad);
  stroke-width:5;
  stroke-linecap:round;
  stroke-dasharray:220;
  stroke-dashoffset:0;
  transition:stroke-dashoffset .9s linear;
}
.timer-center{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.timer-val{
  font-family:'Sora', sans-serif;
  font-size:18px;
  font-weight:800;
  line-height:1;
}
.timer-s{ font-size:10px; color:var(--muted); font-weight:600; }

.timer-info{ flex:1; }
.timer-msg{
  font-size:14px;
  font-weight:600;
  margin:0 0 8px;
}
.progress-track{
  height:8px;
  background:var(--line);
  border-radius:999px;
  overflow:hidden;
}
.progress-fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-purple));
  width:0%;
  transition:width .9s linear;
}
.progress-pct{
  font-size:12px;
  color:var(--muted);
  margin-top:6px;
  font-weight:600;
}

/* live readings grid */
.readings-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:14px;
  margin-bottom:22px;
}
.reading-card{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  transition:border .2s ease;
}
.reading-card.highlight{ border-color:var(--c-blue); }
.reading-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--muted);
  margin-bottom:8px;
}
.reading-val{
  font-family:'Sora', sans-serif;
  font-size:26px;
  font-weight:800;
  color:var(--ink);
  display:flex;
  align-items:baseline;
  gap:4px;
}
.reading-val small{
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.reading-status{
  margin-top:6px;
  font-size:11px;
  font-weight:700;
  padding:2px 8px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.reading-status.normal{ background:var(--c-green-soft); color:var(--c-green); }
.reading-status.waspada{ background:var(--c-amber-soft); color:var(--c-amber); }
.reading-status.berbahaya{ background:var(--c-red-soft); color:var(--c-red); }

/* mini chart inside step */
.step-chart-wrap{
  display:flex;
  flex-direction:column;
  gap:5px;
  height:160px;
  margin-bottom:20px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:10px;
  background:var(--surface-2);
}
.charts-column{
  display:flex;
  flex-direction:column;
  gap:20px;
}

/* action buttons bawah panel */
.tp-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding-top:18px;
  border-top:1px solid var(--line);
  flex-wrap:wrap;
}
.tp-actions .left{ display:flex; gap:10px; }

/* status saat ini di bawah timer */
.live-status-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  font-size:13px;
  color:var(--ink-soft);
  font-weight:500;
}
.live-pulse{
  width:9px; height:9px;
  border-radius:50%;
  background:var(--c-green);
  animation:pulse-green 1.5s infinite;
}
.live-status-row.offline{ color:var(--c-red); }
.live-pulse.offline{
  background:var(--c-red);
  animation:none;
}

/* =========================================================
   LAYAR HASIL AKHIR
   ========================================================= */
.result-wrap{
  max-width:860px;
  margin:0 auto;
}

.result-header{
  text-align:center;
  padding:30px 0 24px;
}
.result-badge-wrap{
  display:flex;
  justify-content:center;
  margin-bottom:22px;
}
.result-badge{
  width:90px; height:90px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:36px;
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1);
}
.result-badge.normal{ background:var(--c-green-soft); color:var(--c-green); }
.result-badge.waspada{ background:var(--c-amber-soft); color:var(--c-amber); }
.result-badge.berbahaya{ background:var(--c-red-soft); color:var(--c-red); }

@keyframes popIn{
  from{ transform:scale(.4); opacity:0; }
  to{ transform:scale(1); opacity:1; }
}

.result-verdict{
  font-family:'Sora', sans-serif;
  font-size:28px;
  font-weight:800;
  margin:0 0 8px;
}
.result-verdict.normal{ color:var(--c-green); }
.result-verdict.waspada{ color:var(--c-amber); }
.result-verdict.berbahaya{ color:var(--c-red); }

.result-msg{
  font-size:14.5px;
  color:var(--ink-soft);
  line-height:1.7;
  max-width:540px;
  margin:0 auto;
}

/* Patient info summary */
.result-patient{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px 22px;
  margin-bottom:18px;
  display:flex;
  flex-wrap:wrap;
  gap:16px 30px;
  box-shadow:var(--shadow);
}
.rp-item{ display:flex; flex-direction:column; gap:3px; }
.rp-label{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); }
.rp-value{ font-size:14.5px; font-weight:600; color:var(--ink); }

/* Summary table hasil sensor */
.result-summary{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.rs-head{
  padding:14px 20px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
  font-family:'Sora', sans-serif;
  font-size:14.5px;
  font-weight:700;
}
.rs-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.rs-table th{
  text-align:left;
  padding:10px 18px;
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--muted);
  border-bottom:1px solid var(--line);
}
.rs-table td{
  padding:13px 18px;
  border-bottom:1px solid var(--line);
  color:var(--ink);
}
.rs-table tr:last-child td{ border-bottom:none; }
.rs-table tr:hover td{ background:var(--surface-2); }

/* Grafik ringkasan hasil */
.result-charts-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:18px;
}
.result-chart-panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.result-chart-panel h4{
  font-family:'Sora', sans-serif;
  font-size:14px;
  font-weight:700;
  margin:0 0 12px;
}
.result-chart-box{ height:160px; }

/* Rekomendasi */
.result-recs{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  box-shadow:var(--shadow);
  margin-bottom:18px;
}
.result-recs h4{
  font-family:'Sora', sans-serif;
  font-size:15px;
  font-weight:700;
  margin:0 0 14px;
  display:flex;
  align-items:center;
  gap:8px;
}
.rec-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rec-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-soft);
}
.rec-item i{ font-size:15px; margin-top:2px; flex-shrink:0; }

/* Result actions */
.result-actions{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 0 40px;
}
.btn-outline{
  display:flex; align-items:center; gap:8px;
  padding:12px 22px;
  border-radius:12px;
  border:1.5px solid var(--c-blue);
  background:transparent;
  color:var(--c-blue);
  font-size:14px;
  font-weight:600;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  transition:all .15s ease;
}
.btn-outline:hover{ background:var(--c-blue-soft); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:680px){
  .test-panel{ padding:18px 16px; }
  .form-grid{ grid-template-columns:1fr; }
  .form-group.full{ grid-column:1; }
  .result-charts-grid{ grid-template-columns:1fr; }
  .result-patient{ flex-direction:column; }
}