:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root), :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) *{ box-sizing:border-box; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root){
  --ink:#16281E;
  --brand:#2F8F5B;
  --brand-light:#E3F1E8;
  --paper:#F6F7F2;
  --card:#FFFFFF;
  --slate:#5C6B60;
  --slate-light:#8FA095;
  --line:#DCE4DA;
  --line-strong:#C2D0C4;
  --green:#2F8F5B;
  --green-bg:#E3F1E8;
  --amber:#B8791A;
  --amber-bg:#FBF0DD;
  --red:#B23B2E;
  --red-bg:#FBE9E6;
  --gray-bg:#EEF1EA;
  --radius:6px;
  --font-display:'Zilla Slab', Georgia, serif;
  --font-body:'Inter', -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  font-size:14px;
  line-height:1.5;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  max-width:1200px;
  margin:0 auto;
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-app{ display:flex; min-height:640px; }

/* ---------- Sidebar ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-sidebar{
  width:220px;
  flex-shrink:0;
  background:#FFFFFF;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  padding:24px 0;
  border-right:1px solid var(--line);
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-brand{
  display:flex; align-items:center; gap:10px;
  padding:0 20px 20px; border-bottom:1px solid var(--line); margin-bottom:12px;
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-brand-text{ font-family:var(--font-display); font-weight:700; font-size:15px; line-height:1.2; color:var(--ink); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-brand-text span{ display:block; font-family:var(--font-mono); font-weight:500; font-size:10px; letter-spacing:0.08em; color:var(--slate); margin-top:4px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-nav-item{
  display:flex; align-items:center; gap:10px; padding:11px 20px; cursor:pointer;
  color:var(--slate); font-size:13.5px; font-weight:500; border-left:3px solid transparent;
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-nav-item:hover{ background:var(--gray-bg); color:var(--ink); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-nav-item.active{ background:var(--green-bg); color:var(--brand); border-left:3px solid var(--brand); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-nav-item .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:0.55; flex-shrink:0; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-sidebar-user{
  margin-top:auto; padding:14px 20px 0; border-top:1px solid var(--line); font-size:12.5px; color:var(--slate);
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-sidebar-user b{ color:var(--ink); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-sidebar-user button{ margin-top:8px; width:100%; }

/* ---------- Main ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-main{ flex:1; padding:32px 40px; max-width:1000px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-page-title{ font-family:var(--font-display); font-weight:600; font-size:26px; margin:0 0 4px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-page-sub{ color:var(--slate); font-size:13.5px; margin:0 0 28px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-row-between{ display:flex; align-items:center; justify-content:space-between; margin-bottom:28px; gap:16px; flex-wrap:wrap; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-row-between .gbm-page-title, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-row-between .gbm-page-sub{ margin-bottom:0; }

/* ---------- Buttons ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) button{ font-family:var(--font-body); cursor:pointer; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn{
  display:inline-flex; align-items:center; gap:6px; padding:9px 16px; border-radius:var(--radius);
  border:1px solid var(--line-strong); background:var(--card); color:var(--ink); font-size:13.5px; font-weight:500;
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn:hover{ border-color:var(--brand); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn-primary{ background:var(--brand); border-color:var(--brand); color:#fff; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn-primary:hover{ background:#256e46; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn-danger{ color:var(--red); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn-danger:hover{ border-color:var(--red); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn-ghost{ border-color:transparent; background:transparent; padding:6px 8px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn-ghost:hover{ background:var(--gray-bg); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .btn-sm{ padding:5px 10px; font-size:12.5px; }

/* ---------- Cards / metrics ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .metrics{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:32px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .metric-card{ background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .metric-label{ font-size:11.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--slate); margin-bottom:8px; font-weight:600; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .metric-value{ font-family:var(--font-mono); font-size:22px; font-weight:600; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .metric-value.red{ color:var(--red); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .metric-value.green{ color:var(--green); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .card{ background:var(--card); border:1px solid var(--line); border-radius:10px; }

/* ---------- Table ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) table{ width:100%; border-collapse:collapse; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); font-weight:600; padding:10px 14px; border-bottom:1px solid var(--line); background:var(--gray-bg); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) td{ padding:12px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) tr:last-child td{ border-bottom:none; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) tbody tr:hover{ background:#FBFAF6; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .num{ font-family:var(--font-mono); text-align:right; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .row-actions{ display:flex; gap:6px; justify-content:flex-end; }

/* ---------- Badges ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; font-family:var(--font-mono); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge-draft{ background:var(--gray-bg); color:var(--slate); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge-sent{ background:#E6F1FB; color:#185FA5; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge-paid{ background:var(--green-bg); color:var(--green); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge-overdue{ background:var(--red-bg); color:var(--red); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge-partial{ background:var(--amber-bg); color:var(--amber); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge-accepted{ background:var(--green-bg); color:var(--green); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .badge-declined{ background:var(--red-bg); color:var(--red); }

/* ---------- Forms ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) label{ display:block; font-size:12.5px; font-weight:600; color:var(--slate); margin-bottom:5px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) input, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) select, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) textarea{
  font-family:var(--font-body); width:100%; padding:9px 10px; border:1px solid var(--line-strong);
  border-radius:var(--radius); background:var(--card); color:var(--ink); font-size:13.5px;
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) input:focus, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) select:focus, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) textarea:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-light); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .field{ margin-bottom:16px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .field-row{ display:grid; gap:14px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .field-row.cols-2{ grid-template-columns:1fr 1fr; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .field-row.cols-3{ grid-template-columns:1fr 1fr 1fr; }

/* ---------- Modal ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .modal-overlay{ position:absolute; inset:0; background:rgba(22,40,30,0.45); display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; z-index:100; border-radius:12px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .modal{ background:var(--card); border-radius:12px; width:100%; max-width:560px; padding:28px 30px; box-shadow:0 20px 50px rgba(0,0,0,0.2); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .modal-title{ font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 20px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .modal-footer{ display:flex; justify-content:flex-end; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }

/* ---------- Invoice line items ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .line-items-head, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .line-item-row{ display:grid; grid-template-columns:1fr 70px 100px 100px 32px; gap:10px; align-items:center; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .line-items-head{ font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--slate); font-weight:600; padding:0 0 8px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .line-item-row{ padding:6px 0; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .line-amount{ font-family:var(--font-mono); text-align:right; font-size:13.5px; }

/* ---------- Title block ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .title-block{ display:grid; grid-template-columns:repeat(4, 1fr); border:1.5px solid var(--ink); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .title-block .cell{ border-right:1px solid var(--ink); border-bottom:1px solid var(--ink); padding:8px 12px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .title-block .cell:nth-child(4n){ border-right:none; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .title-block .tb-label{ font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:3px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .title-block .tb-value{ font-family:var(--font-mono); font-size:13.5px; font-weight:600; }

/* ---------- Invoice document ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) #invoice-doc{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:40px 44px; max-width:780px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-header{ display:flex; justify-content:space-between; align-items:flex-start; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-rule{ height:2px; background:var(--brand); margin:20px 0 26px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-company-meta{ color:var(--slate); font-size:12.5px; margin-top:4px; line-height:1.6; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-doctype{ font-family:var(--font-display); font-weight:600; font-size:28px; letter-spacing:0.02em; text-align:right; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .bill-to{ margin:26px 0 22px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .bill-to .tb-label{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color:var(--slate); margin-bottom:4px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .bill-to .name{ font-weight:600; font-size:14.5px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .bill-to .meta{ color:var(--slate); font-size:12.5px; line-height:1.6; margin-top:2px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-table th{ background:transparent; border-bottom:1.5px solid var(--ink); color:var(--ink); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-table td{ border-bottom:1px solid var(--line); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-totals{ display:flex; justify-content:flex-end; margin-top:8px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-totals table{ width:280px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-totals td{ border:none; padding:6px 4px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-totals tr.total td{ border-top:1.5px solid var(--ink); font-weight:700; font-size:15px; padding-top:10px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .inv-notes{ margin-top:26px; padding-top:16px; border-top:1px solid var(--line); color:var(--slate); font-size:12.5px; white-space:pre-wrap; }

/* ---------- Empty state ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .empty{ padding:60px 20px; text-align:center; color:var(--slate); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .empty .empty-title{ font-family:var(--font-display); font-size:17px; color:var(--ink); margin-bottom:6px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .filter-bar{ display:flex; gap:10px; margin-bottom:16px; align-items:center; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .filter-bar select, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .filter-bar input{ width:auto; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .filter-bar input[type="text"]{ width:220px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) code{ background:var(--gray-bg); padding:2px 6px; border-radius:4px; word-break:break-all; }

:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .toast{
  position:absolute; bottom:20px; right:20px; background:var(--ink); color:#fff; padding:12px 20px;
  border-radius:8px; font-size:13px; z-index:200; box-shadow:0 8px 24px rgba(0,0,0,0.25);
}

/* ---------- Login screen ---------- */
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-login{ display:flex; align-items:center; justify-content:center; min-height:640px; padding:40px 20px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-login-card{ width:100%; max-width:380px; text-align:center; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-login-card img{ height:56px; margin-bottom:24px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-login-title{ font-family:var(--font-display); font-size:19px; font-weight:600; margin-bottom:20px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-user-picker{ display:flex; gap:10px; justify-content:center; margin-bottom:20px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-user-btn{
  flex:1; padding:16px 8px; border:1px solid var(--line-strong); border-radius:10px; background:var(--card);
  font-weight:600; font-size:13.5px; color:var(--ink);
}
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-user-btn.selected{ border-color:var(--brand); background:var(--brand-light); color:var(--brand); }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-login-error{ color:var(--red); font-size:12.5px; margin-top:10px; min-height:16px; }
:is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-login-form{ text-align:left; }

@media print{
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .no-print{ display:none !important; }
}

@media (max-width: 720px){
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-app{ flex-direction:column; }
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-sidebar{ width:100%; flex-direction:row; flex-wrap:wrap; padding:14px; border-right:none; border-bottom:1px solid var(--line); }
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-brand{ width:100%; border-bottom:none; margin-bottom:6px; padding-bottom:6px; }
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-sidebar-user{ display:none; }
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .gbm-main{ padding:20px; }
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .metrics{ grid-template-columns:1fr 1fr; }
  :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .field-row.cols-2, :is(#gbm-inv-root, #gbm-inv-public-root, #gbm-client-portal-root) .field-row.cols-3{ grid-template-columns:1fr; }
}