/* Retainer+ dashboard — clean enterprise UI (Inter), ported from the approved design. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --bg:#f4f4f5; --card:#ffffff; --text:#1f2329; --muted:#8a8f98; --label:#6b7280;
  --border:#e3e3e6; --border-input:#d4d4d8; --track:#edecee;
  --purple:#714b67; --purple-dark:#5c3d54;
  --green:#16a34a; --green-t:#157a39; --green-bg:#e7f5ec;
  --amber:#ea8a00; --amber-t:#b5650a; --amber-bg:#fdf0dd;
  --red:#dc2626;   --red-t:#c0271f;   --red-bg:#fdeaea;
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif; font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; }

/* top bar */
.topbar { background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:10; }
.topbar-inner { height:54px; display:flex; align-items:center; gap:26px; padding:0 20px; }
.brand { display:flex; align-items:center; gap:9px; text-decoration:none; }
.brand .sq { width:26px; height:26px; border-radius:6px; background:var(--purple); color:#fff;
  display:grid; place-items:center; font-weight:700; font-size:14px; }
.brand .wm { font-weight:700; font-size:16px; color:var(--text); }
.brand .wm span { color:var(--purple); }
.topnav { display:flex; gap:4px; }
.topnav a { text-decoration:none; color:var(--label); font-size:13.5px; padding:17px 10px 15px;
  border-bottom:2px solid transparent; }
.topnav a:hover { color:var(--text); }
.topnav a.active { color:var(--purple); border-bottom-color:var(--purple); font-weight:500; }
.topright { margin-left:auto; display:flex; align-items:center; gap:10px; font-size:13px; color:var(--label); }
.avatar { width:28px; height:28px; border-radius:50%; background:#eceaef; color:var(--purple);
  display:grid; place-items:center; font-size:11px; font-weight:600; }
.btn-ghost { background:none; border:1px solid var(--border); color:var(--label);
  font-size:12.5px; height:30px; padding:0 11px; border-radius:6px; cursor:pointer; text-decoration:none;
  display:inline-flex; align-items:center; }
.btn-ghost:hover { background:#f4f4f5; color:var(--text); }

/* page shell */
.content { max-width:1080px; margin:0 auto; padding:24px 20px 56px; }
.page-head { display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap;
  gap:10px; margin-bottom:18px; }
.page-head h1 { margin:0; font-size:20px; font-weight:700; }
.page-head .sub { font-size:13px; color:var(--muted); margin-top:3px; }
.sync { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); }
.sync .dot { width:7px; height:7px; border-radius:50%; display:inline-block; }
.sync.ok .dot { background:var(--green); } .sync.bad .dot { background:var(--red); }

/* stat cards */
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:9px; padding:15px 17px;
  border-left:3px solid var(--border); }
.stat .k { font-size:13px; color:var(--label); }
.stat .n { font-size:30px; font-weight:700; line-height:1.1; margin:2px 0; font-variant-numeric:tabular-nums; }
.stat .s { font-size:12px; color:var(--muted); }
.stat.behind { border-left-color:var(--red); }   .stat.behind .n { color:var(--red); }
.stat.push   { border-left-color:var(--amber); }  .stat.push .n   { color:var(--amber); }
.stat.track  { border-left-color:var(--green); }  .stat.track .n  { color:var(--green); }

/* panels (lists, forms) */
.panel { background:var(--card); border:1px solid var(--border); border-radius:9px; }
.panel-head { display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border); }
.panel-head h2 { margin:0; font-size:14px; font-weight:600; }
.panel-head .count { font-size:12.5px; color:var(--muted); }

/* board client rows */
.crow { display:grid; grid-template-columns:240px 1fr 132px; align-items:center; gap:24px;
  padding:16px 18px; border-bottom:1px solid #f0f0f1; }
.crow:last-child { border-bottom:none; }
.crow .nm { font-size:15px; font-weight:600; }
.badge-ob { display:inline-block; background:#f1f1f3; color:#9ca3af; border-radius:4px;
  padding:1px 7px; font-size:11px; margin-left:7px; vertical-align:middle; }
.bars { display:grid; gap:11px; }
.bar-top { display:flex; justify-content:space-between; font-size:11.5px; color:var(--label); margin-bottom:4px; }
.bar-top b { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.bar { height:6px; background:var(--track); border-radius:999px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:999px; }
.bar.red i { background:var(--red); } .bar.amber i { background:var(--amber); } .bar.green i { background:var(--green); }
.pill { justify-self:end; display:inline-block; border-radius:999px; padding:4px 11px;
  font-size:12px; font-weight:600; }
.pill.red { background:var(--red-bg); color:var(--red-t); }
.pill.amber { background:var(--amber-bg); color:var(--amber-t); }
.pill.green { background:var(--green-bg); color:var(--green-t); }
.empty { padding:36px 18px; text-align:center; color:var(--muted); font-size:13px; }

/* forms */
.form { padding:18px; }
.field { margin-bottom:15px; }
.field > label { display:block; font-size:12.5px; color:var(--label); margin-bottom:5px; }
.field input, .field select { width:100%; height:38px; border:1px solid var(--border-input);
  border-radius:7px; padding:0 11px; font-size:14px; font-family:inherit; color:var(--text); background:#fff; }
.field input:focus, .field select:focus { outline:none; border-color:var(--purple); box-shadow:0 0 0 3px rgba(113,75,103,.12); }
.field .help { font-size:12px; color:var(--muted); margin-top:5px; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.token-row { display:flex; gap:8px; }
.token-row input { flex:1; }
.actions { display:flex; align-items:center; gap:12px; padding-top:4px; }
.btn { background:var(--purple); color:#fff; border:none; border-radius:7px; height:38px; padding:0 18px;
  font-size:14px; font-weight:600; font-family:inherit; cursor:pointer; }
.btn:hover { background:var(--purple-dark); }
.cancel { color:var(--label); text-decoration:none; font-size:13px; }
.cancel:hover { color:var(--text); }
.err { background:var(--red-bg); color:var(--red-t); font-size:13px; padding:9px 18px;
  border-bottom:1px solid var(--border); }
.statusline { display:flex; align-items:center; gap:7px; font-size:13px; margin:2px 0 14px; }
.statusline.ok { color:var(--green-t); } .statusline.bad { color:var(--red-t); }
.statusline .dot { width:7px; height:7px; border-radius:50%; background:currentColor; display:inline-block; }
.note { display:flex; gap:10px; background:#fff; border:1px solid var(--border); border-radius:9px;
  padding:14px 16px; margin-top:16px; font-size:13px; color:var(--label); line-height:1.55; }
.note .i { color:var(--muted); }

/* roster table */
table.list { width:100%; border-collapse:collapse; }
table.list th { text-align:left; font-size:11.5px; font-weight:500; color:var(--muted);
  padding:12px 18px; border-bottom:1px solid var(--border); }
table.list td { padding:13px 18px; border-bottom:1px solid #f0f0f1; font-size:13.5px; }
table.list tr:last-child td { border-bottom:none; }
table.list .nm { font-weight:600; }
.tok-set { color:var(--green-t); } .tok-miss { color:var(--red-t); }
.st-active { color:var(--green-t); } .st-paused { color:var(--muted); } .st-onboarding { color:var(--amber-t); }
.rowact { text-align:right; white-space:nowrap; }
.rowact a { text-decoration:none; font-size:12.5px; }
.rowact .edit { color:var(--purple); } .rowact .rm { color:var(--red-t); margin-left:14px;
  background:none; border:none; cursor:pointer; font-size:12.5px; font-family:inherit; }

/* login */
.login-wrap { min-height:100vh; display:grid; place-items:center; padding:24px; }
.login { width:100%; max-width:340px; background:var(--card); border:1px solid var(--border);
  border-radius:11px; padding:26px; }
.login .brand { margin-bottom:4px; }
.login .tag { font-size:12.5px; color:var(--muted); margin:6px 0 18px; }
.login .field { margin-bottom:13px; }
.login .btn { width:100%; }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline:2px solid var(--purple); outline-offset:2px;
}
@media (max-width:760px){
  .stats{grid-template-columns:1fr;} .crow{grid-template-columns:1fr; gap:12px;}
  .pill{justify-self:start;} .row2{grid-template-columns:1fr;}
}