/* ============================================================
   billing.css  —  Billing & Invoices page.
   Bootstrap cards/table/badges/buttons; only stat tiles, the
   payment-method look, and table metrics are custom.
   Scoped under .page-billing.
   ============================================================ */

/* stat tiles */
.page-billing .bill-stat .card-body { padding: 16px 18px; }
.page-billing .bill-stat-ic  { font-size: 18px; color: var(--navy); margin-bottom: 10px; }
.page-billing .bill-stat-val { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; color: var(--ink); }
.page-billing .bill-stat-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }

/* payment methods */
.page-billing .bill-pm.default { border-color: var(--navy); }
.page-billing .bill-pm-ic { width: 40px; height: 30px; border-radius: 6px; background: var(--surface2); display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--navy); flex-shrink: 0; }
.page-billing .bill-pm.add { cursor: pointer; border-style: dashed; color: var(--muted); }
.page-billing .bill-pm.add:hover { border-color: var(--navy); color: var(--navy); }

/* invoice table (match original metrics) */
.page-billing .bill-card { overflow: hidden; }
.page-billing .bill-table {
  --bs-table-bg: transparent; --bs-table-color: var(--ink2);
  --bs-table-cell-padding-y: 13px; --bs-table-cell-padding-x: 16px;
  --bs-table-border-color: var(--border);
  font-size: 13px; margin-bottom: 0;
}
.page-billing .bill-table thead th { padding: 11px 16px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.7px; color: var(--muted); font-weight: 500; background: var(--surface2); border-bottom: 1px solid var(--border); white-space: nowrap; }
.page-billing .bill-table td { color: var(--ink2); white-space: nowrap; vertical-align: middle; }
.page-billing .bill-table tbody tr:last-child td { border-bottom: 0; }
.page-billing .bill-table tbody tr:hover td { background: var(--surface2); }
.page-billing .bill-id { font-size: 11px; color: var(--muted); }