:root{
  --biru:#1565c0; --biru-tua:#0d47a1; --hijau:#2e7d32; --merah:#c62828;
  --kuning:#f9a825; --abu:#f4f6f8; --garis:#dde3ea; --teks:#243342;
  --teks-2:#5b6b7b; --putih:#fff; --radius:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;background:var(--abu);
  color:var(--teks);font-size:16px;line-height:1.5}
button{font:inherit;cursor:pointer;border:none;border-radius:var(--radius)}
input,select,textarea{font:inherit;width:100%;padding:12px 14px;border:1.5px solid var(--garis);
  border-radius:10px;background:var(--putih);color:var(--teks)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--biru);border-color:var(--biru)}
label{display:block;font-weight:600;font-size:14px;margin:12px 0 4px;color:var(--teks-2)}
h1{font-size:22px}h2{font-size:19px;margin-bottom:12px}h3{font-size:16px}

/* ---------- login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:var(--putih);border-radius:18px;padding:36px 32px;max-width:400px;width:100%;
  box-shadow:0 8px 40px rgba(21,101,192,.12)}
.login-box h1{color:var(--biru-tua);margin-bottom:4px}
.login-box p{color:var(--teks-2);margin-bottom:18px}
.login-merek{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.login-merek img{flex:none;border-radius:12px}
.login-slogan{font-size:13px;color:var(--teks-2);line-height:1.35}
.demo-info{margin-top:16px;padding:12px 14px;background:#fff8e1;border:1px solid #ffe082;
  border-radius:10px;font-size:13px;color:#5d4300;line-height:1.45}
.demo-info .btn{margin:8px 6px 0 0}

/* ---------- kerangka ---------- */
.app{display:none;min-height:100vh}
.topbar{background:var(--biru);color:#fff;padding:10px 16px;display:flex;align-items:center;
  gap:12px;position:sticky;top:0;z-index:50}
.topbar .tb-logo{width:28px;height:28px;border-radius:7px;flex:none;
  box-shadow:0 0 0 2px rgba(255,255,255,.55)}
.topbar .nama-klinik{font-weight:700;flex:1;font-size:15px}
.topbar .pengguna{font-size:13px;opacity:.9;text-align:right}
.badge-mode{background:var(--kuning);color:#5d4300;font-size:11px;font-weight:700;
  padding:3px 8px;border-radius:99px}
.nav{display:flex;gap:6px;background:var(--putih);padding:8px 12px;overflow-x:auto;
  border-bottom:1px solid var(--garis);position:sticky;top:52px;z-index:40}
.nav button{background:transparent;padding:10px 16px;border-radius:10px;font-weight:600;
  color:var(--teks-2);white-space:nowrap;font-size:15px}
.nav button.aktif{background:var(--biru);color:#fff}
.isi{padding:18px;max-width:1100px;margin:0 auto}
/* layar bertabel (Persediaan, Pembelian, Laporan Keuangan) pakai lebar layar
   penuh — 1100px memaksa kolom berdesakan padahal ruangnya ada */
.isi.lebar{max-width:none}
/* baris tabel jangan tinggi gara-gara tombol aksi turun ke bawah */
td.aksi{white-space:nowrap;text-align:right}
td.aksi .btn{margin-left:4px}
table td,table th{vertical-align:middle}
.btn.kecil{padding:5px 9px;font-size:12.5px;line-height:1.2}

/* ---------- komponen ---------- */
.kartu{background:var(--putih);border-radius:var(--radius);padding:18px;margin-bottom:16px;
  box-shadow:0 1px 4px rgba(36,51,66,.06)}
.baris{display:flex;gap:12px;flex-wrap:wrap}
.baris>*{flex:1;min-width:140px}
.btn{background:var(--biru);color:#fff;padding:13px 22px;font-weight:700;font-size:16px}
.btn:hover{background:var(--biru-tua)}
.btn.hijau{background:var(--hijau)}
.btn.merah{background:var(--merah)}
.btn.abu{background:#e5eaf0;color:var(--teks)}
.btn.kecil{padding:8px 14px;font-size:14px;border-radius:9px}
.btn.lebar{width:100%}
.btn:disabled{opacity:.5;cursor:not-allowed}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{color:var(--teks-2);font-size:13px;text-transform:uppercase;letter-spacing:.4px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--garis)}
tr:last-child td{border-bottom:none}
.chip{display:inline-block;padding:4px 12px;border-radius:99px;font-size:13px;font-weight:700}
.chip.menunggu{background:#fff3cd;color:#7a5c00}
.chip.diperiksa{background:#cfe2ff;color:#084298}
.chip.selesai{background:#d1e7dd;color:#0f5132}
.chip.batal{background:#f8d7da;color:#842029}
.chip.jkn{background:#d1e7dd;color:#0f5132}
.chip.umum{background:#e2e3e5;color:#41464b}
.chip.gagal{background:#f8d7da;color:#842029}
.chip.terkirim{background:#d1e7dd;color:#0f5132}
.chip.antri,.chip.tunda{background:#fff3cd;color:#7a5c00}
.info{background:#e7f1ff;border:1px solid #b6d4fe;color:#084298;border-radius:10px;
  padding:12px 14px;font-size:14.5px;margin:10px 0}
.peringatan{background:#fff3cd;border:1px solid #ffe69c;color:#664d03;border-radius:10px;
  padding:12px 14px;font-size:14.5px;margin:10px 0}
.kosong{color:var(--teks-2);text-align:center;padding:30px 10px;font-size:15px}

/* antrean besar */
.antrean-item{display:flex;align-items:center;gap:14px;padding:14px;border:1.5px solid var(--garis);
  border-radius:var(--radius);margin-bottom:10px;background:var(--putih)}
.antrean-no{font-size:26px;font-weight:800;color:var(--biru);min-width:56px;text-align:center}
.antrean-nama{font-weight:700;font-size:17px}
.antrean-sub{color:var(--teks-2);font-size:13.5px}
.antrean-aksi{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* langkah kasir */
.total-besar{font-size:30px;font-weight:800;color:var(--hijau);text-align:right}

/* autocomplete */
.ac-wrap{position:relative}
.ac-list{position:absolute;left:0;right:0;top:100%;background:var(--putih);z-index:30;
  border:1px solid var(--garis);border-radius:10px;max-height:230px;overflow-y:auto;
  box-shadow:0 6px 24px rgba(0,0,0,.12)}
.ac-list div{padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--abu)}
.ac-list div:hover{background:#e7f1ff}

/* toast */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:99;
  background:#243342;color:#fff;padding:13px 22px;border-radius:99px;font-weight:600;
  display:none;max-width:90vw;text-align:center}
#toast.err{background:var(--merah)}
#toast.ok{background:var(--hijau)}

/* modal */
.modal-latar{position:fixed;inset:0;background:rgba(20,30,40,.5);z-index:60;display:flex;
  align-items:center;justify-content:center;padding:16px}
/* Modal isian tabel (barang masuk) butuh ruang jauh lebih lebar; 560px memaksa
   tabelnya digeser ke kanan-kiri terus, dan itu menyiksa saat input banyak baris. */
.modal.lebar{max-width:min(1200px,96vw)}
.modal.lebar table{width:100%}
.modal{background:var(--putih);border-radius:16px;padding:24px;max-width:560px;width:100%;
  max-height:90vh;overflow-y:auto}
.modal h2{margin-bottom:6px}

@media(max-width:640px){
  .isi{padding:12px}
  .antrean-aksi{width:100%;margin-left:0}
  .topbar .pengguna{display:none}
}
@media print{
  .topbar,.nav,button{display:none !important}
}

/* ---------- alat bantu PPK FKTP ---------- */
.chip-wadah{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip.c-g{background:#e7f1ff;color:#084298}
.chip.c-t{background:#e8f5e9;color:#1b5e20}
.chip.c-ok{background:#d1e7dd;color:#0f5132;font-weight:600}
.chip.c-cek{background:#fff;border:1px dashed #9aa9b8;color:var(--teks-2);font-weight:600;cursor:pointer}
.chip.c-cek:hover{background:#e7f1ff;color:#084298}
.chip.c-rujuk{background:#ffe0cc;color:#8a3b00}
.chip.c-hiv{background:#ede7f6;color:#4527a0}
.chip button{background:none;color:inherit;font-weight:800;padding:0 0 0 6px;font-size:15px}
.saran-item{border:1.5px solid var(--garis);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.saran-judul{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.saran-skor{font-weight:800;color:var(--biru);min-width:44px;text-align:right}
.saran-baris{margin-top:6px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.saran-baris small{color:var(--teks-2);margin-right:2px}
.saran-catatan{font-size:12.5px;color:var(--teks-2);margin:8px 0}
.bar{height:6px;background:var(--abu);border-radius:99px;margin-top:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--biru)}
.kartu-ppk h3{margin:14px 0 4px;color:var(--biru-tua)}
.kartu-ppk ul{padding-left:20px;font-size:14.5px}
.kartu-ppk .kelompok{font-weight:700;font-size:13px;color:var(--teks-2);margin-top:6px}
details.skrining{border:1.5px solid var(--garis);border-radius:10px;padding:10px 12px;margin-top:14px}
details.skrining summary{font-weight:700;cursor:pointer}
details.skrining summary small{font-weight:400;color:var(--teks-2)}
.skr-kol{min-width:230px}
.skr-butir{display:flex;gap:8px;align-items:flex-start;font-weight:400;color:var(--teks);margin:6px 0;font-size:14.5px}
.skr-butir input{width:20px;height:20px;flex:none;margin-top:2px}
.banner-tb,.banner-hiv{border-radius:10px;padding:12px 14px;margin:12px 0;font-size:14.5px}
.banner-tb{background:#fff0e6;border:2px solid #e65100;color:#6d2a00}
.banner-hiv{background:#f3eefc;border:2px solid #5e35b1;color:#311b92}
.banner-tb ul,.banner-hiv ul{padding-left:20px;margin:4px 0}

/* ---------- rekomendasi obat PPK ---------- */
.kelompok-obat{font-weight:800;color:var(--biru-tua);margin:14px 0 6px;font-size:14px;text-transform:uppercase;letter-spacing:.3px}
.obat-item{border:1.5px solid var(--garis);border-radius:10px;padding:10px 12px;margin-bottom:8px}
.obat-item.obat-alergi{border-color:var(--merah);background:#fff5f5}
.obat-judul{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.obat-baris{margin-top:4px;font-size:14px}
.obat-baris small{color:var(--teks-2);margin-right:2px}
.obat-waspada{margin-top:5px;font-size:13.5px;font-weight:600;color:#8a3b00}
.obat-waspada.alergi{color:var(--merah)}
.banner-hamil{background:#fce4ec;border:2px solid #ad1457;color:#880e4f;border-radius:10px;
  padding:10px 14px;font-weight:700;margin-bottom:14px}
.banner-hamil small{font-weight:400}
label.cek{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--teks);margin:12px 0 4px}
label.cek input{width:20px;height:20px}
.obat-anak{margin-top:6px;padding:7px 10px;background:#f1f8e9;border-left:3px solid #558b2f;
  border-radius:6px;font-size:13.5px}
.obat-anak small{color:#33691e;font-weight:600}
.kelompok-obat .chip{margin-left:8px;text-transform:none;letter-spacing:0}

/* ---------- ANC (kehamilan) ---------- */
.kartu.anc{border:2px solid #f48fb1}
.anc-kepala{color:var(--teks-2);font-size:14px;margin:-4px 0 10px}
.anc-status{border-radius:10px;padding:10px 14px;margin:8px 0;font-size:15px}
.anc-pe{margin:4px 0 10px;color:var(--teks-2)}
.anc-temuan{border-left:5px solid var(--garis);background:#fafafa;border-radius:8px;padding:8px 12px;margin:6px 0;font-size:14.5px}
.anc-temuan small{display:block;margin-top:3px}
.anc-temuan .anc-sumber{color:var(--teks-2);font-size:12px}
.anc-temuan .btn{margin-left:6px}
.lv-merah{background:#fdecea;border-color:#c62828;color:#7f0000}
.lv-oranye{background:#fff1e3;border-color:#e65100;color:#6d2a00}
.lv-kuning{background:#fffbe6;border-color:#f9a825;color:#5d4300}
.lv-info{background:#eef5ff;border-color:#90caf9;color:#0d3c78}
.lv-hijau{background:#e8f5e9;border-color:#2e7d32;color:#1b5e20}
.chip.lv-merah,.chip.lv-oranye,.chip.lv-kuning,.chip.lv-hijau{border:1px solid}
.chip.lv-baru{background:#311b92;color:#fff;font-size:11px;padding:2px 8px}
.lv-merah-teks{color:#c62828;font-weight:700}
.lv-oranye-teks{color:#e65100;font-weight:700}
details.anc-grup{border:1.5px solid var(--garis);border-radius:10px;padding:8px 12px;margin-top:10px}
details.anc-grup summary{font-weight:700;cursor:pointer}
.anc-isi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:4px 12px;align-items:end}
.anc-isi .anc-lebar{grid-column:1/-1}
.anc-cek1{margin:8px 0 2px;font-weight:500}
.anc-kel-wadah{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:4px 16px;margin-top:10px}
.anc-kel b{display:block;margin-top:8px;font-size:13.5px;color:var(--biru-tua)}
.anc-cek{padding-left:18px;font-size:14px}
.anc-cek small{color:var(--teks-2)}
.tabel-wadah{overflow-x:auto}
table.tabel.kecil{font-size:13px}
table.tabel.kecil td,table.tabel.kecil th{padding:6px 6px}
tr.anc-ini td{background:#fff7fa;font-weight:600}
.anc-tugas{padding-left:18px;margin:8px 0;font-size:14px}
.anc-tugas li{margin:6px 0}
.anc-tugas small{color:var(--teks-2)}
.anc-tugas .btn{margin-left:6px}
.anc-catatan{font-size:13px;color:var(--teks-2);margin:4px 0 6px;background:#f6f8fb;border-radius:6px;padding:6px 8px}
details.anc-riwayat{margin-top:8px;font-size:13.5px}
details.anc-riwayat summary{cursor:pointer;color:var(--biru-tua);font-weight:600}
details.anc-riwayat ul{padding-left:18px;margin:4px 0}
#ancRk input,#ancRk select{min-width:90px;padding:6px}