/* Font statis (bukan variabel). Inter 4.000 (SIL OFL 1.1) dan DejaVu Sans Mono.
   Hanya bobot 400, 500, 600, 700, 800 yang tersedia; jangan memakai Inter variabel. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/build/assets/Inter-Regular-C44Ouqbe.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/build/assets/Inter-Medium-DwyA85qH.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/build/assets/Inter-SemiBold-B_OTHXY-.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/build/assets/Inter-Bold-BNuDGHAq.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/build/assets/Inter-ExtraBold-Bae4Nyr8.woff2") format("woff2"); }
@font-face { font-family: "DejaVu Sans Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/build/assets/DejaVuSansMono-Regular-CNvMQWtq.woff2") format("woff2"); }
@font-face { font-family: "DejaVu Sans Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/build/assets/DejaVuSansMono-Bold-BYFWq2yV.woff2") format("woff2"); }
/* =====================================================================
   app.css — sumber kebenaran tampilan Polisi Peduli Pengangguran (v2.1)
   Dipakai apa adanya oleh aplikasi Vue. Jangan mengubah nilai; tambahkan
   aturan baru di berkas lain bila perlu. Akar aplikasi wajib berkelas .ax
   (container query 'app'): HP < 600 px, tablet 600–1023 px, desktop >= 1024 px.
   ===================================================================== */

/* ---------- Ikon & pin anotasi ---------- */
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex: none; }
.ic.s { width: 16px; height: 16px; } .ic.xs { width: 13px; height: 13px; } .ic.l { width: 24px; height: 24px; } .ic.xl { width: 30px; height: 30px; }
.rel { position: relative; }

/* ---------- Akar aplikasi & token desain ---------- */
.ax { container: app / inline-size; flex: 1; min-height: 0; position: relative; overflow: hidden; background: #f2f4f8; color: #18212d;
  font-family: Inter, sans-serif; font-feature-settings: "calt" 0; -webkit-font-smoothing: antialiased; line-height: 1.42; font-size: 15px; }
.ax * { box-sizing: border-box; }
.ax .sh {
  --n9: #0f2547; --n8: #163464; --n7: #1f4489; --n6: #2c57a8; --n2: #d6e2f5; --n1: #e9eff9; --n0: #f4f7fc;
  --y5: #ffd400; --y1: #fff6cc; --r6: #c9242c; --r1: #fde8e7; --g6: #0f7f45; --g1: #e2f3e9; --o6: #a35f00; --o1: #fdf0d9;
  --vio: #5b3db0; --vio1: #eeeafb; --teal: #0f6e69; --teal1: #ddf2f0; --sky: #1d64b8; --sky1: #e4eefa;
  --ink: #18212d; --ink2: #3b4655; --mut: #6a7586; --line: #e1e6ee; --bg: #f2f4f8;
  --t-xs: 12px; --t-sm: 13.5px; --t-md: 15px; --t-lg: 17px; --t-xl: 20px; --t-2x: 26px;
  --h: 46px; --hs: 36px; --pad: 14px; --gap: 12px; --r: 14px;
  height: 100%; display: flex; flex-direction: column; font-size: var(--t-md); min-height: 0; }
@container app (width >= 600px) { .ax .sh { --pad: 20px; --gap: 14px; } }
@container app (width >= 1024px) {
  .ax .sh { --t-xs: 11.5px; --t-sm: 13px; --t-md: 14px; --t-lg: 16px; --t-xl: 19px; --t-2x: 24px; --h: 38px; --hs: 31px; --pad: 22px; --gap: 14px; --r: 12px; }
}
/* tampil/sembunyi per ukuran */
@container app (width < 600px) { .ax .x-h { display: none !important; } }
@container app (600px <= width < 1024px) { .ax .x-t { display: none !important; } }
@container app (width >= 1024px) { .ax .x-d { display: none !important; } }

/* ---------- Kerangka: navigasi samping, bilah atas, isi, navigasi bawah ---------- */
.ax .nav { display: none; }
.ax .mn { flex: 1; min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.ax .ct { flex: 1; min-height: 0; overflow: hidden; padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); }
@container app (width >= 600px) {
  .ax .sh.nv { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ax .nav { display: flex; flex-direction: column; gap: 4px; background: #0f2547; color: #c3cfe1; padding: 14px 8px; min-height: 0; overflow: hidden; }
  .ax .nav .br { display: flex; justify-content: center; padding: 0 0 14px; margin-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
  .ax .nav .br img { width: 40px; height: auto; }
  .ax .nav .br .bt, .ax .nav .ng, .ax .nav .me .tx { display: none; }
  .ax .nav .ni { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px; border-radius: 10px; font-size: 11px; line-height: 1.2; text-align: center; color: #c3cfe1; }
  .ax .nav .ni.on { background: rgba(255,255,255,.13); color: #fff; font-weight: 700; }
  .ax .nav .ni.on::before { content: ""; position: absolute; left: -8px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: #ffd400; }
  .ax .nav .ni em { position: absolute; top: 4px; right: 12px; font-style: normal; background: #d7262e; color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 16px; }
  .ax .nav .me { margin-top: auto; display: flex; justify-content: center; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); }
  .ax .nav .me .av { background: #ffd400; color: #0f2547; }
}
@container app (width >= 1024px) {
  .ax .sh.nv { grid-template-columns: 248px minmax(0, 1fr); }
  .ax .nav { padding: 16px 12px; gap: 2px; }
  .ax .nav .br { justify-content: flex-start; align-items: center; gap: 11px; padding: 0 4px 14px; }
  .ax .nav .br img { width: 38px; }
  .ax .nav .br .bt { display: block; }
  .ax .nav .br .bt b { display: block; color: #fff; font-size: 13.5px; line-height: 1.2; }
  .ax .nav .br .bt span { font-size: 11px; color: #9fb0c6; }
  .ax .nav .ni { flex-direction: row; gap: 11px; padding: 9px 11px; font-size: 13.5px; text-align: left; }
  .ax .nav .ni.on::before { left: -12px; }
  .ax .nav .ni em { position: static; margin-left: auto; font-size: 10.5px; padding: 0 7px; line-height: 18px; }
  .ax .nav .ng { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #7f92ab; padding: 14px 11px 5px; }
  .ax .nav .me { justify-content: flex-start; gap: 10px; align-items: center; padding: 12px 4px 0; }
  .ax .nav .me .tx { display: block; font-size: 11px; color: #9fb0c6; line-height: 1.3; }
  .ax .nav .me .tx b { display: block; color: #fff; font-size: 12.5px; }
}

/* bilah atas operator/pimpinan: HP biru tua, tablet & desktop putih */
.ax .tb { flex: none; display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 8px var(--pad); background: #163464; color: #fff; position: relative; }
.ax .tb .lg { height: 32px; width: auto; }
.ax .tb .tt { min-width: 0; }
.ax .tb .pt { font-size: var(--t-lg); font-weight: 700; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .tb .ps { font-size: var(--t-xs); color: #b9c8dc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .tb .sp { flex: 1; }
.ax .tb .ib { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: inherit; position: relative; flex: none; }
.ax .tb .ib em { position: absolute; top: 3px; right: 3px; font-style: normal; background: #d7262e; color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 16px; }
.ax .tb .ta { display: flex; gap: 8px; align-items: center; }
.ax .tb .btn.tbh { background: rgba(255,255,255,.12); border-color: transparent; color: #fff; }
@container app (width >= 600px) {
  .ax .tb { background: #fff; color: #18212d; border-bottom: 1px solid #e1e6ee; min-height: 64px; }
  .ax .tb .pt { color: #163464; font-size: var(--t-xl); }
  .ax .tb .ps { color: #6a7586; }
  .ax .tb .lg, .ax .tb .hb { display: none; }
  .ax .tb .btn.tbh { background: #fff; border-color: #1f4489; color: #1f4489; }
}

/* bilah aplikasi Bhabin (biru tua di semua ukuran) */
.ax .ab { flex: none; background: #163464; color: #fff; padding: 10px var(--pad) 14px; display: flex; align-items: center; gap: 10px; position: relative; }
.ax .ab .tt { flex: 1; min-width: 0; }
.ax .ab .pt { font-size: var(--t-lg); font-weight: 700; line-height: 1.25; }
.ax .ab .ps { font-size: var(--t-xs); color: #b9c8dc; }
.ax .ab .ib { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); position: relative; flex: none; }
.ax .ab .ib em { position: absolute; top: 2px; right: 2px; font-style: normal; background: #d7262e; color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 16px; }
.ax .ab .lg { height: 34px; }

/* navigasi bawah (HP) */
.ax .bn { flex: none; display: flex; height: 66px; background: #fff; border-top: 1px solid #e1e6ee; padding: 0 4px 10px; position: relative; }
.ax .bn a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11.5px; color: #6a7586; position: relative; }
.ax .bn a.on { color: #1f4489; font-weight: 700; }
.ax .bn a.on::before { content: ""; position: absolute; top: 0; left: 26%; right: 26%; height: 3px; border-radius: 0 0 3px 3px; background: #1f4489; }
.ax .bn a em { position: absolute; top: 4px; left: 54%; font-style: normal; background: #d7262e; color: #fff; font-size: 10px; font-weight: 700; border-radius: 9px; padding: 0 5px; line-height: 16px; }
.ax .bn a.fab .fb { width: 50px; height: 50px; border-radius: 16px; background: #1f4489; color: #fff; display: flex; align-items: center; justify-content: center; margin-top: -24px; box-shadow: 0 6px 14px rgba(31,68,137,.35); }
@container app (width >= 600px) { .ax .bn { display: none; } }

/* ---------- Grid ---------- */
.ax .ag2, .ax .ag3, .ax .agm, .ax .ags, .ax .agk { display: grid; gap: var(--gap); min-width: 0; }
.ax .ag2, .ax .ag3, .ax .agm, .ax .ags { grid-template-columns: minmax(0, 1fr); }
.ax .agk { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container app (width >= 600px) {
  .ax .ag2, .ax .ag3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ax .agk { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ax .agk.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ax .agm.t2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container app (width >= 1024px) {
  .ax .ag3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ax .agk { grid-template-columns: repeat(var(--k, 6), minmax(0, 1fr)); }
  .ax .agm, .ax .agm.t2 { grid-template-columns: minmax(0, 1fr) var(--side, 360px); }
  .ax .ags { grid-template-columns: var(--side, 264px) minmax(0, 1fr); }
}
.ax .row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ax .row.w { flex-wrap: wrap; }
.ax .col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
.ax .sp { flex: 1; }
.ax .mut { color: #6a7586; }
.ax .nw { white-space: nowrap; }
.ax .grow { flex: 1; min-width: 0; }

/* ---------- Kartu, angka utama ---------- */
.ax .cd { background: #fff; border: 1px solid #e1e6ee; border-radius: var(--r); padding: 14px; position: relative; min-width: 0; }
.ax .cd.tight { padding: 10px 14px; }
.ax .cdh { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; min-width: 0; }
.ax .cdt { font-size: var(--t-md); font-weight: 700; color: #163464; white-space: nowrap; }
.ax .cds { font-size: var(--t-xs); color: #6a7586; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .lnk { font-size: var(--t-sm); color: #2c57a8; font-weight: 700; white-space: nowrap; display: inline-flex; align-items: center; gap: 3px; }
.ax .kpi { background: #fff; border: 1px solid #e1e6ee; border-radius: var(--r); padding: 11px 13px; position: relative; min-width: 0; }
.ax .kpi .kl { font-size: var(--t-xs); color: #6a7586; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.ax .kpi .kv { font-size: var(--t-2x); font-weight: 800; color: #163464; letter-spacing: -.015em; line-height: 1.18; white-space: nowrap; }
.ax .kpi .kv small { font-size: .55em; font-weight: 700; color: #6a7586; letter-spacing: 0; }
.ax .kpi .kd { font-size: var(--t-xs); color: #6a7586; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .kpi .kd.up { color: #0f7f45; font-weight: 700; }
.ax .kpi .kd.dn { color: #c9242c; font-weight: 700; }
.ax .kpi .ki { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: #e9eff9; color: #1f4489; flex: none; }
.ax .kpi.hl { background: #163464; border-color: #163464; }
.ax .kpi.hl .kl, .ax .kpi.hl .kd { color: #c6d3e6; }
.ax .kpi.hl .kv { color: #fff; }
.ax .kpi.hl .kd.up { color: #8fe0b2; }

/* ---------- Tombol ---------- */
.ax .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: var(--h); padding: 0 16px; border-radius: 11px; font-size: var(--t-sm); font-weight: 700; border: 1.5px solid #1f4489; color: #1f4489; background: #fff; white-space: nowrap; flex: none; }
.ax .btn.p { background: #1f4489; color: #fff; }
.ax .btn.ok { background: #0f7f45; border-color: #0f7f45; color: #fff; }
.ax .btn.dg { border-color: #c9242c; color: #c9242c; }
.ax .btn.gh { border-color: transparent; background: transparent; padding: 0 8px; }
.ax .btn.y { background: #ffd400; border-color: #ffd400; color: #18212d; }
.ax .btn.sm { height: var(--hs); padding: 0 12px; font-size: var(--t-xs); border-radius: 9px; }
.ax .btn.bl { display: flex; width: 100%; }
.ax .btn.dis { opacity: .45; }
@container app (width < 600px) { .ax .btn .lh { display: none; } .ax .btn.icm { padding: 0; width: var(--h); } .ax .btn.sm.icm { width: var(--hs); } }

/* ---------- Lencana status ---------- */
.ax .bdg { display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 9px; border-radius: 12px; font-size: 11.5px; font-weight: 700; white-space: nowrap; background: #eceff3; color: #4a5565; flex: none; }
.ax .bdg.s-draf { background: #eceff3; color: #4a5565; }
.ax .bdg.s-tunggu { background: #e4eefa; color: #1d64b8; }
.ax .bdg.s-kembali { background: #fdf0d9; color: #8a5508; }
.ax .bdg.s-belum { background: #edf1f6; color: #3b4f6b; }
.ax .bdg.s-cocok { background: #eeeafb; color: #5b3db0; }
.ax .bdg.s-rujuk { background: #ddf2f0; color: #0f6e69; }
.ax .bdg.s-panggil { background: #fff1c2; color: #7a5300; }
.ax .bdg.s-terima { background: #e2f3e9; color: #0f7f45; }
.ax .bdg.s-kerja { background: #0f7f45; color: #fff; }
.ax .bdg.s-tolak { background: #fde8e7; color: #b42e24; }
.ax .bdg.s-henti { background: #f3e9e8; color: #7d3a33; }
.ax .bdg.s-sis { background: #eef0f3; color: #9b2c24; }
.ax .bdg.red { background: #fde8e7; color: #b42e24; } .ax .bdg.amb { background: #fdf0d9; color: #8a5508; } .ax .bdg.grn { background: #e2f3e9; color: #0f7f45; }
.ax .bdg.blu { background: #e4eefa; color: #1d64b8; } .ax .bdg.nv { background: #1f4489; color: #fff; } .ax .bdg.yl { background: #ffd400; color: #18212d; }
.ax .bdg.ol { background: #fff; border: 1.3px solid #cdd5df; color: #3b4655; }

/* ---------- Isian ---------- */
.ax .fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; }
.ax .fld > label { font-size: var(--t-xs); font-weight: 700; color: #3b4655; display: flex; gap: 6px; align-items: center; }
.ax .fld > label i { color: #c9242c; font-style: normal; }
.ax .fld > label .ok { color: #0f7f45; font-weight: 600; margin-left: auto; display: inline-flex; align-items: center; gap: 3px; }
.ax .in { height: var(--h); border: 1.5px solid #cdd5df; border-radius: 10px; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: var(--t-sm); color: #18212d; min-width: 0; white-space: nowrap; overflow: hidden; }
.ax .in > span.v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ax .in.ph { color: #97a2b1; }
.ax .in.ok { border-color: #0f7f45; background: #f3fbf6; }
.ax .in.err { border-color: #c9242c; background: #fff6f6; }
.ax .in.ro { background: #f1f4f7; color: #3b4655; }
.ax .in.foc { border-color: #1f4489; box-shadow: 0 0 0 3px #d6e2f5; }
.ax .in.ta { height: auto; min-height: 92px; align-items: flex-start; padding: 10px 12px; white-space: normal; line-height: 1.45; }
.ax .hint { font-size: var(--t-xs); color: #6a7586; line-height: 1.35; }
.ax .hint.ok { color: #0f7f45; } .ax .hint.err { color: #c9242c; }
.ax .srch { height: var(--h); border: 1.5px solid #cdd5df; border-radius: 11px; background: #fff; display: flex; align-items: center; gap: 8px; padding: 0 12px; font-size: var(--t-sm); color: #97a2b1; min-width: 0; white-space: nowrap; overflow: hidden; }
.ax .sel { height: var(--hs); border: 1.5px solid #cdd5df; border-radius: 9px; background: #fff; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; font-size: var(--t-xs); color: #3b4655; white-space: nowrap; flex: none; }
.ax .tg { width: 44px; height: 26px; border-radius: 13px; background: #c9d2dd; position: relative; flex: none; }
.ax .tg::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ax .tg.on { background: #0f7f45; }
.ax .tg.on::after { left: 21px; }
.ax .tg.mx { background: #a35f00; }
.ax .tg.mx::after { left: 12px; }
.ax .tg.lk { opacity: .5; }
.ax .seg { display: inline-flex; border: 1.5px solid #cdd5df; border-radius: 9px; overflow: hidden; background: #fff; flex: none; }
.ax .seg span { padding: 0 11px; height: calc(var(--hs) - 3px); display: flex; align-items: center; font-size: var(--t-xs); color: #3b4655; border-right: 1px solid #e3e8ef; white-space: nowrap; }
.ax .seg span:last-child { border-right: 0; }
.ax .seg span.on { background: #1f4489; color: #fff; font-weight: 700; }
.ax .seg span.on.tw { background: #e9eff9; color: #1f4489; }
.ax .cb { width: 20px; height: 20px; border-radius: 6px; border: 1.8px solid #1f4489; flex: none; display: inline-flex; align-items: center; justify-content: center; background: #fff; }
.ax .cb.on { background: #1f4489; color: #fff; }
.ax .rb { width: 20px; height: 20px; border-radius: 50%; border: 1.8px solid #9aa6b5; flex: none; position: relative; background: #fff; }
.ax .rb.on { border-color: #1f4489; }
.ax .rb.on::after { content: ""; position: absolute; inset: 3.5px; border-radius: 50%; background: #1f4489; }
.ax .chips { display: flex; gap: 7px; flex-wrap: wrap; min-width: 0; }
.ax .chips.nw { flex-wrap: nowrap; overflow: hidden; }
.ax .chip { height: 34px; padding: 0 13px; border-radius: 17px; border: 1.5px solid #cdd5df; display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: #3b4655; background: #fff; white-space: nowrap; flex: none; }
.ax .chip.on { background: #1f4489; border-color: #1f4489; color: #fff; font-weight: 700; }
.ax .chip em { font-style: normal; font-size: 11px; background: rgba(15,37,71,.07); border-radius: 9px; padding: 0 6px; line-height: 17px; }
.ax .chip.on em { background: rgba(255,255,255,.22); }
.ax .chip.sk { background: #f4f7fc; border-color: #d6e2f5; color: #163464; }
@container app (width >= 1024px) { .ax .chip { height: 30px; padding: 0 11px; } }

/* ---------- Daftar, spanduk, linimasa ---------- */
.ax .ls { display: flex; flex-direction: column; min-width: 0; }
.ax .lr { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid #edf0f4; min-width: 0; position: relative; }
.ax .lr:last-child { border-bottom: 0; }
.ax .lr .tx { flex: 1; min-width: 0; }
.ax .lr .nm { font-weight: 700; font-size: var(--t-sm); color: #18212d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .lr .ds { font-size: var(--t-xs); color: #6a7586; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .lr .ds.wr { white-space: normal; }
.ax .av { width: 38px; height: 38px; border-radius: 50%; background: #e9eff9; color: #1f4489; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.ax .av.sm { width: 30px; height: 30px; font-size: 11px; }
.ax .ban { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 10px 12px; font-size: var(--t-xs); line-height: 1.42; position: relative; }
.ax .ban b { font-weight: 700; }
.ax .ban.i { background: #e4eefa; color: #14467f; } .ax .ban.w { background: #fdf0d9; color: #6f4405; } .ax .ban.ok { background: #e2f3e9; color: #135d36; } .ax .ban.er { background: #fde8e7; color: #8f1f24; }
.ax .ban.nv { background: #163464; color: #fff; }
.ax .tl { display: flex; flex-direction: column; }
.ax .tl .ti { display: grid; grid-template-columns: 24px 1fr; gap: 10px; position: relative; padding-bottom: 12px; }
.ax .tl .ti::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: #dbe2eb; }
.ax .tl .ti:last-child::before { display: none; }
.ax .tl .ti.dn::before { background: #9fd3b6; }
.ax .tl .dot { width: 24px; height: 24px; border-radius: 50%; background: #dbe2eb; display: flex; align-items: center; justify-content: center; color: #fff; }
.ax .tl .dn .dot { background: #0f7f45; }
.ax .tl .cu .dot { background: #a35f00; box-shadow: 0 0 0 4px #fdf0d9; }
.ax .tl .h { font-size: var(--t-sm); font-weight: 700; color: #18212d; }
.ax .tl .d { font-size: var(--t-xs); color: #6a7586; }
.ax .tl .nx .h { color: #97a2b1; font-weight: 600; }

/* ---------- Angka & grafik sederhana ---------- */
.ax .bar { height: 10px; border-radius: 5px; background: #e8ecf2; overflow: hidden; position: relative; }
.ax .bar i { display: block; height: 100%; background: #2c57a8; border-radius: 0 5px 5px 0; min-width: 3px; }
.ax .bar.g i { background: #0f7f45; } .ax .bar.a i { background: #d08a12; } .ax .bar.r i { background: #c9242c; } .ax .bar.l i { background: #9bbbe0; } .ax .bar.y i { background: #f2b705; }
.ax .fun .fr { display: grid; grid-template-columns: var(--fl, 132px) minmax(0, 1fr) 54px; gap: 9px; align-items: center; height: 27px; font-size: var(--t-xs); color: #3b4655; }
.ax .fun .fr b { text-align: right; font-weight: 700; color: #163464; font-size: var(--t-sm); }
.ax .fun .fr .bar { height: 12px; }
.ax .vbs { display: flex; align-items: flex-end; gap: 12px; height: 118px; padding: 0 4px; border-bottom: 1px solid #dbe1e8; }
.ax .vbs .vb { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; font-size: var(--t-xs); font-weight: 700; color: #163464; height: 100%; }
.ax .vbs .vb i { display: block; width: 100%; max-width: 46px; background: #2c57a8; border-radius: 5px 5px 0 0; }
.ax .vbs .vb.p i { background: #9bbbe0; }
.ax .vlb { display: flex; gap: 12px; padding: 5px 4px 0; font-size: var(--t-xs); color: #6a7586; }
.ax .vlb span { flex: 1; text-align: center; white-space: nowrap; }
.ax .hb2 { display: grid; grid-template-columns: var(--hl, 150px) minmax(0, 1fr) 46px; gap: 9px; align-items: center; min-height: 26px; font-size: var(--t-xs); color: #18212d; }
.ax .hb2 b { text-align: right; color: #163464; font-weight: 700; }
.ax .hb2 .bar { height: 9px; }
.ax .dots { display: inline-flex; gap: 3px; align-items: center; }
.ax .dots i { width: 9px; height: 9px; border-radius: 50%; background: #dbe2eb; display: block; }
.ax .dots i.on { background: #0f7f45; }
.ax .dots b { margin-left: 5px; font-size: var(--t-xs); color: #3b4655; font-weight: 700; }
.ax .ring { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; background: conic-gradient(#0f7f45 calc(var(--p) * 1%), #e3e8ef 0); position: relative; }
.ax .ring::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #fff; }
.ax .ring b { position: relative; z-index: 1; font-size: 13px; font-weight: 800; color: #163464; }

/* ---------- Tabel responsif: tabel di tablet/desktop, kartu di HP ---------- */
.ax .tw { background: #fff; border: 1px solid #e1e6ee; border-radius: var(--r); overflow: hidden; min-width: 0; position: relative; }
.ax table.rt { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.ax table.rt thead { display: none; }
.ax table.rt tr { display: block; padding: 11px 14px; border-bottom: 1px solid #e8ecf1; position: relative; }
.ax table.rt td { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 2px 0; font-size: var(--t-xs); color: #3b4655; min-width: 0; }
.ax table.rt td::before { content: attr(data-l); color: #8692a3; font-size: var(--t-xs); flex: none; }
.ax table.rt td.tt { font-size: var(--t-sm); font-weight: 700; color: #18212d; padding-bottom: 4px; }
.ax table.rt td.tt::before, .ax table.rt td.nl::before { content: none; }
.ax table.rt td.hx { display: none; }
.ax table.rt tr.on { background: #eef4fb; }
@container app (width >= 600px) {
  .ax table.rt thead { display: table-header-group; }
  .ax table.rt tr { display: table-row; padding: 0; }
  .ax table.rt td, .ax table.rt th { display: table-cell; padding: 10px 10px; border-bottom: 1px solid #edf0f4; vertical-align: middle; font-size: var(--t-xs); text-align: left; white-space: nowrap; }
  .ax table.rt td { color: #18212d; }
  .ax table.rt td::before { content: none; }
  .ax table.rt td.tt { font-size: var(--t-sm); padding-bottom: 10px; }
  .ax table.rt td.hx { display: table-cell; }
  .ax table.rt th { font-size: 11px; font-weight: 700; color: #6a7586; text-transform: uppercase; letter-spacing: .04em; background: #fafbfc; border-bottom: 1.5px solid #e1e6ee; }
  .ax table.rt th:first-child, .ax table.rt td:first-child { padding-left: 16px; }
  .ax table.rt th:last-child, .ax table.rt td:last-child { padding-right: 16px; }
  .ax table.rt .r { text-align: right; }
  .ax table.rt .c-d { display: none; }
  .ax table.rt td.wr { white-space: normal; }
}
@container app (width >= 1024px) { .ax table.rt .c-d { display: table-cell; } .ax table.rt td, .ax table.rt th { padding: 9px 10px; } }

/* ---------- Tab, langkah, potongan layar chat, tanda tangan ---------- */
.ax .tabs { display: flex; gap: 2px; border-bottom: 1px solid #e1e6ee; min-width: 0; overflow: hidden; }
.ax .tabs span { padding: 9px 12px; font-size: var(--t-sm); color: #6a7586; border-bottom: 3px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
.ax .tabs span.on { color: #163464; font-weight: 700; border-bottom-color: #1f4489; }
.ax .tabs span em { font-style: normal; font-size: 11px; background: #e9eff9; color: #1f4489; border-radius: 9px; padding: 0 7px; line-height: 18px; font-weight: 700; }
.ax .stp { display: flex; gap: 6px; align-items: center; }
.ax .stp .s { flex: 1; height: 5px; border-radius: 3px; background: #dbe1e8; }
.ax .stp .s.dn { background: #0f7f45; } .ax .stp .s.on { background: #1f4489; }
.ax .stl { display: flex; justify-content: space-between; font-size: 11px; color: #6a7586; margin-top: 5px; }
.ax .stl b { color: #163464; }
.ax .wa { border: 1.5px solid #cfd6df; border-radius: 12px; background: #ece5dd; padding: 9px 10px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ax .wa .ib { align-self: flex-start; max-width: 88%; background: #fff; border-radius: 0 9px 9px 9px; padding: 6px 9px; font-size: 11.5px; line-height: 1.4; color: #18212d; white-space: pre-line; }
.ax .wa .ob { align-self: flex-end; max-width: 88%; background: #dcf6cf; border-radius: 9px 0 9px 9px; padding: 6px 9px; font-size: 11.5px; line-height: 1.4; color: #18212d; white-space: pre-line; }
.ax .wa .tm { font-size: 9.5px; color: #6a7586; margin-left: 6px; }
.ax .wa .hd { font-size: 11px; font-weight: 700; color: #3b4655; display: flex; align-items: center; gap: 6px; }
.ax .sig { height: 112px; border: 1.5px dashed #a9b5c3; border-radius: 12px; background: #fff; position: relative; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px; font-size: 11.5px; color: #8692a3; }
.ax .thumb { border-radius: 12px; background: #dfe5ec; display: flex; align-items: center; justify-content: center; color: #6a7586; font-size: 12px; gap: 6px; position: relative; overflow: hidden; }
.ax .kv2 { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 6px 12px; font-size: var(--t-xs); }
.ax .kv2 .k { color: #6a7586; }
.ax .kv2 .v { color: #18212d; font-weight: 600; min-width: 0; }
.ax .sec-t { font-size: var(--t-xs); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #6a7586; }
.ax .divd { height: 1px; background: #e8ecf1; }
.ax .ck { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: #18212d; }
.ax .ck .ic { width: 16px; height: 16px; }
.ax .ck.y .ic { color: #0f7f45; } .ax .ck.n .ic { color: #c9242c; } .ax .ck.n { color: #6a7586; }
.ax .modal { position: absolute; z-index: 7; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgba(16,24,40,.28); border: 1px solid #d6dce4; padding: 16px; }
.ax .dim { position: absolute; inset: 0; background: rgba(15,24,40,.35); z-index: 6; }
.ax .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 7; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 30px rgba(16,24,40,.25); padding: 10px 16px 18px; }
.ax .sheet .grab { width: 42px; height: 5px; border-radius: 3px; background: #cfd6df; margin: 0 auto 12px; }
.ax .toast { position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); background: #18212d; color: #fff; border-radius: 12px; padding: 10px 14px; font-size: 12.5px; display: flex; gap: 8px; align-items: center; white-space: nowrap; box-shadow: 0 8px 20px rgba(0,0,0,.25); }

/* ---------- Kriteria posisi (O-04, O-05, W-02) ---------- */
.ax .crt { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid #edf0f4; font-size: var(--t-xs); min-width: 0; }
.ax .crt:last-child { border-bottom: 0; }
.ax .crt .f { font-weight: 700; color: #18212d; font-size: var(--t-sm); }
.ax .crt .c { color: #3b4655; }
.ax .crt .gr { color: #97a2b1; display: flex; }
@container app (600px <= width < 1024px) { .ax .crt { grid-template-columns: 22px minmax(0, 1fr) minmax(0, 1fr) auto; } }
@container app (width >= 1024px) { .ax .crt { grid-template-columns: 22px 170px minmax(0, 1fr) auto 26px; } }
.ax .req { display: flex; gap: 9px; align-items: flex-start; font-size: var(--t-sm); line-height: 1.4; padding: 5px 0; }
.ax .req .ic { margin-top: 1px; }
.ax .req.w .ic { color: #1f4489; } .ax .req.t .ic { color: #a35f00; }

/* ---------- Halaman warga (publik) ---------- */
.ax .pub { height: 100%; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.ax .ph { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px var(--pad); background: #fff; border-bottom: 1px solid #e1e6ee; }
.ax .ph img { height: 38px; width: auto; }
.ax .ph .bt b { display: block; font-size: var(--t-sm); font-weight: 800; color: #163464; line-height: 1.2; }
.ax .ph .bt span { font-size: 11px; color: #6a7586; }
.ax .ph .pn { display: none; }
@container app (width >= 1024px) {
  .ax .ph { padding: 12px 40px; }
  .ax .ph .pn { display: flex; gap: 26px; margin-left: auto; font-size: 13.5px; color: #3b4655; align-items: center; }
  .ax .ph .pn a.on { color: #1f4489; font-weight: 700; }
}
.ax .pbd { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.ax .hero { flex: none; background: linear-gradient(135deg, #163464 0%, #1f4489 100%); color: #fff; padding: 18px var(--pad) 20px; position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ax .hero h1 { font-size: 22px; line-height: 1.22; margin: 0; font-weight: 800; letter-spacing: -.01em; }
.ax .hero p { margin: 6px 0 0; font-size: var(--t-xs); line-height: 1.5; color: #d6e0ee; }
.ax .hero .il { display: none; }
.ax .hero .hs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 4px; }
.ax .hero .hs div { background: rgba(255,255,255,.1); border-radius: 12px; padding: 8px 10px; font-size: 11px; color: #c9d6e8; line-height: 1.3; }
.ax .hero .hs b { display: block; color: #fff; font-size: 19px; font-weight: 800; }
.ax .hero .tg2 { display: inline-flex; align-items: center; gap: 6px; background: #ffd400; color: #13305e; font-size: 11px; font-weight: 800; border-radius: 12px; padding: 3px 10px; letter-spacing: .02em; margin-bottom: 8px; }
@container app (width >= 600px) {
  .ax .hero { grid-template-columns: minmax(0, 1fr) 300px; align-items: center; padding: 26px var(--pad) 26px; }
  .ax .hero h1 { font-size: 28px; }
  .ax .hero p { font-size: 14px; }
  .ax .hero .il { display: block; background: #fff; border-radius: 16px; padding: 4px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
  .ax .hero .il svg, .ax .hero .il img { display: block; width: 100%; height: auto; border-radius: 12px; }
}
@container app (width >= 1024px) {
  .ax .hero { grid-template-columns: minmax(0, 1fr) 360px; padding: 24px 40px; gap: 40px; }
  .ax .hero h1 { font-size: 30px; }
  .ax .hero .hs { max-width: 560px; }
}
.ax .pct { flex: 1; min-height: 0; overflow: hidden; padding: var(--pad); display: flex; flex-direction: column; gap: var(--gap); }
@container app (width >= 1024px) { .ax .pct { padding: 22px 40px; } }
.ax .jg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@container app (width >= 600px) { .ax .jg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.ax .job { background: #fff; border: 1px solid #e1e6ee; border-radius: 14px; padding: 13px 14px; display: flex; flex-direction: column; gap: 7px; position: relative; min-width: 0; }
.ax .job .jt { font-size: var(--t-md); font-weight: 800; color: #163464; line-height: 1.25; }
.ax .job .jc { font-size: var(--t-xs); color: #3b4655; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .job .jm { display: flex; gap: 6px; flex-wrap: wrap; }
.ax .job .jf { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #edf0f4; padding-top: 8px; font-size: var(--t-xs); color: #6a7586; }
.ax .job .jf b { color: #c9242c; font-weight: 700; }
.ax .job .code { font-family: "DejaVu Sans Mono", monospace; font-size: 12.5px; color: #1f4489; background: #e9eff9; border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.ax .fp { display: none; }
@container app (width >= 1024px) { .ax .fp { display: flex; flex-direction: column; gap: 12px; } }
.ax .pfoot { flex: none; background: #0f2547; color: #c3cfe1; padding: 10px var(--pad); font-size: 11px; display: flex; align-items: center; gap: 10px; }
.ax .pfoot img { height: 26px; }

.ax .icl { display: flex; align-items: center; gap: 6px; font-size: var(--t-sm); color: #3b4655; min-width: 0; }

/* ---------- Bilah aksi bawah, urutan khusus HP, kartu tugas ---------- */
.ax .fb2 { flex: none; display: flex; gap: 10px; padding: 10px var(--pad) 22px; background: #fff; border-top: 1px solid #e1e6ee; position: relative; }
.ax .fb2 .btn { flex: 1; }
@container app (width >= 600px) { .ax .fb2 { justify-content: flex-end; padding: 12px var(--pad); } .ax .fb2 .btn { flex: none; min-width: 170px; } .ax .fb2 .fbx { margin-right: auto; } }
@container app (width < 600px) { .ax .o-hp1 { order: -1; } .ax .o-hp2 { order: 2; } .ax .fb2 .fbx { display: none; } }
.ax .task { background: #fff; border: 1px solid #e1e6ee; border-left: 4px solid #d08a12; border-radius: 12px; padding: 12px 13px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.ax .task.r { border-left-color: #c9242c; } .ax .task.g { border-left-color: #0f7f45; } .ax .task.b { border-left-color: #1f4489; }
.ax .task .th { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: #6a7586; }
.ax .task .tt2 { font-size: var(--t-sm); font-weight: 700; color: #18212d; }
.ax .task .tx2 { font-size: var(--t-xs); color: #3b4655; line-height: 1.45; }
.ax .task .ta2 { display: flex; gap: 8px; margin-top: 2px; }
.ax .task .ta2 .btn { flex: 1; }
.ax .fsec { font-size: var(--t-sm); font-weight: 700; color: #163464; display: flex; align-items: center; gap: 8px; margin: 2px 0 -2px; }
.ax .fsec .fs2 { font-size: var(--t-xs); color: #6a7586; font-weight: 500; }
.ax .mono { font-family: "DejaVu Sans Mono", monospace; font-size: 11.5px; }
.ax .hero2 { background: linear-gradient(160deg, #163464 0%, #1f4489 70%); color: #fff; padding: 22px var(--pad) 26px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; position: relative; }
.ax .hero2 img { height: 92px; }
.ax .hero2 b { font-size: 19px; font-weight: 800; }
.ax .hero2 span { font-size: 12px; color: #c9d6e8; }
.ax .hero2 .tg2 { display: inline-flex; align-items: center; gap: 6px; background: #ffd400; color: #13305e; font-size: 11px; font-weight: 800; border-radius: 12px; padding: 3px 10px; margin-top: 4px; }
.ax a { color: inherit; text-decoration: none; }
.ax .a2x { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.ax .fold { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #e1e6ee; border-radius: 12px; padding: 10px 12px; position: relative; }
.ax .fold .tx { flex: 1; min-width: 0; }
.ax .fold .nm { font-size: var(--t-sm); font-weight: 700; color: #163464; }
.ax .fold .ds { font-size: var(--t-xs); color: #0f7f45; display: flex; align-items: center; gap: 4px; }

@container app (width < 600px) {
  .ax table.rt td.pk { position: absolute; right: 14px; top: 12px; padding: 0; }
  .ax table.rt td.pk::before { content: none; }
  .ax table.rt td.tt { padding-right: 34px; }
  .ax .tw.cards { background: transparent; border: 0; overflow: visible; }
  .ax .tw.cards table.rt tr { background: #fff; border: 1px solid #e1e6ee; border-radius: 14px; margin-bottom: 8px; }
  .ax .tw.cards table.rt tr.on { background: #eef4fb; border-color: #9fb9e3; }
}
.ax .flt { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-width: 0; }
.ax .flt .srch { flex: 1; min-width: 200px; height: var(--hs); }
.ax .red { color: #c9242c; font-weight: 700; } .ax .amb { color: #a35f00; font-weight: 700; } .ax .grn { color: #0f7f45; font-weight: 700; }
.ax .num { font-variant-numeric: tabular-nums; }
.ax .sumx { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.ax .sumx div { font-size: var(--t-xs); color: #6a7586; }
.ax .sumx b { display: block; font-size: var(--t-xl); color: #163464; font-weight: 800; }

@container app (width >= 600px) { .ax table.rt th { white-space: normal; line-height: 1.25; vertical-align: bottom; } }
.ax .crt.hd { padding: 0 0 6px; border-bottom: 1.5px solid #e1e6ee; font-size: 11px; font-weight: 700; color: #6a7586; text-transform: uppercase; letter-spacing: .04em; }
.ax .rk2 { display: grid; grid-template-columns: 18px 128px minmax(0, 1fr) 44px 64px; gap: 8px; align-items: center; height: 21px; font-size: var(--t-xs); color: #18212d; }
.ax .rk2 .n { color: #8692a3; text-align: right; font-size: 11px; }
.ax .rk2 .trk { height: 8px; background: #eef1f5; border-radius: 4px; position: relative; }
.ax .rk2 .trk i { position: absolute; left: 0; top: 0; bottom: 0; background: #2c57a8; border-radius: 4px; }
.ax .rk2 .trk u { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 1.5px dashed #b07d12; }
.ax .rk2.lo .trk i { background: #d08a12; }
.ax .rk2 b { text-align: right; color: #163464; font-weight: 700; }
.ax .rk2 em { font-style: normal; color: #8692a3; font-size: 11px; text-align: right; }
.ax .act { display: grid; grid-template-columns: 74px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid #edf0f4; }
.ax .act:last-child { border-bottom: 0; }
.ax .act .bdg { justify-content: center; }
.ax .act .nm { font-size: var(--t-xs); font-weight: 700; color: #18212d; }
.ax .act .ds { font-size: 11px; color: #6a7586; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ax .frow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 7px 0; border-bottom: 1px solid #edf0f4; position: relative; }
.ax .frow:last-child { border-bottom: 0; }
.ax .frow .nm { font-size: var(--t-sm); font-weight: 700; color: #18212d; }
.ax .frow .ds { font-size: var(--t-xs); color: #6a7586; line-height: 1.4; }
.ax .frow .sc { font-size: var(--t-xs); color: #3b4655; white-space: nowrap; text-align: right; }
.ax .frow.on { background: #eef4fb; margin: 0 -14px; padding: 7px 14px; border-radius: 10px; border-bottom-color: transparent; }
.ax .fgrp { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #163464; padding: 12px 0 2px; display: flex; align-items: center; gap: 8px; }
.ax .fgrp span { font-weight: 500; color: #6a7586; letter-spacing: 0; text-transform: none; }
.ax .cm { font-family: "DejaVu Sans Mono", monospace; font-size: 11.5px; color: #1f4489; background: #e9eff9; border-radius: 6px; padding: 1px 6px; }
@container app (600px <= width < 1024px) { .ax .span2t { grid-column: 1 / -1; } }
.ax .fgrp b { font-weight: 700; }

/* isi yang melebihi layar terpotong di bawah (seperti digulir), bukan dipadatkan */
.ax .ct > *, .ax .pct > *, .ax .col > *, .ax .pbd > * { flex-shrink: 0; }

/* angka utama ringkas 4 kolom di HP (beranda Bhabin) */
@container app (width < 600px) {
  .ax .agk.hp4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .ax .agk.hp4 .kpi { padding: 8px 8px 7px; }
  .ax .agk.hp4 .kpi .kl { white-space: normal; font-size: 11px; line-height: 1.22; height: 27px; overflow: hidden; }
  .ax .agk.hp4 .kpi .kv { font-size: 22px; }
  .ax .agk.hp4 .kpi .kd { display: none; }
}
.ax .lr .nm.wr { white-space: normal; }

/* tab dan chip satu baris bisa digeser di layar sentuh; bilah gulir disembunyikan */
.ax .tabs, .ax .chips.nw { overflow-x: auto; scrollbar-width: none; }
.ax .tabs::-webkit-scrollbar, .ax .chips.nw::-webkit-scrollbar { display: none; }
/* =====================================================================
   app-interaksi.css — tambahan untuk aplikasi nyata. Dimuat SETELAH app.css.
   Tidak mengubah tampilan diam: 32 layar acuan × 3 ukuran dirender ulang dengan
   pola kontrol di 02-PANDUAN-DESAIN.md bagian 12 dan dibandingkan per piksel;
   selisih terbesar 11/255 pada beberapa piksel tepi anti-aliasing (tidak terlihat).
   Periksa ulang setiap kali berkas ini diubah: node tests/visual/periksa-interaksi.mjs
   ===================================================================== */

/* 0. Area gulir: isi bergulir, bilah atas/menu/navigasi bawah/bilah aksi tetap (sama dengan reference/_prototype.css) */
.ax .ct, .ax .pbd { overflow-y: auto; scrollbar-width: none; }
.ax .ct::-webkit-scrollbar, .ax .pbd::-webkit-scrollbar { display: none; }
.ax .pbd > .pct { flex: none; overflow: visible; min-height: auto; }

/* 1. Reset elemen kontrol agar tampil sama dengan <span>/<div> di acuan */
.ax button, .ax input, .ax select, .ax textarea { font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; margin: 0; }
.ax button { background: transparent; border: 0; padding: 0; text-align: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ax input, .ax textarea { -webkit-appearance: none; appearance: none; border-radius: 0; }

/* 2. Isian: <input class="v">/<textarea class="v"> menggantikan <span class="v"> */
.ax .in, .ax .sel { position: relative; }
.ax .in > input.v, .ax .in > textarea.v, .ax .srch > input.v { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0; color: inherit; text-overflow: ellipsis; }
.ax .srch > input.v { text-overflow: clip; margin-right: -12px; } /* teks petunjuk terpotong di tepi kotak seperti acuan */
.ax .in.ta > textarea.v { resize: none; align-self: stretch; margin-bottom: -10px; } /* teks yang melebihi kotak terpotong di tepi bawah seperti acuan */
.ax .in > input.v::placeholder, .ax .in > textarea.v::placeholder, .ax .srch > input.v::placeholder { color: #97a2b1; opacity: 1; }
/* pilihan dan tanggal: tampilan acuan tetap, kontrol bawaan transparan menutupinya */
.ax .in > .ov, .ax .sel > .ov { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

/* 3. Fokus (sama dengan keadaan .foc di acuan) */
.ax .in:focus-within, .ax .srch:focus-within, .ax .sel:focus-within { border-color: #1f4489; box-shadow: 0 0 0 3px #d6e2f5; }
.ax :focus { outline: none; }
.ax .btn:focus-visible, .ax .chip:focus-visible, .ax .lnk:focus-visible, .ax [role="tab"]:focus-visible, .ax [role="radio"]:focus-visible,
.ax [role="checkbox"]:focus-visible, .ax [role="switch"]:focus-visible, .ax .lr[role="button"]:focus-visible, .ax table.rt tr[tabindex]:focus-visible,
.ax .ni:focus-visible, .ax .bn a:focus-visible, .ax .ib:focus-visible { box-shadow: 0 0 0 3px #d6e2f5; }

/* 4. Arahkan dan tekan (hanya perangkat dengan penunjuk) */
.ax .btn, .ax .chip, .ax .lnk, .ax .tg, .ax .cb, .ax .rb, .ax .seg span, .ax .tabs span, .ax .lr[role="button"], .ax table.rt tr[tabindex], .ax .ni, .ax .bn a, .ax .ib, .ax .act, .ax .job { cursor: pointer; }
@media (hover: hover) {
  .ax .btn:hover { filter: brightness(.95); }
  .ax .btn.p:hover { background: #1a3a75; border-color: #1a3a75; filter: none; }
  .ax .lr[role="button"]:hover, .ax table.rt tbody tr[tabindex]:hover, .ax .act:hover { background: #f7f9fc; }
  .ax table.rt tbody tr.on:hover { background: #eef4fb; }
  .ax .nav .ni:hover { background: rgba(255,255,255,.08); color: #fff; }
  .ax .lnk:hover { text-decoration: underline; }
}
.ax .btn:active { transform: translateY(1px); }
.ax .btn.dis, .ax .btn[disabled], .ax .btn[aria-disabled="true"] { pointer-events: none; }

/* 5. Area sentuh minimal 44×44 px di HP untuk kontrol kecil */
@container app (width < 600px) {
  .ax .btn.sm, .ax .tg, .ax .cb, .ax .rb { position: relative; }
  .ax .btn.sm::after, .ax .tb .ib::after, .ax .ab .ib::after, .ax .tg::before, .ax .cb::after, .ax .rb::before { content: ""; position: absolute; inset: -6px; }
}

/* 6. Lapisan: muncul dengan transisi opacity 150 ms. Toast = anak langsung .ax, di bawah tengah,
      di atas bilah aksi bawah (.fb2) dan navigasi bawah HP (.bn, tinggi 66 px) */
.ax .dim, .ax .modal, .ax .sheet, .ax .toast { transition: opacity .15s ease; }
.ax > .toast { bottom: 16px; }
.ax:has(.fb2) > .toast { bottom: 84px; }
@container app (width < 600px) { .ax:has(.bn) > .toast { bottom: 82px; } }

/* 7. Kotak tanda tangan (B-04, bila fitur aktif): goresan digambar di <svg class="ttd"> yang menutupi kotak */
.ax .sig { touch-action: none; }
.ax .sig > svg.ttd { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* 8. Cetak dashboard (tombol Cetak K-03) */
@media print {
  .ax { height: auto !important; overflow: visible !important; }
  .ax .nav, .ax .bn, .ax .tb .ta, .ax .fb2 { display: none !important; }
  .ax .sh, .ax .ct { height: auto !important; overflow: visible !important; }
}
/* Akar aplikasi (02-PANDUAN-DESAIN bagian 2): elemen akar setiap halaman adalah .ax yang memenuhi layar.
   Dimuat setelah fonts.css → app.css → app-interaksi.css.
   Kerangka dikunci ke layar yang terlihat (bukan 100dvh): di Android dengan viewport-fit=cover tinggi 100dvh ikut
   menghitung bilah status dan bilah navigasi sistem, sehingga dokumen bisa bergulir dan bilah atas atau navigasi
   bawah hilang (laporan pemilik 25 Okt 2026). Dokumen tidak pernah bergulir; yang bergulir hanya isi (.ct, .pbd).
   Area aman (poni, bilah gerak) diberi jarak; warnanya mengikuti bilah atas (atas) dan navigasi bawah (bawah). */
html, body { margin: 0; height: 100%; background: #f2f4f8; overflow: hidden; }
#app { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  background: linear-gradient(#163464 50%, #fff 50%); }
#app > .ax { flex: 1; min-height: 0; }

/* Profil dan tombol Keluar di menu samping. Acuan tidak menggambar Keluar di desktop; pemilik memintanya
   (25 Okt 2026, docs/PERTANYAAN.md). Profil membuka Akun/Profil sendiri; tombol Keluar hanya di desktop. */
.ax .nav .me .pf { display: flex; align-items: center; gap: 10px; min-width: 0; border-radius: 10px; }
.ax .nav .me .kl { display: none; }
@container app (width >= 1024px) {
  .ax .nav .me .kl { display: flex; flex: none; align-items: center; justify-content: center; width: 30px; height: 30px; margin-left: auto; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #9fb0c6; cursor: pointer; }
  .ax .nav .me .kl:hover, .ax .nav .me .kl:focus-visible { background: rgba(255,255,255,.12); color: #fff; }
}

/* Cetak (tombol Cetak dashboard K-03, juga Ctrl+P di layar lain): kertas A4 lanskap. Menu samping, navigasi bawah,
   dan tombol disembunyikan app-interaksi.css bagian 8; di sini isi memakai lebar kertas penuh (tata letak desktop),
   bukan kolom kedua grid menu samping, dan kartu tidak terpotong antarhalaman. */
@page { size: A4 landscape; margin: 8mm; }
@media print {
  html, body, #app { height: auto !important; background: #fff !important; overflow: visible !important; }
  #app { position: static !important; padding: 0 !important; }
  /* Latar kartu (misal angka utama berlatar biru tua) tetap tercetak walau "Grafik latar" di dialog cetak mati. */
  #app > .ax { flex: none; background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ax .ct .btn { display: none !important; }
  .ax .sh.nv, .ax .mn { display: block !important; }
  .ax .tb { padding-left: 0 !important; padding-right: 0 !important; }
  .ax .ct { padding: 10px 0 0 !important; }
  .ax .cd, .ax .kpi, .ax tr { break-inside: avoid; }
}

/* D-03 di desktop: papan angka, petunjuk, spanduk, dan tautan dalam satu kolom selebar papan angka di tengah
   (acuan menggambar spanduk selebar layar; pemilik meminta dirapikan, docs/PERTANYAAN.md). HP dan tablet tetap. */
@container app (width >= 1024px) {
  .ax .pin-kolom { width: 100%; max-width: 340px; margin: 8px auto 0; }
}

/* Tombol Masuk di kepala halaman publik, hanya saat dibuka sebagai aplikasi terpasang (pwa.ts modePwa) karena
   tidak ada kolom alamat: rata kanan; di desktop sesudah menu publik dengan jarak selebar jarak antartautannya. */
.ax .ph .masuk-pwa { margin-left: auto; flex: none; }
@container app (width >= 1024px) {
  .ax .ph .pn + .masuk-pwa { margin-left: 16px; }
}

/* Terminal proses pembaruan S-03 (permintaan pemilik, docs/PERTANYAAN.md): log pelaksana baris demi baris dengan
   jam, langkah, dan pesan; baris hasil hijau/merah; kursor berkedip selama proses berjalan. */
.ax .term { background: #0e1a2b; color: #d6e0ee; border-radius: 10px; padding: 10px 12px; font: 12px/1.6 'DejaVu Sans Mono', monospace; max-height: 300px; overflow: auto; }
.ax .term-b { display: grid; grid-template-columns: 62px 72px minmax(0, 1fr); gap: 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.ax .term-b .w { color: #7f8ea3; }
.ax .term-b .l { color: #ffd400; }
.ax .term-b.ok .p { color: #6ee7a8; font-weight: 700; }
.ax .term-b.gagal .p { color: #ff9b9b; font-weight: 700; }
.ax .term-kursor { display: inline-block; width: 7px; height: 13px; margin-left: 6px; vertical-align: -2px; background: #d6e0ee; animation: term-kedip 1s steps(1) infinite; }
@keyframes term-kedip { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ax .term-kursor { animation: none; } }
@container app (width < 600px) {
  .ax .term-b { grid-template-columns: 62px minmax(0, 1fr); }
  .ax .term-b .l { display: none; }
}

/* Gambar utama yang bisa diganti superadmin (komponen GambarUtama.vue, permintaan pemilik, docs/PERTANYAAN.md):
   beberapa gambar berganti dengan peralihan pudar; gerak perlahan (zoom) bila diaktifkan. Satu gambar tanpa gerak
   tetap <img> biasa seperti acuan. Tanpa peralihan dan gerak bila pengguna memilih gerak dikurangi. */
.ax .gu { position: relative; overflow: hidden; }
.ax .gu > img { opacity: 0; transition: opacity .8s ease; }
.ax .gu > img.on { opacity: 1; }
.ax .gu.gerak > img.on { animation: gu-gerak var(--gu-durasi, 6s) ease-out both; }
.ax .gu.gerak.satu > img.on { animation: gu-gerak-ulang 14s ease-in-out infinite alternate; }
@keyframes gu-gerak { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes gu-gerak-ulang { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) {
  .ax .gu > img { transition: none; }
  .ax .gu.gerak > img.on { animation: none; }
}