/* MTS E-Sign — identitas visual diturunkan dari logo Mitra Tujuh Samudra.
   Hull (navy lambung kapal) = struktur & aksi utama. Sea (biru gelombang) = informasi.
   Signal (oranye atap) hanya untuk "menunggu / giliran Anda". Starboard hijau = setuju,
   port merah = tolak. Nomor dokumen dibuat seperti pelat kontainer: huruf rapat,
   bagian urut diberi kotak seperti check digit. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  font-weight: 100 800; font-display: swap;
}

:root {
  --hull: #0B0A56;
  --hull-2: #16157A;
  --ink: #17193F;
  --ink-2: #4B5071;
  --ink-3: #7C8199;
  --deck: #EDF0F5;
  --surface: #FFFFFF;
  --sunk: #F6F8FB;
  --rule: #D8DDE7;
  --rule-2: #E8ECF2;
  --sea: #4499E0;
  --sea-ink: #1C62AE;
  --sea-bg: #E7F1FB;
  --signal: #ED6E31;
  --signal-ink: #A2400D;
  --signal-bg: #FDEEE4;
  --go: #0F7F58;
  --go-ink: #0A6646;
  --go-bg: #E2F3EB;
  --stop: #C42B3A;
  --stop-ink: #A11E2C;
  --stop-bg: #FBE8EA;
  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --nav-h: 64px;
  --rail-w: 264px;
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------- Dasar ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  background: var(--deck);
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 20px);
  -webkit-font-smoothing: antialiased;
}
body.guest { padding-bottom: 0; background: var(--hull); }
a { color: var(--sea-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { color: var(--hull); line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: 1.55rem; letter-spacing: -.025em; }
h2 { font-size: 1.08rem; }
h3 { font-size: .98rem; }
p { margin: 0 0 .75rem; }
small, .muted { color: var(--ink-2); }
small { font-size: .82rem; }
strong, b { font-weight: 650; }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
::selection { background: #CFE2F7; }

/* ---------- Kerangka: rel samping (desktop) + bar atas & navigasi bawah (HP) ---------- */
.rail { display: none; }
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
  padding: 8px 16px; padding-top: max(8px, env(safe-area-inset-top));
}
.topbar-inner { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto; min-height: 40px; }
.brand { display: flex; align-items: center; gap: 8px; color: var(--hull); flex: none; }
.brand:hover { text-decoration: none; }
.brand img { width: 34px; height: auto; display: block; }
.brand .wordmark { height: 15px; width: auto; display: block; }
.company-switch { margin-left: auto; min-width: 0; }
.company-switch select {
  max-width: 46vw; min-height: 36px; background-color: var(--sunk); color: var(--hull); border: 1px solid var(--rule);
  border-radius: 999px; padding: 4px 30px 4px 12px; font: inherit; font-size: .86rem; font-weight: 550; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
}
.company-name { margin-left: auto; font-size: .86rem; font-weight: 550; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--hull); color: #fff;
  display: grid; place-items: center; font-weight: 650; font-size: .8rem; flex: none; letter-spacing: .02em;
}
.avatar:hover { text-decoration: none; }

.page { max-width: 760px; margin: 0 auto; padding: 18px 16px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 6px 0 18px; flex-wrap: wrap; }
.page-head > div { min-width: 0; }
.page-head h1 { margin-bottom: 4px; }
.page-head p { margin: 0; color: var(--ink-2); max-width: 62ch; }

.bottomnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--hull); color: #fff;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottomnav ul { list-style: none; margin: 0 auto; padding: 0 6px; display: flex; max-width: 760px; }
.bottomnav li { flex: 1; }
.bottomnav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  height: var(--nav-h); color: rgba(255,255,255,.62); font-size: .72rem; font-weight: 500; text-decoration: none; position: relative;
}
.bottomnav a svg { width: 23px; height: 23px; }
.bottomnav a[aria-current="page"] { color: #fff; font-weight: 650; }
.bottomnav a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 32%; right: 32%; height: 3px; background: var(--signal); border-radius: 0 0 3px 3px; }
.bottomnav .badge { position: absolute; top: 7px; left: calc(50% + 5px); box-shadow: 0 0 0 2px var(--hull); }

@media (min-width: 1024px) {
  body { padding-bottom: 32px; padding-left: var(--rail-w); font-size: 15px; }
  body.guest { padding-left: 0; }
  .topbar, .bottomnav { display: none; }
  .rail {
    display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; width: var(--rail-w); z-index: 30;
    background: var(--hull); color: #fff; overflow: hidden;
  }
  .rail::after {
    content: ""; position: absolute; right: -54px; bottom: 74px; width: 250px; height: 160px; pointer-events: none;
    background: url("../img/waves.svg") no-repeat right bottom / contain; opacity: .14;
  }
  .rail-brand { display: flex; align-items: center; gap: 10px; padding: 22px 22px 18px; color: #fff; }
  .rail-brand:hover { text-decoration: none; }
  .rail-brand img { width: 44px; height: auto; display: block; }
  .rail-brand .wordmark { height: 17px; width: auto; }
  .rail-company { margin: 0 14px 10px; }
  .rail-company select, .rail-company .company-label {
    width: 100%; min-height: 40px; font: inherit; font-size: .86rem; font-weight: 550; color: #fff;
    background-color: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r-s); padding: 8px 32px 8px 12px; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%);
    background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat;
  }
  .rail-company select option { color: var(--ink); }
  .rail-company .company-label { display: block; background-image: none; padding-right: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 16px; position: relative; z-index: 1;
    scrollbar-width: thin; scrollbar-color: transparent transparent; scrollbar-gutter: stable; }
  /* Scrollbar menu kiri: tipis & menyatu dengan navy, baru terlihat saat kursor di menu */
  .rail-nav:hover { scrollbar-color: rgba(255,255,255,.22) transparent; }
  .rail-nav::-webkit-scrollbar { width: 6px; }
  .rail-nav::-webkit-scrollbar-track { background: transparent; }
  .rail-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; }
  .rail-nav:hover::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); }
  .rail-nav::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.38); }
  .rail-group { margin: 18px 10px 6px; font-size: .78rem; font-weight: 550; color: rgba(255,255,255,.48); }
  .rail-nav a, .rail-nav .soon {
    display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 8px 10px; border-radius: var(--r-s);
    color: rgba(255,255,255,.80); font-size: .94rem; font-weight: 500; position: relative; white-space: nowrap;
  }
  .rail-nav a svg, .rail-nav .soon svg { width: 20px; height: 20px; flex: none; opacity: .9; }
  .rail-nav a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
  .rail-nav a[aria-current="page"] { background: rgba(255,255,255,.11); color: #fff; font-weight: 650; }
  .rail-nav a[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 3px 3px 0; background: var(--signal); }
  .rail-nav .badge { margin-left: auto; }
  .rail-nav .soon { color: rgba(255,255,255,.38); cursor: default; }
  .rail-nav .soon small { margin-left: auto; font-size: .72rem; color: rgba(255,255,255,.38); border: 1px solid rgba(255,255,255,.18); border-radius: 999px; padding: 0 7px; }
  .rail-foot { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,.1); padding: 12px; }
  .rail-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r-s); color: #fff; }
  .rail-user:hover { background: rgba(255,255,255,.07); text-decoration: none; }
  .rail-user .avatar { background: var(--signal); color: var(--hull); }
  .rail-user span:last-child { min-width: 0; line-height: 1.25; }
  .rail-user b { display: block; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rail-user small { color: rgba(255,255,255,.55); font-size: .78rem; }
  .rail-user[aria-current="page"] { background: rgba(255,255,255,.11); }

  .page { max-width: 1680px; padding: 32px 40px; margin: 0; }
  h1 { font-size: 1.8rem; }
}

/* ---------- Elemen dasar ---------- */
.badge { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--signal); color: #fff; font-size: .72rem; font-weight: 700; text-align: center; line-height: 20px; font-variant-numeric: tabular-nums; }

/* Status: penanda kotak kecil + teks, bukan kapsul pastel */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px 2px 7px; border-radius: 5px; font-size: .78rem; font-weight: 600; white-space: nowrap; line-height: 1.5; background: var(--rule-2); color: var(--ink-2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 1.5px; background: currentColor; flex: none; }
.pill.info { background: var(--signal-bg); color: var(--signal-ink); }
.pill.success { background: var(--go-bg); color: var(--go-ink); }
.pill.danger { background: var(--stop-bg); color: var(--stop-ink); }
.pill.muted { background: var(--rule-2); color: var(--ink-2); }

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 18px; margin-bottom: 16px; }
.panel > h2:first-child, .panel > h3:first-child { margin-top: 0; }
.panel > h2:first-child { margin-bottom: 12px; }
.panel.flush { padding: 0; overflow: hidden; }
.panel-title { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.panel-title h2 { margin: 0; }
details.panel > summary { cursor: pointer; font-weight: 650; color: var(--hull); list-style: none; display: flex; align-items: center; gap: 8px; }
details.panel > summary::-webkit-details-marker { display: none; }
details.panel > summary::before { content: ""; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; margin-right: 2px; }
details.panel[open] > summary::before { transform: rotate(45deg); }

.alert { padding: 12px 14px 12px 16px; border-radius: var(--r-s); margin-bottom: 16px; border: 1px solid; border-left-width: 4px; }
.alert.ok { background: var(--go-bg); border-color: #B5DCC9; border-left-color: var(--go); color: #0B4D36; }
.alert.err { background: var(--stop-bg); border-color: #EFC1C6; border-left-color: var(--stop); color: #7C1420; }
.alert.warn { background: var(--signal-bg); border-color: #F5CDB5; border-left-color: var(--signal); color: #7A3209; }
.alert ul { margin: 0; padding-left: 18px; }
.alert a { color: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1.5px solid var(--rule);
  background: var(--surface); color: var(--hull); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color .12s, border-color .12s, transform .06s;
}
.btn:hover { text-decoration: none; border-color: #B7BFD0; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--hull); border-color: var(--hull); color: #fff; }
.btn.primary:hover { background: var(--hull-2); border-color: var(--hull-2); }
.btn.approve { background: var(--go); border-color: var(--go); color: #fff; }
.btn.approve:hover { background: var(--go-ink); border-color: var(--go-ink); }
.btn.reject { background: var(--surface); border-color: #E9B5BB; color: var(--stop); }
.btn.reject:hover { background: var(--stop-bg); border-color: var(--stop); }
.btn.danger { background: var(--stop); border-color: var(--stop); color: #fff; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--sea-ink); padding: 0 10px; }
.btn.ghost:hover { background: var(--sea-bg); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: .88rem; border-radius: 8px; }
.btn.block { width: 100%; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row > .btn, .btn-row > form { flex: 1; }
.btn-row > form > .btn { width: 100%; }

/* ---------- Form ---------- */
.field { margin-bottom: 16px; min-width: 0; }
.field label, .label { display: block; font-size: .875rem; font-weight: 600; color: var(--hull); margin-bottom: 6px; }
.field label small, .label small { font-weight: 450; color: var(--ink-3); }
.field .hint { font-size: .8rem; color: var(--ink-2); margin-top: 6px; }
.field .error { font-size: .82rem; color: var(--stop); margin-top: 6px; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number], input[type=date],
input[type=datetime-local], input[type=search], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 9px 12px; min-height: 46px;
  transition: border-color .12s, box-shadow .12s;
}
select { appearance: none; padding-right: 36px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
input::placeholder, textarea::placeholder { color: #9AA0B5; }
input:hover, select:hover, textarea:hover { border-color: #BCC4D4; }
textarea { min-height: 96px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 4px rgba(68,153,224,.18); }
input:disabled, select:disabled, textarea:disabled { background: var(--sunk); color: var(--ink-3); }
input[type=file] { font: inherit; font-size: .88rem; max-width: 100%; width: 100%; padding: 10px; border: 1.5px dashed var(--rule); border-radius: var(--r-s); background: var(--sunk); color: var(--ink-2); }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: .85rem; margin-right: 10px; padding: 7px 12px; border-radius: 7px; border: 1.5px solid var(--rule); background: #fff; color: var(--hull); cursor: pointer; }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--hull); }
.field .check, .field label.check { display: flex; font-weight: 500; color: var(--ink); margin-bottom: 0; }
.grid-2, .grid-3 { display: grid; gap: 0 16px; grid-template-columns: 1fr; }
.grid-fields { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 640px) { .grid-2 { grid-template-columns: 1fr 1fr; } .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }
.pin-input { letter-spacing: .5em; text-align: center; font-size: 1.4rem !important; font-variant-numeric: tabular-nums; }

/* Input dengan awalan (Rp) */
.affix { display: flex; align-items: stretch; border: 1.5px solid var(--rule); border-radius: var(--r-s); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.affix:hover { border-color: #BCC4D4; }
.affix:focus-within { border-color: var(--sea); box-shadow: 0 0 0 4px rgba(68,153,224,.18); }
.affix > span { display: grid; place-items: center; padding: 0 0 0 12px; color: var(--ink-3); font-weight: 550; font-size: .92rem; }
.affix > input, .affix > input.invalid { border: 0 !important; box-shadow: none !important; background: transparent; padding-left: 8px; min-height: 43px; }
.money { text-align: right; font-variant-numeric: tabular-nums; }

/* Pilihan kategori sebagai kartu */
.choice-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.choice, .field .choice { display: flex; margin: 0; color: var(--ink); align-items: center; gap: 10px; border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 11px 12px; cursor: pointer; font-weight: 550; background: var(--surface); }
.choice:hover { border-color: #BCC4D4; }
.choice input { width: 18px; height: 18px; margin: 0; accent-color: var(--hull); flex: none; }
.choice:has(input:checked) { border-color: var(--hull); background: #F3F3FB; box-shadow: inset 0 0 0 1px var(--hull); }
.choice:has(input:focus-visible) { outline: 2px solid var(--sea); outline-offset: 2px; }

/* ---------- Nomor dokumen ala pelat kontainer ---------- */
.docno { display: inline-flex; align-items: center; flex-wrap: nowrap; white-space: nowrap; gap: 0 1px; font-weight: 550; font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: .82rem; line-height: 1.3; }
.docno-pre { white-space: nowrap; }
.docno-pre { overflow: hidden; text-overflow: ellipsis; }
.docno-rev { margin-left: 8px; padding: 0 6px; border-radius: 4px; background: var(--signal-bg); color: var(--signal-ink); font-size: .9em; font-weight: 600; line-height: 1.5; flex: none; }
.docno.lg { font-size: .95rem; color: var(--ink); font-weight: 600; }

/* ---------- Daftar dokumen (manifest) ---------- */
.filters { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters a { white-space: nowrap; padding: 6px 14px; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--surface); color: var(--ink-2); font-size: .86rem; font-weight: 550; text-decoration: none; }
.filters a:hover { border-color: #BCC4D4; color: var(--hull); }
.filters a[aria-current="true"] { background: var(--hull); border-color: var(--hull); color: #fff; }

.company-group { margin-bottom: 22px; }
.company-group > h2 { font-size: .9rem; color: var(--ink-2); font-weight: 600; margin: 0 0 8px 2px; display: flex; align-items: center; gap: 8px; }
.company-group > h2::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--co, var(--hull)); }

.manifest { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; }
.manifest > li { border-top: 1px solid var(--rule-2); }
.manifest > li:first-child { border-top: 0; }
.mrow { display: grid; grid-template-columns: 48px 1fr; align-items: stretch; position: relative; transition: background-color .1s; }
.mrow.nopick { grid-template-columns: 1fr; }
.mrow::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--co, var(--hull)); }
.mrow:hover { background: #FAFBFD; }
.mrow:has(input:checked) { background: #F1F8F4; }
.mrow .pick { display: grid; place-items: center; padding-left: 4px; }
.mrow .pick input { width: 22px; height: 22px; accent-color: var(--go); cursor: pointer; }
.mrow .pick .lock { width: 17px; height: 17px; color: var(--ink-3); }
.mrow a.body { display: block; padding: 14px 16px 14px 4px; color: inherit; text-decoration: none; min-width: 0; }
.mrow.nopick a.body { padding-left: 18px; }
.mrow a.body:hover .title { color: var(--sea-ink); }
/* Baris: nomor di atas, lalu judul + nominal sejajar, lalu keterangan */
.mrow a.body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; align-items: baseline; }
.mline { display: contents; }
.mline .docno { grid-column: 1; grid-row: 1; overflow: hidden; min-width: 0; }
.mline .mamount { grid-column: 2; grid-row: 1; }
.manifest .title { grid-column: 1 / -1; grid-row: 2; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin: 4px 0; line-height: 1.35; }
.manifest .mmeta { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 559px) {
  /* HP: semua rata kiri, tidak ada yang terpotong: nomor, judul, nominal, keterangan */
  .mline .docno { grid-column: 1 / -1; }
  .mline .mamount { grid-column: 1 / -1; grid-row: 3; margin: 2px 0 4px; }
  .manifest .mmeta { grid-row: 4; }
}
.mline .docno { min-width: 0; }
.mamount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.05rem; color: var(--hull); }
.title { font-weight: 600; margin: 3px 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.mmeta { font-size: .82rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.mmeta .age.late { color: var(--stop); font-weight: 600; }
.mmeta .step { color: var(--signal-ink); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.mmeta .step::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); }

@media (min-width: 1200px) {
  /* Di desktop baris manifest menjadi tabel yang bisa dipindai: nomor | judul & pengaju | tahap | umur | nominal */
  .manifest.cols .mrow a.body { display: grid; grid-template-columns: 190px minmax(0, 1fr) 130px 170px 180px; align-items: center; gap: 0 18px; padding-top: 12px; padding-bottom: 12px; }
  .manifest.cols .mline, .manifest.cols .mmeta { display: contents; }
  .manifest.cols .mline .docno { grid-column: 1; grid-row: 1 / span 2; }
  .manifest.cols .mamount { grid-column: 5; grid-row: 1 / span 2; text-align: right; }
  .manifest.cols .title { grid-column: 2; grid-row: 1; margin: 0; -webkit-line-clamp: 1; }
  .manifest.cols .mmeta > .who { grid-column: 2; grid-row: 2; }
  .manifest.cols .mmeta > .step, .manifest.cols .mmeta > .pill, .manifest.cols .mmeta > .pills { grid-column: 3; grid-row: 1 / span 2; justify-self: start; }
  .manifest.cols .mmeta > .age { grid-column: 4; grid-row: 1 / span 2; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .manifest.cols .mamount { white-space: nowrap; min-width: 0; font-variant-numeric: tabular-nums; }
  .manifest.cols .mmeta > .cat { display: none; }
  .manifest-head { display: grid; grid-template-columns: 48px 190px minmax(0, 1fr) 130px 170px 180px; gap: 0 18px; padding: 0 16px 8px 0; font-size: .78rem; font-weight: 600; color: var(--ink-3); }
  .manifest-head.nopick { grid-template-columns: 0 190px minmax(0, 1fr) 130px 170px 180px; padding-left: 4px; }
  .manifest-head span:nth-child(5), .manifest-head span:nth-child(6) { text-align: right; }
}
@media (max-width: 1199px) { .manifest-head { display: none; } }

.empty { text-align: center; padding: 48px 20px; color: var(--ink-2); background: var(--surface); border: 1px dashed var(--rule); border-radius: var(--r-m); }
.empty img { width: 64px; opacity: .9; margin-bottom: 10px; }
.empty strong { display: block; color: var(--hull); font-size: 1.1rem; margin-bottom: 4px; }
.empty .btn { margin-top: 14px; }

/* Bar aksi massal */
.bulkbar {
  position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 25;
  background: var(--surface); color: var(--ink); padding: 10px 16px; border-top: 1px solid var(--rule);
  box-shadow: 0 -10px 30px rgba(11,10,86,.10); transform: translateY(130%); visibility: hidden; transition: transform .2s ease, visibility 0s .2s;
}
.bulkbar.show { transform: translateY(0); visibility: visible; transition: transform .2s ease; }
.bulkbar-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.bulkbar .sum { flex: 1; min-width: 0; line-height: 1.25; }
.bulkbar .sum b { display: block; font-variant-numeric: tabular-nums; font-size: 1.15rem; color: var(--hull); }
.bulkbar .sum small { color: var(--ink-2); }
@media (min-width: 1024px) {
  .bulkbar { left: calc(var(--rail-w) + 40px); right: auto; width: min(800px, calc(100vw - var(--rail-w) - 80px)); bottom: 24px; border: 1px solid var(--rule); border-radius: var(--r-l); padding: 12px 14px 12px 20px; }
  .bulkbar-inner { max-width: none; }
}

/* ---------- Dokumen ---------- */
.doc-plate { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); margin-bottom: 16px; position: relative; overflow: hidden; }
.doc-plate::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--co, var(--hull)); }
.plate-top { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; padding: 16px 20px 0 24px; flex-wrap: wrap; }
.plate-top .co { font-size: .85rem; color: var(--ink-2); font-weight: 500; }
.plate-main { padding: 18px 20px 20px 24px; }
.plate-main .doctype { font-size: .85rem; color: var(--ink-2); line-height: 1.4; }
.plate-main .docno { margin-top: 2px; }
.plate-main h1 { margin: 12px 0 0; font-size: 1.35rem; line-height: 1.3; overflow-wrap: anywhere; }
.amount-box { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--rule); }
.doc-amount-label { font-size: .8rem; color: var(--ink-2); margin-bottom: 4px; }
.doc-amount { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; color: var(--hull); line-height: 1.2; white-space: nowrap; }
.doc-amount .cur { font-size: .62em; font-weight: 600; color: var(--ink-2); margin-right: 5px; letter-spacing: 0; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0; border-top: 1px solid var(--rule-2); background: var(--sunk); }
.kv > div { min-width: 0; padding: 10px 18px 10px 22px; border-bottom: 1px solid var(--rule-2); }
.kv > div:nth-child(odd) { border-right: 1px solid var(--rule-2); }
.kv > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.kv dt { font-size: .76rem; color: var(--ink-3); font-weight: 550; }
.kv dd { margin: 1px 0 0; font-weight: 600; overflow-wrap: anywhere; color: var(--ink); font-size: .94rem; }
@media (min-width: 720px) {
  .plate-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 40px; align-items: end; }
  .plate-main .amount-box { text-align: right; margin: 0; padding: 0; border: 0; }
  .plate-main h1 { font-size: 1.5rem; }
  .doc-amount { font-size: 1.85rem; }
  .kv { grid-template-columns: repeat(4, 1fr); }
  .kv > div:nth-child(odd) { border-right: 0; }
  .kv > div:not(:nth-child(4n)) { border-right: 1px solid var(--rule-2); }
  .kv > div:last-child:nth-child(odd) { grid-column: auto; }
  .kv > div:last-child:nth-child(4n+1) { grid-column: 1 / -1; }
  .kv > div:last-child:nth-child(4n+2) { grid-column: span 3; }
  .kv > div:last-child:nth-child(4n+3) { grid-column: span 2; }
}

/* Halaman dokumen di desktop: isi di kiri, jalur approval + aksi di kanan */
.doc-layout { display: block; }
@media (min-width: 1400px) {
  .doc-layout { display: grid; grid-template-columns: minmax(0, 1fr) clamp(340px, 26vw, 420px); grid-template-rows: auto 1fr; gap: 0 22px; align-items: start; }
  .doc-main { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
  .doc-layout > .actionbar { grid-column: 2; grid-row: 1; position: static; box-shadow: none; margin: 0 0 16px; }
  .doc-side { grid-column: 2; grid-row: 2; }
}

.items { width: 100%; border-collapse: collapse; font-size: .94rem; }
.items th { text-align: left; font-size: .78rem; color: var(--ink-3); font-weight: 600; padding: 10px 16px; border-bottom: 1px solid var(--rule); background: var(--sunk); }
.items td { padding: 12px 16px; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.items td.r, .items th.r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.items td.name { font-weight: 600; }
.items td.name small { font-weight: 400; }
.items .qtyline { display: none; }
.items .item-note { display: block; font-weight: 400; color: var(--ink-2); font-size: .86rem; margin-top: 2px; }
@media (max-width: 559px) { .items .qtyline { display: block; font-weight: 400; color: var(--ink-2); font-size: .86rem; margin-top: 3px; font-variant-numeric: tabular-nums; } }
.items tfoot td { font-weight: 700; border-bottom: 0; color: var(--hull); font-size: 1.02rem; }
.items tfoot td.r { font-size: 1.1rem; }
.table-scroll { overflow-x: auto; }
@media (max-width: 559px) {
  .items.stack thead { display: none; }
  .items.stack tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 14px 16px; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
  .items.stack td { display: block; padding: 0; border: 0; }
  .items.stack td.name { grid-column: 1; grid-row: 1; }
  .items.stack td[data-k="Jumlah"], .items.stack td[data-k="Harga"] { display: none; }
  .items.stack td[data-k="Subtotal"] { grid-column: 2; grid-row: 1; font-weight: 650; color: var(--ink); }
  .items.stack tfoot tr { display: flex; justify-content: space-between; align-items: baseline; background: var(--sunk); }
}

.files { list-style: none; margin: 0; padding: 0; }
.files li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.files li:first-child { border-top: 0; padding-top: 0; }
.files .ftype { width: 38px; height: 46px; border-radius: 3px 10px 3px 3px; background: var(--sea-bg); display: grid; place-items: center; font-size: .74rem; font-weight: 700; color: var(--sea-ink); flex: none; letter-spacing: .02em; }
.files .fname { flex: 1; min-width: 0; overflow-wrap: anywhere; font-weight: 550; }
.files .fname small { display: block; font-weight: 450; }

/* Jalur approval sebagai skala draft kapal: garis tegak dengan angka tahap */
.flow { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.flow li { position: relative; padding: 0 0 18px 44px; min-height: 40px; }
.flow li::before { content: ""; position: absolute; left: 15px; top: 30px; bottom: 2px; width: 2px; background: repeating-linear-gradient(to bottom, var(--rule) 0 6px, transparent 6px 10px); }
.flow li.done::before { background: var(--go); }
.flow li:last-child { padding-bottom: 0; }
.flow li:last-child::before { display: none; }
.flow .dot { position: absolute; left: 0; top: 0; width: 32px; height: 28px; border-radius: 6px; display: grid; place-items: center; font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; background: var(--surface); color: var(--ink-3); border: 1.5px solid var(--rule); }
.flow li.done .dot { background: var(--go); border-color: var(--go); color: #fff; }
.flow li.active .dot { background: var(--signal); border-color: var(--signal); color: #fff; box-shadow: 0 0 0 4px var(--signal-bg); }
.flow li.rejected .dot, .flow li.voided .dot { background: var(--stop-bg); border-color: var(--stop); color: var(--stop); }
.flow .step-label { font-weight: 650; color: var(--hull); }
.flow .step-state { font-size: .8rem; color: var(--ink-2); margin-left: 6px; }
.flow li.active .step-state { color: var(--signal-ink); font-weight: 600; }
.flow li.done .step-state { color: var(--go-ink); }
.flow li.rejected .step-state { color: var(--stop-ink); font-weight: 600; }
.flow .who { font-weight: 550; margin-top: 2px; }
.flow .when { font-size: .8rem; color: var(--ink-2); }
.flow .note { margin-top: 6px; padding: 8px 10px; background: var(--stop-bg); border-radius: var(--r-s); font-size: .9rem; color: #7C1420; }
.flow .meta { font-size: .82rem; color: var(--ink-2); }

.diff { list-style: none; margin: 8px 0 0; padding: 0; font-size: .9rem; }
.diff li { padding: 7px 0; border-top: 1px dashed var(--rule); }
.diff del { color: var(--stop); text-decoration: line-through; }
.diff ins { color: var(--go-ink); text-decoration: none; font-weight: 650; background: var(--go-bg); padding: 0 3px; border-radius: 3px; }

details.version { border-top: 1px solid var(--rule-2); padding: 12px 0; }
details.version:first-of-type { border-top: 0; padding-top: 0; }
details.version summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
details.version summary::-webkit-details-marker { display: none; }

.verify-link { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; font-weight: 550; margin: 2px 0 18px; }
.verify-link svg { width: 18px; height: 18px; }

/* Panel aksi approver */
.actionbar { position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px); z-index: 15; background: var(--surface); border: 1px solid var(--rule); border-top: 4px solid var(--signal); border-radius: var(--r-m); padding: 14px; box-shadow: 0 12px 32px rgba(11,10,86,.14); margin-top: 18px; }
.actionbar .ctx { font-size: .86rem; color: var(--ink-2); margin-bottom: 10px; }
.actionbar .ctx strong { color: var(--hull); }
@media (min-width: 1024px) { .actionbar { bottom: 20px; } }

/* ---------- Bottom sheet konfirmasi ---------- */
.sheet-backdrop { position: fixed; inset: 0; background: rgba(11,10,86,.42); z-index: 50; display: none; }
.sheet { visibility: hidden; position: fixed; left: 0; right: 0; bottom: 0; z-index: 51; background: var(--surface); border-radius: var(--r-l) var(--r-l) 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); max-height: 88vh; overflow-y: auto; transform: translateY(100%); transition: transform .22s cubic-bezier(.2,.8,.2,1); }
.sheet-open .sheet-backdrop { display: block; }
.sheet-open .sheet { transform: translateY(0); visibility: visible; }
.sheet-inner { max-width: 520px; margin: 0 auto; }
.sheet .grab { width: 40px; height: 4px; border-radius: 4px; background: var(--rule); margin: -6px auto 14px; }
.sheet h2 { font-size: 1.25rem; }
.sheet ul.sum { list-style: none; margin: 8px 0 14px; padding: 0; max-height: 34vh; overflow-y: auto; border: 1px solid var(--rule-2); border-radius: var(--r-s); }
.sheet ul.sum li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; border-top: 1px solid var(--rule-2); font-size: .9rem; }
.sheet ul.sum li:first-child { border-top: 0; }
.sheet .total { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 14px; font-variant-numeric: tabular-nums; color: var(--hull); }
.sheet .status { min-height: 1.5em; margin: 10px 0 0; font-size: .9rem; text-align: center; }
.sheet ul.sum li .num { white-space: nowrap; font-weight: 600; }
.sheet ul.sum li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.sheet .status.err { color: var(--stop); }
.fp { width: 60px; height: 60px; color: var(--go); margin: 0 auto 8px; display: block; padding: 12px; border-radius: 50%; background: var(--go-bg); }
@media (min-width: 1024px) {
  .sheet { left: 50%; right: auto; bottom: 50%; width: 480px; border-radius: var(--r-l); transform: translate(-50%, 54%); opacity: 0; padding: 22px 24px; transition: transform .2s ease, opacity .2s ease; }
  .sheet-open .sheet { transform: translate(-50%, 50%); opacity: 1; }
  .sheet .grab { display: none; }
}

/* ---------- Admin & daftar umum ---------- */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 12px 0; border-top: 1px solid var(--rule-2); }
.list > li:first-child { border-top: 0; padding-top: 2px; }
.list > li:last-child { padding-bottom: 2px; }
.row { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
.checklist li { display: flex; align-items: center; gap: 12px; }
.checklist .mark { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; font-size: .8rem; font-weight: 700; flex: none; border: 1.5px solid var(--rule); color: transparent; }
.checklist .done .mark { background: var(--go); border-color: var(--go); color: #fff; }
.checklist a { font-weight: 550; }
.tabs { display: flex; gap: 4px; overflow-x: auto; margin-bottom: 18px; border-bottom: 1px solid var(--rule); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs .tabs-soon { padding: 10px 12px; color: var(--ink-2); white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -1px; text-decoration: none; font-weight: 550; font-size: .94rem; }
.tabs a:hover { color: var(--hull); }
.tabs a[aria-current="page"] { color: var(--hull); font-weight: 700; border-bottom-color: var(--hull); }
.tabs .tabs-soon { color: var(--ink-3); cursor: default; }
.tabs .tabs-soon small { font-size: .7rem; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 999px; padding: 0 6px; margin-left: 4px; }
.steps-editor .step { border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 14px; margin-bottom: 10px; background: var(--sunk); }
.steps-editor .step-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.steps-editor .seq { font-weight: 700; color: var(--hull); }
.rule-steps { margin: 6px 0 0; padding-left: 20px; font-size: .9rem; }
.code { font-family: var(--mono); font-size: .82rem; background: var(--rule-2); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.tokens button { font-family: var(--mono); font-size: .78rem; border: 1.5px solid var(--rule); background: var(--surface); border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--hull); }
.tokens button:hover { border-color: var(--hull); }
.audit-row { font-size: .88rem; }
.audit-row .ev { font-weight: 650; color: var(--hull); }
.hash { font-family: var(--mono); font-size: .72rem; color: var(--ink-2); overflow-wrap: anywhere; }
.pagination { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }

.menu-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 720px) { .menu-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .menu-grid { grid-template-columns: 1fr 1fr 1fr; } }
.menu-card { display: flex; gap: 14px; align-items: flex-start; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); color: var(--ink); }
.menu-card:hover { border-color: var(--hull); text-decoration: none; }
.menu-card svg { width: 22px; height: 22px; color: var(--sea-ink); flex: none; margin-top: 2px; }
.menu-card b { display: block; color: var(--hull); }
.menu-card small { display: block; margin-top: 2px; line-height: 1.4; }

/* ---------- Editor barang PR ---------- */
.items-editor { container-type: inline-size; }
.items-head { display: none; }
.item-row { border: 1.5px solid var(--rule); border-radius: var(--r-m); background: var(--surface); margin-bottom: 12px; overflow: hidden; }
.item-row .row-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 14px; background: var(--sunk); border-bottom: 1px solid var(--rule-2); }
.item-row .row-label { font-weight: 650; color: var(--hull); font-size: .92rem; }
.item-row .row-no { font-variant-numeric: tabular-nums; }
.item-row .btn-remove { min-height: 32px; padding: 0 10px; color: var(--stop); }
.item-row .btn-remove:hover { background: var(--stop-bg); }
.item-row .btn-remove svg { width: 16px; height: 16px; }
.item-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "name name" "qty unit" "price price" "note note"; gap: 0 12px; padding: 14px 14px 0; }
.item-grid .f-name { grid-area: name; }
.item-grid .f-qty { grid-area: qty; }
.item-grid .f-unit { grid-area: unit; }
.item-grid .f-price { grid-area: price; }
.item-grid .f-note { grid-area: note; }
.item-row .f-sub { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; padding: 11px 14px; border-top: 1px dashed var(--rule); background: var(--sunk); }
.item-row .f-sub label { margin: 0; color: var(--ink-2); font-weight: 550; }
.item-row .row-sub { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--hull); font-size: 1.05rem; }
.add-item { width: 100%; border-style: dashed; color: var(--sea-ink); min-height: 48px; }
.add-item:hover { border-color: var(--sea); background: var(--sea-bg); }
.add-item svg { width: 18px; height: 18px; }
.totalbar { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 16px -18px -18px; padding: 16px 18px; background: var(--hull); color: #fff; border-radius: 0 0 var(--r-m) var(--r-m); }
.totalbar span:first-child { font-weight: 550; color: rgba(255,255,255,.75); }
.totalbar .num { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }

@container (min-width: 700px) {
  /* Mode tabel: label di kepala kolom, tiap barang satu baris rapi */
  .items-head { display: grid; grid-template-columns: 30px minmax(0, 1fr) 92px 104px 176px 150px 36px; gap: 0 10px; padding: 0 0 8px; font-size: .78rem; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--rule); margin-bottom: 0; }
  .items-head span:nth-child(5), .items-head span:nth-child(6) { text-align: right; }
  .item-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 92px 104px 176px 150px 36px; grid-template-areas: "no name qty unit price sub rm" "no note note note note . rm"; gap: 8px 10px; align-items: start; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; margin: 0; padding: 12px 0; overflow: visible; background: transparent; }
  .item-row .row-head, .item-grid { display: contents; }
  .item-row .row-label { grid-area: no; padding-top: 12px; font-size: .9rem; color: var(--ink-3); }
  .item-row .row-word { display: none; }
  .item-row .btn-remove { grid-area: rm; padding: 0; width: 36px; min-height: 46px; justify-self: end; }
  .item-row .btn-remove .t { display: none; }
  .item-row .field { margin: 0; }
  .item-row .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .item-row .f-note input { min-height: 38px; padding-top: 6px; padding-bottom: 6px; font-size: .9rem; background: var(--sunk); border-color: var(--rule-2); }
  .item-row .f-note input:focus { background: #fff; }
  .item-row .f-sub { grid-area: sub; display: block; border: 0; padding: 12px 0 0; background: transparent; text-align: right; }
  .add-item { margin-top: 12px; width: auto; }
}

/* ---------- Halaman tamu (login / laporan / error) ---------- */
.guest-wrap { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr; background: var(--hull); color: #fff; position: relative; overflow: hidden; }
.guest-wrap::after { content: ""; position: absolute; right: -60px; bottom: -30px; width: 340px; height: 220px; background: url("../img/waves.svg") no-repeat right bottom / contain; opacity: .16; pointer-events: none; }
.guest-brand { display: flex; align-items: center; gap: 12px; padding: max(28px, env(safe-area-inset-top)) 24px 8px; color: #fff; position: relative; z-index: 1; }
.guest-brand img { width: 52px; }
.guest-brand .wordmark { height: 20px; width: auto; }
.guest-intro { display: none; }
.guest-main { display: grid; align-items: start; justify-items: center; padding: 18px 16px 40px; position: relative; z-index: 1; }
.guest-card { width: 100%; max-width: 420px; background: var(--surface); color: var(--ink); border-radius: var(--r-l); padding: 26px 22px; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.guest-card h1 { font-size: 1.45rem; }
.guest-card .lede { color: var(--ink-2); margin-bottom: 20px; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .82rem; margin: 18px 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.btn .ico { width: 20px; height: 20px; }
@media (min-width: 960px) {
  .guest-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(460px, .9fr); grid-template-rows: 1fr; }
  .guest-wrap::after { right: auto; left: 34%; bottom: -40px; width: 520px; height: 340px; transform: translateX(-50%); opacity: .2; }
  .guest-brand { position: absolute; top: 0; left: 0; padding: 40px 56px; }
  .guest-brand img { width: 60px; }
  .guest-brand .wordmark { height: 22px; }
  .guest-intro { display: flex; flex-direction: column; justify-content: center; padding: 120px 56px 120px; position: relative; z-index: 1; max-width: 640px; }
  .guest-intro p.big { color: #fff; font-size: 2.5rem; line-height: 1.12; font-weight: 700; letter-spacing: -.03em; margin: 0 0 18px; }
  .guest-intro p { color: rgba(255,255,255,.72); font-size: 1.05rem; max-width: 44ch; }
  .guest-main { background: var(--deck); align-items: center; padding: 40px; }
  .guest-card { box-shadow: none; border: 1px solid var(--rule); padding: 32px 30px; }
}

/* Cetak: tanpa navigasi */
@media print {
  .rail, .topbar, .bottomnav, .actionbar, .bulkbar, .sheet, .sheet-backdrop { display: none !important; }
  body { padding: 0; background: #fff; }
  .page { max-width: none; padding: 0; }
}

.form-submit { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; }
.form-submit p { margin: 0; font-size: .84rem; }
@media (min-width: 720px) {
  .form-submit { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
  .form-submit p { max-width: 52ch; }
  .form-submit .btn-row { flex: none; }
  .form-submit .btn-row .btn { flex: none; min-width: 150px; }
}
.btn.small, .page-head .btn { white-space: nowrap; }

/* Dua kolom panel di layar lebar (Akun, Pengalihan) */
.two-col { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); margin-bottom: 16px; }
.two-col > .panel { margin: 0; }
@media (min-width: 1200px) { .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 720px) { .filter-actions > .btn { flex: 0 0 auto; min-width: 160px; } }
.two-col.top { align-items: start; }

/* ---------- Hak akses ---------- */
fieldset.plain { border: 0; margin: 0; padding: 0; min-width: 0; }
.role-list { list-style: none; margin: 0; padding: 0; }
.role-list li + li { border-top: 1px solid var(--rule-2); }
.role-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 18px; color: var(--ink); }
.role-list a:hover { background: #FAFBFD; text-decoration: none; }
.role-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.role-main b { color: var(--hull); font-size: 1rem; }
.role-main small { flex-basis: 100%; }
.role-meta { text-align: right; font-size: .82rem; color: var(--ink-2); white-space: nowrap; line-height: 1.5; }
.role-meta b { color: var(--ink); }
.perm-rows { list-style: none; margin: 0; padding: 0; }
.perm-rows li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--rule-2); }
.perm-rows li:first-child { border-top: 0; padding-top: 4px; }
.perm-module { font-weight: 600; color: var(--hull); }
.perm-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .perm-rows li { grid-template-columns: 240px minmax(0, 1fr); align-items: center; } }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: .88rem; font-weight: 500; user-select: none; }
.chip:hover { border-color: #BCC4D4; }
.chip input { width: 16px; height: 16px; margin: 0; accent-color: var(--hull); }
.chip:has(input:checked) { border-color: var(--hull); background: #F3F3FB; color: var(--hull); font-weight: 600; }
.chip.sod:has(input:checked) { border-color: var(--signal); background: var(--signal-bg); color: var(--signal-ink); }
.chip:has(input:focus-visible) { outline: 2px solid var(--sea); outline-offset: 2px; }
fieldset:disabled .chip { cursor: default; opacity: .85; }
.choice-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.choice-grid .choice { align-items: flex-start; }
.choice-grid .choice input { margin-top: 3px; }
.choice-grid .choice span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.choice-grid .choice small { font-weight: 400; color: var(--ink-2); }
.tag-warn { color: var(--signal-ink) !important; font-weight: 600 !important; }
main[data-readonly] form:not([method="get"]) .btn.primary { display: none; }

/* ---------- Purchase Order ---------- */
.po-totals { margin: 6px 0 16px; border: 1px solid var(--rule-2); border-radius: var(--r-s); overflow: hidden; max-width: 560px; margin-left: auto; }
.po-totals > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 14px; border-top: 1px solid var(--rule-2); }
.po-totals > div:first-child { border-top: 0; }
.po-totals dt { color: var(--ink-2); font-size: .9rem; }
.po-totals dd { margin: 0; font-weight: 600; color: var(--ink); white-space: nowrap; }
.po-totals .grand { background: var(--hull); }
.po-totals .grand dt, .po-totals .grand dd { color: #fff; font-weight: 700; font-size: 1.05rem; }
.overrun { border: 1.5px solid var(--rule); border-left-width: 4px; border-radius: var(--r-s); padding: 12px 14px; background: var(--sunk); }
.overrun-line { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; font-size: .9rem; color: var(--ink-2); }
.overrun-line b { color: var(--ink); }
.overrun-pct { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.overrun-msg { margin: 6px 0 0; font-size: .85rem; color: var(--ink-2); }
.overrun .field { margin: 12px 0 0; }
.overrun[data-state="ok"] { border-left-color: var(--go); }
.overrun[data-state="note"] { border-left-color: var(--sea); }
.overrun[data-state="warn"] { border-color: #F5CDB5; border-left-color: var(--signal); background: var(--signal-bg); }
.overrun[data-state="warn"] .overrun-pct, .overrun[data-state="warn"] .overrun-msg { color: var(--signal-ink); font-weight: 600; }
.overrun[data-state="block"] { border-color: #EFC1C6; border-left-color: var(--stop); background: var(--stop-bg); }
.overrun[data-state="block"] .overrun-pct, .overrun[data-state="block"] .overrun-msg { color: var(--stop-ink); font-weight: 600; }
input.invalid, input.invalid:focus { border-color: var(--stop) !important; box-shadow: 0 0 0 4px rgba(196,43,58,.15) !important; }
.hint.error { color: var(--stop-ink); font-weight: 600; }
.pr-hint { font-size: .78rem; }
@container (min-width: 700px) { .item-row .f-name .pr-hint { margin-top: 4px; } }
.overrun-flag { border: 1.5px solid #EFC1C6; border-left: 4px solid var(--stop); background: var(--stop-bg); color: #7C1420; border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 16px; }
.overrun-flag b { color: var(--stop-ink); }
.vendor-card dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 10px 20px; margin: 0; }
.vendor-card dt { font-size: .76rem; color: var(--ink-3); font-weight: 550; }
.vendor-card dd { margin: 1px 0 0; font-weight: 550; overflow-wrap: anywhere; }
.linked-docs { list-style: none; margin: 0; padding: 0; }
.linked-docs li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--rule-2); flex-wrap: wrap; }
.linked-docs li:first-child { border-top: 0; padding-top: 0; }
.linked-docs .ld-main { min-width: 0; }
.linked-docs .ld-main small { display: block; }
.linked-docs .ld-side { display: flex; align-items: center; gap: 10px; }
@media (max-width: 719px) {
  .vendor-table thead { display: none; }
  .vendor-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); }
  .vendor-table td { display: block; border: 0; padding: 0; }
  .vendor-table td:nth-child(2), .vendor-table td:nth-child(3) { grid-column: 1; font-size: .86rem; color: var(--ink-2); }
  .vendor-table td:nth-child(4) { display: none; }
  .vendor-table td:last-child { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
.vendor-table tr.inactive td { color: var(--ink-3); }
.items tfoot.po-foot td { font-weight: 550; font-size: .94rem; color: var(--ink-2); padding-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); }
.items tfoot.po-foot td.r { color: var(--ink); font-size: .94rem; }
.items tfoot.po-foot tr.grand td { background: var(--hull); color: #fff; font-weight: 700; font-size: 1.02rem; border-bottom: 0; }
@media (max-width: 559px) { .items.stack tfoot.po-foot tr { padding: 8px 16px; } .items.stack tfoot.po-foot tr.grand { background: var(--hull); } }

/* ---------- Finance: editor baris (Fund Request & Voucher) ---------- */
.ledger { container-type: inline-size; }
.ledger-head { display: none; }
.lrow { border: 1.5px solid var(--rule); border-radius: var(--r-m); background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.lrow .lrow-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 14px; background: var(--sunk); border-bottom: 1px solid var(--rule-2); }
.lrow .lrow-no { font-weight: 650; color: var(--hull); font-size: .9rem; font-variant-numeric: tabular-nums; }
.lrow .btn-remove { min-height: 32px; padding: 0 10px; color: var(--stop); }
.lrow .btn-remove:hover { background: var(--stop-bg); }
.lrow .btn-remove svg { width: 16px; height: 16px; }
.lrow-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px; padding: 12px 14px 0; }
.lrow-grid .f-desc, .lrow-grid .f-recv, .lrow-grid .f-amount { grid-column: 1 / -1; }
.lrow-grid .f-amount input { font-weight: 650; }
.vc-ledger .lrow-grid { grid-template-columns: minmax(0, 1fr); }
.req-tag { display: inline-block; vertical-align: middle; margin-left: 6px; font-size: .74rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em; color: var(--stop-ink); background: var(--stop-bg); border-radius: 999px; padding: 2px 8px; }

@container (min-width: 820px) {
  .ledger-head, .lrow { display: grid; gap: 8px 10px; }
  .fr-ledger .ledger-head, .fr-ledger .lrow { grid-template-columns: 30px minmax(0, 1.4fr) minmax(0, 1.2fr) 96px 172px 168px 36px; }
  .vc-ledger .ledger-head, .vc-ledger .lrow { grid-template-columns: 30px minmax(0, 1fr) 210px 36px; }
  .ledger-head { padding: 0 0 8px; font-size: .78rem; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--rule); }
  .ledger-head span:nth-last-child(2) { text-align: right; }
  .lrow { align-items: start; border: 0; border-bottom: 1px solid var(--rule-2); border-radius: 0; margin: 0; padding: 10px 0; overflow: visible; background: transparent; }
  .lrow .lrow-head, .lrow .lrow-grid { display: contents; }
  .lrow .lrow-no { grid-column: 1; grid-row: 1; padding-top: 12px; color: var(--ink-3); }
  .lrow .lrow-word { display: none; }
  .lrow .btn-remove { grid-column: -2; grid-row: 1; padding: 0; width: 36px; min-height: 46px; justify-self: end; }
  .lrow .btn-remove .t { display: none; }
  .lrow .field { margin: 0; grid-row: 1; }
  .lrow .field > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lrow-grid .f-desc, .lrow-grid .f-recv, .lrow-grid .f-amount { grid-column: auto; }
  .ledger .add-item { margin-top: 12px; width: auto; }
}

/* Kelompok Fund Request */
.fr-group { border: 1.5px solid var(--rule); border-radius: var(--r-m); margin-bottom: 14px; background: var(--surface); }
.fr-group-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; background: var(--hull); color: #fff; border-radius: calc(var(--r-m) - 2px) calc(var(--r-m) - 2px) 0 0; }
.fr-group-label { font-weight: 650; font-size: .94rem; }
.fr-group-head .btn-remove { min-height: 32px; padding: 0 10px; color: #fff; background: transparent; border-color: rgba(255,255,255,.25); }
.fr-group-head .btn-remove:hover { background: rgba(255,255,255,.12); }
.fr-group-head .btn-remove svg { width: 16px; height: 16px; }
.fr-group-body { padding: 14px 14px 4px; }
.fr-group .lrow { border-width: 1px; }
.fr-group .add-item { min-height: 42px; }
.fr-recv { margin: 12px 0 0; border: 1px dashed var(--rule); border-radius: var(--r-s); padding: 10px 12px; background: var(--sunk); }
.fr-recv summary { cursor: pointer; font-weight: 600; color: var(--sea-ink); font-size: .9rem; }
.fr-recv[open] summary { margin-bottom: 10px; }
.fr-recv .hint { margin-bottom: 4px; }
.fr-sum { margin: 12px 0 10px; border: 1px solid var(--rule-2); border-radius: var(--r-s); overflow: hidden; }
.fr-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--rule-2); }
.fr-sum > div:first-child { border-top: 0; }
.fr-sum > div[hidden] { display: none; }
.fr-sum dt { color: var(--ink-2); font-size: .88rem; min-width: 0; }
.fr-sum dt small { display: block; color: var(--ink-3); font-size: .78rem; }
.fr-sum dd { margin: 0; font-weight: 600; white-space: nowrap; }
.fr-sum .need { background: var(--sea-bg); }
.fr-sum .need dt, .fr-sum .need dd { color: var(--hull); font-weight: 700; }
.fr-totals { margin-top: 16px; }
#fr-add-group { margin-bottom: 4px; }
@media (min-width: 700px) { .fr-sum { max-width: 520px; margin-left: auto; } .fr-group-body { padding: 16px 18px 6px; } }

/* Tampilan Fund Request di halaman dokumen */
.fr-balance { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; border-left: 4px solid var(--sea); }
.fr-balance .lbl { display: block; font-size: .78rem; color: var(--ink-3); font-weight: 550; }
.fr-balance .acct { display: block; font-weight: 600; overflow-wrap: anywhere; }
.fr-balance .num { font-size: 1.3rem; font-weight: 700; color: var(--hull); letter-spacing: -.01em; }
.ledger-wrap { container-type: inline-size; }
.ledger-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ledger-table th { text-align: left; font-size: .76rem; color: var(--ink-3); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--rule); background: var(--sunk); white-space: nowrap; }
.ledger-table td { padding: 10px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: top; overflow-wrap: anywhere; }
.ledger-table .r { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-table th:first-child, .ledger-table td:first-child { padding-left: 18px; }
.ledger-table th:last-child, .ledger-table td:last-child { padding-right: 18px; }
.ledger-table .no { width: 36px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ledger-table td.desc { font-weight: 600; }
.ledger-table .sub { display: none; }
.ledger-table td.c-acc { font-variant-numeric: tabular-nums; }
.ledger-table td.amt { font-weight: 600; }
.ledger-table tr.g-title td { background: var(--sunk); font-weight: 700; color: var(--hull); text-transform: uppercase; letter-spacing: .02em; font-size: .86rem; }
.ledger-table tr.g-title small { display: block; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--ink-2); font-size: .8rem; margin-top: 2px; }
.ledger-table tr.g-sum td { font-weight: 600; color: var(--ink-2); padding-top: 7px; padding-bottom: 7px; text-align: right; }
.ledger-table tr.g-sum td.r { color: var(--ink); }
.ledger-table tr.g-sum.minus td { color: var(--stop-ink); }
.ledger-table tr.g-sum.need td { color: var(--hull); font-weight: 700; background: var(--sea-bg); }
.ledger-table tfoot tr.grand td { background: var(--hull); color: #fff; font-weight: 700; font-size: 1.02rem; border-bottom: 0; text-align: right; }
@container (max-width: 760px) {
  .ledger-table thead { display: none; }
  .ledger-table tr.ln { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 0 10px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); align-items: baseline; }
  .ledger-table tr.ln td { padding: 0; border: 0; }
  .ledger-table tr.ln td:first-child, .ledger-table tr.ln td:last-child { padding: 0; }
  .ledger-table .c-recv, .ledger-table .c-bank, .ledger-table .c-acc { display: none; }
  .ledger-table .sub { display: block; font-weight: 400; color: var(--ink-2); font-size: .84rem; margin-top: 3px; font-variant-numeric: tabular-nums; }
  .ledger-table tr.g-title td { display: block; padding: 10px 16px; }
  .ledger-table tr.g-sum, .ledger-table tfoot tr.grand { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule-2); }
  .ledger-table tr.g-sum td, .ledger-table tfoot tr.grand td { display: block; border: 0; padding: 8px 16px; text-align: left; }
  .ledger-table tr.g-sum td.r, .ledger-table tfoot tr.grand td.r { text-align: right; padding-left: 0; }
  .ledger-table tr.g-sum.need, .ledger-table tfoot tr.grand { background: inherit; }
  .ledger-table tr.g-sum.need { background: var(--sea-bg); }
  .ledger-table tfoot tr.grand { background: var(--hull); }
  .ledger-table tr.g-sum td:first-child { min-width: 0; }
}

/* Kartu dokumen referensi di form voucher */
.ref-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; border: 1.5px solid var(--rule); border-left: 4px solid var(--sea); border-radius: var(--r-s); padding: 12px 14px; background: var(--sunk); }
.ref-card .ref-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ref-card .ref-type { font-size: .76rem; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.ref-card .docno { font-weight: 700; overflow-wrap: anywhere; }
.ref-card .ref-title { color: var(--ink-2); font-size: .9rem; }
.ref-card .ref-nums { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.ref-card .ref-nums dt { font-size: .76rem; color: var(--ink-3); font-weight: 550; }
.ref-card .ref-nums dd { margin: 1px 0 0; font-weight: 650; white-space: nowrap; }
.ref-card .ref-nums .left dd { color: var(--go-ink); }
#vc-limit-msg { color: var(--stop-ink); font-weight: 600; margin: 10px 0 0; }
.fr-sum .need.bad { background: var(--stop-bg); } .fr-sum .need.bad dt, .fr-sum .need.bad dd { color: var(--stop-ink); }
.linked-docs .ld-side { flex-wrap: wrap; min-width: 0; }
.linked-docs .ld-side b { white-space: nowrap; }

/* ---------- Admin: penyederhanaan hak akses ---------- */
.callout { border: 1px solid #CFE2F6; border-left: 4px solid var(--sea); background: var(--sea-bg); color: #163E6B; border-radius: var(--r-s); padding: 12px 14px; margin-bottom: 16px; font-size: .92rem; line-height: 1.5; }
.callout b { color: var(--hull); }
.section-note { font-size: .87rem; margin: -4px 0 14px; }
.h-note { font-size: .82rem; font-weight: 500; margin-left: 4px; }
.preset-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.preset { display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 10px 12px; color: var(--ink); background: var(--surface); }
.preset:hover { border-color: var(--sea); text-decoration: none; background: #FAFCFF; }
.preset b { color: var(--hull); }
.preset small { color: var(--ink-2); font-size: .82rem; }
.preset.on { border-color: var(--hull); box-shadow: inset 0 0 0 1px var(--hull); background: #F3F3FB; }

.access-table { container-type: inline-size; }
.access-head { display: none; }
.access-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 0; border-top: 1px solid var(--rule-2); }
.access-head + .access-row { border-top: 0; padding-top: 0; }
.access-name { font-weight: 650; color: var(--hull); display: flex; flex-direction: column; gap: 2px; }
.access-name small { font-weight: 500; color: var(--ink-3); font-size: .8rem; }
.access-name .tag-warn { color: var(--signal-ink); }
.toggle { display: flex; align-items: flex-start; gap: 10px; border: 1.5px solid var(--rule); border-radius: var(--r-s); padding: 10px 12px; cursor: pointer; background: var(--surface); }
.toggle:hover { border-color: #BCC4D4; }
.toggle input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--hull); flex: none; }
.toggle span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.toggle b { font-weight: 600; color: var(--ink); font-size: .92rem; }
.toggle small { color: var(--ink-2); font-size: .8rem; }
.toggle:has(input:checked) { border-color: var(--hull); background: #F3F3FB; box-shadow: inset 0 0 0 1px var(--hull); }
.toggle:has(input:focus-visible) { outline: 2px solid var(--sea); outline-offset: 2px; }
.access-sub { font-size: .9rem; padding: 2px 2px 0; }
.access-sub[hidden] { display: none; }
@container (min-width: 760px) {
  .access-head, .access-row { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 1fr); gap: 10px 14px; align-items: center; }
  .access-head { display: grid; font-size: .78rem; font-weight: 600; color: var(--ink-3); padding-bottom: 8px; border-bottom: 1px solid var(--rule); margin-bottom: 14px; }
  .access-row .toggle b { display: none; }
  .access-sub { grid-column: 2 / -1; }
}

.access-levels .level-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--rule-2); }
.access-levels .level-row:first-child { border-top: 0; padding-top: 0; }
.seg { display: inline-flex; border: 1.5px solid var(--rule); border-radius: 999px; padding: 3px; background: var(--sunk); gap: 2px; }
.seg label { position: relative; cursor: pointer; margin: 0; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: block; padding: 6px 16px; border-radius: 999px; font-size: .88rem; font-weight: 550; color: var(--ink-2); min-width: 64px; text-align: center; }
.seg input:checked + span { background: var(--hull); color: #fff; }
.seg input[value="none"]:checked + span { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(23,25,63,.12); }
.seg input[data-sod]:checked + span { background: var(--signal); }
.seg input:focus-visible + span { outline: 2px solid var(--sea); outline-offset: 1px; }
fieldset:disabled .seg, fieldset:disabled .toggle { opacity: .8; cursor: default; }

.role-sum { flex-basis: 100%; display: flex; flex-direction: column; gap: 1px; font-size: .84rem; color: var(--ink-2); margin-top: 4px; }
.role-sum em { font-style: normal; font-weight: 600; color: var(--ink); }
.check-grid { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); margin-bottom: 8px; }
.approve-preview { margin-top: 14px; padding: 12px 14px; border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--rule-2); font-size: .9rem; }
.approve-preview ul { margin: 6px 0 0; padding-left: 18px; }
.approve-preview li { margin: 2px 0; }
.admin-access > summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; cursor: pointer; list-style: none; }
.admin-access > summary::-webkit-details-marker { display: none; }
.admin-access > summary::before { content: "›"; font-weight: 700; color: var(--sea-ink); transform: rotate(0deg); transition: transform .15s; display: inline-block; }
.admin-access[open] > summary::before { transform: rotate(90deg); }
.admin-access > summary h2 { margin: 0; }
.admin-access > summary .muted { font-size: .86rem; }

/* Matriks approval: daftar */
.rule-cards { list-style: none; margin: 0; padding: 0; }
.rule-cards > li { padding: 14px 0; border-top: 1px solid var(--rule-2); }
.rule-cards > li:first-child { border-top: 0; padding-top: 2px; }
.rule-cards > li.off { opacity: .6; }
.rule-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px 16px; flex-wrap: wrap; }
.rule-head > span:first-child { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.rule-head small { flex-basis: 100%; color: var(--ink-3); }
.rule-head .btn-row { flex: none; }
.flow-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 30px; }
.flow-chips li { display: flex; align-items: flex-start; gap: 8px; border: 1px solid var(--rule); border-radius: var(--r-s); padding: 8px 12px 8px 8px; background: var(--sunk); min-width: 0; max-width: 100%; position: relative; }
.flow-chips li + li::before { content: "→"; position: absolute; left: -15px; top: 50%; transform: translate(-50%, -50%); color: var(--ink-3); font-size: .95rem; line-height: 1; }
.flow-chips .n { width: 22px; height: 22px; border-radius: 50%; background: var(--hull); color: #fff; font-size: .75rem; font-weight: 700; display: grid; place-items: center; flex: none; margin-top: 1px; }
.flow-chips .t { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.flow-chips b { font-size: .9rem; color: var(--ink); }
.flow-chips small { font-size: .78rem; color: var(--ink-2); overflow-wrap: anywhere; }
.flow-chips small.who { color: var(--go-ink); font-weight: 550; }
.flow-chips li.empty { border-color: #EFC1C6; background: var(--stop-bg); }
.flow-chips li.empty small.who { color: var(--stop-ink); }
@media (max-width: 559px) {
  /* HP: tahap sebagai garis waktu ringkas, tanpa kotak per tahap */
  .flow-chips { flex-direction: column; gap: 0; margin-top: 12px; }
  .flow-chips li { border: 0; background: none; padding: 0 0 12px 0; border-radius: 0; }
  .flow-chips li:last-child { padding-bottom: 0; }
  .flow-chips li + li::before { content: none; }
  .flow-chips li:not(:last-child)::after { content: ""; position: absolute; left: 10px; top: 26px; bottom: 2px; width: 2px; background: var(--rule-2); }
  .flow-chips li.empty { background: none; }
  .flow-chips li.empty .n { background: var(--stop); }
}
.scope-box { margin-top: 4px; border: 1px dashed var(--rule); border-radius: var(--r-s); padding: 10px 12px; background: var(--sunk); }
.scope-box > summary { cursor: pointer; font-weight: 600; color: var(--sea-ink); font-size: .92rem; }
.scope-box > summary small { color: var(--ink-3); font-weight: 500; }
@media (max-width: 699px) {
  .master-table thead { display: none; }
  .master-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--rule-2); }
  .master-table td { display: block; border: 0; padding: 0; grid-column: 1; font-size: .86rem; color: var(--ink-2); }
  .master-table td.name { font-size: .94rem; color: var(--ink); }
  .master-table td:last-child { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
}
.master-table tr.inactive td { color: var(--ink-3); }

/* Format nomor */
.nf-list { list-style: none; margin: 0; padding: 0; }
.nf-list > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 20px; padding: 14px 18px; border-top: 1px solid var(--rule-2); }
.nf-list > li:first-child { border-top: 0; }
.nf-type { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.nf-type b { color: var(--hull); }
.nf-row { display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 4px 0; }
.nf-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.nf-example { font-family: var(--mono); font-weight: 600; font-size: .98rem; color: var(--ink); overflow-wrap: anywhere; }
.nf-main small { color: var(--ink-3); overflow-wrap: anywhere; }
@media (min-width: 900px) { .nf-list > li { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } .nf-type { padding-top: 6px; } }
.mono-input { font-family: var(--mono) !important; }
.nf-preview { margin-top: 8px; font-size: .9rem; color: var(--ink-2); }
.nf-preview b { font-family: var(--mono); color: var(--go-ink); overflow-wrap: anywhere; }
.token-legend { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr)); gap: 8px; margin: 4px 0 8px; }
.token-legend button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r-s); padding: 7px 10px; cursor: pointer; font: inherit; color: var(--ink); }
.token-legend button:hover { border-color: var(--sea); background: #FAFCFF; }
.token-legend .code { font-size: .84rem; }
.token-legend small { color: var(--ink-2); font-size: .78rem; }

.checklist .item-note { display: block; margin-top: 1px; font-size: .84rem; color: var(--ink-2); }
.admin-access > summary .muted { font-weight: 500; }

/* Istilah: Pengguna / Jabatan / Hak akses (ringkas) */
.concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--surface); margin-bottom: 18px; overflow: hidden; }
.concept { display: flex; flex-direction: column; gap: 1px; padding: 10px 14px; color: var(--ink); border-left: 1px solid var(--rule-2); }
.concept:first-child { border-left: 0; }
.concept:hover { background: #FAFBFD; text-decoration: none; }
.concept.on { background: #F3F4FB; box-shadow: inset 0 -3px 0 var(--hull); }
.concept b { color: var(--hull); font-size: .92rem; }
.concept small { color: var(--ink-2); font-size: .82rem; line-height: 1.35; }
.concept em { font-style: normal; font-weight: 650; color: var(--ink); }
@media (max-width: 560px) {
  .concepts { grid-template-columns: minmax(0, 1fr); }
  .concept { flex-direction: row; align-items: baseline; gap: 8px; border-left: 0; border-top: 1px solid var(--rule-2); padding: 9px 14px; }
  .concept:first-child { border-top: 0; }
  .concept b { flex: 0 0 76px; }
  .concept.on { box-shadow: inset 3px 0 0 var(--hull); }
}

/* Kartu hak akses */
.role-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.role-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 16px 18px 0; color: var(--ink); }
.role-card:hover { border-color: var(--sea); text-decoration: none; box-shadow: 0 2px 10px rgba(20, 24, 60, .06); }
.rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rc-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.rc-title b { color: var(--hull); font-size: 1.08rem; }
.rc-count { font-size: .84rem; color: var(--ink-2); white-space: nowrap; padding-top: 3px; }
.rc-count b { color: var(--ink); }
.rc-desc { margin: 6px 0 0; font-size: .88rem; color: var(--ink-2); line-height: 1.45; min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rc-rows { margin: 12px 0 0; padding: 0; border-top: 1px solid var(--rule-2); }
.rc-rows > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--rule-2); }
.rc-rows dt { font-size: .82rem; color: var(--ink-3); padding-top: 2px; }
.rc-rows dd { margin: 0; display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.rc-chip { display: inline-block; padding: 1px 8px; border-radius: 5px; background: #EEF0F8; color: var(--hull); font-size: .8rem; font-weight: 600; line-height: 1.6; }
.rc-none { color: var(--ink-3); font-size: .86rem; }
.rc-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 14px; font-size: .84rem; }
.rc-people { color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-go { color: var(--sea); font-weight: 600; white-space: nowrap; }

/* Langkah setup */
.setup-list { list-style: none; margin: 0; padding: 0; }
.setup-list li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule-2); }
.setup-list li:first-child { border-top: 0; padding-top: 4px; }
.setup-list .mark { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: .78rem; font-weight: 700; flex: none; border: 1.5px solid var(--rule); color: transparent; }
.setup-list .done .mark { background: var(--go); border-color: var(--go); color: #fff; }
.setup-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.setup-main a { font-weight: 600; }
.setup-main small { color: var(--ink-2); font-size: .84rem; line-height: 1.4; }
.setup-state { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; text-align: right; }
.setup-state small { color: var(--ink-3); font-size: .8rem; white-space: nowrap; }
@media (max-width: 560px) {
  .setup-list li { flex-wrap: wrap; align-items: flex-start; }
  .setup-state { flex-basis: 100%; flex-direction: row; align-items: center; justify-content: flex-start; padding-left: 36px; gap: 8px; }
}

.ready-list { display: flex; flex-direction: column; }
.ready-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px 0; border-top: 1px solid var(--rule-2); }
.ready-row:first-child { border-top: 0; padding-top: 4px; }
.ready-name { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ready-name b { color: var(--hull); }
.ready-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ready-checks li { display: flex; gap: 8px; align-items: flex-start; min-width: 0; }
.ready-checks li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.ready-checks a { font-weight: 600; font-size: .9rem; }
.ready-checks small { color: var(--ink-2); font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; }
.rc-ico { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: .7rem; font-weight: 800; flex: none; margin-top: 1px; }
.ready-checks .ok .rc-ico { background: var(--go-bg); color: var(--go-ink); }
.ready-checks .no .rc-ico { background: var(--signal-bg); color: var(--signal-ink); }
.ready-checks .no small { color: var(--signal-ink); }
@media (min-width: 900px) {
  .ready-row { grid-template-columns: 220px minmax(0, 1fr); align-items: start; gap: 20px; }
  .ready-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Halaman Akun */
.account { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.account .panel { margin: 0; }
.acc-col { display: contents; }
/* Urutan: profil, tanda tangan, keamanan, perusahaan, pengalihan */
.acc-head { order: 1; } .acc-sig { order: 2; } .acc-sec { order: 3; } .acc-comp { order: 4; } .acc-away { order: 5; }
.account > *, .acc-col > * { min-width: 0; }
/* Layar lebar: dua kolom sama lebar. Kiri: profil, tanda tangan, perusahaan. Kanan: keamanan, pengalihan. */
@media (min-width: 1100px) {
  .account { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .acc-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
}
.account-head { display: flex; align-items: center; gap: 14px; }
.avatar.lg { width: 52px; height: 52px; font-size: 1.05rem; }
.ah-main { flex: 1; min-width: 0; }
.ah-main h1 { margin: 0; font-size: 1.3rem; }
.ah-main p { margin: 2px 0 0; color: var(--ink-2); font-size: .9rem; overflow-wrap: anywhere; }
.set-group h2 { margin-bottom: 10px; }
.set-list { list-style: none; margin: 0; padding: 0; }
.set-list > li + li { border-top: 1px solid var(--rule-2); }
.set-item { padding: 16px 0; }
.set-list > li:first-child { padding-top: 2px; }
.set-list > li:last-child { padding-bottom: 0; }
.set-row { display: flex; align-items: center; gap: 12px; }
.set-ico { width: 38px; height: 38px; border-radius: 10px; background: #EEF0F8; color: var(--hull); display: grid; place-items: center; flex: none; }
.set-ico svg { width: 20px; height: 20px; }
.set-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.set-body > b { color: var(--hull); font-size: .98rem; }
.set-body > small { color: var(--ink-2); font-size: .85rem; line-height: 1.4; }
.set-row > .pill, .set-row > .btn { flex: none; }
.set-kv { margin: 6px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; font-size: .88rem; }
.set-kv > div { display: contents; }
.set-kv dt { color: var(--ink-3); }
.set-kv dd { margin: 0; color: var(--ink); }
.acc-comp .set-row { flex-wrap: wrap; row-gap: 10px; }
.acc-comp .set-row > .set-body { flex-basis: 100%; }
.set-foot { margin: 12px 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.45; }
.device-list { list-style: none; margin: 12px 0 0 50px; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-m); }
.device-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; }
.device-list li + li { border-top: 1px solid var(--rule-2); }
.device-list li > span { display: flex; flex-direction: column; min-width: 0; }
.device-list b { font-size: .92rem; }
.device-list small { color: var(--ink-3); font-size: .8rem; }
/* Form lipat: tombol pembuka disembunyikan saat form terbuka, tutup lewat "Batal" */
.set-form { margin: 12px 0 0 50px; }
.set-form > summary { list-style: none; display: inline-flex; }
.set-form > summary::-webkit-details-marker { display: none; }
.set-form[open] > summary { display: none; }
.set-form-body { border: 1px solid var(--rule-2); border-radius: var(--r-m); background: #FAFBFD; padding: 16px; }
.set-fields { display: grid; gap: 0 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .set-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.set-fields .field { margin-bottom: 14px; }
.set-fields input { width: 100%; min-height: 46px; font-size: 1rem; }
.pin-field { letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.set-msg { margin: 0 0 10px; font-size: .86rem; color: var(--ink-2); }
.set-msg:empty { display: none; }
.set-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.set-form-body .hint { margin: 12px 0 0; font-size: .82rem; color: var(--ink-3); line-height: 1.45; }
@media (max-width: 560px) {
  .set-row { flex-wrap: wrap; row-gap: 8px; }
  .set-ico { width: 34px; height: 34px; }
  .set-row:has(> .pill) { align-items: flex-start; }
  .set-row:has(> .pill) > .set-body { flex-basis: calc(100% - 46px); }
  .set-row > .pill { margin-left: 46px; }
  .set-row:not(:has(> .set-ico)) > .set-body { flex-basis: 100%; }
  .set-row:not(:has(> .set-ico)) > .pill { margin-left: 0; }
  .device-list, .set-form { margin-left: 0; }
  .set-actions .btn { white-space: nowrap; }
  .account-head { flex-wrap: wrap; }
}

/* Modal (dialog bawaan browser) */
dialog.modal { border: 0; padding: 0; border-radius: var(--r-l); width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(11, 10, 86, .28); }
dialog.modal::backdrop { background: rgba(11, 10, 86, .42); }
.modal-box { display: flex; flex-direction: column; max-height: inherit; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px 6px; }
.modal-head h2 { margin: 0; font-size: 1.15rem; }
.modal-x { border: 0; background: transparent; font-size: 1.6rem; line-height: 1; width: 36px; height: 36px; border-radius: 8px; color: var(--ink-2); cursor: pointer; }
.modal-x:hover { background: var(--rule-2); color: var(--ink); }
.modal-body { padding: 10px 18px 2px; overflow-y: auto; }
.modal-body input { width: 100%; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px 18px; border-top: 1px solid var(--rule-2); }
@media (max-width: 560px) { .modal-foot .btn { flex: 1; } }

/* Input telepon: kode negara + nomor dalam satu kotak */
.tel-input { display: flex; align-items: stretch; border: 1.5px solid var(--rule); border-radius: var(--r-s); background: var(--surface); transition: border-color .12s, box-shadow .12s; }
.tel-input:hover { border-color: #BCC4D4; }
.tel-input:focus-within { border-color: var(--sea); box-shadow: 0 0 0 4px rgba(68,153,224,.18); }
.tel-input:has(.tel-num.invalid) { border-color: var(--stop); }
.tel-cc { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 26px 0 12px; border-right: 1px solid var(--rule-2); flex: none; color: var(--ink); font-weight: 600; font-size: .95rem; white-space: nowrap; }
.tel-cc::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid var(--ink-3); border-bottom: 1.5px solid var(--ink-3); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.tel-cc-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; min-height: 0 !important; border: 0 !important; padding: 0 !important; }
.tel-cc:focus-within { background: #F3F6FB; }
.tel-input > .tel-num { flex: 1; min-width: 0; border: 0 !important; box-shadow: none !important; background: transparent; min-height: 43px; padding-left: 10px; font-variant-numeric: tabular-nums; }
.tel-input:has(.tel-num:disabled) { background: var(--sunk); }
.affix:has(input.invalid) { border-color: var(--stop); box-shadow: 0 0 0 4px rgba(196,43,58,.12); }
.affix > input.invalid { box-shadow: none !important; }
.price-check { margin: 12px 0 0; }

/* Verifikasi publik (QR) */
.vp-result { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--r-m); margin-bottom: 16px; border: 1px solid; }
.vp-result b { font-size: 1.02rem; }
.vp-result span { font-size: .9rem; line-height: 1.45; }
.vp-result.ok { background: var(--go-bg); border-color: #BFE3CF; color: var(--go-ink); }
.vp-result.warn { background: var(--signal-bg); border-color: #F2D2B6; color: var(--signal-ink); }
.vp-result.bad { background: var(--stop-bg); border-color: #F0C2C7; color: var(--stop-ink); }
.vp-kv { margin: 0 0 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: .9rem; }
.vp-kv > div { display: contents; }
.vp-kv dt { color: var(--ink-3); }
.vp-kv dd { margin: 0; overflow-wrap: anywhere; }
.vp-kv .mono { font-family: var(--mono); font-size: .86rem; }
.vp-h { font-size: 1rem; margin: 0 0 8px; }
.vp-steps { list-style: none; margin: 0; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-m); }
.vp-steps li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px; }
.vp-steps li + li { border-top: 1px solid var(--rule-2); }
.vp-role { font-weight: 600; color: var(--hull); font-size: .9rem; }
.vp-stamp { font-size: .78rem; font-weight: 600; justify-self: end; color: var(--go-ink); }
.vp-steps .rejected .vp-stamp { color: var(--stop-ink); }
.vp-steps .waiting .vp-stamp, .vp-steps .voided .vp-stamp { color: var(--ink-3); }
.vp-who { grid-column: 1 / -1; font-size: .88rem; }
.vp-who small { color: var(--ink-3); }
.vp-when { grid-column: 1 / -1; font-size: .8rem; color: var(--ink-3); }
.vp-foot { margin: 14px 0 0; font-size: .8rem; color: var(--ink-3); line-height: 1.45; }
.doc-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 16px; }
.doc-tools .btn svg { width: 17px; height: 17px; }
.logo-current { display: flex; align-items: center; gap: 16px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: #fff; }
.logo-current img { max-height: 48px; max-width: 200px; object-fit: contain; }
.parked { margin-top: 12px; border: 1px dashed var(--rule); border-radius: var(--r-m); padding: 10px 12px; background: #FAFBFD; }
.parked-title { margin: 0 0 6px; font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.parked ul { list-style: none; margin: 0; padding: 0; }
.parked li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-size: .9rem; }
.parked li + li { border-top: 1px solid var(--rule-2); }
input[readonly] { background: var(--sunk); color: var(--ink-2); }

/* Pengajuan saya */
.tabs-count .n { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--rule-2); color: var(--ink-2); font-size: .74rem; font-weight: 600; text-align: center; }
.tabs-count a[aria-current="true"] .n { background: rgba(255,255,255,.2); color: #fff; }
.list-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 14px; }
.list-tools .field { margin: 0; }
.list-tools .lt-q { grid-column: 1 / -1; }
.list-tools select, .list-tools input { min-height: 44px; }
.list-tools .btn { display: none; }
@media (min-width: 760px) {
  .list-tools { grid-template-columns: minmax(0, 1fr) 200px 230px auto; }
  .list-tools .lt-q { grid-column: auto; }
  .list-tools .btn { display: inline-flex; }
}
.mylist { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden; }
.mylist > li { border-top: 1px solid var(--rule-2); position: relative; }
.mylist > li:first-child { border-top: 0; }
.mylist > li::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--co, var(--hull)); }
.mylist a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; padding: 14px 16px 14px 18px; color: var(--ink); text-decoration: none; }
.mylist a:hover { background: #FAFBFD; }
.ml-doc { display: flex; flex-direction: column; gap: 3px; min-width: 0; grid-column: 1 / -1; }
.ml-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ml-type { font-size: .7rem; font-weight: 700; letter-spacing: .04em; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 4px; padding: 0 5px; }
.ml-title { font-weight: 600; font-size: 1rem; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ml-co { font-size: .82rem; color: var(--ink-3); }
.ml-status { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; }
.ml-status small, .ml-date small { font-size: .8rem; color: var(--ink-2); line-height: 1.35; }
.ml-date { display: flex; flex-wrap: wrap; gap: 2px 8px; grid-column: 1 / -1; font-size: .8rem; color: var(--ink-3); }
.ml-date small { color: var(--ink-3); }
.ml-amount { font-weight: 700; color: var(--hull); font-variant-numeric: tabular-nums; white-space: nowrap; align-self: start; text-align: right; }
.mylist-head { display: none; }
@media (min-width: 1100px) {
  .mylist a { grid-template-columns: minmax(0, 1fr) 250px 170px 170px; align-items: center; gap: 0 20px; }
  .ml-doc { grid-column: auto; }
  .ml-date { grid-column: auto; flex-direction: column; gap: 2px; font-size: .88rem; color: var(--ink); }
  .ml-date small { color: var(--ink-2); }
  .ml-amount { align-self: center; }
  .mylist-head { display: grid; grid-template-columns: minmax(0, 1fr) 250px 170px 170px; gap: 0 20px; padding: 0 16px 8px 18px; font-size: .78rem; font-weight: 600; color: var(--ink-3); }
  .mylist-head span:last-child { text-align: right; }
}

/* Panel saring di daftar: selalu terlihat, ringkas */
.filter-panel { padding-top: 14px; padding-bottom: 12px; }
.filter-panel .grid-fields { gap: 0 12px; }
.filter-panel .field { margin-bottom: 10px; }
.filter-panel .field label { font-size: .78rem; margin-bottom: 4px; color: var(--ink-2); }
.filter-panel input, .filter-panel select { min-height: 42px; }
.filter-panel .filter-actions { margin-top: 2px; }
@media (max-width: 719px) {
  .filter-panel .grid-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-panel .grid-fields > .field:first-child { grid-column: 1 / -1; }
}
.pill.po-open { background: #FFF4E5; color: #8A4B0B; }
.pill.po-partial { background: #EAF2FD; color: #1D4F91; }
.pill.po-done { background: var(--go-bg); color: var(--go-ink); }
.pills { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.need-po { display: flex; align-items: center; gap: 6px; margin-bottom: 14px; padding: 11px 14px; border-radius: var(--r-m); background: #FFF4E5; border: 1px solid #F3D9B5; color: #7A4309; text-decoration: none; font-size: .92rem; }
.need-po:hover { text-decoration: none; border-color: #E8BF86; }
.need-po .np-text { flex: 1; min-width: 0; }
.need-po .np-go { flex: none; }
.npwp-hint[data-state="ok"] { color: var(--go-ink); }
.npwp-hint[data-state="wait"] { color: var(--ink-3); }
.ctl-table { display: flex; flex-direction: column; gap: 10px; }
.ctl-head { display: none; }
.ctl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-2); }
.ctl-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ctl-name { font-weight: 600; color: var(--hull); font-size: .92rem; }
.ctl-row input { width: 100%; }
@media (min-width: 900px) {
  .ctl-head, .ctl-row { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 10px; align-items: center; }
  .ctl-head { font-size: .78rem; font-weight: 600; color: var(--ink-3); }
  .ctl-row { border-bottom: 0; padding-bottom: 0; }
}

/* ===== HP: tampilan lebih lega dan mudah dibaca ===== */
.more-filters, .show-rows { display: none; }
.kv > div.wide { grid-column: 1 / -1; }
@media (max-width: 699px) {
  body { line-height: 1.6; }
  h1 { font-size: 1.42rem; }
  h2 { font-size: 1.06rem; margin-bottom: .6rem; }
  .page-head p { font-size: .94rem; line-height: 1.5; }
  small, .hint, .section-note { line-height: 1.5; }
  .field .hint { font-size: .84rem; }
  .panel { padding: 16px 16px 18px; margin-bottom: 14px; }
  .field { margin-bottom: 18px; }
  .field label, .label { font-size: .9rem; margin-bottom: 7px; }
  .muted { line-height: 1.5; }

  /* Baris barang di form: tanpa kotak bertumpuk, cukup garis pemisah */
  .item-row { border: 0; border-top: 1px solid var(--rule); border-radius: 0; margin: 0; padding-top: 4px; background: transparent; }
  .item-row:first-child { border-top: 0; }
  .item-row .row-head { background: transparent; border-bottom: 0; padding: 10px 0 2px; }
  .item-row .item-grid { padding-left: 0 !important; padding-right: 0 !important; }
  .item-row .f-sub { background: transparent; border-top: 1px dashed var(--rule-2); padding: 10px 0 14px; }

  /* Daftar: keterangan lebih tenang */
  .mmeta { gap: 6px 12px; font-size: .84rem; }
  .manifest .title { margin: 6px 0; }
  .mrow a.body { padding-top: 16px; padding-bottom: 16px; }

  /* Saring: hanya kolom cari + tombol "Saring"; isian lain dibuka bila perlu */
  .filter-panel.fp-compact { background: transparent; border: 0; padding: 0; margin-bottom: 14px; box-shadow: none; }
  .filter-panel.fp-compact .fp-search > label { display: none; }
  .filter-panel.fp-compact .fp-search { margin-bottom: 0; }
  .filter-panel.fp-compact:not(.show-all) .grid-fields > .field:nth-child(n+2) { display: none; }
  .filter-panel.fp-compact:not(.show-all) .filter-actions { display: none; }
  .filter-panel.fp-compact.show-all .grid-fields { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 14px 14px 4px; margin-top: 0; }
  .filter-panel.fp-compact.show-all .fp-search { grid-column: 1 / -1; margin: -14px -14px 12px; padding: 0; background: var(--deck); }
  .filter-panel.fp-compact .filter-actions { margin-top: 10px; }
  .filter-panel .filter-actions .btn { flex: 1; }

  /* Tabel barang panjang: 6 baris dulu */
  table.items.rows-collapsed tbody > tr:nth-child(n+7) { display: none; }
  .show-rows { display: flex; width: calc(100% - 32px); margin: 0 16px 16px; justify-content: center; }

  /* Kartu dokumen */
  .doc-plate h1 { font-size: 1.3rem; line-height: 1.3; }
  .kv dd { overflow-wrap: break-word; word-break: normal; }
}

/* ---------- Desain form PDF ---------- */
.pf-list { display: grid; gap: 10px; margin-bottom: 20px; }
.pf-card { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-m); color: var(--ink); text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.pf-card:hover { border-color: #B7BFD0; box-shadow: 0 4px 14px rgba(11,10,86,.06); text-decoration: none; }
.pf-ico { width: 42px; height: 42px; border-radius: 10px; background: var(--sea-bg); color: var(--sea-ink); display: grid; place-items: center; flex: none; }
.pf-ico svg { width: 22px; height: 22px; }
.pf-main { flex: 1; min-width: 0; }
.pf-main b { display: block; color: var(--hull); }
.pf-main small { color: var(--ink-2); }
.pf-go { color: var(--sea-ink); font-weight: 600; white-space: nowrap; }
.pf-how ol { margin: 0 0 10px; padding-left: 20px; line-height: 1.6; }
.pf-how li { margin-bottom: 4px; }
@media (max-width: 699px) { .pf-card { flex-wrap: wrap; } .pf-go { display: none; } .pf-card .pill { order: 3; margin-left: 56px; } }
.pdf-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.dz-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.dz-top h1 { margin: 2px 0 0; }
.dz-back { font-size: .9rem; color: var(--ink-2); }
.dz-types { display: inline-flex; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 3px; gap: 2px; }
.dz-types a { padding: 7px 14px; border-radius: 7px; color: var(--ink-2); font-weight: 600; font-size: .9rem; text-decoration: none; }
.dz-types a.on { background: var(--hull); color: #fff; }
.dz-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-m); }
.dz-state { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dz-saved { font-size: .85rem; color: var(--ink-3); }
.dz-saved.err { color: var(--stop); font-weight: 600; }
.dz-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dz-actions form { margin: 0; }
.dz-actions .btn.small, .dz .btn.small { min-height: 36px; padding: 0 12px; font-size: .88rem; }

.dz { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.dz-col { background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-m); min-width: 0; }
.dz-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; flex-wrap: wrap; }
.dz-head h2 { margin: 0; font-size: 1rem; }
.dz-head .muted { font-size: .8rem; }
.dz-page-btn { display: block; width: calc(100% - 20px); margin: 0 10px 8px; padding: 9px 12px; text-align: left; border: 1px dashed var(--rule); border-radius: 9px; background: var(--sunk); color: var(--ink-2); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.dz-page-btn.on { border-style: solid; border-color: var(--sea); background: var(--sea-bg); color: var(--sea-ink); }
.dz-blocks { list-style: none; margin: 0; padding: 0 10px 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dz-blocks > li { min-width: 0; }
.dz-block { display: flex; align-items: center; gap: 8px; padding: 8px 6px 8px 4px; border: 1.5px solid var(--rule-2); border-radius: 10px; background: var(--surface); cursor: pointer; user-select: none; position: relative; }
.dz-block:hover { border-color: #C7CEDB; }
.dz-block.on { border-color: var(--sea); background: #F5FAFE; box-shadow: 0 0 0 3px rgba(68,153,224,.14); }
.dz-block.half { margin-left: 18px; }
.dz-block.dragging { opacity: .45; }
.dz-block.drop-before::before, .dz-block.drop-after::after { content: ""; position: absolute; left: 4px; right: 4px; height: 3px; background: var(--sea); border-radius: 2px; }
.dz-block.drop-before::before { top: -5px; }
.dz-block.drop-after::after { bottom: -5px; }
.dz-grip { color: var(--ink-3); cursor: grab; font-size: .8rem; letter-spacing: -2px; padding: 0 2px; }
.dz-ico { width: 30px; height: 30px; border-radius: 8px; background: var(--deck); color: var(--hull); display: grid; place-items: center; flex: none; }
.dz-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dz-b-txt { flex: 1; min-width: 0; line-height: 1.3; }
.dz-b-txt b { display: block; font-size: .9rem; color: var(--hull); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-b-txt small { display: block; font-size: .78rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dz-b-act { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: flex; gap: 0; padding-left: 22px; background: linear-gradient(to right, rgba(255,255,255,0), #fff 20px); visibility: hidden; }
.dz-block.on .dz-b-act { background: linear-gradient(to right, rgba(245,250,254,0), #F5FAFE 20px); }
.dz-block.on .dz-b-act { visibility: visible; }
.dz-b-act button, .dz-row-act button { width: 26px; height: 28px; border: 0; background: transparent; border-radius: 6px; color: var(--ink-2); cursor: pointer; font-size: .95rem; }
.dz-b-act button:hover:not(:disabled), .dz-row-act button:hover:not(:disabled) { background: var(--deck); color: var(--hull); }
.dz-b-act button:disabled, .dz-row-act button:disabled { opacity: .3; cursor: default; }
.dz-b-act .del:hover, .dz-row-act .del:hover { background: var(--stop-bg) !important; color: var(--stop) !important; }
.dz-add { padding: 0 10px 12px; }
.dz-add-btn { width: 100%; }
.dz-palette { display: grid; gap: 4px; margin-top: 8px; }
.dz-pal { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px; border: 1px solid var(--rule-2); border-radius: 9px; background: var(--surface); font: inherit; cursor: pointer; color: var(--ink); }
.dz-pal:hover { border-color: var(--sea); background: #F5FAFE; }
.dz-pal b { display: block; font-size: .88rem; color: var(--hull); }
.dz-pal small { display: block; font-size: .76rem; color: var(--ink-3); line-height: 1.3; }

.dz-src { display: flex; gap: 6px; align-items: center; min-width: 0; }
.dz-src select { min-height: 36px; max-width: 260px; font-size: .88rem; }
.dz-frame { position: relative; padding: 0 10px 10px; }
.dz-frame iframe { display: block; width: 100%; height: min(78vh, 1000px); min-height: 520px; border: 1px solid var(--rule-2); border-radius: 8px; background: #525659; }
.dz-busy { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); background: var(--hull); color: #fff; font-size: .8rem; padding: 5px 12px; border-radius: 99px; box-shadow: 0 4px 14px rgba(0,0,0,.2); }

.dz-settings { padding: 0 14px 14px; }
.dz-desc { margin: 0 0 12px; font-size: .85rem; }
.dz-empty { margin: 4px 0 8px; font-size: .9rem; line-height: 1.5; }
.dz-f { margin-bottom: 14px; }
.dz-f label { font-size: .84rem; }
.dz-f select, .dz-f input[type=text], .dz-f input[type=number], .dz-f textarea { width: 100%; min-height: 38px; font-size: .9rem; }
.dz-f textarea { min-height: 84px; }
.dz-num { display: flex; gap: 8px; align-items: center; }
.dz-num input[type=range] { flex: 1; accent-color: var(--hull); min-height: 0; }
.dz-num input[type=number] { width: 84px !important; flex: none; }
.dz-color { display: flex; gap: 8px; align-items: center; }
.dz-color input[type=color] { width: 44px; height: 38px; padding: 2px; border: 1.5px solid var(--rule); border-radius: 8px; background: var(--surface); cursor: pointer; flex: none; }
.dz-color input[type=text] { width: 110px !important; font-family: var(--mono); text-transform: uppercase; }
.dz-sw { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.dz-sw button { width: 22px; height: 22px; border-radius: 6px; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--rule); cursor: pointer; padding: 0; }
.dz-insert { margin-top: 6px; font-size: .82rem !important; min-height: 32px !important; color: var(--sea-ink); }
.dz-list { display: grid; gap: 6px; }
.dz-row { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto; gap: 5px; align-items: center; }
.dz-row:has(.dz-w) { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) 52px auto; }
.dz-row select, .dz-row input { min-width: 0; width: 100%; min-height: 36px !important; font-size: .86rem !important; padding-left: 8px !important; padding-right: 8px !important; }
.dz-row select { padding-right: 24px !important; }
.dz-row input.dz-w { padding: 0 4px !important; text-align: center; }
.dz-row-act { display: flex; flex: none; }
.dz-row-act button { width: 24px; }
.dz-row-add { justify-self: start; }
.dz-group { border-top: 1px solid var(--rule-2); margin-top: 6px; padding-top: 12px; }
.dz-group-t { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.dz-asset img { display: block; max-width: 100%; max-height: 90px; margin-bottom: 8px; border: 1px solid var(--rule-2); border-radius: 6px; background: #fff; }
.dz-asset .btn { margin-bottom: 8px; }

.dz-report summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.dz-report summary::-webkit-details-marker { display: none; }
.dz-report summary h2 { margin: 0; font-size: 1rem; }
.dz-report-body { margin-top: 10px; display: grid; gap: 10px; }
.dz-report ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: .9rem; }
.dz-found li::before { content: "✓"; color: var(--go); font-weight: 700; margin-right: 8px; }
.dz-warn li { padding-left: 22px; position: relative; color: var(--signal-ink); }
.dz-warn li::before { content: "!"; position: absolute; left: 4px; font-weight: 800; }
.dz-h3 { font-size: .95rem; margin: 16px 0 8px; color: var(--hull); }
.dz-import, .dz-presets { display: grid; gap: 8px; justify-items: start; }
.dz-import input[type=file] { width: 100%; }
.dz-versions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dz-versions li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; flex-wrap: wrap; }
.dz-versions .muted { font-size: .82rem; }
.dz-v-act { display: flex; gap: 6px; }
.dz-v-act form { margin: 0; }
dialog.dz-wide-modal { width: min(620px, calc(100vw - 32px)); }
.dz-mobile-note { display: none; }

/* Lebar sedang: panel kiri bergantian Susunan / Pengaturan, pratinjau di kanan. */
.dz-back-list { display: none; }
@media (max-width: 1599px) {
  .dz[data-panel="list"] .dz-right { display: none; }
  .dz[data-panel="settings"] .dz-left { display: none; }
  .dz-back-list { display: inline-flex; }
}
@media (min-width: 1200px) {
  .dz { grid-template-columns: 380px minmax(0, 1fr); }
  .dz-left, .dz-right { grid-column: 1; grid-row: 1; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
  .dz-mid { grid-column: 2; grid-row: 1; position: sticky; top: 16px; }
}
@media (min-width: 1600px) {
  .dz { grid-template-columns: 290px minmax(0, 1fr) 410px; }
  .dz-left { grid-column: 1; }
  .dz-mid { grid-column: 2; }
  .dz-right { grid-column: 3; }
}
@media (max-width: 1199px) {
  .dz-mid { order: 3; }
  .dz-frame iframe { height: 70vh; min-height: 420px; }
  .dz-mobile-note { display: block; font-size: .85rem; margin-top: 10px; }
  .dz-actions .btn.small { flex: 1 1 auto; }
  .dz-src select { max-width: 170px; }
}
.dz-presets { width: 100%; }
.dz-presets label.check { width: 100%; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; align-items: center; }
.dz-presets label.check:has(input:checked) { border-color: var(--sea); background: #F5FAFE; }
.modal-body .dz-presets input[type=radio] { width: 20px; height: 20px; flex: none; }
.tabs-count a.tab-need:not([aria-current="true"]) .n { background: var(--signal); color: #fff; }
.mmeta .step { flex-wrap: wrap; row-gap: 0; }
.mmeta .step-sub { flex-basis: 100%; padding-left: 13px; font-size: .76rem; color: var(--ink-3); font-weight: 500; line-height: 1.35; }

/* ---------- Termin pembayaran PO ---------- */
.term-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 12px; font-size: .86rem; }
.term-presets .btn.small { min-height: 34px; padding: 0 10px; font-size: .84rem; }
.terms-head, .term-row { display: grid; grid-template-columns: 26px minmax(0, 1.2fr) 100px 150px minmax(0, 1.6fr) 36px; gap: 8px; align-items: center; }
.terms-head { font-size: .78rem; font-weight: 600; color: var(--ink-3); padding: 0 0 6px; }
.terms { display: grid; gap: 8px; }
.term-no { font-weight: 700; color: var(--ink-3); text-align: center; }
.term-pct { display: flex; align-items: center; gap: 4px; }
.term-pct input { text-align: right; min-width: 0; }
.term-amt { text-align: right; font-weight: 600; color: var(--hull); }
.term-x { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-3); font-size: 1.2rem; cursor: pointer; }
.term-x:hover:not(:disabled) { background: var(--stop-bg); color: var(--stop); }
.term-x:disabled { opacity: .3; cursor: default; }
.terms-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.term-sum { font-weight: 600; color: var(--go-ink); }
.term-sum.error { color: var(--stop); }
@media (max-width: 699px) {
  .terms-head { display: none; }
  .term-row { grid-template-columns: 22px minmax(0, 1fr) 96px 30px; grid-template-areas: "no label pct x" "no amt amt amt" "no note note note"; padding: 10px 0; border-bottom: 1px solid var(--rule-2); }
  .term-row > .term-no { grid-area: no; align-self: start; padding-top: 10px; }
  .term-row > input[name$="[label]"] { grid-area: label; }
  .term-row > .term-pct { grid-area: pct; }
  .term-row > .term-amt { grid-area: amt; text-align: left; }
  .term-row > input[name$="[note]"] { grid-area: note; }
  .term-row > .term-x { grid-area: x; width: 30px; }
}

/* Tabel termin & status bayar di halaman dokumen */
.pay-terms { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pay-terms th { text-align: left; font-size: .76rem; font-weight: 600; color: var(--ink-3); padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.pay-terms td { padding: 9px 8px; border-bottom: 1px solid var(--rule-2); vertical-align: middle; }
.pay-terms td.num, .pay-terms th.num { text-align: right; }
.pay-terms small { display: block; color: var(--ink-3); font-size: .78rem; }
.pay-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.pill.pay-paid { background: var(--go-bg); color: var(--go-ink); }
.pill.pay-partial { background: #EAF2FD; color: #1D4F91; }
.pill.pay-unpaid { background: #FFF4E5; color: #8A4B0B; }
.pill.pay-open { background: #F1F2F6; color: #5B6175; }
.pill.pay-process { background: #EAF2FD; color: #1D4F91; }
.pay-record { display: grid; gap: 4px; }
.pay-record dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; font-size: .92rem; }
.pay-record dt { color: var(--ink-3); }
.pay-record dd { margin: 0; }
.pay-form { border-top: 1px solid var(--rule-2); margin-top: 12px; padding-top: 12px; }
.pay-history { margin-top: 10px; font-size: .84rem; color: var(--ink-3); }
@media (max-width: 699px) { .pay-terms .hide-m { display: none; } }
.term-pick { margin-top: 14px; }
.term-pick-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.term-pick-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 9px 12px; border: 1.5px solid var(--rule-2); border-radius: 10px; }
.term-pick-list li.on { border-color: var(--sea); background: #F5FAFE; }
.term-pick-list li.off { opacity: .6; }
.term-pick-list small { display: block; color: var(--ink-3); font-size: .78rem; }
.tp-amt { font-weight: 700; color: var(--hull); }
@media (max-width: 699px) { .term-pick-list li { grid-template-columns: minmax(0, 1fr) auto; } .tp-st { grid-column: 1 / -1; } }

/* ---------- Permintaan bayar PO ---------- */
.preq-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.preq-row { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 16px; background: var(--paper, #fff); border: 1px solid var(--rule-2); border-radius: 12px; color: inherit; text-decoration: none; flex-wrap: wrap; }
a.preq-row { transition: border-color .15s, box-shadow .15s, background .15s; }
a.preq-row:hover, a.preq-row:focus-visible { text-decoration: none; border-color: #B9D5F2; background: #FAFCFF; box-shadow: 0 2px 10px rgba(11, 10, 86, .06); }
a.preq-row:hover .preq-title { color: var(--hull); }
a.preq-row .code { text-decoration: none; }
.preq-main { display: grid; gap: 2px; min-width: 0; flex: 1 1 260px; }
.preq-top { font-size: .84rem; color: var(--ink-3); }
.preq-top .code { color: var(--hull); }
.preq-title { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.preq-side { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.preq-side b { white-space: nowrap; color: var(--hull); }
.preq-list.compact .preq-row { padding: 10px 12px; }
.preq-pick { margin-bottom: 16px; }
.preq-pick .label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: 6px; }
.preq-amount { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin: 12px 0 10px; background: #F5FAFE; border: 1px solid #D6E6F7; border-radius: 10px; }
.preq-amount b.num { font-size: 1.25rem; color: var(--hull); }
.preq-actions { margin-top: 14px; display: grid; gap: 10px; justify-items: start; }
.preq-actions details summary { list-style: none; cursor: pointer; }
.preq-actions details summary::-webkit-details-marker { display: none; }
.pay-record-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .92rem; }
.pay-record-dl dt { color: var(--ink-3); }
.pay-record-dl dd { margin: 0; overflow-wrap: anywhere; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.file-list a { overflow-wrap: anywhere; }
.term-proofs { display: block; margin-top: 3px; color: var(--ink-3); font-size: .78rem; overflow-wrap: anywhere; }
.pay-terms tr.is-this td { background: #F5FAFE; }
.pay-terms tr.is-this td:first-child { box-shadow: inset 3px 0 0 var(--sea); }
.tp-radio { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; min-width: 0; }
.tp-radio input { margin-top: 3px; flex: none; }
.term-pick-list li.off .tp-radio { cursor: not-allowed; }
@media (max-width: 699px) { .pay-record-dl { grid-template-columns: 1fr; gap: 2px; } .pay-record-dl dd { margin-bottom: 6px; } }

/* ---------- FR: kelompok lanjutan, rincian lama terkunci ---------- */
.fr-carried { margin: 6px 0 4px; }
.fr-carried-head, .fr-new-head { font-size: .82rem; color: var(--ink-3); padding: 8px 0 6px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fr-new-head { padding-top: 12px; border-top: 1px dashed var(--rule); margin-top: 4px; }
.fr-crow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px; background: #F6F7FA; border-radius: 8px; margin-bottom: 4px; color: #6B7184; font-size: .9rem; }
.fr-crow .c-no { grid-row: 1 / span 2; font-variant-numeric: tabular-nums; }
.fr-crow .c-desc { color: var(--ink-2, #3B4154); }
.fr-crow .c-recv, .fr-crow .c-bank, .fr-crow .c-acc { display: none; }
.fr-crow .c-amt { text-align: right; white-space: nowrap; }
@container (min-width: 820px) {
  .fr-crow { grid-template-columns: 30px minmax(0, 1.4fr) minmax(0, 1.2fr) 96px 172px 168px 36px; gap: 8px 10px; padding: 9px 0; background: transparent; border-radius: 0; border-bottom: 1px solid var(--rule-2); margin: 0; }
  .fr-crow .c-no { grid-row: auto; padding-left: 0; }
  .fr-crow .c-recv, .fr-crow .c-bank, .fr-crow .c-acc { display: block; overflow-wrap: anywhere; }
  .fr-crow .c-amt { padding-right: 2px; }
}
/* Tampilan dokumen & PDF: rincian lama di kelompok lanjutan */
.ledger-table tr.carried td { color: #8A90A0; }
.ledger-table tr.g-sub td { font-size: .78rem; color: var(--ink-3); padding-top: 8px; padding-bottom: 4px; background: #FAFBFC; }
.ledger-table tr.g-sub.new td { color: #8A4B0B; }

.pay-terms td.num { white-space: nowrap; }
@media (max-width: 699px) {
  .pay-terms thead { display: none; }
  .pay-terms tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 2px; border-bottom: 1px solid var(--rule-2); }
  .pay-terms td { display: block; padding: 0; border: 0; }
  .pay-terms td:first-child { grid-column: 1; }
  .pay-terms td.num { grid-column: 2; grid-row: 1; font-weight: 650; }
  .pay-terms td.num + td.num { grid-row: 2; font-weight: 400; color: var(--ink-3); font-size: .8rem; }
  .pay-terms td:not(.num):not(:first-child) { grid-column: 1 / -1; }
  .pay-terms tr.is-this td { background: transparent; }
  .pay-terms tr.is-this { background: #F5FAFE; box-shadow: inset 3px 0 0 var(--sea); padding-left: 8px; }
  .pay-terms tr.is-this td:first-child { box-shadow: none; }
}

/* ---------- Saringan status daftar (bisa pilih beberapa) ---------- */
.lv { margin-bottom: 14px; }
.lv-chips { margin-bottom: 8px; flex-wrap: wrap; overflow: visible; }
.lv-chips a { display: inline-flex; align-items: center; gap: 6px; }
.lv-check { width: 14px; height: 14px; flex: none; }
.lv-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px 14px; flex-wrap: wrap; font-size: .84rem; }
.lv-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.lv-actions form { margin: 0; }
.lv-role { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.lv-role-set { border: 1px solid var(--rule-2); border-radius: 10px; padding: 10px 14px 6px; margin: 0; min-width: 0; }
.lv-role-set legend { font-weight: 650; padding: 0 6px; color: var(--hull); }
.lv-role-set .check { display: flex; margin-bottom: 6px; }

/* ---------- Pembatalan dokumen yang sudah disetujui ---------- */
.pill.po-closed { background: var(--sunk); color: var(--ink-2); border: 1px solid var(--rule); }
.cancel-box { margin-bottom: 16px; padding: 14px 16px; border-radius: var(--r-m); background: var(--stop-bg); border: 1px solid #EFC1C6; border-left: 4px solid var(--stop); color: #5E1019; }
.cancel-box.done { background: var(--sunk); border-color: var(--rule); border-left-color: var(--ink-3); color: var(--ink); }
.cancel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; }
.cancel-head small { color: inherit; opacity: .78; }
.cancel-reason { margin: 8px 0 0; font-size: .96rem; }
.cancel-reason small { opacity: .75; }
.cancel-note { margin: 6px 0 0; font-size: .86rem; opacity: .85; }
.cancel-decide { margin-top: 12px; padding-top: 12px; border-top: 1px solid #EFC1C6; }
.cancel-decide .field { margin-bottom: 10px; }
.cancel-decide label { color: inherit; }
.cancel-box form .btn-row { margin: 0; }
.cancel-box > form { margin-top: 10px; }
.cancel-blockers { margin: 0; padding-left: 18px; font-size: .9rem; color: var(--ink-2); }
.cancel-blockers li + li { margin-top: 6px; }
.cancel-prev { margin: 0 0 10px; padding: 8px 10px; border-radius: var(--r-s); background: var(--sunk); font-size: .86rem; color: var(--ink-2); }
details.panel > summary + * { margin-top: 12px; }

/* ---------- Tutup sisa PR ---------- */
.pr-closed { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--rule-2); font-size: .88rem; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pr-closed b { color: var(--ink); }
.pr-closed span { flex-basis: 100%; }
.pr-closed form { margin: 4px 0 0; }
.pr-close { margin-top: 12px; border-top: 1px solid var(--rule-2); padding-top: 10px; }
.pr-close > summary { cursor: pointer; font-weight: 600; color: var(--ink-2); font-size: .9rem; }
.pr-close > summary:hover { color: var(--hull); }
.pr-close p { margin: 8px 0; font-size: .86rem; }
.pr-left { list-style: none; margin: 0 0 10px; padding: 0; font-size: .88rem; }
.pr-left li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--rule-2); }
.pr-left li:first-child { border-top: 0; }

/* ---------- Inbox: permintaan pembatalan ---------- */
.cancel-inbox { margin-bottom: 18px; }
.cancel-inbox h2 { font-size: 1rem; margin: 0 0 8px; color: var(--stop-ink); }
.cancel-inbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cancel-inbox a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid #EFC1C6; border-left: 4px solid var(--stop); color: var(--ink); text-decoration: none; }
.cancel-inbox a:hover { background: var(--stop-bg); text-decoration: none; }
.cancel-inbox .ci-main { min-width: 0; display: grid; gap: 2px; }
.cancel-inbox .ci-main small { color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cancel-inbox .ci-side { text-align: right; flex-shrink: 0; display: grid; gap: 2px; }
.cancel-inbox .ci-side small { color: var(--stop-ink); font-weight: 600; }

/* ---------- Import Excel ---------- */
.imp-steps { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); align-items: start; }
.imp-steps .panel { position: relative; padding-left: 58px; }
.imp-n { position: absolute; left: 18px; top: 18px; width: 28px; height: 28px; border-radius: 50%; background: var(--hull); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .9rem; }
.imp-sum { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.imp-table td { vertical-align: top; }
.imp-table tr.imp-err td { background: var(--stop-bg); }
.imp-table tr.imp-skip td { color: var(--ink-3); }
.imp-msg { color: var(--stop-ink); font-weight: 600; font-size: .88rem; }
.imp-ok { color: var(--go-ink); font-weight: 600; font-size: .88rem; }
.imp-table code { font-family: var(--mono); font-size: .92rem; background: var(--sunk); padding: 2px 6px; border-radius: 6px; user-select: all; }
.imp-done { margin: 0; padding-left: 18px; columns: 2 220px; }
.cancel-box { scroll-margin-top: 84px; }
.cancel-decide .btn-row .btn { white-space: nowrap; }
.cancel-decide .btn-row .btn.reject { flex: 0 1 auto; }
.cancel-decide .btn-row .btn.danger { flex: 1 1 auto; }
.pill.cancel-req { background: var(--stop-bg); color: var(--stop-ink); }
.imp-steps .btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.imp-table .nowrap, .imp-table td:nth-child(3) { white-space: nowrap; }
@media (max-width: 719px) {
  .imp-cards thead { display: none; }
  .imp-cards, .imp-cards tbody, .imp-cards tr, .imp-cards td { display: block; width: 100%; }
  .imp-cards tr { padding: 10px 0; border-top: 1px solid var(--rule-2); }
  .imp-cards tr:first-child { border-top: 0; }
  .imp-cards td { border: 0 !important; padding: 2px 0 !important; text-align: left !important; white-space: normal !important; display: flex; gap: 10px; }
  .imp-cards td::before { content: attr(data-label); flex: 0 0 96px; color: var(--ink-3); font-size: .8rem; padding-top: 2px; }
  .imp-cards td:empty { display: none; }
  .imp-table tr.imp-err td { background: transparent; }
  .imp-table tr.imp-err { background: var(--stop-bg); padding-left: 8px; padding-right: 8px; border-radius: 8px; }
}
.head-actions { flex: 0 1 auto; justify-content: flex-end; }
.head-actions > .btn { flex: 0 0 auto; }

/* ---------- Tanda tangan coretan ---------- */

[data-sig-error] { color: var(--stop); font-size: .86rem; font-weight: 600; margin: 0 0 10px; }
[data-sig-error]:empty { display: none; }
.acc-sig .set-form { margin: 0 0 0 0; }
.acc-sig .set-form + .set-form { margin-top: 8px; }
.sig-view { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 10px; border: 1px dashed var(--rule); border-radius: var(--r-m); background: #fff; }
.sig-view img { max-width: 100%; max-height: 110px; }
.sig-pad-wrap { position: relative; border: 1.5px solid var(--rule); border-radius: var(--r-m); background: #fff; touch-action: none; overflow: hidden; }
.sig-pad { display: block; width: 100%; height: 200px; cursor: crosshair; touch-action: none; }
@media (orientation: landscape) and (max-height: 500px) { .sig-pad { height: 160px; } }
.sig-line { position: absolute; left: 8%; right: 8%; bottom: 46px; border-bottom: 1.5px dashed var(--rule); pointer-events: none; }
.sig-hint { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; color: var(--ink-3); font-size: .85rem; pointer-events: none; transition: opacity .15s; }
.sig-pad-wrap.has-ink .sig-hint { opacity: 0; }
.sig-tools { display: flex; align-items: center; gap: 12px; margin: 10px 0 12px; flex-wrap: wrap; }
.sig-tools small { font-size: .8rem; }
.user-pills { justify-content: flex-end; }
.sig-banner { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px; border-radius: var(--r-m); background: var(--sea-bg); border: 1px solid #C5DDF4; color: #123F73; text-decoration: none; }
.sig-banner:hover { text-decoration: none; border-color: var(--sea); }
.sig-banner svg { width: 22px; height: 22px; flex-shrink: 0; }
.sig-banner span { flex: 1; min-width: 0; font-size: .92rem; }
.sig-banner b.go { color: var(--sea-ink); white-space: nowrap; }
.acc-sig .set-fields { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
.acc-sig .sig-pad-wrap { max-width: 720px; }
.acc-sig .sig-view { max-width: 720px; }
@media (min-width: 1100px) {
  .acc-sec .set-fields { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ---------- Log aktivitas ---------- */
.audit-pin { margin: 0 0 10px; font-size: .86rem; color: var(--ink-2); display: flex; gap: 14px; flex-wrap: wrap; }
.audit-pin a { color: var(--stop-ink); }
.audit-table { border-top: 1px solid var(--rule-2); }
.audit-head, .audit-item > summary { display: grid; grid-template-columns: 96px minmax(0, 2.2fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.audit-head { padding: 8px 10px; font-size: .74rem; font-weight: 650; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; background: var(--sunk); }
.audit-item { border-bottom: 1px solid var(--rule-2); }
.audit-item > summary { list-style: none; cursor: pointer; padding: 10px; font-size: .88rem; }
.audit-item > summary::-webkit-details-marker { display: none; }
.audit-item > summary:hover { background: #F7F9FC; }
.audit-item[open] > summary { background: #F2F5FA; }
.audit-item.is-alert > summary { box-shadow: inset 3px 0 0 var(--stop); }
.audit-item summary > span { min-width: 0; display: grid; gap: 2px; }
.audit-item small { color: var(--ink-3); font-size: .78rem; overflow-wrap: anywhere; }
.a-time b { font-size: .95rem; color: var(--ink); }
.a-user { font-weight: 650; color: var(--ink); }
.a-user a, .a-obj a, .a-net a { color: inherit; text-decoration: none; }
.a-user a:hover, .a-obj a:hover, .a-net a:hover { color: var(--sea-ink); text-decoration: underline; }
.a-obj { color: var(--ink); overflow-wrap: anywhere; }
.a-obj a { color: var(--sea-ink); }
.a-ev { justify-self: start; display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--rule-2); color: var(--ink-2); }
.a-ev.g-auth { background: #EAF2FD; color: #1D4F91; }
.a-ev.g-appr { background: var(--go-bg); color: var(--go-ink); }
.a-ev.g-doc { background: #EFEAFB; color: #4B2E95; }
.a-ev.g-pay { background: #FFF4E5; color: #8A4B0B; }
.a-ev.g-view { background: var(--sunk); color: var(--ink-2); border: 1px solid var(--rule-2); }
.a-ev.g-sec, .is-alert .a-ev { background: var(--stop-bg); color: var(--stop-ink); }
.a-net code, .audit-pin code { font-family: var(--mono); font-size: .76rem; }
.a-detail { padding: 4px 10px 14px 120px; }
.a-detail dl { margin: 0; display: grid; gap: 4px; font-size: .84rem; }
.a-detail dl > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.a-detail dt { color: var(--ink-3); }
.a-detail dd { margin: 0; overflow-wrap: anywhere; }
.a-ua { font-family: var(--mono); font-size: .74rem; color: var(--ink-2); }
@media (max-width: 899px) {
  .audit-head { display: none; }
  .audit-item > summary { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 10px; }
  .audit-item summary > .a-obj, .audit-item summary > .a-dev, .audit-item summary > .a-net { grid-column: 2; }
  .a-dev { display: flex !important; flex-wrap: wrap; gap: 0 6px !important; align-items: baseline; font-size: .82rem; }
  .a-net { display: flex !important; flex-wrap: wrap; gap: 0 8px !important; align-items: baseline; font-size: .82rem; }
  .a-detail { padding: 4px 10px 14px; }
  .a-detail dl > div { grid-template-columns: 110px minmax(0, 1fr); }
}

/* ---------- Admin grup ---------- */
.grp-roles { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 16px; }
.grp-roles > div { padding: 12px 14px; border-radius: var(--r-m); background: var(--surface); border: 1px solid var(--rule-2); display: grid; gap: 4px; }
.grp-roles b { color: var(--hull); font-size: .92rem; }
.grp-roles span { color: var(--ink-2); font-size: .84rem; line-height: 1.45; }
.grp-companies { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); margin-bottom: 14px; }
.grp-co { border: 1px solid var(--rule-2); border-left: 4px solid var(--co, var(--hull)); border-radius: var(--r-m); padding: 12px 14px; background: #FCFDFE; }
.grp-co-head { display: grid; gap: 2px; margin-bottom: 8px; }
.grp-co-head small { color: var(--ink-3); }
.grp-empty { margin: 0; font-size: .86rem; color: var(--stop-ink); }
.grp-people { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.grp-people > li { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; padding: 6px 0; border-top: 1px dashed var(--rule-2); }
.grp-people > li:first-child { border-top: 0; }
.grp-people > li > span { display: grid; gap: 1px; min-width: 0; }
.grp-people small { color: var(--ink-3); font-size: .8rem; }
.grp-remove > summary { cursor: pointer; color: var(--stop-ink); font-size: .84rem; font-weight: 600; list-style: none; }
.grp-remove > summary::-webkit-details-marker { display: none; }
.grp-remove[open] { flex-basis: 100%; }
.grp-remove form { margin-top: 8px; padding: 10px; border-radius: var(--r-s); background: var(--stop-bg); display: grid; gap: 6px; }
.grp-remove .field { margin: 0; }
.grp-add > summary { list-style: none; display: inline-flex; }
.grp-add > summary::-webkit-details-marker { display: none; }
.grp-add[open] > summary { display: none; }
.grp-form { border: 1px solid var(--rule-2); border-radius: var(--r-m); background: #FAFBFD; padding: 14px; }
.grp-fields { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.grp-two { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1100px) { .grp-two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.grp-two .panel { margin: 0; }
.grp-kv { margin: 0 0 12px; display: grid; gap: 4px; font-size: .86rem; }
.grp-kv > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px; }
.grp-kv dt { color: var(--ink-3); }
.grp-kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 719px) { .grp-kv > div { grid-template-columns: 1fr; gap: 0; } }
.pw-once { font-family: var(--mono); background: #fff; padding: 2px 6px; border-radius: 6px; user-select: all; }
.grp-people > li > span > .pill { justify-self: start; margin: 2px 0; }

/* ---------- Daftar perusahaan grup ---------- */
.co-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.co-list > li { border: 1px solid var(--rule-2); border-left: 4px solid var(--co, var(--hull)); border-radius: var(--r-m); padding: 12px 14px; }
.co-row { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; }
.co-main { flex: 1 1 220px; min-width: 0; display: grid; gap: 1px; }
.co-main small { color: var(--ink-3); }
.co-code { font-family: var(--mono); font-size: .86rem; padding: 2px 8px; border-radius: 6px; background: var(--sunk); border: 1px solid var(--rule-2); }
.co-meta { color: var(--ink-3); font-size: .86rem; }
.co-edit > summary { cursor: pointer; display: inline-block; margin-top: 8px; color: var(--sea-ink); font-weight: 600; font-size: .88rem; }
.co-edit[open] > summary { margin-bottom: 10px; }
.co-edit form { border-top: 1px solid var(--rule-2); padding-top: 12px; }
.co-fields { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.co-edit .btn-row > .btn { flex: 0 0 auto; }

/* ---------- Pendaftaran mandiri ---------- */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.reg-group { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
.reg-group > legend { padding: 0; margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.reg-group + .reg-group { border-top: 1px solid var(--rule-2); padding-top: 14px; }
.reg-next { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.reg-list { display: grid; gap: 12px; }
.reg-card { border: 1px solid var(--rule-2); border-left: 4px solid var(--signal); border-radius: var(--r-m); padding: 14px; background: #FCFDFE; scroll-margin-top: 80px; }
.reg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px 16px; flex-wrap: wrap; margin-bottom: 10px; }
.reg-head > div { display: grid; gap: 1px; min-width: 0; }
.reg-head > div small { color: var(--ink-2); }
.reg-meta { color: var(--ink-3); font-size: .8rem; text-align: right; }
.reg-kv { margin: 0 0 10px; display: grid; gap: 4px; font-size: .88rem; }
.reg-kv > div { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 10px; }
.reg-kv dt { color: var(--ink-3); }
.reg-kv dd { margin: 0; overflow-wrap: anywhere; }
.reg-alert { margin-bottom: 10px; font-size: .88rem; }
.reg-approve { border-top: 1px dashed var(--rule-2); padding-top: 12px; }
.reg-fields { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 12px; }
.reg-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.reg-actions > .btn { flex: 0 0 auto; min-width: 140px; }
.reg-reject > summary { list-style: none; }
.reg-reject > summary::-webkit-details-marker { display: none; }
.reg-reject[open] { flex-basis: 100%; }
.reg-reject[open] > summary { display: none; }
.reg-reject-form { padding: 12px; border-radius: var(--r-s); background: var(--stop-bg); }
.reg-reject-form .field { margin-bottom: 10px; }
.reg-new { display: grid; gap: 8px; padding: 14px; margin-bottom: 14px; border-radius: var(--r-m); background: var(--go-bg); border: 1px solid #B5DCC9; justify-items: start; }
.reg-link { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.reg-link input { flex: 1 1 240px; min-width: 0; font-family: var(--mono); font-size: .82rem !important; }
.reg-link .btn { flex: 0 0 auto; }
.reg-qr { background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--rule-2); }
.reg-invites { list-style: none; margin: 14px 0 0; padding: 0; display: grid; }
.reg-invites > li { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.reg-invites > li:first-child { border-top: 0; }
.reg-inv-main { flex: 1 1 260px; min-width: 0; display: grid; gap: 2px; }
.reg-inv-main > .pill { justify-self: start; }
.reg-inv-main small { color: var(--ink-3); font-size: .82rem; }
.reg-inv-more > summary { cursor: pointer; color: var(--sea-ink); font-weight: 600; font-size: .88rem; }
.reg-inv-more[open] { flex-basis: 100%; order: 3; display: grid; gap: 8px; justify-items: start; }
@media (max-width: 719px) {
  .reg-kv > div { grid-template-columns: 1fr; gap: 0; }
  .reg-meta { text-align: left; }
  .reg-actions > .btn { flex: 1 1 auto; }
}

/* ---------- Baris daftar yang bisa diklik seluruhnya (mis. Pengguna) ---------- */
.list > li.row-link { position: relative; margin: 0 -10px; padding: 12px 10px; border-radius: 8px; transition: background-color .12s; }
.list > li.row-link + li.row-link { border-top-color: var(--rule-2); }
.list > li.row-link:hover { background: #EEF2F8; }
.row-link-a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.row-link-a:focus-visible { outline: none; }
.row-link:has(.row-link-a:focus-visible) { box-shadow: 0 0 0 2px var(--sea, #2563EB); }
.row-chev { width: 18px; height: 18px; color: var(--ink-3); flex: none; align-self: center; }
.row-link:hover .row-chev { color: var(--hull); }

/* ---------- Akun admin: pengguna yang ada / akun baru, pengalihan pesan ---------- */
.grp-form > .field, .grp-form > [data-when] > .field { margin-bottom: 14px; }
.grp-form .form-row { display: grid; gap: 0 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: start; }
.grp-form .form-row .field { margin-bottom: 14px; }
.grp-form .field > label:not(.check) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field-hint { display: block; margin-top: 5px; font-size: .78rem; line-height: 1.35; color: var(--ink-3); }
.field-check { padding-top: 32px; }
.field-check .check { align-items: center; gap: 8px; font-size: .9rem; }
@media (max-width: 719px) { .field-check { padding-top: 0; } }
.pw-wrap { display: flex; gap: 6px; align-items: stretch; }
.pw-wrap input { flex: 1; min-width: 0; }
.grp-submit { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 4px; padding-top: 12px; border-top: 1px dashed var(--rule-2); }
.grp-submit .field { margin: 0; flex: 0 1 280px; }
.grp-submit .btn { min-height: 44px; }
.grp-form > .hint { margin: 0 0 12px; }
.grp-fwd > summary { color: var(--sea, #1D5FA8); }
.grp-fwd form { background: var(--sunk); }
.grp-people > li > span { flex: 1 1 200px; }

.upick-box { position: relative; }
.upick-chosen { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 12px; border: 1.5px solid var(--hull); border-radius: var(--r-s); background: #F3F3FB; min-height: 48px; }
.upick-who { display: grid; gap: 1px; min-width: 0; }
.upick-who b { overflow-wrap: anywhere; }
.upick-who small { color: var(--ink-2); font-size: .82rem; overflow-wrap: anywhere; }
.upick-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-s); box-shadow: 0 10px 28px rgba(16, 24, 40, .14); max-height: 300px; overflow-y: auto; }
.upick-list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; display: grid; gap: 1px; }
.upick-list li small { color: var(--ink-3); font-size: .8rem; overflow-wrap: anywhere; }
.upick-list li[aria-selected="true"], .upick-list li:hover { background: #EEF2F8; }
.upick-list li.upick-none { cursor: default; color: var(--ink-3); background: none; }
.upick-empty { display: block; margin-top: 5px; font-size: .78rem; color: var(--ink-3); }

/* ---------- Pilihan jenis akun ---------- */
.acc-mode-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.acc-mode-opts .choice > span { display: grid; gap: 1px; }
.acc-mode-opts .choice small { font-weight: 450; color: var(--ink-2); font-size: .8rem; }
.linked-note { margin: 0; padding: 10px 12px; border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--rule-2); font-size: .88rem; color: var(--ink-2); }

/* ---------- Cash Advance, pertanggungjawaban, Perjalanan Dinas ---------- */
.ca-mine { border-left: 4px solid var(--signal); }
.ca-mine-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ca-mine-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--rule-2); }
.ca-mine-row:first-child { border-top: 0; padding-top: 0; }
.ca-mine-main { flex: 1 1 240px; min-width: 0; display: grid; gap: 1px; }
.ca-mine-main small { color: var(--ink-3); }
.ca-mine-due { display: grid; gap: 2px; justify-items: start; }
.ca-mine-due small { color: var(--ink-3); font-size: .8rem; }
.ca-mine-row.late .ca-mine-due small { color: var(--stop-ink); font-weight: 600; }
.pj-kv { margin: 0 0 12px; display: grid; gap: 6px; font-size: .9rem; }
.pj-kv > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 10px; }
.pj-kv dt { color: var(--ink-3); }
.pj-kv dd { margin: 0; overflow-wrap: anywhere; }
.pj-diff { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--rule-2); }
.pj-diff[data-state="refund"] { background: var(--signal-bg); border-color: #F5CDB5; color: #7A3209; }
.pj-diff[data-state="short"] { background: #EAF2FD; border-color: #C5D8F3; color: #1D4F91; }
.pj-diff b { font-size: 1.1rem; }
.lrow-grid.pj-grid { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); }
.lrow-grid.pj-grid .f-date { grid-column: 1 / -1; }
.lrow-grid.trip-p-grid, .lrow-grid.trip-c-grid { grid-template-columns: minmax(0, 1fr); }
.adv-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.adv-row .affix { flex: 1 1 200px; }
.adv-row .btn { flex: 0 0 auto; }
@media (max-width: 719px) { .pj-kv > div { grid-template-columns: 1fr; gap: 0; } }
@container (min-width: 820px) {
  .pj-ledger .ledger-head, .pj-ledger .lrow { grid-template-columns: 30px 160px minmax(0, 1fr) 210px 36px; }
  .lrow-grid.pj-grid .f-date { grid-column: auto; }
  .trip-p-ledger .ledger-head, .trip-p-ledger .lrow { grid-template-columns: 30px minmax(0, 1.3fr) minmax(0, 1fr) 36px; }
  .trip-p-ledger .ledger-head span:nth-last-child(2) { text-align: left; }
  .trip-c-ledger .ledger-head, .trip-c-ledger .lrow { grid-template-columns: 30px 170px minmax(0, 1fr) 210px 36px; }
}
.ca-status.late { border-left: 4px solid var(--stop); }
.late-txt { color: var(--stop-ink); }
.refund-form { display: grid; gap: 8px; justify-items: start; }
.refund-form .field { margin: 0; width: 100%; max-width: 460px; }
.ca-basis { font-size: .86rem; margin: -6px 0 16px; }
.trip-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.trip-people li { display: grid; gap: 1px; padding: 8px 12px; border-radius: var(--r-s); background: var(--sunk); border: 1px solid var(--rule-2); }
.trip-people small { color: var(--ink-3); }

/* Bagian yang dibuka lewat tautan (#id) diberi sorotan singkat. */
.flash-target { animation: flash-target 1.6s ease-out 1; scroll-margin-top: 80px; }
@keyframes flash-target { 0% { box-shadow: 0 0 0 3px var(--sea, #1D5FA8); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* Daftar mandiri: perusahaan dipilih / terkunci */
.reg-company { margin-bottom: 4px; }
.reg-company-fixed { display: grid; gap: 2px; padding: 10px 12px; margin: 0 0 16px; border: 1px solid var(--rule-2); border-radius: var(--r-s); background: var(--sunk); }
.reg-company-fixed .label { margin: 0; font-size: .78rem; color: var(--ink-3); }

/* Catatan: menu Admin khusus akun admin */
.admin-only-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin: 0 0 16px; border: 1px solid var(--rule-2); border-radius: var(--r-m); background: var(--sunk); color: var(--ink-2); font-size: .9rem; line-height: 1.5; }
.admin-only-note svg { width: 20px; height: 20px; flex: none; color: var(--hull); margin-top: 1px; }
.admin-only-note b { color: var(--ink); }
.plain-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Kartu akun admin (tampilan hanya-lihat di menu Pengguna) */
.admin-acc-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.admin-acc-head p { margin: 2px 0 0; }
.admin-acc-ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #EEF0FA; color: var(--hull); flex: none; }
.admin-acc-ico svg { width: 22px; height: 22px; }
.kv-list { margin: 0 0 16px; display: grid; gap: 0; border-top: 1px solid var(--rule-2); }
.kv-list > div { display: grid; grid-template-columns: minmax(120px, 220px) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--rule-2); font-size: .92rem; }
.kv-list dt { color: var(--ink-3); }
.kv-list dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 559px) { .kv-list > div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Admin grup: navigasi cepat, aksi baris, akun admin ---------- */
.grp-jump { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; padding: 2px 0; }
.grp-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: .84rem; font-weight: 600; text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.grp-jump a:hover { border-color: var(--hull); color: var(--hull); background: #F3F3FB; }
.grp-jump .count { background: var(--rule-2); border-radius: 999px; padding: 0 7px; font-size: .74rem; }
@media (max-width: 719px) { .grp-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; } .grp-jump::-webkit-scrollbar { display: none; } .grp-jump a { white-space: nowrap; } }
.grp-actions { display: inline-flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.grp-actions .grp-remove[open] { flex-basis: 100%; }
.grp-people > li:has(.grp-remove[open]) .grp-actions { flex-basis: 100%; }
.grp-link { font-size: .84rem; font-weight: 600; color: var(--sea, #1D5FA8); text-decoration: none; }
.grp-link:hover { text-decoration: underline; }
.grp-co-add { display: inline-block; margin-top: 8px; font-size: .84rem; font-weight: 600; color: var(--hull); text-decoration: none; }
.grp-co-add:hover { text-decoration: underline; }
.grp-people > li > span > .pill { margin-left: 6px; }
.temp-pw { display: grid; gap: 8px; }
.temp-pw .reg-link { max-width: 420px; }
.acc-sub { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.acc-summary { margin-bottom: 16px; }
.acc-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .acc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.acc-grid .panel { margin: 0; }
.acc-list .row { align-items: center; }
.acc-list .pill { margin-left: 4px; }
.grp-actions > details:not([open]) { display: inline-block; }
.acc-list .row, .users-admins .row { flex-wrap: nowrap; }
.grp-people > li > span.grp-actions { display: inline-flex; flex: none; flex-direction: row; align-items: center; gap: 14px; }

/* =====================================================================
   Gerak & transisi
   Halus dan cepat (≤ 350 ms), hanya di transform/opacity supaya ringan di HP.
   Dimatikan otomatis bila HP/PC mengaktifkan "kurangi gerakan" (lihat aturan global di atas).
   ===================================================================== */
:root {
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.36, .64, 1);
}

/* 1. Pindah halaman: rel menu, bilah atas, dan menu bawah diam; isi halaman berganti dengan pudar + geser halus.
      (Chrome/Edge/Safari terbaru. Browser lain tetap memakai animasi masuk di bawah.) */
@view-transition { navigation: auto; }
.rail { view-transition-name: rail; }
.topbar { view-transition-name: topbar; }
.bottomnav { view-transition-name: bottomnav; }
::view-transition-group(rail), ::view-transition-group(topbar), ::view-transition-group(bottomnav),
::view-transition-old(rail), ::view-transition-new(rail),
::view-transition-old(topbar), ::view-transition-new(topbar),
::view-transition-old(bottomnav), ::view-transition-new(bottomnav) { animation: none; }
::view-transition-old(root) { animation: vt-out .12s ease-in both; }
::view-transition-new(root) { animation: vt-in .24s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* 2. Isi halaman muncul bertahap (judul → panel → panel berikutnya). */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
main.page > *, .guest-card, .guest-intro { animation: rise .34s var(--ease-out) backwards; }
main.page > *:nth-child(2) { animation-delay: .03s; }
main.page > *:nth-child(3) { animation-delay: .06s; }
main.page > *:nth-child(4) { animation-delay: .09s; }
main.page > *:nth-child(5) { animation-delay: .12s; }
main.page > *:nth-child(6) { animation-delay: .15s; }
main.page > *:nth-child(n+7) { animation-delay: .18s; }
.guest-intro { animation-delay: .06s; }
/* Baris daftar & kartu ikut muncul berurutan (12 pertama saja, sisanya langsung). */
.list > li, .grp-co, .pf-card, .reg-invites > li { animation: rise .3s var(--ease-out) backwards; }
.list > li:nth-child(1) { animation-delay: .06s; } .list > li:nth-child(2) { animation-delay: .09s; }
.list > li:nth-child(3) { animation-delay: .12s; } .list > li:nth-child(4) { animation-delay: .15s; }
.list > li:nth-child(5) { animation-delay: .18s; } .list > li:nth-child(6) { animation-delay: .21s; }
.list > li:nth-child(7) { animation-delay: .24s; } .list > li:nth-child(8) { animation-delay: .27s; }
.list > li:nth-child(n+9) { animation-delay: .3s; }
.grp-co:nth-child(2), .pf-card:nth-child(2) { animation-delay: .05s; }
.grp-co:nth-child(n+3), .pf-card:nth-child(n+3) { animation-delay: .1s; }

/* Pesan status (berhasil / gagal) masuk dari atas; pesan gagal sedikit bergetar. */
@keyframes alert-in { from { opacity: 0; transform: translateY(-6px) scale(.99); } }
@keyframes nudge { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
main.page > .alert { animation: alert-in .3s var(--ease-out) backwards; }
main.page > .alert.err { animation: alert-in .3s var(--ease-out) backwards, nudge .32s ease .3s 1; }
.field .error { animation: alert-in .25s var(--ease-out) backwards; }

/* 3. Tombol & elemen yang bisa diklik: respons hover / tekan. */
.btn { transition: background-color .15s, border-color .15s, color .15s, box-shadow .18s, transform .12s var(--ease-out); }
.btn.primary:hover, .btn.approve:hover, .btn.danger:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -6px rgba(11, 10, 86, .45); }
.btn.approve:hover { box-shadow: 0 6px 16px -6px rgba(14, 107, 69, .5); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; transition-duration: .06s; }
.btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; box-shadow: none; }
.choice, .filters a, .tabs a, .grp-jump a, .pf-card, a.preq-row { transition: background-color .15s, border-color .15s, color .15s, box-shadow .18s, transform .15s var(--ease-out); }
.choice:active { transform: scale(.99); }
.pf-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(11, 10, 86, .35); }
.row-chev { transition: transform .18s var(--ease-out), color .15s; }
.row-link:hover .row-chev { transform: translateX(3px); }
.list > li.row-link:active { background: #E6EBF4; }
@media (min-width: 900px) {
  .rail-nav a { transition: background-color .15s, color .15s; }
  .rail-nav a svg { transition: transform .2s var(--ease-out); }
  .rail-nav a:hover svg { transform: translateX(2px); }
  .rail-nav a[aria-current="page"]::before { animation: grow-y .3s var(--ease-out) backwards; }
}
@keyframes grow-y { from { transform: scaleY(0); } }
.bottomnav a { transition: color .15s, transform .12s; }
.bottomnav a:active { transform: scale(.94); }
.bottomnav a[aria-current="page"]::before { animation: grow-x .3s var(--ease-out) backwards; }
@keyframes grow-x { from { transform: scaleX(0); } }
input, select, textarea { transition: border-color .15s, box-shadow .18s, background-color .15s; }

/* 4. Bagian yang dibuka-tutup (details): isi turun halus, panah berputar. */
details[open] > :not(summary) { animation: reveal .24s var(--ease-out) backwards; }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }
details.panel > summary::before, .admin-access > summary::before { transition: transform .2s var(--ease-out); }

/* 5. Daftar pilihan (pencarian pengguna) muncul seperti menu. */
.upick-list:not([hidden]) { animation: pop-in .16s var(--ease-out) backwards; transform-origin: top center; }
.upick-chosen { animation: pop-in .2s var(--ease-out) backwards; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* 6. Tombol kirim yang sedang memproses: putaran kecil, mencegah klik ganda. */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid currentColor; border-color: rgba(255, 255, 255, .9) rgba(255, 255, 255, .9) rgba(255, 255, 255, .25) rgba(255, 255, 255, .25);
  animation: spin .7s linear infinite;
}
.btn.is-busy:not(.primary):not(.approve):not(.danger)::after { border-color: var(--hull) var(--hull) rgba(11, 10, 86, .2) rgba(11, 10, 86, .2); }
@keyframes spin { to { transform: rotate(360deg); } }

@media print { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Inbox: ajukan baru & tindak lanjut ---------- */
.quick-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
.quick-new .qn-label { font-size: .8rem; color: var(--ink-3); font-weight: 600; margin-right: 2px; }
.quick-new .qn-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s; }
.quick-new .qn-btn span { color: var(--sea-ink); font-size: 1.05rem; line-height: 1; }
.quick-new .qn-btn:hover { border-color: var(--sea-ink); }
.quick-new .qn-btn:active { transform: scale(.97); }
.todo-box { margin: 0 0 20px; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--surface); overflow: hidden; }
.todo-box h2 { font-size: .92rem; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: var(--signal-bg); }
.todo-box ul { list-style: none; margin: 0; padding: 0; }
.todo-box li + li { border-top: 1px solid var(--rule); }
.todo-box a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; color: inherit; text-decoration: none; min-height: 56px; }
.todo-box a:hover { background: var(--sunk); }
.todo-box .td-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.todo-box .td-title { font-weight: 600; overflow-wrap: anywhere; }
.todo-box .td-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.todo-box .row-chev { width: 18px; height: 18px; color: var(--ink-3); }
.inbox-none { margin: 4px 0 16px; font-size: .9rem; }

/* Banner langkah berikutnya di halaman dokumen (pengaju) */
.next-step { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin: 0 0 16px; border-radius: var(--r-m); border: 1px solid var(--rule); background: var(--surface); }
.next-step > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 240px; }
.next-step b { font-size: .95rem; }
.next-step small { color: var(--ink-3); font-size: .84rem; }
.next-step .ns-reason { font-size: .92rem; overflow-wrap: anywhere; }
.next-step.danger { border-color: color-mix(in srgb, var(--stop) 35%, transparent); background: var(--stop-bg); }
.next-step.info { border-color: color-mix(in srgb, var(--sea) 40%, transparent); background: var(--sea-bg); }
@media (max-width: 560px) { .next-step .btn { width: 100%; } }
.next-step.danger b { color: var(--stop-ink); }
.actionbar .btn-row #reject-cancel { flex: 0 0 auto; padding-inline: 18px; }
.actionbar .btn-row [data-approve-action="reject"] { white-space: nowrap; }

/* Alat approval yang menunggu aktivasi WhatsApp */
.pending-note { color: var(--signal-ink) !important; }
.pending-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 0; padding: 10px 12px;
  border-radius: var(--r-s); background: var(--signal-bg); color: var(--signal-ink); font-size: .86rem; }
.inline-form { display: inline; margin: 0; }
.linkish { background: none; border: 0; padding: 4px 0; min-height: 32px; font: inherit; font-size: .86rem; font-weight: 600; color: var(--sea-ink); text-decoration: underline; cursor: pointer; }

/* ---------- Bagian lipat (fold): judul + ringkasan, ketuk untuk membuka ---------- */
details.panel.fold { padding-top: 0; padding-bottom: 0; }
details.panel.fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 14px;
  min-height: 64px; padding: 14px 0; margin: 0; cursor: pointer; list-style: none; font-weight: 400; color: inherit; }
details.panel.fold > summary::-webkit-details-marker { display: none; }
details.panel.fold > summary::before { display: none; }
details.panel.fold > summary::after { content: ""; grid-column: 2; grid-row: 1 / span 2; width: 9px; height: 9px; margin-right: 4px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s ease; }
details.panel.fold[open] > summary::after { transform: rotate(-135deg); }
details.panel.fold > summary h2 { grid-column: 1; margin: 0; font-size: 1rem; }
details.panel.fold > summary .fold-sub { grid-column: 1; font-size: .86rem; color: var(--ink-3); line-height: 1.4; }
details.panel.fold[open] > summary { border-bottom: 1px solid var(--rule-2); margin-bottom: 16px; }
details.panel.fold[open] { padding-bottom: 18px; }
details.panel.fold > summary + * { margin-top: 0; }
details.panel.fold > summary:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; border-radius: 6px; }
.fold-intro { margin: -4px 0 12px; font-size: .88rem; }

/* Daftar tautan ringkas di dalam panel */
.link-rows { padding: 0; overflow: hidden; }
.link-rows a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; min-height: 60px;
  color: inherit; text-decoration: none; }
.link-rows a + a { border-top: 1px solid var(--rule-2); }
.link-rows a:hover { background: var(--sunk); }
.link-rows a span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.link-rows a b { color: var(--hull); font-weight: 650; }
.link-rows a small { color: var(--ink-3); font-size: .84rem; }
.link-rows svg { width: 18px; height: 18px; color: var(--ink-3); flex: none; }

/* ---------- Pilihan status daftar (ringkas) ---------- */
.lv-pick { margin: 0 0 12px; border: 1px solid var(--rule); border-radius: var(--r-m); background: var(--surface); }
.lv-pick > summary { display: flex; align-items: center; gap: 8px; min-height: 50px; padding: 10px 16px; cursor: pointer; list-style: none; }
.lv-pick > summary::-webkit-details-marker { display: none; }
.lv-pick > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .2s ease; flex: none; }
.lv-pick[open] > summary::after { transform: rotate(-135deg); }
.lv-sum-k { font-size: .82rem; color: var(--ink-3); flex: none; }
.lv-sum-v { font-weight: 650; color: var(--hull); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-sum-tag { font-size: .72rem; color: var(--ink-3); background: var(--sunk); border-radius: 999px; padding: 2px 8px; flex: none; }
.lv-panel { border-top: 1px solid var(--rule-2); padding: 12px 16px 16px; }
.lv-help { margin: 0 0 8px; font-size: .84rem; color: var(--ink-3); }
.lv-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 2px 16px; }
.lv-list a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 6px 4px; color: var(--ink); text-decoration: none; border-radius: 8px; }
.lv-list a:hover { background: var(--sunk); }
.lv-box { width: 22px; height: 22px; border: 2px solid var(--rule); border-radius: 6px; display: grid; place-items: center; flex: none; background: var(--surface); }
.lv-box svg { width: 14px; height: 14px; }
.lv-list a[aria-pressed="true"] .lv-box, .lv-list a[aria-current="true"] .lv-box { background: var(--hull); border-color: var(--hull); color: #fff; }
.lv-list a[aria-current="true"] .lv-box::after { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #fff; }
.lv-name { flex: 1; min-width: 0; }
.lv-list .n { font-size: .8rem; color: var(--ink-3); background: var(--sunk); border-radius: 999px; padding: 1px 9px; min-width: 28px; text-align: center; }
.lv-pick .lv-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lv-pick .lv-actions form { margin: 0; }

/* Baris cari + tombol Saring */
.fp-row { display: flex; gap: 8px; align-items: stretch; }
.fp-row > input { flex: 1; min-width: 0; }
.more-filters { display: none; }
@media (max-width: 699px) {
  .more-filters { display: inline-flex; align-items: center; gap: 6px; flex: none; min-height: 46px; padding: 0 14px; background: var(--surface); }
  .more-filters svg { width: 18px; height: 18px; }
  .more-filters[aria-expanded="true"] { background: var(--hull); color: #fff; border-color: var(--hull); }
  .more-filters .fp-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--signal); color: #fff; font-size: .74rem; }
  .filter-panel.fp-compact .fp-row > input { min-height: 46px; background: var(--surface); }
}
.ok-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--go); margin-right: 4px; vertical-align: 1px; }
.ready-ok-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.grp-roles-fold { margin: 0 0 16px; }
.grp-roles-fold > summary { cursor: pointer; color: var(--sea-ink); font-weight: 600; font-size: .92rem; min-height: 40px; display: inline-flex; align-items: center; gap: 6px; list-style: none; }
.grp-roles-fold > summary::-webkit-details-marker { display: none; }
.grp-roles-fold > summary::before { content: "?"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sea-bg); color: var(--sea-ink); font-size: .78rem; }
.grp-roles-fold[open] .grp-roles { margin-top: 8px; }
.cross-unit { display: block; margin-top: 4px; font-size: .8rem; font-weight: 500; color: var(--signal-ink); background: var(--signal-bg); border-radius: 6px; padding: 3px 8px; width: fit-content; max-width: 100%; }
.cross-tag { display: inline-block; margin-left: 4px; font-size: .74rem; font-weight: 600; color: var(--signal-ink); background: var(--signal-bg); border-radius: 999px; padding: 1px 8px; vertical-align: 1px; }
.a-detail dl > div.a-phone-only { display: none; }
@media (max-width: 699px) {
  .audit-item > summary .a-dev, .audit-item > summary .a-net { display: none !important; }
  .a-detail dl > div.a-phone-only { display: grid; }
}
.setup-list li.done .setup-state { display: none; }

/* Peringatan & kunci layar saat sesi habis */
.idle-warn { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 14px); transform: translateX(-50%);
  z-index: 90; width: min(92vw, 460px); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-m);
  background: var(--hull); color: #fff; box-shadow: 0 10px 30px rgba(11, 10, 86, .28); font-size: .9rem; }
.idle-warn span { flex: 1; }
.idle-warn .btn { flex: none; background: #fff; color: var(--hull); border-color: #fff; }
@media (min-width: 1024px) { .idle-warn { bottom: 24px; } }
body.idle-locked .page, body.idle-locked .bottomnav, body.idle-locked .rail-nav { filter: blur(8px); pointer-events: none; }

/* ---------- Tombol kembali (ikon) di kiri judul ---------- */
.back-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px;
  border: 1px solid var(--rule); background: var(--surface); color: var(--hull); text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s; }
.back-btn svg { width: 20px; height: 20px; }
.back-btn:hover { border-color: var(--sea); background: var(--sea-bg); }
.back-btn:active { transform: scale(.94); }
.back-btn:focus-visible { outline: 2px solid var(--sea); outline-offset: 2px; }
.page-head > div:has(> .back-btn) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; align-items: start; }
.page-head > div:has(> .back-btn) > :not(.back-btn) { grid-column: 2; }
.page-head > div > .back-btn { grid-row: 1 / span 4; margin-top: -4px; }
.dz-title { display: flex; align-items: center; gap: 14px; }
.doc-back { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--ink-3); font-size: .9rem; font-weight: 600; }
@media (max-width: 699px) {
  .back-btn { width: 38px; height: 38px; border-radius: 11px; }
  .page-head > div:has(> .back-btn) { column-gap: 12px; }
}
.empty-step { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; border: 1px dashed var(--rule); border-radius: var(--r-m); background: var(--sunk); }
.empty-step span { color: var(--ink-2); font-size: .92rem; }

/* Menu kiri: jarak normal (lega). Hanya bila menunya tidak muat di layar, app.js memberi kelas
   .tight lalu .tighter supaya tidak perlu digulir. */
@media (min-width: 1024px) {
  .rail.snug .rail-brand { padding: 18px 22px 14px; }
  .rail.snug .rail-group { margin: 14px 10px 4px; }
  .rail.snug .rail-nav a, .rail.snug .rail-nav .soon { min-height: 37px; padding-top: 6px; padding-bottom: 6px; }
  .rail.tight .rail-brand { padding: 14px 22px 10px; }
  .rail.tight .rail-group { margin: 10px 10px 2px; }
  .rail.tight .rail-nav a, .rail.tight .rail-nav .soon { min-height: 34px; padding-top: 5px; padding-bottom: 5px; }
  .rail.tight .rail-foot { padding: 8px 12px; }
  .rail.tighter .rail-group { margin: 6px 10px 1px; font-size: .74rem; }
  .rail.tighter .rail-nav a, .rail.tighter .rail-nav .soon { min-height: 30px; padding-top: 3px; padding-bottom: 3px; font-size: .92rem; }
  .rail.tight .rail-nav a[aria-current="page"]::before { top: 7px; bottom: 7px; }
}