/* ============================================
   INSTALLER MAP — STYLES
   Sky Console Edition
   Soft logo light-blue ops console (rail, panels,
   modals) under a brand-navy header, over the
   light silver map. The --d-* token NAMES are kept
   so satellite stylesheets keep resolving; only
   their VALUES were re-tinted to the light palette.
   ============================================ */

:root {
  /* ---- Midnight Console tokens (canonical, shared across all stylesheets) ---- */
  --d-bg: #e9f1f9;
  --d-surface: #ffffff;
  --d-surface-2: #dcebf7;
  --d-line: #dbe7f2;
  --d-line-strong: #bcd3e6;
  --d-ink: #10283f;
  --d-ink-2: #44617c;
  --d-ink-3: #6e8aa3;
  --d-accent: #2d7dd2;
  --d-accent-strong: #1e6abf;
  --d-btn: #2d7dd2;
  --d-btn-hover: #1e6abf;
  --d-ring: rgba(45,125,210,0.25);
  --d-ok: #15803d;
  --d-warn: #b45309;
  --d-danger: #b91c1c;
  --d-brand-ggi: #2d7dd2;
  --d-brand-mgg: #ea7317;
  --d-shadow-sm: 0 1px 2px rgba(16,40,63,0.08);
  --d-shadow-md: 0 6px 16px rgba(16,40,63,0.10);
  --d-shadow-lg: 0 16px 40px rgba(16,40,63,0.18);

  /* ---- Design system tokens (re-pointed into the dark palette) ---- */
  --bg: var(--d-bg);
  --surface: var(--d-surface);
  --line: var(--d-line);
  --line-soft: #dbe7f2;
  --ink-900: var(--d-ink);
  --ink-700: var(--d-ink-2);
  --ink-500: var(--d-ink-3);
  --ink-400: #5b6f88;
  --navy: var(--d-bg);
  --accent: var(--d-btn);
  --accent-strong: var(--d-btn-hover);
  --ring: var(--d-ring);
  --ok: var(--d-ok); --ok-soft: rgba(21,128,61,0.12); --ok-line: rgba(21,128,61,0.30);
  --warn: var(--d-warn); --warn-soft: rgba(180,83,9,0.12); --warn-line: rgba(180,83,9,0.30);
  --danger: var(--d-danger); --danger-soft: rgba(185,28,28,0.12); --danger-line: rgba(185,28,28,0.30);
  --brand-ggi: var(--d-brand-ggi);
  --brand-mgg: var(--d-brand-mgg);
  --radius-sm: 6px; --radius: 8px; --radius-md: 10px; --radius-lg: 12px;
  --shadow-sm: var(--d-shadow-sm);
  --shadow-md: var(--d-shadow-md);
  --shadow-lg: var(--d-shadow-lg);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ---- Legacy aliases (kept for other stylesheets/scripts; re-pointed to the dark palette) ---- */
  --navy-mid: var(--d-surface-2);
  --navy-light: #223a63;
  --blue: var(--d-btn);
  --blue-light: var(--d-accent-strong);
  --blue-pale: rgba(45,125,210,0.10);
  --blue-pale2: rgba(45,125,210,0.25);
  --white: #ffffff;
  --off-white: var(--d-surface-2);
  --border: var(--d-line);
  --border-light: #dbe7f2;
  --text-dark: var(--d-ink);
  --text-mid: var(--d-ink-2);
  --text-muted: var(--d-ink-3);
  --green: var(--d-ok);
  --green-pale: rgba(21,128,61,0.12);
  --red: var(--d-danger);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  background: var(--d-bg);
  color: var(--d-ink-2);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--d-ink); }

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

::selection { background: rgba(45,125,210,0.25); }

:focus-visible {
  outline: 2px solid var(--d-accent);
  outline-offset: 2px;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #aac6de; border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #7fa8c9; }

/* Keyboard skip link, hidden until focused */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--d-btn);
  color: white;
  padding: 0.5rem 1rem;
  text-decoration: none;
  z-index: 10000;
}
.skip-link:focus {
  top: 0;
}

/* LAYOUT */
.app-container {
  display: grid;
  grid-template-columns: 480px 1fr;
  grid-template-rows: auto 1fr;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* HEADER — brand navy band anchoring the light console */
.app-header {
  grid-column: 1 / -1;
  background: #0b1f3a;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 50;
}

.app-header h1 {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 0.01em;
}

.app-header .brand-highlight { color: #9cc6ea; font-weight: 400; }

.header-actions { display: flex; align-items: center; gap: 8px; }

.header-btn {
  display: inline-flex;
  align-items: center;
  height: 34px;
  background: transparent;
  color: #ffffff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--font);
  transition: background 130ms ease, border-color 130ms ease;
}

.header-btn:hover { background: rgba(255,255,255,0.10); }
.header-btn.primary { background: var(--d-btn); border-color: var(--d-btn); color: #fff; }
.header-btn.primary:hover { background: var(--d-btn-hover); border-color: var(--d-btn-hover); }

/* SIDEBAR */
.sidebar {
  background: var(--d-bg);
  border-right: 1px solid var(--d-line);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* TABS */
.tab-bar {
  display: flex;
  border-bottom: 1px solid var(--d-line);
  background: var(--d-bg);
  overflow-x: auto;
}

.tab-btn {
  flex: 1;
  padding: 12px 8px;
  border: none;
  background: none;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 600;
  color: var(--d-ink-3);
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 130ms ease, border-color 130ms ease;
}

.tab-btn:hover { color: var(--d-ink-2); }
.tab-btn.active {
  color: var(--d-ink);
  border-bottom-color: var(--d-accent);
}

/* TAB CONTENT */
.tab-content { display: none; padding: 1.25rem; flex: 1; overflow-y: auto; }
.tab-content.active { display: block; }

/* QUOTE TAB — iframe-embedded quote builder. The tab content padding is
   overridden to zero so the builder fills the panel edge-to-edge. The
   thin header bar gives the user a Back action + customer label. */
#tab-quote { padding: 0; display: none; }
#tab-quote.active { display: flex; flex-direction: column; }

/* Full-width takeover when the Quote tab is active. Mirrors the Margin
   tab's pattern so the experience is consistent across the app: clicking
   Quote hides the map and stretches the sidebar across the viewport so
   the builder can use all available space. The lookup bar (installer
   search) is hidden because it's not relevant to the quote workflow.
   JS toggle lives in js/quote-tab.js. */
body.view-quote-active .app-container {
  grid-template-columns: 1fr;
}
body.view-quote-active .map-container {
  display: none;
}
body.view-quote-active .sidebar {
  border-right: none;
}
body.view-quote-active .lookup-bar {
  display: none;
}
body.view-quote-active #tab-quote.tab-content {
  height: 100%;
}
.quote-tab-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--d-bg, #e9f1f9);
}
.quote-tab-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 16px;
  background: var(--d-surface, #ffffff);
  border-bottom: 1px solid var(--d-line, #dbe7f2);
  flex: 0 0 auto;
}
.quote-tab-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px 7px 8px;
  border: 1px solid var(--d-line-strong, #bcd3e6);
  border-radius: 8px;
  background: transparent;
  color: var(--d-ink, #10283f);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  font-family: inherit;
}
.quote-tab-back:hover {
  background: var(--d-surface-2, #dcebf7);
  border-color: var(--d-accent, #2d7dd2);
}
.quote-tab-title {
  flex: 1;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--d-ink, #10283f);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.quote-tab-status {
  font-size: 12.5px;
  color: var(--d-ink-3, #6e8aa3);
  font-weight: 500;
}
.quote-tab-frame {
  flex: 1;
  width: 100%;
  border: 0;
  background: var(--d-surface, #ffffff);
}

/* SEARCH */
.search-box {
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--d-ink);
  outline: none;
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.search-box::placeholder { color: var(--d-ink-3); }

.search-box:focus {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}

/* JOB LOOKUP */
.job-lookup {
  padding: 16px 20px;
  border-bottom: 1px solid var(--d-line);
  background: var(--d-surface);
}

.job-lookup label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--d-ink-3);
  display: block;
  margin-bottom: 8px;
}

.lookup-row { display: flex; gap: 8px; }

.lookup-input {
  flex: 1;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--d-ink);
  outline: none;
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.lookup-input::placeholder { color: var(--d-ink-3); }

.lookup-input:focus {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}

.lookup-btn {
  height: 36px;
  padding: 8px 14px;
  background: var(--d-btn);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 130ms ease;
}

.lookup-btn:hover { background: var(--d-btn-hover); }

.lookup-results {
  margin-top: 12px;
  font-size: 13px;
  color: var(--d-ink-2);
}

/* INSTALLER LIST */
.installer-list { list-style: none; }

.installer-card {
  padding: 12px;
  border: 1px solid var(--d-line);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
  background: var(--d-surface);
  box-shadow: var(--d-shadow-sm);
}

.installer-card:hover {
  border-color: var(--d-line-strong);
  background: var(--d-surface-2);
}

.installer-card.active {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}

.installer-card .card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4px;
}

.installer-card .name {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--d-ink);
}

.installer-card .rate {
  font-weight: 700;
  font-size: 13px;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.installer-card .business {
  font-size: 12.5px;
  color: var(--d-ink-3);
  margin-bottom: 6px;
}

.installer-card .details {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* Tags — colour discipline: no tinted fills. Transparent body, text in
   --d-ink-2, semantic state carried by a small dot (::before) or a faint
   semantic border. Class names unchanged. */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
  background: transparent;
  color: var(--d-ink-2);
}

.tag-state { border-color: var(--d-line-strong); }
.tag-radius { border-color: var(--d-line-strong); }
.tag-quality { border-color: var(--d-line-strong); }
.tag-lead { border-color: var(--d-line); color: var(--d-ink-3); }
.tag-vetted { border-color: rgba(21,128,61,0.3); }
.tag-vetted::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-ok);
  margin-right: 6px;
  flex-shrink: 0;
}
.tag-unvetted { border-color: rgba(180,83,9,0.3); }
.tag-unvetted::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-warn);
  margin-right: 6px;
  flex-shrink: 0;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--d-line);
}

.card-action-btn {
  padding: 4px 10px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius-sm);
  background: transparent;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  color: var(--d-ink-2);
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.card-action-btn:hover { background: var(--d-surface-2); color: var(--d-ink); }
.card-action-btn.delete { color: var(--d-danger); border-color: rgba(185,28,28,0.3); }
.card-action-btn.delete:hover { background: rgba(185,28,28,0.12); }
.card-action-btn.delete.confirm-step {
  background: #dc2626;
  color: #fff;
  border-color: #dc2626;
}

.status-btn { font-size: 11.5px !important; }

/* FILTER BAR */
.filter-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.filter-bar select {
  height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 12.5px;
  color: var(--d-ink);
  background: var(--d-bg);
  outline: none;
  cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.filter-bar select:focus {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}

.filter-clear {
  height: 32px;
  padding: 4px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: transparent;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--d-ink-3);
  cursor: pointer;
  transition: background 130ms ease, color 130ms ease;
}

.filter-clear:hover { background: var(--d-surface-2); color: var(--d-ink-2); }

/* STATUS DOT */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}

.status-available { background: var(--d-ok); }
.status-busy { background: var(--d-warn); }
.status-leave { background: var(--d-ink-3); }

/* FORM */
.form-section-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-3);
  margin-top: 20px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--d-line);
}

.form-section-title:first-of-type { margin-top: 0; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}

.form-group { display: flex; flex-direction: column; gap: 0.25rem; }
.form-group.full { grid-column: 1 / -1; }

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--d-ink-2);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 8px 12px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--d-ink);
  outline: none;
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--d-ink-3); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}

.form-group textarea { resize: vertical; min-height: 55px; }

.form-actions { display: flex; gap: 8px; margin-top: 20px; }

.btn {
  height: 36px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--d-btn); color: #fff; }
.btn-primary:hover { background: var(--d-btn-hover); }
.btn-secondary { background: transparent; color: var(--d-ink); border: 1px solid var(--d-line-strong); }
.btn-secondary:hover { background: var(--d-surface-2); }

/* Form status — text + 2px left border, no filled banners */
.form-status {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 0;
  font-size: 12.5px;
  font-weight: 600;
  display: none;
}

.form-status.success { display: block; background: transparent; color: var(--d-ok); border-left: 2px solid var(--d-ok); }
.form-status.error { display: block; background: transparent; color: var(--d-danger); border-left: 2px solid var(--d-danger); }

/* RESULT CARDS */
.result-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-3);
  margin-top: 12px;
  margin-bottom: 4px;
}

.result-card {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
  font-size: 12.5px;
  box-shadow: var(--d-shadow-sm);
}

.result-card:hover { border-color: var(--d-line-strong); background: var(--d-surface-2); }
.result-card.out-of-range { opacity: 0.55; border-style: dashed; }

.result-details {
  display: flex;
  justify-content: space-between;
  color: var(--d-ink-3);
  font-size: 12px;
  margin: 4px 0;
}

.result-cost {
  background: var(--d-bg);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  margin-top: 6px;
  font-size: 12px;
}

.cost-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
  color: var(--d-ink-2);
}

.cost-row.total {
  border-top: 1px solid var(--d-line);
  margin-top: 4px;
  padding-top: 5px;
  font-weight: 700;
  color: var(--d-ink);
  font-size: 13px;
}

/* JOB HISTORY */
.job-history {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--d-line);
}

.history-item {
  font-size: 0.7rem;
  color: var(--d-ink-2);
  padding: 0.15rem 0;
  line-height: 1.4;
  position: relative;
  padding-right: 20px;
}

.history-date {
  font-weight: 600;
  color: var(--d-accent);
  margin-right: 0.2rem;
}

.history-delete {
  display: none;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  font-size: 0.6rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  font-family: var(--font);
}

.history-item:hover .history-delete { display: block; }

.history-count {
  font-size: 0.7rem;
  color: var(--d-ink-3);
  margin-top: 0.25rem;
}

/* INLINE NOTE INPUT */
.inline-note-input {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--d-line);
}

.inline-note-input textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  color: var(--d-ink);
  resize: vertical;
  min-height: 45px;
  outline: none;
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.inline-note-input textarea::placeholder { color: var(--d-ink-3); }

.inline-note-input textarea:focus {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}

/* VETTING SECTION */
.vetting-info {
  margin-top: 0.35rem;
  padding: 0.4rem 0.6rem;
  background: var(--d-surface-2);
  border-radius: 6px;
  font-size: 0.72rem;
  color: var(--d-ink-2);
}

.vetting-info .vet-row {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0;
}

.vetting-photos {
  display: flex;
  gap: 0.3rem;
  margin-top: 0.3rem;
  flex-wrap: wrap;
}

.vetting-photos img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--d-line-strong);
}

/* MAP */
.map-container { position: relative; }
#map { width: 100%; height: 100%; }

/* STATS BAR */
.stats-bar {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  gap: 0.4rem;
  z-index: 10;
}

.stat-chip {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--radius);
  padding: 0.35rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--d-ink-2);
  box-shadow: var(--d-shadow-md);
}

.stat-chip strong { color: var(--d-accent); }

.stat-chip.chip-warning {
  background: var(--d-surface);
  border-color: rgba(180,83,9,0.3);
}
.stat-chip.chip-warning strong { color: var(--d-warn); }

.stat-chip.chip-danger {
  background: var(--d-surface);
  border-color: rgba(185,28,28,0.3);
}
.stat-chip.chip-danger strong { color: var(--d-danger); }

/* PL / PAI / AGREEMENT TAGS — dot + faint semantic border, no fills */
.tag-pl-valid { border-color: rgba(21,128,61,0.3); }
.tag-pl-valid::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-ok);
  margin-right: 6px;
  flex-shrink: 0;
}
.tag-pl-expiring { border-color: rgba(180,83,9,0.3); }
.tag-pl-expiring::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-warn);
  margin-right: 6px;
  flex-shrink: 0;
}
.tag-pl-expired { border-color: rgba(185,28,28,0.3); }
.tag-pl-expired::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-danger);
  margin-right: 6px;
  flex-shrink: 0;
}
.tag-pl-missing { background: transparent; color: var(--d-ink-3); border: 1px dashed var(--d-line-strong); }
.tag-pl-pending { background: transparent; color: var(--d-ink-3); border: 1px dashed var(--d-line-strong); }
.tag-pl-exempt { border-color: rgba(21,128,61,0.3); }
.tag-pl-exempt::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-ok);
  margin-right: 6px;
  flex-shrink: 0;
}

/* BLOCKED (expired / missing PL) INSTALLER CARD */
.installer-card.pl-blocked {
  opacity: 0.55;
  background: repeating-linear-gradient(
    45deg,
    #101a2c,
    #101a2c 8px,
    #15233a 8px,
    #15233a 16px
  );
  border-left: 3px solid var(--d-danger);
}
.installer-card.pl-blocked:hover {
  opacity: 0.85;
}
.installer-card.pl-blocked .rate {
  text-decoration: line-through;
  color: var(--d-ink-3);
}

/* COMPLIANCE DOT */
.compliance-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 0.4rem;
  vertical-align: middle;
  flex-shrink: 0;
}
.dot-green { background: var(--d-ok); box-shadow: 0 0 0 2px rgba(21,128,61,0.15); }
.dot-orange { background: var(--d-warn); box-shadow: 0 0 0 2px rgba(180,83,9,0.15); }
.dot-red { background: var(--d-danger); box-shadow: 0 0 0 2px rgba(185,28,28,0.15); }

.tag-compliance-green { border-color: rgba(21,128,61,0.3); }
.tag-compliance-green::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-ok);
  margin-right: 6px;
  flex-shrink: 0;
}
.tag-compliance-orange { border-color: rgba(180,83,9,0.3); }
.tag-compliance-orange::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-warn);
  margin-right: 6px;
  flex-shrink: 0;
}
.tag-compliance-red { border-color: rgba(185,28,28,0.3); }
.tag-compliance-red::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--d-danger);
  margin-right: 6px;
  flex-shrink: 0;
}
.tag-rejected { border-color: rgba(185,28,28,0.3); color: var(--d-danger); }

/* Compliance warning — text + 2px left border, no filled banner */
.compliance-warning {
  background: transparent;
  border-left: 2px solid var(--d-danger);
  color: var(--d-danger);
  padding: 8px 12px;
  border-radius: 0;
  font-size: 12.5px;
  margin-bottom: 12px;
  font-weight: 600;
}

.result-card.result-flagged {
  border-left: 3px solid var(--d-danger);
}

/* ============================================
   DETAIL PANEL (side drawer)
   ============================================ */

.detail-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16,40,63,0.40);
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  backdrop-filter: blur(2px);
}
.detail-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  height: 100dvh;
  width: 520px;
  max-width: 92vw;
  background: var(--d-surface);
  border-left: 1px solid var(--d-line);
  box-shadow: var(--d-shadow-lg);
  z-index: 300;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.detail-panel.open {
  transform: translateX(0);
}

.detail-header {
  background: var(--d-surface-2);
  border-bottom: 1px solid var(--d-line);
  color: var(--d-ink);
  padding: 1rem 1.25rem 0.75rem;
}

.detail-header-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
}

.detail-header h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--d-ink);
  margin: 0;
  letter-spacing: -0.01em;
}

.detail-sub {
  color: var(--d-ink-2);
  font-size: 0.82rem;
  margin-top: 0.1rem;
}

.detail-close {
  background: #dbe7f2;
  color: var(--d-ink);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.detail-close:hover { background: #bcd3e6; }

.detail-header-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.7rem;
}
.detail-header-badges .tag {
  font-size: 0.7rem;
  padding: 0.2rem 0.55rem;
}
.detail-header-badges .status-pill {
  background: transparent;
  border: 1px solid var(--d-line-strong);
  color: var(--d-ink);
}

.detail-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}
.dp-action-btn {
  background: transparent;
  color: var(--d-ink);
  border: 1px solid var(--d-line-strong);
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
}
.dp-action-btn:hover:not(:disabled) { background: var(--d-surface); }
.dp-action-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dp-action-btn.dp-primary { background: var(--d-btn); color: #fff; border-color: var(--d-btn); }
.dp-action-btn.dp-primary:hover:not(:disabled) { background: var(--d-btn-hover); border-color: var(--d-btn-hover); }
.dp-action-btn.dp-danger { background: transparent; color: var(--d-danger); border-color: rgba(185,28,28,0.35); }
.dp-action-btn.dp-danger:hover { background: rgba(185,28,28,0.12); }

.detail-tabs {
  display: flex;
  background: var(--d-surface);
  border-bottom: 1px solid var(--d-line);
  padding: 0 0.5rem;
  gap: 0.25rem;
}

.detail-tab {
  background: transparent;
  border: none;
  padding: 12px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--d-ink-3);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 130ms ease, border-color 130ms ease;
}
.detail-tab:hover { color: var(--d-ink-2); }
.detail-tab.active {
  color: var(--d-ink);
  border-bottom-color: var(--d-accent);
}

.detail-body {
  flex: 1;
  overflow-y: auto;
  background: var(--d-surface);
}

.detail-section {
  display: none;
  padding: 1.1rem 1.25rem 2rem;
}
.detail-section.active { display: block; }

.dp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem 1.1rem;
}

.dp-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--d-ink-3);
  font-weight: 600;
  margin-bottom: 0.18rem;
}

.dp-field > div {
  font-size: 13px;
  color: var(--d-ink);
  font-weight: 500;
}
.dp-field a { color: var(--d-accent); text-decoration: none; font-weight: 600; }
.dp-field a:hover { text-decoration: underline; }

.dp-notes {
  margin-top: 1.1rem;
  padding: 12px 16px;
  background: var(--d-surface-2);
  border-radius: var(--radius);
}
.dp-notes label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--d-ink-3);
  font-weight: 600;
  margin-bottom: 0.35rem;
}
.dp-notes p {
  font-size: 13px;
  color: var(--d-ink);
  white-space: pre-wrap;
}

.dp-empty {
  color: var(--d-ink-3);
  font-size: 13px;
  font-style: italic;
  padding: 0.75rem 0;
}

/* Compliance cards */
.dp-comp-card {
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-md);
  padding: 16px 16px 12px;
  margin-bottom: 12px;
  box-shadow: var(--d-shadow-sm);
}
.dp-comp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
  gap: 0.5rem;
}
.dp-comp-head h4 {
  font-size: 13.5px;
  color: var(--d-ink);
  font-weight: 600;
  margin: 0;
}

.dp-doc-row {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--d-line-strong);
  font-size: 0.8rem;
}
.dp-doc-link {
  color: var(--d-accent);
  font-weight: 600;
  text-decoration: none;
}
.dp-doc-link:hover { text-decoration: underline; }
.dp-doc-empty {
  color: var(--d-ink-3);
  font-style: italic;
  font-size: 0.8rem;
}

/* Jobs tab */
.dp-inline-note {
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-bottom: 16px;
}
.dp-inline-note textarea {
  width: 100%;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--d-ink);
  resize: vertical;
  min-height: 44px;
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.dp-inline-note textarea::placeholder { color: var(--d-ink-3); }
.dp-inline-note textarea:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-ring); }

.dp-btn-primary {
  background: var(--d-btn);
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
  transition: background 130ms ease;
}
.dp-btn-primary:hover { background: var(--d-btn-hover); }

.dp-job-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.dp-job-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--d-line);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  background: var(--d-surface-2);
  align-items: start;
}
.dp-job-date {
  font-size: 0.72rem;
  color: var(--d-ink-3);
  font-weight: 600;
  white-space: nowrap;
  padding-top: 2px;
}
.dp-job-note {
  font-size: 0.85rem;
  color: var(--d-ink);
  white-space: pre-wrap;
}
.dp-job-del {
  background: transparent;
  border: none;
  color: var(--d-ink-3);
  font-size: 1.1rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.dp-job-del:hover { color: var(--d-danger); }

/* ============================================
   PHOTO GALLERY
   ============================================ */

.photo-uploader {
  background: var(--d-surface-2);
  border: 1px dashed var(--d-line-strong);
  border-radius: var(--radius);
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

.photo-upload-label {
  display: block;
  background: var(--d-btn);
  color: #fff;
  padding: 0.65rem 1rem;
  text-align: center;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 130ms ease;
}
.photo-upload-label:hover { background: var(--d-btn-hover); }
.photo-upload-label input { display: none; }

.photo-upload-meta {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 0.6rem;
  margin-top: 0.75rem;
}
.photo-upload-meta label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--d-ink-3);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.photo-upload-meta input,
.photo-upload-meta select {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  font-size: 0.82rem;
  color: var(--d-ink);
  background: var(--d-bg);
}
.photo-upload-meta input:focus,
.photo-upload-meta select:focus { outline: none; border-color: var(--d-accent); box-shadow: 0 0 0 3px var(--d-ring); }

.photo-upload-hint {
  font-size: 0.72rem;
  color: var(--d-ink-3);
  margin-top: 0.5rem;
  font-style: italic;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.photo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--d-surface-2);
  cursor: pointer;
  box-shadow: var(--d-shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.photo-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--d-shadow-md);
}
.photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-tile-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(8,20,36,0.85), transparent);
  color: #fff;
  padding: 0.75rem 0.5rem 0.45rem;
  font-size: 0.7rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.photo-tile:hover .photo-tile-overlay,
.photo-tile .photo-tile-overlay { opacity: 1; }
.photo-tile-caption {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.photo-tile-date {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.65rem;
}

/* Photo tags — outline chips, coloured text, no fills */
.photo-tag {
  display: inline-block;
  padding: 0.08rem 0.45rem;
  border-radius: 20px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.18rem;
}
/* These chips only ever render inside the dark photo-tile scrim and the
   dark lightbox, so they keep bright dark-context literals deliberately. */
.photo-tag-before { color: #76b8ff; border-color: rgba(77, 163, 255, 0.35); }
.photo-tag-during { color: #fbbf24; border-color: rgba(251, 191, 36, 0.35); }
.photo-tag-after { color: #34d399; border-color: rgba(52, 211, 153, 0.35); }
.photo-tag-defect { color: #f87171; border-color: rgba(248, 113, 113, 0.35); }
.photo-tag-safety { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.35); }

/* LIGHTBOX */
.photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(8,20,36,0.88);
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.photo-lightbox.open { display: flex; }

.photo-lightbox-inner {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.photo-lightbox img {
  max-width: 100%;
  max-height: 75vh;
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.photo-lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
}

.photo-lightbox-meta {
  margin-top: 1rem;
  color: #fff;
  text-align: center;
  font-size: 0.85rem;
}
.photo-lightbox-meta > div { margin: 0.25rem 0; }

/* Sits inside the dark lightbox, so it keeps bright dark-context literals. */
.photo-lightbox-delete {
  margin-top: 0.85rem;
  background: rgba(248, 113, 113, 0.12);
  color: #f87171;
  border: 1px solid rgba(248, 113, 113, 0.4);
  padding: 0.5rem 1rem;
  border-radius: var(--radius);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.photo-lightbox-delete:hover {
  background: rgba(248, 113, 113, 0.25);
  color: #fff;
}

/* Mobile: panel goes fullscreen */
@media (max-width: 768px) {
  .detail-panel {
    width: 100vw;
    max-width: 100vw;
  }
  .photo-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .dp-grid {
    grid-template-columns: 1fr;
  }
}

/* EMPTY STATE */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--d-ink-3);
}

.empty-state h3 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
  color: var(--d-ink);
}

/* MOBILE */
@media (max-width: 768px) {
  .app-container {
    grid-template-columns: 1fr;
    grid-template-rows: auto 50vh 1fr;
  }
  .map-container { order: 1; }
  .sidebar { order: 2; }
}

/* ============================================
   LOGIN SCREEN
   ============================================ */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(120% 120% at 20% 0%, #16335c 0%, #0b1f3a 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login-card {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-lg);
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--d-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.login-logo {
  width: 44px;
  height: 44px;
  background: var(--d-btn);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.login-brand h1 {
  font-size: 18px;
  margin: 0;
  color: var(--d-ink);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.login-brand small {
  display: block;
  color: var(--d-ink-3);
  font-size: 13px;
  margin-top: 1px;
}

.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-field span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--d-ink-3);
}

.login-field input {
  height: 36px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--d-ink);
  background: var(--d-bg);
  outline: none;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

.login-field input::placeholder { color: var(--d-ink-3); }

.login-field input:focus {
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}

.login-error {
  font-size: 13px;
  color: var(--d-danger);
  min-height: 16px;
  line-height: 1.3;
}

.login-btn {
  width: 100%;
  height: 40px;
  background: var(--d-btn);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  padding: 8px 14px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease;
  font-family: inherit;
}

.login-btn:hover:not(:disabled) {
  background: var(--d-btn-hover);
}

.login-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.login-foot {
  font-size: 12px;
  color: var(--d-ink-3);
  text-align: center;
  margin-top: 4px;
  letter-spacing: 0.02em;
}

/* ============================================
   JOBS LIST TAB
   Sidebar third tab — browse all active jobs as a list.
   Mirrors the installer-list pattern; stage colour rides on dots and
   outline chips so the data hue stays tied to the map markers.
   ============================================ */

/* Stage chip row — filter chips, wrap on narrow viewports */
.jobs-list-stage-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 0 0.75rem 0;
}

.jobs-list-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--d-line-strong);
  background: transparent;
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--d-ink-2);
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease, box-shadow 130ms ease;
  white-space: nowrap;
}

.jobs-list-chip:hover {
  border-color: rgba(45,125,210,0.25);
  color: var(--d-ink);
}

.jobs-list-chip.active {
  border-color: var(--d-accent);
  background: rgba(45,125,210,0.15);
  color: var(--d-accent-strong);
  box-shadow: none;
}

.jobs-list-chip-label { letter-spacing: 0.01em; }

.jobs-list-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4rem;
  height: 1.1rem;
  padding: 0 0.4rem;
  border-radius: 999px;
  background: #dbe7f2;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--d-ink-2);
  font-variant-numeric: tabular-nums;
}

.jobs-list-chip.active .jobs-list-chip-count {
  background: rgba(45,125,210,0.2);
  color: var(--d-accent-strong);
}

/* Brand pill row — smaller, secondary */
.jobs-list-brand-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0 0 0.7rem 0;
}

.jobs-list-brand-pill {
  padding: 0.22rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--d-line);
  background: transparent;
  font-family: var(--font);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--d-ink-3);
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease;
}

.jobs-list-brand-pill:hover {
  color: var(--d-ink);
  border-color: var(--d-line-strong);
}

.jobs-list-brand-pill.active {
  background: var(--d-surface-2);
  border-color: var(--d-line-strong);
  color: var(--d-ink);
}

/* Job list container */
.jobs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.jobs-list-empty {
  list-style: none;
  padding: 1.5rem 1rem;
  text-align: center;
  color: var(--d-ink-3);
  font-size: 0.82rem;
  border: 1px dashed var(--d-line-strong);
  border-radius: var(--radius);
  background: transparent;
}

/* Job card — echoes installer-card; subtle surface lift on hover,
   no heavy shadow. */
.jobs-list-card {
  list-style: none;
  padding: 12px;
  margin-bottom: 8px;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-md);
  cursor: pointer;
  box-shadow: var(--d-shadow-sm);
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.jobs-list-card:hover {
  border-color: var(--d-line-strong);
  background: var(--d-surface-2);
  transform: translateY(-1px);
}

.jobs-list-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.6rem;
}

.jobs-list-card-main { min-width: 0; flex: 1; }

.jobs-list-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--d-ink);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jobs-list-card-loc {
  margin-top: 0.15rem;
  font-size: 12.5px;
  color: var(--d-ink-3);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.jobs-list-card-value {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--d-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding-top: 0.1rem;
}

.jobs-list-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
}

/* Stage badges — outline chips; the stage hue lives in the text and a
   faint border so card and pin still read the same colour at a glance. */
.jobs-list-stage-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  border: 1px solid transparent;
}

/* Sapphire for awaiting installer */
.jobs-list-stage-no_installer_assigned {
  color: #1e6abf;
  border-color: rgba(45,125,210,0.25);
}

/* Dimmed slate for installer assigned */
.jobs-list-stage-installer_assigned {
  color: var(--d-ink-2);
  border-color: #aac6de;
}

/* Warm tan for measure-up — matches MGG border accent */
.jobs-list-stage-to_be_measured {
  color: #e6b566;
  border-color: rgba(230, 181, 102, 0.35);
}

/* Green for installed */
.jobs-list-stage-installed {
  color: var(--d-ok);
  border-color: rgba(21,128,61,0.35);
}

/* Days-in-stage with halo dot — reuses haloFor() output */
.jobs-list-age {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--d-ink-3);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  margin-left: auto;
}

.jobs-list-age-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.jobs-list-age-green  { background: var(--d-ok); }
.jobs-list-age-yellow { background: var(--d-warn); }
.jobs-list-age-red    { background: var(--d-danger); }

/* Optional second line — assigned installer or m2-not-set warning */
.jobs-list-card-sub {
  margin-top: 0.4rem;
  font-size: 0.72rem;
  color: var(--d-ink-2);
}

.jobs-list-card-warn {
  margin-top: 0.4rem;
  padding: 2px 8px;
  border-radius: 0;
  background: transparent;
  color: var(--d-warn);
  border-left: 2px solid var(--d-warn);
  font-size: 11px;
  font-weight: 600;
  display: inline-block;
}

/* ============================================
   STAGE-COLOURED ACCENT ON JOB CARDS
   Mirrors the marker palette so the card and the pin read the same
   colour at a glance. The accent hex comes through --card-accent,
   set inline per card from STAGE_FILL in JS — one source of truth.
   ============================================ */
.jobs-list-card-themed {
  border-left: 3px solid var(--card-accent, transparent);
  transition: border-left-color 0.6s ease, box-shadow 0.6s ease, background 0.6s ease;
}
.jobs-list-card-themed:hover {
  /* Keep the accent strip even on hover so the colour read stays consistent.
     The outer border still picks up the existing hover state. */
  border-left-color: var(--card-accent, transparent);
}
/* Pending-offer cards earn a very soft amber wash and a slow pulse on
   the strip — same visual language as the map pulse, dialled down so
   a scrollable list isn't a flashing distraction. */
.jobs-list-card-pending {
  background: linear-gradient(to right, rgba(180,83,9,0.08), rgba(255,255,255,0) 35%);
  animation: jobs-card-pending-pulse 1.8s ease-in-out infinite;
}
@keyframes jobs-card-pending-pulse {
  0%, 100% { box-shadow: inset 3px 0 0 var(--card-accent, #b45309), 0 0 0 0 rgba(180,83,9,0); }
  50%      { box-shadow: inset 3px 0 0 var(--card-accent, #b45309), 0 0 0 3px rgba(180,83,9,0.10); }
}

/* ============================================
   JOBS TAB COLOUR LEGEND
   One compact line above the chip row so Calvin can train himself
   on the colour code without guessing.
   ============================================ */
.jobs-stage-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  padding: 0.25rem 0.1rem 0.7rem;
  font-family: var(--font);
  font-size: 0.66rem;
  color: var(--d-ink-3);
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--d-line);
  margin-bottom: 0.7rem;
}
.jobs-stage-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.jobs-stage-legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #dbe7f2;
}
.jobs-stage-legend-label {
  font-weight: 600;
  color: var(--d-ink-2);
}

/* Geocode-failed jobs surface at the top of the Jobs list with an amber
   left strip. Not red, because the job is fixable, not broken. */
.jobs-list-card-geofail-card {
  border-left: 3px solid var(--d-warn);
  background: var(--d-surface);
}
.jobs-list-card-geofail {
  display: block;
  margin: 0 0 8px 0;
  padding: 4px 8px;
  border-radius: 0;
  background: transparent;
  color: var(--d-warn);
  border-left: 2px solid var(--d-warn);
  font-size: 11.5px;
  font-weight: 600;
}

/* In-panel geocode fix block. Lives at the very top of the job panel
   body when job.geocode_failed === true. */
.geo-fix-block {
  margin: 0 0 16px 0;
  padding: 12px 16px;
  border-radius: var(--radius);
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
  border-left: 3px solid var(--d-warn);
}
.geo-fix-header strong {
  display: block;
  font-size: 13.5px;
  color: var(--d-warn);
  margin-bottom: 4px;
}
.geo-fix-sub {
  font-size: 12.5px;
  color: var(--d-ink-2);
  margin-bottom: 12px;
}
.geo-fix-fields {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}
.geo-fix-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--d-ink-2);
}
.geo-fix-field input {
  padding: 6px 10px;
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  font-size: 13.5px;
  color: var(--d-ink);
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.geo-fix-field input:focus {
  outline: none;
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}
.geo-fix-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.geo-fix-save {
  padding: 6px 12px;
  border: none;
  border-radius: var(--radius);
  background: var(--d-btn);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 130ms ease;
}
.geo-fix-save:hover { background: var(--d-btn-hover); }
.geo-fix-status {
  font-size: 0.78rem;
  color: var(--d-ink-2);
}


/* ============================================================
   COMPLIANCE GATE — added by compliance feature
   ============================================================ */

/* Stats bar roll-up chip */
.compliance-summary-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  font-size: 0.78rem;
  color: var(--d-ink-2);
}
.compliance-summary-chip .cs-green-pill,
.compliance-summary-chip .cs-yellow-pill,
.compliance-summary-chip .cs-red-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  font-weight: 600;
  background: transparent;
}
.compliance-summary-chip .cs-green-pill { color: var(--d-ok); }
.compliance-summary-chip .cs-yellow-pill { color: var(--d-warn); }
.compliance-summary-chip .cs-red-pill { color: var(--d-danger); }

/* Compliance gate card on installer detail panel */
.dp-comp-gate {
  background: var(--d-surface-2);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.dp-comp-gate-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.4rem;
}
.dp-comp-gate-head h4 { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--d-ink); }
.dp-comp-gate-fails ul,
.dp-comp-gate-warns ul {
  margin: 0.3rem 0 0.5rem 1.1rem;
  padding: 0;
  font-size: 13px;
}
.dp-comp-gate-fails strong { color: var(--d-danger); }
.dp-comp-gate-warns strong { color: var(--d-warn); }
.dp-comp-gate-help {
  margin: 0.5rem 0 0;
  font-size: 12.5px;
  color: var(--d-ink-3);
}

/* Inline edit block inside each compliance card */
.dp-comp-edit {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--d-line-strong);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dp-comp-edit label {
  font-size: 12px;
  color: var(--d-ink-3);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.dp-comp-edit input[type="date"],
.dp-comp-edit input[type="text"] {
  padding: 6px 10px;
  font-size: 13px;
  color: var(--d-ink);
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.dp-comp-edit input[type="date"]:focus,
.dp-comp-edit input[type="text"]:focus {
  outline: none;
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}
.dp-comp-edit .dp-btn-secondary {
  padding: 6px 12px;
  font-size: 12.5px;
  background: var(--d-btn);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition: background 130ms ease;
}
.dp-comp-edit .dp-btn-secondary:hover { background: var(--d-btn-hover); }
.dp-comp-edit .dp-btn-link {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--d-danger);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 130ms ease;
}
.dp-comp-edit .dp-btn-link:hover { background: rgba(185,28,28,0.12); }
.dp-comp-note {
  font-size: 12.5px;
  color: var(--d-ink-2);
  background: var(--d-bg);
  border-left: 3px solid var(--d-ink-3);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin: 0.4rem 0;
}

/* Override modal */
.compliance-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(16,40,63,0.40);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}
.compliance-modal {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  width: min(520px, 92vw);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--d-shadow-lg);
}
.compliance-modal h3 {
  margin: 0 0 0.5rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--d-danger);
}
.compliance-modal p { margin: 0.3rem 0; font-size: 13.5px; }
.cmodal-fails {
  margin: 0.4rem 0 0.6rem 1.1rem;
  padding: 0;
  color: var(--d-danger);
  font-size: 13px;
}
.cmodal-warn {
  margin: 0.4rem 0 0.6rem;
  font-size: 13px;
}
.cmodal-warning-text {
  margin: 0.7rem 0;
  padding: 8px 12px;
  background: transparent;
  border-left: 2px solid var(--d-danger);
  border-radius: 0;
  color: var(--d-ink-2);
  font-size: 13px;
}
.cmodal-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0.6rem 0;
}
.cmodal-field span {
  font-size: 12.5px;
  color: var(--d-ink-3);
}
.cmodal-field input {
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--d-ink);
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  background: var(--d-bg);
  transition: border-color 130ms ease, box-shadow 130ms ease;
}
.cmodal-field input:focus {
  outline: none;
  border-color: var(--d-accent);
  box-shadow: 0 0 0 3px var(--d-ring);
}
.cmodal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 0.8rem;
}
.cmodal-cancel {
  height: 36px;
  padding: 8px 14px;
  background: transparent;
  color: var(--d-ink);
  border: 1px solid var(--d-line-strong);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 130ms ease;
}
.cmodal-cancel:hover { background: var(--d-surface-2); }
.cmodal-send {
  height: 36px;
  padding: 8px 14px;
  background: #dc2626;
  color: white;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background 130ms ease;
}
.cmodal-send:hover { background: #b91c1c; }
.cmodal-error {
  margin-top: 0.5rem;
  color: var(--d-danger);
  font-size: 13px;
  font-weight: 600;
}

/* Candidate row tints by compliance state — subtle so they don't shout */
.cand.cand-compliance-yellow {
  background: linear-gradient(to right, rgba(180,83,9,0.07) 0%, transparent 8%);
}
.cand.cand-compliance-red {
  background: linear-gradient(to right, rgba(185,28,28,0.07) 0%, transparent 8%);
  border-left: 3px solid var(--d-danger);
}

/* ============================================================
   STATS PANELS — Roster + Compliance + Insurance window
   Replaces the old single-row chip cluster floating on the map.
   ============================================================ */

/* Override the legacy .stats-bar flex row when this layout is in use. The
   panels still float over the top of the map. Two-column block now that the
   Roster panel has been removed; Compliance and Insurance window each take
   roughly half the available width. */
.stats-bar.stats-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  top: 0.75rem;
  right: 0.75rem;
  left: auto;
  max-width: calc(100% - 1.5rem);
  width: min(720px, calc(100% - 1.5rem));
  z-index: 10;
}

.stat-panel {
  background: var(--d-surface);
  border: 1px solid var(--d-line);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  box-shadow: var(--d-shadow-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* allow children to truncate inside grid */
}

.sp-head {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--d-ink-3);
}

.sp-big {
  font-size: 26px;
  font-weight: 700;
  color: var(--d-ink);
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}

.sp-sublabels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  font-size: 12px;
  color: var(--d-ink-3);
  line-height: 1.35;
}

.sp-sublabels strong {
  color: var(--d-ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sp-sub {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 4px;
  min-height: 22px;
}

.sp-sub-sep {
  color: #aac6de;
  user-select: none;
}

/* Clickable sublabels (filterable subsets) get a hover affordance and a 32px
   minimum tap target. Keyboard focus matches hover. */
.sp-sub--clickable {
  cursor: pointer;
  min-height: 32px;
  padding: 4px 6px;
  transition: background-color 120ms ease, color 120ms ease;
}
.sp-sub--clickable:hover,
.sp-sub--clickable:focus-visible {
  background: var(--d-surface-2);
  color: var(--d-ink);
  outline: none;
}

/* Jobs sub-pills (action soon / overdue) appear only when non-zero. */
.sp-jobs-extra {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sp-jobs-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: transparent;
}
.sp-jobs-pill strong {
  font-weight: 700;
}
.sp-jobs-pill--yellow {
  color: var(--d-warn);
  border: 1px solid rgba(180,83,9,0.3);
}
.sp-jobs-pill--red {
  color: var(--d-danger);
  border: 1px solid rgba(185,28,28,0.3);
}

/* ----- Panel 2: Compliance segment bar ----- */
.sp-bar {
  display: flex;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: #dbe7f2;
  margin: 2px 0 4px;
}
.sp-bar-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 100%;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  position: relative;
  transition: filter 120ms ease;
}
.sp-bar-seg:hover,
.sp-bar-seg:focus-visible {
  filter: brightness(1.12);
  outline: none;
}
.sp-bar-seg--green { background: #16a34a; }
.sp-bar-seg--yellow { background: #f59e0b; }
.sp-bar-seg--red { background: #dc2626; }

/* Count text only shows when its segment is wide enough to fit it. We do this
   with a flex layout that hides overflow naturally. The tooltip carries the
   precise number. */
.sp-bar-seg-count {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
}

.sp-sublabels--compliance {
  font-size: 12px;
}
.sp-sub--compliance {
  white-space: nowrap;
}
.sp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.sp-dot--green { background: var(--d-ok); }
.sp-dot--yellow { background: var(--d-warn); }
.sp-dot--red { background: var(--d-danger); }

/* ----- Panel 3: Insurance window rows ----- */
.sp-ins-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 2px;
}
.sp-ins-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  min-height: 32px;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}
.sp-ins-row:hover {
  transform: translateX(1px);
}
.sp-ins-row--warning {
  background: transparent;
  color: var(--d-warn);
  border: 1px solid rgba(180,83,9,0.3);
}
.sp-ins-row--warning:hover {
  background: rgba(180,83,9,0.08);
}
.sp-ins-row--danger {
  background: transparent;
  color: var(--d-danger);
  border: 1px solid rgba(185,28,28,0.3);
}
.sp-ins-row--danger:hover {
  background: rgba(185,28,28,0.08);
}
.sp-ins-label {
  font-weight: 600;
}
.sp-ins-num {
  font-weight: 700;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.sp-ins-empty {
  font-size: 12px;
  color: var(--d-ok);
  font-weight: 600;
  padding: 6px 8px;
  background: transparent;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(21,128,61,0.3);
  text-align: center;
}

/* ----- Responsive ----- */
@media (max-width: 960px) {
  .stats-bar.stats-panels {
    width: calc(100% - 1.5rem);
  }
  .sp-big { font-size: 22px; }
}

/* Narrow container: stack panels vertically and keep them compact. */
@media (max-width: 720px) {
  .stats-bar.stats-panels {
    grid-template-columns: 1fr;
    gap: 0.4rem;
    top: 0.5rem;
    right: 0.5rem;
    max-width: calc(100% - 1rem);
    width: calc(100% - 1rem);
  }
  .stat-panel {
    padding: 10px 12px;
  }
  .sp-big {
    font-size: 22px;
  }
}

/* iOS Safari auto-zoom fix: 16px minimum on inputs for touch devices */
@media (hover: none) and (pointer: coarse) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* ---- Brands worked field group (Add/Edit installer form) ---- */
.form-section {
  margin: 20px 0 8px;
  padding: 16px 20px;
  background: var(--d-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--d-line);
}
.form-section h3 {
  margin: 0 0 0.35rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--d-ink);
}
.form-helper {
  margin: 0 0 0.75rem;
  color: var(--d-ink-3);
  font-size: 12.5px;
}
.form-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.4rem 0;
  font-size: 13.5px;
  color: var(--d-ink);
  cursor: pointer;
}
.form-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--d-accent);
}

/* ---- Today tab ---- */
.today-tab { padding: 4px; max-width: 800px; }
.today-tab h2 { color: var(--d-ink); font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.today-summary { color: var(--d-ink-3); font-size: 13px; margin: 0 0 20px; }
.today-section {
  margin: 0 0 16px;
  padding: 16px;
  background: var(--d-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--d-line);
  box-shadow: var(--d-shadow-sm);
}
.today-section h3 {
  margin: 0 0 8px;
  color: var(--d-ink-3);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.today-section ul { margin: 0; padding: 0; list-style: none; }
.today-section li {
  margin: 0;
  padding: 8px 0;
  line-height: 1.5;
  font-size: 13px;
  border-bottom: 1px solid var(--d-line);
}
.today-section li:last-child { border-bottom: none; padding-bottom: 0; }
.today-section li:first-child { padding-top: 0; }
.today-section a { color: var(--d-ink); text-decoration: none; font-weight: 600; }
.today-section a:hover { color: var(--d-accent); text-decoration: underline; }
.today-empty { color: var(--d-ink-3); font-size: 13px; margin: 0; font-style: italic; }
.today-meta { color: var(--d-ink-3); font-size: 12px; }

/* Brand chips — used everywhere a job or installer appears.
   Outline style: coloured text + faint coloured border, no fill. */
.brand-chip {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--d-ink-2);
  line-height: 1.4;
  vertical-align: middle;
}
.brand-chip-GGI { color: var(--d-brand-ggi); border-color: rgba(45,125,210,0.25); }
.brand-chip-MGG { color: var(--d-brand-mgg); border-color: rgba(234,115,23,0.35); }
.brand-chips { display: inline-flex; gap: 4px; }

/* Brand filter pill toggle — dark segmented control, used on jobs tab
   and margin dashboard */
.brand-filter {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--d-bg);
  border: 1px solid var(--d-line);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.brand-filter-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--d-ink-3);
  transition: color 130ms ease, background 130ms ease;
}
.brand-filter-btn:hover { color: var(--d-ink-2); }
.brand-filter-btn.is-active { background: var(--d-surface-2); color: var(--d-ink); box-shadow: none; }
.brand-filter-btn[data-brand="GGI"].is-active { color: var(--d-brand-ggi); }
.brand-filter-btn[data-brand="MGG"].is-active { color: var(--d-brand-mgg); }