@import "../app/shell.css";
/* shell.css already imports ../style.css (and that imports tokens.css);
   no direct import needed here.

   ============================================================
   invoice/invoice.css — Invoice-specific layout only.
   Reuses .shell-top/.shell-nav/.shell-main/.shell-page-head/.shell-foot
   and .shell-table-wrap/.shell-table/th--num/td--num from ../app/shell.css,
   and .card/.pill/.pill--kosong/.pill--tunggu/.pill--calm/.lockup from
   ../style.css. Nothing here redefines chrome or table plumbing.

   What this surface answers (../PLAN-V2.md): "berapa yang boleh kita
   tagih ke klien ini, dan berapa yang hangus." Ember (--accent /
   --sev-kosong) means the forfeit figure and NOTHING else here — the
   healthy "Tagihan periode ini" total stays on the neutral ramp. Amber
   (--sev-tunggu) is the one other warm step, for shifts still pending
   confirmation, which are neither billed nor forfeit yet.

   Every colour/space/radius/font is a var(--token). No hex.
   ============================================================ */

/* ---- the two headline stats -------------------------------------------- */

.inv-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

@media (min-width: 720px) {
  .inv-summary { grid-template-columns: 1fr 1fr; }
}

.inv-stat {
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.inv-stat--forfeit {
  background: var(--sev-kosong-soft);
  border-color: var(--sev-kosong-soft);
}

.inv-stat__label {
  font-size: var(--text-small);
  color: var(--muted);
  margin-bottom: var(--space-1);
}

.inv-stat--forfeit .inv-stat__label {
  color: var(--sev-kosong-text);
}

.inv-stat__value {
  font-family: var(--font-mono);
  font-size: var(--text-h2);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.inv-stat__value--forfeit {
  color: var(--sev-kosong-text);
}

.inv-stat__note {
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--muted);
}

.inv-stat--forfeit .inv-stat__note {
  color: var(--sev-kosong-text);
}

.inv-stat__link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--sev-kosong-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---- pending note above the table --------------------------------------- */

.inv-pending-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  font-size: var(--text-small);
  color: var(--muted);
}

/* ---- client summary table ----------------------------------------------- */

.inv-clientbtn {
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--border-strong);
}

@media (hover: hover) {
  .inv-clientbtn:hover { text-decoration-color: var(--ink); }
}

.inv-forfeit-cell {
  color: var(--sev-kosong-text);
  font-weight: 600;
}

/* ---- per-client rincian, opened by the button above ---------------------- */

.inv-detail {
  margin-top: var(--space-4);
  margin-bottom: var(--space-6);
}

.inv-detail__h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-body-lg);
  color: var(--ink);
  margin-bottom: var(--space-2);
}

.inv-link {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (hover: hover) {
  .inv-link:hover { color: var(--ink); }
}