/* ─── CSS Variables (Light / Dark) ──────────────────────────── */
/* Light: clean off-white, white sidebar/cards, orange accent */
:root {
  --bg-body:    #fafafa;
  --bg-card:    #ffffff;
  --bg-sidebar: #ffffff;
  --border:     #e5e7eb;
  --text-1:     #0a0a0a;
  --text-2:     #525252;
  --text-3:     #a0a0a0;
  --bg-input:   #ffffff;
  --bg-hover:   #f5f5f5;
  --bg-table-head: #fafafa;
  --bg-table-row-hover: #f5f5f5;
  /* Round 8 P5: brand purple as the neutral fallback. Custom accents from
     White-Label override these via the synchronous boot script in index.html
     so a user's saved accent paints on the FIRST frame, no orange flash. */
  --accent:        #7c3aed;
  --accent-hover:  #6d28d9;
  --accent-soft:   rgba(124,58,237,0.12);
  --accent-text-on:#ffffff;
}
/* Dark: near-black layered greys, brand purple accent (Convoix design ref) */
.dark {
  --bg-body:    #0e0e10;
  --bg-card:    #1a1a1c;
  --bg-sidebar: #141416;
  --border:     #2a2a2c;
  --text-1:     #ececec;
  --text-2:     #a0a0a0;
  --text-3:     #85858b; /* contrast pass: was #6a6a6e — too muddy on cheap/office screens */
  --bg-input:   #232326;
  --bg-hover:   #232326;
  --bg-table-head: #141416;
  --bg-table-row-hover: #232326;
  --accent:        #8b5cf6;
  --accent-hover:  #a78bfa;
  --accent-soft:   rgba(139,92,246,0.16);
  --accent-text-on:#ffffff;
}

body {
  background: var(--bg-body);
  color: var(--text-1);
  transition: background 0.2s, color 0.2s;
}
/* Override Tailwind dark:bg-gray-800 (blue-tinted) on body in dark mode */
.dark body { background: var(--bg-body) !important; }

/* ─── Nav Links ─────────────────────────────────────────────── */
.nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  text-decoration: none;
  cursor: pointer;
  /* No global transition — active state changes (e.g. App.init applying
     `.active` to the route's sidebar item) need to render instantly so
     refreshes don't show a 150ms fade-in flash. Hover gets its own
     transition below. */
}
.nav-link { color: var(--text-2); }
.nav-link:hover {
  background: var(--bg-hover);
  color: var(--text-1);
  transition: background 0.15s, color 0.15s;
}
/* Active nav uses the contrast-safe TEXT variant of the brand accent
   (white-label.js derives --accent-text-light/dark; falls back to accent). */
.nav-link.active { background: var(--accent-soft); color: var(--accent-text-light, var(--accent)); font-weight: 600; }
.nav-link.active svg { stroke: var(--accent-text-light, var(--accent)); }
.dark .nav-link.active { background: var(--accent-soft); color: var(--accent-text-dark, var(--accent)) !important; font-weight: 600; }
.dark .nav-link.active svg { stroke: var(--accent-text-dark, var(--accent)) !important; }
.dark .nav-link:hover:not(.active) { background: rgba(255,255,255,0.06); color: #ffffff; }

/* ─── Cards ─────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 20px;
  transition: background 0.2s, border-color 0.2s;
}
.card-sm {
  background: var(--bg-card);
  border-radius: 10px;
  border: 1px solid var(--border);
  padding: 16px;
  transition: background 0.2s, border-color 0.2s;
}

/* ─── Buttons ───────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px;
  background: var(--accent); color: var(--accent-text-on);
  font-size: 0.875rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: scale(0.98); }
.btn-primary:disabled { background: #9ca3af; cursor: not-allowed; }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px;
  background: var(--bg-card); color: var(--accent-text, var(--accent));
  font-size: 0.875rem; font-weight: 600;
  border: 1.5px solid var(--accent); cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-secondary:hover { background: var(--accent-soft); }

.btn-danger {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 8px;
  background: #fee2e2; color: #dc2626;
  font-size: 0.875rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #fecaca; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 8px;
  background: transparent; color: #6b7280;
  font-size: 0.875rem; font-weight: 500;
  border: none; cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-ghost:hover { background: #f3f4f6; color: #111827; }

/* ─── Form Controls ─────────────────────────────────────────── */
.form-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text-1);
  background: var(--bg-input);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.2s, color 0.2s;
  font-family: inherit;
}
.form-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-input::placeholder { color: var(--text-3); }
select.form-input { cursor: pointer; }
textarea.form-input { resize: vertical; min-height: 80px; }

/* ─── Status Badges ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 600;
}
.badge-new           { background:#f1f5f9;  color:#475569; border: 1px solid #94a3b8; }
.badge-contacted     { background:#dbeafe;  color:#1e40af;  }
.badge-qualified     { background:#dcfce7;  color:#166534;  }
.badge-viewing-booked{ background:#cffafe;  color:#155e75;  }
.badge-offer-made    { background:#fce7f3;  color:#9d174d;  }
.badge-unqualified   { background:#fee2e2;  color:#991b1b;  }
.badge-converted     { background:#ede9fe;  color:#5b21b6;  }
.badge-scheduled  { background:#dbeafe;  color:#1e40af;  }
.badge-completed  { background:#dcfce7;  color:#166534;  }
.badge-cancelled  { background:#f3f4f6;  color:#6b7280;  }
.badge-no-show    { background:#fee2e2;  color:#991b1b;  }

/* ─── Score Ring ─────────────────────────────────────────────── */
.score-ring {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.875rem;
  flex-shrink: 0;
}
.score-high  { background: #d1fae5; color: #065f46; }
.score-mid   { background: #fef3c7; color: #92400e; }
.score-low   { background: #fee2e2; color: #991b1b; }

/* ─── Live Activity Feed ─────────────────────────────────────── */
@keyframes cvx-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}
@keyframes cvx-feed-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.feed-item-new {
  animation: cvx-feed-in 0.4s ease-out;
}

/* ─── Pipeline Kanban ───────────────────────────────────────── */
.kanban-col {
  min-width: 240px; width: 240px;
  background: var(--bg-hover);
  border-radius: 12px;
  padding: 12px;
  flex-shrink: 0;
}
.kanban-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.1s, background 0.2s;
}
.kanban-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); transform: translateY(-1px); }
.kanban-card:last-child { margin-bottom: 0; }

/* ─── Kanban Drag & Drop ─────────────────────────────────────── */
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card.cvx-dragging {
  opacity: 0.45;
  cursor: grabbing;
  transform: rotate(1.5deg) scale(0.98);
  box-shadow: 0 8px 20px rgba(68, 76, 231, 0.25);
}
.kanban-col.cvx-drop-target {
  background: rgba(124, 58, 237, 0.08);
  outline: 2px dashed #7c3aed;
  outline-offset: -4px;
  transition: background 0.15s, outline-color 0.15s;
}
.dark .kanban-col.cvx-drop-target {
  background: rgba(124, 58, 237, 0.18);
  outline-color: #a78bfa;
}
@keyframes cvx-card-drop-in {
  0%   { transform: scale(0.94) translateY(-4px); opacity: 0; }
  60%  { transform: scale(1.02) translateY(0);    opacity: 1; }
  100% { transform: scale(1)    translateY(0);    opacity: 1; }
}
.kanban-card.cvx-just-dropped {
  animation: cvx-card-drop-in 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Touch devices: disable drag handle appearance so the buttons read as the
   primary interaction. draggable is also stripped in JS on coarse pointers. */
@media (pointer: coarse) {
  .kanban-card[draggable="true"] { cursor: pointer; }
}

/* ─── Booking Calendar ──────────────────────────────────────── */
.cal-day {
  min-height: 80px;
  border: 1px solid #f3f4f6;
  padding: 6px;
  border-radius: 6px;
  transition: background 0.1s;
}
.cal-day:hover { background: #fafafa; }
.cal-day.today { background: #eef2ff; border-color: #a5b4fc; }
.cal-day.other-month { opacity: 0.4; }
.cal-event {
  font-size: 0.7rem;
  padding: 2px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─── Integration Status ────────────────────────────────────── */
.integration-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  transition: border-color 0.15s, background 0.2s;
}
.integration-card.connected { border-color: #6ee7b7; }
.status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.status-dot.on  { background: #10b981; box-shadow: 0 0 0 3px rgba(16,185,129,0.2); }
.status-dot.off { background: #d1d5db; }
.status-dot.err { background: #f87171; box-shadow: 0 0 0 3px rgba(248,113,113,0.2); }

/* ─── WhatsApp Widget ───────────────────────────────────────── */
#wa-btn {
  width: 52px; height: 52px; border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(37,211,102,0.4);
  cursor: pointer;
  border: none;
  transition: transform 0.15s, box-shadow 0.15s;
}
#wa-btn:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,211,102,0.5); }
#wa-panel {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  width: 300px;
  overflow: hidden;
  transform-origin: bottom left;
  transition: transform 0.2s, opacity 0.2s;
}
#wa-panel.hidden { transform: scale(0.9) translateY(8px); opacity: 0; pointer-events: none; }

/* ─── Toast ─────────────────────────────────────────────────── */
.toast {
  pointer-events: all;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 10px;
  background: var(--bg-card); color: var(--text-1);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  font-size: 0.875rem; font-weight: 500;
  border: 1px solid var(--border);
  min-width: 260px;
  animation: slideUp 0.25s ease;
}
.toast.success { border-left: 4px solid #10b981; }
.toast.error   { border-left: 4px solid #ef4444; }
.toast.info    { border-left: 4px solid #444ce7; }
.toast.warning { border-left: 4px solid #f59e0b; }

@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* ─── Modal animation ───────────────────────────────────────── */
#modal-overlay:not(.hidden) #modal-content {
  animation: modalIn 0.2s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── Stat Card ─────────────────────────────────────────────── */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex; flex-direction: column; gap: 4px;
  transition: background 0.2s, border-color 0.2s;
}
/* Colored left-border accents per stat card (light mode only) */
html:not(.dark) .stat-card:nth-child(1) { border-left: 3px solid #3b82f6; }
html:not(.dark) .stat-card:nth-child(2) { border-left: 3px solid #10b981; }
html:not(.dark) .stat-card:nth-child(3) { border-left: 3px solid #8b5cf6; }
html:not(.dark) .stat-card:nth-child(4) { border-left: 3px solid #f59e0b; }

.stat-value { font-size: 1.75rem; font-weight: 700; color: var(--text-1); line-height: 1; }
.stat-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.stat-change { font-size: 0.75rem; font-weight: 600; }
.stat-change.up   { color: #059669; }
.stat-change.down { color: #dc2626; }

/* ─── Table ─────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  text-align: left; padding: 10px 16px;
  font-size: 0.75rem; font-weight: 600;
  color: var(--text-2); text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  background: var(--bg-table-head);
}
.data-table td {
  padding: 12px 16px;
  font-size: 0.875rem; color: var(--text-1);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
/* Allow Tailwind text-align utilities to override the default left-align on <th>
   (Tailwind CDN loads before this stylesheet, so utilities lose to component CSS otherwise). */
.data-table th.text-center,
.data-table td.text-center { text-align: center; }
.data-table th.text-right,
.data-table td.text-right  { text-align: right; }
/* Keep badges/bars visually aligned with their centered column headers. */
.data-table td.text-center > .badge,
.data-table th.text-center > .badge { display: inline-block; min-width: 2.25rem; text-align: center; }
.data-table tr:hover td { background: var(--bg-table-row-hover); }
.data-table tr:last-child td { border-bottom: none; }

/* ─── Score bar ─────────────────────────────────────────────── */
.score-bar-track {
  height: 6px; background: #f3f4f6; border-radius: 99px; overflow: hidden;
}
.score-bar-fill {
  height: 100%; border-radius: 99px;
  transition: width 0.6s ease;
}

/* ─── Section heading ───────────────────────────────────────── */
.section-heading {
  font-size: 1rem; font-weight: 700; color: var(--text-1);
}
.section-sub {
  font-size: 0.8125rem; color: var(--text-2); margin-top: 2px;
}

/* ─── Standard page header (Round 8 P3) ──────────────────────
   <h1 class="page-title"> + <p class="page-subtitle"> at the top
   of every primary view that doesn't have a custom hero block.
   Dashboard / Settings / AI Agent have their own per-page hero
   classes (.dashboard-greeting / .settings-title / .ai-agent-title)
   sized to the same 28px / 14px / 24-32px-bottom pattern. */
#view-container .page-title {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--text-1);
  margin: 0 0 4px;
}
#view-container .page-subtitle {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 24px;
}
@media (max-width: 767px) {
  #view-container .page-title { font-size: 22px; }
  #view-container .page-subtitle { margin-bottom: 16px; }
}

/* ─── Settings sub-rail layout (Round 8 P2) ──────────────────
   Two-column page: vertical rail (220px fixed) + content card.
   Each section renders only the active tab; the other tabs are
   represented by their button in the rail. URL is kept in sync
   with ?tab= for deep-linking and browser back/forward. */
.settings-view {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px;
  max-width: 1100px;
}
.settings-header {
  display: flex;
  flex-direction: column;
}
.settings-title {
  font-size: 24px; font-weight: 600; line-height: 1.2;
  color: var(--text-1); margin: 0 0 4px;
}
.settings-subtitle {
  font-size: 14px; color: var(--text-2); margin: 0;
}
.settings-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: start;
}
.settings-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: 8px;
}
.settings-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.settings-rail-item:hover { background: var(--bg-hover); color: var(--text-1); }
.settings-rail-item.active {
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font-weight: 600;
}
.settings-rail-icon { display: inline-flex; flex-shrink: 0; }
.settings-rail-item.active .settings-rail-icon svg { stroke: var(--accent-text, var(--accent)); }
.settings-rail-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.settings-content { min-width: 0; }
.settings-card-stack { display: flex; flex-direction: column; gap: 20px; }
.settings-card-stack > .card,
.settings-card-stack > .integration-card { box-shadow: none; border-radius: 12px; padding: 24px; }
html:not(.dark) .settings-card-stack > .card,
html:not(.dark) .settings-card-stack > .integration-card { border-color: rgba(0, 0, 0, 0.06); }
.dark .settings-card-stack > .card,
.dark .settings-card-stack > .integration-card { border-color: rgba(255, 255, 255, 0.06); }

/* Mobile: rail collapses into a horizontal scrollable tab strip pinned at
   the top of the content. Each item shrinks to icon + label below. */
@media (max-width: 767px) {
  .settings-body { grid-template-columns: 1fr; gap: 16px; }
  .settings-rail {
    flex-direction: row;
    gap: 4px;
    position: static;
    overflow-x: auto;
    margin: 0 -4px;
    padding: 4px;
    scroll-snap-type: x proximity;
  }
  .settings-rail-item {
    flex-direction: column;
    flex: 0 0 auto;
    gap: 4px;
    padding: 8px 12px;
    font-size: 11px;
    min-width: 76px;
    text-align: center;
    scroll-snap-align: start;
  }
  .settings-rail-label { font-size: 11px; }
  .settings-title { font-size: 20px; }
}

/* ─── AI Agent page (Round 8 P2) ─────────────────────────────
   Promoted out of Settings → Integrations. Layout: chat (60%) +
   side panel (40%) on desktop, stacked on mobile. Cards use the
   shared design tokens (24px padding, 12px radius, soft border,
   no shadow). The chat card opts out of the 24px padding because
   it has its own internal panels (header / picker / thread / input). */
.ai-agent-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px;
}
.ai-agent-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ai-agent-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 4px;
}
.ai-agent-subtitle {
  font-size: 14px;
  color: var(--text-2);
  margin: 0;
}
.ai-agent-powered {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.ai-agent-body {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 24px;
  align-items: stretch;
}
.ai-agent-chat,
/* Test Bench: chat gets the room, snapshot panel is a fixed 320px rail.
   (Was an inline style — it overrode the mobile one-column rule below and
   the panel rendered on top of the chat on phones. Oct 2 2026.) */
.ai-agent-body--testbench { grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; }
.ai-agent-side {
  min-height: 540px;
  box-shadow: none;
  border-radius: 12px;
}
html:not(.dark) .ai-agent-chat,
html:not(.dark) .ai-agent-side { border-color: rgba(0, 0, 0, 0.06); }
.dark .ai-agent-chat,
.dark .ai-agent-side             { border-color: rgba(255, 255, 255, 0.06); }
.ai-agent-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-3);
  margin: 0 0 8px;
}
.ai-agent-muted {
  font-size: 12px;
  color: var(--text-3);
  font-style: italic;
  margin: 0;
}
.ai-agent-preset-btn {
  text-align: left;
  font-size: 12px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  color: var(--text-1);
  line-height: 1.35;
  transition: background 0.12s, border-color 0.12s;
}
.ai-agent-preset-btn:hover {
  background: var(--bg-hover);
  border-color: var(--accent);
}
@media (max-width: 767px) {
  .ai-agent-body, .ai-agent-body--testbench { grid-template-columns: minmax(0, 1fr); }
  .ai-agent-chat,
  .ai-agent-side { min-height: 0; min-width: 0; }
  /* Chat first, snapshot below it — on a phone you read the thread, then the facts. */
  .ai-agent-body--testbench .ai-agent-chat { order: 0; }
  .ai-agent-body--testbench .ai-agent-side { order: 1; }
  .ai-agent-title { font-size: 20px; }
}

/* ─── Sidebar AI badge (Round 8 P2) ──────────────────────────
   Inline pill next to the AI Agent nav label so the headline
   differentiator reads at a glance. Sits flush-right via ml-auto-
   like flex behavior since nav-link is already display:flex. */
.cvx-ai-badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text, var(--accent));
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}
.nav-link.active .cvx-ai-badge {
  /* Active state already paints accent on text — keep the pill
     readable by tinting its fill slightly darker than the surface. */
  background: rgba(255,255,255,0.4);
}
.dark .nav-link.active .cvx-ai-badge {
  background: rgba(255,255,255,0.15);
}

/* ─── Dashboard polish (Round 8) ─────────────────────────────
   The dashboard view wraps its sections in `.dashboard-view`. The
   wrapper owns vertical rhythm via gap (32px desktop / 20px mobile)
   and overrides the `mb-6` margins inside child cards so spacing
   isn't applied twice. */
.dashboard-view {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
/* Pad the dashboard outer surface to 32px (was 24px from view-container) */
#view-container:has(.dashboard-view) { padding: 32px !important; }

/* Strip legacy bottom margins on dashboard children — the wrapper's
   gap already handles spacing. Without this, mb-6 (24px) compounds
   on top of the 32px gap. */
.dashboard-view .mb-6 { margin-bottom: 0 !important; }

/* Greeting block */
.dashboard-greeting-block { /* lets the wrapper's gap own spacing */ }
.dashboard-greeting {
  font-size: 28px; font-weight: 600; line-height: 1.2;
  color: var(--text-1); margin: 0 0 4px;
}
.dashboard-subtitle {
  font-size: 14px; color: var(--text-2); margin: 0;
}

/* Stat cards row — 4-col, 20px gap on desktop */
.dashboard-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
/* Two-up widget row — 50/50 split with 24px gap */
.dashboard-row-2up {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}
/* Direct card children should fill their grid cell */
.dashboard-row-2up > .card { width: 100%; height: 100%; }

/* Card styling overrides — softer borders, no shadow, 24px inner pad */
.dashboard-view .card {
  padding: 24px;
  box-shadow: none;
}
html:not(.dark) .dashboard-view .card {
  border-color: rgba(0, 0, 0, 0.06);
}
.dark .dashboard-view .card {
  border-color: rgba(255, 255, 255, 0.06);
}

/* Pipeline + Live Activity height caps in the 2-up row.
   Agent Performance / full-width widgets stay uncapped. */
.dashboard-widget-pipeline {
  max-height: 360px;
  overflow-y: auto;
}
.dashboard-row-2up #activity-feed-card {
  max-height: 360px !important;
}

/* Mobile: stat cards 2x2, widget rows stack, smaller padding/gap, smaller title */
@media (max-width: 767px) {
  .dashboard-view { gap: 20px; }
  #view-container:has(.dashboard-view) { padding: 16px !important; }
  .dashboard-stats-row { grid-template-columns: repeat(2, 1fr); }
  .dashboard-row-2up   { grid-template-columns: minmax(0, 1fr); }
  .dashboard-greeting  { font-size: 22px; }
}

/* ─── Mobile responsive ─────────────────────────────────────── */
#sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 59;
}
#sidebar-overlay.visible { display: block; }

@media (max-width: 767px) {
  #sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    z-index: 60;
    /* !important to beat any Tailwind transform reset that other utility
       classes on the sidebar pull in via the preflight. */
    transform: translateX(-100%) !important;
    transition: transform 0.25s ease;
  }
  #sidebar.open {
    transform: translateX(0) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.15);
  }
  /* Round 8 P5 design tokens — view padding 16px, card padding 16px */
  #view-container { padding: 16px !important; }
  .card { padding: 16px !important; }
  .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Forms — single column, full-width inputs (Add New Lead / Schedule Meeting). */
  .grid.grid-cols-2 { grid-template-columns: 1fr !important; }
  .form-input, select.form-input, textarea.form-input { width: 100% !important; }

  /* Modals — full-screen on mobile so the merge dialog / lead-detail modal
     don't get clipped. The overlay's centring stays; we just stretch the
     content panel to fill the viewport with a small inset. */
  #modal-overlay:not(.hidden) { padding: 0 !important; align-items: stretch !important; }
  #modal-overlay:not(.hidden) #modal-content {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  /* Pipeline kanban — horizontal scroll with snap; columns ~280px wide. */
  #kanban-board {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  #kanban-board > .kanban-col {
    flex: 0 0 280px !important;
    min-width: 280px !important;
    scroll-snap-align: start;
  }

  /* Tables → card-per-row layout. We use display:block on the table parts
     and `data-label` attributes (set by the views) to render each cell as
     "Label: value". Falls back gracefully for tables that don't yet have
     data-label attrs — they just show the raw text. */
  .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table td, .data-table th,
  .team-leaderboard, .team-leaderboard thead, .team-leaderboard tbody, .team-leaderboard tr, .team-leaderboard td, .team-leaderboard th {
    display: block;
  }
  .data-table thead, .team-leaderboard thead { display: none; }
  .data-table tr, .team-leaderboard tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
  }
  .data-table td, .team-leaderboard td {
    border: none !important;
    padding: 4px 0 !important;
    font-size: 13px;
    /* Stacked cells read as "LABEL: value" — centred/right-aligned numbers
       floated mid-row with no context (phone audit, Oct 2 2026). */
    text-align: left !important;
  }
  .data-table td[data-label] > .flex.justify-center,
  .data-table td[data-label] > div[style*="inline-flex"] { display: inline-flex !important; vertical-align: middle; }
  .data-table td[data-label]::before, .team-leaderboard td[data-label]::before {
    content: attr(data-label) ': ';
    font-weight: 600;
    color: var(--text-2);
    margin-right: 6px;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
  }

  /* Compact secondary metadata — agent avatars and relative timestamps
     hidden when cramped, surface on tap via the lead detail page. */
  .cvx-hide-mobile { display: none !important; }

  /* Settings sub-rail collapses to a horizontal tab strip on mobile —
     existing rule lives at line 506 (.settings-body { grid-template-columns: 1fr }) */
}

/* Body-level guard: no horizontal scroll on mobile (only the kanban
   container scrolls horizontally). */
@media (max-width: 767px) {
  body, html { overflow-x: hidden; }
  #kanban-board { overflow-x: auto; }
}

@media (min-width: 768px) {
  #hamburger-btn   { display: none !important; }
  #sidebar-overlay { display: none !important; }
}

/* ─── Dark Mode structural overrides ───────────────────────── */
.dark #sidebar {
  background: var(--bg-sidebar) !important;
  border-right-color: var(--border) !important;
}
.dark header {
  background: var(--bg-body) !important;
  border-bottom-color: var(--border) !important;
}
.dark #modal-content {
  background: var(--bg-card) !important;
  color: var(--text-1);
}
.dark #wa-panel {
  background: var(--bg-card);
}
.dark .score-bar-track {
  background: #3a3b40;
}
.dark select.form-input option {
  background: var(--bg-input);
  color: var(--text-1);
}

/* Sidebar text colours */
.dark #sidebar .sidebar-brand-name  { color: var(--text-1) !important; }
.dark #sidebar .sidebar-brand-sub   { color: var(--text-2) !important; }
.dark #sidebar .sidebar-section-label { color: var(--text-3) !important; }
.dark #sidebar-user-info { border-top-color: var(--border) !important; }
/* Sidebar user info (Mohammad Jassim / Admin) */
.dark #sidebar-user-info .text-gray-800 { color: var(--text-1) !important; }
.dark #sidebar-user-info .text-gray-400 { color: var(--text-2) !important; }
.dark #sidebar-user-info button { color: var(--text-2) !important; background: none !important; }
.dark #sidebar-user-info button:hover,
.dark #sidebar-user-info button:focus { color: #ffffff !important; background: rgba(255,255,255,0.08) !important; }

/* Score rings — keep readable on dark cards */
.dark .score-high { background: rgba(16,185,129,0.18); color: #6ee7b7; }
.dark .score-mid  { background: rgba(245,158,11,0.18); color: #fcd34d; }
.dark .score-low  { background: rgba(239,68,68,0.18); color: #fca5a5; }

/* Status badges */
.dark .badge-new           { background: rgba(37,99,235,0.18);  color: #93c5fd; }
.dark .badge-contacted     { background: rgba(217,119,6,0.18);  color: #fcd34d; }
.dark .badge-qualified     { background: rgba(5,150,105,0.18);  color: #6ee7b7; }
.dark .badge-viewing-booked{ background: rgba(8,145,178,0.18);  color: #67e8f9; }
.dark .badge-offer-made    { background: rgba(219,39,119,0.18); color: #f9a8d4; }
.dark .badge-unqualified   { background: rgba(220,38,38,0.18);  color: #fca5a5; }
.dark .badge-converted     { background: rgba(124,58,237,0.18); color: #c4b5fd; }
.dark .badge-scheduled  { background: rgba(29,78,216,0.18);  color: #93c5fd; }
.dark .badge-completed  { background: rgba(5,150,105,0.18);  color: #6ee7b7; }
.dark .badge-cancelled  { background: rgba(107,114,128,0.18);color: #d1d5db; }
.dark .badge-no-show    { background: rgba(220,38,38,0.18);  color: #fca5a5; }

/* Ghost button */
.dark .btn-ghost { color: var(--text-2); }
.dark .btn-ghost:hover { background: var(--bg-hover); color: var(--text-1); }

/* Danger button */
.dark .btn-danger { background: rgba(239,68,68,0.15); color: #fca5a5; }
.dark .btn-danger:hover { background: rgba(239,68,68,0.25); }

/* Booking calendar */
.dark .cal-day { border-color: var(--border); background: var(--bg-card); }
.dark .cal-day:hover { background: var(--bg-hover); }
.dark .cal-day.today { background: var(--accent-soft); border-color: var(--accent); }

/* Scrollbar */
.dark ::-webkit-scrollbar-thumb { background: #3a3b40; }
.dark ::-webkit-scrollbar-thumb:hover { background: #4a4b52; }

/* ─── Dark mode: lead detail / forms view fixes ─────────────── */

/* Note-input wrapper (bg-gray-50 Tailwind class — scoped to avoid hitting body) */
.dark #tab-activity-content .bg-gray-50 { background: var(--bg-hover) !important; }

/* Note type buttons: active state uses bg-white */
.dark button[id^="note-type-"].bg-white {
  background: var(--bg-card) !important;
  border-color: var(--accent) !important;
  color: var(--accent-text, var(--accent)) !important;
}

/* Activity log note items (Tailwind classes applied by JS) */
.dark #activity-log .text-gray-800 { color: var(--text-1) !important; }
.dark #activity-log .text-gray-400 { color: var(--text-3) !important; }
.dark #activity-log .border-gray-50 { border-bottom-color: var(--border) !important; }

/* WhatsApp chat area */
.dark #chat-messages { background: #0b1e14 !important; }

/* WhatsApp footer bar */
.dark #tab-conversation-content > div[style*="f0f0f0"] {
  background: var(--bg-card) !important;
  border-top-color: var(--border) !important;
}
.dark #tab-conversation-content > div[style*="f0f0f0"] p { color: var(--text-3) !important; }

/* WA received message bubbles (white bg) */
.dark #chat-messages div[style*="background:#ffffff"] {
  background: var(--bg-card) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
.dark #chat-messages p[style*="color:#111827"] { color: var(--text-1) !important; }
.dark #chat-messages p[style*="color:#6b7280"] { color: var(--text-3) !important; }

/* Internal notes message bubbles */
.dark #internal-log div[style*="background:#f9fafb"] {
  background: var(--bg-hover) !important;
  color: var(--text-1) !important;
}
.dark #internal-log span[style*="color:#374151"] { color: var(--text-1) !important; }

/* Hover backgrounds — prevent white flash on dark bg */
.dark .hover\:bg-gray-50:hover  { background: var(--bg-hover) !important; }
.dark .hover\:bg-gray-100:hover { background: var(--bg-hover) !important; }
.dark .hover\:bg-gray-200:hover { background: rgba(255,255,255,0.1) !important; }
.dark .hover\:bg-white:hover    { background: var(--bg-card)  !important; }
.dark .hover\:bg-brand-50:hover { background: var(--accent-soft) !important; }
.dark .bg-brand-50             { background: var(--accent-soft) !important; }
.dark .hover\:bg-red-50:hover   { background: rgba(239,68,68,0.12) !important; }
.dark .hover\:bg-green-100:hover { background: rgba(16,185,129,0.12) !important; }

/* View container: Tailwind text-gray-* overrides */
.dark #view-container .text-gray-900 { color: var(--text-1) !important; }
.dark #view-container .text-gray-800 { color: var(--text-1) !important; }
.dark #view-container .text-gray-700 { color: var(--text-1) !important; }
.dark #view-container .text-gray-600 { color: var(--text-2) !important; }
.dark #view-container .text-gray-500 { color: var(--text-2) !important; }
.dark #view-container .text-gray-400 { color: var(--text-3) !important; }
.dark #view-container .border-gray-50  { border-color: var(--border) !important; }
.dark #view-container .border-gray-100 { border-color: var(--border) !important; }
.dark #view-container .border-gray-200 { border-color: var(--border) !important; }
.dark #view-container .bg-gray-100 { background: var(--bg-hover) !important; }
.dark #view-container .bg-gray-50  { background: var(--bg-body) !important; }
.dark #view-container .bg-gray-50 .form-input { background: var(--bg-input) !important; border-color: var(--border) !important; color: var(--text-1) !important; }

/* View container: inline-style text/bg color fixes */
.dark #view-container [style*="background:#f9fafb"] { background: var(--bg-hover) !important; }
.dark #view-container [style*="background:#f3f4f6"] { background: var(--bg-hover) !important; }
.dark #view-container [style*="color:#111827"] { color: var(--text-1) !important; }
.dark #view-container [style*="color:#374151"] { color: var(--text-2) !important; }
.dark #view-container [style*="color:#6b7280"] { color: var(--text-3) !important; }
.dark #view-container [style*="color:#1f2937"] { color: var(--text-1) !important; }
.dark #view-container [style*="border-color:#e5e7eb"] { border-color: var(--border) !important; }
.dark #view-container [style*="border-bottom:1px solid #e5e7eb"] { border-bottom-color: var(--border) !important; }
.dark #view-container [style*="border-top:1px solid #e5e7eb"] { border-top-color: var(--border) !important; }

/* ═══════════════════════════════════════════════════════════
   LIGHT MODE — Clean white sidebar with orange accent
   ═══════════════════════════════════════════════════════════ */
html:not(.dark) #sidebar {
  background: var(--bg-sidebar) !important;
  border-right-color: var(--border) !important;
}
html:not(.dark) #sidebar > div:first-child { border-bottom-color: var(--border) !important; }
html:not(.dark) #sidebar-user-info { border-top-color: var(--border) !important; }

/* Brand */
html:not(.dark) #sidebar .sidebar-brand-name { color: var(--text-1) !important; }
html:not(.dark) #sidebar .sidebar-brand-sub  { color: var(--text-3) !important; }

/* Nav links */
html:not(.dark) #sidebar .nav-link           { color: var(--text-2) !important; }
html:not(.dark) #sidebar .nav-link svg       { stroke: currentColor !important; }
html:not(.dark) #sidebar .nav-link:hover     { background: var(--bg-hover) !important; color: var(--text-1) !important; }
html:not(.dark) #sidebar .nav-link:hover svg { stroke: currentColor !important; }
html:not(.dark) #sidebar .nav-link.active    { background: var(--accent-soft) !important; color: var(--accent-text, var(--accent)) !important; }
html:not(.dark) #sidebar .nav-link.active svg{ stroke: var(--accent) !important; }

/* Section labels (ACTIONS, SYSTEM) */
html:not(.dark) #sidebar .sidebar-section-label { color: var(--text-3) !important; }

/* Sidebar nav badges (Leads count, Bookings count) */
html:not(.dark) #sidebar #leads-badge    { background: var(--accent-soft) !important; color: var(--accent-text, var(--accent)) !important; }
html:not(.dark) #sidebar #bookings-badge { background: rgba(251,191,36,0.18) !important; color: #b45309 !important; }

/* User info (Mohammad Jassim / Admin) */
html:not(.dark) #sidebar-user-info .text-gray-800 { color: var(--text-1) !important; }
html:not(.dark) #sidebar-user-info .text-gray-400 { color: var(--text-3) !important; }
html:not(.dark) #sidebar-user-info button          { color: var(--text-2) !important; background: none !important; }
html:not(.dark) #sidebar-user-info button:hover    { color: var(--text-1) !important; background: var(--bg-hover) !important; }

/* ─── Dark mode: restore btn-secondary to neutral style ─── */
.dark .btn-secondary {
  background: var(--bg-card) !important;
  color: var(--text-2) !important;
  border-color: var(--border) !important;
}
.dark .btn-secondary:hover { background: var(--bg-hover) !important; color: var(--text-1) !important; }

/* ─── Filter Tabs ───────────────────────────────────────────── */
.filter-tab-group {
  display: flex;
  gap: 4px;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 4px;
}
.filter-tab {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.filter-tab { border-color: #d1d5db; border-radius: 6px; }
.filter-tab:hover { color: #0f172a; background: rgba(255,255,255,0.7); }
.filter-tab.active { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); }
.dark .filter-tab-group { background: var(--bg-card); }
.dark .filter-tab { color: var(--text-2); background: var(--bg-card); border-color: var(--border); border-radius: 6px; }
.dark .filter-tab:hover { color: var(--text-1); background: rgba(255,255,255,0.06); }
.dark .filter-tab.active { background: var(--accent); color: var(--accent-text-on); border-color: var(--accent); }

/* ─── Light mode: header shadow + sidebar divider ───────────── */
html:not(.dark) header {
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
html:not(.dark) #view-container {
  border-left: 1px solid #e2e8f0;
}

/* ─── Dark mode: header ─────────────────────────────────────── */
.dark header {
  background: var(--bg-body) !important;
  border-bottom: 1px solid var(--border) !important;
}
/* ─── Dark mode: header search bar ─────────────────────────── */
.dark header input {
  background: var(--bg-input) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-1) !important;
}
.dark header input::placeholder { color: var(--text-2) !important; }

/* ─── Override Tailwind's blue-tinted dark gray utilities ───── */
/* Tailwind's gray-700/800/900 have slate undertones — remap to our neutral palette */
.dark .dark\:bg-gray-700  { background-color: var(--bg-input)   !important; }
.dark .dark\:bg-gray-800  { background-color: var(--bg-body)    !important; }
.dark .dark\:bg-gray-900  { background-color: var(--bg-sidebar) !important; }
.dark .dark\:hover\:bg-gray-700:hover { background-color: var(--bg-hover) !important; }
.dark .dark\:border-gray-700 { border-color: var(--border) !important; }
.dark .dark\:text-gray-200 { color: var(--text-1) !important; }
.dark .dark\:text-gray-300 { color: var(--text-1) !important; }
.dark .dark\:text-gray-400 { color: var(--text-2) !important; }
.dark .dark\:text-gray-500 { color: var(--text-3) !important; }
.dark .dark\:text-white    { color: var(--text-1) !important; }
.dark .dark\:placeholder-gray-500::placeholder { color: var(--text-3) !important; }

/* ─── Settings card icon tiles (Round 8) ─────────────────────
   The 44×44 emoji/SVG tiles on every Settings card use inline
   pastel backgrounds that vanish in dark mode. Override the
   inline `background:` and `border:` here with a single shared
   look so every tile reads clearly against the dark page.
   The tile keeps its emoji/SVG content; only the surface +
   border + foreground colour switch. */
.cvx-icon-tile {
  /* Light mode keeps inline pastel — this class is a marker. */
}
.dark .cvx-icon-tile {
  background: var(--bg-input)         !important;
  border:     1px solid var(--border) !important;
  color:      var(--text-1)           !important;
}
/* Brand-coloured WhatsApp tile keeps its green chip in both modes. */
.dark .cvx-icon-tile.cvx-icon-tile-brand {
  background: #25d366 !important;
  border:     1px solid rgba(37, 211, 102, 0.5) !important;
  color:      #ffffff !important;
}
/* Code-pill (API Access) tile already dark — keep it. */
.dark .cvx-icon-tile.cvx-icon-tile-code {
  background: #0f172a !important;
  border:     1px solid var(--border) !important;
  color:      #ffffff !important;
}
/* Emoji glyphs render full-colour, so they don't need fg overrides. */

/* "This Month" usage stats card grid — 4 columns on desktop, 2x2 on mobile,
   single-column on the tightest viewports. Tiles use the card surface so
   they inherit dark-mode tint automatically. */
.cvx-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
/* 2x2 on mobile/tablet — spec calls 375px out specifically. We keep
   2 columns down to ~320px so the iPhone-SE width still fits the grid. */
@media (max-width: 900px) {
  .cvx-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 320px) {
  .cvx-stats-grid { grid-template-columns: 1fr; }
}
.cvx-stats-tile {
  position: relative;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
}
.cvx-stats-tile-icon {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cvx-stats-tile-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.05;
  margin-top: 4px;
}
.cvx-stats-tile-label {
  font-size: 12px;
  color: var(--text-2);
  font-weight: 500;
}
.cvx-stats-tile-trend {
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}

/* ─── AI Agent — Overview / Conversations / Configuration / Performance
   tab styles (Phase 8 P7). The page reuses .settings-view + .settings-rail
   from above, then adds these AI-specific atoms. */
.ai-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .ai-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ai-overview-tile {
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 84px;
}
.ai-overview-tile-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-1);
  line-height: 1.1;
  margin: 0;
}
.ai-overview-tile-label {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  margin: 0;
}
.ai-overview-fact {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
}
.ai-overview-fact-label {
  font-size: 11px;
  color: var(--text-2);
  font-weight: 500;
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ai-overview-fact-value {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-1);
  margin: 0;
}
.ai-overview-muted {
  font-size: 13px;
  color: var(--text-3);
  margin: 0;
  font-style: italic;
}
.ai-overview-conv-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
  border-radius: 8px;
  padding: 10px 8px;
  margin: 0 -8px;
}
.ai-overview-conv-row:last-child { border-bottom: none; }
.ai-overview-conv-row:hover { background: var(--bg-hover); }

/* Conversations tab */
.ai-conv-filters {
  display: grid;
  grid-template-columns: 180px 180px minmax(0, 1fr) auto;
  gap: 10px;
}
@media (max-width: 767px) {
  .ai-conv-filters { grid-template-columns: 1fr 1fr; }
}
.ai-conv-list {
  display: flex;
  flex-direction: column;
}
.ai-conv-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 220px;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.12s;
}
.ai-conv-row:last-child { border-bottom: none; }
.ai-conv-row:hover { background: var(--bg-hover); }
.ai-conv-row__lead p { margin: 0; }
.ai-conv-row__name  { font-size: 13px; font-weight: 600; color: var(--text-1); }
.ai-conv-row__phone { font-size: 11px; color: var(--text-3); }
.ai-conv-row__snippet {
  font-size: 12px;
  color: var(--text-2);
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-conv-row__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .ai-conv-row { grid-template-columns: 1fr; }
  .ai-conv-row__meta { justify-content: flex-start; }
}

/* ─── Team Dashboard (Phase 8 P8) ────────────────────────────
   Operational manager view. KPI strip → leaderboard → 3 chart
   cards. Charts cap at 320px (same pattern as Performance tab),
   leaderboard collapses to stacked cards on mobile. */
.team-dashboard {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.team-dashboard__header {
  display: flex;
  flex-direction: column;
}
.team-dashboard__title {
  font-size: 24px; font-weight: 600; color: var(--text-1); margin: 0 0 4px;
}
.team-dashboard__subtitle {
  font-size: 14px; color: var(--text-2); margin: 0;
}
.team-dashboard__section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

/* KPI strip */
.team-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .team-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.team-kpi-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
}
.team-kpi-card__value {
  font-size: 26px; font-weight: 700; color: var(--text-1); line-height: 1.1; margin: 0;
}
.team-kpi-card__label {
  font-size: 12px; color: var(--text-2); font-weight: 500; margin: 0;
}
.team-kpi-card__trend {
  font-size: 11px; font-weight: 600; margin: 2px 0 0;
}
.team-kpi-card__trend--muted { color: var(--text-3); font-weight: 500; font-style: italic; }

/* Leaderboard */
.team-leaderboard-wrap { overflow-x: auto; }
.team-leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.team-leaderboard__th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-3);
  font-weight: 600;
  padding: 10px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-table-head);
  white-space: nowrap;
}
.team-leaderboard__th--right { text-align: right; }
.team-leaderboard__th--left { text-align: left; }
.team-leaderboard__th--sortable { cursor: pointer; user-select: none; }
.team-leaderboard__th--sortable:hover { color: var(--text-1); }
.team-leaderboard__sort { margin-left: 4px; font-size: 10px; }
.team-leaderboard__td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  vertical-align: middle;
}
.team-leaderboard__td--right { text-align: right; font-variant-numeric: tabular-nums; }
.team-leaderboard__td--left { text-align: left; }
.team-leaderboard__row { cursor: pointer; transition: background 0.12s; }
.team-leaderboard__row:hover { background: var(--bg-hover); }
.team-leaderboard__row--me { background: var(--accent-soft); }
.team-leaderboard__row--me:hover { background: var(--accent-soft); }
.team-leaderboard__agent {
  display: flex;
  align-items: center;
  gap: 10px;
}
.team-leaderboard__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.team-leaderboard__name { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-1); }
.team-leaderboard__me-tag {
  display: inline-block; padding: 1px 6px; border-radius: 99px;
  font-size: 9px; background: var(--accent); color: #fff;
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  margin-left: 4px; vertical-align: middle;
}
.team-leaderboard__email { margin: 1px 0 0; font-size: 11px; color: var(--text-3); }
.team-leaderboard__status {
  font-size: 12px; color: var(--text-2); font-weight: 500;
}

/* Mobile: stack rows as cards. We use display:block + data-label so we
   inherit the same pattern as Leads/Audit Log tables. */
@media (max-width: 767px) {
  .team-leaderboard, .team-leaderboard thead, .team-leaderboard tbody,
  .team-leaderboard tr, .team-leaderboard th, .team-leaderboard td {
    display: block;
  }
  .team-leaderboard thead { display: none; }
  .team-leaderboard__row {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 12px;
    padding: 10px 12px;
  }
  .team-leaderboard__td {
    padding: 4px 0 !important;
    border: none !important;
    text-align: left !important;
    font-size: 13px;
  }
  .team-leaderboard__td--right::before {
    /* Pull header label from the original column position into the card body */
    font-weight: 600; color: var(--text-2);
    margin-right: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  }
  .team-leaderboard__td:nth-child(3)::before { content: 'Leads (7d): '; }
  .team-leaderboard__td:nth-child(4)::before { content: 'Avg score: '; }
  .team-leaderboard__td:nth-child(5)::before { content: 'Conversion: '; }
  .team-leaderboard__td:nth-child(6)::before { content: 'Avg response: '; }
  .team-leaderboard__td:nth-child(7)::before { content: 'Handoff accept: '; }
}

/* Chart cards — same height-cap pattern as Performance tab */
.team-chart-card {
  max-height: 380px;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.team-chart-wrap {
  position: relative;
  flex: 1;
  max-height: 320px;
  min-height: 220px;
}
.team-chart-wrap > canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 320px !important;
}

/* Empty state */
.team-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px;
}
.team-empty__title {
  font-size: 14px; font-weight: 600; color: var(--text-1); margin: 0 0 4px;
}
.team-empty__body {
  font-size: 12px; color: var(--text-2); margin: 0 0 14px;
  max-width: 320px;
}

/* Demo data banner */
.team-demo-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent-hover);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  margin-bottom: 12px;
}
.team-demo-banner button {
  background: none;
  border: none;
  color: var(--accent-hover);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  padding: 0;
  font-weight: 600;
}

/* Right-slide-in drawer */
.team-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 380px;
  max-width: 100vw;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  z-index: 70;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
  overflow-y: auto;
}
.dark .team-drawer { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5); }
.team-drawer--open { transform: translateX(0); }
.team-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
  z-index: 69;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}
.team-drawer-overlay--visible { opacity: 1; pointer-events: auto; }
.team-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.team-drawer__head-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.team-drawer__name { margin: 0; font-size: 15px; font-weight: 700; color: var(--text-1); }
.team-drawer__email { margin: 1px 0 0; font-size: 12px; color: var(--text-3); }
.team-drawer__close {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--text-2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.team-drawer__close:hover { background: var(--bg-hover); color: var(--text-1); }
.team-drawer__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
}
.team-drawer__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--bg-input);
  border-radius: 8px;
  padding: 10px;
}
.team-drawer__stat-value { font-size: 20px; font-weight: 700; color: var(--text-1); margin: 0; }
.team-drawer__stat-label { font-size: 11px; color: var(--text-2); margin: 2px 0 0; }
.team-drawer__section { padding: 16px 20px; }
.team-drawer__section-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-3); font-weight: 600; margin: 0 0 10px;
}
.team-drawer__lead-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.team-drawer__lead-row:hover { background: var(--bg-hover); }
.team-drawer__lead-row:last-child { border-bottom: none; }
.team-drawer__lead-name { margin: 0; font-size: 13px; font-weight: 600; color: var(--text-1); }
.team-drawer__lead-meta { margin: 1px 0 0; font-size: 11px; color: var(--text-3); }
.team-drawer__lead-date { font-size: 11px; color: var(--text-3); }
.team-drawer__actions {
  padding: 12px 20px 20px;
  border-top: 1px solid var(--border);
}

/* Performance tab — chart cards are height-capped so Chart.js' responsive
   resize loop can't grow them past the viewport when given a single bar of
   value 1, and so the empty state stays a comfortable size. */
.ai-perf-chart-card {
  max-height: 320px;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
}
.ai-perf-chart-wrap {
  position: relative;
  flex: 1;
  max-height: 280px;
  min-height: 220px;
}
.ai-perf-chart-wrap > canvas {
  width: 100% !important;
  height: 100% !important;
  max-height: 280px !important;
}
.ai-perf-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px;
  min-height: 200px;
}

/* Configuration tab — quick-replies row */
.ai-quick-reply-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}
@media (max-width: 767px) {
  .ai-quick-reply-row { grid-template-columns: 1fr 36px; }
  .ai-quick-reply-row .ai-qr-name { grid-column: 1 / -1; }
}

/* ─── Bulk action bar (Phase 8 P6) ────────────────────────────
   Sticky bottom bar on the Leads view. Slides up when leads are
   selected via the row checkboxes, slides back down when none. */
.cvx-bulk-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06);
  /* Off-screen by default; slides in when --open is added. */
  transform: translateY(100%);
  transition: transform 0.22s cubic-bezier(0.2, 0, 0, 1);
  min-height: 60px;
}
.dark .cvx-bulk-bar {
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.4);
}
.cvx-bulk-bar--open {
  transform: translateY(0);
}
.cvx-bulk-bar__count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
  white-space: nowrap;
}
.cvx-bulk-bar__count strong {
  color: var(--accent-text, var(--accent));
  font-weight: 700;
}
/* Phase 8 P6b: round × button sits right next to the count, replacing
   the old right-side underlined "Clear selection" link. Pattern follows
   Linear / Gmail / Notion — the clear is visually attached to the count. */
.cvx-bulk-bar__clear-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  flex-shrink: 0;
}
.cvx-bulk-bar__clear-icon:hover {
  background: var(--bg-hover);
  color: var(--text-1);
}
.cvx-bulk-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  margin-left: 16px;
}
.cvx-bulk-bar__btn,
.cvx-bulk-bar__select {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  color: var(--text-1);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cvx-bulk-bar__btn:hover,
.cvx-bulk-bar__select:hover {
  background: var(--bg-hover);
}
.cvx-bulk-bar__primary {
  border-color: var(--accent);
  color: var(--accent-text, var(--accent));
}
.cvx-bulk-bar__primary:hover {
  background: var(--accent-soft);
}
.cvx-bulk-bar__secondary {
  /* Default tone — neutral. */
  color: var(--text-2);
}
.cvx-bulk-bar__danger {
  border-color: #ef4444;
  color: #ef4444;
}
.cvx-bulk-bar__danger:hover {
  background: rgba(239, 68, 68, 0.08);
}
/* Mobile: collapse secondary actions into horizontal scroll so the
   primary three (Assign, Stage, Tag, Delete) stay visible. Simpler than
   a true overflow menu and good enough for 1-tap-away access. */
@media (max-width: 767px) {
  .cvx-bulk-bar {
    padding: 8px 12px;
    flex-wrap: nowrap;
  }
  .cvx-bulk-bar__count { font-size: 12px; flex-shrink: 0; }
  .cvx-bulk-bar__actions {
    margin-left: 8px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cvx-bulk-bar__actions::-webkit-scrollbar { display: none; }
  .cvx-bulk-bar__btn,
  .cvx-bulk-bar__select {
    padding: 6px 10px;
    font-size: 12px;
    flex-shrink: 0;
  }
}

/* WhatsApp Test Bench card — green-tinted gradient in light mode for the
   "this is the test surface" cue, plain card surface in dark mode where the
   coloured backgrounds don't pop the same way. */
.cvx-test-bench-card {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 60%);
}
.dark .cvx-test-bench-card {
  background: var(--bg-card);
}

/* ─── WhatsApp signature accent (design pass, Sep 2026) ─────────────────────
   WhatsApp green as a deliberate second accent: the channel the product is
   built on should be visible in the UI, not just in the copy. Used for
   whatsapp-source badges and the AI Agent nav pill. */
.badge-whatsapp {
  background: rgba(37, 211, 102, 0.14) !important;
  color: #16a34a !important;
}
.dark .badge-whatsapp {
  background: rgba(37, 211, 102, 0.16) !important;
  color: #4ade80 !important;
}
.cvx-ai-badge {
  background: rgba(37, 211, 102, 0.16) !important;
  color: #22c55e !important;
}
.dark .cvx-ai-badge {
  background: rgba(37, 211, 102, 0.18) !important;
  color: #34e07a !important;
}

/* ─── Accessibility pass (WCAG 2.1 AA, Sep 2026) ────────────────────────────
   1. Semantic TEXT colors that stay ≥4.5:1 on both themes — saturated
      mid-tones (#dc2626 etc.) fail on dark cards, so dark mode gets
      lighter equivalents. Use these vars for colored text, never raw hex. */
:root {
  --tx-red:    #dc2626;
  --tx-green:  #15803d; /* light-mode pass Sep 9: #16a34a was 3.3:1 on white */
  --tx-blue:   #2563eb;
  --tx-purple: #7c3aed;
  --tx-cyan:   #0e7490;
}
.dark {
  --tx-red:    #f87171;
  --tx-green:  #4ade80;
  --tx-blue:   #93c5fd;
  --tx-purple: #c4b5fd;
  --tx-cyan:   #67e8f9;
}

/* ─── LIGHT-MODE contrast pass (Sep 9, 2026) ─────────────────────────────────
   Light is now the default clients see, and it had never been audited: the
   computed sweep found 21 failures on the dashboard alone. Root causes and
   the source-level fixes (dark mode is untouched by every rule here):
   a) --text-3 #a0a0a0 = 2.6:1 → #6b6b70 (5.3:1).
   b) Tailwind text-gray-400 (#9ca3af, 2.5:1) used for sub-labels everywhere
      → gray-500 (#6b7280, 4.8:1) in light only. `dark:text-gray-400`
      compiles to a `.dark` selector, so it is unaffected.
   c) AI badge + "Setup" pill greens/ambers at 10px → AA-safe darks. */
html:not(.dark) {
  --text-3: #6b6b70;
}
html:not(.dark) .text-gray-400        { color: #6b7280 !important; }
html:not(.dark) .text-gray-300        { color: #6b7280 !important; }
html:not(.dark) .cvx-ai-badge         { color: #15803d !important; }
html:not(.dark) .text-amber-500,
html:not(.dark) .text-amber-600       { color: #b45309 !important; }
html:not(.dark) .text-green-500,
html:not(.dark) .text-green-600,
html:not(.dark) .text-emerald-500,
html:not(.dark) .text-emerald-600     { color: #15803d !important; }
html:not(.dark) .text-red-400,
html:not(.dark) .text-red-500         { color: #dc2626 !important; }
html:not(.dark) .text-sky-500,
html:not(.dark) .text-blue-400        { color: #2563eb !important; }
/* d) mid-greys sitting on tinted chips (gray-500 on gray-100 = 4.39:1) */
html:not(.dark) .text-gray-500        { color: #4b5563 !important; }
html:not(.dark) .text-slate-500       { color: #475569 !important; }
html:not(.dark) .text-slate-400       { color: #64748b !important; }
/* e) inline hex greys that class overrides can't reach */
html:not(.dark) [style*="#9ca3af"],
html:not(.dark) [style*="#a0a0a0"],
html:not(.dark) [style*="#a1a1aa"]    { color: #6b7280 !important; }
/* f) pipeline stage-transition pills: saturated text on pastel tints */
html:not(.dark) .text-amber-600       { color: #b45309 !important; }
html:not(.dark) .text-amber-700       { color: #92400e !important; }
html:not(.dark) .text-emerald-700,
html:not(.dark) .text-green-700       { color: #166534 !important; }
html:not(.dark) .text-cyan-600,
html:not(.dark) .text-cyan-700        { color: #0e7490 !important; }
html:not(.dark) .text-pink-600        { color: #be185d !important; }
html:not(.dark) .text-indigo-600      { color: #4338ca !important; }
html:not(.dark) .text-purple-600      { color: #6d28d9 !important; }
/* g) danger buttons/text on the red tint */
html:not(.dark) .text-red-600,
html:not(.dark) .btn-danger           { color: #b91c1c !important; }
/* h) custom components + inline stage colours (pipeline "next stage →" pills) */
html:not(.dark) .filter-tab:not(.active) { color: #475569; }

/* ─── Mobile clipping pass (Sep 9, 2026; probed at 390px) ────────────────────
   Page never scrolled horizontally, but three rows were being CUT OFF:
   the Leads status-filter pills, the lead-detail header buttons, and the
   Settings/AI-Agent side rail. Agents live on phones — these must wrap. */
@media (max-width: 768px) {
  .filter-tab-group { flex-wrap: wrap; }
  .filter-tab       { flex: 0 0 auto; }
  /* Header action clusters (Edit / Book viewing / Delete) wrap under the title */
  #view-container .flex.gap-2.flex-shrink-0,
  #view-container .flex.gap-3.flex-shrink-0 { flex-wrap: wrap; flex-shrink: 1; row-gap: 6px; }
  /* Side rail becomes a horizontal, swipeable strip */
  .settings-rail {
    flex-direction: row; overflow-x: auto; position: static;
    gap: 6px; padding-bottom: 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .settings-rail::-webkit-scrollbar { display: none; }
  .settings-rail-item { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; }
  /* Oct 2 2026 (phone audit): the strip clipped the last tab ("Test", "Integrations")
     with no hint it scrolled. Wrap into rows instead — 5 tabs fit in two. */
  .settings-rail { flex-wrap: wrap; overflow-x: visible; }
  .settings-rail-item { flex: 1 1 30%; max-width: 50%; justify-content: center; min-width: 0; }
  /* Dashboard 2-up rows (score gauge + coach, pipeline + activity) stack.
     min-width:0 — grid children default to min-width:auto, so one long enquiry
     name pushed the "Recent Enquiries" card to 491px on a 375px phone. */
  .dashboard-row-2up { grid-template-columns: minmax(0, 1fr); }
  .dashboard-row-2up > * { min-width: 0; }
  #ai-coach-card .flex.items-center.justify-between { flex-wrap: wrap; row-gap: 8px; }
  /* Lead-detail header: title + action cluster wrap instead of clipping */
  #view-container .flex.items-start.gap-4.mb-6 { flex-wrap: wrap; }
}
html:not(.dark) [style*="color:#ef4444"], html:not(.dark) [style*="color: #ef4444"] { color: #dc2626 !important; }
html:not(.dark) [style*="color:#dc2626"], html:not(.dark) [style*="color: #dc2626"] { color: #b91c1c !important; }
html:not(.dark) .badge-cancelled      { color: #4b5563 !important; }
html:not(.dark) [style*="#9ca3af"],
html:not(.dark) [style*="#a0a0a0"],
html:not(.dark) [style*="#a1a1aa"]    { color: #4b5563 !important; }   /* greys on tinted columns need > gray-500 */
html:not(.dark) [style*="color:#d97706"], html:not(.dark) [style*="color: #d97706"] { color: #92400e !important; }
html:not(.dark) [style*="color:#059669"], html:not(.dark) [style*="color: #059669"] { color: #047857 !important; }
html:not(.dark) [style*="color:#0891b2"], html:not(.dark) [style*="color: #0891b2"] { color: #0e7490 !important; }
html:not(.dark) [style*="color:#db2777"], html:not(.dark) [style*="color: #db2777"] { color: #be185d !important; }
html:not(.dark) [style*="color:#f59e0b"], html:not(.dark) [style*="color: #f59e0b"] { color: #b45309 !important; }
html:not(.dark) [style*="color:#22c55e"], html:not(.dark) [style*="color: #22c55e"] { color: #15803d !important; }

/* 2. Visible keyboard focus everywhere, not just form inputs (2.4.7). */
button:focus-visible, a:focus-visible, select:focus-visible,
[role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 3. Minimum touch targets for the header icon buttons (2.5.5). */
#notif-btn, #theme-toggle {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Checklist action links — bigger tap area without visual change. */
#onboarding-checklist a, .cvx-checklist-action {
  padding: 8px 10px;
  margin: -8px -10px;
}

/* Theme-aware accent TEXT variable (Sep 9 2026). white-label.js derives the
   contrast-safe variants; without white-label these resolve to the accent. */
html:not(.dark) { --accent-text: var(--accent-text-light, var(--accent)); }
.dark           { --accent-text: var(--accent-text-dark,  var(--accent)); }
/* Pipeline "next stage" pills carry inline pastel fills that are blinding in
   dark mode and fail contrast — neutralise the fill, keep the coloured text/border. */
.dark [style*="background:#fffbeb"], .dark [style*="background:#ecfdf5"], .dark [style*="background:#ecfeff"],
.dark [style*="background:#fdf2f8"], .dark [style*="background:#fef2f2"], .dark [style*="background:#eff6ff"],
.dark [style*="background:#f5f3ff"], .dark [style*="background:#f3f4f6"], .dark [style*="background:#f5f5f5"],
.dark [style*="background:#fff;"], .dark [style*="background:#ffffff"] { background: transparent !important; }
.dark [style*="color:#85858b"], .dark [style*="color:#9ca3af"] { color: #a1a1aa !important; }
.dark { --text-3: #8e8e94; } /* was #85858b: 4.27:1 on hover surfaces */

/* Dark: pipeline "← back" pills and the audit-log badges carried light fills / dark accent text */
.dark [style*="background:white"] { background: transparent !important; border-color: #3f3f46 !important; }
.dark [style*="color:#6b7280"]    { color: #a1a1aa !important; }
.dark .text-indigo-600, .dark .text-indigo-700 { color: #a5b4fc !important; }

/* Dark: inline saturated text colours (pipeline pills, tabs, badges) → their light-mode-safe twins */
.dark [style*="color:#db2777"] { color: #f9a8d4 !important; }
.dark [style*="color:#7c3aed"] { color: #c4b5fd !important; }
.dark [style*="color:#dc2626"] { color: #f87171 !important; }
.dark [style*="color:#d97706"] { color: #fbbf24 !important; }
.dark [style*="color:#059669"] { color: #34d399 !important; }
.dark [style*="color:#0891b2"] { color: #67e8f9 !important; }
.dark [style*="color:#2563eb"] { color: #93c5fd !important; }
.dark [style*="color:#4f46e5"], .dark [style*="color:#444ce7"] { color: #a5b4fc !important; }
.dark [style*="background:#f3e8ff"], .dark [style*="background:#e0eaff"], .dark [style*="background:#eef2ff"] { background: rgba(124,58,237,0.18) !important; }
.dark .bg-purple-100, .dark .bg-indigo-100, .dark .bg-brand-100 { background-color: rgba(124,58,237,0.18) !important; }