/* ============================================================
   TSST Leads — design tokens and components.

   The token block is the same one the budget app at the repo root
   uses, deliberately copied rather than shared. These are two
   independent apps that happen to live in one repo: the leads app
   needs its own components (.board, .lead-card, .stage-strip), and
   sharing one stylesheet would mean editing the budget app's file to
   add them. Duplicating ninety lines of colour values is the cheaper
   coupling of the two.
   ============================================================ */

:root {
  color-scheme: light;

  --page:            #f9f9f7;
  --surface-1:       #fcfcfb;
  --surface-2:       #f2f1ed;
  --surface-3:       #e8e7e1;

  --text-primary:    #0b0b0b;
  --text-secondary:  #52514e;
  --text-muted:      #898781;

  --grid:            #e1e0d9;
  --axis:            #c3c2b7;
  --border:          rgba(11, 11, 11, 0.10);
  --border-strong:   rgba(11, 11, 11, 0.18);

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;

  --good:     #0ca30c;
  --warning:  #fab219;
  --serious:  #ec835a;
  --critical: #d03b3b;
  --good-ink: #006300;

  --accent:      #2a78d6;
  --accent-ink:  #ffffff;
  --accent-wash: rgba(42, 120, 214, 0.10);

  --shadow-sm: 0 1px 2px rgba(11,11,11,.06), 0 1px 1px rgba(11,11,11,.04);
  --shadow-md: 0 6px 20px rgba(11,11,11,.10), 0 2px 6px rgba(11,11,11,.06);
  --shadow-lg: 0 24px 60px rgba(11,11,11,.20);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --nav-w: 200px;
  --topbar-h: 58px;

  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --page:            #0d0d0d;
  --surface-1:       #1a1a19;
  --surface-2:       #222220;
  --surface-3:       #2c2c2a;

  --text-primary:    #ffffff;
  --text-secondary:  #c3c2b7;
  --text-muted:      #898781;

  --grid:            #2c2c2a;
  --axis:            #383835;
  --border:          rgba(255, 255, 255, 0.10);
  --border-strong:   rgba(255, 255, 255, 0.18);

  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;

  --good-ink: #0ca30c;

  --accent:      #3987e5;
  --accent-wash: rgba(57, 135, 229, 0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 6px 20px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.65);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--page);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.35rem; }
h2 { font-size: 1.05rem; }
h3 { font-size: .95rem; }

a { color: var(--accent); }

/* ---------- boot screen ---------- */
.boot {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: var(--page);
  padding: 24px;
  overflow-y: auto;
}
.boot-card {
  max-width: 460px; width: 100%;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 34px 30px;
  text-align: center;
  box-shadow: var(--shadow-md);
}
.boot-logo { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.boot-card h1 { margin-bottom: 8px; }
.boot-card p { color: var(--text-secondary); margin: 0 0 4px; font-size: .92rem; }
.boot-body { text-align: left; margin-top: 20px; }
.boot-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.boot-error {
  text-align: left; margin-top: 14px; padding: 10px 12px;
  border-radius: var(--r-md); font-size: .84rem;
  background: color-mix(in srgb, var(--critical) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--critical) 40%, transparent);
}

/* ---------- topbar ---------- */
.app { min-height: 100vh; display: flex; flex-direction: column; }

.topbar {
  height: var(--topbar-h);
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 0 14px;
  background: var(--surface-1);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 650; }
.brand-mark { font-size: 19px; }
.brand-text { white-space: nowrap; }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.icon-btn {
  background: none; border: 1px solid transparent;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center;
  color: var(--text-secondary); font-size: 17px;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-toggle { display: none; }

.sync-pill {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 11px 4px 9px;
  font-size: .78rem; color: var(--text-secondary); font-weight: 550;
}
.sync-pill:hover { border-color: var(--border-strong); }
.sync-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }
.sync-pill.is-live  .sync-dot { background: var(--good); }
.sync-pill.is-busy  .sync-dot { background: var(--warning); }
.sync-pill.is-error .sync-dot { background: var(--critical); }

/* ---------- banner ---------- */
.banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 16px;
  background: var(--accent-wash);
  border-bottom: 1px solid var(--border);
  font-size: .87rem;
}
.banner.warn { background: rgba(250, 178, 25, .16); }
.banner.bad  { background: color-mix(in srgb, var(--critical) 14%, transparent); }

/* ---------- shell ---------- */
.shell { flex: 1 1 auto; display: flex; align-items: stretch; min-height: 0; }

.sidenav {
  flex: 0 0 var(--nav-w);
  width: var(--nav-w);
  background: var(--surface-1);
  border-right: 1px solid var(--border);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  background: none; border: 0; text-align: left;
  padding: 9px 11px; border-radius: var(--r-md);
  color: var(--text-secondary); font-size: .9rem; font-weight: 550;
  width: 100%;
}
.nav-item:hover { background: var(--surface-2); color: var(--text-primary); }
.nav-item.active { background: var(--accent-wash); color: var(--accent); }
.nav-ico { font-size: 15px; width: 20px; text-align: center; }

.content {
  flex: 1 1 auto; min-width: 0;
  padding: 22px 26px 96px;
  max-width: 1240px;
}

/* ---------- generic layout ---------- */
.view-head {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.view-head .spacer { flex: 1 1 auto; }
.view-head p { margin: 3px 0 0; color: var(--text-secondary); font-size: .87rem; }

.grid { display: grid; gap: 14px; }
.g-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

.card {
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.card-head h3 { flex: 1 1 auto; }
.card-sub { color: var(--text-muted); font-size: .78rem; font-weight: 500; }

/* ---------- stat tiles ---------- */
.stat { display: flex; flex-direction: column; gap: 3px; }
.stat-label {
  font-size: .74rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.stat-value { font-size: 1.72rem; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat-note { font-size: .8rem; color: var(--text-secondary); }
.pos { color: var(--good-ink); }
.neg { color: var(--critical); }

/* ---------- the pipeline board ---------- */
/* Desktop: the stages side by side, scrolling sideways if there are
   more than fit. Mobile flips this to one stage at a time — see the
   900px block at the bottom. */
.board {
  display: flex; gap: 14px; align-items: flex-start;
  overflow-x: auto; padding-bottom: 8px;
}
/* Columns share the width so the usual five stages all fit on a
   laptop without sideways scrolling, and stop shrinking at 178px —
   past that the board scrolls rather than squeezing company names
   down to two characters a line. */
.board-col {
  flex: 1 1 200px; min-width: 178px; max-width: 340px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column;
}
.board-col-head {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--grid);
}
.board-col-head .nm { font-weight: 620; font-size: .9rem; }
.board-col-head .ct {
  margin-left: auto; font-size: .76rem; font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
  background: var(--surface-2); border-radius: 999px; padding: 1px 8px;
}
.board-col-body {
  padding: 10px; display: flex; flex-direction: column; gap: 8px;
  min-height: 60px; max-height: calc(100vh - 260px); overflow-y: auto;
}
.board-col-body .empty { padding: 18px 8px; font-size: .8rem; }

.lead-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 10px 11px;
  text-align: left; width: 100%;
  display: flex; flex-direction: column; gap: 5px;
}
.lead-card:hover { border-color: var(--border-strong); }
.lead-card .nm { font-weight: 570; font-size: .89rem; line-height: 1.3; }
.lead-card .meta { display: flex; align-items: center; gap: 8px; font-size: .76rem; color: var(--text-muted); }
.lead-card .meta .when { margin-left: auto; white-space: nowrap; }
.lead-card .note {
  font-size: .78rem; color: var(--text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.lead-card .contact { font-size: .78rem; color: var(--accent); text-decoration: none; }
.lead-card .contact:hover { text-decoration: underline; }

/* A lead that has been changed locally but not confirmed by the Sheet
   yet. Small, non-alarming, and it clears itself. */
.saving-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--warning); flex: 0 0 auto;
}

/* The mobile stage picker strip. Hidden on desktop, where the columns
   themselves do this job. */
.stage-strip { display: none; gap: 6px; overflow-x: auto; padding: 2px 0 10px; }
.stage-strip button {
  flex: 0 0 auto; padding: 7px 13px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-secondary); font-size: .84rem; font-weight: 550;
  white-space: nowrap;
}
.stage-strip button.on {
  background: var(--accent-wash); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

/* Full-width tap targets in the stage picker modal. 44px is the
   smallest thing a thumb hits reliably. */
.stage-pick { display: flex; flex-direction: column; gap: 8px; }
.stage-pick button {
  min-height: 44px; width: 100%; text-align: left;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-strong);
  font-size: .92rem; font-weight: 550;
}
.stage-pick button.on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }

/* ---------- tables ---------- */
.tbl { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th {
  text-align: left; font-size: .73rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); padding: 8px 10px;
  border-bottom: 1px solid var(--axis); white-space: nowrap;
}
.tbl td { padding: 10px; border-bottom: 1px solid var(--grid); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl .shrink { width: 1%; white-space: nowrap; }
.tbl .clickable { cursor: pointer; }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); border: 1px solid var(--border);
  font-size: .76rem; font-weight: 550; color: var(--text-secondary);
  white-space: nowrap;
}
.chip .swatch { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; }
button.chip:hover { border-color: var(--border-strong); color: var(--text-primary); }

.empty {
  text-align: center; padding: 34px 20px;
  color: var(--text-muted); font-size: .88rem;
}
.empty .big { font-size: 30px; display: block; margin-bottom: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8px 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong);
  background: var(--surface-1); color: var(--text-primary);
  font-size: .88rem; font-weight: 570;
}
.btn:hover { background: var(--surface-2); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-secondary); }
.btn.ghost:hover { background: var(--surface-2); color: var(--text-primary); }
.btn.danger { border-color: color-mix(in srgb, var(--critical) 50%, transparent); color: var(--critical); background: transparent; }
.btn.danger:hover { background: color-mix(in srgb, var(--critical) 12%, transparent); }
.btn.sm { padding: 5px 10px; font-size: .8rem; border-radius: var(--r-sm); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.linkish {
  background: none; border: 0; padding: 0;
  color: var(--accent); font-size: .84rem; font-weight: 550;
  text-align: left;
}
.linkish:hover { text-decoration: underline; }

.fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 25;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink);
  border: 0; font-size: 27px; line-height: 1;
  box-shadow: var(--shadow-md);
}
.fab:hover { filter: brightness(1.08); }

/* ---------- forms ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 13px; }
.field > label { font-size: .78rem; font-weight: 600; color: var(--text-secondary); }
.field .hint { font-size: .75rem; color: var(--text-muted); }

input[type="text"], input[type="tel"], input[type="url"], input[type="password"],
select, textarea {
  width: 100%; padding: 8px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  outline: none;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
textarea { min-height: 92px; resize: vertical; font-family: var(--font); line-height: 1.5; }

.row { display: flex; gap: 12px; }
.row > * { flex: 1 1 0; min-width: 0; }

.seg { display: flex; gap: 0; background: var(--surface-2); border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: 3px; }
.seg button {
  flex: 1 1 0; background: none; border: 0; padding: 6px 8px;
  border-radius: var(--r-sm); font-size: .84rem; font-weight: 560;
  color: var(--text-secondary); white-space: nowrap;
}
.seg button.on { background: var(--surface-1); color: var(--text-primary); box-shadow: var(--shadow-sm); }

.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
  margin-bottom: 14px;
}
.toolbar input, .toolbar select { width: auto; min-width: 130px; }
.toolbar .grow { flex: 1 1 200px; min-width: 150px; }

.checkline { display: flex; align-items: center; gap: 9px; font-size: .87rem; margin-bottom: 10px; }
.checkline input { width: auto; }

.kv { display: flex; gap: 10px; padding: 7px 0; font-size: .86rem; border-bottom: 1px solid var(--grid); }
.kv:last-child { border-bottom: 0; }
.kv .k { color: var(--text-muted); flex: 0 0 130px; }
.kv .v { flex: 1 1 auto; min-width: 0; word-break: break-all; }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 16px 16px; overflow-y: auto;
  backdrop-filter: blur(2px);
}
.modal {
  width: 100%; max-width: 520px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.modal.narrow { max-width: 380px; }
.modal-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.modal-head h2 { flex: 1 1 auto; }
.modal-body { padding: 18px 20px; max-height: 70vh; overflow-y: auto; }
.modal-foot {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.modal-foot .left { margin-right: auto; }

/* ---------- toast ---------- */
.toast-root {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 70; display: flex; flex-direction: column; gap: 8px; align-items: center;
  pointer-events: none;
}
.toast {
  background: var(--text-primary); color: var(--page);
  padding: 9px 16px; border-radius: 999px;
  font-size: .85rem; font-weight: 560;
  box-shadow: var(--shadow-md);
  animation: toastIn .18s ease-out;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .content { padding: 16px 14px 96px; }
  .g-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .g-3, .g-2 { grid-template-columns: 1fr; }
  .brand-text { display: none; }
  .nav-toggle { display: grid; }
  .sidenav {
    position: fixed; left: 0; top: var(--topbar-h); bottom: 0; z-index: 40;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: var(--shadow-lg); height: auto;
  }
  .sidenav.open { transform: none; }
  /* Fullscreen on a phone, and laid out as a column so the buttons sit
     at the bottom of the screen instead of floating halfway up it. */
  .modal-back { padding: 0; align-items: stretch; }
  .modal, .modal.narrow {
    max-width: none; border-radius: 0; min-height: 100%;
    display: flex; flex-direction: column;
  }
  .modal-body { max-height: none; flex: 1 1 auto; }
  .card { overflow-x: auto; }

  /* One stage at a time, chosen from the strip. Side-by-side columns
     on a phone would mean horizontal scrolling to find anything. */
  .stage-strip { display: flex; }
  .board { display: block; overflow: visible; }
  .board-col { display: none; }
  .board-col.showing { display: flex; width: 100%; flex: 1 1 auto; }
  .board-col-body { max-height: none; }

  /* Thumbs, not cursors. Anything you tap while adding a lead gets a
     44px target — the segmented stage picker in particular was small
     enough to mis-hit at speed, which is exactly when it gets used. */
  .seg button { min-height: 40px; }
  .lead-card button.chip, .stage-strip button { min-height: 34px; }
  .btn { min-height: 40px; }
  .btn.sm { min-height: 34px; }
}
@media (max-width: 560px) {
  .g-4 { grid-template-columns: 1fr; }
  .tbl .hide-sm { display: none; }
  .topbar { gap: 6px; padding: 0 8px; }
  .topbar-right { gap: 4px; }
  /* Keep the status dot, drop its label — the pill is still tappable. */
  .sync-pill { padding: 6px; gap: 0; }
  .sync-pill #syncText { display: none; }
  .kv { flex-direction: column; gap: 2px; }
  .kv .k { flex: none; }
  .modal-foot .btn { flex: 1 1 auto; }
}

@media print {
  .topbar, .sidenav, .fab, .banner { display: none !important; }
  .content { padding: 0; max-width: none; }
  .card { break-inside: avoid; box-shadow: none; }
}