/* pages/invoice.css — daftar (.pg-invoice-list), detail (.pg-invoice-detail), editor (.pg-invoice-editor) */
.pg-invoice-list{display:flex;flex-direction:column;gap:18px}
.pg-invoice-list .il-late{font-weight:700;color:var(--due-text)}

.pg-invoice-detail{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.pg-invoice-detail .ivd-bar{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pg-invoice-detail .ivd-doc{min-width:0;display:flex;justify-content:center}
.pg-invoice-detail .ivd-side{position:sticky;top:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pg-invoice-detail .ivd-status{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pg-invoice-detail .ivd-lbl{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.pg-invoice-detail .ivd-rest{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.01em}
.pg-invoice-detail .ivd-rows{align-self:stretch;margin-top:6px}
.pg-invoice-detail .ivd-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid var(--line);font-size:var(--fs-sm)}
.pg-invoice-detail .ivd-h{margin-bottom:10px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.pg-invoice-detail .ivd-pay{display:flex;flex-direction:column;gap:6px;margin-bottom:8px;padding:10px 12px;border-radius:12px;background:var(--surface-2);font-size:var(--fs-sm)}
.pg-invoice-detail .ivd-pay-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pg-invoice-detail .ivd-pay-actions{display:flex;justify-content:flex-end}
.pg-invoice-detail .ivd-note{font-size:var(--fs-sm);color:var(--text-3)}
.pg-invoice-detail .ivd-subnote{display:flex;align-items:center;gap:6px;margin-top:12px}

/* Editor: kertas A4 yang bisa diketik + panel samping (simpan, pajak & DP, tampilan) */
.pg-invoice-editor{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.pg-invoice-editor .ie-paper{justify-self:center}
.pg-invoice-editor .ie-side{position:sticky;top:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.pg-invoice-editor .ie-actions{display:flex;flex-direction:column;gap:12px}
.pg-invoice-editor .ie-sum-mini{display:flex;flex-direction:column;gap:2px;min-width:0}
.pg-invoice-editor .ie-total-lbl{font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-3)}
.pg-invoice-editor .ie-total{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.01em;white-space:nowrap}
.pg-invoice-editor .ie-net{font-size:var(--fs-sm);color:var(--text-2)}
.pg-invoice-editor .ie-btns{display:flex;flex-direction:column;gap:8px}
.pg-invoice-editor .ie-btns .btn{width:100%;justify-content:center}
.pg-invoice-editor .ie-bt-short{display:none}
.pg-invoice-editor .ie-note{font-size:var(--fs-xs);color:var(--text-3);line-height:1.5}
.pg-invoice-editor .ie-h{margin-bottom:10px;font-size:var(--fs-sm);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2)}
.pg-invoice-editor .ie-dp--sep{margin-top:12px;padding-top:14px;border-top:1px solid var(--line)}
.pg-invoice-editor .ie-dp .fld-row{margin-bottom:10px}

/* Isian di atas kertas: abu lembut saat diam, bergaris saat disorot/diketik */
.pg-invoice-editor .ie-input{min-height:36px;padding:6px 10px;border-color:transparent;border-radius:10px;background-color:#f1f5f9;font-size:13px}
.pg-invoice-editor .ie-input:hover{border-color:var(--line-strong)}
.pg-invoice-editor .ie-input:focus{border-color:var(--brand-2);background-color:#fff}
.pg-invoice-editor .ie-input[aria-invalid="true"]{border-color:var(--due-1);background-color:#fff}
.pg-invoice-editor .ie-input.fld-select{padding-right:32px;background-position:right 9px center}
.pg-invoice-editor .fld-row>.doc-lbl{margin:0}
.pg-invoice-editor .ie-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:10px}
.pg-invoice-editor .ie-mrow{display:grid;grid-template-columns:auto 150px;align-items:center;gap:4px 10px;margin:0}
.pg-invoice-editor .ie-mrow .fld-error{grid-column:1/-1;justify-self:end;text-align:right}
.pg-invoice-editor .ie-mlbl{font-size:12px;color:#64748b;text-align:right}
.pg-invoice-editor .ie-no{padding:0 10px;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.pg-invoice-editor .ie-no small{display:block;font-size:12px;font-weight:500;opacity:.8}
.pg-invoice-editor .doc--modern .doc-head .ie-input{background-color:rgba(255,255,255,.14);border-color:rgba(255,255,255,.45);color:#fff;color-scheme:dark}
.pg-invoice-editor .doc--modern .doc-head .ie-input:focus{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.28)}
.pg-invoice-editor .doc--modern .doc-head .ie-input[aria-invalid="true"]{border-color:#fecaca;box-shadow:0 0 0 3px rgba(254,202,202,.35)}
.pg-invoice-editor .doc--modern .doc-head .fld-error{padding:2px 8px;border-radius:6px;background:#b91c1c;color:#fff}
.pg-invoice-editor .doc--modern .ie-mlbl{color:rgba(255,255,255,.88)}
.pg-invoice-editor .ie-bill{max-width:440px}
.pg-invoice-editor .ie-bill .fld-row{margin-bottom:6px}
.pg-invoice-editor .ie-client{min-height:42px;font-size:15px;font-weight:800;color:#0f172a}
.pg-invoice-editor .ie-client::placeholder{font-weight:500}
.pg-invoice-editor .ie-muted{color:#64748b}

/* Baris jasa: tabel di laptop, kartu di HP */
.pg-invoice-editor .ie-lhead,.pg-invoice-editor .ie-line{display:grid;grid-template-columns:minmax(0,1fr) 64px 128px 116px 36px;gap:8px;align-items:start}
.pg-invoice-editor .ie-lhead{padding:10px 0;border-bottom:2px solid #e2e8f0;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#64748b}
.pg-invoice-editor .ie-lhead span:nth-child(n+2){text-align:right}
.pg-invoice-editor .ie-line{padding:10px 0;border-bottom:1px solid #eef1f5}
.pg-invoice-editor .ie-cell{margin:0;gap:4px}
.pg-invoice-editor .ie-cell-lbl,.pg-invoice-editor .ie-amt-lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pg-invoice-editor .ie-desc{min-height:36px;resize:none;overflow:hidden;line-height:1.45}
.pg-invoice-editor .ie-num{text-align:right;font-variant-numeric:tabular-nums}
.pg-invoice-editor .ie-amt{padding-top:8px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-invoice-editor .ie-del{color:var(--text-3)}
.pg-invoice-editor .ie-del:hover{background:var(--b-overdue-bg);color:var(--due-text)}
.pg-invoice-editor .ie-empty{display:flex;align-items:center;gap:10px;padding:16px 14px;border:1px dashed #cbd5e1;border-radius:12px;color:#64748b;font-size:13px}
.pg-invoice-editor .ie-add{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px;margin-top:12px}
.pg-invoice-editor .ie-cat-row{flex:1 1 320px;margin:0}
.pg-invoice-editor .ie-input.pk-input{padding-left:34px;padding-right:34px}
/* Daftar katalog boleh keluar dari kertas; sudut atas pita template Modern tetap membulat */
.pg-invoice-editor .ie-paper{overflow:visible}
.pg-invoice-editor .doc--modern .doc-head{border-top-left-radius:inherit;border-top-right-radius:inherit}
.pg-invoice-editor .ie-subchip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;padding:2px 3px 2px 9px;border-radius:var(--r-pill);background:var(--b-info-bg);color:var(--b-info-fg);font-size:12px;font-weight:600}
.pg-invoice-editor .ie-subx{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;color:inherit;transition:background-color var(--dur-fast)}
.pg-invoice-editor .ie-subx:hover{background:rgba(15,23,42,.08)}
.pg-invoice-editor .ie-notes{margin:22px 0 0}
.pg-invoice-editor .ie-notes-input{min-height:64px;resize:vertical;line-height:1.5}

/* Layar laptop pendek: hanya kotak Simpan yang menempel */
@media (min-width:1200px) and (max-height:760px){
  .pg-invoice-editor .ie-side{position:static;align-self:stretch}
  .pg-invoice-editor .ie-actions{position:sticky;top:22px;z-index:var(--z-sticky)}
}
/* < 1200: satu kolom; kotak Simpan jadi bilah yang menempel di bawah layar */
@media (max-width:1199px){
  .pg-invoice-editor{display:flex;flex-direction:column;align-items:stretch}
  .pg-invoice-editor .ie-paper{align-self:center}
  .pg-invoice-editor .ie-side{display:contents}
  .pg-invoice-editor .ie-actions{order:3;position:sticky;bottom:12px;z-index:var(--z-sticky);flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px;background:var(--surface);box-shadow:var(--sh-3)}
  .pg-invoice-editor .ie-sum-mini{flex:1 1 auto}
  .pg-invoice-editor .ie-btns{flex-direction:row-reverse;margin-left:auto}
  .pg-invoice-editor .ie-btns .btn{width:auto}
  .pg-invoice-editor .ie-note{display:none}
  .pg-invoice-editor .ie-total{font-size:var(--fs-xl)}
  .pg-invoice-editor .pk-panel{scroll-margin-bottom:96px}
}

@media (max-width:1023px){
  .pg-invoice-detail{grid-template-columns:minmax(0,1fr)}
  .pg-invoice-detail .ivd-side{position:static;order:-1}
  .pg-invoice-detail .ivd-bar{order:-2}
  .pg-invoice-editor .ie-actions{bottom:calc(var(--bn-h) + 12px + env(safe-area-inset-bottom))}
  .pg-invoice-editor .pk-panel{scroll-margin-bottom:calc(var(--bn-h) + 96px + env(safe-area-inset-bottom))}
}
@media (max-width:767px){
  .pg-invoice-detail .ivd-bar .btn{flex:1 1 calc(50% - 8px)}
  .pg-invoice-editor .ie-input{min-height:44px;font-size:16px}
  .pg-invoice-editor .ie-meta{align-items:stretch}
  .pg-invoice-editor .ie-mrow{grid-template-columns:96px minmax(0,1fr)}
  .pg-invoice-editor .ie-mlbl,.pg-invoice-editor .ie-no{text-align:left}
  .pg-invoice-editor .ie-no{padding:0}
  .pg-invoice-editor .ie-mrow .fld-error{justify-self:start;text-align:left}
  .pg-invoice-editor .ie-lhead{display:none}
  .pg-invoice-editor .ie-line{grid-template-columns:80px minmax(0,1fr) 44px;grid-template-areas:"desc desc desc" "qty price del" "amt amt amt";gap:8px;padding:14px 0}
  .pg-invoice-editor .ie-c-desc{grid-area:desc}
  .pg-invoice-editor .ie-c-qty{grid-area:qty}
  .pg-invoice-editor .ie-c-price{grid-area:price}
  .pg-invoice-editor .ie-del{grid-area:del;align-self:end;width:44px;height:44px}
  .pg-invoice-editor .ie-amt{grid-area:amt;display:flex;justify-content:space-between;align-items:baseline;padding-top:0}
  .pg-invoice-editor .ie-cell-lbl,.pg-invoice-editor .ie-amt-lbl{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;font-size:12px;font-weight:700;color:#64748b}
  .pg-invoice-editor .ie-subx{width:32px;height:32px}
  .pg-invoice-editor .ie-add .btn{flex:1 1 auto}
  .pg-invoice-editor .ie-actions{padding:10px 12px;gap:8px 10px}
  .pg-invoice-editor .ie-net{display:none}
  .pg-invoice-editor .ie-total{font-size:var(--fs-lg)}
  .pg-invoice-editor .ie-btns{gap:6px}
  .pg-invoice-editor .ie-btns .btn{padding-left:14px;padding-right:14px}
  .pg-invoice-editor .ie-btns .btn--secondary .ic{display:none}
  .pg-invoice-editor .ie-bt-full{display:none}
  .pg-invoice-editor .ie-bt-short{display:inline}
}