/* Client portal styling.
   Sized for a GHL iframe: no fixed widths, no viewport units, nothing that
   assumes it owns the whole window. The heat ramp is the validated
   single-hue blue from ghl_tracker/dashboard/theme.py, unchanged, so the
   portal and the internal dashboard read as one system. */

:root {
  --page: #f5f6f8;
  --surface: #ffffff;
  --ink: #16191d;
  --ink-2: #4b5563;
  --muted: #6b7280;
  --line: #e5e7eb;
  --line-soft: #f0f1f3;
  --accent: #2a78d6;
  --accent-soft: #eaf2fd;
  --good: #0f7b3f;
  --warn: #a56100;
  --warn-soft: #fdf3e3;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04);

  --heat-0: #f7f9fc; --heat-1: #dfeafb; --heat-2: #bcd6f7; --heat-3: #8fbaf1;
  --heat-4: #5598e7; --heat-5: #2a78d6; --heat-6: #184f95;
  --heat-ink-light: #16191d; --heat-ink-dark: #ffffff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page: #16181b; --surface: #1e2125; --ink: #f3f4f6; --ink-2: #c7cbd1;
    --muted: #949aa3; --line: #313640; --line-soft: #262a30;
    --accent: #6ba7ee; --accent-soft: #1d2b3d;
    --good: #4ca86a; --warn: #d19a3d; --warn-soft: #322616;
    --shadow: none;
    /* The dark ramp is a selected set of steps for the dark surface, not an
       inverted copy of the light one. Every step stays dark enough that the
       same light ink reads on all seven, so no cell flips its text colour. */
    --heat-0: #23272d; --heat-1: #1b3048; --heat-2: #1d3d5f; --heat-3: #204b78;
    --heat-4: #245c94; --heat-5: #2a70b5; --heat-6: #3987e5;
    --heat-ink-light: #eef1f5; --heat-ink-dark: #ffffff;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1180px; margin: 0 auto; padding: 22px 20px 64px; }

/* ------------------------------------------------------------------ header */
.top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
       justify-content: space-between; margin-bottom: 6px; }
.top h1 { margin: 0; font-size: 21px; letter-spacing: -.01em; font-weight: 650; }
.top .sub { margin: 3px 0 0; color: var(--muted); font-size: 13.5px; }

.freshness { display: inline-flex; align-items: center; gap: 7px;
             font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--good); flex: none; }
.freshness.stale { color: var(--warn); }
.freshness.stale .dot { background: var(--warn); }

.banner { margin: 14px 0 0; padding: 10px 13px; border-radius: var(--radius);
          background: var(--warn-soft); color: var(--warn); font-size: 13.5px;
          border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent); }

/* --------------------------------------------------------------- controls */
.controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
            margin: 18px 0 20px; }
/* Wraps rather than overflowing: the four labels come to 450px, which is
   wider than a phone, and an inline-flex row cannot break itself. */
.segmented { display: inline-flex; flex-wrap: wrap; background: var(--surface);
             padding: 3px; border: 1px solid var(--line); border-radius: 8px; gap: 2px; }
.segmented a { padding: 5px 11px; border-radius: 6px; font-size: 13px;
               color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.segmented a:hover { background: var(--line-soft); }
.segmented a.on { background: var(--accent); color: #fff; font-weight: 550; }

/* Same height and border as the segmented control beside it, so the two read
   as one row of controls rather than a control and a form. Date inputs are
   left native: the platform picker is the one the client's team already knows,
   and it works inside the GHL iframe on a phone. */
.daterange { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px;
             background: var(--surface); border: 1px solid var(--line);
             border-radius: 8px; padding: 3px 8px; }
.daterange label, .daterange .to { font-size: 12.5px; color: var(--muted); }
.daterange input[type="date"] { font: inherit; font-size: 13px; color: var(--ink);
             background: transparent; border: 1px solid var(--line);
             border-radius: 6px; padding: 4px 7px; min-width: 8.5em; }
.daterange input[type="date"]:focus { outline: 2px solid var(--accent);
             outline-offset: 1px; }
.daterange button { font: inherit; font-size: 13px; font-weight: 550; color: #fff;
             background: var(--accent); border: 0; border-radius: 6px;
             padding: 5px 12px; cursor: pointer; }
.daterange button:hover { filter: brightness(1.06); }
.daterange .clear { font-size: 13px; color: var(--ink-2); text-decoration: none;
             padding: 5px 8px; }
.daterange .clear:hover { text-decoration: underline; }
.scopeline { font-size: 13px; color: var(--muted); margin: -8px 0 18px; }
.scopeline b { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ tiles */
.tiles { display: grid; gap: 12px; margin-bottom: 26px;
         grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
.tile { background: var(--surface); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 14px 15px; box-shadow: var(--shadow); }
.tile .k { font-size: 12px; color: var(--muted); text-transform: uppercase;
           letter-spacing: .045em; font-weight: 600; }
.tile .v { font-size: 27px; font-weight: 640; letter-spacing: -.02em;
           margin: 5px 0 3px; font-variant-numeric: tabular-nums; }
.tile .n { font-size: 12.5px; color: var(--muted); line-height: 1.4; }

/* --------------------------------------------------------------- sections */
section { background: var(--surface); border: 1px solid var(--line);
          border-radius: var(--radius); padding: 18px 18px 20px;
          margin-bottom: 20px; box-shadow: var(--shadow); }
section > h2 { margin: 0; font-size: 16.5px; font-weight: 640; letter-spacing: -.01em; }
section > .lede { margin: 6px 0 16px; color: var(--ink-2); font-size: 13.5px;
                  max-width: 76ch; line-height: 1.55; }
section > .lede b { color: var(--ink); font-weight: 600; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ----------------------------------------------------------------- tables */
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 10px; white-space: nowrap; }
thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
           color: var(--muted); font-weight: 600; border-bottom: 1px solid var(--line);
           vertical-align: bottom; }
tbody tr { border-bottom: 1px solid var(--line-soft); }
tbody tr:last-child { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.name { white-space: normal; min-width: 190px; }

/* cohort heat grid */
/* Headers wrap rather than forcing the table wider than the frame. Six
   stage columns plus two label columns will not fit a phone on one line,
   and a horizontally clipped last column reads as a missing stage. */
.cohort th.rot { text-align: center; white-space: normal; max-width: 92px;
                 min-width: 74px; line-height: 1.25; }
.cohort td.month { font-weight: 600; }
.cohort td.leads { font-variant-numeric: tabular-nums; font-weight: 600; }
.cell { text-align: center; border-radius: 6px; padding: 7px 6px; min-width: 74px;
        font-variant-numeric: tabular-nums; }
.cell .c { font-weight: 620; display: block; font-size: 14px; }
.cell .p { font-size: 11px; opacity: .78; display: block; }
.cell[data-i="0"] { background: var(--heat-0); color: var(--heat-ink-light); }
.cell[data-i="1"] { background: var(--heat-1); color: var(--heat-ink-light); }
.cell[data-i="2"] { background: var(--heat-2); color: var(--heat-ink-light); }
.cell[data-i="3"] { background: var(--heat-3); color: var(--heat-ink-light); }
.cell[data-i="4"] { background: var(--heat-4); color: var(--heat-ink-dark); }
.cell[data-i="5"] { background: var(--heat-5); color: var(--heat-ink-dark); }
.cell[data-i="6"] { background: var(--heat-6); color: var(--heat-ink-dark); }
.cohort tbody tr.recent td.month::after {
  content: "still early"; display: block; font-size: 10.5px; font-weight: 500;
  color: var(--muted); letter-spacing: .02em; }

/* funnel */
.funnel { display: grid; gap: 3px; }
.step { display: grid; grid-template-columns: minmax(150px, 210px) 1fr auto;
        gap: 12px; align-items: center; padding: 4px 0; }
.step .lab { font-size: 13.5px; color: var(--ink-2); }
.step .track { background: var(--line-soft); border-radius: 5px; height: 22px;
               overflow: hidden; }
.step .fill { background: var(--accent); height: 100%; border-radius: 5px;
              min-width: 2px; }
.step .val { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums;
             white-space: nowrap; }
.step .val b { color: var(--ink); font-weight: 620; }

/* source bars inside a table cell */
.bar { background: var(--line-soft); border-radius: 4px; height: 8px;
       width: 100%; min-width: 70px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 4px; }

/* movement */
.moves { display: grid; gap: 0; }
.move { display: grid; grid-template-columns: 1fr auto; gap: 10px;
        padding: 11px 2px; border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.move:last-child { border-bottom: 0; }
.move .who { font-weight: 570; }
.move .path { font-size: 13px; color: var(--muted); margin-top: 2px; }
.move .path b { color: var(--ink-2); font-weight: 600; }
.move .lag { font-size: 12.5px; color: var(--accent); font-weight: 600;
             white-space: nowrap; }
.move .lag.same { color: var(--muted); font-weight: 500; }

/* pills */
.pill { display: inline-block; padding: 2px 8px; border-radius: 99px;
        font-size: 11.5px; font-weight: 600; border: 1px solid transparent;
        white-space: nowrap; }
.pill.active { background: var(--accent-soft); color: var(--accent);
               border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.pill.nurture { background: var(--warn-soft); color: var(--warn);
                border-color: color-mix(in srgb, var(--warn) 26%, transparent); }
.pill.won { background: color-mix(in srgb, var(--good) 12%, transparent);
            color: var(--good); border-color: color-mix(in srgb, var(--good) 30%, transparent); }
.pill.lost, .pill.outside_area { background: var(--line-soft); color: var(--muted);
                                 border-color: var(--line); }

/* lead table filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters input, .filters select {
  font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--surface); color: var(--ink); min-width: 0; }
.filters input { flex: 1 1 200px; }
.filters input:focus, .filters select:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 1px; border-color: var(--accent); }
.count { font-size: 12.5px; color: var(--muted); margin: 10px 2px 0; }

.leadtable { max-height: 620px; overflow: auto; border: 1px solid var(--line);
             border-radius: 8px; }
.leadtable thead th { position: sticky; top: 0; background: var(--surface);
                      z-index: 1; box-shadow: 0 1px 0 var(--line); cursor: pointer;
                      user-select: none; }
.leadtable thead th::after { content: ""; }
.leadtable thead th[data-dir="asc"]::after { content: " \2191"; }
.leadtable thead th[data-dir="desc"]::after { content: " \2193"; }
.leadtable td { padding: 7px 10px; }
/* Fixed layout, or the lead-name column takes whatever it likes and pushes
   status and age off the right-hand edge -- present but scrolled out of
   sight, which reads as columns that were never built. */
.leadtable table { table-layout: fixed; min-width: 900px; }
.leadtable td, .leadtable th { overflow: hidden; text-overflow: ellipsis; }
.leadtable td.name { white-space: normal; min-width: 0; }
col.w-lead { width: 23%; } col.w-src { width: 11%; } col.w-date { width: 11%; }
col.w-stage { width: 16%; } col.w-state { width: 10%; } col.w-num { width: 6.5%; }
.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 14px; }

footer { color: var(--muted); font-size: 12.5px; text-align: center;
         padding-top: 6px; }
footer a { color: var(--muted); }

/* -------------------------------------------------------------- sign-in */
.gate { min-height: 78vh; display: flex; align-items: center; justify-content: center;
        padding: 24px; }
.card { background: var(--surface); border: 1px solid var(--line);
        border-radius: 12px; padding: 26px; width: 100%; max-width: 370px;
        box-shadow: var(--shadow); }
.card h1 { margin: 0 0 4px; font-size: 18px; font-weight: 640; }
.card p { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }
.card label { display: block; font-size: 12.5px; font-weight: 600;
              color: var(--ink-2); margin-bottom: 6px; }
.card input { width: 100%; font: inherit; padding: 10px 11px; border-radius: 8px;
              border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.card input:focus { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
                    outline-offset: 1px; border-color: var(--accent); }
.card button { width: 100%; margin-top: 14px; font: inherit; font-weight: 600;
               padding: 10px; border: 0; border-radius: 8px; background: var(--accent);
               color: #fff; cursor: pointer; }
.card button:hover { filter: brightness(1.06); }
.card .err { margin: 12px 0 0; color: #b3261e; font-size: 13px; }

@media (max-width: 640px) {
  .wrap { padding: 16px 13px 48px; }
  .step { grid-template-columns: 130px 1fr auto; gap: 8px; }
  .tile .v { font-size: 23px; }
}