/* =============================================================================
   SALES STUDIO — design system v1 · INSTITUTIONAL
   -----------------------------------------------------------------------------
   Reference DNA: credit-rating-agency / market-terminal grade (S&P Capital IQ,
   Bloomberg, Gartner internal). Deliberately NOT the default web-app look.

   Hard rules baked in here — do not reintroduce:
     · NO gradients, NO backdrop blur, NO glow/neon, NO decorative shadows
     · NO soft rounding — corners are 2/3/4px, full stop
     · NO capsule/pill chips, NO initial-square avatars, NO tinted panels
     · Colour is SEMANTIC ONLY (status), never decoration
     · Fonts: IBM Plex Sans (UI) · IBM Plex Mono (every figure/label/ID)
              Source Serif 4 (page + entity titles). Inter is banned.

   Loaded LAST on every page so it owns the cascade. It redefines the legacy
   token names each page already consumes, so existing rules inherit the new
   language automatically, then overrides the component classes on top.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens -- */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* chrome — institutional ink (stays dark in BOTH themes: that's the look) */
  --nav:            #0B0F14;
  --nav-2:          #151C24;
  --nav-line:       #1E2833;
  --nav-active:     #182230;
  --nav-tx:         #9AA8B4;
  --nav-dim:        #5C6B78;

  /* surfaces — cool, print-like */
  --ink:            #10151B;
  --t1:             #1D242C;
  --body-tx:        #3D4854;
  --muted:          #5F6B76;
  --faint:          #8B96A0;
  --line:           #D7DCE2;
  --line-2:         #E8EBEF;
  --line-3:         #F0F2F5;
  --canvas:         #EFF1F4;
  --surface:        #FFFFFF;
  --surface-2:      #F7F8FA;
  --surface-3:      #FCFCFD;
  --field-line:     #B9C2CB;

  /* interactive — deep institutional blue, never neon */
  --brand:          #15467F;
  --brand-h:        #103A6B;
  --brand-ink:      #123C70;
  --brand-bright:   #4C8FD6;   /* on-dark only */
  --brand-soft:     #EAF0F7;

  /* semantic status — the ONLY colour in the UI */
  --pos:            #0E7A45;  --pos-bg:  #E9F2EC;
  --warn:           #B26A00;  --warn-bg: #FAF3E3;
  --bad:            #B42318;  --bad-bg:  #FBEBE9;
  --info:           #15467F;  --info-bg: #EAF0F7;
  --neutral:        #5F6B76;  --neutral-bg: #EDF0F3;

  /* geometry — sharp */
  --r-lg: 4px;  --r: 3px;  --r-sm: 2px;
  --sh: none;
  --sh-pop: 0 10px 28px -10px rgba(11,15,20,.22);

  /* motion — crisp, never bouncy */
  --ease: cubic-bezier(.2,.6,.35,1);
  --t-fast: 90ms;  --t-mid: 140ms;

  --font:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  /* ---- legacy token bridge: existing page rules inherit the new language --- */
  --bg-primary:     var(--canvas);
  --bg-secondary:   var(--surface);
  --bg-darker:      var(--surface-2);
  --bg-glass:       var(--surface);
  --bg-glass-strong:var(--surface);
  --bg-card:        var(--surface);
  --text-primary:   var(--ink);
  --text-secondary: var(--body-tx);
  --text-tertiary:  var(--muted);
  --border:         var(--line);
  --border-strong:  var(--field-line);
  --border-glow:    var(--line);
  --accent:         var(--brand);
  --accent-2:       var(--brand-h);
  --accent-hover:   var(--brand-h);
  --accent-light:   var(--brand-soft);
  --accent-glow:    transparent;
  --shadow-glow:    none;
  --shadow-lg:      var(--sh-pop);
  --green:          var(--pos);
  --red:            var(--bad);
  --orange:         var(--warn);
  --purple:         var(--brand);
  --blur:           none;
  --transition:     var(--t-fast) var(--ease);
  --radius:         var(--r-lg);
  --radius-sm:      var(--r);
  --radius-md:      var(--r-lg);
  --radius-lg:      var(--r-lg);
  --radius-xl:      var(--r-lg);
  --radius-full:    var(--r-lg);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:            #EEF2F6;
  --t1:             #DCE3EA;
  --body-tx:        #B4C0CB;
  --muted:          #8593A0;
  --faint:          #6B7885;
  --line:           #232D38;
  --line-2:         #1C242E;
  --line-3:         #161D25;
  --canvas:         #0B0F14;
  --surface:        #11171E;
  --surface-2:      #161D25;
  --surface-3:      #131A21;
  --field-line:     #2C3946;

  /* Dark-theme semantics are DESATURATED on purpose. Bright accents on a dark
     ground read as "neon dashboard"; an institutional terminal keeps colour
     low-chroma and lets typography carry the hierarchy. */
  --brand:          #5B82AD;
  --brand-h:        #6E93BC;
  --brand-ink:      #8FADCB;
  --brand-soft:     #16202B;

  --pos: #4E8F6D;  --pos-bg:  #14211B;
  --warn:#A8813F;  --warn-bg: #221C10;
  --bad: #B5655C;  --bad-bg:  #231715;
  --info:#5B82AD;  --info-bg: #141C25;
  --neutral:#7E8B97; --neutral-bg:#1A222B;

  --sh-pop: 0 10px 28px -10px rgba(0,0,0,.6);
}

/* ------------------------------------------------------------------ base -- */
* { box-sizing: border-box; }

html, body {
  background: var(--canvas);
}

body {
  font-family: var(--font) !important;
  color: var(--body-tx);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.25;
  font-weight: 700;
}

/* Page / entity titles carry the serif — the single strongest signal that this
   is a considered product and not a template. */
.page-title, .page-h h1, h1.page-title, .es-title {
  font-family: var(--serif) !important;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
  line-height: 1.18;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
.page-subtitle, .page-sub {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.6;
}

/* Every figure is monospaced + tabular so columns align like a terminal. */
.tnum, .stat-value, .stat .v, .stat-cell .v, .kpi .v, .metric-value,
td.num, th.num, .num, .amount, .money {
  font-family: var(--mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}

::selection { background: #C9DAEE; color: var(--ink); }
:root[data-theme="dark"] ::selection { background: #24405E; color: #fff; }

/* ------------------------------------------------- global de-AI overrides -- */
/* These kill the tells wholesale, wherever they were declared inline in a
   page's <style> block. Scoped to structural elements so genuine semantic
   fills (status dots, chart series) survive. */
.card, .panel, .section, .stat-card, .stat, .modal, .modal-content, .dialog,
.sidebar, .topbar, .header, .table-wrap, .tbl-card, .data-table, .list,
.dropdown, .menu, .popover, .tooltip, .toast, .badge, .tag, .chip, .pill,
.btn, button, input, select, textarea, .filter-tab, .tab, .nav-item {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: none !important;
}

.card, .panel, .section, .stat-card, .stat, .table-wrap, .tbl-card,
.modal-content, .dialog, .list, .leads-table-container, .demo-card {
  background-image: none !important;
  border-radius: var(--r-lg) !important;
  box-shadow: none !important;
}

/* Surfaces are flat + hairline-bordered. No tint, no glass. */
.card, .panel, .section, .stat-card, .stat, .table-wrap, .tbl-card,
.leads-table-container, .demo-card, .list {
  background: var(--surface);
  border: 1px solid var(--line);
}

/* ----------------------------------------------------------------- chrome -- */
.sidebar {
  background: var(--nav) !important;
  background-image: none !important;
  border-right: 1px solid #000 !important;
  border-radius: 0 !important;
  padding: 18px 12px;
}
.logo-text, .brand, .brandname {
  font-family: var(--serif) !important;
  font-size: 17.5px !important;
  font-weight: 700 !important;
  letter-spacing: .005em;
  color: #fff !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  -webkit-text-fill-color: #fff !important;
}
.nav-label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600;
  color: var(--nav-dim) !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 0 8px 10px;
}
.nav-item {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px;
  border-radius: var(--r-sm) !important;
  color: var(--nav-tx) !important;
  font-size: 13px; font-weight: 500; line-height: 1;
  background: none !important;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.nav-item:hover { background: var(--nav-2) !important; color: #E6ECF1 !important; }
.nav-item.active {
  background: var(--nav-active) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--brand-bright) !important;
}
.nav-item.active svg { opacity: 1; color: var(--brand-bright); }
.nav-item.logout { color: #C98B86 !important; }
.nav-item.logout:hover { background: #2A1A1A !important; color: #E4A9A3 !important; }

/* main content sits on the canvas */
.main-content { background: var(--canvas); }

/* ---------------------------------------------------------------- buttons -- */
.btn, button.btn, .btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  padding: 9px 16px;
  border-radius: var(--r) !important;
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; letter-spacing: .01em;
  background-image: none !important; box-shadow: none !important;
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn-primary, .btn.primary {
  background: var(--ink) !important; color: var(--surface) !important; border-color: var(--ink) !important;
}
:root[data-theme="dark"] .btn-primary, :root[data-theme="dark"] .btn.primary {
  background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important;
}
.btn-primary:hover, .btn.primary:hover { background: #232E3A !important; border-color: #232E3A !important; }
:root[data-theme="dark"] .btn-primary:hover { background: var(--brand-h) !important; border-color: var(--brand-h) !important; }
.btn-secondary, .btn.secondary {
  background: var(--surface) !important; border-color: var(--field-line) !important; color: var(--ink) !important;
}
.btn-secondary:hover { border-color: var(--ink) !important; }
.btn:active { transform: translateY(.5px); }
.btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------------------------ forms -- */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="search"], input[type="date"], input[type="time"], input[type="tel"],
select, textarea, .form-input, .search-input {
  font-family: var(--font) !important;
  font-size: 13px;
  color: var(--ink) !important;
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--field-line) !important;
  border-radius: var(--r) !important;
  padding: 9px 12px;
  box-shadow: none !important;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
input:focus, select:focus, textarea:focus, .form-input:focus, .search-input:focus {
  outline: none;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px rgba(21,70,127,.12) !important;
}
:root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus,
:root[data-theme="dark"] textarea:focus {
  box-shadow: 0 0 0 3px rgba(76,143,214,.18) !important;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
label, .form-label {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600;
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: .09em;
}

/* ------------------------------------------------------------------ cards -- */
.card-h, .panel-header, .section-header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-3) !important;
  background-image: none !important;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.card-h h3, .panel-title, .section-title {
  font-family: var(--font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--t1) !important;
  text-transform: uppercase;
  letter-spacing: .09em;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

/* --------------------------------------------------------- stats / strips -- */
.stats-grid, .stats-row {
  display: grid;
  gap: 0 !important;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
}
.stat-card, .stat {
  border: 0 !important;
  border-right: 1px solid var(--line-2) !important;
  border-radius: 0 !important;
  padding: 16px 20px !important;
  background: var(--surface) !important;
}
.stat-card:last-child, .stat:last-child { border-right: 0 !important; }
.stat-label, .stat .k, .stat-cell .k {
  font-family: var(--mono) !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.stat-value, .stat .v, .stat-cell .v {
  font-family: var(--mono) !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -.03em;
  line-height: 1;
  margin-top: 8px;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}
/* the decorative icon tile on stat cards is an AI tell — retire it */
.stat-icon, .stat-header .stat-icon { display: none !important; }

/* ----------------------------------------------------------------- tables -- */
table, .data-table, .leads-table, .tbl {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12.5px;
}
thead th, .data-table thead th, .tbl thead th {
  text-align: left;
  font-family: var(--mono) !important;
  font-size: 9.5px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line) !important;
  background: var(--surface-2) !important;
  background-image: none !important;
  white-space: nowrap;
}
tbody td, .data-table tbody td, .tbl tbody td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line-2) !important;
  color: var(--body-tx);
  vertical-align: middle;
}
tbody tr { transition: background var(--t-fast) var(--ease); }
tbody tr:hover, .data-table tbody tr:hover { background: var(--surface-2) !important; }
tbody tr:last-child td { border-bottom: 0 !important; }

/* ------------------------------------------------------- status semantics -- */
/* Square dots, not glowing circles. Colour ONLY here. */
.status-dot, .dot { width: 8px; height: 8px; border-radius: 2px !important; display: inline-block; flex: none; }
.st-pos, .status-active, .status-success { color: var(--pos) !important; }
.st-warn, .status-pending, .status-warning { color: var(--warn) !important; }
.st-bad, .status-expired, .status-error   { color: var(--bad) !important; }

/* Status chips: bordered rectangles with mono caps — never coloured capsules. */
.badge, .tag, .status-badge, .pill, .chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 3px 7px !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line);
  background: var(--surface-2) !important;
  background-image: none !important;
  color: var(--muted) !important;
  box-shadow: none !important;
}
.badge.pos, .status-badge.active, .status-badge.sales-closed, .badge.success {
  color: var(--pos) !important; border-color: rgba(14,122,69,.32); background: var(--pos-bg) !important;
}
.badge.warn, .status-badge.pending, .badge.warning {
  color: var(--warn) !important; border-color: rgba(178,106,0,.32); background: var(--warn-bg) !important;
}
.badge.bad, .status-badge.expired, .status-badge.not-interested, .badge.danger {
  color: var(--bad) !important; border-color: rgba(180,35,24,.32); background: var(--bad-bg) !important;
}

/* -------------------------------------------------------------------tabs -- */
.tabs, .filter-tabs {
  display: flex; gap: 22px;
  border-bottom: 1px solid var(--line);
  background: none !important;
  backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  overflow-x: auto;
}
.tab, .filter-tab {
  padding: 11px 1px !important;
  font-size: 12.5px; font-weight: 600;
  color: var(--muted) !important;
  cursor: pointer;
  background: none !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  white-space: nowrap;
  margin-bottom: -1px;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.tab:hover, .filter-tab:hover { color: var(--ink) !important; }
.tab.active, .filter-tab.active {
  color: var(--ink) !important;
  border-bottom-color: var(--brand) !important;
  background: none !important;
}
.filter-tab .count, .tab .cnt {
  font-family: var(--mono) !important;
  font-size: 10.5px !important;
  font-weight: 600;
  color: var(--faint) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 0 0 5px !important;
  border-radius: 0 !important;
}

/* --------------------------------------------------------------- overlays -- */
.modal-content, .modal-overlay > div, .dialog, .dropdown, .menu, .popover {
  background: var(--surface) !important;
  background-image: none !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-pop) !important;
  backdrop-filter: none !important;
}
.modal-overlay, .overlay {
  background: rgba(11,15,20,.55) !important;
  backdrop-filter: none !important;
}

/* ------------------------------------------------------- skeleton loading -- */
/* Sharp, low-contrast, no shimmer-rainbow. Reads as "data pending", not decor. */
@keyframes es-shimmer {
  0%   { background-position: -180px 0; }
  100% { background-position: 220px 0; }
}
.sk, .skeleton {
  display: block;
  border-radius: var(--r-sm) !important;
  background: var(--line-2);
  background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.55) 50%, transparent 100%);
  background-repeat: no-repeat;
  background-size: 180px 100%;
  animation: es-shimmer 1.1s var(--ease) infinite;
  pointer-events: none;
  user-select: none;
}
:root[data-theme="dark"] .sk, :root[data-theme="dark"] .skeleton {
  background: var(--line);
  background-image: linear-gradient(90deg, transparent 0, rgba(255,255,255,.07) 50%, transparent 100%);
}
.sk-text  { height: 11px; margin: 5px 0; }
.sk-title { height: 16px; width: 42%; margin: 6px 0 10px; }
.sk-line  { height: 11px; width: 100%; }
.sk-num   { height: 22px; width: 72px; }
.sk-row   { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--line-2); }
.sk-row .sk { flex: 1; }
.sk-w20 { width: 20%; } .sk-w30 { width: 30%; } .sk-w40 { width: 40%; }
.sk-w60 { width: 60%; } .sk-w80 { width: 80%; }
@media (prefers-reduced-motion: reduce) {
  .sk, .skeleton { animation: none; }
}

/* ------------------------------------------------------------ transitions -- */
/* Entrance: a 6px lift, once, fast. No bouncing, no staggered fireworks. */
@keyframes es-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.es-in, .animate-in { animation: es-in var(--t-mid) var(--ease) both; }
.es-d1 { animation-delay: 30ms; } .es-d2 { animation-delay: 60ms; }
.es-d3 { animation-delay: 90ms; } .es-d4 { animation-delay: 120ms; }
.delay-1 { animation-delay: 30ms !important; } .delay-2 { animation-delay: 60ms !important; }
.delay-3 { animation-delay: 90ms !important; } .delay-4 { animation-delay: 120ms !important; }
.delay-5 { animation-delay: 150ms !important; }

a, .clickable, tr, .row, .nav-item, .tab, .filter-tab, .btn, button {
  transition: background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

/* ----------------------------------------------------------- theme toggle -- */
.es-theme-toggle {
  display: inline-flex; align-items: center; gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--surface);
}
.es-theme-toggle button {
  display: grid; place-items: center;
  width: 30px; height: 26px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--muted);
  border-radius: 0 !important;
  padding: 0 !important;
}
.es-theme-toggle button svg { width: 14px; height: 14px; }
.es-theme-toggle button:hover { background: var(--surface-2); color: var(--ink); }
.es-theme-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
:root[data-theme="dark"] .es-theme-toggle button[aria-pressed="true"] { background: var(--brand); color: #fff; }

/* --------------------------------------------------------------- scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--field-line) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--field-line); border: 3px solid var(--canvas); border-radius: 0; }
*::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* ------------------------------------------------------------------ misc -- */
hr, .divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
code, pre, .mono { font-family: var(--mono) !important; }
.empty-state, .empty { color: var(--muted); font-size: 13px; }
.loading-spinner {
  width: 16px; height: 16px; border: 2px solid var(--line);
  border-top-color: var(--brand); border-radius: 50%;
  animation: es-spin .7s linear infinite; margin: 24px auto;
  background: none !important;
}
@keyframes es-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ charts -- */
/* Companions to /charts.js — flat, hairline, mono. No decoration. */
.ch-bars { display: flex; flex-direction: column; }
.ch-bar-row { display: grid; grid-template-columns: minmax(90px,1.3fr) 3fr minmax(58px,auto);
  align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line-2); }
.ch-bar-row:last-child { border-bottom: 0; }
.ch-bar-lb { font-size: 12px; color: var(--body-tx); font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-bar-track { height: 8px; background: var(--line-2); position: relative; border-radius: 0; }
.ch-bar-track i { display: block; height: 100%; border-radius: 0; }
.ch-bar-v { font-family: var(--mono); font-size: 11.5px; font-weight: 600; color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.ch-funnel { display: flex; flex-direction: column; gap: 12px; }
.ch-fn-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 5px; }
.ch-fn-lb { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .09em; }
.ch-fn-v { font-family: var(--mono); font-size: 15px; font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.ch-fn-track { height: 10px; background: var(--line-2); }
.ch-fn-track i { display: block; height: 100%; background: var(--brand); }
.ch-fn-conv { font-family: var(--mono); font-size: 9.5px; color: var(--faint);
  letter-spacing: .06em; margin-top: 4px; text-transform: uppercase; }

.ch-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.ch-legend span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--body-tx); }
.ch-legend i { width: 9px; height: 9px; border-radius: 2px; flex: none; }

/* table cells must never clip a company name — ellipsis, not a hard cut */
td, th { overflow: hidden; text-overflow: ellipsis; }
td .truncate, .cell-truncate { display: block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* --------------------------------------------------- chart interactivity -- */
.ch-tip {
  position: fixed; top: 0; left: 0; z-index: 99999;
  min-width: 132px; max-width: 260px;
  background: var(--ink); color: #fff;
  border: 1px solid var(--ink); border-radius: var(--r);
  padding: 8px 10px; pointer-events: none;
  opacity: 0; transition: opacity var(--t-fast) var(--ease);
  box-shadow: var(--sh-pop);
}
.ch-tip.on { opacity: 1; }
.ch-tip-t {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: #A9B6C2; margin-bottom: 5px;
  border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 5px;
}
.ch-tip-r { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 2px 0; }
.ch-tip-r span { font-size: 11px; color: #C8D2DA; }
.ch-tip-r b {
  font-family: var(--mono); font-size: 12px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
:root[data-theme="dark"] .ch-tip { background: #050809; border-color: var(--line); }

/* hover emphasis — opacity/size only, never a glow */
.ch-mark { transition: opacity var(--t-fast) var(--ease); }
.ch-mark.ch-hot { opacity: .78; }
.ch-dot.ch-hot { r: 4; opacity: 1; }
.ch-hit { cursor: inherit; }
.ch-cross { transition: opacity var(--t-fast) var(--ease); pointer-events: none; }

.ch-bar-row, .ch-fn-row { transition: background var(--t-fast) var(--ease); }
.ch-bar-row.ch-hot, .ch-fn-row.ch-hot { background: var(--surface-2); }
.ch-bar-row:focus-visible, .ch-fn-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ch-bar-row[role="button"], .ch-fn-row[role="button"] { cursor: pointer; }
/* Active drill-down row: a left rule + weight, no fill — the fill is the data. */
.ch-bar-row.ch-sel { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--brand); }
.ch-bar-row.ch-sel .ch-bar-lb { color: var(--ink); font-weight: 650; }

/* Drill-down filter chip (square, hairline — not a pill) */
.an-filter { display: none; align-items: center; gap: 8px; margin: 0 0 14px;
  padding: 7px 10px; border: 1px solid var(--line); background: var(--surface-2);
  border-radius: 2px; }
.an-filter.on { display: flex; }
.an-filter-k { font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted-tx); }
.an-filter-v { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.an-filter-x { margin-left: auto; border: 1px solid var(--line); background: var(--surface);
  color: var(--body-tx); font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 2px;
  cursor: pointer; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.an-filter-x:hover { background: var(--ink); color: var(--surface); border-color: var(--ink); }

/* Month picker sits beside the segmented range control */
.an-month { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
  padding: 7px 9px; cursor: pointer; }
.an-month[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
:root[data-theme="dark"] .an-month[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.an-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .an-controls { width: 100%; }
  .an-month { flex: 1 1 auto; }
}

/* legacy stat cards: figures are ink + mono, never decorative colour */
.stat-card-value {
  font-family: var(--mono) !important; font-variant-numeric: tabular-nums;
  letter-spacing: -.03em; color: var(--ink) !important;
  font-size: 26px !important; font-weight: 600 !important;
}
.stat-card-change, .stat-card-label {
  font-family: var(--mono) !important; font-size: 10px !important; font-weight: 500;
  color: var(--muted) !important; text-transform: uppercase; letter-spacing: .09em;
}

/* ---------------------------------------------- dark-theme action hierarchy --
   On dark ground a saturated fill reads as neon. Primary actions therefore use
   a near-white ink fill (high contrast, zero chroma) exactly as they use a
   near-black fill on light ground. Semantic colour stays for STATE, not chrome. */
:root[data-theme="dark"] .btn-primary,
:root[data-theme="dark"] .btn.primary,
:root[data-theme="dark"] .btn-success,
:root[data-theme="dark"] .save-btn,
:root[data-theme="dark"] .modal-footer .btn-primary,
:root[data-theme="dark"] #submitLogCallBtn {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  color: var(--canvas) !important;
}
:root[data-theme="dark"] .btn-primary:hover,
:root[data-theme="dark"] .btn.primary:hover,
:root[data-theme="dark"] .btn-success:hover,
:root[data-theme="dark"] .save-btn:hover,
:root[data-theme="dark"] #submitLogCallBtn:hover {
  background: #C9D3DC !important; border-color: #C9D3DC !important; color: var(--canvas) !important;
}
/* Call / end-call keep semantic colour but at terminal chroma, not signage. */
:root[data-theme="dark"] .btn-call,
:root[data-theme="dark"] .dialer-call-btn,
:root[data-theme="dark"] .btn-whatsapp {
  background: var(--pos) !important; border-color: var(--pos) !important; color: #E9F2EC !important;
}
:root[data-theme="dark"] .btn-end-call,
:root[data-theme="dark"] .dialer-end-call {
  background: var(--bad) !important; border-color: var(--bad) !important; color: #F6E9E7 !important;
}

/* =============================================================================
   MOBILE — reps work this CRM one-handed while dialling. Rules:
     · nothing may be clipped or horizontally scrolled off-screen
     · every tap target >= 44px (Apple HIG) and thumb-reachable
     · inputs >= 16px or iOS zooms the viewport on focus (jarring mid-call)
     · the sidebar becomes an off-canvas drawer — navigation is never lost
   ========================================================================== */

/* ---- universal off-canvas nav (injected by enterprise.js on every page) ---- */
.es-navbar {
  display: none;
  position: sticky; top: 0; z-index: 900;
  height: 52px; align-items: center; gap: 12px;
  padding: 0 12px calc(0px + env(safe-area-inset-right, 0px)) 12px;
  background: var(--nav); border-bottom: 1px solid #000;
}
.es-navbar .es-burger {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: var(--r); cursor: pointer; color: #E6ECF1;
}
.es-navbar .es-burger:active { background: var(--nav-2); }
.es-navbar .es-burger svg { width: 21px; height: 21px; }
.es-navbar .es-title {
  font-family: var(--serif); font-size: 16px; font-weight: 700; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.es-scrim {
  display: none; position: fixed; inset: 0; z-index: 998;
  background: rgba(11,15,20,.6);
}
.es-scrim.on { display: block; }

@media (max-width: 900px) {
  /* Pages set `body{display:flex}` for the sidebar+content shell. With the
     sidebar lifted out to a fixed drawer, that flex context would lay the
     injected navbar out as a narrow COLUMN beside the content. Force normal
     block flow so the bar spans the full width. */
  body { display: block !important; }
  .es-navbar { display: flex; width: 100%; }

  /* Sidebar -> drawer. Uses transform (compositor-only) so it slides at 60fps
     even on a mid-range Android. */
  .sidebar {
    position: fixed !important; top: 0; left: 0; bottom: 0;
    width: min(84vw, 300px) !important; max-width: 300px;
    z-index: 999 !important;
    transform: translateX(-102%);
    transition: transform 220ms var(--ease);
    overflow-y: auto; height: 100dvh !important;
    padding-top: max(18px, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: max(18px, env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
  }
  .sidebar.es-open { transform: translateX(0); }
  .sidebar .nav-item { min-height: 44px; font-size: 15px; }

  .main-content, .main, main.main-content {
    margin-left: 0 !important; width: 100% !important;
    padding: 16px 14px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body { overflow-x: hidden; }
  body.es-locked { overflow: hidden; }

  /* typography steps down but never below legibility */
  .page-title, .page-h h1, h1.page-title { font-size: 21px !important; }
  .page-subtitle, .page-sub { font-size: 13px !important; }

  /* stat strips stack 2-up instead of squeezing to unreadable columns */
  .stats-grid, .stats-row, .perf-metrics, .kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    display: grid !important;
  }
  .stat-card, .stat, .kpi { border-right: 0 !important; border-bottom: 1px solid var(--line-2) !important; }
  .stat-value, .stat .v, .stat-card-value { font-size: 21px !important; }

  /* charts: the SVG viewBox is 640 wide — let it scale, never clip */
  .ch-bars, .ch-funnel { width: 100%; }
  .ch-bar-row { grid-template-columns: minmax(72px,1.1fr) 2fr minmax(48px,auto); gap: 8px; }

  /* dialogs go full-bleed: a centred 430px card on a 390px phone gets clipped */
  .modal-content, .modal-overlay > div, .dialog, .lp-sale-box, .wa-modal {
    max-width: 100% !important; width: 100% !important;
    max-height: 92dvh !important; overflow-y: auto;
    border-radius: var(--r-lg) var(--r-lg) 0 0 !important;
    margin-top: auto !important;
  }
  .modal-overlay, .overlay, .lp-sale-ov { align-items: flex-end !important; padding: 0 !important; }

  /* the lead panel is the rep's main workspace — full screen on a phone */
  .lead-panel, .lp-panel, #leadPanel {
    width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important;
    border-radius: 0 !important;
  }

  /* toolbars wrap instead of overflowing */
  .toolbar, .filters-row, .filter-bar, .head-row { flex-wrap: wrap !important; gap: 8px !important; }
  .toolbar > *, .filter-bar > * { flex: 1 1 auto; min-width: 0; }
  .search-box, .search-input-wrapper { flex: 1 1 100% !important; max-width: 100% !important; }
}

/* ---- responsive tables: become stacked records, never a sideways scroll ---- */
@media (max-width: 760px) {
  table.es-stack, .es-stack table { min-width: 0 !important; display: block; }
  .es-stack thead { display: none; }
  .es-stack tbody, .es-stack tr, .es-stack td { display: block; width: 100%; }
  .es-stack tr {
    border: 1px solid var(--line); border-radius: var(--r-lg);
    margin-bottom: 10px; padding: 6px 2px; background: var(--surface);
  }
  .es-stack td {
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
    padding: 7px 12px !important; border: 0 !important; text-align: right !important;
  }
  .es-stack td::before {
    content: attr(data-label);
    font-family: var(--mono); font-size: 9.5px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .09em; text-align: left; flex: none;
  }
  .es-stack td:first-child {
    border-bottom: 1px solid var(--line-2) !important; text-align: left !important;
    font-weight: 600; color: var(--ink);
  }
  .es-stack td:first-child::before { display: none; }
  .es-stack td:empty { display: none; }
  /* tables not opted into stacking at least scroll inside their own box */
  .table-wrap, .tbl-card, .leads-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ---- touch ergonomics ---- */
@media (hover: none) and (pointer: coarse) {
  .btn, button, .nav-item, .tab, .filter-tab, select, a.btn { min-height: 44px; }
  .btn, button { padding-top: 11px; padding-bottom: 11px; }
  td, th { padding: 12px 14px; }
  /* 16px stops iOS Safari zooming the viewport when a field takes focus */
  input, select, textarea, .form-input, .search-input { font-size: 16px !important; }
  .tabs, .filter-tabs { gap: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar, .filter-tabs::-webkit-scrollbar { display: none; }
}

@media (max-width: 420px) {
  .main-content { padding: 14px 11px calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
  .stats-grid, .stats-row, .perf-metrics { grid-template-columns: 1fr 1fr !important; }
  .page-title { font-size: 19px !important; }
}

/* ------------------------------------------------- mobile overflow hardening --
   Measured at 390px: these were the only elements whose box extended past the
   viewport. Each is a real clip, not a scrollable strip. */

/* Visually-hidden native controls (kept for screen readers + existing JS) were
   being re-inflated to 100% by a later, equal-specificity .form-select rule,
   pushing a 390px box off-screen. Lock the hidden geometry. */
.dialer-outcome-native,
select.dialer-outcome-native,
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important;
  white-space: nowrap !important; border: 0 !important;
}

@media (max-width: 900px) {
  /* Controls that sat a few px past the right edge because their intrinsic
     width ignored the container's padding. */
  .per-page-selector, .callback-filter-wrap, .cb-dropdown,
  #perPageSelect, .source-filter, .status-filter {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .per-page-selector { flex-wrap: wrap; }
  /* Any select/input must respect its parent, never its content width. */
  select, input, textarea, .form-select, .form-input { max-width: 100% !important; }
  /* Absolutely-positioned dropdowns must open inside the viewport, not past it. */
  .cb-dropdown, .dropdown, .menu, .ac { max-width: calc(100vw - 24px) !important; }
}

/* Runtime-injected skeletons (Skeleton.stats/rows/list) can land in containers
   that are not .stats-grid, so the 2-up collapse never reaches them and they
   keep a desktop track width. Measured on admin at 390px: .stat-card right=483.
   Guard every surface, however it got into the DOM. */
@media (max-width: 900px) {
  .stat-card, .stat, .kpi, .sk, .sk-row, .skeleton {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
  }
  /* a skeleton grid that isn't .stats-grid still must not run off-screen */
  [class*="skeleton"], [class*="sk-"] { max-width: 100% !important; }
}

/* ===========================================================================
   UI MODE — legacy portal escape hatch
   A rep must always be able to find the way back to the portal they know.
   ======================================================================== */
.es-uiswitch {
  display: flex; align-items: center; gap: 9px; width: calc(100% - 20px);
  margin: 4px 10px 8px; padding: 8px 10px;
  background: transparent; border: 1px solid var(--nav-line, rgba(255,255,255,.14));
  border-radius: 2px; cursor: pointer;
  font-family: var(--mono); font-size: 10px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--nav-dim);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.es-uiswitch svg { width: 14px; height: 14px; flex: none; }
.es-uiswitch:hover { background: rgba(255,255,255,.06); color: var(--nav-ink, #fff);
  border-color: rgba(255,255,255,.3); }
.es-uiswitch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.es-navbar-legacy {
  margin-left: auto; display: none; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; background: transparent;
  border: 1px solid var(--line); border-radius: 2px; color: var(--body-tx); cursor: pointer;
}
.es-navbar-legacy svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .es-navbar-legacy { display: flex; } }

/* one-time redesign notice ------------------------------------------------ */
.es-notice-wrap {
  position: fixed; inset: 0; z-index: 9000; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(11,15,20,.55); opacity: 0;
  transition: opacity 180ms var(--ease);
}
.es-notice-wrap.on { opacity: 1; }
.es-notice {
  width: 100%; max-width: 460px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 3px; padding: 26px 26px 22px;
  transform: translateY(6px); transition: transform 200ms var(--ease);
}
.es-notice-wrap.on .es-notice { transform: none; }
.es-notice-k {
  font-family: var(--mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-tx);
  margin-bottom: 10px;
}
.es-notice-t {
  font-family: var(--serif); font-size: 25px; font-weight: 600; line-height: 1.15;
  color: var(--ink); margin: 0 0 12px; letter-spacing: -.01em;
}
.es-notice-p { font-size: 13.5px; line-height: 1.6; color: var(--body-tx); margin: 0 0 12px; }
.es-notice-act { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.es-notice-go, .es-notice-old {
  flex: 1 1 auto; padding: 10px 16px; border-radius: 2px; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.es-notice-go { background: var(--ink); color: var(--surface); border: 1px solid var(--ink); }
.es-notice-go:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.es-notice-old { background: var(--surface); color: var(--body-tx); border: 1px solid var(--line); }
.es-notice-old:hover { background: var(--surface-2); color: var(--ink); }
:root[data-theme="dark"] .es-notice-go { background: var(--brand); border-color: var(--brand); color: #F2F5F8; }
@media (max-width: 460px) { .es-notice-go, .es-notice-old { flex: 1 1 100%; } }

/* Header-mounted variant for sub-pages that have no sidebar */
.es-uiswitch-inline {
  width: auto; margin: 0; padding: 7px 11px;
  border-color: var(--line); color: var(--body-tx); background: var(--surface);
}
.es-uiswitch-inline:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-2); }

/* ===========================================================================
   SEARCH INPUTS WITH AN OVERLAID ICON
   The blanket input rule above sets `padding` as a shorthand, which also wipes
   the left padding each page reserves for its absolutely-positioned magnifier.
   The result was the placeholder rendering underneath the glyph on every
   search bar in the app. Give the icon its room back — per wrapper, using the
   offset each page actually designed for, rather than one imposed number.

   Scoped to wrappers that genuinely hold an icon: admin, demos, payments and
   offers all use bare search inputs with no glyph, and must stay flush left.
   ======================================================================== */
.search-box input {            /* clients, call-logs — icon at 12-14px */
  padding-left: 38px;
}
.search-input-wrapper .search-input {   /* leads — icon at 16px, 18px glyph */
  padding-left: 48px;
}
/* Catch-all so a new page that overlays an icon cannot silently regress.
   Wrapped in :where() so it contributes no specificity and stays a FALLBACK —
   written bare, :has() would out-rank the two rules above and flatten leads'
   48px back to 42px. */
:where(.search-box, .search-input-wrapper, .search-container):has(svg) input {
  padding-left: 42px;
}


/* Admin-only nav items. Hidden by default and revealed once /api/me confirms
   the role, so a rep never sees a link to salary data — not even briefly. */
[data-admin-only] { display: none !important; }
body.es-admin [data-admin-only] { display: flex !important; }

/* Manager-only nav. Hidden until /api/team confirms this person has reports —
   a rep with nobody under them must not see a route into other people's calls. */
[data-manager-only] { display: none !important; }
body.es-manager [data-manager-only] { display: flex !important; }

/* ===========================================================================
   SIDEBAR LAYOUT — the one definition
   enterprise.css styled the sidebar's colours but left its geometry to each
   page, so pages that never declared a width rendered it as a full-width block
   (rep-performance) or a cramped column (my-team). Layout belongs here with the
   rest of the chrome, so a page only has to include the shell.
   Scoped above the mobile breakpoint so the off-canvas drawer rules below keep
   full control of small screens.
   ======================================================================== */
@media (min-width: 901px) {
  body:has(> .sidebar) { display: flex; min-height: 100vh; }
  .sidebar {
    width: 240px;
    flex: 0 0 240px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    /* Some pages slide the sidebar off-canvas from as wide as 1024px while
       others do it at 900px. Above 901px this block owns the layout, so cancel
       any off-canvas transform — otherwise the column keeps its 240px slot in
       the flex row and leaves a blank gutter. */
    transform: none;
  }
  .sidebar .nav-section,
  .sidebar .sidebar-nav { display: flex; flex-direction: column; }
  .sidebar .nav-bottom,
  .sidebar .sidebar-footer { margin-top: auto; }

  /* Pages disagree on what the main column is called. Name every one of them —
     matching by position instead swept in the mobile menu button, the scrim,
     the background layer and every modal, each of which then became a flex
     item competing for width. */
  body:has(> .sidebar) > .content,
  body:has(> .sidebar) > .container,
  body:has(> .sidebar) > .app-container,
  body:has(> .sidebar) > .main-content,
  body:has(> .sidebar) > main {
    flex: 1 1 auto;
    min-width: 0;
    /* The sidebar used to be position:fixed, so these pages hand-set a gutter
       to clear it. It is in flow now and that gutter would double-count —
       dashboard and admin were rendering 500px of empty space. */
    margin-left: 0;
  }
  /* admin.html nests its column one level down, inside .app-container. */
  body:has(> .sidebar) > .app-container > .main-content { margin-left: 0; }
}