/* ════════════════════════════════════════════════════════════════════════
   ERP UI — design system bersama (Quotation · Invoice · Project Tracking).
   PORT SETIA dari HR Suite (control-panel.html §14–648) yang sudah dipoles —
   token, font Sora, ambient glow, .req-subnav, .hr-card, .wc-modal, .fbar, dst
   PERSIS. Dipakai via <link rel="stylesheet" href="/assets/erp-ui.css?v=1">.
   Aturan kartu (fix "hierarki rancu"): 3 zona — head (identitas+nilai) · meta
   (chip kecil) · actions (1 aksi utama + overflow ⋯). Sub-navbar = tahap
   dikelompokkan (bukan 9 chip). 2026-07-21.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  /* native controls (select popup, date picker, scrollbar) ikut tema gelap —
     mencegah popup <option> putih menyilaukan di UI gelap. */
  color-scheme:dark;
  --ink:#0A1220; --panel:rgba(17,31,53,.55); --panel2:rgba(17,31,53,.85);
  --border:rgba(238,243,255,.08); --border2:rgba(238,243,255,.14);
  --cream:#EEF3FF; --muted:#8B98B8; --muted2:#5A6785;
  --gold:#F4A229; --teal:#18B8CE; --purple:#9D7BFF;
  --green:#3DDC97; --red:#FF6B6B; --amber:#FFC24B;
  --navy:#0c1626; --blue:#7AB7FF;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scrollbar-color:rgba(139,152,184,.35) transparent;overflow-x:hidden}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:rgba(10,18,32,.6);border-radius:4px}
::-webkit-scrollbar-thumb{background:rgba(139,152,184,.35);border-radius:4px;border:1px solid rgba(238,243,255,.08)}
::-webkit-scrollbar-thumb:hover{background:rgba(244,162,41,.6)}
input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.8) sepia(1) saturate(5) hue-rotate(345deg);cursor:pointer;opacity:.8;transition:opacity .2s,transform .2s}
input[type="date"]::-webkit-calendar-picker-indicator:hover{opacity:1;transform:scale(1.1)}
body{font-family:'Sora',sans-serif;background:var(--ink);color:var(--cream);min-height:100vh;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(244,162,41,.07) 0%, transparent 45%),
    radial-gradient(circle at 85% 85%, rgba(24,184,206,.06) 0%, transparent 50%),
    radial-gradient(circle at 70% 20%, rgba(157,123,255,.05) 0%, transparent 45%)}
.erp-wrap{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:24px clamp(14px,3vw,34px) 90px}

/* ── Page header ─────────────────────────────────────────────────────── */
.p-head{margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--border);position:relative;display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.p-head::after{content:'';position:absolute;left:0;bottom:-1px;width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent)}
.p-title{font-size:21px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.p-sub{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.6;max-width:760px}
.p-who{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}

/* ── Sub-navbar (underline tabs, tahap dikelompokkan) ────────────────── */
.req-subnav{display:flex;gap:6px;margin-bottom:18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.req-sub-btn{background:transparent;border:0;color:var(--muted);padding:10px 16px;font-family:'Sora',sans-serif;
  font-size:12px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;
  display:inline-flex;align-items:center;gap:7px}
.req-sub-btn:hover{color:var(--cream)}
.req-sub-btn.active{color:var(--gold);border-bottom-color:var(--gold)}
.req-sub-btn .n{font-size:10px;font-weight:800;color:var(--muted);background:rgba(238,243,255,.06);border-radius:100px;padding:1px 8px}
.req-sub-btn.active .n{color:var(--gold);background:rgba(244,162,41,.12)}
.req-panel{display:none}
.req-panel.active{display:block;animation:erpFade .3s ease}
@keyframes erpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── Ringkasan / stat cards ──────────────────────────────────────────── */
.hr-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-bottom:16px}
.hr-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 16px}
.hr-card .k{font-family:'Sora',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.hr-card .v{font-family:'Sora',sans-serif;font-size:25px;font-weight:700;color:var(--cream);margin-top:6px;line-height:1.05}
.hr-card .v small{font-size:14px;color:var(--muted);font-weight:600}
.hr-card .s{font-size:11px;color:var(--muted);margin-top:5px;line-height:1.4}
.hr-card.ok .v{color:var(--green)} .hr-card.warn .v{color:var(--amber)}
.hr-card.bad .v{color:var(--red)}  .hr-card.info .v{color:var(--teal)} .hr-card.gold .v{color:var(--gold)}

.hr-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px 16px;margin-bottom:14px}
.hr-box h4{margin:0 0 10px;font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;color:var(--cream);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hr-box h4 .n{font-size:10px;font-weight:800;color:var(--muted);background:rgba(238,243,255,.06);border-radius:100px;padding:1px 8px}
.hr-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
@media(max-width:980px){.hr-grid2{grid-template-columns:1fr}}
.hr-list{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.hr-row{display:flex;align-items:center;gap:10px;padding:7px 10px;border:1px solid var(--border);border-radius:9px;background:rgba(8,16,28,.4);font-size:12px}
.hr-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hr-row.click{cursor:pointer} .hr-row.click:hover{border-color:var(--gold)}
/* ⛔ Baris yang isinya BERBARIS BANYAK (mis. antrean surat: nama + beberapa
   chip kekurangan) tidak boleh dipotong "…". `.hr-row .nm` sengaja
   satu-baris untuk daftar biasa, tapi di baris multi-chip pemotongan itu
   MENYEMBUNYIKAN pekerjaan yang tersisa — persis informasi yang jadi alasan
   baris itu ada. Dipakai dengan menambah kelas `.wrap` pada .hr-row. */
.hr-row.wrap{align-items:flex-start;flex-wrap:wrap}
.hr-row.wrap .nm{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.55}
.hr-row.wrap .aksi{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.hr-empty{font-size:11.5px;color:var(--muted2);padding:8px 2px}
.hr-pill{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 8px;border-radius:100px;border:1px solid currentColor;white-space:nowrap}
.hr-pill.ok{color:var(--green)} .hr-pill.warn{color:var(--amber)} .hr-pill.bad{color:var(--red)}
.hr-pill.mut{color:var(--muted2)} .hr-pill.info{color:var(--teal)} .hr-pill.gold{color:var(--gold)} .hr-pill.blue{color:var(--blue)}

/* ── Deal / pipeline card — 3 zona hierarki (fix kartu rancu) ─────────── */
.deal{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:13px 16px;margin-bottom:10px;transition:border-color .18s,box-shadow .18s}
.deal:hover{border-color:var(--border2);box-shadow:0 8px 26px rgba(0,0,0,.22)}
.deal-head{display:flex;align-items:baseline;gap:10px}
.deal-title{font-family:'Sora',sans-serif;font-weight:700;font-size:15.5px;letter-spacing:-.01em;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-amt{margin-left:auto;font-family:'Sora',sans-serif;font-weight:800;font-size:15.5px;white-space:nowrap}
.deal-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px;color:var(--muted);font-size:11.5px}
.deal-meta .sep{opacity:.35}
.deal-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
.deal-actions .sp{flex:1}
/* ── Papan deal = SATU format (toggle Papan/Tabel dihapus 2026-08-01) ─────
   Kolom yang dulu jadi keunggulan view tabel dibawa ke kartu: layanan
   sejajar di kepala baris, nominal rata kanan, dan TOTAL di bawah daftar. */
.deal-svc{font-size:12px;color:var(--muted);min-width:0;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.deal-amt{font-variant-numeric:tabular-nums}
/* Nominal rata kanan dengan lebar tetap → digit sejajar antar kartu, yang
   memang keunggulan tabel: Rp 5.000.000 dan Rp 314.346.450 langsung terbaca
   besar-kecilnya tanpa dihitung karakternya. */
.deal-head .deal-amt{min-width:148px;text-align:right}
.deal-total{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:4px;padding:12px 16px;border:1px solid var(--border2);border-radius:12px;
  background:rgba(238,243,255,.03);font-size:12.5px;color:var(--muted)}
.deal-total b{font-family:'Sora',sans-serif;font-size:15px;font-weight:800;color:var(--cream);
  font-variant-numeric:tabular-nums}
/* AE sejajar di kiri baris aksi — di tabel ia satu kolom; di kartu ia harus
   tetap punya tempat tetap, bukan ikut terdorong tombol yang jumlahnya
   berbeda-beda per keadaan. */
.deal-actions .ae-inline{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.deal-actions .ae-inline select{min-width:132px}
@media(max-width:720px){
  .deal-svc{flex-basis:100%;order:3}
  .deal-head .deal-amt{min-width:0}
}

/* ⛔ `hidden` HARUS BENAR-BENAR MENYEMBUNYIKAN — aturan global, sekali.
   Bawaan peramban `[hidden]{display:none}` punya kekhususan yang SAMA dengan
   selektor kelas biasa, jadi setiap komponen di berkas ini yang menyetel
   `display:` sendiri (mis. `.btn{display:inline-flex}` di bawah) MENGALAHKANNYA
   dan elemen ber-atribut `hidden` tetap tergambar. Ditemukan 2026-08-01 di bar
   editor SPK/NDA: tombol "Edit" dan "⇪ Upload TTD" disetel `hidden=true`
   dengan benar oleh cdTerapkanMode(), atributnya memang terpasang, tapi
   keduanya tetap terlihat — jadi keadaan "baru" menampilkan LIMA tombol,
   persis kerancuan yang justru sedang diperbaiki.
   ⚠ Uji yang membaca `el.hidden` TIDAK akan menangkap ini (atributnya benar);
   yang menangkap hanya `getComputedStyle`/render sungguhan.
   Ditaruh di kit, bukan ditambal per halaman: yang menyebabkannya juga kit. */
[hidden]{display:none!important}

/* ── Buttons ─────────────────────────────────────────────────────────── */
.btn{border-radius:10px;padding:12px 18px;cursor:pointer;font-family:'Sora',sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.03em;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;
  background:rgba(238,243,255,.06);color:var(--cream);border:1px solid var(--border2);text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-1px);border-color:var(--muted)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-gold{background:linear-gradient(180deg,var(--gold),#E8911E);color:var(--ink);border:none;box-shadow:0 6px 18px rgba(244,162,41,.25)}
.btn-gold:hover{box-shadow:0 10px 26px rgba(244,162,41,.4)}
.btn-green{background:linear-gradient(180deg,var(--green),#2bb37e);color:#04160c;border:none}
.btn-red{background:rgba(255,107,107,.1);border-color:rgba(255,107,107,.35);color:var(--red)}
.btn-sm{padding:7px 12px;font-size:11px;border-radius:8px;letter-spacing:.02em}
.mbtn{background:rgba(238,243,255,.04);border:1px solid var(--border2);color:var(--cream);padding:8px 13px;border-radius:8px;
  font-family:'Sora',sans-serif;font-size:12px;font-weight:600;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;text-decoration:none}
.mbtn:hover{border-color:var(--gold)}
.mbtn.primary{background:var(--gold);border-color:var(--gold);color:#0c1320}
.mbtn.teal{border-color:var(--teal);color:var(--teal)} .mbtn.green{border-color:var(--green);color:var(--green)}
.mbtn.danger{border-color:rgba(255,107,90,.4);color:#FF6B5A}
.mbtn.tiny{padding:4px 9px;font-size:10.5px;border-radius:6px}
.mbtn:disabled{opacity:.45;cursor:not-allowed}
/* Aksi utama lintas ERP. Sebelumnya hanya Pengajuan Saya yang punya base
   rule ini, sehingga .go di Persetujuan/Notifikasi jatuh ke tombol bawaan
   browser. Modifier khusus dokumen, print, dan mobile tetap dimiliki halaman
   masing-masing. */
.go{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:linear-gradient(135deg,var(--gold) 0%,#E8911E 100%);border:1px solid var(--gold);color:#1a1205;padding:11px 22px;border-radius:100px;font-family:'Sora',sans-serif;font-size:13px;font-weight:700;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .15s}
.go:hover{transform:translateY(-1px);box-shadow:0 9px 24px rgba(244,162,41,.24)}
.go:focus-visible{outline:2px solid var(--cream);outline-offset:2px}
.go[disabled],.go[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

/* overflow ⋯ menu for secondary actions */
.more{position:relative;display:inline-block}
.more>.mbtn{padding:6px 9px}
.more-menu{position:absolute;right:0;top:calc(100% + 5px);background:var(--navy);border:1px solid var(--border2);
  border-radius:9px;box-shadow:0 16px 40px rgba(0,0,0,.5);min-width:184px;padding:5px;z-index:40;display:none}
.more.open .more-menu{display:block}
.more-menu button{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--cream);
  font-family:'Sora',sans-serif;font-size:12px;padding:8px 11px;border-radius:6px;cursor:pointer;white-space:nowrap}
.more-menu button:hover{background:rgba(238,243,255,.06)}
.more-menu button.danger{color:var(--red)}
.more-menu .div{height:1px;background:var(--border);margin:4px 6px}

/* ── Chips / status ──────────────────────────────────────────────────── */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;border-radius:20px;padding:3px 10px;
  background:rgba(238,243,255,.05);border:1px solid var(--border);color:var(--muted);white-space:nowrap}
.chip.st-draft{color:var(--muted2)}
.chip.st-progress{color:var(--blue);border-color:rgba(122,183,255,.3)}
.chip.st-sent{color:var(--teal);border-color:rgba(24,184,206,.3)}
.chip.st-won,.chip.st-paid{color:var(--green);border-color:rgba(61,220,151,.3)}
.chip.st-lost{color:var(--red);border-color:rgba(255,107,107,.3)}
.chip.st-fin,.chip.st-warn{color:var(--gold);border-color:rgba(244,162,41,.3)}
.chip.st-overdue{color:var(--red);border-color:rgba(255,107,107,.5)}

/* inline AE / small select in cards */
.ae-inline{display:inline-flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.ae-inline select{background:rgba(8,16,28,.6);border:1px solid var(--border2);color:var(--cream);border-radius:7px;
  font-family:'Sora',sans-serif;font-size:11px;padding:5px 8px;max-width:190px;cursor:pointer;outline:none}
.ae-inline select:focus{border-color:var(--gold)}

/* ── Filter toolbar ──────────────────────────────────────────────────── */
.fbar{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:12px 14px;margin-bottom:14px;
  background:var(--panel);border:1px solid var(--border);border-radius:13px}
.fgrp{display:flex;align-items:center;gap:7px;flex:none}
.fgrp>label{font-family:'Sora',sans-serif;font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.fgrp[hidden]{display:none}
.fgrp-act{margin-left:auto;gap:8px}
@media(max-width:1100px){.fgrp-act{margin-left:0;width:100%}}
.inp{background:rgba(238,243,255,.04);border:1px solid var(--border2);border-radius:10px;color:var(--cream);
  font-family:'Sora',sans-serif;font-size:12px;padding:8px 11px;outline:none}
.inp:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(244,162,41,.08)}
/* Native <option> popup renders with the OS default (white) bg while the text
   inherits the dark-theme light color → white-on-white / invisible. Force a
   solid dark bg + light text on every option/optgroup so ALL selects on ERP
   surfaces are readable (onboard-modal SOW dropdowns + any other select). */
select option,select optgroup,.inp option,.erp-field select option{
  background-color:#0c1626;color:#EEF3FF}
select option:disabled{color:#5A6785}
.fseg{display:inline-flex;border:1px solid var(--border2);border-radius:9px;overflow:hidden}
.fseg button{background:transparent;border:0;color:var(--muted);padding:8px 15px;cursor:pointer;font-family:'Sora',sans-serif;font-size:11.5px;font-weight:700;transition:all .15s}
.fseg button:hover{color:var(--cream)} .fseg button.on{background:var(--gold);color:#0c1320}

/* ── Table (rekap ala HR) ────────────────────────────────────────────── */
.tbl-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--border);border-radius:14px}
.tbl{width:100%;border-collapse:collapse;font-size:12px;min-width:560px}
.tbl th{text-align:left;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted2);font-weight:700;padding:11px 13px;border-bottom:1px solid var(--border2);white-space:nowrap}
.tbl td{padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:rgba(238,243,255,.02)}
.tbl .num{text-align:right;white-space:nowrap} .tbl .no{color:var(--gold);font-size:11.5px}

/* ── Modal / toast / misc ───────────────────────────────────────────── */
.wc-modal-bg{display:none;position:fixed;inset:0;z-index:9000;background:rgba(4,9,18,.7);backdrop-filter:blur(3px);align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
.wc-modal-bg.open{display:flex}
.wc-modal{background:var(--navy);border:1px solid var(--border2);border-radius:14px;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.5)}
.wc-modal.wide{max-width:900px}
.mp-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.mp-modal-head h3{margin:0;font-family:'Sora',sans-serif;font-size:15px;font-weight:700;color:var(--cream)}
.mp-close{background:none;border:0;color:var(--muted);font-size:22px;line-height:1;cursor:pointer}
.mp-close:hover{color:var(--cream)}
.mp-modal-body{padding:18px 20px;overflow-y:auto;flex:1;display:grid;gap:11px}
.mp-modal-foot{display:flex;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}
.erp-field label{display:block;font-size:9.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:800;margin:0 0 4px}
.erp-field input,.erp-field select{width:100%;background:rgba(238,243,255,.04);border:1px solid var(--border2);border-radius:9px;color:var(--cream);font-family:'Sora',sans-serif;font-size:12.5px;padding:9px 11px;outline:none}
.erp-field input:focus,.erp-field select:focus{border-color:var(--gold)}
.erp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
@media(max-width:560px){.erp-grid2{grid-template-columns:1fr}}

.wc-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);background:var(--navy);border:1px solid var(--border2);color:var(--cream);padding:11px 18px;border-radius:10px;font-size:13px;z-index:9500;opacity:0;transition:all .2s;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.wc-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ── Drawer kanan (detail per-deal, pola HR) ─────────────────────────── */
.hr-drawer-bg{display:none;position:fixed;inset:0;z-index:8900;background:rgba(4,9,18,.66);backdrop-filter:blur(3px)}
.hr-drawer-bg.open{display:block}
.hr-drawer{position:absolute;top:0;right:0;height:100%;width:min(1060px,97vw);background:var(--ink);border-left:1px solid var(--border2);box-shadow:-24px 0 60px rgba(0,0,0,.55);display:flex;flex-direction:column;transform:translateX(100%);transition:transform .24s cubic-bezier(.4,0,.2,1)}
.hr-drawer-bg.open .hr-drawer{transform:translateX(0)}
.hr-dr-head{display:flex;align-items:center;gap:14px;padding:15px 22px;border-bottom:1px solid var(--border);flex:none}
.hr-dr-av{width:46px;height:46px;border-radius:13px;background:rgba(244,162,41,.14);color:var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-size:16px;font-weight:700;flex:none}
.hr-dr-head .t{font-family:'Sora',sans-serif;font-size:16px;font-weight:700;color:var(--cream)}
.hr-dr-head .m{font-size:11px;color:var(--muted);margin-top:3px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.hr-dr-close{margin-left:auto;background:none;border:0;color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.hr-dr-close:hover{color:var(--cream)}
.hr-dr-body{padding:14px 22px 22px;overflow-y:auto;flex:1}
.hr-dr-body .req-subnav{position:sticky;top:0;background:var(--ink);z-index:2;margin:0 0 16px}
.hr-dr-body iframe{width:100%;height:calc(100vh - 180px);min-height:460px;border:0;border-radius:12px;background:var(--ink)}
.hr-dr-kv{display:grid;grid-template-columns:150px 1fr;gap:6px 12px;font-size:12.5px;margin:6px 0}
.hr-dr-kv .k{color:var(--muted)}

/* ⛔ `grid-column:1/-1` WAJIB ADA DI SINI. Empty state hampir selalu dipasang
   sebagai innerHTML dari wadah yang sama dengan kartunya, dan wadah itu sering
   berupa grid (`repeat(auto-fill,minmax(126px,1fr))`). Tanpa ini kalimatnya
   masuk ke SATU kolom selebar thumbnail dan terbaca satu kata per baris —
   penjelasan yang panjangnya benar tetapi tidak bisa dibaca sama sekali. Properti
   grid diabaikan begitu induknya bukan grid, jadi aturan ini aman di mana pun. */
.no-data{padding:40px 20px;text-align:center;color:var(--muted);font-size:13px;grid-column:1/-1}
.hint{font-size:11px;color:var(--muted);line-height:1.55}
.small{font-size:10.5px} .muted{color:var(--muted)}
.alert{padding:12px 16px;border-radius:9px;font-size:12px;line-height:1.5}
.alert-info{background:rgba(122,183,255,.08);border:1px solid rgba(122,183,255,.3);color:var(--blue)}
.alert-success{background:rgba(34,201,122,.08);border:1px solid rgba(61,220,151,.3);color:var(--green)}
.alert-warn{background:rgba(255,194,75,.08);border:1px solid rgba(255,194,75,.3);color:var(--amber)}

/* ── Mobile (≤600px) — dipakai bersama finance-files · project-tracking ·
   invoice-center · quotation-generator · manpower-plotting. Sumber utama
   halaman "meleber" di ponsel: `.fgrp{flex:none}` membuat filter bar menolak
   menyusut, lalu ikut menyeret seluruh halaman melebihi lebar layar. Tabel
   sengaja TETAP `min-width:560px` — ia sudah punya `.tbl-wrap{overflow-x:auto}`
   sendiri, jadi yang menggulir tabelnya, bukan halamannya. ── */
@media (max-width:600px){
  .fbar{padding:10px;gap:8px 10px}
  .fgrp{flex:1 1 100%;flex-wrap:wrap;min-width:0}
  .fgrp .inp,.fgrp select,.fgrp input{min-width:0}
  .fgrp-act{width:100%;margin-left:0}
  .fgrp-act .btn{flex:1 1 auto;justify-content:center}
  .req-subnav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .req-sub-btn{white-space:nowrap;flex:0 0 auto}
  .hr-cards{grid-template-columns:repeat(auto-fit,minmax(136px,1fr));gap:9px}
  .hr-box{padding:12px 13px}
  .hr-dr-kv{grid-template-columns:1fr;gap:2px 0}
  .hr-dr-kv .k{margin-top:6px}
  /* iOS Safari memperbesar halaman saat fokus ke input ber-font <16px. */
  input,select,textarea{font-size:16px}
}

/* ══════════════════════════════════════════════════════════════════════════
   POLISH SURFACE FINANCE — disamakan dengan standar HR (owner 2026-08-01:
   "polish ui ux nya semua yang ada di finance ini, refrensinya semua yang ada
   di divisi HR karena disana sudah di polish").
   Komponen di bawah SEBELUMNYA tidak ada di berkas bersama ini: tiap halaman
   Finance menuliskan versinya sendiri (atau tidak sama sekali — `.fchip`
   dipakai 16 kali di tiga halaman tanpa pernah didefinisikan, jadi yang
   tampil tombol polos bawaan browser yang bentuknya sama saat terpilih
   maupun tidak). Satu definisi di sini = seluruh Finance ikut rapi, dan
   perubahan berikutnya cukup di satu tempat.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Chip filter (pola HR: keadaan terpilih dibedakan isi + warna) ───────── */
.fchip{display:inline-flex;align-items:center;gap:6px;background:rgba(238,243,255,.04);
  border:1px solid var(--border2);color:var(--muted);border-radius:100px;padding:6px 13px;
  font-family:'Sora',sans-serif;font-size:11px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;transition:all .15s;white-space:nowrap;line-height:1.3}
.fchip:hover{color:var(--cream);border-color:var(--muted);background:rgba(238,243,255,.07)}
.fchip:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fchip.on{background:rgba(244,162,41,.14);border-color:var(--gold);color:var(--gold)}
.fchip .n{font-size:9.5px;font-weight:800;background:rgba(238,243,255,.08);border-radius:100px;padding:1px 6px}
.fchip.on .n{background:rgba(244,162,41,.2)}

/* ── KENDALI FILTER: satu gaya, satu TINGGI ──────────────────────────────
   ⛔ Gaya kendali di dalam .fbar/.tbl-search DIDEFINISIKAN DI SINI, bukan di
   tiap halaman. Sebelumnya expenses.html menulis ulang `padding:8px 11px`
   untuk `.tbl-search input`; karena <style> halaman dimuat SETELAH berkas ini,
   ia mengalahkan `padding-left:33px` di bawah — akibatnya ikon kaca pembesar
   menindih teks placeholder ("⌕ari deskripsi…"). Aturan yang sama berlaku
   untuk halaman lain: jangan menyalin gaya kendali ke halaman.
   TINGGI SERAGAM 34px penting karena satu baris filter memuat chip, select,
   input tanggal, dan tombol sekaligus — tanpa tinggi yang sama, deretannya
   terlihat bergerigi walau sudah dikelompokkan. */
.fbar select,.fbar input,.tbl-search input{
  height:34px;background:rgba(238,243,255,.04);border:1px solid var(--border2);
  border-radius:9px;color:var(--cream);font-family:'Sora',sans-serif;font-size:12px;
  padding:0 11px;outline:none;transition:border-color .15s,background .15s}
.fbar select:hover,.fbar input:hover,.tbl-search input:hover{background:rgba(238,243,255,.07)}
.fbar select:focus,.fbar input:focus,.tbl-search input:focus{border-color:var(--gold);background:rgba(238,243,255,.06)}
.fbar .btn,.fbar .btn-sm,.fgrp-act .btn{height:34px;display:inline-flex;align-items:center;gap:6px}
.fchip{height:34px}
.fbar input[type=date]{max-width:154px} .fbar input[type=month]{max-width:150px}
/* Ikon kalender bawaan peramban nyaris tak terlihat di tema gelap. */
.fbar input[type=date]::-webkit-calendar-picker-indicator,
.fbar input[type=month]::-webkit-calendar-picker-indicator{filter:invert(.72);opacity:.55;cursor:pointer}
.fbar input[type=date]:hover::-webkit-calendar-picker-indicator,
.fbar input[type=month]:hover::-webkit-calendar-picker-indicator{opacity:1}
.fsub{font-family:'Sora',sans-serif;font-size:9px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted2);white-space:nowrap}

/* ── Kotak cari DI ATAS tabel (aturan HR: aksi satu baris, cari di atas
      tabel yang disaringnya — bukan didempet ke ujung baris filter) ─────── */
.tbl-search{display:flex;align-items:center;gap:9px;margin:0 0 11px}
.tbl-search .box{position:relative;flex:1;max-width:420px}
.tbl-search .box svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted2);pointer-events:none}
.tbl-search input{width:100%;padding-left:34px}
.tbl-search .cnt{font-size:11px;color:var(--muted);margin-left:auto;white-space:nowrap}
.tbl-search[hidden]{display:none}

/* ── Paginasi (pola hrSlice/hrPager) ────────────────────────────────────── */
.erp-pager{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:13px;
  font-size:11.5px;color:var(--muted)}
.erp-pager b{color:var(--cream)}

/* ── Keadaan kosong yang MENJELASKAN, bukan sekadar "tidak ada data" ────── */
.erp-empty{padding:34px 20px;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.7}
.erp-empty b{color:var(--cream);display:block;margin-bottom:4px;font-size:13px}

/* ── Tabel: kepala menempel saat digulir + baris lebih terbaca ──────────── */
.tbl-wrap{max-height:none}
.tbl thead th,.tbl2 thead th{position:sticky;top:0;z-index:2;background:var(--panel)}
.tbl2{width:100%;border-collapse:collapse;font-size:12px}
.tbl2 th{text-align:left;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--muted2);
  font-weight:700;padding:11px 13px;border-bottom:1px solid var(--border2);white-space:nowrap}
.tbl2 td{padding:11px 13px;border-bottom:1px solid var(--border);vertical-align:middle}
.tbl2 tr:last-child td{border-bottom:0}
.tbl2 tbody tr:hover td{background:rgba(238,243,255,.02)}
.tbl2 .num{text-align:right;white-space:nowrap}
/* ⛔ Angka NOL diredupkan (aturan HR #10). Di tabel uang, sebagian besar sel
   sering bernilai nol; deretan "Rp 0" berkontras penuh menenggelamkan angka
   yang justru punya isi. Teksnya TETAP "Rp 0", tidak diganti "—": di sini nol
   berarti benar-benar nol, sedangkan "—" dipakai untuk "tidak berlaku". */
.tbl2 .nol,.tbl .nol{color:var(--muted2)}
/* Kolom aksi: tombol satu tinggi & rapat, jadi barisnya tidak "melar" tiap
   kali satu baris punya tombol lebih banyak dari tetangganya. */
/* ⛔ Tombol baris = `.mbtn tiny` (TENANG), persis HR — bukan `.btn btn-sm`.
   Di HR, aksi per baris adalah tombol kecil senyap dan aksi utamanya satu
   ("Kelola" yang membuka drawer). Finance dulu memakai .btn btn-sm untuk
   SEMUA aksi, jadi lima tombol berbobot sama berjejer di tiap baris —
   Ubah/Nota/Setujui/Tolak/✕ semuanya berteriak sekeras satu sama lain dan
   mata tak punya tempat mendarat. Sekarang: sekunder tenang, SATU yang
   utama (`.primary`) per keadaan baris. */
.tbl2 td .mbtn.tiny{height:26px;padding:0 9px;display:inline-flex;align-items:center;gap:5px;
  vertical-align:middle;font-size:10.5px;border-radius:7px}
.tbl2 td .mbtn.tiny+.mbtn.tiny{margin-left:5px}
.tbl2 td .mbtn.tiny svg{opacity:.8;flex:none}
.tbl2 td .btn-sm{height:28px;padding:0 10px;display:inline-flex;align-items:center;gap:5px;vertical-align:middle}
.tbl2 td .btn-sm+.btn-sm{margin-left:5px}
.tbl2 .aksi{white-space:nowrap;text-align:right}
.tbl2 .ikonbtn{padding:0 7px}
/* Kolom teks utama tidak boleh membungkus terlalu dini: tanpa batas lebar,
   "Biaya contoh baris ke-1" pecah jadi dua baris padahal ruangnya cukup, dan
   tinggi tiap baris jadi berbeda-beda. */
.tbl2 td b{font-weight:700}
.tbl2 .nowrap{white-space:nowrap}

/* ── Dropdown yang bisa diketik (combobox) — panel HTML, bukan popup OS
      yang terpotong di dalam modal ──────────────────────────────────────── */
.cb{position:relative}
.cb-in{width:100%;background:rgba(238,243,255,.05);border:1px solid var(--border2);border-radius:9px;
  color:var(--cream);font-family:'Sora',sans-serif;font-size:12.5px;padding:9px 30px 9px 11px;outline:none}
.cb-in:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(244,162,41,.10)}
.cb::after{content:'';position:absolute;right:12px;top:16px;width:6px;height:6px;pointer-events:none;
  border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg)}
.cb.open::after{transform:rotate(-135deg);top:19px}
.cb-list{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:60;
  background:var(--navy);border:1px solid var(--border2);border-radius:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.5);max-height:262px;overflow-y:auto;padding:5px}
.cb.open .cb-list{display:block}
.cb-g{font-size:9px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted2);
  padding:8px 10px 4px;position:sticky;top:-5px;background:var(--navy)}
.cb-o{padding:8px 10px;border-radius:7px;font-size:12.5px;color:var(--cream);cursor:pointer;line-height:1.4}
.cb-o:hover,.cb-o.sel{background:rgba(244,162,41,.14);color:var(--gold)}
.cb-o.now{font-weight:700}
.cb-o.now::after{content:' ✓';color:var(--gold)}
.cb-kosong{padding:12px 10px;font-size:12px;color:var(--muted);text-align:center}

/* Gaya dialog & toast (.eu-*) SENGAJA tidak di sini — ia disuntikkan oleh
   assets/erp-ui.js supaya modulnya mandiri dan tetap bergaya benar di halaman
   yang tidak memuat berkas ini (mis. builder quotation). Satu sumber gaya,
   tidak ada dua salinan yang lama-lama berbeda. */