/* Monolith CRM — design system.
   Tokens, type and spacing from the Claude Design canvas
   (Monolith Sales CRM v2.dc.html): a warm stone canvas with a single amber
   accent, replacing v1's cool grey and blue. The canvas is desktop-first at
   1600×1000; the media queries at the bottom are the mobile adaptation.

   The token NAMES are unchanged from v1 on purpose. Every screen already reads
   them, so the palette moves in one place rather than in thirty files. */

:root {
  --sf: #FFFFFF; --sf2: #FBFAF7; --sf3: #FDFCFA; --cv: #F7F6F2;
  --fill: #F1EFE9; --hover: #F4F2EC; --ln: #E5E1D8; --ln2: #EDEAE2; --ln3: #F3F1EB;
  --av: #EAE6DC; --sb: #D8D3C6;
  --tx: #292524; --tx2: #44403C; --tx3: #57534E;
  --mu: #78716C; --mu2: #8A827A; --ft: #A8A29E; --ft2: #C7C1B9;
  --ac: #B0790E; --ach: #96660A; --acs: #FEF6E7; --acl: #DDB35C;
  /* The one non-amber hue the canvas uses, for "in negotiation" and chart fills */
  --ac2: #2C5A8C; --ac3: #4A7CAF; --ac4: #90ADCB; --ac5: #E8EEF6;
  --pos: #1A7A4A; --pos2: #218B57; --pos3: #2E9C66; --poss: #E8F4EC; --posh: #F1F8F4;
  --wa: #B0790E; --was: #FEF6E7; --wal: #DDB35C;
  --ne: #B3261E; --nes: #FBEAE8; --neh: #FDF4F3;
  --sg1: #CFC9BE; --sg2: #A8A29E;
  /* WhatsApp green — the canvas marks that channel in its own colour */
  --wapp: #1D9E4C;
  /* The sidebar is the same near-black in both themes, as the canvas has it */
  --side: #171412; --side-panel: #242019; --side-line: #302B23;
  --side-tx: #F5F1E8; --side-mu: #A69F91; --side-item: #CFC8BB; --side-on: #F0C36A;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --side-w: 232px;
  --shell-max: 1512px;
}

html[data-crm="dark"] {
  --sf: #242019; --sf2: #2A251D; --sf3: #201C16; --cv: #171412;
  --fill: #2E2921; --hover: #363026; --ln: #403A30; --ln2: #352F27; --ln3: #2C271F;
  --av: #3A342B; --sb: #4A4338;
  --tx: #F5F1E8; --tx2: #DED8CB; --tx3: #C2BBAD;
  --mu: #A69F91; --mu2: #948D80; --ft: #7C766B; --ft2: #5C574E;
  --ac: #C9911B; --ach: #DBA22C; --acs: #3B2F13; --acl: #8A6A1E;
  --ac2: #8FB3DD; --ac3: #7099C9; --ac4: #4E6E96; --ac5: #233042;
  --pos: #6BBF8A; --pos2: #57AE77; --pos3: #479C66; --poss: #1F3328; --posh: #1A2C22;
  --wa: #C9911B; --was: #3B2F13; --wal: #8A6A1E;
  --ne: #E5766B; --nes: #3B2422; --neh: #2F1D1C;
  --sg1: #554F45; --sg2: #3E3931;
  --wapp: #4FBF6B;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--cv); }
body {
  font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 14px; color: var(--tx); -webkit-font-smoothing: antialiased;
}
input, button, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--ac); text-decoration: none; }
::selection { background: var(--ac5); }
[hidden] { display: none !important; }

[data-scroll]::-webkit-scrollbar { width: 10px; height: 10px; }
[data-scroll]::-webkit-scrollbar-thumb { background: var(--sb); border-radius: 6px; border: 3px solid var(--cv); }

@keyframes slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ------------------------------------------------------------------ shell */
.app { display: flex; height: 100dvh; overflow: hidden; background: var(--cv); }

/* ---- the left rail. Same near-black in both themes, as the canvas has it. */
.side {
  flex: none; width: var(--side-w); background: var(--side); color: var(--side-tx);
  display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
}
.side-brand { padding: 22px 20px 18px; line-height: 0; }
.side-brand img { display: block; width: auto; height: 30px; max-width: 100%; }
.side-fy { position: relative; margin: 0 20px 16px; }
.side-fy select {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0;
  cursor: pointer; font: inherit;
  /* The rail is near-black in BOTH themes, so this select inherits near-white
     text wherever it sits. The dropdown the browser opens is not ours to style
     — it follows the page's colour-scheme — so in light mode it came up white
     and the options were white on white. Pinning the scheme and the option
     colours here makes the list readable in either theme. */
  color-scheme: dark;
  color: var(--side-tx);
  background: var(--side-panel);
}
.side-fy select option {
  background: var(--side-panel);
  color: var(--side-tx);
}
.side-fy-face {
  display: flex; align-items: center; gap: 8px; pointer-events: none;
  background: var(--side-panel); border: 1px solid #403A30; border-radius: 8px; padding: 8px 12px;
}
.side-fy-face > div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.side-fy-face b { font-size: 13px; font-weight: 700; }
.side-fy-face span { font-size: 11px; color: var(--side-mu); }
.side-fy-face .caret { font-size: 10px; color: var(--side-mu); }
.side-fy:hover .side-fy-face { border-color: #554C3D; }
.side-nav { display: flex; flex-direction: column; gap: 2px; padding: 0 12px; }
.side-nav button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 8px; background: none;
  color: var(--side-item); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; text-align: left;
}
.side-nav button:hover { background: var(--side-panel); color: var(--side-tx); }
.side-nav button.on { background: var(--side-panel); color: var(--side-on); }
.side-nav .ico { width: 18px; height: 18px; flex: none; display: flex; }
.side-nav .ico svg { width: 18px; height: 18px; }
.side-nav .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav .badge {
  font-size: 11px; font-weight: 700; background: var(--ac); color: #FFF;
  border-radius: 10px; padding: 1px 8px;
}
.side-nav button.on .badge { background: var(--side-on); color: var(--side); }
.side-sep { height: 1px; background: var(--side-line); margin: 9px 12px; }
.side-foot {
  margin-top: auto; padding: 14px 20px calc(14px + var(--safe-b));
  border-top: 1px solid var(--side-line); display: flex; flex-direction: column; gap: 11px;
}
.side-me {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: inherit; text-align: left;
}
.side-me .avatar { background: var(--side-panel); border: 1px solid #403A30; color: var(--side-tx); width: 34px; height: 34px; }
.side-me > span { display: flex; flex-direction: column; min-width: 0; }
.side-me b { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-me > span > span { font-size: 11px; color: var(--side-mu); }
.side-me:hover b { color: var(--side-on); }
.side-theme { display: flex; gap: 4px; background: var(--side-panel); border-radius: 7px; padding: 3px; }
.side-theme button {
  flex: 1; border: 0; background: none; color: var(--side-mu); font: inherit; font-size: 12px;
  padding: 5px 0; border-radius: 5px; cursor: pointer;
}
.side-theme button.on { background: var(--side); color: var(--side-on); font-weight: 600; }

/* ---- the content column */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  flex: none; display: flex; align-items: center; gap: 14px;
  padding: 12px 28px; background: var(--sf); border-bottom: 1px solid var(--ln);
}
.topbar-title { margin: 0; font-size: 19px; font-weight: 700; white-space: nowrap; letter-spacing: -.01em; }
.topbar-search { flex: 1; max-width: 420px; min-width: 120px; }
.topbar-search input {
  width: 100%; padding: 9px 14px; border: 1px solid var(--ln); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--fill); color: var(--tx); outline: none;
}
.topbar-search input:focus { border-color: var(--acl); background: var(--sf); }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* ---- buttons, avatars, segmented controls — used on every screen */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; padding: 0 15px; border: 1px solid var(--ln); border-radius: 8px;
  background: var(--sf); color: var(--tx); font: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.btn:hover { background: var(--fill); }
.btn.primary { border-color: var(--ac); background: var(--ac); color: #FFF; }
.btn.primary:hover { background: var(--ach); border-color: var(--ach); }
.btn.on { border-color: var(--ac); background: var(--acs); color: var(--ach); }
.btn.danger { color: var(--ne); }
.btn.danger:hover { background: var(--neh); }
.btn.danger.armed { background: var(--ne); border-color: var(--ne); color: #FFF; }
.btn.sm { height: 30px; padding: 0 12px; font-size: 13px; }
.btn.xs { height: 27px; padding: 0 9px; font-family: var(--mono); font-size: 10px; border-radius: 6px; }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn.pos { color: var(--pos); }
.btn.pos:hover { background: var(--posh); }

.avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  background: var(--av); color: var(--tx3);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.avatar.lg { width: 46px; height: 46px; font-size: 16px; }

.segmented {
  display: inline-flex; align-items: center; height: 36px;
  border: 1px solid var(--ln); border-radius: 8px; overflow: hidden; background: var(--sf);
}
.segmented > span.seg-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ft);
  padding: 0 9px; border-right: 1px solid var(--ln); align-self: stretch; display: flex; align-items: center;
}
.segmented button {
  height: 100%; padding: 0 13px; border: 0; background: none; color: var(--mu);
  font: inherit; font-size: 13px; cursor: pointer;
}
.segmented button:hover { color: var(--tx); }
.segmented button.on { background: var(--acs); color: var(--ach); font-weight: 600; }
.segmented select { height: 100%; border: 0; background: none; color: var(--tx); font: inherit; font-size: 13px; padding: 0 8px; cursor: pointer; }

/* ---- reminders */
.bell-wrap { position: relative; }
.bell {
  position: relative; width: 38px; height: 38px; border-radius: 8px;
  border: 1px solid var(--ln); background: var(--sf); color: var(--tx);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.bell:hover { background: var(--fill); }
.bell.on { border-color: var(--ac); color: var(--ac); }
.bell svg { width: 17px; height: 17px; }
.bell .dot {
  position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--ne); color: #FFF; font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.bell-panel {
  position: absolute; top: 46px; right: 0; z-index: 45; width: 380px; max-width: 88vw;
  background: var(--sf); border: 1px solid var(--ln); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden;
}
.bell-head { display: flex; justify-content: space-between; align-items: baseline; padding: 13px 16px 10px; border-bottom: 1px solid var(--ln); }
.bell-head b { font-size: 14px; }
.bell-head button { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--ac); cursor: pointer; }
.bell-row { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ln2); align-items: flex-start; }
.bell-row:last-child { border-bottom: 0; }
.bell-row > .dot { width: 7px; height: 7px; border-radius: 50%; margin-top: 6px; flex: none; }
.bell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bell-body b { font-size: 14px; font-weight: 600; }
.bell-body > span { font-size: 12px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bell-acts { display: flex; flex-direction: column; gap: 6px; flex: none; }
.bell-acts button {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ln); background: var(--sf);
  color: var(--mu); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.bell-acts button:hover { color: var(--ac); border-color: var(--acl); }
.bell-empty { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--mu); }

.scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 22px 26px 40px; }
.screen { display: flex; flex-direction: column; gap: 22px; max-width: 1460px; width: 100%; margin-inline: auto; }
.screen.narrow { max-width: 1120px; }
.screen.tight { max-width: 1000px; }

/* ------------------------------------------------------------------ pieces */
.card { background: var(--sf); border: 1px solid var(--ln); border-radius: 8px; }
.card.pad { padding: 18px 20px; }
.card-head {
  padding: 14px 20px; border-bottom: 1px solid var(--ln2);
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.card-head h2 { margin: 0; font-size: 14px; font-weight: 600; }
.card-head p { margin: 0; font-size: 12px; color: var(--mu2); }
.eyebrow {
  margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--ft);
  text-transform: uppercase;
}
.muted { color: var(--mu2); }
.faint { color: var(--ft); }
.small { font-size: 12px; }
.tnum { font-variant-numeric: tabular-nums; }
.grow { flex: 1; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.section { display: flex; flex-direction: column; gap: 12px; }
.grid { display: grid; gap: 12px; }
.g5 { grid-template-columns: repeat(5, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g2 { grid-template-columns: 1fr 1fr; }
.split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 14px; align-items: start; }

.fy-strip {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--sf); border: 1px solid var(--ln); border-radius: 8px; padding: 13px 16px;
}
.fy-strip .name { font-size: 15px; font-weight: 600; }
.progress-track { position: relative; flex: 1; max-width: 300px; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.progress-track > i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--ac2), var(--ac)); }
.progress-track .ticks { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.progress-track .ticks span + span { border-left: 1px solid var(--sf); }
.chip { font-size: 12px; color: var(--tx3); background: var(--fill); padding: 4px 10px; border-radius: 999px; }

/* KPI cards */
.kpi {
  background: var(--sf); border: 1px solid var(--ln); border-radius: 8px;
  padding: 15px 16px 0; display: flex; flex-direction: column; gap: 7px; overflow: hidden;
}
.kpi .label { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--mu2); }
.kpi .value { font-size: 27px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.05; }
.kpi .note { font-size: 12px; color: var(--ft); }
.kpi .rail { height: 3px; margin: 13px -16px 0; background: var(--fill); }
.kpi .rail > i { display: block; height: 100%; }
.kpi.target { padding: 15px 16px; gap: 9px; }
.kpi.target .label { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--mu2); }
.kpi.target .value { font-size: 24px; letter-spacing: -.02em; }
.kpi.target .bar { height: 5px; border-radius: 3px; background: var(--fill); overflow: hidden; }
.kpi.target .bar > i { display: block; height: 100%; border-radius: 3px; }
.kpi.plain { padding: 14px 16px; gap: 6px; }
.kpi.plain .label { font-family: inherit; font-size: 12px; letter-spacing: 0; text-transform: none; }
.kpi.plain .value { font-size: 22px; letter-spacing: -.02em; }

.pill {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 500; width: fit-content; white-space: nowrap;
}

/* charts */
.chart { position: relative; height: 196px; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--ln); }
.chart.short { height: 168px; }
.chart-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.chart-col .cap { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--mu); }
.chart-col .bar { width: 100%; max-width: 34px; border-radius: 3px 3px 0 0; }
.chart-target { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--wal); }
.chart-labels { display: flex; gap: 8px; margin-top: 8px; }
.chart-labels span { flex: 1; text-align: center; font-family: var(--mono); font-size: 9px; color: var(--ft); }
.legend { display: flex; gap: 16px; font-size: 12px; color: var(--mu2); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; }
.dashline { width: 14px; height: 2px; background: var(--wal); }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { position: relative; width: 148px; height: 148px; flex: none; border-radius: 50%; }
.donut .hole {
  position: absolute; inset: 34px; border-radius: 50%; background: var(--sf);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.donut .hole b { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.donut .hole span { font-size: 10px; color: var(--mu2); }
.donut-legend { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 6px; }
.donut-legend button {
  display: flex; align-items: center; gap: 8px; font-size: 12px;
  border: none; background: transparent; padding: 2px 0; text-align: left;
}
.donut-legend button:hover { color: var(--ac); }
.donut-legend .name { flex: 1; color: var(--tx3); }
.donut-legend .n { color: var(--mu2); font-variant-numeric: tabular-nums; }

.meter { position: relative; height: 8px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.meter > i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }

/* Status editable straight from the list. Shaped like the pill it replaces so
   the row still reads as a status, not as a form. */
select.stage-select {
  border: 1px solid transparent; border-radius: 999px; padding: 3px 6px 3px 9px;
  font-size: 11px; font-weight: 500; cursor: pointer; outline: none;
  max-width: 100%; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 9px top 50%, right 5px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  padding-right: 20px;
}
select.stage-select:hover { border-color: var(--acl); }
select.stage-select:disabled { cursor: default; opacity: 1; }
select.stage-select option { background: var(--sf); color: var(--tx); font-weight: 400; }

/* A native dropdown is drawn by the browser, not by this stylesheet: it takes
   its background from the page's colour-scheme and its text from whatever the
   select inherited. Those two can disagree, and when they do the list is
   unreadable rather than merely ugly. Naming both for every select closes it
   once instead of one control at a time. */
select option { background: var(--sf); color: var(--tx); }

/* data grids */
.grid-head, .grid-row { display: grid; gap: 12px; align-items: center; }
.grid-head {
  padding: 9px 20px; background: var(--sf2); border-bottom: 1px solid var(--ln2);
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ft);
}
.grid-head button { border: none; background: none; padding: 0; font: inherit; color: inherit; text-align: left; }
.grid-head button:hover { color: var(--tx); }
.grid-head button.sorted { color: var(--ac); }
.grid-row { padding: 12px 18px; border-bottom: 1px solid var(--ln3); }
.grid-row.click { cursor: pointer; }
.grid-row.click:hover { background: var(--sf2); }
.grid-row:last-child { border-bottom: none; }
.r { text-align: right; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.c-tags { display: none; }   /* phone-only summary line */
.stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stack b { font-size: 13px; font-weight: 600; }
.stack span { font-size: 11px; color: var(--ft); }
.empty { padding: 40px; text-align: center; font-size: 13px; color: var(--ft); }
.priority-flag { width: 5px; height: 26px; border-radius: 3px; flex: none; }

.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.search {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 11px;
  border: 1px solid var(--ln); border-radius: 6px; background: var(--sf); width: 260px;
}
.search span { font-family: var(--mono); font-size: 11px; color: var(--ft); }
.search input { border: none; outline: none; background: transparent; flex: 1; min-width: 0; font-size: 13px; }
select.field, input.field {
  height: 32px; padding: 0 9px; border: 1px solid var(--ln); border-radius: 6px;
  background: var(--sf); outline: none; font-size: 12px; color: var(--tx);
}
.filter-btn {
  height: 32px; padding: 0 12px; border-radius: 6px; font-size: 12px;
  border: 1px solid var(--ln); background: var(--sf); color: var(--tx3);
}
.filter-btn:hover { background: var(--hover); }
.filter-btn.on { border-color: var(--ac); background: var(--acs); color: var(--ach); }

/* follow-up cards */
.follow-card { display: flex; gap: 18px; align-items: flex-start; padding: 16px 18px; }
.follow-date {
  width: 54px; height: 54px; flex: none; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.follow-date .mon { font-size: 10px; font-family: var(--mono); letter-spacing: .06em; }
.follow-date .day { font-size: 19px; font-weight: 600; line-height: 1; }
.follow-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.follow-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }

/* export drawer */
.export-bar { flex: none; background: var(--sf2); border-bottom: 1px solid var(--ln); padding: 16px 26px; }
.export-bar > * { max-width: 1460px; margin-inline: auto; width: 100%; }
.export-grid {
  display: grid; grid-template-columns: 1.2fr 92px 74px 74px 1fr; gap: 1px;
  background: var(--ln); border: 1px solid var(--ln); border-radius: 8px; overflow: hidden;
}
.export-grid > * { background: var(--sf); padding: 10px 12px; font-size: 13px; }
.export-grid .hd { background: var(--fill); padding: 8px 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--mu2); }
.export-grid .hd.primary { background: var(--acs); color: var(--ach); text-align: center; font-weight: 500; }
.export-grid .hd.mid { text-align: center; }
.export-grid .cell { display: flex; justify-content: center; padding: 6px; }
.export-grid .cell button { width: 28px; height: 26px; border: 1px solid var(--ln); border-radius: 5px; background: var(--sf); font-size: 12px; color: var(--tx3); padding: 0; }
.export-grid .cell button.primary { width: auto; height: 26px; padding: 0 10px; border-color: var(--ac); background: var(--ac); color: #FFF; font-size: 11px; font-weight: 500; }
.export-grid .cell button:hover { background: var(--acs); border-color: var(--acl); }
.export-grid .cell button.primary:hover { background: var(--ach); }

/* right-hand drawer form */
/* A centred dialog, not a panel pinned to one edge. A form this tall reads
   badly hard against the right of a wide monitor — the eye has to cross the
   whole screen from the record you clicked to the fields describing it. */
.drawer-back {
  position: fixed; inset: 0; background: rgba(26,26,24,.4); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 28px;
}
.drawer {
  width: 940px; max-width: 100%; max-height: 100%; background: var(--sf);
  border: 1px solid var(--ln); border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column; animation: dialog-in .16s ease-out;
  box-shadow: 0 24px 60px -18px rgba(26,26,24,.45);
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.drawer-head { flex: none; padding: 18px 22px 14px; border-bottom: 1px solid var(--ln2); display: flex; align-items: flex-start; gap: 12px; }
.drawer-head b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.drawer-head span { font-size: 12px; color: var(--mu2); }
.drawer-body {
  flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px 18px; align-content: start;
}
.drawer-foot { flex: none; padding: 14px 22px calc(14px + var(--safe-b)); border-top: 1px solid var(--ln2); display: flex; align-items: center; gap: 8px; }
.f-label { display: flex; flex-direction: column; gap: 5px; }
.f-label > span { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ft); }
.f-label input, .f-label select {
  height: 36px; padding: 0 10px; border: 1px solid var(--ln); border-radius: 6px;
  background: var(--sf2); outline: none; font-size: 13px; color: var(--tx); width: 100%;
}
.f-label textarea {
  min-height: 86px; padding: 9px 10px; border: 1px solid var(--ln); border-radius: 6px;
  background: var(--sf2); outline: none; font-size: 13px; font-family: inherit;
  resize: vertical; line-height: 1.5; color: var(--tx); width: 100%;
}
.f-label input:focus, .f-label select:focus, .f-label textarea:focus { border-color: var(--acl); }
.f-label input[readonly] { background: var(--fill); color: var(--mu2); }
.f-label.full { grid-column: 1 / -1; }
.f-error { grid-column: 1 / -1; font-size: 12px; color: var(--ne); background: var(--nes); padding: 8px 11px; border-radius: 6px; }
.history-row { display: flex; gap: 10px; font-size: 12px; }
.history-row .kind { font-family: var(--mono); font-size: 10px; color: var(--ft); width: 42px; flex: none; padding-top: 2px; }

/* ---------------------------------------------------------------- importer */
/* A centred sheet rather than the side drawer: the review step needs to show a
   table, which 580px cannot do honestly. */
.sheet-back {
  position: fixed; inset: 0; background: rgba(26,26,24,.34); z-index: 55;
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.sheet {
  width: min(980px, 100%); max-height: 92vh; background: var(--sf);
  border: 1px solid var(--ln); border-radius: 12px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 60px -28px rgba(26,26,24,.5);
}
.sheet-head { flex: none; padding: 18px 22px 14px; border-bottom: 1px solid var(--ln2); display: flex; align-items: flex-start; gap: 12px; }
.sheet-head b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.sheet-head span { font-size: 12px; color: var(--mu2); }
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px; }
.sheet-foot { flex: none; padding: 14px 22px calc(14px + var(--safe-b)); border-top: 1px solid var(--ln2); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.steps { display: flex; gap: 8px; margin-bottom: 18px; }
.step {
  flex: 1; text-align: center; padding: 8px 6px; border-radius: 7px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  background: var(--fill); color: var(--mu2);
}
.step.on { background: var(--acs); color: var(--ach); font-weight: 500; }
.step.done { background: var(--poss); color: var(--pos); }

.dropzone {
  border: 2px dashed var(--ln); border-radius: 10px; padding: 34px 20px;
  text-align: center; cursor: pointer; background: var(--sf2);
}
.dropzone:hover, .dropzone.over { border-color: var(--acl); background: var(--acs); }
.dropzone .big { font-size: 26px; margin-bottom: 8px; }

.paste-area {
  width: 100%; min-height: 150px; padding: 11px 12px; border: 1px solid var(--ln);
  border-radius: 8px; background: var(--sf2); outline: none; color: var(--tx);
  font-family: var(--mono); font-size: 12px; line-height: 1.7; resize: vertical;
}
.paste-area:focus { border-color: var(--acl); }

.map-row {
  display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--ln3);
}
.map-row .sample { font-size: 12px; color: var(--mu2); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--ln2); border-radius: 8px; }
.preview-wrap table { width: 100%; border-collapse: collapse; font-size: 12px; }
.preview-wrap th {
  position: sticky; top: 0; background: var(--sf2); text-align: left; padding: 8px 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ft);
  border-bottom: 1px solid var(--ln2); white-space: nowrap;
}
.preview-wrap td { padding: 7px 10px; border-bottom: 1px solid var(--ln3); white-space: nowrap; }
.preview-wrap tr.bad td { background: var(--nes); color: var(--ne); }

/* toggles */
.toggle { width: 38px; height: 22px; flex: none; border: none; border-radius: 999px; padding: 2px; display: flex; align-items: center; background: var(--ft2); }
.toggle.on { background: var(--ac); justify-content: flex-end; }
.toggle i { width: 18px; height: 18px; border-radius: 50%; background: var(--sf); display: block; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.setting-row { display: flex; align-items: center; gap: 14px; padding: 13px 20px; border-bottom: 1px solid var(--ln3); }
.setting-row .txt { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.setting-row .txt b { font-size: 13px; font-weight: 600; }
.setting-row .txt span { font-size: 12px; color: var(--mu2); }
.setting-row input.num {
  width: 104px; height: 32px; padding: 0 10px; border: 1px solid var(--ln); border-radius: 6px;
  background: var(--sf2); outline: none; font-size: 13px; text-align: right;
  font-variant-numeric: tabular-nums; color: var(--tx);
}
.setting-row input.num:disabled { background: var(--fill); color: var(--ft); }
.theme-card {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px; border: 1px solid var(--ln); border-radius: 9px; background: var(--sf); text-align: left;
}
.theme-card.on { border-color: var(--ac); background: var(--acs); }
.theme-swatch { width: 100%; height: 64px; border-radius: 6px; padding: 8px; display: flex; flex-direction: column; gap: 6px; }

/* sign-in */
.login { position: fixed; inset: 0; z-index: 80; background: var(--cv); display: flex; align-items: center; justify-content: center; padding: 40px; overflow-y: auto; }
.login-card { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 900px; background: var(--sf); border: 1px solid var(--ln); border-radius: 12px; overflow: hidden; }
.login-left { padding: 38px 36px; display: flex; flex-direction: column; gap: 20px; border-right: 1px solid var(--ln2); }
.login-left h1 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.02em; }
.login-left p { margin: 0; font-size: 13px; color: var(--mu); line-height: 1.55; }
.login-logo { line-height: 0; }
.login-logo img { display: block; height: 44px; width: auto; max-width: 100%; }

/* The sign-in card follows the viewer's theme, so it carries both logo files
   and hides one. Qualified by html[...] and by element on purpose: a bare
   .only-dark loses to `.login-logo img { display: block }` and both appear —
   which is exactly what happened when these rules were once dropped. */
html:not([data-crm="dark"]) img.only-dark { display: none; }
html[data-crm="dark"] img.only-light { display: none; }
.login-left input { height: 38px; padding: 0 11px; border: 1px solid var(--ln); border-radius: 6px; background: var(--sf2); outline: none; font-size: 13px; color: var(--tx); }
.login-left input[type=password] { letter-spacing: .3em; }
.login-left button.primary { height: 40px; justify-content: center; font-size: 14px; }
.login-right { padding: 32px 30px; background: var(--sf2); display: flex; flex-direction: column; gap: 11px; }
.account {
  display: flex; flex-direction: column; gap: 9px; padding: 14px 15px;
  border: 1px solid var(--ln); border-radius: 9px; background: var(--sf); text-align: left;
}
.account:hover { border-color: var(--acl); }
.account.on { border-color: var(--ac); }
.login-err { font-size: 12px; color: var(--ne); background: var(--nes); padding: 8px 11px; border-radius: 6px; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--tx); color: var(--cv); padding: 10px 16px; border-radius: 8px;
  font-size: 13px; z-index: 60; animation: toast-in .16s ease-out;
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); max-width: 90vw; text-align: center;
}

.bottom-nav { display: none; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) {
  .g5 { grid-template-columns: repeat(3, 1fr); }
  .split { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .g5, .g4, .g2 { grid-template-columns: repeat(2, 1fr); }
  .login-card { grid-template-columns: 1fr; }
  .login-left { border-right: none; border-bottom: 1px solid var(--ln2); }
  .drawer-body { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  /* The canvas is a desktop layout. On a phone the same components stack, the
     tab strip becomes a bottom bar, and wide grids turn into stacked rows. */
  .app { height: auto; min-height: 100dvh; overflow: visible; }
  .main { overflow: visible; }
  .scroll { overflow: visible; padding: 16px 14px calc(80px + var(--safe-b)); }
  /* The rail costs a third of a phone screen. Its items are the bottom bar. */
  .side { display: none; }
  .topbar { padding: 10px 14px; gap: 10px; flex-wrap: wrap; }
  .topbar-title { font-size: 17px; }
  .topbar-search { order: 3; flex-basis: 100%; max-width: none; }
  .topbar-right { gap: 8px; }
  .bell-panel { right: -60px; }
  .screen { gap: 16px; }

  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--sf); border-top: 1px solid var(--ln);
    padding-bottom: var(--safe-b); overflow-x: auto; scrollbar-width: none;
  }
  .bottom-nav::-webkit-scrollbar { display: none; }
  .bottom-nav button {
    flex: 1 0 auto; min-width: 66px; height: 58px; border: none; background: none;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 10px; color: var(--mu2);
  }
  .bottom-nav button.on { color: var(--ac); }
  .bottom-nav svg { width: 20px; height: 20px; }

  .grid.g5, .grid.g4 { grid-template-columns: repeat(2, 1fr); }
  .kpi .value { font-size: 21px; }
  .kpi.target .value, .kpi.plain .value { font-size: 19px; }

  /* Numeric tables keep their shape and scroll sideways — stacking a 8-column
     month grid makes it unreadable. */
  .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .scroll-x .grid-head, .scroll-x .grid-row { min-width: 660px; }

  /* Record lists become a real card per row, laid out by named areas so the
     cells land where a thumb expects them rather than in DOM order. */
  .stacked .grid-head { display: none; }
  .stacked .grid-row {
    grid-template-columns: 5px 1fr auto !important;
    grid-template-areas:
      "flag name  value"
      "flag meta  meta"
      "flag tags  tags";
    gap: 3px 10px; padding: 13px 14px; align-items: start;
  }
  .stacked .grid-row > .m-hide { display: none; }
  .stacked .grid-row > .r { text-align: left; }
  .stacked .c-flag { grid-area: flag; height: 100%; min-height: 34px; }
  .stacked .c-name { grid-area: name; }
  .stacked .c-value { grid-area: value; text-align: right !important; font-weight: 600; }
  .stacked .c-meta { grid-area: meta; font-size: 12px; color: var(--mu); }
  .stacked .c-tags {
    grid-area: tags; display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-top: 4px; font-size: 12px; color: var(--mu2);
  }

  .export-grid { grid-template-columns: 1fr auto auto auto; }
  .export-grid .rows-col { display: none; }
  .search { width: 100%; }
  .drawer { width: 100%; }
  .follow-card { flex-wrap: wrap; }
  .toast { bottom: calc(70px + var(--safe-b)); }
}

@media print {
  .appbar, .tabs, .bottom-nav, .export-bar, .toolbar, .btn { display: none !important; }
  .app, .scroll { height: auto; overflow: visible; }
  .card { break-inside: avoid; }
}

/* ---------------------------------------------------------------- board view
   Pipeline and Invoices share this. Columns scroll sideways rather than
   squeezing: eight readable columns beat eight unreadable ones. */
/* Boards want room, but not the whole of an ultrawide monitor: past this the
   content stops stretching and stays centred, like every other screen. */
.screen.wide { max-width: 1760px; }
.board { display: flex; gap: 14px; align-items: flex-start; overflow-x: auto; padding-bottom: 6px; }
.board-col {
  /* Six open stages have to fit a laptop without a scrollbar; the eighth column
     appears only when Won and Lost are asked for, and then it may scroll. */
  flex: 1 1 232px; min-width: 232px; max-width: 340px;
  background: var(--sf2); border: 1px solid var(--ln); border-radius: 8px;
  display: flex; flex-direction: column; max-height: calc(100dvh - 300px);
}
.board-col.over { border-color: var(--ac); background: var(--acs); }
.board-head {
  flex: none; padding: 11px 13px 10px; border-top: 3px solid var(--ln);
  border-bottom: 1px solid var(--ln2); border-radius: 7px 7px 0 0;
  display: flex; flex-direction: column; gap: 2px; background: var(--sf);
}
.board-head .name { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--tx3); }
.board-head .val { font-size: 13px; font-weight: 600; color: var(--mu); }
.board-cards { flex: 1; min-height: 60px; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 9px; }
.board-card {
  background: var(--sf); border: 1px solid var(--ln); border-radius: 7px;
  padding: 11px 12px; display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; min-width: 0;
}
.board-card:hover { border-color: var(--acl); }
.board-card.dragging { opacity: .4; }
.board-card b { font-size: 13px; font-weight: 600; min-width: 0; }
.board-empty { padding: 14px; text-align: center; font-size: 12px; color: var(--ft2); }
.avatar.xs { width: 21px; height: 21px; font-size: 9px; }

/* ------------------------------------------------------------- record page */
.crumbs { display: flex; align-items: center; gap: 10px; margin-bottom: -8px; }
.crumb-back {
  border: 1px solid var(--ln); background: var(--sf); color: var(--tx2);
  height: 28px; padding: 0 11px; border-radius: 6px; font-size: 12px; cursor: pointer;
}
.crumb-back:hover { background: var(--hover); color: var(--tx); }
.record-head { padding: 20px 22px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.record-title { display: flex; flex-direction: column; gap: 9px; min-width: 240px; }
.record-title h1 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.record-money { display: flex; flex-direction: column; gap: 2px; }
.record-money .k { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; color: var(--mu2); }
.record-money .v { font-size: 25px; font-weight: 600; letter-spacing: -.025em; line-height: 1.05; }
.record-owner { display: flex; align-items: center; gap: 10px; }
.record-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; align-items: start; }
.facts { padding: 6px 20px 16px; display: flex; flex-direction: column; }
.fact { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ln3); }
.fact:last-child { border-bottom: none; }
.fact .k { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ft); flex: none; width: 118px; }
.fact .v, .fact a { font-size: 13px; color: var(--tx2); min-width: 0; overflow-wrap: anywhere; }
.record-notes h2 { margin: 0 0 7px; font-size: 14px; font-weight: 600; }
.record-notes p { margin: 0; font-size: 13px; color: var(--tx2); line-height: 1.65; white-space: pre-wrap; }
.form-grid {
  padding: 18px 20px; display: grid; gap: 14px; align-content: start;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.trail { padding: 14px 20px 18px; display: flex; flex-direction: column; gap: 11px; }

@media (max-width: 720px) {
  .board { display: flex; flex-direction: column; overflow-x: visible; }
  .board-col { max-width: none; width: 100%; max-height: none; }
  .record-head { gap: 16px; }
  .record-title h1 { font-size: 19px; }
  .fact { flex-direction: column; gap: 3px; }
  .fact .k { width: auto; }
}

/* ---- meters: the canvas's attainment and funnel bars */
.meter { flex: 1; min-width: 60px; height: 7px; border-radius: 4px; background: var(--fill); overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 4px; background: var(--ac); }
.meter.tall { height: 10px; }
.meter.neg > i { background: var(--ne); }
.stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stack > b { font-size: 13px; font-weight: 600; }
.stack > span { font-size: 12px; color: var(--mu2); }
.scroll-x { overflow-x: auto; }

/* ---- reminders on the Follow-ups screen */
.rem-list { display: flex; flex-direction: column; }
.rem-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px; border-bottom: 1px solid var(--ln3);
}
.rem-row:last-child { border-bottom: none; }
.rem-row.click { cursor: pointer; }
.rem-row.click:hover { background: var(--sf2); }
.rem-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.rem-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rem-body b { font-size: 14px; font-weight: 600; }
.rem-body span { font-size: 12px; color: var(--mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-when { font-size: 12px; font-weight: 700; white-space: nowrap; flex: none; }
.rem-tick {
  width: 28px; height: 28px; flex: none; border-radius: 7px; border: 1px solid var(--ln);
  background: var(--sf); color: var(--mu); font: inherit; font-size: 13px; cursor: pointer;
}
.rem-tick:hover { color: var(--pos); border-color: var(--pos); }
.rem-add { display: flex; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--ln2); }
.rem-add input {
  flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid var(--ln); border-radius: 8px;
  font: inherit; font-size: 14px; background: var(--sf); color: var(--tx); outline: none;
}
.rem-add input:focus { border-color: var(--acl); }

/* small action buttons that live on a board card */
.card-act {
  width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--ln); background: var(--sf);
  color: var(--mu); font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
}
.card-act:hover { color: var(--ac); border-color: var(--acl); }
.card-act.pos:hover { color: var(--pos); border-color: var(--pos); }

/* ---- Leads: services panel beside the table, as the canvas has it */
.leads-split { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 14px; align-items: start; }
.svc-panel { overflow: hidden; }
.svc-head {
  padding: 12px 16px; border-bottom: 1px solid var(--ln);
  font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--mu);
}
.svc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 10px 16px; border: 0; border-bottom: 1px solid var(--ln3); background: none;
  font: inherit; font-size: 14px; color: var(--tx2); cursor: pointer; text-align: left;
}
.svc-row:last-child { border-bottom: none; }
.svc-row:hover { background: var(--sf2); }
.svc-row.on { background: var(--acs); color: var(--ach); font-weight: 600; }
.svc-row .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svc-row .n { font-size: 12px; font-weight: 700; color: var(--mu2); flex: none; }
.svc-row.on .n { color: var(--ac); }

/* reach buttons at the end of a lead row */
.reach { display: flex; gap: 6px; justify-content: center; }
.reach-btn {
  width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--ln);
  display: flex; align-items: center; justify-content: center; color: var(--mu); background: var(--sf);
}
.reach-btn svg { width: 15px; height: 15px; }
.reach-btn:hover { border-color: var(--acl); color: var(--ac); }
.reach-btn:first-child:hover { border-color: var(--wapp); color: var(--wapp); }
.reach-btn.off { opacity: .35; cursor: not-allowed; }
.reach-btn.off:hover { border-color: var(--ln); color: var(--mu); }

@media (max-width: 900px) {
  .leads-split { grid-template-columns: 1fr; }
  .svc-panel { display: flex; overflow-x: auto; }
  .svc-panel .svc-head { display: none; }
  .svc-row { border-bottom: none; border-right: 1px solid var(--ln3); white-space: nowrap; }
}

/* ---- the canvas's thin stats strip above the invoice register */
.stat-strip { display: flex; flex-wrap: wrap; padding: 4px 0; }
.stat-strip .stat {
  flex: 1 1 160px; display: flex; flex-direction: column; gap: 3px;
  padding: 14px 20px; border-right: 1px solid var(--ln3);
}
.stat-strip .stat:last-child { border-right: none; }
.stat-strip .k { font-size: 12px; color: var(--mu2); }
.stat-strip .v { font-size: 21px; font-weight: 700; letter-spacing: -.02em; }

/* reminder row actions, inline edit, and the cleared list */
.rem-acts { display: flex; gap: 6px; flex: none; }
.rem-tick.danger:hover { color: var(--ne); border-color: var(--ne); }
.rem-edit {
  flex: 1; min-width: 0; padding: 8px 12px; border: 1px solid var(--acl); border-radius: 7px;
  font: inherit; font-size: 14px; background: var(--sf); color: var(--tx); outline: none;
}
.rem-done { border-top: 1px solid var(--ln2); }
.rem-done > summary {
  padding: 11px 20px; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--mu);
  list-style: none;
}
.rem-done > summary::-webkit-details-marker { display: none; }
.rem-done > summary::before { content: '▸ '; color: var(--ft); }
.rem-done[open] > summary::before { content: '▾ '; }
.rem-done > summary:hover { color: var(--tx); }
.rem-done-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; border-top: 1px solid var(--ln3);
}
.rem-done-row .tick { color: var(--pos); font-size: 13px; flex: none; }
.rem-done-row .rem-body b { font-weight: 500; color: var(--mu); text-decoration: line-through; }

/* the rupee reading under a lakhs field */
.f-hint { font-size: 11px; color: var(--mu2); font-variant-numeric: tabular-nums; }
.f-hint.warn { color: var(--ne); font-weight: 600; }

/* the note at the top of a record form explaining what is required */
.f-guide {
  font-size: 12px; line-height: 1.55; color: var(--mu);
  background: var(--sf2); border: 1px solid var(--ln2); border-radius: 7px; padding: 9px 12px;
}
.f-guide b { color: var(--tx2); }

/* a field that has failed its shape check */
.f-hint.bad { color: var(--ne); font-weight: 600; }
.f-label.bad input, .f-label.bad select { border-color: var(--ne); }

/* ---- bulk selection on the leads list */
.grid-row.picked { background: var(--acs); }
.grid-row input[type=checkbox], .grid-head input[type=checkbox] {
  width: 15px; height: 15px; accent-color: var(--ac); cursor: pointer; margin: 0;
}
.bulk-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 18px; background: var(--acs); border-bottom: 1px solid var(--acl);
}
.bulk-bar b { font-size: 13px; color: var(--ach); }
.bulk-bar select.field { height: 30px; font-size: 13px; }

/* ---- the state of contact, beside the buttons that change it */
.record-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-state {
  display: flex; flex-direction: column; gap: 1px; padding-right: 14px; margin-right: 4px;
  border-right: 1px solid var(--ln);
}
.contact-state .k { font-family: var(--mono); font-size: 10px; letter-spacing: .09em; color: var(--mu2); }
.contact-state .v { font-size: 14px; font-weight: 600; }
.link {
  border: 0; background: none; padding: 0; text-align: left; cursor: pointer;
  font: inherit; font-size: 11px; color: var(--ac); text-decoration: underline;
}
.link:hover { color: var(--ach); }
.trail-card { scroll-margin-top: 16px; }
.trail-card.flash { animation: trail-flash 1.2s ease-out; }
@keyframes trail-flash {
  from { border-color: var(--ac); box-shadow: 0 0 0 3px var(--acs); }
  to   { border-color: var(--ln); box-shadow: none; }
}
.history-row .kind.call { color: var(--pos); font-weight: 700; }

/* the project a lead is for, under the company name it belongs to */
.record-project { font-size: 14px; font-weight: 600; color: var(--ac2); margin-top: -4px; }

/* ---- stage filters on the pipeline, each carrying its own total */
.stage-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.stage-chip {
  display: flex; align-items: baseline; gap: 8px;
  padding: 8px 13px; border: 1px solid var(--ln); border-radius: 9px;
  background: var(--sf); font: inherit; cursor: pointer; text-align: left;
}
.stage-chip:hover { border-color: var(--acl); background: var(--sf2); }
.stage-chip.on { border-color: var(--ac); background: var(--acs); }
.stage-chip .nm { font-size: 13px; font-weight: 600; color: var(--tx2); }
.stage-chip.on .nm { color: var(--ach); }
.stage-chip .n {
  font-size: 11px; font-weight: 700; color: var(--mu2);
  background: var(--fill); border-radius: 9px; padding: 1px 7px;
}
.stage-chip.on .n { background: var(--sf); color: var(--ac); }
.stage-chip .v { font-size: 13px; font-weight: 600; color: var(--tx); }

/* the count riding on a filter button */
.filter-btn { display: inline-flex; align-items: center; gap: 7px; }
.filter-btn .n {
  font-size: 11px; font-weight: 700; color: var(--mu2);
  background: var(--fill); border-radius: 9px; padding: 0 6px;
}
.filter-btn.on .n { background: var(--sf); color: var(--ac); }

/* Exact figures are longer than ₹12.5L was, so the big KPI numbers scale
   rather than overflow their card. */
.kpi .value { font-size: clamp(17px, 2vw, 27px); overflow-wrap: anywhere; }
.stat-strip .v { font-size: clamp(15px, 1.5vw, 21px); }

/* ---- drill-through: the records behind a figure ------------------------- */
/* Any number that can be opened says so on hover rather than by decoration:
   underlining every figure in the app would turn the tables into noise. */
.drillable { cursor: pointer; border-radius: 5px; transition: background .12s, color .12s; }
.drillable:hover { background: var(--acs); color: var(--ach); box-shadow: 0 0 0 3px var(--acs); }
button.drillable { border: 0; background: none; font: inherit; color: inherit; padding: 0; }
button.drillable:hover { background: var(--acs); }

.drill {
  width: min(680px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background: var(--sf); border: 1px solid var(--ln); border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .34); overflow: hidden;
}
.drill-head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 18px; border-bottom: 1px solid var(--ln); background: var(--sf2);
}
.drill-head b { font-size: 15px; }
.drill-body { overflow-y: auto; padding: 6px 0; }
.drill-row {
  display: flex; gap: 12px; align-items: center; width: 100%; text-align: left;
  padding: 11px 18px; border: 0; border-bottom: 1px solid var(--ln2);
  background: none; font: inherit; color: inherit; cursor: pointer;
}
.drill-row:last-child { border-bottom: 0; }
.drill-row:hover { background: var(--sf2); }

/* A figure that can be opened is a real <button>, so the keyboard reaches it.
   The UA's button chrome has to be undone first or the cards stop looking like
   cards. */
button.kpi, button.chart-col, button.stack, button.drill-plain {
  appearance: none; font: inherit; color: inherit; text-align: left;
  cursor: pointer; border: 0; background: none; padding: 0;
}
/* .kpi sets its own padding, border and background; only the UA's font and
   alignment need undoing, not the card itself. */
button.kpi {
  background: var(--sf); border: 1px solid var(--ln);
  padding: 15px 16px 0; transition: border-color .12s;
}
/* On the cards a flood of accent is too much — outline them instead. */
.kpi.drillable:hover, .stack.drillable:hover, .chart-col.drillable:hover {
  background: none; color: inherit; box-shadow: none;
}
.kpi.drillable:hover { border-color: var(--ac); }
.chart-col.drillable:hover .bar { filter: brightness(1.14); }
.chart-col.drillable:hover .cap { color: var(--ac); font-weight: 600; }
.stack.drillable:hover .meter i { filter: brightness(1.14); }
.drillable:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }

/* ---- a picker you can type into ---------------------------------------- */
.picker .picker-wrap { position: relative; }
.picker .picker-wrap > input { width: 100%; }
.picker-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  max-height: 260px; overflow-y: auto;
  background: var(--sf); border: 1px solid var(--ln); border-radius: 8px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .22); padding: 4px;
}
.picker-opt {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  font: inherit; font-size: 13px; color: var(--tx); cursor: pointer;
  padding: 8px 10px; border-radius: 6px;
}
.picker-opt:hover, .picker-opt.on { background: var(--acs); color: var(--ach); }
/* The pinned actions sit above the companies and are ruled off from them. */
.picker-opt.pin { font-weight: 600; color: var(--ac); }
.picker-opt.pin + .picker-opt:not(.pin) { margin-top: 4px; border-top: 1px solid var(--ln2); padding-top: 10px; }
.picker-empty { padding: 11px 10px; font-size: 12px; color: var(--mu); }

/* ---- signing out, from the rail ---------------------------------------- */
/* The name and the sign-out sit on one line: the control is beside the thing
   it acts on, rather than three clicks away on the Settings screen. */
.side-foot-row { display: flex; align-items: stretch; gap: 8px; }
.side-foot-row .side-theme { flex: 1; min-width: 0; }
.side-out {
  flex: none; border: 1px solid var(--side-line); background: var(--side-panel);
  color: var(--side-mu); font: inherit; font-size: 11px; font-weight: 600;
  padding: 5px 9px; border-radius: 6px; cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.side-out:hover { color: var(--side-tx); border-color: #554C3D; }
/* Armed: one more click ends the session, so it says so in the warning colour
   rather than only changing its label. */
.side-out.armed { color: var(--ne); border-color: var(--ne); background: var(--neh); }

/* With no account picker the card has nothing to put in a second column. */
.login-card.solo { grid-template-columns: 1fr; max-width: 460px; }
.login-card.solo .login-left { border-right: 0; }