/* ═══════════════════════════════════════════════════════════════
   PRAS Field — Theme v2 ("2026 modernization") — Component Layer
   ───────────────────────────────────────────────────────────────
   Activated by `body[data-theme="v2"]`. Loaded AFTER tokens-v2.css
   and the existing styles.css; v2 selectors win via specificity
   (`body[data-theme="v2"] .x`).

   Every selector in this file is scoped to `body[data-theme="v2"]`.
   Removing the data-theme attribute reverts the page to v1 instantly.

   Touched component families (in order of file):
     1. Page body / typography baseline
     2. Buttons (primary, secondary, ghost, danger, sm, lg)
     3. Cards (.dash-card, .aiops-card)
     4. Sidebar nav (.app-sidebar)
     5. Navbar (.navbar)
     6. Forms (.form-input, .form-select, .form-textarea)
     7. Modals + overlays
     8. Tables (.dash-table, .aiops-table)
     9. Badges + chips + pills
    10. Toasts
    11. Drill modal (M3) + Help drawer
    12. Route cards
   ═══════════════════════════════════════════════════════════════ */

/* ══════════ 1. Page body + typography baseline ══════════════════ */

body[data-theme="v2"] {
  font-family: var(--font-body-v2);
  background: var(--surface-0);
  background-image:
    radial-gradient(ellipse 1200px 600px at top right, rgba(201, 168, 76, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 800px 400px at bottom left, rgba(52, 120, 246, 0.03) 0%, transparent 50%);
  background-attachment: fixed;
  color: var(--ink-1);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter stylistic alts for that "tech" feel */
}

/* Page-level surface containers get the white card treatment */
body[data-theme="v2"] .panel-body,
body[data-theme="v2"] .tab-content,
body[data-theme="v2"] .app-main {
  background: transparent;
}

body[data-theme="v2"] h1,
body[data-theme="v2"] h2,
body[data-theme="v2"] h3,
body[data-theme="v2"] h4,
body[data-theme="v2"] h5,
body[data-theme="v2"] h6 {
  font-family: var(--font-header-v2);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none; /* drop ALL-CAPS by default */
  color: var(--ink-1);
}

body[data-theme="v2"] h1 { font-size: 32px; letter-spacing: -0.02em; font-weight: 700; }
body[data-theme="v2"] h2 { font-size: 24px; }
body[data-theme="v2"] h3 { font-size: 18px; }

/* ══════════ 2. Buttons ═════════════════════════════════════════ */

body[data-theme="v2"] .btn,
body[data-theme="v2"] button.btn {
  font-family: var(--font-header-v2);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-transform: none;
  border-radius: var(--radius-v2);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: transform var(--transition-fast-v2),
              box-shadow var(--transition-v2),
              background-color var(--transition-fast-v2);
}

body[data-theme="v2"] .btn:hover {
  transform: translateY(-1px);
}
body[data-theme="v2"] .btn:active {
  transform: scale(0.98);
}

body[data-theme="v2"] .btn-primary,
body[data-theme="v2"] .btn-gold {
  background: var(--gold-grad);
  color: var(--ink-1);
  border: none;
}
body[data-theme="v2"] .btn-primary:hover,
body[data-theme="v2"] .btn-gold:hover {
  box-shadow: 0 4px 12px rgba(201, 168, 76, 0.32);
}

body[data-theme="v2"] .btn-secondary {
  background: var(--surface-1);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
}
body[data-theme="v2"] .btn-secondary:hover {
  border-color: var(--gold-500);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

body[data-theme="v2"] .btn-ghost,
body[data-theme="v2"] .btn-outline {
  background: transparent;
  color: var(--ink-1);
  border: 1px solid var(--line-2);
}
body[data-theme="v2"] .btn-ghost:hover {
  background: var(--surface-2);
}

body[data-theme="v2"] .btn-danger {
  background: var(--danger-500);
  color: #fff;
  border: none;
}
body[data-theme="v2"] .btn-danger:hover {
  box-shadow: 0 4px 12px rgba(220, 74, 71, 0.32);
}

body[data-theme="v2"] .btn-teal {
  background: var(--info-500);
  color: #fff;
  border: none;
}

body[data-theme="v2"] .btn-sm { font-size: 13px; }
body[data-theme="v2"] .btn-lg { font-size: 17px; }

/* Focus ring */
body[data-theme="v2"] .btn:focus-visible,
body[data-theme="v2"] button:focus-visible,
body[data-theme="v2"] input:focus-visible,
body[data-theme="v2"] textarea:focus-visible,
body[data-theme="v2"] select:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus-v2);
  border-color: var(--gold-500);
}

/* ══════════ 3. Cards (KPI, dashboard, AI Ops) ═══════════════════ */

body[data-theme="v2"] .dash-card,
body[data-theme="v2"] .aiops-card {
  position: relative;
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg-v2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--transition-v2),
              box-shadow var(--transition-v2),
              border-color var(--transition-v2);
}

body[data-theme="v2"] .dash-card:hover,
body[data-theme="v2"] .aiops-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
  border-color: var(--line-2);
}

/* Top-edge gradient stripe — primary cards get gold; semantic
   variants get matching gradient. */
body[data-theme="v2"] .dash-card::before,
body[data-theme="v2"] .aiops-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gold-grad);
  z-index: 1;
}
body[data-theme="v2"] .dash-card-gold::before  { background: var(--gold-grad); }
body[data-theme="v2"] .dash-card-green::before { background: linear-gradient(135deg, #14C48F 0%, #0E9F6E 100%); }
body[data-theme="v2"] .dash-card-red::before   { background: linear-gradient(135deg, #F47169 0%, #DC4A47 100%); }
body[data-theme="v2"] .dash-card-teal::before  { background: linear-gradient(135deg, #5BA8FF 0%, #3478F6 100%); }

/* Card numbers: bigger, Inter Tight, tighter tracking */
body[data-theme="v2"] .dash-card .num,
body[data-theme="v2"] .aiops-card .num,
body[data-theme="v2"] .dash-card-num,
body[data-theme="v2"] .aiops-card-num {
  font-family: var(--font-header-v2);
  font-size: 38px;
  font-weight: 600;
  color: var(--ink-1);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Card labels: smaller, sentence case */
body[data-theme="v2"] .dash-card .label,
body[data-theme="v2"] .aiops-card .label,
body[data-theme="v2"] .dash-card-label,
body[data-theme="v2"] .aiops-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ══════════ 4. Sidebar (.app-sidebar) ═══════════════════════════ */

body[data-theme="v2"] .app-sidebar {
  background: #16140F;
  border-right: 1px solid rgba(255, 255, 255, 0.04);
}

body[data-theme="v2"] .app-sidebar__section,
body[data-theme="v2"] .app-sidebar__section-label,
body[data-theme="v2"] .app-sidebar h3,
body[data-theme="v2"] .app-sidebar h4 {
  font-family: var(--font-body-v2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  color: #7A776E;
}

body[data-theme="v2"] .app-sidebar__item {
  position: relative;
  font-family: var(--font-body-v2);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: #A8A39A;
  border-radius: var(--radius-v2);
  padding: 10px 12px;
  transition: background-color var(--transition-v2),
              color var(--transition-v2),
              transform var(--transition-fast-v2);
}

body[data-theme="v2"] .app-sidebar__item:hover {
  color: #F0EBE0;
  background: rgba(255, 255, 255, 0.03);
  transform: translateX(2px);
}

body[data-theme="v2"] .app-sidebar__item.active,
body[data-theme="v2"] .app-sidebar__item[aria-current="page"] {
  color: #F0EBE0;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.18) 0%, rgba(201, 168, 76, 0.04) 100%);
  font-weight: 600;
}

body[data-theme="v2"] .app-sidebar__item.active::before,
body[data-theme="v2"] .app-sidebar__item[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 2px;
  background: var(--gold-grad-vert);
}

body[data-theme="v2"] .app-sidebar__icon {
  font-size: 16px;
  opacity: 0.85;
}
body[data-theme="v2"] .app-sidebar__item.active .app-sidebar__icon {
  opacity: 1;
}

/* ══════════ 5. Navbar ═══════════════════════════════════════════ */

body[data-theme="v2"] .navbar {
  background: #0E0D0A;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

body[data-theme="v2"] .navbar-title,
body[data-theme="v2"] .navbar-brand,
body[data-theme="v2"] .navbar h1,
body[data-theme="v2"] .navbar h2 {
  font-family: var(--font-display-v2); /* Cinzel preserved on navbar — brand moment */
  letter-spacing: 0.04em;
}

body[data-theme="v2"] .navbar-user,
body[data-theme="v2"] .navbar a,
body[data-theme="v2"] .navbar button {
  font-family: var(--font-header-v2);
  font-weight: 600;
  text-transform: none;
}

/* ══════════ 6. Forms ════════════════════════════════════════════ */

body[data-theme="v2"] .form-input,
body[data-theme="v2"] .form-select,
body[data-theme="v2"] .form-textarea,
body[data-theme="v2"] input[type="text"],
body[data-theme="v2"] input[type="email"],
body[data-theme="v2"] input[type="number"],
body[data-theme="v2"] input[type="search"],
body[data-theme="v2"] textarea,
body[data-theme="v2"] select {
  font-family: var(--font-body-v2);
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-v2);
  color: var(--ink-1);
  font-size: 15px;
  transition: border-color var(--transition-fast-v2),
              box-shadow var(--transition-fast-v2);
}

body[data-theme="v2"] .form-label {
  font-family: var(--font-header-v2);
  font-weight: 500;
  font-size: 13px;
  color: var(--ink-2);
  text-transform: none;
  letter-spacing: 0;
}

/* ══════════ 7. Modals + overlays ════════════════════════════════ */

body[data-theme="v2"] .modal-overlay,
body[data-theme="v2"] .help-drawer-overlay,
body[data-theme="v2"] .drill-modal__backdrop {
  background: rgba(13, 13, 10, 0.55);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
}

body[data-theme="v2"] .modal,
body[data-theme="v2"] .modal--lg,
body[data-theme="v2"] .modal--xl {
  background: var(--surface-1);
  border-radius: var(--radius-xl-v2);
  box-shadow: var(--shadow-modal);
  border: 1px solid var(--line-1);
}

body[data-theme="v2"] .modal-head,
body[data-theme="v2"] .modal-body,
body[data-theme="v2"] .modal-actions {
  border-color: var(--line-1);
}

/* ══════════ 8. Tables ═══════════════════════════════════════════ */

body[data-theme="v2"] .dash-table,
body[data-theme="v2"] .aiops-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

body[data-theme="v2"] .dash-table th,
body[data-theme="v2"] .aiops-table th {
  font-family: var(--font-header-v2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  padding: 12px 16px;
  text-align: left;
}

body[data-theme="v2"] .dash-table td,
body[data-theme="v2"] .aiops-table td {
  font-family: var(--font-body-v2);
  font-size: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-1);
  background: var(--surface-1);
  transition: background-color var(--transition-fast-v2);
}

body[data-theme="v2"] .dash-table tr:hover td,
body[data-theme="v2"] .aiops-table tr:hover td {
  background: var(--surface-2);
}

/* ══════════ 9. Badges + chips + pills ═══════════════════════════ */

body[data-theme="v2"] .badge-a,
body[data-theme="v2"] .badge-b,
body[data-theme="v2"] .badge-c,
body[data-theme="v2"] .aiops-pill,
body[data-theme="v2"] .sent-pill {
  font-family: var(--font-header-v2);
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-sm-v2);
  font-size: 11px;
  padding: 3px 8px;
}

body[data-theme="v2"] .badge-a {
  background: var(--success-bg);
  color: var(--success-fg);
}
body[data-theme="v2"] .badge-b {
  background: var(--warning-bg);
  color: var(--warning-fg);
}
body[data-theme="v2"] .badge-c {
  background: var(--surface-2);
  color: var(--ink-2);
}

body[data-theme="v2"] .chip {
  font-family: var(--font-body-v2);
  background: var(--surface-2);
  color: var(--ink-2);
  border-radius: var(--radius-sm-v2);
  font-weight: 500;
  font-size: 12px;
  padding: 4px 10px;
}

/* ══════════ 10. Toasts ══════════════════════════════════════════ */

body[data-theme="v2"] .toast {
  font-family: var(--font-body-v2);
  border-radius: var(--radius-lg-v2);
  box-shadow: var(--shadow-elev);
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  color: var(--ink-1);
}
body[data-theme="v2"] .toast-success { border-left: 3px solid var(--success-500); }
body[data-theme="v2"] .toast-error   { border-left: 3px solid var(--danger-500); }
body[data-theme="v2"] .toast-info    { border-left: 3px solid var(--info-500); }

/* ══════════ 11. Drill modal (M3) + Help drawer ═════════════════ */

body[data-theme="v2"] .drill-modal__sheet {
  background: var(--surface-1);
  border-radius: var(--radius-xl-v2);
  box-shadow: var(--shadow-modal);
}
body[data-theme="v2"] .drill-modal__header {
  background: #0E0D0A;
}
body[data-theme="v2"] .drill-modal__title {
  font-family: var(--font-display-v2); /* Cinzel preserved as brand moment */
}
body[data-theme="v2"] .drill-q__choice {
  border: 1px solid var(--line-2);
  border-radius: var(--radius-v2);
  transition: background-color var(--transition-fast-v2),
              border-color var(--transition-fast-v2);
}
body[data-theme="v2"] .drill-q__choice:hover {
  background: var(--gold-50);
  border-color: var(--gold-500);
}

body[data-theme="v2"] .help-drawer {
  background: var(--surface-1);
  border-left: 1px solid var(--line-1);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.16);
}
body[data-theme="v2"] .help-drawer__header {
  background: #0E0D0A;
}
body[data-theme="v2"] .help-drawer__title {
  font-family: var(--font-display-v2);
}
body[data-theme="v2"] .help-fab {
  background: var(--gold-grad);
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.32);
  transition: transform var(--transition-v2),
              box-shadow var(--transition-v2);
}
body[data-theme="v2"] .help-fab:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 6px 22px rgba(201, 168, 76, 0.45);
}

/* ══════════ 12. Route cards ═════════════════════════════════════ */

body[data-theme="v2"] .route-card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-left: none; /* drop the hard left bar — depth replaces it */
  border-radius: var(--radius-lg-v2);
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-v2),
              box-shadow var(--transition-v2),
              border-color var(--transition-v2);
}
body[data-theme="v2"] .route-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
  border-color: var(--line-2);
}

body[data-theme="v2"] .route-address {
  font-family: var(--font-header-v2);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink-1);
}
body[data-theme="v2"] .route-business {
  font-family: var(--font-body-v2);
  color: var(--ink-2);
  font-size: 14px;
  margin-top: 2px;
}
body[data-theme="v2"] .route-city-header {
  font-family: var(--font-header-v2);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  padding: 16px 0 8px;
}

/* ══════════ 13. Page titles + breathing room ════════════════════ */

body[data-theme="v2"] .panel-body > h1,
body[data-theme="v2"] .panel-body > h2,
body[data-theme="v2"] .tab-content > h1,
body[data-theme="v2"] .route-date-header {
  font-family: var(--font-header-v2);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ink-1);
}

body[data-theme="v2"] .route-date-header {
  font-size: 24px;
  margin-bottom: 8px;
}

/* ══════════ 14. Scroll behavior ═════════════════════════════════ */

body[data-theme="v2"] {
  scroll-behavior: smooth;
}

/* Custom scrollbar (desktop only — mobile uses native) */
@media (min-width: 768px) {
  body[data-theme="v2"] *::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }
  body[data-theme="v2"] *::-webkit-scrollbar-track {
    background: transparent;
  }
  body[data-theme="v2"] *::-webkit-scrollbar-thumb {
    background: var(--line-2);
    border-radius: 5px;
    border: 2px solid var(--surface-0);
  }
  body[data-theme="v2"] *::-webkit-scrollbar-thumb:hover {
    background: var(--ink-3);
  }
}

/* ══════════ 15. Animated number counter helper ══════════════════ */
/* Used by JS: <span data-count-up="238113">238113</span> */

body[data-theme="v2"] [data-count-up] {
  font-variant-numeric: tabular-nums;
}

/* ══════════ 16. Skeleton shimmer (gold-tinted) ══════════════════ */

@keyframes shimmer-v2 {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

body[data-theme="v2"] .skeleton {
  background: linear-gradient(
    90deg,
    var(--surface-2) 0%,
    var(--gold-50) 50%,
    var(--surface-2) 100%
  );
  background-size: 200% 100%;
  animation: shimmer-v2 1.6s ease-in-out infinite;
  border-radius: var(--radius-v2);
}

/* ══════════ 17. Proposals Sent (.sent-card) — WHITE CARD TREATMENT ═══ */
/* The v1 .sent-card is dark — flips to a clean white card in v2.
   Critical fix: button text inside sent-card was invisible in v2.    */

body[data-theme="v2"] .sent-card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg-v2);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-v2),
              box-shadow var(--transition-v2),
              border-color var(--transition-v2);
}
body[data-theme="v2"] .sent-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
  border-color: var(--line-2);
}
body[data-theme="v2"] .sent-card-title {
  color: var(--ink-1);
  font-family: var(--font-header-v2);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
}
body[data-theme="v2"] .sent-card-sub {
  color: var(--ink-2);
  font-size: 13px;
  font-family: var(--font-body-v2);
}
body[data-theme="v2"] .sent-card-total {
  color: var(--gold-700);
  font-family: var(--font-header-v2);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
}
body[data-theme="v2"] .sent-card-num {
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-size: 11px;
  font-family: var(--font-mono-v2);
}
body[data-theme="v2"] .sent-card-expand {
  border-top: 1px solid var(--line-1);
}
body[data-theme="v2"] .reply-block {
  background: var(--surface-2);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-v2);
}
body[data-theme="v2"] .reply-head strong {
  color: var(--ink-1);
}
body[data-theme="v2"] .sent-card-actions .btn-outline,
body[data-theme="v2"] .btn-outline {
  background: var(--surface-1);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
}
body[data-theme="v2"] .sent-card-actions .btn-outline:hover,
body[data-theme="v2"] .btn-outline:hover {
  border-color: var(--gold-500);
  color: var(--gold-700);
}

/* Status pills — refresh to modern tinted colors */
body[data-theme="v2"] .sent-pill-bounce {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border: 1px solid var(--danger-bg);
}
body[data-theme="v2"] .sent-pill-reply {
  background: var(--warning-bg);
  color: var(--warning-fg);
  border: 1px solid var(--warning-bg);
}
body[data-theme="v2"] .sent-pill-sent {
  background: var(--success-bg);
  color: var(--success-fg);
  border: 1px solid var(--success-bg);
}

/* Filter bar buttons (All / Sent / Viewed / Replied / Won / Lost) */
body[data-theme="v2"] .sent-filter-bar button,
body[data-theme="v2"] .filter-bar button {
  background: var(--surface-1);
  color: var(--ink-2);
  border: 1px solid var(--line-2);
  font-family: var(--font-header-v2);
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  transition: all var(--transition-fast-v2);
}
body[data-theme="v2"] .sent-filter-bar button:hover,
body[data-theme="v2"] .filter-bar button:hover {
  background: var(--gold-50);
  border-color: var(--gold-300);
  color: var(--ink-1);
}
body[data-theme="v2"] .sent-filter-bar button.active,
body[data-theme="v2"] .filter-bar button.active,
body[data-theme="v2"] .sent-filter-bar button[aria-pressed="true"],
body[data-theme="v2"] .filter-bar button[aria-pressed="true"] {
  background: var(--gold-grad);
  color: var(--ink-1);
  border-color: var(--gold-500);
  font-weight: 600;
}

/* ══════════ 18. Cold List + tab-style filter bars ═══════════════ */

body[data-theme="v2"] .property-table-wrap,
body[data-theme="v2"] .table-wrap {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg-v2);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

body[data-theme="v2"] .property-table,
body[data-theme="v2"] table.dash-table,
body[data-theme="v2"] .property-table-wrap table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

body[data-theme="v2"] .property-table th {
  font-family: var(--font-header-v2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  padding: 12px 14px;
  text-align: left;
}

body[data-theme="v2"] .property-table td {
  font-family: var(--font-body-v2);
  font-size: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--line-1);
  color: var(--ink-1);
  background: var(--surface-1);
  transition: background-color var(--transition-fast-v2);
}
body[data-theme="v2"] .property-table tr:hover td {
  background: var(--gold-50);
}

/* Status tabs (Active Leads / Routed / In Progress / Won / Lost / DQ) */
body[data-theme="v2"] .status-tabs button,
body[data-theme="v2"] .status-tabs .tab-btn,
body[data-theme="v2"] #status-tabs button {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: var(--font-header-v2);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  transition: all var(--transition-fast-v2);
}
body[data-theme="v2"] .status-tabs button.active,
body[data-theme="v2"] .status-tabs .tab-btn.active,
body[data-theme="v2"] #status-tabs button.active {
  background: var(--gold-grad);
  border-color: var(--gold-500);
  color: var(--ink-1);
  font-weight: 600;
}
body[data-theme="v2"] .status-tabs .tab-badge,
body[data-theme="v2"] #status-tabs .tab-badge {
  background: var(--ink-2);
  color: #fff;
  border-radius: var(--radius-pill);
  font-size: 11px;
  padding: 1px 6px;
  margin-left: 4px;
}
body[data-theme="v2"] .status-tabs .active .tab-badge {
  background: var(--ink-1);
  color: var(--gold-300);
}

/* The "+ Route" / inspect actions in cold list */
body[data-theme="v2"] .property-table .btn,
body[data-theme="v2"] .property-table button {
  font-size: 12px;
  padding: 6px 10px;
  min-height: 32px;
  border-radius: var(--radius-sm-v2);
}

/* ══════════ 19. Drag-drop / file upload zone ═══════════════════ */

body[data-theme="v2"] .upload-zone,
body[data-theme="v2"] .drop-zone {
  background: var(--surface-1);
  border: 2px dashed var(--line-2);
  border-radius: var(--radius-lg-v2);
  transition: border-color var(--transition-fast-v2),
              background-color var(--transition-fast-v2);
}
body[data-theme="v2"] .upload-zone:hover,
body[data-theme="v2"] .drop-zone:hover,
body[data-theme="v2"] .upload-zone.is-dragover {
  border-color: var(--gold-500);
  background: var(--gold-50);
}

/* ══════════ 20. Page hero / lede typography ═════════════════════ */
/* Make the page-title + subtitle pair really pop. */

body[data-theme="v2"] h1,
body[data-theme="v2"] .page-title,
body[data-theme="v2"] .panel-title {
  font-family: var(--font-header-v2);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-1);
  margin-bottom: 4px;
  text-transform: none;
}

body[data-theme="v2"] .page-subtitle,
body[data-theme="v2"] .panel-subtitle,
body[data-theme="v2"] .lede {
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 24px;
}

/* ══════════ 21. Buttons — bolder gradient + more lift ═══════════ */
/* Override: make primary buttons more obviously gradient-y */

body[data-theme="v2"] .btn-primary,
body[data-theme="v2"] .btn-gold {
  background: var(--gold-grad);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: transform var(--transition-fast-v2),
              box-shadow var(--transition-v2),
              background-position 400ms ease;
}
body[data-theme="v2"] .btn-primary:hover,
body[data-theme="v2"] .btn-gold:hover {
  background-position: 100% 50%;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.35);
}

/* ══════════ 22. KPI cards — bigger numbers, better stripe ═══════ */

body[data-theme="v2"] .dash-card-num,
body[data-theme="v2"] .aiops-card-num,
body[data-theme="v2"] .dash-card .num,
body[data-theme="v2"] .aiops-card .num {
  font-size: 42px;
}

body[data-theme="v2"] .dash-card,
body[data-theme="v2"] .aiops-card {
  padding-top: 22px; /* room above the gradient stripe */
}

body[data-theme="v2"] .dash-card::before,
body[data-theme="v2"] .aiops-card::before {
  height: 4px;
}

/* ══════════ 23. Sidebar — more dramatic active treatment ════════ */

body[data-theme="v2"] .app-sidebar__item.active::before,
body[data-theme="v2"] .app-sidebar__item[aria-current="page"]::before {
  width: 4px;
  left: -10px;
  box-shadow: 0 0 12px rgba(201, 168, 76, 0.6);
}

body[data-theme="v2"] .app-sidebar__item.active,
body[data-theme="v2"] .app-sidebar__item[aria-current="page"] {
  color: #FBF6E8;
  background: linear-gradient(90deg,
    rgba(201, 168, 76, 0.22) 0%,
    rgba(201, 168, 76, 0.08) 60%,
    rgba(201, 168, 76, 0) 100%
  );
}

/* ══════════ 24. Subtle gold link color in body ══════════════════ */

body[data-theme="v2"] a {
  color: var(--gold-700);
  text-decoration: none;
  transition: color var(--transition-fast-v2);
}
body[data-theme="v2"] a:hover {
  color: var(--gold-500);
  text-decoration: underline;
  text-decoration-color: var(--gold-300);
  text-underline-offset: 3px;
}

/* ══════════ 25. Inspection form sections — KILL THE GOLD BARS ══════ */
/* The .insp-section-head has solid gold bg + ALL-CAPS — pure v1.
   Replace with modern clean section header that flows into body.   */

body[data-theme="v2"] .insp-section {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg-v2);
  box-shadow: var(--shadow-card);
  margin-bottom: 20px;
  overflow: hidden;
  transition: box-shadow var(--transition-v2);
}
body[data-theme="v2"] .insp-section:hover {
  box-shadow: var(--shadow-elev);
}

body[data-theme="v2"] .insp-section-head {
  background: transparent;
  border-bottom: 1px solid var(--line-1);
  padding: 16px 22px;
  font-family: var(--font-header-v2);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink-1);
  position: relative;
}
body[data-theme="v2"] .insp-section-head::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--gold-grad-vert);
}

body[data-theme="v2"] .insp-num {
  background: var(--gold-50);
  color: var(--gold-700);
  width: 26px;
  height: 26px;
  border: 1px solid var(--gold-300);
  font-family: var(--font-header-v2);
  font-weight: 700;
  font-size: 13px;
}

body[data-theme="v2"] .insp-section-body {
  background: var(--surface-1);
  border: none;
  padding: 22px;
}

/* ══════════ 26. ALL-CAPS SWEEP — sentence case across the app ════ */

body[data-theme="v2"] .route-city-header,
body[data-theme="v2"] .insp-section-head,
body[data-theme="v2"] .panel-title,
body[data-theme="v2"] .panel-subtitle,
body[data-theme="v2"] .section-title,
body[data-theme="v2"] .filter-bar-label,
body[data-theme="v2"] .grade-detail h3,
body[data-theme="v2"] .form-section-title {
  text-transform: none;
  letter-spacing: -0.005em;
}

body[data-theme="v2"] .route-city-header {
  font-family: var(--font-header-v2);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  padding: 20px 4px 8px;
  text-transform: none;
  letter-spacing: 0.04em;
  /* Keep slight tracking for visual hierarchy but drop full ALL-CAPS feel */
}
/* Capitalize the first letter of each word via JS later — for now, sentence case looks fine */

/* ══════════ 27. Page background — actually noticeably whiter ════ */
/* The original v2 #FAFAF7 was barely different from v1's #F9F7F2.
   Going crisper white with a hint of warmth.                       */

body[data-theme="v2"] {
  --surface-0: #FCFCFA;     /* crisper than #FAFAF7 */
}

body[data-theme="v2"] .app-main,
body[data-theme="v2"] .app-shell,
body[data-theme="v2"] .panel,
body[data-theme="v2"] .tab-content,
body[data-theme="v2"] .panel-body {
  background: transparent;
}

/* Hero panel pattern — when a page has a top section that should
   read as a hero (Cold List title + subtitle + filter bar), wrap
   it in a soft card. */
body[data-theme="v2"] .panel,
body[data-theme="v2"] [id^="tab-"] > .panel-body {
  /* Allow individual panels to have their own structure */
  background: transparent;
}

/* ══════════ 28. Form inputs — bigger, modern depth ══════════════ */

body[data-theme="v2"] .form-input,
body[data-theme="v2"] .form-select,
body[data-theme="v2"] .form-textarea,
body[data-theme="v2"] input[type="text"],
body[data-theme="v2"] input[type="email"],
body[data-theme="v2"] input[type="number"],
body[data-theme="v2"] input[type="search"],
body[data-theme="v2"] input[type="date"],
body[data-theme="v2"] input[type="time"],
body[data-theme="v2"] input[type="tel"],
body[data-theme="v2"] textarea,
body[data-theme="v2"] select {
  padding: 11px 14px;
  font-size: 14px;
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) inset;
  transition: border-color var(--transition-fast-v2),
              box-shadow var(--transition-fast-v2),
              background-color var(--transition-fast-v2);
}
body[data-theme="v2"] .form-input:hover,
body[data-theme="v2"] .form-select:hover,
body[data-theme="v2"] textarea:hover,
body[data-theme="v2"] input:hover {
  border-color: var(--line-2);
  background: var(--surface-1);
}
body[data-theme="v2"] .form-input:focus,
body[data-theme="v2"] .form-select:focus,
body[data-theme="v2"] textarea:focus,
body[data-theme="v2"] input:focus,
body[data-theme="v2"] select:focus {
  border-color: var(--gold-500);
  box-shadow: var(--shadow-focus-v2);
  background: var(--surface-1);
}
body[data-theme="v2"] .form-label {
  font-family: var(--font-header-v2);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--ink-1);
  margin-bottom: 6px;
}

/* ══════════ 29. Hero header pattern (page title + lede + actions) ═ */

body[data-theme="v2"] .panel-body > h2:first-child,
body[data-theme="v2"] .tab-content > h2:first-child {
  font-family: var(--font-header-v2);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  color: var(--ink-1);
}

body[data-theme="v2"] .panel-body > h2:first-child + p,
body[data-theme="v2"] .tab-content > h2:first-child + p {
  color: var(--ink-2);
  font-size: 15px;
  margin: 0 0 24px;
}

/* ══════════ 30. Dashboard hero KPI cards — bigger, bolder ════════ */
/* Make the dashboard KPIs feel like a real bento hero. */

body[data-theme="v2"] .dash-card {
  padding: 24px 22px;
  min-height: 110px;
}

body[data-theme="v2"] .dash-card-num,
body[data-theme="v2"] .dash-card .num {
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

body[data-theme="v2"] .dash-card-label,
body[data-theme="v2"] .dash-card .label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

/* Sparkline space below number */
body[data-theme="v2"] .dash-spark {
  margin-top: 8px;
  opacity: 0.6;
}

/* ══════════ 31. Last-7-days bar chart — modernize ════════════════ */

body[data-theme="v2"] .dash-bars {
  background: transparent;
  padding: 16px;
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg-v2);
  background: var(--surface-1);
  box-shadow: var(--shadow-card);
}

body[data-theme="v2"] .dash-bar {
  background: var(--gold-grad-vert) !important;
  border-radius: 4px 4px 0 0;
  transition: opacity var(--transition-fast-v2);
}
body[data-theme="v2"] .dash-bar:hover {
  opacity: 0.85;
}

body[data-theme="v2"] .dash-bar-label {
  font-family: var(--font-header-v2);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ══════════ 32. Pipeline bars (.dash-funnel rows) ════════════════ */

body[data-theme="v2"] .dash-funnel-row {
  margin-bottom: 12px;
}
body[data-theme="v2"] .dash-funnel-fill {
  background: var(--gold-grad);
  border-radius: var(--radius-pill);
  height: 14px;
  transition: width var(--transition-slow-v2);
}
body[data-theme="v2"] .dash-funnel-label {
  font-family: var(--font-header-v2);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-1);
}

/* ══════════ 33. Stale pipeline alert — modern banner ════════════ */

body[data-theme="v2"] .stale-banner,
body[data-theme="v2"] .alert-warn {
  background: linear-gradient(135deg, var(--warning-bg) 0%, var(--gold-50) 100%);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-lg-v2);
  padding: 14px 18px;
  color: var(--warning-fg);
  font-family: var(--font-body-v2);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ══════════ 34. Navbar refinement ═══════════════════════════════ */

body[data-theme="v2"] .navbar {
  background: linear-gradient(180deg, #0E0D0A 0%, #16140F 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

body[data-theme="v2"] .navbar .navbar-brand,
body[data-theme="v2"] .navbar .navbar-title {
  /* Keep Cinzel — that's the brand identity moment */
  font-family: var(--font-display-v2);
  color: var(--gold-500);
  letter-spacing: 0.02em;
}

body[data-theme="v2"] .navbar .btn,
body[data-theme="v2"] .navbar button {
  font-family: var(--font-header-v2);
  font-size: 13px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* ══════════ 35. Photo grid (Inspection) ═════════════════════════ */

body[data-theme="v2"] .photo-grid img,
body[data-theme="v2"] .photo-thumb {
  border-radius: var(--radius-v2);
  border: 1px solid var(--line-1);
  transition: transform var(--transition-fast-v2),
              box-shadow var(--transition-fast-v2);
}
body[data-theme="v2"] .photo-grid img:hover,
body[data-theme="v2"] .photo-thumb:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-elev);
}

/* ══════════ 36. Field-row + factor-row inside Inspection ════════ */

body[data-theme="v2"] .field-row {
  gap: 12px;
}

body[data-theme="v2"] .factor-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--line-1);
  font-family: var(--font-body-v2);
}
body[data-theme="v2"] .factor-row:last-child {
  border-bottom: none;
}

/* ══════════ 37. Tab badges (.tab-badge) — modernize ═════════════ */

body[data-theme="v2"] .tab-badge {
  background: var(--ink-3);
  color: var(--surface-1);
  border-radius: var(--radius-pill);
  font-family: var(--font-header-v2);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  margin-left: 6px;
}

body[data-theme="v2"] .active .tab-badge {
  background: var(--ink-1);
  color: var(--gold-300);
}

/* ══════════ 38. Settings page — modernize toggle switches ════════ */

body[data-theme="v2"] .toggle-switch,
body[data-theme="v2"] .switch {
  background: var(--line-2);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition-v2);
}
body[data-theme="v2"] .toggle-switch.active,
body[data-theme="v2"] .switch.active,
body[data-theme="v2"] .toggle-switch[aria-checked="true"],
body[data-theme="v2"] .switch[aria-checked="true"] {
  background: var(--gold-grad);
}

/* ══════════ 39. Loading spinner — gold gradient ══════════════════ */

body[data-theme="v2"] .spinner {
  border-top-color: var(--gold-500);
  border-right-color: var(--gold-300);
  border-bottom-color: var(--gold-100);
  border-left-color: transparent;
}

/* ══════════ 40. Drill modal — bigger choice cards ═══════════════ */

body[data-theme="v2"] .drill-modal__sheet {
  border: 1px solid var(--line-1);
}
body[data-theme="v2"] .drill-modal__title {
  color: var(--gold-500);
}
body[data-theme="v2"] .drill-q__prompt {
  font-family: var(--font-header-v2);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
}
body[data-theme="v2"] .drill-q__choice-text {
  font-family: var(--font-body-v2);
}
body[data-theme="v2"] .drill-q__choice.is-selected {
  background: var(--gold-50);
  border-color: var(--gold-500);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.18);
}

/* ══════════ 41. AI Ops admin tab — FLIP TO LIGHT ═══════════════ */
/* CRITICAL CONTRAST FIX. The v1 AI Ops panel + table use dark
   surfaces with light text. v2 made global text dark for light bg.
   Result: dark text on dark bg = invisible kill-switch table.
   Fix: flip every AI Ops surface to a light-card treatment.       */

body[data-theme="v2"] .aiops-panel {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg-v2);
  box-shadow: var(--shadow-card);
  padding: 22px 24px;
}

body[data-theme="v2"] .aiops-panel-title {
  font-family: var(--font-header-v2);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  text-transform: none;
}

body[data-theme="v2"] .aiops-panel-sub {
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 14px;
}
body[data-theme="v2"] .aiops-panel-sub code,
body[data-theme="v2"] .aiops-table code {
  background: var(--surface-2);
  color: var(--gold-700);
  border-radius: var(--radius-sm-v2);
  font-family: var(--font-mono-v2);
  font-size: 12px;
  padding: 2px 6px;
}

body[data-theme="v2"] .aiops-table {
  color: var(--ink-1);
  font-family: var(--font-body-v2);
}
body[data-theme="v2"] .aiops-table th {
  font-family: var(--font-header-v2);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom: 1px solid var(--line-2);
  padding: 12px 16px;
}
body[data-theme="v2"] .aiops-table td {
  color: var(--ink-1);
  border-bottom: 1px solid var(--line-1);
  padding: 14px 16px;
  background: var(--surface-1);
  vertical-align: middle;
  transition: background-color var(--transition-fast-v2);
}
body[data-theme="v2"] .aiops-table tr:hover td {
  background: var(--gold-50);
}
body[data-theme="v2"] .aiops-err-msg { color: var(--ink-1); }
body[data-theme="v2"] .aiops-err-refs { color: var(--ink-3); font-size: 12px; }

/* AI Ops hero KPI cards (Tokens, Cost Est, Errors, Webhook Fails, Flag) */
body[data-theme="v2"] .aiops-card {
  background: var(--surface-1);
  border: 1px solid var(--line-1);
  border-left: none; /* drop the v1 left-bar; use top gradient stripe instead */
  border-radius: var(--radius-lg-v2);
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition-v2),
              box-shadow var(--transition-v2);
}
body[data-theme="v2"] .aiops-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elev);
}
body[data-theme="v2"] .aiops-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--gold-grad);
}
body[data-theme="v2"] .aiops-card-gold::before  { background: var(--gold-grad); }
body[data-theme="v2"] .aiops-card-green::before { background: linear-gradient(135deg, #14C48F 0%, #0E9F6E 100%); }
body[data-theme="v2"] .aiops-card-teal::before  { background: linear-gradient(135deg, #5BA8FF 0%, #3478F6 100%); }
body[data-theme="v2"] .aiops-card-red::before   { background: linear-gradient(135deg, #F47169 0%, #DC4A47 100%); }

body[data-theme="v2"] .aiops-card-label {
  font-family: var(--font-header-v2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body[data-theme="v2"] .aiops-card-value {
  font-family: var(--font-header-v2);
  font-size: 32px;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.02em;
  margin-top: 8px;
  line-height: 1;
}
body[data-theme="v2"] .aiops-card-sub {
  color: var(--ink-3);
  font-size: 12px;
  margin-top: 6px;
}

/* AI Ops pills (HEALTHY / WARN / etc.) — tinted backgrounds */
body[data-theme="v2"] .aiops-pill {
  font-family: var(--font-header-v2);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
body[data-theme="v2"] .aiops-pill-green {
  background: var(--success-bg);
  color: var(--success-fg);
}
body[data-theme="v2"] .aiops-pill-teal {
  background: var(--info-bg);
  color: var(--info-fg);
}

/* AI Ops header + refresh button + footnote */
body[data-theme="v2"] .aiops-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
body[data-theme="v2"] .aiops-refresh-btn {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  border-radius: var(--radius-v2);
  font-family: var(--font-header-v2);
  font-weight: 500;
  font-size: 13px;
  padding: 7px 14px;
  text-transform: none;
  letter-spacing: 0;
}
body[data-theme="v2"] .aiops-refresh-btn:hover {
  border-color: var(--gold-500);
  color: var(--gold-700);
  background: var(--gold-50);
}
body[data-theme="v2"] .aiops-loading,
body[data-theme="v2"] .aiops-empty,
body[data-theme="v2"] .aiops-footnote {
  color: var(--ink-3);
}

/* AI Ops migration panel (the pre-DDL warning) */
body[data-theme="v2"] .aiops-migration-panel {
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--warning-bg) 100%);
  border: 1px solid var(--gold-300);
  border-radius: var(--radius-lg-v2);
  padding: 18px 22px;
  color: var(--warning-fg);
}
body[data-theme="v2"] .aiops-migration-panel code {
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-1);
}

/* Bot kill-switch toggle inputs in the Enabled column */
body[data-theme="v2"] .aiops-table input[type="checkbox"] {
  cursor: pointer;
}

/* ══════════ 42. Today's Route — mini map preview (Phase C) ══════ */
/* Leaflet + OpenStreetMap. Lazy-loaded by route.js when v2 is on
   AND there are stops with coordinates. Shows all routed stops as
   gold pins. Click a pin → scrolls to the matching card.          */

body[data-theme="v2"] .route-map {
  width: 100%;
  height: 280px;
  border-radius: var(--radius-lg-v2);
  border: 1px solid var(--line-1);
  overflow: hidden;
  margin: 0 0 20px;
  box-shadow: var(--shadow-card);
  background: var(--surface-2);
  position: relative;
}

/* Custom gold-pin marker (Leaflet divIcon) */
body[data-theme="v2"] .route-map-pin {
  background: transparent;
  border: none;
}
body[data-theme="v2"] .route-map-pin__inner {
  width: 22px;
  height: 22px;
  background: var(--gold-grad);
  border: 3px solid var(--surface-1);
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(201, 168, 76, 0.5);
  transition: transform var(--transition-fast-v2);
}
body[data-theme="v2"] .route-map-pin:hover .route-map-pin__inner {
  transform: scale(1.2);
}

/* Tooltip styling override (Leaflet has its own classes) */
body[data-theme="v2"] .leaflet-tooltip {
  font-family: var(--font-body-v2);
  font-size: 12px;
  background: var(--ink-1);
  color: var(--surface-1);
  border: none;
  border-radius: var(--radius-sm-v2);
  padding: 6px 10px;
  box-shadow: var(--shadow-elev);
}
body[data-theme="v2"] .leaflet-tooltip-top::before {
  border-top-color: var(--ink-1);
}

/* Leaflet zoom controls — match v2 buttons */
body[data-theme="v2"] .leaflet-control-zoom a {
  background: var(--surface-1);
  color: var(--ink-1);
  border: 1px solid var(--line-2);
  font-family: var(--font-header-v2);
  font-weight: 600;
}
body[data-theme="v2"] .leaflet-control-zoom a:hover {
  background: var(--gold-50);
  border-color: var(--gold-500);
  color: var(--gold-700);
}

/* Card flash on map-pin click (yellow halo for 1.2s) */
@keyframes route-card-flash {
  0%   { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.6), var(--shadow-card); }
  60%  { box-shadow: 0 0 0 8px rgba(201, 168, 76, 0.0), var(--shadow-elev); }
  100% { box-shadow: var(--shadow-card); }
}
body[data-theme="v2"] .route-card--flash {
  animation: route-card-flash 1.2s ease-out;
  border-color: var(--gold-500);
}

/* ══════════ 43. Route header — modern action bar ════════════════ */

body[data-theme="v2"] .route-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
}

body[data-theme="v2"] .route-stats {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--font-body-v2);
}
body[data-theme="v2"] .route-count,
body[data-theme="v2"] .route-inspected,
body[data-theme="v2"] .route-remaining {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  font-family: var(--font-header-v2);
  letter-spacing: -0.005em;
}
body[data-theme="v2"] .route-inspected {
  color: var(--success-fg);
}
body[data-theme="v2"] .route-remaining {
  color: var(--warning-fg);
}
body[data-theme="v2"] .route-separator {
  color: var(--line-2);
  margin: 0 4px;
}

body[data-theme="v2"] .route-header-actions {
  display: flex;
  gap: 8px;
}

body[data-theme="v2"] .route-progress {
  margin-bottom: 16px;
}
body[data-theme="v2"] .progress-bar {
  background: var(--surface-2);
  border-radius: var(--radius-pill);
  height: 6px;
  overflow: hidden;
}
body[data-theme="v2"] .progress-fill {
  background: var(--gold-grad);
  height: 100%;
  transition: width 400ms var(--ease-out-quart);
}
body[data-theme="v2"] .progress-label {
  font-family: var(--font-body-v2);
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
}

/* Route card meta chips */
body[data-theme="v2"] .route-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
body[data-theme="v2"] .route-score,
body[data-theme="v2"] .route-sf,
body[data-theme="v2"] .route-type,
body[data-theme="v2"] .route-date-label {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body-v2);
  font-size: 12px;
  color: var(--ink-2);
  background: var(--surface-2);
  padding: 3px 9px;
  border-radius: var(--radius-pill);
}

body[data-theme="v2"] .route-card-info > .route-address {
  margin-bottom: 2px;
}
body[data-theme="v2"] .route-card-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Optimize meta line */
body[data-theme="v2"] .route-optimize-meta {
  background: linear-gradient(135deg, var(--success-bg) 0%, var(--gold-50) 100%);
  border: 1px solid var(--success-bg);
  color: var(--success-fg);
  border-radius: var(--radius-v2);
  padding: 10px 14px;
  font-family: var(--font-body-v2);
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
}

/* Carry-over toggle */
body[data-theme="v2"] .route-carryover-toggle {
  background: var(--surface-1);
  border: 1px dashed var(--line-2);
  color: var(--ink-2);
  border-radius: var(--radius-v2);
  padding: 10px 14px;
  font-family: var(--font-header-v2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  margin-top: 16px;
  width: 100%;
  text-align: left;
  transition: all var(--transition-fast-v2);
}
body[data-theme="v2"] .route-carryover-toggle:hover {
  border-color: var(--gold-500);
  background: var(--gold-50);
  color: var(--ink-1);
}

/* ══════════ 44. Final sweep — modernize remaining solid-gold fills ═══ */

/* Cold list filter buttons (.filter-btn) — modern pills with
   gold-gradient on active */
body[data-theme="v2"] .filter-btn {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: var(--font-header-v2);
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  transition: all var(--transition-fast-v2);
}
body[data-theme="v2"] .filter-btn:hover {
  background: var(--gold-50);
  border-color: var(--gold-300);
  color: var(--ink-1);
}
body[data-theme="v2"] .filter-btn.active {
  background: var(--gold-grad);
  color: var(--ink-1);
  border-color: var(--gold-500);
  font-weight: 600;
}
body[data-theme="v2"] .filter-a.active {
  background: linear-gradient(135deg, var(--success-bg) 0%, #C8E5D4 100%);
  color: var(--success-fg);
  border-color: #B8DCC9;
}
body[data-theme="v2"] .filter-b.active {
  background: linear-gradient(135deg, var(--gold-50) 0%, var(--gold-100) 100%);
  color: var(--gold-700);
  border-color: var(--gold-300);
}
body[data-theme="v2"] .filter-c.active {
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--line-1) 100%);
  color: var(--ink-1);
  border-color: var(--line-2);
}
body[data-theme="v2"] .filter-disq.active {
  background: linear-gradient(135deg, var(--danger-bg) 0%, #F0C9C7 100%);
  color: var(--danger-fg);
  border-color: #E5BAB7;
}

/* Status tab counts (the small badges next to "Active Leads 10") */
body[data-theme="v2"] .status-tab.active .status-count {
  background: var(--ink-1);
  color: var(--gold-300);
}

/* Dashboard funnel + sparkline + chart bar fills — gradient instead
   of solid gold */
body[data-theme="v2"] .dash-funnel-bar-inspected,
body[data-theme="v2"] .dash-spark-insp,
body[data-theme="v2"] .dash-legend-insp,
body[data-theme="v2"] .dash-mix-bar-b {
  background: var(--gold-grad) !important;
}

/* Status dots (.sd-sent etc.) keep their semantic intent but get
   a slight gradient sheen */
body[data-theme="v2"] .sd-sent {
  background: var(--gold-grad);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.18);
}
body[data-theme="v2"] .sd-viewed {
  background: linear-gradient(135deg, #5BA8FF 0%, #185FA5 100%);
}
body[data-theme="v2"] .sd-replied {
  background: linear-gradient(135deg, #E89C45 0%, #BA7517 100%);
}
body[data-theme="v2"] .sd-signed {
  background: linear-gradient(135deg, #14C48F 0%, #0E9F6E 100%);
}
body[data-theme="v2"] .sd-lost {
  background: linear-gradient(135deg, #DC4A47 0%, #A32D2D 100%);
}

/* Status tabs row (.status-tab) — overall pill treatment */
body[data-theme="v2"] .status-tab {
  background: var(--surface-1);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: var(--font-header-v2);
  font-weight: 500;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  padding: 7px 14px;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all var(--transition-fast-v2);
}
body[data-theme="v2"] .status-tab:hover {
  background: var(--gold-50);
  border-color: var(--gold-300);
  color: var(--ink-1);
}
body[data-theme="v2"] .status-tab.active {
  background: var(--gold-grad);
  color: var(--ink-1);
  border-color: var(--gold-500);
  font-weight: 600;
}
body[data-theme="v2"] .status-count {
  background: var(--ink-3);
  color: var(--surface-1);
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
}

/* Data completeness badges */
body[data-theme="v2"] .badge-data-high {
  background: var(--success-bg);
  color: var(--success-fg);
}
body[data-theme="v2"] .badge-data-medium {
  background: var(--gold-50);
  color: var(--gold-700);
}
body[data-theme="v2"] .badge-data-low {
  background: var(--danger-bg);
  color: var(--danger-fg);
}

/* ══════════ 45. Toast container — modern glass-blur + better motion ═══ */

body[data-theme="v2"] #toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: var(--z-toast, 1100);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

body[data-theme="v2"] .toast {
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid var(--line-1);
  border-radius: var(--radius-lg-v2);
  box-shadow: var(--shadow-elev);
  padding: 12px 16px;
  font-family: var(--font-body-v2);
  font-size: 14px;
  color: var(--ink-1);
  min-width: 240px;
  max-width: 380px;
  animation: toast-in-v2 320ms var(--ease-spring);
}
body[data-theme="v2"] .toast-success { border-left: 3px solid var(--success-500); }
body[data-theme="v2"] .toast-error   { border-left: 3px solid var(--danger-500); }
body[data-theme="v2"] .toast-info    { border-left: 3px solid var(--info-500); }

@keyframes toast-in-v2 {
  0% {
    opacity: 0;
    transform: translateY(-10px) scale(0.96);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ══════════ 46. Refined nav-bar export/sign-out buttons ═════════ */

body[data-theme="v2"] .navbar .navbar-user {
  font-family: var(--font-body-v2);
  color: var(--gold-500);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
body[data-theme="v2"] .navbar .navbar-user-role {
  color: #9a958a;
  font-family: var(--font-body-v2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* ══════════ End ═════════════════════════════════════════════════ */