/* ── Variables ──────────────────────────────────────────────────────────────── */
:root {
  /* ── Stacking layers ──────────────────────────────────────────────────────
     Leaflet assigns its own z-indexes and they are higher than anything the
     app used to need: panes 400-700 (tooltip 650, popup 700), controls 800,
     corner containers 1000. The shared .modal-overlay sat at 200, which was
     fine for years because no modal had ever been opened over a map — and
     then the Dispatch map arrived and the settings dialog rendered
     underneath it, invisible.
     The Territory Map had already hit this and worked around it with a
     bespoke .map-assign-modal at 2200 rather than fixing the shared class.
     These tokens replace both guesses with one ordering:               */
  --z-map-chrome:  1000;   /* ceiling of everything Leaflet draws          */
  --z-map-ui:      1500;   /* our own controls drawn over a map            */
  --z-app-chrome:  1800;   /* bottom nav — above any map, below the sidebar*/
  --z-sidebar:     2000;   /* mobile sidebar and its overlay               */
  --z-modal:       5000;   /* every dialog — must clear the map entirely   */
  --z-toast:       9999;   /* confirmations, always on top of dialogs      */

  /* Overlays NOT on this scale, deliberately: .status-popover (lead log),
     .panel-overlay (lead/CRM slide-overs), .more-sheet (mobile nav) and
     .score-tooltip-floating all live on pages that host no Leaflet map, so
     re-numbering them would be churn nobody can verify. Put a map on one of
     those pages and it joins the scale first.                             */

  --bg:         #0c0e14;
  --bg-1:       #11141e;
  --bg-2:       #171b28;
  --bg-3:       #1d2132;
  --border:     #252a3c;
  --border-hi:  #313755;

  --text-0:     #eef0fb;
  --text-1:     #c2c8e0;
  --text-2:     #838ca8;
  --text-3:     #4e576e;

  --blue:       #5b7cf6;
  --blue-dim:   #1b2457;
  --green:      #22d47a;
  --green-dim:  #0b2e1e;
  --red:        #f04560;
  --red-dim:    #3a0d18;
  --amber:      #f5a623;
  --amber-dim:  #3a2206;
  --orange:     #e8731a;
  --orange-dim: #312009;
  --purple:     #9b6dff;
  --purple-dim: #1e1046;
  --cyan:       #22cce0;
  --cyan-dim:   #092a30;
  --teal:       #14b8a6;
  --teal-dim:   #06251f;
  --gold:       #e5b84b;
  --gold-dim:   #33280a;

  --sidebar-w:  224px;
  --radius:     10px;
  --radius-sm:  6px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
}

/* ── Reset ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text-1); font-size: 14px; line-height: 1.5; overflow: hidden; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }
table { border-collapse: collapse; width: 100%; }
ul { list-style: none; }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
.app { display: flex; height: 100vh; overflow: hidden; }

/* ── Sidebar ────────────────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 0;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden; /* the middle nav scrolls; brand + footer stay pinned */
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/* The hub mark. The SVG carries its own rounded corners, fill and stroke —
   all this needs to do is size it. A CSS border-radius here would clip the
   tile a second time at a different radius. */
.brand-mark {
  width: 36px; height: 36px;
  display: block;
  flex-shrink: 0;
}
.brand-name { font-weight: 600; font-size: 14px; color: var(--text-0); }
.brand-env  { font-size: 11px; color: var(--text-3); margin-top: 1px; }

.sidebar-nav {
  flex: 1;
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  min-height: 0; /* critical — lets the flex child shrink so it can scroll */
  /* Thin, theme-matched scrollbar; only shows when the nav overflows */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}
.sidebar-nav::-webkit-scrollbar { width: 6px; }
.sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.nav-link:hover { background: var(--bg-2); color: var(--text-1); text-decoration: none; }
.nav-link.active { background: var(--blue-dim); color: var(--blue); }
.nav-icon  { width: 17px; height: 17px; flex-shrink: 0; }
.nav-emoji { font-size: 16px; line-height: 1; flex-shrink: 0; min-width: 22px; text-align: center; }

/* Button elements that use .nav-link need browser-default resets */
button.nav-link {
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}

/* ── Collapsible nav group (Admin) ───────────────────────────────────────────── */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-chevron {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-3);
  transition: transform 0.2s ease;
}
.nav-group.expanded .nav-chevron { transform: rotate(90deg); }
/* Highlight the parent while a sub-page is active */
.nav-group-toggle.active { background: var(--blue-dim); color: var(--blue); }

.nav-submenu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.nav-group.expanded .nav-submenu { max-height: 260px; }
/* Sub-items: indented ~20px past the parent, slightly smaller text */
.nav-subitem { padding-left: 30px; font-size: 13px; }
.nav-subitem .nav-emoji { font-size: 14px; }

/* Mobile sidebar admin sub-menu (inline-styled buttons; class drives the anim) */
.mobile-admin-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}
.mobile-admin-submenu.expanded { max-height: 280px; }
.mobile-admin-chevron { display: inline-block; transition: transform 0.2s ease; }

/* Logout section — mobile only */
.sidebar-logout-section { display: none; }

.sidebar-footer {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.conn-row { display: flex; gap: 8px; margin-bottom: 4px; }
.conn-dot {
  width: 8px; height: 8px; border-radius: 50%;
  transition: background 0.4s;
}
.dot-green  { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot-red    { background: var(--red); }
.dot-grey   { background: var(--text-3); }
.conn-labels { font-size: 10px; color: var(--text-3); letter-spacing: 0.5px; }

/* ── Main ───────────────────────────────────────────────────────────────────── */
.main {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  /* This is the page scroller — body and .app are overflow:hidden by design —
     and the global 6px --border-hi thumb was invisible on it. A card taller
     than the window then looked cut off rather than continued; the Dispatch
     map's PM list was read as "ends here" for exactly that reason. */
  scrollbar-color: var(--text-3) transparent;
  scrollbar-gutter: stable;
}
.main::-webkit-scrollbar { width: 9px; }
.main::-webkit-scrollbar-thumb { background: var(--text-3); border-radius: 5px; }
.main::-webkit-scrollbar-thumb:hover { background: var(--text-2); }

/* ── Pages ──────────────────────────────────────────────────────────────────── */
.page { display: none; padding: 32px 36px 48px; }
.page.active { display: block; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 28px;
}
.page-header h1 { font-size: 22px; font-weight: 700; color: var(--text-0); }
.page-sub { font-size: 13px; color: var(--text-2); margin-top: 3px; }
.page-sub-oneline { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-header > div:first-child { min-width: 0; }

/* ── Stat cards ─────────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 36px;
}
.stat-grid-5 { grid-template-columns: repeat(5, 1fr); margin-bottom: 24px; }

.stat-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--card-accent, var(--blue));
  border-radius: var(--radius) 0 0 var(--radius);
}
.stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-2);
  margin-bottom: 10px;
}
.stat-value {
  font-size: 34px;
  font-weight: 700;
  color: var(--text-0);
  line-height: 1;
}
.stat-sub {
  font-size: 12px;
  color: var(--text-3);
  margin-top: 6px;
}

/* ── Section row ────────────────────────────────────────────────────────────── */
.section-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.section-title { font-size: 15px; font-weight: 600; color: var(--text-0); }
.live-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  color: var(--green);
  background: var(--green-dim);
  border: 1px solid var(--green);
  padding: 2px 7px;
  border-radius: 20px;
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ── Activity feed ──────────────────────────────────────────────────────────── */
.activity-feed {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 16px;
}
.activity-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.activity-type { font-weight: 600; font-size: 13px; color: var(--text-0); flex: 1; }
.activity-source {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--blue);
  background: var(--blue-dim);
  padding: 2px 8px;
  border-radius: 4px;
}
.activity-time { font-size: 12px; color: var(--text-3); white-space: nowrap; }

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 20px;
  overflow: hidden;
}
.card-header {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-0);
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-3);
  padding: 1px 8px;
  border-radius: 10px;
}
.card-desc { font-size: 13px; color: var(--text-2); padding: 14px 20px 0; line-height: 1.6; }

/* ── Tables ─────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

/* ── Wide tables ─────────────────────────────────────────────────────────────
   These tables overflow at ordinary window sizes, and the column they push off
   the right edge is Actions — the reason anyone opened the table.

   Measured with the real renderers and real data, at the content width left
   after the sidebar:

       window    Leads   Partners   Reps   All Users
       1600px    240px     171px    89px       —
       1440px    303px     234px   152px       —
       1280px    463px     394px   312px    152px
       1100px    643px     574px   492px    332px

   Reps overflowed at EVERY size below a maximised large monitor, which is why
   the Edit button was reported as missing: it was never missing, it was past
   the right edge with nothing to say so. macOS hides scrollbars by default, so
   there was no visible cue at all.

   Two fixes, both CSS only.

   1. The scroll affordance below uses the background-attachment trick: the
      two `local` gradients scroll WITH the content and mask the two `scroll`
      shadows, which are painted on the container. The result is a shadow that
      appears only when there is more content that way and vanishes at each
      end, with no scroll listener and no JS to keep in sync. */
.table-wrap {
  background:
    linear-gradient(to right,  var(--bg-2) 40%, rgba(23,27,40,0)) left  / 42px 100% no-repeat local,
    linear-gradient(to left,   var(--bg-2) 40%, rgba(23,27,40,0)) right / 42px 100% no-repeat local,
    linear-gradient(to right,  rgba(0,0,0,.38), rgba(0,0,0,0))    left  / 16px 100% no-repeat scroll,
    linear-gradient(to left,   rgba(0,0,0,.38), rgba(0,0,0,0))    right / 16px 100% no-repeat scroll;
  background-color: var(--bg-2);
}

/* 2. Pin the Actions column to the right edge so it survives any amount of
      horizontal scrolling. Opt-in per table via `sticky-actions`, because a
      table whose last column is data rather than controls must not be pinned.

      The cell needs its own background or the scrolling content shows through
      it, and that background has to track the row's own states — hover here,
      since rows are otherwise transparent over the card.

      `border-collapse: collapse` (set on every table) historically broke
      sticky cells; verified working in the harness at every width above.

      Detail rows use a single colspan cell that IS the whole row, so pinning
      their last child would pin the entire row. Excluded by [colspan]. */
table.sticky-actions th:last-child,
table.sticky-actions td:last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 2;
  background: var(--bg-2);
  /* Says "content passes underneath", which is the fact the reader needs. */
  box-shadow: -10px 0 10px -8px rgba(0, 0, 0, 0.55);
}
table.sticky-actions thead th:last-child { z-index: 3; }
table.sticky-actions tbody tr:hover td:last-child:not([colspan]) { background: var(--bg-3); }

/* ── Recommend modal: expandable availability cell ───────────────────────────
   Two short lines, the same height the old seven-bar strip took, so the row
   does not grow. Only a READ calendar renders this button; UNKNOWN has none. */
.dispatch-avail-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 5px;
  align-items: baseline;
  width: 100%;
  padding: 3px 6px;
  margin: -3px -6px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  font: inherit;
  font-size: 11px;
  line-height: 1.3;
  text-align: left;
  color: var(--text-1);
  cursor: pointer;
}
.dispatch-avail-toggle:hover,
.dispatch-avail-cell.open .dispatch-avail-toggle {
  background: var(--bg-3);
  border-color: var(--border-hi);
}
.dispatch-avail-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.dispatch-avail-caret {
  grid-row: span 2;
  font-size: 10px;
  color: var(--text-3);
  transition: transform 0.15s ease;
}
.dispatch-avail-toggle:hover .dispatch-avail-caret { color: var(--blue); }
.dispatch-avail-cell.open .dispatch-avail-caret { transform: rotate(90deg); color: var(--blue); }
.dispatch-avail-sub { grid-column: 2; font-size: 9.5px; color: var(--blue); }
.dispatch-avail-panel {
  padding: 10px 16px 12px 44px;
  background: var(--bg-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
/* In the beyond-the-wall list the detail is a div, not a table row. */
div.dispatch-avail-detail .dispatch-avail-panel { padding-left: 16px; margin: 4px 0 6px; border-radius: 4px; }

/* The pinned column already carries its own shadow, so the container's
   right-edge affordance would only ever be drawn underneath it. */
table.sticky-actions { background-clip: padding-box; }
.table-wrap:has(> table.sticky-actions) {
  background:
    linear-gradient(to right, var(--bg-2) 40%, rgba(23,27,40,0)) left / 42px 100% no-repeat local,
    linear-gradient(to right, rgba(0,0,0,.38), rgba(0,0,0,0))    left / 16px 100% no-repeat scroll;
  background-color: var(--bg-2);
}
table { width: 100%; }
thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; }
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: var(--bg-3); }
tbody td {
  padding: 13px 16px;
  font-size: 13.5px;
  color: var(--text-1);
  vertical-align: middle;
}
.empty-state {
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  padding: 40px 16px !important;
}

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: capitalize;
}
.badge-green  { background: var(--green-dim);  color: var(--green); }
.badge-red    { background: var(--red-dim);    color: var(--red); }
.badge-amber  { background: var(--amber-dim);  color: var(--amber); }
.badge-orange { background: var(--orange-dim); color: var(--orange); }
.badge-blue   { background: var(--blue-dim);   color: var(--blue); }
.badge-purple { background: var(--purple-dim); color: var(--purple); }
.badge-grey   { background: var(--bg-3);       color: var(--text-2); }
.badge-teal   { background: var(--teal-dim);   color: var(--teal); }
.badge-gold   { background: var(--gold-dim);   color: var(--gold); }

/* ── Partner Account toggle (lead detail panel Status section) ── */
.partner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  cursor: pointer;
  user-select: none;
}
.partner-toggle input { cursor: pointer; margin: 0; }
.partner-toggle:hover { border-color: var(--border-hi); }
.partner-toggle-on {
  background: var(--gold-dim);
  color: var(--gold);
  border-color: var(--gold);
}

/* ── Info banner (subtle inline notice) ── */
.info-banner {
  background: var(--amber-dim);
  color: var(--amber);
  border: 1px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

/* ── Standalone lead notes (lead detail panel) ─────────────────────────────── */
.lead-note {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.lead-note-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.lead-note-body {
  font-size: 13px;
  color: var(--text-0);
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
}
.lead-note-meta {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 6px;
}
.lead-note-controls {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.lead-note-icon {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  padding: 2px 4px;
  border-radius: 4px;
  opacity: 0.65;
  transition: opacity 0.15s, background 0.15s;
}
.lead-note-icon:hover { opacity: 1; background: var(--bg-3); }
.lead-note-input {
  width: 100%;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  font-size: 13px;
  padding: 8px 10px;
  font-family: inherit;
  resize: vertical;
}
.lead-note-input:focus { border-color: var(--blue); outline: none; }
.lead-note-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

/* ── "edited" indicator on notes ──────────────────────────────────────────── */
.note-edited {
  color: var(--text-3);
  font-size: 11px;
  font-weight: 400;
}

/* ── Editable manual note (conversation panel) ────────────────────────────── */
.note-manual-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.note-manual-body { flex: 1; white-space: pre-wrap; }
.note-manual-meta {
  color: var(--text-3);
  font-size: 11px;
  margin-top: 4px;
}
.note-edit-btn {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.6;
  font-size: 13px;
  padding: 0 2px;
  line-height: 1;
}
.note-edit-btn:hover { opacity: 1; }

/* ── Lead contacts (detail panel) ─────────────────────────────────────────── */
.contact-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
  background: var(--surface-2, var(--bg-2));
}
.contact-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.contact-name-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.contact-title { color: var(--text-3); font-size: 12.5px; font-weight: 400; }
.contact-card-controls { display: flex; gap: 2px; flex-shrink: 0; }
.contact-line { font-size: 13px; margin-top: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-tel { text-decoration: none; font-weight: 600; color: var(--blue); }
.contact-notes { font-size: 12.5px; margin-top: 6px; white-space: pre-wrap; }
.contact-form { display: flex; flex-direction: column; gap: 8px; }
.contact-form-title { font-weight: 600; font-size: 13px; }
.contact-form .lead-note-input { width: 100%; }
.contact-primary-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
  cursor: pointer;
}

/* ── Lead expenses (detail panel) ──────────────────────────────────────────── */
.expense-add-row {
  display: grid;
  grid-template-columns: 1.4fr 0.9fr 1fr 1.4fr auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.expense-amount-wrap { position: relative; display: flex; align-items: center; }
.expense-amount-prefix {
  position: absolute;
  left: 10px;
  color: var(--text-3);
  font-size: 13px;
  pointer-events: none;
}
.expense-amount-in { padding-left: 20px; }
.expense-add-btn { white-space: nowrap; }

.lead-expense {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
}
.lead-expense.expense-editing { display: grid; gap: 8px; }
.lead-expense-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lead-expense-date {
  font-size: 12px;
  color: var(--text-3);
  min-width: 48px;
}
.lead-expense-amount {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
}
.lead-expense-rep {
  font-size: 11px;
  color: var(--text-3);
}
.lead-expense-main .lead-note-controls { margin-left: auto; }
.lead-expense-notes {
  font-size: 12.5px;
  color: var(--text-1);
  margin-top: 6px;
  white-space: pre-wrap;
  word-break: break-word;
}
.expense-total-line {
  font-size: 13px;
  color: var(--text-1);
  text-align: right;
  padding: 8px 2px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

/* ── Admin expense report ──────────────────────────────────────────────────── */
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); margin-bottom: 8px; }
.expense-filter-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.expense-filter-field { display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.expense-filter-field .lead-note-input { min-width: 150px; }
.data-table th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data-table th.sortable:hover { color: var(--blue); }
.data-table td.num, .data-table th.num { text-align: right; }

@media (max-width: 767px) {
  .expense-add-row { grid-template-columns: 1fr; }
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .expense-filter-field { flex: 1 1 100%; min-width: 0; }
}

/* ── Inline editable status badge + popover ────────────────────────────────── */
.status-badge-editable {
  border: none;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  transition: filter 0.15s, box-shadow 0.15s;
}
.status-badge-editable:hover { filter: brightness(1.12); }
.status-badge-editable:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.status-badge-caret { font-size: 8px; opacity: 0.7; line-height: 1; }

/* Lead panel header: let the name truncate but keep the status badge visible. */
#lead-panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
#lead-panel-title > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#lead-panel-title .status-badge-editable { flex-shrink: 0; }

@keyframes status-flash {
  0%   { box-shadow: 0 0 0 0 var(--green); }
  20%  { box-shadow: 0 0 0 3px var(--green-dim); background: var(--green-dim); color: var(--green); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.status-badge-flash { animation: status-flash 0.9s ease-out; }

.status-popover {
  position: absolute;
  z-index: 1000;
  background: var(--bg-1);
  border: 1px solid var(--border-hi, var(--border));
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  padding: 4px;
  min-width: 190px;
  max-height: 60vh;
  overflow-y: auto;
}
.status-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  font: inherit;
  text-align: left;
}
.status-popover-item:hover,
.status-popover-item.active { background: var(--bg-3); }
.status-popover-check {
  width: 14px;
  flex-shrink: 0;
  color: var(--green);
  font-size: 12px;
  text-align: center;
}
.status-popover-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.4);
}
/* Mobile: render as a bottom sheet instead of an anchored popover. */
.status-popover-sheet {
  position: fixed;
  top: auto !important;
  left: 0 !important;
  right: 0;
  bottom: 0;
  width: 100%;
  min-width: 0;
  max-height: 70vh;
  border-radius: 16px 16px 0 0;
  padding: 10px 10px calc(10px + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.5);
  animation: sheet-up 0.18s ease-out;
}
.status-popover-sheet .status-popover-item { padding: 12px 10px; font-size: 15px; }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ── Auto status-progression notification (bottom-right pill) ───────────────── */
.status-progression-notification {
  position: fixed;
  bottom: 80px;
  right: 16px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-1);
  z-index: 9000;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.status-progression-notification.visible { opacity: 1; transform: translateY(0); }

/* Confirmation-mode variant — stacks a message over Yes/Keep buttons. */
.status-progression-confirm {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  min-width: 240px;
  max-width: 320px;
}
.status-progression-confirm .spc-msg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.status-progression-confirm .spc-actions { display: flex; gap: 8px; justify-content: flex-end; }

@media (max-width: 767px) {
  .status-progression-notification { bottom: 70px; left: 16px; right: 16px; }
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.15s;
  white-space: nowrap;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.btn-ghost {
  background: transparent;
  color: var(--text-2);
  border-color: var(--border-hi);
}
.btn-ghost:hover:not(:disabled) { background: var(--bg-3); color: var(--text-1); }
.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: var(--red-dim);
}
.btn-danger:hover:not(:disabled) { background: var(--red-dim); }
.btn-sm { padding: 5px 11px; font-size: 12px; }
.btn-icon { width: 14px; height: 14px; flex-shrink: 0; }

/* ── Forms ──────────────────────────────────────────────────────────────────── */
.form-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: 16px 20px;
}
.form-group { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 120px; }
.form-group-sm { flex: 0 0 90px; }
.form-group label { font-size: 12px; font-weight: 500; color: var(--text-2); }
.form-group input,
.form-group select {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 8px 12px;
  font-size: 13.5px;
  outline: none;
  transition: border-color 0.15s;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--blue); }
.form-group select option { background: var(--bg-2); }

/* ── Service tag editor ──────────────────────────────────────────────────── */
.tag-editor {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 6px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: text;
  transition: border-color 0.15s;
}
.tag-editor:focus-within { border-color: var(--blue); }
.tag-editor input {
  border: none;
  background: transparent;
  outline: none;
  flex: 1;
  min-width: 140px;
  font-size: 13px;
  color: var(--text-0);
  padding: 2px 4px;
}
.service-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--text-1);
}
.service-tag button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--text-2);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.service-tag button:hover { color: var(--text-0); }

#scrape-form > .btn { margin: 4px 20px 20px; }

.input-row { display: flex; gap: 8px; padding: 14px 20px 20px; }
.input-row input { flex: 1; }
.input-row input, .input-row .btn {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 8px 12px;
  font-size: 13.5px;
  outline: none;
}
.input-row input:focus { border-color: var(--blue); }

/* ── Spinner / loader ───────────────────────────────────────────────────────── */
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border-hi);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.scrape-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--text-2);
  font-size: 13px;
}

/* ── Trade-type multi-select chips (Lead Import scrape form) ──────────────────── */
.trade-chips-toolbar {
  display: flex;
  gap: 8px;
  margin: 6px 0;
}
.trade-chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.trade-chip-group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 6px;
}
.trade-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trade-chip {
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  color: var(--text-1);
  padding: 5px 12px;
  border-radius: 20px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.trade-chip:hover { border-color: var(--blue); color: var(--text-0); }
.trade-chip.selected {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 500;
}

/* ── Skeleton ───────────────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-3) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
  min-height: 100px;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Settings ───────────────────────────────────────────────────────────────── */
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.conn-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.conn-card:last-child { border-bottom: none; }
.conn-card-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  transition: background 0.3s;
}
.conn-card-name { font-weight: 600; font-size: 13.5px; color: var(--text-0); }
.conn-card-detail { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.conn-card-latency {
  margin-left: auto;
  font-size: 11px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

.env-list { padding: 14px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.env-list li { display: flex; align-items: center; gap: 10px; }
.env-list code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: 4px;
  color: var(--cyan);
}

.secret-status { padding: 0 20px 16px; font-size: 12px; }
.secret-status.ok  { color: var(--green); }
.secret-status.err { color: var(--red); }

.server-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border-top: 1px solid var(--border);
}
.server-info-cell {
  background: var(--bg-2);
  padding: 14px 20px;
}
.server-info-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.5px; }
.server-info-val   { font-size: 14px; font-weight: 600; color: var(--text-0); margin-top: 3px; }

/* ── Inline warning ─────────────────────────────────────────────────────────── */
.inline-warn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: var(--amber);
  font-size: 13px;
}
.inline-warn-icon { width: 18px; height: 18px; flex-shrink: 0; }
.inline-warn code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--amber-dim);
  padding: 1px 6px;
  border-radius: 3px;
}

/* ── Scrape results mini-cards ──────────────────────────────────────────────── */
.stat-grid-5 .stat-card { padding: 16px 18px; }
.stat-grid-5 .stat-value { font-size: 26px; }

/* ── Utility ────────────────────────────────────────────────────────────────── */
.text-muted  { color: var(--text-3); }
.text-green  { color: var(--green); }
.text-red    { color: var(--red); }
.text-amber  { color: var(--amber); }
.text-center { text-align: center; }
.mt-16 { margin-top: 16px; }

/* ── Scrollbar ──────────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-hi); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }

/* ── Clickable table rows ───────────────────────────────────────────────────── */
tbody tr.clickable-row { cursor: pointer; }

/* Job rows open the job in JobNimbus. The arrow is always visible rather than
   hover-only, because the queue is read on touch screens too and a hover-only
   affordance is invisible there. */
tbody tr.job-row-link { cursor: pointer; }
tbody tr.job-row-link:hover { background: var(--bg-2); }
tbody tr.job-row-link:hover .job-row-arrow { color: var(--blue); }
.job-row-arrow { color: var(--text-3); font-size: 11px; }

/* Unassigned leads — subtle highlight so they stand out from assigned rows */
tbody tr.row-unassigned { background: var(--bg-2); }
tbody tr.row-unassigned:hover { background: var(--bg-3); }

/* ── Star rating ────────────────────────────────────────────────────────────── */
.stars-filled { color: var(--amber); }
.stars-empty  { color: var(--text-3); }
.stars-num    { font-size: 11px; color: var(--text-3); margin-left: 3px; }

/* ── Pagination ─────────────────────────────────────────────────────────────── */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid var(--border);
}
.pagination .text-muted { font-size: 13px; }
.per-page-selector {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--text-2);
}
.per-page-select {
  background: var(--bg-2);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

/* ── Slide-out panel ────────────────────────────────────────────────────────── */
.panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.panel-overlay.open { opacity: 1; pointer-events: all; }

.panel {
  position: fixed;
  top: 0; right: 0;
  width: 460px;
  max-width: 100vw;
  height: 100vh;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  z-index: 101;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel.open { transform: translateX(0); }

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-1);
}
.panel-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 12px;
}

/* Lead detail back bar — subtle text button, top-left of the panel. Especially
   important on mobile where the PWA has no browser back button. */
.lead-back-bar {
  flex-shrink: 0;
  padding: 10px 16px 0;
  background: var(--bg-1);
}
.lead-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.lead-back-btn:hover { color: var(--blue); background: var(--bg-2); }
.lead-back-btn span { font-size: 15px; line-height: 1; }

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}
.panel-section { margin-bottom: 4px; }
.panel-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.panel-field { margin-bottom: 14px; }
.panel-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 3px;
}
.panel-value {
  font-size: 13.5px;
  color: var(--text-1);
  word-break: break-word;
}
.panel-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 16px 0;
}
.panel-actions { padding-top: 4px; }

/* ── Lead Agent chat ──────────────────────────────────────── */
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 18px 18px 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.chat-empty {
  margin: auto;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.6;
  padding: 24px;
}

.chat-msg {
  position: relative;
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}
/* Per-message delete — × in the bubble's top-right corner, revealed on hover.
   color:inherit keeps it legible on both the blue user bubble and light agent
   bubble; opacity carries the muted → full transition. */
.frank-msg-del {
  position: absolute;
  top: 2px;
  right: 4px;
  background: none;
  border: none;
  color: inherit;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.chat-msg:hover .frank-msg-del { opacity: 0.5; }
.frank-msg-del:hover { opacity: 1; }
.chat-msg.user {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.chat-msg.agent {
  align-self: flex-start;
  background: var(--bg-3);
  color: var(--text-1);
  border: 1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.chat-msg.error {
  align-self: flex-start;
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid var(--red);
  border-bottom-left-radius: 4px;
}

.chat-typing {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 14px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 14px;
  border-bottom-left-radius: 4px;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
  animation: chat-blink 1.2s infinite ease-in-out both;
}
.chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing span:nth-child(3) { animation-delay: 0.4s; }
.chat-typing span.chat-thinking-label {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  animation: none;
  color: var(--text-3);
  font-size: 12.5px;
  font-style: italic;
}
@keyframes chat-blink {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40%           { opacity: 1;   transform: scale(1); }
}

.chat-input-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg-1);
  flex-shrink: 0;
}
.chat-input {
  flex: 1;
  resize: none;
  max-height: 120px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hi);
  background: var(--bg-3);
  color: var(--text-0);
  font-family: var(--font);
  font-size: 13.5px;
  line-height: 1.4;
  outline: none;
}
.chat-input:focus { border-color: var(--blue); }
.chat-send-btn {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.chat-send-btn:hover { background: #6f8cf8; }
.chat-send-btn:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 640px) {
  /* Pad the input bar past Safari's bottom chrome so it isn't cut off */
  .chat-input-bar {
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }
  /* Extra scroll room so messages don't hide behind the input + safe area */
  .chat-thread {
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
}

/* ── Frank — full-page AR assistant tab ──────────────────────────────────────── */
.page-frank { padding: 0; height: 100%; }
.page-frank.active { display: flex; }

.frank-layout {
  display: flex;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

/* History sidebar */
.frank-history {
  width: 248px;
  flex-shrink: 0;
  background: var(--bg-1);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.frank-history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.frank-new-btn {
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  color: var(--blue);
  font-size: 11.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  transition: background 0.15s;
}
.frank-new-btn:hover { background: #20307a; }
.frank-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.frank-history-empty {
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
  padding: 24px 12px;
  line-height: 1.6;
}
.frank-history-item {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.frank-history-item:hover { background: var(--bg-2); }
.frank-history-item.active { background: var(--bg-3); border-color: var(--border-hi); }
.frank-history-text { flex: 1; min-width: 0; }   /* min-width:0 lets the preview ellipsis work */

/* Dedicated action zone on the far right, held apart from the clickable text by a
   gap + divider so a click to open the conversation can't land on the delete
   control. */
.frank-history-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 10px;
  margin-left: 6px;
  border-left: 1px solid transparent;
}
.frank-history-item:hover .frank-history-actions { border-left-color: var(--border); }

/* Per-row delete — trash icon hidden until the row is hovered. */
.frank-history-del {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 4px 6px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s, border-color 0.15s;
}
.frank-history-del .frank-trash-icon { display: block; }
.frank-history-item:hover .frank-history-del { opacity: 1; }
.frank-history-del:hover { color: var(--red); }
/* Armed confirmation state: always visible, red fill, "Delete?" label. */
.frank-history-del.confirm {
  opacity: 1;
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}
.frank-history-del.confirm:hover { color: #fff; }
.frank-history-preview {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frank-history-date {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 3px;
}

/* Main conversation column */
.frank-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}
.frank-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.frank-header-info { display: flex; align-items: center; gap: 12px; min-width: 0; }
.frank-header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Clear All — subtle/danger, less prominent than the primary New Conversation */
.frank-clear-all {
  background: none;
  border: 1px solid var(--border-hi);
  color: var(--text-2);
}
.frank-clear-all:hover:not(:disabled) {
  border-color: var(--red);
  color: var(--red);
  background: var(--red-dim);
}
.frank-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.frank-title { font-size: 16px; font-weight: 700; color: var(--text-0); }
.frank-subtitle { font-size: 12px; color: var(--text-2); margin-top: 1px; }

.frank-thread { background: var(--bg); }

/* Agent rows get a small avatar to the left of the bubble */
.frank-row { display: flex; align-items: flex-start; gap: 8px; max-width: 90%; }
.frank-row-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}
.frank-row .chat-msg, .frank-row .chat-typing { max-width: 100%; }

/* Stack the agent bubble and its (optional) export button on Frank's side. */
.frank-bubble-col { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; }
/* Small secondary "Export to Excel" button under report responses. */
.frank-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.frank-export-btn:hover {
  color: var(--green);
  border-color: var(--green);
  background: var(--green-dim);
}

/* Action confirmation shell */
.frank-action-card {
  flex-shrink: 0;
  margin: 0 16px 12px;
  padding: 14px 16px;
  background: var(--bg-2);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.frank-action-body { display: flex; align-items: flex-start; gap: 10px; }
.frank-action-icon { font-size: 18px; line-height: 1.3; flex-shrink: 0; }
.frank-action-text { font-size: 13.5px; color: var(--text-1); line-height: 1.5; }
.frank-action-text span { color: var(--amber); font-weight: 600; }
.frank-action-buttons { display: flex; justify-content: flex-end; gap: 8px; }

/* Context panel (desktop only) */
.frank-context {
  width: 296px;
  flex-shrink: 0;
  background: var(--bg-1);
  border-left: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.frank-context-header {
  padding: 16px 16px 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.frank-context-body { flex: 1; overflow-y: auto; padding: 16px; }
.frank-context-empty {
  color: var(--text-3);
  font-size: 12.5px;
  text-align: center;
  padding: 24px 12px;
  line-height: 1.6;
}
.frank-job-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.frank-job-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 10px;
}
.frank-context-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.frank-context-label { color: var(--text-3); flex-shrink: 0; }
.frank-context-val { color: var(--text-1); text-align: right; word-break: break-word; }

/* Mobile: thread fills the width; history + context hide */
@media (max-width: 900px) {
  .frank-context { display: none; }
}
@media (max-width: 640px) {
  .frank-history { display: none; }
  .frank-header { padding: 12px 16px; }
  .frank-avatar { width: 34px; height: 34px; font-size: 17px; }
  .frank-title { font-size: 15px; }
}

.mono-val {
  font-family: var(--font-mono);
  font-size: 11.5px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--cyan);
  word-break: break-all;
}

/* ── Sortable column headers ─────────────────────────────────────────────────── */
.th-sort {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.th-sort:hover { color: var(--text-1); }
.th-sort-active { color: var(--blue) !important; }
.sort-arrow {
  display: inline-block;
  font-size: 10px;
  color: var(--text-3);
  margin-left: 4px;
  min-width: 8px;
}
.th-sort-active .sort-arrow { color: var(--blue); }

/* ── Bulk action bar ─────────────────────────────────────────────────────────── */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: var(--blue-dim);
  border-bottom: 1px solid var(--blue);
}
.bulk-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  flex: 1;
}
.bulk-assign-select {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 5px 10px;
  font-size: 13px;
  min-width: 160px;
  outline: none;
}
.bulk-assign-select option { background: var(--bg-2); }

/* ── Tab bar (Leads / Archive) ───────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
}

/* Tab bars scroll horizontally on narrow screens with `scrollbar-width: none`,
   so they carry the same "no cue that there is more" problem the wide tables
   had — milder, because a half-cut tab is itself a hint, but the same class of
   thing. Same mechanism as .table-wrap: the `local` gradients scroll with the
   content and mask the `scroll` shadows, so the cue appears only when there is
   somewhere to scroll and disappears at each end, with no JS.

   Safe to apply unconditionally: when the content fits, the mask sits exactly
   over the shadow and nothing shows. */
.tab-bar, #outreach-tab-bar {
  background:
    linear-gradient(to right, var(--bg-1) 40%, rgba(17,20,30,0)) left  / 28px 100% no-repeat local,
    linear-gradient(to left,  var(--bg-1) 40%, rgba(17,20,30,0)) right / 28px 100% no-repeat local,
    linear-gradient(to right, rgba(0,0,0,.34), rgba(0,0,0,0))    left  / 12px 100% no-repeat scroll,
    linear-gradient(to left,  rgba(0,0,0,.34), rgba(0,0,0,0))    right / 12px 100% no-repeat scroll;
}
.tab-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 16px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.tab-btn:hover { background: var(--bg-3); color: var(--text-1); }
.tab-btn.tab-btn-active { background: var(--blue-dim); border-color: var(--blue); color: var(--blue); }
.tab-count {
  font-size: 11px;
  font-weight: 600;
  background: var(--bg-3);
  padding: 1px 7px;
  border-radius: 10px;
  color: var(--text-3);
  min-width: 22px;
  text-align: center;
}
.tab-btn.tab-btn-active .tab-count { background: var(--blue-dim); color: var(--blue); }

/* Business-unit tabs: the generic .tab-bar pill tabs. Unit names are long, so
   on a phone the row wraps instead of running off-screen (the generic mobile
   .tab-bar rule is nowrap with no scrolling). */
@media (max-width: 767px) {
  .tab-bar.unit-tab-bar { flex-wrap: wrap !important; }
}

/* ── Leads page region tiles (Leads / Archive / region tabs in one row) ──────── */
.leads-tab-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 0 12px 0;
  width: 100%;
}
.region-tab {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 80px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
  font-family: inherit;
}
.region-tab:hover { border-color: var(--blue); color: var(--text-0); }
.region-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.region-tab .tab-count {
  font-size: 18px;
  font-weight: 700;
  color: inherit;
  line-height: 1;
  /* override the pill styling inherited from the generic .tab-count */
  background: none;
  padding: 0;
  border-radius: 0;
  min-width: 0;
}
.region-tab .tab-label {
  font-size: 11px;
  opacity: 0.8;
  margin-top: 2px;
}

@media (max-width: 767px) {
  .region-tab { min-width: 60px; padding: 6px 10px; }
  .region-tab .tab-count { font-size: 15px; }
  .region-tab .tab-label { font-size: 10px; }
}

/* ── Filter bar ──────────────────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.filter-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 150px;
}
.filter-item label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
}
.filter-item select {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  cursor: pointer;
}
.filter-item select:focus { border-color: var(--blue); }
.filter-item select option { background: var(--bg-2); }

/* ── New referral (phone first) ────────────────────────────────────────────── */
.referral-card { max-width: 560px; padding: 16px; margin-bottom: 14px; }
.referral-card .form-group { margin-bottom: 12px; }
.referral-card input, .referral-card select, .referral-card textarea { width: 100%; font-size: 16px; box-sizing: border-box; }
.referral-row { display: flex; gap: 10px; }
.referral-row > .form-group { flex: 1; min-width: 0; }
.referral-row > .referral-state { flex: 0 0 70px; }
.referral-row > .referral-zip { flex: 0 0 100px; }
.referral-section-title { font-weight: 600; margin: 18px 0 8px; font-size: 14px; }
.referral-hint { font-size: 12px; margin: 4px 0 0; }
.referral-drop.is-desktop { border: 1px dashed var(--border-hi); border-radius: var(--radius-sm); padding: 10px 12px; }
.referral-drop.is-dragover { border-color: var(--blue); background: var(--bg-2); }
.referral-preview { max-width: 100%; max-height: 220px; margin-top: 8px; border-radius: 6px; border: 1px solid var(--border); }
.referral-source-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-top: 6px; }
.referral-source-list button { display: block; width: 100%; text-align: left; padding: 10px 12px; background: none; border: none; border-bottom: 1px solid var(--border); color: var(--text-0); font-size: 15px; cursor: pointer; }
.referral-source-list button:last-child { border-bottom: none; }
.referral-source-list button.selected { background: var(--bg-3); font-weight: 600; }
.referral-chosen { padding: 8px 12px; border-radius: var(--radius-sm); background: var(--bg-3); margin-bottom: 6px; font-weight: 600; }
.referral-error { color: var(--red, #e5484d); margin: 8px 0; font-size: 14px; white-space: pre-wrap; }
.referral-submit { width: 100%; padding: 14px; font-size: 16px; margin-top: 8px; }
.referral-result-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.referral-result-actions .btn { width: 100%; padding: 12px; font-size: 15px; text-align: center; }
@media (max-width: 480px) { .referral-row { flex-wrap: wrap; } .referral-row > .form-group { flex: 1 1 100%; } .referral-row > .referral-state, .referral-row > .referral-zip { flex: 1 1 40%; } }

/* ── Lead type picker (multi-select, server-side filter) ───────────────────── */
.trade-picker { position: relative; }
.trade-picker-btn {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 6px 10px;
  font-size: 12.5px;
  font-family: inherit;
  cursor: pointer;
  min-width: 150px;
  max-width: 220px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trade-picker-btn.active { border-color: var(--blue); }
.trade-picker-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  width: 280px;
  max-width: 90vw;
  background: var(--bg-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 8px;
}
.trade-picker-list { max-height: 300px; overflow-y: auto; }
.trade-picker-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px;
  font-size: 12.5px;
  color: var(--text-0);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  cursor: pointer;
}
.trade-picker-opt .count { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; }
.trade-picker-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }

/* ── Grade badge ──────────────────────────────────────────────────────────────── */
.badge-grade {
  font-size: 12px;
  font-weight: 700;
  min-width: 26px;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Tags (inline chips) ─────────────────────────────────────────────────────── */
.tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  color: var(--text-2);
  padding: 2px 8px;
  border-radius: 4px;
  margin: 2px 2px 2px 0;
}
.mono-small {
  font-family: var(--font-mono);
  font-size: 10.5px;
  word-break: break-all;
  color: var(--text-3);
}

/* ── Personnel cards ─────────────────────────────────────────────────────────── */
.personnel-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  margin-bottom: 8px;
}
.personnel-card:last-child { margin-bottom: 0; }
.personnel-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 5px;
}
.personnel-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.personnel-contact { font-size: 12px; color: var(--text-2); margin-top: 3px; }
.personnel-bio {
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: 5px;
  font-style: italic;
  line-height: 1.5;
}

/* ── Lead score display ──────────────────────────────────────────────────────── */
.score-display {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.score-number {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-0);
  line-height: 1;
}
.score-denom { font-size: 16px; color: var(--text-3); font-weight: 400; }
.score-factors { display: flex; flex-direction: column; gap: 6px; }
.score-factor {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
}
.score-factor-hit  { color: var(--green); }
.score-factor-miss { color: var(--text-3); }
.score-factor-icon { width: 14px; flex-shrink: 0; font-size: 13px; }

/* ── Email draft box ─────────────────────────────────────────────────────────── */
.email-draft-box {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-1);
  line-height: 1.65;
  margin-bottom: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Scrape stat grid extended ───────────────────────────────────────────────── */
.stat-grid-6 { grid-template-columns: repeat(3, 1fr); margin-bottom: 24px; }
.stat-grid-6 .stat-card { padding: 16px 18px; }
.stat-grid-6 .stat-value { font-size: 26px; }

/* ── Analytics page ──────────────────────────────────────────────────────────── */
.stat-grid-4 { grid-template-columns: repeat(4, 1fr); }
.stat-grid-2 { grid-template-columns: repeat(2, 1fr); }

.analytics-section-hdr {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 28px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.analytics-section-hdr:first-child { margin-top: 0; }

.analytics-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

/* Horizontal bar charts */
.hbar-chart { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.hbar-row   { display: flex; align-items: center; gap: 10px; }
.hbar-label {
  width: 140px;
  flex-shrink: 0;
  font-size: 12px;
  color: var(--text-2);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hbar-track {
  flex: 1;
  height: 8px;
  background: var(--bg-3);
  border-radius: 4px;
  overflow: hidden;
}
.hbar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.hbar-count {
  width: 36px;
  text-align: right;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-1);
  font-family: var(--font-mono);
  flex-shrink: 0;
}
.chart-empty {
  padding: 32px 20px;
  text-align: center;
  color: var(--text-3);
  font-size: 13px;
}

/* SVG line chart */
.line-chart-wrap { padding: 12px 16px 8px; }
.line-chart-svg  { width: 100%; display: block; height: 160px; }

/* Top metrics section */
.analytics-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.metric-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 10px;
}
.metric-val {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-0);
  line-height: 1;
  margin-bottom: 6px;
}
.metric-val-sm {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 4px;
}
.metric-sub { font-size: 12px; color: var(--text-3); }
.metric-cities { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.city-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--text-2);
}
.city-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  background: var(--bg-3);
  padding: 1px 6px;
  border-radius: 4px;
}

/* Analytics last-updated bar */
.analytics-updated-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-3);
}

/* ── Cyan badge (enriched / held for review) ─────────────────────────────────── */
.badge-cyan { background: var(--cyan-dim); color: var(--cyan); }

/* ── Checkbox column ─────────────────────────────────────────────────────────── */
.col-check { width: 36px; padding: 8px 12px !important; }
.col-check input[type="checkbox"],
.lead-check { cursor: pointer; width: 15px; height: 15px; accent-color: var(--blue); }

/* ── Leadlog table: compact column sizing ───────────────────────────────────── */
#leadlog-table thead th,
#leadlog-table tbody td { padding: 8px 8px; }
#leadlog-table .col-check { padding: 8px 10px !important; }
#leadlog-table .col-trade { width: 96px; }
#leadlog-table .col-trade .badge {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
}
#leadlog-table .col-phone-type { width: 80px; }
#leadlog-table .col-owner   { width: 120px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#leadlog-table .col-emp     { width: 72px; text-align: right; }
#leadlog-table .col-rep     { width: 110px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#leadlog-table .col-city    { width: 78px; }
#leadlog-table .col-zip     { width: 60px; white-space: nowrap; }
#leadlog-table .col-date    { width: 82px; white-space: nowrap; }
#leadlog-table .col-actions { width: 1%; white-space: nowrap; }

/* ── Icon-only action button (Archive / Delete in leads table) ───────────────── */
.btn-icon-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-hi);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  flex-shrink: 0;
  vertical-align: middle;
}
.btn-icon-sm:hover { background: var(--bg-3); color: var(--text-1); border-color: var(--text-3); }
.btn-icon-sm.danger { border-color: var(--red-dim); color: var(--red); }
.btn-icon-sm.danger:hover { background: var(--red-dim); }

/* ── Profile page ────────────────────────────────────────────────────────────── */
.pp-email-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.pp-email-row:last-child { border-bottom: none; }
.pp-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0 0 16px;
}

/* ── Appointment detail cards (analytics expandable) ────────────────────────── */
.appt-detail-card {
  margin-bottom: 16px;
}
.appt-detail-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.appt-table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-3);
  border-top: 1px solid var(--border);
}

/* ── Clickable stat cards (scrape result summary) ───────────────────────────── */
.stat-card-clickable {
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.stat-card-clickable:hover {
  border-color: var(--card-accent, var(--blue));
  background: var(--bg-3);
}

/* ── Assigned Leads admin page ──────────────────────────────────────────────── */
.assigned-rep-row {
  cursor: pointer;
  user-select: none;
}
.assigned-rep-row:hover td { background: var(--bg-3); }
.assigned-rep-row.expanded td { background: var(--bg-3); font-weight: 600; }
.expand-cell {
  color: var(--text-3);
  font-size: 10px;
  text-align: center;
  padding: 0 8px;
}
.assigned-subtable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.assigned-subtable th {
  background: var(--bg-2);
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-2);
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.assigned-subtable td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.assigned-subtable tbody tr:last-child td { border-bottom: none; }
.assigned-subtable tbody tr:hover td { background: var(--bg-2); }

/* Clickable rep lead rows (Admin → Reps → expanded rep leads) open the shared
   lead detail slide-out. The "View Lead →" affordance reveals on row hover. */
.assigned-subtable tbody tr.rep-lead-row { cursor: pointer; }
.view-lead-hint {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-3);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s, color 0.12s;
}
.assigned-subtable tbody tr.rep-lead-row:hover .view-lead-hint {
  opacity: 1;
  color: var(--blue);
}

/* ── Amber button ─────────────────────────────────────────────────────── */
.btn-amber {
  background: var(--amber-dim);
  color: var(--amber);
  border-color: var(--amber);
}
.btn-amber:hover:not(:disabled) { background: var(--amber); color: #0c0e14; }

/* ── Toggle switch ──────────────────────────────────────────────────────────── */
.toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.toggle-input { display: none; }
.toggle-track {
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: 11px;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.toggle-input:checked + .toggle-track {
  background: var(--blue-dim);
  border-color: var(--blue);
}
.toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: var(--text-3);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(16px);
  background: var(--blue);
}
/* Compact inline toggle (no label text) — used in the Reps table Frank column */
.toggle-label-sm { gap: 0; display: inline-flex; }

/* ── Status dots (Reps table) ────────────────────────────────────────────────── */
.status-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: middle;
}
.status-active   { background: var(--green);  box-shadow: 0 0 6px var(--green); }
.status-inactive { background: var(--text-3); }
.status-pending  { background: var(--amber);  box-shadow: 0 0 6px var(--amber); }
/* Pending-invite rows get a subtle amber wash to set them apart from real reps */
.row-invite td { background: rgba(245, 166, 35, 0.05); }

/* ── All Users table — responsive columns ────────────────────────────────────── */
/* Desktop: every data column shows; the expand chevron + mobile detail row are
   a small-screen affordance and stay hidden. */
.users-table .col-expand { display: none; }
.users-table .user-detail-row { display: none; }
.users-table tbody tr[onclick] { cursor: default; }

@media (max-width: 767px) {
  .users-table .col-mobile-hide { display: none; }
  .users-table .col-expand { display: table-cell; width: 26px; }
  .users-table tbody tr[onclick] { cursor: pointer; }
  .users-table .user-detail-row { display: table-row; }
  .users-table .user-detail-row td { background: var(--bg-1); padding: 0; }
  .user-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    padding: 12px 14px;
  }
  .user-detail-grid > div { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-1); }
  .user-detail-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-3);
  }
}

.auto-push-note {
  font-size: 12px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.note-off { color: var(--text-2); background: var(--bg-3); border-color: var(--border); }
.note-on  { color: var(--cyan);   background: var(--cyan-dim); border-color: var(--cyan); }

/* ── Toast notification ───────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  color: var(--text-0);
  padding: 11px 22px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  z-index: var(--z-toast);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}
.toast.show { opacity: 1; }
.toast.toast-warn {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #78350f;
  pointer-events: auto;
  white-space: normal;
  max-width: 480px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRM OUTREACH & INBOX — added styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nav divider + inbox badge ──────────────────────────────────────────────── */
.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 10px;
}
.nav-badge {
  margin-left: auto;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}
.nav-dot {
  margin-left: auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.nav-dot-red    { background: var(--red);   box-shadow: 0 0 0 3px rgba(240,69,96,0.18); }
.nav-dot-yellow { background: var(--amber); box-shadow: 0 0 0 3px rgba(245,166,35,0.18); }

/* ── Partner re-engagement alert modal ──────────────────────────────────────── */
.reengage-list { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 8px; max-height: 46vh; overflow-y: auto; }
.reengage-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: var(--bg-1);
}
.reengage-row-info { flex: 1; min-width: 0; }
.reengage-row-name { font-weight: 600; font-size: 14px; }
.reengage-row-sub  { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.reengage-row-days { font-size: 12px; font-weight: 700; white-space: nowrap; }
.reengage-row-days.overdue { color: var(--red); }
.reengage-row-days.soon    { color: var(--amber); }
.reengage-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.reengage-actions .btn { padding: 4px 8px; font-size: 12px; }
.reengage-more { text-align: center; font-size: 12px; color: var(--text-3); padding: 6px 0; }

/* ── Partner snooze ────────────────────────────────────────────────────────── */
.snooze-popover {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 20;
  width: 240px; padding: 10px; background: var(--bg-1);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}
.snooze-popover-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.snooze-popover-opts .btn { padding: 4px 8px; font-size: 12px; }
.snooze-popover-custom { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px solid var(--border); }
.snooze-popover-custom input { font-size: 12px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-0); color: var(--text-0); }
.snooze-dot { font-size: 12px; margin-right: 2px; }

/* ── CRM status badges ──────────────────────────────────────────────────────── */
.badge-crm-new               { background: var(--bg-3);       color: var(--text-2); }
.badge-crm-contacted         { background: var(--blue-dim);   color: var(--blue); }
.badge-crm-appointment_set   { background: var(--purple-dim); color: var(--purple); }
.badge-crm-meeting_completed { background: var(--green-dim);  color: var(--green); }
.badge-crm-follow_up         { background: var(--amber-dim);  color: var(--amber); }
.badge-crm-partner           { background: var(--gold-dim);   color: var(--gold); }

/* ── Conversation search ────────────────────────────────────────────────────── */
.conv-search-row { margin-bottom: 12px; }
.conv-search {
  width: 100%;
  background: var(--bg-2);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 9px 14px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.conv-search:focus { border-color: var(--blue); }
.conv-search::placeholder { color: var(--text-3); }

/* ── Conversation list items ────────────────────────────────────────────────── */
.conv-list { display: flex; flex-direction: column; gap: 3px; }

.conv-item {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  cursor: pointer;
  transition: background 0.1s, border-color 0.1s;
  border-left-width: 3px;
  border-left-color: transparent;
}
.conv-item:hover { background: var(--bg-3); border-color: var(--border-hi); }
.conv-item.has-unread { border-left-color: var(--blue); }
.conv-item.conv-item-highlight {
  background: var(--blue-dim);
  border-color: var(--blue);
  animation: conv-highlight-pulse 0.6s ease-in-out 0s 2;
}
@keyframes conv-highlight-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 2px var(--blue); }
}

.conv-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  flex-shrink: 0;
  text-transform: uppercase;
}

.conv-main { flex: 1; min-width: 0; }
.conv-name-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}
.conv-name { font-size: 13.5px; font-weight: 600; color: var(--text-0); }
.conv-time { font-size: 11px; color: var(--text-3); white-space: nowrap; flex-shrink: 0; }
.conv-biz {
  font-size: 12px; color: var(--text-2);
  margin-bottom: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conv-preview-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.conv-preview {
  font-size: 12.5px;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.conv-preview.inbound { color: var(--text-1); font-weight: 500; }

.conv-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}
.conv-unread {
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
}

/* ── CRM slide-out panel ────────────────────────────────────────────────────── */
.crm-panel { width: 560px; }

.panel-biz { font-size: 12px; color: var(--text-3); margin-top: 2px; }

.crm-info-bar {
  padding: 10px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--bg-2);
  flex-shrink: 0;
}
.crm-info-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  color: var(--text-2);
}
.crm-info-item a { color: var(--blue); font-size: 12.5px; }

.crm-actions-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
  flex-shrink: 0;
}
.crm-status-select {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 7px 10px;
  font-size: 12.5px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  flex: 1;
  transition: border-color 0.15s;
}
.crm-status-select:focus { border-color: var(--blue); }
.crm-status-select option { background: var(--bg-2); }

/* ── Message thread ─────────────────────────────────────────────────────────── */
.msg-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.msg-bubble-wrap { display: flex; flex-direction: column; }
.msg-bubble-wrap.outbound { align-items: flex-end; }
.msg-bubble-wrap.inbound  { align-items: flex-start; }

.msg-bubble {
  max-width: 80%;
  padding: 9px 14px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.55;
  word-break: break-word;
  white-space: pre-wrap;
}
.msg-bubble.outbound {
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  color: var(--text-0);
  border-bottom-right-radius: 4px;
}
.msg-bubble.inbound {
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  color: var(--text-1);
  border-bottom-left-radius: 4px;
}
.msg-bubble.email-msg { border-style: dashed; }

.msg-subject {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 5px;
  padding: 0 2px;
}
.msg-meta {
  font-size: 10.5px;
  color: var(--text-3);
  margin-top: 3px;
  padding: 0 3px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.msg-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.msg-email-track { margin-top: 3px; padding: 0 3px; }
.email-track {
  font-size: 10.5px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 10px;
  white-space: nowrap;
}
.email-track.pending   { color: var(--text-3); }
.email-track.sent      { color: var(--text-2); }
.email-track.delivered { color: var(--blue); }
.email-track.opened    { color: var(--green); cursor: default; }
.email-track.clicked   { color: var(--cyan); cursor: default; }
.email-track.bounced,
.email-track.complained { color: var(--red); }

.msg-day-divider {
  text-align: center;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-3);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 0;
  position: relative;
}
.msg-day-divider::before, .msg-day-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background: var(--border);
}
.msg-day-divider::before { left: 0; }
.msg-day-divider::after  { right: 0; }

.msg-system-note {
  text-align: center;
  font-size: 11px;
  color: var(--text-3);
  padding: 2px 12px;
  margin: 2px 0;
  font-style: italic;
}

/* Activity-log entry (call attempts, status changes, manual notes, …). Styled
   as a left-aligned grey log line — deliberately NOT a chat bubble. */
.msg-activity {
  align-self: flex-start;
  max-width: 92%;
  margin: 4px 0;
  padding: 6px 10px 6px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-3);
  border-radius: var(--radius-sm);
}
.msg-activity.note-call_attempt   { border-left-color: var(--blue); }
.msg-activity.note-manual         { border-left-color: var(--amber); }
.msg-activity.note-status_change  { border-left-color: var(--purple); }
.msg-activity.note-appointment_set{ border-left-color: var(--green); }
.msg-activity.note-email_sent,

/* Inline manual-note composer in the conversation panel */
.crm-note-composer {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-1);
}
.crm-note-composer input {
  flex: 1;
  min-width: 0;
}

/* ── Modal ──────────────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  /* Above every Leaflet pane. Was 200, which lost to the map's own tiles. */
  z-index: var(--z-modal);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal {
  background: var(--bg-1);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  width: 480px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.modal-title { font-size: 15px; font-weight: 700; color: var(--text-0); }
.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-body .form-group { padding: 0; margin-bottom: 0; }
/* .modal-body is a column flex container, so every child is a flex item and
   inherits flex-shrink: 1. Against the container's max-height that silently
   compressed fields toward nothing: a textarea with rows="10" holding 21 lines
   of workflow mapping rendered about one line tall with the rest clipped, and
   the `rows` attribute looked like it was being ignored. It was not — it sets
   the height that shrinking then took away.

   Children keep their natural height and the body scrolls instead, which is
   what overflow-y: auto above was always for. */
.modal-body > * { flex-shrink: 0; }
.modal-body textarea {
  /* Drag-to-resize for the cases where the content outgrows even the new
     defaults. Vertical only — horizontal would break out of the modal. */
  resize: vertical;
  min-height: 64px;
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
/* Drag-to-resize, native. `.modal` is already overflow: hidden, which is the
   only precondition CSS resize has, so this costs one declaration rather than
   a drag handler. The grip sits in the bottom-right corner.
   Bounds keep it usable: never smaller than the widest form-row, never larger
   than the viewport it has to sit inside. */
.modal-resizable {
  resize: both;
  min-width: 420px;
  min-height: 320px;
  max-width: 96vw;
  max-height: 92vh;
}
.msg-textarea {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  padding: 10px 12px;
  font-size: 13.5px;
  font-family: inherit;
  outline: none;
  resize: vertical;
  line-height: 1.55;
  transition: border-color 0.15s;
}
.msg-textarea:focus { border-color: var(--blue); }

/* ── Lead picker results ────────────────────────────────────────────────────── */
.lead-pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
.lead-pick-row:last-child { border-bottom: none; }
.lead-pick-row:hover { background: var(--bg-3); }
.lead-pick-name { font-size: 13.5px; font-weight: 600; color: var(--text-0); }
.lead-pick-meta { font-size: 12px; color: var(--text-3); margin-top: 1px; }
.lead-pick-badge { margin-left: auto; flex-shrink: 0; }

/* ── Mobile responsive ──────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .crm-panel    { width: 100vw; }
  .page         { padding: 20px 16px 40px; }
  .tab-bar      { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .tab-btn      { flex-shrink: 0; font-size: 12px; padding: 6px 12px; }
  .analytics-2col   { grid-template-columns: 1fr; }
  .settings-grid    { grid-template-columns: 1fr; }
  .analytics-metrics-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Auth / Admin additions ──────────────────────────────────────────────────── */

/* Sidebar user info + logout */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px 10px;
  border-top: 1px solid var(--border);
  margin-bottom: 6px;
}
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--blue-dim);
  border: 1px solid var(--blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--blue);
  flex-shrink: 0;
}
.user-info { flex: 1; min-width: 0; }
.user-name {
  font-size: 12px; font-weight: 600; color: var(--text-1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-role-label { font-size: 10px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.4px; }

.btn-signout {
  background: none;
  border: none;
  color: var(--red);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 6px 0;
  width: 100%;
  text-align: left;
  font-family: inherit;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.btn-signout:hover { opacity: 1; }

.btn-logout {
  background: none;
  border: none;
  color: var(--text-3);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.btn-logout:hover { color: var(--red); background: var(--red-dim); }

/* Sidebar nav section label */
.nav-section-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 8px 12px 2px;
}

/* Inactive rep row */
.row-inactive { opacity: 0.55; }

/* Admin entity cards grid (companies, territories) */
.admin-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.admin-entity-card {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.entity-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-0);
  margin-bottom: 4px;
}

.entity-field-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-3);
  display: block;
  margin-bottom: 5px;
}

.entity-input {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  font-size: 13px;
  padding: 7px 10px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s;
}
.entity-input:focus { border-color: var(--blue); }

.entity-select {
  width: 100%;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  font-size: 13px;
  padding: 4px 6px;
  outline: none;
  font-family: inherit;
}
.entity-select option { padding: 4px; }

.btn-success { color: var(--green) !important; border-color: var(--green) !important; opacity: 0.8; }

/* ═══════════════════════════════════════════════════════════════════════════
   PWA + MOBILE RESPONSIVE (< 768px)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── PWA service worker registration ────────────────────────────────────── */
/* sw.js is registered in app.js init() */

/* ── Mobile nav elements (hidden on desktop) ─────────────────────────────── */
.mobile-top-bar  { display: none; }
.mobile-header   { display: none; }
.bottom-nav      { display: none; }
.hamburger-close { display: none; }

@media (max-width: 767px) {

  /* ── Base layout: fixed shell, absolutely-positioned scroll area ──────── */
  html, body {
    overflow: hidden;
    height: 100%;
  }

  /* App becomes a fixed fullscreen shell — no flex needed */
  .app {
    position: fixed;
    inset: 0;
    display: block;
    overflow: hidden;
  }

  /* Permanent mobile top bar — direct child of <body>, never inside .app */
  .mobile-top-bar {
    display: flex;
    position: fixed;
    top: 0; left: 0; right: 0;
    /* Pin to the very top; the background fills behind the iOS status bar /
       Dynamic Island while padding-top drops the 56px content row (hamburger,
       title, bell) below the safe area. The 20px fallback covers browsers that
       don't support env(). viewport-fit=cover in <head> makes env() non-zero. */
    height: calc(56px + env(safe-area-inset-top, 20px));
    padding: env(safe-area-inset-top, 20px) 14px 0;
    z-index: 400;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    align-items: center;
    justify-content: space-between;
  }

  /* Old mobile-header stub inside .main — hide it on mobile */
  .mobile-header { display: none !important; }

  /* Main: absolute slot below the top bar, above the bottom nav. Its top must
     match the bar's full height (56px + the safe-area inset added above).
     Bottom padding accounts for the fixed bottom nav (58px + safe area). */
  .main {
    position: absolute;
    top: calc(56px + env(safe-area-inset-top, 20px));
    bottom: 0;
    left: 0;
    right: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
    /* undo flex props from desktop */
    flex: unset;
    min-height: unset;
  }

  /* Touch interaction quality */
  button, .btn, a, [onclick], .nav-link, .bottom-nav-item,
  .conv-item, .more-item, .card, .stat-card, .tab-btn {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.15);
    touch-action: manipulation;
  }

  /* ── Sidebar overlay ─────────────────────────────────────────────────── */
  .sidebar {
    position: fixed;
    top: 0; left: 0;
    height: 100%;
    z-index: var(--z-sidebar);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    width: 260px;
    max-width: 85vw;
    overflow-y: auto;
  }
  .sidebar.mobile-open { transform: translateX(0); }

  /* Sidebar nav scrolls independently on mobile */
  .sidebar-nav { overflow-y: auto; }

  /* Hide desktop footer (user info / conn dots) on mobile — logout is in the nav */
  .sidebar-footer { display: none !important; }

  /* Show logout section at bottom of mobile sidebar */
  .sidebar-logout-section { display: block; }

  /* Sidebar backdrop */
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    /* One below the sidebar it dims. */
    z-index: calc(var(--z-sidebar) - 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s;
  }
  .sidebar-backdrop.active { opacity: 1; pointer-events: all; }

  /* Hamburger close button inside sidebar */
  .hamburger-close {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-2);
    font-size: 18px;
    padding: 4px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    margin-right: 4px;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
  }
  .hamburger-close:hover { color: var(--text-0); background: var(--bg-3); }

  /* ── Hamburger button (inside .mobile-top-bar) ──────────────────────────── */
  .hamburger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--text-1);
    padding: 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    min-width: 34px;
    min-height: 34px;
  }
  .hamburger-btn:hover { background: var(--bg-2); }
  .mobile-page-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-0);
    flex: 1;
    text-align: center;
  }

  /* ── Pages ───────────────────────────────────────────────────────────── */
  .page { padding: 14px 14px 80px; }
  .page-header { margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
  .page-header h1 { font-size: 18px; }

  /* ── Stat grids ──────────────────────────────────────────────────────── */
  .stat-grid,
  .stat-grid-5,
  .stat-grid-6,
  .stat-grid-4 { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
  .stat-grid-2  { grid-template-columns: 1fr; }
  .stat-card    { padding: 14px 16px; }
  .stat-value   { font-size: 26px; }
  .analytics-metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .analytics-2col         { grid-template-columns: 1fr; gap: 12px; }
  .settings-grid          { grid-template-columns: 1fr; gap: 12px; }

  /* ── Bottom navigation bar ───────────────────────────────────────────── */
  .bottom-nav {
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 58px;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    /* Was 1000 — a tie with Leaflet's corner control containers, which the
       dispatch map puts on the same screen. Ties resolve by document order,
       so the nav was one DOM change away from disappearing under the map. */
    z-index: var(--z-app-chrome);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-3);
    text-decoration: none;
    font-size: 10px;
    font-weight: 500;
    padding: 6px 4px;
    transition: color 0.15s;
    min-height: 44px;
  }
  .bottom-nav-item:hover { text-decoration: none; color: var(--text-1); }
  .bottom-nav-item.active { color: var(--blue); }

  /* ── Touch targets ───────────────────────────────────────────────────── */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; font-size: 13px; }
  .nav-link { min-height: 48px; padding: 12px 16px; }
  .tab-btn  { min-height: 40px; }

  /* ── Prevent iOS zoom on focus ───────────────────────────────────────── */
  input, select, textarea { font-size: 16px !important; }

  /* ── Outreach tab bar: horizontal scroll ─────────────────────────────── */
  #outreach-tab-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 -14px;
    padding: 0 14px 6px;
  }
  #outreach-tab-bar::-webkit-scrollbar { display: none; }
  #outreach-tab-bar .tab-btn { flex-shrink: 0; }

  /* ── Conversation cards (outreach/inbox) ─────────────────────────────── */
  .conv-item { padding: 12px 14px; gap: 12px; }
  .conv-avatar { width: 38px; height: 38px; font-size: 14px; }
  .conv-name   { font-size: 14px; }

  /* ── CRM slide-out panel → full screen ───────────────────────────────── */
  .crm-panel {
    width: 100vw;
    border-left: none;
  }
  /* Back button in panel header on mobile */
  .panel-header .panel-back-btn { display: flex !important; }

  /* ── Send modals → full screen ───────────────────────────────────────── */
  #email-modal,
  #assign-lead-modal {
    padding: 0;
    align-items: flex-start;
  }
  #email-modal .modal,
  #assign-lead-modal .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
    border: none;
  }
  #email-modal .modal-body {
    flex: 1;
    overflow-y: auto;
  }
  #email-modal .msg-textarea { min-height: 220px; }
  #email-modal .modal-footer {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }

  /* Other modals: slide up from bottom */
  .modal-overlay {
    padding: 0;
    align-items: flex-end;
  }
  .modal {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius) var(--radius) 0 0;
    max-height: 90dvh;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* ── Leads table → card view ─────────────────────────────────────────── */
  /* col positions: 1=check 2=business 3=trade 4=owner 5=employees 6=rep 7=city 8=date 9=actions */
  #leadlog-table thead,
  #leadlog-table .col-check,
  #leadlog-body td:nth-child(1),
  #leadlog-body td:nth-child(5),
  #leadlog-body td:nth-child(6),
  #leadlog-body td:nth-child(7),
  #leadlog-body td:nth-child(8),
  #leadlog-body td.col-zip { display: none; }  /* ZIP is desktop-only */

  #leadlog-table { display: block; }
  #leadlog-table tbody { display: flex; flex-direction: column; gap: 8px; padding: 0; }

  #leadlog-body tr {
    display: block;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    cursor: pointer;
  }
  #leadlog-body tr:hover { background: var(--bg-3); }
  #leadlog-body td {
    display: block;
    padding: 2px 0;
    border: none;
    font-size: 13px;
  }
  #leadlog-body td:nth-child(2) { font-size: 14px; font-weight: 700; color: var(--text-0); margin-bottom: 4px; }
  #leadlog-body td:nth-child(9) { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
  #leadlog-body td:nth-child(9) { white-space: normal !important; display: flex; flex-wrap: wrap; gap: 6px; }

  /* Hide bulk action bar column check on mobile */
  .bulk-bar .col-check { display: none; }

  /* ── Filter bar → collapsible ────────────────────────────────────────── */
  .filter-bar { display: none; }
  .filter-bar.mobile-open { display: flex; flex-direction: column; }
  .mobile-filter-toggle-btn { display: flex; }

  /* ── Admin reps table → cards ────────────────────────────────────────── */
  #admin-reps-body tr {
    display: block;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    margin-bottom: 8px;
  }
  #admin-reps-body td {
    display: block;
    padding: 3px 0;
    border: none;
    font-size: 13px;
  }

  /* Tappable lead cards have no hover — always show the "View Lead →" hint. */
  .rep-lead-row .view-lead-hint {
    opacity: 1;
    color: var(--blue);
    display: inline-block;
    margin-top: 2px;
  }

  /* ── Profile page: stack columns ─────────────────────────────────────── */
  .profile-grid { grid-template-columns: 1fr !important; }

  /* ── Toast adjust for bottom nav ─────────────────────────────────────── */
  .toast { bottom: 72px; }

  /* ── Invite modal: full screen ───────────────────────────────────────── */
  #invite-modal .modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    height: 100dvh;
    border-radius: 0;
  }

  /* ── Pull-to-refresh indicator ───────────────────────────────────────── */
  .ptr-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    color: var(--text-3);
    font-size: 13px;
    gap: 8px;
    margin-top: -52px;
    transition: margin-top 0.2s;
  }
  .ptr-indicator.ptr-visible { margin-top: 0; }
  .ptr-spinner {
    width: 16px; height: 16px;
    border: 2px solid var(--border-hi);
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
  }

  /* ── Smooth transitions ──────────────────────────────────────────────── */
  .sidebar, .sidebar-backdrop, .crm-panel, .panel-overlay {
    will-change: transform, opacity;
  }

  /* ── Overlay safety: never block interaction when closed ─────────────── */
  .panel-overlay:not(.open),
  .sidebar-backdrop:not(.active),
  .more-backdrop:not(.active) {
    pointer-events: none !important;
  }
}

/* ── Upload Leads dropzone ───────────────────────────────────────────────── */
.upload-dropzone {
  border: 2px dashed var(--border-hi);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  cursor: pointer;
  background: var(--bg-2);
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.upload-dropzone:hover,
.upload-dropzone.ul-dropzone-active {
  border-color: var(--blue);
  background: var(--bg-3);
}
.upload-dropzone-icon { font-size: 26px; margin-bottom: 8px; color: var(--text-3); }
.upload-dropzone-text { font-size: 13px; font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.upload-dropzone-sub  { font-size: 11px; color: var(--text-3); }

#ul-preview .data-table th,
#ul-preview .data-table td {
  font-size: 11px;
  padding: 4px 8px;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Safe area insets (notched devices) ──────────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 767px) {
    .bottom-nav {
      padding-bottom: env(safe-area-inset-bottom);
      height: calc(58px + env(safe-area-inset-bottom));
    }
    /* .main already includes env(safe-area-inset-bottom) in its padding-bottom */
  }
}

/* ── Conversation list badges ─────────────────────────────────────────────── */
.conv-booked-badge {
  font-size: 13px;
  line-height: 1;
}
/* ── Tasks page ──────────────────────────────────────────────────────────── */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.task-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.task-card.task-done {
  opacity: 0.6;
}
.task-card-icon {
  font-size: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.task-card-body {
  flex: 1;
  min-width: 0;
}
.task-card-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-0);
  margin-bottom: 4px;
}
.task-card-biz {
  font-weight: 400;
  color: var(--text-2);
}
.task-card-meta {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 4px;
}
.task-card-done-label {
  font-size: 12px;
  color: var(--green);
  margin-top: 6px;
}

/* ── More menu (mobile slide-up sheet) ───────────────────────────────────────── */
.more-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.more-backdrop.active { opacity: 1; pointer-events: all; }

.more-sheet {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-1);
  border-radius: 18px 18px 0 0;
  border-top: 1px solid var(--border);
  z-index: 9999;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 12px 20px 20px;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  max-height: 80dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.more-sheet.open { transform: translateY(0); }

.more-sheet-handle {
  width: 40px;
  height: 4px;
  background: var(--border-hi);
  border-radius: 2px;
  margin: 0 auto 16px;
  flex-shrink: 0;
}
.more-sheet-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
}
.more-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.more-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-1);
  text-decoration: none;
  font-size: 11.5px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  min-height: 72px;
}
.more-item:hover,
.more-item:active { background: var(--bg-3); color: var(--blue); text-decoration: none; }

/* Only show on mobile */
@media (min-width: 768px) {
  .more-backdrop,
  .more-sheet,
  .more-nav-btn { display: none !important; }
}
@media (max-width: 767px) {
  .more-backdrop,
  .more-sheet { display: block; }
}

/* ── CRM panel back button (mobile) / close button (desktop) ─────────────────── */
.panel-back-btn  { display: none; }
.panel-close-btn { display: flex; }

@media (max-width: 767px) {
  .panel-back-btn  { display: flex !important; align-items: center; gap: 4px; }
  .panel-close-btn { display: none !important; }
}

/* ── Mobile filter toggle button ─────────────────────────────────────────────── */
.mobile-filter-toggle-btn {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-1);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-bottom: 10px;
  min-height: 40px;
  font-family: inherit;
  transition: background 0.15s;
}
.mobile-filter-toggle-btn:hover { background: var(--bg-3); }

@media (max-width: 767px) {
  .mobile-filter-toggle-btn { display: flex; }
}

/* ── Bottom nav More button as button element ────────────────────────────────── */
button.bottom-nav-item {
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}

/* ── Swipe reveal actions on conv items ──────────────────────────────────────── */
.conv-item {
  position: relative;
  transition: transform 0.15s ease;
  touch-action: pan-y;
}
.conv-swipe-actions {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  pointer-events: none;
}
.conv-swipe-actions.revealed { pointer-events: all; }
.conv-swipe-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  font-size: 11px;
  font-weight: 600;
  gap: 4px;
  border: none;
  cursor: pointer;
  color: #fff;
}
.conv-swipe-btn.swipe-archive { background: var(--amber); }
.conv-swipe-btn.swipe-delete  { background: var(--red); }

/* ── FAB (Floating Action Button) for templates, admin pages ────────────────── */
.fab {
  position: fixed;
  bottom: calc(74px + env(safe-area-inset-bottom));
  right: 20px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  border: none;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  cursor: pointer;
  z-index: 100;
  transition: background 0.15s, transform 0.15s;
}
.fab:hover { background: var(--blue-dim); transform: scale(1.05); }
@media (max-width: 767px) { .fab { display: flex; } }

/* ── Lead cards: long-press bulk select mode ─────────────────────────────────── */
#leadlog-body tr.bulk-selecting {
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}
#leadlog-body tr.selected-row {
  background: var(--blue-dim) !important;
  outline: 2px solid var(--blue);
  outline-offset: -2px;
}

/* ── Sidebar action + logout sections (mobile only) ─────────────────────── */
.mobile-quick-actions { display: none; }

@media (max-width: 767px) {
  .mobile-quick-actions { display: flex; flex-direction: column; }
}
@media (min-width: 768px) {
  .mobile-quick-actions  { display: none !important; }
  .sidebar-logout-section { display: none !important; }
}

/* ── Problem 1: Hide Leads page header action buttons on mobile ───────────── */
@media (max-width: 767px) {
  /* The button-group div is the last child of .page-header on the Leads page */
  #page-leadlog .page-header > div:last-child { display: none !important; }
  /* Belt-and-suspenders: target by onclick attribute */
  [onclick="newLeadModal.open()"],
  [onclick="scanCardModal.open()"],
  [onclick="importUrlModal.open()"] { display: none !important; }
}

/* ── Problem 3: Tab-bar scroll behaviour ─────────────────────────────────── */
/* The generic .tab-bar (Leads / Archive) must NOT scroll — only 2 tabs */
@media (max-width: 767px) {
  .tab-bar {
    overflow-x: visible !important;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }

  /* Outreach status tabs — many tabs, keep horizontal scroll */
  #outreach-tab-bar {
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    margin: 0 -14px !important;
    padding: 0 14px 6px !important;
  }
  #outreach-tab-bar::-webkit-scrollbar { display: none; }
  #outreach-tab-bar .tab-btn { flex-shrink: 0 !important; }
}

/* ── Tel links (clickable phone numbers) ───────────────────────────────────── */
.tel-link { color: inherit; text-decoration: none; }
.tel-link:hover { text-decoration: underline; color: var(--accent, var(--blue)); }

/* ── Score badge in lead table ─────────────────────────────────────────────── */
.score-chip {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 12px;
  min-width: 28px;
  text-align: center;
}
.score-chip.score-high   { background: var(--green-dim); color: var(--green); }
.score-chip.score-mid    { background: var(--amber-dim); color: var(--amber); }
.score-chip.score-orange { background: rgba(234,88,12,0.16); color: #fb923c; }
.score-chip.score-grey,
.score-chip.score-low    { background: var(--bg-3);      color: var(--text-3); }
.score-chip[data-score-badge] { cursor: pointer; }

/* ── Score breakdown tooltip / panel ───────────────────────────────────────── */
.score-tooltip-floating {
  position: absolute;
  z-index: 4000;
  width: 280px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  padding: 0;
  font-size: 12px;
  color: var(--text-1);
  pointer-events: none;
}
.score-breakdown-box {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-2);
}
.score-bd-head, .score-bd-total {
  padding: 8px 12px;
  font-weight: 700;
  background: var(--bg-3);
}
.score-bd-head  { border-bottom: 1px solid var(--border); }
.score-bd-total { border-top: 1px solid var(--border); }
.score-bd-body { padding: 8px 12px; }
.score-bd-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.score-bd-row:first-child { margin-top: 0; }
.score-bd-icon { flex-shrink: 0; }
.score-bd-name { flex: 1; color: var(--text-1); }
.score-bd-pts  { font-weight: 700; color: var(--green); flex-shrink: 0; }
.score-bd-note {
  font-size: 11px;
  color: var(--text-3);
  margin: 1px 0 0 24px;
  line-height: 1.35;
}

/* ── AET (American Environmental Testing) ─────────────────────────────────── */
.aet-type-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
  white-space: nowrap;
}
.aet-type-mold        { background: rgba(74,124,89,0.25);  color: #6bba8a; }
.aet-type-air_quality { background: rgba(74,111,165,0.25); color: #7aaae0; }
.aet-type-asbestos    { background: rgba(139,94,60,0.25);  color: #c49a6c; }
.aet-type-water       { background: rgba(58,124,165,0.25); color: #6ab5dc; }
.aet-type-lead_paint  { background: rgba(124,74,74,0.25);  color: #d48a8a; }
.aet-type-other       { background: var(--bg-3);           color: var(--text-2); }

/* ===========================================================================
 * Territory Map (public/map.js)
 * ========================================================================= */
.map-header-controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

#map-root { display: flex; flex-direction: column; gap: 12px; }

.map-input {
  background: var(--bg-3);
  border: 1px solid var(--border);
  color: var(--text-1);
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  min-width: 130px;
}
.map-input:focus { border-color: var(--blue); outline: none; }

.map-toolbar { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.map-filterbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.map-layers, .map-scheme { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.map-scheme { padding-left: 12px; border-left: 1px solid var(--border); }
.map-chk {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-2); cursor: pointer; user-select: none;
}
.map-chk input { accent-color: var(--blue); cursor: pointer; }

/* Saved views */
.map-views { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.map-view-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-3); border: 1px solid var(--border-hi);
  color: var(--text-1); border-radius: 999px; padding: 4px 10px;
  font-size: 12px; cursor: pointer;
}
.map-view-chip:hover { border-color: var(--blue); }
.map-view-x { color: var(--text-3); font-size: 11px; }
.map-view-x:hover { color: var(--red); }

/* Selected-zone chips */
.map-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-height: 0; }
.map-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(99,102,241,0.14); border: 1px solid #6366f1;
  color: var(--text-0); border-radius: 999px; padding: 4px 6px 4px 11px;
  font-size: 12px; font-weight: 600;
}
.map-chip-count { color: var(--text-2); font-weight: 400; }
.map-chip-x {
  border: none; background: transparent; color: var(--text-2);
  cursor: pointer; font-size: 12px; line-height: 1; padding: 2px 4px; border-radius: 4px;
}
.map-chip-x:hover { background: rgba(240,69,96,0.2); color: var(--red); }
.map-clear { margin-left: 4px; }

/* Split layout */
.map-split { display: flex; gap: 12px; height: calc(100vh - 300px); min-height: 480px; }
.map-pane { position: relative; flex: 1 1 60%; min-width: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
#map-canvas { position: absolute; inset: 0; height: 100%; width: 100%; background: var(--bg-3); z-index: 1; }

.map-controls { position: absolute; top: 10px; right: 10px; z-index: 500; display: flex; flex-direction: column; gap: 6px; }
.map-controls .btn { box-shadow: 0 1px 4px rgba(0,0,0,0.4); }

.map-legend {
  position: absolute; bottom: 12px; left: 12px; z-index: 500;
  background: rgba(23,27,40,0.92); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 10px; font-size: 11px; color: var(--text-2);
}
.map-legend-title { font-weight: 600; color: var(--text-1); margin-bottom: 4px; }
.map-legend-row { display: flex; align-items: center; gap: 6px; line-height: 1.7; }
.map-sw  { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.map-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.map-note {
  position: absolute; top: 10px; left: 10px; right: 90px; z-index: 500;
  background: rgba(23,27,40,0.94); border: 1px solid var(--border-hi);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12px; color: var(--text-2);
}

/* Right list pane */
.map-listpane {
  flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
}
.map-list-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.map-list-title { font-size: 13px; font-weight: 600; color: var(--text-0); }
.map-sheet-close { display: none; background: none; border: none; color: var(--text-2); font-size: 16px; cursor: pointer; }
.map-list-actions { display: flex; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.map-list-actions .map-input { flex: 1; min-width: 0; }
.map-list { flex: 1; overflow-y: auto; padding: 8px; }

.map-card {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px; border-radius: var(--radius-sm); cursor: pointer;
  border: 1px solid transparent;
}
.map-card:hover { background: var(--bg-3); border-color: var(--border); }
.map-card-chk { margin-top: 3px; accent-color: var(--blue); cursor: pointer; }
.map-card-body { flex: 1; min-width: 0; }
.map-card-name { font-size: 13px; font-weight: 600; color: var(--text-0); display: flex; align-items: center; gap: 6px; }
.map-card-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
.map-card-addr { font-size: 11px; margin-top: 3px; overflow-wrap: anywhere; }
.lead-maps-link { text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.map-card-meta { font-size: 11px; color: var(--text-3); margin-top: 5px; display: flex; gap: 4px; flex-wrap: wrap; }
.map-mobile-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }

/* Lead-card quick actions (call / text / view) */
.map-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.map-card-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; padding: 7px 11px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--bg-3); color: var(--text-1);
  cursor: pointer; text-decoration: none; line-height: 1;
}
.map-card-btn.call { color: var(--green); border-color: var(--green); }
.map-card-btn.view { margin-left: auto; }
.map-card-btn:active { opacity: 0.7; }

/* Bottom-sheet drag handle (mobile only — hidden in the desktop side panel) */
.map-sheet-handle { display: none; }

.map-bulk {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 14px; border-top: 1px solid var(--border); background: var(--bg-3);
}
.map-bulk-btns { display: flex; gap: 8px; }

/* Leaflet pins + labels */
.map-pin-wrap { background: transparent !important; border: none !important; }
.map-pin {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.ziplabel-wrap { background: transparent !important; border: none !important; }
.ziplabel {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  transform: translate(-50%, -50%);
  background: rgba(17,20,30,0.72); color: #fff;
  padding: 1px 6px; border-radius: 10px; font-size: 10px; font-weight: 600;
  pointer-events: none;
}
.ziplabel-badge { background: #6366f1; border-radius: 8px; padding: 0 5px; font-size: 9px; }

/* Leaflet popup content (popups render on light Leaflet chrome) */
.map-popup { min-width: 160px; }
.map-popup-name { font-weight: 700; font-size: 13px; margin-bottom: 6px; color: #11141e; }
.map-popup-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.map-popup-row { font-size: 12px; margin-bottom: 4px; color: #33384a; }
.map-popup-row a { color: #2563eb; }
.map-popup .btn { margin-top: 4px; }

/* Mobile floating list button + bottom sheet */
.map-mobile-listbtn {
  display: none; position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);
  z-index: var(--z-map-ui); background: var(--blue); color: #fff; border: none;
  border-radius: 999px; padding: 12px 22px; font-size: 14px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5); cursor: pointer;
}
.map-sheet-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: calc(var(--z-map-ui) + 10);
}
.map-sheet-backdrop.active { display: block; }

/* Inline assign modal */
/* Predates the token and used a hand-picked 2200; on the shared scale now so
   there is one answer to "how high does a dialog go". */
.map-assign-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: 20px; }
.map-assign-box { padding: 20px; width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 14px; }
.map-assign-box h3 { font-size: 15px; color: var(--text-0); }
.map-assign-box select { background: var(--bg-3); border: 1px solid var(--border); color: var(--text-1); padding: 9px 11px; border-radius: var(--radius-sm); font-size: 14px; width: 100%; }
.map-assign-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Mobile ── */
@media (max-width: 767px) {
  .map-split { flex-direction: column; height: auto; min-height: 0; }
  .map-pane { flex: none; height: 62vh; }
  .map-scheme { padding-left: 0; border-left: none; }

  /* Bottom sheet: ~62% of the screen, map stays visible above it. */
  .map-listpane {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-map-ui) + 20);
    height: 62vh; border-radius: 16px 16px 0 0;
    transform: translateY(100%); transition: transform 0.3s ease;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.45);
  }
  .map-listpane.open { transform: translateY(0); }
  .map-sheet-close { display: block; }

  /* Drag handle (grey pill). touch-action:none so the drag isn't hijacked. */
  .map-sheet-handle {
    display: block; width: 40px; height: 4px; margin: 10px auto 6px;
    background: var(--border-hi); border-radius: 999px; flex-shrink: 0; touch-action: none;
  }
  .map-list-head { touch-action: none; }

  /* Transparent backdrop: keeps the map clearly visible above the sheet while
     still catching a tap to dismiss. */
  .map-sheet-backdrop.active { background: transparent; }
}

/* Leads / Partners tabs */
.map-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.map-tab {
  background: var(--bg-3); border: 1px solid var(--border); color: var(--text-2);
  padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.map-tab:hover { color: var(--text-1); }
.map-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Zip heat-map hover tooltip (dark) */
.leaflet-tooltip.map-zip-tip {
  background: #11141e; border: 1px solid var(--border-hi); color: var(--text-1);
  border-radius: var(--radius-sm); padding: 8px 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  font-size: 12px; max-width: 240px; white-space: normal;
}
.leaflet-tooltip.map-zip-tip::before { display: none; } /* hide the arrow */
.map-zip-tip-head { font-weight: 700; color: var(--text-0); margin-bottom: 4px; }
.map-zip-tip-sec { margin-top: 4px; border-top: 1px solid var(--border); padding-top: 4px; }
.map-zip-tip-row { display: flex; justify-content: space-between; gap: 14px; line-height: 1.6; color: var(--text-2); }
.map-zip-tip-trades { margin-top: 4px; color: var(--text-3); font-size: 11px; }

/* Gold star partner pin */
.map-star-pin {
  display: block; width: 22px; height: 22px; line-height: 22px; text-align: center;
  color: #ffcf33; font-size: 20px; text-shadow: 0 0 2px #7a4d00, 0 1px 2px rgba(0,0,0,0.6);
}
.map-star { color: #e0a600; font-size: 13px; }
.map-legend-mark { display: inline-block; width: 12px; text-align: center; font-size: 12px; }
/* Density/Status polygon toggle retired — zip polygons are now outline-only. */
.map-scheme { display: none; }

/* "Set as Default" map button — greyed check state when already the default. */
.map-set-default.is-default { opacity: 0.6; color: var(--green); border-color: var(--green); cursor: default; }

/* Do Not Call: greyed, non-clickable call/text buttons on map lead cards. */
.map-card-btn.disabled { opacity: 0.45; cursor: not-allowed; pointer-events: auto; }
.map-card-dnc { border-color: var(--red); }

/* Custom-tag badge (grey, click-to-edit, X to clear). */
.custom-tag-badge { cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.custom-tag-x { font-size: 9px; opacity: 0.7; cursor: pointer; }
.custom-tag-x:hover { opacity: 1; color: var(--red); }

/* Status popover — custom tag section */
.status-popover-sep { height: 1px; background: var(--border); margin: 4px 0; }
.status-popover-customtag {
  display: block; width: 100%; text-align: left; background: none; border: none;
  color: var(--text-1); font-size: 13px; padding: 8px 12px; cursor: pointer; border-radius: var(--radius-sm);
}
.status-popover-customtag:hover { background: var(--bg-3); }
.status-popover-tagedit { display: none; gap: 6px; padding: 8px 12px; }
.status-popover-taginput {
  flex: 1; min-width: 0; background: var(--bg-3); border: 1px solid var(--border-hi);
  color: var(--text-0); padding: 6px 9px; border-radius: var(--radius-sm); font-size: 13px;
}
.status-popover-tagsave {
  background: var(--blue); color: #fff; border: none; border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}

/* ── Partner health (Partners page + re-engagement alert) ── */
.health-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin-right: 6px; vertical-align: middle; flex: none;
}
.health-green  { background: #22c55e; }
.health-yellow { background: #eab308; }
.health-red    { background: #ef4444; }
.health-grey   { background: #6b7280; }

.partner-health-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.partner-stat {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; font-size: 13px; color: var(--text-2);
}
.partner-stat strong { color: var(--text-0); font-size: 16px; }
.partner-stat:hover { border-color: var(--border-hi); }
.partner-stat.active { background: var(--bg-3); }
.partner-stat.active.partner-stat-green  { border-color: #22c55e; }
.partner-stat.active.partner-stat-yellow { border-color: #eab308; }
.partner-stat.active.partner-stat-red    { border-color: #ef4444; }
.partner-stat.active.partner-stat-amber  { border-color: var(--amber); }
.partner-stat.active.partner-stat-blue   { border-color: var(--blue); }
.partner-stat.active.partner-stat-grey   { border-color: var(--border-hi); }

/* partner_performance_status dots (Active/At Risk/Dormant/New filter buttons) */
.perf-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  vertical-align: middle; flex: none;
}
.perf-active  { background: var(--green); }
.perf-at_risk { background: var(--amber); }
.perf-dormant { background: var(--red); }
.perf-new     { background: var(--blue); }

.partner-name-cell { display: flex; align-items: center; }
.partner-sub { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; font-size: 11px; color: var(--text-3); }
.partner-ts-none { color: var(--red); }

/* Expandable partner row (inline referral detail) */
.expand-caret { color: var(--text-3); font-size: 11px; width: 14px; display: inline-block; flex: none; }
.partner-row.expanded { background: var(--bg-2); }
.partner-detail-row > td { background: var(--bg-2); padding: 14px 16px; }
.partner-detail { display: flex; flex-direction: column; gap: 12px; }
.partner-detail-referrals { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-chip {
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 12px; font-size: 12.5px; color: var(--text-2);
}
.pd-chip strong { color: var(--text-0); }
.partner-detail-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.partner-detail-item { display: flex; flex-direction: column; gap: 2px; }
.pd-label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.03em; }
.pd-val { font-size: 13px; color: var(--text-0); font-weight: 600; }
.partner-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Mobile: keep Name, Status, Total Referrals, Last Referral; hide the rest. */
@media (max-width: 767px) {
  #partners-table .col-hide-mobile { display: none; }
}

/* Inline ZIP-code editing in the lead detail panel */
#panel-zip-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zip-inline-edit {
  background: none; border: none; color: var(--text-3); cursor: pointer;
  font-size: 12px; padding: 0 4px; line-height: 1;
}
.zip-inline-edit:hover { color: var(--blue); }
.zip-inline-input {
  width: 84px; background: var(--bg-3); border: 1px solid var(--border-hi);
  color: var(--text-0); padding: 5px 9px; border-radius: var(--radius-sm);
  font-size: 13px;
}
.zip-inline-input:focus { border-color: var(--blue); outline: none; }

/* Zip-code enrichment progress bar (Admin Overview) */
.enrich-progress-track {
  width: 100%; height: 10px; background: var(--bg-3);
  border: 1px solid var(--border); border-radius: 999px; overflow: hidden;
}
.enrich-progress-fill {
  height: 100%; width: 0%; background: var(--blue);
  transition: width 0.4s ease; border-radius: 999px;
}

/* ══ Rep Activity (admin) ═══════════════════════════════════════════════════ */
.activity-tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.activity-tab {
  padding: 8px 14px; border: 1px solid var(--border); border-radius: 999px;
  background: none; color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer;
}
.activity-tab:hover { border-color: var(--border-hi); }
.activity-tab.active { background: var(--blue-dim); color: var(--blue); border-color: var(--blue); }

.activity-filter-bar {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px; padding: 14px;
}
.activity-filter-field { display: flex; flex-direction: column; gap: 4px; }
.activity-filter-field .lead-note-input { min-width: 150px; }

/* Scorecards */
.activity-scorecard-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px;
}
.activity-scorecard {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  background: var(--surface-2, var(--bg-2));
}
.scorecard-name { font-size: 16px; font-weight: 700; margin-bottom: 10px; }
.scorecard-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px;
  border-top: 1px solid var(--border); padding-top: 12px; font-size: 13px;
}
.scorecard-stat { color: var(--text-2); }
.scorecard-stat strong { color: var(--text-0); }
.scorecard-total { margin-top: 12px; font-size: 13px; color: var(--text-2); }
.scorecard-actions { margin-top: 10px; text-align: right; }

/* Feed + timeline */
.activity-feed { display: flex; flex-direction: column; gap: 2px; }
.activity-feed-item {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 8px; border-bottom: 1px solid var(--border);
}
.activity-feed-item:last-child { border-bottom: none; }
.activity-feed-icon { font-size: 15px; width: 22px; text-align: center; flex-shrink: 0; }
.activity-feed-main { flex: 1; min-width: 0; }
.activity-feed-label { font-size: 13.5px; color: var(--text-1); }
.activity-feed-time { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Drill-down: hour chart */
.act-detail-total { font-size: 14px; margin-bottom: 12px; }
.act-detail-section-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); margin: 16px 0 8px;
}
.act-detail-bytype { display: flex; flex-wrap: wrap; gap: 6px; }
.hour-chart { display: flex; flex-direction: column; gap: 5px; }
.hour-bar-row { display: flex; align-items: center; gap: 8px; }
.hour-bar-label { width: 42px; font-size: 11.5px; color: var(--text-3); text-align: right; flex-shrink: 0; }
.hour-bar-track { flex: 1; height: 16px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.hour-bar-fill { height: 100%; background: var(--blue); border-radius: 4px; }
.hour-bar-count { width: 26px; font-size: 12px; color: var(--text-2); flex-shrink: 0; }

/* Leaderboard */
.activity-leaderboard { display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.leaderboard-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2, var(--bg-2));
}
.leaderboard-rank { font-size: 18px; width: 40px; text-align: center; flex-shrink: 0; }
.leaderboard-name { flex: 1; font-weight: 600; }
.leaderboard-value { font-size: 18px; font-weight: 700; color: var(--blue); }

@media (max-width: 640px) {
  .activity-scorecard-grid { grid-template-columns: 1fr; }
  .activity-filter-field .lead-note-input { min-width: 0; width: 100%; }
}

/* ── PM Dispatch map ────────────────────────────────────────────────────────
   Pins reuse .map-pin-wrap from the Territory Map; everything below is
   dispatch-specific (PM colours, colour-preserving clusters, legend/filter). */
.dispatch-pin {
  display: block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
/* Unassigned jobs are the ones needing dispatch, and they have to be findable
   the moment clusters break apart — that is where the decisions get made.

   The previous treatment (19px, 2px #374151 ring) rendered correctly and was
   still invisible, which is why it needed measuring rather than re-guessing.
   Against OSM's land colour the grey fill scores 2.21 contrast — the LOWEST of
   anything on the map, where the assigned PM dots average 5.54 — and #374151
   is the same dark grey as OSM's own road casings, labels and boundaries, so
   the ring read as map furniture rather than as a marker. A low-contrast fill
   wrapped in a ring the basemap already uses everywhere is camouflage.

   The fix is an alternating light/dark/light edge, which nothing else on the
   map has: white border, then near-black, then a white halo. #111827 scores
   15.46 against the basemap and 17.74 against its own halo. Size goes to 21px
   (about twice the painted area of an assigned dot) to carry the rest.

   Grey stays the fill — it means "no PM" and the legend depends on it. The
   rings, not the fill, do the work. Shape stays a disc too: shape is the
   home-vs-job distinction (see homeIcon), and spending it here as well would
   blur what a silhouette means on this map. */
.dispatch-pin-unassigned {
  width: 21px; height: 21px;
  border: 2px solid #fff;
  box-shadow:
    0 0 0 2.5px #111827,
    0 0 0 4px rgba(255,255,255,0.95),
    0 1px 3px rgba(0,0,0,0.55);
}

/* The alert badge on an unassigned job. Sits OFF the upper-right of the disc
   rather than on top of it, so the disc's centre — which is the job's actual
   coordinate — is never covered and the true position stays unambiguous.

   Fixed pixel size, like every Leaflet marker: it does not grow with zoom, so
   it cannot become comically large close in, and at metro zoom it is the only
   straight edge among a field of circles.

   pointer-events:none so the badge never eats a click meant for the marker —
   the popup belongs to the disc underneath. */
.dispatch-badge {
  position: absolute;
  left: 11px; top: -8px;
  width: 17px; height: 17px;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.45));
}

/* "In Drying, no recon job yet" on a mitigation job: a blue square off the
   lower-right, opposite the unassigned triangle, so one pin can carry both.
   Same white/near-black edge treatment as the triangle. */
.dispatch-badge-recon {
  position: absolute;
  left: 11px; top: 9px;
  width: 15px; height: 15px;
  pointer-events: none;
  overflow: visible;
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,0.45));
}

.dispatch-cluster-wrap { background: transparent !important; border: none !important; }
.dispatch-cluster {
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.35), 0 1px 4px rgba(0,0,0,0.4);
}
/* The count sits on an opaque disc so it stays readable over any slice colour. */
.dispatch-cluster-count {
  display: flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  background: rgba(255,255,255,0.94); color: #11141e;
  border-radius: 10px; font-size: 11px; font-weight: 700;
}

.dispatch-map-shell { display: flex; gap: 0; align-items: stretch; }
#dispatch-map-canvas { flex: 1; height: 560px; border-radius: 0 0 0 var(--radius-sm); }
.dispatch-map-side {
  width: 240px; flex-shrink: 0; overflow-y: auto; max-height: 560px;
  border-left: 1px solid var(--border); background: var(--bg-2);
  /* The global thumb is --border-hi on --bg-2 — invisible here, where the
     overflow is a few rows and the list otherwise reads as complete. */
  scrollbar-color: var(--text-3) transparent;
  scrollbar-gutter: stable;
}
.dispatch-map-side::-webkit-scrollbar-thumb { background: var(--text-3); }
/* A fade over the bottom edge while there are rows beneath it. Sticky to the
   scroller's bottom, zero-height so it adds nothing to the scroll range;
   dispatchMap toggles the class from the real scroll state. */
.dispatch-legend-more { position: sticky; bottom: 0; height: 0; pointer-events: none; }
.dispatch-legend-more::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  background: linear-gradient(to bottom, transparent, var(--bg-2) 80%);
  opacity: 0; transition: opacity 0.15s;
}
.dispatch-legend-overflowing .dispatch-legend-more::before { opacity: 1; }
.dispatch-map-select {
  background: var(--bg-3); border: 1px solid var(--border-hi); border-radius: var(--radius-sm);
  color: var(--text-0); padding: 5px 8px; font-size: 12px; outline: none;
}

.dispatch-legend-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; font-size: 11px; font-weight: 600; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--text-3);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg-2);
}
/* Home-address coverage in one line under the head, in place of the banner
   that used to sit above the map. Chips are the unlocated PMs; clickable
   when the viewer can edit them. */
.dispatch-legend-coverage {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px;
  padding: 6px 12px; font-size: 11px; color: var(--text-3);
  border-bottom: 1px solid var(--border);
}
.dispatch-legend-chip {
  font: inherit; font-size: 10.5px; line-height: 1.4; padding: 1px 7px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--border-hi); color: var(--text-1); cursor: default;
}
button.dispatch-legend-chip { cursor: pointer; }
button.dispatch-legend-chip:hover { border-color: var(--blue); color: var(--blue); }
.dispatch-legend-group { padding: 6px 0; border-bottom: 1px solid var(--border); }
/* Colours repeat across markets by design, so the market header is what stops
   two same-coloured pins in different cities reading as one person. */
.dispatch-legend-market {
  padding: 4px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--text-3);
}
.dispatch-legend-row { display: flex; align-items: center; }
.dispatch-legend-row:hover { background: var(--bg-3); }
.dispatch-legend-off { opacity: 0.38; }
.dispatch-legend-main {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  background: none; border: none; cursor: pointer;
  padding: 6px 4px 6px 12px; text-align: left; color: var(--text-1); font-size: 12.5px;
}
.dispatch-legend-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,0.35);
}
.dispatch-legend-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dispatch-legend-count { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
/* One click to isolate a PM rather than deselecting everyone else. */
.dispatch-legend-only {
  background: none; border: none; cursor: pointer; padding: 6px 10px;
  color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
}
.dispatch-legend-only:hover { color: var(--blue); }

@media (max-width: 767px) {
  .dispatch-map-shell { flex-direction: column; }
  #dispatch-map-canvas { height: 380px; border-radius: 0; }
  .dispatch-map-side { width: auto; max-height: 240px; border-left: none; border-top: 1px solid var(--border); }
}

/* ── Dispatch cluster hover breakdown ───────────────────────────────────────
   A cluster shows a count and a colour pie but never says whose jobs they are.
   Hover (or long-press on touch) answers that without needing to zoom in. */
.leaflet-tooltip.dispatch-cluster-tooltip {
  background: rgba(17, 20, 30, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  color: #f3f4f6;
  padding: 8px 10px;
  font-size: 12px;
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.leaflet-tooltip.dispatch-cluster-tooltip::before { border-top-color: rgba(17, 20, 30, 0.96); }

.dispatch-cluster-tip-head {
  font-weight: 700;
  font-size: 12.5px;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.dispatch-cluster-tip-row { display: flex; align-items: center; gap: 7px; }
.dispatch-cluster-tip-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.85);
}
/* Names left, counts right-aligned in a column so they read as a table. */
.dispatch-cluster-tip-name { flex: 1; padding-right: 14px; }
.dispatch-cluster-tip-n {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
  min-width: 20px;
}
.dispatch-cluster-tip-more {
  margin-top: 5px; padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #9ca3af; font-size: 11px;
}