/* Leads Box — design language cloned from compliance-box (saleshub system),
   restyled main content to a compact spreadsheet. */

:root {
  /* ink */
  --ink-50: #f8f9fb; --ink-100: #eef0f4; --ink-200: #dde1e8; --ink-300: #b8bdc8;
  --ink-400: #878d9a; --ink-500: #5f6573; --ink-600: #434956; --ink-700: #2c313b;
  --ink-800: #1a1d24; --ink-900: #0b0d12;
  /* brand */
  --brand-50: #ecf8fd; --brand-100: #d2eefa; --brand-200: #a4dcf3; --brand-300: #6fc6e9;
  --brand-400: #3eb1de; --brand-500: #1fa6d5; --brand-600: #0d8cba; --brand-700: #0c6f96;
  --brand-800: #0e5b7b; --brand-900: #114b67;
  /* nav */
  --nav-50: #eef2f8; --nav-100: #d9e1ee; --nav-200: #b3c2dc; --nav-300: #7e93bd;
  --nav-400: #4e679a; --nav-500: #2f4a7a; --nav-600: #1f3b68; --nav-700: #162e54;
  --nav-800: #0f2240; --nav-900: #091628;
}

html, body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: #f8f9fb;
  color: #1a1d24;
  font-feature-settings: 'ss01', 'cv11';
}
::selection { background: rgba(31,166,213,0.20); color: #091628; }
.scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #dde1e8; border-radius: 3px; }
.fade-in { animation: fadeIn 200ms cubic-bezier(0.16,1,0.3,1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.mono { font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }

/* ---------- compact spreadsheet table ---------- */
.sheet-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
}
.sheet-wrap::-webkit-scrollbar { width: 8px; height: 8px; }
.sheet-wrap::-webkit-scrollbar-thumb { background: #dde1e8; border-radius: 4px; }

table.sheet {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  line-height: 1.25;
  min-width: 100%;
}
table.sheet thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--ink-50);
  color: var(--ink-500);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
  padding: 5px 8px;
  height: 26px;
  border-bottom: 1px solid var(--ink-200);
  border-right: 1px solid var(--ink-100);
}
table.sheet tbody td {
  height: 26px;
  padding: 3px 8px;
  white-space: nowrap;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--ink-100);
  border-right: 1px solid var(--ink-100);
  color: var(--ink-800);
}
table.sheet tbody tr:nth-child(even) td { background: #fbfcfd; }
table.sheet tbody tr:hover td { background: rgba(236,248,253,0.7); }
table.sheet td.cell-empty { color: var(--ink-300); }
table.sheet td.cell-mono { font-family: ui-monospace, 'Cascadia Code', Menlo, Consolas, monospace; font-size: 11.5px; }

/* kind pills — compact */
.pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9999px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.5;
  vertical-align: middle;
}
.pill-new { background: #d1fae5; color: #047857; }
.pill-duplicate { background: #fef3c7; color: #b45309; }
.pill-blacklisted { background: #dc2626; color: #ffffff; }
.pill-other { background: var(--ink-100); color: var(--ink-500); }