/* What Penagihan shares with the rest of the mockup (billing.js, members.js): its pills and links, the quota's one
   control and what a change costs, the period's pill and its choice, the invoices' table, the renewal banner, the
   access screens' links and the invitation's Roles. The page itself is drawn by account.css. Motion only answers the
   person: the amount rolls, the preview unfolds, a changed row washes once. */

/* ---------- Shared ---------- */
.lacak-billing, .lacak-members { --w-warn-line: #f0dfbd; }
.lb-chip { display: inline-flex; flex: none; align-items: center; border: 1px solid var(--w-line, #e4e8ef); border-radius: 999px; background: var(--w-soft, #f5f7fa); padding: 2px 9px; color: var(--w-ink, #172033); font-size: 11.5px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.lb-chip.is-navy { border-color: var(--w-navy); background: var(--w-navy); color: #fff; }
.lb-link { display: inline-flex; flex: none; min-height: 32px; align-items: center; gap: 6px; border: 0; border-radius: 8px; background: transparent; padding: 0 8px; color: #2f62a4; font: inherit; font-size: 12.5px; font-weight: 700; white-space: nowrap; cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lb-link:hover { background: #e6eef9; }
.lb-link.is-danger { color: var(--w-muted, #5c6a86); }
.lb-link.is-danger:hover { background: var(--w-bad-bg, #fbe8e5); color: var(--w-bad, #b4372f); }
.lb-link .icon, .lb-link .lk-spin { width: 14px; height: 14px; flex: none; }
.lb-link[aria-busy="true"] { cursor: progress; opacity: .75; }
:is(.lb-link, .lb-icon, .lb-reload, .lm-choice input):focus-visible { outline: 3px solid var(--w-ring, rgb(47 101 172 / .24)); outline-offset: 2px; }
.lk-lamp.is-due { color: var(--w-warn); }
.lk-lamp.is-due i { background: var(--w-warn-dot); box-shadow: 0 0 0 4px var(--w-warn-bg); }
.lb-reload .icon, .lb-reload .lk-spin { width: 15px; height: 15px; flex: none; }
.lb-reload[aria-busy="true"] { cursor: progress; }

/* ---------- The quota's one control ----------
   − and + either side of the figure, in one rounded frame, the figure in tabular figures. A step's hit area is a
   finger's size; at the floor or the ceiling its step greys and stops. Changed, the frame takes the rail's gold, as the
   line's change waits for Ubah. Where the quota cannot change, the figure alone. */
.lb-stepper { display: inline-flex; height: 36px; align-items: stretch; overflow: hidden; border: 1px solid var(--w-line); border-radius: 10px; background: #fff; transition: border-color var(--m-hover) ease, box-shadow var(--m-hover) ease; }
.lb-step { display: grid; width: 36px; flex: none; place-items: center; border: 0; background: transparent; color: var(--w-navy); cursor: pointer; transition: background-color var(--m-hover) ease, color var(--m-hover) ease; }
.lb-step .icon { width: 16px; height: 16px; stroke-width: 2.2; }
.lb-step:hover:not(:disabled) { background: var(--w-soft); }
.lb-step:active:not(:disabled) { background: #e9edf3; }
.lb-step:disabled { color: #c3ccd7; cursor: default; }
.lb-step:focus-visible { outline: 3px solid var(--w-ring, rgb(47 101 172 / .24)); outline-offset: -3px; }
.lb-step-value { display: grid; min-width: 40px; place-items: center; border-inline: 1px solid var(--hair); color: var(--w-ink); font-size: 15px; font-weight: 760; font-variant-numeric: tabular-nums; }
.lb-stepper.is-changed { border-color: #e3ac2c; box-shadow: 0 0 0 3px #fff5d6; }
.lb-stepper.is-still { height: auto; border: 0; background: none; }
.lb-stepper.is-still .lb-step-value { min-width: 0; border: 0; }
/* What the change costs and when, unfolded: on the change's yellow wash with the gold edge down its left, the words
   and the amount in them, Batal and Ubah at its end. */
.lb-quota-preview { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-radius: 10px; background: #fffaeb; padding: 11px 12px 11px 16px; }
.lb-quota-preview::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 10px 0 0 10px; background: #e3ac2c; }
.lb-quota-text { flex: 1 1 260px; min-width: 0; margin: 0; color: #4a3a12; font-size: 13px; font-weight: 600; line-height: 1.45; }
.lb-quota-text b { color: var(--w-ink); font-weight: 760; font-variant-numeric: tabular-nums; }
.lb-quota-actions { display: flex; flex: none; gap: 8px; }
.lb-quota-actions > button { display: inline-flex; min-height: 36px; align-items: center; gap: 8px; padding: 0 14px; }
.lb-quota-actions .lk-spin { width: 14px; height: 14px; }
.lb-quota-actions [aria-busy="true"] { cursor: progress; }

/* ---------- The period's pill ----------
   The pill as it reads, with the list's chevron; under the pointer its ground darkens a step; open, it takes the open
   toggle's blue and its chevron turns. Its hit area reaches past it to a finger's size. */
.lb-period { position: relative; gap: 3px; padding: 4px 8px 4px 11px; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease; }
.lb-period::before { content: ""; position: absolute; inset: -9px -6px; }
.lb-period .icon { width: 13px; height: 13px; color: var(--w-muted); transition: transform var(--m-move) var(--m-in); }
.lb-period:hover { border-color: #cfd6e0; background: #eef1f5; }
.lb-period[aria-expanded="true"] { border-color: #cdd8e8; background: #eef3fa; }
.lb-period[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lb-period:focus-visible { outline: 3px solid var(--w-ring, rgb(47 101 172 / .24)); outline-offset: 2px; }
.lb-price { display: block; margin-top: 4px; color: var(--w-muted); font-size: 14px; font-weight: 600; line-height: 1.3; }
.lb-price b { margin-right: 2px; color: var(--w-ink); font-size: 30px; font-weight: 750; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* The other periods with their prices, in the channel menu's frame (lacak.css .inbox-menu): a row each, the period's
   name, its price under it in tabular figures. */
.billing-period-menu .lb-period-option { min-height: 56px; padding: 8px 12px; }
.billing-period-menu .inbox-option-copy small { font-variant-numeric: tabular-nums; }
.lb-pending { display: inline-flex; justify-self: start; align-items: center; gap: 7px; margin: 6px 0 0; border-radius: 999px; background: #edf3fb; padding: 4px 11px 4px 9px; color: #2f62a4; font-size: 12.5px; font-weight: 700; }
.lb-pending .icon { width: 14px; height: 14px; }
@keyframes lb-fill { from { transform: scaleX(0); } }
@keyframes lb-today { from { opacity: 0; transform: translate(-50%, -80%); } }

/* ---------- The invoices ----------
   The Dashboard's table: a soft head row, dense rows, figures right-aligned in tabular figures. */
.lb-inv-row { position: relative; display: grid; grid-template-columns: minmax(128px, 1fr) minmax(0, 1fr) minmax(0, 1.15fr) minmax(max-content, .8fr) minmax(max-content, .7fr) max-content; align-items: center; gap: 12px; min-height: 52px; padding: 8px 12px 8px 14px; background: #fff; }
.lb-inv-business { min-width: 0; overflow: hidden; color: var(--w-ink); font-size: 12.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.lb-inv-body > .lb-inv-row { border-top: 1px solid var(--hair); }
.lb-inv-head { min-height: 38px; background: var(--w-soft); color: var(--w-muted); font-size: 11.5px; font-weight: 650; }
.lb-inv-number { overflow: hidden; color: var(--w-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.lb-inv-period { color: #46536a; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lb-num { text-align: right; }
.lb-inv-body .lb-num { color: var(--w-ink); font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-inv-status .lk-lamp { font-size: 12px; }
.lb-inv-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.lb-icon { display: grid; width: 34px; height: 34px; flex: none; place-items: center; border: 1px solid var(--w-line); border-radius: 9px; background: #fff; color: var(--w-navy); cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease, transform var(--m-hover) ease; }
.lb-icon:hover { border-color: var(--w-navy); background: var(--w-navy); color: #fff; }
.lb-icon:active { transform: scale(.94); }
.lb-icon .icon { width: 16px; height: 16px; }
/* The unpaid invoice: the amber edge down its left, as Koneksi marks what needs a look. */
.lb-inv-row.is-open::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--w-warn-dot); }
.lb-inv-row.is-arrived { animation: lacak-fade-in 180ms linear both; }
.lb-inv-state { min-height: 52px; border-top: 1px solid var(--hair); }
/* A finished change washes once, where it shows. */
.lacak-billing .lb-method.is-fresh, .lacak-billing .lb-inv-row.is-fresh, .lacak-members .lm-row.is-fresh { animation: koneksi-fresh 1.2s ease-out both; }
@container (max-width: 680px) {
  .lb-inv-head { display: none; }
  .lb-inv-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "number total" "business status" "period period" "actions actions"; gap: 4px 12px; padding: 12px 14px; }
  .lb-inv-number { grid-area: number; }
  .lb-inv-business { grid-area: business; }
  .lb-inv-period { grid-area: period; }
  .lb-inv-body .lb-num { grid-area: total; }
  .lb-inv-status { grid-area: status; justify-self: end; }
  .lb-inv-row.is-confirming { grid-template-areas: "number total" "business business" "period period" "status status" "actions actions"; }
  .lb-inv-row.is-confirming .lb-inv-status { justify-self: start; }
  .lb-inv-actions { grid-area: actions; justify-content: flex-start; margin: 4px 0 0 -8px; }
  .lb-inv-actions .lb-icon { order: -1; margin-left: 8px; }
  /* A paid invoice keeps its PDF at the row's end; only the open one takes a line for Bayar faktur. */
  .lb-inv-row:not(.is-open):not(.lb-inv-head) { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "number total actions" "business status actions" "period period actions"; }
  .lb-inv-row:not(.is-open) .lb-inv-actions { margin: 0 0 0 4px; }
  .lb-inv-row:not(.is-open) .lb-inv-actions .lb-icon { margin-left: 0; }
  .lb-price b { font-size: 26px; }
}
@container (max-width: 780px) {
  .lb-quota-actions { flex: 1 1 100%; }
  .lb-quota-actions > button { flex: 1; justify-content: center; min-height: 44px; }
  .lb-step { width: 44px; }
  .lb-stepper { height: 44px; }
}
@container (max-width: 420px) {
  .lb-link, .lb-icon { min-height: 40px; }
  .lb-icon { width: 40px; height: 40px; }
}

/* ---------- The renewal banner ---------- */
/* Above the page, in the connection banners' form (pengaturan.css .connection-banner): white, the amber edge, what
   is unpaid and the last day, the pay action at its end. */
.lacak-renewal-slot:empty { display: none; }
/* Its edges are the page's under it: Pengaturan's gutter, or the Dashboard's narrower one. */
.lacak-renewal-slot { padding: 22px 30px 0; }
.lacak-renewal-slot[data-page="dashboard"] { padding: 18px 18px 0; }
.lacak-renewal-banner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 18px; overflow: hidden; border: 1px solid #f0dfbd; border-radius: 14px; background: #fff; padding: 14px 16px 14px 20px; color: #172033; box-shadow: 0 6px 18px rgb(149 96 11 / .06); }
.lacak-renewal-banner::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: #d99a3c; }
.lacak-renewal-banner b { display: block; color: #8f5410; font-size: 13.5px; font-weight: 700; }
.lacak-renewal-banner p { margin: 2px 0 0; color: #5c6a86; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.lacak-renewal-banner .btn { flex: 0 0 auto; min-height: 40px; border: 0; border-radius: 10px; background: #172944; padding: 0 16px; color: #fff; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; transition: background-color var(--m-hover, 120ms) ease, transform var(--m-hover, 120ms) ease; }
.lacak-renewal-banner .btn:hover { background: #22385a; }
.lacak-renewal-banner .btn:active { transform: scale(.97); }
.lacak-renewal-banner .btn:focus-visible { outline: 3px solid rgb(47 101 172 / .3); outline-offset: 2px; }

/* ---------- The access screens: Penagihan and Muat ulang under the pay action ---------- */
.lb-access-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.lacak-access .no-seat-action + .lb-access-links { margin-top: 10px; }

/* ---------- The invitation: the email, then the Roles a choice each, its name and its one line ---------- */
.lm-invite-form { display: grid; gap: 8px; margin: 0; }
.lm-choices { display: grid; gap: 8px; min-width: 0; margin: 10px 0 0; border: 0; padding: 0; }
.lm-choices legend { margin-bottom: 6px; padding: 0; color: var(--lkd-muted, #687386); font-size: 11.5px; font-weight: 700; }
.lm-choice { display: flex; align-items: flex-start; gap: 12px; border: 1px solid #e5e3df; border-radius: 12px; background: #fff; padding: 12px 14px; cursor: pointer; transition: background-color var(--m-hover) ease, border-color var(--m-hover) ease; }
.lm-choice:hover { border-color: #cfd6e0; background: #f7f8fa; }
.lm-choice:has(input:checked) { border-color: #9fb6d6; background: #edf3fb; }
.lm-choice:has(input:focus-visible) { outline: 3px solid rgb(47 98 164 / .3); outline-offset: 2px; }
.lm-choice input { width: 17px; height: 17px; flex: none; margin: 2px 0 0; accent-color: #172944; cursor: pointer; }
.lm-choice input:focus-visible { outline: none; }
.lm-choice-copy { display: grid; min-width: 0; gap: 2px; }
.lm-choice-copy strong { color: #172033; font-size: 13.5px; font-weight: 700; }
.lm-choice-copy small { color: #5c6a86; font-size: 12.5px; line-height: 1.45; }

@media (max-width: 767px) {
  .lacak-renewal-slot { padding: 12px 10px 0; }
  .lacak-renewal-banner { align-items: stretch; flex-direction: column; gap: 10px; }
  .lacak-renewal-banner .btn { width: 100%; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .lacak-renewal-banner .btn, .lacak-members *, .lacak-billing * { animation: none !important; transition: none !important; }
}