/* CleanGrid Solar — Rep Hub. Tokens mirrored from the design system (colors_and_type.css). */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --cg-blue:#2D5E8E; --cg-blue-700:#234B73; --cg-blue-50:#EDF2F7;
  --cg-green:#6B9252; --cg-green-700:#557540; --cg-green-50:#EEF3E8;
  --cg-sun:#D88B3F; --cg-sun-700:#B16E26; --cg-sun-50:#F8EDDA;
  --ink-900:#0F1620; --ink-700:#2C3849; --ink-600:#4A5666; --ink-500:#6B7585;
  --ink-400:#9099A6; --ink-300:#C3C9D2; --ink-200:#DFE3E9; --ink-100:#ECEFF3; --ink-50:#F4F6F8;
  --canvas:#FAFAF7; --surface:#FFFFFF; --surface-warm:#F7F4ED; --border:#E6E3DA; --border-cool:#E2E6EC;
  --danger:#C2362B; --danger-bg:#FBEAE7;
  --font-display:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(15,22,32,.05),0 1px 3px rgba(15,22,32,.06);
  --shadow-md:0 4px 8px -2px rgba(15,22,32,.06),0 2px 4px -2px rgba(15,22,32,.05);
  --shadow-lg:0 12px 24px -8px rgba(15,22,32,.10),0 4px 8px -4px rgba(15,22,32,.06);
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:var(--font-body); color:var(--ink-700); background:var(--canvas);
  line-height:1.5; -webkit-font-smoothing:antialiased;
}

.topbar {
  background:var(--surface); border-bottom:1px solid var(--ink-100);
  padding:16px 24px; display:flex; align-items:center; gap:12px;
}
.topbar .grow { flex:1; }
.brand { display:flex; align-items:center; gap:11px; }
.brand .wm { font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:-.015em; line-height:1; }
.brand .wm .c { color:var(--cg-blue); } .brand .wm .g { color:var(--cg-green); }
.brand .tag { margin-top:3px; font-family:var(--font-display); font-weight:700; font-size:8px;
  text-transform:uppercase; letter-spacing:.36em; color:var(--cg-sun); }

.wrap { max-width:640px; margin:0 auto; padding:40px 20px 80px; }
.wrap.wide { max-width:1060px; }

.eyebrow { font-family:var(--font-display); font-weight:700; font-size:12px; text-transform:uppercase;
  letter-spacing:.18em; color:var(--cg-sun-700); margin:0 0 10px; }
h1 { font-family:var(--font-display); font-weight:800; font-size:clamp(26px,5vw,36px); line-height:1.12;
  letter-spacing:-.02em; color:var(--ink-900); margin:0 0 12px; }
h2 { font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.005em;
  color:var(--ink-900); margin:0 0 4px; }
.lead { font-size:17px; color:var(--ink-600); margin:0 0 8px; }
.muted { color:var(--ink-500); font-size:14px; }

.card { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:24px; margin:18px 0; }
.section-head { margin-bottom:16px; }
.section-num { font-family:var(--font-mono); font-size:12px; color:var(--cg-blue); font-weight:500; }

.field { margin:14px 0; }
.field label { display:block; font-family:var(--font-display); font-weight:600; font-size:14px;
  color:var(--ink-700); margin-bottom:6px; }
.field .hint { font-size:12.5px; color:var(--ink-500); margin-top:5px; }
.req { color:var(--cg-sun-700); }
input[type=text], input[type=email], input[type=tel], input[type=date], select, textarea {
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink-900);
  background:var(--surface); border:1px solid var(--ink-200); border-radius:var(--radius-md);
  padding:11px 13px; transition:border-color .15s, box-shadow .15s;
}
input::placeholder { color:var(--ink-400); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--cg-blue);
  box-shadow:0 0 0 3px rgba(45,94,142,.14); }
.row { display:grid; gap:12px; }
.row.two { grid-template-columns:1fr 1fr; }
.row.three { grid-template-columns:1.2fr .9fr .9fr; }
@media (max-width:520px){ .row.two,.row.three { grid-template-columns:1fr; } }

.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-display); font-weight:600; font-size:16px; cursor:pointer;
  background:var(--cg-blue); color:#fff; border:none; border-radius:var(--radius-md);
  padding:13px 24px; transition:transform .12s, background .15s; }
.btn:hover { background:var(--cg-blue-700); transform:translateY(-1px); }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.btn.full { width:100%; }
.btn.sun { background:var(--cg-sun); } .btn.sun:hover { background:var(--cg-sun-700); }
.btn.ghost { background:transparent; color:var(--ink-600); border:1px solid var(--ink-200); }
.btn.ghost:hover { background:var(--ink-50); color:var(--ink-900); }
.btn.sm { font-size:13px; padding:8px 14px; border-radius:8px; }
.btn.danger { background:var(--danger); } .btn.danger:hover { background:#A32A21; }

.err { background:var(--danger-bg); color:var(--danger); border-radius:var(--radius-md);
  padding:11px 14px; font-size:14px; margin:12px 0; }
.notice { background:var(--cg-sun-50); border:1px solid #F2DBBE;
  border-radius:var(--radius-md); padding:12px 14px; font-size:13px; color:var(--cg-sun-700); margin:12px 0; }
.ok-note { background:var(--cg-green-50); border:1px solid #D7E4CB; border-radius:var(--radius-md);
  padding:12px 14px; font-size:13px; color:var(--cg-green-700); margin:12px 0; }

.center { text-align:center; }
.success-mark { width:64px; height:64px; border-radius:999px; background:var(--cg-green-50);
  display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.hidden { display:none !important; }
.spinner { width:34px; height:34px; border:3px solid var(--ink-200); border-top-color:var(--cg-blue);
  border-radius:50%; animation:spin .8s linear infinite; margin:48px auto; }
@keyframes spin { to { transform:rotate(360deg); } }

/* step progress (rep flow) */
.steps { display:flex; align-items:center; gap:8px; margin:22px 0 6px; }
.steps .dot { width:10px; height:10px; border-radius:999px; background:var(--ink-200); transition:background .2s; }
.steps .dot.on { background:var(--cg-blue); }
.steps .dot.done { background:var(--cg-green); }
.steps .bar { flex:1; height:2px; background:var(--ink-200); border-radius:2px; }
.steps .label { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-500); margin-left:8px; }
.step-actions { display:flex; gap:10px; margin-top:20px; }
.step-actions .grow { flex:1; }

/* manager dashboard */
.statrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:18px 0; }
.stat { background:var(--surface); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:14px 16px; }
.stat .n { font-family:var(--font-display); font-weight:800; font-size:26px; color:var(--ink-900); line-height:1.1; }
.stat .l { font-family:var(--font-display); font-weight:700; font-size:11px; text-transform:uppercase;
  letter-spacing:.08em; color:var(--ink-500); margin-top:2px; }

table.list { width:100%; border-collapse:collapse; font-size:13.5px; }
table.list th { text-align:left; font-family:var(--font-display); font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.08em; color:var(--ink-500); padding:8px 10px; border-bottom:1px solid var(--ink-200); white-space:nowrap; }
table.list td { padding:10px; border-bottom:1px solid var(--ink-100); color:var(--ink-700); vertical-align:top; }
table.list td.mono { font-family:var(--font-mono); font-size:12px; }
table.list tr.rowbtn { cursor:pointer; }
table.list tr.rowbtn:hover td { background:var(--ink-50); }

.pill { display:inline-block; font-family:var(--font-display); font-weight:700; font-size:11px;
  padding:3px 9px; border-radius:999px; white-space:nowrap; }
.pill.invited { background:var(--ink-100); color:var(--ink-600); }
.pill.in_progress { background:var(--cg-blue-50); color:var(--cg-blue-700); }
.pill.info_submitted { background:var(--cg-sun-50); color:var(--cg-sun-700); }
.pill.agreement_sent { background:var(--cg-sun-50); color:var(--cg-sun-700); }
.pill.completed { background:var(--cg-green-50); color:#355A1E; }
.pill.revoked { background:var(--danger-bg); color:#7A1810; }

.detail { background:var(--surface-warm); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:16px 18px; }
.detail dl { display:grid; grid-template-columns:150px 1fr; gap:4px 14px; margin:0 0 12px; font-size:13.5px; }
.detail dt { color:var(--ink-500); } .detail dd { margin:0; color:var(--ink-900); font-weight:500; }
.detail .actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.timeline { font-family:var(--font-mono); font-size:11.5px; color:var(--ink-500); margin:8px 0 0; line-height:1.9; }
.timeline b { color:var(--ink-700); font-weight:500; }

/* modal */
.modal-bg { position:fixed; inset:0; background:rgba(15,22,32,.42); display:flex;
  align-items:flex-start; justify-content:center; padding:8vh 16px; z-index:50; }
.modal { background:var(--surface); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  width:100%; max-width:460px; padding:26px; }
.modal h2 { margin-bottom:12px; }

.link-btn { background:none; border:none; color:var(--cg-blue); font-weight:600; cursor:pointer;
  font-family:var(--font-display); font-size:13px; padding:0; }
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:6px 0 2px; }
.toolbar .grow { flex:1; }
.table-scroll { overflow-x:auto; }