/* Dasbor Pusat Rindu Rumah (khusus pengelola): memakai komponen pantau.css + bagian khusus dasbor. */

/* status kesehatan di peta & kartu: sehat = putih, perhatian = kuning, gawat/terputus = oranye */
.titik.perhatian { background: #FFD166; box-shadow: 0 0 0 3px rgba(255,209,102,0.45), 0 0 16px 3px rgba(255,209,102,0.35); }
.titik.perhatian::after { border-color: rgba(255,209,102,0.9); }
.status-daftar i.perhatian, .legenda i.perhatian { background: #FFD166; box-shadow: 0 0 0 3px rgba(255,209,102,0.4); }
.status-daftar .perhatian-teks { color: #FFE2A3; }

.kepala-menu { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.angka-nilai.panjang { font-size: 24px; line-height: 1.35; }

.bagian-judul { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bagian-judul h2 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.bagian-judul p { margin: 4px 0 0; color: var(--abu2); font-size: 13px; }

.upt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.upt { background: var(--kartu); border: 1px solid var(--garis); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 16px; min-width: 0; }
.upt.gawat { border-color: #F2B8A0; }
.upt.perhatian { border-color: #F1D79A; }
.status-pil { flex-shrink: 0; margin-left: auto; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.status-pil.sehat { color: var(--hijau-teks); background: #E9F6F0; border: 1px solid #BFE3D2; }
.status-pil.perhatian { color: #7A4A00; background: #FFF4DE; border: 1px solid #F0D49E; }
.status-pil.gawat { color: #9A330A; background: #FFF1EA; border: 1px solid #F6D3C2; }
.upt:target { outline: 2px solid var(--ungu); outline-offset: 2px; }
.upt-kepala { display: flex; align-items: flex-start; gap: 10px; }
.upt-kepala .bulat { margin-top: 7px; }
.bulat.perhatian { background: #D69E1A; }
.upt h3 { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.upt-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12.5px; color: var(--abu2); margin-top: 2px; }
.upt-meta a { color: var(--ungu-tua); text-decoration: none; font-weight: 500; }
.upt-meta a:hover { text-decoration: underline; }
.upt-meta .beda { color: #A16207; font-weight: 600; }
.alasan { list-style: none; margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.alasan.merah { background: #FFF4EF; border: 1px solid #F6D3C2; color: #9A330A; }
.alasan.kuning { background: #FFF8E6; border: 1px solid #F0D49E; color: #7A4A00; }
.upt-baris { margin: 0; display: flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.upt-baris > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid var(--garis2); font-size: 13.5px; }
.upt-baris dt { color: var(--abu); }
.upt-baris dd { margin: 0; font-weight: 600; text-align: right; }
.upt-baris dd.ok { color: var(--hijau-teks); }
.upt-baris dd.warn { color: #A16207; }
.upt-baris dd.bad { color: var(--oranye-teks); }
.upt-pesan { margin: 0; color: var(--oranye-teks); font-size: 13.5px; font-weight: 500; }

.biaya-alat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.biaya-alat label { font-size: 13px; color: var(--abu); font-weight: 500; }
.biaya-alat input { height: 44px; padding: 0 12px; border: 1px solid #DCDAE6; border-radius: 8px; color: var(--tinta); background: #FFFFFF; }
.biaya-upt { display: flex; flex-direction: column; gap: 6px; }
.biaya-upt h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.biaya-upt h3 span { font-weight: 400; color: var(--abu2); font-size: 12px; margin-left: 6px; }
.biaya-gulir { overflow-x: auto; }
.tabel-biaya { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.tabel-biaya td { padding: 8px 10px; border-top: 1px solid var(--garis2); }
.tabel-biaya td:nth-child(2) { color: var(--abu); white-space: nowrap; }
.tabel-biaya td:last-child { text-align: right; white-space: nowrap; }
.tabel-biaya tr.sub td { border-top: 2px solid var(--garis); font-weight: 700; }
.biaya-total { text-align: right; font-size: 15px; font-weight: 700; padding: 6px 10px; }
.gratis { color: var(--abu3); }

@media (max-width: 700px) {
  .kepala-menu .tombol-gelap { height: 40px; padding: 0 10px; font-size: 13px; }
  .angka-nilai.panjang { font-size: 18px; white-space: nowrap; }
  .upt { padding: 16px; }
}
@media print {
  .kepala-menu { display: none; }
}