/* ============================================================================
   VS DOCS — komponen dokumen bersama (DS 12.04.02):
     · .vs-receipt  = unit GUI/19/RECEIPT (struk/kwitansi/Tagihan)
     · .inv2-*      = dokumen Invoice resmi (A4)
     · .rcp2-*      = bingkai kwitansi per-pembayaran
   SATU sumber untuk POS, drawer Schedule/Order (admin), dan Appointment Card
   (publik). Dipindahkan dari admin.css 3 Sep 2026 (owner: output kwitansi/invoice
   harus sama di semua modul). Warna/spasi/radius HANYA token (app.css/tokens).
   ============================================================================ */
/* ============================================================
   DOKUMEN TRANSAKSI — Invoice Card (.inv2) & Struk kasir (.rcp2)
   Reproduksi komponen master; angka mono, rule identity di kepala invoice.
   ============================================================ */
.inv2 { display:flex; flex-direction:column; gap:14px; padding:24px 26px; background:var(--surface-0,var(--paper));
  border:1px solid var(--line-200,var(--line)); border-top:3px solid var(--identity-yellow,#FFF700); border-radius:var(--radius-md,14px); }

.inv2-head { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:14px; }

.inv2-kicker { display:block; color:var(--text-subtle,var(--ink-400)); font-family:var(--font-mono); font-size:10px; font-weight:650; letter-spacing:.12em; text-transform:uppercase; }

.inv2-no { display:block; margin-top:4px; color:var(--text-strong,var(--ink)); font-size:27px; font-weight:750; letter-spacing:-.02em; }

.inv2-headright { display:grid; justify-items:end; gap:8px; }

.inv2-brand { color:var(--text-strong,var(--ink)); font-size:12px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }

.inv2-status { padding:5px 12px; border:1px solid; border-radius:var(--radius-pill,100px); font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }

.inv2-status.is-due  { color:var(--tag-orange-text);  background:var(--tag-orange-bg);  border-color:var(--tag-orange-border); }

.inv2-status.is-paid { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); }

.inv2-meta { color:var(--text-subtle,var(--ink-400)); font-size:11px; letter-spacing:.06em; text-transform:uppercase; }

.inv2-panel { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:14px 16px;
  background:var(--surface-1,var(--paper-warm)); border-radius:var(--radius-sm,10px); }

.inv2-panel > div { min-width:0; display:grid; gap:3px; }

.inv2-panel b { overflow:hidden; color:var(--text-strong,var(--ink)); font-size:14px; text-overflow:ellipsis; white-space:nowrap; }

.inv2-panel small { color:var(--text-subtle,var(--ink-400)); font-size:11.5px; }

.inv2-lines { display:flex; flex-direction:column; }

.inv2-line { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line-100,var(--line-soft)); }

.inv2-line b { display:block; color:var(--text-strong,var(--ink)); font-size:14px; font-weight:700; }

.inv2-line small { display:block; margin-top:2px; color:var(--text-subtle,var(--ink-400)); font-size:11.5px; }

.inv2-line strong { font-size:14px; font-weight:600; }

.inv2-totals { display:grid; gap:7px; justify-self:end; width:min(320px,100%); margin-left:auto; }

.inv2-totals > div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; color:var(--text-body,var(--ink-700)); font-size:13px; }

.inv2-totals .inv2-total { padding-top:7px; border-top:1px solid var(--line-200,var(--line)); font-size:15px; font-weight:750; }

.inv2-totals .inv2-due { padding-top:9px; border-top:2px solid var(--ink-900,var(--ink)); font-size:17px; font-weight:750; }

.inv2-foot { padding-top:12px; border-top:1px solid var(--line-100,var(--line-soft)); color:var(--text-subtle,var(--ink-400)); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; }

/* ── Dokumen Order (brief §Phase 2.D): daftar sesi + section per tanggal transaksi.
   Anatominya meneruskan .inv2-* yang sudah ada; hanya penataan grup yang baru.
   Spacing/tipografi SELURUHNYA token (ADR D-23); hairline 1px tetap literal
   karena ia lebar garis, bukan nilai skala. */
.inv2-sessions { grid-template-columns:minmax(0,1fr); }

.inv2-session-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4); align-items:center; padding:var(--space-3) 0; border-bottom:1px solid var(--line-100,var(--line-soft)); }

.inv2-session-row:last-child { border-bottom:0; }

.inv2-session-row b { overflow:hidden; display:block; font-size:var(--text-sm); text-overflow:ellipsis; white-space:nowrap; }

.inv2-session-row small { display:block; margin-top:var(--space-1); color:var(--text-subtle,var(--ink-400)); font-size:var(--text-2xs); }

.inv2-txsec { padding-top:var(--space-4); }

.inv2-txsec + .inv2-txsec { margin-top:var(--space-3); border-top:1px solid var(--line-100,var(--line-soft)); }

.inv2-txsec-head { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-4); align-items:baseline; padding-bottom:var(--space-2); }

.inv2-txsec-head small { color:var(--text-subtle,var(--ink-400)); font-size:var(--text-2xs); }

.inv2-line--sum { border-bottom:0; font-weight:var(--fw-bold); }

.inv2-request { margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line-200,var(--line)); }

/* ── Riwayat pembayaran (tiap transaksi + kapan dibayar) ──
   Baris komposit → grid, sesuai aturan: no|isi|status|nominal|kumulatif. */
.inv2-pay { display:flex; flex-direction:column; gap:8px; padding-top:14px; border-top:1px solid var(--line-100,var(--line-soft)); }

.inv2-pay-empty { color:var(--text-subtle,var(--ink-400)); font-size:12px; }

.inv2-pay-row {
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:start;
  gap:4px 10px;
  padding:10px 12px;
  background:var(--surface-1,var(--paper-warm));
  border:1px solid var(--line-100,var(--line-soft));
  border-radius:var(--radius-sm,10px);
}

.inv2-pay-seq {
  display:grid; place-items:center; width:22px; height:22px;
  color:var(--text-muted,var(--graphite));
  background:var(--surface-0,var(--paper));
  border:1px solid var(--line-200,var(--line));
  border-radius:var(--radius-pill,100px);
  font-size:10.5px;
}

.inv2-pay-main { min-width:0; display:grid; justify-items:start; gap:2px; }

.inv2-pay-main b { color:var(--text-strong,var(--ink)); font-size:13px; font-weight:700; }

.inv2-pay-main small { color:var(--text-subtle,var(--ink-400)); font-size:11px; overflow-wrap:anywhere; }

.inv2-pay-stat { margin-top:3px; padding:3px 9px; border:1px solid; border-radius:var(--radius-pill,100px); font-family:var(--font-mono); font-size:10px; letter-spacing:.05em; }

.inv2-pay-stat.is-ok   { color:var(--tag-success-text); background:var(--tag-success-bg); border-color:var(--tag-success-border); }

.inv2-pay-stat.is-wait { color:var(--tag-orange-text);  background:var(--tag-orange-bg);  border-color:var(--tag-orange-border); }

/* Kolom nominal: rata kanan, tak pernah ikut menyusut. */
.inv2-pay-amt { display:grid; justify-items:end; gap:2px; text-align:right; }

.inv2-pay-amt strong { color:var(--text-strong,var(--ink)); font-size:14px; font-weight:700; white-space:nowrap; }

.inv2-pay-run { color:var(--text-subtle,var(--ink-400)); font-size:10.5px; white-space:nowrap; }

/* ── Halaman lampiran bukti transfer ── */
.inv2-proofpage { margin-top:16px; padding-top:14px; border-top:1px solid var(--line-200,var(--line)); break-before:page; }

.inv2-proofpage-head { display:grid; gap:3px; margin-bottom:12px; }

.inv2-proofpage-head b { color:var(--text-strong,var(--ink)); font-size:16px; font-weight:750; }

.inv2-proofpage-head small { color:var(--text-subtle,var(--ink-400)); font-size:11.5px; }

.inv2-proof-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }

.inv2-proof-card { margin:0; border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-sm,10px); overflow:hidden; background:var(--surface-0,var(--paper)); }

.inv2-proof-card img { display:block; width:100%; max-height:260px; object-fit:contain; background:var(--surface-1,var(--paper-warm)); }

.inv2-proof-card figcaption { display:grid; gap:2px; padding:9px 11px; border-top:1px solid var(--line-100,var(--line-soft)); }

.inv2-proof-card figcaption b { color:var(--text-strong,var(--ink)); font-size:12px; font-weight:700; }

.inv2-proof-card figcaption small { color:var(--text-subtle,var(--ink-400)); font-size:10.5px; }

.inv2-proof-card figcaption small.is-ok   { color:var(--tag-success-text); }

.inv2-proof-card figcaption small.is-wait { color:var(--tag-orange-text); }

/* Receipt: banner status saat pembayaran belum diverifikasi. */
.rcp2-warn {
  display:flex; align-items:flex-start; gap:8px;
  padding:9px 11px;
  color:var(--tag-orange-text); background:var(--tag-orange-bg);
  border:1px solid var(--tag-orange-border); border-radius:var(--radius-sm,10px);
  font-size:11.5px; line-height:1.45;
}

.rcp2-warn svg { flex:none; margin-top:1px; }

.rcp2 { display:flex; flex-direction:column; gap:12px; padding:22px; background:var(--surface-0,var(--paper));
  border:1px solid var(--line-200,var(--line)); border-radius:var(--radius-md,14px); }

.rcp2-title { color:var(--text-strong,var(--ink)); font-size:20px; font-weight:750; letter-spacing:-.01em; }

/* Kertas struk drawer generasi lama (`.rcp-paper` dkk) DICABUT — struk kasir dan
   Kwitansi kini memakai komponen DS bersama `.vs-receipt` (unit GUI/19/RECEIPT),
   sama dengan POS. Menyisakannya berarti menyimpan desain struk kedua yang siap
   dipakai tanpa sengaja lalu menyimpang lagi. `.rcp2*` (bingkai dokumen di
   sekeliling kertas, bukan kertasnya) TETAP dipakai dan tidak ikut dicabut. */

/* Picker add-on pada modal Tambah Charge (hirarki paket → katalog → manual). */
.ch-list { display:flex; flex-direction:column; gap:6px; max-height:280px; overflow-y:auto; }

/* Kartu struk generasi lama — dipertahankan hanya untuk markup lain yang masih
   memakainya TANPA .vs-receipt. Warna kertas kini token (dulu literal #fff).
   Struk kanonik = .vs-receipt (unit DS GUI/19/RECEIPT) di bagian POSDOC-REFRESH. */
.pos-receipt-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface-0); padding:18px; }

/* ---- document tab preview ---- */
/* Dibatasi ke kartu struk LAMA (`:not(.vs-receipt)`) — dulu selektornya menyebut
   .pos-watermark yang sudah dihapus, dan `> *` di sini lebih spesifik daripada
   aturan .vs-receipt sehingga akan diam-diam mengembalikan margin samping ke
   struk kanonik. Batasi di selektornya, jangan diadu spesifisitas. */
.pos-receipt-card:not(.vs-receipt) { border-radius:var(--r-md); box-shadow:var(--shadow-card); padding:0; }

.pos-receipt-card:not(.vs-receipt)::before { content:''; display:block; height:4px; background:var(--pos-rule); }

.pos-receipt-card:not(.vs-receipt) > * { margin-left:22px; margin-right:24px; }

/* `:not(.vs-receipt)` — selektor dua-kelas ini (0,2,0) mengalahkan .vs-receipt (0,1,0)
   dan diam-diam memaksa radius struk kanonik kembali ke --radius-sm. Batasi ke kartu lama. */
.content--pos .pos-receipt-card:not(.vs-receipt) { border:1px solid var(--line-200); border-radius:var(--radius-sm); }

/* -- Struk thermal 58 mm (preview Visual) -- */
/* ── vs-receipt · unit DS `GUI/19/RECEIPT` (Receipt — struk thermal 58 mm) ──────
   SATU tampilan struk untuk SELURUH VS OS: POS, drawer Booking/Schedule (Kwitansi),
   dan permukaan mana pun yang menampilkan struk. Sebelumnya ada dua desain terpisah
   (`pos-rc*` yang ter-scope `.content--pos`, dan `rcp-*` di drawer) — keduanya kini
   memakai blok ini. Anatomi mengikuti master 12.04.02 §19 Transaction summary:
   kertas mono sempit terpusat · pemisah DASHED ink-300 · meta rapat · TOTAL menonjol ·
   barcode dekoratif · footer brand.
   TIDAK ter-scope ke modul mana pun, dan nilai warna/spasi/radius/bayangan HANYA token. */
.vs-receipt {
  position:static; width:100%; max-width:264px; margin:6px auto; overflow:visible;
  display:flex; flex-direction:column; gap:8px;
  padding:18px 16px; border:1px solid var(--line-200); border-radius:var(--r-xs);
  background:var(--surface-0); box-shadow:var(--shadow-card);
  font-family:var(--font-mono); font-variant-numeric:tabular-nums;
}

.vs-receipt::before { display:none; }

          /* tema kartu app tidak menempel pita/aksen di struk */
.vs-receipt > * { margin-left:0; margin-right:0; }

.vs-receipt__brand { font-weight:800; font-size:13px; letter-spacing:.02em; text-align:center; color:var(--ink-900); }

.vs-receipt__addr { font-size:9.5px; color:var(--text-subtle); text-align:center; line-height:1.5; }

.vs-receipt__sep { border-top:1px dashed var(--ink-300); }

.vs-receipt__meta { display:flex; flex-direction:column; gap:2px; font-size:9.5px; color:var(--text-muted); }

/* Status BERWARNA sesuai keadaannya (memakai token tag DS yang sama dengan chip
   status di modul lain) — supaya "belum bayar" vs "lunas" terbaca sekali lihat. */
.vs-receipt__status {
  align-self:flex-start; margin-top:2px; display:inline-flex; align-items:center; gap:5px;
  padding:2px 7px; border-radius:var(--radius-pill); border:1px solid var(--tag-neutral-border);
  background:var(--tag-neutral-bg); color:var(--tag-neutral-text);
  font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}

.vs-receipt__status[data-tone="success"] { background:var(--tag-success-bg); border-color:var(--tag-success-border); color:var(--tag-success-text); }

.vs-receipt__status[data-tone="warning"] { background:var(--tag-warning-bg); border-color:var(--tag-warning-border); color:var(--tag-warning-text); }

.vs-receipt__status[data-tone="orange"]  { background:var(--tag-orange-bg);  border-color:var(--tag-orange-border);  color:var(--tag-orange-text); }

.vs-receipt__status[data-tone="danger"]  { background:var(--tag-danger-bg);  border-color:var(--tag-danger-border);  color:var(--tag-danger-text); }

.vs-receipt__status[data-tone="blue"]    { background:var(--tag-blue-bg);    border-color:var(--tag-blue-border);    color:var(--tag-blue-text); }

.vs-receipt__items { display:flex; flex-direction:column; gap:5px; }

.vs-receipt__item { display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--text-strong); }

.vs-receipt__item-l { min-width:0; display:flex; flex-direction:column; gap:1px; }

.vs-receipt__item-l small { font-size:9px; color:var(--text-subtle); }

.vs-receipt__item-a { white-space:nowrap; }

.vs-receipt__empty { font-size:10.5px; color:var(--text-subtle); }

.vs-receipt__row { display:flex; justify-content:space-between; gap:8px; font-size:10.5px; color:var(--text-muted); }

.vs-receipt__row.is-total { font-size:12.5px; font-weight:700; color:var(--text-strong); padding:2px 0; }

.vs-receipt__row.is-due { font-weight:600; color:var(--text-strong); }

.vs-receipt__notes { font-size:9.5px; color:var(--text-muted); line-height:1.5; }

.vs-receipt__bar { align-self:center; display:block; color:var(--ink-900); }

.vs-receipt__foot { font-size:9.5px; color:var(--text-muted); text-align:center; line-height:1.5; }

/* `pos-receipt-card pos-rc` tetap dipasang di elemen akar struk POS sebagai KAIT
   (penangkap PNG & uji kontrak), bukan sebagai gaya — seluruh tampilannya datang
   dari .vs-receipt di atas. Jangan menambahkan aturan visual ke nama lama itu:
   dua sumber gaya untuk satu elemen adalah cara desain ini menyimpang lagi. */
/* -- Header preview: label & toggle Text/Visual tidak saling timpa -- */
.pos-drawer__body .pos-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0; }

/* Spec 12.56.B §D6 — dulu flex penuh 763px: label rata kiri, nilai rata kanan,
   ±650px kosong di antaranya. Pasangan label–nilai dibatasi 38ch dan didorong ke
   kanan, mengikuti pola .inv2-totals yang memang sudah benar. */
.sd2-charge-total { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:var(--space-4); max-width:38ch; margin-left:auto; padding:var(--space-4) var(--pane-gutter,var(--space-6)); background:var(--surface-50,var(--paper-warm)); border-top:1px solid var(--line-100,var(--line-soft)); }

.sched-doc-modal-body .inv2 {
  /* Kontrak lebar overlay fluid (owner 11 Sep 2026): lembar A4 (210mm) hanya bila muat;
     di kotak yang lebih sempit (tablet/HP) lembar mengecil mengikuti wadah, bukan
     meluap ke kanan dengan scroll horizontal. Tinggi A4 tetap di layar lebar saja. */
  width:min(210mm, 100%); max-width:100%; min-height:min(297mm, 60dvh); padding:clamp(16px, 4%, 14mm);      /* == @page margin */
  margin-inline:auto; box-shadow:var(--shadow-card);
}
.sched-doc-modal-body { overflow-x:hidden; }

/* Kop: identitas penerbit di kiri, jenis dokumen di kanan. */
.inv2-masthead { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:var(--space-5); padding-bottom:var(--space-4); border-bottom:2px solid var(--ink-900,var(--ink)); }

.inv2-issuer { display:grid; gap:var(--space-1); min-width:0; }

.inv2-issuer-name { font-family:var(--font-display,var(--font-sans)); font-size:var(--text-h4,18px); font-weight:750; }

.inv2-issuer small { color:var(--text-subtle,var(--ink-400)); font-size:var(--text-2xs,11px); }

.inv2-doctype { display:grid; justify-items:end; gap:var(--space-2); }

.inv2-doctype-word { font-family:var(--font-display,var(--font-sans)); font-size:var(--text-h3,22px); font-weight:750; letter-spacing:.08em; }

/* Identitas dokumen: nomor · terbit · jatuh tempo. Nomor TIDAK BOLEH ter-ellipsis. */
/* Penanda invoice yang BELUM diterbitkan (U1): isinya masih ikut data hidup,
   jadi katakan itu di atas kertas — jangan biarkan pratinjau terbaca resmi.
   Baris ikon+teks memakai grid (aturan owner), tanpa garis warna pinggir. */
.inv2-preview { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-3);
  align-items:start; margin:var(--space-3) 0 0; padding:var(--space-3) var(--space-4);
  background:var(--pst-warning-bg); color:var(--pst-warning-text);
  border-radius:var(--radius-sm,10px); font-size:var(--text-2xs); line-height:var(--lh-normal); }

.inv2-preview svg { flex:none; margin-top:1px; }

.inv2-docmeta { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4); padding:var(--space-4) 0; }

.inv2-docmeta > div { display:grid; gap:var(--space-1); min-width:0; }

.inv2-docmeta b { font-size:var(--text-xs,13px); font-weight:700; overflow-wrap:anywhere; white-space:normal; }

.inv2-docmeta .inv2-no { font-size:var(--text-sm,14px); }

/* Nomor identitas di panel mana pun: membungkus, bukan dipotong "…". */
.inv2-panel b { overflow:visible; overflow-wrap:anywhere; text-overflow:clip; white-space:normal; }

/* Header kolom tabel item. */
.inv2-line--head { border-bottom:1px solid var(--ink-900,var(--ink)); }

.inv2-line--head b, .inv2-line--head strong { color:var(--text-subtle,var(--ink-400)); font-size:var(--text-2xs,11px); font-weight:700; letter-spacing:.06em; text-transform:uppercase; }

/* Syarat pembayaran + tanda tangan. */
.inv2-terms { display:grid; gap:var(--space-1); margin-top:var(--space-5); padding-top:var(--space-4); border-top:1px solid var(--line-200,var(--line)); }

.inv2-terms small { color:var(--text-muted,var(--ink-600)); font-size:var(--text-2xs,11px); }

.inv2-sign { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-8); margin-top:var(--space-8); }

.inv2-sign-col { display:grid; gap:var(--space-2); }

.inv2-sign-rule { height:var(--space-10); border-bottom:1px solid var(--ink-900,var(--ink)); }

.inv2-sign-col small { color:var(--text-muted,var(--ink-600)); font-size:var(--text-2xs,11px); }

.inv2-pagefoot { margin-top:auto; padding-top:var(--space-5); color:var(--text-subtle,var(--ink-400)); }

.inv2 { display:flex; flex-direction:column; }

.vs-receipt__item--group { margin-top:var(--space-1); padding-top:var(--space-2); border-top:1px dashed var(--ink-300); font-weight:700; }

.inv2-line-date { color:var(--text-muted,var(--ink-600)); }