/* Modernisasi tampilan (29 Agu 2026) — palet tosca/teal untuk kerangka
   aplikasi (navigasi, header, tombol aksi), latar netral terang. WARNA TIER
   KLINIS (merah/kuning/hijau/abu) SENGAJA TIDAK DIUBAH dan TETAP elemen
   PALING mencolok di halaman — kerangka aplikasi harus netral supaya tidak
   bersaing dengan warna klinis (lihat CLAUDE.md, arahan desain pengguna).
   Tidak ada gradien warna kuat di area hasil evaluasi. */

:root {
  /* Palet merek: tosca/teal. */
  --brand-900: #00332c;
  --brand-700: #00695c;
  --brand-600: #00796b;
  --brand-500: #009688;
  --brand-100: #dcf1ee;
  --brand-50:  #f2f9f8;

  --neutral-bg: #f5f8f8;
  --neutral-surface: #ffffff;
  --neutral-border: #dfe7e6;
  --neutral-text: #1f2b2a;
  --neutral-text-muted: #5c6b6a;
  --neutral-text-faint: #8a9997;

  --radius-card: 12px;
  --radius-control: 8px;
  --shadow-card: 0 1px 2px rgba(15, 40, 38, 0.05), 0 6px 16px rgba(15, 40, 38, 0.06);
  --shadow-control: 0 1px 2px rgba(15, 40, 38, 0.06);

  /* Tier klinis — TERKUNCI, jangan ubah (lihat catatan di atas). */
  --tier-merah-bg: #c62828;
  --tier-merah-fg: #ffffff;
  --tier-kuning-bg: #f9a825;
  --tier-kuning-fg: #1a1a1a;
  --tier-hijau-bg: #2e7d32;
  --tier-hijau-fg: #ffffff;
  --tier-abu-bg: #546e7a;
  --tier-abu-fg: #ffffff;
}

* { box-sizing: border-box; }

body {
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  margin: 0;
  background: var(--neutral-bg);
  color: var(--neutral-text);
  line-height: 1.5;
}

/* Header (29 Agu 2026, revisi): "PANDU" besar+tegas sebagai kata utama,
   kepanjangan akronim + deskripsi sebagai dua baris kecil di sampingnya,
   logo institusi di ujung kanan berlawanan. Logo disembunyikan LEBIH DULU
   daripada teks di layar sempit (lihat media query di bawah). */
.app-header {
  background: var(--brand-900);
  color: #fff;
  padding: 0.6rem 1.5rem;
  min-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.app-header-brand { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.app-header-icon { flex-shrink: 0; opacity: 0.9; }
.app-header-title {
  font-size: 1.6rem; font-weight: 800; letter-spacing: 0.02em; line-height: 1;
  white-space: nowrap;
}
.app-header-tagline {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.72rem; font-weight: 400; line-height: 1.35;
  color: rgba(255, 255, 255, 0.78);
}
.app-header-logos { display: flex; align-items: center; gap: 1.1rem; flex-shrink: 0; }
.app-header-logo-wrap {
  background: #fff; border-radius: 6px; padding: 0.2rem 0.4rem;
  display: flex; align-items: center; height: 2.15rem; box-sizing: border-box;
}
.app-header-logo { height: 1.6rem; width: auto; display: block; }

@media (max-width: 720px) {
  .app-header-logos { display: none; }
}
@media (max-width: 480px) {
  .app-header-tagline { display: none; }
}

main {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem 1.5rem;
}

h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--neutral-text);
  margin: 0 0 0.35rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
h1 .section-icon { color: var(--brand-600); flex-shrink: 0; }
h2 {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--brand-700);
  margin: 0 0 0.85rem 0;
}
h3 { font-size: 1rem; font-weight: 700; color: var(--neutral-text); }

.card {
  background: var(--neutral-surface);
  border: 1px solid var(--neutral-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.35rem 1.5rem;
  margin-bottom: 1.5rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.25rem;
}

/* --- Field form: pola KONSISTEN di semua bagian (identitas, klinis, lab,
   terapi) — label sebagai teks berdiri sendiri, input/select sebagai
   elemen terpisah di bawahnya, bukan bersarang di dalam <label>. --- */
.field {
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--neutral-border);
}
.field:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.field label { display: block; font-weight: 600; margin-bottom: 0.4rem; font-size: 0.95rem; color: var(--neutral-text); }
.field label .hint { font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; max-width: 480px; padding: 0.55rem 0.7rem;
  border: 1px solid var(--neutral-border); border-radius: var(--radius-control);
  background: #fff; color: var(--neutral-text); font-size: 0.95rem; font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--brand-100);
}
.field input[type="search"] { max-width: 100%; }
.field input:disabled { background: var(--neutral-bg); color: var(--neutral-text-faint); }
.field .tidak-tersedia { font-weight: normal; display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; font-size: 0.88rem; color: var(--neutral-text-muted); }
.field .tidak-tersedia input { width: auto; }
.field p.hint { margin: 0.5rem 0 0 0; }

.field-previously-hidden { background: var(--brand-50); border-left: 3px solid var(--brand-500); padding-left: 0.75rem; }
.badge-tetap-hint { color: var(--brand-700); font-weight: 600; }

.hint { color: var(--neutral-text-muted); font-size: 0.85rem; }
.identitas-ringkas { color: var(--neutral-text-muted); font-size: 0.92rem; margin: -0.15rem 0 1rem 0; }

.banner { padding: 0.7rem 1.05rem; border-radius: var(--radius-control); margin-bottom: 1.25rem; }
.banner-error { background: #fdecea; border: 1px solid #c62828; color: #9c1f1f; }
.banner-coverage { background: #fff3e0; border: 1px solid #ef6c00; color: #ef6c00; }
.banner-abu { background: var(--tier-abu-bg); color: var(--tier-abu-fg); font-weight: 600; }
.banner-konsistensi { background: #fff3e0; border: 1px solid #ef6c00; color: #7a3e00; }
.banner-konsistensi ul { margin: 0.4rem 0; padding-left: 1.2rem; }

.badge {
  display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; margin-left: 0.4rem;
}
.badge-system { background: var(--brand-100); color: var(--brand-700); }
.badge-tetap { background: #ede7f6; color: #4527a0; font-weight: 600; }
.nilai-tetap { padding: 0.45rem 0.6rem; background: var(--neutral-bg); border: 1px solid var(--neutral-border); border-radius: var(--radius-control); display: inline-block; }
.badge-previously-hidden { background: #fff8e1; color: #8d6e00; font-weight: 600; }
.badge-cov-full { background: #e8f5e9; color: #2e7d32; }
.badge-cov-safety_only { background: #fff3e0; color: #ef6c00; }
.badge-cov-dose_only { background: #fff3e0; color: #ef6c00; }
.badge-cov-not_found { background: #fdecea; color: #c62828; }

.chip-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.75rem 0 0 0; }
.chip {
  background: var(--neutral-bg); border: 1px solid var(--neutral-border); border-radius: 999px;
  padding: 0.35rem 0.7rem; display: flex; align-items: center; gap: 0.4rem; font-size: 0.9rem;
}
.chip-hapus { border: none; background: transparent; cursor: pointer; color: var(--tier-merah-bg); font-weight: bold; font-size: 1rem; line-height: 1; }

/* Tier: dipakai badge (hasil per obat) DAN kotak ringkasan atas — SAMA bobot
   visual, TETAP paling mencolok di halaman (lihat catatan di puncak file). */
.tier-badge, .tier-count, .tier-cell {
  font-weight: 700;
}
.tier-merah, .tier-badge.tier-merah, .tier-cell.tier-merah { background: var(--tier-merah-bg); color: var(--tier-merah-fg); }
.tier-kuning, .tier-badge.tier-kuning, .tier-cell.tier-kuning { background: var(--tier-kuning-bg); color: var(--tier-kuning-fg); }
.tier-hijau, .tier-badge.tier-hijau, .tier-cell.tier-hijau { background: var(--tier-hijau-bg); color: var(--tier-hijau-fg); }
.tier-abu, .tier-badge.tier-abu, .tier-cell.tier-abu { background: var(--tier-abu-bg); color: var(--tier-abu-fg); }

.tier-badge { padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.85rem; }
.tier-cell { padding: 0.25rem 0.6rem; border-radius: var(--radius-control); text-align: center; }

.ringkasan-tier { display: flex; gap: 0.75rem; margin: 1rem 0; }
.tier-count {
  flex: 1; text-align: center; padding: 0.85rem 0.5rem; border-radius: var(--radius-control);
}
.tier-count-n { display: block; font-size: 1.8rem; }
.tier-count-label { display: block; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.05em; }

.rule-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0; }
.rule-table th, .rule-table td { border: 1px solid var(--neutral-border); padding: 0.5rem 0.6rem; font-size: 0.85rem; text-align: left; vertical-align: top; }
.rule-table th { background: var(--neutral-bg); color: var(--neutral-text); font-weight: 700; }
.pustaka-list { margin: 0.3rem 0 0 0; padding-left: 1.1rem; font-size: 0.78rem; color: var(--neutral-text-muted); }
.pustaka-dosis { margin: 0.15rem 0 0.4rem 0; }

/* Kontras pustaka di atas latar tier BERWARNA (koreksi pengguna, 29 Agu
   2026) — abu-abu netral (di atas) hampir tidak terbaca di atas latar
   solid merah/kuning/hijau/abu, dites di dua tempat: .parameter-bermasalah
   (merah/kuning) dan daftar "aman" (hijau) di hasil_apoteker.html. Hierarki
   pustaka < rekomendasi TETAP dijaga lewat ukuran huruf lebih kecil +
   jarak (baris di atas), BUKAN lewat kontras warna yang direndahkan —
   warna di sini dipilih agar rasio kontras tetap tinggi (>=4.5:1) pada
   teks kecil sekalipun. */
.tier-cell.tier-merah .pustaka-list,
.tier-cell.tier-hijau .pustaka-list,
.tier-cell.tier-abu .pustaka-list {
  color: rgba(255, 255, 255, 0.92);
}
.tier-cell.tier-kuning .pustaka-list {
  color: rgba(26, 26, 26, 0.85);
}

.build-report-pre {
  white-space: pre-wrap; word-break: break-word; background: #14201f; color: #d4e5e2;
  padding: 1rem; border-radius: var(--radius-control); font-size: 0.8rem; overflow-x: auto;
}

/* Ringkasan klinis menonjol (KELOMPOK 3 #4, 29 Agu 2026) — di puncak halaman
   hasil, dengan bingkai teal (bukan navi/abu lagi) supaya jelas berbeda dari
   badge tier merah/kuning/hijau/abu di bawahnya, TANPA memakai warna tier
   itu sendiri. */
.ringkasan-klinis-menonjol {
  border: 1px solid var(--neutral-border);
  border-left: 4px solid var(--brand-600);
  background: var(--brand-50);
}
.ringkasan-klinis-menonjol h2 { margin-top: 0; color: var(--brand-700); }
.ringkasan-klinis-menonjol li { font-size: 1.05rem; font-weight: 600; }

/* KELOMPOK 3 #7: satu blok ringkas untuk parameter abu, BUKAN satu kotak besar
   per parameter (dulu memenuhi layar). */
.abu-ringkas {
  background: var(--tier-abu-bg); color: var(--tier-abu-fg);
  padding: 0.55rem 0.8rem; border-radius: var(--radius-control); font-size: 0.9rem;
}

/* Halaman hasil apoteker (Item E) — parameter bermasalah menonjol, hijau
   disembunyikan di balik <details>. */
.parameter-bermasalah { list-style: none; padding: 0; margin: 0.85rem 0; }
.parameter-bermasalah li { padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; border-radius: var(--radius-control); }
.parameter-bermasalah li p { margin: 0.4rem 0 0 0; }
.dosis-card { background: var(--neutral-bg); border: 1px solid var(--neutral-border); border-radius: var(--radius-control); padding: 0.75rem 0.9rem; margin-bottom: 0.6rem; }
.lihat-semua { margin-top: 0.85rem; }
.lihat-semua summary { cursor: pointer; color: var(--brand-700); font-weight: 600; }
.lihat-semua ul { list-style: none; padding: 0; margin-top: 0.5rem; }
.lihat-semua li { padding: 0.45rem 0.65rem; margin-bottom: 0.35rem; border-radius: var(--radius-control); }

/* --- Tombol Terima/Tolak BERKELOMPOK per obat (revisi 29 Agu 2026 — satu
   tombol per rekomendasi individual sempat dicoba dulu, tapi jadi ~40
   klik/kasus dan tidak layak dipakai sungguhan, lihat CLAUDE.md).

   Urutan perhatian yang DIJAGA (koreksi pengguna): ringkasan klinis -> warna
   tier -> rekomendasi & dosis -> tombol respons ini, PALING BAWAH di setiap
   kartu obat (posisi TIDAK diubah). Dibuat lebih MENONJOL sebagai kotak aksi
   tersendiri (latar netral kontras + border + bayangan) supaya jelas
   terlihat, tapi tombolnya sendiri TIDAK memakai warna FILL solid seperti
   badge tier — hanya garis tepi tebal + isi warna saat hover — supaya tidak
   pernah mengalahkan tier merah/kuning/hijau/abu yang solid di atasnya. --- */
.respon-kelompok {
  margin-top: 1.1rem; padding: 1rem 1.1rem; border-radius: var(--radius-control);
  background: var(--neutral-bg); border: 1px solid var(--neutral-border);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.respon-kelompok-ringkasan { margin: 0 0 0.65rem 0; font-weight: 700; color: var(--neutral-text); font-size: 0.92rem; }
.respon-form { display: inline-flex; gap: 0.3rem; margin: 0; }
.btn-respon {
  padding: 0.45rem 1.15rem; font-size: 0.85rem; font-weight: 700; border-radius: 999px;
  border: 2px solid #ccc; background: #fff; cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.btn-respon:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.14); }
.btn-terima { border-color: var(--tier-hijau-bg); color: var(--tier-hijau-bg); }
.btn-terima:hover { background: var(--tier-hijau-bg); color: #fff; }
.btn-tolak { border-color: var(--tier-merah-bg); color: var(--tier-merah-bg); }
.btn-tolak:hover { background: var(--tier-merah-bg); color: #fff; }
.respon-tolak-detail { display: inline-block; }
.respon-tolak-detail summary { list-style: none; }
.respon-tolak-detail summary::-webkit-details-marker { display: none; }
.respon-form-tolak { display: block; margin-top: 0.6rem; }
.respon-kelompok-checklist { list-style: none; padding: 0; margin: 0.5rem 0; }
.respon-kelompok-checklist li { padding: 0.25rem 0; }
.respon-form-tolak .respon-kelompok-checklist label { display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.85rem; }
.respon-form-tolak input[type="text"] {
  display: block; width: 100%; max-width: 28rem; margin: 0.5rem 0; box-sizing: border-box;
  font-size: 0.85rem; padding: 0.4rem 0.6rem; border: 1px solid var(--neutral-border);
  border-radius: var(--radius-control); font-family: inherit;
}

.alasan-timpa { border: 2px solid #f9a825 !important; padding-left: 0.6rem; }

.btn-submit {
  padding: 0.65rem 1.6rem; font-size: 1rem; font-weight: 600; background: var(--brand-600); color: #fff;
  border: none; border-radius: var(--radius-control); cursor: pointer; box-shadow: var(--shadow-control);
  transition: background 0.15s ease;
}
.btn-submit:hover { background: var(--brand-700); }
.btn-submit:active { transform: translateY(1px); }

/* --- Stepper 4-bagian, dibuat visual (modernisasi 29 Agu 2026): nomor
   dalam lingkaran (via counter CSS, markup <a>/<span> TIDAK disentuh supaya
   test tekan-sungguhan yang mengekstrak teksnya tetap valid), penanda
   selesai (centang), garis penghubung antar-langkah. --- */
.stepper {
  list-style: none; display: flex; padding: 0; margin: 0 0 2rem 0;
  counter-reset: stepnum;
}
.stepper-item { flex: 1; text-align: center; position: relative; padding: 0 0.3rem; }
.stepper-item::before {
  counter-increment: stepnum; content: counter(stepnum);
  display: flex; align-items: center; justify-content: center;
  width: 2.15rem; height: 2.15rem; margin: 0 auto 0.5rem auto;
  border-radius: 50%; background: #fff; border: 2px solid var(--neutral-border);
  color: var(--neutral-text-faint); font-weight: 700; font-size: 0.92rem;
  position: relative; z-index: 1;
}
.stepper-item:not(:last-child)::after {
  content: ""; position: absolute; top: 1.075rem; left: 50%; width: 100%; height: 2px;
  background: var(--neutral-border); z-index: 0;
}
.stepper-item a, .stepper-item span {
  display: block; text-decoration: none; color: var(--neutral-text-muted); font-size: 0.85rem;
}
.stepper-belum::before { background: #fff; border-color: var(--neutral-border); color: var(--neutral-text-faint); }
.stepper-belum span { color: var(--neutral-text-faint); }
.stepper-sedang::before { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.stepper-sedang a, .stepper-sedang span { color: var(--brand-700); font-weight: 700; }
.stepper-selesai::before { content: "✓"; background: var(--brand-500); border-color: var(--brand-500); color: #fff; }
.stepper-selesai a { color: var(--neutral-text); font-weight: 600; }
.stepper-selesai a:hover { color: var(--brand-600); }

.wizard-nav {
  display: flex; gap: 0.85rem; align-items: center; margin-top: 1.25rem;
}
.btn-kembali {
  padding: 0.55rem 1.3rem; background: #fff; color: var(--brand-700); border-radius: var(--radius-control);
  text-decoration: none; border: 1px solid var(--neutral-border); font-size: 0.92rem; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn-kembali:hover { background: var(--brand-50); border-color: var(--brand-500); }