/* ============================================================
   InsuranceAgentHub — Design Tokens & Base
   Fintech-precise enterprise SaaS. Navy sidebar / white workspace.
   ============================================================ */

:root {
  /* --- Navigation (dark) --- */
  --nav-bg-top: #111A2B;
  --nav-bg-bot: #0B1220;
  --nav-line: rgba(255,255,255,0.07);
  --nav-fg: #9AA6B8;
  --nav-fg-dim: #6B7689;
  --nav-fg-strong: #F4F7FB;
  --nav-active-bg: rgba(255,255,255,0.06);
  --nav-active-line: #C9A227;

  /* --- Workspace (light) --- */
  --bg: #F4F5F8;
  --bg-2: #EDEFF3;
  --panel: #FFFFFF;
  --panel-2: #FBFBFD;
  --line: #E7E9EF;
  --line-soft: #EFF1F5;
  --line-strong: #D8DCE4;

  /* --- Text --- */
  --t1: #0E1726;   /* strong */
  --t2: #46505F;   /* body */
  --t3: #717A88;   /* muted */
  --t4: #9AA2AE;   /* faint / meta */

  /* --- Accents --- */
  --blue: #2563EB;
  --blue-600: #1D4FD8;
  --blue-soft: #EEF3FF;
  --blue-line: #D5E1FE;

  --gold: #B8881A;
  --gold-bright: #C9A227;
  --gold-soft: #FBF3DD;
  --gold-line: #F0E2B6;

  --green: #15924A;
  --green-soft: #E7F6EE;
  --green-line: #C5E9D4;

  --red: #D6443B;
  --red-soft: #FCECEA;
  --red-line: #F6CFCB;

  --orange: #DB7411;
  --orange-soft: #FCF0E0;
  --orange-line: #F4DCBC;

  --violet: #6D5AE6;   /* AI */
  --violet-2: #5847D6;
  --violet-soft: #EFECFD;
  --violet-line: #DAD3FA;

  --teal: #0E8C95;
  --teal-soft: #E3F4F5;

  /* --- Radius --- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-pill: 999px;

  /* --- Shadow --- */
  --sh-xs: 0 1px 2px rgba(16,24,40,0.05);
  --sh-sm: 0 1px 2px rgba(16,24,40,0.04), 0 1px 3px rgba(16,24,40,0.06);
  --sh-md: 0 2px 4px rgba(16,24,40,0.04), 0 6px 16px rgba(16,24,40,0.07);
  --sh-pop: 0 12px 36px rgba(13,20,40,0.16), 0 2px 8px rgba(13,20,40,0.08);
  --sh-nav: 0 8px 30px rgba(7,12,24,0.35);

  --ff: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ff-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--ff);
  background: var(--bg);
  color: var(--t1);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--blue-soft); }

/* scrollbars */
.scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.scroll::-webkit-scrollbar-thumb { background: #CDD3DD; border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.scroll::-webkit-scrollbar-thumb:hover { background: #B4BCC9; background-clip: content-box; }
.scroll::-webkit-scrollbar-track { background: transparent; }
.scroll-dark::-webkit-scrollbar { width: 10px; }
.scroll-dark::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.10); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
.scroll-dark::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); background-clip: content-box; }

/* ---- typography helpers ---- */
.mono { font-family: var(--ff-mono); font-feature-settings: "tnum" 1; }
.tnum { font-variant-numeric: tabular-nums; }
.eyebrow {
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--t4);
}

/* ---- pills / tags ---- */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 21px; padding: 0 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 550; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.pill .dot { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.pill-blue   { background: var(--blue-soft);   color: var(--blue-600); border-color: var(--blue-line); }
.pill-gold   { background: var(--gold-soft);   color: var(--gold);     border-color: var(--gold-line); }
.pill-green  { background: var(--green-soft);  color: var(--green);    border-color: var(--green-line); }
.pill-red    { background: var(--red-soft);    color: var(--red);      border-color: var(--red-line); }
.pill-orange { background: var(--orange-soft); color: var(--orange);   border-color: var(--orange-line); }
.pill-violet { background: var(--violet-soft); color: var(--violet-2); border-color: var(--violet-line); }
.pill-gray   { background: #F0F2F5;            color: var(--t3);       border-color: var(--line); }
.pill-teal   { background: var(--teal-soft);   color: var(--teal);     border-color: #C3E6E8; }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: var(--r-sm);
  font-family: var(--ff); font-size: 13px; font-weight: 550;
  border: 1px solid var(--line-strong); background: var(--panel); color: var(--t1);
  cursor: pointer; white-space: nowrap; transition: all .14s ease; user-select: none;
}
.btn:hover { background: var(--panel-2); border-color: #C7CDD7; }
.btn svg { width: 15px; height: 15px; }
.btn-sm { height: 29px; padding: 0 11px; font-size: 12.5px; }
.btn-primary { background: #101A2C; border-color: #101A2C; color: #fff; }
.btn-primary:hover { background: #1B2740; border-color: #1B2740; }
.btn-blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn-blue:hover { background: var(--blue-600); border-color: var(--blue-600); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--t2); }
.btn-ghost:hover { background: #EEF0F4; }
.btn-icon { width: 34px; padding: 0; }

/* ---- cards ---- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 18px 13px; border-bottom: 1px solid var(--line-soft);
}
.card-title { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--t1); }
.card-sub { font-size: 12px; color: var(--t3); margin-top: 2px; }

/* ---- tables ---- */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--t4); padding: 9px 14px;
  border-bottom: 1px solid var(--line); background: var(--panel-2); white-space: nowrap;
}
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; color: var(--t2); vertical-align: middle; }
.tbl tbody tr { transition: background .12s; }
.tbl tbody tr:hover { background: #FAFBFC; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl .num { text-align: right; font-family: var(--ff-mono); font-variant-numeric: tabular-nums; color: var(--t1); }

/* avatar */
.av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; font-weight: 600; color: #fff; flex: none;
  font-size: 11px; letter-spacing: 0.01em;
}

/* progress / meter */
.meter { height: 6px; border-radius: 99px; background: #ECEEF2; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 99px; }

/* dividers / utility */
.hr { height: 1px; background: var(--line); border: 0; margin: 0; }
.row { display: flex; align-items: center; }
.muted { color: var(--t3); }
.faint { color: var(--t4); }
.kbd {
  font-family: var(--ff-mono); font-size: 10.5px; color: var(--t3);
  background: #fff; border: 1px solid var(--line-strong); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 5px; line-height: 1.4;
}

/* focus card hover lift */
.lift { transition: box-shadow .16s, transform .16s, border-color .16s; }
.lift:hover { box-shadow: var(--sh-md); border-color: var(--line-strong); }

/* fade-in for screen switch — slide only (never traps content invisible) */
@keyframes fadeUp { from { transform: translateY(8px); } to { transform: none; } }
.fade { animation: fadeUp .24s ease both; }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* tiny scrollbar hidden */
.noscroll::-webkit-scrollbar { display: none; }
.noscroll { scrollbar-width: none; }