/* Piutang (receivables.js, docs/RECEIVABLES.md §7). Read far more than written (audit 2026-10-12): compact rows, a table on
   desktop (>= 900px), one invoice opens at a time to show its payments and actions. Same compact style as Barang diterima: square corners, small boxes,
   every tap target >= 44px. Severity colours only where they mean something: amber = money still owed, green = settled;
   over paid and "not recorded" stay neutral (lesson warning-colors-only-for-warnings). */
.ar { padding: 0 .45rem .6rem; min-width: 0; }
.ar, .ar *, .ar-modal .modal, .ar-modal .modal * { border-radius: 0 !important; }
.ar-title { padding-bottom: .2rem; }
.ar-empty { padding: .8rem .5rem; text-align: center; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.ar-err { margin: .4rem 0; color: #912018; font-size: .88rem; font-weight: 700; }
.ar-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem; margin-bottom: .35rem; padding: .5rem .6rem; border: 1px solid var(--border); background: var(--light); }
.ar-total-l { font-size: .8rem; font-weight: 700; color: var(--ink2); }
.ar-total-v { font-size: 1.25rem; font-weight: 800; color: var(--dark); font-variant-numeric: tabular-nums; }
.ar-tools { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-bottom: .35rem; }
.ar-seg { display: inline-flex; }
.ar-seg-b { min-height: 44px; padding: .2rem .8rem; border: 1px solid var(--border-input); background: #fff; color: var(--dark); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.ar-seg-b + .ar-seg-b { border-left: 0; }
.ar-seg-b.on { background: var(--p); border-color: var(--p); color: #fff; }
.ar-search { flex: 1 1 10rem; min-width: 0; min-height: 44px; padding: 0 .5rem; border: 1px solid var(--border-input); background: #fff; font: inherit; font-size: 16px; }
.ar-c-name { font-size: 1rem; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.ar-c-meta { font-size: .8rem; color: var(--ink2); line-height: 1.35; overflow-wrap: anywhere; }
.ar-tag { display: inline-block; padding: 0 .3rem; border: 1px solid var(--border-input); background: var(--light); color: var(--muted); font-size: .7rem; font-weight: 700; vertical-align: middle; }
.ar-badge { display: inline-block; padding: .1rem .4rem; font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; border: 1px solid; }
.ar-open { background: #FFFBEB; border-color: var(--warn); color: #92400E; }
.ar-paid { background: #ECFDF3; border-color: var(--ok); color: #05603A; }
.ar-over { background: #fff; border-color: var(--border-input); color: var(--dark); }
.ar-unk { background: var(--light); border-color: var(--border); color: var(--muted); font-weight: 700; }
.ar-head { display: flex; align-items: center; gap: .4rem; margin: .1rem 0 .35rem; }
.ar-back { min-height: 44px; min-width: 44px; padding: 0 .6rem; border: 1px solid var(--border-input); background: #fff; font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.ar-head-name { font-size: 1.05rem; font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.ar-sum { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .3rem .6rem; margin-bottom: .35rem; padding: .5rem .6rem; border: 1px solid var(--border); background: var(--light); }
.ar-sum > div { display: flex; flex-direction: column; min-width: 0; }
.ar-sum span { font-size: .74rem; font-weight: 700; color: var(--ink2); }
.ar-sum b { font-size: .98rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ar-sum .ar-sum-main .ar-badge { align-self: flex-start; }
.ar-sum-unk { grid-column: 1 / -1; font-size: .78rem; color: var(--muted); }
.ar-pay { display: flex; justify-content: space-between; align-items: center; gap: .4rem; padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.ar-pay-l { min-width: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ar-pay-note { font-size: .76rem; color: var(--ink2); }
.ar-pay-none { padding: .3rem 0; font-size: .8rem; color: var(--muted); }
.ar-link { flex: none; min-height: 44px; min-width: 44px; padding: 0 .5rem; border: 1px solid var(--border-input); background: #fff; color: var(--ink2); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.ar-btn { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-height: 44px; padding: .2rem .8rem; border: 1px solid var(--border-input); background: #fff; color: var(--dark); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; }
.ar-btn:disabled { opacity: .55; cursor: default; }
.ar-btn-p { background: var(--ok); border-color: var(--ok); color: #fff; }
.ar-btn-d { background: var(--danger); border-color: var(--danger); color: #fff; }
.ar-sheet { display: flex; flex-direction: column; gap: .4rem; }
.ar-s-head { font-size: .92rem; line-height: 1.3; overflow-wrap: anywhere; }
.ar-f { display: flex; flex-direction: column; gap: .15rem; font-size: .8rem; font-weight: 700; color: var(--ink2); }
.ar-f[hidden] { display: none; }
.ar-f input { min-height: 48px; padding: 0 .5rem; border: 1px solid var(--border-input); background: #fff; font: inherit; font-size: 16px; color: var(--dark); min-width: 0; }
.ar-f-err { min-height: 1em; color: #912018; font-size: .84rem; font-weight: 700; }
/* "= Rp 1,500,000" right under the amount box (digits only typed; owner 2026-10-23) */
.ar-amt-echo { margin-top: -.25rem; font-size: .95rem; font-weight: 800; color: var(--dark); overflow-wrap: anywhere; }
.ar-amt-echo:empty { display: none; }
.ar-amt-echo .ar-amt-bad { font-size: .86rem; color: #912018; }
.ar-f-err:empty { display: none; }
.ar-actions { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: flex-end; margin-top: .2rem; }
.ar-actions .ar-btn { min-height: 54px; flex: 1 1 8rem; }
.ar-total { flex-wrap: wrap; }
.ar-total-unk { flex: 1 1 100%; min-height: 44px; margin-top: .2rem; padding: .2rem 0 0; border: 0; border-top: 1px dashed var(--border-input); background: transparent; color: var(--ink2); font: inherit; font-size: .82rem; font-weight: 700; text-align: left; cursor: pointer; }
.ar-note { margin-bottom: .35rem; padding: .45rem .6rem; border: 1px solid var(--border-input); border-left: 3px solid var(--p); background: var(--light); font-size: .84rem; line-height: 1.4; color: var(--dark); }
.ar-thead { display: none; }
.ar-row { display: grid; width: 100%; min-height: 44px; padding: .45rem .6rem; border: 1px solid var(--border); border-top-width: 0; background: #fff; color: var(--dark); font: inherit; text-align: left; cursor: pointer; align-items: center; column-gap: .6rem; row-gap: .1rem; min-width: 0; }
#ar-rows > .ar-row:first-of-type, .ar-thead + .ar-row, .ar-thead + .ar-irow > .ar-row { border-top-width: 1px; }
.ar-row:hover { background: var(--light); }
.ar-cgrid { grid-template-columns: minmax(0, 1fr) auto; }
.ar-cn { grid-column: 1; min-width: 0; overflow-wrap: anywhere; }
.ar-co { grid-column: 2; justify-self: end; }
.ar-cmeta { grid-column: 1 / -1; font-size: .78rem; color: var(--ink2); line-height: 1.35; overflow-wrap: anywhere; }
.ar-cmeta > span:not(:empty) ~ span:not(:empty)::before { content: " · "; }
.ar-unk-t { color: var(--muted); }
.ar-igrid { grid-template-columns: max-content minmax(0, 1fr) 1rem; grid-template-areas: "am st ch" "dt pd ch"; }
.ar-idt { grid-area: dt; font-size: .84rem; color: var(--ink2); min-width: 0; overflow-wrap: anywhere; }
.ar-inote { display: block; font-size: .76rem; color: var(--muted); }
.ar-iam { grid-area: am; font-size: .98rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ar-ipd { grid-area: pd; justify-self: end; font-size: .8rem; color: var(--ink2); font-variant-numeric: tabular-nums; }
.ar-ist { grid-area: st; justify-self: end; text-align: right; min-width: 0; }
.ar-ist .ar-badge { font-size: .82rem; }
.ar-chev { grid-area: ch; align-self: center; color: var(--muted); }
.ar-irow.open > .ar-row { border-left: 3px solid var(--p); background: var(--light); }
.ar-idetail { padding: .2rem .6rem .5rem; border: 1px solid var(--border); border-top: 0; border-left: 3px solid var(--p); background: #fff; }
.ar-idetail .ar-add { display: flex; width: 100%; min-height: 48px; margin-top: .4rem; font-size: .95rem; }
.ar-idetail .ar-pay:last-child { border-bottom: 0; }
@media (min-width: 900px) {
  .ar-thead { display: grid; padding: .3rem .6rem; border: 1px solid var(--border); background: var(--light); font-size: .72rem; font-weight: 800; color: var(--ink2); column-gap: .6rem; }
  .ar-cgrid { grid-template-columns: minmax(12rem, 2.2fr) minmax(9rem, 1.1fr) 5.5rem minmax(10rem, 1.8fr) 7.5rem; }
  .ar-cn, .ar-co { grid-column: auto; }
  .ar-co { justify-self: start; }
  .ar-cmeta { display: contents; }
  .ar-cmeta > span::before { content: none !important; }
  .ar-cf, .ar-cs, .ar-cp { font-size: .82rem; color: var(--ink2); }
  .ar-m-only { display: none; }
  .ar-igrid { grid-template-columns: 9.5rem minmax(0, 1fr) minmax(0, 1fr) 15rem 1rem; grid-template-areas: "dt am pd st ch"; }
  .ar-ist .ar-badge { font-size: .9rem; }
  .ar-iam, .ar-ipd { justify-self: end; }
  .ar-thead.ar-igrid > span:nth-child(2), .ar-thead.ar-igrid > span:nth-child(3) { justify-self: end; }
  .ar-thead.ar-igrid > span:nth-child(4) { justify-self: end; }
}
/* One line per row wherever it fits (owner 2026-10-12). Below 900px: customer = name | balance, invoice = date | amount |
   balance; the rest (invoices, Keterangan, last payment, paid) is in the table from 900px and in the opened invoice. */
.ar-bs, .ar-ds { display: none; }
/* Rows sit under a "Sisa" column header (desktop) or speak for themselves (amber amount): no repeated word in a row. */
.ar-row .ar-bw { display: none; }
@media (max-width: 899px) {
  .ar-row { min-height: 44px; padding-top: .3rem; padding-bottom: .3rem; }
  .ar-cn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ar-cn .ar-c-name { font-size: .95rem; }
  .ar-cmeta { display: none; }
  .ar-igrid { grid-template-columns: auto minmax(0, 1fr) auto 1rem; grid-template-areas: "dt am st ch"; }
  .ar-idt { white-space: nowrap; font-size: .8rem; }
  .ar-inote, .ar-idt .ar-tag { display: none; }
  .ar-iam { font-size: .9rem; }
  .ar-ipd { display: none; }
  .ar-row .ar-bl, .ar-dl { display: none; }
  .ar-row .ar-bs, .ar-ds { display: inline; }
  .ar-row .ar-badge, .ar-ist .ar-badge { font-size: .8rem; padding: .05rem .3rem; white-space: nowrap; }
}
@media (min-width: 900px) {
  .ar-total { flex-wrap: nowrap; align-items: center; }
  .ar-total-l { flex: none; }
  .ar-total-unk { flex: 1 1 auto; order: 1; min-height: 32px; margin: 0 1rem; padding: 0; border-top: 0; text-align: left; }
  .ar-total-v { order: 2; }
}
/* ➕ Tambah faktur / 🗑 Batalkan faktur (docs/RECEIVABLES.md §7). The add button sits in a toolbar and the invoice number,
   source and void button in the opened row, so rows stay one line below 900px. Warnings here are neutral boxes with ⚠ (the
   amber token stays reserved for "still owed"); every button keeps >= 44px. */
.ar-btn-a { background: var(--p); border-color: var(--p); color: #fff; }
.ar-tools .ar-addinv { margin-left: auto; flex: none; }
.ar-banner { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-bottom: .35rem; padding: .4rem .5rem; border: 1px solid var(--border-input); background: var(--light); font-size: .84rem; font-weight: 700; color: var(--dark); }
.ar-banner .ar-err { margin: 0; }
.ar-imeta { padding: .3rem 0 .1rem; font-size: .8rem; color: var(--ink2); line-height: 1.5; overflow-wrap: anywhere; }
.ar-imeta b { color: var(--dark); font-size: .88rem; }
.ar-ino { font-weight: 700; color: var(--ink2); }
.ar-idetail .ar-voidinv { display: flex; width: 100%; margin-top: .3rem; color: var(--danger); }
.ar-irow.ar-focus { outline: 3px solid var(--p); outline-offset: -3px; }
.ar-sheet [hidden] { display: none !important; }
.ar-pick { display: flex; flex-direction: column; gap: .25rem; }
.ar-pick input { min-height: 48px; padding: 0 .5rem; border: 1px solid var(--border-input); background: #fff; font: inherit; font-size: 16px; color: var(--dark); min-width: 0; }
.ar-pick-b { display: block; width: 100%; min-height: 44px; padding: .3rem .6rem; border: 1px solid var(--border); background: #fff; color: var(--dark); font: inherit; font-size: .92rem; font-weight: 600; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.ar-pick-new { border-style: dashed; border-color: var(--p); color: var(--p); }
.ar-csel { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .2rem 0 .2rem .5rem; border: 1px solid var(--border); background: var(--light); }
.ar-csel-n { min-width: 0; font-size: .95rem; color: var(--dark); overflow-wrap: anywhere; }
.ar-hint { font-size: .78rem; font-weight: 600; color: var(--muted); }
.ar-warnbox, .ar-confirm { display: flex; flex-direction: column; gap: .3rem; padding: .5rem .6rem; border: 2px solid var(--dark); background: #fff; color: var(--dark); font-size: .88rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.ar-warnbox .ar-actions { justify-content: stretch; }
.ar-warnbox .ar-btn, .ar-confirm .ar-btn { min-height: 44px; }
.ar-lock { padding: .4rem .5rem; border: 1px solid var(--border-input); background: var(--light); font-size: .84rem; font-weight: 700; color: var(--dark); }
.ar-sheet input[readonly] { background: var(--light); color: var(--ink2); }
.ar-inv-sheet > div[data-ar-f="form"] { display: flex; flex-direction: column; gap: .4rem; }

/* Home tile (arHomeEntryHTML): the look of home's task cards, own class (not a stock write task). */
.ar-home { margin-bottom: 12px; min-width: 0; }
.ar-home-task { position: relative; display: flex; flex-direction: column; gap: 4px; width: 100%; min-width: 0; min-height: 64px; text-align: left; padding: 12px 34px 12px 14px; background: #fff; border: 1px solid #CBD5E1; border-radius: 10px; color: var(--dark); font: inherit; cursor: pointer; }
.ar-home-task:hover { background: #EEF2FF; border-color: var(--p); }
.ar-home-task:focus-visible { outline: 3px solid var(--p); outline-offset: 3px; }
.ar-home-task .home-task-description { overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .ar-home { margin-bottom: 8px; }
  .ar-home-task { min-height: 44px; gap: 1px; padding: 7px 28px 7px 10px; }
}

/* 💵 Catat pembayaran for the customer + Riwayat pembayaran (FIFO, docs/RECEIVABLES.md §7 / §9). The button sits under the
   totals (not in a row), so rows stay one line below 900px; the history is one collapsed bar until opened. */
.ar-cpay-bar { margin-bottom: .35rem; }
.ar-cpay-bar .ar-cpay { display: flex; width: 100%; min-height: 48px; font-size: .98rem; }
@media (min-width: 900px) { .ar-cpay-bar .ar-cpay { display: inline-flex; width: auto; min-width: 16rem; } }
.ar-preview { padding: .45rem .6rem; border: 1px solid var(--border-input); border-left: 3px solid var(--p); background: var(--light); font-size: .86rem; font-weight: 600; line-height: 1.45; color: var(--dark); overflow-wrap: anywhere; }
.ar-preview .ar-hint { margin-top: .15rem; }
.ar-cpay-form { display: flex; flex-direction: column; gap: .4rem; }
.ar-hist { margin-bottom: .35rem; }
.ar-hist-h { display: flex; justify-content: space-between; align-items: center; border-top-width: 1px; font-size: .9rem; font-weight: 800; }
.ar-hist.open > .ar-hist-h { border-left: 3px solid var(--p); background: var(--light); }
.ar-hist-b { padding: .1rem .6rem .4rem; border: 1px solid var(--border); border-top: 0; border-left: 3px solid var(--p); background: #fff; }
.ar-pay-cov { font-size: .8rem; color: var(--dark); line-height: 1.4; }
.ar-hpay.ar-focus { outline: 3px solid var(--p); outline-offset: -3px; padding-left: .3rem; }
.ar-hist-f { padding-top: .3rem; }
.ar-cov-h { padding-top: .3rem; font-size: .78rem; font-weight: 800; color: var(--ink2); }
.ar-idetail .ar-cov:last-child { border-bottom: 0; }
.ar-reflow { margin-bottom: 0; }

/* Issuer (owner 2026-10-13, docs/RECEIVABLES.md §10): chips in Tambah faktur (>= 44px, one row of six that wraps), a small
   neutral tag in the opened invoice and in the desktop table (.ar-idt .ar-tag is hidden below 900px, so narrow rows stay
   one line), and the collapsed "Per perusahaan" bar. Neutral colours: an issuer is a label, not a warning. */
.ar-chips { display: flex; flex-wrap: wrap; gap: .25rem; }
.ar-chip { min-height: 44px; min-width: 3.6rem; padding: .2rem .7rem; border: 1px solid var(--border-input); background: #fff; color: var(--dark); font: inherit; font-size: .9rem; font-weight: 800; cursor: pointer; }
.ar-chip.on { background: var(--p); border-color: var(--p); color: #fff; }
.ar-chip:disabled { opacity: .55; cursor: default; }
.ar-iss { color: var(--ink2); }
.ar-iss-sum { margin-bottom: .35rem; }
.ar-iss-h { display: flex; justify-content: space-between; align-items: center; border-top-width: 1px; font-size: .88rem; font-weight: 800; }
.ar-iss-sum.open > .ar-iss-h { border-left: 3px solid var(--p); background: var(--light); }
.ar-iss-b { padding: .1rem .6rem .4rem; border: 1px solid var(--border); border-top: 0; border-left: 3px solid var(--p); background: #fff; }
.ar-iss-r { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; padding: .3rem 0; border-bottom: 1px solid var(--border); font-size: .84rem; font-variant-numeric: tabular-nums; }
.ar-iss-n { grid-row: span 2; align-self: center; min-width: 0; overflow-wrap: anywhere; }
.ar-iss-v { justify-self: end; white-space: nowrap; }
.ar-iss-l { font-size: .72rem; color: var(--muted); }
/* Pools (owner "a+b", §10): one compact line per customer + issuer + bill_to under the totals. */
.ar-pools { margin: -.15rem 0 .35rem; border: 1px solid var(--border); border-top: 0; background: #fff; }
.ar-pool { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 36px; padding: .2rem .6rem; border-top: 1px solid var(--border); font-size: .84rem; }
.ar-pool:first-child { border-top: 0; }
.ar-pool-n { min-width: 0; overflow-wrap: anywhere; color: var(--ink2); }
.ar-pool-v { flex: none; }
.ar-pool-v .ar-badge { font-size: .82rem; }
.ar-pool-more { width: 100%; border: 0; border-top: 1px dashed var(--border-input); text-align: left; }
@media (min-width: 900px) {
  .ar-iss-r { grid-template-columns: minmax(0, 1fr) 14rem 14rem; }
  .ar-iss-n { grid-row: auto; }
}

/* ⬇ Ekspor Faktur (Excel) - faktur-export.js, docs/FAKTUR_EXPORT.md. Neutral colours: it is a tool, not a warning. */
.fex-entry { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0 0 .45rem; padding: .3rem .8rem; border: 1px solid var(--border-input); border-radius: 10px; background: #fff; color: var(--p); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.fex { display: flex; flex-direction: column; gap: .55rem; }
.fex-dates { display: flex; flex-wrap: wrap; gap: .5rem; }
.fex-f { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 9rem; min-width: 0; font-size: .82rem; font-weight: 700; color: var(--ink2); }
.fex-f input, .fex-f select { width: 100%; min-height: 44px; padding: .3rem .5rem; border: 1px solid var(--border-input); border-radius: 8px; background: #fff; color: var(--dark); font: inherit; font-size: 1rem; }
.fex > .fex-f { flex: none; }
.fex-quick { display: flex; flex-wrap: wrap; gap: .4rem; }
.fex-chip { min-height: 44px; padding: .2rem .9rem; border: 1px solid var(--border-input); border-radius: 22px; background: #fff; color: var(--dark); font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.fex-lbl { font-size: .82rem; font-weight: 700; color: var(--ink2); }
.fex-seg { display: flex; }
.fex-seg-b { flex: 1 1 0; min-height: 44px; padding: .2rem .5rem; border: 1px solid var(--border-input); background: #fff; color: var(--dark); font: inherit; font-size: .9rem; font-weight: 700; cursor: pointer; }
.fex-seg-b + .fex-seg-b { border-left: 0; }
.fex-seg-b:first-child { border-radius: 8px 0 0 8px; }
.fex-seg-b:last-child { border-radius: 0 8px 8px 0; }
.fex-seg-b.on { background: var(--p); border-color: var(--p); color: #fff; }
.fex-hint { font-size: .8rem; color: var(--muted); line-height: 1.35; }
.fex-go { width: 100%; min-height: 52px; font-size: 1rem; }
.fex-msg { min-height: 1.2em; font-size: .88rem; overflow-wrap: anywhere; color: var(--ink2); }
.fex-msg.fex-ok { color: var(--ok); font-weight: 700; }
.fex-msg.fex-err { color: var(--danger); font-weight: 700; }
@media (min-width: 900px) { .fex-entry { display: inline-flex; width: auto; } }