/* Backoffice Warlok. Tampilan diangkat dari mockup docs/mockup/backoffice.html (desktop 1440, terang dan redup),
 * ditambah layar masuk, alat uji, dan tata letak sempit untuk tablet. */
:root { color-scheme: light; }
.app {
  --latar: #F4F2EC; --permukaan: #FFFFFF; --panel: #ECE8DF; --garis: #D6D0C4; --garis-isian: #7D8590; --teks: #18202A; --teks2: #4E5764;
  --nila: #2A3B8F; --on-nila: #FFFFFF; --nila-teks: #2A3B8F; --nila-muda: #E4E8F7; --hadir: #0B6E69; --hadir-wadah: #DDF1EE;
  --ok: #1A6B43; --ok-bg: #E3F2E9; --tunggu: #8A5A00; --tunggu-bg: #FDF0D2; --off: #3F4A56; --off-bg: #E4E7EB; --galat: #B3261E; --galat-bg: #FCE4E2; --bahaya: #B3261E; --on-bahaya: #FFFFFF;
  --tirai: rgba(24, 32, 42, .45); --bayang: rgba(24, 32, 42, .14); --snack-bg: #18202A; --snack-fg: #FFFFFF; --uji: #6B3FA0; --uji-bg: #EFE6FA;
}
.app[data-mode="redup"] {
  --latar: #11151B; --permukaan: #1A2028; --panel: #212833; --garis: #333C48; --garis-isian: #6B7684; --teks: #ECEFF3; --teks2: #A7B0BC;
  --nila: #4C5FCB; --nila-teks: #9AA8F0; --nila-muda: #252E52; --hadir: #5CCFD0; --hadir-wadah: #0F2E2F;
  --ok: #7BD4A0; --ok-bg: #15301F; --tunggu: #F0C05A; --tunggu-bg: #33270B; --off: #AEB8C4; --off-bg: #262D36; --galat: #FF8F85; --galat-bg: #3A1714; --bahaya: #C23A30;
  --tirai: rgba(0, 0, 0, .55); --bayang: rgba(0, 0, 0, .4); --snack-bg: #ECEFF3; --snack-fg: #11151B; --uji: #CDA8F5; --uji-bg: #2C1F3D;
  color-scheme: dark;
}
html, body { margin: 0; height: 100%; }
body { background: #F4F2EC; }
body.redup { background: #11151B; }
.app { font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif; color: var(--teks); background: var(--latar); font-variant-numeric: tabular-nums; line-height: 1.4; -webkit-font-smoothing: antialiased; font-size: 15px; text-align: left; height: 100vh; height: 100dvh; }
:where(.app) *, :where(.app) *::before, :where(.app) *::after { box-sizing: border-box; }
:where(.app) :where(h1, h2, h3, p, ul, ol) { margin: 0; }
:where(.app) :where(h1, h2, h3) { font-size: inherit; }
:where(.app) :where(ul, ol) { padding: 0; list-style: none; }
:where(.app) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.app) button { cursor: pointer; }
:where(.app) a { color: inherit; text-decoration: none; }
:where(.app) svg { flex: none; }
.app :focus-visible { outline: 3px solid var(--nila-teks); outline-offset: 2px; }
[v-cloak] { display: none; }

/* ---------- Kerangka ---------- */
.bo { width: 100%; height: 100%; display: grid; grid-template-columns: 248px minmax(0, 1fr); grid-template-rows: 64px minmax(0, 1fr); position: relative; overflow: hidden; }
.bilah { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--permukaan); border-bottom: 1px solid var(--garis); min-width: 0; }
.merek { width: 208px; flex: none; display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; }
.logo { width: 32px; height: 32px; border-radius: 9px; background: var(--nila); color: var(--on-nila); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.stempel { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 18px; font-size: 14px; font-weight: 600; min-width: 0; }
.stempel span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bilah-kanan { margin-left: auto; display: flex; align-items: center; gap: 10px; flex: none; }
.tombol-ikon { width: 40px; height: 40px; border: 1px solid var(--garis); border-radius: 9px; background: var(--permukaan); color: var(--teks); display: inline-flex; align-items: center; justify-content: center; }
.hanya-sempit { display: none; }
.sisi { background: var(--panel); border-right: 1px solid var(--garis); overflow-y: auto; padding: 14px 12px 24px; }
.sisi h3 { margin: 14px 10px 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teks2); }
.sisi h3:first-child { margin-top: 2px; }
.menu { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--teks); text-align: left; font-size: 15px; font-weight: 500; }
.menu:hover { background: color-mix(in srgb, var(--permukaan) 60%, transparent); }
.menu[aria-current="page"] { background: var(--permukaan); color: var(--nila-teks); font-weight: 700; box-shadow: inset 3px 0 0 var(--nila-teks); }
.menu .lencana { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--galat-bg); color: var(--galat); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.menu .fase { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--teks2); }
.utama { overflow-y: auto; padding: 24px 32px 48px; min-width: 0; }
.kepala { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.kepala h1 { font-size: 26px; font-weight: 800; line-height: 1.2; }
.kepala-kanan { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 14px; padding: 16px 18px; min-width: 0; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.angka { font-size: 28px; font-weight: 800; line-height: 1.15; }
.peringatan { display: flex; align-items: center; gap: 14px; padding: 12px 14px 12px 16px; border-radius: 12px; font-size: 15px; }
.peringatan > span { flex: 1; min-width: 0; }
.peringatan > span.nowrap { flex: none; margin-left: auto; }
.peringatan .tombol { margin-left: auto; flex: none; }
.peringatan.galat { background: var(--galat-bg); } .peringatan.galat > svg { color: var(--galat); }
.peringatan.tunggu { background: var(--tunggu-bg); } .peringatan.tunggu > svg { color: var(--tunggu); }
.peringatan.ok { background: var(--ok-bg); } .peringatan.ok > svg { color: var(--ok); }
.peringatan.info, .peringatan.netral, .peringatan.off { background: var(--nila-muda); }
.stempel.ok { background: var(--ok-bg); color: var(--ok); } .stempel.tunggu { background: var(--tunggu-bg); color: var(--tunggu); } .stempel.galat { background: var(--galat-bg); color: var(--galat); }
.tombol { min-height: 40px; padding: 0 14px; border: 1px solid var(--garis-isian); border-radius: 9px; background: var(--permukaan); color: var(--teks); font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; }
.tombol:hover:not(.mati):not(:disabled) { filter: brightness(.97); }
.tombol.utama { background: var(--nila); border-color: var(--nila); color: var(--on-nila); }
.tombol.bahaya { background: var(--bahaya); border-color: var(--bahaya); color: var(--on-bahaya); }
.tombol.mati, .tombol:disabled { background: transparent; border-style: dashed; color: var(--teks2); cursor: not-allowed; }
.tombol.teks { border: 0; background: transparent; color: var(--nila-teks); padding: 0 6px; min-height: 32px; }
.tombol.kecil { min-height: 32px; padding: 0 10px; font-size: 13px; }
.chip { min-height: 24px; padding: 2px 9px; border-radius: 12px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.chip.ok { background: var(--ok-bg); color: var(--ok); } .chip.tunggu { background: var(--tunggu-bg); color: var(--tunggu); } .chip.off { background: var(--off-bg); color: var(--off); } .chip.galat { background: var(--galat-bg); color: var(--galat); } .chip.netral { background: var(--panel); color: var(--teks); } .chip.nila { background: var(--nila-muda); color: var(--nila-teks); } .chip.hadir { background: var(--hadir-wadah); color: var(--hadir); }
.chip.uji { background: var(--uji-bg); color: var(--uji); border: 1px dashed var(--uji); cursor: pointer; letter-spacing: .04em; font-size: 12px; font-weight: 800; }
table.tabel { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tabel th { position: sticky; top: 0; background: var(--panel); text-align: left; font-weight: 700; font-size: 13px; color: var(--teks2); padding: 10px 12px; border-bottom: 1px solid var(--garis); white-space: nowrap; }
.tabel td { padding: 6px 12px; height: 46px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .r, .tabel th.r { text-align: right; }
.tabel tr.pilih td { background: var(--nila-muda); }
.tabel tr.total td { font-weight: 700; background: var(--latar); }
.tabel tr.klik { cursor: pointer; }
.tabel tr.klik:hover td { background: color-mix(in srgb, var(--nila-muda) 55%, transparent); }
.tabel td.kosong { height: 64px; color: var(--teks2); }
.bungkus-tabel { border: 1px solid var(--garis); border-radius: 12px; overflow: auto; background: var(--permukaan); }
.segmen { display: inline-flex; border: 1px solid var(--garis-isian); border-radius: 9px; overflow: hidden; flex-wrap: wrap; }
.segmen button { min-height: 36px; padding: 0 14px; border: 0; background: var(--permukaan); font-size: 14px; font-weight: 600; }
.segmen button + button { border-left: 1px solid var(--garis); }
.segmen button[aria-checked="true"] { background: var(--teks); color: var(--permukaan); }
.panel-samping { position: fixed; top: 64px; right: 0; bottom: 0; width: 440px; max-width: 100%; background: var(--permukaan); border-left: 1px solid var(--garis); box-shadow: -10px 0 30px var(--bayang); display: flex; flex-direction: column; z-index: 20; }
.panel-samping header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--garis); }
.panel-samping .isi { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.tirai { position: fixed; inset: 0; background: var(--tirai); border: 0; z-index: 30; }
.dialog { position: fixed; left: 50%; top: 96px; transform: translateX(-50%); width: 560px; max-width: calc(100% - 32px); max-height: calc(100% - 130px); overflow-y: auto; background: var(--permukaan); border-radius: 16px; box-shadow: 0 20px 50px var(--bayang); padding: 22px 24px; display: flex; flex-direction: column; gap: 16px; z-index: 31; }
.dialog h2 { font-size: 21px; font-weight: 800; }
.isian { min-height: 44px; border: 1.5px solid var(--garis-isian); border-radius: 10px; background: var(--permukaan); padding: 0 12px; display: flex; align-items: center; gap: 8px; }
.isian:focus-within { border-color: var(--nila-teks); box-shadow: 0 0 0 1.5px var(--nila-teks); }
/* Cincin fokus ada di pembungkus .isian, bukan di input di dalamnya, supaya tidak tergambar dua kali */
.app .isian :focus-visible { outline: none; }
.isian input, .isian select, .isian textarea { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 15px; height: 40px; color: var(--teks); outline: none; }
.isian select option { background: var(--permukaan); color: var(--teks); }
.isian.salah { border-color: var(--galat); }
.isian.otp input { font-size: 22px; letter-spacing: .3em; font-weight: 800; }
.isian.otp input::placeholder { font-size: 16px; letter-spacing: normal; font-weight: 500; }
.label { font-size: 13px; font-weight: 600; }
.kode-besar { font-size: 44px; font-weight: 800; letter-spacing: .18em; font-family: "IBM Plex Mono", Consolas, monospace; }
.batang { height: 10px; border-radius: 5px; background: var(--panel); overflow: hidden; } .batang > span { display: block; height: 100%; background: var(--nila); }
.baris-form { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--garis); align-items: start; }
.baris-form > .segmen { justify-self: start; }
.sakelar { width: 46px; height: 28px; flex: none; border-radius: 14px; background: var(--garis-isian); position: relative; border: 0; }
.sakelar::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 10px; background: #FFFFFF; transition: left .12s; }
.sakelar[aria-checked="true"] { background: var(--nila); } .sakelar[aria-checked="true"]::after { left: 22px; }
.sakelar:disabled { opacity: .5; cursor: not-allowed; }
.snack { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); min-height: 48px; padding: 6px 8px 6px 18px; border-radius: 12px; background: var(--snack-bg); color: var(--snack-fg); display: flex; align-items: center; gap: 14px; font-size: 14px; box-shadow: 0 8px 24px var(--bayang); z-index: 40; max-width: min(760px, calc(100% - 32px)); }
.snack button { min-height: 36px; padding: 0 10px; border: 0; background: transparent; color: inherit; font-weight: 700; text-decoration: underline; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.row { display: flex; align-items: center; } .col { display: flex; flex-direction: column; } .sb { justify-content: space-between; } .je { justify-content: flex-end; } .ai-s { align-items: flex-start; } .ai-b { align-items: baseline; } .wrap { flex-wrap: wrap; } .grow { flex: 1; min-width: 0; }
.g2 { gap: 2px; } .g4 { gap: 4px; } .g6 { gap: 6px; } .g8 { gap: 8px; } .g10 { gap: 10px; } .g12 { gap: 12px; } .g14 { gap: 14px; } .g16 { gap: 16px; } .g20 { gap: 20px; } .g24 { gap: 24px; }
.t12 { font-size: 12px; } .t13 { font-size: 13px; } .t14 { font-size: 14px; } .t15 { font-size: 15px; } .t16 { font-size: 16px; } .t18 { font-size: 18px; } .t20 { font-size: 20px; } .t22 { font-size: 22px; }
.b6 { font-weight: 600; } .b7 { font-weight: 700; } .b8 { font-weight: 800; } .redam { color: var(--teks2); } .lh { line-height: 1.5; } .c-galat { color: var(--galat); } .c-ok { color: var(--ok); } .c-nila { color: var(--nila-teks); } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mt24 { margin-top: 24px; } .mb14 { margin-bottom: 14px; } .maks720 { max-width: 720px; }
.nowrap { white-space: nowrap; } .mono { font-family: "IBM Plex Mono", Consolas, monospace; }
.garis-atas { padding-top: 10px; border-top: 1px solid var(--garis); }
.judul-kecil { font-size: 13px; font-weight: 700; color: var(--teks2); letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Pilihan rentang tanggal ---------- */
.rentang { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rentang .isian { min-height: 36px; padding: 0 8px; }
.rentang .isian input { height: 34px; font-size: 14px; }

/* ---------- Layar masuk ---------- */
.masuk { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; }
.masuk-kartu { width: 440px; max-width: 100%; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 12px 40px var(--bayang); }
.akun-contoh { display: flex; flex-direction: column; gap: 8px; }
.akun-contoh button { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 6px 12px; border: 1px solid var(--garis); border-radius: 10px; background: var(--latar); text-align: left; }
.akun-contoh button[aria-pressed="true"] { border: 2px solid var(--nila-teks); }

/* ---------- Alat uji ---------- */
.alat-uji { position: fixed; top: 72px; right: 16px; width: 400px; max-width: calc(100% - 32px); max-height: calc(100% - 96px); overflow-y: auto; background: var(--permukaan); border: 2px dashed var(--uji); border-radius: 14px; box-shadow: 0 16px 40px var(--bayang); padding: 18px; display: flex; flex-direction: column; gap: 14px; z-index: 35; }
.alat-uji h2 { font-size: 17px; font-weight: 800; color: var(--uji); }
.alat-uji .bagian { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--garis); }

/* ---------- Penyusun laporan ---------- */
.batang-nilai { height: 8px; border-radius: 4px; background: var(--nila); min-width: 2px; }

/* Panel rincian di kanan tidak menutupi tabel di layar lebar */
@media (min-width: 1181px) { .utama:has(.panel-samping) { padding-right: 472px; } }

/* ---------- Layar sempit (tablet, ponsel) ---------- */
@media (max-width: 1180px) {
  .bo { grid-template-columns: minmax(0, 1fr); }
  .sisi { position: fixed; top: 64px; left: 0; bottom: 0; width: 280px; z-index: 25; box-shadow: 10px 0 30px var(--bayang); transform: translateX(-105%); transition: transform .15s; }
  .bo.sisi-buka .sisi { transform: none; }
  .hanya-sempit { display: inline-flex; }
  .merek { width: auto; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .utama { padding: 20px 20px 48px; }
  .sembunyi-sempit { display: none !important; }
}
@media (max-width: 760px) {
  .bilah { padding: 0 12px; gap: 8px; }
  .merek span.nama-merek { display: none; }
  .grid4, .grid3, .grid2 { grid-template-columns: minmax(0, 1fr); }
  .utama { padding: 16px 16px 48px; }
  .baris-form { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .kepala h1 { font-size: 22px; }
  .stempel { padding: 6px 10px; font-size: 13px; }
  .sembunyi-ponsel { display: none !important; }
  .peringatan { flex-wrap: wrap; }
}
@media print {
  .sisi, .bilah, .snack, .chip.uji, .alat-uji { display: none !important; }
  .bo { display: block; height: auto; } .utama { overflow: visible; padding: 0; } .app { height: auto; }
}