/* ============================================================
   Billing module — admin + portal + document screen views.
   Layers on top of admin/admin.css (admin) and stands alone (portal).
   ============================================================ */

:root{
  --ink:#0c1a28; --ink2:#12293b; --gold:#b9892f; --gold-soft:#e9b44c;
  --paper:#f6f8fb; --card:#ffffff; --line:#e2e8ee; --text:#1f2a33; --muted:#6b7a88;
  --good:#1c7d43; --good-bg:#e7f6ec; --warn:#a5610a; --warn-bg:#fff5e6;
  --bad:#b3261e; --bad-bg:#fdecec; --info:#134a8e; --info-bg:#e8f0fb;
}

/* ---- Billing sub-navigation (admin) ---- */
.bill-nav{ background:var(--ink2); border-bottom:3px solid var(--gold); }
.bill-nav-inner{ max-width:1120px; margin:0 auto; padding:0 20px; display:flex; flex-wrap:wrap; gap:2px; }
.bill-nav a{ color:#c7d2dc; text-decoration:none; padding:12px 16px; font-size:14px; font-weight:600; border-bottom:3px solid transparent; margin-bottom:-3px; }
.bill-nav a:hover{ color:#fff; }
.bill-nav a.active{ color:#fff; border-bottom-color:var(--gold-soft); }
.bill-wrap{ max-width:1120px; }

/* ---- Stat cards ---- */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin:8px 0 22px; }
.stat{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
.stat .k{ font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:600; }
.stat .v{ font-size:26px; font-weight:800; color:var(--ink); margin-top:6px; font-variant-numeric:tabular-nums; }
.stat .sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.stat.accent{ border-left:4px solid var(--gold); }

/* ---- Badges ---- */
.badge{ display:inline-block; padding:2px 10px; border-radius:20px; font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.badge-unpaid,.badge-pending{ background:var(--bad-bg); color:var(--bad); }
.badge-paid,.badge-success,.badge-active,.badge-signed{ background:var(--good-bg); color:var(--good); }
.badge-partlypaid,.badge-payable,.badge-sent{ background:var(--warn-bg); color:var(--warn); }
.badge-void,.badge-failed,.badge-cancelled,.badge-draft{ background:#eef1f4; color:#5a6b7b; }
.badge-completed{ background:var(--info-bg); color:var(--info); }
.role-badge{ font-size:11px; padding:2px 8px; border-radius:5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.role-admin{ background:#efe3c8; color:#7a5a12; }
.role-client{ background:#e8f0fb; color:#134a8e; }
.role-referrer{ background:#e7f6ec; color:#1c7d43; }

/* ---- Cards / panels ---- */
.card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:20px 22px; margin-bottom:18px; }
.card h2{ margin:0 0 4px; font-size:18px; color:var(--ink); }
.card .card-sub{ color:var(--muted); font-size:13px; margin:0 0 14px; }
.row-split{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.section-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* ---- Forms ---- */
.form-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px 18px; }
.form-grid .full{ grid-column:1 / -1; }
.field label{ display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:5px; }
.field input, .field select, .field textarea{
  width:100%; padding:9px 11px; border:1px solid #cfd8e2; border-radius:7px; font-size:14px;
  font-family:inherit; background:#fff; color:var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--gold-soft); outline-offset:0; border-color:var(--gold); }
.field .hint{ font-size:11.5px; color:var(--muted); margin-top:4px; }
.field.req label::after{ content:" *"; color:var(--bad); }
textarea{ resize:vertical; min-height:80px; }

/* ---- Buttons (extends admin .btn) ---- */
.btn.btn-gold{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn.btn-gold:hover{ background:#a5761f; }
.btn.btn-ink{ background:var(--ink); border-color:var(--ink); color:#fff; }
.btn.btn-outline{ background:#fff; border:1px solid #cfd8e2; color:var(--text); }
.btn.btn-outline:hover{ border-color:var(--gold); color:var(--gold); }

/* ---- Line-items editor ---- */
.items-editor table{ width:100%; border-collapse:collapse; }
.items-editor th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:6px 8px; }
.items-editor td{ padding:4px 8px; }
.items-editor input{ padding:7px 9px; }
.items-editor .num{ text-align:right; }
.items-editor .li-total{ font-weight:700; white-space:nowrap; }
.totals-preview{ margin-top:10px; text-align:right; font-size:14px; }
.totals-preview .grand{ font-size:20px; font-weight:800; color:var(--ink); }

/* ---- Detail meta ---- */
.meta-list{ list-style:none; margin:0; padding:0; }
.meta-list li{ display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--line); font-size:14px; }
.meta-list li:last-child{ border-bottom:0; }
.meta-list .k{ color:var(--muted); }
.meta-list .v{ font-weight:600; text-align:right; }

/* ---- Empty state ---- */
.empty-box{ background:var(--card); border:1px dashed #cbd5e0; border-radius:10px; padding:40px 20px; text-align:center; color:var(--muted); }

/* ============================================================
   Portal (client / referrer) — standalone styling
   ============================================================ */
.portal{ background:var(--paper); min-height:100vh; margin:0; font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif; color:var(--text); }
.portal-bar{ background:var(--ink); color:#fff; }
.portal-bar-inner{ max-width:960px; margin:0 auto; padding:14px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.portal-brand{ font-size:20px; font-weight:800; letter-spacing:1px; }
.portal-brand .k{ color:var(--gold-soft); }
.portal-bar-right{ display:flex; align-items:center; gap:14px; font-size:14px; }
.portal-bar-right a{ color:#cdd8e2; text-decoration:none; }
.portal-bar-right a:hover{ color:#fff; }
.portal-wrap{ max-width:960px; margin:0 auto; padding:26px 20px 60px; }
.portal-hello{ font-size:22px; font-weight:800; color:var(--ink); margin:0 0 2px; }
.portal-sub{ color:var(--muted); margin:0 0 22px; }

.data-table{ width:100%; border-collapse:collapse; background:#fff; }
.data-table th{ text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:11px 12px; border-bottom:2px solid var(--line); }
.data-table td{ padding:11px 12px; border-bottom:1px solid var(--line); font-size:14px; vertical-align:middle; }
.data-table tr:last-child td{ border-bottom:0; }
.data-table .num{ text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.table-card{ background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.table-scroll2{ overflow-x:auto; }

/* ---- Login card ---- */
.portal-login{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(160deg,#0f2233,#0a1622); padding:20px; }
.portal-login-card{ background:#fff; border-radius:14px; padding:34px 32px; width:100%; max-width:400px; box-shadow:0 30px 60px -30px rgba(0,0,0,.5); }
.portal-login-card .brand{ font-size:26px; font-weight:800; letter-spacing:1px; color:var(--ink); text-align:center; }
.portal-login-card .brand .k{ color:var(--gold); }
.portal-login-card .sub{ text-align:center; color:var(--muted); margin:4px 0 22px; font-size:13px; }

/* Continue with Google (portal login) */
.btn-google-portal{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  background:#fff; color:#3c4043; border:1px solid #dadce0; border-radius:8px; padding:11px 14px;
  font-size:14px; font-weight:600; text-decoration:none; transition:background .18s,border-color .18s; }
.btn-google-portal:hover{ background:#f8f9fa; border-color:#c6cacd; color:#3c4043; }
.portal-or{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--muted); font-size:12.5px; }
.portal-or::before, .portal-or::after{ content:""; flex:1; height:1px; background:var(--line); }

/* ---- Pay button (big) ---- */
.pay-cta{ display:inline-block; background:linear-gradient(180deg,var(--gold-soft),var(--gold)); color:#0c1a28; font-weight:800; font-size:16px; padding:14px 28px; border-radius:8px; text-decoration:none; border:0; cursor:pointer; box-shadow:0 8px 20px -8px rgba(185,137,47,.7); }
.pay-cta:hover{ filter:brightness(1.04); }
.pay-note{ font-size:12.5px; color:var(--muted); margin-top:10px; }

/* ---- Document preview toolbar ---- */
.doc-toolbar{ background:var(--ink); color:#fff; padding:10px 16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; position:sticky; top:0; }
.doc-toolbar a, .doc-toolbar button{ font-size:13px; }
.doc-preview{ max-width:820px; margin:20px auto; background:#fff; box-shadow:0 6px 24px -10px rgba(0,0,0,.3); }

.alert.info{ background:var(--info-bg); color:var(--info); border:1px solid #c5d8f2; }
.alert.warn{ background:var(--warn-bg); color:var(--warn); border:1px solid #f0d9ae; }

@media (max-width:640px){
  .form-grid{ grid-template-columns:1fr; }
  .portal-hello{ font-size:19px; }
}