/* ===== DESIGN TOKENS ===== */
:root {
  color-scheme: light;

  /* Canvas */
  --bg: #fdf8f6;
  --panel: #FFFFFF;
  --panel-soft: #f7f3f0;

  /* Typography */
  --ink: #1c1b1a;
  --ink-2: #65645F;
  --muted: #65645F;

  /* Borders */
  --line: rgba(28, 27, 26, 0.08);
  --line-strong: rgba(28, 27, 26, 0.16);

  /* Brand palette (unified design system) */
  --primary: #005ab3;
  --accent-deep: #0064E3;
  --surface: #fdf8f6;
  --ink-tertiary: #9A9994;
  --success: #30D158;
  --warning: #FF9F0A;
  --danger-strong: #FF453A;
  --outline-variant: #c0c6d6;

  /* Glass surfaces */
  --glass-bg: rgba(255, 255, 255, 0.62);
  --glass-card: rgba(255, 255, 255, 0.85);
  --glass-blur: blur(40px) saturate(180%);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px -8px rgba(28, 27, 26, 0.10);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --field-bg: rgba(255, 255, 255, 0.9);

  /* Type scale (Inter) */
  --fs-display: 34px; --fs-title1: 28px; --fs-title2: 22px; --fs-title3: 18px;
  --fs-body-lg: 16px; --fs-body: 14px; --fs-body-sm: 13px; --fs-caption: 12px; --fs-micro: 10px;

  /* Aliases that were referenced throughout but never defined (15+ usages were
     silently invalid → text inherited the wrong color). Keep them pointed at the
     real tokens so every var(--ink-muted)/var(--ink-secondary) resolves. */
  --ink-muted: var(--muted);
  --ink-secondary: var(--ink-2);

  /* Icon scale (Material Symbols) */
  --icon-sm: 16px; --icon-md: 20px; --icon-lg: 24px;

  /* Motion — one shared system (used by the UI-polish layer at the end of file) */
  --dur-1: 120ms;   /* micro: press, hover, toggles */
  --dur-2: 200ms;   /* standard: popovers, fades, page-in */
  --dur-3: 320ms;   /* large: panels, modals, list entrances */
  --dur-4: 480ms;   /* hero: bar growth, count-up */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);

  /* Status pastels */
  --pale-blue: #E1F3FE;
  --pale-blue-ink: #1F6C9F;
  --pale-green: #EDF3EC;
  --pale-green-ink: #346538;
  --pale-red: #FDEBEC;
  --pale-red-ink: #9F2F2D;
  --pale-yellow: #FBF3DB;
  --pale-yellow-ink: #956400;

  /* Danger */
  --danger: #9F2F2D;

  /* Fonts — unified on Inter */
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* system mono — nothing custom is loaded */

  /* Elevation — ultra-diffuse only */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* ===== BASE RESET ===== */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: linear-gradient(135deg, #fdf8f6 0%, #eef6ff 100%) fixed;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Soft drifting orbs behind everything (global) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 6% 4%, rgba(0,116,224,0.08) 0%, transparent 70%),
    radial-gradient(40% 40% at 98% 96%, rgba(255,159,10,0.07) 0%, transparent 70%);
}

button, input, select, textarea {
  font: inherit;
}

h1, h2, h3, p {
  margin-top: 0;
}

h1 {
  font-family: var(--sans);
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
  margin-bottom: 8px;
  color: var(--ink);
}

h2 {
  font-family: var(--sans);
  font-size: var(--fs-title3);
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.25;
  margin-bottom: 0;
  color: var(--ink);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ink);
}

/* ===== MATERIAL ICONS ===== */
.material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Material Symbols Outlined";
  font-size: 20px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  white-space: nowrap;
  direction: ltr;
  font-feature-settings: "liga";
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ===== SIDEBAR ===== */
.app-sidebar {
  position: fixed;
  inset: 14px auto 14px 14px;
  z-index: 50;
  display: flex;
  width: 236px;
  flex-direction: column;
  border: 1px solid #ffffff;
  border-radius: 28px;
  background: var(--mid-surface-2, #ffffff);
  box-shadow: 0 32px 64px -16px rgba(28, 27, 26, 0.12);
  padding: 24px 16px 18px;
}

.brand-block {
  display: grid;
  gap: 3px;
  padding: 0 8px 22px;
  margin-bottom: 12px;
}

.brand-block strong {
  font-family: var(--sans);
  font-size: var(--fs-title3);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.brand-block span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 4px;
  padding: 0;
}

.nav-item {
  display: flex;
  min-height: 46px;
  align-items: center;
  gap: 14px;
  border: 0;
  border-radius: 16px;
  padding: 0 16px;
  color: var(--ink-secondary, #65645F);
  background: transparent;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.nav-item .material-symbols-outlined {
  font-size: 23px;
  color: var(--ink-tertiary, #9A9994);
  transition: color 160ms ease;
}

.nav-item:hover {
  background: var(--surface-container-lowest, #fff);
  color: var(--ink);
}
.nav-item:hover .material-symbols-outlined { color: var(--ink); }

.nav-item.active {
  background: var(--surface-container-low, #f7f3f0);
  color: var(--primary, #005ab3);
  font-weight: 700;
}
.nav-item.active .material-symbols-outlined { color: var(--primary, #005ab3); }
/* trailing dot indicator on the active item */
.nav-item.active::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--primary, #005ab3);
}

.sidebar-bottom {
  display: grid;
  gap: 6px;
  margin-top: auto;
  padding: 16px 0 0;
  border-top: 1px solid var(--surface-container, #f2edeb);
}

/* ── "+" create menu (New Quote / New Deal / New Contact) ─────────────── */
.create-menu { position: relative; }
.create-fab {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary, #005ab3);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(0, 90, 179, 0.45);
  transition: background 160ms ease, transform 120ms ease;
}
.create-fab:hover { background: var(--accent-deep, #0064E3); }
.create-fab:active { transform: scale(0.94); }
.create-fab .material-symbols-outlined { font-size: 26px; transition: transform 220ms cubic-bezier(0.16,1,0.3,1); }
.create-fab.is-open .material-symbols-outlined { transform: rotate(45deg); }

.create-menu-pop {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 0;
  min-width: 196px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--mid-surface-2, #fff);
  border: 1px solid var(--glass-border, rgba(28, 27, 26, 0.08));
  border-radius: 16px;
  box-shadow: 0 16px 40px -12px rgba(28, 27, 26, 0.22);
  z-index: 60;
}
.create-menu-pop[hidden] { display: none; }
.create-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1c1b1a);
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}
.create-menu-item:hover { background: var(--surface-container-low, #f7f3f0); color: var(--primary, #005ab3); }
.create-menu-item .material-symbols-outlined { font-size: 20px; color: var(--ink-tertiary, #9A9994); }
.create-menu-item:hover .material-symbols-outlined { color: var(--primary, #005ab3); }

.new-quote-link {
  justify-content: center;
  text-decoration: none;
}

.logout {
  width: 100%;
}

/* ===== TOPBAR ===== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  min-height: 58px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-left: 264px;
  border-bottom: 1px solid var(--glass-border);
  background: var(--glass-bg);
  padding: 0 32px;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

.search-shell {
  position: relative;
  width: min(100%, 380px);
}

.search-shell .material-symbols-outlined {
  position: absolute;
  left: 11px;
  top: 50%;
  color: var(--muted);
  transform: translateY(-50%);
  font-size: 18px;
}

.search-shell input {
  width: 100%;
  height: 35px;
  padding-left: 38px;
  border-radius: 6px;
  background: var(--panel-soft);
  border: 1px solid transparent;
  font-size: 14px;
  color: var(--ink);
}

.search-shell input:focus {
  background: var(--panel);
  border-color: var(--line-strong);
  box-shadow: none;
}

/* ── Global top-bar search results dropdown (deals + contacts) ────────────────
   Dark to match the midnight app; wider than the (sometimes 160px) input so
   results stay readable on mobile. */
.global-search-results {
  position: fixed;            /* body-level; JS sets top/left/width from the input rect */
  top: 64px;
  left: 16px;
  width: min(440px, calc(100vw - 24px));
  z-index: 150;              /* above page content, FABs (72) & menus; below modals (200) */
  background: #1b2024;       /* fully opaque — never let the page show through */
  background: var(--mid-surface-2, #1b2024);
  border: 1px solid var(--mid-line, #3e484f);
  border-radius: 12px;
  box-shadow: 0 18px 48px -10px rgba(0,0,0,0.7);
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 6px;
}
.global-search-results[hidden] { display: none; }
.gs-group-label { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--mid-muted, #87929a); padding: 8px 10px 4px; }
.gs-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 9px 10px; border-radius: 8px; color: var(--mid-text, #dee3e8); }
.gs-opt:hover, .gs-opt.active { background: var(--mid-surface-3, #252b2e); }
.gs-opt-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.gs-opt-title { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--mid-text, #dee3e8); }
.gs-opt-sub { font-size: 12px; color: var(--mid-muted, #87929a); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gs-opt-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mid-muted, #87929a); flex: none; }
.gs-empty, .gs-hint { padding: 16px 12px; text-align: center; color: var(--mid-muted, #87929a); font-size: 13px; }

/* ── Mobile: the global top-bar search collapses to just the magnifier icon
   (it appears on every screen). Tapping it expands the field to type. No JS. */
@media (max-width: 768px) {
  /* At rest: a BARE magnifier — no box/enclosure at all (transparent shell + input,
     no border/shadow). `body` prefix + !important beat the dash-active search-shell
     background/width rules. Tapping expands it into a normal search field. */
  body .topbar .search-shell {
    width: 38px !important; max-width: none !important;
    background: transparent !important; border-color: transparent !important; box-shadow: none !important;
    transition: width .22s ease;
  }
  body .topbar .search-shell input {
    padding-left: 34px; cursor: pointer;
    background: transparent !important; border-color: transparent !important;
  }
  body .topbar .search-shell input::placeholder { color: transparent; }
  body .topbar .search-shell .material-symbols-outlined { left: 50%; transform: translate(-50%, -50%); transition: left .2s ease; pointer-events: none; }
  /* Tapped (expanded): restore the field enclosure + room to type. */
  body .topbar .search-shell:focus-within {
    width: auto !important; max-width: min(78vw, 340px) !important; flex: 1 1 auto;
    background: #252b2e !important; border: 1px solid #3e484f !important; border-radius: 9999px !important;
  }
  body .topbar .search-shell:focus-within input { cursor: text; background: transparent !important; }
  body .topbar .search-shell:focus-within input::placeholder { color: var(--mid-muted, #87929a); }
  body .topbar .search-shell:focus-within .material-symbols-outlined { left: 11px; transform: translate(0, -50%); }
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--muted);
}

.topbar-actions .material-symbols-outlined {
  cursor: pointer;
  transition: color 140ms ease;
}

.topbar-actions .material-symbols-outlined:hover {
  color: var(--ink);
}

.profile-dot {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: none;
  border-radius: 9999px;
  background: var(--primary, #005ab3);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: transform 120ms ease, box-shadow 160ms ease;
}
.profile-dot:hover { box-shadow: 0 0 0 4px rgba(0, 90, 179, 0.12); }
.profile-dot:active { transform: scale(0.94); }

/* Top-right profile dropdown (Sign out) */
.profile-menu { position: relative; }
.profile-menu-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: var(--mid-surface-2, #fff);
  border: 1px solid var(--glass-border, rgba(28, 27, 26, 0.08));
  border-radius: 14px;
  box-shadow: 0 16px 40px -12px rgba(28, 27, 26, 0.22);
  z-index: 70;
}
.profile-menu-pop[hidden] { display: none; }
.profile-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  border-radius: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink, #1c1b1a);
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, color 140ms ease;
}
.profile-menu-item:hover { background: var(--surface-container-low, #f7f3f0); color: var(--danger, #FF453A); }
.profile-menu-item .material-symbols-outlined { font-size: 19px; color: var(--ink-tertiary, #9A9994); }
.profile-menu-item:hover .material-symbols-outlined { color: var(--danger, #FF453A); }

/* ===== SHELL ===== */
.shell {
  margin-left: 264px;
  padding: 36px 40px 72px;
}

/* ===== PAGE HEADING ===== */
.page-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  max-width: 600px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

/* ===== STATUS PANEL ===== */
.status-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 20px;
}

.status-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.status-row strong {
  display: block;
  margin-bottom: 2px;
  font-size: 14px;
}

.status-row p,
.note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.dot {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--pale-yellow-ink);
  box-shadow: 0 0 0 4px rgba(149, 100, 0, 0.12);
}

.dot.ready {
  background: var(--pale-green-ink);
  box-shadow: 0 0 0 4px rgba(52, 101, 56, 0.12);
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metric-grid div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.metric-grid span {
  display: block;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}

.metric-grid small,
label small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 2px;
}

/* ===== GRID LAYOUTS ===== */
.dashboard-grid,
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.44fr);
  gap: 20px;
  align-items: start;
}

.lower {
  margin-top: 20px;
}

.side-stack {
  display: grid;
  gap: 16px;
}

/* ===== PANELS ===== */
.panel,
.status-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
}

.panel {
  padding: 24px;
}

.panel-heading {
  display: flex;
  gap: 16px;
  align-items: start;
  justify-content: space-between;
  margin-bottom: 20px;
}

.panel-heading.compact {
  align-items: center;
  margin-bottom: 16px;
}

/* ===== BUTTONS ===== */
.button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--panel);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, transform 80ms ease;
  -webkit-user-select: none;
  user-select: none;
}

.button:hover {
  background: var(--panel-soft);
  border-color: rgba(0, 0, 0, 0.14);
}

.button:active {
  transform: scale(0.98);
}

.button.primary {
  border-color: transparent;
  background: var(--ink);
  color: #ffffff;
}

.button.primary:hover {
  background: #333333;
}

.button.ghost {
  background: transparent;
  border-color: var(--line);
}

.button.ghost:hover {
  background: var(--panel-soft);
}

.button.small {
  min-height: 34px;
  padding: 0 12px;
  font-size: 12px;
}

.button.danger {
  border-color: rgba(159, 47, 45, 0.22);
  color: var(--danger);
  background: var(--pale-red);
}

.button.danger:hover {
  border-color: rgba(159, 47, 45, 0.4);
  background: #fde0e0;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* ===== FORMS ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

label {
  display: grid;
  gap: 6px;
}

label span,
.field-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
}

.field-title {
  display: block;
  margin-bottom: 10px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
  color: var(--ink);
  background: var(--panel-soft);
  transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

input,
select {
  min-height: 40px;
  padding: 0 12px;
  font-size: 14px;
  line-height: 1.4;
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 0, 0, 0.28);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
  background: var(--panel);
}

.section-rule {
  height: 1px;
  margin: 24px 0;
  background: var(--line);
}

.toggle-row {
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: center;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  cursor: pointer;
}

.toggle-row input {
  width: 16px;
  height: 16px;
}

.codebox {
  min-height: 72px;
  margin: 0 0 12px;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel-soft);
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ===== CHECKLIST ===== */
.checklist {
  display: grid;
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}

.checklist li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* ===== PILLS / BADGES ===== */
.pill {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--pale-yellow);
  color: var(--pale-yellow-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pill.ready {
  background: var(--pale-green);
  color: var(--pale-green-ink);
}

/* ===== TEXTAREA ===== */
textarea {
  min-height: 360px;
  resize: vertical;
  padding: 14px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.6;
}

.quote-textarea {
  min-height: 120px;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
}

.quote-notes {
  margin-top: 16px;
}

/* ===== OPTION GRIDS ===== */
.option-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.compact-options {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.custom-event-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 10px;
}

.choice-chip {
  display: flex;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-soft);
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.choice-chip:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: var(--panel);
}

.choice-chip input {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.choice-chip span {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}

/* ===== EVENT DETAILS ===== */
.event-detail-list {
  margin-top: 16px;
}

.event-detail-form {
  display: grid;
  gap: 6px;
}

.event-detail-head,
.event-detail-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 72px 72px minmax(120px, 0.8fr) minmax(120px, 0.8fr);
  gap: 8px;
  align-items: center;
}

.event-detail-head {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0 4px;
}

.event-detail-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel-soft);
}

.event-detail-row strong {
  font-size: 13px;
}

.field-row-title {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  margin-bottom: 12px;
}

/* ===== PACKAGES ===== */
.package-list,
.package-form {
  display: grid;
  gap: 12px;
}

.package-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--panel-soft);
}

.package-card-head {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(100px, 0.22fr) minmax(130px, 0.3fr) minmax(100px, 0.22fr) auto;
  gap: 10px;
  align-items: end;
}

.package-event-head,
.package-event-row {
  display: grid;
  grid-template-columns: minmax(130px, 0.9fr) minmax(80px, 0.45fr) minmax(80px, 0.45fr) minmax(90px, 0.5fr) minmax(90px, 0.5fr) minmax(200px, 1.1fr);
  gap: 8px;
  align-items: center;
}

.package-event-head {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.package-event-row {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  background: var(--panel);
}

.package-event-row strong {
  font-size: 13px;
}

.package-addons {
  display: grid;
  gap: 8px;
}

.inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mini-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 8px;
  background: var(--panel-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.mini-check input {
  width: 14px;
  height: 14px;
}

/* ===== QUEUE & ACTIVITY LISTS ===== */
.queue-list,
.activity-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--panel);
}

.empty {
  padding: 14px 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
  margin: 0;
}

.queue-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  background: var(--panel-soft);
  transition: box-shadow 200ms ease;
}

.queue-item:hover {
  box-shadow: var(--shadow-hover);
}

.queue-item strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--mono);
  font-size: 13px;
}

.queue-item p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

/* ===== COMPACT CLICKABLE ACTIVITY CARDS ===== */
.activity-item {
  display: block;
  background: var(--panel);
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}

.activity-item:last-child {
  border-bottom: none;
}

.card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto 20px;
  gap: 8px 12px;
  align-items: center;
  padding: 10px 14px;
  transition: background 150ms ease;
}

.activity-item:hover .card-row,
.activity-item:focus-visible .card-row {
  background: var(--panel-soft);
}

.activity-item:focus-visible {
  outline: 2px solid #1F6C9F;
  outline-offset: -2px;
}

.card-name strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 240px;
}

.card-meta {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}

.activity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.card-next-action {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  font-style: italic;
}

.card-chevron {
  font-size: 18px;
  color: var(--muted);
  transition: transform 250ms ease;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.activity-item[aria-expanded="true"] .card-chevron {
  transform: rotate(180deg);
}

/* ===== EXPAND BODY ===== */
.activity-expand-body {
  border-top: 1px solid var(--line);
  padding: 14px 16px 12px;
  background: var(--panel-soft);
}

.expand-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 12px 24px;
  margin-bottom: 10px;
}

.expand-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 6px;
}

.expand-details p,
.expand-summary p {
  font-size: 13px;
  margin: 0 0 3px;
  color: var(--ink-2);
  line-height: 1.5;
}

.expand-label {
  color: var(--muted);
  font-size: 12px;
  margin-right: 4px;
}

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

/* Delete buttons in expand body — subtle */
.activity-expand-body .button.danger {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  min-height: 22px;
  padding: 0 6px;
}

.activity-expand-body .button.danger:hover {
  border-color: rgba(159, 47, 45, 0.25);
  color: var(--pale-red-ink);
  background: var(--pale-red);
}

/* ===== SECTION PANELS ===== */
.manual-quote-panel,
.setup-panel {
  margin-top: 20px;
}

/* ===== QUOTE RESULT ===== */
.quote-result {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--panel-soft);
}

.quote-result strong {
  display: block;
  margin-bottom: 5px;
}

.quote-result p {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.pricing-breakdown {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 10px;
}

.pricing-breakdown th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 4px 8px 4px 0;
  border-bottom: 1px solid var(--line);
}

.pricing-breakdown td {
  padding: 5px 8px 5px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.pricing-breakdown tfoot td {
  border-top: 1px solid var(--line-strong);
  border-bottom: none;
  padding-top: 8px;
  font-weight: 700;
  color: var(--ink);
}

.crm-status {
  margin: 8px 0 0;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
}

.crm-ok {
  background: var(--pale-green);
  color: var(--pale-green-ink);
}

.crm-error {
  background: var(--pale-red);
  color: var(--pale-red-ink);
}

.package-result-list {
  display: grid;
  gap: 4px;
  margin-top: 8px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.quote-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

/* ===== WORKFLOW CARD ===== */
.workflow-card .switch-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}

.switch-list div {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--panel-soft);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
}

.switch-list strong {
  color: var(--pale-green-ink);
  font-size: 12px;
  font-weight: 700;
}

/* ===== HYGIENE CARD ===== */
.hygiene-card {
  background: var(--ink);
  color: #fff;
  border-color: transparent;
}

.hygiene-card h2 {
  color: #fff;
}

.hygiene-card > div {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.hygiene-card p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  line-height: 1.5;
}

/* ===== BANNER ===== */
.banner {
  margin-bottom: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  padding: 10px 14px;
  background: var(--panel-soft);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
}

.banner.error {
  border-color: rgba(159, 47, 45, 0.24);
  background: var(--pale-red);
  color: var(--pale-red-ink);
}

/* ===== LOGIN PAGE ===== */
/* ── Login — sage card on the app canvas (matches dashboard look, both themes) ── */
.login-body { background: var(--mid-base); }
.login-shell {
  display: grid; min-height: 100dvh; place-items: center; padding: 24px;
  background: var(--mid-base);
  font-family: "Schibsted Grotesk", "Inter", sans-serif;
}
.login-panel {
  display: grid; width: min(100%, 408px); gap: 14px;
  background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  border-radius: 22px; padding: 32px 30px;
  box-shadow: var(--mid-shadow, 0 18px 50px -20px rgba(0,0,0,0.35));
}
.login-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.login-mark {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 13px;
  display: grid; place-items: center; font-size: 24px;
  background: var(--lime, #d9ec4f); color: var(--on-lime, #2a3325);
}
.login-brand strong { display: block; font-size: 15px; font-weight: 600; color: var(--mid-text); line-height: 1.2; }
.login-brand > div span { font-size: 12px; color: var(--mid-muted); }
.login-title { margin: 4px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text); }
.login-lede { margin: 0 0 6px; font-size: 13.5px; color: var(--mid-text-2); }
.login-field { display: grid; gap: 7px; }
.login-field > span { font-size: 12.5px; font-weight: 500; color: var(--mid-text-2); }
.login-field input {
  width: 100%; box-sizing: border-box; font-size: 16px; font-family: inherit;
  padding: 13px 15px; border-radius: 12px;
  /* Bone fill (visible on the white card) + NO border line. */
  background: var(--mid-base); border: 1px solid transparent; color: var(--mid-text);
}
.login-field input::placeholder { color: var(--mid-muted); }
.login-field input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)); }
/* Chrome autofill paints a pale blue/yellow fill + dark text that ignores our
   colours. Mask it: an inset shadow of our bone fill + force the text colour. */
.login-field input:-webkit-autofill,
.login-field input:-webkit-autofill:hover,
.login-field input:-webkit-autofill:active {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  caret-color: var(--mid-text); border: 1px solid transparent !important;
  transition: background-color 9999s ease-out 0s;
}
.login-field input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base), 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
.login-banner {
  font-size: 13px; padding: 10px 14px; border-radius: 12px;
  background: rgba(159,47,45,0.12); border: 1px solid rgba(159,47,45,0.3); color: #c75b59;
}
.login-banner[hidden] { display: none; }
.login-submit {
  margin-top: 6px; width: 100%; padding: 13px 18px; border: none; cursor: pointer;
  border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 600;
  background: var(--lime, #d9ec4f); color: var(--on-lime, #2a3325);
  transition: filter var(--dur-1, 0.15s) ease, transform var(--dur-1, 0.15s) ease;
}
.login-submit:hover { filter: brightness(0.97); }
.login-submit:active { transform: scale(0.99); }

/* ===== BIGIN CONTACT LOOKUP ===== */
.crm-lookup-block {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-soft);
}

.crm-lookup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 600;
}

.crm-lookup-header span:first-child {
  font-size: 18px;
  color: var(--muted);
}

.crm-lookup-header > span:nth-child(2) {
  flex: 1;
}

.crm-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.contact-results {
  display: grid;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.contact-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.contact-result-item:hover {
  border-color: rgba(0, 0, 0, 0.2);
  background: var(--panel-soft);
}

.contact-result-item strong {
  display: block;
  font-size: 14px;
  line-height: 1.3;
}

.contact-result-item small {
  color: var(--muted);
  font-size: 12px;
}

.selected-contact-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 6px;
  background: var(--panel);
  font-size: 13px;
}

.selected-contact-chip strong {
  flex: 1;
  font-size: 14px;
}

.selected-contact-chip small {
  color: var(--muted);
  font-size: 12px;
}

/* ===== SCROLL ANIMATIONS ===== */
.fade-in {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== RESPONSIVE — TABLET ===== */
@media (max-width: 1100px) {
  .dashboard-grid,
  .workspace,
  .page-heading {
    grid-template-columns: 1fr;
  }

  .option-grid,
  .compact-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 960px) {
  .shell {
    padding: 28px 28px 72px;
  }
}

/* ===== RESPONSIVE — MOBILE ===== */
@media (max-width: 768px) {
  /* Sidebar becomes a floating glass pill at the bottom */
  .app-sidebar {
    position: fixed;
    inset: auto 16px calc(16px + env(safe-area-inset-bottom)) 16px;
    width: auto;
    height: 64px;
    flex-direction: row;
    align-items: stretch;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 32px;
    padding: 0 6px;
    z-index: 100;
    background: rgba(255, 255, 255, 0.62);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
                0 12px 32px -8px rgba(28, 27, 26, 0.18);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
  }

  .brand-block,
  .sidebar-bottom {
    display: none;
  }

  /* Mobile pill shows 4 daily tabs + a "More" menu. Tickets/Contacts live in
     More; Setup stays desktop-only. */
  .nav-item[data-page="setup"],
  .nav-item[data-page="tickets"],
  .nav-item[data-page="tasks"],
  .nav-item[data-page="contacts"] { display: none; }
  .nav-more-btn { display: flex !important; }
  .nav-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    padding: 0;
    gap: 0;
    align-items: center;
  }

  .nav-item {
    flex-direction: column;
    min-height: 0;
    height: 52px;
    align-self: center;
    gap: 3px;
    border-radius: 16px;
    padding: 6px 2px;
    font-size: 10px;
    font-weight: 500;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: var(--ink-secondary, #65645F);
  }

  .nav-item.active {
    background: rgba(0, 90, 179, 0.1);
    color: var(--primary, #005ab3);
    font-weight: 700;
  }
  .nav-item.active::after { display: none; }

  .nav-item .material-symbols-outlined {
    font-size: 24px;
    color: inherit;
  }
  .nav-item.active .material-symbols-outlined { color: var(--primary, #005ab3); }

  .topbar {
    margin-left: 0;
    padding: 0 20px;
    min-height: 52px;
  }

  .shell {
    margin-left: 0;
    padding: 20px 20px calc(104px + env(safe-area-inset-bottom)); /* room for floating bottom nav */
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .option-grid,
  .compact-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .custom-event-row {
    grid-template-columns: 1fr;
  }

  .event-detail-head,
  .event-detail-row,
  .package-card-head,
  .package-event-head,
  .package-event-row {
    grid-template-columns: 1fr;
  }

  .event-detail-head,
  .package-event-head {
    display: none;
  }

  .panel-heading,
  .quote-result {
    display: grid;
  }

  /* Activity card row — collapse to 2-col on mobile */
  .card-row {
    grid-template-columns: minmax(0, 1fr) 20px;
    grid-template-rows: auto auto;
  }

  .card-row .activity-pills {
    grid-column: 1;
    justify-content: flex-start;
  }

  .card-next-action {
    display: none;
  }

  .expand-grid {
    grid-template-columns: 1fr;
  }

  .activity-expand-body .button.danger {
    width: auto;
  }

  .quote-links {
    justify-content: flex-start;
  }

  /* Only widen primary action buttons on mobile, not every button */
  .panel-heading .button.primary,
  .manual-quote-panel > .panel-heading .button.primary,
  .setup-panel .button[type="submit"] {
    width: 100%;
    justify-content: center;
  }

  .button-row {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .search-shell {
    max-width: 160px;
  }

  /* On very small screens hide nav text, show icons only */
  .nav-item {
    font-size: 0; /* hides text */
    gap: 0;
  }

  .nav-item .material-symbols-outlined {
    font-size: 24px;
  }
}

/* ===== PAGE SWITCHING ===== */
.page[hidden] { display: none !important; }

/* ===== KANBAN BOARD ===== */
.kanban-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.kanban-board {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 24px;
  align-items: flex-start;
  /* Prevent columns from shrinking */
  min-height: 0;
}

.kanban-col {
  flex: 0 0 280px;
  min-width: 0;
}

.kanban-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.col-marker {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.col-marker.new       { background: var(--pale-blue-ink); }
.col-marker.qualified { background: var(--pale-yellow-ink); }
.col-marker.proposal  { background: var(--pale-green-ink); }
.col-marker.hot       { background: #c05000; }
.col-marker.closed    { background: var(--muted); }

.col-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.col-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-left: auto;
}

.kanban-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kcard-empty {
  font-size: 12px;
  color: var(--muted);
  padding: 16px 0;
  text-align: center;
}

/* ── Kanban card ── */
.kanban-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px 16px;
  cursor: pointer;
  transition: box-shadow 200ms, border-color 200ms;
  user-select: none;
}

.kanban-card:hover {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: var(--shadow-hover);
}

.kanban-card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.kanban-card.is-won  { border-left: 3px solid var(--pale-green-ink); }
.kanban-card.is-lost { border-left: 3px solid var(--pale-red-ink); }

.kcard-body { pointer-events: none; }

.kcard-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.kcard-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}

.kcard-time {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.kcard-meta {
  font-size: 12px;
  color: var(--muted);
  margin: 0 0 8px;
  line-height: 1.4;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.kcard-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  pointer-events: none;
}

/* ── Card expand ── */
.kcard-expand {
  border-top: 1px solid var(--line);
  margin-top: 12px;
  padding-top: 12px;
}

.kcard-details {
  margin-bottom: 8px;
}

.kcard-details p {
  font-size: 12px;
  margin: 0 0 4px;
  color: var(--ink-2);
}

.kcard-summary {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0;
  font-style: italic;
  line-height: 1.5;
}

.kcard-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  pointer-events: all;
}

/* Won / Lost pills */
.pill.won  { background: var(--pale-green); color: var(--pale-green-ink); }
.pill.lost { background: var(--pale-red);  color: var(--pale-red-ink); }

/* ===== SETUP PAGE LAYOUT ===== */
.setup-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: flex-start;
}

.setup-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.setup-section {
  padding: 24px 28px;
}

.setup-section .eyebrow {
  margin-bottom: 2px;
}

.setup-section h2 {
  margin-bottom: 20px;
}

.setup-section .form-grid {
  margin-top: 0;
}

.setup-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 24px;
}

/* system prompt in setup */
#systemPrompt {
  width: 100%;
  min-height: 320px;
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.7;
  resize: vertical;
}

@media (max-width: 1100px) {
  .setup-layout {
    grid-template-columns: 1fr;
  }
  .setup-sidebar {
    position: static;
  }
}

@media (max-width: 900px) {
  .kanban-col {
    flex: 0 0 240px;
  }
}

/* ===== FLOATING GENERATE BUTTON ===== */
.fab-generate {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: background 150ms, transform 120ms, box-shadow 150ms;
}

.fab-generate:hover {
  background: #333;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

.fab-generate:active {
  transform: scale(0.97);
}

.fab-generate:disabled {
  background: var(--muted);
  cursor: not-allowed;
  box-shadow: none;
}

.fab-generate .material-symbols-outlined {
  font-size: 18px;
}

/* ===== DISCOUNT FIELD ===== */
.discount-field {
  margin-top: 16px;
}

.discount-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.discount-row select {
  width: auto;
  min-width: 90px;
}

/* ===== PRICING BREAKDOWN — DISCOUNT ROWS ===== */
.pricing-breakdown .subtotal-row td {
  border-top: 1px solid var(--line);
  border-bottom: none;
  padding-top: 8px;
  font-weight: 400;
  color: var(--ink-muted);
  font-size: 13px;
}

.pricing-breakdown .discount-row td {
  border-top: none;
  border-bottom: none;
  padding-top: 2px;
  font-weight: 400;
  color: var(--pale-green-ink, #346538);
  font-size: 13px;
}

/* ===== TEAM MANAGEMENT PANEL ===== */
.team-invite-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 140px auto;
  gap: 8px;
  margin: 12px 0 4px;
}
.team-invite-row input,
.team-invite-row select {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}
.team-role-legend {
  margin: 4px 0 16px;
  font-size: 12px;
}
.table-wrap {
  overflow-x: auto;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.team-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.team-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-muted, #fafafa);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.team-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.team-table tr:last-child td {
  border-bottom: none;
}
.team-table .actions-cell {
  text-align: right;
  white-space: nowrap;
}
.team-role-select {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 12px;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}
.team-role-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.status-ok {
  background: #edf3ec;
  color: #346538;
}
.status-muted {
  background: #f0f0ed;
  color: #787774;
}
.banner-credentials {
  background: #fbf3db;
  border: 1px solid #f0e0a8;
  color: #6b4f00;
  padding: 12px 14px;
}
.banner-credentials .temp-password {
  display: inline-block;
  padding: 4px 10px;
  margin: 8px 8px 4px 0;
  background: rgba(255,255,255,0.7);
  border: 1px solid #d4be72;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.banner-success {
  background: #edf3ec;
  border: 1px solid #c6e0c1;
  color: #346538;
}
.banner-error {
  background: #fdebec;
  border: 1px solid #f3c0c2;
  color: #9f2f2d;
}
/* Sizing lives in the single .button.small rule above; this later duplicate only
   keeps the table-row spacing it was (mis)used for. */
.button.small {
  margin-left: 6px;
}

/* ===== CRM: KANBAN BOARD ===== */
.page-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.search-shell.inline {
  padding: 4px 12px;
  min-width: 280px;
}
.search-shell.inline input {
  border: none;
  background: transparent;
  font: inherit;
  width: 100%;
  outline: none;
}
.filter-select {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  background: var(--bg, #fff);
  color: var(--ink, #111);
}

.kanban-board {
  display: grid;
  grid-template-columns: repeat(9, minmax(260px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding: 6px 2px 30px;
}
.kanban-loading {
  grid-column: 1 / -1;
  padding: 40px;
  text-align: center;
}
.kanban-col {
  background: var(--surface-muted, #fafafa);
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 200px;
  display: flex;
  flex-direction: column;
}
.kanban-col-header {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.kanban-col-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink, #111);
}
.kanban-col-meta {
  font-size: 11px;
  color: var(--ink-muted);
}
.kanban-col-body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-card {
  background: var(--mid-surface-2, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.kanban-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-1px);
}
.kanban-card-title {
  font-weight: 600;
  font-size: 14px;
  /* Clamp long deal names to 2 lines so they can't shove the badge strip into an ugly wrap. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  color: var(--ink, #111);
  margin-bottom: 4px;
}
.kanban-card-amount {
  font-size: 13px;
  color: var(--ink, #111);
  margin-bottom: 8px;
}
.kanban-card-events {
  font-size: 12px;
  margin-bottom: 10px;
  line-height: 1.4;
}
.kanban-card-footer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.source-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 9999px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background: #E1F3FE;
  color: #1F6C9F;
}
.quote-icon {
  font-size: 14px !important;
  color: #346538;
  margin-left: auto;
}
.kanban-empty {
  padding: 12px;
  text-align: center;
  font-style: italic;
}

/* Stage pills (shared) */
.stage-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  background: #f0f0ed;
  color: #555;
}
.stage-pill.stage-pending-qualification { background: #FBF3DB; color: #956400; }
.stage-pill.stage-qualified { background: #E1F3FE; color: #1F6C9F; }
.stage-pill.stage-hot-lead { background: #FDEBEC; color: #9F2F2D; }
.stage-pill.stage-cold-lead { background: #f0f0ed; color: #555; }
.stage-pill.stage-verbal-confirmation-awaiting-payment { background: #EDF3EC; color: #346538; }
.stage-pill.stage-closed-won { background: #346538; color: #fff; }
.stage-pill.stage-shoot-completed { background: #1F6C9F; color: #fff; }
.stage-pill.stage-closed-lost { background: #9F2F2D; color: #fff; }
.stage-pill.stage-disqualified-lead { background: #555; color: #fff; }

/* ===== CRM: CONTACTS TABLE ===== */
.contacts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.contacts-table th {
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
  color: var(--ink-muted);
  background: var(--surface-muted, #fafafa);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.contacts-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.contacts-table tr:last-child td { border-bottom: none; }
.contacts-table tr.row-clickable:hover { background: #fafafa; cursor: pointer; }
.contacts-table code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--ink-muted);
}

/* ===== CRM: DETAIL PANEL (slides in from right) ===== */
.detail-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
}
.detail-panel:not([hidden]) { pointer-events: auto; }
.detail-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.detail-panel:not([hidden]) .detail-overlay { opacity: 1; }
.detail-content {
  position: relative;
  width: min(600px, 100vw);
  height: 100vh;
  background: var(--mid-surface-2, #fff);
  border-left: 1px solid var(--line);
  box-shadow: -2px 0 12px rgba(0,0,0,0.04);
  overflow-y: auto;
  transform: translateX(20px);
  opacity: 0;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.detail-panel:not([hidden]) .detail-content {
  transform: translateX(0);
  opacity: 1;
}
.detail-head {
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.detail-close {
  position: absolute !important;
  top: 14px;
  right: 14px;
}
.detail-head h2 {
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
}
.detail-amount {
  margin: 4px 0 6px;
  font-size: 18px;
  color: var(--ink, #111);
}
.detail-stage { margin: 6px 0 0; }
.detail-body {
  padding: 16px 24px 40px;
}
.detail-body section { margin-bottom: 24px; }
.detail-body h3 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  margin: 0 0 10px;
}
.detail-dl {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 6px 12px;
  margin: 0;
  font-size: 13px;
}
.detail-dl dt { color: var(--ink-muted); }
.detail-dl dd { margin: 0; color: var(--ink, #111); }
.event-list, .stage-history, .contact-deals {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.event-list li, .stage-history li {
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.event-list li:last-child, .stage-history li:last-child { border-bottom: none; }
.contact-deals li {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.contact-deals li:last-child { border-bottom: none; }
.note-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.note-item:last-child { border-bottom: none; }
.note-body {
  white-space: pre-wrap;
  font-size: 13px;
  margin-top: 4px;
  color: var(--ink, #111);
}

/* Responsive */
@media (max-width: 1100px) {
  .kanban-board {
    grid-template-columns: repeat(9, 280px);
  }
}

/* ===== CRM: EDITABLE DETAIL PANEL ===== */
.detail-head h2[contenteditable="true"] {
  outline: none;
  border-bottom: 2px dashed transparent;
  transition: border-color 0.15s ease;
}
.detail-head h2[contenteditable="true"]:hover,
.detail-head h2[contenteditable="true"]:focus {
  border-bottom-color: var(--line);
}
.stage-select {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 12px;
  background: var(--mid-surface-2, #fff);
  cursor: pointer;
}
.detail-amount-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  font-size: 14px;
}
.detail-amount-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-muted);
}
.detail-amount-row input {
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  width: 120px;
}
.detail-save-hint {
  font-size: 11px;
  transition: color 0.15s ease;
}
.save-hint-success { color: #346538; }
.save-hint-error { color: #9F2F2D; }

.detail-dl input,
.detail-dl select,
.edit-textarea {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font: inherit;
  font-size: 13px;
  background: var(--mid-surface-2, #fff);
}
.detail-dl input:focus,
.detail-dl select:focus,
.edit-textarea:focus {
  outline: 1px solid #1F6C9F;
  border-color: #1F6C9F;
}
.edit-textarea {
  font-family: inherit;
  resize: vertical;
  min-height: 50px;
}

.note-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.note-form textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  resize: vertical;
}
.note-form button {
  align-self: flex-end;
}

.danger-zone {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.button.danger {
  color: #9F2F2D !important;
}
.button.danger:hover {
  background: #fdebec;
}

/* ===== MODALS ===== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal[hidden] { display: none; }
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.modal-content {
  position: relative;
  background: var(--mid-surface-2, #fff);
  border-radius: 12px;
  border: 1px solid var(--line);
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  width: min(600px, 100%);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.modal-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.modal-body label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.modal-body label > span {
  font-weight: 500;
  color: var(--ink-muted);
}
.modal-body input,
.modal-body select,
.modal-body textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font: inherit;
  font-size: 14px;
  background: var(--mid-surface-2, #fff);
}
.modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}

/* ===== CRM: LINKED CONTACT CARD (in deal panel) ===== */
.linked-contact-card {
  background: #F7F6F3;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.linked-contact-empty {
  background: #fafafa;
}
.linked-contact-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.linked-contact-head h3 {
  margin: 0 !important;
}
.linked-contact-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.linked-contact-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink, #111);
}
.linked-contact-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-muted);
}
.linked-contact-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.inline-icon {
  /* no !important — it was killing the larger .dlp/.dlp-new-quote sizes downstream */
  font-size: 14px;
  vertical-align: middle;
}
.linked-contact-meta code {
  font-family: var(--mono);
  font-size: 12px;
}
.deal-link {
  cursor: pointer;
  transition: background 0.1s ease;
  padding-left: 6px;
  border-radius: 4px;
}
.deal-link:hover {
  background: #fafafa;
}

.modal-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 6px;
  border-top: 1px dashed var(--line);
  margin-top: 6px;
}

/* ===== CRM: "New deal for contact" pre-link banner + section-with-action ===== */
.modal-prefilled-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #E1F3FE;
  border: 1px solid #b9dcf2;
  border-radius: 6px;
  color: #1F6C9F;
  font-size: 13px;
  margin-bottom: 4px;
}
.section-with-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.section-with-action h3 {
  margin: 0 !important;
}

/* ===== CRM: OPERATIONAL PILLS ON CARDS ===== */
.kanban-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}
.op-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.op-pill-live { background: #EDF3EC; color: #346538; }
.op-pill-quote { background: #FBF3DB; color: #956400; }
.op-pill-crm { background: #E1F3FE; color: #1F6C9F; }
.live-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #346538;
  border-radius: 50%;
  animation: pulse-dot 1.6s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ===== CRM: WHATSAPP TRANSCRIPT IN DEAL PANEL ===== */
.transcript-wrap {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 400px;
  overflow-y: auto;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}
.transcript-msg {
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  max-width: 85%;
}
.transcript-lead {
  align-self: flex-start;
  background: var(--mid-surface-2, #fff);
  border: 1px solid var(--line);
}
.transcript-agent {
  align-self: flex-end;
  background: #E1F3FE;
  border: 1px solid #b9dcf2;
}
.transcript-meta {
  font-size: 11px;
  margin-bottom: 4px;
  color: var(--ink-muted);
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.transcript-meta strong { color: var(--ink, #111); }
.transcript-body {
  white-space: pre-wrap;
  line-height: 1.4;
  color: var(--ink, #111);
}

/* ===== CRM: DANGER ZONE — multiple delete options ===== */
.danger-zone-hint {
  margin: 0 0 8px;
}
.danger-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.danger-actions .button {
  text-align: left;
  justify-content: flex-start;
}

/* ===== LIVE PRICING PREVIEW (manual quote builder) ===== */

/* On wide screens, push the Quote Generator page content away from the right edge
   so the sticky preview panel doesn't overlap form inputs. */
@media (min-width: 1101px) {
  #page-quotes {
    padding-right: 360px;  /* preview 320 + gap 24 + buffer */
  }
}

.pricing-preview {
  position: fixed;
  right: 24px;
  top: 96px;
  /* End above the Generate quote FAB instead of running into it.
     FAB sits at bottom 32 + ~44 tall + 16 gap = ends at ~92px from viewport bottom. */
  bottom: 92px;
  width: 320px;
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.08);
  z-index: 50;
  font-size: 13px;
  /* Only render the panel when its container (Quote Generator page) is the active page.
     Otherwise the fixed-position element would leak into other tabs. */
  display: none;
}
#page-quotes:not([hidden]) .pricing-preview {
  display: block;
}
/* Hidden after a successful quote generation — reappears on next form edit. */
.pricing-preview.post-generation-hidden {
  display: none !important;
}
.pricing-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--ink, #111);
}
.pricing-preview-head .material-symbols-outlined {
  font-size: 18px !important;
  color: var(--ink-muted);
}
.pricing-preview-state {
  margin-left: auto;
  font-weight: 400;
  font-size: 11px;
}
.pricing-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.pricing-preview-table th {
  text-align: left;
  padding: 4px 6px;
  color: var(--ink-muted);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--line);
}
.pricing-preview-table td {
  padding: 5px 6px;
  vertical-align: top;
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}
.pricing-preview-table td.num,
.pricing-preview-table th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pricing-preview-table tfoot td {
  padding-top: 8px;
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.pricing-preview-table tfoot tr.subtotal-row td {
  border-top: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 11px;
}
.pricing-preview-table tfoot tr.discount-row td {
  border-top: none;
  padding-top: 2px;
  color: #346538;
  font-size: 11px;
}
.pricing-preview-table tfoot tr.total-row td {
  border-top: 1px solid var(--line);
  padding-top: 6px;
  font-size: 14px;
}
.package-totals {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
}
.package-totals > div {
  display: flex;
  justify-content: space-between;
  color: var(--ink-muted);
}

/* On narrow viewports, drop the sticky-right position and inline it after the form */
@media (max-width: 1100px) {
  .pricing-preview {
    position: static;
    width: 100%;
    margin: 16px 0;
    max-height: none;
    bottom: auto;
  }
}

/* ════════════════════════════════════════════════════════════

/* ════════════════════════════════════════════════════════════
   QUOTE GENERATOR — MINIMALIST EDITORIAL (scoped to #page-quotes)
   Warm bone canvas, flat cards, 1px borders, no glassmorphism.
   ════════════════════════════════════════════════════════════ */

#page-quotes {
  /* Reconciled to the unified liquid-glass system (was a bespoke
     minimalist-editorial palette: bone canvas, flat white cards, black accent). */
  --qg-canvas: rgba(255, 255, 255, 0.5);
  --qg-surface: var(--glass-card, rgba(255, 255, 255, 0.85));
  --qg-line: var(--glass-border, rgba(28, 27, 26, 0.08));
  --qg-ink: var(--ink, #1c1b1a);
  --qg-muted: var(--muted, #65645F);
  --qg-muted-soft: var(--ink-tertiary, #9A9994);
  --qg-accent: var(--accent-deep, #0064E3);
  --qg-accent-on: #FFFFFF;
  --qg-rail-w: 360px;
  --qg-radius: 10px;
  --qg-radius-lg: 20px;
  --qg-gap: 32px;
  --qg-card-pad: 28px;
  --qg-ok-bg: rgba(48, 209, 88, 0.14);
  --qg-ok-fg: #1f7a37;
  --qg-warn-bg: rgba(255, 159, 10, 0.14);
  --qg-warn-fg: #956400;
  --qg-err-bg: rgba(255, 69, 58, 0.12);
  --qg-err-fg: #b3261e;
  --qg-info-bg: rgba(0, 90, 179, 0.10);
  --qg-info-fg: #005ab3;

  background: transparent;
  color: var(--qg-ink);
  padding: 32px 0 200px;
  position: relative;
}

/* Two-column shell — sticky right rail on desktop, stacked + bottom-drawer on mobile */
#page-quotes .qg-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--qg-gap);
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}
@media (min-width: 1101px) {
  #page-quotes .qg-shell {
    grid-template-columns: minmax(0, 1fr) var(--qg-rail-w);
    gap: 40px;
  }
}

/* ── Heading ──────────────────────────────────────────────── */
#page-quotes .qg-heading {
  display: block;
  margin: 0 0 16px;
  padding: 0;
  background: none;
  border: none;
}
#page-quotes .qg-heading .eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--qg-muted);
  margin: 0 0 12px;
}
#page-quotes .qg-heading h1 {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.024em;
  color: var(--qg-ink);
  margin: 0 0 10px;
}
#page-quotes .qg-heading p {
  color: var(--qg-muted);
  font-size: 15px;
  line-height: 1.55;
  margin: 0;
  max-width: 56ch;
}

/* ── Section / card primitive ─────────────────────────────── */
#page-quotes .qg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--qg-gap);
  min-width: 0;
}
#page-quotes .qg-card {
  background: var(--qg-surface);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.5));
  border-radius: var(--qg-radius-lg);
  padding: var(--qg-card-pad);
  -webkit-backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28, 27, 26, 0.10)),
              var(--glass-inset, inset 0 1px 0 rgba(255, 255, 255, 0.6));
  contain: layout paint style;
}
#page-quotes .qg-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--qg-line);
}
#page-quotes .qg-card-head h3 {
  flex: 1;
  margin: 0;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qg-muted);
}
#page-quotes .qg-card-head .material-symbols-outlined {
  font-size: 18px;
  color: var(--qg-muted);
  background: none;
  padding: 0;
}
#page-quotes .qg-card-head p.muted {
  margin: 0;
  font-size: 12px;
  color: var(--qg-muted);
}

/* ── Form fields ──────────────────────────────────────────── */
#page-quotes .qg-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--sans);
}
#page-quotes .qg-card label > span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--qg-muted);
}
#page-quotes .qg-card input[type="text"],
#page-quotes .qg-card input[type="number"],
#page-quotes .qg-card input[type="tel"],
#page-quotes .qg-card input[type="date"],
#page-quotes .qg-card input:not([type]),
#page-quotes .qg-card select,
#page-quotes .qg-card textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  background: var(--qg-surface);
  font-family: var(--sans);
  font-size: 14px;
  color: var(--qg-ink);
  line-height: 1.5;
  transition: border-color 120ms ease;
}
#page-quotes .qg-card input:focus,
#page-quotes .qg-card select:focus,
#page-quotes .qg-card textarea:focus {
  outline: none;
  border-color: var(--primary, #005ab3);
  box-shadow: 0 0 0 3px rgba(0, 90, 179, 0.12);
}
#page-quotes .qg-card input::placeholder,
#page-quotes .qg-card textarea::placeholder {
  color: var(--qg-muted-soft);
}

/* Form grid */
#page-quotes .qg-card .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

/* ── Buttons ──────────────────────────────────────────────── */
#page-quotes .qg-card .button,
#page-quotes .qg-rail .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  padding: 9px 14px;
  border-radius: var(--qg-radius);
  border: 1px solid var(--qg-line);
  background: var(--qg-surface);
  color: var(--qg-ink);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 100ms ease;
}
#page-quotes .qg-card .button:hover,
#page-quotes .qg-rail .button:hover {
  background: rgba(0, 90, 179, 0.06);
  border-color: rgba(0, 90, 179, 0.25);
  color: var(--primary, #005ab3);
}
#page-quotes .qg-card .button:active,
#page-quotes .qg-rail .button:active {
  transform: scale(0.98);
}
#page-quotes .qg-card .button.small {
  font-size: 12px;
  padding: 7px 12px;
}
#page-quotes .qg-card .button.danger {
  color: var(--qg-err-fg);
  border-color: var(--qg-err-bg);
}
#page-quotes .qg-card .button.danger:hover {
  background: var(--qg-err-bg);
}
#page-quotes .qg-card .button .material-symbols-outlined {
  font-size: 16px;
}

/* ── Contact lookup ───────────────────────────────────────── */
#page-quotes .crm-search-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
#page-quotes .crm-search-row input {
  flex: 1;
}
#page-quotes #biginContactResults {
  margin-top: 12px;
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  overflow: hidden;
}
#page-quotes .contact-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--qg-line);
  cursor: pointer;
  transition: background 120ms ease;
}
#page-quotes .contact-result-item:last-child { border-bottom: none; }
#page-quotes .contact-result-item:hover { background: var(--qg-canvas); }
#page-quotes .contact-result-item strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--qg-ink);
}
#page-quotes .contact-result-item small {
  display: block;
  font-size: 12px;
  color: var(--qg-muted);
  margin-top: 2px;
}
#page-quotes #biginSelectedContact {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 10px;
  border: 1px solid var(--qg-line);
  border-radius: 9999px;
  background: var(--qg-canvas);
  font-size: 13px;
}
#page-quotes #biginSelectedContact strong { font-weight: 500; }
#page-quotes #biginSelectedContact small { color: var(--qg-muted); margin-left: 4px; }

/* ── Package card ─────────────────────────────────────────── */
#page-quotes #manualPackageList {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#page-quotes .package-card {
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  padding: 22px;
  background: var(--qg-canvas);
}
#page-quotes .package-card-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--qg-line);
}
@media (min-width: 720px) {
  #page-quotes .package-card-head {
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 80px)) auto;
  }
}
#page-quotes .package-card-head label > span {
  font-size: 10px;
}
#page-quotes .package-actions {
  display: flex;
  gap: 6px;
  align-items: end;
}

#page-quotes .package-section-label {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qg-muted);
  margin: 20px 0 10px;
}

/* ── Event chip grid (within a package) ──────────────────── */
#page-quotes .qg-event-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
}
#page-quotes .qg-event-card {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  background: var(--qg-surface);
  cursor: pointer;
  text-align: center;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--qg-ink);
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
#page-quotes .qg-event-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
#page-quotes .qg-event-card:hover {
  background: var(--qg-canvas);
}
#page-quotes .qg-event-card.is-selected {
  background: var(--primary, #005ab3);
  color: #fff;
  border-color: var(--primary, #005ab3);
}
#page-quotes .qg-event-name { font-weight: 500; }

/* Custom event input row inside a package */
#page-quotes .package-events-section .custom-event-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
#page-quotes .package-events-section .custom-event-row input { flex: 1; }

/* ── Per-event details table ─────────────────────────────── */
#page-quotes .event-detail-head,
#page-quotes .event-detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.5fr) 70px minmax(120px, 1fr) minmax(100px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 8px 0;
}
#page-quotes .event-detail-head {
  padding-bottom: 6px;
  border-bottom: 1px solid var(--qg-line);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--qg-muted);
}
#page-quotes .event-detail-row { border-bottom: 1px solid var(--qg-line); }
#page-quotes .event-detail-row:last-child { border-bottom: none; }
#page-quotes .event-detail-row strong {
  font-weight: 500;
  font-size: var(--fs-body);
}
#page-quotes .event-detail-row .qty-input { text-align: center; }

/* ── Per-event team & add-ons matrix ─────────────────────── */
#page-quotes .package-event-head { display: none; }
#page-quotes .package-event-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.9fr) repeat(4, 80px) minmax(160px, 1fr);
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--qg-line);
}
#page-quotes .package-event-row:last-child { border-bottom: none; }
#page-quotes .package-event-row strong {
  font-weight: 500;
  font-size: 13px;
}
#page-quotes .team-field {
  display: flex;
  align-items: center;
  gap: 6px;
}
#page-quotes .team-field span {
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--qg-muted);
  min-width: 20px;
}
#page-quotes .team-field input {
  width: 56px !important;
  text-align: center;
  padding: 6px 4px !important;
  font-family: var(--sans);
  font-size: 13px;
}
#page-quotes .inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
#page-quotes .mini-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border: 1px solid var(--qg-line);
  border-radius: 9999px;
  font-size: 11px;
  cursor: pointer;
  background: var(--qg-surface);
  transition: background 120ms ease;
}
#page-quotes .mini-check input { accent-color: var(--primary, #005ab3); width: 12px; height: 12px; }
#page-quotes .mini-check:has(input:checked) {
  background: var(--primary, #005ab3);
  color: #fff;
  border-color: var(--primary, #005ab3);
}

/* Stack on narrow viewports */
@media (max-width: 720px) {
  #page-quotes .event-detail-head { display: none; }
  #page-quotes .event-detail-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "name name"
      "qty date"
      "guest guest";
    row-gap: 6px;
  }
  #page-quotes .event-detail-row strong { grid-area: name; }
  #page-quotes .event-detail-row > input[name$="_quantity"] { grid-area: qty; }
  #page-quotes .event-detail-row > input[name$="_date"] { grid-area: date; }
  #page-quotes .event-detail-row > input[name$="_guestCount"] { grid-area: guest; }

  #page-quotes .package-event-row {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
      "name name name name"
      "cp cv tp tv"
      "addons addons addons addons";
    row-gap: 6px;
  }
  #page-quotes .package-event-row strong { grid-area: name; }
  #page-quotes .package-event-row .team-field:nth-of-type(1) { grid-area: cp; }
  #page-quotes .package-event-row .team-field:nth-of-type(2) { grid-area: cv; }
  #page-quotes .package-event-row .team-field:nth-of-type(3) { grid-area: tp; }
  #page-quotes .package-event-row .team-field:nth-of-type(4) { grid-area: tv; }
  #page-quotes .package-event-row .inline-options { grid-area: addons; }
}

/* ── Discount & notes ────────────────────────────────────── */
#page-quotes .discount-field .discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}
#page-quotes .quote-notes textarea {
  min-height: 88px;
  resize: vertical;
}
#page-quotes .quote-notes small {
  display: block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--qg-muted);
}

/* ── Live pricing rail (desktop) / drawer (mobile) ───────── */
#page-quotes .qg-rail {
  position: sticky;
  top: 96px;
  align-self: start;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.55));
  border-radius: 24px;
  -webkit-backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28, 27, 26, 0.12)),
              var(--glass-inset, inset 0 1px 0 rgba(255, 255, 255, 0.7));
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 120px);
  overflow: hidden;
}
@media (max-width: 1100px) {
  #page-quotes .qg-rail {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    max-height: 78vh;
    box-shadow: 0 -1px 8px rgba(0,0,0,0.04);
    z-index: 40;
    transform: translateY(calc(100% - 92px));
    transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
  }
  #page-quotes .qg-rail.is-expanded {
    transform: translateY(0);
  }
  #page-quotes .qg-rail::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--qg-line);
    margin: 8px auto 0;
  }
}

/* Phone: the live-pricing drawer must float ABOVE the bottom-nav pill (which
   sits at bottom 16 + 64px). Lift it into a rounded floating card and tighten
   the page gutters so the builder isn't cramped. */
@media (max-width: 768px) {
  #page-quotes { padding: 24px 0 168px; }
  #page-quotes .qg-shell { padding: 0 16px; }
  #page-quotes .qg-card { padding: 18px 16px; border-radius: 16px; }
  #page-quotes .qg-heading h1 { font-size: 26px; }
  #page-quotes .qg-rail {
    left: 12px;
    right: 12px;
    bottom: calc(92px + env(safe-area-inset-bottom));
    border-radius: 20px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.55));
    max-height: 70vh;
    box-shadow: 0 16px 40px -12px rgba(28,27,26,0.22);
    /* collapsed: peek the header (~84px) above the nav pill */
    transform: translateY(calc(100% - 84px));
  }
  #page-quotes .qg-rail.is-expanded { transform: translateY(0); }
}

#page-quotes .qg-rail-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 22px 12px;
  border-bottom: 1px solid var(--qg-line);
  cursor: pointer;
}
#page-quotes .qg-rail-head .qg-rail-label {
  flex: 1;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qg-muted);
}
#page-quotes .qg-rail-head .qg-rail-state {
  font-size: 11px;
  color: var(--qg-muted);
}
#page-quotes .qg-rail-head .qg-rail-toggle {
  font-size: 18px;
  color: var(--qg-muted);
  display: none;
}
@media (max-width: 1100px) {
  #page-quotes .qg-rail-head .qg-rail-toggle { display: inline-block; }
}

#page-quotes .qg-rail-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px;
  min-height: 0;
}
#page-quotes .qg-rail-body .pricing-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
}
#page-quotes .qg-rail-body .pricing-preview-table thead { display: none; }
#page-quotes .qg-rail-body .pricing-preview-table td {
  padding: 8px 0;
  font-size: 13px;
  vertical-align: top;
  border-bottom: 1px solid var(--qg-line);
}
#page-quotes .qg-rail-body .pricing-preview-table td:first-child {
  font-weight: 500;
  color: var(--qg-ink);
}
#page-quotes .qg-rail-body .pricing-preview-table td.muted {
  color: var(--qg-muted);
  font-size: 11px;
}
#page-quotes .qg-rail-body .pricing-preview-table td.num {
  text-align: right;
  font-family: var(--sans);
  font-size: 13px;
  white-space: nowrap;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot td {
  border-bottom: none;
  padding-top: 12px;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.subtotal-row td {
  font-size: 12px;
  color: var(--qg-muted);
  padding-top: 16px;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.discount-row td {
  font-size: 12px;
  color: var(--qg-err-fg);
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td {
  border-top: 1px solid var(--qg-line);
  padding-top: 14px;
  margin-top: 4px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.012em;
}
#page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td.num {
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--primary, #005ab3);
}
#page-quotes .qg-rail-body .package-totals {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--qg-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--qg-muted);
}
#page-quotes .qg-rail-body .package-totals > div {
  display: flex;
  justify-content: space-between;
}

/* Empty state */
#page-quotes .qg-rail-body p.muted {
  font-size: 13px;
  color: var(--qg-muted);
  margin: 0;
  padding: 6px 0;
}

/* Footer of the rail — toggle + action buttons */
#page-quotes .qg-rail-footer {
  padding: 16px 22px 22px;
  border-top: 1px solid var(--qg-line);
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--qg-surface);
}
#page-quotes .qg-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  color: var(--qg-ink);
}
#page-quotes .qg-toggle input { width: 14px; height: 14px; accent-color: var(--primary, #005ab3); }

#page-quotes .qg-generate {
  width: 100%;
  background: var(--primary, #005ab3);
  color: #fff;
  border: 1px solid var(--primary, #005ab3);
  box-shadow: 0 8px 20px -8px rgba(0, 90, 179, 0.45);
  border-radius: var(--qg-radius);
  padding: 12px 16px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: background 120ms ease, transform 100ms ease;
}
#page-quotes .qg-generate:hover { background: var(--accent-deep, #0064E3); }
#page-quotes .qg-generate:active { transform: scale(0.99); }
#page-quotes .qg-generate:disabled { opacity: 0.5; cursor: not-allowed; }

/* Secondary (Clear) — reuses the .qg-generate box so its HEIGHT matches Generate
   exactly; only the colours change to a ghost/outline. */
#page-quotes .qg-generate.is-ghost {
  background: transparent;
  color: var(--muted, #6b7280);
  border: 1px solid var(--line, #e3e3e3);
  box-shadow: none;
  font-weight: 600;
  margin-top: 8px;
}
#page-quotes .qg-generate.is-ghost:hover { background: rgba(0, 0, 0, 0.04); }
#page-quotes .qg-generate.is-ghost .material-symbols-outlined { color: inherit; }

/* Post-generation action buttons */
#page-quotes .quote-links-inline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#page-quotes .qg-link-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--qg-radius);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, transform 100ms ease;
  border: 1px solid var(--qg-line);
  background: var(--qg-surface);
  color: var(--qg-ink);
}
#page-quotes .qg-link-btn:hover { background: rgba(0, 90, 179, 0.06); border-color: rgba(0, 90, 179, 0.25); }
#page-quotes .qg-link-btn:active { transform: scale(0.98); }
#page-quotes .qg-link-btn .material-symbols-outlined { font-size: 16px; }
#page-quotes .qg-link-primary {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
  border-color: var(--qg-ok-bg);
}
#page-quotes .qg-link-primary:hover { background: rgba(48, 209, 88, 0.22); }
#page-quotes .qg-link-ghost { /* uses default */ }
#page-quotes .qg-link-send {
  background: var(--primary, #005ab3);
  color: #fff;
  border-color: var(--primary, #005ab3);
}
#page-quotes .qg-link-send:hover { background: var(--accent-deep, #0064E3); }
#page-quotes .qg-link-sent {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
  border-color: var(--qg-ok-bg);
}

/* CRM status pill */
#page-quotes .crm-status-inline {
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 9999px;
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
}
#page-quotes .crm-status-inline.crm-ok {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
}
#page-quotes .crm-status-inline.crm-error {
  background: var(--qg-err-bg);
  color: var(--qg-err-fg);
}

/* Hide post-generation drawer when needed */
#page-quotes .qg-rail.post-generation-hidden { display: none; }

/* Banner */
#page-quotes .banner {
  padding: 10px 14px;
  border-radius: var(--qg-radius);
  border: 1px solid var(--qg-line);
  background: var(--qg-canvas);
  font-size: 13px;
  color: var(--qg-ink);
}
#page-quotes .banner.error {
  background: var(--qg-err-bg);
  color: var(--qg-err-fg);
  border-color: var(--qg-err-bg);
}
#page-quotes .banner.success {
  background: var(--qg-ok-bg);
  color: var(--qg-ok-fg);
  border-color: var(--qg-ok-bg);
}

/* Mobile spacing under the bottom drawer */
@media (max-width: 1100px) {
  #page-quotes { padding-bottom: 120px; }
}

/* ── P0: progressive disclosure additions ─────────────────────────────── */

/* (More details accordion removed — all couple-details fields are now visible) */

/* Package shell — always visible, in both single and multi-package modes.
   The only difference: multi-package shows the Remove button. */
#page-quotes .package-card {
  border: 1px solid var(--qg-line);
  border-radius: var(--qg-radius);
  padding: 22px;
  background: var(--qg-canvas);
}

/* Per-event collapsed team block */
#page-quotes .event-team-block {
  border-top: 1px solid var(--qg-line);
}
#page-quotes .event-team-block:first-child { border-top: none; }
#page-quotes .event-team-summary {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
}
#page-quotes .event-team-summary strong {
  font-weight: 500;
  font-size: var(--fs-body);
}
#page-quotes .event-team-summary-text {
  font-size: 12px;
  color: var(--qg-muted);
  font-family: var(--sans);
}
#page-quotes .edit-team-toggle {
  font-size: 12px;
  white-space: nowrap;
}
#page-quotes .edit-team-toggle .material-symbols-outlined {
  font-size: 14px;
}
#page-quotes .event-team-block.is-expanded .edit-team-toggle {
  background: var(--qg-canvas);
}
#page-quotes .event-team-edit {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0 16px;
}
#page-quotes .event-team-edit .inline-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
@media (max-width: 720px) {
  #page-quotes .event-team-summary {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  #page-quotes .event-team-summary strong { order: 1; }
  #page-quotes .event-team-summary-text { order: 2; }
  #page-quotes .edit-team-toggle { order: 3; justify-self: start; }
  #page-quotes .event-team-edit {
    grid-template-columns: repeat(2, 1fr);
  }
  #page-quotes .event-team-edit .inline-options {
    grid-column: 1 / -1;
  }
}

/* Remove the legacy package-section-label rendering (no longer used) */
#page-quotes .package-section-label { display: none; }

/* ── Conversation Inbox ─────────────────────────────────────────────── */
.inbox-shell { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; height: calc(100dvh - 180px); min-height: 480px; }
.inbox-list-pane, .inbox-thread-pane {
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5));
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--glass-bg, rgba(255,255,255,0.62));
  -webkit-backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  backdrop-filter: var(--glass-blur, blur(40px) saturate(180%));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.12)),
              var(--glass-inset, inset 0 1px 0 rgba(255,255,255,0.6));
}
.inbox-search { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; }
.inbox-search .material-symbols-outlined { font-size: 20px; color: var(--ink-tertiary, #9A9994); }
.inbox-search input { border: none; outline: none; width: 100%; background: transparent; font-size: 14px; font-family: var(--sans); color: var(--ink, #1c1b1a); }
.inbox-list { overflow-y: auto; flex: 1; padding: 4px; }
.inbox-row { display: block; width: 100%; text-align: left; border: none; border-left: 3px solid transparent; background: none; padding: 12px 12px; border-radius: 12px; cursor: pointer; transition: background 160ms ease; }
.inbox-row:hover { background: rgba(255,255,255,0.55); }
.inbox-row.is-active { background: rgba(255,255,255,0.7); border-left-color: var(--primary, #005ab3); }
.inbox-row-top { display: flex; align-items: center; gap: 6px; }
.inbox-row-name { font-weight: 700; font-size: 14px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink, #1c1b1a); }
.inbox-row-snippet { font-size: 12px; color: var(--muted, #65645F); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-row-time { font-size: 10px; color: var(--ink-tertiary, #9A9994); margin-top: 3px; }
.ch-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 5px; letter-spacing: 0.04em; }
.ch-badge.wa { background: rgba(48,209,88,0.14); color: #1f7a37; }
.ch-badge.ig { background: rgba(74,71,210,0.12); color: #4a47d2; }
.pill.manual { background: rgba(255,159,10,0.16); color: #956400; font-size: 10px; padding: 1px 6px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.05em; }
.inbox-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--muted, #65645F); font-size: 14px; }
.inbox-thread { display: flex; flex-direction: column; height: 100%; }
/* The `hidden` attribute must win over the class display rules above. */
.inbox-thread[hidden], .inbox-empty[hidden], .inbox-banner[hidden] { display: none; }
/* Channel filter tabs — segmented control on a soft track */
.inbox-filter { display: flex; gap: 4px; margin: 0 16px 12px; padding: 4px; background: var(--panel-soft, #f7f3f0); border-radius: 12px; }
.inbox-filter button { flex: 1; border: none; background: none; border-radius: 9px; padding: 6px 0; font-size: 12px; font-weight: 500; font-family: var(--sans); color: var(--muted, #65645F); cursor: pointer; transition: all 160ms ease; }
.inbox-filter button:hover { color: var(--ink, #1c1b1a); }
.inbox-filter button.is-active { background: var(--mid-surface-2, #fff); color: var(--primary, #005ab3); font-weight: 600; box-shadow: 0 1px 3px rgba(28,27,26,0.08); }
.inbox-thread-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--glass-border, rgba(28,27,26,0.06)); background: rgba(255,255,255,0.25); }
.inbox-thread-who strong { display: block; font-size: 18px; font-weight: 600; letter-spacing: -0.008em; color: var(--ink, #1c1b1a); }
.inbox-thread-who .muted { font-size: 12px; color: var(--muted, #65645F); }
.inbox-messages { flex: 1; overflow-y: auto; padding: 22px; display: flex; flex-direction: column; gap: 14px; background: transparent; }
.msg { display: flex; flex-direction: column; max-width: 80%; }
.msg.in { align-self: flex-start; align-items: flex-start; }
.msg.out { align-self: flex-end; align-items: flex-end; }
.msg-bubble { padding: 12px 16px; border-radius: 18px; font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.msg.in .msg-bubble {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  color: var(--ink, #1c1b1a);
  border-top-left-radius: 4px;
}
.msg.out .msg-bubble {
  background: var(--primary, #005ab3);
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(0,90,179,0.4);
  border-top-right-radius: 4px;
}
.msg-media-img { max-width: 220px; max-height: 240px; border-radius: 12px; display: block; cursor: pointer; }
.msg-media-vid { max-width: 240px; border-radius: 12px; display: block; }
.msg-media-doc { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; text-decoration: none; color: inherit; }
.msg-bubble .msg-text { margin-top: 6px; }
.msg-bubble .msg-media-img + .msg-text, .msg-bubble audio + .msg-text { margin-top: 8px; }
.msg-meta { font-size: 10px; color: var(--ink-tertiary, #9A9994); margin-top: 4px; letter-spacing: 0.04em; }
.msg-tag { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #956400; }
.inbox-compose { border-top: 1px solid var(--glass-border, rgba(28,27,26,0.06)); padding: 14px 16px; flex: 0 0 auto; background: rgba(255,255,255,0.2); }
.inbox-banner { background: rgba(255,159,10,0.12); border: 1px solid rgba(255,159,10,0.22); color: #956400; font-size: 12px; padding: 8px 12px; border-radius: 12px; margin-bottom: 10px; }
.inbox-compose-row { display: flex; gap: 10px; align-items: flex-end; }
.inbox-compose-row textarea { flex: 1; resize: none; border: 1px solid var(--outline-variant, #c0c6d6); border-radius: 16px; padding: 11px 14px; font-size: 14px; font-family: var(--sans); min-height: 44px; max-height: 120px; line-height: 1.4; background: rgba(255,255,255,0.9); color: var(--ink, #1c1b1a); }
.inbox-compose-row textarea:focus { outline: none; border-color: var(--primary, #005ab3); box-shadow: 0 0 0 3px rgba(0,90,179,0.12); }

/* ── Inbox: avatar chip + back button + robust heights ─────────────────── */
.inbox-shell { height: calc(100dvh - 210px); min-height: 460px; }
.inbox-row { display: grid; grid-template-columns: 44px minmax(0,1fr) auto; grid-template-areas: "av top time" "av snip snip"; column-gap: 12px; row-gap: 2px; align-items: center; }
.inbox-row-avatar { grid-area: av; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 16px; font-weight: 700; background: rgba(0,90,179,0.1); color: var(--primary, #005ab3); }
.inbox-row-top { grid-area: top; }
.inbox-row-snippet { grid-area: snip; margin-top: 0; }
.inbox-row-time { grid-area: time; margin-top: 0; }
.inbox-back { display: none; border: none; background: none; cursor: pointer; padding: 4px 8px 4px 0; margin-right: 4px; align-items: center; color: var(--ink, #2f3437); }
.inbox-back .material-symbols-outlined { font-size: 22px; }

/* Mobile: single pane, tap a row → full-screen thread, Back returns to list */
@media (max-width: 900px) {
  .inbox-shell { grid-template-columns: 1fr; height: calc(100dvh - 170px); }
  .inbox-shell .inbox-thread-pane { display: none; }
  .inbox-shell.show-thread .inbox-list-pane { display: none; }
  .inbox-shell.show-thread .inbox-thread-pane { display: flex; flex-direction: column; }
  .inbox-back { display: inline-flex; }
}
@media (max-width: 768px) {
  /* leave room for the bottom nav (58px) */
  .inbox-shell { height: calc(100dvh - 156px); }
  .msg { max-width: 86%; }
}

/* ── Inbox thread header + shell hardening ─────────────────────────────── */
.inbox-thread-who { flex: 1; min-width: 0; }
.inbox-thread-who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-thread-head { gap: 8px; }
/* clip (not hidden) prevents horizontal scroll WITHOUT creating a scroll
   container — so position:sticky (e.g. the QG live-pricing rail) still works. */
.shell { overflow-x: clip; }
.shell, .qg-shell, .inbox-shell { min-width: 0; }

/* Tablet band: keep sidebar but tighten content gutters so nothing crowds */
@media (min-width: 769px) and (max-width: 1024px) {
  .shell { padding: 24px clamp(16px, 3vw, 28px) 72px; }
}

/* ── Quote Generator: per-field labels (shown on mobile) + breathing room ── */
#page-quotes .qg-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#page-quotes .qg-cell-label { display: none; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--qg-muted, #787774); }
#page-quotes .qg-cell input { width: 100%; }
@media (max-width: 768px) {
  #page-quotes .qg-cell-label { display: block; }
  /* Stack the per-event detail rows with labelled fields on mobile */
  #page-quotes .event-detail-row { grid-template-columns: 1fr 1fr; gap: 10px; }
  #page-quotes .event-detail-row > strong { grid-column: 1 / -1; }
  #page-quotes .event-detail-row input,
  #page-quotes .qg-cell input,
  #page-quotes .package-card-head input,
  #page-quotes .package-card-head select { min-height: 44px; }
  #page-quotes .package-card-head { gap: 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   LEADS — "Liquid glass" restyle (scoped to #page-leads)
   ════════════════════════════════════════════════════════════════════ */
#page-leads { position: relative; }
/* (Global body gradient now provides the backdrop — leads-scoped one removed.) */

/* Glass columns */
#page-leads #crmKanbanBoard { grid-template-columns: repeat(9, minmax(300px, 1fr)); gap: 16px; }
#page-leads .kanban-col {
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 16px;
  box-shadow: 0 8px 32px -10px rgba(28,27,26,0.10);
}
#page-leads .kanban-col-header { border-bottom: 1px solid rgba(28,27,26,0.06); }
#page-leads .kanban-col-title { color: #65645F; letter-spacing: 0.08em; }
#page-leads .kanban-col-meta { color: #9A9994; font-weight: 600; }
#page-leads .kanban-col-body { padding: 10px; gap: 12px; }

/* Glass cards */
#page-leads .kanban-card {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 14px;
  box-shadow: 0 4px 12px -2px rgba(28,27,26,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#page-leads .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(28,27,26,0.18); }
#page-leads .kanban-card-title { font-size: 15px; font-weight: 700; }
#page-leads .kanban-card-amount { font-weight: 700; color: #005ab3; }
#page-leads .kanban-card-footer { padding-top: 10px; border-top: 1px solid rgba(28,27,26,0.06); }
#page-leads .op-pill, #page-leads .source-pill { border-radius: 9999px; font-weight: 700; }

/* Desktop: fixed board height — columns stay put, cards scroll inside each column.
   (topbar 58 + shell padding 36 + heading ~64 + breathing room ≈ 200px) */
@media (min-width: 901px) {
  #page-leads #crmKanbanBoard {
    height: calc(100dvh - 200px);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 2px;
  }
  #page-leads .kanban-col {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }
  #page-leads .kanban-col-header { flex: 0 0 auto; }
  #page-leads .kanban-col-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  #page-leads .kanban-col-body::-webkit-scrollbar { width: 6px; }
  #page-leads .kanban-col-body::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.12); border-radius: 10px; }
}

/* Stage pill nav — desktop hidden, mobile shown */
.leads-stage-nav { display: none; }

@media (max-width: 900px) {
  /* Single-column list with a horizontal stage selector */
  .leads-stage-nav {
    display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 14px;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  .leads-stage-nav::-webkit-scrollbar { display: none; }
  .leads-stage-pill {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 9999px; font-size: 13px; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.55); background: rgba(255,255,255,0.62);
    -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
    color: #1c1b1a; cursor: pointer; white-space: nowrap;
  }
  .leads-stage-pill .count {
    background: rgba(28,27,26,0.06); padding: 1px 7px; border-radius: 9999px; font-size: 11px; font-weight: 700;
  }
  .leads-stage-pill.is-active { background: #0064E3; color: #fff; border-color: #0064E3; }
  .leads-stage-pill.is-active .count { background: rgba(255,255,255,0.22); color: #fff; }

  #page-leads #crmKanbanBoard { display: block; overflow-x: hidden; padding: 0 0 90px; }
  #page-leads .kanban-col { display: none; min-height: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; }
  #page-leads .kanban-col.is-mobile-active { display: flex; }
  #page-leads .kanban-col .kanban-col-header { display: none; } /* the pill shows the stage */
  #page-leads .kanban-col-body { padding: 0; gap: 14px; }
  #page-leads .kanban-card { border-radius: 18px; padding: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   LEADS — Deal detail panel: liquid-glass restyle + mobile bottom-sheet
   ════════════════════════════════════════════════════════════════════ */
#page-leads .detail-overlay {
  background: rgba(10,10,12,0.18);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#page-leads .detail-content {
  width: min(560px, 100vw);
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(60px) saturate(180%); backdrop-filter: blur(60px) saturate(180%);
  border-left: 1px solid rgba(255,255,255,0.5);
  border-top-left-radius: 28px; border-bottom-left-radius: 0;
  box-shadow: -16px 0 48px -16px rgba(28,27,26,0.18), inset 0 1px 0 rgba(255,255,255,0.5);
}
#page-leads .detail-head {
  border-bottom: 1px solid rgba(255,255,255,0.4);
  background: rgba(255,255,255,0.25);
}
#page-leads .detail-head h2 { font-size: 24px; font-weight: 700; }
#page-leads .detail-amount-row input { background: rgba(255,255,255,0.6); }
/* Section sub-cards */
#page-leads .detail-body section { margin-bottom: 18px; }
#page-leads .linked-contact-card,
#page-leads .detail-body > section:not(.danger-zone) {
  background: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 4px 16px -8px rgba(28,27,26,0.06);
  padding: 16px 18px;
}
#page-leads .detail-dl input,
#page-leads .detail-dl select,
#page-leads .note-form textarea,
#page-leads .edit-textarea { background: rgba(255,255,255,0.7); }
#page-leads .danger-zone { padding-top: 6px; }

/* Mobile: bottom sheet instead of right slide-in */
@media (max-width: 768px) {
  #page-leads .detail-panel { justify-content: stretch; align-items: flex-end; }
  #page-leads .detail-content {
    width: 100%; height: auto; max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    border-left: none; border-top: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 -12px 40px -12px rgba(28,27,26,0.22), inset 0 1px 0 rgba(255,255,255,0.7);
    transform: translateY(24px);
  }
  #page-leads .detail-panel:not([hidden]) .detail-content { transform: translateY(0); }
  /* drag handle */
  #page-leads .detail-content::before {
    content: ""; position: sticky; top: 0; display: block;
    width: 36px; height: 5px; margin: 8px auto 0;
    background: rgba(0,0,0,0.12); border-radius: 999px;
  }
  #page-leads .detail-head { padding-top: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   UNIFIED DESIGN SYSTEM — global glass surfaces + Inter type scale.
   Appended last so it harmonises every page (Leads/Conversations/Quote/
   Contacts/Setup) onto one language. Layout media-queries above still win.
   ════════════════════════════════════════════════════════════════════ */

/* Headings + eyebrows: one consistent scale & placement everywhere */
.page-heading h1 { font-family: var(--sans); font-size: var(--fs-title1); font-weight: 700; letter-spacing: -0.018em; line-height: 1.2; }
.eyebrow { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tertiary); }

/* Major surface primitives → frosted glass card */
.panel,
.setup-panel,
.table-wrap,
#page-quotes .qg-card,
.glass-card {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}

/* Deal/Contact detail panel → glass (generalised to both panels) */
.detail-overlay { background: rgba(10,10,12,0.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.detail-content {
  background: rgba(255,255,255,0.72);
  -webkit-backdrop-filter: blur(60px) saturate(180%); backdrop-filter: blur(60px) saturate(180%);
  border-left: 1px solid var(--glass-border);
  border-top-left-radius: 28px; border-bottom-left-radius: 0;
  box-shadow: -16px 0 48px -16px rgba(28,27,26,0.18), var(--glass-inset);
}
@media (max-width: 768px) {
  .detail-panel { justify-content: stretch; align-items: flex-end; }
  .detail-content {
    width: 100%; height: auto; max-height: 92dvh;
    border-radius: 24px 24px 0 0; border-left: none;
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -12px 40px -12px rgba(28,27,26,0.22), var(--glass-inset);
    transform: translateY(24px);
  }
  .detail-panel:not([hidden]) .detail-content { transform: translateY(0); }
}

/* Controls — calm, near-solid fields for legibility; consistent shape */
input, select, textarea {
  background: var(--field-bg);
  border: 1px solid var(--outline-variant);
  border-radius: 8px;
  font-family: var(--sans);
}
/* Buttons don't inherit font by default — keep all of them on Inter so
   card-buttons (contacts, tickets, dashboard rows) match the rest of the UI. */
button { font-family: var(--sans); }
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0,90,179,0.12);
}

/* Buttons — accent-deep primary, consistent radius */
.button { border-radius: 8px; }
.button.primary { background: var(--accent-deep); border-color: transparent; }
.button.primary:hover { background: var(--primary); }

/* Reconcile Quote Generator's bespoke tokens to the global system */
#page-quotes {
  --qg-surface: var(--glass-card);
  --qg-line: var(--glass-border);
  --qg-ink: var(--ink);
  --qg-muted: var(--muted);
  --qg-muted-soft: var(--ink-tertiary);
}
#page-quotes .qg-heading h1 {
  font-family: var(--sans);
  font-size: var(--fs-title1);
  font-weight: 700;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

/* ════════════════════════════════════════════════════════════════════
   CONTACTS — liquid-glass card grid (desktop) / card list (mobile)
   ════════════════════════════════════════════════════════════════════ */
.contacts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  min-width: 0;
}
.contacts-empty { grid-column: 1 / -1; padding: 40px; text-align: center; }

.contact-card {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; min-width: 0; text-align: left; cursor: pointer;
  padding: 18px;
  /* It's a <button> — force Inter + the body scale, since buttons don't
     inherit font by default (that's what made the cards look "different"). */
  font-family: var(--sans);
  font-size: var(--fs-body);
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--ink);
}
.contact-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(28,27,26,0.18), var(--glass-inset); }

.contact-card-head { display: flex; align-items: center; gap: 12px; }
.contact-avatar {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 16px;
  color: var(--primary);
  background: linear-gradient(135deg, #d6e3ff 0%, #e2dfff 100%);
}
.contact-id { flex: 1; min-width: 0; }
.contact-name { font-size: var(--fs-title3); font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-sub { font-size: var(--fs-caption); color: var(--ink-tertiary); margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-chev { color: var(--ink-tertiary); }

.contact-lines { display: flex; flex-direction: column; gap: 7px; }
.contact-lines > div { display: flex; align-items: center; gap: 10px; color: var(--ink-2); font-size: var(--fs-body); min-width: 0; }
.contact-lines .material-symbols-outlined { font-size: 18px; color: var(--ink-tertiary); flex: 0 0 auto; }
.contact-lines code { font-family: var(--sans); font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; }
.contact-lines > div { overflow: hidden; }
.contact-lines > div:last-child { white-space: nowrap; text-overflow: ellipsis; }

.contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.contact-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.pill.open-deals { background: var(--pale-blue); color: var(--pale-blue-ink); font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) {
  .contacts-grid { grid-template-columns: 1fr; }
}

/* Quote Generator — drop decorative section-title icons (per design: no icons).
   Only the leading icon directly inside a card header is hidden; functional
   control icons inside buttons (search, refresh, close, add) are kept. */
#page-quotes .qg-card-head > .material-symbols-outlined { display: none; }
/* No icons in the Quote Generator (per spec) — hide every Material Symbol
   except the functional mobile rail-toggle chevron. */
#page-quotes .material-symbols-outlined { display: none; }
#page-quotes .qg-rail-head .qg-rail-toggle { display: none; }
@media (max-width: 1100px) {
  #page-quotes .qg-rail-head .qg-rail-toggle { display: inline-block; }
}

/* ════════════════════════════════════════════════════════════════════
   DETAIL PANEL (lead + contact) — align typography to the global Inter scale
   so the "more details" screen matches the rest of the app.
   ════════════════════════════════════════════════════════════════════ */
.detail-content,
.detail-content input,
.detail-content select,
.detail-content textarea,
.detail-content button { font-family: var(--sans); }
.detail-content { font-size: var(--fs-body); }
.detail-head h2 { font-size: var(--fs-title2); font-weight: 700; letter-spacing: -0.012em; }
.detail-amount { font-size: var(--fs-title3); }
.detail-body h3 { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tertiary); }
.detail-dl,
.detail-dl input,
.detail-dl select,
.detail-dl dd,
.detail-dl dt,
.event-list, .stage-history, .contact-deals,
.note-body, .note-form textarea,
.detail-amount-row, .detail-amount-row input,
.linked-contact-meta { font-size: var(--fs-body); }
.linked-contact-name, .linked-contact-card h3 { font-size: var(--fs-title3); font-weight: 600; }
.detail-save-hint { font-size: var(--fs-caption); }
/* Phone numbers stay monospace (matches the contact cards) */
.linked-contact-meta code, .detail-dl code { font-family: var(--sans); font-size: var(--fs-body); }

/* ════════════════════════════════════════════════════════════════════
   MODALS (New deal / New contact) — liquid-glass to match the app
   ════════════════════════════════════════════════════════════════════ */
.modal-overlay {
  background: rgba(10,10,12,0.18);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.modal-content {
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(60px) saturate(180%); backdrop-filter: blur(60px) saturate(180%);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.modal-head { border-bottom: 1px solid var(--glass-border); }
.modal-head h2 { font-family: var(--sans); font-size: var(--fs-title3); font-weight: 600; letter-spacing: -0.008em; }
.modal-body { font-size: var(--fs-body); }
.modal-body label { font-size: var(--fs-caption); }
.modal-body label > span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); }
.modal-body input, .modal-body select, .modal-body textarea {
  background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 8px;
  box-sizing: border-box; width: 100%; min-height: 40px; padding: 0 12px;
  font-size: 14px; line-height: 1.4;
}
.modal-body textarea { padding: 9px 12px; min-height: 80px; line-height: 1.5; }
/* Selects: kill native chrome so their height/padding match text inputs exactly,
   then draw one consistent chevron. */
.modal-body select {
  -webkit-appearance: none; appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%2387929a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center;
}
/* date / datetime / number inside modals: same box, no overflow, no spinner drift */
.modal-body input[type="date"],
.modal-body input[type="datetime-local"],
.modal-body input[type="time"],
.modal-body input[type="number"] { -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; }
.modal-actions { border-top: 1px solid var(--glass-border); }
.modal-prefilled-contact, .modal-section-header { border-color: var(--glass-border); }

@media (max-width: 640px) {
  .modal { align-items: flex-end; padding: 0; }
  .modal-content { width: 100%; max-height: 92dvh; border-radius: 24px 24px 0 0; }
  /* 16px font stops iOS from zooming on focus; 44px is the comfortable touch height.
     Extra .modal-content qualifier beats the later global `.modal-content input{font-size:14px}`. */
  .modal-content .modal-body input, .modal-content .modal-body select, .modal-content .modal-body textarea,
  .modal-content .task-lead-search input { font-size: 16px; min-height: 44px; }
  .modal-content .modal-body select { background-position: right 12px center; }
}

/* ════════════════════════════════════════════════════════════════════
   QUOTE GENERATOR — authoritative mobile layout (appended last, wins over
   earlier scattered/stale rules). Targets the real rendered DOM:
   package-card-head, event-detail-row (5 cells), event-team-summary/-edit.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Package header: stack everything full-width */
  #page-quotes .package-card-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: stretch;
  }
  #page-quotes .package-card-head label { width: 100%; }
  #page-quotes .package-card-head label > span { font-size: 11px; }
  #page-quotes .package-card-head input,
  #page-quotes .package-card-head select { width: 100%; min-height: 44px; }
  #page-quotes .package-actions { width: 100%; display: flex; gap: 8px; }
  #page-quotes .package-actions .button { flex: 1; justify-content: center; }

  /* Per-event details: header row hidden; each event is a labelled 2-col card */
  #page-quotes .event-detail-head { display: none; }
  #page-quotes .event-detail-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: none;
    gap: 14px 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--qg-line);
    align-items: start;
  }
  #page-quotes .event-detail-row > strong {
    grid-row: 1;
    grid-column: 1 / -1 !important;
    font-size: 14px;
    font-weight: 700;
    color: var(--qg-ink);
  }
  #page-quotes .event-detail-row .qg-cell {
    grid-column: auto !important;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  #page-quotes .qg-cell-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--qg-muted);
  }
  #page-quotes .event-detail-row input,
  #page-quotes .event-detail-row .qg-cell input {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
  }

  /* Event chips: compact 2-up grid (was falling back to the desktop auto-fill,
     which stacked them full-width with big gaps on phones). */
  #page-quotes .qg-event-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  #page-quotes .qg-event-card {
    padding: 11px 10px;
    min-height: 0;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
  }
  #page-quotes .qg-event-name { font-weight: 600; }

  /* Card header (e.g. "Quote sections"): stack title + blurb + actions instead
     of cramming them into a single row. */
  #page-quotes .qg-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 18px;
  }
  #page-quotes .qg-card-head h3 { flex: none; }
  #page-quotes .qg-card-head p.muted { margin: 0; }
  #page-quotes .qg-card-head .button { width: 100%; justify-content: center; }

  /* Per-event team override: summary line + expandable inputs */
  #page-quotes .event-team-block { padding: 4px 0; }
  #page-quotes .event-team-summary {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name   edit"
      "detail detail";
    gap: 4px 10px;
    align-items: center;
    padding: 12px 0;
  }
  #page-quotes .event-team-summary > strong { grid-area: name; font-size: 14px; font-weight: 600; }
  #page-quotes .event-team-summary-text { grid-area: detail; font-size: 12px; color: var(--qg-muted); }
  #page-quotes .edit-team-toggle { grid-area: edit; justify-self: end; white-space: nowrap; }

  #page-quotes .event-team-edit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 6px 0 16px;
  }
  #page-quotes .event-team-edit .team-field {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    width: 100%;
  }
  #page-quotes .event-team-edit .team-field > span {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    color: var(--qg-muted);
    min-width: 0;
  }
  #page-quotes .event-team-edit .team-field input {
    width: 100% !important;
    min-width: 0;
    box-sizing: border-box;
    min-height: 42px;
    text-align: left;
    padding: 9px 12px !important;
    -webkit-appearance: none;
    appearance: none;
  }
  #page-quotes .event-team-edit .inline-options {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  /* Add-on chips: horizontal checkbox + label, left-aligned (not a centered column) */
  #page-quotes .mini-check {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    width: auto !important;
    padding: 9px 13px;
    font-size: 12px;
    text-align: left;
  }
  #page-quotes .mini-check input { flex: 0 0 auto; width: 16px !important; height: 16px !important; margin: 0; }
  #page-quotes .mini-check span { white-space: normal; }

  /* Custom "Add event" row: input above a full-width button */
  #page-quotes .package-events-section .custom-event-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #page-quotes .package-events-section .custom-event-row input { width: 100%; min-height: 44px; }
  #page-quotes .package-events-section .custom-event-row .button { width: 100%; justify-content: center; min-height: 44px; }

  /* Top-of-card sections: comfortable spacing */
  #page-quotes .qg-card-head { margin-bottom: 18px; }
  #page-quotes .qg-card .form-grid { grid-template-columns: 1fr; gap: 14px; }
  #page-quotes .package-section-label { margin: 16px 0 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   DASHBOARD — glass KPI cards, trend bars, activity lists
   ════════════════════════════════════════════════════════════════════ */
#page-dashboard .dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.dash-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
}
.dash-stat-label { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-tertiary); }
.dash-stat-value { font-family: var(--sans); font-size: 34px; font-weight: 700; letter-spacing: -0.02em; color: var(--primary, #005ab3); line-height: 1.1; }
.dash-stat-sub { font-size: var(--fs-caption); color: var(--muted); }

.dash-card {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow), var(--glass-inset);
  padding: 20px;
}
.dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.dash-card-head h3 { margin: 0; font-family: var(--sans); font-size: var(--fs-title3); font-weight: 600; letter-spacing: -0.008em; color: var(--ink); }
.dash-card-meta { font-size: var(--fs-caption); color: var(--muted); }

.dash-pill { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 9999px; background: rgba(0,90,179,0.10); color: var(--primary, #005ab3); }
.dash-pill-good { background: rgba(48,209,88,0.16); color: #1f7a37; }
.dash-pill-warn { background: rgba(255,159,10,0.16); color: #956400; }

/* Trend bars */
.dash-trend { margin-bottom: 24px; }
.dash-bars { display: flex; align-items: flex-end; gap: 8px; height: 140px; padding-top: 8px; }
.dash-bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; }
.dash-bar-fill { width: 70%; max-width: 28px; min-height: 4px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--accent-deep, #0064E3), var(--primary, #005ab3)); transition: height 240ms cubic-bezier(0.16,1,0.3,1); }
.dash-bar-val { font-size: 10px; font-weight: 700; color: var(--ink-secondary); height: 12px; }
.dash-bar-x { font-size: 9px; color: var(--ink-tertiary); white-space: nowrap; }

/* Activity lists — equal fixed-height cards, scroll inside each */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.dash-grid .dash-card { display: flex; flex-direction: column; height: 380px; }
.dash-grid .dash-card .dash-card-head { flex: 0 0 auto; }
.dash-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; scrollbar-width: thin; }
.dash-list::-webkit-scrollbar { width: 6px; }
.dash-list::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.12); border-radius: 10px; }
/* Dashboard heading: keep Refresh tidy on the right */
#page-dashboard .page-actions { display: flex; justify-content: flex-end; align-items: flex-start; }
/* Simple stacked list — no grid tracks, so it can never overflow the right padding. */
/* Leads bulk-select */
.leads-select-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: var(--glass-card, rgba(255,255,255,0.9)); border: 1px solid var(--glass-border, rgba(255,255,255,0.5)); box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.1)); }
.leads-select-bar #leadsSelectCount { font-weight: 600; }
.leads-select-actions { display: flex; gap: 8px; }
#leadsSelectToggle.is-active { background: var(--accent-deep, #0064E3); color: #fff; }
.kanban-card.selectable { cursor: pointer; position: relative; padding-left: 34px; }
.kanban-card-check { position: absolute; left: 10px; top: 12px; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--outline-variant, #c0c6d6); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: #fff; background: var(--mid-surface-2, #fff); }
.kanban-card.is-selected { outline: 2px solid var(--accent-deep, #0064E3); outline-offset: -1px; }
.kanban-card.is-selected .kanban-card-check { background: var(--accent-deep, #0064E3); border-color: var(--accent-deep, #0064E3); }
.col-select-all { border: none; background: none; color: var(--primary, #005ab3); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.dash-period { display: flex; align-items: center; gap: 8px; }
.dash-month-label { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.9); border: 1px solid var(--outline-variant, #c0c6d6); border-radius: 10px; padding: 6px 10px; }
.dash-month-label .material-symbols-outlined { font-size: 20px; color: var(--primary, #005ab3); }
.dash-month-label input[type="month"] { border: none; background: none; font: inherit; color: var(--ink, #1c1b1a); outline: none; min-width: 130px; }
.dash-range { display: inline-flex; align-items: center; gap: 6px; }
.dash-range input[type="date"] { background: rgba(255,255,255,0.9); border: 1px solid var(--outline-variant, #c0c6d6); border-radius: 10px; padding: 6px 8px; font: inherit; color: var(--ink, #1c1b1a); }
.dash-range-sep { color: var(--muted, #65645F); }
@media (max-width: 768px) { .dash-period { flex-wrap: wrap; gap: 6px; } .dash-range input[type="date"] { min-width: 0; flex: 1; } }
/* 2×2 grid of category cards; each card has a fixed height and scrolls internally. */
.tasks-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; min-width: 0; max-width: 980px; align-items: start; }
.tasks-cat {
  min-width: 0;
  display: flex; flex-direction: column;
  height: 420px;  /* fixed card height → internal scroll */
  background: var(--glass-card, rgba(255,255,255,0.85)); backdrop-filter: var(--glass-blur, blur(40px));
  border: 1px solid var(--glass-border, rgba(255,255,255,0.5)); border-radius: 18px;
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.10)); padding: 16px 8px 12px 16px;
}
.tasks-cat-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding-right: 8px; flex: 0 0 auto; }
.tasks-cat-head h3 { margin: 0; font-size: 16px; flex: 1; min-width: 0; }
.tasks-cat-head .material-symbols-outlined { color: var(--primary, #005ab3); font-size: 22px; }
.tasks-cat-list { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; overflow-y: auto; padding-right: 8px; }
/* slim scrollbar inside cards */
.tasks-cat-list::-webkit-scrollbar { width: 7px; }
.tasks-cat-list::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.18); border-radius: 4px; }
@media (max-width: 760px) { .tasks-board { grid-template-columns: 1fr; } .tasks-cat { height: 360px; } }
.action-row { cursor: pointer; }
.action-row:hover { background: rgba(0,90,179,0.05); }
.action-done {
  border: none; background: none; cursor: pointer; color: var(--ink-tertiary, #9A9994);
  display: inline-flex; align-items: center; padding: 4px; border-radius: 8px; flex: none;
}
.action-done:hover { color: var(--success, #30D158); }
.action-done .material-symbols-outlined { font-size: 22px; }
.dash-row {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 10px 8px; border: none; background: none; border-radius: 12px;
  cursor: pointer; font-family: var(--sans); color: var(--ink);
  transition: background 140ms ease;
}
button.dash-row:hover { background: rgba(255,255,255,0.55); }
.dash-avatar {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; font-size: 14px;
  background: rgba(0,90,179,0.1); color: var(--primary, #005ab3);
}
.dash-avatar .material-symbols-outlined { font-size: 20px; }
.dash-avatar.good { background: rgba(48,209,88,0.16); color: #1f7a37; }
.dash-avatar.warn { background: rgba(255,159,10,0.18); color: #956400; }
.dash-avatar.hot { background: rgba(255,69,58,0.14); color: #c0392b; }
.dash-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dash-row-title { font-size: var(--fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.dash-row-sub { font-size: var(--fs-caption); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-row-amount { font-weight: 700; font-size: var(--fs-body); color: var(--primary, #005ab3); white-space: nowrap; }
.dash-row-time { font-size: 10px; color: var(--ink-tertiary); white-space: nowrap; }
.dash-flag { font-size: 8.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #c0392b; background: rgba(255,69,58,0.12); padding: 1px 6px; border-radius: 9999px; }
.dash-empty { padding: 18px 8px; font-size: var(--fs-body); color: var(--muted); text-align: center; }
.dash-loading { grid-column: 1 / -1; padding: 30px; text-align: center; }

@media (max-width: 900px) {
  #page-dashboard .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dash-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .dash-bars { gap: 4px; height: 120px; }
  .dash-bar-x { font-size: 8px; }
}

/* ════════════════════════════════════════════════════════════════════
   TICKETS — customer-service queue (glass cards + slide-in detail)
   ════════════════════════════════════════════════════════════════════ */
.tickets-filter { display: flex; gap: 4px; padding: 4px; margin-bottom: 18px; background: var(--panel-soft, #f7f3f0); border-radius: 12px; width: fit-content; max-width: 100%; overflow-x: auto; }
.tickets-filter button { border: none; background: none; border-radius: 9px; padding: 8px 16px; font-size: var(--fs-caption); font-weight: 500; font-family: var(--sans); color: var(--muted, #65645F); cursor: pointer; white-space: nowrap; transition: all 160ms ease; }
.tickets-filter button:hover { color: var(--ink, #1c1b1a); }
.tickets-filter button.is-active { background: var(--mid-surface-2, #fff); color: var(--primary, #005ab3); font-weight: 600; box-shadow: 0 1px 3px rgba(28,27,26,0.08); }

.tickets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tickets-empty { grid-column: 1 / -1; padding: 40px; text-align: center; }

/* Ticket card layout (glass comes from .kanban-card in the #page-tickets block) */
.ticket-card {
  display: flex; flex-direction: column; gap: 10px;
  width: 100%; text-align: left; cursor: pointer; position: relative;
  color: var(--ink);
}
.ticket-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ticket-subject { font-size: var(--fs-body); font-weight: 600; line-height: 1.35; color: var(--ink); }
.ticket-prio-dot { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #c0392b; background: rgba(255,69,58,0.14); padding: 2px 7px; border-radius: 9999px; }
.ticket-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.ticket-who { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-caption); color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-time { font-size: 10px; color: var(--ink-tertiary); white-space: nowrap; }

/* Category + status pills */
.ticket-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; background: rgba(0,90,179,0.10); color: var(--primary, #005ab3); }
.ticket-cat-delivery { background: rgba(0,90,179,0.10); color: #005ab3; }
.ticket-cat-editing { background: rgba(74,71,210,0.12); color: #4a47d2; }
.ticket-cat-reschedule { background: rgba(255,159,10,0.16); color: #956400; }
.ticket-cat-complaint { background: rgba(255,69,58,0.14); color: #c0392b; }
.ticket-cat-general { background: rgba(28,27,26,0.06); color: var(--ink-secondary); }
.ticket-cat-talent { background: rgba(48,209,88,0.16); color: #1f7a37; }
.ticket-status { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 9px; border-radius: 9999px; }
.ticket-status-open { background: rgba(48,209,88,0.16); color: #1f7a37; }
.ticket-status-in_progress { background: rgba(255,159,10,0.16); color: #956400; }
.ticket-status-resolved { background: rgba(0,90,179,0.10); color: #005ab3; }
.ticket-status-closed { background: rgba(28,27,26,0.06); color: var(--ink-tertiary); }
.ticket-prio { position: absolute; top: 14px; right: 16px; display: none; } /* shown only if needed */
.ticket-card .ticket-prio { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #c0392b; }

/* Detail panel internals */
#ticketDetailContent .ticket-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
#ticketDetailContent .ticket-controls label { display: flex; flex-direction: column; gap: 5px; }
#ticketDetailContent .ticket-controls label > span { font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); }
#ticketDetailContent .ticket-controls select { width: 100%; min-height: 40px; background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 8px; }
.ticket-notes { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.ticket-note { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,0.5); border: 1px solid var(--glass-border); }
.ticket-note-inbound { background: rgba(0,90,179,0.06); }
.ticket-note-meta { font-size: 10px; color: var(--ink-tertiary); margin-bottom: 4px; }
.ticket-note-text { font-size: var(--fs-body); color: var(--ink); white-space: pre-wrap; word-break: break-word; }
#ticketDetailContent .note-form { display: flex; flex-direction: column; gap: 8px; }
#ticketDetailContent .note-form textarea { width: 100%; min-height: 56px; background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 12px; padding: 10px 12px; font-family: var(--sans); resize: vertical; }

@media (max-width: 768px) {
  .tickets-grid { grid-template-columns: 1fr; }
  #ticketDetailContent .ticket-controls { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE NAV "More" menu + dashboard/QG mobile polish
   ════════════════════════════════════════════════════════════════════ */
/* Desktop: the More button + popup never show (full nav is in the sidebar). */
.nav-more-btn { display: none; }
.nav-more-pop { display: none; }

@media (max-width: 768px) {
  .nav-more-pop:not([hidden]) {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: fixed;
    right: 16px;
    bottom: calc(88px + env(safe-area-inset-bottom));
    min-width: 190px;
    padding: 6px;
    background: var(--mid-surface-2, #fff);
    border: 1px solid var(--glass-border, rgba(28,27,26,0.08));
    border-radius: 16px;
    box-shadow: 0 16px 40px -12px rgba(28,27,26,0.28);
    z-index: 120;
  }
  .nav-more-pop .more-item {
    display: flex; align-items: center; gap: 12px;
    width: 100%; padding: 12px 14px;
    border: none; background: none; border-radius: 12px;
    font-family: var(--sans); font-size: 14px; font-weight: 500;
    color: var(--ink, #1c1b1a); cursor: pointer; text-align: left;
  }
  .nav-more-pop .more-item:hover { background: var(--surface-container-low, #f7f3f0); color: var(--primary, #005ab3); }
  .nav-more-pop .more-item .material-symbols-outlined { font-size: 22px; color: var(--ink-tertiary, #9A9994); }
  .nav-more-btn.is-open { color: var(--primary, #005ab3); }
  .nav-more-btn.is-open .material-symbols-outlined { color: var(--primary, #005ab3); }

  /* Dashboard: equal-width cards, no horizontal overflow (was pushing past the
     right edge because grid items default to min-width:auto). */
  #page-dashboard, #page-dashboard .dash-stats, #page-dashboard .dash-grid { min-width: 0; }
  #page-dashboard .dash-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .dash-stat { min-width: 0; overflow: hidden; }
  .dash-stat-value { font-size: 28px; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-grid .dash-card { height: 340px; min-width: 0; }
  /* Trend bars scroll inside the card instead of overflowing the page. */
  .dash-trend { overflow: hidden; }
  .dash-bars { overflow-x: auto; overflow-y: hidden; }
  .dash-bar { min-width: 16px; }
  .dash-bar-x { font-size: 8px; }

  /* Quote Generator: trim side padding so the builder uses the full width.
     (Was shell 20px + qg-shell 16px = 36px each side.) */
  #page-quotes .qg-shell { padding: 0; }
  #page-quotes .qg-card { padding: 16px 14px; }
}

/* ── Cross-link buttons (Chat ↔ Lead ↔ Contact) ──────────────────────── */
.inbox-thread-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* The `hidden` attribute must beat `.button { display: inline-flex }` — otherwise
   these appear even with no linked record and clicking them no-ops. */
#inboxViewLeadBtn[hidden], #inboxViewContactBtn[hidden] { display: none !important; }
/* Same hidden-attribute fix for these .button elements. */
#loadSavedQuoteBtn[hidden], #dealEditQuoteBtn[hidden] { display: none !important; }
.section-action-group { display: flex; gap: 6px; flex-wrap: wrap; }
.detail-quick-actions { display: flex; gap: 8px; margin-bottom: 14px; }
.detail-quick-actions .button { flex: 0 0 auto; }
@media (max-width: 560px) {
  /* Keep the chat header tidy on phones — icons only for the link buttons. */
  .inbox-thread-actions #inboxViewLeadBtn,
  .inbox-thread-actions #inboxViewContactBtn { font-size: 0; padding: 6px 8px; }
  .inbox-thread-actions #inboxViewLeadBtn .inline-icon,
  .inbox-thread-actions #inboxViewContactBtn .inline-icon { font-size: 20px; margin: 0; }
}

/* ════════════════════════════════════════════════════════════════════
   TICKETS board — same liquid-glass kanban as Leads (scoped #page-tickets)
   ════════════════════════════════════════════════════════════════════ */
#page-tickets { position: relative; }
#page-tickets #ticketsBoard { grid-template-columns: repeat(4, minmax(280px, 1fr)); gap: 16px; }
#page-tickets .kanban-col {
  background: rgba(255,255,255,0.62);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 16px;
  box-shadow: 0 8px 32px -10px rgba(28,27,26,0.10);
}
#page-tickets .kanban-col-header { border-bottom: 1px solid rgba(28,27,26,0.06); }
#page-tickets .kanban-col-title { color: #65645F; letter-spacing: 0.08em; }
#page-tickets .kanban-col-meta { color: #9A9994; font-weight: 600; }
#page-tickets .kanban-col-body { padding: 10px; gap: 12px; }
#page-tickets .kanban-card {
  background: rgba(255,255,255,0.88);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.9);
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 4px 12px -2px rgba(28,27,26,0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#page-tickets .kanban-card:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(28,27,26,0.18); }

@media (min-width: 901px) {
  #page-tickets #ticketsBoard {
    height: calc(100dvh - 200px);
    overflow-x: auto; overflow-y: hidden; padding-bottom: 2px;
  }
  #page-tickets .kanban-col { height: 100%; min-height: 0; overflow: hidden; }
  #page-tickets .kanban-col-header { flex: 0 0 auto; }
  #page-tickets .kanban-col-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
  #page-tickets .kanban-col-body::-webkit-scrollbar { width: 6px; }
  #page-tickets .kanban-col-body::-webkit-scrollbar-thumb { background: rgba(28,27,26,0.12); border-radius: 10px; }
}

@media (max-width: 900px) {
  #page-tickets #ticketsBoard { display: block; overflow-x: hidden; padding: 0 0 90px; }
  #page-tickets .kanban-col { display: none; min-height: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border: none; box-shadow: none; }
  #page-tickets .kanban-col.is-mobile-active { display: flex; }
  #page-tickets .kanban-col .kanban-col-header { display: none; }
  #page-tickets .kanban-col-body { padding: 0; gap: 14px; }
  #page-tickets .kanban-card { border-radius: 18px; padding: 16px; }
}

/* ── Chat side panel (pops in over any page) ─────────────────────────── */
#chatDetailContent { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#chatDetailContent .chatpanel-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--glass-border);
  background: rgba(255,255,255,0.25);
}
#chatDetailContent .chatpanel-head h2 { margin: 0; font-size: var(--fs-title3); font-weight: 600; }
#chatDetailContent .chatpanel-head #chatPanelMeta { display: inline-flex; align-items: center; gap: 6px; }
#chatDetailContent .chatpanel-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.chatpanel-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; margin: 0; }
#chatPanelMessages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.chatpanel-body .inbox-compose { flex: 0 0 auto; }
#chatPanelLeadBtn[hidden], #chatPanelContactBtn[hidden] { display: none !important; }
@media (max-width: 768px) {
  #chatDetailContent { height: 88dvh; }
  #chatDetailContent .chatpanel-actions { width: 100%; margin-left: 0; }
}

/* Compose attach button (chat composers) */
.compose-attach { flex: 0 0 auto; min-height: 44px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; }
.compose-attach .material-symbols-outlined { font-size: 20px; }
.compose-attach:disabled { opacity: 0.5; cursor: progress; }

/* ── Dashboard: conversion funnel + loss reasons ─────────────────────── */
.dash-funnel-card { margin-bottom: 24px; }
.dash-funnel { display: flex; flex-direction: column; gap: 10px; }
.dash-funnel-row { display: grid; grid-template-columns: 150px 1fr auto auto; align-items: center; gap: 12px; }
.dash-funnel-label { font-size: var(--fs-caption); font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-funnel-bar { height: 22px; background: rgba(28,27,26,0.05); border-radius: 8px; overflow: hidden; }
.dash-funnel-bar.small { height: 8px; border-radius: 6px; margin-top: 4px; }
.dash-funnel-fill { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--primary, #005ab3), var(--accent-deep, #0064E3)); transition: width 280ms cubic-bezier(0.16,1,0.3,1); }
.dash-funnel-fill.warn { background: rgba(255,159,10,0.7); }
.dash-funnel-count { font-weight: 700; font-size: var(--fs-body); color: var(--ink); min-width: 28px; text-align: right; }
.dash-funnel-conv { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-tertiary); min-width: 44px; text-align: right; }
@media (max-width: 640px) {
  .dash-funnel-row { grid-template-columns: 96px 1fr auto; }
  .dash-funnel-conv { display: none; }
}

/* Deal panel: loss-reason dropdown */
.detail-loss-reason { margin: 6px 0 0; }
.detail-loss-reason .loss-reason-select { width: 100%; min-height: 38px; background: var(--field-bg); border: 1px solid var(--outline-variant); border-radius: 8px; font-family: var(--sans); }

/* ─── Follow-ups (human-in-the-loop review & send queue) ─────────────────── */
.nav-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:6px; border-radius:9999px; background:var(--danger,#FF453A); color:#fff; font-size:11px; font-weight:600; line-height:1; }
.followups-list { display:flex; flex-direction:column; gap:12px; max-width:720px; }
.fu-card { background:var(--glass-card,#fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:14px; padding:14px 16px; box-shadow:var(--glass-shadow,0 1px 3px rgba(0,0,0,0.05)); }
.fu-head { display:flex; flex-direction:column; gap:3px; margin-bottom:8px; }
.fu-who { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.fu-name { font-weight:600; font-size:15px; color:var(--ink,#1c1b1a); }
.fu-stage { font-size:11px; font-weight:600; letter-spacing:.02em; padding:2px 8px; border-radius:9999px; background:var(--pale-blue,#E1F3FE); color:var(--blue-text,#1F6C9F); }
.fu-ctx { font-size:12.5px; color:var(--muted,#65645F); }
.fu-msg { width:100%; box-sizing:border-box; resize:vertical; min-height:60px; padding:10px 12px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; background:var(--field-bg,rgba(255,255,255,0.92)); font-family:var(--sans); font-size:14px; line-height:1.5; color:var(--ink,#1c1b1a); }
.fu-actions { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; align-items:center; }
.fu-actions .fu-send { display:inline-flex; align-items:center; gap:6px; text-decoration:none; }
.fu-actions .material-symbols-outlined { font-size:18px; }
@media (max-width:560px){ .fu-actions .button { flex:1 1 auto; justify-content:center; } .followups-list { padding-bottom:84px; } }

/* ─── Pricing Catalog editor ─────────────────────────────────────────────── */
.pricing-editor { display:flex; flex-direction:column; gap:18px; max-width:1000px; padding-bottom:80px; }
.pc-section { background:var(--glass-card,#fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:14px; padding:16px; box-shadow:var(--glass-shadow,0 1px 3px rgba(0,0,0,0.05)); }
.pc-section > h3, .pc-sec-head h3 { margin:0 0 12px; font-size:15px; font-weight:600; }
.pc-sec-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.pc-svc-list { display:flex; flex-direction:column; gap:12px; }
.pc-svc { border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; padding:12px; background:rgba(255,255,255,0.5); }
.pc-svc-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.pc-svc-name { flex:1 1 auto; font-weight:600; }
.pc-svc-cat { width:130px; }
.pc-svc-pat { width:100%; margin-bottom:10px; font-size:12px; color:var(--muted); }
.pc-svc input { padding:7px 9px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:7px; background:var(--mid-surface-2, #fff); font-family:var(--sans); font-size:13px; }
.pc-tiers { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.pc-tier { border:1px solid var(--line,rgba(0,0,0,0.07)); border-radius:9px; padding:10px; background:rgba(255,255,255,0.6); }
.pc-tier-name { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin-bottom:8px; }
.pc-mini { display:flex; flex-direction:column; gap:3px; margin-bottom:6px; }
.pc-mini > span { font-size:11px; color:var(--muted); }
.pc-mini input { width:100%; box-sizing:border-box; padding:6px 8px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:6px; background:var(--mid-surface-2, #fff); font-size:13px; font-family:var(--sans); }
.pc-price input { font-weight:600; }
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; }
.pc-del { color:var(--danger,#c0392b); }
@media (max-width:680px){ .pc-tiers { grid-template-columns:1fr; } .pricing-editor { padding-bottom:96px; } }

/* ─── Pricing-page quote builder ─────────────────────────────────────────── */
.pc-builder { border:1px solid var(--accent-deep,#0064E3); }
.qb-services { display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px; }
.qb-svc { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:9999px; background:var(--mid-surface-2, #fff); font-size:13px; cursor:pointer; }
.qb-svc input { margin:0; }
.qb-svc:has(input:checked) { background:var(--pale-blue,#E1F3FE); border-color:var(--accent-deep,#0064E3); font-weight:600; }
.pc-check { display:inline-flex; align-items:center; gap:7px; font-size:13px; margin:4px 0 10px; }
.qb-actions { display:flex; gap:8px; flex-wrap:wrap; }
.qb-result { margin-top:12px; font-size:13.5px; }
.qb-result .qb-pkg { padding:4px 0; }
.qb-ok { color:#1f7a37; font-weight:600; }
.qb-ok a { color:var(--accent-deep,#0064E3); }
.qb-err { color:var(--danger,#c0392b); }

/* ─── Quote Catalog (Services / Events / Packages) ───────────────────────── */
.qc-svc-list { display:flex; flex-direction:column; gap:8px; }
.qc-svc { display:flex; gap:8px; align-items:center; }
.qc-svc input[data-f="name"] { flex:1 1 auto; }
.qc-svc input[data-f="unitPrice"] { width:120px; }
.qc-svc select { width:170px; }
.qc-svc input, .qc-svc select, .qc-evt input, .qc-evt select, .qc-pkg input, .qc-pkg select { padding:7px 9px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:7px; background:var(--mid-surface-2, #fff); font-family:var(--sans); font-size:13px; }
.qc-x { border:none; background:none; color:var(--danger,#c0392b); cursor:pointer; font-size:14px; padding:4px 6px; }
.qc-evt-list, .qc-pkg-list { display:flex; flex-direction:column; gap:12px; }
.qc-evt, .qc-pkg { border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; padding:12px; background:rgba(255,255,255,0.55); }
.qc-evt-head { display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.qc-evt-name { flex:1 1 auto; font-weight:600; }
.qc-lines { display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.qc-line { display:flex; gap:8px; align-items:center; }
.qc-line select { flex:1 1 auto; }
.qc-line input[data-f="quantity"] { width:70px; }
.qc-evt-foot { display:flex; gap:16px; align-items:flex-end; margin-top:8px; flex-wrap:wrap; }
.qc-auto { font-size:13px; color:var(--muted); }
.qc-auto b { color:var(--ink,#1c1b1a); }
.qc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px; }
.qc-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:9999px; background:var(--mid-surface-2, #fff); font-size:13px; cursor:pointer; }
.qc-chip:has(input:checked) { background:var(--pale-blue,#E1F3FE); border-color:var(--accent-deep,#0064E3); font-weight:600; }
.qb2-pkg, .qc-pkg-evt { margin:0; }

/* ─── Builder: per-quote team tweak ──────────────────────────────────────── */
.qb2-pkglist { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.qb2-pkgblock { border:1px solid var(--outline-variant,#d8dbe3); border-radius:10px; padding:8px 10px; background:var(--mid-surface-2, #fff); }
.qb2-pkghead { border:none; padding:2px 0; background:none; }
.qb2-events { margin-top:8px; display:flex; flex-direction:column; gap:8px; padding-left:6px; border-left:2px solid var(--pale-blue,#E1F3FE); }
.qb2-ev-head { display:flex; justify-content:space-between; align-items:center; font-size:13.5px; margin-bottom:4px; }
.qb2-ev-price { color:var(--accent-deep,#0064E3); font-weight:600; }
.qb2-svcs { display:flex; flex-wrap:wrap; gap:8px; }
.qb2-q { display:flex; flex-direction:column; gap:2px; }
.qb2-q > span { font-size:11px; color:var(--muted,#65645F); }
.qb2-q input { width:72px; padding:5px 7px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:6px; font-size:13px; font-family:var(--sans); }

.tasks-cat-empty { padding: 14px 4px; color: var(--muted,#65645F); }

/* ─── Stage Suggestions page ─────────────────────────────────────────────── */
.suggestions-list { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.suggestion-card {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-radius: 14px;
  background: var(--glass-card, rgba(255,255,255,0.85));
  border: 1px solid var(--glass-border, rgba(28,27,26,0.08));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.10));
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.suggestion-card:hover { transform: translateY(-1px); box-shadow: 0 12px 36px -10px rgba(28,27,26,0.16); }
.suggestion-main { min-width: 0; flex: 1; }
.suggestion-head { display: flex; align-items: baseline; gap: 10px; }
.suggestion-name { font-weight: 600; font-size: 15px; color: var(--ink,#1c1b1a); }
.suggestion-conf { font-size: 12px; color: var(--muted,#65645F); }
.suggestion-move { display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; flex-wrap: wrap; }
.suggestion-move .material-symbols-outlined { font-size: 18px; color: var(--muted,#9A9994); }
.stage-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.stage-pill.from { background: rgba(28,27,26,0.06); color: var(--muted,#65645F); }
.stage-pill.to { background: rgba(0,100,227,0.12); color: var(--accent-deep,#0064E3); }
.suggestion-reason { margin: 0; }
.suggestion-actions { display: flex; gap: 8px; flex-shrink: 0; }
.suggestion-actions .button { display: inline-flex; align-items: center; gap: 4px; }
.suggestion-actions .material-symbols-outlined { font-size: 18px; }
@media (max-width: 560px) {
  .suggestion-card { flex-direction: column; align-items: stretch; }
  .suggestion-actions { justify-content: stretch; }
  .suggestion-actions .button { flex: 1; justify-content: center; }
}

.recency-chip { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: rgba(28,27,26,0.06); color: var(--muted,#65645F); }
.recency-chip.ghost { background: rgba(255,69,58,0.12); color: var(--danger,#FF453A); }
.recency-chip.owe { background: rgba(0,100,227,0.10); color: var(--accent-deep,#0064E3); }
.recency-chip.parked { background: rgba(255,159,10,0.14); color: var(--warning,#FF9F0A); }

/* ─── Ask Gia concierge card ─────────────────────────────────────────────── */
.askgia-card {
  margin-bottom: 20px; padding: 16px 18px; border-radius: 18px;
  background: var(--glass-card, rgba(255,255,255,0.85));
  border: 1px solid var(--glass-border, rgba(28,27,26,0.08));
  box-shadow: var(--glass-shadow, 0 8px 32px -8px rgba(28,27,26,0.10));
}
.askgia-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.askgia-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, #0064E3, #00b3ff); color: #fff; flex-shrink: 0; }
.askgia-avatar .material-symbols-outlined { font-size: 20px; }
.askgia-title { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.askgia-thread { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.askgia-thread:empty { display: none; }
.askgia-msg { max-width: 82%; padding: 9px 13px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: normal; }
.askgia-msg.me { align-self: flex-end; background: var(--accent-deep, #0064E3); color: #fff; border-bottom-right-radius: 4px; }
.askgia-msg.gia { align-self: flex-start; background: rgba(28,27,26,0.05); color: var(--ink,#1c1b1a); border-bottom-left-radius: 4px; }
.askgia-msg.pending { opacity: 0.6; font-style: italic; }
.askgia-tag { display: block; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-deep,#0064E3); margin-bottom: 2px; }
.askgia-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.askgia-chip { font-size: 12px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--outline-variant,#d8dbe3);
  background: rgba(255,255,255,0.7); color: var(--muted,#65645F); cursor: pointer; }
.askgia-chip:hover { border-color: var(--accent-deep,#0064E3); color: var(--accent-deep,#0064E3); }
.askgia-input { display: flex; gap: 8px; align-items: center; }
.askgia-input input { flex: 1; padding: 11px 14px; border-radius: 12px; border: 1px solid var(--outline-variant,#d8dbe3);
  background: rgba(255,255,255,0.92); font-size: 14px; font-family: var(--sans); }
.askgia-input .button.primary { padding: 10px 14px; }
.askgia-input .material-symbols-outlined { font-size: 18px; }

/* ─── Quote catalog: resource costing cards ──────────────────────────────── */
.qc-svc.cost-card { display:block; padding:12px 14px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:12px; background:rgba(255,255,255,0.6); margin-bottom:10px; }
.qc-svc-top { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:10px; }
.qc-svc-top .qc-svc-name { flex:1; min-width:170px; }
.qc-svc-top select { padding:6px 8px; border-radius:8px; border:1px solid var(--outline-variant,#d8dbe3); background:var(--mid-surface-2, #fff); font-size:13px; }
.qc-cost-grid { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; }
.qc-cost-grid .pc-mini { min-width:96px; }
.qc-svc.perShift .unit-fields { display:none; }
.qc-svc.perUnit .shift-fields { display:none; }
.qc-margin { font-size:12px; display:inline-flex; gap:6px; align-items:center; color:var(--muted,#65645F); padding-bottom:6px; }
.qc-mtag { font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px; background:rgba(28,27,26,0.06); }
.qc-mtag.ok { background:rgba(48,209,88,0.16); color:#1f8a3b; }
.qc-mtag.warn { background:rgba(255,159,10,0.16); color:#b5740a; }
.qc-mtag.bad { background:rgba(255,69,58,0.14); color:#d23b30; }
.qc-evt-shift { padding:5px 9px; border-radius:8px; border:1px solid var(--outline-variant,#d8dbe3); background:var(--mid-surface-2, #fff); font-size:13px; }

/* ─── Quote catalog: package builder (redesigned) ────────────────────────── */
.qc-pkg { padding:14px 16px; }
.qc-pkg-head { display:flex; gap:8px; align-items:center; margin-bottom:14px; }
.qc-pkg-name { flex:1; font-weight:600; font-size:15px; }
.qc-pkg-head .qc-del-pkg { display:inline-flex; align-items:center; padding:6px 9px; }
.qc-pkg-head .qc-del-pkg .material-symbols-outlined { font-size:18px; }
.qc-pkg-grid { display:flex; flex-direction:column; gap:12px; }
.qc-block { background:rgba(0,0,0,0.025); border:1px solid var(--line,rgba(0,0,0,0.07)); border-radius:10px; padding:12px 14px; }
.qc-block-title { margin:0 0 10px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#65645F); }
.qc-block-title .qc-block-hint { font-weight:500; text-transform:none; letter-spacing:0; opacity:.7; }
.qc-addons { display:flex; flex-direction:column; gap:8px; margin-bottom:10px; }
.qc-addon-line { display:flex; gap:8px; align-items:center; }
.qc-addon-line select { flex:1; min-width:0; }
.qc-addon-line .qc-x-times { color:var(--muted); }
.qc-addon-line input[data-f="addonQty"] { width:64px; flex:none; }
.qc-deliv-checks { display:flex; flex-wrap:wrap; gap:18px; margin-top:10px; }
.qc-deliv-checks .pc-check { margin:0; }
.qc-empty { margin:0 0 4px; }

/* ─── Quote page: package header with name / film / BTS+interviews ────────── */
.package-card-head { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; }
.package-card-head .pkg-name-field { grid-column: 1 / -1; }
.package-card-head .pkg-film-field { grid-column: 1 / -1; }
.package-card-head .pkg-deliv-toggles { grid-column: 1 / -1; display:flex; flex-wrap:wrap; gap:20px; align-items:center; padding-top:2px; }
.package-card-head .pkg-deliv-toggles .mini-check { display:inline-flex; align-items:center; gap:7px; font-size:13px; }
.package-card-head .package-actions { grid-column: 1 / -1; display:flex; justify-content:flex-end; gap:8px; }

/* ─── Quote page: Add-event dialog ───────────────────────────────────────── */
.custom-event-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
.ae-overlay { position:fixed; inset:0; background:rgba(20,20,25,0.45); display:grid; place-items:center; z-index:1000; }
.ae-dialog { width:min(460px,92vw); background:var(--mid-surface-2, #fff); border-radius:16px; padding:18px 20px; box-shadow:0 24px 64px -12px rgba(0,0,0,0.35); }
.ae-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.ae-head h3 { margin:0; font-size:16px; }
.ae-field { display:flex; flex-direction:column; gap:4px; margin-bottom:10px; }
.ae-field > span { font-size:12px; color:var(--muted,#65645F); }
.ae-field input, .ae-field select, .ae-row select, .ae-row input { padding:8px 10px; border:1px solid var(--outline-variant,#d8dbe3); border-radius:8px; font-size:14px; font-family:var(--sans); }
.ae-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.ae-row select { flex:1; min-width:0; }
.ae-row .ae-qty { width:64px; }
.ae-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.ae-err { color:var(--danger,#d23b30); font-size:13px; margin:8px 0 0; min-height:16px; }

/* ═══ Ask Gia — floating popup (midnight) ═══ */
.askgia-bubble { position:fixed; bottom:24px; right:24px; z-index:60; width:56px; height:56px; border-radius:50%; border:none; cursor:pointer; background:linear-gradient(135deg,#0064E3,#00b3ff); color:#fff; box-shadow:0 8px 28px rgba(0,90,200,0.45); display:grid; place-items:center; transition:transform .15s; }
.askgia-bubble:hover { transform:scale(1.08); }
.askgia-bubble.hidden { display:none; }
.askgia-bubble .material-symbols-outlined { font-size:26px; }
.askgia-panel { position:fixed; bottom:24px; right:24px; z-index:61; width:min(420px, calc(100vw - 32px)); height:min(620px, calc(100dvh - 48px)); display:flex; flex-direction:column; overflow:hidden; background:var(--mid-surface-2); color:var(--mid-text); border:1px solid var(--mid-line); border-radius:18px; box-shadow:0 24px 64px -12px rgba(0,0,0,0.6); transform:translateY(16px) scale(.98); opacity:0; transition:transform .2s cubic-bezier(.16,1,.3,1), opacity .2s; }
.askgia-panel.open { transform:translateY(0) scale(1); opacity:1; }
.askgia-panel-head { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--mid-line); background:var(--mid-surface-3); }
.askgia-panel .askgia-avatar { width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg,#0064E3,#00b3ff); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.askgia-panel .askgia-avatar .material-symbols-outlined { font-size:19px; }
.askgia-panel .askgia-title { display:flex; flex-direction:column; flex:1; line-height:1.2; min-width:0; }
.askgia-panel .askgia-title strong { color:var(--mid-text); font-size:15px; }
.askgia-status { font-size:11px; color:var(--mid-primary); }
.askgia-iconbtn { background:none; border:none; color:var(--mid-text-2); cursor:pointer; padding:4px; border-radius:6px; display:grid; place-items:center; }
.askgia-iconbtn:hover { background:var(--mid-surface-4); color:var(--mid-text); }
.askgia-panel .askgia-thread { flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; }
.askgia-panel .askgia-msg { max-width:85%; padding:9px 13px; border-radius:14px; font-size:14px; line-height:1.45; white-space:normal; }
.askgia-panel .askgia-msg.me { align-self:flex-end; background:var(--mid-accent); color:var(--mid-on-accent); border-bottom-right-radius:4px; }
.askgia-panel .askgia-msg.gia { align-self:flex-start; background:var(--mid-surface-4); color:var(--mid-text); border-bottom-left-radius:4px; }
.askgia-panel .askgia-msg.pending { opacity:.6; font-style:italic; }
.askgia-panel .askgia-tag { display:block; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mid-primary); margin-bottom:2px; }
.askgia-panel .askgia-chips { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 8px; }
.askgia-panel .askgia-chip { font-size:12px; padding:5px 11px; border-radius:999px; border:1px solid var(--mid-line); background:var(--mid-surface-3); color:var(--mid-text-2); cursor:pointer; }
.askgia-panel .askgia-chip:hover { border-color:var(--mid-accent); color:var(--mid-primary); }
.askgia-panel .askgia-input { display:flex; gap:8px; align-items:center; padding:12px 14px; border-top:1px solid var(--mid-line); background:var(--mid-surface); }
.askgia-panel .askgia-input input { flex:1; padding:11px 14px; border-radius:12px; border:1px solid var(--mid-line); background:var(--mid-base); color:var(--mid-text); font-size:14px; font-family:var(--sans); }
.askgia-panel .askgia-send { width:40px; height:40px; border:none; border-radius:10px; background:var(--mid-accent); color:var(--mid-on-accent); cursor:pointer; display:grid; place-items:center; }
.askgia-panel .askgia-send .material-symbols-outlined { font-size:18px; }
@media (max-width:560px) { .askgia-panel { inset:0; width:100vw; height:100dvh; border-radius:0; } .askgia-bubble { bottom:84px; } }

/* ═══ Dashboard — midnight theme (scoped; re-defines tokens only here) ═══ */
#page-dashboard {
  --ink:var(--mid-text); --ink-secondary:var(--mid-text-2); --ink-tertiary:var(--mid-muted); --muted:var(--mid-text-2);
  --primary:var(--mid-primary); --accent-deep:var(--mid-accent); --line:rgba(255,255,255,0.08); --surface:var(--mid-base);
  background:var(--mid-base); color:var(--mid-text); border-radius:16px; padding:20px;
}
#page-dashboard h1, #page-dashboard h2, #page-dashboard h3 { color:var(--mid-text); }
#page-dashboard .eyebrow { color:var(--mid-primary); }
#page-dashboard .muted, #page-dashboard .small { color:var(--mid-text-2); }
#page-dashboard .dash-stat,
#page-dashboard .dash-card,
#page-dashboard .dash-funnel-card { background:var(--mid-surface-2) !important; border-color:var(--mid-line) !important; }
#page-dashboard .dash-card:hover { background:var(--mid-surface-2) !important; }
#page-dashboard .dash-stat-value { color:var(--mid-primary); }
#page-dashboard .dash-funnel-bar { background:var(--mid-surface-4); }
#page-dashboard .dash-row:hover { background:var(--mid-surface-3); }
#page-dashboard .dash-empty { color:var(--mid-text-2); }
#page-dashboard .dash-avatar.good { background:rgba(48,209,88,0.18); color:#7ee29a; }
#page-dashboard .dash-avatar.warn { background:rgba(255,193,118,0.18); color:var(--mid-tertiary); }
#page-dashboard .dash-avatar { background:var(--mid-surface-4); color:var(--mid-text-2); }
#page-dashboard .button.ghost { background:var(--mid-surface-3); color:var(--mid-text); border:1px solid var(--mid-line); }
#page-dashboard .button.ghost:hover { background:var(--mid-surface-4); }
#page-dashboard .button.primary { background:var(--mid-accent); color:var(--mid-on-accent); }
#page-dashboard input[type="month"], #page-dashboard input[type="date"] { background:var(--mid-surface); color:var(--mid-text); border:1px solid var(--mid-line); border-radius:8px; padding:6px 8px; }
#page-dashboard .dash-month-label { color:var(--mid-text-2); }

/* ═══ Midnight SHELL — only while Dashboard is active ═══ */
body.dash-active { background:var(--mid-base); }
body.dash-active .shell { background:var(--mid-base); }
body.dash-active .app-sidebar { background:var(--mid-surface); border-right-color:var(--mid-line); }
body.dash-active .brand-block strong { color:var(--mid-text); }
body.dash-active .brand-block span { color:var(--mid-muted); }
body.dash-active .nav-item { color:var(--mid-text-2); }
body.dash-active .nav-item:hover { background:var(--mid-surface-3); }
body.dash-active .nav-item.active { background:var(--mid-badge); color:var(--mid-primary); }
body.dash-active .topbar { background:var(--mid-surface-2); border-bottom-color:var(--mid-line); }
body.dash-active .search-shell { background:var(--mid-surface-3); border-color:var(--mid-line); }
body.dash-active .search-shell input { color:var(--mid-text); }
body.dash-active .search-shell input::placeholder { color:var(--mid-muted); }
body.dash-active .search-shell .material-symbols-outlined { color:var(--mid-muted); }
body.dash-active .topbar-actions > .material-symbols-outlined { color:var(--mid-text-2); }
body.dash-active .profile-dot { background:var(--mid-badge); color:var(--mid-text); }
body.dash-active .nav-more-pop { background:var(--mid-surface-2); border-color:var(--mid-line); }
body.dash-active .more-item { color:var(--mid-text-2); }
/* Seamless: drop the inner dark panel's frame so it blends with the dark shell */
body.dash-active #page-dashboard { background:transparent; border-radius:0; padding:0; }

/* Period controls inside the dark dashboard */
#page-dashboard .dash-month-label,
#page-dashboard .dash-range input[type="date"] { background:var(--mid-surface) !important; border-color:var(--mid-line) !important; color:var(--mid-text) !important; }
#page-dashboard .dash-month-label input[type="month"] { color:var(--mid-text); background:transparent; }
#page-dashboard .dash-range-sep { color:var(--mid-text-2); }

/* ═══ Dashboard — Nexus/midnight components (new layout) ═══ */
#page-dashboard .nx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }
@media (max-width:900px){ #page-dashboard .nx-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ #page-dashboard .nx-kpis { grid-template-columns:1fr 1fr; } }
.nx-kpi { background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:16px; padding:16px 18px; }
.nx-kpi-top { display:flex; justify-content:space-between; margin-bottom:12px; }
.nx-kpi-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(56,189,248,0.12); color:var(--mid-accent); }
.nx-kpi-icon .material-symbols-outlined { font-size:20px; }
.nx-kpi-label { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--mid-text-2); }
.nx-kpi-value { margin:4px 0 2px; font-size:26px; font-weight:700; color:var(--mid-text); letter-spacing:-0.01em; }
.nx-kpi-sub { font-size:12px; color:var(--mid-muted); }

.nx-card { background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:16px; padding:18px 20px; margin-bottom:16px; }
.nx-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:16px; }
.nx-card-head h3 { margin:0; font-size:16px; font-weight:600; color:var(--mid-text); display:flex; align-items:center; gap:8px; }
.nx-head-icon { font-size:18px; } .nx-head-icon.warn { color:var(--mid-tertiary); }
.nx-sub { margin:2px 0 0; font-size:13px; color:var(--mid-muted); }
.nx-meta { font-size:12px; color:var(--mid-text-2); }
.nx-pill { font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px; background:var(--mid-surface-4); color:var(--mid-text-2); }
.nx-pill.good { background:rgba(48,209,88,0.18); color:#7ee29a; }
.nx-pill.warn { background:rgba(255,193,118,0.18); color:var(--mid-tertiary); }

/* Chart */
.nx-chart { display:flex; align-items:flex-end; gap:8px; height:200px; }
.nx-bar { flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; height:100%; min-width:0; }
.nx-bar-val { font-size:10px; font-weight:700; color:var(--mid-primary); height:12px; }
.nx-bar-track { flex:1; width:100%; max-width:34px; display:flex; align-items:flex-end; background:rgba(57,72,90,0.30); border-radius:4px 4px 0 0; overflow:hidden; }
.nx-bar-fill { width:100%; min-height:3px; border-radius:4px 4px 0 0; background:linear-gradient(180deg,#7bd0ff,var(--mid-accent)); transition:height .3s cubic-bezier(.16,1,.3,1); }
.nx-bar:hover .nx-bar-fill { background:linear-gradient(180deg,#a6dcff,#5cc7ff); }
.nx-bar-x { font-size:9px; color:var(--mid-muted); white-space:nowrap; }

/* Split layout */
.nx-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start; }
@media (max-width:1024px){ .nx-split { grid-template-columns:1fr; } }
.nx-stack > .nx-card:last-child { margin-bottom:16px; }

/* Funnel */
.nx-funnel { display:flex; flex-direction:column; gap:14px; }
.nx-funnel-head { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; font-size:13px; color:var(--mid-text-2); }
.nx-funnel-head span { flex:1; }
.nx-funnel-head strong { color:var(--mid-text); font-weight:700; }
.nx-funnel-conv { font-size:11px; color:var(--mid-muted); }
.nx-funnel-track { height:38px; background:var(--mid-surface-4); border-radius:10px; overflow:hidden; }
.nx-funnel-fill { height:100%; border-radius:10px; background:var(--mid-accent); transition:width .3s cubic-bezier(.16,1,.3,1); }
.nx-funnel-fill.is-won { background:linear-gradient(90deg,var(--mid-accent),#7bd0ff); box-shadow:0 0 22px rgba(56,189,248,0.45); }

/* Win rate by source */
.nx-srcs { display:flex; flex-direction:column; gap:14px; }
.nx-src-row { display:flex; align-items:center; gap:12px; }
.nx-src-name { width:74px; font-size:13px; color:var(--mid-text-2); }
.nx-src-track { flex:1; height:8px; background:var(--mid-surface-4); border-radius:999px; overflow:hidden; }
.nx-src-fill { display:block; height:100%; border-radius:999px; background:var(--mid-accent); }
.nx-src-pct { width:40px; text-align:right; font-size:13px; color:var(--mid-text); }

/* Lists (attention / positive / calls / loss) — dark rows */
.nx-list .dash-row { background:transparent; border:1px solid transparent; border-radius:10px; }
.nx-list .dash-row:hover { background:var(--mid-surface-3); border-color:var(--mid-line); }
.nx-list .dash-row-title { color:var(--mid-text); }
.nx-list .dash-row-sub, .nx-list .dash-row-time { color:var(--mid-muted); }
/* Positive-leads note: wrap to next row, keep card width unchanged */
.nx-list .dash-row { align-items:flex-start; }
.nx-list .dash-row-sub { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.4; }
.nx-list .dash-row-title { white-space:normal; }
.nx-list .dash-row-amount { color:var(--mid-primary); }
.nx-list .dash-avatar { background:var(--mid-surface-4); color:var(--mid-text-2); }
.nx-list .dash-empty { color:var(--mid-muted); }

/* ═══ Dashboard fixes round 2 ═══ */
/* Funnel: gradient fill (not solid) */
.nx-funnel-fill { background:linear-gradient(90deg,#1f7fc4,#7bd0ff); }
.nx-funnel-fill.is-won { background:linear-gradient(90deg,var(--mid-accent),#a6e3ff); box-shadow:0 0 22px rgba(56,189,248,0.5); }
/* Clickable rows feel interactive */
#page-dashboard .dash-row[data-deal], #page-dashboard .dash-row[data-channel] { cursor:pointer; }
/* Kill the black gap: cap list heights so columns stay balanced + scroll */
.nx-list { max-height:300px; overflow-y:auto; }
.nx-srcs { max-height:300px; overflow-y:auto; }
.nx-stack { display:flex; flex-direction:column; gap:16px; }

/* Floating FABs: + on the right BELOW Gia's icon (both bottom-right) */
.app-sidebar .create-menu { position:fixed; bottom:24px; right:24px; left:auto; z-index:62; }
.create-menu-pop { position:absolute; bottom:calc(100% + 10px); right:0; left:auto; }
.askgia-bubble { bottom:92px; }   /* sits just above the + */
@media (max-width:560px){ .askgia-bubble { bottom:152px; } .app-sidebar .create-menu { bottom:84px; } }

/* Topbar search: compact like the mockup while on Dashboard */
body.dash-active .search-shell { max-width:360px; }
/* Create (+) menu popup — midnight on dashboard */
body.dash-active .create-menu-pop { background:var(--mid-surface-2); border:1px solid var(--mid-line); }
body.dash-active .create-menu-item { color:var(--mid-text); }
body.dash-active .create-menu-item:hover { background:var(--mid-surface-3); }

/* ═══ Dashboard fixes round 3 ═══ */
/* Compact dark search to match the mockup (only on Dashboard) */
body.dash-active .topbar { backdrop-filter:none; -webkit-backdrop-filter:none; }
body.dash-active .search-shell { width:min(100%,300px); }
body.dash-active .search-shell input { background:var(--mid-surface-3); color:var(--mid-text); border:1px solid var(--mid-line); height:36px; }
body.dash-active .search-shell input::placeholder { color:var(--mid-muted); }
body.dash-active .search-shell .material-symbols-outlined { color:var(--mid-muted); }
/* Date range filter (dark) */
#page-dashboard .dash-period { display:flex; align-items:center; gap:10px; }
#page-dashboard .dash-range { display:inline-flex; align-items:center; gap:8px; }
#page-dashboard .dash-range input[type="date"] { background:var(--mid-surface); color:var(--mid-text); border:1px solid var(--mid-line); border-radius:8px; padding:6px 10px; }
#page-dashboard #dashLive { display:inline-flex; align-items:center; gap:4px; background:var(--mid-surface-3); color:var(--mid-primary); border:1px solid var(--mid-line); }
#page-dashboard #dashLive .material-symbols-outlined { font-size:16px; }

/* ═══ Dashboard fixes round 4 — perf + view-all ═══ */
/* Kill GPU-heavy backdrop blur on the dashboard (major lag source) */
body.dash-active .app-sidebar, body.dash-active .topbar { backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* Lists now show a few + View all — no inner scroll needed */
.nx-list { max-height:none; overflow:visible; }
.nx-viewall { display:block; width:100%; text-align:left; margin-top:6px; padding:8px 10px; background:transparent; border:none; border-top:1px solid var(--mid-line); color:var(--mid-primary); font-size:13px; font-weight:600; cursor:pointer; }
.nx-viewall:hover { color:#a6e3ff; }

/* ═══ Dashboard fixes round 5 ═══ */
/* CRITICAL: when hidden, the Gia panel must NOT be laid out (it was an invisible
   overlay covering the Gia bubble + the create (+) button). */
.askgia-panel[hidden] { display:none !important; }
.askgia-panel { z-index:70; }
.askgia-bubble { z-index:71; }
.app-sidebar .create-menu { z-index:72; }
/* Back-to-live: icon-only button, inline with the date range */
#page-dashboard #dashLive { padding:6px 8px; }

/* ═══ Dashboard fixes round 6 — full scrollable lists ═══ */
/* Re-enable in-card scroll (round 4 had disabled it for the view-all variant). */
.nx-list { max-height:360px; overflow-y:auto; overscroll-behavior:contain; padding-right:4px; }
.nx-srcs { max-height:360px; overflow-y:auto; }
/* Visible dark scrollbar so it's obvious the card scrolls */
.nx-list::-webkit-scrollbar, .nx-srcs::-webkit-scrollbar { width:8px; }
.nx-list::-webkit-scrollbar-thumb, .nx-srcs::-webkit-scrollbar-thumb { background:var(--mid-line); border-radius:8px; }
.nx-list::-webkit-scrollbar-track, .nx-srcs::-webkit-scrollbar-track { background:transparent; }
.nx-list, .nx-srcs { scrollbar-width:thin; scrollbar-color:var(--mid-line) transparent; }

/* ═══ Hide page titles on all pages (keep action controls) ═══ */
.page-heading .eyebrow, .page-heading h1 { display: none; }

/* ═══ Hide page meta line (e.g. "Updated just now") — paragraphs only, NOT small buttons ═══ */
.page-heading > div p.small, .page-heading > div p.muted { display: none; }
#page-dashboard .dash-refresh-btn { margin-left: 18px; }   /* gap between X and refresh */
#page-dashboard .dash-period { margin-right: 6px; }        /* nudge the group left */
#page-dashboard .dash-refresh-btn .material-symbols-outlined { font-size: 18px; }

/* ═══ Topbar: notifications bell + help button + dropdowns ═══ */
.topbar-iconbtn { background:none; border:none; cursor:pointer; color:var(--muted); display:inline-flex; align-items:center; padding:6px; border-radius:8px; position:relative; }
.topbar-iconbtn:hover { color:var(--primary); background:rgba(0,0,0,0.04); }
.notif-menu { position:relative; display:inline-flex; }
.notif-dot { position:absolute; top:4px; right:4px; width:8px; height:8px; border-radius:50%; background:#FF453A; }
.notif-pop { position:absolute; top:calc(100% + 8px); right:0; width:260px; background:var(--mid-surface-2, #fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,0.25); padding:6px; z-index:80; }
.notif-pop[hidden] { display:none; }
.notif-head { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); padding:8px 10px 4px; }
.notif-item { display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; cursor:pointer; padding:9px 10px; border-radius:8px; font-size:14px; color:var(--ink); text-align:left; }
.notif-item:hover { background:var(--panel-soft,#f7f3f0); }
.notif-item .material-symbols-outlined { font-size:18px; color:var(--muted); }
.notif-label { flex:1; }
.notif-count { font-size:12px; font-weight:700; min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:rgba(0,100,227,0.12); color:var(--accent-deep,#0064E3); display:inline-flex; align-items:center; justify-content:center; }
.notif-chev { margin-left:auto; }

/* Dark dropdowns on the Dashboard (notif + profile) */
body.dash-active .topbar-iconbtn { color:var(--mid-text-2); }
body.dash-active .topbar-iconbtn:hover { color:var(--mid-primary); background:var(--mid-surface-3); }
body.dash-active .notif-pop, body.dash-active .profile-menu-pop { background:var(--mid-surface-2); border-color:var(--mid-line); }
body.dash-active .notif-head { color:var(--mid-muted); }
body.dash-active .notif-item { color:var(--mid-text); }
body.dash-active .notif-item:hover { background:var(--mid-surface-3); }
body.dash-active .notif-item .material-symbols-outlined { color:var(--mid-muted); }
body.dash-active .profile-menu-item { color:var(--mid-text); }
body.dash-active .profile-menu-item:hover { background:var(--mid-surface-3); color:#ffb4ab; }

/* ═══ Dashboard filter dropdown (presets + custom range) ═══ */
#page-dashboard .dash-period { display:flex; align-items:center; gap:10px; }
.dash-filter { position:relative; display:inline-flex; }
.dash-filter-btn { display:inline-flex; align-items:center; gap:6px; }
.dash-filter-btn .dash-filter-caret { font-size:18px; margin-left:2px; }
.dash-filter-btn .material-symbols-outlined { font-size:18px; }
.dash-filter-pop { position:absolute; top:calc(100% + 8px); right:0; width:240px; background:var(--mid-surface-2, #fff); border:1px solid var(--line,rgba(0,0,0,0.08)); border-radius:12px; box-shadow:0 16px 40px -12px rgba(0,0,0,0.25); padding:6px; z-index:80; }
.dash-filter-pop[hidden] { display:none; }
.dash-filter-opt { display:block; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:9px 12px; border-radius:8px; font-size:14px; color:var(--ink,#1c1b1a); }
.dash-filter-opt:hover { background:var(--panel-soft,#f7f3f0); }
.dash-filter-custom { border-top:1px solid var(--line,rgba(0,0,0,0.08)); margin-top:6px; padding:10px 12px 8px; display:flex; flex-direction:column; gap:8px; }
.dash-filter-custom-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--muted,#65645F); }
.dash-filter-custom .dash-range { display:flex; align-items:center; gap:6px; }
.dash-filter-custom input[type="date"] { flex:1; min-width:0; padding:6px 8px; border-radius:8px; border:1px solid var(--outline-variant,#c0c6d6); background:var(--mid-surface-2, #fff); font:inherit; }

/* Dark on the Dashboard */
body.dash-active .dash-filter-pop { background:var(--mid-surface-2); border-color:var(--mid-line); }
body.dash-active .dash-filter-opt { color:var(--mid-text); }
body.dash-active .dash-filter-opt:hover { background:var(--mid-surface-3); }
body.dash-active .dash-filter-custom { border-top-color:var(--mid-line); }
body.dash-active .dash-filter-custom-label { color:var(--mid-muted); }
body.dash-active .dash-filter-custom input[type="date"] { background:var(--mid-base); color:var(--mid-text); border-color:var(--mid-line); }

/* ═══ Create (+) FAB — circular, same size as the Gia bubble ═══ */
.app-sidebar .create-fab { width:56px; height:56px; border-radius:50%; }
.app-sidebar .create-fab .material-symbols-outlined { font-size:26px; }
/* Open the + menu upward, clearing the area; Gia bubble hides while it's open. */
.app-sidebar .create-menu-pop { bottom:calc(100% + 12px); right:0; left:auto; }

/* ═══ Refresh overlay (breathing text) + spinning refresh icon ═══ */
.refresh-overlay { position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:rgba(10,15,18,0.55); backdrop-filter:blur(2px); opacity:0; pointer-events:none; transition:opacity .2s ease; }
.refresh-overlay.show { opacity:1; pointer-events:auto; }
.refresh-breathe { font-family:var(--sans); font-size:22px; font-weight:600; letter-spacing:.01em; color:var(--mid-text); animation:refreshBreathe 1.4s ease-in-out infinite; }
@keyframes refreshBreathe { 0%,100% { opacity:.45; transform:scale(0.98); } 50% { opacity:1; transform:scale(1.03); } }
.dash-refresh-btn.spinning .material-symbols-outlined { animation:refreshSpin .8s linear infinite; }
@keyframes refreshSpin { to { transform:rotate(360deg); } }

/* ═══ Sidebar polish (dashboard) to match the Nexus mockup ═══ */
body.dash-active .brand-block strong { color:var(--mid-primary); }                 /* blue brand */
body.dash-active .nav-item { border-radius:10px; }
body.dash-active .nav-item.active { background:rgba(56,189,248,0.14); color:var(--mid-primary); }   /* subtle blue fill */
body.dash-active .nav-item.active .material-symbols-outlined { color:var(--mid-primary); }
body.dash-active .nav-item:hover:not(.active) { background:#222a30; }

/* ═══ Create (+) FAB — subtle blue glow ═══ */
.app-sidebar .create-fab { box-shadow:0 8px 26px rgba(0,90,200,0.45); animation:fabGlow 3.2s ease-in-out infinite; }
@keyframes fabGlow {
  0%, 100% { box-shadow:0 8px 26px rgba(0,90,200,0.40), 0 0 0 rgba(56,189,248,0); }
  50%      { box-shadow:0 8px 30px rgba(0,90,200,0.55), 0 0 22px rgba(56,189,248,0.45); }
}

/* ═══ Sidebar: flush panel (not a card) + correct midnight blues on the shell ═══ */
/* The shell (sidebar/topbar) sits OUTSIDE #page-dashboard, so it was using the
   light theme's navy --primary. Redefine the midnight tokens at body level. */
body.dash-active {
  --primary:var(--mid-accent); --accent-deep:var(--mid-accent); --primary-container:var(--mid-accent);
  --ink:var(--mid-text); --ink-secondary:var(--mid-text-2); --ink-tertiary:var(--mid-muted); --muted:var(--mid-text-2);
  --line:rgba(255,255,255,0.08);
}
@media (min-width: 769px) {
  body.dash-active .app-sidebar {
    inset:0 auto 0 0; width:248px;
    border:none; border-right:1px solid var(--mid-line); border-radius:0;
    background:var(--mid-surface); box-shadow:none; padding:22px 14px 16px;
  }
}
body.dash-active .brand-block strong { color:var(--mid-accent); }
body.dash-active .nav-item.active { background:rgba(56,189,248,0.12); color:var(--mid-primary); }
body.dash-active .nav-item.active .material-symbols-outlined { color:var(--mid-primary); }

/* ═══ Uniform font everywhere — buttons/inputs don't inherit font-family by default ═══ */
button, input, select, textarea, optgroup, .nav-item, .more-item, .create-menu-item {
  font-family: var(--sans);
}
/* ═══ Topbar search — pill (rounded sides) like the reference ═══ */
.search-shell input { border-radius: 9999px; padding-right: 16px; }

/* ═══ Positive leads — AI score badge ═══ */
.nx-score { min-width:34px; height:24px; padding:0 8px; border-radius:999px; font-size:13px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; background:var(--mid-surface-4); color:var(--mid-text-2); }
.nx-score.hot  { background:rgba(48,209,88,0.18);  color:#7ee29a; }
.nx-score.warm { background:rgba(56,189,248,0.16); color:var(--mid-primary); }
.nx-score.cold { background:rgba(255,159,10,0.16); color:var(--mid-tertiary); }

/* ═══ Dashboard card drag-to-rearrange ═══ */
.nx-card-head { position:relative; }
.nx-drag { cursor:grab; display:inline-flex; align-items:center; color:var(--mid-text-3); margin:-2px 2px -2px -4px; opacity:.55; transition:opacity .15s; touch-action:none; }
.nx-card-head:hover .nx-drag { opacity:1; }
.nx-drag:active { cursor:grabbing; }
.nx-drag .material-symbols-outlined { font-size:18px; }
.nx-card.nx-dragging { opacity:.45; outline:2px dashed var(--mid-accent); outline-offset:-2px; }
.nx-card.nx-drop-before { box-shadow:0 -3px 0 0 var(--mid-accent); }
.nx-card.nx-drop-after  { box-shadow:0 3px 0 0 var(--mid-accent); }
.nx-stack.nx-drop-target { outline:2px dashed rgba(56,189,248,0.4); outline-offset:4px; border-radius:18px; }

/* ═══════════════════════════════════════════════════════════════
   LEADS — Midnight theme (Nexus/Kanban mockup). Scoped to body.leads-active
   so it overrides the earlier light "liquid glass" #page-leads block.
   The dark shell (sidebar/topbar) is shared via body.dash-active.
   ═══════════════════════════════════════════════════════════════ */
body.leads-active #page-leads { background:transparent; }
body.leads-active #page-leads::before { display:none; } /* kill light gradient orbs */
body.leads-active #page-leads .page-heading h1 { color:var(--mid-text); }
body.leads-active #page-leads .page-heading .eyebrow { color:var(--mid-primary); }

/* Search + filter controls */
body.leads-active #page-leads .search-shell { background:var(--mid-surface-2); border:1px solid var(--mid-line); }
body.leads-active #page-leads .search-shell input { color:var(--mid-text); background:transparent; }
body.leads-active #page-leads .search-shell input::placeholder { color:var(--mid-muted); }
body.leads-active #page-leads .search-shell .material-symbols-outlined { color:var(--mid-muted); }
body.leads-active #page-leads .filter-select { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:10px; }
body.leads-active #page-leads .button.ghost { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text-2); }
body.leads-active #page-leads .button.ghost:hover { background:var(--mid-surface-3); color:var(--mid-primary); }

/* View toggle (Kanban / List) */
.leads-view-toggle { display:inline-flex; gap:2px; background:var(--mid-surface-2); border:1px solid var(--mid-line); border-radius:10px; padding:2px; }
.leads-view-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:30px; border:none; background:transparent; color:var(--mid-muted); border-radius:8px; cursor:pointer; transition:all .15s; }
.leads-view-btn:hover { color:var(--mid-text-2); }
.leads-view-btn.is-active { background:var(--mid-accent); color:var(--mid-on-accent); }
.leads-view-btn .material-symbols-outlined { font-size:20px; }
body:not(.leads-active) .leads-view-toggle { background:var(--glass-card,#fff); border:1px solid var(--line,#e5e5e5); }
body:not(.leads-active) .leads-view-btn.is-active { background:var(--accent-deep,#0064E3); color:#fff; }

/* Kanban columns + cards (midnight) */
body.leads-active #page-leads .kanban-col { background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:14px; }
body.leads-active #page-leads .kanban-col-header { border-bottom:1px solid var(--mid-line); }
body.leads-active #page-leads .kanban-col-title { color:var(--mid-text); letter-spacing:.02em; font-weight:600; }
body.leads-active #page-leads .kanban-col-meta { color:var(--mid-muted); }
body.leads-active #page-leads .kanban-empty { color:var(--mid-text-3); }
body.leads-active #page-leads .kanban-card {
  background:var(--mid-surface-2); backdrop-filter:none; -webkit-backdrop-filter:none;
  border:1px solid var(--mid-line); border-radius:14px; color:var(--mid-text);
}
body.leads-active #page-leads .kanban-card:hover { border-color:var(--mid-accent); transform:translateY(-2px); box-shadow:0 10px 25px -5px rgba(56,189,248,0.12); }
body.leads-active #page-leads .kanban-card.is-selected { border-color:var(--mid-primary); box-shadow:0 0 0 1px var(--mid-primary) inset; }
body.leads-active #page-leads .kanban-card-title { color:var(--mid-text); font-weight:600; }
body.leads-active #page-leads .kanban-card-amount { color:var(--mid-primary); font-weight:700; }
body.leads-active #page-leads .kanban-card-events { color:var(--mid-muted); }
body.leads-active #page-leads .source-pill { background:var(--mid-surface-3); color:var(--mid-text-2); border:1px solid var(--mid-line); }
body.leads-active #page-leads .op-pill { border-radius:999px; }
body.leads-active #page-leads .op-pill-live { background:rgba(56,189,248,0.15); color:var(--mid-primary); }
body.leads-active #page-leads .op-pill-quote { background:rgba(48,209,88,0.16); color:#7ee29a; }
body.leads-active #page-leads .op-pill-crm { background:var(--mid-surface-3); color:var(--mid-text-2); }
body.leads-active #page-leads .kanban-card-check { border-color:var(--mid-line); color:var(--mid-primary); }

/* Mobile stage pills */
body.leads-active #page-leads .leads-stage-pill { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text-2); }
body.leads-active #page-leads .leads-stage-pill.is-active { background:var(--mid-accent); color:var(--mid-on-accent); border-color:var(--mid-accent); }
body.leads-active #page-leads .leads-stage-pill .count { color:var(--mid-muted); }

/* Selection bar */
body.leads-active #page-leads .leads-select-bar { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); }

/* ── List / table view ── */
.leads-list { width:100%; overflow-x:auto; }
.leads-table { width:100%; border-collapse:collapse; }
.leads-table thead th { text-align:left; font-size:12px; font-weight:500; letter-spacing:.05em; text-transform:uppercase; padding:12px 16px; }
.leads-table tbody td { padding:14px 16px; font-size:14px; }
.leads-table .ll-name { font-weight:600; display:flex; flex-direction:column; gap:2px; }
.leads-table .ll-name .ll-sub { font-weight:400; font-size:12px; opacity:.7; }
.leads-table .ll-value { font-weight:700; }
.leads-table .ll-chev { text-align:right; }
.leads-table .ll-stage { display:inline-block; padding:3px 10px; border-radius:999px; font-size:12px; font-weight:600; }
/* Midnight list */
body.leads-active .leads-list { background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:14px; overflow:hidden; }
body.leads-active .leads-table thead { background:var(--mid-surface-3); }
body.leads-active .leads-table thead th { color:var(--mid-text-2); border-bottom:1px solid var(--mid-line); }
body.leads-active .leads-table tbody tr { border-bottom:1px solid var(--mid-surface-3); cursor:pointer; transition:background .12s; }
body.leads-active .leads-table tbody tr:hover { background:var(--mid-surface-2); }
body.leads-active .leads-table td { color:var(--mid-text); }
body.leads-active .leads-table .ll-name .ll-sub, body.leads-active .leads-table .ll-source, body.leads-active .leads-table .ll-time { color:var(--mid-muted); }
body.leads-active .leads-table .ll-value { color:var(--mid-primary); }
body.leads-active .leads-table .ll-chev .material-symbols-outlined { color:var(--mid-text-3); font-size:20px; }
.leads-table .ll-stage.good { background:rgba(48,209,88,0.16); color:#7ee29a; }
.leads-table .ll-stage.bad { background:rgba(255,69,58,0.16); color:#ff9f96; }
.leads-table .ll-stage.hot { background:rgba(255,159,10,0.18); color:var(--mid-tertiary); }
.leads-table .ll-stage.info { background:rgba(56,189,248,0.16); color:var(--mid-primary); }
.leads-table .ll-stage.muted { background:var(--mid-surface-4); color:var(--mid-text-2); }

/* ── Lead detail drawer (midnight) — applies when opened over a dark page ── */
body.dash-active .detail-content { background:var(--mid-surface-2); border-left:1px solid var(--mid-line); color:var(--mid-text); }
body.dash-active .detail-panel { color:var(--mid-text); }
body.dash-active .detail-panel h2, body.dash-active .detail-panel h3 { color:var(--mid-text); }
body.dash-active .detail-panel .muted, body.dash-active .detail-panel .detail-stage { color:var(--mid-muted); }
body.dash-active .detail-panel .detail-head { border-bottom:1px solid var(--mid-line); }
body.dash-active .detail-panel input,
body.dash-active .detail-panel select,
body.dash-active .detail-panel textarea {
  background:var(--mid-base); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:8px;
}
body.dash-active .detail-panel input::placeholder, body.dash-active .detail-panel textarea::placeholder { color:var(--mid-text-3); }
body.dash-active .detail-panel .stage-select { background:var(--mid-base); color:var(--mid-text); }
body.dash-active .detail-panel .detail-close,
body.dash-active .detail-panel .button.ghost { background:var(--mid-surface-3); border:1px solid var(--mid-line); color:var(--mid-text-2); }
body.dash-active .detail-panel .button.ghost:hover { background:var(--mid-surface-4); color:var(--mid-primary); }
body.dash-active .detail-panel .linked-contact-card,
body.dash-active .detail-panel section.panel,
body.dash-active .detail-panel .note-item { background:var(--mid-surface); border:1px solid var(--mid-line); border-radius:12px; }
body.dash-active .detail-panel code { background:var(--mid-base); color:var(--mid-primary); }
body.dash-active .detail-panel .button.primary { background:var(--mid-accent); color:var(--mid-on-accent); border:none; }
body.dash-active .detail-panel .button.danger { background:#93000a; color:#ffdad6; border:none; }
body.dash-active .detail-panel .expand-label { color:var(--mid-muted); }

/* Leads toolbar — keep view toggle + filter + sort on one line */
#page-leads .page-actions { flex-wrap:nowrap; align-items:center; }

/* Leads filter/sort dropdowns — keep panel within the viewport, right-anchored */
#page-leads .page-actions { justify-content:flex-end; }
#page-leads .dash-filter-pop { right:0; left:auto; width:max-content; min-width:200px; max-width:min(260px, calc(100vw - 24px)); }
#page-leads .dash-filter-opt { white-space:nowrap; }

/* Leads view switch — [hidden] must win over the board's explicit display:grid/flex */
#crmKanbanBoard[hidden], #crmLeadsList[hidden] { display:none !important; }

/* Leads filter/sort → icon-only buttons (popup opens on click) */
#leadsFilterLabel, #leadsSortLabel,
#leadsFilter .dash-filter-caret, #leadsSort .dash-filter-caret { display:none; }
#leadsFilter .dash-filter-btn, #leadsSort .dash-filter-btn {
  width:36px; height:32px; padding:0; justify-content:center;
}
#leadsFilter .dash-filter-btn .material-symbols-outlined,
#leadsSort .dash-filter-btn .material-symbols-outlined { margin:0; }

/* Mobile: list view rows wrap to two lines (name + value / stage + time) */
@media (max-width: 768px) {
  .leads-table thead { display:none; }
  .leads-table, .leads-table tbody { display:block; width:100%; }
  .leads-table tr {
    display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center;
    padding:12px 14px; border-bottom:1px solid var(--mid-surface-3);
  }
  .leads-table td { display:block; padding:0; border:none; }
  .leads-table td.ll-name { grid-column:1; grid-row:1; }
  .leads-table td:nth-child(2) { grid-column:1; grid-row:2; }   /* stage chip */
  .leads-table td.ll-value { grid-column:2; grid-row:1; text-align:right; }
  .leads-table td.ll-time { grid-column:2; grid-row:2; text-align:right; }
  .leads-table td.ll-source, .leads-table td.ll-chev { display:none; } /* source shown in sub-line */
  .leads-table td.ll-name .ll-sub { display:block; }
}

/* Mobile: LOCK the leads page to the viewport — only the board / list scrolls,
   so the toolbar + stage pills stay fixed and the bottom nav never overlaps. */
@media (max-width: 900px) {
  body.leads-active { overflow: hidden; }
  body.leads-active .shell {
    height: calc(100dvh - 52px - 96px - env(safe-area-inset-bottom));
    overflow: hidden; padding-top: 8px; padding-bottom: 0;
  }
  #page-leads { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
  /* Toolbar row sits a touch higher with more breathing room before the stage pills. */
  #page-leads .page-heading { flex: 0 0 auto; margin-bottom: 20px; }
  #page-leads .leads-stage-nav { flex: 0 0 auto; }
  #page-leads #crmKanbanBoard { flex: 1 1 auto; min-height: 0; overflow: hidden; padding-bottom: 0; }
  #page-leads .kanban-col.is-mobile-active { display: flex; flex-direction: column; height: 100%; min-height: 0; max-height: none; }
  #page-leads .kanban-col-body { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
  #page-leads .leads-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 12px; }
}/* ═══ Lead detail drawer — mockup layout (header / scroll body / pinned footer) ═══ */
#dealDetailContent, #contactDetailContent, /* ═══ Lead detail drawer — mockup layout (header / scroll body / pinned footer) ═══ */
#contactDetailContent{ display:flex; flex-direction:column; overflow:hidden; }
.dl-head { flex:0 0 auto; padding:18px 20px 14px; border-bottom:1px solid var(--line, rgba(0,0,0,0.08)); }
.dl-head-top { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.dl-head-top h2 { margin:0; font-size:22px; font-weight:600; line-height:1.2; outline:none; }
.dl-close { background:none; border:none; cursor:pointer; color:inherit; padding:4px; border-radius:8px; display:inline-flex; }
.dl-close:hover { background:rgba(0,0,0,0.06); }
.dl-head-row { display:flex; align-items:center; gap:10px; margin-top:12px; flex-wrap:wrap; }
.dl-head-row .stage-select { border-radius:999px; padding:6px 14px; font-size:13px; width:auto; }
.dl-amount { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--muted,#65645F); }
.dl-amount input { width:96px; }
.dl-body { flex:1 1 auto; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:20px; }
.dl-section { display:flex; flex-direction:column; gap:8px; }
.dl-label { margin:0; font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted,#65645F); }
.dl-fields { display:flex; flex-direction:column; gap:10px; }
.dl-field { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.dl-field > label { font-size:14px; color:var(--muted,#65645F); flex:0 0 auto; }
.dl-field > input, .dl-field > select { width:64%; }
.dl-meta { display:flex; flex-direction:column; gap:6px; padding-top:14px; border-top:1px solid var(--line, rgba(0,0,0,0.08)); }
.dl-meta-row { display:flex; justify-content:space-between; font-size:13px; color:var(--muted,#65645F); }
.dl-meta-row span:last-child { color:var(--ink,#1c1b1a); }
.dl-advanced { border-top:1px solid var(--line, rgba(0,0,0,0.08)); padding-top:6px; }
.dl-advanced > summary { cursor:pointer; font-size:13px; color:var(--muted,#65645F); padding:6px 0; list-style:none; }
.dl-advanced > summary::-webkit-details-marker { display:none; }
.dl-advanced > summary::before { content:"⌄ "; }
.dl-advanced[open] > summary::before { content:"⌃ "; }
.dl-advanced-body { display:flex; flex-direction:column; gap:18px; margin-top:10px; }
.dl-foot { flex:0 0 auto; display:flex; gap:10px; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid var(--line, rgba(0,0,0,0.08)); }
.dl-foot .dl-save { flex:1; padding:12px; font-size:15px; border-radius:12px; }
.dl-del { width:48px; flex:0 0 auto; border:none; border-radius:12px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; background:#fdecea; color:#c0392b; }
.dl-del:hover { filter:brightness(0.96); }

/* Midnight overrides (drawer opened over a dark page) */
body.dash-active .dl-head, body.dash-active .dl-meta,
body.dash-active .dl-advanced, body.dash-active .dl-foot { border-color:var(--mid-line); }
body.dash-active .dl-close:hover { background:var(--mid-surface-3); }
body.dash-active .dl-foot .dl-save { background:var(--mid-primary); color:var(--mid-on-accent); border:none; }
body.dash-active .dl-del { background:#93000a; color:#ffdad6; }

/* Kanban card footer: source + status pills inline, wrap if needed */
.kanban-card-footer { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.kanban-card-footer .kanban-card-pills { display:inline-flex; gap:6px; flex-wrap:wrap; margin:0; }/* ═══ Lead drawer — match mockup: card radius + generous padding ═══ */
#dealDetailContent .dl-body, /* ═══ Lead drawer — match mockup: card radius + generous padding ═══ */
#contactDetailContent .dl-body{ padding: 18px 20px 24px; gap: 22px; }/* CONTACT card */
#dealDetailContent .linked-contact-card, /* CONTACT card */
#contactDetailContent .linked-contact-card{
  border-radius: 14px; padding: 18px 20px; margin-bottom: 0;
}#dealDetailContent .linked-contact-head, #contactDetailContent .linked-contact-head{ margin-bottom: 10px; }#dealDetailContent .linked-contact-head h3, #contactDetailContent .linked-contact-head h3{
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted, #65645F);
}#dealDetailContent .linked-contact-name, #contactDetailContent .linked-contact-name{ font-size: 18px; line-height: 1.25; }#dealDetailContent .linked-contact-body, #contactDetailContent .linked-contact-body{ gap: 8px; }#dealDetailContent .linked-contact-meta, #contactDetailContent .linked-contact-meta{ font-size: 13px; gap: 14px; }/* EVENTS textarea */
#dealDetailContent .edit-textarea, /* EVENTS textarea */
#contactDetailContent .edit-textarea{
  padding: 14px 16px; border-radius: 12px; min-height: 92px; line-height: 1.5;
}/* DETAILS fields */
#dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, /* DETAILS fields */
#contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select{ padding: 9px 12px; border-radius: 10px; }#dealDetailContent .dl-head-row .stage-select, #contactDetailContent .dl-head-row .stage-select{ padding: 7px 14px; }#dealDetailContent .dl-amount input, #contactDetailContent .dl-amount input{ padding: 7px 10px; border-radius: 8px; }

/* ═══ Deal drawer mockup fixes ═══ */
/* Square top-left corner on desktop (was a 28px curve) */
@media (min-width: 769px) { #page-leads .detail-content { border-top-left-radius: 0; } }

/* EVENTS / DETAILS / META are plain label+control blocks, not glass sub-cards
   (only CONTACT and the inner controls are boxed, per the mockup) */
#page-leads .detail-body > section.dl-section,
#page-leads .detail-body > section.dl-meta {
  background: transparent; border: none; box-shadow: none; padding: 0; border-radius: 0; margin-bottom: 0;
}/* Notes / conversation-summary boxes — give the text real padding */
#dealDetailContent .note-item, /* Notes / conversation-summary boxes — give the text real padding */
#contactDetailContent .note-item{
  padding: 12px 14px; border-radius: 12px; margin-bottom: 8px; border-bottom: none;
}#dealDetailContent .note-head, #contactDetailContent .note-head{ margin-bottom: 6px; }#dealDetailContent .note-body, #contactDetailContent .note-body{ line-height: 1.5; white-space: pre-wrap; }

/* Mobile kanban: tighter, less hollow cards */
@media (max-width: 900px) {
  #page-leads .kanban-col-body { gap: 10px; }
  #page-leads .kanban-card { padding: 14px 16px; }
  #page-leads .kanban-card-footer { padding-top: 8px; }
}

/* ═══ Deal drawer → floating fully-rounded card (desktop) ═══ */
@media (min-width: 769px) {#dealDetailPanel, #contactDetailPanel{ padding: 18px; align-items: stretch; }#dealDetailPanel .detail-content, #contactDetailPanel .detail-content{
    height: calc(100dvh - 36px);
    width: min(560px, calc(100vw - 36px));
    border-radius: 22px;
    border: 1px solid var(--line, rgba(0,0,0,0.08));
    box-shadow: 0 24px 60px -20px rgba(0,0,0,0.35);
  }
}body.dash-active #dealDetailPanel .detail-content, body.dash-active #contactDetailPanel .detail-content{ border-color: var(--mid-line); }

/* ═══ Kanban drag-to-move ═══ */
#page-leads .kanban-card[draggable="true"] { cursor: grab; }
#page-leads .kanban-card.kb-dragging { opacity: .45; cursor: grabbing; }
#page-leads .kanban-col.kb-drop { outline: 2px dashed var(--mid-accent); outline-offset: -4px; border-radius: 14px; }

/* ═══ List stage chip → clickable + change-stage menu ═══ */
.ll-stage[data-stage-chip] { border: none; cursor: pointer; }
.ll-stage[data-stage-chip]:hover { filter: brightness(1.08); }
.stage-menu {
  position: fixed; z-index: 200; background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  border-radius: 12px; box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5); padding: 6px; max-height: 60vh; overflow-y: auto;
}
.stage-menu-opt {
  display: block; width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--mid-text);
}
.stage-menu-opt:hover { background: var(--mid-surface-3); }
.stage-menu-opt.is-current { color: var(--mid-primary); font-weight: 600; }/* ═══ Contact card phone → call + WhatsApp links ═══ */
#dealDetailContent .contact-phone-row, /* ═══ Contact card phone → call + WhatsApp links ═══ */
#contactDetailContent .contact-phone-row{ display: inline-flex; align-items: center; gap: 12px; }#dealDetailContent .contact-phone-link, #contactDetailContent .contact-phone-link{ display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }#dealDetailContent .contact-phone-link:hover, #contactDetailContent .contact-phone-link:hover{ color: var(--mid-primary); text-decoration: underline; }#dealDetailContent .contact-wa-link, #contactDetailContent .contact-wa-link{
  display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 8px; background: rgba(37,211,102,0.16); color: #25d366; text-decoration: none;
}#dealDetailContent .contact-wa-link:hover, #contactDetailContent .contact-wa-link:hover{ background: rgba(37,211,102,0.28); }

/* Mobile: 2× the gap between the stage pills and the first lead */
@media (max-width: 900px) {
  #page-leads .leads-stage-nav { padding-bottom: 28px; }
}

/* Filter popup group labels (Source / Stage) */
.dash-filter-group-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #65645F); padding: 8px 12px 4px;
}
body.dash-active .dash-filter-group-label { color: var(--mid-muted); }

/* List view: only the name is the clickable link to open the lead */
.leads-table tbody tr { cursor: default; }
.ll-name-link { cursor: pointer; }
.ll-name-link:hover { text-decoration: underline; }
body.leads-active .ll-name-link:hover { color: var(--mid-primary); }

/* 2× the gap between the filter toolbar and the leads list */
#crmLeadsList { margin-top: 20px; }

/* Filter popup accordion (Source / Stage) */
.filter-acc + .filter-acc { border-top: 1px solid var(--line, rgba(0,0,0,0.08)); }
.filter-acc-head {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  background: none; border: none; cursor: pointer; padding: 10px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #65645F);
}
.filter-acc-caret { font-size: 18px; transition: transform .15s; }
.filter-acc.is-open .filter-acc-caret { transform: rotate(180deg); }
.filter-acc-body { display: none; padding-bottom: 4px; }
.filter-acc.is-open .filter-acc-body { display: block; }
body.dash-active .filter-acc + .filter-acc { border-color: var(--mid-line); }
body.dash-active .filter-acc-head { color: var(--mid-muted); }
body.dash-active .filter-acc-head:hover { color: var(--mid-text); }

/* Search box: the wrapper must be transparent — only the input is the pill
   (dash-active gave .search-shell its own rectangular bg behind the rounded input) */
body.dash-active .search-shell { background: transparent !important; border: none !important; }
body.dash-active .search-shell input { border-radius: 9999px; }

/* Mobile: the + create FAB lives inside .sidebar-bottom (hidden on mobile) — keep it
   floating. display:contents renders the fixed FAB without showing the wrapper box. */
@media (max-width: 768px) {
  .app-sidebar .sidebar-bottom { display: contents; }
  .app-sidebar .create-menu { bottom: calc(96px + env(safe-area-inset-bottom)); right: 16px; left: auto; }
  .askgia-bubble { bottom: calc(160px + env(safe-area-inset-bottom)); }
}

/* Glowing X close buttons — same pulse as the + FAB */
.dl-close, .detail-close, #askGiaClose {
  border-radius: 50%;
  animation: fabGlow 3.2s ease-in-out infinite;
}

/* Mobile: stack Gia bubble above the create FAB in one column (like desktop) */
@media (max-width: 768px) {
  .app-sidebar .create-menu { bottom: calc(96px + env(safe-area-inset-bottom)); right: 16px; left: auto; }
  .askgia-bubble { bottom: calc(160px + env(safe-area-inset-bottom)); right: 16px; }
}/* Deal drawer — manual task form */
#dealDetailContent .task-form, /* Deal drawer — manual task form */
#contactDetailContent .task-form{ display: flex; flex-direction: column; gap: 10px; }/* Stack Category + Due full-width with visible labels. Side-by-side jammed the
   native datetime control into a sliver at the panel's right edge, so its picker
   opened off-screen; full-width fields give the picker room and label both. */
#dealDetailContent .task-form-row, so its picker
   opened off-screen; full-width fields give the picker room and label both. */
#contactDetailContent .task-form-row{ display: flex; flex-direction: column; gap: 10px; }#dealDetailContent .task-form-field, #contactDetailContent .task-form-field{
  display: flex; flex-direction: column; gap: 5px; min-width: 0;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #65645F);
}#dealDetailContent .task-form-field select, #dealDetailContent .task-form-field input, #contactDetailContent .task-form-field select, #contactDetailContent .task-form-field input{
  width: 100%; min-width: 0; box-sizing: border-box;
  font-weight: 400; letter-spacing: 0; text-transform: none;
}#dealDetailContent .task-form button, #contactDetailContent .task-form button{ align-self: flex-start; }/* ═══ Deal panel form controls must never overflow the sheet ═══
   Native date / datetime inputs have an intrinsic min-width on iOS Safari and
   refuse to shrink, which (in the label|input:64% rows) forced the whole bottom
   sheet to overflow sideways — clipping the left-edge labels + padding. Cap every
   control to its container and, on mobile, stack each Detail field label-over-
   control at full width with the date input's native intrinsic width neutralized. */
#dealDetailContent input, #dealDetailContent select, #dealDetailContent textarea, stack each Detail field label-over-
   control at full width with the date input's native intrinsic width neutralized. */
#contactDetailContent input, #contactDetailContent select, #contactDetailContent textarea{ box-sizing: border-box; max-width: 100%; min-width: 0; }#dealDetailContent .dl-body, #contactDetailContent .dl-body{ overflow-x: hidden; }

@media (max-width: 768px) {#dealDetailContent .dl-field, #contactDetailContent .dl-field{ flex-direction: column; align-items: stretch; gap: 6px; }#dealDetailContent .dl-field > label, #contactDetailContent .dl-field > label{ flex: none; }#dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, #contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select{ width: 100%; }#dealDetailContent input[type="date"], #dealDetailContent input[type="datetime-local"], #dealDetailContent input[type="time"], #contactDetailContent input[type="date"], #contactDetailContent input[type="datetime-local"], #contactDetailContent input[type="time"]{ -webkit-appearance: none; appearance: none; }
}

/* ═══ Deal / Contact panel — quote history list (always-dark midnight surfaces) ═══ */
.deal-quotes-list { display: flex; flex-direction: column; gap: 8px; }
.quote-row {
  background: var(--mid-surface, var(--mid-surface-2)); border: 1px solid var(--mid-line, var(--mid-line));
  border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
}
.quote-row-top { display: flex; align-items: center; gap: 10px; }
.quote-ver {
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--mid-on-accent, var(--mid-on-accent)); background: var(--mid-accent, var(--mid-primary));
  border-radius: 999px; padding: 2px 8px; flex: 0 0 auto;
}
.quote-total { font-size: 15px; font-weight: 600; color: var(--mid-text, var(--mid-text)); }
.quote-src {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 8px; border-radius: 999px; flex: 0 0 auto;
}
.quote-src-gia { background: rgba(142,213,255,0.16); color: var(--mid-primary); }
.quote-src-manual { background: rgba(255,193,118,0.16); color: var(--mid-tertiary); }
.quote-row .quote-sub { color: var(--mid-muted, var(--mid-muted)) !important; line-height: 1.4; }
.quote-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

/* ════════ FULL-PAGE deal / contact detail (was slide-in panel) ════════ */
.detail-fullpage .detail-overlay { display: none !important; }
.detail-fullpage:not([hidden]) {
  position: fixed !important; top: 58px !important; right: 0 !important; bottom: 0 !important; left: 264px !important; z-index: 38;
  background: var(--mid-base); pointer-events: auto;
}
@media (max-width: 768px) { .detail-fullpage:not([hidden]) { left: 0 !important; bottom: calc(88px + env(safe-area-inset-bottom)) !important; } }
.detail-fullpage .detail-content {
  position: absolute !important; inset: 0 !important; width: 100% !important; max-width: none !important;
  height: 100% !important; transform: none !important; border-radius: 0 !important;
  box-shadow: none !important; border: none !important; background: var(--mid-base) !important;
  display: flex; flex-direction: column; overflow: hidden;
}
.dlp { position: absolute; inset: 0; display: flex; flex-direction: column; min-height: 0; color: var(--mid-text); font-family: var(--sans, "Inter", sans-serif); }

/* Top action bar */
.dlp-topbar { flex: 0 0 auto; min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 20px; background: var(--mid-surface-2); border-bottom: 1px solid var(--mid-line); }
.dlp-topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dlp-back { width: 40px; height: 40px; flex: 0 0 auto; border-radius: 10px; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--mid-text-2); }
.dlp-back:hover { background: var(--mid-surface-3); color: var(--mid-primary); }
.dlp-title { font-size: var(--fs-title3); font-weight: 600; color: var(--mid-primary); margin: 0; outline: none; border-radius: 6px; padding: 2px 6px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dlp-title:focus { background: var(--mid-lowest); box-shadow: 0 0 0 1px var(--mid-line); }
.dlp-badge { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 6px; background: var(--mid-badge); color: #a7b6cc; white-space: nowrap; flex: 0 0 auto; }
.dlp-badge.danger { background: #93000a; color: #ffdad6; }
.dlp-topbar-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.dlp-action { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--mid-line); background: transparent; color: var(--mid-text); }
.dlp-action:hover { background: var(--mid-surface-3); }
.dlp-action.primary { background: var(--mid-accent); color: var(--mid-on-accent); border-color: transparent; }
.dlp-action.primary:hover { filter: brightness(1.06); background: var(--mid-accent); }
.dlp-action.ghost { padding: 6px 12px; font-size: 13px; }
.dlp-action.icon-danger { padding: 8px; width: 40px; justify-content: center; background: #93000a; color: #ffdad6; border-color: transparent; }

/* Scroll body — centered max-width column like the mockup */
.dlp-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 36px 40px 72px; display: flex; flex-direction: column; gap: 16px; width: 100%; }
.dlp-stage-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dlp-card { background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px; padding: 16px 18px; flex: 0 0 auto; }
.dlp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.dlp-card-head h3 { margin: 0; font-size: var(--fs-title3); font-weight: 600; color: var(--mid-text); }
.dlp-stage-select { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mid-muted); white-space: nowrap; }
.dlp-stage-select select { background: var(--mid-lowest); color: var(--mid-text); border: 1px solid var(--mid-line); border-radius: 8px; padding: 6px 10px; font: inherit; min-width: 0; }

/* Pipeline stepper.
   The connector line is pixel-positioned by JS (repaintDealStepper): --dlp-track-l
   = first dot centre, --dlp-track-r = inset to last dot centre, --dlp-fill = px from
   first dot centre to the ACTIVE dot centre. The line lives inside .dlp-stepper (which
   is sized to its content), so it scrolls together with the dots and always terminates
   exactly under the current stage icon — on desktop AND on the mobile scrolling view. */
.dlp-stepper-scroll { overflow-x: auto; }
.dlp-stepper { position: relative; display: flex; justify-content: space-between; gap: 8px; min-width: 100%; }
.dlp-stepper::before { content: ""; position: absolute; top: 18px; left: var(--dlp-track-l, 0px); right: var(--dlp-track-r, 0px); height: 2px; background: var(--mid-line); }
.dlp-stepper::after { content: ""; position: absolute; top: 18px; left: var(--dlp-track-l, 0px); width: var(--dlp-fill, 0px); height: 2px; background: var(--mid-primary); transition: width .4s ease; }
.dlp-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1 1 0; min-width: 0; background: none; border: none; cursor: pointer; font: inherit; padding: 2px 0; }
.dlp-step:hover .dlp-step-dot { border-color: var(--mid-primary); }
.dlp-step:hover .dlp-step-label { color: var(--mid-text); }
.dlp-step-dot { width: 32px; height: 32px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--mid-surface-3); border: 2px solid var(--mid-line); color: var(--mid-muted); }
.dlp-step-dot .material-symbols-outlined { font-size: 18px; }
.dlp-step-done .dlp-step-dot { background: var(--mid-primary); border-color: var(--mid-primary); color: var(--mid-on-accent); }
.dlp-step-current .dlp-step-dot { background: var(--mid-surface-3); border-color: var(--mid-primary); color: var(--mid-primary); box-shadow: 0 0 15px rgba(56,189,248,0.3); }
.dlp-step-label { font-size: 12px; color: var(--mid-muted); text-align: center; line-height: 1.3; }
.dlp-step-current .dlp-step-label { color: var(--mid-text); font-weight: 600; }
.dlp-step-done .dlp-step-label { color: var(--mid-primary); }

/* Profile summary */
.dlp-profile { display: flex; align-items: stretch; gap: 0; }
.dlp-profile-id { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1 1 36%; }
.dlp-avatar { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 12px; background: rgba(142,213,255,0.12); border: 1px solid rgba(142,213,255,0.25); color: var(--mid-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.dlp-profile-idtext { min-width: 0; }
.dlp-profile-name { font-size: var(--fs-body-lg); font-weight: 600; color: var(--mid-text); line-height: 1.25; }
.dlp-profile-role { font-size: 13px; line-height: 1.4; }
.dlp-profile-contact { flex: 1 1 40%; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; padding-left: 24px; margin-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-chip { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mid-text-2); }
.dlp-chip .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
.dlp-profile-stats { flex: 0 0 auto; display: flex; gap: 40px; align-items: center; padding-left: 24px; margin-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-stat { display: flex; flex-direction: column; gap: 6px; }
.deal-task-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 12px; }
.deal-task-row.done { opacity: 0.6; }
.deal-task-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.deal-task-top { display: flex; align-items: center; gap: 8px; }
.deal-task-cat { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--mid-primary); background: rgba(142,213,255,0.12); padding: 2px 7px; border-radius: 999px; flex: 0 0 auto; }
.deal-task-title { font-size: 14px; color: var(--mid-text); }
.deal-task-row.done .deal-task-title { text-decoration: line-through; }
.deal-task-done { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; border: 1px solid var(--mid-line); background: transparent; color: var(--mid-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.deal-task-done:hover { color: var(--mid-primary); border-color: var(--mid-primary); }
.deal-task-check { color: #30D158; flex: 0 0 auto; }
.deal-task-grp { margin: 12px 0 6px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; }
.deal-tasks-list { display: flex; flex-direction: column; gap: 8px; }

/* Name → open contact (no separate button) */
.dlp-name-link { background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: var(--fs-body-lg); font-weight: 600; color: var(--mid-text); cursor: pointer; text-align: left; }
.dlp-name-link:hover { color: var(--mid-primary); text-decoration: underline; }

/* Back row + head card (deal name + contact + call/WA + amount/status + delete) */
.dlp-backrow { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: none; border: none; color: var(--mid-text-2); cursor: pointer; font: inherit; font-size: var(--fs-body); padding: 2px 0; }
.dlp-backrow:hover { color: var(--mid-primary); }
.dlp-headcard { display: flex; align-items: center; gap: 24px; }
.dlp-head-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.dlp-contact-line { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dlp-contact-line .dlp-avatar { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
.dlp-head-right { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; padding-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-head-actions { display: flex; align-items: center; gap: 10px; }
.dlp-head-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.dlp-deal-name { font-size: var(--fs-title2); font-weight: 700; color: var(--mid-text); line-height: 1.2; outline: none; border-radius: 6px; padding: 2px 4px; margin: -2px -4px; }
.dlp-deal-name:focus { background: var(--mid-lowest); box-shadow: 0 0 0 1px var(--mid-line); }
.dlp-contact-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dlp-contact-row .dlp-avatar { width: 36px; height: 36px; font-size: 14px; border-radius: 10px; }
.dlp-name-plain { font-size: var(--fs-body-lg); font-weight: 600; color: var(--mid-text); }
.dlp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; text-decoration: none; flex: 0 0 auto; }
.dlp-call { background: rgba(142,213,255,0.14); color: var(--mid-primary); }
.dlp-call:hover { background: rgba(142,213,255,0.26); }
.dlp-wa { background: rgba(48,209,88,0.16); color: #30D158; }
.dlp-wa:hover { background: rgba(48,209,88,0.28); }
.dlp-icon-btn .material-symbols-outlined { font-size: 18px; }
.dlp-head-sub { font-size: var(--fs-body); }
.dlp-head-stats { flex: 0 0 auto; display: flex; gap: 32px; align-items: center; padding-left: 24px; border-left: 1px solid var(--mid-line); }
.dlp-head-actions { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 10px; }
.dlp-del-icon { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 8px; border: none; background: #93000a; color: #ffdad6; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.dlp-del-icon:hover { filter: brightness(1.12); }
.dlp-del-icon .material-symbols-outlined { font-size: 18px; }

/* Hide the empty transcript box (white-on-dark); dark-theme it once loaded */
#dealTranscriptWrap:empty { display: none; }
#dealTranscriptWrap { background: var(--mid-surface) !important; border-color: var(--mid-line) !important; }/* Kill the outer enclosure border/shadow/radius on the whole detail page */
#dealDetailPanel, #dealDetailPanel .detail-content, #dealDetailContent .dlp, #dealDetailContent .dlp-scroll, /* Kill the outer enclosure border/shadow/radius on the whole detail page */
#contactDetailPanel, #contactDetailPanel .detail-content, #contactDetailContent .dlp, #contactDetailContent .dlp-scroll{
  border: 0 !important; box-shadow: none !important; outline: 0 !important; border-radius: 0 !important;
}#dealDetailPanel .detail-content, #contactDetailPanel .detail-content{ background: var(--mid-base) !important; }/* Uniform form-control + button heights on the detail page */
#dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, #dealDetailContent .task-form input, #dealDetailContent .task-form select, /* Uniform form-control + button heights on the detail page */
#contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select, #contactDetailContent .task-form input, #contactDetailContent .task-form select{ height: 40px; box-sizing: border-box; }#dealDetailContent .task-form, #contactDetailContent .task-form{ gap: 12px; }#dealDetailContent .dlp-addtask-btn, #contactDetailContent .dlp-addtask-btn{ height: 40px; box-sizing: border-box; margin-top: 6px; align-self: flex-start; padding: 0 18px; }

/* Read-only timeline (Activity + Pipeline History) */
.dlp-timeline { display: flex; flex-direction: column; position: relative; }
.dlp-timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 10px; width: 2px; background: var(--mid-line); }
.dlp-tl-item { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.dlp-tl-item:last-child { padding-bottom: 0; }
.dlp-tl-dot { width: 24px; height: 24px; flex: 0 0 auto; border-radius: 999px; background: var(--mid-surface-3); border: 2px solid var(--mid-line); color: var(--mid-muted); display: inline-flex; align-items: center; justify-content: center; z-index: 1; }
.dlp-tl-dot .material-symbols-outlined { font-size: 15px; }
.dlp-tl-dot-start { background: rgba(142,213,255,0.14); border-color: var(--mid-primary); }
.dlp-tl-body { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.dlp-tl-title { font-size: var(--fs-body); font-weight: 600; color: var(--mid-text); }
.dlp-tl-text { font-size: var(--fs-body); color: var(--mid-text-2); margin-top: 2px; line-height: 1.5; white-space: pre-wrap; }
.dlp-tl-meta { font-size: var(--fs-caption); color: var(--mid-muted); margin-top: 3px; }
.dlp-activity-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

/* Quotes table */
.dlp-quotes-tablewrap { overflow-x: auto; border: 1px solid var(--mid-line); border-radius: 10px; }
.dlp-quotes-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.dlp-quotes-table thead { background: var(--mid-surface-3); }
.dlp-quotes-table th { text-align: left; padding: 8px 12px; font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mid-muted); white-space: nowrap; }
.dlp-quotes-table td { padding: 10px 12px; border-top: 1px solid rgba(62,72,79,0.5); color: var(--mid-text); white-space: nowrap; }
.dlp-q-id { color: var(--mid-primary); font-weight: 600; }
.dlp-q-date { color: var(--mid-text-2); }
.dlp-q-deal { color: var(--mid-text-2); }
.dlp-q-total { font-weight: 600; }
.dlp-q-ta-right { text-align: right; }
.dlp-q-status { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: var(--fs-micro); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.dlp-q-status-gia, .dlp-q-status-sent { background: rgba(142,213,255,0.16); color: var(--mid-primary); }
.dlp-q-status-manual { background: rgba(255,193,118,0.16); color: var(--mid-tertiary); }
.dlp-q-status-accepted { background: rgba(48,209,88,0.16); color: #30D158; }
.dlp-q-status-rejected { background: rgba(255,180,171,0.16); color: #ffb4ab; }
.dlp-q-status-superseded { background: var(--mid-surface-3); color: var(--mid-muted); }
/* Consistent icon + text sizing inside the detail page */
.dlp .material-symbols-outlined { font-size: 20px; }
.dlp .inline-icon { font-size: 18px; }
.dlp-q-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.dlp-q-link { background: none; border: 1px solid transparent; padding: 6px 12px; border-radius: 8px; font: inherit; font-size: var(--fs-caption); font-weight: 600; color: var(--mid-primary); cursor: pointer; text-decoration: none; transition: background .14s ease, border-color .14s ease; }
.dlp-q-link:hover { text-decoration: none; background: rgba(142,213,255,0.12); border-color: rgba(142,213,255,0.28); }
.dlp-q-link-muted { color: var(--mid-muted); }
.dlp-q-link-muted:hover { background: rgba(135,146,154,0.14); border-color: rgba(135,146,154,0.3); }
.dlp-q-link-accept { color: #34d399; }
.dlp-q-link-accept:hover { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.3); }
.dlp-q-link-delete { color: var(--mid-danger); }
.dlp-q-link-delete:hover { background: rgba(159,47,45,0.12); border-color: rgba(159,47,45,0.32); }
.dlp-pane-hrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.dlp-pane-hrow .dlp-pane-h { margin: 0; }
.dlp-new-quote { display: inline-flex; align-items: center; gap: 4px; border-color: rgba(142,213,255,0.28); }
.dlp-new-quote .inline-icon { font-size: 18px; }
/* Hide the floating + / Gia buttons while a deal detail page is open */
body.detailpage-open .askgia-bubble,
body.detailpage-open .create-menu { display: none !important; }
.dlp-stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; color: var(--mid-muted); }
.dlp-amount { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: var(--mid-primary); }
.dlp-amount input { width: 130px; background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 8px; padding: 5px 8px; color: var(--mid-text); font: inherit; }
/* Read-only stat value (e.g. contact "Total Value") — matches the deal-amount accent. */
.dlp-amount-static { font-size: 16px; font-weight: 700; color: var(--mid-primary); white-space: nowrap; }
.dlp-status { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-body); font-weight: 600; color: var(--mid-tertiary); }
.dlp-status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--mid-tertiary); }
.dlp-status.danger { color: #ffb4ab; } .dlp-status.danger .dlp-status-dot { background: #ffb4ab; }

/* Tabs */
.dlp-tabwrap { padding: 0; overflow: hidden; }
.dlp-tabs { display: flex; border-bottom: 1px solid var(--mid-line); overflow-x: auto; flex: 0 0 auto; }
.dlp-tab { padding: 12px 18px; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; font-size: var(--fs-body); font-weight: 600; color: var(--mid-text-2); white-space: nowrap; }
.dlp-tab:hover { color: var(--mid-text); }
.dlp-tab.active { color: var(--mid-primary); border-bottom-color: var(--mid-primary); background: rgba(142,213,255,0.05); }
.dlp-pane { padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.dlp-pane[hidden] { display: none !important; }
.dlp-contact-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body); color: var(--mid-text); }
.dlp-contact-line .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
.dlp-contact-muted { color: var(--mid-text-2); }
.dlp-contact-link { display: inline-flex; align-items: center; gap: 8px; color: var(--mid-text); text-decoration: none; }
.dlp-contact-link:hover { color: var(--mid-primary); }
.dlp-wa-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: rgba(48,209,88,0.16); color: #30D158; text-decoration: none; }
.dlp-wa-link:hover { background: rgba(48,209,88,0.28); }
.dlp-wa-link .material-symbols-outlined { font-size: 17px; color: inherit; }
.dlp-open-contact { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--mid-line); background: transparent; color: var(--mid-primary); cursor: pointer; font-size: var(--fs-caption); font-weight: 600; }
.dlp-open-contact:hover { background: var(--mid-surface-3); }
.dlp-open-contact .material-symbols-outlined { font-size: 16px; }
.dlp-pane-h { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid-muted); }
.dlp-quotes-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Contact page: Overview as a left 1/3 card, the rest of the tabs as a right 2/3 card. */
.dlp-2col { display: grid; grid-template-columns: 1fr 2fr; gap: 16px; align-items: start; }
.dlp-overview-card .dl-fields { display: flex; flex-direction: column; gap: 12px; }
/* In the narrow Overview card, stack each field (label over control) for readability. */
.dlp-overview-card .dl-field { flex-direction: column; align-items: stretch; gap: 6px; }
.dlp-overview-card .dl-field > label { flex: none; }
.dlp-overview-card .dl-field > input, .dlp-overview-card .dl-field > select { width: 100%; }
.dlp-overview-card .dl-meta { margin-top: 14px; }
/* Contact notes: compact 3-row input that sits BELOW the list (list is first in DOM). */
#contactDetailContent .note-form { margin: 0; }
#contactDetailContent .note-form textarea { min-height: 76px; max-height: 160px; box-sizing: border-box; }
#contactDetailContent .note-form button { align-self: flex-start; }
@media (max-width: 900px) { .dlp-2col { grid-template-columns: 1fr; } }

/* Overview: read as plain text until "Edit" is clicked (then fields become inputs). */
.dlp-overview-card:not(.editing) .dl-field > input,
.dlp-overview-card:not(.editing) .dl-field > select {
  border-color: transparent !important; background: transparent !important;
  padding-left: 0; padding-right: 0; color: var(--mid-text); pointer-events: none;
  -webkit-appearance: none; appearance: none; background-image: none !important;
}
.dlp-overview-card .dlp-card-head { margin-bottom: 14px; }
.dlp-overview-card.editing #contactEditBtn { color: var(--mid-primary); border-color: var(--mid-primary); }

/* Embedded live chat inside the Messages tab — full-bleed within the card. */
.dlp-pane-flush { padding: 0; }
.contact-chat { display: flex; flex-direction: column; height: min(70vh, 640px); }
.contact-chat .inbox-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 2px; display: flex; flex-direction: column; gap: 8px; background: transparent; scrollbar-width: thin; }
.contact-chat .inbox-messages::-webkit-scrollbar { width: 0; }   /* overlay — no reserved right gutter */
/* Bubbles reach the card edge; tighter text-to-edge padding inside each bubble. */
.contact-chat .msg-bubble { padding: 8px 12px; }
.contact-chat .msg.out { align-self: flex-end; }
.contact-chat .msg.in { align-self: flex-start; }
.contact-chat .msg { max-width: 96%; }
.contact-chat .inbox-compose { flex: 0 0 auto; border-top: 1px solid var(--mid-line); padding: 10px 6px; background: var(--mid-surface); }
.contact-chat .inbox-compose-row { gap: 8px; align-items: flex-end; }
/* Bubbles run right up to the card edges. */
.contact-chat .msg { max-width: 94%; }
/* Send as a round blue icon button (same accent), with a clear disabled state. */
.cc-send-btn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: none; cursor: pointer; background: var(--mid-accent); color: var(--mid-on-accent); display: inline-flex; align-items: center; justify-content: center; transition: background .14s ease; }
.cc-send-btn:hover { background: #5fc9fa; }
.cc-send-btn .material-symbols-outlined { font-size: 20px; }
.cc-send-btn:disabled { background: var(--mid-surface-3); color: var(--mid-text-3); cursor: not-allowed; }
.contact-chat .inbox-compose-row textarea { flex: 1 1 auto; min-width: 0; }
/* Window closed → composer visibly locked. */
.contact-chat .inbox-compose-row textarea:disabled,
.contact-chat .compose-attach:disabled { opacity: 0.45; cursor: not-allowed; }
/* Undelivered message (never reached WhatsApp) — red outline + "!" badge. */
.msg-failed .msg-bubble { background: rgba(255,69,58,0.12) !important; border: 1px solid rgba(255,69,58,0.5); color: #ffb4ab !important; }
.msg-failed .msg-meta { color: #ff8a80; }
.msg-fail { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #ff453a; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
/* Clean status row: window text on the left, actions on the right (no dot, no pill). */
.contact-chat-bar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--mid-line); }
.cc-window-text { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--mid-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-window-text strong { color: var(--mid-text); }
.contact-chat-bar.is-open .cc-window-text { color: var(--mid-primary); }
.contact-chat-bar.is-closed .cc-window-text { color: var(--mid-tertiary); }
.cc-bar-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.cc-tpl-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer; font-size: 12.5px; font-weight: 700; background: var(--mid-tertiary); color: #3a2600; white-space: nowrap; }
.cc-tpl-btn:hover { filter: brightness(1.06); }
.cc-tpl-btn .material-symbols-outlined { font-size: 16px; }
/* Banner: flush strip directly above the composer (not a floating rounded box). */
.contact-chat #contactChatBanner { margin: 0; border-radius: 0; border-left: none; border-right: none; padding: 8px 12px; }
#contactDetailContent .inbox-banner { color: var(--mid-tertiary); }
/* Narrow screens: stack the status row so the window text shows in full (no "Wind…"). */
@media (max-width: 600px) {
  .contact-chat-bar { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 12px; }
  .cc-window-text { white-space: normal; }
  .cc-bar-actions { justify-content: flex-end; }
  .contact-chat .inbox-messages { padding: 12px 2px; }
}
.dlp-quotes-head h3 { margin: 0; }
.dlp-quote-actions { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .dlp-topbar { padding: 10px 16px; gap: 8px; }
  .dlp-title { max-width: 38vw; font-size: 18px; }
  .dlp-action.primary { padding: 8px 12px; }
  .dlp-action.primary span:not(.material-symbols-outlined) { display: none; }
  .dlp-topbar-actions .detail-save-hint { display: none; }
  .dlp-scroll { padding: 16px; gap: 16px; }
  .dlp-card { padding: 16px; }
  .dlp-card-head { margin-bottom: 16px; flex-wrap: wrap; }
  .dlp-stepper-scroll { padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .dlp-stepper { gap: 16px; }
  .dlp-step { min-width: 72px; }
  .dlp-profile { flex-direction: column; gap: 16px; }
  .dlp-profile-contact, .dlp-profile-stats { border-left: none; margin-left: 0; padding-left: 0; border-top: 1px solid var(--mid-line); padding-top: 16px; }
  .dlp-profile-stats { gap: 32px; }
  .dlp-tab { padding: 14px 16px; font-size: 15px; }
  .dlp-pane { padding: 16px; gap: 16px; }
  .dlp-pane-flush { padding: 0; }   /* keep the Messages chat edge-to-edge on mobile (beats the line above) */
  /* Mobile: compact padding (the overlay itself ends above the nav) + stack head card */
  .dlp-scroll { padding: 14px 6px 24px; }
  .dlp-headcard { flex-direction: column; align-items: stretch; gap: 14px; }
  .dlp-head-right { border-left: none; padding-left: 0; padding-top: 14px; border-top: 1px solid var(--mid-line); }
  .dlp-head-actions { margin-left: auto; }
  /* Quotes → stacked cards on mobile (no horizontal scroll) */
  .dlp-quotes-tablewrap { overflow-x: visible; border: none; }
  .dlp-quotes-table, .dlp-quotes-table tbody { display: block; }
  .dlp-quotes-table thead { display: none; }
  .dlp-quotes-table tr { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; border: 1px solid var(--mid-line); border-radius: 12px; padding: 14px; margin-bottom: 10px; background: var(--mid-surface-2); }
  .dlp-quotes-table td { display: block; border: none !important; padding: 0; white-space: normal; }
  .dlp-q-id { grid-column: 1; grid-row: 1; font-size: var(--fs-body-lg); }
  .dlp-q-status-cell { grid-column: 2; grid-row: 1; text-align: right; }
  .dlp-q-date { grid-column: 1 / -1; grid-row: 2; color: var(--mid-muted) !important; }
  .dlp-q-total { grid-column: 1 / -1; grid-row: 3; font-size: var(--fs-title3); }
  .dlp-q-actions { grid-column: 1 / -1; grid-row: 4; justify-content: flex-start; gap: 8px; margin: 8px -4px 0; padding-top: 10px; border-top: 1px solid var(--mid-line); }
  .dlp-q-actions .dlp-q-link { padding: 8px 12px; }
  /* Contact quotes table has a Deal column (no Status) — reflow its mobile card so
     the deal name sits under the version, then date / amount / actions stack. */
  #contactDetailContent .dlp-q-deal { grid-column: 1 / -1; grid-row: 2; color: var(--mid-muted) !important; }
  #contactDetailContent .dlp-q-date { grid-row: 3; }
  #contactDetailContent .dlp-q-total { grid-row: 4; }
  #contactDetailContent .dlp-q-actions { grid-row: 5; }
}/* In-deal stage suggestion card */
#dealDetailContent .deal-suggestion, /* In-deal stage suggestion card */
#contactDetailContent .deal-suggestion{
  background: rgba(56,189,248,0.10); border: 1px solid rgba(56,189,248,0.35);
  border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
}#dealDetailContent .deal-suggestion-head, #contactDetailContent .deal-suggestion-head{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mid-primary); }#dealDetailContent .deal-suggestion-head .material-symbols-outlined, #contactDetailContent .deal-suggestion-head .material-symbols-outlined{ font-size:18px; }#dealDetailContent .deal-suggestion-move, #contactDetailContent .deal-suggestion-move{ display:flex; align-items:center; gap:8px; font-size:15px; }#dealDetailContent .deal-suggestion-move .material-symbols-outlined, #contactDetailContent .deal-suggestion-move .material-symbols-outlined{ font-size:18px; color:var(--mid-muted); }#dealDetailContent .deal-suggestion-move strong, #contactDetailContent .deal-suggestion-move strong{ color:var(--mid-primary); }#dealDetailContent .deal-suggestion-reason, #contactDetailContent .deal-suggestion-reason{ font-size:13px; color:var(--mid-text-2); line-height:1.45; }#dealDetailContent .deal-suggestion-actions, #contactDetailContent .deal-suggestion-actions{ display:flex; gap:8px; margin-top:2px; }

/* Lead score badge on cards/rows */
.kanban-card-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kanban-card-titlerow .kanban-card-title { flex: 1 1 auto; min-width: 0; }
.kanban-card-titlerow .nx-score { flex: 0 0 auto; }
.ll-name-row { display: inline-flex; align-items: center; gap: 8px; }

/* New Task modal — lead search */
.task-lead-search { position: relative; }
.task-lead-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--mid-surface-2, #fff); border: 1px solid var(--line, rgba(0,0,0,0.1)); border-radius: 12px;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.25); max-height: 260px; overflow-y: auto; padding: 6px;
}
.task-lead-opt {
  display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; padding: 9px 12px; border-radius: 8px;
}
.task-lead-opt:hover { background: var(--panel-soft, #f4f4f5); }
.task-lead-opt-sub { font-size: 12px; color: var(--muted, #777); }
.task-lead-empty { padding: 10px 12px; }
.task-lead-chosen {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 12px;
  background: var(--panel-soft, #f4f4f5); border-radius: 10px; padding: 8px 12px; font-size: 14px;
}
.task-lead-chosen button { margin-left: auto; }

/* ─────────────────────────────────────────────────────────────────────────
   Midnight theming for ALL app modals (New deal / task / contact, …).
   These dialogs always overlay the dark app, so theme them with the always-dark
   --mid-* tokens UNCONDITIONALLY (not gated on body.dash-active) so they never
   fall back to the light base tokens — that was the "cream box in a dark modal"
   bug. One token per role → consistent colour, height, padding, spacing.
   ───────────────────────────────────────────────────────────────────────── */
.modal-content { background:var(--mid-surface-2, var(--mid-surface-2)); border:1px solid var(--mid-line, var(--mid-line)); color:var(--mid-text, var(--mid-text)); }
.modal-head { border-bottom-color:var(--mid-line, var(--mid-line)); }
.modal-head h2 { color:var(--mid-text, var(--mid-text)); }
.modal-body label > span { color:var(--mid-text-2, var(--mid-text-2)); }
.modal-body input,
.modal-body select,
.modal-body textarea,
.modal .task-lead-search input {
  background-color:var(--mid-lowest, var(--mid-lowest)); border:1px solid var(--mid-line, var(--mid-line)); color:var(--mid-text, var(--mid-text));
}
.modal-body input::placeholder,
.modal-body textarea::placeholder,
.modal .task-lead-search input::placeholder { color:var(--mid-muted, var(--mid-muted)); }
.modal-body select:focus,
.modal-body input:focus,
.modal-body textarea:focus,
.modal .task-lead-search input:focus { outline:none; border-color:var(--mid-accent, var(--mid-accent)); }
.modal .button.ghost { background:var(--mid-surface-3, var(--mid-surface-3)); border:1px solid var(--mid-line, var(--mid-line)); color:var(--mid-text-2, var(--mid-text-2)); }
.modal .button.ghost:hover { background:var(--mid-surface-4); color:var(--mid-primary, var(--mid-primary)); }
.modal .button.primary { background:var(--mid-accent, var(--mid-accent)); color:var(--mid-on-accent, var(--mid-on-accent)); border:none; }
.modal .button.primary:hover { background:#5fc9fa; }
.modal .button.primary:disabled { background:var(--mid-surface-3, var(--mid-surface-3)); color:var(--mid-muted, var(--mid-muted)); opacity:1; cursor:not-allowed; }
.modal-section-header { border-top-color:var(--mid-line, var(--mid-line)); }
.modal-section-header strong { color:var(--mid-text, var(--mid-text)); }

/* ── Modal typography + spacing — SINGLE SOURCE OF TRUTH ─────────────────────
   Consolidates three earlier, conflicting label/size rules into one so every
   modal (deal / task / contact) shares the same font, label style, and vertical
   rhythm. Labels are now the only field guide (placeholders removed), so they
   read clearly. */
.modal-content, .modal-content h2, .modal-content label,
.modal-content input, .modal-content select, .modal-content textarea,
.modal-content button, .modal-content small, .modal-content strong { font-family: var(--sans); }
/* Never let the above touch the icon font — Material Symbols spans must keep their
   own family or the ligature renders as literal text ("close", "person_check", …). */
.modal-content .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
.modal-body { gap: 16px; }
.modal-body label { gap: 7px; font-size: var(--fs-caption, 12px); }
.modal-body label > span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--mid-text-2, var(--mid-text-2));
}
.modal-grid { gap: 14px; }
/* Section header (e.g. "Contact …"): stack title over helper so they never collide
   on narrow widths ("ContactIf a contact…"), with even spacing on every screen. */
.modal-section-header { flex-direction: column; align-items: flex-start; gap: 4px; }
.modal-section-header strong { font-size: 14px; }
.modal-section-header small { font-size: 12px; line-height: 1.45; color: var(--mid-muted, var(--mid-muted)); }
/* Number fields: remove the spinner so they match plain text inputs. */
.modal-body input[type="number"] { -moz-appearance: textfield; }
.modal-body input[type="number"]::-webkit-outer-spin-button,
.modal-body input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Info pills (prefilled-contact banner + chosen-lead chip): one shared dark style */
.modal-prefilled-contact, .task-lead-chosen {
  background:var(--mid-surface-3, var(--mid-surface-3)); border:1px solid var(--mid-line, var(--mid-line));
  color:var(--mid-text, var(--mid-text)); border-radius:10px; padding:10px 12px; font-size:13px;
}
/* `display:flex` on these banners was overriding the `hidden` attribute, so an
   EMPTY "Adding deal for" / "Task for" strip showed even when no contact was
   pre-linked (e.g. opening New Deal from the + button). Respect [hidden]. */
.modal-prefilled-contact[hidden], .task-lead-chosen[hidden] { display: none !important; }
.modal-prefilled-contact .inline-icon, .task-lead-chosen .inline-icon { color:var(--mid-primary, var(--mid-primary)); }
/* Task lead search results dropdown */
.task-lead-results { background:var(--mid-surface-2, var(--mid-surface-2)); border-color:var(--mid-line, var(--mid-line)); }
.task-lead-opt { color:var(--mid-text, var(--mid-text)); }
.task-lead-opt:hover { background:var(--mid-surface-3, var(--mid-surface-3)); }
.task-lead-opt-sub { color:var(--mid-muted, var(--mid-muted)); }

/* Glow on modal close (X) — same as the + FAB */
.modal-head button[data-close] { border-radius: 50%; animation: fabGlow 3.2s ease-in-out infinite; }

/* Consistent X close buttons everywhere: square with curved edges (not circle/oval) */
.dl-close, .detail-close, #askGiaClose, .modal-head button[data-close] {
  border-radius: 12px !important;
  width: 36px; height: 36px; min-width: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Popups: consistent font + spacing/sizing across all modals */
.modal-content,
.modal-content h2,
.modal-content label,
.modal-content input,
.modal-content select,
.modal-content textarea,
.modal-content button { font-family: var(--sans); }
.modal-content h2 { font-size: 18px; font-weight: 600; }
.modal-content label { font-size: 13px; }
.modal-content input,
.modal-content select,
.modal-content textarea { font-size: 14px; }
/* New Task form fields should stack with the same gap as other modal bodies */
#newTaskForm { display: flex; flex-direction: column; gap: 14px; margin-top: 4px; }

/* ═══════════════ CONTACTS — Midnight theme ═══════════════ */
body.contacts-active #page-contacts .page-heading h1 { color:var(--mid-text); }
body.contacts-active #page-contacts .page-heading .eyebrow { color:var(--mid-primary); }
body.contacts-active #page-contacts .page-heading p.muted { color:var(--mid-muted); }
/* Search + filter */
body.contacts-active #page-contacts .search-shell { background:transparent; }
body.contacts-active #page-contacts .search-shell input { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:9999px; }
body.contacts-active #page-contacts .search-shell input::placeholder { color:var(--mid-muted); }
body.contacts-active #page-contacts .search-shell .material-symbols-outlined { color:var(--mid-muted); }
body.contacts-active #page-contacts .filter-select { background:var(--mid-surface-2); border:1px solid var(--mid-line); color:var(--mid-text); border-radius:10px; }
/* Cards */
body.contacts-active #page-contacts .contact-card {
  background:rgba(30,41,59,0.4); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--mid-line); color:var(--mid-text);
}
body.contacts-active #page-contacts .contact-card:hover { background:var(--mid-surface-3); border-color:var(--mid-primary); box-shadow:0 14px 26px -14px rgba(0,0,0,0.5); }
body.contacts-active #page-contacts .contact-name { color:var(--mid-text); }
body.contacts-active #page-contacts .contact-sub, body.contacts-active #page-contacts .contact-chev { color:var(--mid-muted); }
body.contacts-active #page-contacts .contact-lines > div { color:var(--mid-text-2); }
body.contacts-active #page-contacts .contact-lines code { background:var(--mid-base); color:var(--mid-primary); }
body.contacts-active #page-contacts .contact-avatar { background:var(--mid-badge); color:var(--mid-primary); }
body.contacts-active #page-contacts .contact-foot { border-top:1px solid var(--mid-line); }
body.contacts-active #page-contacts .source-pill { background:var(--mid-surface-3); color:var(--mid-text-2); border:1px solid var(--mid-line); }
body.contacts-active #page-contacts .pill.open-deals { background:rgba(56,189,248,0.18); color:var(--mid-primary); }
body.contacts-active #page-contacts .contacts-empty { color:var(--mid-muted); }

/* ═══ Contact drawer (reuses deal-drawer dl-* structure) ═══ */
#contactDetailContent .dl-body { padding:18px 20px 24px; gap:20px; }
#contactDetailContent .dl-field > input,
#contactDetailContent .dl-field > select { width:64%; padding:9px 12px; border-radius:10px; }
.dl-section-head { display:flex; align-items:center; justify-content:space-between; }
.dl-field-static { color:var(--muted,#65645F); font-size:14px; }
.dl-viewmsg { align-self:flex-start; }
#contactDetailContent .contact-deals { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
#contactDetailContent .contact-deals .deal-link { cursor:pointer; padding:10px 12px; border:1px solid var(--line,rgba(0,0,0,0.1)); border-radius:10px; display:flex; flex-direction:column; gap:4px; }
/* Contact phone call + WhatsApp links */
#contactDetailContent .contact-phone-row { display:inline-flex; align-items:center; gap:12px; }
#contactDetailContent .contact-phone-link { display:inline-flex; align-items:center; gap:6px; color:inherit; text-decoration:none; }
#contactDetailContent .contact-phone-link:hover { color:var(--mid-primary); text-decoration:underline; }
#contactDetailContent .contact-wa-link { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; background:rgba(37,211,102,0.16); color:#25d366; text-decoration:none; }
#contactDetailContent .contact-wa-link:hover { background:rgba(37,211,102,0.28); }
/* Midnight bits for the contact deals list */
body.dash-active #contactDetailContent .contact-deals .deal-link { background:var(--mid-surface); border-color:var(--mid-line); }
body.dash-active #contactDetailContent .contact-deals .deal-link:hover { background:var(--mid-surface-3); }
body.dash-active #contactDetailContent .dl-field-static { color:var(--mid-muted); }

/* Contacts cards — consistent type scale with leads/dashboard + phone/WhatsApp links */
#page-contacts .contact-name { font-size: 15px; font-weight: 600; }
#page-contacts .contact-sub { font-size: 12px; }
#page-contacts .contact-lines > div { font-size: 13px; }
#page-contacts .contact-foot .muted.small { font-size: 12px; }
#page-contacts .contact-lines { align-items: stretch; }
#page-contacts .contact-lines > div { display: flex; align-items: center; gap: 8px; }
.contact-link { text-decoration: none; color: inherit; display: inline-flex; align-items: center; }
.contact-tel:hover code { text-decoration: underline; }
.contact-wa { width: 26px; height: 26px; border-radius: 7px; justify-content: center; background: rgba(37,211,102,0.16); color: #25d366; margin-left: auto; }
.contact-wa .material-symbols-outlined { font-size: 16px; }
.contact-wa:hover { background: rgba(37,211,102,0.28); }
body.contacts-active #page-contacts .contact-tel code { color: var(--mid-primary); background: transparent; }

/* Desktop: LOCK the leads page so the list/board is the ONLY scroller (single scroll
   context) — the toolbar stays fixed and the list header pins with cards vanishing under it. */
@media (min-width: 901px) {
  body.leads-active .shell { height: calc(100dvh - 58px); overflow: hidden; }
  #page-leads { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
  #page-leads .page-heading { flex: 0 0 auto; }
  #page-leads #crmKanbanBoard { flex: 1 1 auto; min-height: 0; overflow-x: auto; overflow-y: hidden; }
  #page-leads .leads-list { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }
  #page-leads .leads-list { padding-top: 0; }   /* header flush at the very top */
  #page-leads .lead-rowhead { top: 0; }
}
/* Mobile: breathing room inside the scroll area so cards don't touch the edges/boundary */
@media (max-width: 900px) {
  #page-leads .kanban-col-body { padding: 6px 2px calc(96px + env(safe-area-inset-bottom)); }
}

/* List view: sticky column header (Name/Stage/… stays while rows scroll) + card depth */
.leads-table thead th { position: sticky; top: 0; z-index: 2; }
body.leads-active .leads-table thead th { background: var(--mid-surface-3); }
body.leads-active .leads-list { box-shadow: 0 10px 30px -14px rgba(0,0,0,0.55); }
/* keep the rounded card corners while the body scrolls */
#page-leads .leads-list { border-radius: 14px; }

/* ═══ Leads LIST view → borderless enclosure (boundary hidden, box kept) that the
   row-cards scroll within; header box + spaced row-cards (kanban-matched type) ═══ */
.leads-list, body.leads-active .leads-list {
  background: var(--mid-deep);                 /* subtle enclosure — distinct from page, no border */
  border: none !important; box-shadow: none !important;
  border-radius: 14px; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 10px; padding: 10px;
}
.lead-rowhead, .lead-row {
  display: grid; grid-template-columns: 2.2fr 1.5fr 1fr 0.9fr 1fr; align-items: center; gap: 12px;
}
/* Active-filter chips row in the Leads header (date / stage), above both views.
   .sg-chips is hidden on Leads by a 1-ID !important rule (styles.css:9778); the
   2-ID `#page-leads #leadsChips.has-filters` override wins to show it when active. */
#leadsChips { flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
#page-leads #leadsChips.has-filters { display: flex !important; }
/* Active stage/date-filter chip (shown after a dashboard pill filters) — tap to clear. */
.leads-filter-clear {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 7px 10px 7px 14px;
  border-radius: 999px; border: none; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600;
  background: var(--mid-surface-3); color: var(--mid-text);
  transition: background var(--dur-1, 0.15s) var(--ease-out, ease);
}
.leads-filter-clear .material-symbols-outlined { font-size: 16px; color: var(--mid-muted); }
.leads-filter-clear:hover { background: var(--mid-surface-4); }
.leads-filter-clear:hover .material-symbols-outlined { color: var(--mid-text); }
html[data-theme] .leads-filter-clear { background: var(--lime-tint, #eef3cf); color: var(--mid-primary); }
html[data-theme] .leads-filter-clear .material-symbols-outlined { color: var(--mid-primary); }
html[data-theme] .leads-filter-clear:hover { background: var(--lime, #d9ec4f); color: var(--on-lime, #2a3325); }
html[data-theme] .leads-filter-clear:hover .material-symbols-outlined { color: var(--on-lime, #2a3325); }
.lead-rowhead {
  position: sticky; top: 0; z-index: 5;
  background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px; padding: 11px 16px;
  margin-bottom: 0;
  /* solid enclosure-coloured strip below the header keeps the gap constant while scrolling,
     then a soft shadow under that */
  box-shadow: 0 10px 0 0 var(--mid-deep), 0 14px 10px -6px rgba(0,0,0,0.45);
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--mid-muted);
}
.lead-row {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 14px; padding: 14px 16px;
  cursor: default; transition: border-color .15s;
}
.lead-row:hover { border-color: var(--mid-primary); }
.lr-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lr-name .ll-name-link { font-size: 15px; font-weight: 700; color: var(--mid-text); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lr-name .ll-name-link:hover { color: var(--mid-primary); text-decoration: underline; }
.lr-src, .lr-time { color: var(--mid-muted); font-size: 13px; }
.lr-val { color: var(--mid-primary); font-weight: 700; font-size: 14px; }
@media (max-width: 900px) {
  .lead-rowhead { display: none; }
  .lead-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .lr-name { flex: 1 1 100%; }
  .lr-time { margin-left: auto; }
}

/* Contacts filter — align right and keep popup within viewport (consistent with Leads) */
#page-contacts .page-actions { justify-content: flex-end; }
#page-contacts .dash-filter-pop { right: 0; left: auto; width: max-content; min-width: 200px; max-width: min(260px, calc(100vw - 24px)); }
#page-contacts .dash-filter-opt { white-space: nowrap; }

/* ═══ Fix: stage chip pill (was scoped to removed .leads-table) ═══ */
.ll-stage {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: none; cursor: pointer; line-height: 1.4;
}
.ll-stage.good  { background: rgba(48,209,88,0.16);  color: #7ee29a; }
.ll-stage.bad   { background: rgba(255,69,58,0.16);  color: #ff9f96; }
.ll-stage.hot   { background: rgba(255,159,10,0.18); color: var(--mid-tertiary); }
.ll-stage.info  { background: rgba(56,189,248,0.16); color: var(--mid-primary); }
.ll-stage.muted { background: var(--mid-surface-4);               color: var(--mid-text-2); }
.ll-stage[data-stage-chip]:hover { filter: brightness(1.12); }

/* ═══ Kanban: hide the column enclosing box; keep a box only on the stage-name header ═══ */
body.leads-active #page-leads .kanban-col {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@media (min-width: 901px) {
  body.leads-active #page-leads .kanban-col-header {
    background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 12px;
  }
  body.leads-active #page-leads .kanban-col-title { color: var(--mid-text); }
  body.leads-active #page-leads .kanban-col-meta { color: var(--mid-muted); }
}

/* ═══ Hide scrollbars everywhere (scroll still works) — all screens + popups ═══ */
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
*::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }

/* ═══ Uniform bottom-nav clearance on ALL mobile screens ═══ */
@media (max-width: 768px) {
  :root { --nav-reserve: calc(96px + env(safe-area-inset-bottom)); }
  /* Window-scroll pages (dashboard, contacts, quotes, setup, …) end above the nav */
  .shell { padding-bottom: var(--nav-reserve) !important; }
  /* Conversations inbox is a fixed-height pane — subtract the nav so it ends above it */
  .inbox-shell { height: calc(100dvh - 120px - var(--nav-reserve)) !important; }
}

/* ═══ Mobile: bound shell scroll so content ends above the nav (all pages) ═══ */
@media (max-width: 768px) {
  .shell {
    height: calc(100dvh - 52px - var(--nav-reserve));
    overflow-y: auto; overflow-x: clip;
    padding-bottom: 8px !important;
  }
  /* Bottom-nav active indicator → pill matching the menu shape, inset from its borders */
  .app-sidebar .nav-item { height: 48px; margin: 8px 5px; border-radius: 9999px; padding: 4px 2px; }
  .app-sidebar .nav-item.active { border-radius: 9999px; }
}

/* Mobile bottom-nav pill — dark glass (was light border + white inset glow) */
@media (max-width: 768px) {
  .app-sidebar {
    background: rgba(27, 32, 36, 0.92) !important;
    border: 1px solid var(--mid-line) !important;
    box-shadow: 0 12px 32px -10px rgba(0, 0, 0, 0.55) !important;
    -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  }
}

/* Kanban stage-swipe slide animation */
@keyframes kbSlideNext { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes kbSlidePrev { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
#page-leads .kanban-col-body.kb-slide-next { animation: kbSlideNext .24s cubic-bezier(0.16,1,0.3,1); }
#page-leads .kanban-col-body.kb-slide-prev { animation: kbSlidePrev .24s cubic-bezier(0.16,1,0.3,1); }

/* Kanban finger-drag carousel: overlay the active + neighbouring column while dragging */
@media (max-width: 900px) {
  #page-leads #crmKanbanBoard.kb-dragging { position: relative; overflow: hidden; }
  #page-leads #crmKanbanBoard.kb-dragging .kanban-col.is-mobile-active,
  #page-leads #crmKanbanBoard.kb-dragging .kanban-col.kb-peek {
    display: flex !important; flex-direction: column;
    position: absolute; inset: 0; min-height: 0; will-change: transform;
  }
}

/* ═══ Uniform placement: Gia bubble stacked above the + FAB, same edge, all screens ═══ */
.app-sidebar .create-fab { width: 56px; height: 56px; border-radius: 50%; }
.askgia-bubble { width: 56px; height: 56px; }
/* Desktop / tablet — right:32px so the FAB's right edge lines up with the topbar's
   32px right padding (ends exactly where the profile button ends). */
.app-sidebar .create-menu { position: fixed; right: 32px; bottom: 24px; left: auto; }
.askgia-bubble { right: 24px; bottom: 94px; left: auto; }   /* 24 + 56 + 14 gap */
/* Mobile: clear the bottom nav, keep the same stack + alignment */
@media (max-width: 768px) {
  .app-sidebar .create-menu { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  .askgia-bubble { right: 16px; bottom: calc(166px + env(safe-area-inset-bottom)); }
}

/* Subtle fade when swiping between kanban stages */
@keyframes kbFade { from { opacity: 0.25; } to { opacity: 1; } }

/* Contacts: desktop = sticky toolbar (window scroll) */
#page-contacts .page-heading {
  position: sticky; top: 58px; z-index: 30;
  background: var(--mid-base); padding: 10px 0;
}
/* Mobile: LOCK the page (heading fixed, the grid is the only scroller) so cards
   never scroll behind the toolbar — same model as Leads. */
@media (max-width: 768px) {
  body.contacts-active .shell {
    height: calc(100dvh - 52px - 96px - env(safe-area-inset-bottom));
    overflow: hidden; padding-top: 14px; padding-bottom: 0;
  }
  #page-contacts { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; }
  #page-contacts .page-heading { position: static; flex: 0 0 auto; margin-bottom: 10px; padding: 0; }
  #page-contacts .contacts-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 12px;
  }
}

/* Disable double-tap-to-zoom (keeps pinch-zoom + scrolling) */
html { touch-action: manipulation; }

/* Topbar: solid background (no translucent/blurred fade behind search/notifications) */
body.dash-active .topbar {
  background: var(--mid-base) !important;
  border-bottom: 1px solid var(--mid-surface-2);
  box-shadow: none;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}

/* Align content + topbar to the flush sidebar width (no gap strip beside the menu) */
@media (min-width: 769px) {
  body.dash-active .shell { margin-left: 248px; }
  body.dash-active .topbar { margin-left: 248px; }
}


/* ═══════════════ CHAT / CONVERSATIONS — Midnight theme ═══════════════ */
body.chat-active #page-conversations .page-heading h1 { color:var(--mid-text); }
body.chat-active #page-conversations .page-heading .eyebrow { color:var(--mid-primary); }
/* Panes */
body.chat-active .inbox-list-pane, body.chat-active .inbox-thread-pane {
  background:var(--mid-surface); border:1px solid var(--mid-line); -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.chat-active .inbox-thread-pane { background:var(--mid-base); }
/* Search */
body.chat-active .inbox-search input { color:var(--mid-text); background:transparent; }
body.chat-active .inbox-search input::placeholder { color:var(--mid-muted); }
body.chat-active .inbox-search .material-symbols-outlined { color:var(--mid-muted); }
body.chat-active .inbox-search { border-bottom:1px solid var(--mid-surface-3); }
/* Channel filter tabs */
body.chat-active .inbox-filter { background:var(--mid-surface-2); border:1px solid var(--mid-line); }
body.chat-active .inbox-filter button { color:var(--mid-muted); }
body.chat-active .inbox-filter button:hover { color:var(--mid-text); }
body.chat-active .inbox-filter button.is-active { background:var(--mid-badge); color:var(--mid-primary); box-shadow:none; }
/* Conversation rows */
body.chat-active .inbox-row { border-left-color:transparent; }
body.chat-active .inbox-row:hover { background:var(--mid-surface-2); }
body.chat-active .inbox-row.is-active { background:var(--mid-badge); border-left-color:var(--mid-primary); }
body.chat-active .inbox-row-name { color:var(--mid-text); }
body.chat-active .inbox-row-snippet { color:var(--mid-muted); }
body.chat-active .inbox-row-time { color:var(--mid-muted); }
body.chat-active .inbox-row-avatar { background:var(--mid-badge); color:var(--mid-primary); }
body.chat-active .inbox-empty { color:var(--mid-muted); }
/* Thread header */
body.chat-active .inbox-thread-head { background:var(--mid-surface); border-bottom:1px solid var(--mid-line); }
body.chat-active .inbox-thread-who strong { color:var(--mid-text); }
body.chat-active .inbox-thread-who .muted { color:var(--mid-muted); }
body.chat-active .inbox-thread-head .button.ghost { background:var(--mid-surface-3); border:1px solid var(--mid-line); color:var(--mid-text-2); }
/* Messages canvas */
body.chat-active .inbox-messages { background:var(--mid-lowest); }
body.chat-active .msg.in .msg-bubble {
  background:var(--mid-surface-3); border:1px solid var(--mid-line); backdrop-filter:none; -webkit-backdrop-filter:none; color:var(--mid-text);
}
body.chat-active .msg.out .msg-bubble { background:var(--mid-accent); color:var(--mid-on-accent); box-shadow:0 4px 14px -6px rgba(56,189,248,0.4); }
body.chat-active .msg-meta { color:var(--mid-muted); }
/* Composer */
body.chat-active .inbox-compose { background:var(--mid-surface); border-top:1px solid var(--mid-line); }
body.chat-active .inbox-compose-row textarea {
  background:var(--mid-base); border:1px solid var(--mid-line); color:var(--mid-text);
}
body.chat-active .inbox-compose-row textarea::placeholder { color:var(--mid-text-3); }
body.chat-active .inbox-compose-row textarea:focus { border-color:var(--mid-accent); box-shadow:0 0 0 3px rgba(56,189,248,0.18); }
body.chat-active .inbox-banner { background:rgba(255,159,10,0.14); border-color:rgba(255,159,10,0.3); color:var(--mid-tertiary); }
/* Composer auto-grows up to 4 rows via JS (autoGrowComposer) then scrolls — drop
   the fixed max-height clamp and pin line-height so the 4-row math is right on
   desktop AND mobile (font differs by viewport). */
body.chat-active .inbox-compose-row textarea,
#chatDetailContent .inbox-compose-row textarea { max-height: none; line-height: 1.4; resize: none; }

/* ═══ Chat — rich conversation rows + thread header (match mockup) ═══ */
.inbox-row { display: flex !important; align-items: flex-start; gap: 12px; grid-template-columns: none !important; padding: 12px 14px; }
.inbox-row-avatar { position: relative; width: 48px; height: 48px; flex: 0 0 48px; font-size: 16px; }
.inbox-row-chbadge { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; border-radius: 50%; background: var(--mid-surface-2); display: grid; place-items: center; border: 2px solid var(--mid-surface); }
.inbox-row-chbadge .material-symbols-outlined { font-size: 11px; }
.inbox-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.inbox-row-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.inbox-row-name { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 auto; }
.inbox-row-time { font-size: 11px; flex: 0 0 auto; }
.inbox-row-snippet { font-size: 13px; }
.inbox-row-chline { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--mid-muted); }
.inbox-row-chline .material-symbols-outlined { font-size: 14px; }
.inbox-row-unread { width: 9px; height: 9px; border-radius: 50%; background: var(--mid-accent); box-shadow: 0 0 8px rgba(56,189,248,0.6); flex: 0 0 auto; align-self: center; }
.inbox-row.is-unread .inbox-row-name { font-weight: 700; color: #fff; }
.inbox-row.is-unread .inbox-row-snippet { color: var(--mid-text-2); }
/* Thread header avatar */
.inbox-thread-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--mid-badge); color: var(--mid-primary); display: grid; place-items: center; font-weight: 700; flex: 0 0 auto; font-size: 15px; }
body.chat-active .inbox-thread-head { display: flex; align-items: center; gap: 12px; }
body.chat-active .inbox-thread-who { flex: 1 1 auto; min-width: 0; }
body.chat-active .inbox-thread-meta .inline-icon, body.chat-active #inboxThreadMeta .inline-icon { vertical-align: middle; }

/* ═══ Chat fixes — legible Take over + clear floating FABs ═══ */
body.chat-active #inboxTakeoverBtn { background:var(--mid-accent); color:var(--mid-on-accent); border:1px solid var(--mid-accent); font-weight:600; }
body.chat-active #inboxTakeoverBtn:hover { background:var(--mid-primary); border-color:var(--mid-primary); }
body.chat-active #inboxTakeoverBtn.danger { background:transparent; color:var(--mid-tertiary); border:1px solid rgba(255,159,10,0.5); }
/* Keep Send clear of the floating Gia + create FABs (bottom-right) */
@media (min-width: 901px) {
  body.chat-active .inbox-compose { padding-right: 84px; }
}

/* ═══ Chat — message layout to match reference (avatars, date sep, corners, pill composer) ═══ */
.inbox-messages { gap: 4px; }
.msg { flex-direction: row; align-items: flex-end; gap: 8px; max-width: 82%; margin-top: 10px; }
.msg.out { flex-direction: row; }
.msg-col { display: flex; flex-direction: column; min-width: 0; }
.msg.out .msg-col { align-items: flex-end; }
.msg-avatar { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 26px; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--mid-badge); color: var(--mid-primary); margin-bottom: 18px; }
.msg.in .msg-bubble { border-bottom-left-radius: 5px; }
.msg.out .msg-bubble { border-bottom-right-radius: 5px; }
.msg-meta { display: flex; align-items: center; gap: 4px; }
.msg-tick { font-size: 13px; font-variation-settings: 'FILL' 1; color: var(--mid-accent); }
.msg-datesep { align-self: center; max-width: none; margin: 16px 0 6px; }
.msg-datesep span { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; background: var(--mid-surface-3); color: var(--mid-muted); }
/* Composer → rounded pill input + round send button */
body.chat-active .inbox-compose-row { align-items: center; gap: 8px; }
body.chat-active .inbox-compose-row textarea {
  border-radius: 22px; padding: 11px 18px; background: var(--mid-base) !important; border: 1px solid var(--mid-line);
}
body.chat-active #inboxAttachBtn { width: 42px; height: 42px; border-radius: 50%; flex: 0 0 42px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); display: grid; place-items: center; padding: 0; }
body.chat-active #inboxSendBtn {
  width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; padding: 0; font-size: 0;
  background: var(--mid-accent); color: var(--mid-on-accent); display: grid; place-items: center;
}
body.chat-active #inboxSendBtn::after { content: "send"; font-family: "Material Symbols Outlined"; font-size: 22px; font-variation-settings: 'FILL' 1; }
body.chat-active #inboxFollowUpBtn { border-radius: 999px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-primary); font-size: 12px; padding: 8px 14px; white-space: nowrap; }

/* ═══ Chat composer — chips + icon toolbar (match reference) ═══ */
.inbox-compose-chips { display: flex; gap: 8px; margin-bottom: 10px; }
.compose-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
.compose-chip:hover { background: #2f363a; color: var(--mid-text); }
.compose-chip .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }
.compose-tool { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 50%; display: grid; place-items: center; background: transparent; border: none; color: var(--mid-muted); cursor: pointer; padding: 0; }
.compose-tool:hover { background: var(--mid-surface-3); color: var(--mid-primary); }
.compose-tool .material-symbols-outlined { font-size: 22px; }
/* Hide the floating Gia + create FABs on the chat page */
body.chat-active #askGiaBubble, body.chat-active #askGiaPanel,
body.chat-active .create-menu, body.chat-active #createFab { display: none !important; }

/* ═══ Chat — thread header chip + Join Call, tighter bubbles ═══ */
.inbox-thread-nameline { display: flex; align-items: center; gap: 10px; }
.lead-temp-chip { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.lead-temp-chip.hot { background: rgba(255,69,58,0.18); color: #ff7a70; border: 1px solid rgba(255,69,58,0.35); }
.lead-temp-chip.warm { background: rgba(255,159,10,0.16); color: var(--mid-tertiary); border: 1px solid rgba(255,159,10,0.3); }
.lead-temp-chip.cold { background: rgba(142,213,255,0.14); color: var(--mid-primary); border: 1px solid rgba(142,213,255,0.3); }
body.chat-active .inbox-joincall { display: inline-flex; align-items: center; gap: 6px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-primary); text-decoration: none; }
body.chat-active .inbox-joincall:hover { background: #2f363a; }
/* Tighter, reference-width message bubbles */
.msg { max-width: 64%; }
@media (max-width: 900px) { .msg { max-width: 84%; } }
/* Hide bulk "Follow up all" on the chat page (not in the reference layout) */
body.chat-active #followUpAllBtn { display: none !important; }

/* ═══ Chat MOBILE — kanban-style list cards + fullscreen thread ═══ */
@media (max-width: 900px) {
  /* List pane: drop the glass enclosure so each chat reads as its own card */
  body.chat-active .inbox-list-pane {
    background: transparent !important; border: none !important; box-shadow: none !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-radius: 0;
  }
  body.chat-active .inbox-search { padding: 0 2px 10px; }
  body.chat-active .inbox-filter { margin: 0 2px 12px; position: sticky; top: 0; z-index: 2; }
  body.chat-active .inbox-list { padding: 0 2px 12px; overflow-y: auto; }
  /* Each conversation = a standalone card, like the Kanban lead cards */
  body.chat-active .inbox-row {
    background: var(--mid-surface-2) !important; border: 1px solid var(--mid-surface-3); border-radius: 14px;
    margin-bottom: 10px; padding: 14px; border-left: 1px solid var(--mid-surface-3);
  }
  body.chat-active .inbox-row.is-active,
  body.chat-active .inbox-row:hover { background: #1f262b !important; border-color: var(--mid-accent); }
  body.chat-active .inbox-row.is-unread { border-color: var(--mid-accent); }

  /* Tap a chat → genuine fullscreen thread (covers topbar + bottom nav) */
  body.chat-active .inbox-shell.show-thread .inbox-thread-pane {
    position: fixed; inset: 0; z-index: 1200; height: 100dvh;
    border: none; border-radius: 0; background: var(--mid-base) !important;
  }
  /* Keep Lead/Contact off the compact mobile header — back + avatar + name + Take over */
  body.chat-active .inbox-shell.show-thread #inboxViewLeadBtn,
  body.chat-active .inbox-shell.show-thread #inboxViewContactBtn { display: none !important; }
}

/* ═══ Chat — kanban-style cards (name / phone / score+source+takeover), search FAB ═══ */
/* Remove the "Gia is active" warning entirely */
#inboxGiaBanner { display: none !important; }
/* Desktop keeps the rich row; phone + meta3 are mobile-only */
.inbox-row-phone, .inbox-row-meta3 { display: none; }

@media (max-width: 900px) {
  /* Card content per spec: row1 name, row2 phone (WA only), row3 score+icon+takeover */
  body.chat-active .inbox-row-avatar,
  body.chat-active .inbox-row-time,
  body.chat-active .inbox-row-snippet,
  body.chat-active .inbox-row-chline,
  body.chat-active .inbox-row-unread { display: none !important; }
  body.chat-active .inbox-row { padding: 16px !important; }
  body.chat-active .inbox-row-main { gap: 4px; width: 100%; }
  body.chat-active .inbox-row-name { white-space: normal; font-size: 17px; font-weight: 700; color: var(--mid-text); }
  body.chat-active .inbox-row-phone { display: block; color: var(--mid-muted); font-size: 13px; }
  body.chat-active .inbox-row-meta3 { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
  body.chat-active .inbox-row-srcicon { font-size: 19px; }
  body.chat-active .inbox-card-takeover { margin-left: auto; background: var(--mid-accent); color: var(--mid-on-accent); font-weight: 600; font-size: 12px; padding: 7px 16px; border-radius: 999px; }
  body.chat-active .inbox-row[data-paused="1"] .inbox-card-takeover { background: transparent; color: var(--mid-tertiary); border: 1px solid rgba(255,159,10,0.5); }

  /* Floating search FAB where the + used to be; top inline search hidden */
  body.chat-active .inbox-search { display: none !important; }
  body.chat-active .chat-search-fab {
    display: grid; place-items: center; position: fixed; right: 18px; bottom: 84px;
    width: 56px; height: 56px; border-radius: 50%; background: var(--mid-accent); color: var(--mid-on-accent);
    border: none; z-index: 900; box-shadow: 0 8px 22px -6px rgba(56,189,248,0.65);
  }
  body.chat-active .chat-search-pop:not([hidden]) {
    display: flex; align-items: center; gap: 8px; position: fixed; left: 12px; right: 12px; bottom: 84px;
    z-index: 901; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 14px; padding: 10px 14px;
  }
  body.chat-active .chat-search-pop input { flex: 1; background: transparent; border: none; outline: none; color: var(--mid-text); font-size: 15px; font-family: var(--sans); }
  body.chat-active .chat-search-pop .material-symbols-outlined { color: var(--mid-muted); }
  body.chat-active .chat-search-pop button { background: none; border: none; cursor: pointer; display: grid; place-items: center; }
}
.chat-search-fab { display: none; }
.chat-search-pop[hidden] { display: none; }

/* ═══ Chat mobile v2 — FAB match, stage-pill tabs, tighter top, no header chip ═══ */
/* Thread-header temperature chip fully removed */
#inboxThreadChip { display: none !important; }

@media (max-width: 900px) {
  /* Search FAB sits EXACTLY where the + FAB used to be (48×48, radius 16, right/bottom 24) */
  body.chat-active .chat-search-fab {
    right: 24px; bottom: 24px; width: 48px; height: 48px; border-radius: 16px;
    background: var(--mid-accent); color: var(--mid-on-accent); box-shadow: 0 8px 20px -8px rgba(56,189,248,0.55);
  }
  body.chat-active .chat-search-pop:not([hidden]) { bottom: 84px; }

  /* Channel tabs styled like the Leads stage pills (rounded, scrollable, cyan active) */
  body.chat-active .inbox-filter {
    display: flex; gap: 8px; overflow: visible; flex-wrap: nowrap; padding: 6px 2px 24px; margin: 0;
    background: transparent; border: none; border-radius: 0;
    -ms-overflow-style: none; scrollbar-width: none;
  }
  body.chat-active .inbox-filter::-webkit-scrollbar { display: none; }
  body.chat-active .inbox-filter button {
    flex: 0 0 auto; width: auto; padding: 8px 16px; border-radius: 9999px;
    font-size: 13px; font-weight: 600; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text-2);
  }
  body.chat-active .inbox-filter button.is-active { background: var(--mid-accent); color: var(--mid-on-accent); border-color: var(--mid-accent); box-shadow: none; }

  /* Close the gap: drop the page heading on mobile so the tabs sit just under the top bar */
  body.chat-active #page-conversations .page-heading { display: none !important; }
  /* No page heading on chat → let the list fill the space above the nav so cards
     aren't crammed against the tabs with a dead band at the bottom. */
  body.chat-active .inbox-shell { height: calc(100dvh - 64px - var(--nav-reserve)) !important; }
  body.chat-active .inbox-list-pane { padding-top: 6px; }
}
@media (max-width: 560px) {
  body.chat-active .chat-search-fab { bottom: 84px; }
  body.chat-active .chat-search-pop:not([hidden]) { bottom: 144px; }
}

/* ═══ Chat composer v3 — inline AI star, centered send, lifted off the bottom ═══ */
/* AI Suggest is now a star inside the input, pinned right */
.inbox-input-wrap { position: relative; flex: 1; display: flex; min-width: 0; }
.inbox-input-wrap textarea { flex: 1; width: 100%; }
body.chat-active .inbox-input-wrap textarea { padding-right: 46px; }
.inbox-ai-inline {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; cursor: pointer; padding: 4px;
  display: grid; place-items: center; color: var(--mid-primary);
}
.inbox-ai-inline .material-symbols-outlined { font-size: 22px; }
.inbox-ai-inline:hover { color: #c4e7ff; }

/* Send button: real icon, perfectly centered */
body.chat-active #inboxSendBtn { display: flex; align-items: center; justify-content: center; padding: 0; font-size: 0; }
body.chat-active #inboxSendBtn::after { content: none !important; }
body.chat-active #inboxSendBtn .material-symbols-outlined { font-size: 22px; font-variation-settings: 'FILL' 1; line-height: 1; }

/* FABs are gone on chat → reclaim the right padding I'd reserved on desktop */
@media (min-width: 901px) { body.chat-active .inbox-compose { padding-right: 16px; } }

/* Mobile: lift the whole composer off the screen edge */
@media (max-width: 900px) {
  body.chat-active .inbox-compose {
    padding-top: 14px;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}

/* ═══ Chat perf + composer v4 — no blur repaint, inline star (no wrapper box) ═══ */
/* LAG FIX: backdrop-filter on a fullscreen scrolling pane (and on every incoming
   bubble) repaints each frame. Kill all blur inside the chat thread. */
body.chat-active .inbox-list-pane,
body.chat-active .inbox-thread-pane,
body.chat-active .inbox-shell.show-thread .inbox-thread-pane,
body.chat-active .msg.in .msg-bubble {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
body.chat-active .msg.in .msg-bubble { background: var(--mid-surface-3); border-color: var(--mid-line); }
body.chat-active .inbox-messages { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* AI star: inline in the compose row, anchored over the input's right edge — no box */
.inbox-input-wrap { display: contents; }   /* neutralize any leftover wrapper */
body.chat-active .inbox-compose-row { position: relative; }
.inbox-ai-inline {
  position: absolute; right: 64px; top: 50%; transform: translateY(-50%);
  background: transparent !important; border: none !important; box-shadow: none !important;
  cursor: pointer; padding: 4px; display: grid; place-items: center; color: var(--mid-primary); z-index: 2;
}
.inbox-ai-inline .material-symbols-outlined { font-size: 22px; }
.inbox-ai-inline:hover { color: #c4e7ff; }
body.chat-active .inbox-compose-row textarea { padding-right: 48px; }

/* ═══ Chat FAB + AI star — match the + FAB exactly, nudge star right ═══ */
/* The + FAB on mobile = 56×56 circle at right:24/bottom:24 (≤768 → right:16, bottom:96+safe).
   Mirror it precisely so the search FAB lands in the identical spot. */
body.chat-active .chat-search-fab {
  position: fixed; z-index: 900;
  width: 56px !important; height: 56px !important; border-radius: 50% !important;
  right: 24px; bottom: 24px; left: auto;
  display: grid; place-items: center; background: var(--mid-accent); color: var(--mid-on-accent);
  border: none; outline: none; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0,90,200,0.45);
}
body.chat-active .chat-search-fab:focus,
body.chat-active .chat-search-fab:focus-visible { outline: 2px solid var(--mid-accent, #38bdf8); outline-offset: 2px; }
body.chat-active .chat-search-fab .material-symbols-outlined { font-size: 28px; }
body.chat-active .chat-search-pop:not([hidden]) { bottom: 96px; }
@media (max-width: 768px) {
  body.chat-active .chat-search-fab { right: 16px; bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.chat-active .chat-search-pop:not([hidden]) { bottom: calc(166px + env(safe-area-inset-bottom)); }
}
/* Nudge the AI star closer to the send button */
.inbox-ai-inline { right: 58px; padding: 2px; }
/* Reserve enough right padding that typed text never runs under the AI star. */
body.chat-active .inbox-compose-row textarea { padding-right: 54px; }
/* Mobile: 16px font stops iOS from auto-zooming the page when the box is focused. */
@media (max-width: 768px) {
  body.chat-active .inbox-compose-row textarea { font-size: 16px; }
}

/* ═══ Chat mobile — center the cards between the tabs and the bottom nav ═══ */
@media (max-width: 900px) {
  body.chat-active .inbox-list {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100%;
  }
  /* When the list overflows, justify-content:center can hide the top — fall back
     to top-alignment so every card stays reachable. */
  body.chat-active .inbox-list { justify-content: safe center; }
}

/* Search FAB gets the same pulsing glow as the + FAB */
body.chat-active .chat-search-fab { animation: fabGlow 3.2s ease-in-out infinite; }

/* ═══ Chat desktop — channel tabs as left-aligned pills (match reference + mobile) ═══ */
@media (min-width: 901px) {
  body.chat-active .inbox-filter {
    display: flex; gap: 8px; background: transparent; border: none; border-radius: 0;
    padding: 0 0 14px; margin: 0 16px;
  }
  body.chat-active .inbox-filter button {
    flex: 0 0 auto; width: auto; padding: 7px 16px; border-radius: 9999px;
    font-size: 13px; font-weight: 600; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text-2);
  }
  body.chat-active .inbox-filter button:hover { color: var(--mid-text); }
  body.chat-active .inbox-filter button.is-active { background: var(--mid-accent); color: var(--mid-on-accent); border-color: var(--mid-accent); box-shadow: none; }
}

/* ═══ Chat search popup — desktop: float above the FAB (was opening at page top) ═══ */
@media (min-width: 901px) {
  body.chat-active .chat-search-pop:not([hidden]) {
    position: fixed; z-index: 901; right: 24px; bottom: 96px; left: auto; width: 340px;
    display: flex; align-items: center; gap: 8px;
    background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 14px; padding: 10px 14px;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,0.6);
  }
  body.chat-active .chat-search-pop input { flex: 1; background: transparent; border: none; outline: none; color: var(--mid-text); font-size: 15px; font-family: var(--sans); }
  body.chat-active .chat-search-pop .material-symbols-outlined { color: var(--mid-muted); }
  body.chat-active .chat-search-pop button { background: none; border: none; cursor: pointer; display: grid; place-items: center; }
}

/* ═══ Chat — drop the redundant search FAB (inline search bar already exists) ═══ */
.chat-search-fab, .chat-search-pop { display: none !important; }
/* Add space between the search box (and its divider) and the channel tabs */
body.chat-active .inbox-search { margin-bottom: 14px; border-bottom: 1px solid var(--mid-surface-3); padding-bottom: 12px; }
@media (max-width: 900px) {
  body.chat-active .inbox-search { margin-bottom: 16px; }
}

/* ═══ Chat desktop — taller panes, less empty space below ═══ */
@media (min-width: 901px) {
  body.chat-active .inbox-shell { height: calc(100dvh - 140px) !important; min-height: 520px; }
}

/* ═══════════════════════════════════════════════════════════════
   QUOTE GENERATOR — MIDNIGHT THEME (body.quote-active)
   Recolours the whole page by flipping the --qg-* tokens, plus
   targeted overrides for fields, buttons and the summary rail.
   ═══════════════════════════════════════════════════════════════ */
body.quote-active #page-quotes {
  --qg-canvas: transparent;
  --qg-surface: var(--mid-surface-2);
  --qg-line: var(--mid-line);
  --qg-ink: var(--mid-text);
  --qg-muted: var(--mid-muted);
  --qg-muted-soft: var(--mid-text-3);
  --qg-accent: var(--mid-accent);
  --qg-accent-on: var(--mid-on-accent);
  --qg-ok-bg: rgba(48,209,88,0.16); --qg-ok-fg: #6ee7a0;
  --qg-warn-bg: rgba(255,159,10,0.16); --qg-warn-fg: var(--mid-tertiary);
  --qg-err-bg: rgba(255,69,58,0.16); --qg-err-fg: #ff7a70;
  --qg-info-bg: rgba(56,189,248,0.14); --qg-info-fg: var(--mid-primary);
  color: var(--mid-text);
}
/* Cards / sections */
body.quote-active #page-quotes .qg-card,
body.quote-active #page-quotes .package-card {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line);
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none;
}
body.quote-active #page-quotes .qg-heading h1,
body.quote-active #page-quotes .qg-card-head h3 { color: var(--mid-text); }
body.quote-active #page-quotes .qg-card-head .material-symbols-outlined { color: var(--mid-primary); }
body.quote-active #page-quotes .qg-heading .eyebrow { color: var(--mid-primary); }
body.quote-active #page-quotes .muted,
body.quote-active #page-quotes label > span,
body.quote-active #page-quotes .qg-card-head p { color: var(--mid-muted); }

/* Form fields — dark inputs with cyan focus */
body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
body.quote-active #page-quotes select,
body.quote-active #page-quotes textarea {
  background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important;
}
body.quote-active #page-quotes input::placeholder,
body.quote-active #page-quotes textarea::placeholder { color: var(--mid-text-3) !important; }
body.quote-active #page-quotes input:focus,
body.quote-active #page-quotes select:focus,
body.quote-active #page-quotes textarea:focus {
  border-color: var(--mid-accent) !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.18) !important;
}
body.quote-active #page-quotes select option { background: var(--mid-surface-2); color: var(--mid-text); }

/* Buttons */
body.quote-active #page-quotes .button {
  background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2);
}
body.quote-active #page-quotes .button:hover { background: #2f363a; color: var(--mid-text); }
body.quote-active #page-quotes .button .material-symbols-outlined { color: var(--mid-primary); }
body.quote-active #page-quotes .button.primary,
body.quote-active #page-quotes .qg-generate {
  background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700;
}
body.quote-active #page-quotes .button.primary:hover,
body.quote-active #page-quotes .qg-generate:hover { background: var(--mid-primary); border-color: var(--mid-primary); }
body.quote-active #page-quotes .qg-generate .material-symbols-outlined,
body.quote-active #page-quotes .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
body.quote-active #page-quotes .button.danger { color: #ff7a70; border-color: rgba(255,69,58,0.4); background: transparent; }
/* Clear button: dark ghost matching the rest of the dark quote UI (same box as Generate). */
body.quote-active #page-quotes .qg-generate.is-ghost {
  background: transparent; color: var(--mid-muted); border: 1px solid var(--mid-line); box-shadow: none; font-weight: 600;
}
body.quote-active #page-quotes .qg-generate.is-ghost:hover { background: var(--mid-surface-3); border-color: var(--mid-line); }
body.quote-active #page-quotes .qg-generate.is-ghost .material-symbols-outlined { color: var(--mid-muted); }

/* Event chips / selectable cards */
body.quote-active #page-quotes .qg-event-card {
  background: var(--mid-base); border: 1px solid var(--mid-line); color: var(--mid-text-2);
}
body.quote-active #page-quotes .qg-event-card.is-selected {
  background: rgba(56,189,248,0.14); border-color: var(--mid-accent); color: var(--mid-primary);
}
body.quote-active #page-quotes .mini-check span,
body.quote-active #page-quotes .qg-event-name { color: inherit; }

/* Nested panels (event detail rows, team matrix, package head) */
body.quote-active #page-quotes .package-card-head,
body.quote-active #page-quotes .package-event-details,
body.quote-active #page-quotes .package-team-matrix,
body.quote-active #page-quotes .event-detail-row,
body.quote-active #page-quotes .qg-event-grid {
  background: transparent; border-color: var(--mid-line);
}
body.quote-active #page-quotes table th { color: var(--mid-muted); border-color: var(--mid-line); }
body.quote-active #page-quotes table td { border-color: var(--mid-surface-3); color: var(--mid-text); }

/* Live-pricing summary rail */
body.quote-active #page-quotes .qg-rail {
  background: var(--mid-surface-2); border: 1px solid var(--mid-line); box-shadow: none;
}
body.quote-active #page-quotes .qg-rail-head { background: rgba(56,189,248,0.10); border-bottom: 1px solid rgba(56,189,248,0.22); }
body.quote-active #page-quotes .qg-rail-label { color: var(--mid-primary); }
body.quote-active #page-quotes .qg-rail-state,
body.quote-active #page-quotes .qg-rail-toggle { color: var(--mid-muted); }
body.quote-active #page-quotes .qg-rail-body,
body.quote-active #page-quotes .qg-rail-footer { color: var(--mid-text); }
body.quote-active #page-quotes .qg-toggle span { color: var(--mid-text-2); }

/* Banner / contact chips */
body.quote-active #page-quotes .selected-contact-chip,
body.quote-active #page-quotes .contact-results { background: var(--mid-base); border: 1px solid var(--mid-line); color: var(--mid-text); }

/* ═══ Quote builder — mockup layout (.qgm-*) ═══ */
body.quote-active #page-quotes .qgm-pkg { padding: 22px; }
body.quote-active #page-quotes .qgm-pkg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
body.quote-active #page-quotes .qgm-pkg-head h3 { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-pkg-head .material-symbols-outlined { color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-pkg-actions { display: flex; gap: 8px; }
body.quote-active #page-quotes .qgm-pkg-fields { display: flex; flex-direction: column; gap: 14px; }
body.quote-active #page-quotes .qgm-qty-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
body.quote-active #page-quotes .qgm-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
body.quote-active #page-quotes .qgm-field > span { font-size: 11px; letter-spacing: 0.05em; color: var(--mid-muted); }
body.quote-active #page-quotes .qgm-field input { background: var(--mid-base) !important; border: 1px solid var(--mid-line); border-radius: 8px; padding: 9px 12px; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-pkg-toggles { display: flex; gap: 18px; margin-top: 14px; }
body.quote-active #page-quotes .qgm-pkg-toggles .mini-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mid-text-2); }

/* Event timeline */
body.quote-active #page-quotes .qgm-timeline { margin-top: 22px; display: flex; flex-direction: column; gap: 14px; }
body.quote-active #page-quotes .qgm-timeline-head { display: flex; align-items: center; gap: 14px; }
body.quote-active #page-quotes .qgm-timeline-head span { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid-muted); }
body.quote-active #page-quotes .qgm-timeline-rule { flex: 1; height: 1px; background: var(--mid-line); opacity: 0.5; }
body.quote-active #page-quotes .qgm-empty { color: var(--mid-muted); font-size: 13px; padding: 6px 0; }

body.quote-active #page-quotes .qgm-event { background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 14px; overflow: hidden; }
body.quote-active #page-quotes .qgm-event-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: rgba(57,72,90,0.30); border-bottom: 1px solid var(--mid-line); }
body.quote-active #page-quotes .qgm-event-ico { color: var(--mid-primary); font-size: 20px; }
body.quote-active #page-quotes .qgm-event-type { flex: 1; min-width: 0; background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 7px 10px; color: var(--mid-primary) !important; font-weight: 600; }
body.quote-active #page-quotes .qgm-event-date { width: 150px; flex: 0 0 auto; background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 7px 10px; color: var(--mid-text) !important; }
/* Remove-event button: an inline SVG trash (NOT the icon font — the ligature wasn't
   rendering here, leaving a blank box) in red on a neutral dark button = high contrast.
   Single base rule → applies to desktop + mobile. */
body.quote-active #page-quotes .qgm-event-del { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 8px; background: var(--mid-surface); border: 1px solid var(--mid-line); cursor: pointer; color: #ff8a80; display: grid; place-items: center; padding: 0; transition: background .14s ease, border-color .14s ease, color .14s ease; }
body.quote-active #page-quotes .qgm-event-del:hover { background: rgba(255,69,58,0.16); border-color: #ff453a; color: #ff453a; }
body.quote-active #page-quotes .qgm-event-del svg { width: 17px; height: 17px; display: block; stroke: currentColor; }

/* Service table */
body.quote-active #page-quotes .qgm-svc-table { padding: 6px 14px 10px; }
body.quote-active #page-quotes .qgm-svc-headrow,
body.quote-active #page-quotes .qgm-svc-row { display: grid; grid-template-columns: 1fr 130px 120px; align-items: center; gap: 10px; }
body.quote-active #page-quotes .qgm-svc-headrow { padding: 8px 0; border-bottom: 1px solid var(--mid-surface-3); font-size: 11px; letter-spacing: 0.04em; color: var(--mid-muted); }
body.quote-active #page-quotes .qgm-svc-headrow span:nth-child(2) { text-align: center; }
body.quote-active #page-quotes .qgm-svc-headrow span:nth-child(3) { text-align: right; }
body.quote-active #page-quotes .qgm-svc-row { padding: 10px 0; border-bottom: 1px solid var(--mid-surface-2); }
body.quote-active #page-quotes .qgm-svc-row.is-empty { display: none; }
body.quote-active #page-quotes .qgm-svc-name { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-svc-name .material-symbols-outlined { color: var(--mid-primary); font-size: 18px; }
body.quote-active #page-quotes .qgm-step { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
body.quote-active #page-quotes .qgm-step-btn { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--mid-line); background: var(--mid-surface); color: var(--mid-text); cursor: pointer; font-size: 15px; line-height: 1; display: grid; place-items: center; }
body.quote-active #page-quotes .qgm-step-btn:hover { background: var(--mid-surface-3); border-color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-step-val { min-width: 18px; text-align: center; font-weight: 600; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-svc-price { text-align: right; font-weight: 600; color: var(--mid-text); }
body.quote-active #page-quotes .qgm-add-svc { margin: 4px 14px 12px; background: none !important; border: none !important; color: var(--mid-primary); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px; }
body.quote-active #page-quotes .qgm-add-svc .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-addons { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 14px 14px; }
body.quote-active #page-quotes .qgm-addon-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--mid-line); background: var(--mid-base); font-size: 12px; color: var(--mid-text-2); cursor: pointer; }
body.quote-active #page-quotes .qgm-addon-chip input { accent-color: var(--mid-accent); }

/* Add Event row — dashed call-to-action */
body.quote-active #page-quotes .qgm-add-event { display: flex; gap: 10px; align-items: center; padding: 14px; border: 2px dashed var(--mid-line); border-radius: 14px; }
body.quote-active #page-quotes .qgm-event-picker { flex: 1; min-width: 0; background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 9px 12px; color: var(--mid-text) !important; }
body.quote-active #page-quotes .qgm-add-event-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: 1px solid var(--mid-accent); background: rgba(56,189,248,0.12); color: var(--mid-primary); font-weight: 700; cursor: pointer; white-space: nowrap; }
body.quote-active #page-quotes .qgm-add-event-btn:hover { background: rgba(56,189,248,0.2); }
body.quote-active #page-quotes .qgm-add-event-btn .material-symbols-outlined { font-size: 18px; }
body.quote-active #page-quotes .qgm-new-type { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--mid-line); background: var(--mid-surface-2); color: var(--mid-text-2); font-size: 13px; cursor: pointer; white-space: nowrap; }
body.quote-active #page-quotes .qgm-new-type .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }

@media (max-width: 760px) {
  /* Package Name stays full-width (flex column); the 3 quantity fields keep their
     own row, just tighter gaps so they fit 3-up on a phone. */
  body.quote-active #page-quotes .qgm-qty-row { gap: 8px; }
  body.quote-active #page-quotes .qgm-field input { padding: 9px 8px; }
  /* Tighten the NESTED card padding on phones. The package card (22px) + each event
     card's own table padding (14px) stacked on the page shell over-indented the service
     rows — cramping the name column and leaving a double-border "sliver". Pull both in
     so the rows get their width back and the nesting reads as one clean step. */
  body.quote-active #page-quotes .qgm-pkg { padding: 14px 12px; }
  body.quote-active #page-quotes .qgm-event-head { padding: 10px 11px; gap: 8px; }
  body.quote-active #page-quotes .qgm-svc-table { padding: 4px 11px 8px; }
  body.quote-active #page-quotes .qgm-add-svc { margin: 2px 11px 10px; }
  body.quote-active #page-quotes .qgm-addons { padding: 0 11px 12px; }
  body.quote-active #page-quotes .qgm-event-date { width: 118px; }
  body.quote-active #page-quotes .qgm-svc-name { font-size: 13px; }
  body.quote-active #page-quotes .qgm-svc-name .material-symbols-outlined { font-size: 17px; }
  body.quote-active #page-quotes .qgm-svc-headrow, body.quote-active #page-quotes .qgm-svc-row { grid-template-columns: 1fr 92px 80px; gap: 6px; }
  body.quote-active #page-quotes .qgm-step { gap: 7px; }
  body.quote-active #page-quotes .qgm-step-btn { width: 24px; height: 24px; }
  body.quote-active #page-quotes .qgm-add-event { flex-wrap: wrap; }
}

/* ═══ Quote — unified card/typography consistency + merged lead card ═══ */
body.quote-active #page-quotes .qg-card { padding: 22px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 16px; }
body.quote-active #page-quotes .qg-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
body.quote-active #page-quotes .qg-card-head h3 { font-size: 16px; font-weight: 600; color: var(--mid-text); flex: 1; text-transform: none; letter-spacing: -0.008em; }
body.quote-active #page-quotes .qg-card-head > .material-symbols-outlined { color: var(--mid-primary); font-size: 20px; }
body.quote-active #page-quotes .qg-card-head p.muted { flex-basis: 100%; order: 9; font-size: 12px; color: var(--mid-muted); margin: 4px 0 0; }

/* Merged Lead & Client Identity card */
body.quote-active #page-quotes .crm-search-row { display: flex; gap: 10px; margin-bottom: 16px; }
body.quote-active #page-quotes .crm-search-row input { flex: 1; background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; border-radius: 10px; padding: 11px 14px; color: var(--mid-text) !important; }
body.quote-active #page-quotes .qgm-lead-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
body.quote-active #page-quotes .qgm-lead-fields .qgm-field input { background: var(--mid-base) !important; border: 1px solid var(--mid-line); border-radius: 8px; padding: 9px 12px; color: var(--mid-text); width: 100%; }

/* De-nest the package list: the wrapper card is just a slim bar, each package is the card */
body.quote-active #page-quotes .qg-card:has(#manualPackageList) { background: transparent; border: none; padding: 0; }
body.quote-active #page-quotes .qg-card:has(#manualPackageList) > .qg-card-head { padding: 0 2px 12px; margin: 0; }
body.quote-active #page-quotes .qg-card:has(#manualPackageList) > .qg-card-head > .material-symbols-outlined { display: none; }
body.quote-active #page-quotes #manualPackageList .qgm-pkg + .qgm-pkg { margin-top: 18px; }
body.quote-active #page-quotes .package-form { display: flex; flex-direction: column; gap: 18px; }

/* Add-on service rows: identical look to crew rows (no chips) */
body.quote-active #page-quotes .qgm-svc-addon .qgm-svc-name .material-symbols-outlined { color: var(--mid-primary); }

@media (max-width: 760px) {
  body.quote-active #page-quotes .qgm-lead-fields { grid-template-columns: 1fr; }
  body.quote-active #page-quotes .crm-search-row { flex-wrap: wrap; }
}

/* ═══ Quote — hidden-element fix, add-package button, rail discount ═══ */
/* Stray "circles" were hidden buttons/chips whose display overrode [hidden]. */
body.quote-active #page-quotes [hidden] { display: none !important; }

/* Packages wrapper is chrome-less (each package is its own card) */
body.quote-active #page-quotes .qgm-packages-card { background: transparent; border: none; padding: 0; }

/* Add New Package button (in package header, beside Duplicate) */
body.quote-active #page-quotes .qgm-add-package { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--mid-accent); background: rgba(56,189,248,0.12); color: var(--mid-primary); font-size: 13px; font-weight: 600; cursor: pointer; }
body.quote-active #page-quotes .qgm-add-package .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }
body.quote-active #page-quotes .qgm-add-package:hover { background: rgba(56,189,248,0.2); }
/* Remove-package is an icon button (was a wide "Remove" text button that broke the
   header padding / widened the card on mobile in multi-package mode). */
body.quote-active #page-quotes .qgm-remove-package {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 36px; height: 36px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid rgba(255,122,112,0.4); background: rgba(255,122,112,0.10); color: #ff7a70;
}
body.quote-active #page-quotes .qgm-remove-package:hover { background: rgba(255,122,112,0.2); }
body.quote-active #page-quotes .qgm-remove-package .material-symbols-outlined { font-size: 18px; color: #ff7a70; }
/* Keep the card from ever growing past its column. */
body.quote-active #page-quotes .qgm-pkg { max-width: 100%; box-sizing: border-box; }
body.quote-active #page-quotes .qgm-pkg-head h3 { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Discount block inside the floating summary rail */
body.quote-active #page-quotes .qg-rail-discount { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin-bottom: 14px; }
/* "Discount" label sized like the summary sub-headlines (Subtotal / Taxes) */
body.quote-active #page-quotes .qg-rail-discount-label { flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--mid-text-2); }
/* ₹ / % symbol toggle right next to the label */
body.quote-active #page-quotes .qg-disc-toggle { flex: 0 0 auto; display: inline-flex; border: 1px solid var(--mid-line); border-radius: 8px; overflow: hidden; }
body.quote-active #page-quotes .qg-disc-opt { width: 30px; height: 30px; display: grid; place-items: center; background: var(--mid-base); color: var(--mid-muted); border: none; cursor: pointer; font-size: 14px; font-weight: 600; padding: 0; }
body.quote-active #page-quotes .qg-disc-opt + .qg-disc-opt { border-left: 1px solid var(--mid-line); }
body.quote-active #page-quotes .qg-disc-opt.is-active { background: var(--mid-accent); color: var(--mid-on-accent); }
body.quote-active #page-quotes .qg-rail-discount input { flex: 1 1 auto; min-width: 0; background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; border-radius: 8px; padding: 8px 10px; color: var(--mid-text) !important; text-align: right; }

/* Hide the + create FAB on the Quote page */
body.quote-active .create-menu, body.quote-active #createFab { display: none !important; }

/* ═══ Quote MOBILE — Live Pricing as an inline card (not a fixed drawer) ═══ */
@media (max-width: 1100px) {
  body.quote-active #page-quotes .qg-rail {
    position: static !important; transform: none !important;
    left: auto !important; right: auto !important; bottom: auto !important; top: auto !important;
    max-height: none !important; margin-top: 18px; width: auto !important;
    border-radius: 16px !important; border: 1px solid var(--mid-line) !important;
    box-shadow: none !important; z-index: auto !important; overflow: visible !important;
  }
  body.quote-active #page-quotes .qg-rail::before { display: none !important; }   /* drag handle */
  body.quote-active #page-quotes .qg-rail-head { cursor: default; }
  body.quote-active #page-quotes .qg-rail-head .qg-rail-toggle { display: none !important; }
  /* Clear the bottom nav, like every other page */
  body.quote-active #page-quotes { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* Label spans (hidden on mobile to make icon-only buttons) — desktop shows them */
.qgm-btn-label { display: inline; }

/* ═══ Quote MOBILE — left-align Lead title + icon-only package-head buttons ═══ */
@media (max-width: 900px) {
  /* Force the card header to a left-aligned single row (a base mobile rule turns it
     into a centered column otherwise). */
  body.quote-active #page-quotes .qg-card-head {
    flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
    text-align: left !important; flex-wrap: wrap;
  }
  body.quote-active #page-quotes .qg-card-head h3 { text-align: left !important; flex: 1 1 auto; }

  /* Package Details header on one line: title + Duplicate icon + (+) icon */
  body.quote-active #page-quotes .qgm-pkg-head { flex-wrap: nowrap; gap: 8px; }
  body.quote-active #page-quotes .qgm-pkg-head h3 { flex: 1; min-width: 0; white-space: nowrap; }
  body.quote-active #page-quotes .qgm-pkg-actions { flex: 0 0 auto; gap: 8px; }
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-btn-label { display: none; }
  body.quote-active #page-quotes .qgm-pkg-actions .duplicate-manual-package,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-add-package,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-remove-package {
    padding: 0; width: 40px; height: 40px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: 0;
  }
  body.quote-active #page-quotes .qgm-pkg-actions .duplicate-manual-package .material-symbols-outlined,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-add-package .material-symbols-outlined,
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-remove-package .material-symbols-outlined { font-size: 20px; margin: 0; }
}

/* ═══ Quote pkg-action icons — force-render (override any cascade) ═══ */
@media (max-width: 900px) {
  body.quote-active #page-quotes .qgm-pkg-actions .qgm-btn-label { display: none !important; }
  body.quote-active #page-quotes .qgm-pkg-actions button .material-symbols-outlined {
    display: inline-block !important;
    font-family: "Material Symbols Outlined" !important;
    font-weight: normal !important;
    font-size: 22px !important;
    line-height: 1 !important;
    color: var(--mid-primary) !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   SETUP — MIDNIGHT THEME (body.setup-active) — reskin, structure intact
   ═══════════════════════════════════════════════════════════════ */
body.setup-active #page-setup { color: var(--mid-text); }
body.setup-active #page-setup .page-heading h1 { color: var(--mid-text); }
body.setup-active #page-setup .page-heading .eyebrow,
body.setup-active #page-setup .eyebrow { color: var(--mid-primary); }

/* Cards / panels */
body.setup-active #page-setup .panel,
body.setup-active #page-setup .setup-section,
body.setup-active #page-setup .webhook-panel,
body.setup-active #page-setup .checklist-panel {
  background: var(--mid-surface-2) !important; border: 1px solid var(--mid-line) !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
body.setup-active #page-setup h2,
body.setup-active #page-setup h3,
body.setup-active #page-setup h4,
body.setup-active #page-setup .panel-heading strong { color: var(--mid-text); }
body.setup-active #page-setup .muted,
body.setup-active #page-setup label > span,
body.setup-active #page-setup p.help,
body.setup-active #page-setup .help,
body.setup-active #page-setup small { color: var(--mid-muted); }
body.setup-active #page-setup .panel-heading { border-color: var(--mid-line); }

/* Form fields */
body.setup-active #page-setup input:not([type="checkbox"]):not([type="radio"]),
body.setup-active #page-setup select,
body.setup-active #page-setup textarea {
  background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important;
}
body.setup-active #page-setup input::placeholder,
body.setup-active #page-setup textarea::placeholder { color: var(--mid-text-3) !important; }
body.setup-active #page-setup input:focus,
body.setup-active #page-setup select:focus,
body.setup-active #page-setup textarea:focus {
  border-color: var(--mid-accent) !important; box-shadow: 0 0 0 3px rgba(56,189,248,0.18) !important;
}
body.setup-active #page-setup select option { background: var(--mid-surface-2); color: var(--mid-text); }
body.setup-active #page-setup input[type="checkbox"], body.setup-active #page-setup input[type="radio"] { accent-color: var(--mid-accent); }

/* Buttons */
body.setup-active #page-setup .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
body.setup-active #page-setup .button:hover { background: #2f363a; color: var(--mid-text); }
body.setup-active #page-setup .button .material-symbols-outlined { color: var(--mid-primary); }
body.setup-active #page-setup .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
body.setup-active #page-setup .button.primary:hover { background: var(--mid-primary); border-color: var(--mid-primary); }
body.setup-active #page-setup .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
body.setup-active #page-setup .button.danger { color: #ff7a70; border-color: rgba(255,69,58,0.4); background: transparent; }

/* Tables (team / catalog) */
body.setup-active #page-setup .table-wrap { border: 1px solid var(--mid-line); border-radius: 12px; overflow: hidden; }
body.setup-active #page-setup table th { color: var(--mid-muted); border-color: var(--mid-line); }
body.setup-active #page-setup table td { color: var(--mid-text); border-color: var(--mid-surface-3); }
body.setup-active #page-setup tbody tr:hover td { background: var(--mid-surface); }

/* Code / system prompt / mono blocks */
body.setup-active #page-setup code,
body.setup-active #page-setup .mono,
body.setup-active #page-setup #systemPrompt {
  background: var(--mid-lowest) !important; color: var(--mid-text-2) !important; border-color: var(--mid-line) !important;
}

/* Misc chips / dividers / nested rows */
body.setup-active #page-setup .pill, body.setup-active #page-setup .tag { background: var(--mid-surface-3); color: var(--mid-text-2); }
body.setup-active #page-setup hr { border-color: var(--mid-line); }
body.setup-active #page-setup .toggle-row, body.setup-active #page-setup .setup-row { border-color: var(--mid-line); }

/* ═══ SETUP — tabbed layout + sticky save footer ═══ */
body.setup-active #page-setup .setup-tabs {
  display: flex; gap: 28px; border-bottom: 1px solid var(--mid-line); margin-bottom: 22px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
body.setup-active #page-setup .setup-tabs::-webkit-scrollbar { display: none; }
body.setup-active #page-setup .setup-tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 12px 2px;
  background: none; border: none; border-bottom: 2px solid transparent;
  color: var(--mid-muted); font-size: 14px; font-weight: 600; font-family: var(--sans); cursor: pointer; white-space: nowrap;
}
body.setup-active #page-setup .setup-tab .material-symbols-outlined { font-size: 18px; color: inherit; }
body.setup-active #page-setup .setup-tab:hover { color: var(--mid-text-2); }
body.setup-active #page-setup .setup-tab.is-active { color: var(--mid-primary); border-bottom-color: var(--mid-accent); }

.setup-tab-hidden { display: none !important; }
/* Main goes full-width when the sidebar is hidden (non-General tabs) */
body.setup-active .setup-layout:has(.setup-sidebar.setup-tab-hidden) { grid-template-columns: 1fr; }

/* Sticky save/discard footer */
body.setup-active #page-setup { padding-bottom: 84px; }
.setup-footer {
  position: fixed; bottom: 0; right: 0; left: 248px; z-index: 45;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 28px; background: rgba(15,20,24,0.94); border-top: 1px solid var(--mid-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.setup-footer-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--mid-muted); }
.setup-footer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mid-accent); box-shadow: 0 0 8px rgba(56,189,248,0.6); }
.setup-footer-actions { display: flex; gap: 10px; }
body.setup-active .setup-footer .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
body.setup-active .setup-footer .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
body.setup-active .setup-footer .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }

@media (max-width: 900px) {
  .setup-footer { left: 0; bottom: calc(70px + env(safe-area-inset-bottom)); padding: 12px 16px; }
  body.setup-active #page-setup { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
  body.setup-active #page-setup .setup-footer-status { display: none; }
  body.setup-active #page-setup .setup-footer-actions { width: 100%; }
  body.setup-active #page-setup .setup-footer-actions .button { flex: 1; justify-content: center; }
}

/* ═══ SETUP — top-right actions, dark catalog/toggle/team (kill white bgs) ═══ */
body.setup-active #page-setup .setup-head-actions { display: flex; gap: 10px; justify-content: flex-end; }
body.setup-active #page-setup .setup-head-actions .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
body.setup-active #page-setup .setup-head-actions .button.primary .material-symbols-outlined { color: var(--mid-on-accent); }
/* footer removed → reclaim bottom padding */
body.setup-active #page-setup { padding-bottom: 28px; }
@media (max-width: 900px) { body.setup-active #page-setup { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } }

/* Library — quote catalog editor cards (were white) */
body.setup-active #page-setup .qc-block { background: var(--mid-surface) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .qc-block-title { color: var(--mid-muted) !important; }
body.setup-active #page-setup .qc-svc.cost-card,
body.setup-active #page-setup .qc-evt,
body.setup-active #page-setup .qc-pkg { background: var(--mid-surface-2) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .qc-svc-name { color: var(--mid-text); }
body.setup-active #page-setup .qc-margin { color: var(--mid-muted); }
body.setup-active #page-setup .qc-chip { background: var(--mid-base) !important; border-color: var(--mid-line) !important; color: var(--mid-text-2) !important; }
body.setup-active #page-setup .qc-chip:has(input:checked) { background: rgba(56,189,248,0.16) !important; border-color: var(--mid-accent) !important; color: var(--mid-primary) !important; }
body.setup-active #page-setup .qc-svc-top select,
body.setup-active #page-setup .qc-svc input,
body.setup-active #page-setup .qc-svc select { background: var(--mid-base) !important; border-color: var(--mid-line) !important; color: var(--mid-text) !important; }

/* Integrations — checkbox/toggle cards (were cream) */
body.setup-active #page-setup .toggle-row { background: var(--mid-base) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .toggle-row span,
body.setup-active #page-setup .toggle-row strong,
body.setup-active #page-setup .toggle-row b { color: var(--mid-text) !important; }
body.setup-active #page-setup .toggle-row small,
body.setup-active #page-setup .toggle-row .muted { color: var(--mid-muted) !important; }

/* Team — table rows (were light) */
body.setup-active #page-setup .team-table th { color: var(--mid-muted) !important; border-color: var(--mid-line) !important; background: transparent !important; }
body.setup-active #page-setup .team-table td { color: var(--mid-text) !important; border-color: var(--mid-surface-3) !important; background: transparent !important; }
body.setup-active #page-setup .team-table tr:hover td { background: var(--mid-surface) !important; }

/* ═══ SETUP fix pass 2 — the wrappers I missed ═══ */
/* Quote catalog editor lives in TWO .pc-section cards (were white --glass-card) */
body.setup-active #page-setup .pc-section { background: var(--mid-surface-2) !important; border-color: var(--mid-line) !important; box-shadow: none !important; }
body.setup-active #page-setup .pc-section > h3,
body.setup-active #page-setup .pc-sec-head h3 { color: var(--mid-text) !important; }
body.setup-active #page-setup .pc-check { color: var(--mid-text-2) !important; }
body.setup-active #page-setup .pc-check input { accent-color: var(--mid-accent); }

/* Team table — every surface explicitly dark */
body.setup-active #page-setup .table-wrap { background: var(--mid-surface-2) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .team-table,
body.setup-active #page-setup .team-table tbody,
body.setup-active #page-setup .team-table tr { background: transparent !important; }
body.setup-active #page-setup .team-table th { background: var(--mid-surface) !important; color: var(--mid-muted) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .team-table td { background: transparent !important; color: var(--mid-text) !important; border-color: var(--mid-surface-3) !important; }
body.setup-active #page-setup .team-role-select { background: var(--mid-base) !important; color: var(--mid-text) !important; border-color: var(--mid-line) !important; }
body.setup-active #page-setup .status-pill.status-ok { background: rgba(48,209,88,0.16) !important; color: #6ee7a0 !important; }
body.setup-active #page-setup .status-pill.status-muted { background: var(--mid-surface-3) !important; color: var(--mid-muted) !important; }
body.setup-active #page-setup .team-role-legend { color: var(--mid-muted) !important; }

/* ═══ LIBRARY — Services Catalog + Event Types cards (mockup) ═══ */
body.setup-active #page-setup .pricing-editor { padding: 0; }
.lib-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .lib-grid { grid-template-columns: 1fr; } }
.lib-card { background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 16px; padding: 20px; }
.lib-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.lib-card-title { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--mid-text); }
.lib-card-title .material-symbols-outlined { color: var(--mid-primary); }
.lib-card-title .lib-evt-headico { color: var(--mid-tertiary); }
.lib-add-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9px; border: none; cursor: pointer; font-size: 13px; font-weight: 600; background: var(--mid-badge); color: #a7b6cc; white-space: nowrap; }
.lib-add-btn .material-symbols-outlined { font-size: 18px; }
.lib-add-btn:hover { filter: brightness(1.12); }
.lib-add-btn.ghost { background: transparent; border: 1px solid var(--mid-line); color: var(--mid-text); }

/* Services table */
.lib-svc-headrow { display: grid; grid-template-columns: 1fr 90px 100px 70px; gap: 10px; padding: 0 0 10px; border-bottom: 1px solid var(--mid-line); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mid-muted); }
.lib-svc-headrow span:nth-child(n+2) { text-align: right; }
.lib-svc-row { display: grid; grid-template-columns: 1fr 90px 100px 70px; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 14px 0; border: none; border-bottom: 1px solid var(--mid-surface-3); background: none; cursor: pointer; }
.lib-svc-row:hover { background: var(--mid-surface); }
.lib-svc-name { font-size: 14px; font-weight: 600; color: var(--mid-text); }
.lib-svc-sub { font-size: 12px; color: var(--mid-muted); display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.lib-tag { font-size: 10px; padding: 1px 7px; border-radius: 999px; background: var(--mid-surface-3); color: var(--mid-primary); }
.lib-svc-cost { text-align: right; font-size: 13px; color: var(--mid-text-2); }
.lib-svc-sell { text-align: right; font-size: 14px; font-weight: 700; color: var(--mid-primary); }
.lib-svc-margin { text-align: right; }
.lib-mpill { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: rgba(56,189,248,0.12); color: var(--mid-primary); }
.lib-empty { color: var(--mid-muted); font-size: 13px; padding: 18px 0; text-align: center; }

/* Event Types list */
.lib-evt-list { display: flex; flex-direction: column; gap: 12px; }
.lib-evt-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px; border: 1px solid var(--mid-line); border-radius: 12px; background: var(--mid-surface); cursor: pointer; }
.lib-evt-row:hover { border-color: rgba(255,193,118,0.5); }
.lib-evt-ico { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,193,118,0.12); color: var(--mid-tertiary); }
.lib-evt-main { flex: 1; min-width: 0; }
.lib-evt-name { font-size: 14px; font-weight: 600; color: var(--mid-text); }
.lib-evt-sub { font-size: 12px; color: var(--mid-muted); margin-top: 2px; }
.lib-evt-edit { color: var(--mid-text-3); font-size: 18px; }
.lib-evt-row:hover .lib-evt-edit { color: var(--mid-text); }

/* ═══ LIBRARY MODAL ═══ */
.lib-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2,6,23,0.7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lib-modal-overlay[hidden] { display: none; }
.lib-modal { width: 560px; max-width: 100%; max-height: 90vh; overflow-y: auto; background: var(--mid-surface-3); border: 1px solid var(--mid-line); border-radius: 16px; box-shadow: 0 24px 60px -12px rgba(0,0,0,0.6); }
.lib-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--mid-line); }
.lib-modal-head h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--mid-text); }
.lib-modal-x { background: none; border: none; cursor: pointer; color: var(--mid-muted); display: grid; place-items: center; }
.lib-modal-x:hover { color: var(--mid-text); }
.lib-modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.lib-field { display: flex; flex-direction: column; gap: 7px; }
.lib-field > span { font-size: 12px; color: var(--mid-text-2); }
.lib-field input, .lib-field select, .lib-field textarea { width: 100%; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 9px; padding: 11px 13px; color: var(--mid-text); font-family: var(--sans); font-size: 14px; }
.lib-field input:focus, .lib-field select:focus, .lib-field textarea:focus { outline: none; border-color: var(--mid-accent); box-shadow: 0 0 0 3px rgba(56,189,248,0.18); }
.lib-field input::placeholder, .lib-field textarea::placeholder { color: var(--mid-text-3); }
.lib-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lib-sel { position: relative; }
.lib-sel select { appearance: none; -webkit-appearance: none; padding-right: 34px; }
.lib-sel .material-symbols-outlined { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--mid-muted); font-size: 20px; }
.lib-price-block { display: flex; flex-direction: column; gap: 14px; }
.lib-price-block[hidden] { display: none; }
.lib-margin-box { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 11px; background: var(--mid-lowest); border: 1px solid var(--mid-line); }
.lib-margin-label { font-size: 12px; color: var(--mid-text-2); display: block; }
.lib-margin-note { margin: 2px 0 0; font-size: 13px; font-style: italic; color: var(--mid-muted); }
.lib-margin-val { font-size: 22px; font-weight: 700; color: var(--mid-primary); }
.lib-margin-val.neg { color: #ff7a70; }
.lib-evt-lines { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.lib-evt-line { display: flex; align-items: center; gap: 8px; }
.lib-evt-line .lib-sel { flex: 1; min-width: 0; }
.lib-evt-line .lib-x { color: var(--mid-muted); }
.lib-line-qty { width: 64px; flex: 0 0 64px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 8px; padding: 9px; color: var(--mid-text); text-align: center; }
.lib-line-del { background: none; border: none; color: var(--mid-muted); cursor: pointer; font-size: 14px; }
.lib-line-del:hover { color: #ff7a70; }
.lib-add-line { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--mid-primary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 2px; }
.lib-add-line .material-symbols-outlined { font-size: 17px; }
.lib-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--mid-line); background: var(--mid-surface-2); }
.lib-foot-spacer { flex: 1; }
.lib-modal-foot .button.primary { background: var(--mid-accent); border: 1px solid var(--mid-accent); color: var(--mid-on-accent); font-weight: 700; }
.lib-modal-foot .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
.lib-btn-del { background: none; border: 1px solid rgba(255,69,58,0.4); color: #ff7a70; border-radius: 8px; padding: 8px 14px; cursor: pointer; font-size: 13px; }

/* ═══ SETUP — match mockup card aesthetic + cyan section titles ═══ */
body.setup-active #page-setup .panel,
body.setup-active #page-setup .setup-section {
  background: var(--mid-surface) !important; border: 1px solid var(--mid-line) !important; border-radius: 16px; padding: 24px;
}
/* Primary-coloured section titles (System Identity / Language Model / …) like the mockup */
body.setup-active #page-setup .setup-section > h2,
body.setup-active #page-setup .setup-section .panel-heading h2 { color: var(--mid-primary) !important; font-size: 20px; font-weight: 600; margin-bottom: 4px; }
body.setup-active #page-setup .setup-section .eyebrow { color: var(--mid-muted) !important; font-size: 11px; letter-spacing: 0.06em; }
body.setup-active #page-setup .setup-section h3,
body.setup-active #page-setup .setup-section h4 { color: var(--mid-text) !important; font-size: 16px; font-weight: 600; }

/* Setup Health (checklist) — primary-tinted card like the mockup */
body.setup-active #page-setup .checklist-panel { background: rgba(56,189,248,0.07) !important; border: 1px solid rgba(56,189,248,0.30) !important; }
body.setup-active #page-setup .checklist-panel h2 { color: var(--mid-primary) !important; }
body.setup-active #page-setup .checklist li { color: var(--mid-text-2); }
/* Webhook helper panels stay neutral-dark */
body.setup-active #page-setup .webhook-panel .codebox { background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text-2) !important; }

/* Inputs/selects use surface-container-high like the mockup's fields */
body.setup-active #page-setup input:not([type="checkbox"]):not([type="radio"]),
body.setup-active #page-setup select,
body.setup-active #page-setup textarea { background: var(--mid-surface-3) !important; }
body.setup-active #page-setup #systemPrompt { background: var(--mid-lowest) !important; }

/* Library/AI/Integrations/Team tabs hide the sidebar → main goes full width */
body.setup-active #page-setup .setup-layout.setup-no-sidebar { grid-template-columns: 1fr !important; }

/* ═══ SETUP — bulletproof full-width: sidebar column auto-collapses when hidden ═══ */
@media (min-width: 1101px) {
  body.setup-active #page-setup .setup-layout { grid-template-columns: minmax(0, 1fr) auto !important; }
  body.setup-active #page-setup .setup-sidebar { width: 300px; }
  /* when the sidebar is display:none (non-General tabs) the auto track is 0 → main fills */
}

/* ═══ Swap the + (create) and Gia (✦) FAB positions on all pages ═══ */
.app-sidebar .create-menu { bottom: 94px !important; }
.askgia-bubble { bottom: 24px !important; }
@media (max-width: 768px) {
  .app-sidebar .create-menu { bottom: calc(166px + env(safe-area-inset-bottom)) !important; }
  .askgia-bubble { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* ═══ Library modal — consistent typography (fields, line inputs, buttons all 14px) ═══ */
#qcLibModalBox input, #qcLibModalBox select, #qcLibModalBox textarea { font-size: 14px !important; font-family: var(--sans); }
#qcLibModalBox .lib-modal-foot .button { font-size: 14px; }
#qcLibModalBox .lib-field > span { font-size: 12px; }
#qcLibModalBox .lib-btn-del { font-size: 14px; }

/* Ask Gia panel — let the thread fill so the composer sits at the bottom (no gap) */
.askgia-panel .askgia-thread { max-height: none !important; }
/* Chat conversation name matches the Leads card name size (15px), not 17px */
body.chat-active .inbox-row-name { font-size: 15px !important; }

/* ═══ Quote — dark contact search-result items (were white) ═══ */
body.quote-active #page-quotes .contact-result-item { background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text); }
body.quote-active #page-quotes .contact-result-item:hover { background: var(--mid-surface) !important; border-color: var(--mid-accent) !important; }
body.quote-active #page-quotes .contact-result-item strong { color: var(--mid-text); }
body.quote-active #page-quotes .contact-result-item small { color: var(--mid-muted); }
body.quote-active #page-quotes .contact-results .empty { color: var(--mid-muted); padding: 10px 12px; font-size: 13px; }
body.quote-active #page-quotes .selected-contact-chip { background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; }
body.quote-active #page-quotes .selected-contact-chip strong { color: var(--mid-text); }
body.quote-active #page-quotes .selected-contact-chip small { color: var(--mid-muted); }
/* tighten the gap between the selected chip and the deal section */
body.quote-active #page-quotes #biginSelectedContact { margin: 10px 0 0; }
body.quote-active #page-quotes #biginDealSection { margin-top: 16px; }

/* ═══ SETUP — Content Drops: legible links + aligned icons ═══ */
body.setup-active #page-setup a { color: var(--mid-primary); }
body.setup-active #page-setup a:hover { color: #c4e7ff; }
body.setup-active #page-setup .content-drop-row { padding: 14px 0; border-bottom: 1px solid var(--mid-surface-3); }
body.setup-active #page-setup .content-drop-row:last-child { border-bottom: none; }
body.setup-active #page-setup .content-drop-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.setup-active #page-setup .content-drop-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--mid-muted); }
body.setup-active #page-setup .content-drop-head strong { color: var(--mid-text); font-size: 14px; }
body.setup-active #page-setup .content-drop-toggle { margin-left: auto; }
body.setup-active #page-setup .content-drop-delete { width: 34px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
body.setup-active #page-setup .content-drop-delete .material-symbols-outlined { font-size: 18px; color: var(--mid-muted); }
body.setup-active #page-setup .content-drop-delete:hover .material-symbols-outlined { color: #ff7a70; }
body.setup-active #page-setup .content-drop-content { color: var(--mid-text-2); margin: 8px 0; }
body.setup-active #page-setup .content-drop-media { display: inline-block; color: var(--mid-primary) !important; word-break: break-all; font-size: 13px; }
body.setup-active #page-setup .content-drop-media:hover { text-decoration: underline; }

/* ═══ Dashboard chat side-panel — midnight theme + fix X/Take-over overlap ═══ */
#chatDetailContent { background: var(--mid-base); }
#chatDetailContent .chatpanel-head { background: var(--mid-surface) !important; border-bottom: 1px solid var(--mid-line) !important; padding-right: 56px; }
#chatDetailContent .chatpanel-head h2 { color: var(--mid-text); }
#chatDetailContent .chatpanel-head .muted, #chatDetailContent #chatPanelMeta { color: var(--mid-muted); }
#chatDetailContent #chatPanelMessages { background: var(--mid-lowest); }
#chatDetailContent .msg.in .msg-bubble { background: var(--mid-surface-3) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
#chatDetailContent .msg.out .msg-bubble { background: var(--mid-accent) !important; color: var(--mid-on-accent) !important; }
#chatDetailContent .msg-meta { color: var(--mid-muted); }
#chatDetailContent .msg-avatar { background: var(--mid-badge); color: var(--mid-primary); }
#chatDetailContent .msg-datesep span { background: var(--mid-surface-3); color: var(--mid-muted); }
/* composer */
#chatDetailContent .inbox-compose { background: var(--mid-surface); border-top: 1px solid var(--mid-line); }
#chatDetailContent .inbox-compose-row textarea { background: var(--mid-base) !important; border: 1px solid var(--mid-line) !important; color: var(--mid-text) !important; }
#chatDetailContent .inbox-compose-row textarea::placeholder { color: var(--mid-text-3); }
#chatDetailContent .inbox-banner { background: rgba(255,159,10,0.14) !important; border-color: rgba(255,159,10,0.3) !important; color: var(--mid-tertiary) !important; }
/* buttons */
#chatDetailContent .button { background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
#chatDetailContent .button .material-symbols-outlined { color: var(--mid-primary); }
#chatDetailContent .button.primary, #chatDetailContent #chatPanelSend, #chatDetailContent #chatPanelTakeover { background: var(--mid-accent) !important; border: 1px solid var(--mid-accent) !important; color: var(--mid-on-accent) !important; }
#chatDetailContent .button.primary .material-symbols-outlined, #chatDetailContent #chatPanelSend .material-symbols-outlined { color: var(--mid-on-accent); }
#chatDetailContent #chatPanelTakeover.danger { background: transparent !important; color: var(--mid-tertiary) !important; border: 1px solid rgba(255,159,10,0.5) !important; }
#chatDetailContent .detail-close { color: var(--mid-text-2); background: var(--mid-surface-3); border: 1px solid var(--mid-line); z-index: 2; }

/* Chat slide-in card matches the lead/contact drawer (uniform var(--mid-surface-2) chrome) */
#chatDetailContent { background: var(--mid-surface-2) !important; }
#chatDetailContent .chatpanel-head { background: var(--mid-surface-2) !important; }
#chatDetailContent .inbox-compose { background: var(--mid-surface-2) !important; }

/* Chat slide-in: uniform var(--mid-surface-2) like the lead/contact card (no darker message strip) */
#chatDetailContent #chatPanelMessages { background: transparent !important; }

/* ═══ Slide-in drawers (lead / contact / chat) = uniform FLOATING card ═══ */
@media (min-width: 769px) {
  body.dash-active .detail-content {
    height: calc(100dvh - 36px) !important;
    align-self: center;
    margin: 0 18px 0 0;
    border: 1px solid var(--mid-line) !important;
    border-left: 1px solid var(--mid-line) !important;
    border-radius: 20px !important;
    box-shadow: 0 28px 70px -16px rgba(0,0,0,0.6) !important;
  }
}

/* Chat card header — Lead / Contact / Take over on their own row under the name */
#chatDetailContent .chatpanel-head { align-items: flex-start; }
#chatDetailContent .chatpanel-actions { flex-basis: 100%; width: 100%; margin-left: 0 !important; margin-top: 10px; justify-content: flex-start; }

/* Quote — event picker matches the Add Event button height */
body.quote-active #page-quotes .qgm-add-event { align-items: stretch; }
body.quote-active #page-quotes .qgm-event-picker { min-height: 44px; }
body.quote-active #page-quotes .qgm-add-event-btn { min-height: 44px; }

/* ── WhatsApp Cloud API + Templates manager (Setup → Integrations) ─────────── */
.form-grid label.span-2 { grid-column: 1 / -1; }
.wa-cloud-webhook-head { margin-top: 14px; }
#waTemplatesPanel .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.wa-tpl-list { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 20px; }
.wa-tpl-row {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  padding: 12px 14px; border: 1px solid var(--outline, var(--mid-line));
  border-radius: 12px; background: var(--surface-container, var(--mid-surface-2));
}
.wa-tpl-main { min-width: 0; flex: 1 1 auto; }
.wa-tpl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wa-tpl-head strong { font-size: 14px; color: var(--text, var(--mid-text)); word-break: break-word; }
.wa-tpl-meta { font-size: 12px; color: var(--text-muted, var(--mid-muted)); }
.wa-tpl-body { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-2, var(--mid-text-2)); white-space: pre-wrap; word-break: break-word; }
.wa-tpl-actions { display: flex; gap: 8px; flex-shrink: 0; }
.wa-tpl-create { border-top: 1px solid var(--outline, var(--mid-line)); padding-top: 16px; margin-top: 4px; }
.wa-tpl-create h3 { margin: 0 0 12px; font-size: 14px; color: var(--text, var(--mid-text)); }
@media (max-width: 560px) {
  .wa-tpl-row { flex-direction: column; }
  .wa-tpl-actions { width: 100%; }
  #waTemplatesPanel .panel-heading { flex-direction: column; }
}

/* ── Chat 24h-window bar (conversations composer) ──────────────────────────── */
.inbox-window-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; margin: 0 0 8px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.3;
  border: 1px solid var(--outline, var(--mid-line)); background: var(--surface-container, var(--mid-surface-2));
  color: var(--text-2, var(--mid-text-2));
}
.inbox-window-bar .iwb-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--text-muted, var(--mid-muted)); }
.inbox-window-bar .iwb-text { flex: 1; min-width: 0; }
.inbox-window-bar .iwb-text strong { color: var(--text, var(--mid-text)); }
.inbox-window-bar.is-open { border-color: rgba(48,209,88,0.4); background: rgba(48,209,88,0.08); color: #9fe6b2; }
.inbox-window-bar.is-open .iwb-dot { background: #30d158; --iwb-glow: rgba(48,209,88,0.55); animation: iwbPulse 2s ease-out infinite; }
.inbox-window-bar.is-closed { border-color: rgba(255,69,58,0.45); background: rgba(255,69,58,0.10); color: #ff9a90; }
.inbox-window-bar.is-closed .iwb-dot { background: #ff453a; --iwb-glow: rgba(255,69,58,0.55); animation: iwbPulse 2s ease-out infinite; }
@keyframes iwbPulse {
  0% { box-shadow: 0 0 0 0 var(--iwb-glow, rgba(48,209,88,0.55)); }
  70% { box-shadow: 0 0 0 7px rgba(0,0,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}
.inbox-thread-who { cursor: pointer; }
.iwb-tpl-btn {
  display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  border: none; cursor: pointer; background: var(--tertiary, var(--mid-tertiary)); color: #3a2a00;
}
.iwb-tpl-btn .inline-icon { font-size: 16px; }
.inbox-compose textarea:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Template picker modal ─────────────────────────────────────────────────── */
/* ════════════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — Midnight tokens (single source of truth for ALL dark UI).
   The app's default :root theme is LIGHT (--surface / --ink / --muted / --bg /
   --panel are light, and only flip dark *inside #page-dashboard*). So body-level
   elements (modals, popovers, overlays) get the LIGHT tokens — that's why a
   dialog using var(--surface) renders cream on the dark app.
   RULE: every dialog / card / popover / overlay uses these ALWAYS-dark --mid-*
   tokens (or the matching hex). Never use var(--surface)/var(--ink)/var(--muted)
   for dark components. See CLAUDE.md.
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --mid-base: #0f1418;        /* page base                */
  --mid-surface: #171c20;     /* sunken surface           */
  --mid-surface-2: #1b2024;   /* card                     */
  --mid-surface-3: #252b2e;   /* raised (modals/popovers) */
  --mid-surface-4: #303539;   /* deeper hover / track     */
  --mid-deep: #141a1f;        /* enclosure (leads list)   */
  --mid-badge: #39485a;       /* badge / chip-ish bg      */
  --mid-text-3: #828d96;      /* faint text / icons — AA on cards (4.85:1) */
  --mid-lowest: #0a0f12;      /* inputs / wells           */
  --mid-line: #3e484f;        /* outline                  */
  --mid-text: #dee3e8;        /* primary text             */
  --mid-text-2: #bdc8d1;      /* secondary text           */
  --mid-muted: #87929a;       /* tertiary / hints         */
  --mid-primary: #8ed5ff;     /* cyan accent              */
  --mid-accent: #38bdf8;      /* solid accent             */
  --mid-on-accent: #00354a;   /* text on accent           */
  --mid-tertiary: #ffc176;    /* warm accent              */
  --mid-danger: #ff7a70;
  --mid-shadow: 0 24px 64px -16px rgba(0,0,0,0.6);
  --mid-radius: 16px;
}

/* Standard dark dialog (reference pattern for all popups) */
.tpl-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 18px; }
.tpl-modal[hidden] { display: none; }
.tpl-modal-backdrop { position: absolute; inset: 0; background: rgba(6,10,13,0.66); backdrop-filter: blur(2px); }
.tpl-modal-card {
  position: relative; z-index: 1; width: min(540px, 100%); max-height: 86dvh; overflow-y: auto;
  background: var(--mid-surface-3); color: var(--mid-text);
  border: 1px solid var(--mid-line); border-radius: 18px; box-shadow: var(--mid-shadow); padding: 20px;
}
.tpl-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tpl-modal-head h3 { margin: 0 0 2px; font-size: 17px; color: var(--mid-text); }
.tpl-modal-card p.muted, .tpl-modal-head p.muted { color: var(--mid-muted) !important; }
.tpl-modal-head .icon-btn { background: none; border: none; color: var(--mid-muted); cursor: pointer; padding: 4px; }
.tpl-picker-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-pick-row {
  text-align: left; width: 100%; cursor: pointer;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--mid-line);
  background: var(--mid-surface-2); color: var(--mid-text-2);
}
.tpl-pick-row:hover { border-color: var(--mid-primary); background: #20262b; }
.tpl-pick-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tpl-pick-head strong { color: var(--mid-text); font-size: 14px; }
.tpl-pick-body { margin: 5px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--mid-muted); white-space: pre-wrap; word-break: break-word; }
.tpl-picker-form .tpl-picker-name { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 15px; color: var(--mid-text); }
.tpl-picker-vars { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.tpl-var-row { display: flex; flex-direction: column; gap: 4px; }
.tpl-var-row span { font-size: 12px; color: var(--mid-muted); }
.tpl-var-row input {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--mid-line);
  background: var(--mid-lowest); color: var(--mid-text); font-size: 14px; min-height: 40px;
}
.tpl-var-row input::placeholder { color: var(--mid-muted); }
.tpl-picker-preview-wrap { margin-bottom: 16px; }
.tpl-picker-preview {
  margin-top: 6px; padding: 12px 14px; border-radius: 12px;
  background: rgba(48,209,88,0.10); border: 1px solid rgba(48,209,88,0.35);
  color: var(--mid-text); font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.tpl-picker-actions { display: flex; justify-content: flex-end; gap: 10px; }
#tplPickerBack { margin-bottom: 6px; }

/* ── Instagram → WhatsApp invite links (Setup → Integrations) ───────────────── */
.invite-form { margin-top: 6px; }
.invite-form #inviteGenerate { margin-top: 4px; }
.invite-result {
  margin: 16px 0; padding: 14px; border-radius: 12px;
  border: 1px solid rgba(48,209,88,0.3); background: rgba(48,209,88,0.07);
}
.invite-result .eyebrow { display: block; margin-bottom: 8px; }
.invite-link-row { display: flex; align-items: center; gap: 10px; }
.invite-link {
  flex: 1; min-width: 0; padding: 9px 12px; border-radius: 8px;
  background: var(--surface-lowest, var(--mid-lowest)); border: 1px solid var(--outline, var(--mid-line));
  color: var(--text, var(--mid-text)); font-size: 12.5px; word-break: break-all; line-height: 1.4;
}
.invite-list { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.invite-list-head { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted, var(--mid-muted)); margin-bottom: 2px; }
.invite-row {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-radius: 12px; border: 1px solid var(--outline, var(--mid-line));
  background: var(--surface-container, var(--mid-surface-2));
}
.invite-row-main { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.invite-row-main strong { color: var(--text, var(--mid-text)); font-size: 14px; }
.invite-ig { font-size: 12px; color: var(--primary, var(--mid-primary)); }
.invite-note { width: 100%; margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted, var(--mid-muted)); }
.invite-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
@media (max-width: 560px) {
  .invite-row { flex-direction: column; }
  .invite-row-actions { width: 100%; }
}

/* ── Ask Gia: full-screen overlay on mobile ─────────────────────────────────
   The panel was a bottom-right card (z-index 70), so the bottom nav, the (+)
   create FAB (z-index 72) and the suggestion chips showed through/over it.
   On mobile, make it a true full-screen overlay above EVERYTHING so all page
   content — including the menu bar — sits behind it. */
@media (max-width: 768px) {
  .askgia-panel {
    top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important;
    width: 100vw !important; height: 100vh !important; height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important; border: none !important;
    z-index: 1100 !important;
  }
  .askgia-panel.open { transform: none !important; }
  /* Clear the iOS home indicator under the composer. */
  .askgia-panel .askgia-input { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
}

/* ── Mobile Setup: show ONLY the Services/Events catalog (edit events on the go) ─
   On phones, Setup collapses to just the Quote-catalog card so it can be used as a
   quick "add/edit event" tool. Everything else (tabs, settings sections, sidebar,
   the settings Discard/Save header) is hidden; the catalog has its own Save. */
@media (max-width: 768px) {
  body.setup-active #page-setup > .page-heading,
  body.setup-active #page-setup #setupTabs,
  body.setup-active #page-setup .setup-sidebar { display: none !important; }
  body.setup-active #page-setup .setup-section { display: none !important; }
  body.setup-active #page-setup #quoteCatalogPanel { display: block !important; }
}

/* Refresh-from-Bigin button spinner */
#leadsRefreshBigin.is-spinning .material-symbols-outlined { animation: bigin-spin 0.8s linear infinite; }
@keyframes bigin-spin { to { transform: rotate(360deg); } }

/* ── Quote document modal (in-app View; Slides PDF stays the Download) ──────── */
.qdoc-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; }
.qdoc-bg { position: absolute; inset: 0; background: rgba(2,6,12,0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.qdoc-modal { position: relative; width: min(720px, 100%); max-height: 90vh; display: flex; flex-direction: column; background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7); overflow: hidden; font-family: var(--sans); }
.qdoc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--mid-line); }
.qdoc-h-title { font-size: 18px; font-weight: 700; color: var(--mid-text); }
.qdoc-h-sub { font-size: 12px; color: var(--mid-muted); margin-top: 2px; }
.qdoc-x { width: 34px; height: 34px; border-radius: 10px; border: none; background: var(--mid-surface-3); color: var(--mid-text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.qdoc-x:hover { color: var(--mid-primary); }
.qdoc-x .material-symbols-outlined { font-size: 20px; }
.qdoc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; }
.qdoc-body:has(.qd) { padding: 0; }
.qdoc-foot { flex: 0 0 auto; display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid var(--mid-line); }
.qdoc-doc { color: var(--mid-text); }
.qdoc-doc-head { margin-bottom: 16px; }
.qdoc-brand { font-size: 15px; font-weight: 700; color: var(--mid-primary); letter-spacing: 0.02em; }
.qdoc-meta { font-size: 13px; color: var(--mid-text-2); margin-top: 4px; }
.qdoc-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qdoc-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mid-muted); font-weight: 600; padding: 0 0 8px; border-bottom: 1px solid var(--mid-line); }
.qdoc-table td { padding: 10px 0; border-bottom: 1px solid rgba(62,72,79,0.5); vertical-align: top; }
.qdoc-table th.qdoc-pr, .qdoc-table td.qdoc-pr { text-align: right; white-space: nowrap; }
.qdoc-ev { font-weight: 600; color: var(--mid-text); }
.qdoc-tm { color: var(--mid-text-2); }
.qdoc-adds { font-size: 11px; color: var(--mid-tertiary); margin-top: 3px; }
.qdoc-extra td { color: var(--mid-muted); }
.qdoc-total-row td { border-bottom: none; padding-top: 12px; font-weight: 700; font-size: 15px; color: var(--mid-text); }
.qdoc-total-row .qdoc-pr { color: var(--mid-primary); }
.qdoc-events { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.qdoc-chip { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2); }
.qdoc-total-big { font-size: 26px; font-weight: 700; color: var(--mid-primary); margin: 6px 0 10px; }
@media (max-width: 600px) { .qdoc-overlay { padding: 0; align-items: flex-end; } .qdoc-modal { width: 100%; max-height: 92dvh; border-radius: 18px 18px 0 0; } }

/* ── Quote document (.qd) — WedFlow-style client document, midnight palette ──── */
.qd { color: var(--mid-text); }
.qd .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
/* Hero band */
.qd-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px; background: var(--mid-surface-2); border-bottom: 1px solid var(--mid-line); }
.qd-hero::before { content: ""; position: absolute; top: -120px; right: -120px; width: 260px; height: 260px; border-radius: 50%; background: rgba(56,189,248,0.06); filter: blur(40px); pointer-events: none; }
.qd-hero-l, .qd-hero-r { position: relative; z-index: 1; }
.qd-brand { font-size: 30px; font-weight: 700; line-height: 1.08; letter-spacing: -0.01em; color: var(--mid-primary); }
.qd-tag { margin-top: 5px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--mid-text-2); }
.qd-hero-r { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; text-align: right; }
.qd-qid { display: inline-block; padding: 4px 12px; border-radius: 999px; background: rgba(56,189,248,0.12); border: 1px solid rgba(142,213,255,0.3); color: var(--mid-primary); font-size: 12px; font-weight: 600; white-space: nowrap; }
.qd-dates { font-size: 12px; color: var(--mid-text-2); line-height: 1.7; }
.qd-dates strong { color: var(--mid-text); font-weight: 600; }
/* Prepared For */
.qd-prepared { padding: 18px 24px; background: var(--mid-surface); border-bottom: 1px solid var(--mid-line); display: flex; flex-direction: column; gap: 5px; }
.qd-prep-lbl { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mid-primary); }
.qd-prep-name { font-size: 22px; font-weight: 600; color: var(--mid-text); line-height: 1.2; }
.qd-prep-row { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mid-text-2); }
.qd-prep-row .material-symbols-outlined { font-size: 16px; color: var(--mid-muted); }
/* Stat highlights */
.qd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 18px 24px; background: var(--mid-lowest); border-bottom: 1px solid var(--mid-line); }
.qd-stat { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--mid-surface-2); border: 1px solid var(--mid-line); border-radius: 12px; }
.qd-stat-ic { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; background: rgba(142,213,255,0.10); color: var(--mid-primary); display: flex; align-items: center; justify-content: center; }
.qd-stat-ic .material-symbols-outlined { font-size: 22px; }
.qd-stat-val { font-size: 20px; font-weight: 700; color: var(--mid-text); line-height: 1.1; }
.qd-stat-lbl { font-size: 11px; color: var(--mid-text-2); margin-top: 2px; }
/* Line-item table */
.qd-table-wrap { padding: 6px 24px 2px; overflow-x: auto; }
.qd-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.qd-table th { text-align: left; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mid-muted); padding: 16px 0 10px; border-bottom: 1px solid var(--mid-line); }
.qd-table th.qd-date, .qd-table td.qd-date { text-align: center; white-space: nowrap; }
.qd-table th.qd-amt, .qd-table td.qd-amt { text-align: right; white-space: nowrap; }
.qd-table td { padding: 14px 0; border-bottom: 1px solid rgba(62,72,79,0.4); vertical-align: top; }
.qd-table tbody tr:last-child td { border-bottom: none; }
.qd-svc-name { font-size: 14px; font-weight: 600; color: var(--mid-text); }
.qd-svc-desc { font-size: 12px; color: var(--mid-text-2); margin-top: 3px; line-height: 1.45; }
.qd-table td.qd-date { color: var(--mid-text); font-size: 13px; padding-left: 12px; padding-right: 12px; }
.qd-table td.qd-amt { color: var(--mid-text); font-weight: 600; }
/* Financial summary (two-column) */
.qd-fin { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--mid-line); margin-top: 4px; }
.qd-sched { padding: 20px 24px; background: var(--mid-surface); border-right: 1px solid var(--mid-line); }
.qd-summary { padding: 20px 24px; background: var(--mid-surface-2); }
.qd-fin-h { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mid-primary); margin-bottom: 12px; }
.qd-sched-row { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; padding: 7px 0; }
.qd-sched-row span { color: var(--mid-text-2); }
.qd-sched-row strong { color: var(--mid-text); font-weight: 600; }
.qd-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 5px 0; }
.qd-sum-row span:first-child { color: var(--mid-text-2); }
.qd-sum-row span:last-child { color: var(--mid-text); }
.qd-sum-row.qd-disc span { color: #ffb4ab; }
.qd-divider { height: 1px; background: var(--mid-line); margin: 12px 0; }
.qd-grand { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qd-grand span:first-child { font-size: 18px; font-weight: 700; color: var(--mid-text); }
.qd-grand span:last-child { font-size: 18px; font-weight: 700; color: var(--mid-primary); }
/* Footer doc band */
.qd-footdoc { display: flex; justify-content: space-between; gap: 24px; padding: 20px 24px; background: var(--mid-surface-3); border-top: 1px solid var(--mid-line); }
.qd-terms ul { list-style: disc; padding-left: 18px; margin: 0; }
.qd-terms li { font-size: 12px; color: var(--mid-text-2); line-height: 1.5; margin-bottom: 5px; }
.qd-studio { text-align: right; font-size: 12px; color: var(--mid-text-2); line-height: 1.6; flex: 0 0 auto; }
.qd-studio strong { display: block; font-size: 14px; font-weight: 600; color: var(--mid-text); margin-bottom: 3px; }
@media (max-width: 600px) {
  .qd-hero { flex-direction: column; gap: 12px; padding: 18px 16px; }
  .qd-hero-r { align-items: flex-start; text-align: left; }
  .qd-prepared { padding: 16px; }
  .qd-stats { grid-template-columns: 1fr; padding: 16px; gap: 10px; }
  .qd-table-wrap { padding: 4px 16px 0; }
  .qd-fin { grid-template-columns: 1fr; }
  .qd-sched { border-right: none; border-bottom: 1px solid var(--mid-line); padding: 18px 16px; }
  .qd-summary { padding: 18px 16px; }
  .qd-footdoc { flex-direction: column; gap: 16px; padding: 18px 16px; }
  .qd-studio { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT THEME. The approved app UI is the "midnight" layout; light mode is that SAME
   UI recoloured by swapping the --mid-* palette below. The *-active classes stay applied
   in both themes (see applyShellClasses in app.js) and every surface is --mid-* token
   driven — so dark stays byte-identical (each token == its original hex in dark) and light
   is a pure value swap. This block also patches the few theme-specific bits not on a token
   (a white-alpha border, a couple of hover shades, faint field outlines). CSS nesting.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] {
  /* SAGE palette — warm bone canvas, olive ink, chartreuse highlight.
     Lime (--lime) is a FILL-ONLY accent: always dark-olive ink on top, never lime text. */
  --mid-base:#edeee4;        /* page / body / content — warm bone */
  --mid-surface:#f7f8f2;     /* sidebar, cards — soft off-white */
  --mid-surface-2:#ffffff;   /* topbar, raised cards, modals */
  --mid-surface-3:#e7e9dc;   /* raised / hover / pipeline dots / table head */
  --mid-surface-4:#dcdfd0;   /* deeper hover / progress tracks */
  --mid-deep:#e3e5d8;        /* list enclosure */
  --mid-badge:#e7ebda;       /* badges / avatars */
  --mid-lowest:#ffffff;      /* input wells */
  --mid-line:#d6d8c9;        /* field outlines (cards/pills go borderless instead) */
  --mid-text:#232920;        /* primary text — deep olive-black */
  --mid-text-2:#4c5345;      /* secondary text */
  --mid-text-3:#646d5c;      /* faint text / icons — AA on bone (4.62:1) */
  --mid-muted:#646d5c;       /* muted sage-grey — AA on bone */
  --mid-primary:#56671f;     /* accent — links, active, values (deep olive, readable) */
  --mid-accent:#56671f;      /* solid accent (buttons) — olive; lime is the spot accent */
  --mid-on-accent:#f2f6da;   /* text on accent */
  --mid-tertiary:#9a6a00;    /* warm accent */
  --mid-danger:#b3422f;
  --mid-shadow:0 14px 34px -14px rgba(42,51,37,0.20);
  --lime:#d9ec4f;            /* signature chartreuse — fills only */
  --on-lime:#2a3325;         /* ink on lime */
  --lime-tint:#eef3cf;       /* soft lime wash (hot column, highlights) */

  /* The dark shell points the global --line at a white-alpha (invisible on white). */
  #page-dashboard, body.dash-active { --line: var(--mid-line); }

  /* Hover shades intentionally left off the token conversion (keeps dark pixel-perfect). */
  .compose-chip:hover,
  body.dash-active .nav-item:hover:not(.active),
  .tpl-pick-row:hover { background: var(--mid-surface-3); }

  /* Field outlines — the glass / --qg borders are ~invisible on white. */
  #page-quotes .qg-card input, #page-quotes .qg-card select, #page-quotes .qg-card textarea { border-color: var(--outline-variant, #c0c6d6); }
  :is(.dlp, .lib-field, .lib-modal, .modal-content, .setup-section, .dl-field, .note-form, .task-form) :is(input, select, textarea):not([type=checkbox]):not([type=radio]) { border-color: var(--outline-variant, #c0c6d6); }

  /* Contact cards used a dark slate-glass fill (rgba(30,41,59,…)) → white card + border. */
  body.contacts-active #page-contacts .contact-card { background: var(--mid-surface-2); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 2px rgba(28,27,26,0.04); }
  body.contacts-active #page-contacts .contact-card:hover { background: var(--mid-surface-2); box-shadow: 0 10px 24px -14px rgba(28,27,26,0.20); }

  /* Inputs that were filled with a grey surface token → white-with-border (card colour). */
  body.quote-active #page-quotes input:not([type=checkbox]):not([type=radio]),
  body.quote-active #page-quotes select,
  body.quote-active #page-quotes textarea,
  body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]),
  body.setup-active #page-setup select,
  body.setup-active #page-setup textarea { background: var(--mid-surface-2) !important; }

  /* Setup save-bar used a dark translucent fill. */
  .setup-footer { background: var(--mid-surface-2); }

  /* Quote event card was page-grey → white card (matches the other cards + outline). */
  body.quote-active #page-quotes .qg-event-card { background: var(--mid-surface-2); }

  /* Send-template button: amber tile with dark text. (In light, --mid-tertiary is a dark
     amber, so amber-on-amber read as brown-on-brown.) */
  .iwb-tpl-btn { background: #f3a52b; color: #3a2400; }

  /* 24h-window status bar: text was a light (dark-theme) green/red, illegible on white. */
  .inbox-window-bar.is-open, .inbox-window-bar.is-open .iwb-text strong { color: #15672e; }
  .inbox-window-bar.is-closed, .inbox-window-bar.is-closed .iwb-text strong { color: #b3261e; }

  /* Quote success buttons (Open PDF / saved) — darker green + a visible border. */
  #page-quotes { --qg-ok-fg: #15672e; }
  #page-quotes .qg-link-primary, #page-quotes .qg-link-sent { border-color: rgba(48,209,88,0.5); }

  /* Status text that used a LIGHT (dark-theme) colour → readable dark variants on white. */
  .nx-pill.good, .nx-score.hot, #page-dashboard .dash-avatar.good,
  .ll-stage.good, .leads-table .ll-stage.good,
  .dlp-q-link-accept, .dlp-q-status-accepted,
  body.setup-active #page-setup .status-pill.status-ok,
  body.leads-active #page-leads .op-pill-quote { color: #15672e !important; }
  .nx-pill.warn, .nx-score.cold { color: #8a5a00 !important; }
  .ll-stage.bad, .leads-table .ll-stage.bad,
  .dlp-q-status-rejected, .dlp-status.danger,
  .msg-failed .msg-bubble, .msg-failed .msg-meta,
  .qd-sum-row.qd-disc span,
  body.quote-active #page-quotes .qgm-event-del { color: #b3261e !important; }
  body.dash-active .profile-menu-item:hover { color: #b3261e; }
  .inbox-ai-inline:hover, body.setup-active #page-setup a:hover { color: #005ab3 !important; }
  .dlp-badge, .lib-add-btn { color: var(--mid-text-2); }
}

/* Mobile bottom-nav pill used a dark glass fill (rgba(27,32,36,…)) → light pill in light theme. */
@media (max-width: 768px) {
  html[data-theme] .app-sidebar {
    background: var(--mid-surface) !important;
    box-shadow: 0 10px 30px -12px rgba(28,27,26,0.22) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   LIGHT THEME — complete form-field audit. ROOT CAUSE: var(--mid-base) is overloaded —
   it is BOTH the page background (stays grey in light) AND the fill of ~15 input rules
   across quote / setup / detail / chat / askgia (must be a WHITE well). Every field
   selector that resolves to a grey token in light is listed here; the html[data-theme]
   prefix raises specificity above each source rule, so every one wins. Result: every
   input/select/textarea is the card colour (white) + outline, app-wide.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] {
  /* Broad sweep: all non-ID-scoped form controls in the shell + detail panels. */
  body.dash-active input:not([type=checkbox]):not([type=radio]),
  body.dash-active select,
  body.dash-active textarea,
  .askgia-panel .askgia-input input,
  .dl-field > input, .dl-field > select, .dl-field > textarea { background: var(--mid-surface-2) !important; border-color: var(--outline-variant, #c0c6d6) !important; }

  /* ID-scoped page field rules (need an ID-level override to win). */
  body.quote-active #page-quotes input:not([type=checkbox]):not([type=radio]),
  body.quote-active #page-quotes select,
  body.quote-active #page-quotes textarea,
  body.quote-active #page-quotes .qgm-field input,
  body.quote-active #page-quotes .qgm-lead-fields .qgm-field input,
  body.quote-active #page-quotes .crm-search-row input,
  body.quote-active #page-quotes .qg-rail-discount input,
  body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]),
  body.setup-active #page-setup select,
  body.setup-active #page-setup textarea,
  body.setup-active #page-setup .qc-svc select,
  body.setup-active #page-setup .team-role-select,
  body.chat-active .inbox-compose-row textarea,
  #chatDetailContent .inbox-compose-row textarea,
  #dealDetailContent .dl-field > input, #dealDetailContent .dl-field > select, #dealDetailContent .dl-field > textarea,
  #contactDetailContent .dl-field > input, #contactDetailContent .dl-field > select, #contactDetailContent .dl-field > textarea { background: var(--mid-surface-2) !important; border-color: var(--outline-variant, #c0c6d6) !important; }

  /* Quote event-card header was a dark slate-glass strip (rgba(57,72,90,.3)) → match the card. */
  body.quote-active #page-quotes .qgm-event-head { background: var(--mid-surface-2); border-bottom-color: var(--mid-line); }
}

/* ════════════════════════════════════════════════════════════════════════════
   UI POLISH LAYER — motion system, consistency, mobile ergonomics (2026-06)
   Appended last so it wins the cascade in BOTH themes. All motion is
   transform/opacity-only; durations/easings come from the :root tokens.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes uiFadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes uiRiseIn   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes uiPopIn    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes uiSheetIn  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes uiBarGrowY { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes uiBarGrowX { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes uiCheckPop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes uiRowOut   { to { opacity: 0; transform: translateX(14px); } }
@keyframes uiToastIn  { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes uiSpin     { to { transform: rotate(360deg); } }

/* ── Page transitions — fade only (no transform: pages contain fixed-position
      FABs which a transformed ancestor would re-anchor mid-animation) ── */
.page:not([hidden]) { animation: uiRiseIn var(--dur-2) var(--ease-out); }

/* ── Detail full-pages (deal + contact): content rises in ── */
.detail-fullpage:not([hidden]) .dlp { animation: uiRiseIn var(--dur-3) var(--ease-out); }

/* ── Modals: backdrop fades, card pops ── */
.modal:not([hidden]) { animation: uiFadeIn var(--dur-2) ease; }
.modal:not([hidden]) .modal-content { animation: uiPopIn var(--dur-2) var(--ease-out); }
.tpl-modal:not([hidden]) { animation: uiFadeIn var(--dur-2) ease; }
.tpl-modal:not([hidden]) .tpl-modal-card { animation: uiPopIn var(--dur-2) var(--ease-out); }
.lib-modal-overlay { animation: uiFadeIn var(--dur-2) ease; }
.lib-modal-overlay .lib-modal { animation: uiPopIn var(--dur-2) var(--ease-out); }
.qdoc-overlay .qdoc-bg { animation: uiFadeIn var(--dur-2) ease; }
.qdoc-overlay .qdoc-modal { animation: uiPopIn var(--dur-3) var(--ease-out); }

/* ── Popovers: quick anchored pop ── */
.notif-pop:not([hidden]),
.profile-menu-pop:not([hidden]) { animation: uiPopIn var(--dur-1) var(--ease-out); transform-origin: top right; }
.create-menu-pop:not([hidden]) { animation: uiPopIn var(--dur-1) var(--ease-out); transform-origin: bottom right; }
.nav-more-pop:not([hidden]) { animation: uiPopIn var(--dur-1) var(--ease-out); transform-origin: bottom center; }

/* ── Dashboard: KPIs cascade in, charts grow ── */
.nx-kpi { animation: uiRiseIn var(--dur-3) var(--ease-out) backwards; }
.nx-kpi:nth-child(1) { animation-delay: 0ms; }
.nx-kpi:nth-child(2) { animation-delay: 45ms; }
.nx-kpi:nth-child(3) { animation-delay: 90ms; }
.nx-kpi:nth-child(4) { animation-delay: 135ms; }
.nx-kpi:nth-child(5) { animation-delay: 180ms; }
.nx-kpi:nth-child(6) { animation-delay: 225ms; }
.nx-bar-fill { transform-origin: bottom; animation: uiBarGrowY var(--dur-4) var(--ease-out) backwards; }
.nx-bar:nth-child(2) .nx-bar-fill { animation-delay: 30ms; }
.nx-bar:nth-child(4) .nx-bar-fill { animation-delay: 60ms; }
.nx-bar:nth-child(6) .nx-bar-fill { animation-delay: 90ms; }
.nx-bar:nth-child(8) .nx-bar-fill { animation-delay: 120ms; }
.nx-bar:nth-child(10) .nx-bar-fill { animation-delay: 150ms; }
.nx-bar:nth-child(12) .nx-bar-fill { animation-delay: 180ms; }
.nx-funnel-fill { transform-origin: left; animation: uiBarGrowX var(--dur-4) var(--ease-out) backwards; }
.nx-card { animation: uiRiseIn var(--dur-3) var(--ease-out) backwards; }
.nx-card:nth-child(2) { animation-delay: 60ms; }
.nx-card:nth-child(3) { animation-delay: 120ms; }
.nx-card:nth-child(4) { animation-delay: 180ms; }

/* ── Contacts grid: staggered entrance (nav-only render, never polled) ── */
.contact-card { animation: uiRiseIn var(--dur-3) var(--ease-out) backwards; }
.contact-card:nth-child(2)  { animation-delay: 35ms; }
.contact-card:nth-child(3)  { animation-delay: 70ms; }
.contact-card:nth-child(4)  { animation-delay: 105ms; }
.contact-card:nth-child(5)  { animation-delay: 140ms; }
.contact-card:nth-child(6)  { animation-delay: 175ms; }
.contact-card:nth-child(7)  { animation-delay: 210ms; }
.contact-card:nth-child(8)  { animation-delay: 245ms; }
.contact-card:nth-child(n+9) { animation-delay: 280ms; }

/* ── Buttons: tactile press + visible focus + honest disabled ── */
.button, .topbar-iconbtn, .dlp-icon-btn, .dlp-del-icon, .cc-send-btn, .compose-tool,
.qdoc-x, .askgia-iconbtn, .leads-view-btn, .action-done, .lib-add-btn, .qgm-step-btn {
  transition: transform var(--dur-1) ease, background var(--dur-1) ease, border-color var(--dur-1) ease, opacity var(--dur-1) ease;
}
.button:active, .topbar-iconbtn:active, .dlp-icon-btn:active, .dlp-del-icon:active,
.cc-send-btn:active, .compose-tool:active, .qdoc-x:active, .askgia-iconbtn:active,
.leads-view-btn:active, .action-done:active, .lib-add-btn:active, .qgm-step-btn:active {
  transform: scale(0.95);
}
/* Global focus-visible BASELINE (zero-specificity :where, so the named rules below
   still override). Was an opt-in allow-list → links, menu items, role=button divs,
   inputs had no visible keyboard focus. This makes every interactive element show one. */
:where(a[href], button, [role="button"], [tabindex]:not([tabindex="-1"]), input, select, textarea, [contenteditable="true"]):focus-visible {
  outline: 2px solid var(--mid-accent, #38bdf8);
  outline-offset: 2px;
  border-radius: 4px;
}
.button:focus-visible, .topbar-iconbtn:focus-visible, .dlp-icon-btn:focus-visible,
.dlp-del-icon:focus-visible, .cc-send-btn:focus-visible, .compose-tool:focus-visible,
.qdoc-x:focus-visible, .askgia-iconbtn:focus-visible, .leads-view-btn:focus-visible,
.action-done:focus-visible, .nav-item:focus-visible, .create-fab:focus-visible,
.lib-add-btn:focus-visible, .qgm-step-btn:focus-visible {
  outline: 2px solid var(--mid-accent, #38bdf8);
  outline-offset: 2px;
}
.button:disabled, .topbar-iconbtn:disabled, .dlp-icon-btn:disabled, .cc-send-btn:disabled,
.compose-tool:disabled, .action-done:disabled, .lib-add-btn:disabled, .qgm-step-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── In-flight buttons: spinning progress glyph (replaces frozen hourglass) ── */
.material-symbols-outlined.icon-spin { animation: uiSpin 0.9s linear infinite; }

/* ── Task done: check pops, row slides out (JS adds .is-done then removes) ── */
.action-row.is-done { animation: uiRowOut 0.28s var(--ease-in) forwards; pointer-events: none; }
.action-row.is-done .action-done .material-symbols-outlined {
  animation: uiCheckPop 0.3s var(--ease-spring);
  color: #30d158;
}

/* ── Kanban drag feedback ── */
.kanban-card.kb-dragging { opacity: 0.65; transform: scale(1.03) rotate(0.6deg); box-shadow: 0 16px 40px -10px rgba(0,0,0,0.5); }
.kb-drop { transition: outline-color var(--dur-2) ease, background var(--dur-2) ease; }

/* ── App toast (body-level; replaces page-embedded banners) ── */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 300;
  max-width: min(480px, calc(100vw - 32px));
  padding: 11px 18px;
  border-radius: 12px;
  background: var(--mid-surface-3, #252b2e);
  color: var(--mid-text, #dee3e8);
  border: 1px solid var(--mid-line, #3e484f);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.55);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 1.45;
  animation: uiToastIn var(--dur-2) var(--ease-out);
}
.app-toast.is-error { border-color: rgba(255, 122, 112, 0.5); color: #ffb4ab; }
.app-toast.is-hiding { opacity: 0; transform: translateX(-50%) translateY(8px); transition: opacity var(--dur-2) ease, transform var(--dur-2) ease; }
@media (max-width: 768px) {
  .app-toast { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* above the bottom nav */
}

/* ── Typography normalization: one size per semantic role ── */
.dash-card-head h3, .dlp-card-head h3, .lib-card-title, .pc-section > h3 { font-size: var(--fs-body-lg); font-weight: 600; }
.tpl-modal-head h3, .lib-modal-head h3 { font-size: var(--fs-title3); font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-caption); }
/* …and on always-dark surfaces the muted grey must be the dark-theme one */
.tpl-modal-card .muted, .modal-content .muted, .detail-fullpage .muted, .askgia-panel .muted,
.lib-modal .muted, .qdoc-modal .muted, .notif-pop .muted, .create-menu-pop .muted, .nav-more-pop .muted {
  color: var(--mid-muted, #87929a);
}

/* ── Empty states: one consistent look (covers all 11 ad-hoc variants) ── */
.empty, .dash-empty, .kcard-empty, .kanban-empty, .inbox-empty, .contacts-empty,
.lib-empty, .gs-empty, .tasks-cat-empty, .qc-empty, .qgm-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: var(--fs-body-sm);
  color: var(--mid-muted, #87929a);
  animation: uiFadeIn var(--dur-3) ease;
}

/* ── Mobile ergonomics ── */
@media (max-width: 768px) {
  /* iOS zooms any focused input under 16px — keep every field at 16 on phones
     (replaces the removed user-scalable=no hack; also a readability win) */
  input, select, textarea { font-size: 16px !important; }

  /* 40px minimum hit areas on the small controls flagged in the audit */
  .dlp-icon-btn, .dlp-del-icon, .action-done, .dl-close, .leads-view-btn,
  .contact-wa-link, .tpl-modal-head .icon-btn, .dlp-step-dot, .qdoc-x {
    min-width: 40px;
    min-height: 40px;
  }
  .qgm-step-btn { min-width: 38px; min-height: 38px; }
  .button:not(.small) { min-height: 44px; }

  /* Template picker becomes a bottom sheet like every other mobile dialog */
  .tpl-modal { align-items: flex-end; padding: 0; }
  .tpl-modal .tpl-modal-card {
    width: 100%;
    max-width: none;
    max-height: 92dvh;
    border-radius: 18px 18px 0 0;
    animation: uiSheetIn var(--dur-3) var(--ease-out);
  }
}

/* ── Reduced motion: collapse all animation to near-zero (not none, so JS
      waiting on animationend still fires); kills the infinite glow loops ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE LIGHT THEME — Phase 1: Leads kanban (light mode only; midnight untouched)
   Borderless surfaces — separation comes from background contrast + soft olive
   shadows, never outlines. Lime = "act on this" (hot leads). Ghost numbers on
   stage headers carry the count as a design element.
   ════════════════════════════════════════════════════════════════════════════ */

/* Ghost count lives in the DOM for both themes but only the light theme shows it. */
.kb-ghost { display: none; }

html[data-theme] body { background: var(--mid-base); }

/* ── Columns: flat bone panels, no border, no glass ── */
html[data-theme] body.leads-active #page-leads .kanban-col {
  background: #f3f4ea;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 18px;
  box-shadow: none;
}
/* Structural (no color) → applies in BOTH themes so the pill shape is identical;
   only the token colours differ between light/dark. */
body.leads-active #page-leads .kanban-col-header {
  position: relative;
  border-bottom: none;
  padding-bottom: 4px;
}
html[data-theme] body.leads-active #page-leads .kanban-col-title {
  color: #6b7261;
  letter-spacing: 0.07em;
}
html[data-theme] body.leads-active #page-leads .kanban-col-meta { color: var(--mid-muted); }

/* Ghost stage count — large, translucent, top-right of the header */
html[data-theme] body.leads-active #page-leads .kb-ghost {
  display: block;
  position: absolute;
  top: 0;
  right: 14px;
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(42, 51, 37, 0.10);
  pointer-events: none;
  user-select: none;
}

/* ── Hot lead column: the lime "act now" tint ── */
html[data-theme] body.leads-active #page-leads .kanban-col[data-stage="Hot lead"] { background: var(--lime-tint); }
html[data-theme] body.leads-active #page-leads .kanban-col[data-stage="Hot lead"] .kanban-col-title { color: #5a661c; }
html[data-theme] body.leads-active #page-leads .kanban-col[data-stage="Hot lead"] .kb-ghost { color: rgba(150, 170, 40, 0.45); }

/* ── Cards: white, borderless, soft olive shadow ── */
html[data-theme] body.leads-active #page-leads .kanban-card {
  background: var(--mid-surface-2, #ffffff);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: none;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
}
html[data-theme] body.leads-active #page-leads .kanban-card:hover {
  border: none;
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 14px 28px -10px rgba(42,51,37,0.18);
}
html[data-theme] #page-leads .kanban-card-amount { color: var(--mid-primary); }

/* ── Stage pills (mobile nav) + chips: borderless, olive active, lime hot count ── */
html[data-theme] body.leads-active #page-leads .leads-stage-pill {
  background: var(--mid-surface-2, #ffffff);
  border: none;
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  color: var(--mid-text-2);
}
html[data-theme] body.leads-active #page-leads .leads-stage-pill .count {
  background: var(--mid-surface-3);
  color: var(--mid-text-2);
}
html[data-theme] body.leads-active #page-leads .leads-stage-pill.is-active {
  background: #2a3325;
  border: none;
  color: #edeee4;
}
html[data-theme] body.leads-active #page-leads .leads-stage-pill.is-active .count,
html[data-theme] body.leads-active #page-leads .leads-stage-pill[data-stage="Hot lead"] .count {
  background: var(--lime);
  color: var(--on-lime);
}

/* ── Leads list view: borderless white rows to match ── */
html[data-theme] body.leads-active #page-leads .lead-row {
  background: var(--mid-surface-2, #ffffff);
  border: none;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05);
}

/* ── Drag feedback in sage: lime drop target ── */
html[data-theme] body.leads-active #page-leads .kb-drop {
  outline: 2px dashed rgba(150,170,40,0.6);
  background: var(--lime-tint);
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE LIGHT THEME — Phase 2: Dashboard REBUILD (reference replica)
   The #sageDash layer is a full re-layout rendered from the same payload:
   display greeting → stat chips → summary card w/ segmented barcode chart →
   ghost-number focus cards → schedule rows → goal card w/ textures.
   Hidden in dark (midnight keeps its original dashboard untouched).
   ════════════════════════════════════════════════════════════════════════════ */

.sage-dash { display: none; }

/* Un-gated structure (display/position, no colour) → Sage dashboard shows + old
   nx hides in BOTH themes. Dark gets its colour from the dark token palette. */
body.dash-active .sage-dash { display: block; }
body.dash-active #page-dashboard :is(.nx-kpis, .nx-chart-card, .nx-split) { display: none; }
body.dash-active #page-dashboard .page-heading > div:first-of-type { display: none; }
body.dash-active #page-dashboard .page-heading { justify-content: flex-end; margin-bottom: 0; }

/* The reference typeface — applied in BOTH themes (structure, not colour) so dark
   renders identical metrics to light. (Was light-only → dark fell back to Inter,
   whose taller line-box made dark pills slightly taller. Rebuild step 1.) */
body,
body :is(input, select, textarea, button):not(.material-symbols-outlined) { font-family: "Schibsted Grotesk", "Inter", sans-serif; }

/* ── Greeting + display heading ── */
.sg-hello { margin: 4px 0 2px; font-size: 14px; color: var(--mid-muted); }
.sg-display {
  margin: 0 0 18px;
  font-size: clamp(34px, 5vw, 46px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.03em;
  color: var(--mid-text);
}

/* ── Stat chips ── */
.sg-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.sg-chip {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px;
  padding: 10px 18px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--mid-text-2);
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.sg-chip b { font-size: 19px; font-weight: 600; color: var(--mid-text); letter-spacing: -0.01em; }
.sg-chip:hover { transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18); }
.sg-chip-lime { background: var(--lime); color: #4a5320; }
.sg-chip-lime b { color: var(--on-lime); }

/* ── Layout grid ── */
.sg-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 14px; align-items: start; }
.sg-grid > * { min-width: 0; }
.sg-grid > .sg-pipeline { grid-column: 1; }
.sg-grid > .sg-focus { grid-column: 2; grid-row: 1 / span 2; }
.sg-grid > .sg-trend { grid-column: 1; }
.sg-grid > .sg-schedule { grid-column: 1; }
.sg-grid > .sg-goal { grid-column: 2; }
@media (max-width: 900px) {
  .sg-grid { grid-template-columns: 1fr; }
  .sg-grid > * { grid-column: 1 !important; grid-row: auto !important; }
}

/* ── Cards (borderless, near-white on bone) ── */
.sg-card {
  background: var(--sg-surface, #fdfdf8); border-radius: 24px; padding: 20px 22px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  animation: uiRiseIn var(--dur-3) var(--ease-out) backwards;
}
.sg-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.sg-card-head h3 { margin: 0; font-size: 15px; font-weight: 500; color: var(--mid-text); }
.sg-open {
  font-size: 16px; color: var(--mid-text-2); cursor: pointer;
  width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: 50%; background: var(--mid-surface-3);
}
.sg-pipeline { cursor: pointer; }

/* Big number + legend */
.sg-big-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.sg-big { font-size: clamp(30px, 3.4vw, 40px); font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text); line-height: 1.05; }
.sg-big-sub { font-size: 12px; color: var(--mid-muted); margin-top: 2px; }
.sg-legend { display: grid; grid-template-columns: auto auto; gap: 4px 14px; padding-top: 4px; }
.sg-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mid-text-2); white-space: nowrap; }
/* Legend + barcode are now buttons (click → filter Leads by stage): strip the
   default button chrome and show they're interactive. */
.sg-leg { background: none; border: none; padding: 2px 4px; margin: -2px -4px; border-radius: 7px; cursor: pointer; font-family: inherit; transition: background var(--dur-1) var(--ease-out); }
.sg-leg:hover { background: rgba(42,51,37,0.06); }
.sg-seg { cursor: pointer; border: none; padding: 0; }
.sg-barcode:hover .sg-seg { opacity: 0.6; }
.sg-barcode .sg-seg:hover { opacity: 1; }
.sg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Segmented barcode chart — the reference's signature texture */
.sg-barcode { display: flex; gap: 3px; height: 58px; margin-top: 16px; overflow: hidden; }
.sg-seg { height: 100%; border-radius: 2px; min-width: 8px; }
.sg-seg-a    { background: repeating-linear-gradient(90deg, #c9cdba 0 2px, transparent 2px 6px); }
.sg-seg-b    { background: repeating-linear-gradient(90deg, #aab89a 0 2px, transparent 2px 6px); }
.sg-seg-c    { background: repeating-linear-gradient(90deg, #e0b25c 0 2px, transparent 2px 6px); }
.sg-seg-d    { background: repeating-linear-gradient(90deg, #9aa68c 0 2px, transparent 2px 6px); }
.sg-seg-lime { background: repeating-linear-gradient(90deg, var(--lime) 0 3px, transparent 3px 6px); }
.sg-seg-won  { background: repeating-linear-gradient(90deg, #2a3325 0 2px, transparent 2px 6px); }
.sg-dot.sg-seg-a { background: #c9cdba; } .sg-dot.sg-seg-b { background: #aab89a; }
.sg-dot.sg-seg-c { background: #e0b25c; } .sg-dot.sg-seg-d { background: #9aa68c; }
.sg-dot.sg-seg-lime { background: var(--lime); } .sg-dot.sg-seg-won { background: #2a3325; }
.sg-barcode-labels { display: flex; gap: 3px; margin-top: 6px; overflow: hidden; }
.sg-barcode-labels span { font-size: 11px; color: var(--mid-muted); min-width: 8px; }

/* ── Focus cards: big numerals + destinations (Recent Activity replica) ── */
.sg-focus { display: flex; flex-direction: column; gap: 10px; }
.sg-pri {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  position: relative; text-align: left;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 22px; padding: 22px;
  font-family: inherit; cursor: pointer;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  transition: transform var(--dur-1) ease, box-shadow var(--dur-2) ease;
  animation: uiRiseIn var(--dur-3) var(--ease-out) backwards;
}
.sg-focus .sg-pri:nth-child(2) { animation-delay: 60ms; }
.sg-focus .sg-pri:nth-child(3) { animation-delay: 120ms; }
.sg-pri:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(42,51,37,0.05), 0 16px 32px -14px rgba(42,51,37,0.22); }
.sg-pri-label { font-size: 13px; line-height: 1.25; color: var(--mid-text-2); }
.sg-pri-num {
  font-size: clamp(44px, 4.6vw, 56px); font-weight: 500; letter-spacing: -0.03em;
  color: #b9bfae; text-align: center; line-height: 1;
}
.sg-pri-dest { font-size: 13px; line-height: 1.25; color: var(--mid-text); text-align: right; }
.sg-pri-stat {
  position: absolute; top: 12px; right: 16px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: #5a661c;
}
.sg-pri-stat small { font-size: 10px; color: #7c8454; }
.sg-ministripe { width: 22px; height: 12px; background: repeating-linear-gradient(90deg, #aab06a 0 2px, transparent 2px 5px); border-radius: 1px; }
.sg-pri-lime { background: var(--lime); }
.sg-pri-lime .sg-pri-label { color: #5a661c; }
.sg-pri-lime .sg-pri-num { color: #b9cb3f; }
.sg-pri-lime .sg-pri-dest { color: var(--on-lime); }
.sg-pri-grey { background: #d6d9ca; }
.sg-pri-grey .sg-pri-num { color: #b6baa7; }

/* ── Schedule rows (Monthly Tasks replica) ── */
.sg-day { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid rgba(42,51,37,0.07); }
.sg-day:first-of-type { border-top: none; padding-top: 0; }
.sg-day-num { font-size: 30px; font-weight: 500; letter-spacing: -0.02em; color: var(--mid-text); min-width: 44px; line-height: 1.1; }
.sg-day-meta { font-size: 11.5px; color: var(--mid-muted); margin-bottom: 6px; }
.sg-day-evts { display: flex; gap: 6px; flex-wrap: wrap; }
.sg-evt {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--mid-surface-3); border: none; border-radius: 999px;
  padding: 5px 12px; font-family: inherit; font-size: 12px; color: var(--mid-text-2); cursor: pointer;
}
.sg-evt:hover { background: var(--mid-surface-4); }
.sg-evt-t { font-weight: 600; color: var(--mid-text); font-size: 11px; }
.sg-empty { padding: 18px 0 6px; font-size: 12.5px; color: var(--mid-muted); }

/* ── Goal card textures (Yearly Revenue Goal replica) ── */
.sg-goal-tiles { display: flex; gap: 10px; margin-top: 16px; }
.sg-tile {
  flex: 1; height: 64px; border-radius: 14px; padding: 10px 14px;
  font-size: 12px; color: var(--mid-text-2); display: flex; flex-direction: column; justify-content: flex-end; gap: 0;
}
.sg-tile b { font-size: 17px; font-weight: 600; color: var(--mid-text); }
.sg-tile-stripe { background: repeating-linear-gradient(90deg, rgba(217,236,79,0.55) 0 3px, #f3f5e4 3px 7px); }
.sg-tile-dots { background-color: #eceee0; background-image: radial-gradient(rgba(42,51,37,0.22) 1.2px, transparent 1.4px); background-size: 9px 9px; }

/* Restyle the surviving period filter / refresh to float over the greeting */
html[data-theme] body.dash-active #page-dashboard .dash-period .button {
  background: var(--sg-surface, #fdfdf8); border: none; box-shadow: 0 1px 3px rgba(42,51,37,0.08); border-radius: 999px;
}

/* ── Sage trend card (leads by day / period — driven by the top-right filter) ── */
.sg-trend-total { font-size: 12px; color: var(--mid-muted); }
.sg-cols { display: flex; align-items: flex-end; gap: 5px; height: 110px; overflow: hidden; }
.sg-colwrap { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; }
.sg-col {
  width: 100%; border-radius: 3px; min-height: 4px;
  background: repeating-linear-gradient(90deg, #c2c7b2 0 2px, transparent 2px 5px);
  transform-origin: bottom; animation: uiBarGrowY var(--dur-4) var(--ease-out) backwards;
}
.sg-col.is-top { background: repeating-linear-gradient(90deg, var(--lime) 0 3px, transparent 3px 6px); }
.sg-colwrap span { font-size: 10px; color: var(--mid-muted); white-space: nowrap; }
.sg-colwrap:nth-child(2) .sg-col { animation-delay: 40ms; }
.sg-colwrap:nth-child(4) .sg-col { animation-delay: 80ms; }
.sg-colwrap:nth-child(6) .sg-col { animation-delay: 120ms; }

/* ── Mobile padding / density pass for the sage dashboard ── */
@media (max-width: 768px) {
  html[data-theme] body.dash-active #page-dashboard .page-heading { margin: 0 0 2px; padding: 0; }
  .sg-hello { margin-top: 0; }
  .sg-display { font-size: 31px; margin-bottom: 12px; }
  .sg-chips { gap: 7px; margin-bottom: 12px; }
  .sg-chip { padding: 8px 13px; font-size: 12px; }
  .sg-chip b { font-size: 16px; }
  .sg-grid { gap: 10px; }
  .sg-card { padding: 16px; border-radius: 20px; }
  .sg-card-head { margin-bottom: 10px; }
  .sg-pri { padding: 15px 16px; border-radius: 18px; gap: 8px; }
  .sg-pri-num { font-size: 38px; }
  .sg-pri-label, .sg-pri-dest { font-size: 12px; }
  .sg-big { font-size: 27px; }
  .sg-barcode { height: 42px; margin-top: 12px; }
  .sg-barcode-labels span { font-size: 9.5px; }
  .sg-legend { grid-template-columns: auto; gap: 3px; }
  .sg-cols { height: 86px; }
  .sg-day-num { font-size: 25px; min-width: 36px; }
  .sg-goal-tiles { margin-top: 12px; }
  .sg-tile { height: 56px; padding: 8px 12px; }
  /* Hide every other trend label when buckets are dense (scoped ranges) */
  .sg-colwrap:nth-child(even) span { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE DASHBOARD v2 — feedback round (overrides earlier sage rules; later wins)
   Independent flex columns (kills the row-coupling gap), distinct stage colors,
   scrollable list cards (collapsible on mobile), restyled filter/refresh.
   ════════════════════════════════════════════════════════════════════════════ */

/* Two INDEPENDENT columns — cards stack with no cross-column row gaps. */
.sg-grid { display: flex; align-items: flex-start; gap: 14px; }
.sg-main { flex: 1.15; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sg-side { flex: 0.85; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.sg-headrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sg-display { margin: 2px 0 14px; }

/* ── Distinct stage colors (legend / segments / funnel share these) ──
   Pending = striped stone · Qualified = sage green · Hot = lime ·
   Verbal = amber · Cold = blue-grey · Won = deep olive. */
.sg-seg.sg-st-pending { background: repeating-linear-gradient(90deg, #b9bfae 0 2px, transparent 2px 5px); }
.sg-seg.sg-st-qual    { background: #9dba6e; }
.sg-seg.sg-st-hot     { background: var(--lime); }
.sg-seg.sg-st-verbal  { background: #e8b54a; }
.sg-seg.sg-st-cold    { background: #9fb4bd; }
.sg-dot.sg-st-pending { background: #b9bfae; }
.sg-dot.sg-st-qual    { background: #9dba6e; }
.sg-dot.sg-st-hot     { background: var(--lime); border: 1px solid #b9cb3f; }
.sg-dot.sg-st-verbal  { background: #e8b54a; }
.sg-dot.sg-st-cold    { background: #9fb4bd; }
.sg-leg b { font-weight: 600; color: var(--mid-text); }

/* ── Conversion funnel card ── */
.sg-fun-row { padding: 7px 0; }
.sg-fun-head { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--mid-text-2); margin-bottom: 5px; }
.sg-fun-head span { flex: 1; }
.sg-fun-head b { font-size: 13px; color: var(--mid-text); }
.sg-fun-conv { font-size: 11px; color: var(--mid-muted); }
.sg-fun-track { height: 10px; border-radius: 6px; background: var(--mid-surface-3); overflow: hidden; }
.sg-fun-fill { height: 100%; border-radius: 6px; transform-origin: left; animation: uiBarGrowX var(--dur-4) var(--ease-out) backwards; }
.sg-fun-fill.sg-st-pending { background: #b9bfae; }
.sg-fun-fill.sg-st-qual    { background: #9dba6e; }
.sg-fun-fill.sg-st-hot     { background: var(--lime); }
.sg-fun-fill.sg-st-verbal  { background: #e8b54a; }
.sg-fun-fill.sg-st-cold    { background: #9fb4bd; }
.sg-fun-fill.sg-st-won     { background: #2a3325; }

/* ── List cards (calls/follow-ups + pending quotes) ── */
.sg-listhead {
  width: 100%; background: none; border: none; padding: 0; cursor: default;
  font-family: inherit; text-align: left;
}
.sg-listmeta { display: inline-flex; align-items: center; gap: 6px; }
.sg-listmeta b { font-size: 17px; font-weight: 600; color: var(--mid-text); }
.sg-chev { display: none; font-size: 20px; color: var(--mid-muted); transition: transform var(--dur-2) var(--ease-out); }
.sg-list { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; padding-top: 4px; }
.sg-row {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; cursor: pointer;
  background: rgba(42,51,37,0.04); border-radius: 12px;
  margin-bottom: 8px;   /* gap that survives display:block (mobile + desktop) */
  transition: background var(--dur-1) var(--ease-out);
}
.sg-row:last-child { margin-bottom: 0; }
.sg-row:hover { background: rgba(42,51,37,0.08); }
.sg-row-ico { font-size: 17px; color: var(--mid-muted); flex: 0 0 auto; }
/* Pattern-driven nudge (from the leak monitor / learnings) — subtle accent. */
.sg-row-nudge { box-shadow: inset 3px 0 0 var(--mid-accent); }
.sg-row-nudge .sg-row-ico { color: var(--mid-accent); }
.sg-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sg-row-main b { font-size: 13px; font-weight: 500; color: var(--mid-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-row-main small { font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sg-row-go { font-size: 17px; color: var(--mid-text-3); }
/* ✓ mark-done button on dashboard task rows — hollow check that fills lime on
   hover/tap. Separate hit target so the rest of the row still opens the deal. */
.sg-done {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 34px; height: 34px; margin-right: -4px;
  border: none; border-radius: 50%; background: transparent;
  color: var(--mid-muted); cursor: pointer;
  transition: color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.sg-done .material-symbols-outlined { font-size: 20px; }
.sg-done:hover { color: var(--on-lime, #2a3325); background: var(--lime, #d9ec4f); }
.sg-done:active { transform: scale(0.9); }
.sg-done:disabled { opacity: 0.5; pointer-events: none; }
.sg-row.is-done {
  opacity: 0; transform: translateX(8px); max-height: 0; margin-bottom: 0;
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  overflow: hidden; pointer-events: none;
}

/* ── Filter + refresh controls: float beside the Dashboard title, reference style ── */
html[data-theme] body.dash-active #page-dashboard { position: relative; }
html[data-theme] body.dash-active #page-dashboard .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
}
html[data-theme] body.dash-active #page-dashboard .dash-period .button {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px; min-height: 38px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-pop {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  right: 0; left: auto; width: min(300px, calc(100vw - 40px));
  padding: 8px;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-opt {
  border: none; background: none; border-radius: 10px; padding: 9px 12px; width: 100%;
  text-align: left; color: var(--mid-text-2); font-family: inherit;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-opt:hover { background: var(--mid-surface-3); }
html[data-theme] body.dash-active #page-dashboard .dash-filter-custom { padding: 8px 12px 10px; }
html[data-theme] body.dash-active #page-dashboard .dash-range { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px; }
html[data-theme] body.dash-active #page-dashboard .dash-range-sep { display: none; }
html[data-theme] body.dash-active #page-dashboard .dash-range input {
  width: 100%; background: var(--mid-surface-2, #ffffff); border: 1px solid var(--mid-line); border-radius: 10px;
  min-height: 38px; padding: 6px 10px; font-family: inherit;
}
html[data-theme] body.dash-active #page-dashboard #dashCustomApply {
  background: var(--lime); color: var(--on-lime); border: none; border-radius: 999px; width: 100%;
}

/* ── Desktop/mobile behavior ── */
@media (min-width: 769px) {
  .sg-listcard .sg-list { display: block; }
}
@media (max-width: 768px) {
  /* single column; side cards interleave naturally after main via DOM order */
  .sg-grid { flex-direction: column; }
  .sg-main, .sg-side { width: 100%; flex: none; }
  /* collapsible list cards */
  .sg-listhead { cursor: pointer; }
  .sg-chev { display: inline-block; }
  .sg-listcard .sg-list { display: none; }
  .sg-listcard.is-open .sg-list { display: block; max-height: 320px; }
  .sg-listcard.is-open .sg-chev { transform: rotate(180deg); }
  .sg-listcard .sg-card-head { margin-bottom: 0; }
  .sg-listcard.is-open .sg-card-head { margin-bottom: 8px; }
  /* controls float right of the (short) Dashboard title */
  html[data-theme] body.dash-active #page-dashboard .page-heading { top: 2px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v3 — pri-style collapsible list cards, heading spacing, content
   flows under a redesigned glass nav pill (shrinks while scrolling), lime glow.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── List-card heads: desktop = compact title row; mobile = hot-leads style ── */
@media (min-width: 769px) {
  .sg-listhead { display: flex; align-items: center; gap: 10px; }
  .sg-listhead .sg-pri-label { display: none; }
  .sg-listhead .sg-pri-dest { order: -1; flex: 1; text-align: left; font-size: 15px; font-weight: 500; color: var(--mid-text); }
  .sg-listhead .sg-pri-dest br { display: none; }
  .sg-listhead .sg-pri-num { font-size: 17px; font-weight: 600; color: var(--mid-text); }
}
@media (max-width: 768px) {
  .sg-listcard { padding: 0; overflow: hidden; }
  .sg-listhead {
    display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px;
    padding: 20px 20px;
  }
  .sg-listhead .sg-pri-label { font-size: 13px; line-height: 1.25; color: var(--mid-text-2); text-align: left; }
  .sg-listhead .sg-pri-num { font-size: 42px; font-weight: 500; letter-spacing: -0.03em; color: #b9bfae; text-align: center; line-height: 1; }
  .sg-listhead .sg-pri-dest { font-size: 13px; line-height: 1.25; color: var(--mid-text); text-align: right; }
  .sg-listcard-grey { background: #d6d9ca; }
  .sg-listcard-grey .sg-pri-num { color: #b2b6a3; }
  .sg-listcard-grey .sg-row:hover { background: rgba(255,255,255,0.4); }
  .sg-listcard .sg-list { padding: 0 16px 14px; }
  .sg-listcard.is-open .sg-card-head { margin-bottom: 0; }

  /* ── Heading ↔ pills spacing ── */
  .sg-display { margin: 4px 0 18px; }
  .sg-chips { margin-bottom: 20px; row-gap: 8px; }
}

/* ── Content flows UNDER the floating nav (smaller reserve + glass pill) ── */
@media (max-width: 768px) {
  html[data-theme] .shell { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

  /* Sage glass nav pill — translucent deep olive, content visible through the blur */
  html[data-theme] .app-sidebar {
    background: rgba(42, 51, 37, 0.86) !important;
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
    border: none !important;
    border-radius: 999px;
    box-shadow: 0 14px 38px -12px rgba(42, 51, 37, 0.5) !important;
  }
  html[data-theme] .app-sidebar .nav-item { color: #b9c2ab; border-radius: 999px; }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined { color: inherit; }
  html[data-theme] .app-sidebar .nav-item.active {
    background: var(--lime) !important;
    color: #2a3325 !important;
  }
  html[data-theme] .app-sidebar .nav-item:hover:not(.active) { background: rgba(255,255,255,0.08); color: #e6ebda; }


}

/* ── FAB glow: lime, not blue (light theme) ── */
@keyframes sageFabGlow {
  0%, 100% { box-shadow: 0 8px 24px -8px rgba(120, 140, 30, 0.55), 0 0 0 0 rgba(217, 236, 79, 0.30); }
  50%      { box-shadow: 0 8px 28px -6px rgba(120, 140, 30, 0.70), 0 0 18px 5px rgba(217, 236, 79, 0.45); }
}
html[data-theme] .create-fab,
html[data-theme] .chat-search-fab { animation: sageFabGlow 3.2s ease-in-out infinite; }

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v4 — feedback round 2
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Content flows under the menu: shrink the reserved bottom band. The old
        96px reserve (with !important at the .shell rule) kept a hard stop above
        the pill — override the VARIABLE instead, which that rule consumes. */
  html[data-theme] { --nav-reserve: calc(78px + env(safe-area-inset-bottom)); }

  /* 2. Scroll-shrink WITHOUT transform: animating inset+height never creates a
        containing block, so the fixed + button stays exactly where it is. */
  .app-sidebar { transition: inset 220ms var(--ease-out), height 220ms var(--ease-out); }
  .app-sidebar.nav-shrink { height: 56px; inset: auto 30px calc(19px + env(safe-area-inset-bottom)) 30px; }

  /* 3. Expand chevron: lower-center of BOTH list cards */
  .sg-listhead { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; row-gap: 2px; padding: 18px 20px 10px; }
  .sg-listhead .sg-pri-label { grid-column: 1; grid-row: 1; }
  .sg-listhead .sg-pri-num { grid-column: 2; grid-row: 1; }
  .sg-listhead .sg-pri-dest { grid-column: 3; grid-row: 1; }
  .sg-listhead .sg-chev { grid-column: 1 / -1; grid-row: 2; justify-self: center; }

  /* 4. More breathing room after the page title */
  .sg-display { margin: 6px 0 26px; }

  /* 5. Active nav icon renders FILLED inside the lime circle */
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined { font-variation-settings: 'FILL' 1; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v5 — equal card heights, proportional nav shrink, true under-flow
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* 1. Hot leads / Calls & follow-ups / Quotes: identical collapsed height */
  .sg-pri { min-height: 152px; }
  .sg-listcard:not(.is-open) { min-height: 152px; }
  .sg-listhead { min-height: 152px; align-content: center; }

  /* 2. Content truly flows UNDER the pill: kill the reserved band entirely.
        (The reserve var stays at 78px for inner fixed-height surfaces like the
        chat compose, which must NOT slide under the nav.) */
  html[data-theme] .shell { padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important; }
  /* …and remove the screen-height container on the Leads board so the page
        scrolls naturally (window scroll) instead of clipping above the menu. */
  html[data-theme] body.leads-active .shell {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; /* board's last card stays reachable above the pill */
  }

  /* 3. Nav selector shrinks in proportion AND shape: the lime disc lives on the
        ICON box (a real circle), and both pill + disc + glyph animate together. */
  html[data-theme] .app-sidebar .nav-item.active { background: transparent !important; }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined {
    width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
    transition: width 220ms var(--ease-out), height 220ms var(--ease-out), font-size 220ms var(--ease-out);
  }
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined {
    background: var(--lime); color: #2a3325;
  }
  html[data-theme] .app-sidebar.nav-shrink .nav-item .material-symbols-outlined {
    width: 38px; height: 38px; font-size: 19px;
  }
  html[data-theme] .app-sidebar .nav-item { background: transparent !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v6 — remove the bounded scroller, 1/3 shorter cards, clean shrink
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* THE container: ".shell" was a fixed-height internal scroller (100dvh − 52px −
     nav-reserve, overflow:auto) that hard-clipped every page right above the menu.
     In light mode the page scrolls the window instead and content flows all the
     way to the bottom of the phone screen, under the frosted pill. */
  /* Pages scroll the window; content passes UNDER the pill mid-scroll, but the
     end-of-scroll padding clears the nav (pill top ≈ 80px + safe) plus a gap so
     the last card is always fully readable above it. */
  html[data-theme] .shell {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
  }

  /* Cards: 1/3 shorter (152 → 101) across all three */
  .sg-pri { min-height: 101px; padding: 14px 18px; }
  .sg-listcard:not(.is-open) { min-height: 101px; }
  .sg-listhead { min-height: 101px; padding: 10px 20px 8px; }
  .sg-pri-num, .sg-listhead .sg-pri-num { font-size: 34px; }

  /* Nav highlighter: the old indicator was a fixed 48px pill with 8px margins —
     taller than the shrunken 56px bar, so minimizing pushed it out of shape.
     Light mode: icon-only items, zero margins, and the lime disc (on the icon)
     scales in lockstep with the bar. */
  html[data-theme] .app-sidebar .nav-item {
    height: auto;
    margin: 0;
    padding: 0;
    gap: 0;
    font-size: 0; /* hides the text label; the disc centers perfectly */
    align-self: center;
    background: transparent !important;
    box-shadow: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE MOBILE v7 — true vertical centering on list cards; chevron at card foot;
   pipeline card no longer navigates (only its corner icon does).
   ════════════════════════════════════════════════════════════════════════════ */
.sg-pipeline { cursor: default; }
.sg-open { border: none; font-family: "Material Symbols Outlined"; cursor: pointer; }
.sg-open:hover { background: var(--mid-surface-4); }

@media (max-width: 768px) {
  /* The chevron leaves the grid: row 1 (label/number/dest) centers EXACTLY like
     the hot-leads card, and the chevron pins near the card's bottom edge. */
  .sg-listhead { position: relative; grid-template-rows: auto; align-content: center; padding: 10px 20px; }
  .sg-listhead .sg-chev {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    grid-area: auto;
  }
  .sg-listcard.is-open .sg-chev { transform: translateX(-50%) rotate(180deg); }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE TOPBAR v8 — frosted bone bar, circular controls, Gia in the topbar,
   + button takes Gia's old floating spot, expanding icon-only search.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] .topbar {
  background: rgba(237, 238, 228, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: none;
  box-shadow: none;
}
html[data-theme] .topbar-iconbtn,
html[data-theme] .profile-dot {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--sg-surface, #fdfdf8);
  border: none;
  box-shadow: 0 1px 3px rgba(42, 51, 37, 0.10);
  color: var(--mid-text-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
html[data-theme] .topbar-iconbtn:hover,
html[data-theme] .profile-dot:hover { background: var(--mid-surface-2, #ffffff); }
/* Gia gets the lime disc — the assistant lives in the topbar now */
html[data-theme] .topbar-gia { background: var(--lime); color: #2a3325; }
html[data-theme] .topbar-gia:hover { background: #e3f25a; }
/* …so the floating Gia bubble retires, and + moves DOWN into its spot */
html[data-theme] .askgia-bubble { display: none !important; }

/* ── Ask Gia panel — match the approved light chat UI (sage surfaces, dark-olive
   outgoing bubble, LIME sparkle avatar + LIME send button). The panel inherits
   --mid-* (sage) for most chrome; these fix the hardcoded blue + olive→lime. ── */
html[data-theme] .askgia-panel .askgia-avatar,
html[data-theme] .askgia-card .askgia-avatar {
  background: var(--lime) !important; color: var(--on-lime) !important;
}
html[data-theme] .askgia-panel .askgia-msg.me {
  background: #2a3325; color: #edeee4;            /* same as chat .msg.out bubble */
}
html[data-theme] .askgia-panel .askgia-msg.gia {
  background: var(--mid-surface-3); color: var(--mid-text);
}
html[data-theme] .askgia-panel .askgia-status,
html[data-theme] .askgia-panel .askgia-tag { color: var(--mid-primary); }
html[data-theme] .askgia-panel .askgia-input .button.primary {
  background: var(--lime); color: var(--on-lime); border: none;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] .askgia-panel .askgia-input .button.primary:hover { background: #cfe343; }
html[data-theme] .askgia-panel .askgia-input .button.primary .material-symbols-outlined { color: var(--on-lime); }
html[data-theme] .askgia-panel .askgia-chip {
  background: var(--mid-surface-3); border: 1px solid var(--mid-line); color: var(--mid-text-2);
}
html[data-theme] .askgia-panel .askgia-chip:hover { background: var(--mid-surface-4); color: var(--mid-text); border-color: var(--mid-line); }
/* Composer field: bone borderless well (beat the app-wide white-well !important). */
html[data-theme] .askgia-panel .askgia-input input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--mid-base) !important; border: 1px solid transparent !important; color: var(--mid-text) !important;
}
html[data-theme] .askgia-panel .askgia-input input:focus {
  outline: none !important; border-color: transparent !important; box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
/* Close / new-chat icon buttons → round sage circle, like the quote-doc/modal X.
   `appearance:none` is the key fix for the hover-revert + glow: WITHOUT it Safari
   paints its NATIVE button chrome on hover/focus/active (the "old style" + glow).
   Shape + no-glow + appearance are forced in EVERY interaction state so nothing
   can revert on hover. */
.askgia-iconbtn { -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
html[data-theme] .askgia-panel .askgia-iconbtn,
html[data-theme] .askgia-panel .askgia-iconbtn:hover,
html[data-theme] .askgia-panel .askgia-iconbtn:focus,
html[data-theme] .askgia-panel .askgia-iconbtn:focus-visible,
html[data-theme] .askgia-panel .askgia-iconbtn:active {
  -webkit-appearance: none !important; appearance: none !important;
  width: 36px !important; height: 36px !important; border-radius: 50% !important; padding: 0 !important;
  border: none !important; outline: none !important; box-shadow: none !important;
}
html[data-theme] .askgia-panel .askgia-iconbtn { background: var(--mid-surface-3); color: var(--mid-text-2); }
html[data-theme] .askgia-panel .askgia-iconbtn:hover { background: var(--mid-surface-4); color: var(--mid-text); }
/* THE real culprits: #askGiaClose is in the shared close-button group with
   `animation: fabGlow` (styles.css:5808 — the pulsing blue glow that box-shadow:none
   can't kill) and `border-radius: 12px !important` (6302 — the square "old style").
   Override by id (wins on source order) → round circle, glow gone, in every state. */
#askGiaClose, #askGiaClose:hover, #askGiaClose:focus, #askGiaClose:active {
  border-radius: 50% !important;
  animation: none !important;
  box-shadow: none !important;
}
/* Send button → identical to the chat send: lime 44px circle. */
html[data-theme] .askgia-panel .askgia-send {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--lime); color: var(--on-lime);
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] .askgia-panel .askgia-send:hover { background: #cfe343; }
html[data-theme] .askgia-panel .askgia-send .material-symbols-outlined { color: var(--on-lime); }
html[data-theme] .app-sidebar .create-menu { bottom: 24px !important; }
@media (max-width: 768px) {
  html[data-theme] .app-sidebar .create-menu { bottom: calc(96px + env(safe-area-inset-bottom)) !important; }
}

/* ── Search: round icon that expands into the field (desktop + mobile) ── */
html[data-theme] .search-shell {
  width: 44px;
  min-width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--sg-surface, #fdfdf8);
  box-shadow: 0 1px 3px rgba(42, 51, 37, 0.10);
  overflow: hidden;
  display: flex;
  align-items: center;
  transition: width 280ms var(--ease-out), min-width 280ms var(--ease-out), background 160ms ease;
}
html[data-theme] .search-shell .material-symbols-outlined {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--mid-text-2);
}
html[data-theme] .search-shell input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  opacity: 0;
  padding: 0 14px 0 38px; /* clears the absolutely-positioned magnifier icon */
  transition: opacity 200ms ease 80ms;
}
html[data-theme] .search-shell input:focus { outline: none; box-shadow: none; }
html[data-theme] .search-shell.is-open {
  width: min(360px, calc(100vw - 200px));
  min-width: 220px;
  background: var(--mid-surface-2, #ffffff);
}
html[data-theme] .search-shell.is-open input { opacity: 1; }
@media (max-width: 768px) {
  html[data-theme] .search-shell.is-open { width: calc(100vw - 188px); min-width: 150px; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SAGE v9 — search colors (mobile expand was midnight-dark), desktop full-width
   search, slower/softer nav shrink that holds until back at the top.
   ════════════════════════════════════════════════════════════════════════════ */

/* Desktop: the search field is ALWAYS the full pill, no icon-collapse */
@media (min-width: 769px) {
  html[data-theme] .search-shell { width: 340px; min-width: 340px; }
  html[data-theme] .search-shell input { opacity: 1; }
  html[data-theme] .search-shell .material-symbols-outlined { cursor: default; }
}

/* Mobile: the legacy focus-within expansion hardcoded the MIDNIGHT field
   (#252b2e + dark border) — recolor every state to the sage palette. */
@media (max-width: 768px) {
  html[data-theme] body .topbar .search-shell {
    background: var(--sg-surface, #fdfdf8) !important;
    border: none !important;
    box-shadow: 0 1px 3px rgba(42, 51, 37, 0.10) !important;
    width: 44px !important;
    height: 44px;
    border-radius: 999px !important;
    transition: width 320ms var(--ease-out), max-width 320ms var(--ease-out);
  }
  html[data-theme] body .topbar .search-shell:focus-within,
  html[data-theme] body .topbar .search-shell.is-open {
    width: auto !important;
    max-width: min(78vw, 340px) !important;
    background: var(--mid-surface-2, #ffffff) !important;
    border: none !important;
    box-shadow: 0 2px 12px -2px rgba(42, 51, 37, 0.18) !important;
  }
  html[data-theme] body .topbar .search-shell input {
    color: var(--mid-text) !important;
    -webkit-text-fill-color: var(--mid-text) !important; /* beats any lingering midnight ink rule */
    caret-color: var(--mid-primary) !important;
  }
  html[data-theme] body .topbar .search-shell:focus-within input::placeholder { color: var(--mid-muted) !important; }
  html[data-theme] body .topbar .search-shell .material-symbols-outlined { color: var(--mid-text-2) !important; }

  /* Smoother nav shrink — longer, softer curve; disc + glyph ride the same curve */
  .app-sidebar { transition: inset 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1); }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined {
    transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1), height 420ms cubic-bezier(0.22, 1, 0.36, 1), font-size 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }
}

/* Search input ink — all widths, all states (text-fill beats any lingering
   midnight color rule; caret in accent so the cursor is easy to find) */
html[data-theme] .search-shell input {
  color: var(--mid-text) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  caret-color: var(--mid-primary);
}
html[data-theme] .search-shell input::placeholder {
  color: var(--mid-muted);
  -webkit-text-fill-color: var(--mid-muted);
}

/* Search typed-text color — ID-scoped + literal hex so NOTHING out-specifies it.
   (var(--mid-text) rules above were being beaten / not resolving on mobile; the
   #id selector + !important + a real color is the definitive fix.) */
html[data-theme] #globalSearch {
  color: #232920 !important;
  -webkit-text-fill-color: #232920 !important;
  caret-color: #56671f !important;
}
/* The REAL cause of "can't see what I type": the input is opacity:0 until .is-open,
   but iOS expands the field via :focus-within without that class → transparent text.
   Force it visible whenever focused, by ID, so every expansion path is covered. */
html[data-theme] #globalSearch:focus,
html[data-theme] .search-shell:focus-within #globalSearch { opacity: 1 !important; }
html[data-theme] #globalSearch::placeholder {
  color: #79816d !important;
  -webkit-text-fill-color: #79816d !important;
}

/* Search placeholder + input text: smaller, matching the pipeline legend size (~13px) */
html[data-theme] #globalSearch { font-size: 13px; }
html[data-theme] #globalSearch::placeholder { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════════════════
   QUOTE BUILDER — SAGE SKIN (light theme only)
   Matches the dashboard's design language: borderless near-white cards on the
   bone canvas with soft sg shadows, the big Schibsted display title, lime as
   the fill-only spot accent (CTA, selected states, focus), bone nested wells.
   Dark theme is untouched — these rules only match html[data-theme].
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page title — same display type as "Dashboard" (hidden in dark: the midnight
   quote page never had a heading and stays byte-identical). */
.qg-sage-head { display: none; }
html[data-theme] body.quote-active .qg-sage-head {
  display: block; max-width: 1240px; margin: 0 auto; padding: 0 28px;
}
html[data-theme] body.quote-active .qg-sage-head .sg-display { margin: 2px 0 18px; }

/* Cards: borderless, dashboard surface + shadow, dashboard radius */
html[data-theme] body.quote-active #page-quotes .qg-card,
html[data-theme] body.quote-active #page-quotes .qgm-pkg {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
}
/* …except the de-nested package wrapper, which stays chrome-less */
html[data-theme] body.quote-active #page-quotes .qgm-packages-card,
html[data-theme] body.quote-active #page-quotes .qg-card:has(#manualPackageList) {
  background: transparent; box-shadow: none;
}
/* Card heads — sentence case, dashboard sizing; icon picks up olive */
html[data-theme] body.quote-active #page-quotes .qg-card-head h3,
html[data-theme] body.quote-active #page-quotes .qgm-pkg-head h3 {
  font-size: 15px; font-weight: 500; letter-spacing: 0;
}
html[data-theme] body.quote-active #page-quotes .qg-card-head { border-bottom: none; padding-bottom: 0; }

/* Nested event cards: bone wells inside the near-white card, borderless */
html[data-theme] body.quote-active #page-quotes .qgm-event {
  background: var(--mid-base); border: none; border-radius: 16px;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-head {
  background: rgba(42,51,37,0.05); border-bottom: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] body.quote-active #page-quotes .qgm-svc-headrow { border-bottom-color: rgba(42,51,37,0.10); }
html[data-theme] body.quote-active #page-quotes .qgm-svc-row { border-bottom-color: rgba(42,51,37,0.07); }
html[data-theme] body.quote-active #page-quotes .qgm-add-event { border-color: var(--mid-line); border-radius: 16px; }

/* Inputs: white wells (design-system rule), olive focus with a soft lime ring */
html[data-theme] body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] body.quote-active #page-quotes select,
html[data-theme] body.quote-active #page-quotes textarea,
html[data-theme] body.quote-active #page-quotes .qgm-field input,
html[data-theme] body.quote-active #page-quotes .crm-search-row input,
html[data-theme] body.quote-active #page-quotes .qgm-event-picker,
html[data-theme] body.quote-active #page-quotes .qg-rail-discount input {
  background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important;
}
html[data-theme] body.quote-active #page-quotes input:focus,
html[data-theme] body.quote-active #page-quotes select:focus,
html[data-theme] body.quote-active #page-quotes textarea:focus {
  border-color: var(--mid-primary) !important;
  box-shadow: 0 0 0 3px rgba(120,140,30,0.16) !important;
}
/* Event-head selects sit on the tinted strip — keep them white too */
html[data-theme] body.quote-active #page-quotes .qgm-event-type,
html[data-theme] body.quote-active #page-quotes .qgm-event-date {
  background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important;
}

/* Buttons: borderless soft-sage chips (dashboard treatment) */
html[data-theme] body.quote-active #page-quotes .button {
  background: var(--mid-surface-3); border: none; color: var(--mid-text-2); border-radius: 999px;
}
html[data-theme] body.quote-active #page-quotes .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.quote-active #page-quotes .qgm-step-btn {
  background: var(--mid-lowest); border: 1px solid var(--mid-line); border-radius: 8px;
}
html[data-theme] body.quote-active #page-quotes .qgm-step-btn:hover { background: var(--lime-tint); border-color: var(--mid-primary); }
html[data-theme] body.quote-active #page-quotes .qgm-event-del {
  background: var(--mid-surface-3); border: none;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-del:hover { background: rgba(179,66,47,0.14); color: var(--mid-danger); }
html[data-theme] body.quote-active #page-quotes .qgm-remove-package {
  background: rgba(179,66,47,0.10); border: none; color: var(--mid-danger);
}
html[data-theme] body.quote-active #page-quotes .qgm-remove-package:hover { background: rgba(179,66,47,0.18); }
html[data-theme] body.quote-active #page-quotes .qgm-remove-package .material-symbols-outlined { color: var(--mid-danger); }

/* Lime spot accents — add buttons + discount toggle + selected chips */
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn,
html[data-theme] body.quote-active #page-quotes .qgm-add-package {
  background: var(--lime-tint); border: none; color: var(--mid-primary); border-radius: 999px;
}
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn:hover,
html[data-theme] body.quote-active #page-quotes .qgm-add-package:hover {
  background: var(--lime); color: var(--on-lime);
}
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn:hover .material-symbols-outlined,
html[data-theme] body.quote-active #page-quotes .qgm-add-package:hover .material-symbols-outlined { color: var(--on-lime); }
html[data-theme] body.quote-active #page-quotes .qg-disc-toggle { border: none; background: var(--mid-surface-3); border-radius: 999px; }
html[data-theme] body.quote-active #page-quotes .qg-disc-opt { background: transparent; }
html[data-theme] body.quote-active #page-quotes .qg-disc-opt + .qg-disc-opt { border-left: none; }
html[data-theme] body.quote-active #page-quotes .qg-disc-opt.is-active { background: var(--lime); color: var(--on-lime); border-radius: 999px; }
html[data-theme] body.quote-active #page-quotes .qg-event-card.is-selected {
  background: var(--lime-tint); border-color: var(--mid-primary); color: var(--mid-primary);
}
html[data-theme] body.quote-active #page-quotes .qgm-addon-chip { background: var(--mid-lowest); border: 1px solid var(--mid-line); }
html[data-theme] body.quote-active #page-quotes .qgm-addon-chip input { accent-color: var(--mid-primary); }
html[data-theme] body.quote-active #page-quotes .qg-toggle input { accent-color: var(--mid-primary); }

/* Live-pricing rail: dashboard card, lime-washed header, olive total */
html[data-theme] body.quote-active #page-quotes .qg-rail {
  background: var(--sg-surface, #fdfdf8); border: none;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
}
html[data-theme] body.quote-active #page-quotes .qg-rail-head {
  background: var(--lime-tint); border-bottom: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] body.quote-active #page-quotes .qg-rail-label { color: var(--mid-primary); }
html[data-theme] body.quote-active #page-quotes .qg-rail-body .pricing-preview-table td { border-bottom-color: rgba(42,51,37,0.07); }
html[data-theme] body.quote-active #page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td { border-top-color: rgba(42,51,37,0.12); }
html[data-theme] body.quote-active #page-quotes .qg-rail-body .pricing-preview-table tfoot tr.total-row td.num { color: var(--mid-primary); }

/* Generate CTA — the lime moment (mirrors the dashboard's high-priority tile) */
html[data-theme] body.quote-active #page-quotes .qg-generate {
  background: var(--lime); border: none; color: var(--on-lime);
  font-weight: 600; border-radius: 16px; padding: 14px 16px;
  box-shadow: 0 10px 22px -10px rgba(120,140,30,0.55);
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html[data-theme] body.quote-active #page-quotes .qg-generate:hover {
  background: #cfe343; border: none; box-shadow: 0 12px 26px -10px rgba(120,140,30,0.65);
}
html[data-theme] body.quote-active #page-quotes .qg-generate:active { transform: scale(0.98); }
html[data-theme] body.quote-active #page-quotes .qg-generate .material-symbols-outlined { color: var(--on-lime); }

/* Contact lookup results + selected chip: bone wells, borderless */
html[data-theme] body.quote-active #page-quotes .selected-contact-chip,
html[data-theme] body.quote-active #page-quotes .contact-results {
  background: var(--mid-base); border: none; border-radius: 14px;
}

/* Mobile: match the dashboard's tighter card radius + gutters */
@media (max-width: 768px) {
  html[data-theme] body.quote-active .qg-sage-head { padding: 0 16px; }
  html[data-theme] body.quote-active .qg-sage-head .sg-display { font-size: 31px; margin-bottom: 12px; }
  html[data-theme] body.quote-active #page-quotes .qg-card,
  html[data-theme] body.quote-active #page-quotes .qgm-pkg { border-radius: 20px; }
}

/* ── Sage STRUCTURAL rebuild bits (chips, ghost numbers, pricing card) ────── */

/* Header stat chips (filled live by the pricing preview) */
.qg-chips { margin-bottom: 18px; }
.qg-chip { cursor: default; }

/* Package ghost ordinal — the dashboard focus-card numeral, behind the head */
#page-quotes .qgm-pkg { position: relative; overflow: hidden; }
#page-quotes .qgm-ghost {
  position: absolute; top: -8px; right: 16px;
  font-size: 92px; font-weight: 600; line-height: 1; letter-spacing: -0.04em;
  color: var(--mid-text); opacity: 0.07; pointer-events: none; user-select: none;
}
@media (max-width: 768px) { #page-quotes .qgm-ghost { font-size: 68px; top: -4px; right: 12px; } }

/* Live-pricing card body — dashboard goal-card structure */
#page-quotes .qgp-total { margin-top: 2px; }
#page-quotes .qgp-bar { margin: 14px 0 4px; }
#page-quotes .qgp-rows, #page-quotes .qgp-math, #page-quotes .qgp-pkgs { margin-top: 8px; }
#page-quotes .qgp-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; border-top: 1px solid rgba(42,51,37,0.07);
  font-size: 13px;
}
#page-quotes .qgp-rows .qgp-row:first-child { border-top: none; }
#page-quotes .qgp-row-name {
  color: var(--mid-text-2); min-width: 0; flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#page-quotes .qgp-row b { margin-left: auto; font-weight: 600; color: var(--mid-text); white-space: nowrap; }
#page-quotes .qgp-dim .qgp-row-name, #page-quotes .qgp-dim b { color: var(--mid-muted); font-weight: 500; }
#page-quotes .qgp-disc b { color: var(--mid-danger); }
#page-quotes .qgp-ord { font-size: 11px; font-weight: 600; color: var(--mid-muted); letter-spacing: 0.02em; }
#page-quotes .qgp-math { border-top: 1px dashed rgba(42,51,37,0.14); }
#page-quotes .qgp-pkgs { border-top: 1px dashed rgba(42,51,37,0.14); }

/* Rail head as a dashboard card head (light): plain surface, 15px sentence label */
html[data-theme] body.quote-active #page-quotes .qg-rail-head {
  background: transparent; border-bottom: none; padding: 18px 22px 4px;
}
html[data-theme] body.quote-active #page-quotes .qg-rail-label {
  font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-text);
}
html[data-theme] body.quote-active #page-quotes .qg-rail-state { font-size: 12px; color: var(--mid-muted); }

/* Dark theme fallbacks: --lime/--on-lime only exist in the light remap, so the
   reused sg primitives need midnight equivalents here (cyan accent family). */
html:not([data-theme]) #page-quotes .sg-seg.sg-st-hot { background: #8ed5ff; }
html:not([data-theme]) #page-quotes .sg-dot.sg-st-hot { background: #8ed5ff; border-color: #38bdf8; }
html:not([data-theme]) #page-quotes .qgp-row { border-top-color: var(--mid-surface-3, rgba(255,255,255,0.08)); }
html:not([data-theme]) #page-quotes .qgp-math,
html:not([data-theme]) #page-quotes .qgp-pkgs { border-top-color: var(--mid-line, rgba(255,255,255,0.14)); }

/* Dashboard card heads carry no leading icon — drop them in light */
html[data-theme] body.quote-active #page-quotes .qg-card-head > .material-symbols-outlined,
html[data-theme] body.quote-active #page-quotes .qgm-pkg-head h3 > .material-symbols-outlined { display: none; }

/* ═══ QUOTE BUILDER — consistency pass (font / labels / fields / buttons) ═══
   The base qg rules pin font-family: var(--sans) (Inter) with #id specificity,
   which beat the light-theme Schibsted rule — so the page mixed typefaces.
   This layer forces ONE type ramp, sentence-case labels, ONE input style and
   ONE button system across the whole page. Light theme only. */

/* Font — everything on the page, including the var(--sans) holdouts */
html[data-theme] body.quote-active #page-quotes,
html[data-theme] body.quote-active #page-quotes :is(h1, h2, h3, label, input, select, textarea, button, table, td, th, p, span):not(.material-symbols-outlined) {
  font-family: "Schibsted Grotesk", "Inter", sans-serif;
}
/* Icon spans inside those elements keep the icon font no matter what */
html[data-theme] body.quote-active #page-quotes .material-symbols-outlined {
  font-family: "Material Symbols Outlined" !important;
}

/* Labels — sentence case, dashboard small-label style (no uppercase/tracking) */
html[data-theme] body.quote-active #page-quotes .qg-card label > span,
html[data-theme] body.quote-active #page-quotes .qgm-field > span,
html[data-theme] body.quote-active #page-quotes .qgm-timeline-head span,
html[data-theme] body.quote-active #page-quotes .qg-cell-label,
html[data-theme] body.quote-active #page-quotes .qgm-svc-headrow span {
  text-transform: none; letter-spacing: 0;
  font-size: 12px; font-weight: 500; color: var(--mid-muted);
}

/* Inputs — ONE field style: white well, sage line, 12px radius, 14px text */
html[data-theme] body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] body.quote-active #page-quotes select,
html[data-theme] body.quote-active #page-quotes textarea {
  background: var(--mid-lowest) !important;
  border: 1px solid var(--mid-line) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--mid-text) !important;
  line-height: 1.45;
}
html[data-theme] body.quote-active #page-quotes input::placeholder,
html[data-theme] body.quote-active #page-quotes textarea::placeholder {
  color: var(--mid-text-3) !important; font-size: 13px;
}

/* Buttons — ONE system: 38px pills, 13px/500.
   Neutral = bone chip · Accent (add actions) = lime tint · CTA = lime fill. */
html[data-theme] body.quote-active #page-quotes .button,
html[data-theme] body.quote-active #page-quotes .qgm-add-package,
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn,
html[data-theme] body.quote-active #page-quotes .qgm-add-svc,
html[data-theme] body.quote-active #page-quotes .qgm-new-type {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 38px; padding: 0 16px; border-radius: 999px; border: none;
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
  cursor: pointer; white-space: nowrap;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
/* Neutral */
html[data-theme] body.quote-active #page-quotes .button,
html[data-theme] body.quote-active #page-quotes .qgm-new-type {
  background: var(--mid-surface-3); color: var(--mid-text-2);
}
html[data-theme] body.quote-active #page-quotes .button:hover,
html[data-theme] body.quote-active #page-quotes .qgm-new-type:hover {
  background: var(--mid-surface-4); color: var(--mid-text); border: none;
}
/* Accent — add actions share the lime-tint chip */
html[data-theme] body.quote-active #page-quotes .qgm-add-package,
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn,
html[data-theme] body.quote-active #page-quotes .qgm-add-svc {
  background: var(--lime-tint); color: var(--mid-primary); margin: 0;
  font-weight: 600;
}
html[data-theme] body.quote-active #page-quotes .qgm-add-package:hover,
html[data-theme] body.quote-active #page-quotes .qgm-add-event-btn:hover,
html[data-theme] body.quote-active #page-quotes .qgm-add-svc:hover {
  background: var(--lime); color: var(--on-lime);
}
html[data-theme] body.quote-active #page-quotes .qgm-add-svc { margin: 4px 14px 12px; height: 32px; font-size: 12px; }
html[data-theme] body.quote-active #page-quotes :is(.button, .qgm-add-package, .qgm-add-event-btn, .qgm-add-svc, .qgm-new-type) .material-symbols-outlined {
  font-size: 16px; color: inherit;
}
html[data-theme] body.quote-active #page-quotes :is(.button, .qgm-add-package, .qgm-add-event-btn, .qgm-new-type):active { transform: scale(0.97); }
/* CTA — lime pill, matches the chips/dashboard accent exactly */
html[data-theme] body.quote-active #page-quotes .qg-generate {
  height: 48px; border-radius: 999px; font-size: 14px; font-weight: 600;
}
/* Clear ghost in light theme — inherits the 48px pill above; only colours change. */
html[data-theme] body.quote-active #page-quotes .qg-generate.is-ghost {
  background: transparent; color: var(--mid-muted); border: 1px solid var(--mid-line); box-shadow: none;
}
html[data-theme] body.quote-active #page-quotes .qg-generate.is-ghost:hover { background: var(--mid-surface-3); }
/* Icon-only buttons — quiet circles */
html[data-theme] body.quote-active #page-quotes .qgm-event-del,
html[data-theme] body.quote-active #page-quotes .qgm-remove-package {
  width: 34px; height: 34px; border-radius: 50%; border: none;
}
/* Steppers — small circles, white well like inputs */
html[data-theme] body.quote-active #page-quotes .qgm-step-btn {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--mid-lowest); border: 1px solid var(--mid-line); color: var(--mid-text);
}
html[data-theme] body.quote-active #page-quotes .qgm-step-btn:hover {
  background: var(--lime-tint); border-color: transparent; color: var(--mid-primary);
}

/* Type sizing harmony with dashboard rows (13px body rows, 600 numbers) */
html[data-theme] body.quote-active #page-quotes .qgm-svc-name { font-size: 13px; color: var(--mid-text); }
html[data-theme] body.quote-active #page-quotes .qgm-svc-price { font-size: 13px; font-weight: 600; color: var(--mid-text); }
html[data-theme] body.quote-active #page-quotes .qgm-step-val { font-size: 13px; font-weight: 600; }
html[data-theme] body.quote-active #page-quotes .qgm-addon-chip { font-size: 12.5px; border-radius: 999px; }
html[data-theme] body.quote-active #page-quotes .qg-toggle span,
html[data-theme] body.quote-active #page-quotes .qg-rail-discount-label { font-size: 13px; color: var(--mid-text-2); }

/* ═══ QUOTE BUILDER — alignment, rail overflow, borderless fields ═══ */

/* 1 ▸ Page-name placement: kill the page's OWN gutters/centering so the title
   and cards sit on the exact same shell grid as the Dashboard (36/40 desktop,
   20 mobile — from .shell). */
html[data-theme] body.quote-active #page-quotes { padding: 0 0 48px; }
html[data-theme] body.quote-active #page-quotes .qg-shell { max-width: none; padding: 0; }
html[data-theme] body.quote-active .qg-sage-head { max-width: none; padding: 0; }
html[data-theme] body.quote-active .qg-sage-head .sg-display { margin: 2px 0 14px; }
@media (max-width: 768px) {
  html[data-theme] body.quote-active #page-quotes { padding: 0 0 calc(96px + env(safe-area-inset-bottom)) !important; }
  html[data-theme] body.quote-active #page-quotes .qg-shell { padding: 0; }
  html[data-theme] body.quote-active .qg-sage-head { padding: 0; }
  html[data-theme] body.quote-active .qg-sage-head .sg-display { font-size: 31px; margin: 0 0 12px; }
}

/* 2 ▸ Live pricing: never clamp/clip — the card grows with its content and
   ends properly with the footer + rounded corners (desktop sticky kept). */
html[data-theme] body.quote-active #page-quotes .qg-rail {
  max-height: none; overflow: visible;
}
html[data-theme] body.quote-active #page-quotes .qg-rail-body { overflow: visible; padding-bottom: 6px; }
/* Mobile inline card: restore the sage card chrome the generic mobile block
   forces back to bordered/flat. */
@media (max-width: 1100px) {
  html[data-theme] body.quote-active #page-quotes .qg-rail {
    border: none !important; border-radius: 24px !important;
    box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12) !important;
  }
}

/* 3 ▸ Borderless inputs — UNIVERSAL (light theme): definition comes from the
   well contrast, not an outline. Border stays transparent (no layout shift);
   focus keeps the soft lime ring for usability. */
html[data-theme] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] select,
html[data-theme] textarea {
  border-color: transparent !important;
  outline: none;
}
html[data-theme] :is(input, select, textarea):focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(120,140,30,0.18) !important;
}
/* Quote page wells: bone fields on the white cards (like the dashboard's
   surfaces), white fields where they sit on a bone strip (event head). */
html[data-theme] body.quote-active #page-quotes input:not([type="checkbox"]):not([type="radio"]),
html[data-theme] body.quote-active #page-quotes select,
html[data-theme] body.quote-active #page-quotes textarea {
  background: var(--mid-base) !important; border-color: transparent !important;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-head :is(input, select),
html[data-theme] body.quote-active #page-quotes .qgm-event :is(input, select) {
  background: var(--mid-lowest) !important; border-color: transparent !important;
}
/* Steppers lose their ring too */
html[data-theme] body.quote-active #page-quotes .qgm-step-btn { border-color: transparent; background: var(--mid-lowest); }

/* ═══ QUOTE BUILDER — rail bottom fix ═══
   overflow:visible stopped the card clipping its children, so the footer's
   opaque block painted over the rounded bottom corners → "chopped" bottom.
   Make the footer transparent with its own bottom radius, soften the divider,
   and style the new empty state. */
html[data-theme] body.quote-active #page-quotes .qg-rail-footer {
  background: transparent;
  border-top: 1px dashed rgba(42,51,37,0.14);
  border-radius: 0 0 24px 24px;
  padding: 16px 22px 24px;
}
html[data-theme] body.quote-active #page-quotes .qgp-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 18px 30px; text-align: center;
}
html[data-theme] body.quote-active #page-quotes .qgp-empty .material-symbols-outlined {
  font-size: 30px; color: var(--mid-text-3);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--mid-base); border-radius: 50%;
}
html[data-theme] body.quote-active #page-quotes .qgp-empty p {
  margin: 0; font-size: 13px; color: var(--mid-muted); max-width: 24ch; line-height: 1.5;
}
/* Dark keeps the old internal-scroll layout; give the empty state a sane look there too */
html:not([data-theme]) #page-quotes .qgp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; text-align: center; }
html:not([data-theme]) #page-quotes .qgp-empty .material-symbols-outlined { font-size: 26px; color: var(--mid-muted, #888); }
html:not([data-theme]) #page-quotes .qgp-empty p { margin: 0; font-size: 13px; color: var(--mid-muted, #888); }

/* ═══ QUOTE BUILDER — dropdowns, per-package pricing blocks ═══ */

/* Selects: same well as every other field + a custom sage chevron (the native
   arrow/border made dropdowns look like a different system). */
html[data-theme] body.quote-active #page-quotes select {
  -webkit-appearance: none; appearance: none;
  padding-right: 38px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%234c5345' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  border-radius: 12px !important;
  font-size: 14px !important;
  color: var(--mid-text) !important;
}
/* …combined with the bone/white well backgrounds set earlier */
html[data-theme] body.quote-active #page-quotes select { background-color: var(--mid-base) !important; }
html[data-theme] body.quote-active #page-quotes .qgm-event select,
html[data-theme] body.quote-active #page-quotes .qgm-event-head select { background-color: var(--mid-lowest) !important; }

/* Per-package pricing blocks in the Live pricing card */
#page-quotes .qgp-pkgcard { margin-top: 14px; }
html[data-theme] body.quote-active #page-quotes .qgp-pkgcard {
  background: var(--mid-base); border-radius: 16px; padding: 12px 14px;
}
#page-quotes .qgp-pkghead {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 8px; font-size: 13px;
}
#page-quotes .qgp-pkghead .qgp-row-name { font-weight: 500; color: var(--mid-text); }
#page-quotes .qgp-pkghead b { margin-left: auto; font-weight: 600; color: var(--mid-text); }
#page-quotes .qgp-pkgcard .qgp-bar { margin: 6px 0 4px; }
#page-quotes .qgp-pkgcard .qgp-row { border-top-color: rgba(42,51,37,0.08); }

/* Per-package big totals (multi-package quotes show one per option) */
#page-quotes .qgp-pkgtotal { font-size: clamp(24px, 2.6vw, 30px); margin: 0 0 2px; }
#page-quotes .qgp-multinote { margin: 2px 0 4px; }

/* ═══════════════════════════════════════════════════════════════════════════
   LEADS / KANBAN — full sage treatment (light theme)
   Same structural language as the dashboard: display title + live stat chips,
   action controls floating top-right as white pills, borderless cards with
   the sage type ramp, olive amounts, tinted status pills, lime hot accents.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page head: dashboard pattern exactly ─────────────────────────────────
   Old eyebrow+h1 hidden; actions float top-right; sage title + chips below. */
.sg-leads-head { display: none; }
html[data-theme] body.leads-active .sg-leads-head { display: block; }
html[data-theme] body.leads-active .sg-leads-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.leads-active #page-leads { position: relative; }
html[data-theme] body.leads-active #page-leads .page-heading { display: block; margin: 0; padding: 0; background: none; border: none; }
html[data-theme] body.leads-active #page-leads .page-heading > div:first-of-type { display: none; }
html[data-theme] body.leads-active #page-leads .page-actions {
  position: absolute; top: 6px; right: 0; z-index: 6;
  display: flex; gap: 8px; align-items: center;
}
html[data-theme] body.leads-active #page-leads .sg-chips { margin-bottom: 18px; }
html[data-theme] body.leads-active #page-leads .sg-chips .sg-chip { cursor: pointer; }
html[data-theme] body.leads-active #page-leads .sg-chip:not([data-stage-chip]) { cursor: default; }

/* ── Action controls: white pills, no borders (dashboard reference style) ── */
html[data-theme] body.leads-active #page-leads .page-actions .button,
html[data-theme] body.leads-active #page-leads .dash-filter-btn {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px; min-height: 38px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
html[data-theme] body.leads-active #page-leads .page-actions .button:hover,
html[data-theme] body.leads-active #page-leads .dash-filter-btn:hover {
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text);
  box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18);
}
html[data-theme] body.leads-active #page-leads .page-actions .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
/* View toggle: white pill track, dark-olive active segment */
html[data-theme] body.leads-active #page-leads .leads-view-toggle {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px; padding: 3px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); display: inline-flex; gap: 2px;
}
html[data-theme] body.leads-active #page-leads .leads-view-btn {
  border: none; background: transparent; border-radius: 999px;
  width: 34px; height: 32px; display: grid; place-items: center;
  color: var(--mid-text-3); cursor: pointer;
}
html[data-theme] body.leads-active #page-leads .leads-view-btn.is-active {
  background: #2a3325; color: #edeee4;
}
html[data-theme] body.leads-active #page-leads .leads-view-btn.is-active .material-symbols-outlined { color: #edeee4; }
/* Filter/sort popovers: sage sheets */
html[data-theme] body.leads-active #page-leads .dash-filter-pop {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  padding: 8px;
}
html[data-theme] body.leads-active #page-leads .dash-filter-opt {
  border: none; background: none; border-radius: 10px; padding: 9px 12px; width: 100%;
  text-align: left; color: var(--mid-text-2); font-family: inherit; font-size: 13px;
}
html[data-theme] body.leads-active #page-leads .dash-filter-opt:hover { background: var(--mid-surface-3); }

/* ── Board rhythm: dashboard gaps + paddings ───────────────────────────── */
html[data-theme] body.leads-active #page-leads .kanban-board { gap: 14px; margin-top: 2px; }
html[data-theme] body.leads-active #page-leads .kanban-col { padding: 14px 12px 12px; }
html[data-theme] body.leads-active #page-leads .kanban-col-body { gap: 10px; padding: 4px 2px 2px; }

/* ── Column heads: dashboard card-head type (sentence case, 15px/500) ───── */
html[data-theme] body.leads-active #page-leads .kanban-col-title {
  font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-text);
}
html[data-theme] body.leads-active #page-leads .kanban-col[data-stage="Hot lead"] .kanban-col-title { color: #4a5320; }
html[data-theme] body.leads-active #page-leads .kanban-col-meta {
  font-size: 12px; color: var(--mid-muted); margin-top: 1px;
}
html[data-theme] body.leads-active #page-leads .kb-ghost { font-size: 40px; top: -2px; }

/* ── Cards: dashboard row anatomy — 14px/500 name, olive 600 amount,
      12px muted meta, soft 16px radius, sage hover lift ─────────────────── */
html[data-theme] body.leads-active #page-leads .kanban-card { padding: 13px 14px 12px; }
html[data-theme] body.leads-active #page-leads .kanban-card-title {
  font-size: 13.5px; font-weight: 500; color: var(--mid-text); letter-spacing: 0;
}
html[data-theme] body.leads-active #page-leads .kanban-card-amount {
  font-size: 13px; font-weight: 600; color: var(--mid-primary); margin-top: 2px;
}
html[data-theme] body.leads-active #page-leads .kanban-card-events {
  font-size: 12px; color: var(--mid-muted); margin-top: 3px;
}
html[data-theme] body.leads-active #page-leads .kanban-card-footer { margin-top: 9px; gap: 6px; }

/* Source + status pills: tinted sage chips (no borders) */
html[data-theme] body.leads-active #page-leads .source-pill {
  background: var(--mid-badge); border: none; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--mid-text-2); padding: 3px 9px;
}
html[data-theme] body.leads-active #page-leads .op-pill {
  border: none; border-radius: 999px; font-size: 10.5px; font-weight: 500;
  padding: 3px 9px; letter-spacing: 0.02em;
}
html[data-theme] body.leads-active #page-leads .op-pill-live { background: var(--lime-tint); color: #4a5320; }
html[data-theme] body.leads-active #page-leads .op-pill-live .live-dot { background: #7a8d23; }
html[data-theme] body.leads-active #page-leads .op-pill-quote { background: #f3e8cf; color: #7a5b16; }
html[data-theme] body.leads-active #page-leads .op-pill-crm { background: var(--mid-surface-3); color: var(--mid-text-2); }

/* AI score badge in sage temps */
html[data-theme] body.leads-active #page-leads .nx-score { border: none; font-weight: 600; }
html[data-theme] body.leads-active #page-leads .nx-score.hot { background: var(--lime); color: var(--on-lime); }
html[data-theme] body.leads-active #page-leads .nx-score.warm { background: #f3e8cf; color: #7a5b16; }
html[data-theme] body.leads-active #page-leads .nx-score.cold { background: var(--mid-surface-3); color: var(--mid-text-2); }

/* Won/Lost edge markers in sage colors */
html[data-theme] body.leads-active #page-leads .kanban-card.is-won { border-left: 3px solid #7a8d23; }
html[data-theme] body.leads-active #page-leads .kanban-card.is-lost { border-left: 3px solid var(--mid-danger); }

/* ── Mobile: title rhythm + actions row become a scrollable pill strip ──── */
@media (max-width: 768px) {
  html[data-theme] body.leads-active .sg-leads-head .sg-display { font-size: 31px; margin: 0 0 12px; }
  html[data-theme] body.leads-active #page-leads .page-actions {
    position: static; margin: 0 0 10px; overflow-x: auto; padding-bottom: 2px;
    scrollbar-width: none;
  }
  html[data-theme] body.leads-active #page-leads .page-actions::-webkit-scrollbar { display: none; }
  html[data-theme] body.leads-active #page-leads .sg-chips { gap: 8px; margin-bottom: 14px; }
}

/* ═══ LEADS MOBILE (light) — restore the bounded scroller ═══
   The generic light rule makes .shell height:auto for window scroll, but the
   leads page keeps body overflow:hidden (base ≤900px lock) — so with the new
   sage header in the flex chain NOTHING could scroll. Re-pin the viewport
   chain: shell fixed height → #page-leads flex column → the column BODY is
   the scroller (title + chips + stage pills stay put, cards scroll). */
@media (max-width: 900px) {
  html[data-theme] body.leads-active { overflow: hidden; }
  html[data-theme] body.leads-active .shell {
    height: calc(100dvh - 52px) !important;
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }
  html[data-theme] body.leads-active .sg-leads-head { flex: 0 0 auto; }
  html[data-theme] body.leads-active #page-leads .kanban-col-body {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    /* last card clears the floating nav pill */
    padding: 4px 2px calc(110px + env(safe-area-inset-bottom));
  }
  html[data-theme] body.leads-active #page-leads .leads-list {
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(110px + env(safe-area-inset-bottom));
  }
}

/* ═══ LEADS — mobile combined menu + dashboard-exact title rhythm ═══ */

/* The combo control exists only on mobile; the three separate controls only
   on desktop. (Outside light/leads the combo is simply never shown.) */
.sg-combo { display: none; }
@media (max-width: 768px) {
  html[data-theme] body.leads-active #page-leads .sg-combo { display: block; position: relative; }
  html[data-theme] body.leads-active #page-leads .leads-view-toggle,
  html[data-theme] body.leads-active #page-leads #leadsFilter,
  html[data-theme] body.leads-active #page-leads #leadsSort { display: none; }
  /* Refresh: icon only */
  html[data-theme] body.leads-active #page-leads .leads-refresh-label { display: none; }
  html[data-theme] body.leads-active #page-leads #leadsRefreshBigin { width: 38px; padding: 0; justify-content: center; }
  html[data-theme] body.leads-active #page-leads #leadsComboBtn { padding: 0 10px 0 12px; }

  /* Title placement = dashboard: compact actions row right-aligned above the
     display title (no full-width scroll strip). */
  html[data-theme] body.leads-active #page-leads .page-actions {
    position: static; display: flex; justify-content: flex-end; gap: 8px;
    margin: 0 0 2px; overflow: visible; padding: 0;
  }
}

/* Combo popover: right-anchored sage sheet holding the accordion cards */
html[data-theme] body.leads-active #page-leads .sg-combo-pop {
  position: absolute; right: 0; top: calc(100% + 8px); left: auto;
  width: min(320px, calc(100vw - 40px));
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  padding: 8px; z-index: 30;
}
/* Accordion cards — bone wells, mutually exclusive (JS), dashboard chevron flip */
.sgc-acc { border-radius: 12px; overflow: hidden; }
.sgc-acc + .sgc-acc { margin-top: 6px; }
html[data-theme] .sgc-acc { background: var(--mid-base); }
.sgc-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 12px 14px; border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 13px; text-align: left;
}
html[data-theme] .sgc-head .sgc-label { color: var(--mid-muted); font-weight: 500; }
html[data-theme] .sgc-head .sgc-value {
  margin-left: auto; font-weight: 500; color: var(--mid-text);
  max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html[data-theme] .sgc-head .sgc-chev {
  font-size: 18px; color: var(--mid-text-3);
  transition: transform var(--dur-2) var(--ease-out);
}
.sgc-acc.is-open .sgc-chev { transform: rotate(180deg); }
.sgc-body { display: none; padding: 0 6px 6px; }
.sgc-acc.is-open .sgc-body { display: block; }
.sgc-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 10px 10px; border: none; background: none; cursor: pointer;
  border-radius: 9px; font-family: inherit; font-size: 13px; text-align: left;
}
html[data-theme] .sgc-opt { color: var(--mid-text-2); }
html[data-theme] .sgc-opt:hover { background: rgba(255,255,255,0.7); }
html[data-theme] .sgc-opt.is-current { background: var(--mid-surface-2, #ffffff); color: var(--mid-text); font-weight: 500; }
html[data-theme] .sgc-opt .material-symbols-outlined { font-size: 16px; color: var(--mid-primary); }

/* ═══ Title → pills rhythm: identical on every sage page ═══
   Dashboard reference: desktop title margin 2px 0 14px; mobile 31px with
   margin 2px 0 12px; chips row margin-bottom 18px on both. */
html[data-theme] body.quote-active .qg-sage-head .sg-display,
html[data-theme] body.leads-active .sg-leads-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.quote-active #page-quotes .qg-chips,
html[data-theme] body.leads-active #page-leads .sg-chips { margin-bottom: 18px; }
@media (max-width: 768px) {
  html[data-theme] body.quote-active .qg-sage-head .sg-display,
  html[data-theme] body.leads-active .sg-leads-head .sg-display { font-size: 31px; margin: 2px 0 12px; }
  html[data-theme] body.quote-active #page-quotes .qg-chips,
  html[data-theme] body.leads-active #page-leads .sg-chips { gap: 10px; margin-bottom: 18px; }
}

/* ═══ SAGE POLISH — title coordinates, leads chips removed, more-menu,
       topbar breathing room, desktop bottom gap ═══ */

/* 1 ▸ Leads chips OFF — the board needs the vertical space; stage pills and
   column ghosts already carry the counts. Title→stage-pills gap tuned to the
   dashboard's title→chips rhythm. */
html[data-theme] body.leads-active #page-leads .sg-chips { display: none !important; }
@media (max-width: 900px) {
  html[data-theme] body.leads-active #page-leads .leads-stage-nav { padding: 0 2px 12px; }
}

/* 2 ▸ Title coordinates = dashboard. The leads viewport-lock set the shell's
   padding-top to 8px while every other page (incl. dashboard) uses 20px on
   mobile — that's why "Leads" never lined up with "Dashboard". */
@media (max-width: 900px) {
  html[data-theme] body.leads-active .shell { padding-top: 20px !important; }
}

/* 3 ▸ Mobile nav "more" popover (Contacts, …): sage sheet like every menu */
@media (max-width: 768px) {
  html[data-theme] .nav-more-pop:not([hidden]) {
    background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
    box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
    padding: 8px; gap: 2px;
  }
  html[data-theme] .nav-more-pop .more-item {
    border-radius: 10px; color: var(--mid-text-2);
    font-family: inherit; font-size: 13.5px; font-weight: 500;
  }
  html[data-theme] .nav-more-pop .more-item:hover { background: var(--mid-surface-3); color: var(--mid-text); }
  html[data-theme] .nav-more-pop .more-item .material-symbols-outlined { font-size: 20px; color: var(--mid-text-3); }
}

/* 4 ▸ Topbar: real vertical padding around the circular controls (the frosted
   bar's bottom edge sat flush against the icons). The leads viewport lock
   below compensates for the taller bar. */
@media (max-width: 768px) {
  html[data-theme] .topbar { padding: 8px 20px 12px; min-height: 0; }
  html[data-theme] body.leads-active .shell { height: calc(100dvh - 64px) !important; }
}

/* 5 ▸ Desktop leads: the page kept the global 72px bottom shell padding under
   a viewport-locked board — dead space below the columns. Tighten it. */
@media (min-width: 901px) {
  html[data-theme] body.leads-active .shell { padding-bottom: 20px; }
  html[data-theme] body.leads-active #page-leads #crmKanbanBoard { padding-bottom: 4px; }
}

/* ═══ FINAL — MOBILE TITLE RHYTHM = DASHBOARD, EXACT VALUES ═══
   The dashboard's mobile spacing is NOT the base 12px: the "breathing room"
   pass sets .sg-display margin 6px 0 26px and .sg-chips margin-bottom 20px
   (row-gap 8px) at ≤768px. Earlier leads/quote overrides pinned 12px with
   higher specificity — 14px tighter than the dashboard, which is the
   inconsistency that kept showing. This block (last in file, same selectors
   as those overrides) sets the dashboard's exact numbers everywhere. */
@media (max-width: 768px) {
  html[data-theme] body.leads-active .sg-leads-head .sg-display,
  html[data-theme] body.quote-active .qg-sage-head .sg-display {
    font-size: 31px; margin: 6px 0 26px;
  }
  html[data-theme] body.quote-active #page-quotes .qg-chips {
    gap: 7px; row-gap: 8px; margin-bottom: 20px;
  }
  /* Leads: the stage pills sit where the dashboard's chips sit — same 26px
     above (title margin), and the row ends 20px before the board like the
     chips' 20px margin. */
  html[data-theme] body.leads-active #page-leads .leads-stage-nav {
    padding: 0 2px 20px;
  }
}

/* ═══ LEADS MOBILE — actions float like the dashboard's ═══
   On the dashboard the period-filter is position:absolute top-right at ALL
   widths, so the title starts at the very top of the content area. Leads had
   the refresh/menu row IN FLOW on mobile — a 40px band pushing the title,
   pills and board down. Float it the same way: everything moves up. */
@media (max-width: 768px) {
  html[data-theme] body.leads-active #page-leads .page-actions {
    position: absolute; top: 6px; right: 0; margin: 0; padding: 0;
    overflow: visible;
  }
}

/* ═══ Mobile "More" menu — EXACT tune-sheet look ═══
   The earlier pass only re-tinted it (old base was already white/rounded, so
   nothing visibly changed). Make it structurally the same as the tune menu:
   sage sheet + bone well rows. */
@media (max-width: 768px) {
  html[data-theme] .nav-more-pop:not([hidden]) {
    background: var(--sg-surface, #fdfdf8) !important; border: none !important;
    border-radius: 18px !important; padding: 8px !important;
    box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35) !important;
    min-width: 220px; gap: 6px;
  }
  html[data-theme] .nav-more-pop .more-item {
    background: var(--mid-base) !important; border-radius: 12px !important;
    padding: 13px 14px !important; gap: 10px !important;
    font-family: inherit !important; font-size: 13.5px !important; font-weight: 500 !important;
    color: var(--mid-text) !important;
  }
  html[data-theme] .nav-more-pop .more-item:hover,
  html[data-theme] .nav-more-pop .more-item:active {
    background: var(--mid-surface-4) !important; color: var(--mid-text) !important;
  }
  html[data-theme] .nav-more-pop .more-item .material-symbols-outlined {
    font-size: 18px !important; color: var(--mid-text-3) !important;
  }
}

/* ═══ Kanban card quote indicator — small icon, green = sent / red = missing ═══ */
.kanban-card-titlerow { display: flex; align-items: center; gap: 6px; }
.kanban-card-titlerow .kanban-card-title { flex: 1; min-width: 0; }
.kb-quote {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.kb-quote .material-symbols-outlined { font-size: 14px; }
.kb-quote.is-sent { background: rgba(122,141,35,0.16); color: #5f7a1d; }
.kb-quote.is-missing { background: rgba(179,66,47,0.14); color: #b3422f; }
/* Dark theme equivalents */
html:not([data-theme]) .kb-quote.is-sent { background: rgba(110,231,160,0.16); color: #6ee7a0; }
html:not([data-theme]) .kb-quote.is-missing { background: rgba(255,122,112,0.16); color: #ff7a70; }
/* Live indicator shrinks to just the pulsing dot in the title row */
.kanban-card-titlerow .op-pill-live { padding: 0; background: none; border: none; }

/* ═══ CONTROL PARITY — dashboard buttons/pops + global search = leads ═══ */

/* Dashboard refresh + filter: EXACT leads metrics (38px white pills) */
html[data-theme] body.dash-active #page-dashboard .dash-period .button,
html[data-theme] body.dash-active #page-dashboard .dash-filter-btn {
  min-height: 38px; height: 38px; padding: 0 14px;
  font-size: 13px; font-weight: 500; gap: 6px;
  display: inline-flex; align-items: center;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.dash-active #page-dashboard #dashRefresh {
  width: 38px; padding: 0; justify-content: center;
}
html[data-theme] body.dash-active #page-dashboard .dash-period .material-symbols-outlined {
  font-size: 17px; color: var(--mid-text-3);
}
/* Mobile: filter goes icon-only like the leads tune button */
@media (max-width: 768px) {
  html[data-theme] body.dash-active #page-dashboard #dashFilterLabel { display: none; }
  html[data-theme] body.dash-active #page-dashboard #dashFilterBtn { padding: 0 10px 0 12px; }
}

/* Dashboard period pop: same type ramp as the leads sheets */
html[data-theme] body.dash-active #page-dashboard .dash-filter-opt {
  font-size: 13px; padding: 9px 12px; font-weight: 500;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-custom-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] body.dash-active #page-dashboard .dash-range input {
  font-size: 13px; padding: 9px 12px;
}
html[data-theme] body.dash-active #page-dashboard .dash-filter-custom .button {
  min-height: 36px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: var(--lime); color: var(--on-lime); border: none; width: 100%;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Global search results: sage sheet like every other menu */
html[data-theme] .global-search-results {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35); padding: 8px;
}
html[data-theme] .gs-group-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted); padding: 8px 12px 4px;
}
html[data-theme] .gs-opt { border-radius: 10px; padding: 9px 12px; }
html[data-theme] .gs-opt:hover, html[data-theme] .gs-opt.active { background: var(--mid-surface-3); }
html[data-theme] .gs-opt-title { font-size: 13.5px; font-weight: 500; color: var(--mid-text); }
html[data-theme] .gs-opt-sub { font-size: 12px; color: var(--mid-muted); }
html[data-theme] .gs-opt-tag {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  background: var(--mid-badge); color: var(--mid-text-2);
  padding: 2px 8px; border-radius: 999px;
}
html[data-theme] .gs-empty, html[data-theme] .gs-hint { color: var(--mid-muted); font-size: 13px; }

/* ═══ Dashboard controls — glyphs + coordinates EXACTLY like Leads ═══ */
/* The heading was still a GRID (1fr + 280-340px column) positioned absolute —
   that template offset the buttons from the right edge. Flex it like the
   leads actions row: same top 6 / right 0, same 8px gap, at all widths. */
html[data-theme] body.dash-active #page-dashboard .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; width: auto;
  grid-template-columns: none; gap: 0;
}
html[data-theme] body.dash-active #page-dashboard .dash-period {
  display: flex; gap: 8px; align-items: center; margin: 0; padding: 0;
}
/* Filter glyph: filter_list on desktop (like leads' filter), tune on mobile
   (like leads' combined menu) */
#dashFilterBtn .df-ico-mobile { display: none; }
@media (max-width: 768px) {
  #dashFilterBtn .df-ico-desktop { display: none; }
  #dashFilterBtn .df-ico-mobile { display: inline-flex; }
}

/* Leads refresh: icon-only circle at ALL widths (was icon+text on desktop) */
html[data-theme] body.leads-active #page-leads .leads-refresh-label { display: none; }
html[data-theme] body.leads-active #page-leads #leadsRefreshBigin {
  width: 38px; padding: 0; justify-content: center;
}

/* ═══ LEADS LIST VIEW — sage treatment (light theme) ═══
   Same anatomy as the kanban cards: borderless white rows on the bone
   enclosure, dashboard type ramp, sage stage pills, soft olive shadows. */
html[data-theme] body.leads-active .leads-list {
  background: var(--mid-deep); border-radius: 18px; padding: 10px; gap: 10px;
}
/* Header: white pill bar, sentence case (no uppercase tracking) */
html[data-theme] body.leads-active .lead-rowhead {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 14px; padding: 11px 16px;
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
  box-shadow: 0 10px 0 0 var(--mid-deep), 0 16px 14px -8px rgba(42,51,37,0.18);
}
/* Rows: borderless white cards with the kanban hover lift */
html[data-theme] body.leads-active .lead-row {
  background: var(--mid-surface-2, #ffffff); border: none; border-radius: 16px; padding: 13px 16px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html[data-theme] body.leads-active .lead-row:hover {
  border: none; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 12px 24px -10px rgba(42,51,37,0.16);
}
/* Type ramp = kanban cards */
html[data-theme] body.leads-active .lr-name .ll-name-link {
  font-size: 13.5px; font-weight: 500; color: var(--mid-text);
}
html[data-theme] body.leads-active .lr-name .ll-name-link:hover {
  color: var(--mid-primary); text-decoration: none;
}
html[data-theme] body.leads-active .lr-val { font-size: 13px; font-weight: 600; color: var(--mid-primary); }
html[data-theme] body.leads-active .lr-src,
html[data-theme] body.leads-active .lr-time { font-size: 12px; color: var(--mid-muted); }
/* Stage pills in sage temperatures */
html[data-theme] body.leads-active .ll-stage { font-weight: 500; font-size: 12px; padding: 4px 12px; }
html[data-theme] body.leads-active .ll-stage.good  { background: rgba(122,141,35,0.16); color: #5f7a1d; }
html[data-theme] body.leads-active .ll-stage.bad   { background: rgba(179,66,47,0.12);  color: #b3422f; }
html[data-theme] body.leads-active .ll-stage.hot   { background: var(--lime);           color: var(--on-lime); }
html[data-theme] body.leads-active .ll-stage.info  { background: rgba(157,186,110,0.28); color: #56671f; }
html[data-theme] body.leads-active .ll-stage.muted { background: var(--mid-surface-3);  color: var(--mid-text-2); }
html[data-theme] body.leads-active .ll-stage[data-stage-chip]:hover { filter: none; box-shadow: 0 2px 8px -2px rgba(42,51,37,0.25); }
/* Empty state */
html[data-theme] body.leads-active .leads-list .kanban-empty { color: var(--mid-muted); }

/* List view refinements: header as a PILL, and the grey enclosure tray
   removed — rows float directly on the bone page like the kanban cards. */
html[data-theme] body.leads-active .leads-list {
  background: transparent; padding: 0 2px 10px;
}
html[data-theme] body.leads-active .lead-rowhead {
  border-radius: 999px; padding: 11px 18px;
  /* the solid strip under the sticky header now matches the PAGE bone,
     since there is no tray behind the rows anymore */
  box-shadow: 0 10px 0 0 var(--mid-base), 0 16px 14px -8px rgba(42,51,37,0.14);
}

/* List rows: 4 columns now (Source dropped); indicators inline with the name
   like the kanban title row. Row width untouched (same full-width grid). */
.lead-rowhead, .lead-row { grid-template-columns: 2.4fr 1.5fr 1fr 1fr; }
.lr-name .op-pill-live { padding: 0; background: none; border: none; flex: 0 0 auto; }
.lr-name .kb-quote { flex: 0 0 auto; }

/* Mobile list rows = kanban cards, exactly: same padding/radius, and the
   name stretches so the live/quote/score indicators sit at the card's right
   edge (like the kanban title row) instead of hugging the name. */
@media (max-width: 900px) {
  html[data-theme] body.leads-active .lead-row {
    border-radius: 18px; padding: 16px; gap: 10px;
  }
  html[data-theme] body.leads-active .lr-name { gap: 6px; }
  html[data-theme] body.leads-active .lr-name .ll-name-link { flex: 1; min-width: 0; }
}

/* ═══ MOBILE BOTTOM CLEARANCE — last card must fully clear the nav pill ═══
   The pill occupies ~100px of the viewport bottom (64px bar + 19px offset +
   safe area). An earlier rule clamped the light shell's end-of-scroll padding
   to 20px, so the final card on every window-scrolled page ended underneath
   the pill. Restore a clearance that shows the whole last card. */
@media (max-width: 768px) {
  html[data-theme] .shell {
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  /* Leads keeps its bounded scroller (shell padding stays 0) — the clearance
     lives INSIDE the scrolling column/list instead. */
  html[data-theme] body.leads-active .shell { padding-bottom: 0 !important; }
  html[data-theme] body.leads-active #page-leads .kanban-col-body {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
  html[data-theme] body.leads-active #page-leads .leads-list {
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
}

/* ═══ List header = kanban stage-header box (desktop) ═══
   Same box as the column headers: soft surface, hairline, 12px radius,
   10/14 padding, 14px/500 olive labels. The "second grey box" was the old
   masking trick — a hard 10px offset shadow that rendered as a second pill
   behind the header; replaced with an invisible page-bone strip (::after)
   that still hides rows sliding under the sticky header. */
@media (min-width: 901px) {
  html[data-theme] body.leads-active .lead-rowhead {
    background: var(--mid-surface); border: 1px solid var(--mid-line);
    border-radius: 12px; padding: 10px 14px;
    font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--mid-text);
    box-shadow: none;
  }
  html[data-theme] body.leads-active .lead-rowhead::after {
    content: ""; position: absolute; left: -2px; right: -2px; bottom: -11px; height: 11px;
    background: var(--mid-base);
  }
}

/* ═══ List header v2 — full-bleed sticky footprint ═══
   Previous approach floated a rounded pill over the rows: scrolled cards
   peeked out under its corners, and the bone masking strip painted over the
   white card read as a grey line. Now the header element itself is a SQUARE
   page-bone block spanning the full row width (rows scrolling under it are
   completely hidden, corners included), and the kanban-style surface box is
   drawn INSIDE via a pseudo-element. */
@media (min-width: 901px) {
  html[data-theme] body.leads-active .lead-rowhead {
    position: sticky; top: 0; z-index: 5;
    background: var(--mid-base);
    border: none; border-radius: 0; box-shadow: none;
    padding: 11px 14px 21px;       /* bottom 21 = 11 + the 10px row gap */
  }
  html[data-theme] body.leads-active .lead-rowhead::before {
    content: ""; position: absolute; inset: 0 0 10px 0; z-index: 0;
    background: var(--mid-surface);
    border: 1px solid var(--mid-line); border-radius: 12px;
  }
  html[data-theme] body.leads-active .lead-rowhead::after { content: none; }
  html[data-theme] body.leads-active .lead-rowhead > span { position: relative; z-index: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACTS — full sage treatment (light theme)
   Same structure as Dashboard/Leads: display title (+ meta), controls floating
   top-right as white pills, borderless white cards with the sage type ramp.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page head — dashboard/leads pattern exactly */
.sg-contacts-head { display: none; }
html[data-theme] body.contacts-active .sg-contacts-head { display: block; }
html[data-theme] body.contacts-active .sg-contacts-head .sg-display { margin: 2px 0 6px; }
html[data-theme] body.contacts-active .sg-contacts-head .sg-meta {
  margin: 0 0 18px; font-size: 13px; color: var(--mid-muted);
}
html[data-theme] body.contacts-active #page-contacts { position: relative; }
html[data-theme] body.contacts-active #page-contacts .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; background: none; border: none;
}
html[data-theme] body.contacts-active #page-contacts .page-heading > div:first-of-type { display: none; }

/* Filter control + popover: identical to leads */
html[data-theme] body.contacts-active #page-contacts .dash-filter-btn {
  min-height: 38px; height: 38px; padding: 0 14px;
  font-size: 13px; font-weight: 500; gap: 6px;
  display: inline-flex; align-items: center;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-btn:hover {
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text); box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18);
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-btn .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
html[data-theme] body.contacts-active #page-contacts .dash-filter-pop {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35); padding: 8px;
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-opt {
  border: none; background: none; border-radius: 10px; padding: 9px 12px; width: 100%;
  text-align: left; color: var(--mid-text-2); font-family: inherit; font-size: 13px; font-weight: 500;
}
html[data-theme] body.contacts-active #page-contacts .dash-filter-opt:hover { background: var(--mid-surface-3); }
@media (max-width: 768px) {
  html[data-theme] body.contacts-active #page-contacts #contactsFilterLabel { display: none; }
  html[data-theme] body.contacts-active #page-contacts .dash-filter-btn { padding: 0 10px 0 12px; }
  html[data-theme] body.contacts-active .sg-contacts-head .sg-display { font-size: 31px; margin: 6px 0 6px; }
  html[data-theme] body.contacts-active .sg-contacts-head .sg-meta { margin-bottom: 20px; }
}

/* Cards: borderless white, sage shadow + hover lift (kanban-card language) */
html[data-theme] body.contacts-active #page-contacts .contact-card {
  background: var(--mid-surface-2, #ffffff); border: none; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
html[data-theme] body.contacts-active #page-contacts .contact-card:hover {
  background: var(--mid-surface-2, #ffffff); border: none; transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 14px 28px -10px rgba(42,51,37,0.18);
}
html[data-theme] body.contacts-active #page-contacts .contact-avatar {
  background: var(--mid-badge); color: var(--mid-primary); font-weight: 600;
}
html[data-theme] body.contacts-active #page-contacts .contact-name {
  font-size: 14.5px; font-weight: 500; color: var(--mid-text); letter-spacing: 0;
}
html[data-theme] body.contacts-active #page-contacts .contact-sub { font-size: 12px; color: var(--mid-muted); }
html[data-theme] body.contacts-active #page-contacts .contact-chev { color: var(--mid-text-3); }
/* Detail lines: sage icons, phone in Schibsted olive (no mono <code> look) */
html[data-theme] body.contacts-active #page-contacts .contact-lines { color: var(--mid-text-2); }
html[data-theme] body.contacts-active #page-contacts .contact-lines .material-symbols-outlined { font-size: 16px; color: var(--mid-text-3); }
html[data-theme] body.contacts-active #page-contacts .contact-lines code {
  font-family: inherit; font-size: 13.5px; font-weight: 500;
  background: none; color: var(--mid-primary); padding: 0;
}
html[data-theme] body.contacts-active #page-contacts .contact-wa {
  width: 28px; height: 28px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--lime-tint); color: var(--mid-primary);
}
html[data-theme] body.contacts-active #page-contacts .contact-wa:hover { background: var(--lime); color: var(--on-lime); }
html[data-theme] body.contacts-active #page-contacts .contact-wa .material-symbols-outlined { font-size: 15px; color: inherit; }
/* Footer: bone source chip, lime open-deals pill, muted time */
html[data-theme] body.contacts-active #page-contacts .contact-foot { border-top: 1px solid rgba(42,51,37,0.07); }
html[data-theme] body.contacts-active #page-contacts .source-pill {
  background: var(--mid-badge); border: none; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
  color: var(--mid-text-2); padding: 3px 9px;
}
html[data-theme] body.contacts-active #page-contacts .pill.open-deals {
  background: var(--lime); border: none; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; color: var(--on-lime); padding: 3px 9px;
}
html[data-theme] body.contacts-active #page-contacts .contact-foot .muted { color: var(--mid-muted); font-size: 12px; }
html[data-theme] body.contacts-active #page-contacts .contacts-empty { color: var(--mid-muted); }

/* ═══ CONTACTS LIST VIEW — same component as the leads list ═══ */
/* The grid container becomes a flex column of rows (both themes) */
#page-contacts .contacts-grid {
  display: flex; flex-direction: column; gap: 10px; padding: 0 2px 10px;
}
#page-contacts .ct-rowhead,
#page-contacts .ct-row { grid-template-columns: 2.4fr 1.6fr 0.9fr 1fr; }
#page-contacts .ct-ava {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}
#page-contacts .ct-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#page-contacts .ct-sub { font-size: 11.5px; color: var(--mid-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-contacts .ct-phone { display: flex; align-items: center; gap: 8px; min-width: 0; }
#page-contacts .ct-phone code { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#page-contacts .ct-dim { color: var(--mid-muted); }

/* Light: identical to the leads list rows/header */
html[data-theme] body.contacts-active #page-contacts .ct-row {
  background: var(--mid-surface-2, #ffffff); border: none; border-radius: 16px; padding: 11px 16px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  cursor: pointer;
}
html[data-theme] body.contacts-active #page-contacts .ct-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(42,51,37,0.06), 0 12px 24px -10px rgba(42,51,37,0.16);
}
html[data-theme] body.contacts-active #page-contacts .ct-row .ll-name-link {
  font-size: 13.5px; font-weight: 500; color: var(--mid-text);
}
html[data-theme] body.contacts-active #page-contacts .ct-ava { background: var(--mid-badge); color: var(--mid-primary); }
html[data-theme] body.contacts-active #page-contacts .ct-phone code {
  font-family: inherit; font-size: 13px; font-weight: 500;
  background: none; color: var(--mid-primary); padding: 0;
}
html[data-theme] body.contacts-active #page-contacts .lr-time { font-size: 12px; color: var(--mid-muted); }
/* Header: same full-bleed sticky footprint as the leads list (desktop) */
@media (min-width: 901px) {
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead {
    position: sticky; top: 0; z-index: 5;
    background: var(--mid-base); border: none; border-radius: 0; box-shadow: none;
    padding: 11px 14px 21px;
    font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none;
    color: var(--mid-text);
  }
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead::before {
    content: ""; position: absolute; inset: 0 0 10px 0; z-index: 0;
    background: var(--mid-surface); border: 1px solid var(--mid-line); border-radius: 12px;
  }
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead > span { position: relative; z-index: 1; }
}
/* Dark: midnight list look (reuses the lead-row base styles) */
html:not([data-theme]) #page-contacts .ct-rowhead {
  background: var(--mid-surface, #1b2024); border: 1px solid var(--mid-line, #3e484f);
  border-radius: 12px; padding: 11px 16px;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--mid-muted, #87929a);
}

/* Mobile: wrapped row-cards like the leads list */
@media (max-width: 900px) {
  #page-contacts .ct-rowhead { display: none; }
  #page-contacts .ct-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  #page-contacts .ct-row .lr-name { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; }
  #page-contacts .ct-row .lr-time { margin-left: auto; }
  html[data-theme] body.contacts-active #page-contacts .ct-row { border-radius: 18px; padding: 14px 16px; }
}

/* Contacts list header: stick BELOW the sticky topbar (top:0 slid it
   underneath the frosted bar, so it looked like it wasn't sticking). */
@media (min-width: 901px) {
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead {
    top: 58px; z-index: 30;
  }
  /* keep the masking footprint tall enough that rows vanish cleanly */
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead::before { inset: 0 0 10px 0; }
}

/* Dashboard + Contacts filter: icon-only at ALL widths (desktop included),
   pinned at the leads coordinates (top 6 / right 0 of the page). */
html[data-theme] body.dash-active #page-dashboard #dashFilterLabel,
html[data-theme] body.contacts-active #page-contacts #contactsFilterLabel { display: none; }
html[data-theme] body.dash-active #page-dashboard #dashFilterBtn,
html[data-theme] body.contacts-active #page-contacts #contactsFilterBtn { padding: 0 10px 0 12px; }
html[data-theme] body.dash-active #page-dashboard .page-heading,
html[data-theme] body.contacts-active #page-contacts .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0;
}

/* ═══ CONTACTS — bounded scroller like Leads ═══
   Title + controls + list header stay FIXED; only the rows scroll.
   (Window scroll let the title slide away while the sticky header stayed.) */
@media (min-width: 901px) {
  html[data-theme] body.contacts-active .shell {
    height: calc(100dvh - 58px); overflow: hidden; padding-bottom: 20px;
  }
  html[data-theme] body.contacts-active #page-contacts {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  }
  html[data-theme] body.contacts-active .sg-contacts-head { flex: 0 0 auto; }
  html[data-theme] body.contacts-active #page-contacts .contacts-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-bottom: 16px;
  }
  /* header sticks to the top of the INTERNAL scroller now (not the window) */
  html[data-theme] body.contacts-active #page-contacts .ct-rowhead { top: 0; }
}
@media (max-width: 900px) {
  html[data-theme] body.contacts-active { overflow: hidden; }
  html[data-theme] body.contacts-active .shell {
    height: calc(100dvh - 64px) !important; overflow: hidden !important;
    padding-top: 20px !important; padding-bottom: 0 !important;
  }
  html[data-theme] body.contacts-active #page-contacts {
    display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
  }
  html[data-theme] body.contacts-active #page-contacts .contacts-grid {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: calc(130px + env(safe-area-inset-bottom));
  }
}

/* Dashboard + Contacts filter: pure icon — no dropdown caret */
html[data-theme] body.dash-active #page-dashboard #dashFilterBtn .dash-filter-caret,
html[data-theme] body.contacts-active #page-contacts #contactsFilterBtn .dash-filter-caret { display: none; }
html[data-theme] body.dash-active #page-dashboard #dashFilterBtn,
html[data-theme] body.contacts-active #page-contacts #contactsFilterBtn {
  width: 38px; padding: 0; justify-content: center;
}

/* ═══ Stage dropdown (leads list/kanban stage pill) — sage sheet ═══
   Was still midnight-styled (hairline border, black shadow); now identical
   to the filter/tune sheets, with sentence case enforced. */
html[data-theme] .stage-menu {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35); padding: 8px;
}
html[data-theme] .stage-menu-opt {
  border-radius: 10px; padding: 9px 12px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: 0; text-transform: none;
  color: var(--mid-text-2);
}
html[data-theme] .stage-menu-opt:hover { background: var(--mid-surface-3); }
html[data-theme] .stage-menu-opt.is-current { color: var(--mid-primary); font-weight: 600; }

/* Belt-and-braces: no dropdown option anywhere in light renders uppercase */
html[data-theme] :is(.dash-filter-opt, .sgc-opt, .stage-menu-opt, .more-item) {
  text-transform: none; letter-spacing: 0;
}

/* Contacts chips: dashboard placement/spacing on both breakpoints */
html[data-theme] body.contacts-active .sg-contacts-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.contacts-active #page-contacts .sg-chips { margin-bottom: 18px; flex: 0 0 auto; }
@media (max-width: 768px) {
  html[data-theme] body.contacts-active .sg-contacts-head .sg-display { font-size: 31px; margin: 6px 0 26px; }
  html[data-theme] body.contacts-active #page-contacts .sg-chips { gap: 7px; row-gap: 8px; margin-bottom: 20px; }
}

/* Leads controls — right-to-left order: filter, refresh, sort, view type */
html[data-theme] body.leads-active #page-leads .page-actions { display: flex; }
html[data-theme] body.leads-active #page-leads .leads-view-toggle { order: 1; }
html[data-theme] body.leads-active #page-leads #leadsSort { order: 2; }
html[data-theme] body.leads-active #page-leads #leadsRefreshBigin { order: 3; }
html[data-theme] body.leads-active #page-leads #leadsFilter { order: 4; }
html[data-theme] body.leads-active #page-leads .sg-combo { order: 5; }

/* ═══ SYSTEM SURFACES IN APP UI — dialogs, toasts, native pickers ═══ */

/* Native widgets (date picker, selects) render in LIGHT system style */
html[data-theme] { color-scheme: light; }

/* Toast: dark-olive pill (matches the nav pill); errors get the sage red */
html[data-theme] .app-toast {
  background: #2a3325; color: #edeee4; border: none; border-radius: 999px;
  box-shadow: 0 16px 40px -12px rgba(42,51,37,0.45);
  font-size: 13px; font-weight: 500;
}
html[data-theme] .app-toast.is-error { background: #b3422f; color: #fdf3f0; border: none; }

/* Sage confirm dialog */
.sg-dialog-veil {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(35,41,32,0.40);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: uiFadeIn var(--dur-1, 120ms) ease;
}
.sg-dialog {
  background: var(--sg-surface, #fdfdf8); border-radius: 22px; padding: 22px 22px 18px;
  max-width: 380px; width: 100%;
  box-shadow: 0 24px 64px -16px rgba(42,51,37,0.45);
}
.sg-dialog p {
  margin: 0 0 16px; font-size: 14px; line-height: 1.55;
  color: var(--mid-text, #232920); white-space: pre-line;
}
.sg-dialog-input {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 15px;
  padding: 12px 14px; margin: 0 0 18px; border-radius: 12px;
  background: var(--mid-base, #edeee4); border: 1px solid transparent; color: var(--mid-text, #232920);
}
.sg-dialog-input::placeholder { color: var(--mid-muted, #87929a); }
/* Beat the app-wide white-well + grey-outline !important input rules (same fight
   as the modals/setup) so the prompt field is a bone borderless well. */
html[data-theme] .sg-dialog-veil .sg-dialog-input:not([type="checkbox"]):not([type="radio"]) {
  background: var(--mid-base) !important; border-color: transparent !important;
}
html[data-theme] .sg-dialog-veil .sg-dialog-input:focus {
  outline: none !important; border-color: transparent !important; box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
.sg-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.sg-dialog-btn {
  height: 40px; padding: 0 18px; border: none; border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer;
  background: var(--mid-surface-3, #e7e9dc); color: var(--mid-text-2, #4c5345);
}
.sg-dialog-btn:hover { background: var(--mid-surface-4, #dcdfd0); }
.sg-dialog-ok { background: var(--lime, #d9ec4f); color: var(--on-lime, #2a3325); font-weight: 600; }
.sg-dialog-ok:hover { background: #cfe343; }
.sg-dialog-ok.is-danger { background: #b3422f; color: #fdf3f0; }
.sg-dialog-ok.is-danger:hover { background: #a03a28; }
@keyframes uiFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Quote builder date fields: placeholder until a value is picked */
html[data-theme] body.quote-active #page-quotes .qgm-event-date { position: relative; }
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before {
  content: attr(data-ph);
  color: var(--mid-text-3); font-size: 13px;
}

/* Mobile "more" menu: shrink-wrap to its items (it was stretching wide) */
@media (max-width: 768px) {
  html[data-theme] .nav-more-pop:not([hidden]) {
    width: max-content !important; min-width: 0 !important; max-width: 260px !important;
    left: auto !important; right: 16px !important;
  }
  html[data-theme] .nav-more-pop .more-item { width: auto; min-width: 160px; }
}

/* Contacts pager — sage pills under the list */
#page-contacts .ct-pager {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 10px 0 4px;
}
#page-contacts .ct-pager-btn {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--sg-surface, #fdfdf8); box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
#page-contacts .ct-pager-btn:hover:not(:disabled) { background: var(--mid-surface-2, #ffffff); color: var(--mid-text); }
#page-contacts .ct-pager-btn:disabled { opacity: 0.4; cursor: default; }
#page-contacts .ct-pager-btn .material-symbols-outlined { font-size: 18px; }
#page-contacts .ct-pager-label { font-size: 13px; color: var(--mid-muted); }

/* Leads filter/sort buttons: SAME 38px footprint as dashboard/contacts
   (an old rule pinned them to 36×32). */
html[data-theme] body.leads-active #page-leads #leadsFilter .dash-filter-btn,
html[data-theme] body.leads-active #page-leads #leadsSort .dash-filter-btn,
html[data-theme] body.leads-active #page-leads #leadsComboBtn {
  width: 38px; height: 38px; min-height: 38px; padding: 0; justify-content: center;
}
/* …and the leads combo loses its caret like the other icon-only controls */
html[data-theme] body.leads-active #page-leads #leadsComboBtn .dash-filter-caret { display: none; }

/* "Event date" placeholder must stay one line — it was wrapping inside the
   narrow date field and doubling the field's height. */
html[data-theme] body.quote-active #page-quotes .qgm-event-date {
  display: inline-flex; align-items: center; height: 38px; overflow: hidden;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12.5px; line-height: 1;
}

/* Toast text: centered (multi-line error messages were left-aligned) */
.app-toast { text-align: center; }

/* Date placeholder: only on MOBILE, and just "Date". Desktop shows the
   native greyed-out date format instead. */
@media (min-width: 769px) {
  html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before { content: none; }
}
@media (max-width: 768px) {
  html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before { content: "Date"; }
}

/* iOS squeezes the placeholder: the date input's internal (empty) value box
   still occupies the full width, leaving the ::before only a sliver ("D…").
   Hide the native value box until a date is actually picked. */
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::-webkit-date-and-time-value {
  display: none;
}
html[data-theme] body.quote-active #page-quotes .qgm-event-date:not(.has-value)::before {
  flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHAT / CONVERSATIONS — sage treatment (light theme)
   Standard page head (display title + floating action), sage channel pills,
   borderless pane cards.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page head — same pattern as Dashboard/Leads/Contacts */
.sg-chat-head { display: none; }
html[data-theme] body.chat-active .sg-chat-head { display: block; }
html[data-theme] body.chat-active .sg-chat-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.chat-active #page-conversations { position: relative; }
html[data-theme] body.chat-active #page-conversations .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; background: none; border: none;
}
html[data-theme] body.chat-active #page-conversations .page-heading > div:first-of-type { display: none; }
html[data-theme] body.chat-active #page-conversations #followUpAllBtn {
  min-height: 38px; height: 38px; padding: 0 14px;
  font-size: 13px; font-weight: 500; gap: 6px;
  display: inline-flex; align-items: center;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); color: var(--mid-text-2);
}
html[data-theme] body.chat-active #page-conversations #followUpAllBtn:hover {
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text); box-shadow: 0 4px 12px -4px rgba(42,51,37,0.18);
}
html[data-theme] body.chat-active #page-conversations #followUpAllBtn .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
@media (max-width: 768px) {
  html[data-theme] body.chat-active .sg-chat-head .sg-display { font-size: 31px; margin: 6px 0 18px; }
}

/* Channel pills (All / WhatsApp / Instagram): the leads stage-pill language —
   white pills on the page, dark-olive active */
html[data-theme] body.chat-active .inbox-filter {
  background: transparent; padding: 0; margin: 0 16px 12px; gap: 8px;
}
html[data-theme] body.chat-active .inbox-filter button {
  flex: 0 0 auto; padding: 8px 16px; border-radius: 999px;
  background: var(--mid-base); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; font-family: inherit;
}
html[data-theme] body.chat-active .inbox-filter button:hover { color: var(--mid-text); background: var(--mid-surface-4); }
html[data-theme] body.chat-active .inbox-filter button.is-active {
  background: #2a3325; color: #edeee4; font-weight: 500; box-shadow: none;
}

/* Panes: borderless sage cards */
html[data-theme] body.chat-active .inbox-list-pane,
html[data-theme] body.chat-active .inbox-thread-pane {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 22px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
/* Search well inside the list pane */
html[data-theme] body.chat-active .inbox-search {
  margin: 12px 16px 10px; padding: 9px 14px;
  background: var(--mid-base); border-radius: 999px;
}
html[data-theme] body.chat-active .inbox-search .material-symbols-outlined { font-size: 18px; color: var(--mid-text-3); }
html[data-theme] body.chat-active .inbox-search input {
  font-family: inherit; font-size: 13.5px; color: var(--mid-text);
}
html[data-theme] body.chat-active .inbox-search input::placeholder { color: var(--mid-text-3); font-size: 13px; }

/* ═══ CHAT — STRUCTURAL sage rebuild ═══ */

/* Channel pills under the title: exact leads stage-pill component w/ counts */
html[data-theme] body.chat-active #inboxFilter {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 20px; margin: 0;
  background: transparent; scrollbar-width: none;
}
html[data-theme] body.chat-active #inboxFilter::-webkit-scrollbar { display: none; }
html[data-theme] body.chat-active #inboxFilter button {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 9999px; border: none;
  font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer;
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text-2);
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
}
html[data-theme] body.chat-active #inboxFilter button .count {
  background: var(--mid-surface-3); color: var(--mid-text-2);
  padding: 1px 7px; border-radius: 9999px; font-size: 11px; font-weight: 700;
}
html[data-theme] body.chat-active #inboxFilter button.is-active { background: #2a3325; color: #edeee4; }
html[data-theme] body.chat-active #inboxFilter button.is-active .count { background: var(--lime); color: var(--on-lime); }

/* List rows: contacts-list anatomy — borderless, bone hover, lime unread dot */
html[data-theme] body.chat-active .inbox-row {
  border: none; border-bottom: 1px solid rgba(42,51,37,0.06);
  padding: 12px 16px; background: transparent;
}
html[data-theme] body.chat-active .inbox-row:hover { background: var(--mid-base); }
html[data-theme] body.chat-active .inbox-row.is-active { background: var(--mid-surface-3); }
html[data-theme] body.chat-active .inbox-row-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--mid-badge); color: var(--mid-primary);
  font-size: 13px; font-weight: 600;
}
html[data-theme] body.chat-active .inbox-row-name { font-size: 13.5px; font-weight: 500; color: var(--mid-text); }
html[data-theme] body.chat-active .inbox-row.is-unread .inbox-row-name { font-weight: 600; }
html[data-theme] body.chat-active .inbox-row-time { font-size: 11px; color: var(--mid-muted); margin-left: auto; }
html[data-theme] body.chat-active .inbox-row-top { display: flex; align-items: center; gap: 6px; }
html[data-theme] body.chat-active .inbox-row-unread {
  position: static; width: 8px; height: 8px; border-radius: 50%;
  background: #aabf2e; flex: 0 0 auto;
}
html[data-theme] body.chat-active .inbox-row-snippet { font-size: 12px; color: var(--mid-muted); margin-top: 2px; }
html[data-theme] body.chat-active .inbox-row-meta3 { display: flex; align-items: center; gap: 8px; margin-top: 7px; }
html[data-theme] body.chat-active .inbox-row-meta3 .lead-temp-chip {
  border: none; border-radius: 999px; font-size: 10.5px; font-weight: 500; padding: 3px 9px;
}
html[data-theme] body.chat-active .lead-temp-chip.hot { background: var(--lime); color: var(--on-lime); }
html[data-theme] body.chat-active .lead-temp-chip.warm { background: #f3e8cf; color: #7a5b16; }
html[data-theme] body.chat-active .lead-temp-chip.cold { background: var(--mid-surface-3); color: var(--mid-text-2); }
html[data-theme] body.chat-active .inbox-row-meta3 .pill.manual {
  background: var(--mid-badge); color: var(--mid-text-2); border: none;
  border-radius: 999px; font-size: 10.5px; font-weight: 500; padding: 3px 9px;
}
html[data-theme] body.chat-active .inbox-card-takeover {
  margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--mid-primary);
  background: var(--lime-tint); border: none; border-radius: 999px; padding: 4px 11px;
}
html[data-theme] body.chat-active .inbox-card-takeover:hover { background: var(--lime); color: var(--on-lime); }

/* Thread: bubbles in the sage pairing — lead = white card, us = dark olive */
html[data-theme] body.chat-active .msg.in .msg-bubble {
  background: var(--mid-surface-2, #ffffff); border: none; color: var(--mid-text);
  border-radius: 16px 16px 16px 6px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.06), 0 4px 12px -6px rgba(42,51,37,0.10);
}
html[data-theme] body.chat-active .msg.out .msg-bubble {
  background: #2a3325; border: none; color: #edeee4;
  border-radius: 16px 16px 6px 16px;
}
html[data-theme] body.chat-active .msg-meta { font-size: 11px; color: var(--mid-muted); }
html[data-theme] body.chat-active .msg-datesep span,
html[data-theme] body.chat-active .inbox-datesep span {
  background: var(--mid-surface-3); color: var(--mid-text-2);
  border: none; border-radius: 999px; font-size: 11px; padding: 4px 12px;
}
/* Thread header buttons → standard pills; take-over rides the lime */
html[data-theme] body.chat-active .inbox-thread-actions .button {
  background: var(--mid-surface-3); border: none; border-radius: 999px;
  height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 500; color: var(--mid-text-2);
}
html[data-theme] body.chat-active #inboxTakeoverBtn {
  background: var(--lime); color: var(--on-lime); font-weight: 600;
}

/* Composer: bone pill input, circular tools, lime send disc */
html[data-theme] body.chat-active .inbox-compose { border-top: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] body.chat-active .inbox-compose-row { gap: 8px; align-items: flex-end; }
html[data-theme] body.chat-active #inboxComposeText {
  background: var(--mid-base) !important; border: none !important; border-radius: 22px !important;
  padding: 12px 16px !important; font-size: 14px !important; color: var(--mid-text) !important;
}
html[data-theme] body.chat-active #inboxComposeText::placeholder { color: var(--mid-text-3) !important; }
html[data-theme] body.chat-active .compose-tool,
html[data-theme] body.chat-active .inbox-ai-inline {
  width: 40px; height: 40px; border: none; border-radius: 50%;
  background: var(--mid-surface-3); color: var(--mid-text-2);
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] body.chat-active .compose-tool:hover,
html[data-theme] body.chat-active .inbox-ai-inline:hover { background: var(--lime-tint); color: var(--mid-primary); }
html[data-theme] body.chat-active #inboxSendBtn {
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--lime); color: var(--on-lime); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] body.chat-active #inboxSendBtn:disabled { opacity: 0.45; box-shadow: none; }
html[data-theme] body.chat-active #inboxSendBtn .material-symbols-outlined { color: var(--on-lime); font-size: 20px; }

/* Dark theme: the relocated pills keep a sane margin above the shell */
html:not([data-theme]) #inboxFilter { margin: 0 0 12px; }

/* ═══ CHAT — consistency pass (7 fixes) ═══ */

/* 1 ▸ One type system on the whole page (kill var(--sans) holdouts) + all
   thread buttons sentence case 13/500 */
html[data-theme] body.chat-active #page-conversations,
html[data-theme] body.chat-active #page-conversations :is(button, input, textarea, span, strong, div):not(.material-symbols-outlined) {
  font-family: "Schibsted Grotesk", "Inter", sans-serif;
}
html[data-theme] body.chat-active #page-conversations :is(.button, .iwb-tpl-btn) {
  font-size: 13px; font-weight: 500; letter-spacing: 0; text-transform: none;
}

/* 2 ▸ Fixed page height — bounded scroller like Leads/Contacts: the compose
   row is always on screen; messages + list scroll inside the cards. */
@media (min-width: 901px) {
  html[data-theme] body.chat-active .shell { height: calc(100dvh - 58px); overflow: hidden; padding-bottom: 20px; }
}
@media (max-width: 900px) {
  html[data-theme] body.chat-active { overflow: hidden; }
  html[data-theme] body.chat-active .shell {
    height: calc(100dvh - 64px) !important; overflow: hidden !important;
    padding-top: 20px !important; padding-bottom: 0 !important;
  }
}
html[data-theme] body.chat-active #page-conversations {
  display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden;
}
html[data-theme] body.chat-active .sg-chat-head,
html[data-theme] body.chat-active #inboxFilter { flex: 0 0 auto; }
html[data-theme] body.chat-active .inbox-shell {
  flex: 1 1 auto; min-height: 0; height: auto !important;
  padding-bottom: 4px;
}
html[data-theme] body.chat-active .inbox-list-pane,
html[data-theme] body.chat-active .inbox-thread-pane {
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
}
html[data-theme] body.chat-active .inbox-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html[data-theme] body.chat-active .inbox-thread { display: flex; flex-direction: column; min-height: 0; height: 100%; }
html[data-theme] body.chat-active .inbox-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
html[data-theme] body.chat-active .inbox-compose { flex: 0 0 auto; }
@media (max-width: 900px) {
  html[data-theme] body.chat-active .inbox-shell { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* 3 ▸ Avatar: true circle (it was squashing into an oval) */
html[data-theme] body.chat-active .inbox-row-avatar {
  flex: 0 0 38px; min-width: 38px; aspect-ratio: 1 / 1;
}

/* 4 ▸ Pills: EXACT same metrics as the leads stage pills — fixed 36px */
html[data-theme] body.chat-active #inboxFilter button,
html[data-theme] body.leads-active #page-leads .leads-stage-pill {
  height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center;
}

/* 5 ▸ Search: standard field well (12px radius like every in-card input) */
html[data-theme] body.chat-active .inbox-search {
  border-radius: 12px; padding: 10px 14px; margin: 14px 16px 10px;
}

/* 6 ▸ Bubbles: bone for the lead, lime wash for us (black/white pair gone) */
html[data-theme] body.chat-active .msg.in .msg-bubble {
  background: var(--mid-base); color: var(--mid-text); box-shadow: none;
}
html[data-theme] body.chat-active .msg.out .msg-bubble {
  background: var(--lime-tint); color: #2a3325;
}

/* 7 ▸ Take-over (thread header only now): lime pill, no outline anywhere */
html[data-theme] body.chat-active #inboxTakeoverBtn {
  border: none !important; outline: none !important; box-shadow: none;
}

/* ═══ CHAT MOBILE — restore list-first flow + lean sage cards ═══
   The bounded-scroller pass forced the thread pane visible on mobile; back to:
   list only → tap → fullscreen thread (.show-thread). */
@media (max-width: 900px) {
  html[data-theme] body.chat-active .inbox-thread-pane { display: none; }
  html[data-theme] body.chat-active .inbox-shell.show-thread .inbox-thread-pane {
    display: flex; position: fixed; inset: 0; z-index: 1200; height: 100dvh;
    border-radius: 0; background: var(--mid-base) !important;
  }
  html[data-theme] body.chat-active .inbox-shell.show-thread .inbox-list-pane { display: none; }

  /* Rows = the lean sage card (the old mobile spec hid avatar/snippet/time) */
  html[data-theme] body.chat-active .inbox-row {
    background: var(--mid-surface-2, #ffffff) !important; border: none !important; border-radius: 16px;
    padding: 13px 14px !important; margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 6px 16px -8px rgba(42,51,37,0.10);
    display: flex; gap: 10px;
  }
  html[data-theme] body.chat-active .inbox-row:hover,
  html[data-theme] body.chat-active .inbox-row.is-active { background: var(--mid-surface-2, #ffffff) !important; }
  html[data-theme] body.chat-active .inbox-row-avatar { display: grid !important; }
  html[data-theme] body.chat-active .inbox-row-time { display: inline !important; }
  html[data-theme] body.chat-active .inbox-row-snippet { display: block !important; }
  html[data-theme] body.chat-active .inbox-row-unread { display: inline-block !important; }
  html[data-theme] body.chat-active .inbox-row-name {
    font-size: 13.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  html[data-theme] body.chat-active .inbox-row-meta3 { margin-top: 7px; }
  /* Search FAB + sheet in sage (they were cyan) */
  html[data-theme] body.chat-active .chat-search-fab {
    background: var(--lime); color: var(--on-lime);
    box-shadow: 0 8px 20px -8px rgba(120,140,30,0.55);
  }
  html[data-theme] body.chat-active .chat-search-pop:not([hidden]) {
    background: var(--sg-surface, #fdfdf8); border: none; box-shadow: 0 18px 48px -16px rgba(42,51,37,0.35);
  }
}

/* Temp/Manual meta row shows on desktop too (old spec was mobile-only) */
html[data-theme] body.chat-active .inbox-row-meta3 { display: flex; }

/* Compose field: visible boundary (it was merging into the pane) */
html[data-theme] body.chat-active #inboxComposeText {
  border: 1px solid var(--mid-line) !important;
  background: var(--mid-lowest) !important;
}

/* ═══ FIXES — hidden window bar truly hidden + ONE pill height everywhere ═══ */

/* display:flex on the bar was beating the [hidden] attribute — Instagram
   threads showed the dot + "Send template" even though JS hid them. */
.inbox-window-bar[hidden] { display: none !important; }
.iwb-tpl-btn[hidden] { display: none !important; }

/* One pill metric across the app: dashboard chips, leads stage pills, chat
   channel pills — identical height by construction (desktop + mobile). */
html[data-theme] .sg-chip,
html[data-theme] body.leads-active #page-leads .leads-stage-pill,
html[data-theme] body.chat-active #inboxFilter button {
  height: 42px; padding: 0 18px;
  display: inline-flex; align-items: center;
  box-sizing: border-box;
}

/* ═══ CHAT — search field + type ramp consistency ═══ */

/* Search well: same field system as every other in-card input (white well,
   sage hairline, 12px radius) */
html[data-theme] body.chat-active .inbox-search {
  background: var(--mid-lowest); border: 1px solid var(--mid-line);
  border-radius: 12px; padding: 9px 14px;
}

/* One type ramp for the page (sizes were drifting between components) */
html[data-theme] body.chat-active .inbox-row-name { font-size: 13.5px; font-weight: 500; }
html[data-theme] body.chat-active .inbox-row-snippet { font-size: 12px; }
html[data-theme] body.chat-active .inbox-row-time { font-size: 11px; }
html[data-theme] body.chat-active #inboxThreadName { font-size: 15px; font-weight: 600; color: var(--mid-text); }
html[data-theme] body.chat-active #inboxThreadMeta { font-size: 12px; color: var(--mid-muted); }
html[data-theme] body.chat-active .msg-bubble { font-size: 13.5px; line-height: 1.5; }
html[data-theme] body.chat-active .msg-meta { font-size: 11px; }
html[data-theme] body.chat-active .msg-tag { font-size: 10px; }
/* 16px (not 14) so iOS never auto-zooms the page when the composer is focused. */
html[data-theme] body.chat-active #inboxComposeText { font-size: 16px !important; }
html[data-theme] body.chat-active .inbox-window-bar { font-size: 12px; }
html[data-theme] body.chat-active .inbox-empty { font-size: 13px; color: var(--mid-muted); }

/* AI-suggest star: sit IN FLOW between the textarea and send button instead of
   floating over the input — so it can never cover typed text. (High specificity +
   late position to beat the earlier position:absolute rules.) */
body.chat-active .inbox-compose-row .inbox-ai-inline,
html[data-theme] body.chat-active .inbox-compose-row .inbox-ai-inline {
  position: static; transform: none; right: auto; top: auto;
  flex: 0 0 auto; order: 2; margin: 0;
}
body.chat-active .inbox-compose-row textarea { padding-right: 18px; order: 1; }
body.chat-active .inbox-compose-row #inboxSendBtn { order: 3; }
/* Focusing/typing in the composer hides the AI-suggest star so the input box
   grows to stay symmetric between the + (attach) and send buttons. */
body.chat-active .inbox-compose-row:focus-within .inbox-ai-inline,
#chatDetailContent .inbox-compose-row:focus-within .inbox-ai-inline { display: none; }

/* ═══ Sage light theme — create modals (new deal / task / contact / ticket) ═══
   They already use --mid-* tokens (sage in light), but two things kept them off
   the redesign: forced Inter font and a blue accent CTA with uppercase labels.
   Bring them onto the dashboard's language — Schibsted, lime pill CTA, sentence
   -case field labels, rounded white wells. */
html[data-theme] .modal-content {
  border-radius: 22px; border: 1px solid var(--mid-line);
  box-shadow: var(--mid-shadow, 0 18px 50px -20px rgba(0,0,0,0.18));
}
html[data-theme] .modal-content,
html[data-theme] .modal-content h2,
html[data-theme] .modal-content label,
html[data-theme] .modal-content input,
html[data-theme] .modal-content select,
html[data-theme] .modal-content textarea,
html[data-theme] .modal-content button,
html[data-theme] .modal-content small,
html[data-theme] .modal-content strong {
  font-family: "Schibsted Grotesk", "Inter", sans-serif;
}
html[data-theme] .modal-content .material-symbols-outlined { font-family: "Material Symbols Outlined" !important; }
html[data-theme] .modal-head h2 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text); }
html[data-theme] .modal-body label > span {
  text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--mid-text-2);
}
/* Filled bone wells — IDENTICAL to the approved quote-builder fields.
   NOTE: a generic light-theme rule forces every input to a WHITE well with
   `background: var(--mid-lowest) !important` (selector ~specificity 0,4,3). A
   plain class-level rule here loses that !important war (only its border-radius,
   which has no competitor, applied — that was the tell). So we override with
   ID-level specificity + !important, exactly how the quote builder beats the same
   rule. :is(#ids) keeps the list short while contributing id-level specificity. */
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal) :is(.modal-body, .task-lead-search) :is(input, select, textarea) {
  background: var(--mid-base) !important;
  border: 1px solid transparent !important;   /* bone fill, NO border line */
  border-radius: 12px !important;
  color: var(--mid-text) !important;
  padding: 12px 14px;
}
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal) :is(.modal-body, .task-lead-search) :is(input, select, textarea):focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
/* Mask Chrome's autofill blue/yellow fill in the modals too. */
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal) input:-webkit-autofill,
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal) input:-webkit-autofill:hover,
html[data-theme] :is(#newTaskModal, #newDealModal, #newContactModal, #newTicketModal) input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
  caret-color: var(--mid-text);
}
html[data-theme] .modal .button.primary {
  background: var(--lime, #d9ec4f); color: var(--on-lime, #2a3325); border: none;
  border-radius: 999px; font-weight: 600;
}
html[data-theme] .modal .button.primary:hover { background: var(--lime, #d9ec4f); filter: brightness(0.97); }
html[data-theme] .modal .button.primary:disabled { background: var(--mid-surface-3); color: var(--mid-muted); filter: none; }
html[data-theme] .modal .button.ghost {
  background: transparent; border: 1px solid var(--mid-line); color: var(--mid-text-2); border-radius: 999px;
}
html[data-theme] .modal .button.ghost:hover { background: var(--mid-surface-3); color: var(--mid-text); }
/* Prefilled-contact + section dividers read sage, not the old cream panel */
html[data-theme] .modal-prefilled-contact,
html[data-theme] .modal-section-header { border-color: var(--mid-line); }
html[data-theme] .modal-content small.muted,
html[data-theme] .modal-content .muted { color: var(--mid-muted); }

/* Close button → the quote card's round sage icon (.qdoc-x), NOT the blue-glow ghost.
   !important on radius/size to beat the generic light-theme button rules (same
   cascade fight as the inputs). */
html[data-theme] .modal-head .button.ghost.small,
html[data-theme] .modal-head button[data-close] {
  width: 36px !important; height: 36px !important; min-width: 0; padding: 0 !important; border-radius: 50% !important;
  background: var(--mid-surface-3); color: var(--mid-text-2); border: none;
  display: inline-flex; align-items: center; justify-content: center;
  /* THE blue glow: .modal-head button[data-close] gets `animation: fabGlow`
     (a pulsing rgba(0,90,200) box-shadow). Kill it in light theme. */
  animation: none !important; box-shadow: none !important;
}
html[data-theme] .modal-head .button.ghost.small:hover { background: var(--mid-surface-4); color: var(--mid-text); }
/* Kill the blue focus glow on modal buttons (incl. the X). The soft blue halo is
   the browser's default :focus ring — remove it on tap, keep a sage ring only for
   keyboard :focus-visible. box-shadow nuked too in case anything sets a blue one. */
html[data-theme] .modal .button:focus,
html[data-theme] .modal .button.ghost.small:focus { outline: none; box-shadow: none; }
html[data-theme] .modal .button:focus-visible {
  outline: 2px solid var(--lime, #d9ec4f); outline-offset: 2px; box-shadow: none;
}
html[data-theme] .modal .button.ghost.small { -webkit-tap-highlight-color: transparent; }

/* ── Bottom-drawer behaviour to MATCH the quote card (grip + slide-up/down) ── */
@media (max-width: 600px) {
  /* slide up on open, slide down on close (beats the desktop uiPopIn) */
  .modal:not([hidden]) .modal-content { animation: uiSheetUp 0.34s cubic-bezier(0.22,1,0.36,1); }
  .modal .modal-content.is-closing { animation: uiSheetDown 0.24s cubic-bezier(0.4,0,1,1) forwards; }
  /* Fixed grip + header, scrolling body — same anatomy as the quote drawer. */
  .modal-content { display: flex; flex-direction: column; overflow: hidden; }
  .modal-head { flex: 0 0 auto; }
  .modal-content > .modal-body,
  .modal-content > form.modal-body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; }
  .modal-content::before {
    content: ""; flex: 0 0 auto; width: 40px; height: 4px; border-radius: 999px;
    background: rgba(42,51,37,0.18); margin: 8px auto 2px;
  }
}

/* Sentence case everywhere in light — temperature chips were uppercase-tracked */
html[data-theme] .lead-temp-chip {
  text-transform: none; letter-spacing: 0; font-size: 10.5px; font-weight: 500;
}
html[data-theme] body.chat-active #page-conversations :is(.pill, .msg-tag, .lead-temp-chip) {
  text-transform: none; letter-spacing: 0;
}

/* ═══ CHAT MOBILE — natural window scroll (no fixed-height card) ═══
   The bounded scroller stays DESKTOP-only; on mobile the chat list flows and
   scrolls with the page exactly like the dashboard. */
@media (max-width: 900px) {
  html[data-theme] body.chat-active { overflow: visible; }
  html[data-theme] body.chat-active .shell {
    height: auto !important; overflow: visible !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] body.chat-active #page-conversations {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.chat-active .inbox-shell {
    display: block; height: auto !important; min-height: 0; overflow: visible;
    padding-bottom: 0;
  }
  html[data-theme] body.chat-active .inbox-list-pane {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.chat-active .inbox-list {
    overflow: visible; max-height: none;
  }
}

/* ═══ CONTACTS MOBILE — natural window scroll ═══
   The inner fixed-height scroller blocked iOS's tap-status-bar-to-top (that
   gesture only drives the WINDOW scroller). Desktop keeps the bounded layout;
   mobile scrolls the page like the dashboard/chat. */
@media (max-width: 900px) {
  html[data-theme] body.contacts-active { overflow: visible; }
  html[data-theme] body.contacts-active .shell {
    height: auto !important; overflow: visible !important;
    padding-top: 20px !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] body.contacts-active #page-contacts {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.contacts-active #page-contacts .contacts-grid {
    overflow: visible; min-height: 0; padding-bottom: 0;
  }
}

/* Contacts chips as filters: active chip gets the dark-olive "selected" state */
html[data-theme] body.contacts-active #page-contacts .sg-chip { cursor: pointer; }
html[data-theme] body.contacts-active #page-contacts .sg-chip.is-on {
  background: #2a3325; color: #edeee4;
}
html[data-theme] body.contacts-active #page-contacts .sg-chip.is-on b { color: var(--lime); }

/* ═══ LEADS LIST VIEW (mobile) — window scroll for tap-to-top ═══
   Only the LIST view unlocks (kanban keeps the fixed stage pills + inner
   column scroll). :has() scopes it to when the list is the visible mode. */
@media (max-width: 900px) {
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) { overflow: visible; }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) .shell {
    height: auto !important; overflow: visible !important;
    padding-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) #page-leads {
    display: block; height: auto; min-height: 0; overflow: visible;
  }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) #page-leads #crmKanbanBoard { display: none; }
  html[data-theme] body.leads-active:has(#crmLeadsList:not([hidden])) #page-leads .leads-list {
    overflow: visible; min-height: 0; max-height: none;
    padding-bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEAL DETAIL PAGE — full sage redesign (light theme)
   Big-amount display header · lime dot stepper · pill tabs · borderless cards
   ═══════════════════════════════════════════════════════════════════════════ */

/* The page surface: bone canvas, generous gutters */
/* ONLY when open — the closed panel stays in the DOM as a transparent
   full-viewport layer; painting it bone blanked the whole app. */
html[data-theme] #dealDetailPanel:not([hidden]) { background: var(--mid-base) !important; border: none !important; }
html[data-theme] #dealDetailPanel[hidden] { display: none !important; background: transparent !important; }
html[data-theme] #dealDetailContent .dlp-scroll { padding: 18px 20px calc(40px + env(safe-area-inset-bottom)); }
html[data-theme] #dealDetailContent .dlp-backrow {
  display: inline-flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 16px 0 12px; margin-bottom: 14px;
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 999px;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10);
  font-size: 13px; font-weight: 500; color: var(--mid-text-2); cursor: pointer;
}
html[data-theme] #dealDetailContent .dlp-backrow .material-symbols-outlined { font-size: 17px; }

/* Cards: dashboard surface, 24px radius, no borders */
html[data-theme] #dealDetailContent .dlp-card {
  background: var(--sg-surface, #fdfdf8) !important; border: none !important; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  padding: 20px 22px; margin-bottom: 14px;
}
html[data-theme] #dealDetailContent .dlp-card-head h3 {
  font-size: 15px; font-weight: 500; color: var(--mid-text);
  letter-spacing: 0; text-transform: none;
}

/* ── HEAD CARD: display-type name, bone avatar, BIG amount, action discs ── */
html[data-theme] #dealDetailContent .dlp-deal-name {
  font-size: clamp(24px, 3vw, 31px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--mid-text); border: none; outline: none;
}
html[data-theme] #dealDetailContent .dlp-deal-name:focus { box-shadow: 0 2px 0 var(--lime); }
html[data-theme] #dealDetailContent .dlp-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mid-badge); color: var(--mid-primary);
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] #dealDetailContent .dlp-name-link,
html[data-theme] #dealDetailContent .dlp-name-plain {
  font-size: 14px; font-weight: 500; color: var(--mid-primary);
  background: none; border: none; cursor: pointer; padding: 0;
}
/* Amount = the dashboard big number; the input IS the display */
html[data-theme] #dealDetailContent .dlp-stat-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] #dealDetailContent .dlp-amount {
  font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em;
  color: var(--mid-text); display: inline-flex; align-items: baseline; gap: 4px;
}
html[data-theme] #dealDetailContent .dlp-amount input {
  background: transparent !important; border: none !important; outline: none;
  font-size: inherit !important; font-weight: inherit; letter-spacing: inherit;
  color: var(--mid-text) !important; padding: 0 !important; width: 7.5ch;
  border-radius: 0 !important;
}
html[data-theme] #dealDetailContent .dlp-amount input:focus { box-shadow: 0 2px 0 var(--lime) !important; }
/* Action discs: call bone · WhatsApp lime · delete soft sage-red */
html[data-theme] #dealDetailContent .dlp-icon-btn,
html[data-theme] #dealDetailContent .dlp-del-icon {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); cursor: pointer;
}
html[data-theme] #dealDetailContent .dlp-call { background: var(--sg-surface, #fdfdf8); color: var(--mid-text-2); }
html[data-theme] #dealDetailContent .dlp-wa { background: var(--lime); color: var(--on-lime); }
html[data-theme] #dealDetailContent .dlp-del-icon { background: rgba(179,66,47,0.12); color: #b3422f; }
html[data-theme] #dealDetailContent .dlp-del-icon:hover { background: rgba(179,66,47,0.2); }
html[data-theme] #dealDetailContent :is(.dlp-icon-btn, .dlp-del-icon) .material-symbols-outlined { font-size: 19px; color: inherit; }

/* ── DOT STEPPER: olive done → lime current → bone todo, hairline rail ── */
html[data-theme] #dealDetailContent .dlp-step-dot {
  width: 30px; height: 30px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] #dealDetailContent .dlp-step-dot .material-symbols-outlined { font-size: 15px; }
html[data-theme] #dealDetailContent .dlp-step-done .dlp-step-dot { background: #2a3325; color: #edeee4; }
html[data-theme] #dealDetailContent .dlp-step-current .dlp-step-dot {
  background: var(--lime); color: var(--on-lime);
  box-shadow: 0 0 0 5px var(--lime-tint);
}
html[data-theme] #dealDetailContent .dlp-step-todo .dlp-step-dot { background: var(--mid-surface-3); color: var(--mid-text-3); }
html[data-theme] #dealDetailContent .dlp-step-label {
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted); margin-top: 6px;
}
html[data-theme] #dealDetailContent .dlp-step-current .dlp-step-label { color: var(--mid-text); font-weight: 600; }
html[data-theme] #dealDetailContent .dlp-step { background: none; border: none; }
html[data-theme] #dealDetailContent .dlp-step::before,
html[data-theme] #dealDetailContent .dlp-step::after { background: var(--mid-surface-4) !important; height: 2px !important; }

/* ── PILL TABS: bone pills, dark-olive active (channel-pill component) ── */
html[data-theme] #dealDetailContent .dlp-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px;
  border: none !important; scrollbar-width: none;
}
html[data-theme] #dealDetailContent .dlp-tabs::-webkit-scrollbar { display: none; }
html[data-theme] #dealDetailContent .dlp-tab {
  flex: 0 0 auto; height: 38px; padding: 0 16px; border: none !important; border-radius: 999px;
  background: var(--mid-base); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; cursor: pointer;
  text-transform: none; letter-spacing: 0;
}
html[data-theme] #dealDetailContent .dlp-tab:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] #dealDetailContent .dlp-tab.active {
  background: #2a3325 !important; color: #edeee4 !important; box-shadow: none;
}

/* ── PANES: sentence-case labels, bone field wells, sage meta ── */
html[data-theme] #dealDetailContent .dl-label,
html[data-theme] #dealDetailContent .dl-field label,
html[data-theme] #dealDetailContent .task-form-field span,
html[data-theme] #dealDetailContent .dlp-pane-h {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] #dealDetailContent :is(input, select, textarea):not(.dlp-amount input) {
  background: var(--mid-base) !important; border: none !important; border-radius: 12px !important;
  padding: 10px 14px !important; font-size: 13.5px !important; color: var(--mid-text) !important;
}
html[data-theme] #dealDetailContent .dl-meta-row { font-size: 12px; color: var(--mid-muted); }
html[data-theme] #dealDetailContent .dl-meta-row span:last-child { color: var(--mid-text-2); }

/* Timelines: lime first dot, olive rail */
html[data-theme] #dealDetailContent .dlp-tl-dot {
  background: var(--mid-surface-3); color: var(--mid-text-2); border: none;
}
html[data-theme] #dealDetailContent .dlp-tl-item:first-child .dlp-tl-dot { background: var(--lime); color: var(--on-lime); }
html[data-theme] #dealDetailContent .dlp-tl-title { font-size: 13.5px; font-weight: 500; color: var(--mid-text); }
html[data-theme] #dealDetailContent .dlp-tl-meta { font-size: 11.5px; color: var(--mid-muted); }
html[data-theme] #dealDetailContent .dlp-tl-text { font-size: 12.5px; color: var(--mid-text-2); }

/* Task rows + buttons inside panes */
html[data-theme] #dealDetailContent .deal-task-done { border: none; background: transparent; color: var(--mid-muted); }
html[data-theme] #dealDetailContent .deal-task-done:hover { color: var(--on-lime); background: var(--lime); border-radius: 50%; }
html[data-theme] #dealDetailContent .button.primary,
html[data-theme] #dealDetailContent .dlp-addtask-btn {
  background: var(--lime) !important; color: var(--on-lime) !important; border: none !important;
  border-radius: 999px; height: 42px; font-size: 13.5px; font-weight: 600;
}
html[data-theme] #dealDetailContent .button.ghost {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  border: none !important; border-radius: 999px;
}

/* ═══ DEAL PAGE — layout polish ═══ */

/* 1 ▸ Real right padding (cards were flush to the panel edge) */
html[data-theme] #dealDetailContent .dlp-scroll {
  padding: 18px 28px calc(40px + env(safe-area-inset-bottom));
  box-sizing: border-box; width: 100%;
}
html[data-theme] #dealDetailContent .dlp { max-width: 1180px; margin: 0 auto; }
@media (max-width: 768px) {
  html[data-theme] #dealDetailContent .dlp-scroll { padding: 14px 16px calc(120px + env(safe-area-inset-bottom)); }
}

/* 2 ▸ Desktop: Overview card LEFT, tab card RIGHT */
html[data-theme] #dealDetailContent .dlp-cols { display: block; }
@media (min-width: 901px) {
  html[data-theme] #dealDetailContent .dlp-cols {
    display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.15fr;
    gap: 14px; align-items: start;
  }
  html[data-theme] #dealDetailContent .dlp-cols .dlp-card { margin-bottom: 0; }
}
@media (max-width: 900px) {
  html[data-theme] #dealDetailContent .dlp-overviewcard { margin-bottom: 14px; }
}

/* 3 ▸ Back button = standard pill (42px like every pill) */
html[data-theme] #dealDetailContent .dlp-backrow {
  height: 42px; padding: 0 18px 0 14px; font-size: 13px; font-weight: 500;
}

/* ═══ DEAL PAGE — spacing rhythm, icon back, sage quotes table ═══ */

/* Back: icon-only 42px disc (same scale as the pills) */
html[data-theme] #dealDetailContent .dlp-backrow {
  width: 42px; height: 42px; padding: 0; justify-content: center; gap: 0;
  border-radius: 50%;
}

/* Overview rhythm: consistent label→field and section→section spacing */
html[data-theme] #dealDetailContent .dl-section { margin: 0; }
html[data-theme] #dealDetailContent .dl-section + .dl-section,
html[data-theme] #dealDetailContent .dl-section + .dl-meta { margin-top: 22px; }
html[data-theme] #dealDetailContent .dl-label { margin: 0 0 10px; }
html[data-theme] #dealDetailContent .dl-section .edit-textarea { margin: 0; }
html[data-theme] #dealDetailContent .dl-fields { display: flex; flex-direction: column; gap: 14px; }
html[data-theme] #dealDetailContent .dl-field { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin: 0; }
html[data-theme] #dealDetailContent .dl-meta {
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(42,51,37,0.08);
  display: flex; flex-direction: column; gap: 8px;
}
html[data-theme] #dealDetailContent .dl-meta-row { display: flex; justify-content: space-between; }

/* Quotes tab — sage table: sentence-case header, soft rows, pill actions */
html[data-theme] #dealDetailContent .dlp-quotes-tablewrap { background: transparent; border: none; overflow-x: auto; }
html[data-theme] #dealDetailContent .dlp-quotes-table { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }
html[data-theme] #dealDetailContent .dlp-quotes-table thead th {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500;
  color: var(--mid-muted); background: transparent;
  text-align: left; padding: 8px 10px; border: none;
  border-bottom: 1px solid rgba(42,51,37,0.10);
}
html[data-theme] #dealDetailContent .dlp-quotes-table tbody td {
  padding: 12px 10px; border: none; border-bottom: 1px solid rgba(42,51,37,0.07);
  color: var(--mid-text); vertical-align: middle; background: transparent;
}
html[data-theme] #dealDetailContent .dlp-q-id { font-weight: 600; color: var(--mid-text-2); }
html[data-theme] #dealDetailContent .dlp-q-total { font-weight: 600; color: var(--mid-primary); }
html[data-theme] #dealDetailContent .dlp-q-date { color: var(--mid-muted); font-size: 12.5px; }
/* Status pills in sage temps, sentence case */
html[data-theme] #dealDetailContent .dlp-q-status {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; border: none;
}
html[data-theme] #dealDetailContent .dlp-q-status-sent { background: rgba(157,186,110,0.28); color: #56671f; }
html[data-theme] #dealDetailContent .dlp-q-status-accepted { background: var(--lime); color: var(--on-lime); }
html[data-theme] #dealDetailContent .dlp-q-status-rejected { background: rgba(179,66,47,0.12); color: #b3422f; }
html[data-theme] #dealDetailContent .dlp-q-status-superseded { background: var(--mid-surface-3); color: var(--mid-text-2); }
/* Action links → small pill chips, right-aligned in one row */
html[data-theme] #dealDetailContent .dlp-q-actions {
  display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; align-items: center;
}
html[data-theme] #dealDetailContent .dlp-q-link {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px; border: none; border-radius: 999px;
  background: var(--mid-base); color: var(--mid-text-2);
  font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none;
  white-space: nowrap;
}
html[data-theme] #dealDetailContent .dlp-q-link:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] #dealDetailContent .dlp-q-link-accept { background: var(--lime-tint); color: var(--mid-primary); font-weight: 600; }
html[data-theme] #dealDetailContent .dlp-q-link-accept:hover { background: var(--lime); color: var(--on-lime); }
html[data-theme] #dealDetailContent .dlp-new-quote { background: var(--lime-tint); color: var(--mid-primary); font-weight: 600; height: 36px; padding: 0 14px; }
html[data-theme] #dealDetailContent .dlp-new-quote:hover { background: var(--lime); color: var(--on-lime); }
html[data-theme] #dealDetailContent .dlp-pane-hrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
/* Tasks group label ("Open · 1") joins the sentence-case ramp */
html[data-theme] #dealDetailContent .deal-task-grp {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--mid-muted);
}

/* ═══ DEAL PAGE — quote action icons, tasks rhythm; QUOTE BUILDER result row ═══ */

/* Quote actions: 34px icon discs in one tidy row (no wrapping text pills) */
html[data-theme] #dealDetailContent .dlp-q-ico,
html[data-theme] #contactDetailContent .dlp-q-ico {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  justify-content: center; flex: 0 0 auto;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent) .dlp-q-ico .material-symbols-outlined { font-size: 17px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent) .dlp-q-actions { flex-wrap: nowrap; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent) .dlp-quotes-table thead th { background: transparent; }

/* Tasks tab rhythm: consistent gaps between list, labels and fields */
html[data-theme] #dealDetailContent .deal-tasks-list { margin: 0 0 22px; }
html[data-theme] #dealDetailContent .task-form { display: flex; flex-direction: column; gap: 14px; }
html[data-theme] #dealDetailContent .task-form-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0;
}
@media (max-width: 768px) {
  html[data-theme] #dealDetailContent .task-form-row { grid-template-columns: 1fr; }
}
html[data-theme] #dealDetailContent .task-form-field { display: flex; flex-direction: column; gap: 10px; margin: 0; }
html[data-theme] #dealDetailContent .task-form input[name="title"] { margin: 0; }
html[data-theme] #dealDetailContent .dlp-addtask-btn { align-self: flex-start; padding: 0 22px; margin-top: 2px; }
html[data-theme] #dealDetailContent .dlp-pane .muted.small { color: var(--mid-muted); }

/* Quote builder — post-generation block in the design language:
   status chip = lime tint · Send = lime CTA · PDF/Slides = bone pills */
html[data-theme] body.quote-active #page-quotes .crm-status-inline,
html[data-theme] body.quote-active #page-quotes .crm-status-inline.crm-ok {
  background: var(--lime-tint); border: none; border-radius: 999px;
  color: var(--mid-primary); font-size: 12.5px; font-weight: 500;
  padding: 7px 14px; display: inline-flex; align-items: center; gap: 6px;
}
html[data-theme] body.quote-active #page-quotes .crm-status-inline.crm-error {
  background: rgba(179,66,47,0.12); color: #b3422f; border: none;
}
html[data-theme] body.quote-active #page-quotes .qg-link-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 44px; border: none; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; cursor: pointer; text-decoration: none;
}
html[data-theme] body.quote-active #page-quotes .qg-link-btn .material-symbols-outlined { font-size: 17px; color: inherit; }
html[data-theme] body.quote-active #page-quotes .qg-link-primary,
html[data-theme] body.quote-active #page-quotes .qg-link-ghost {
  background: var(--mid-surface-3); color: var(--mid-text-2);
}
html[data-theme] body.quote-active #page-quotes .qg-link-primary:hover,
html[data-theme] body.quote-active #page-quotes .qg-link-ghost:hover {
  background: var(--mid-surface-4); color: var(--mid-text);
}
html[data-theme] body.quote-active #page-quotes .qg-link-send {
  background: var(--lime); color: var(--on-lime); font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(120,140,30,0.55);
}
html[data-theme] body.quote-active #page-quotes .qg-link-send:hover { background: #cfe343; }

/* Chat search FAB: it was pinned at bottom 24px — directly BEHIND the floating
   nav pill (the "ghost card" peeking out). Lift it above the nav. */
@media (max-width: 900px) {
  html[data-theme] body.chat-active .chat-search-fab {
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
    right: 20px !important;
  }
  html[data-theme] body.chat-active .chat-search-pop:not([hidden]) {
    bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }
}

/* ═══ DEAL/CONTACT PAGE (mobile) — true fullscreen ═══
   It was pinned top:58 / bottom:88px-above-nav, so the topbar and the leads
   board peeked around it and the content was squeezed. Now it covers the
   whole viewport (like the chat thread) and scrolls internally. */
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage:not([hidden]) {
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    height: 100dvh; z-index: 1200;
  }
}
/* The scroll lives inside the page; last card clears the bottom edge */
html[data-theme] .detail-fullpage .dlp-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage .dlp-scroll {
    padding-top: calc(14px + env(safe-area-inset-top));
  }
}

/* Deal/contact page: nav pill stays visible (page sits BELOW the nav, which
   is z-100), and the internal scroll already ends with nav clearance. */
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage:not([hidden]) { z-index: 60; }
}

/* Back button: bare arrow — no disc/oval chrome (mobile + desktop) */
html[data-theme] #dealDetailContent .dlp-backrow,
html[data-theme] #contactDetailContent .dlp-backrow {
  background: transparent; box-shadow: none; border: none; border-radius: 0;
  width: 42px; height: 42px; padding: 0; justify-content: flex-start;
  color: var(--mid-text);
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent) .dlp-backrow .material-symbols-outlined { font-size: 22px; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent) .dlp-backrow:hover { color: var(--mid-primary); background: transparent; }

/* ═══ DEAL/CONTACT PAGE (mobile) — REAL in-flow page, window scroll ═══
   The fixed-overlay version always scrolled inside a container (no status-bar
   tap, height squeezed by the nav). On mobile the open panel now becomes a
   normal block in the document: the board hides underneath, the body unlocks,
   the WINDOW scrolls, and the nav pill floats above like every other page. */
@media (max-width: 768px) {
  /* unlock window scroll even on pages that lock the body (leads kanban) */
  html[data-theme] body.detailpage-open { overflow: visible !important; }
  html[data-theme] body.detailpage-open .shell { display: none !important; }
  html[data-theme] .detail-fullpage:not([hidden]) {
    position: static !important; inset: auto !important;
    height: auto !important; min-height: 100dvh; z-index: auto;
    display: block;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .detail-content {
    position: static !important; height: auto !important;
    display: block; overflow: visible;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp {
    position: static; display: block; min-height: 0;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-scroll {
    overflow: visible; height: auto; flex: none;
    padding-bottom: calc(120px + env(safe-area-inset-bottom));
  }
}

/* In-flow deal page: clamp HORIZONTAL overflow (the 9-step pipeline strip was
   widening the whole document once ancestors went overflow:visible — cards
   bled past the right edge and the gutters vanished). Vertical stays window. */
@media (max-width: 768px) {
  html[data-theme] .detail-fullpage:not([hidden]) {
    overflow-x: clip; max-width: 100vw;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-scroll {
    overflow-x: clip;
    padding: 14px 16px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-stepper-scroll {
    overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-tabs,
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-quotes-tablewrap {
    overflow-x: auto; max-width: 100%;
  }
  html[data-theme] .detail-fullpage:not([hidden]) .dlp-card { max-width: 100%; box-sizing: border-box; }
}

/* The content node is ALSO matched by an #id rule (display:flex/overflow:hidden)
   which outranked the class-based in-flow overrides — the .dlp flex item then
   sized itself to the stepper's intrinsic 852px and blew out the layout.
   Override at id strength. */
@media (max-width: 768px) {
  html[data-theme] #dealDetailContent,
  html[data-theme] #contactDetailContent {
    display: block !important; overflow: visible !important;
    position: static !important; height: auto !important;
    width: 100% !important; max-width: 100% !important;
  }
}

/* Deal head card (mobile): amount + the three action discs didn't fit the
   row (316px of content in a 308px card row) — the delete disc spilled past
   the card edge. Tighter gaps + 40px discs + wrap as a safety net. */
@media (max-width: 768px) {
  html[data-theme] #dealDetailContent .dlp-head-right {
    gap: 12px; flex-wrap: wrap; min-width: 0; max-width: 100%;
  }
  html[data-theme] #dealDetailContent .dlp-head-actions { gap: 8px; margin-left: auto; }
  html[data-theme] #dealDetailContent .dlp-icon-btn,
  html[data-theme] #dealDetailContent .dlp-del-icon {
    width: 40px; height: 40px;
  }
  html[data-theme] #dealDetailContent .dlp-amount { font-size: 26px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTACT DETAIL PAGE — same sage treatment as the deal page
   (shares the dlp-* skeleton; every deal rule re-stated for the contact id)
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme] #contactDetailPanel:not([hidden]) { background: var(--mid-base) !important; border: none !important; }
html[data-theme] #contactDetailPanel[hidden] { display: none !important; background: transparent !important; }

html[data-theme] #contactDetailContent .dlp-scroll {
  padding: 18px 28px calc(40px + env(safe-area-inset-bottom));
  box-sizing: border-box; width: 100%;
}
html[data-theme] #contactDetailContent .dlp { max-width: 1180px; margin: 0 auto; }

/* Cards */
html[data-theme] #contactDetailContent .dlp-card {
  background: var(--sg-surface, #fdfdf8) !important; border: none !important; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  padding: 20px 22px; margin-bottom: 14px;
}
html[data-theme] #contactDetailContent .dlp-card-head h3 {
  font-size: 15px; font-weight: 500; color: var(--mid-text); letter-spacing: 0; text-transform: none;
}

/* Head card: display name, bone avatar, BIG won-value, action discs */
html[data-theme] #contactDetailContent .dlp-deal-name {
  font-size: clamp(24px, 3vw, 31px); font-weight: 500; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--mid-text); border: none; outline: none;
}
html[data-theme] #contactDetailContent .dlp-deal-name:focus { box-shadow: 0 2px 0 var(--lime); }
html[data-theme] #contactDetailContent .dlp-avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mid-badge); color: var(--mid-primary);
  font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center;
}
html[data-theme] #contactDetailContent .dlp-stat-label {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mid-muted);
}
html[data-theme] #contactDetailContent .dlp-amount-static {
  font-size: clamp(26px, 3vw, 34px); font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text);
}
html[data-theme] #contactDetailContent .dlp-icon-btn,
html[data-theme] #contactDetailContent .dlp-del-icon {
  width: 44px; height: 44px; border-radius: 50%; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(42,51,37,0.10); cursor: pointer;
}
html[data-theme] #contactDetailContent .dlp-call { background: var(--sg-surface, #fdfdf8); color: var(--mid-text-2); }
html[data-theme] #contactDetailContent .dlp-wa { background: var(--lime); color: var(--on-lime); }
html[data-theme] #contactDetailContent .dlp-del-icon { background: rgba(179,66,47,0.12); color: #b3422f; }
html[data-theme] #contactDetailContent .dlp-del-icon:hover { background: rgba(179,66,47,0.2); }
html[data-theme] #contactDetailContent :is(.dlp-icon-btn, .dlp-del-icon) .material-symbols-outlined { font-size: 19px; color: inherit; }

/* Tabs: bone pills, dark-olive active */
html[data-theme] #contactDetailContent .dlp-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 0 14px;
  border: none !important; scrollbar-width: none;
}
html[data-theme] #contactDetailContent .dlp-tabs::-webkit-scrollbar { display: none; }
html[data-theme] #contactDetailContent .dlp-tab {
  flex: 0 0 auto; height: 38px; padding: 0 16px; border: none !important; border-radius: 999px;
  background: var(--mid-base); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; cursor: pointer; text-transform: none; letter-spacing: 0;
}
html[data-theme] #contactDetailContent .dlp-tab:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] #contactDetailContent .dlp-tab.active { background: #2a3325 !important; color: #edeee4 !important; box-shadow: none; }

/* Overview fields + meta (same rhythm as the deal page) */
html[data-theme] #contactDetailContent .dl-label,
html[data-theme] #contactDetailContent .dl-field label,
html[data-theme] #contactDetailContent .dlp-pane-h {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--mid-muted);
}
html[data-theme] #contactDetailContent :is(input, select, textarea) {
  background: var(--mid-base) !important; border: none !important; border-radius: 12px !important;
  padding: 10px 14px !important; font-size: 13.5px !important; color: var(--mid-text) !important;
}
html[data-theme] #contactDetailContent .dl-fields { display: flex; flex-direction: column; gap: 14px; }
html[data-theme] #contactDetailContent .dl-field { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; margin: 0; }
html[data-theme] #contactDetailContent .dl-field-static { font-size: 13.5px; color: var(--mid-text); }
html[data-theme] #contactDetailContent .dl-meta {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(42,51,37,0.08);
  display: flex; flex-direction: column; gap: 8px;
}
html[data-theme] #contactDetailContent .dl-meta-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--mid-muted); }
html[data-theme] #contactDetailContent .dl-meta-row span:last-child { color: var(--mid-text-2); }

/* Buttons inside panes */
html[data-theme] #contactDetailContent .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important; border: none !important;
  border-radius: 999px; height: 42px; font-size: 13.5px; font-weight: 600;
}
html[data-theme] #contactDetailContent .button.ghost {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  border: none !important; border-radius: 999px;
}
html[data-theme] #contactDetailContent .dlp-pane-hrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
html[data-theme] #contactDetailContent .dl-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }

/* Deals tab: linked deals as sage rows */
html[data-theme] #contactDetailContent .contact-deals { list-style: none; margin: 0; padding: 0; }
html[data-theme] #contactDetailContent .contact-deals .deal-link {
  padding: 12px 14px; border: none; border-radius: 14px; background: var(--mid-base);
  margin-bottom: 10px; cursor: pointer;
}
html[data-theme] #contactDetailContent .contact-deals .deal-link:hover { background: var(--mid-surface-4); }
html[data-theme] #contactDetailContent .contact-deals .deal-link strong { font-size: 13.5px; font-weight: 500; color: var(--mid-text); }
html[data-theme] #contactDetailContent .contact-deals .deal-link .muted { color: var(--mid-muted); font-size: 12px; }

/* Desktop: Overview left, tabs right (this page uses .dlp-2col) */
@media (min-width: 901px) {
  html[data-theme] #contactDetailContent .dlp-2col {
    display: grid; grid-template-columns: minmax(300px, 0.85fr) 1.15fr;
    gap: 14px; align-items: start;
  }
  html[data-theme] #contactDetailContent .dlp-2col .dlp-card { margin-bottom: 0; }
}

/* Mobile: gutters, head-row fit, in-flow window scroll (id override exists) */
@media (max-width: 768px) {
  html[data-theme] #contactDetailContent .dlp-scroll {
    overflow-x: clip;
    padding: 14px 16px calc(120px + env(safe-area-inset-bottom)) !important;
  }
  html[data-theme] #contactDetailContent .dlp-head-right { gap: 12px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
  html[data-theme] #contactDetailContent .dlp-head-actions { gap: 8px; margin-left: auto; }
  html[data-theme] #contactDetailContent .dlp-icon-btn,
  html[data-theme] #contactDetailContent .dlp-del-icon { width: 40px; height: 40px; }
  html[data-theme] #contactDetailContent .dlp-amount-static { font-size: 26px; }
  html[data-theme] #contactDetailContent .dlp-tabs,
  html[data-theme] #contactDetailContent .dlp-quotes-tablewrap { overflow-x: auto; max-width: 100%; }
  html[data-theme] #contactDetailContent .dlp-card { max-width: 100%; box-sizing: border-box; }
}

/* ═══ CONTACT → MESSAGES TAB — same design as the Chat thread ═══
   (the chat sage styles are gated on body.chat-active; mirrored here) */

/* Bubbles: lead = bone, us = lime wash; sage meta */
html[data-theme] #contactDetailContent .msg.in .msg-bubble {
  background: var(--mid-base); border: none; color: var(--mid-text);
  border-radius: 16px 16px 16px 6px; box-shadow: none;
  font-size: 13.5px; line-height: 1.5;
}
html[data-theme] #contactDetailContent .msg.out .msg-bubble {
  background: var(--lime-tint); border: none; color: #2a3325;
  border-radius: 16px 16px 6px 16px;
  font-size: 13.5px; line-height: 1.5;
}
html[data-theme] #contactDetailContent .msg-meta { font-size: 11px; color: var(--mid-muted); }
html[data-theme] #contactDetailContent .msg-tag { font-size: 10px; text-transform: none; letter-spacing: 0; }

/* Messages area sits in a quiet well inside the card */
html[data-theme] #contactDetailContent .inbox-messages { background: transparent; }
html[data-theme] #contactDetailContent .contact-chat { border: none; background: transparent; }

/* Top bar: plain card-head style, Take over = lime pill, template = bone pill */
html[data-theme] #contactDetailContent .contact-chat-bar {
  background: transparent; border: none; border-bottom: 1px solid rgba(42,51,37,0.07);
  padding: 0 0 12px; margin-bottom: 12px;
}
html[data-theme] #contactDetailContent .cc-window-text {
  font-size: 12.5px; color: var(--mid-muted); text-transform: none; letter-spacing: 0;
}
html[data-theme] #contactDetailContent #contactChatTakeover {
  background: var(--lime) !important; color: var(--on-lime) !important;
  border: none !important; outline: none !important; border-radius: 999px;
  height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 600; box-shadow: none;
}
html[data-theme] #contactDetailContent .cc-tpl-btn {
  background: var(--mid-surface-3); color: var(--mid-text-2); border: none;
  border-radius: 999px; height: 34px; padding: 0 14px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
html[data-theme] #contactDetailContent .cc-tpl-btn:hover { background: var(--mid-surface-4); color: var(--mid-text); }

/* Composer: white well field + circular attach + lime send disc */
html[data-theme] #contactDetailContent .inbox-compose { border-top: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] #contactDetailContent .inbox-compose-row { gap: 8px; align-items: flex-end; }
html[data-theme] #contactDetailContent #contactChatText {
  background: var(--mid-lowest) !important; border: 1px solid var(--mid-line) !important;
  border-radius: 22px !important; padding: 12px 16px !important;
  font-size: 14px !important; color: var(--mid-text) !important;
}
html[data-theme] #contactDetailContent #contactChatText::placeholder { color: var(--mid-text-3) !important; }
html[data-theme] #contactDetailContent #contactChatAttachBtn {
  width: 40px; height: 40px; border: none !important; border-radius: 50% !important;
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
html[data-theme] #contactDetailContent #contactChatAttachBtn:hover { background: var(--lime-tint) !important; color: var(--mid-primary) !important; }
html[data-theme] #contactDetailContent #contactChatSend {
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--lime); color: var(--on-lime); padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55); cursor: pointer;
}
html[data-theme] #contactDetailContent #contactChatSend:disabled { opacity: 0.45; box-shadow: none; }
html[data-theme] #contactDetailContent #contactChatSend .material-symbols-outlined { color: var(--on-lime); font-size: 20px; }

/* Window bar + date separators in sage; hidden means hidden */
html[data-theme] #contactDetailContent .inbox-banner { display: none !important; }
html[data-theme] #contactDetailContent .msg-datesep span,
html[data-theme] #contactDetailContent .inbox-datesep span {
  background: var(--mid-surface-3); color: var(--mid-text-2);
  border: none; border-radius: 999px; font-size: 11px; padding: 4px 12px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUOTE VIEW (document modal) — sage design language
   ═══════════════════════════════════════════════════════════════════════════ */
html[data-theme] .qdoc-overlay { background: rgba(35,41,32,0.40); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
html[data-theme] .qdoc-modal {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 24px;
  box-shadow: 0 30px 80px -20px rgba(42,51,37,0.5);
}
html[data-theme] .qdoc-head { border-bottom: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] .qdoc-h-title { font-size: 15px; font-weight: 600; color: var(--mid-text); }
html[data-theme] .qdoc-h-sub { font-size: 12px; color: var(--mid-muted); }
html[data-theme] .qdoc-x {
  width: 36px; height: 36px; border: none; border-radius: 50%;
  background: var(--mid-surface-3); color: var(--mid-text-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
html[data-theme] .qdoc-x:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] .qdoc-body { background: transparent; }

/* Doc hero: olive brand, lime-tint quote chip */
html[data-theme] .qd-hero { background: transparent; border-bottom: 1px solid rgba(42,51,37,0.07); }
html[data-theme] .qd-brand { color: var(--mid-primary); font-weight: 600; letter-spacing: -0.02em; }
html[data-theme] .qd-tag {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] .qd-qid {
  background: var(--lime-tint); border: none; border-radius: 999px;
  color: var(--mid-primary); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0; text-transform: none; padding: 6px 14px;
}
html[data-theme] .qd-dates { font-size: 12px; color: var(--mid-muted); }
html[data-theme] .qd-dates strong { color: var(--mid-text); font-weight: 600; }

/* Prepared-for strip: bone band, display name */
html[data-theme] .qd-prepared { background: var(--mid-base); border: none; }
html[data-theme] .qd-prep-lbl {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] .qd-prep-name { font-size: 24px; font-weight: 500; letter-spacing: -0.02em; color: var(--mid-text); }
html[data-theme] .qd-prep-row { font-size: 12.5px; color: var(--mid-text-2); }
html[data-theme] .qd-prep-row .material-symbols-outlined { font-size: 15px; color: var(--mid-text-3); }

/* Deliverable stat tiles: bone wells, lime-tint icon discs */
html[data-theme] .qd-stat { background: var(--mid-base); border: none; border-radius: 16px; }
html[data-theme] .qd-stat-ic {
  background: var(--lime-tint); border: none; border-radius: 12px; color: var(--mid-primary);
}
html[data-theme] .qd-stat-ic .material-symbols-outlined { color: var(--mid-primary); }
html[data-theme] .qd-stat-val { color: var(--mid-text); font-weight: 600; }
html[data-theme] .qd-stat-lbl { color: var(--mid-muted); font-size: 11.5px; }

/* Line-item table: sentence-case sage header, soft rows, olive totals */
html[data-theme] .qd-table thead th {
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500;
  color: var(--mid-muted); background: transparent;
  border-bottom: 1px solid rgba(42,51,37,0.10);
}
html[data-theme] .qd-table tbody td {
  border-bottom: 1px solid rgba(42,51,37,0.07); color: var(--mid-text);
}
html[data-theme] .qd-table .qd-amt { font-weight: 600; color: var(--mid-primary); }
html[data-theme] .qd-table .muted, html[data-theme] .qd-table small { color: var(--mid-muted); }

/* Payment schedule + summary */
html[data-theme] .qd-fin-h {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] .qd-sched-row { font-size: 13px; color: var(--mid-text-2); border-bottom: 1px solid rgba(42,51,37,0.06); }
html[data-theme] .qd-sched-row strong { color: var(--mid-text); font-weight: 600; }
html[data-theme] .qd-sum-row { font-size: 13px; color: var(--mid-text-2); }
html[data-theme] .qd-disc span:last-child { color: #b3422f; }
html[data-theme] .qd-divider { border-top: 1px dashed rgba(42,51,37,0.16); background: none; }
html[data-theme] .qd-grand { color: var(--mid-text); font-weight: 600; }
html[data-theme] .qd-grand span:last-child {
  color: var(--mid-primary); font-size: 24px; font-weight: 600; letter-spacing: -0.02em;
}
html[data-theme] .qd-summary { background: var(--mid-base); border: none; border-radius: 16px; }

/* Terms + studio block */
html[data-theme] .qd-footdoc { border-top: 1px solid rgba(42,51,37,0.07); }
html[data-theme] .qd-terms ul, html[data-theme] .qd-terms li { color: var(--mid-muted); font-size: 12px; }
html[data-theme] .qd-studio { color: var(--mid-text-2); font-size: 12px; }
html[data-theme] .qd-studio strong { color: var(--mid-text); }

/* Footer actions: bone pill + lime CTA */
html[data-theme] .qdoc-foot { border-top: 1px solid rgba(42,51,37,0.07); background: transparent; }
html[data-theme] .qdoc-foot .button.ghost {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important;
  border: none !important; border-radius: 999px; height: 42px; font-size: 13.5px; font-weight: 500;
}
html[data-theme] .qdoc-foot .button.ghost:hover { background: var(--mid-surface-4) !important; color: var(--mid-text) !important; }
html[data-theme] .qdoc-foot .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important;
  border: none !important; border-radius: 999px; height: 42px; font-size: 13.5px; font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(120,140,30,0.55);
}
html[data-theme] .qdoc-foot .button.primary:hover { background: #cfe343 !important; }
html[data-theme] .qdoc-foot .button .material-symbols-outlined { color: inherit; }

/* Basic (no line items) variant */
html[data-theme] .qdoc-chip { background: var(--mid-badge); border: none; border-radius: 999px; color: var(--mid-text-2); font-size: 11.5px; padding: 4px 10px; }
html[data-theme] .qdoc-total-big { color: var(--mid-primary); font-weight: 600; letter-spacing: -0.02em; }
html[data-theme] .qdoc-brand { color: var(--mid-primary); font-weight: 600; }

/* ═══ QUOTE DOC — metric consistency pass (app type ramp + spacing scale) ═══ */

/* Uniform section padding (22px like cards), no decorative glow */
html[data-theme] .qd-hero { padding: 20px 22px; }
html[data-theme] .qd-hero::before { display: none; }
html[data-theme] .qd-prepared { padding: 16px 22px; gap: 4px; }
html[data-theme] .qd-stats { padding: 16px 22px; gap: 12px; }
html[data-theme] .qd-table-wrap { padding: 4px 22px 14px; }
html[data-theme] .qd-fin { padding: 4px 22px 16px; gap: 14px; }
html[data-theme] .qd-footdoc { padding: 16px 22px 20px; }
html[data-theme] .qdoc-head { padding: 16px 22px; }
html[data-theme] .qdoc-foot { padding: 14px 22px; }

/* Type ramp: display brand, sentence-case 12px labels, 13.5 body, 11px metas */
html[data-theme] .qd-brand { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
html[data-theme] .qd-tag { letter-spacing: 0; margin-top: 3px; font-size: 12px; }
html[data-theme] .qd-prep-name { font-size: clamp(20px, 2.4vw, 24px); }
html[data-theme] .qd-table { font-size: 13.5px; }
html[data-theme] .qd-table tbody td { padding: 12px 0; }
html[data-theme] .qd-table thead th { padding: 0 0 8px; }
html[data-theme] .qd-table td small,
html[data-theme] .qd-table .qd-sub { font-size: 12px; color: var(--mid-muted); }
html[data-theme] .qd-sched-row { padding: 9px 0; }
html[data-theme] .qd-sched-row:last-child { border-bottom: none; }
html[data-theme] .qd-summary { padding: 16px; }
html[data-theme] .qd-sum-row { padding: 4px 0; }
html[data-theme] .qd-grand { padding-top: 8px; font-size: 14px; }
html[data-theme] .qd-stat { padding: 12px 14px; gap: 10px; }
html[data-theme] .qd-stat-ic { width: 38px; height: 38px; }
html[data-theme] .qd-stat-ic .material-symbols-outlined { font-size: 18px; }
html[data-theme] .qd-stat-val { font-size: 15px; }
html[data-theme] .qd-terms li { line-height: 1.6; }
html[data-theme] .qdoc-h-title { font-size: 15px; }

/* Mobile: same 16px gutters as the rest of the app */
@media (max-width: 600px) {
  html[data-theme] .qd-hero,
  html[data-theme] .qd-prepared,
  html[data-theme] .qd-stats,
  html[data-theme] .qd-table-wrap,
  html[data-theme] .qd-fin,
  html[data-theme] .qd-footdoc,
  html[data-theme] .qdoc-head,
  html[data-theme] .qdoc-foot { padding-left: 16px; padding-right: 16px; }
  html[data-theme] .qd-brand { font-size: 22px; }
  html[data-theme] .qd-prep-name { font-size: 20px; }
}

/* ═══ Deal-page stage suggestion — sage card (was the blue-tinted box) ═══ */
html[data-theme] #dealDetailContent .deal-suggestion {
  background: var(--sg-surface, #fdfdf8); border: none; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  padding: 18px 22px; margin-bottom: 14px;
}
html[data-theme] #dealDetailContent .deal-suggestion-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted); margin-bottom: 8px;
}
html[data-theme] #dealDetailContent .deal-suggestion-head .material-symbols-outlined {
  font-size: 16px; color: var(--mid-primary);
}
html[data-theme] #dealDetailContent .deal-suggestion-move {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; color: var(--mid-text-2); margin-bottom: 4px;
}
html[data-theme] #dealDetailContent .deal-suggestion-move strong { color: var(--mid-primary); font-weight: 600; }
html[data-theme] #dealDetailContent .deal-suggestion-move .material-symbols-outlined { font-size: 16px; color: var(--mid-text-3); }
html[data-theme] #dealDetailContent .deal-suggestion-reason {
  font-size: 13px; line-height: 1.5; color: var(--mid-muted); margin-bottom: 14px;
}
html[data-theme] #dealDetailContent .deal-suggestion-actions { display: flex; gap: 8px; }
html[data-theme] #dealDetailContent .deal-suggestion-actions .button {
  height: 38px; padding: 0 18px; border: none !important; border-radius: 999px;
  font-size: 13px;
}
html[data-theme] #dealDetailContent .deal-suggestion-actions .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important; font-weight: 600;
}
html[data-theme] #dealDetailContent .deal-suggestion-actions .button.ghost {
  background: var(--mid-surface-3) !important; color: var(--mid-text-2) !important; font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP SIDEBAR — sage redesign (light theme, ≥769px)
   Soft sage panel · pill nav items · dark-olive active with lime filled icon
   (the inverse of the mobile pill: light panel, dark active pill)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  html[data-theme] .app-sidebar {
    background: var(--mid-surface); border: none;
    box-shadow: 0 1px 2px rgba(42,51,37,0.05), 0 24px 48px -24px rgba(42,51,37,0.18);
    padding: 26px 14px 18px;
  }
  /* Brand block: olive wordmark, sentence-case sub */
  html[data-theme] .brand-block { padding: 0 12px 20px; margin-bottom: 10px; border-bottom: 1px solid rgba(42,51,37,0.07); }
  html[data-theme] .brand-block strong {
    font-size: 17px; font-weight: 600; letter-spacing: -0.02em; color: var(--mid-text);
  }
  html[data-theme] .brand-block span {
    font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
    color: var(--mid-muted);
  }
  /* Items: 44px pills */
  html[data-theme] .nav-list { gap: 6px; }
  html[data-theme] .app-sidebar .nav-item {
    min-height: 44px; border: none; border-radius: 999px; padding: 0 16px;
    font-size: 13.5px; font-weight: 500; color: var(--mid-text-2);
    background: transparent; transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined {
    font-size: 20px; color: var(--mid-text-3);
    transition: color var(--dur-1) var(--ease-out);
  }
  html[data-theme] .app-sidebar .nav-item:hover:not(.active) {
    background: var(--mid-base); color: var(--mid-text);
  }
  html[data-theme] .app-sidebar .nav-item:hover:not(.active) .material-symbols-outlined { color: var(--mid-text-2); }
  /* Active: dark-olive pill, bone text, lime FILLED icon */
  html[data-theme] .app-sidebar .nav-item.active {
    background: #2a3325 !important; color: #edeee4 !important;
    box-shadow: 0 8px 18px -8px rgba(42,51,37,0.45);
  }
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined {
    color: var(--lime); font-variation-settings: 'FILL' 1;
  }
  /* Unread/active dots ride the lime */
  html[data-theme] .app-sidebar .nav-item .nav-dot,
  html[data-theme] .app-sidebar .nav-item.active::after { color: var(--lime); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SETUP PAGE — sage treatment (light theme)
   Standard page head · pill tabs · borderless cards · app type ramp
   ═══════════════════════════════════════════════════════════════════════════ */

/* Page head: display title, actions float top-right (Discard bone, Save lime) */
.sg-setup-head { display: none; }
html[data-theme] body.setup-active .sg-setup-head { display: block; }
html[data-theme] body.setup-active .sg-setup-head .sg-display { margin: 2px 0 14px; }
html[data-theme] body.setup-active #page-setup { position: relative; }
html[data-theme] body.setup-active #page-setup .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; background: none; border: none;
}
html[data-theme] body.setup-active #page-setup .page-heading > div:first-of-type { display: none; }
html[data-theme] body.setup-active #page-setup .setup-head-actions { display: flex; gap: 8px; }
html[data-theme] body.setup-active #page-setup .setup-head-actions .button {
  height: 38px; min-height: 38px; padding: 0 16px; border: none !important; border-radius: 999px;
  font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
  background: var(--mid-surface-3); color: var(--mid-text-2); box-shadow: none;
}
html[data-theme] body.setup-active #page-setup .setup-head-actions .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .setup-head-actions .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important; font-weight: 600;
  box-shadow: 0 8px 18px -8px rgba(120,140,30,0.55);
}
html[data-theme] body.setup-active #page-setup .setup-head-actions .button.primary:hover { background: #cfe343 !important; }
html[data-theme] body.setup-active #page-setup .setup-head-actions .button .material-symbols-outlined { font-size: 16px; color: inherit; }

/* Tabs: the channel-pill component */
html[data-theme] body.setup-active #page-setup .setup-tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 0 2px 20px; margin: 0;
  background: transparent; border: none; scrollbar-width: none;
}
html[data-theme] body.setup-active #page-setup .setup-tabs::-webkit-scrollbar { display: none; }
html[data-theme] body.setup-active #page-setup .setup-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  height: 42px; padding: 0 18px; border: none !important; border-radius: 999px;
  background: var(--mid-surface-2, #ffffff); color: var(--mid-text-2);
  font-size: 13px; font-weight: 500; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(42,51,37,0.08);
  text-transform: none; letter-spacing: 0;
}
html[data-theme] body.setup-active #page-setup .setup-tab .material-symbols-outlined { font-size: 17px; color: var(--mid-text-3); }
html[data-theme] body.setup-active #page-setup .setup-tab:hover:not(.is-active) { color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .setup-tab.is-active {
  background: #2a3325 !important; color: #edeee4 !important; box-shadow: none;
}
html[data-theme] body.setup-active #page-setup .setup-tab.is-active .material-symbols-outlined { color: var(--lime); }

/* Section cards: borderless sage cards, sentence-case heads */
html[data-theme] body.setup-active #page-setup .panel.setup-section {
  background: var(--sg-surface, #fdfdf8) !important; border: none !important; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
  padding: 20px 22px;
}
html[data-theme] body.setup-active #page-setup .setup-section .eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted); margin: 0 0 2px;
}
html[data-theme] body.setup-active #page-setup .setup-section h2 {
  font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mid-text);
  margin: 0 0 16px;
}
/* Field ramp: sentence-case 12px labels, 11.5px hints, 14px gaps */
html[data-theme] body.setup-active #page-setup .setup-section label > span {
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] body.setup-active #page-setup .setup-section label > small {
  font-size: 11.5px; color: var(--mid-text-3); line-height: 1.5;
}
html[data-theme] body.setup-active #page-setup .form-grid { gap: 16px; }
html[data-theme] body.setup-active #page-setup .setup-section label { gap: 6px; }
/* Buttons inside sections: standard pills */
html[data-theme] body.setup-active #page-setup .setup-section .button {
  border: none !important; border-radius: 999px; font-size: 13px; font-weight: 500;
  background: var(--mid-surface-3); color: var(--mid-text-2);
}
html[data-theme] body.setup-active #page-setup .setup-section .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .setup-section .button.primary {
  background: var(--lime) !important; color: var(--on-lime) !important; font-weight: 600;
}

/* Mobile rhythm */
@media (max-width: 768px) {
  html[data-theme] body.setup-active .sg-setup-head .sg-display { font-size: 31px; margin: 6px 0 20px; }
  html[data-theme] body.setup-active #page-setup .panel.setup-section { border-radius: 20px; padding: 18px 16px; }
}

/* Setup right rail (webhook/info cards): same sage card language */
html[data-theme] body.setup-active #page-setup .setup-aside .panel,
html[data-theme] body.setup-active #page-setup .setup-layout > aside .panel,
html[data-theme] body.setup-active #page-setup .panel {
  background: var(--sg-surface, #fdfdf8) !important; border: none !important; border-radius: 24px;
  box-shadow: 0 1px 2px rgba(42,51,37,0.04), 0 8px 24px -14px rgba(42,51,37,0.12);
}
html[data-theme] body.setup-active #page-setup .panel .eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em; text-transform: none;
  color: var(--mid-muted);
}
html[data-theme] body.setup-active #page-setup .panel h3 {
  font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--mid-text);
}
html[data-theme] body.setup-active #page-setup .panel .button {
  border: none !important; border-radius: 999px; font-size: 12.5px; font-weight: 500;
  background: var(--mid-surface-3); color: var(--mid-text-2); box-shadow: none;
}
html[data-theme] body.setup-active #page-setup .panel .button:hover { background: var(--mid-surface-4); color: var(--mid-text); }
html[data-theme] body.setup-active #page-setup .panel code,
html[data-theme] body.setup-active #page-setup .panel pre {
  background: var(--mid-base); border: none; border-radius: 12px;
  color: var(--mid-text-2); font-size: 11.5px;
}
html[data-theme] body.setup-active #page-setup .panel .muted,
html[data-theme] body.setup-active #page-setup .panel small { color: var(--mid-muted); }

/* ═══ QUOTE DOC — FINAL spacing reconciliation ═══
   Root cause of the inconsistency: my earlier .qd-fin override added 22px
   padding to the 2-col WRAPPER while its children (.qd-sched/.qd-summary)
   kept their own 24px — doubling the gutter on the finance band (desktop AND
   mobile). Fix: wrapper holds ZERO padding; every section owns exactly one
   gutter — 22px desktop / 16px mobile — and the summary is a plain column
   (no rounded bone box), so the vertical divider runs the full band height. */
html[data-theme] .qd-fin {
  padding: 0; margin-top: 0;
  border-top: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] .qd-sched {
  padding: 20px 22px; background: transparent;
  border-right: 1px solid rgba(42,51,37,0.07);
}
html[data-theme] .qd-summary {
  padding: 20px 22px; background: transparent; border-radius: 0;
}
html[data-theme] .qd-hero      { padding: 20px 22px; }
html[data-theme] .qd-prepared  { padding: 18px 22px; }
html[data-theme] .qd-stats     { padding: 18px 22px; }
html[data-theme] .qd-table-wrap{ padding: 8px 22px 16px; }
html[data-theme] .qd-footdoc   { padding: 20px 22px; }
html[data-theme] .qdoc-head    { padding: 16px 22px; }
html[data-theme] .qdoc-foot    { padding: 16px 22px; }

@media (max-width: 600px) {
  html[data-theme] .qdoc-modal { border-radius: 24px 24px 0 0; }
  html[data-theme] .qd-fin { border-top: 1px solid rgba(42,51,37,0.07); }
  html[data-theme] .qd-sched {
    padding: 18px 16px; border-right: none;
    border-bottom: 1px solid rgba(42,51,37,0.07);
  }
  html[data-theme] .qd-summary { padding: 18px 16px; }
  html[data-theme] .qd-hero,
  html[data-theme] .qd-prepared,
  html[data-theme] .qd-stats,
  html[data-theme] .qd-table-wrap,
  html[data-theme] .qd-footdoc,
  html[data-theme] .qdoc-head,
  html[data-theme] .qdoc-foot { padding-left: 16px; padding-right: 16px; }
}

/* ═══ QUOTE DOC v2 — line-per-resource, two-line date, wider gutters, centered
   mobile footer (these come last, so they win over the sage95 block) ═══ */

/* Wider, uniform gutters: 28px desktop / 20px mobile */
html[data-theme] .qd-hero      { padding: 22px 28px; }
html[data-theme] .qd-prepared  { padding: 18px 28px; }
html[data-theme] .qd-stats     { padding: 18px 28px; }
html[data-theme] .qd-table-wrap{ padding: 8px 28px 18px; }
html[data-theme] .qd-footdoc   { padding: 22px 28px; }
html[data-theme] .qd-sched     { padding: 20px 28px; }
html[data-theme] .qd-summary   { padding: 20px 28px; }
html[data-theme] .qdoc-head    { padding: 18px 28px; }
html[data-theme] .qdoc-foot    { padding: 16px 28px; }

/* Service description — one resource per line */
html[data-theme] .qd-svc-desc { margin-top: 5px; }
html[data-theme] .qd-svc-line { font-size: 12px; line-height: 1.6; color: var(--mid-muted); }
html[data-theme] .qd-svc-name { font-size: 14px; font-weight: 500; color: var(--mid-text); }

/* Date cell — main on line 1, time-of-day muted on line 2; clear gap to amount */
html[data-theme] .qd-table td.qd-date,
html[data-theme] .qd-table th.qd-date {
  text-align: left; padding-left: 16px; padding-right: 20px;
  white-space: nowrap; vertical-align: top;
}
html[data-theme] .qd-date-main { font-size: 13px; color: var(--mid-text); white-space: nowrap; }
html[data-theme] .qd-date-sub { font-size: 11.5px; color: var(--mid-muted); margin-top: 2px; white-space: nowrap; }
/* Amount shrinks to its content so it never collides with the date */
html[data-theme] .qd-table td.qd-amt,
html[data-theme] .qd-table th.qd-amt {
  width: 1%; padding-left: 16px; white-space: nowrap; vertical-align: top;
}
/* Service column takes the slack */
html[data-theme] .qd-table td.qd-svc,
html[data-theme] .qd-table th:first-child { width: auto; }

@media (max-width: 600px) {
  html[data-theme] .qd-hero,
  html[data-theme] .qd-prepared,
  html[data-theme] .qd-stats,
  html[data-theme] .qd-table-wrap,
  html[data-theme] .qd-footdoc,
  html[data-theme] .qd-sched,
  html[data-theme] .qd-summary,
  html[data-theme] .qdoc-head,
  html[data-theme] .qdoc-foot { padding-left: 20px; padding-right: 20px; }
  /* Footer buttons centered, equal width */
  html[data-theme] .qdoc-foot { justify-content: center; gap: 10px; }
  html[data-theme] .qdoc-foot .button { flex: 1 1 0; max-width: 220px; justify-content: center; }
  /* Tighter date gap on small screens */
  html[data-theme] .qd-table td.qd-date,
  html[data-theme] .qd-table th.qd-date { padding-right: 14px; padding-left: 0; }
}

/* ═══ QUOTE MODAL — bottom-drawer (mobile): grip + slide-up/down ═══ */
.qdoc-grip { display: none; width: 40px; height: 4px; border-radius: 999px;
  background: var(--mid-line); margin: 8px auto 2px; flex: 0 0 auto; }
html[data-theme] .qdoc-grip { background: rgba(42,51,37,0.18); }
@keyframes uiSheetUp   { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes uiSheetDown { from { transform: translateY(0); }    to { transform: translateY(100%); } }
@media (max-width: 600px) {
  .qdoc-overlay { align-items: flex-end; }
  .qdoc-overlay .qdoc-modal { animation: uiSheetUp 0.34s cubic-bezier(0.22,1,0.36,1); }
  .qdoc-overlay .qdoc-modal.is-closing { animation: uiSheetDown 0.24s cubic-bezier(0.4,0,1,1) forwards; }
  .qdoc-grip { display: block; }
}

/* Mobile bottom nav: show Contacts directly and drop the ••• "More" button.
   Row stays 5-up: Dashboard · Leads · Contacts · Chat · Quote. */
@media (max-width: 768px) {
  .nav-item[data-page="contacts"] { display: flex !important; }
  .nav-more-btn { display: none !important; }
}

/* ═══ MOBILE NAV — draggable lime "glider" selector ═══ */
.nav-glider { display: none; }
@media (max-width: 768px) {
  html[data-theme] .nav-glider {
    display: block; position: absolute; top: 50%; left: 0;
    width: 46px; height: 46px; border-radius: 999px; background: var(--lime);
    transform: translate(-50%, -50%); transform-origin: center; z-index: 0; pointer-events: none;
    transition: left 0.24s cubic-bezier(0.34,1.2,0.5,1),
                transform 0.18s var(--ease-out),
                width 0.2s var(--ease-out), height 0.2s var(--ease-out);
  }
  html[data-theme] .app-sidebar.nav-shrink .nav-glider { width: 38px; height: 38px; }
  /* icons ride above the glider; active no longer paints its own lime disc */
  html[data-theme] .app-sidebar .nav-item .material-symbols-outlined { position: relative; z-index: 1; }
  html[data-theme] .app-sidebar .nav-item.active .material-symbols-outlined {
    background: transparent; color: var(--mid-text-3); font-variation-settings: 'FILL' 0;
  }
  /* whichever item the glider is over (active at rest, or the drag target) = dark filled */
  html[data-theme] .app-sidebar .nav-item.nav-cur .material-symbols-outlined {
    color: #2a3325; font-variation-settings: 'FILL' 1;
  }
}

/* Glider lives inside the nav-list and is positioned by PERCENTAGE, so it
   tracks the pill's shrink/grow for free (no stale pixel coordinates). */
@media (max-width: 768px) {
  .nav-list { position: relative; }
}

/* Glider drag perf: GPU-isolate transform/width, and let JS own touches on the
   nav so the browser doesn't intercept the horizontal drag. */
@media (max-width: 768px) {
  html[data-theme] .nav-glider { will-change: transform, width; }
  html[data-theme] .app-sidebar { touch-action: none; }
}

}

/* ═══ Card reveal-on-scroll (Leads / Contacts / Chat) ═══
   Cards start hidden and slide up (large travel) as they enter the viewport —
   on load and while scrolling. IntersectionObserver-driven (.rv → .rv-in). */
:is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv { opacity: 0; }
:is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv-in {
  animation: cardReveal 0.52s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--rvd, 0ms);
}
@keyframes cardReveal { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  :is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv { opacity: 1; }
  :is(.kanban-card, .lead-row, .ct-row, .inbox-row).rv-in { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   SETUP PAGE — borderless bone wells (match the modals / quote / login).
   The app-wide "white-well + grey outline" design-system block (~styles.css:8079,
   html[data-theme]-prefixed, !important) forces every setup input to white +
   #c0c6d6 border. Appended LAST here with the SAME id-level specificity → wins on
   source order, flipping all setup fields (every tab) to bone + no border.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme] body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]),
html[data-theme] body.setup-active #page-setup select,
html[data-theme] body.setup-active #page-setup textarea,
html[data-theme] body.setup-active #page-setup .qc-svc input,
html[data-theme] body.setup-active #page-setup .qc-svc select,
html[data-theme] body.setup-active #page-setup .team-role-select {
  background: var(--mid-base) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--mid-text) !important;
}
html[data-theme] body.setup-active #page-setup input:not([type=checkbox]):not([type=radio]):focus,
html[data-theme] body.setup-active #page-setup select:focus,
html[data-theme] body.setup-active #page-setup textarea:focus {
  border-color: transparent !important;
  box-shadow: 0 0 0 3px var(--lime-tint, rgba(217,236,79,0.45)) !important;
}
/* Holdouts: the credential fields live in #setupForm and #systemPrompt has a
   2-ID white rule (styles.css:7534). Match those with 2 IDs to win outright. */
html[data-theme] #page-setup #setupForm input:not([type=checkbox]):not([type=radio]),
html[data-theme] #page-setup #setupForm select,
html[data-theme] #page-setup #setupForm textarea,
html[data-theme] #page-setup #systemPrompt {
  background: var(--mid-base) !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  color: var(--mid-text) !important;
}

/* Team table — the current user can't change their OWN role or deactivate
   themselves, so those controls are `disabled` and were rendering at opacity 0.5
   (greyed-out form boxes that look out of place). Render the disabled ones as
   clean static labels instead. Enabled controls (other users) keep the bone
   dropdown / sage pill. */
html[data-theme] body.setup-active #page-setup .team-table .team-role-select:disabled {
  opacity: 1 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--mid-text-2) !important;
  -webkit-appearance: none !important; appearance: none !important;
  background-image: none !important;       /* drop the dropdown chevron */
  padding-left: 2px !important; cursor: default;
}
html[data-theme] body.setup-active #page-setup .team-table .button:disabled {
  opacity: 1 !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--mid-muted) !important;
  cursor: default;
}
/* Mask Chrome autofill blue on setup inputs too. */
html[data-theme] body.setup-active #page-setup input:-webkit-autofill,
html[data-theme] body.setup-active #page-setup input:-webkit-autofill:hover,
html[data-theme] body.setup-active #page-setup input:-webkit-autofill:focus {
  -webkit-box-shadow: inset 0 0 0 1000px var(--mid-base) !important;
  -webkit-text-fill-color: var(--mid-text) !important;
}

/* ── WhatsApp softphone incoming-call card ──────────────────────────────────── */
#softphone {
  position: fixed; right: 20px; bottom: 20px; z-index: 99999; width: 300px;
  display: none;
  background: var(--mid-surface-3, #252b2e); color: var(--mid-text, #dee3e8);
  border: 1px solid var(--mid-line, #3e484f); border-radius: 16px;
  box-shadow: 0 16px 48px -12px rgba(0,0,0,.6); padding: 18px; font-family: inherit;
}
#softphone.is-open { display: block; animation: sp-slide-up 240ms cubic-bezier(.16,1,.3,1); }
.sp-avatar {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  background: var(--mid-primary, #38bdf8); color: #00354a;
  display: flex; align-items: center; justify-content: center;
}
/* Pulsing ring while the call is ringing — draws the eye to a time-critical event. */
#softphone.is-ringing .sp-avatar { animation: sp-pulse 1.4s ease-out infinite; }
@keyframes sp-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56,189,248,.55); }
  70%  { box-shadow: 0 0 0 14px rgba(56,189,248,0); }
  100% { box-shadow: 0 0 0 0 rgba(56,189,248,0); }
}
/* Mobile: bottom-center, full-width-ish so it can't hide behind a FAB. */
@media (max-width: 600px) {
  #softphone { left: 12px; right: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #softphone.is-open { animation: none; }
  #softphone.is-ringing .sp-avatar { animation: none; box-shadow: 0 0 0 3px rgba(56,189,248,.5); }
}

/* Light theme: --mid-danger is a darker brick (#b3422f), so the dark-tuned
   #3a0c08 label inline-styled on the Decline/Hang-up buttons drops to ~2:1.
   Force white text in light only (inline style needs !important to lose). */
html[data-theme] #sp-reject,
html[data-theme] #sp-hangup { color: #ffffff !important; }

/* Quote-builder field validation error ring. */
.field-error {
  outline: 2px solid var(--mid-danger, #ff7a70) !important;
  outline-offset: 1px;
  border-color: var(--mid-danger, #ff7a70) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   PROMOTE SAGE DASHBOARD TO DARK  (dual-tree merge, step 1 — dashboard)
   Goal: dark = the SAME Sage layout the user approved in light, just recolored.
   The Sage tree (.sage-dash / .sg-*) is token-driven (var(--mid-*)), so showing
   it under dark tokens recolors it for free. The old .nx-* dashboard stays in the
   DOM but hidden (dormant / reversible — delete this block to revert). Mirrors the
   light structural rules at styles.css ~8433-8438, 8722, 10047, 8769.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] body.dash-active .sage-dash { display: block; }
html[data-theme="dark"] body.dash-active #page-dashboard :is(.nx-kpis, .nx-chart-card, .nx-split) { display: none; }
html[data-theme="dark"] body.dash-active #page-dashboard .page-heading > div:first-of-type { display: none; }
html[data-theme="dark"] body.dash-active #page-dashboard { position: relative; }
html[data-theme="dark"] body.dash-active #page-dashboard .page-heading {
  position: absolute; top: 6px; right: 0; margin: 0; padding: 0; z-index: 6;
  display: flex; justify-content: flex-end; width: auto; grid-template-columns: none; gap: 0;
}
@media (max-width: 768px) {
  html[data-theme="dark"] body.dash-active #page-dashboard .page-heading { top: 2px; }
}
/* Reference typeface for the dark Sage surface so it reads like light recolored. */
html[data-theme="dark"] body.dash-active .sage-dash,
html[data-theme="dark"] body.dash-active #page-dashboard .page-heading,
html[data-theme="dark"] body.dash-active .sage-dash :is(input, select, textarea, button):not(.material-symbols-outlined) {
  font-family: "Schibsted Grotesk", "Inter", sans-serif;
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-SAGE PALETTE (dashboard scope, step 1)
   The Sage layout is now shown in dark, but it was inheriting the old midnight
   tokens (#0f1418 base / cyan accent). Redefine the --mid-* set on the dashboard
   container so every token-driven .sg-* card recolors at once: #2a2a2a base,
   cards stepped up, LIME (#d9ec4f) as the single accent (text + fill — lime on
   #2a2a2a is ~13:1, so unlike light it can be text here too). Scoped to the
   dashboard for now; we widen it to the whole app once it's approved.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] :is(#page-dashboard, #page-leads) {
  --mid-base: #2a2a2a;
  --sg-surface: #333333;       /* Sage card/pill white → dark */        /* page                       */
  --mid-surface: #333333;     /* cards / sidecards          */
  --mid-surface-2: #3c3c3c;   /* raised / heads             */
  --mid-surface-3: #444444;   /* hover / pipeline dots      */
  --mid-surface-4: #4f4f4f;   /* deeper hover / tracks      */
  --mid-deep: #2f2f2f;        /* list enclosure             */
  --mid-badge: #3f3f3f;       /* badge / avatar bg          */
  --mid-lowest: #242424;      /* input wells (below base)   */
  --mid-line: #4a4a4a;        /* outlines / dividers        */
  --mid-text: #ededed;        /* primary text               */
  --mid-text-2: #bcbcbc;      /* secondary text             */
  --mid-text-3: #8f8f8f;      /* faint text / icons         */
  --mid-muted: #9b9b9b;       /* muted / hints              */
  --mid-primary: #d9ec4f;     /* lime accent — links/values */
  --mid-accent: #d9ec4f;      /* lime — solid fills/buttons */
  --mid-on-accent: #2a3325;   /* dark ink on lime           */
  --mid-tertiary: #ffc176;    /* warm accent                */
  --mid-danger: #ff7a70;      /* readable red on dark       */
  --mid-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
  --lime: #d9ec4f;
  --on-lime: #2a3325;
  --lime-tint: rgba(217,236,79,0.14);
}

/* Dark-Sage: the Sage cards hardcode near-white backgrounds (var(--sg-surface, #fdfdf8), #d6d9ca)
   and white-tinted textures that the token palette can't reach. Re-point them at
   the dark surfaces in dark only (light keeps its exact hardcoded values). */
html[data-theme="dark"] #page-dashboard .sg-card { background: var(--mid-surface); }
html[data-theme="dark"] #page-dashboard .sg-pri-grey,
html[data-theme="dark"] #page-dashboard .sg-listcard-grey { background: var(--mid-surface-2); }
html[data-theme="dark"] #page-dashboard .sg-listcard-grey .sg-row:hover { background: rgba(255,255,255,0.06); }
html[data-theme="dark"] #page-dashboard .sg-tile-dots {
  background-color: var(--mid-surface-3);
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.2px, transparent 1.4px);
}
html[data-theme="dark"] #page-dashboard .sg-tile-stripe {
  background: repeating-linear-gradient(90deg, rgba(217,236,79,0.5) 0 3px, var(--mid-surface-3) 3px 7px);
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK-SAGE — LEADS (kanban + list), mirrors the light rules at ~8335-8388,
   9637-9733, 10093-10105. Palette tokens already extended to #page-leads above.
   ════════════════════════════════════════════════════════════════════════════ */
/* Promote the Sage leads header (old header hidden, same as light). */
html[data-theme="dark"] body.leads-active .sg-leads-head { display: block; }
html[data-theme="dark"] body.leads-active .sg-leads-head .sg-display { margin: 2px 0 14px; }
html[data-theme="dark"] body.leads-active #page-leads .page-heading { display: block; margin: 0; padding: 0; background: none; border: none; }
html[data-theme="dark"] body.leads-active #page-leads .page-heading > div:first-of-type { display: none; }
html[data-theme="dark"] body.leads-active #page-leads .sg-chips { margin-bottom: 18px; }

/* Kanban columns — flat dark panels, no glass. */
html[data-theme="dark"] body.leads-active #page-leads .kanban-col {
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 18px; box-shadow: none;
}
/* (Header pill shape now comes from the de-themed structural rule at ~8343 —
   identical in both themes. No dark-specific override needed.) */
html[data-theme="dark"] body.leads-active #page-leads .kanban-col-title { color: var(--mid-muted); letter-spacing: 0.07em; }
html[data-theme="dark"] body.leads-active #page-leads .kanban-col-meta { color: var(--mid-muted); }
/* Ghost count: match light's exact geometry (font-size 40px, top -2px from rules
   ~8355/9704) so only the COLOUR differs between themes. */
html[data-theme="dark"] body.leads-active #page-leads .kb-ghost {
  display: block; position: absolute; top: -2px; right: 14px; font-size: 40px; font-weight: 600;
  line-height: 1; letter-spacing: -0.02em; color: rgba(255,255,255,0.05); pointer-events: none; user-select: none;
}
/* Hot lead column — lime "act now" tint. */
html[data-theme="dark"] body.leads-active #page-leads .kanban-col[data-stage="Hot lead"] { background: rgba(217,236,79,0.10); }
html[data-theme="dark"] body.leads-active #page-leads .kanban-col[data-stage="Hot lead"] .kanban-col-title { color: var(--lime); }
html[data-theme="dark"] body.leads-active #page-leads .kanban-col[data-stage="Hot lead"] .kb-ghost { color: rgba(217,236,79,0.22); }

/* Cards — dark surface, borderless, soft shadow. */
html[data-theme="dark"] body.leads-active #page-leads .kanban-card {
  background: var(--sg-surface); backdrop-filter: none; -webkit-backdrop-filter: none;
  border: none; border-radius: 16px; box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 6px 16px -8px rgba(0,0,0,0.4);
}
html[data-theme="dark"] body.leads-active #page-leads .kanban-card:hover {
  border: none; transform: translateY(-2px); box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 14px 28px -10px rgba(0,0,0,0.55);
}
html[data-theme="dark"] #page-leads .kanban-card-amount { color: var(--mid-primary); }
/* Selection checkbox — was white-on-white. */
html[data-theme="dark"] #page-leads .kanban-card-check { background: var(--mid-lowest); border-color: var(--mid-line); color: var(--mid-on-accent); }
html[data-theme="dark"] #page-leads .kanban-card.is-checked .kanban-card-check { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
/* Inline edit fields on a card. */
html[data-theme="dark"] #page-leads .detail-amount-row input,
html[data-theme="dark"] #page-leads .edit-textarea { background: rgba(255,255,255,0.06); }

/* Origin pills (live / quote / crm). */
html[data-theme="dark"] body.leads-active #page-leads .op-pill-live { background: rgba(217,236,79,0.14); color: var(--lime); }
html[data-theme="dark"] body.leads-active #page-leads .op-pill-live .live-dot { background: var(--lime); }
html[data-theme="dark"] body.leads-active #page-leads .op-pill-quote { background: rgba(255,193,118,0.16); color: var(--mid-tertiary); }
html[data-theme="dark"] body.leads-active #page-leads .op-pill-crm { background: var(--mid-surface-3); color: var(--mid-text-2); }

/* List view stage pills — keep the dark base for bad/hot; add good. */
html[data-theme="dark"] body.leads-active .ll-stage.good { background: rgba(122,141,35,0.20); color: #b6d36a; }

/* Dark leads list: drop the solid enclosure box (bg/border/radius/shadow) so the
   rows sit flat on the page; the row dividers + thead strip carry the structure. */
html[data-theme="dark"] body.leads-active #page-leads .leads-list {
  background: transparent; border: none; border-radius: 0; box-shadow: none;
}

/* Dark leads list: the header's solid 10px "--mid-deep strip" spacer (a constant-gap
   trick for the enclosure box) reads as a phantom card now the box is transparent.
   Keep only the soft drop shadow. */
html[data-theme="dark"] body.leads-active #page-leads .lead-rowhead {
  box-shadow: 0 4px 10px -6px rgba(0,0,0,0.45);
}

/* ════════════════════════════════════════════════════════════════════════════
   DARK THEME = the approved light (Sage) UI, recoloured. The entire light rule
   set is now un-gated ([data-theme] matches both), so dark renders the SAME
   structure; this block is the ONLY thing that differs — the colour tokens.
   ════════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  color-scheme: dark;
  --mid-base: #2a2a2a;        /* page                         */
  --mid-surface: #333333;     /* cards / sidebar              */
  --mid-surface-2: #3c3c3c;   /* raised / topbar / modals     */
  --mid-surface-3: #444444;   /* hover / table head / dots    */
  --mid-surface-4: #4f4f4f;   /* deeper hover / tracks        */
  --mid-deep: #2f2f2f;        /* list enclosure               */
  --mid-badge: #3f3f3f;       /* badge / avatar bg            */
  --mid-lowest: #242424;      /* input wells                  */
  --mid-line: #4a4a4a;        /* outlines / dividers          */
  --mid-text: #ededed;        /* primary text                 */
  --mid-text-2: #bcbcbc;      /* secondary text               */
  --mid-text-3: #8f8f8f;      /* faint text / icons           */
  --mid-muted: #9b9b9b;       /* muted / hints                */
  --mid-primary: #d9ec4f;     /* accent — links / values      */
  --mid-accent: #d9ec4f;      /* accent — fills / buttons      */
  --mid-on-accent: #2a3325;   /* ink on lime                  */
  --mid-tertiary: #ffc176;    /* warm accent                  */
  --mid-danger: #ff7a70;      /* readable red on dark         */
  --mid-shadow: 0 14px 34px -14px rgba(0,0,0,0.5);
  --sg-surface: #333333;      /* Sage card/pill white → dark  */
  --lime: #d9ec4f;
  --on-lime: #2a3325;
  --lime-tint: rgba(217,236,79,0.14);
  /* Old light-build aliases that some Sage rules still read — map to dark too. */
  --surface: #333333; --panel: #2f2f2f; --ink: #ededed; --ink-2: #bcbcbc;
  --muted: #9b9b9b; --bg: #2a2a2a; --line: #4a4a4a; --primary: #d9ec4f;
}

/* Dark chat: the "sent by us" bubble resolves to a faint lime-tint with DARK
   ink (built for a white page) → unreadable on dark. Give dark a readable bubble:
   subtle lime-tinted dark surface + light text. */
html[data-theme="dark"] body.chat-active .msg.out .msg-bubble,
html[data-theme="dark"] #chatDetailContent .msg.out .msg-bubble {
  background: rgba(217,236,79,0.16) !important;
  color: var(--mid-text) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE — chat thread header: the contact NAME must stay readable. Secondary
   actions (Lead / Contact / Request-call) collapse to icon-only buttons; the
   primary "Take over" keeps its label; the avatar is dropped (the back button
   already gives context). Frees the row so the full name shows.
   ════════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .inbox-thread-head { gap: 8px; padding: 12px 12px; }
  .inbox-thread-head #inboxThreadAvatar { display: none; }
  .inbox-thread-head .inbox-thread-who { flex: 1 1 auto; min-width: 0; }
  .inbox-thread-head .inbox-thread-who strong { font-size: 16px; }
  .inbox-thread-head .inbox-thread-actions { gap: 6px; flex: 0 0 auto; }
  /* icon-only: hide the text node via font-size:0, restore the icon */
  .inbox-thread-head .inbox-thread-actions .button.ghost.small {
    font-size: 0; width: 38px; min-width: 38px; height: 38px; padding: 0;
    justify-content: center; border-radius: 10px;
  }
  .inbox-thread-head .inbox-thread-actions .button.ghost.small .inline-icon { font-size: 20px; margin: 0; }
  .inbox-thread-head #inboxTakeoverBtn { padding: 8px 12px; flex: 0 0 auto; white-space: nowrap; font-size: 13px; }
}

/* ════ Smart call button — icon-only, colour-coded by permission state ════
   red = no request / declined · orange = request pending · green = consent given */
button[data-call-status] {
  width: 38px; min-width: 38px; height: 38px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 10px;
}
button[data-call-status] .material-symbols-outlined { font-size: 21px; }
.call-state-none .material-symbols-outlined,
.call-state-rejected .material-symbols-outlined { color: var(--mid-danger); }   /* red */
.call-state-pending .material-symbols-outlined  { color: var(--mid-tertiary); } /* orange */
.call-state-granted .material-symbols-outlined  { color: #1f7a37; }             /* green (light) */
html[data-theme="dark"] .call-state-granted .material-symbols-outlined { color: #5dd07f; }

/* Chat thread header: secondary actions (Lead / Contact) are icons, not text,
   at all widths; "Take over" keeps its label. */
.inbox-thread-head .inbox-thread-actions .button.ghost.small {
  font-size: 0; width: 38px; min-width: 38px; height: 38px; padding: 0;
  justify-content: center; border-radius: 10px;
}
.inbox-thread-head .inbox-thread-actions .button.ghost.small .inline-icon { font-size: 20px; margin: 0; }

/* Circular icon buttons in the chat thread header (call + take over + lead/contact). */
button[data-call-status] { border-radius: 50%; }
.inbox-thread-head .inbox-thread-actions .button.ghost.small { border-radius: 50%; }
/* Take over → circular lime icon button (icon conveys state: support_agent ⇄ smart_toy). */
#inboxTakeoverBtn.inbox-takeover-icon {
  width: 40px; min-width: 40px; height: 40px; padding: 0; font-size: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--lime); border: none; box-shadow: none;
}
#inboxTakeoverBtn.inbox-takeover-icon .material-symbols-outlined { font-size: 22px; color: var(--on-lime); }

/* Web (desktop): drop the Lead / Contact jump buttons from the chat header —
   not needed there. (Still available on mobile where the row is the only nav.) */
@media (min-width: 769px) {
  .inbox-thread-head #inboxViewLeadBtn,
  .inbox-thread-head #inboxViewContactBtn { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE UX — P0 foundation (DESIGN.md §6): one easing token, touch press
   feedback, 44px tap targets. (Animate transform/opacity only.)
   ════════════════════════════════════════════════════════════════════════════ */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

@media (hover: none) and (pointer: coarse) {
  /* Tactile press feedback — touch devices only, so desktop hover is untouched. */
  button:not(:disabled):active,
  .button:not(:disabled):active,
  [role="button"]:active,
  .kanban-card:active, .lead-row:active, .contact-card:active,
  .inbox-row:active, .sg-chip:active, .sg-listcard:active, .nav-link:active, .nav-item:active {
    transform: scale(0.97);
    transition: transform 90ms var(--ease-out);
  }
  /* Minimum 44px hit area on icon-ish controls (visual can stay smaller via centering). */
  button[data-call-status],
  #inboxTakeoverBtn.inbox-takeover-icon,
  .inbox-back, .inbox-thread-actions .button.ghost.small,
  .leads-view-btn, .ct-pager-btn {
    min-width: 44px; min-height: 44px;
  }
}

/* P1 typography: align digits in money/counts (tabular figures). */
.kanban-card-amount, .lr-val, .sg-chip b, .sg-tile b, .nx-kpi-value,
.ll-val, .dash-kpi-value, .sg-stat-num { font-variant-numeric: tabular-nums; }

/* P1 motion — softphone ring urgency: the card breathes and Accept glows while ringing. */
@keyframes sp-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes sp-accept-glow { 0% { box-shadow: 0 0 0 0 rgba(46,204,113,.55); } 70% { box-shadow: 0 0 0 9px rgba(46,204,113,0); } 100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); } }
#softphone.is-open.is-ringing { animation: sp-slide-up 240ms cubic-bezier(.16,1,.3,1), sp-breathe 1.9s ease-in-out 260ms infinite; }
#softphone.is-ringing #sp-accept { animation: sp-accept-glow 1.5s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #softphone.is-open.is-ringing { animation: none; }
  #softphone.is-ringing #sp-accept { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Detail panel (deal / contact) — UNIFORM field sizing. Overrides the scattered
   40px / unset / read-only rules so every input + select is the same height, and
   textareas share one consistent box. (id selector wins over the .editing rules.)
   ════════════════════════════════════════════════════════════════════════════ */
#dealDetailContent .dl-field > input,
#dealDetailContent .dl-field > select,
#contactDetailContent .dl-field > input,
#contactDetailContent .dl-field > select {
  height: 44px; min-height: 44px; box-sizing: border-box;
  padding: 0 12px; border-radius: 10px; line-height: normal;
}
#dealDetailContent .dl-field > textarea,
#contactDetailContent .dl-field > textarea {
  min-height: 88px; box-sizing: border-box; padding: 10px 12px; border-radius: 10px; line-height: 1.45;
}
@media (max-width: 768px) {
  #dealDetailContent .dl-field > :is(input, select, textarea),
  #contactDetailContent .dl-field > :is(input, select, textarea) { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════════════
   Read-only info rows (contact Overview): a fixed LABEL column + a LEFT-aligned
   value, hairline divider, NO box. Overrides the form-field audit's !important
   input background (~8096). Edit mode keeps the boxed inputs.
   ════════════════════════════════════════════════════════════════════════════ */
.dlp-overview-card:not(.editing) .dl-field {
  flex-direction: row; align-items: baseline; justify-content: flex-start;
  gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--mid-line);
}
.dlp-overview-card:not(.editing) .dl-field:last-of-type { border-bottom: none; }
.dlp-overview-card:not(.editing) .dl-field > label {
  flex: 0 0 38%; max-width: 38%; color: var(--mid-muted); font-size: 13px;
  text-transform: none; letter-spacing: 0;
}
.dlp-overview-card:not(.editing) .dl-field > input,
.dlp-overview-card:not(.editing) .dl-field > select,
.dlp-overview-card:not(.editing) .dl-field > .dl-field-static {
  flex: 1 1 auto; width: auto !important; height: auto !important; min-height: 0 !important;
  padding: 0 !important; text-align: left !important;
  background: transparent !important; border: none !important; box-shadow: none !important;
  color: var(--mid-text) !important; font-size: 14px;
}

/* Detail-panel "request call" (add_call) button → neutral mono circle, identical to
   the phone icon, so the action row reads as one system (kills the inherited blue).
   Call-state red/orange/green colours stay in the chat-thread header where you act on them. */
html[data-theme] :is(#dealDetailContent, #contactDetailContent) :is(#dealCallBtn, #contactCallBtn) {
  background: var(--sg-surface, #fdfdf8) !important; box-shadow: none !important;
}
html[data-theme] :is(#dealDetailContent, #contactDetailContent) :is(#dealCallBtn, #contactCallBtn) .material-symbols-outlined {
  color: var(--mid-text-2) !important;
}

/* Dark: the neutral call buttons (GSM phone + request-call) were a mid-grey icon on a
   near-bg circle → no separation. Lift the circle (surface-3) + brighten the icon. */
html[data-theme="dark"] :is(#dealDetailContent, #contactDetailContent) :is(.dlp-call, #dealCallBtn, #contactCallBtn) {
  background: var(--mid-surface-3) !important;
}
html[data-theme="dark"] :is(#dealDetailContent, #contactDetailContent) :is(.dlp-call, #dealCallBtn, #contactCallBtn) .material-symbols-outlined {
  color: var(--mid-text) !important;
}

/* Restore the WhatsApp call-permission STATUS colour on the detail-panel call button
   (red none/declined · orange pending · green granted). More specific than the mono
   overrides above, so only THIS button colours — the plain GSM phone stays neutral.
   Sits on the lifted --mid-surface-3 circle, so it still separates from the bg. */
html[data-theme] :is(#dealDetailContent, #contactDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-none .material-symbols-outlined,
html[data-theme] :is(#dealDetailContent, #contactDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-rejected .material-symbols-outlined { color: var(--mid-danger) !important; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-pending .material-symbols-outlined { color: var(--mid-tertiary) !important; }
html[data-theme] :is(#dealDetailContent, #contactDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-granted .material-symbols-outlined { color: #1f7a37 !important; }
html[data-theme="dark"] :is(#dealDetailContent, #contactDetailContent) :is(#dealCallBtn, #contactCallBtn).call-state-granted .material-symbols-outlined { color: #5dd07f !important; }

/* Chat thread header: force the WhatsApp-call + take-over buttons to true circles
   (equal width/height) — the .button padding was making the call button oval. */
.inbox-thread-head .inbox-thread-actions button[data-call-status],
.inbox-thread-head .inbox-thread-actions #inboxTakeoverBtn.inbox-takeover-icon {
  width: 44px !important; min-width: 44px !important; height: 44px !important; min-height: 44px !important;
  padding: 0 !important; border-radius: 50% !important; flex: 0 0 auto; aspect-ratio: 1 / 1;
}