/* ============ Tokens ============ */
:root {
  --bg: #F4F5F7;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --border: #E5E7EB;
  --border-soft: #EEF0F2;
  --text: #16181D;
  --text-dim: #6B7280;
  --text-faint: #9CA3AF;
  --accent: #0F8F73;
  --accent-dim: #E3F7F1;
  --accent-hover: #0B6F59;
  --danger: #DC2626;
  --danger-dim: #FEF2F2;
  --success: #16A34A;
  --success-dim: #F0FDF4;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.14);
  --ease: cubic-bezier(.2,.8,.2,1);
  --sidebar-w: 342px; /* +40% per explicit request (2026-09-04) -- note: a prior +50% (354px) attempt was reverted for reading "oversized/zoomed in"; this is close to that same territory, revisit if it looks off again */

  /* Tradingbells brand gradient — pulled directly from the logo: deep teal ->
     signature teal -> luminous mint, used across the sidebar, primary
     actions, badges, and hero text so the palette reads as one consistent
     brand identity. --brand-cyan is a secondary neon accent for a duotone
     "light cyberpunk" contrast pop; --brand-slate matches the logo's bell/
     wordmark gray for muted structural accents. */
  --brand-1: #0B6F59;
  --brand-2: #25BE9B;
  --brand-3: #6EE7C4;
  --brand-cyan: #06B6D4;
  --brand-slate: #6D7087;
  --brand-gradient: linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(11,111,89,.10), rgba(110,231,196,.14));
  --brand-glow: 0 8px 24px -6px rgba(37,190,155,.45);
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
/* Slow-drifting neon mesh + faint circuit-grid, fixed behind everything so
   it shows through the gaps between cards without affecting layout. This is
   the "light cyberpunk" backdrop — vivid color on a light base, not a dark
   theme. */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(820px 460px at 6% -6%, rgba(11,111,89,.16), transparent 60%),
    radial-gradient(760px 440px at 102% 2%, rgba(110,231,196,.20), transparent 58%),
    radial-gradient(680px 420px at 45% 108%, rgba(6,182,212,.12), transparent 58%),
    radial-gradient(circle, rgba(37,190,155,.06) 1px, transparent 1px) 0 0/24px 24px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  animation: meshDrift 24s ease-in-out infinite alternate;
}
@keyframes meshDrift {
  0% { background-position: 6% -6%, 102% 2%, 45% 108%, 0 0; }
  100% { background-position: 12% 2%, 92% 10%, 55% 96%, 24px 24px; }
}
.app { position: relative; z-index: 1; }
a { color: inherit; }
button { font-family: inherit; }
svg { width: 16px; height: 16px; }

/* ============ App shell ============ */
/* height (not just min-height) is required here — it's what lets the
   flex:1 + min-height:0 chain down through .main-col/.content/.view/
   .kanban/.kanban-col actually cap each level's height instead of just
   growing to fit content. Without a definite height on this outermost
   flex container, a board column with hundreds of cards has nothing to
   measure "available space" against, so .col-cards's overflow-y:auto
   never engages and the whole page scrolls instead of just that column. */
.app-shell, .app { display: flex; height: 100vh; min-height: 100vh; }

.demo-banner {
  background: #FEF3C7; color: #92400E; text-align: center;
  font-size: 12px; font-weight: 600; padding: 6px 12px;
  border-bottom: 1px solid #FDE68A;
}

/* ---- Sidebar ---- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--brand-gradient);
  background-attachment: fixed;
  border-right: 1px solid rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  padding: 16px 10px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--brand-glow);
}
/* Faint scanline that slowly sweeps down the sidebar — a subtle HUD touch */
.sidebar::after {
  content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent);
  animation: sidebarScan 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sidebarScan {
  0% { top: -140px; }
  60%, 100% { top: 100%; }
}
.sidebar-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px 20px;
}
.brand-logo {
  height: 44px; width: auto; display: block; flex-shrink: 0;
  background: none; padding: 0; box-shadow: none;
}
.brand-crm-badge {
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: #fff; background: rgba(255,255,255,.18);
  padding: 3px 9px; border-radius: 999px; flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22);
}

.nav-group { margin-bottom: 18px; }
.nav-group-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: rgba(255,255,255,.5);
  padding: 6px 10px 8px;
}
.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 11px;
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.005em;
  text-align: left;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
  margin-bottom: 2px;
}
.nav-btn { position: relative; }
/* Icon badge: a solid gradient square behind each icon, matching the Home
   page stat-card style (see .stat-icon) so the sidebar and the dashboard
   read as one consistent "colorful icon" language instead of two different
   treatments. Every section keeps its own hue (Home=teal, Leads=amber,
   Contacts=blue, Deals=emerald, ToDo=pink, RMs=cyan, Performance=indigo,
   Users=violet, Settings=slate); badges lift and glow on hover, and pop
   further when their view is active. */
.nav-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  color: #fff;
  box-shadow: 0 3px 10px -3px rgba(0,0,0,.4);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}
.nav-icon svg { width: 18px; height: 18px; opacity: .96; }
.nav-icon.c-sky     { background: linear-gradient(135deg,#25BE9B,#0B6F59); }
.nav-icon.c-amber   { background: linear-gradient(135deg,#f59e0b,#ea580c); }
.nav-icon.c-violet  { background: linear-gradient(135deg,#8b5cf6,#6d28d9); }
.nav-icon.c-emerald { background: linear-gradient(135deg,#16a34a,#059669); }
.nav-icon.c-pink    { background: linear-gradient(135deg,#db2777,#be185d); }
.nav-icon.c-cyan    { background: linear-gradient(135deg,#06b6d4,#0e7490); }
.nav-icon.c-rose    { background: linear-gradient(135deg,#f43f5e,#be123c); }
.nav-icon.c-slate   { background: linear-gradient(135deg,#64748b,#334155); }
.nav-icon.c-indigo  { background: linear-gradient(135deg,#6366f1,#4338ca); }
.nav-icon.c-blue    { background: linear-gradient(135deg,#2563eb,#1e40af); }
.nav-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-btn:hover .nav-icon {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 4px 14px -2px rgba(0,0,0,.5);
  filter: brightness(1.1);
}
.nav-btn.active {
  background: rgba(255,255,255,.16); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.nav-btn.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 58%; border-radius: 3px;
  background: #fff; box-shadow: 0 0 10px 2px rgba(255,255,255,.85);
}
.nav-btn.active .nav-icon {
  box-shadow: 0 4px 14px -2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.3);
}
.nav-btn.active .nav-icon svg { opacity: 1; }

/* ---- Main column ---- */
.main-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }

/* ---- Topbar ---- */
.topbar {
  height: 60px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
/* Thin animated brand-gradient underline — carries the sidebar's "HUD" feel
   into the main column without adding visual weight. */
.topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand-gradient); background-size: 200% auto; opacity: .8;
  animation: heroShine 8s ease-in-out infinite;
}
.topbar-left { display: flex; align-items: center; gap: 14px; }
.mobile-nav-toggle {
  display: none; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  align-items: center; justify-content: center; cursor: pointer; color: var(--text);
  flex-shrink: 0;
}
/* Desktop sidebar collapse — separate from the mobile off-canvas toggle above.
   Persists via localStorage so it stays hidden across views/reloads. */
.sidebar-toggle-btn {
  display: flex; width: 34px; height: 34px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface);
  align-items: center; justify-content: center; cursor: pointer; color: var(--text-dim);
  flex-shrink: 0; transition: background .12s var(--ease), color .12s var(--ease);
}
.sidebar-toggle-btn:hover { background: var(--surface-2); color: var(--text); }
.sidebar {
  transition: width .2s var(--ease), min-width .2s var(--ease), padding .2s var(--ease), opacity .15s var(--ease);
}
.app.sidebar-collapsed .sidebar {
  width: 0; min-width: 0; padding: 0; border-right: none; opacity: 0; overflow: hidden;
}
.sidebar-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(15,17,21,.42); z-index: 150;
}
.sidebar-backdrop.active { display: block; }
.view-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.topbar-actions { display: flex; align-items: center; gap: 10px; position: relative; }

.cmdk-trigger {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 7px 12px;
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 8px;
  color: var(--text-dim);
  font-size: 13px;
  cursor: pointer;
  width: 260px;
  transition: border-color .12s var(--ease), background .12s var(--ease);
}
.cmdk-trigger:hover { background: var(--surface); border-color: #D1D5DB; }
.cmdk-trigger svg { opacity: .6; }
.cmdk-trigger span { flex: 1; text-align: left; }
.cmdk-trigger kbd {
  font-family: inherit;
  font-size: 11px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 6px;
  color: var(--text-faint);
}

.avatar {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 12px;
  flex-shrink: 0;
}
.avatar.sm { width: 26px; height: 26px; font-size: 10.5px; }
.avatar.lg { width: 42px; height: 42px; font-size: 15px; }

.quick-add-wrap, .quick-add { position: relative; }
#btn-quick-add { display: flex; align-items: center; gap: 6px; }
.quick-add-menu, .dropdown-menu {
  position: absolute; top: 42px; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  padding: 6px;
  display: none;
  z-index: 30;
}
.quick-add-menu.active, .dropdown-menu.active { display: block; }
.quick-add-menu button, .dropdown-menu button {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: none; background: none;
  border-radius: 6px; font-size: 13.5px; cursor: pointer; color: var(--text);
}
.quick-add-menu button:hover, .dropdown-menu button:hover { background: var(--surface-2); }

.topbar-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--brand-gradient);
  color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--brand-glow);
}

/* ============ Views ============ */
.content { padding: 24px; max-width: 1400px; margin: 0 auto; width: 100%; }
/* Leads / Contacts / Deals are full-bleed in every view mode (table, grid,
   board) — record-heavy screens should use the full width of the window
   instead of being centered with dead margins either side. Board mode is
   additionally full-bleed VERTICALLY, so the columns stretch to the bottom
   of the viewport instead of stopping partway down the page. */
.content:has(#view-leads.active),
.content:has(#view-contacts.active),
.content:has(#view-deals.active) {
  max-width: none;
}
/* Table mode (Leads/Deals when toggled to Table, and Contacts's default
   view) gets this same "pin to viewport, scroll internally" treatment as
   board mode — otherwise a long record list just keeps growing the .content
   box past the viewport and the whole page scrolls away from the sidebar,
   which looks broken on a list of any real size. See .leads-table-view /
   .deals-table-view / .contacts-table-view below for the actual scrolling
   element — everything above it (header, search, filter pills, bulk bar)
   stays fixed in place, only the row area scrolls, same self-contained
   behavior the sidebar already has. */
.content:has(.view.active[data-mode="board"]),
.content:has(.view.active[data-mode="table"]) {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.view[data-mode="board"].active,
.view[data-mode="table"].active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/* Every other Tools view (Settings, ToDo, RMs & Branches, Users,
   Performance, Data Explorer) can grow quite tall — long lists, big
   tables, stacked cards — same as board/table views above. Give all of
   them the same "pin to viewport, scroll internally" treatment so the
   sidebar stays fixed in place instead of the whole page scrolling away
   from it, whichever one of these is open. */
.content:has(#view-settings.active),
.content:has(#view-todos.active),
.content:has(#view-rms.active),
.content:has(#view-org-chart.active),
.content:has(#view-users.active),
.content:has(#view-performance.active),
.content:has(#view-explorer.active),
.content:has(#view-call-log.active),
.content:has(#view-activity-log.active),
.content:has(#view-lead-pool.active) {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
#view-settings.active,
#view-todos.active,
#view-rms.active,
#view-org-chart.active,
#view-users.active,
#view-performance.active,
#view-explorer.active,
#view-call-log.active,
#view-activity-log.active,
#view-lead-pool.active {
  display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;
}
/* Flexbox's default flex-shrink:1 fights the overflow-y:auto above — with
   several heavy sections stacked in one flex column (User Management alone
   has the roster table, Teams, Branches, and Admin Accounts), the browser
   squeezes earlier children down toward zero height trying to fit
   everything in the visible area, instead of leaving them full-size and
   letting the container scroll like it's supposed to. Pinning every direct
   child to its natural size is what actually makes "pin to viewport,
   scroll internally" work once a view has more than one or two sections. */
#view-settings.active > *,
#view-todos.active > *,
#view-rms.active > *,
#view-org-chart.active > *,
#view-users.active > *,
#view-performance.active > *,
#view-explorer.active > *,
#view-call-log.active > *,
#view-activity-log.active > *,
#view-lead-pool.active > * {
  flex-shrink: 0;
}
.view { display: none; position: relative; }
.view.active { display: block; animation: fadeIn .18s var(--ease); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ============ Market background (Leads / Contacts / Deals only) ============
   Three glowing price lines continuously draw themselves left-to-right in a
   loop, each with a leading dot and a fainter trailing echo, plus a handful
   of static pulsing markers along the lines. Toggled to .active by app.js
   whenever a Leads/Contacts/Deals view becomes active (see showView()).
   Sits behind .app (position:fixed, low z-index) so every card/table on top
   of it — already opaque or intentionally glassy — controls its own
   visibility, same guarantee as the previous background approach. */
.market-bg {
  display: none; position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.market-bg.active { display: block; }
.market-bg svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.sweep-line {
  fill: none; stroke-width: 1.4; opacity: .2;
  stroke-dasharray: 2800; stroke-dashoffset: 2800;
  animation: sweepDraw 11s linear infinite;
  filter: drop-shadow(0 0 2px currentColor);
}
.sweep-line.trail { stroke-width: 1; opacity: .08; filter: none; }
.sweep-line.l1 { stroke: var(--brand-2); color: var(--brand-2); }
.sweep-line.l2 { stroke: var(--brand-slate); color: var(--brand-slate); animation-delay: -3.6s; }
.sweep-line.l3 { stroke: var(--brand-cyan); color: var(--brand-cyan); animation-delay: -7.2s; }
.sweep-line.l1.trail { animation-delay: -1.1s; }
.sweep-line.l2.trail { animation-delay: -4.7s; }
.sweep-line.l3.trail { animation-delay: -8.3s; }
@keyframes sweepDraw {
  0% { stroke-dashoffset: 2800; }
  100% { stroke-dashoffset: -2800; }
}
.market-bg .marker-dot circle { opacity: .22; animation: markerPulse 3.6s ease-in-out infinite; }
@keyframes markerPulse { 0%, 100% { opacity: .12; } 50% { opacity: .34; } }
.market-bg .tip-dot {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  opacity: .8;
  box-shadow: 0 0 5px 1px currentColor;
}
.market-bg .tip-dot.t1 { background: var(--brand-2); color: var(--brand-2); animation: tip1 11s linear infinite; }
.market-bg .tip-dot.t2 { background: var(--brand-slate); color: var(--brand-slate); animation: tip2 11s linear infinite -3.6s; }
.market-bg .tip-dot.t3 { background: var(--brand-cyan); color: var(--brand-cyan); animation: tip3 11s linear infinite -7.2s; }
@keyframes tip1 {
  0% { left: 0%; top: 24%; } 20% { top: 16%; } 35% { top: 28%; } 50% { top: 6%; }
  65% { top: 26%; } 80% { top: 14%; } 100% { left: 100%; top: 20%; }
}
@keyframes tip2 {
  0% { left: 0%; top: 56%; } 20% { top: 48%; } 35% { top: 60%; } 50% { top: 38%; }
  65% { top: 58%; } 80% { top: 46%; } 100% { left: 100%; top: 52%; }
}
@keyframes tip3 {
  0% { left: 0%; top: 86%; } 20% { top: 78%; } 35% { top: 90%; } 50% { top: 68%; }
  65% { top: 88%; } 80% { top: 76%; } 100% { left: 100%; top: 82%; }
}


.view-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; flex-wrap: wrap; gap: 10px;
}
.view-header h2 { font-family: var(--font-display); margin: 0; font-size: 18px; }
.view-header h1 {
  font-family: var(--font-display); margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em;
}
.header-actions { display: flex; align-items: center; gap: 10px; }

/* View switch (table/board, table/grid) */
.view-switch {
  display: inline-flex; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 8px; padding: 2px;
}
.view-switch-btn {
  border: none; background: none; padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  color: var(--text-dim); border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 6px;
}
.view-switch-btn.active { background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow); }

/* ============ Buttons ============ */
.btn {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s var(--ease), border-color .12s var(--ease), transform .06s var(--ease), box-shadow .12s var(--ease);
}
.btn:hover { background: var(--surface-2); border-color: #D1D5DB; }
.btn:active { transform: scale(.98); }
.btn.primary {
  background: var(--brand-gradient); border-color: transparent; color: #fff;
  box-shadow: var(--brand-glow);
  position: relative; overflow: hidden; isolation: isolate;
}
.btn.primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: left .5s var(--ease);
}
.btn.primary:hover::after { left: 130%; }
.btn.primary:hover { filter: brightness(1.08); box-shadow: 0 10px 28px -6px rgba(109,92,224,.55); }
.btn.danger { background: var(--surface); border-color: var(--border); color: var(--danger); }
.btn.danger:hover { background: var(--danger-dim); border-color: #FCA5A5; }

.icon-btn {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid transparent; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-dim);
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn.danger:hover { background: var(--danger-dim); color: var(--danger); }
.icon-btn.call-icon { color: var(--success); }
.icon-btn[disabled] { opacity: .35; cursor: not-allowed; }

/* ============ Home / Dashboard ============ */
.home-hero { margin-bottom: 20px; overflow-anchor: none; }
.home-hero h1 {
  font-family: var(--font-display);
  font-size: 27px; line-height: 1.3; padding-top: 2px; margin: 0 0 4px;
  letter-spacing: -.01em; font-weight: 700;
  background: var(--brand-gradient);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: heroShine 6s ease-in-out infinite;
  overflow-anchor: none;
}
@keyframes heroShine {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.home-hero p { margin: 0 0 16px; color: var(--text-dim); font-size: 14px; }

.quick-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.quick-actions button {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 9px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .12s var(--ease), transform .1s var(--ease), border-color .12s var(--ease);
}
.quick-actions button:hover {
  box-shadow: var(--brand-glow); transform: translateY(-1px);
  border-color: transparent; background: var(--brand-gradient-soft);
}

.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap: 12px; margin: 20px 0;
}
.stat-card {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; display: flex; align-items: center; gap: 12px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
}
.stat-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient); opacity: .85;
}
.stat-card:hover {
  box-shadow: var(--brand-glow), var(--shadow-md);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--brand-2) 35%, var(--border));
}
.stat-icon {
  width: 38px; height: 38px; border-radius: 9px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 4px 14px -3px rgba(0,0,0,.28);
}
.stat-icon svg { width: 18px; height: 18px; }
.stat-card .label { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.stat-card .value { font-family: var(--font-display); font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin-top: 2px; }

.dashboard-grid, .dash-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; margin: 20px 0; }
@media (max-width: 980px) { .dashboard-grid, .dash-grid { grid-template-columns: 1fr; } }

/* Home page "Open Performance Dashboard" launch card — replaces the old
   embedded iframe. Clicking through is a real top-level navigation (not a
   frame), single-signed-on via /api/dashboard_sso, so it opens as its own
   natural page instead of a boxed-in embed. */
.perf-launch-card {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.perf-launch-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-gradient-soft); color: var(--brand-1);
}
.perf-launch-icon svg { width: 24px; height: 24px; }
.perf-launch-body { flex: 1 1 320px; min-width: 200px; }

/* ============ Native Performance Dashboard view ============ */
.perf-state {
  padding: 40px 20px; text-align: center; color: var(--text-dim); font-size: 13.5px;
}
.perf-error { color: var(--danger); }

.perf-tabs {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 18px;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.perf-tab-btn {
  border: 1px solid var(--border); background: var(--surface);
  color: var(--text-dim); font-weight: 600; font-size: 13px;
  padding: 7px 16px; border-radius: 999px; cursor: pointer;
  transition: all .15s var(--ease);
}
.perf-tab-btn:hover { border-color: var(--brand-2); color: var(--text); }
.perf-tab-btn.active {
  background: var(--brand-gradient); color: #fff; border-color: transparent;
  box-shadow: var(--brand-glow);
}

.perf-pane { display: none; }
.perf-pane.active { display: block; }

.perf-kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr));
  gap: 12px; margin-bottom: 16px;
}
.perf-kpi-card {
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 14px 16px; position: relative; overflow: hidden;
}
.perf-kpi-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient); opacity: .85;
}
.perf-kpi-card .label { font-size: 11.5px; color: var(--text-dim); font-weight: 500; }
.perf-kpi-card .value { font-family: var(--font-display); font-size: 19px; font-weight: 700; letter-spacing: -.01em; margin-top: 3px; }

.perf-chart-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
  gap: 16px; margin-bottom: 16px;
}
.perf-chart-card { margin-bottom: 0; }
.perf-chart-wrap { position: relative; height: 220px; }

.perf-total-row td { background: var(--surface-2); font-weight: 600; }

/* ============ Call Log Dashboard ============ */
.call-log-month-input, .call-log-rm-filter {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; background: var(--surface);
}
.call-log-date-sep { color: var(--text-dim); font-size: 12px; }
.call-log-rec-actions { display: flex; align-items: center; gap: 4px; }

/* Public "share" view — a standalone page (no sidebar/topbar), shown
   instead of the normal app shell when the URL has ?share=<token>. */
.shared-call-log { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
.shared-call-log-header {
  display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap;
}
.shared-call-log-header .brand-logo { height: 44px; }
.shared-call-log-header h1 { font-family: var(--font-display); margin: 0; font-size: 22px; font-weight: 700; }
.shared-call-log-header > div:nth-child(2) { flex: 1; min-width: 200px; }
.shared-call-log-header .call-log-month-input { margin-left: auto; }

.perf-dar-bar {
  width: 100%; height: 7px; border-radius: 4px; background: var(--border-soft); overflow: hidden;
}
.perf-dar-bar-fill { height: 100%; background: var(--brand-gradient); border-radius: 4px; }

.perf-daily-table th, .perf-daily-table td { white-space: nowrap; }

@media (max-width: 700px) {
  .perf-tabs { overflow-x: auto; flex-wrap: nowrap; }
}

/* ============ Data Explorer ============ */
.explorer-period-picker { display: flex; align-items: center; gap: 8px; }
.explorer-period-picker select { padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface); }
.explorer-form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.explorer-form-row .f { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--text-dim); font-weight: 500; }
.explorer-form-row .f input[type="text"], .explorer-form-row .f input[type="date"], .explorer-form-row .f select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 13px; min-width: 150px; background: var(--surface);
}
.explorer-form-row .f select[multiple] { min-height: 88px; }
.explorer-ask-row { display: flex; gap: 12px; align-items: flex-start; margin-top: 10px; }
.explorer-ask-row textarea { flex: 1; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font: inherit; font-size: 14px; resize: vertical; background: var(--surface); }
.exp-quick-group { margin-bottom: 14px; }
.exp-quick-group-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 6px; }
.exp-quick-btn { padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface); font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-dim); margin: 0 6px 6px 0; }
.exp-quick-btn.active { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.exp-ask-answer { background: color-mix(in srgb, var(--surface) 90%, var(--brand-1) 4%); border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-size: 13.5px; line-height: 1.6; margin-top: 10px; }

.detail-card {
  position: relative; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 18px; margin-bottom: 16px;
}
.detail-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient); opacity: .85;
}
.detail-card h3 { margin: 0 0 12px; font-size: 14.5px; }
.detail-card h4 { margin: 14px 0 8px; font-size: 13px; }

/* Capped height + internal scroll ("slider") so a long activity list stays
   compact instead of pushing the rest of Home down the page. */
.feed-list {
  display: flex; flex-direction: column; gap: 0;
  max-height: 320px; overflow-y: auto; padding-right: 4px; margin-right: -4px;
}
.feed-item {
  display: flex; gap: 9px; align-items: center; padding: 7px 4px;
  border-bottom: 1px solid var(--border-soft); cursor: pointer; border-radius: 8px;
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: var(--surface-2); }
.feed-item .todo-icon { margin-top: 0; }
.feed-item .todo-top { margin-bottom: 1px; }
.feed-item .todo-summary {
  font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.feed-item .row-sub { margin-top: 0; }

.chart-card canvas { max-height: 260px; }

.embed-card iframe { width: 100%; height: 520px; border: 1px solid var(--border); border-radius: var(--radius); }
.embed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }

.empty { color: var(--text-faint); font-size: 13px; padding: 18px 4px; text-align: center; }
.subtle { color: var(--text-faint); font-size: 12px; }

/* ============ Badges / pills ============ */
.badge {
  display: inline-block; padding: 2px 9px; border-radius: 20px;
  font-size: 11.5px; font-weight: 600; color: var(--brand-1);
  background: linear-gradient(135deg, rgba(11,111,89,.12), rgba(110,231,196,.16));
  white-space: nowrap;
}
.badge.stage-active-trading { background: var(--success-dim); color: var(--success); }
.badge.stage-dormant { background: #F3F4F6; color: var(--text-dim); }

.priority-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  padding: 2px 8px; border-radius: 20px; background: var(--surface-2); border: 1px solid var(--border-soft);
}
.priority-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pc, #94a3b8);
}

.ad-badge {
  display: inline-block; padding: 2px 8px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.ad-badge.facebook { background: #E7F0FE; color: #1877F2; }
.ad-badge.google { background: #FEF3E7; color: #EA4335; }
.ad-badge.instagram { background: #FCE8F3; color: #C13584; }
.ad-badge.default { background: #F3F4F6; color: var(--text-dim); }

.reminder-chip {
  display: inline-block; margin-top: 6px; padding: 3px 9px; border-radius: 6px;
  background: #FFFBEB; color: #B45309; font-size: 11.5px; font-weight: 600; border: 1px solid #FDE68A;
}

/* ============ Tables ============ */
.table-scroll { position: relative; z-index: 0; overflow-x: auto; border-radius: var(--radius-lg); }
.table-scroll::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 1;
  background: var(--brand-gradient); opacity: .55; pointer-events: none;
}

/* Leads/Deals/Contacts table-mode row areas are the scrollable region inside
   an otherwise viewport-pinned view (see .view[data-mode="table"].active
   above) — the header/search/filter bar above stays put, only the rows
   scroll, mirroring the sidebar's own self-contained scrollbar instead of
   letting the whole page grow arbitrarily tall.
   Leads/Deals nest their pagination bar inside .leads-table-view/
   .deals-table-view alongside the table, so those two become a flex column
   with .table-scroll-inner (wrapping just the <table>) as the actual scroll
   box — the pagination bar stays fixed below it, never scrolled out of
   view. Contacts already keeps its pagination bar as a separate sibling
   outside .contacts-table-view, so that one scrolls directly. */
.leads-table-view, .deals-table-view {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.table-scroll-inner { flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto; }
.contacts-table-view {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: auto;
}
.table-scroll-inner thead th,
.contacts-table-view thead th {
  position: sticky; top: 0; z-index: 2;
}

/* User Management's People roster can grow long (whole org, every role) —
   give it its own capped-height, independently scrolling box with a
   sticky header instead of letting the page (Teams/Branches/Admin
   Accounts below it) get pushed arbitrarily far down. */
.person-table-scroll { max-height: 420px; overflow-y: auto; }
.person-table-scroll thead th { position: sticky; top: 0; z-index: 2; }
table {
  width: 100%; border-collapse: collapse;
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden;
}
thead th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); font-weight: 600; padding: 10px 14px;
  background: color-mix(in srgb, var(--brand-2) 5%, color-mix(in srgb, var(--surface-2) 82%, transparent));
  border-bottom: 1px solid var(--border);
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); font-size: 13.5px; vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .1s var(--ease); cursor: pointer; }
tbody tr:hover { background: var(--surface-2); }
.chk-col { width: 32px; cursor: default; }
.chk-col input, .row-chk { cursor: pointer; }

.name-cell { display: flex; align-items: center; gap: 10px; }
.row-name { font-weight: 600; font-size: 13.5px; }
.row-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.ownership-cell { display: flex; flex-direction: column; gap: 2px; }

.inline-stage-select {
  border: 1px solid var(--border); background: var(--surface); border-radius: 7px;
  padding: 5px 8px; font-size: 12.5px; font-weight: 500; color: var(--text); cursor: pointer;
}

.row-actions { display: inline-flex; gap: 4px; }
.phone-link {
  display: inline-flex; align-items: center; gap: 5px; color: var(--success); text-decoration: none; font-weight: 500;
  /* Now a <button> (was an <a href="tel:">, see phoneLink() in app.js) — reset browser button chrome so it still reads as a plain link. */
  background: none; border: none; padding: 0; margin: 0; font-family: inherit; font-size: inherit; cursor: pointer;
}
.phone-link svg { width: 13px; height: 13px; }

.masked-phone {
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  color: var(--text-dim); font-weight: 500; font-variant-numeric: tabular-nums;
}
.masked-phone:hover { color: var(--text); }
.masked-phone .masked-phone-eye { width: 13px; height: 13px; opacity: .55; flex-shrink: 0; }
.masked-phone.revealed { color: var(--success); }
.masked-phone.revealed .masked-phone-eye { opacity: .9; }
.masked-phone.revealed a { color: var(--success); text-decoration: none; }

/* ============ Deal type tabs ============
   Switches which deal pipeline (Onboarding / Mutual Funds / Unlisted
   Shares / Client Reactivation) the Deals page shows — sits above the
   stage-pill bar, since it picks WHICH stage list applies before the pills
   filter within it. Underline-tab style (vs. the pill bar's rounded/filled
   style) so the two are visually distinct at a glance. */
.deal-type-tabs {
  display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 14px;
}
.deal-type-tab {
  border: none; background: none; padding: 9px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--text-dim); cursor: pointer; position: relative; top: 1px;
  border-bottom: 2px solid transparent; transition: color .12s var(--ease), border-color .12s var(--ease);
}
.deal-type-tab:hover { color: var(--text); }
.deal-type-tab.active { color: var(--brand-2); border-bottom-color: var(--brand-2); }

/* ============ Stage pill bar ============ */
.stage-pill-bar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.stage-pill {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 20px; border: 1px solid var(--border);
  background: var(--surface); font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  cursor: pointer; transition: all .12s var(--ease);
}
.stage-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pill-color, #94a3b8); }
.stage-pill:hover { border-color: #D1D5DB; }
.stage-pill.active { background: var(--brand-gradient); border-color: transparent; color: #fff; box-shadow: var(--brand-glow); }
.stage-pill.active::before { background: #fff; }
.pill-count {
  font-size: 11px; background: rgba(0,0,0,.06); border-radius: 10px; padding: 1px 7px; font-weight: 700;
}
.stage-pill.active .pill-count { background: rgba(255,255,255,.22); }

[data-mode="board"] .stage-pill-bar,
[data-mode="board"] .bulk-actions-bar { display: none; }
[data-mode="table"] .leads-board-view,
[data-mode="table"] .deals-board-view,
[data-mode="table"] .contacts-grid-view { display: none; }
[data-mode="board"] .leads-table-view,
[data-mode="board"] .deals-table-view { display: none; }
[data-mode="grid"] .contacts-table-view { display: none; }

/* ============ Bulk actions bar ============ */
.bulk-actions-bar {
  display: none; align-items: center; gap: 10px; margin-bottom: 14px;
  padding: 9px 14px; background: #111318; color: #fff; border-radius: 10px;
}
.bulk-actions-bar.active { display: flex; }
.bulk-actions-bar span { font-size: 13px; font-weight: 600; margin-right: auto; }
.bulk-actions-bar .btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: #fff; }
.bulk-actions-bar .btn:hover { background: rgba(255,255,255,.18); }
.bulk-actions-bar .btn.danger { color: #FCA5A5; }

/* ============ Kanban / board views ============ */
/* align-items is deliberately left at its default (stretch) — every column in
   the row must be the same height, and tall enough (min-height below) that a
   column with only one or two cards still presents a large, genuinely
   droppable surface below its last card. Without this, a short column's
   "blank space" doesn't actually belong to that column's DOM box, so
   dropping there misses the drop target entirely. */
/* flex: 1 + min-height: 0 makes the whole row stretch to fill whatever
   vertical space .view[data-mode="board"] has available (see above), instead
   of stopping at a fixed height and leaving empty page background below. */
.kanban { display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 14px; flex: 1; min-height: 0; }
.kanban-col {
  position: relative; z-index: 0;
  background:
    radial-gradient(circle at 14px 16px, color-mix(in srgb, var(--stage-color, var(--accent)) 16%, transparent) 0%, transparent 60%),
    color-mix(in srgb, var(--surface-2) 92%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  /* flex: grow to fill any leftover width evenly across columns instead of
     leaving a dead gap after the last column; shrink: 0 so columns never
     squeeze below a usable width — once the row is too narrow for all of
     them at that width, the row scrolls horizontally instead. Height fills
     the parent row (which itself now stretches to the bottom of the
     viewport) rather than stopping at a fixed max-height. */
  flex: 1 1 268px; min-width: 268px; display: flex; flex-direction: column;
  height: 100%; min-height: 420px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease);
}
/* Flat top-edge accent strip, colored per-stage via the --stage-color custom
   property set inline on each column (and inherited down to every card
   inside it) — signals status, not decoration, so no glow. */
.kanban-col::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--stage-color, var(--accent));
  opacity: .8;
  box-shadow: 0 0 12px 0 var(--stage-color, var(--accent));
}
.kanban-col.drag-over {
  border-color: var(--stage-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color, var(--accent)) 22%, transparent), var(--shadow-md);
  animation: colPulse 1.1s ease-in-out infinite;
}
@keyframes colPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color, var(--accent)) 22%, transparent), var(--shadow-md); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--stage-color, var(--accent)) 8%, transparent), var(--shadow-md); }
}
.kanban-col-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 14px 11px; border-bottom: 1px solid var(--border-soft);
}
.kanban-col-head h3 { margin: 0; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.col-live-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--stage-color, var(--accent));
  animation: dotPulse 1.8s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--stage-color, var(--accent)) 55%, transparent); }
  50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stage-color, var(--accent)) 0%, transparent); }
}
.kanban-count {
  font-size: 11px; font-weight: 700; background: var(--surface); border-radius: 10px; padding: 1px 8px;
  color: var(--text-dim); border: 1px solid var(--border);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-2) 12%, transparent);
}
.col-cards { padding: 10px; display: flex; flex-direction: column; gap: 9px; overflow-y: auto; flex: 1; }

.deal-card {
  position: relative;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 12px 11px 16px; cursor: grab; box-shadow: var(--shadow-sm);
  transition: box-shadow .16s var(--ease), transform .16s var(--ease), border-color .16s var(--ease);
  animation: cardIn .22s var(--ease);
  /* Without this, a mousedown+move on the card's text starts a text
     selection instead of the native HTML5 drag gesture — the #1 reason
     draggable="true" cards silently fail to drag in real browsers. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-user-drag: element;
}
@keyframes cardIn { from { opacity: 0; transform: translateY(4px) scale(.98); } to { opacity: 1; transform: none; } }
.deal-card::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--stage-color, var(--accent));
}
.deal-card * { -webkit-user-drag: none; }
.deal-card:active { cursor: grabbing; }
.deal-card:hover {
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--stage-color, var(--accent)) 35%, transparent), var(--shadow-md);
  border-color: color-mix(in srgb, var(--stage-color, var(--accent)) 45%, var(--border));
  transform: translateY(-2px);
}
.deal-card.dragging {
  opacity: .5; transform: scale(1.04) rotate(-1.5deg);
  box-shadow: 0 16px 32px -8px color-mix(in srgb, var(--stage-color, var(--accent)) 45%, transparent);
}
.deal-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.deal-title { font-weight: 600; font-size: 13px; }
.deal-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
.deal-card .card-stage-select {
  width: 100%; margin-top: 9px; font-size: 11.5px; padding: 5px 7px; cursor: pointer;
  border-color: var(--border);
  transition: border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.deal-card .card-stage-select:focus {
  border-color: var(--stage-color, var(--accent));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stage-color, var(--accent)) 18%, transparent);
}

/* ============ Contacts grid ============ */
.contact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.contact-card {
  position: relative; z-index: 0; overflow: hidden;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; cursor: pointer;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
}
.contact-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient); opacity: .85;
}
.contact-card:hover {
  box-shadow: var(--brand-glow), var(--shadow-md);
  border-color: color-mix(in srgb, var(--brand-2) 35%, var(--border));
  transform: translateY(-3px);
}
.contact-card-top { display: flex; align-items: center; justify-content: space-between; }
.contact-card-financials { display: flex; gap: 16px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.cf-label { display: block; font-size: 10.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }
.cf-value { display: block; font-size: 13px; font-weight: 700; margin-top: 2px; }

/* ============ Slide-over drawer ============ */
.drawer-overlay {
  position: fixed; inset: 0; background: rgba(15,17,21,.32);
  display: none; align-items: stretch; justify-content: flex-end; z-index: 100;
}
.drawer-overlay.active { display: flex; animation: overlayIn .16s var(--ease); }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }
.drawer {
  width: min(760px, 92vw); background: var(--bg); height: 100vh; overflow-y: auto;
  box-shadow: -8px 0 32px rgba(16,24,40,.18);
  animation: drawerIn .2s var(--ease);
  display: flex; flex-direction: column;
}
@keyframes drawerIn { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-topbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--border);
}
.drawer-topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand-gradient); opacity: .7;
}
.drawer-back, .drawer-close {
  width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.drawer-back:hover, .drawer-close:hover { background: var(--surface-2); }
#drawer-content { padding: 24px; flex: 1; }

.detail-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.detail-header h1 { font-family: var(--font-display); font-size: 20px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-header p { margin: 3px 0; font-size: 13px; color: var(--text-dim); }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; } }

.convert-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--accent-dim); border: 1px solid #DCDBFB; color: var(--accent-hover);
  border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; font-size: 13.5px; font-weight: 500;
}

.ad-lead-card { display: flex; gap: 14px; align-items: flex-start; }
.ad-lead-card img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); }
.ad-lead-card p { margin: 3px 0; font-size: 13px; }

.show-ad-panel { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.field-list { display: grid; grid-template-columns: 140px 1fr; gap: 4px 10px; margin: 0; }
.field-list dt { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .02em; }
.field-list dd { margin: 0; font-size: 12.5px; word-break: break-word; }

.activity-form { border-bottom: 1px solid var(--border-soft); padding-bottom: 16px; margin-bottom: 14px; }
.activity-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 10px; }

.activity-item, .timeline-item {
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px; line-height: 1.5;
}
.activity-item:last-child, .timeline-item:last-child { border-bottom: none; }
.activity-item.completed { opacity: .55; }
.ai-top { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; }
.ai-meta, .ti-meta { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.deal-link { cursor: pointer; }
.deal-link:hover { color: var(--accent); }

.attachment-upload-form { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border-soft); padding-bottom: 14px; margin-bottom: 10px; }
.attachment-upload-form input[type="file"] { flex: 1; font-size: 12.5px; color: var(--text-dim); }
.attachment-list { display: flex; flex-direction: column; }
.attachment-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.attachment-item:last-child { border-bottom: none; }
.attachment-info a { color: var(--accent); font-weight: 600; word-break: break-word; }
.attachment-info a:hover { text-decoration: underline; }

.bulk-upload-errors {
  margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--danger);
  max-height: 160px; overflow-y: auto;
}
.bulk-upload-errors li { margin-bottom: 3px; }

/* ============ Modal ============ */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,17,21,.4);
  display: none; align-items: center; justify-content: center; z-index: 200; padding: 20px;
}
.modal-overlay.active { display: flex; animation: overlayIn .15s var(--ease); }
.modal {
  position: relative; overflow-y: auto; overflow-x: hidden;
  background: var(--surface); border-radius: var(--radius-lg); padding: 24px;
  width: 100%; max-width: 460px; max-height: 88vh;
  box-shadow: var(--shadow-lg);
  animation: modalIn .16s var(--ease);
}
.modal::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--brand-gradient); opacity: .8;
}
@keyframes modalIn { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.modal h2 { font-family: var(--font-display); margin: 0 0 16px; font-size: 17px; }
.form-row { margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; }
.form-row label { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.form-row input, .form-row select, .form-row textarea {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13.5px; font-family: inherit; background: var(--surface); color: var(--text);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}
.form-row textarea { resize: vertical; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }
.checkbox-row label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.checkbox-list {
  display: flex; flex-direction: column; gap: 6px; max-height: 200px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface);
}
.checkbox-list label {
  display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 400;
  color: var(--text); text-transform: none;
}

/* ============ Branch management chips (User Management page) ============ */
.branch-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.branch-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border-radius: 20px;
  border: 1px solid var(--border); background: var(--surface-2);
  font-size: 13px; font-weight: 500; color: var(--text);
}
.chip-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: none; cursor: pointer;
  background: transparent; color: var(--text-faint); font-size: 12px; line-height: 1;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.chip-btn:hover { background: var(--surface); color: var(--text); }
.inline-add-form { display: flex; gap: 8px; align-items: center; max-width: 360px; }
.inline-add-form input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text);
}
.inline-add-form input:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ============ Organization Chart (its own page) ============
   Same light, colorful theme as the rest of the CRM — no separate dark
   panel. Sized to fill whatever vertical space is left under the header/
   designation-manager strip (see the flex-basis override right below).
   Always rendered at full (natural) size — no auto-shrinking — so an
   expanded branch never turns into unreadably tiny text; once the tree
   grows past the visible area the panel scrolls in both directions
   instead. Cards show an abbreviated name + designation only (see
   abbreviateName()/abbreviateDesignation() in app.js) — hover a card for
   the full name, designation and team/branch as a tooltip. */
#view-org-chart.active > .org-chart-scroll {
  flex: 1 1 auto; min-height: 0; flex-shrink: 1; /* the one child in this view allowed to shrink/fill, overriding the flex-shrink:0 default set above */
}
.org-chart-scroll {
  position: relative; overflow: auto; border-radius: var(--radius-lg);
  background: var(--brand-gradient-soft), var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
}
.org-chart-empty { position: relative; color: var(--text-faint); padding: 40px; font-size: 13px; }

/* margin:auto on the one child centers it (both directions) whenever it's
   smaller than the panel, same as justify-content/align-items center would
   — but unlike those, it degrades safely once the tree outgrows the panel:
   the content just settles against the start edge and everything stays
   reachable by scrolling, instead of overflowing equally off both edges
   with the far side permanently unscrollable-to. */
.org-chart-viewport { position: relative; padding: 26px 20px; margin: auto; }

.org-chart-tree, .org-chart-tree ul {
  display: flex; justify-content: center; padding-top: 26px; position: relative;
  list-style: none; margin: 0; padding-left: 0; padding-right: 0;
}
.org-chart-tree li {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; position: relative; padding: 26px 8px 0;
}
.org-chart-tree li::before, .org-chart-tree li::after {
  content: ""; position: absolute; top: 0; right: 50%;
  border-top: 2px solid var(--brand-2); width: 50%; height: 26px;
}
.org-chart-tree li::after { right: auto; left: 50%; border-left: 2px solid var(--brand-2); border-top: none; }
.org-chart-tree li::before { border-right: none; }
.org-chart-tree li:only-child { padding-top: 0; }
.org-chart-tree li:only-child::before, .org-chart-tree li:only-child::after { display: none; }
.org-chart-tree li:first-child::before { border-top: none; }
.org-chart-tree li:last-child::after { border-top: none; }
.org-chart-tree li:first-child::before,
.org-chart-tree li:not(:first-child)::before { border-top: 2px solid var(--brand-2); }
.org-chart-tree li:last-child::after,
.org-chart-tree li:not(:last-child)::after { border-top: 2px solid var(--brand-2); }
.org-chart-tree > li { padding-top: 0; }
.org-chart-tree > li::before, .org-chart-tree > li::after { display: none; }
.org-chart-tree ul::before {
  content: ""; position: absolute; top: 0; left: 50%;
  border-left: 2px solid var(--brand-2); width: 0; height: 26px;
}

.org-chart-node-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.org-chart-card {
  position: relative; display: inline-flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px 12px 8px 8px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  min-width: 128px; transition: box-shadow .15s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
  cursor: default;
}
.org-chart-card:hover {
  border-color: var(--brand-2); box-shadow: 0 4px 14px -4px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
/* Root ("top of chart") cards get a brand-gradient border to stand out,
   same visual language as the New/Add primary buttons elsewhere. */
.org-chart-tree > li > .org-chart-node-wrap > .org-chart-card {
  border: none; padding: 9px 13px 9px 9px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--brand-gradient) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 2px 10px -3px rgba(0,0,0,.12);
}
.org-chart-card-text { min-width: 0; }
.org-chart-name {
  font-weight: 600; font-size: 12.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.org-chart-title {
  font-size: 10.5px; letter-spacing: .02em; font-weight: 600;
  color: var(--brand-1); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Collapse/expand toggle — a small chip sitting on the connector line
   beneath a card, only rendered for people who have direct reports. */
.org-chart-toggle {
  margin-top: 5px; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--brand-1); font-size: 12px; line-height: 1; font-weight: 700;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: box-shadow .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease);
}
.org-chart-toggle:hover { border-color: var(--brand-2); box-shadow: 0 2px 6px -1px rgba(0,0,0,.15); transform: scale(1.08); }
.org-chart-collapsed-count {
  margin-top: 3px; font-size: 10px; color: var(--text-faint); letter-spacing: .02em;
}

/* ============ Pagination bar (Leads/Contacts/Deals table views) ============ */
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 12px 4px; font-size: 12.5px; color: var(--text-dim);
}
.pagination-info { white-space: nowrap; }
.pagination-controls { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pagination-btn {
  min-width: 30px; height: 30px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px;
}
.pagination-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.pagination-btn[disabled] { opacity: .4; cursor: not-allowed; }
.pagination-ellipsis { padding: 0 4px; color: var(--text-faint); }
.pagination-size { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.pagination-size select {
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 12.5px; font-family: inherit; background: var(--surface); color: var(--text);
}

.bulk-map-row {
  display: grid; grid-template-columns: 160px 1fr 1fr; align-items: center; gap: 10px; margin-bottom: 8px;
}
.bulk-map-row label { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.bulk-map-row select {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 13px; font-family: inherit; background: var(--surface); color: var(--text);
}
.readonly-hint {
  padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px;
  font-size: 13px; color: var(--text-dim); background: var(--surface-2);
}

.priority-radio-group { display: flex; gap: 14px; }
.priority-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; }

/* ============ ToDo agenda ============ */
.todo-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.pill-filter { display: flex; gap: 6px; }
.pill-filter .pill {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-dim);
}
.pill-filter .pill.active { background: var(--text); color: #fff; border-color: var(--text); }
.show-completed-toggle { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); }

.agenda-group { margin-bottom: 20px; }
.agenda-group-head {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--text-dim); padding: 6px 4px 10px;
}
.agenda-group-head.overdue { color: var(--danger); }
.agenda-group-items { display: flex; flex-direction: column; gap: 8px; }

.todo-item {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px 14px 12px 17px;
  transition: box-shadow .16s var(--ease), border-color .16s var(--ease);
}
.todo-item::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 3px;
  background: var(--brand-gradient); opacity: .8;
}
.todo-item:not(.completed):hover {
  box-shadow: var(--brand-glow); border-color: color-mix(in srgb, var(--brand-2) 30%, var(--border));
}
.todo-item.completed::before { opacity: .25; }
.todo-item.completed { opacity: .5; }
.todo-item.completed .todo-summary { text-decoration: line-through; }
.todo-chk { margin-top: 3px; width: 16px; height: 16px; cursor: pointer; }
.todo-icon { color: var(--text-faint); margin-top: 2px; flex-shrink: 0; }
.todo-body { flex: 1; min-width: 0; }
.todo-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.todo-summary { font-size: 13.5px; }
.todo-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ============ Settings ============ */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 860px) { .settings-grid { grid-template-columns: 1fr; } }
.stage-row {
  display: grid; grid-template-columns: 1fr auto auto auto; gap: 6px; align-items: center;
  padding: 6px 0;
}

/* ============ Rights & Templates (permissions feature) ============ */
.permission-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 4px; }
.permission-group {
  border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--surface-2);
}
.permission-group h5 {
  margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-faint);
}
.permission-group .checkbox-row { margin-bottom: 6px; }
.permission-override-row {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.permission-override-row:last-child { border-bottom: none; }
.permission-override-row > span { flex: 1 1 160px; }
.permission-override-controls { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; }
.permission-override-controls label { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--text-dim); white-space: nowrap; }
/* The overrides modal needs real width per row (a label + 3 radio options) —
   force one column instead of permission-grid's default auto-fit multi-
   column layout, which is fine for the simpler template-editor checkboxes
   but cramps this into overlapping columns. */
.permission-grid.single-col { grid-template-columns: 1fr; }
.stage-row input {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface);
}
.add-stage-form { display: flex; gap: 8px; margin-top: 12px; }
.add-stage-form input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; }

/* ============ Toasts ============ */
.toast-container {
  position: fixed; bottom: 20px; right: 20px; z-index: 300;
  display: flex; flex-direction: column; gap: 8px;
}
.toast {
  display: flex; align-items: center; gap: 9px;
  background: #16181D; color: #fff; padding: 10px 16px; border-radius: 9px;
  font-size: 13px; font-weight: 500; box-shadow: var(--shadow-lg);
  animation: toastIn .18s var(--ease);
  max-width: 320px;
}
.toast.leaving { animation: toastOut .2s var(--ease) forwards; }
.toast-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.toast.success .toast-dot { background: var(--success); }
.toast.error .toast-dot { background: var(--danger); }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes toastOut { to { transform: translateX(8px); opacity: 0; } }

/* ============ Lead assignment popups ============
   More prominent than a toast on purpose — "a lead was just assigned to
   you" is something the RM should actually notice and act on, not a
   passing confirmation. Stacks top-right, above the toast layer. */
.lead-popup-container {
  position: fixed; top: 20px; right: 20px; z-index: 320;
  display: flex; flex-direction: column; gap: 10px;
  width: min(340px, calc(100vw - 40px));
}
.lead-popup {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px 16px 14px 18px;
  animation: leadPopupIn .2s var(--ease);
}
.lead-popup::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent);
}
.lead-popup.leaving { animation: leadPopupOut .18s var(--ease) forwards; }
@keyframes leadPopupIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes leadPopupOut { to { transform: translateX(16px); opacity: 0; } }
.lead-popup-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.lead-popup-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--accent); }
.lead-popup-close {
  border: none; background: none; cursor: pointer; color: var(--text-faint); padding: 2px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.lead-popup-close:hover { color: var(--text); }
.lead-popup-name { font-size: 14.5px; font-weight: 700; margin: 4px 0 2px; }
.lead-popup-meta { font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.lead-popup-actions { display: flex; justify-content: flex-end; }

/* ============ Command palette ============ */
.cmdk-overlay {
  position: fixed; inset: 0; background: rgba(15,17,21,.4);
  display: none; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 250;
}
.cmdk-overlay.active { display: flex; animation: overlayIn .14s var(--ease); }
.cmdk-box {
  position: relative;
  width: min(560px, 92vw); background: var(--surface); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  animation: modalIn .15s var(--ease);
}
.cmdk-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; z-index: 1;
  background: var(--brand-gradient); opacity: .8;
}
.cmdk-input-wrap {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--border);
}
.cmdk-input-wrap svg { color: var(--text-faint); flex-shrink: 0; }
.cmdk-input-wrap input {
  flex: 1; border: none; outline: none; font-size: 15px; font-family: inherit; background: transparent; color: var(--text);
}
.cmdk-input-wrap kbd {
  font-family: inherit; font-size: 11px; color: var(--text-faint);
  border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px;
}
.cmdk-results { max-height: 60vh; overflow-y: auto; padding: 8px; }
.cmdk-group { margin-bottom: 6px; }
.cmdk-group-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); padding: 6px 10px;
}
.cmdk-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: 8px;
  font-size: 13.5px; text-align: left; cursor: pointer; color: var(--text);
}
.cmdk-item:hover { background: var(--surface-2); }
.cmdk-item-icon { color: var(--text-faint); flex-shrink: 0; display: flex; }
.cmdk-item-sub { margin-left: auto; font-size: 12px; color: var(--text-faint); }

/* ============ Scrollbars ============ */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #D1D5DB; border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

/* ============ Filters row (search/branch/status) ============ */
.filters-row, .toolbar { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.filters-row input[type="text"], .filters-row input[type="search"],
.toolbar input[type="text"], .toolbar input[type="search"] {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
  min-width: 220px; background: var(--surface);
}
.filters-row select, .toolbar select {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: var(--surface);
}
.checkbox-inline, .ad-only-toggle {
  display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); cursor: pointer;
}

.priority-filter-group { display: flex; gap: 6px; }
.priority-filter-group .pill, #todo-priority-filter .pill {
  padding: 6px 12px; border-radius: 20px; border: 1px solid var(--border); background: var(--surface);
  font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--text-dim);
}
.priority-filter-group .pill.active, #todo-priority-filter .pill.active {
  background: var(--brand-gradient); color: #fff; border-color: transparent; box-shadow: var(--brand-glow);
}

.stage-add-form, .add-stage-form { display: flex; gap: 8px; margin-top: 12px; }
.stage-add-form input, .add-stage-form input {
  flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}

/* ============ Mobile / responsive ============ */
@media (max-width: 880px) {
  .mobile-nav-toggle { display: flex; }

  /* Sidebar becomes an off-canvas overlay instead of a permanent column */
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 200;
    transform: translateX(-100%);
    transition: transform .22s var(--ease);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.mobile-open { transform: translateX(0); }

  .topbar { padding: 0 12px; }
  .view-title { font-size: 15px; }
  .cmdk-trigger { width: auto; padding: 8px; }
  .cmdk-trigger span, .cmdk-trigger kbd { display: none; }

  .content { padding: 14px; }
  .home-hero { display: flex; flex-direction: column; }
  .quick-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .quick-actions button { justify-content: center; }

  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: 1fr; }

  .view-header { flex-direction: column; align-items: stretch; }
  .header-actions { justify-content: space-between; }

  /* Tables scroll horizontally rather than squeezing columns unreadably narrow */
  .leads-table-view, .deals-table-view, .contacts-table-view { overflow-x: auto; }
  .leads-table-view table, .deals-table-view table, .contacts-table-view table { min-width: 640px; }

  .kanban-col { flex: 0 0 82vw; min-width: 82vw; min-height: 320px; }
  .sidebar-toggle-btn { display: none; }

  .drawer { width: 100vw; }
  .modal { max-width: 100%; margin: 0 8px; }

  .detail-grid { grid-template-columns: 1fr; }
  .perf-launch-card { flex-direction: column; align-items: stretch; text-align: center; }
}

/* ============ Auth: login screen ============ */
.login-screen {
  position: fixed; inset: 0; z-index: 500;
  display: none; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 20px;
}
.login-screen.active { display: flex; }
.login-card {
  position: relative;
  width: 100%; max-width: 380px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 28px 26px;
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--brand-gradient); opacity: .9;
}
.login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.login-brand .brand-logo { height: 64px; background: none; padding: 0; box-shadow: none; }
.login-brand .brand-crm-badge {
  color: var(--brand-1); background: var(--accent-dim);
  box-shadow: inset 0 0 0 1px rgba(11,111,89,.18);
}
.login-card h1 { font-family: var(--font-display); font-size: 20px; margin: 0 0 4px; }
.login-card .subtle { margin: 0 0 20px; }
.login-error {
  font-size: 12.5px; color: var(--danger); min-height: 16px; margin: -4px 0 4px;
}
.login-submit { width: 100%; justify-content: center; margin-top: 6px; }

/* ============ Role-based visibility ============
   .admin-only / .hide-for-acquisition elements are shown/hidden via inline
   style.display, toggled from applyRoleUI() in app.js once the logged-in
   user's role is known — kept out of CSS since these classes land on a mix
   of flex, block, and inline-block elements and a blanket display value
   here would fight each element's own layout rule. */

/* ============ Topbar user menu ============ */
.user-menu-info { padding: 8px 10px 10px; border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.user-menu-name { font-size: 13px; font-weight: 700; color: var(--text); }
.user-menu-role { font-size: 11.5px; color: var(--text-faint); text-transform: capitalize; margin-top: 2px; }
#user-menu-trigger { border: none; cursor: pointer; }
.rm-login-badge {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px;
}
.rm-login-badge.has-login { background: var(--success-dim); color: var(--success); }
.rm-login-badge.no-login { background: var(--surface-2); color: var(--text-faint); }
.role-badge {
  display: inline-flex; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
  text-transform: capitalize;
}
.role-badge.role-admin { background: var(--accent-dim); color: var(--accent-hover); }
.role-badge.role-rm { background: color-mix(in srgb, var(--brand-cyan) 15%, transparent); color: var(--brand-cyan); }
.role-badge.role-acquisition { background: var(--danger-dim); color: var(--danger); }
.role-badge.role-acquisition_rm { background: color-mix(in srgb, var(--brand-1) 15%, transparent); color: var(--brand-1); }
.role-badge.role-team_lead { background: var(--success-dim); color: var(--success); }
.role-badge.role-manager { background: color-mix(in srgb, var(--text-faint) 20%, transparent); color: var(--text-secondary, var(--text-faint)); }
.status-badge.active { background: var(--success-dim); color: var(--success); }
.status-badge.inactive { background: var(--surface-2); color: var(--text-faint); }

/* ============ Internal chat ============
   Floating launcher + panel, sits at the app-shell level (see index.html —
   it's a sibling of .app, not inside any .view) so it's reachable from
   every page. z-index 310 puts it above the toast layer (300) but below
   the lead-assignment popups (320), matching how "urgent" each layer is. */
.chat-launcher {
  position: fixed; bottom: 100px; right: 22px; z-index: 310;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow);
  align-items: center; justify-content: center;
  transition: transform .15s var(--ease);
}
/* IMPORTANT: `display` must only be set on the :not([hidden]) variant here
   and below. An unconditional `display: flex` in the base rule would beat
   the browser's built-in `[hidden] { display: none }` (author-stylesheet
   rules always win over the user-agent stylesheet, regardless of
   specificity), which silently breaks every `el.hidden = true/false` toggle
   in app.js — this was the root cause of the launcher/panel/pickers all
   being stuck visible at once. */
.chat-launcher:not([hidden]) { display: flex; }
.chat-launcher:hover { transform: translateY(-2px); }
.chat-launcher-badge {
  position: absolute; top: -2px; right: -2px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg);
}

.chat-panel {
  position: fixed; bottom: 100px; right: 22px; z-index: 310;
  width: min(360px, calc(100vw - 32px)); height: min(560px, calc(100vh - 100px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  flex-direction: column;
  animation: chatPanelIn .16s var(--ease);
}
.chat-panel:not([hidden]) { display: flex; }
@keyframes chatPanelIn { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }

.chat-panel-list, .chat-panel-thread { flex-direction: column; height: 100%; min-height: 0; }
.chat-panel-list:not([hidden]), .chat-panel-thread:not([hidden]) { display: flex; }

.chat-panel-header, .chat-thread-header {
  display: flex; align-items: center; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--border-soft); flex-shrink: 0;
  font-weight: 700; font-size: 14px; color: var(--text);
  background: var(--brand-gradient-soft);
}
.chat-panel-header span { flex: 1; }
.chat-panel-close {
  border: none; background: none; cursor: pointer; color: var(--text-faint); padding: 4px;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.chat-panel-close:hover { color: var(--text); background: rgba(0,0,0,.05); }

.chat-tabs { display: flex; gap: 4px; padding: 8px 10px 0; flex-shrink: 0; }
.chat-tab {
  flex: 1; border: none; background: var(--surface-2); color: var(--text-dim);
  font-size: 12.5px; font-weight: 600; padding: 7px 0; border-radius: 8px; cursor: pointer;
}
.chat-tab.active { background: var(--brand-gradient); color: #fff; }

.chat-list-toolbar { display: flex; gap: 6px; padding: 8px 10px 0; flex-shrink: 0; }
.chat-new-btn {
  display: flex; align-items: center; gap: 5px; border: 1px dashed var(--border); background: none;
  color: var(--brand-1); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer;
}
.chat-new-btn:hover { background: var(--accent-dim); border-style: solid; }

.chat-new-dm-search { flex-shrink: 0; border-bottom: 1px solid var(--border-soft); padding-bottom: 6px; }
.chat-new-dm-search-row { display: flex; align-items: center; gap: 4px; padding: 8px 10px 6px; }
.chat-new-dm-search-row input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; font-size: 12.5px;
  background: var(--surface-2);
}
.chat-new-dm-search-row input:focus { outline: none; border-color: var(--brand-2); background: var(--surface); }
.chat-new-dm-results { max-height: 220px; overflow-y: auto; padding: 0 8px; }
.chat-new-dm-results .chat-conversation-empty { padding: 12px; }

.chat-conversation-list { flex: 1; overflow-y: auto; padding: 8px; min-height: 0; }
.chat-conversation-item {
  display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; cursor: pointer;
}
.chat-conversation-item:hover { background: var(--surface-2); }
.chat-conversation-text { flex: 1; min-width: 0; }
.chat-conversation-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.chat-conversation-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conversation-time { font-size: 10px; color: var(--text-faint); flex-shrink: 0; }
.chat-conversation-sub { font-size: 11.5px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conversation-badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.chat-conversation-empty { padding: 24px 12px; text-align: center; color: var(--text-faint); font-size: 12.5px; }

.chat-thread-header .chat-thread-title { flex: 1; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-thread-manage {
  border: none; background: none; cursor: pointer; color: var(--text-faint); padding: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; border-radius: 6px;
}
.chat-thread-manage:hover { color: var(--brand-1); background: rgba(0,0,0,.05); }
.chat-thread-back { border: none; background: none; cursor: pointer; color: var(--text-dim); display: flex; align-items: center; justify-content: center; padding: 4px; border-radius: 6px; }
.chat-thread-back:hover { background: rgba(0,0,0,.05); }

.chat-thread-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; min-height: 0; background: var(--surface-2); }
.chat-msg { max-width: 78%; display: flex; flex-direction: column; gap: 2px; }
.chat-msg.mine { align-self: flex-end; align-items: flex-end; }
.chat-msg.theirs { align-self: flex-start; align-items: flex-start; }
.chat-msg-sender { font-size: 10.5px; font-weight: 700; color: var(--brand-1); padding: 0 4px; }
.chat-bubble { padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.4; word-break: break-word; box-shadow: var(--shadow-sm); }
.chat-msg.mine .chat-bubble { background: var(--brand-gradient); color: #fff; border-bottom-right-radius: 3px; }
.chat-msg.theirs .chat-bubble { background: var(--surface); color: var(--text); border: 1px solid var(--border-soft); border-bottom-left-radius: 3px; }
.chat-bubble a { color: inherit; text-decoration: underline; }
.chat-bubble.sticker-bubble { background: none !important; border: none !important; box-shadow: none !important; padding: 0; font-size: 42px; line-height: 1; }
.chat-bubble img.chat-media, .chat-bubble video.chat-media { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; }
.chat-bubble audio.chat-media { width: 220px; }
.chat-file-card { display: flex; align-items: center; gap: 8px; padding: 4px 2px; text-decoration: none; color: inherit; }
.chat-file-card svg { flex-shrink: 0; opacity: .8; }
.chat-file-name { font-size: 12.5px; font-weight: 600; word-break: break-all; }
.chat-file-size { font-size: 10.5px; opacity: .75; }
.chat-msg-time { font-size: 9.5px; color: var(--text-faint); padding: 0 4px; }
.chat-thread-empty { margin: auto; color: var(--text-faint); font-size: 12.5px; text-align: center; }

.chat-picker {
  flex-wrap: wrap; gap: 4px; padding: 8px 10px; max-height: 120px; overflow-y: auto;
  border-top: 1px solid var(--border-soft); flex-shrink: 0;
}
.chat-picker:not([hidden]) { display: flex; }
.chat-picker button { border: none; background: none; cursor: pointer; font-size: 20px; padding: 4px; border-radius: 6px; line-height: 1; }
.chat-picker button:hover { background: var(--surface-2); }

.chat-thread-composer { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-top: 1px solid var(--border-soft); flex-shrink: 0; }
.chat-composer-btn { border: none; background: none; cursor: pointer; color: var(--text-faint); padding: 6px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.chat-composer-btn:hover, .chat-composer-btn.active { color: var(--brand-1); background: var(--accent-dim); }
.chat-thread-composer input[type=text] {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px;
  background: var(--surface-2);
}
.chat-thread-composer input[type=text]:focus { outline: none; border-color: var(--brand-2); background: var(--surface); }
.chat-composer-send {
  border: none; cursor: pointer; width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-gradient); color: #fff; display: flex; align-items: center; justify-content: center;
}
.chat-composer-send:disabled { opacity: .5; cursor: default; }
.chat-upload-progress { padding: 4px 12px 8px; font-size: 11px; color: var(--text-faint); flex-shrink: 0; }

@media (max-width: 480px) {
  .chat-panel { right: 12px; left: 12px; width: auto; bottom: 12px; height: min(70vh, 560px); }
  .chat-launcher { right: 16px; bottom: 16px; }
}

/* ============ Dialer ============
   Same floating launcher+panel pattern as Internal Chat above, stacked
   directly above the chat launcher (bottom: 88px vs chat's 22px — a 54px
   button + 12px gap) so the two never overlap. Uses the same [hidden]
   cascade-safety rule (`display` only set on the :not([hidden]) variant —
   see the long comment on .chat-launcher above for why that matters). */
.dialer-launcher {
  position: fixed; bottom: 166px; right: 22px; z-index: 310;
  width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand-gradient); color: #fff; box-shadow: var(--brand-glow);
  align-items: center; justify-content: center;
  transition: transform .15s var(--ease);
  touch-action: none;
}
.dialer-launcher:not([hidden]) { display: flex; }
.dialer-launcher:hover { transform: translateY(-2px); }

.dialer-panel {
  position: fixed; bottom: 166px; right: 22px; z-index: 310;
  width: min(320px, calc(100vw - 32px)); height: min(520px, calc(100vh - 100px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  flex-direction: column;
  animation: chatPanelIn .16s var(--ease);
}
.dialer-panel:not([hidden]) { display: flex; }

.dialer-tab-pane { flex: 1; min-height: 0; flex-direction: column; padding: 14px; gap: 14px; }
.dialer-tab-pane:not([hidden]) { display: flex; }

#dialer-number-display {
  width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px;
  font-size: 20px; font-weight: 600; letter-spacing: 1px; text-align: center;
  background: var(--surface-2); color: var(--text); flex-shrink: 0;
}
#dialer-number-display:focus { outline: none; border-color: var(--brand-2); background: var(--surface); }

.dialer-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; flex-shrink: 0;
}
.dialer-key {
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text);
  font-size: 18px; font-weight: 600; padding: 14px 0; border-radius: 12px; cursor: pointer;
}
.dialer-key:hover { background: var(--accent-dim); border-color: var(--brand-2); }
.dialer-key:active { transform: scale(.96); }

.dialer-actions { display: flex; align-items: center; justify-content: center; gap: 20px; flex-shrink: 0; }
.dialer-backspace {
  border: none; background: none; cursor: pointer; color: var(--text-faint); padding: 10px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dialer-backspace:hover { color: var(--text); background: rgba(0,0,0,.05); }
.dialer-call-btn {
  border: none; cursor: pointer; width: 56px; height: 56px; border-radius: 50%;
  background: var(--success, #22a55f); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.dialer-call-btn:disabled { opacity: .4; cursor: default; }
.dialer-call-btn:not(:disabled):hover { transform: translateY(-1px); }

.dialer-status { font-size: 12px; color: var(--text-faint); text-align: center; flex-shrink: 0; }
.dialer-status.error { color: var(--danger); }
.dialer-status.success { color: var(--success, #22a55f); }

.dialer-stats-bar {
  display: flex; gap: 10px; padding: 10px 14px; flex-shrink: 0;
  border-bottom: 1px solid var(--border-soft); background: var(--surface-2);
}
.dialer-stat { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.dialer-stat-value { font-size: 16px; font-weight: 700; color: var(--text); }
.dialer-stat-label { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: .03em; }

.dialer-active-call {
  display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0;
  padding: 6px 0 2px;
}
.dialer-active-call-timer {
  font-size: 22px; font-weight: 700; color: var(--brand-1); font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.dialer-active-call-sub { font-size: 11.5px; color: var(--text-faint); }
/* Who's being dialled (set by quickCallFromRow() in app_v4.js): Lead name /
   "client code · name" above the number in the dial box, and at the top of
   the live-call box. Both elements stay [hidden] until a label is known. */
.dialer-callee-label {
  font-size: 14px; font-weight: 700; color: var(--text); text-align: center; flex-shrink: 0;
  margin-bottom: -6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dialer-active-call-name {
  font-size: 14px; font-weight: 700; color: var(--text); text-align: center; max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The open panel's header doubles as a drag handle (see wireDialerDrag() in app_v4.js). */
#dialer-panel .chat-panel-header { cursor: move; touch-action: none; user-select: none; }
#dialer-panel .chat-panel-header button { cursor: pointer; }

.dialer-history-filters { display: flex; gap: 6px; padding: 8px 10px 4px; flex-shrink: 0; overflow-x: auto; }
.dialer-filter-pill {
  flex-shrink: 0; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-soft);
  background: var(--surface); color: var(--text-faint); font-size: 11.5px; font-weight: 600;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.dialer-filter-pill.active { background: var(--brand-gradient); color: #fff; border-color: transparent; }

.dialer-history-list { flex: 1; overflow-y: auto; min-height: 0; }
.dialer-history-group-label {
  font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: .04em;
  padding: 10px 2px 6px;
}
.dialer-history-item { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid var(--border-soft); }
.dialer-history-icon { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dialer-history-icon.dialled { background: var(--accent-dim); color: var(--brand-1); }
.dialer-history-icon.received { background: var(--success-dim); color: var(--success); }
.dialer-history-icon.missed { background: var(--danger-dim, #fde2e2); color: var(--danger); }
.dialer-history-text { flex: 1; min-width: 0; }
.dialer-history-name { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dialer-history-sub { font-size: 11px; color: var(--text-faint); }
.dialer-history-time { font-size: 11px; color: var(--text-faint); flex-shrink: 0; }
.dialer-history-empty { padding: 24px 12px; text-align: center; color: var(--text-faint); font-size: 12.5px; }

/* WebRTC softphone (static/webrtc-dialer.js) additions — registration
   status pill in the panel header, and real call-control buttons
   (hangup/hold/mute/transfer) that only a native SIP call can support.
   REST-only click-to-call (routes_calls.py's original path, still the
   fallback whenever an RM has no SIP password configured) has none of
   these controls, so .dialer-call-controls stays hidden for those calls —
   see webrtc-dialer.js's wireWebrtcCallControls(). */
.dialer-reg-status {
  /* .chat-panel-header span sets flex:1 on every span child (title
     included) — override it here so this pill doesn't stretch/compete
     with the "Dialer" title for width; it should hug its own content. */
  flex: 0 0 auto !important;
  display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-faint);
  flex-shrink: 0; padding: 0 2px; max-width: 45%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dialer-reg-status .dialer-reg-label { overflow: hidden; text-overflow: ellipsis; }
.dialer-reg-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--text-faint); flex-shrink: 0;
  transition: background .2s;
}
.dialer-reg-status.registered .dialer-reg-dot { background: var(--success, #22a55f); }
.dialer-reg-status.failed .dialer-reg-dot { background: var(--danger); }

.dialer-call-controls {
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-shrink: 0;
  padding-top: 6px;
}
.dialer-control-btn {
  border: none; cursor: pointer; width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); color: var(--text); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-soft); transition: background .15s, color .15s, border-color .15s;
}
.dialer-control-btn:hover { background: var(--accent-dim); border-color: var(--brand-2); }
.dialer-control-btn.active { background: var(--brand-gradient); color: #fff; border-color: transparent; }
.dialer-control-btn.hangup { background: var(--danger); color: #fff; border-color: transparent; }
.dialer-control-btn.hangup:hover { filter: brightness(1.08); }
.dialer-control-btn:disabled { opacity: .35; cursor: default; }

.dialer-transfer-row {
  display: flex; gap: 6px; padding: 6px 0 0; flex-shrink: 0;
}
.dialer-transfer-row input {
  flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 7px 9px; font-size: 12.5px;
  background: var(--surface-2); color: var(--text);
}
.dialer-transfer-row button {
  border: 1px solid var(--border-soft); background: var(--surface-2); color: var(--text);
  border-radius: 8px; padding: 0 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.dialer-transfer-row button:hover { background: var(--accent-dim); border-color: var(--brand-2); }

@media (max-width: 480px) {
  .dialer-panel { right: 12px; left: 12px; width: auto; bottom: 82px; height: min(60vh, 480px); }
  .dialer-launcher { right: 16px; bottom: 78px; }
}
#dialer-pane-dial {
  position: relative;
}
#dialer-active-call {
  position: absolute;
  inset: 0;
  z-index: 5;
}
#dialer-pane-dial:has(#dialer-active-call:not([hidden])) .dialer-keypad {
  visibility: hidden;
}
#dialer-active-call[hidden] { display: none; }
#dialer-active-call { background: var(--surface); }

#dialer-incoming-actions[hidden] { display: none; }
#dialer-active-call { justify-content: center; gap: 18px; padding: 16px 20px; }
#dialer-active-call-timer { font-size: 34px; }
#dialer-call-controls { gap: 22px; padding-top: 4px; }
#dialer-call-controls .dialer-control-btn { width: 54px; height: 54px; }

.dialer-panel { height: min(528px, calc(100vh - 92px)); }
#dialer-reg-status { max-width: none; overflow: visible; }
.dialer-reg-dot { display: inline-block; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; }
.dialer-reg-status.registered .dialer-reg-dot { background: var(--success, #22a55f); box-shadow: 0 0 0 4px rgba(34, 165, 95, .18); }
.dialer-reg-status.failed .dialer-reg-dot { background: var(--danger); box-shadow: 0 0 0 4px rgba(220, 38, 38, .18); }
#dialer-reg-status .dialer-reg-dot { flex: 0 0 8px; width: 8px; height: 8px; }
#dialer-call-controls[hidden] { display: none; }
#dialer-transfer-row[hidden] { display: none; }
#dialer-incoming-actions { gap: 10px; }
#dialer-incoming-actions .btn { flex: 1 1 0; min-height: 48px; padding: 12px 16px; font-size: 15px; border-radius: 10px; }
#dialer-btn-decline { background: var(--danger); border-color: transparent; color: #fff; }
#dialer-btn-decline:hover { filter: brightness(0.92); }

#dialer-call-waiting { display: none; align-items: center; gap: 10px; position: absolute; left: 12px; right: 12px; top: 12px; z-index: 20; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; box-shadow: var(--shadow-lg); }
#dialer-call-waiting:not([hidden]) { display: flex; }
#dialer-call-waiting .dialer-call-waiting-text { flex: 1 1 auto; font-size: 13px; font-weight: 600; color: var(--text); }
#dialer-call-waiting .btn { padding: 8px 12px; font-size: 13px; }
#dialer-call-waiting-decline { background: var(--danger); border-color: transparent; color: #fff; }

#dialer-held-indicator { display: none; align-items: center; gap: 10px; position: absolute; left: 12px; right: 12px; top: 64px; z-index: 19; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; box-shadow: var(--shadow-lg); }
#dialer-held-indicator:not([hidden]) { display: flex; }
#dialer-held-indicator .dialer-held-indicator-text { flex: 1 1 auto; font-size: 12px; font-weight: 600; color: var(--text); }
#dialer-held-indicator .btn { padding: 6px 10px; font-size: 12px; }

/* Collapsible filters block (search + Ad-leads-only + stage pills +
   branch/team/RM/source/date row) for Leads/Contacts/Deals -- hidden by
   default, shown via the "Filters" toggle button app_v4.js adds to each
   view's header-actions row. Explicit user request (session 31): this
   block was taking up a lot of vertical space. */
.view.filters-collapsed > .toolbar,
.view.filters-collapsed > .stage-pill-bar,
.view.filters-collapsed > .tb-filter-bar-wrap {
  display: none !important;
}
.filters-toggle-btn { display: inline-flex; align-items: center; gap: 6px; }
.filters-toggle-btn .chev { display: inline-block; transition: transform .15s var(--ease); font-size: 11px; }
.filters-toggle-btn.expanded { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-hover); }
.filters-toggle-btn.expanded .chev { transform: rotate(180deg); }

/* Contacts grid (card) mode gets the same "pin to viewport, scroll inside"
   treatment table and board modes already have: the card area scrolls, the
   pagination bar stays put beneath it. Before this, grid mode had neither -
   cards ran off the bottom with no scrollbar and no way to the next 50. */
.content:has(.view.active[data-mode="grid"]) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.view[data-mode="grid"].active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
[data-mode="grid"] .contacts-grid-view { flex: 1; min-height: 0; overflow-y: auto; align-content: start; padding-right: 4px; }