/* Token warna dipinjam dari UI orkestrator lama (tema gelap), ditulis ulang sebagai CSS biasa. */
:root {
  --bg: #0B0E14; --panel: #11151F; --panel2: #161B27; --line: #232A3A; --line2: #2E3A52;
  --ink: #E4E9F2; --dim: #8A94A8; --faint: #5A6478;
  --hijau: #4ADE80; --kuning: #FBBF24; --merah: #F87171; --biru: #60A5FA; --abu: #5A6478;
  --sans: Inter, -apple-system, system-ui, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --r: 12px;
  --bayang: 0 8px 24px rgba(0, 0, 0, .35);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); }
a { color: var(--biru); text-decoration: none; } a:hover { text-decoration: underline; }
main { max-width: 1180px; margin: 0 auto; padding: 16px; }
h1 { font-size: 1.4rem; margin: .4rem 0 1rem; } h2 { font-size: 1.05rem; margin: 1.6rem 0 .6rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
h3 { font-size: 1rem; margin: 0 0 .5rem; }
.dim { color: var(--dim); } .kanan { margin-left: auto; } .bahaya { color: var(--merah); font-weight: 600; }
.peringatan { border-left: 3px solid var(--kuning); padding: .4rem .8rem; background: var(--panel); }
/* Kerangka seluler: header ramping + tab bawah (tinggi 56px + area aman); >=900px tab pindah ke atas. */
.atas { display: flex; align-items: center; gap: 12px; padding: 10px 16px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--panel); border-bottom: 1px solid var(--line); }
.merek { font-weight: 700; color: var(--hijau); font-size: 1.1rem; }
.umur-header { margin-left: auto; font-size: .8rem; }
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: flex; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--panel); border-top: 1px solid var(--line2); }
.nav a { position: relative; flex: 1; min-width: 44px; min-height: 44px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .72rem; color: var(--dim); }
.nav a:hover { text-decoration: none; color: var(--ink); }
.nav a[aria-current] { color: var(--hijau); }
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.angka-lencana { position: absolute; top: 4px; left: calc(50% + 6px); min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--kuning); color: #1a1200; font-size: .7rem; line-height: 18px; text-align: center; font-weight: 700; }
.angka-lencana.merah { background: var(--merah); color: #2a0606; }
body.dengan-nav { padding-bottom: calc(56px + env(safe-area-inset-bottom) + 16px); }
@media (min-width: 900px) {
  body.dengan-nav { padding-bottom: 0; }
  .nav { position: static; height: auto; padding: 0; border: 0; background: transparent; gap: 4px; order: 2; margin-left: 12px; }
  .nav a { flex: none; flex-direction: row; gap: 6px; padding: 0 14px; font-size: .9rem; border-radius: 8px; }
  .nav a[aria-current] { background: var(--panel2); }
  .angka-lencana { position: static; }
  .umur-header { order: 3; }
}
.kotak { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px; margin: 12px 0; }
.kotak.sempit { max-width: 420px; margin: 8vh auto; }
.kotak.menunggu { border-color: var(--merah); }
label { display: block; margin: .8rem 0 .3rem; color: var(--dim); }
input, select, textarea { width: 100%; padding: 10px; background: var(--bg); color: var(--ink); border: 1px solid var(--line2); border-radius: 6px; font: inherit; font-size: 16px; }
input:not([type=hidden]), select { min-height: 44px; }
textarea { resize: vertical; line-height: 1.45; }
select { width: auto; } .baris { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .baris label { margin: 0; }
.tombol { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 1rem; padding: 10px 16px; background: var(--hijau); color: #04210f; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
.tombol:hover { text-decoration: none; }
.tombol.kecil { margin: 0; padding: 8px 14px; background: var(--panel2); color: var(--ink); border: 1px solid var(--line2); font-weight: 500; }
.tombol.rapat { margin: 0; }
.tombol.lebar { display: flex; width: 100%; }
.tombol.bahaya-tombol { background: var(--merah); color: #2a0606; }
.tombol[disabled] { opacity: .45; cursor: not-allowed; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--s3); }
.kartu { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; color: inherit; background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--r); padding: var(--s3) var(--s4); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kartu:hover { text-decoration: none; border-color: var(--line2); }
@media (hover: hover) { .kartu:hover { transform: translateY(-2px); box-shadow: var(--bayang); } }
.kartu.s-merah { border-left-color: var(--merah); } .kartu.s-kuning { border-left-color: var(--kuning); }
.kartu.s-hijau { border-left-color: var(--hijau); } .kartu.s-abu { border-left-color: var(--abu); }
.kepala { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.id-vm { font-size: 1.05rem; overflow-wrap: anywhere; } .umur { font-size: .8rem; white-space: nowrap; }
.klien { margin-top: calc(var(--s1) * -1); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.data-umur { margin: 0 0 var(--s2); text-align: right; font-size: .8rem; }
.aksi { padding: 5px 10px; border-radius: 6px; font-size: .85rem; border: 1px solid transparent; overflow-wrap: anywhere; }
.aksi-merah { color: var(--merah); background: rgba(248, 113, 113, .12); border-color: rgba(248, 113, 113, .4); }
.aksi-kuning { color: var(--kuning); background: rgba(251, 191, 36, .12); border-color: rgba(251, 191, 36, .4); }
.titik { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--abu); }
.t-hijau { background: var(--hijau); } .t-kuning { background: var(--kuning); } .t-merah { background: var(--merah); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kartu dl { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 2px var(--s3); margin: 0; font-size: .85rem; }
.kartu .lencana-baris { margin: 0; }
.chip-baris { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; max-width: 100%; padding: 2px 10px; border-radius: 6px; font-size: .8rem; border: 1px solid transparent; overflow-wrap: anywhere; }
.chip.tebal { font-weight: 600; }
.c-ok { color: var(--dim); background: transparent; border-color: var(--line2); }
.c-buruk { color: var(--merah); background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .35); }
.disk { display: flex; align-items: center; gap: var(--s2); font-size: .85rem; }
.disk .lbl { color: var(--faint); width: 2.2rem; flex: none; }
.disk .pct { width: 3rem; text-align: right; flex: none; font-variant-numeric: tabular-nums; font-weight: 600; }
.p-ok { color: var(--dim); } .p-warn { color: var(--kuning); } .p-krit { color: var(--merah); }
meter { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 8px; border: 0; border-radius: 999px; background: var(--line); overflow: hidden; }
meter::-webkit-meter-bar { background: var(--line); border: 0; border-radius: 999px; height: 8px; }
meter::-webkit-meter-optimum-value { background: var(--faint); border-radius: 999px; }
meter::-webkit-meter-suboptimum-value { background: var(--kuning); border-radius: 999px; }
meter::-webkit-meter-even-less-good-value { background: var(--merah); border-radius: 999px; }
meter::-moz-meter-bar { background: var(--faint); border-radius: 999px; }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--kuning); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--merah); }
.alarm-daftar { display: flex; flex-direction: column; gap: 6px; margin-top: auto; }
.pil { display: flex; gap: 6px; min-width: 0; padding: 3px 10px; border-radius: 999px; font-size: .8rem; border: 1px solid var(--line2); }
.pil .pesan { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pil .ack { flex: none; opacity: .8; }
.pl-kritis { color: var(--merah); background: rgba(248, 113, 113, .1); border-color: rgba(248, 113, 113, .35); }
.pl-peringatan { color: var(--kuning); background: rgba(251, 191, 36, .1); border-color: rgba(251, 191, 36, .35); }
.pl-pagi, .pl-info { color: var(--biru); background: rgba(96, 165, 250, .1); border-color: rgba(96, 165, 250, .35); }
.pil.diack { opacity: .65; }
.lagi { font-size: .8rem; color: var(--dim); padding-left: 10px; }
.ringkasan { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3); margin-bottom: var(--s4); }
.ubin { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3) var(--s4); background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--line2); border-radius: var(--r); min-width: 0; }
.ubin .angka { font-size: 2rem; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.ubin .label { font-size: .8rem; color: var(--dim); text-transform: uppercase; letter-spacing: .04em; }
.ub-hijau { border-top-color: var(--hijau); } .ub-hijau .angka { color: var(--hijau); }
.ub-kuning { border-top-color: var(--kuning); } .ub-kuning .angka { color: var(--kuning); }
.ub-merah { border-top-color: var(--merah); } .ub-merah .angka { color: var(--merah); }
.ub-nol .angka { color: var(--dim); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
.kartu:focus-visible { border-color: var(--biru); }
.galeri { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.galeri img { width: 100%; height: auto; border: 1px solid var(--line2); border-radius: 6px; background: #fff; }
.mockup-html { width: 100%; height: 480px; border: 1px solid var(--line2); border-radius: 6px; background: #fff; }
@media (prefers-reduced-motion: reduce) { .kartu { transition: none; } .kartu:hover { transform: none; } }
dl { display: grid; grid-template-columns: 7.5rem 1fr; gap: 2px 10px; margin: .6rem 0 0; font-size: .9rem; }
dt { color: var(--faint); } dd { margin: 0; overflow-wrap: anywhere; }
dl.rapat { max-width: 520px; }
.lencana-baris { display: flex; flex-wrap: wrap; gap: 6px; margin: .5rem 0; }
.lencana { display: inline-block; padding: 1px 8px; border: 1px solid var(--line2); border-radius: 999px; font-size: .75rem; color: var(--dim); }
.l-bahaya { color: var(--merah); border-color: var(--merah); } .l-kritis { color: var(--merah); border-color: rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .1); } .l-info { color: var(--biru); border-color: var(--biru); }
.alarm { margin-top: .5rem; padding: 5px 8px; border-radius: 4px; background: var(--panel2); font-size: .85rem; overflow-wrap: anywhere; }
.a-kritis { border-left: 3px solid var(--merah); } .a-peringatan { border-left: 3px solid var(--kuning); } .a-pagi, .a-info { border-left: 3px solid var(--biru); }
.gulir { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 6px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--dim); font-weight: 500; white-space: nowrap; }
td.isi { font-family: var(--mono); font-size: .8rem; overflow-wrap: anywhere; }
tr.j-blokir td, tr.j-gagal td { color: var(--merah); } tr.j-siap-deploy-butuh-root td { color: var(--kuning); }
pre { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 10px; overflow-x: auto; font: .8rem/1.4 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
ul.daftar { list-style: none; padding: 0; } ul.daftar li { padding: 6px 0; border-bottom: 1px solid var(--line); }
code { font-family: var(--mono); background: var(--panel2); padding: 0 4px; border-radius: 3px; }
@media (max-width: 520px) { main { padding: 12px; } dl { grid-template-columns: 6rem 1fr; } .ubin .angka { font-size: 1.6rem; } }

/* Tabel jadi baris bertumpuk di layar sempit; label kolom dari atribut data-label. */
@media (max-width: 640px) {
  table.tumpuk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.tumpuk, table.tumpuk tbody, table.tumpuk tr, table.tumpuk td { display: block; width: 100%; }
  table.tumpuk tr { margin: 0 0 10px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
  table.tumpuk td { display: flex; gap: 10px; padding: 3px 0; border: 0; }
  table.tumpuk td::before { content: attr(data-label); flex: none; width: 6.5rem; color: var(--faint); font-size: .8rem; }
  table.tumpuk td.isi { overflow-wrap: anywhere; }
}

/* Komponen seluler */
.judul-kotak { margin: 0 0 .6rem; }
.kotak.perlu { border-color: var(--kuning); }
.daftar-tindakan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tindakan { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.tindakan:last-child { border-bottom: 0; padding-bottom: 0; }
.tindakan .teks { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.tombol-baris { display: flex; flex-wrap: wrap; gap: 8px; }
.pesan-alarm { overflow-wrap: anywhere; margin: .3rem 0; }
.alarm-kartu { border-left-width: 4px; } .alarm-kartu.a-kritis { border-left-color: var(--merah); } .alarm-kartu.a-peringatan { border-left-color: var(--kuning); } .alarm-kartu.a-pagi, .alarm-kartu.a-info { border-left-color: var(--biru); }
.alarm-kartu .kepala { flex-wrap: wrap; }
.l-peringatan { color: var(--kuning); border-color: rgba(251, 191, 36, .5); background: rgba(251, 191, 36, .1); } .l-pagi { color: var(--biru); border-color: var(--biru); }
details.lipat { margin: 1rem 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 0 14px; }
details.lipat > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--dim); }
details.lipat[open] { padding-bottom: 10px; }
details.batal > summary { color: var(--merah); }
.bilah-aksi { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0; }
.bilah-aksi .tombol { flex: 1 1 8rem; }
.menu-daftar { list-style: none; margin: 0 0 1rem; padding: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; }
.menu-daftar li + li { border-top: 1px solid var(--line); }
.menu-daftar a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; color: var(--ink); }
h3.sub { margin: 1.2rem 0 .4rem; color: var(--dim); font-size: .95rem; }
.galat, .info { margin: .8rem 0; padding: .6rem .9rem; border-radius: 8px; overflow-wrap: anywhere; }
.galat { color: var(--merah); background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .4); }
.info { color: var(--biru); background: rgba(96, 165, 250, .1); border: 1px solid rgba(96, 165, 250, .4); }
.label-data { margin: 0 0 .3rem; font-size: .75rem; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.linimasa { list-style: none; margin: .6rem 0 0; padding: 0 0 0 14px; border-left: 2px solid var(--line2); display: flex; flex-direction: column; gap: 6px; }
.status-tugas { border-left-width: 4px; }
.status-tugas.st-menunggu { border-left-color: var(--kuning); } .status-tugas.st-disetujui, .status-tugas.st-berjalan { border-left-color: var(--biru); }
.status-tugas.st-selesai { border-left-color: var(--hijau); } .status-tugas.st-gagal { border-left-color: var(--merah); } .status-tugas.st-batal { border-left-color: var(--abu); }
.lencana.st-menunggu { color: var(--kuning); border-color: var(--kuning); } .lencana.st-disetujui, .lencana.st-berjalan { color: var(--biru); border-color: var(--biru); }
.lencana.st-selesai { color: var(--hijau); border-color: var(--hijau); } .lencana.st-gagal { color: var(--merah); border-color: var(--merah); }
.kartu-tugas.st-menunggu { border-left-color: var(--kuning); } .kartu-tugas.st-disetujui, .kartu-tugas.st-berjalan { border-left-color: var(--biru); }
.kartu-tugas.st-selesai { border-left-color: var(--hijau); } .kartu-tugas.st-gagal { border-left-color: var(--merah); } .kartu-tugas.st-batal { border-left-color: var(--abu); }
@media (prefers-reduced-motion: reduce) { .tombol { transition: none; } }

/* Lencana/chip yang bisa diketuk -> kartu pop-up penjelasan (HTML Popover API, tanpa JS).
   `:where` menjaga spesifisitas 0 supaya gaya lencana/chip yang sudah ada tetap menang. */
:where(.pemicu) { appearance: none; margin: 0; font: inherit; color: inherit; background: none; border: 0; padding: 0; text-align: inherit; cursor: pointer; }
.pemicu { position: relative; z-index: 2; max-width: 100%; }
.pemicu::after { content: ""; position: absolute; inset: -10px -6px; } /* area sentuh >= 44px */
.pemicu-titik { display: inline-flex; align-items: center; min-width: 12px; }
.pemicu-titik::after { inset: -16px -12px; } /* titik 12px: area sentuh ~36x44px */
.pemicu-teks { text-decoration: underline dotted; text-underline-offset: 3px; }
.pemicu-blok { display: block; width: 100%; text-align: left; }
.pil.pemicu-blok, .disk.pemicu-blok { display: flex; }
/* Wadah pemicu memakai <div>, bukan <p>: <div popover> di dalam <p> menutup <p> lebih awal. */
.para { margin: 1em 0; }
.pemicu:focus-visible { outline: 2px solid var(--biru); outline-offset: 2px; }
/* Kartu VM/tugas: tautan menutupi kartu (tombol pemicu tidak boleh di dalam <a>). */
.kartu { position: relative; }
.tautan-kartu { color: inherit; }
.tautan-kartu:hover { text-decoration: none; }
.tautan-kartu::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.tautan-kartu:focus-visible { outline: none; }
.tautan-kartu:focus-visible::after { outline: 2px solid var(--biru); }
/* Sensitivitas: kelas data, BUKAN tanda masalah -> netral (tidak merah/kuning). */
.l-sens { color: var(--ink); background: var(--panel2); border-color: var(--line2); }
.popup { position: fixed; inset: 0; margin: auto; width: min(360px, calc(100vw - 32px)); height: fit-content; max-height: min(80vh, calc(100dvh - 32px)); overflow-y: auto; padding: 16px; background: var(--panel); color: var(--ink); border: 1px solid var(--line2); border-left: 4px solid var(--abu); border-radius: var(--r); box-shadow: var(--bayang); font-size: .9rem; line-height: 1.45; text-align: left; white-space: normal; overscroll-behavior: contain; }
.popup::backdrop { background: rgba(0, 0, 0, .55); }
.popup.n-merah { border-left-color: var(--merah); } .popup.n-kuning { border-left-color: var(--kuning); }
.popup.n-hijau { border-left-color: var(--hijau); } .popup.n-biru { border-left-color: var(--biru); }
.popup-judul { margin: 0 0 4px; font-size: 1.05rem; overflow-wrap: anywhere; }
.popup-bagian h4 { margin: 12px 0 4px; font-size: .72rem; font-weight: 600; color: var(--faint); text-transform: uppercase; letter-spacing: .05em; }
.popup-bagian p { margin: 0; overflow-wrap: anywhere; }
.popup-alasan { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.popup .nilai { font-weight: 600; font-variant-numeric: tabular-nums; }
.popup .label-data { display: inline-block; margin: 0 0 0 4px; font-size: .65rem; }
.popup .tutup { margin-top: 14px; }
/* Tanpa Popover API (iOS < 17): kartu disembunyikan; ringkasan alasan tetap ada di atribut title. */
@supports not selector(:popover-open) { .popup { display: none; } }