/* ============================================================
   NC RECOVERY PORTAL — Invoices (light)
   ============================================================ */

.nc-inv__lead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.nc-inv__lead h1 {
  font-family: var(--nc-font-display);
  font-size: var(--nc-fs-3xl);
  font-weight: var(--nc-fw-black);
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--nc-text-strong);
}
.nc-inv__lead p { color: var(--nc-text-muted); font-size: var(--nc-fs-sm); margin-top: 4px; }

.nc-inv__summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}
.nc-inv__sum-card {
  background: var(--nc-white);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-md);
  padding: 20px 22px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--nc-shadow-sm);
}
.nc-inv__sum-card::after {
  content: "";
  position: absolute;
  right: -30px; top: -30px;
  width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--nc-blue-tint-2), transparent 70%);
  pointer-events: none;
}
.nc-inv__sum-card.is-due {
  background: linear-gradient(135deg, var(--nc-warn-bg), var(--nc-white) 60%);
  border-color: var(--nc-warn);
}
.nc-inv__sum-card.is-due::after { background: radial-gradient(circle, rgba(245, 158, 11, 0.2), transparent 70%); }
.nc-inv__sum-card.is-overdue {
  background: linear-gradient(135deg, var(--nc-danger-bg), var(--nc-white) 60%);
  border-color: var(--nc-danger);
}
.nc-inv__sum-card.is-overdue::after { background: radial-gradient(circle, rgba(225, 29, 72, 0.2), transparent 70%); }
.nc-inv__sum-label {
  font-family: var(--nc-font-display);
  font-size: var(--nc-fs-xs);
  font-weight: var(--nc-fw-bold);
  letter-spacing: var(--nc-tracking-wide);
  text-transform: uppercase;
  color: var(--nc-text-muted);
  margin-bottom: 8px;
  position: relative;
}
.nc-inv__sum-val {
  font-family: var(--nc-font-mono);
  font-size: var(--nc-fs-3xl);
  font-weight: var(--nc-fw-bold);
  color: var(--nc-text-strong);
  letter-spacing: -0.02em;
  position: relative;
}
.nc-inv__sum-card.is-due .nc-inv__sum-val      { color: #B45309; }
.nc-inv__sum-card.is-overdue .nc-inv__sum-val  { color: #BE123C; }
.nc-inv__sum-sub {
  font-size: var(--nc-fs-xs);
  color: var(--nc-text-dim);
  margin-top: 4px;
  position: relative;
}

.nc-inv__table-wrap {
  background: var(--nc-white);
  border: 1px solid var(--nc-border);
  border-radius: var(--nc-r-md);
  overflow: hidden;
  box-shadow: var(--nc-shadow-sm);
}
.nc-inv__table { width: 100%; border-collapse: collapse; }
.nc-inv__table thead th {
  text-align: left;
  padding: 12px 16px;
  background: var(--nc-cream);
  font-family: var(--nc-font-display);
  font-size: var(--nc-fs-xs);
  font-weight: var(--nc-fw-bold);
  letter-spacing: var(--nc-tracking-wide);
  text-transform: uppercase;
  color: var(--nc-text-muted);
  border-bottom: 1px solid var(--nc-border);
}
.nc-inv__table tbody tr {
  border-bottom: 1px solid var(--nc-border-soft);
  transition: background var(--nc-dur-fast) var(--nc-ease);
}
.nc-inv__table tbody tr:hover { background: var(--nc-bg-hover); }
.nc-inv__table tbody tr:last-child { border-bottom: none; }
.nc-inv__table td { padding: 14px 16px; font-size: var(--nc-fs-sm); }
.nc-inv__table .col-num { font-family: var(--nc-font-mono); color: var(--nc-blue-dark); font-weight: var(--nc-fw-bold); white-space: nowrap; }
.nc-inv__table .col-amt { font-family: var(--nc-font-mono); font-weight: var(--nc-fw-bold); text-align: right; white-space: nowrap; color: var(--nc-text-strong); }
.nc-inv__table .col-date{ font-family: var(--nc-font-mono); font-size: var(--nc-fs-xs); color: var(--nc-text-muted); white-space: nowrap; }
.nc-inv__table .col-actions { text-align: right; white-space: nowrap; }

@media (max-width: 720px) {
  .nc-inv__table thead { display: none; }
  .nc-inv__table tr { display: block; padding: 14px 16px; }
  .nc-inv__table td { display: block; padding: 4px 0; border: none; }
  .nc-inv__table .col-actions { text-align: left; margin-top: 8px; }
}