/* ── Billing Page ──────────────────────────────────────────────────────────── */

/* Page header */
.bi-page-hdr   { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.75rem; flex-wrap:wrap; }
.bi-page-title { font-family:var(--font-heading); font-size:1.5rem; font-weight:700; color:var(--color-text); margin-bottom:4px; }
.bi-page-sub   { font-size:14px; color:var(--color-text-light); }

/* Summary strip */
.bi-summary       { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.5rem; }
.bi-stat-card     { display:flex; align-items:center; gap:1.125rem; padding:1.25rem 1.5rem; }
.bi-stat-icon     { width:46px; height:46px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0; }
.bi-stat-icon--blue   { background:#eef2ff; color:var(--color-primary); }
.bi-stat-icon--green  { background:#dcfce7; color:var(--color-success); }
.bi-stat-icon--purple { background:#ede9fe; color:#7c3aed; }
.bi-stat-value { font-family:var(--font-heading); font-size:1.875rem; font-weight:700; line-height:1; margin-bottom:5px; color:var(--color-text); }
.bi-stat-label { font-size:13px; color:var(--color-text-light); }

/* Table card */
.bi-table-card  { padding:0; overflow:hidden; margin-bottom:1.5rem; }
.bi-table-hdr   { display:flex; align-items:center; gap:0.875rem; padding:1.125rem 1.5rem; border-bottom:1px solid var(--color-border); }
.bi-table-hdr-left { display:flex; align-items:center; gap:0.875rem; }
.bi-table-hdr-icon { width:36px; height:36px; border-radius:var(--radius-sm); background:#eef2ff; color:var(--color-primary); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.bi-table-title { font-family:var(--font-heading); font-size:15px; font-weight:700; color:var(--color-text); margin-bottom:2px; }
.bi-table-sub   { font-size:12px; color:var(--color-text-light); margin:0; }

/* Table */
.bi-table         { width:100%; border-collapse:collapse; font-size:13.5px; }
.bi-table thead tr{ background:var(--color-surface); }
.bi-table th      { padding:10px 20px; text-align:left; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--color-text-light); border-bottom:1px solid var(--color-border); white-space:nowrap; }
.bi-table td      { padding:14px 20px; border-bottom:1px solid var(--color-border); vertical-align:middle; }
.bi-table tbody tr:last-child td { border-bottom:none; }
.bi-table tbody tr:hover { background:var(--color-surface); }
.bi-ta-right      { text-align:right; }

/* Date cell */
.bi-date { display:block; font-weight:600; color:var(--color-text); font-size:13px; }
.bi-time { display:block; font-size:12px; color:var(--color-text-light); margin-top:2px; }

/* Plan badge */
.bi-plan-badge          { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; }
.bi-plan-badge--starter  { background:#dcfce7; color:#059669; }
.bi-plan-badge--growth   { background:#eef2ff; color:var(--color-primary); }
.bi-plan-badge--business { background:#ede9fe; color:#7c3aed; }

/* Credits cell */
.bi-credits { font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--color-success); }

/* Amount cell */
.bi-amount { font-size:13px; font-weight:600; color:var(--color-text); }

/* Status badge */
.bi-status-badge { display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; color:#059669; background:#dcfce7; border:1px solid #A7F3D0; padding:3px 10px; border-radius:999px; }

/* Empty state */
.bi-empty       { padding:4rem 2rem; text-align:center; }
.bi-empty-icon  { font-size:2.5rem; color:var(--color-text-light); opacity:.25; margin-bottom:1rem; }
.bi-empty-title { font-weight:700; font-size:15px; color:var(--color-text); margin-bottom:0.375rem; }
.bi-empty-sub   { font-size:13px; color:var(--color-text-light); }

/* Footer note */
.bi-footer-note { font-size:13px; color:var(--color-text-light); text-align:center; margin-top:0.25rem; }
.bi-footer-note a { color:var(--color-primary); }
.bi-footer-note a:hover { text-decoration:underline; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .bi-summary { grid-template-columns: 1fr; }
    .bi-page-hdr { align-items:flex-start; }
    .bi-stat-value { font-size:1.5rem; }
    .bi-table th, .bi-table td { padding:10px 12px; }
}