/* ════════════════════════════════════════════════════════════════
   PySquad CRM — design system
   Calm, low-strain palette for all-day use: soft teal accent, airy
   neutrals, gentle shadows, generous radii. One token set themes every
   page (bm- components + the Bootstrap compatibility layer below).
════════════════════════════════════════════════════════════════ */
:root {
  --white:#ffffff; --off:#f4f7f6; --off2:#eef2f1;
  --border:#e6ebe9; --border2:#d4dcd9;
  --black:#1b2430; --dark:#2a3340; --muted:#6c7680; --muted2:#9aa4ad;
  /* RevIQ calm teal; a tenant's own primary_color still overrides in base.html */
  --accent:#2c8a7d; --accent2:#23665c; --accent-light:#e9f4f1; --accent-mid:#cfe7e1;
  --green:#16a34a; --green-light:#dcfce7;
  --amber:#d97706; --amber-light:#fef3c7;
  --red:#dc2626; --red-light:#fee2e2;
  --blue:#2563eb; --blue-light:#dbeafe;
  --sidebar-w:240px; --header-h:60px;
  --radius:12px; --radius-lg:16px;
  --shadow:0 1px 2px rgba(20,45,40,.04),0 6px 20px rgba(20,45,40,.05);
  --shadow-lg:0 14px 40px rgba(20,45,40,.10);
  --transition:all .18s ease;
}

* { box-sizing:border-box; }
html, body {
  /* The kanban board scrolls sideways within its own .kanban element
     (overflow-x:auto below) — the page itself must never also scroll
     horizontally, or dragging that inner scrollbar drags the topbar,
     sticky filter bar and fixed sidebar out of view along with it. */
  overflow-x:hidden;
}
body {
  margin:0; background:var(--off); color:var(--dark);
  font-family:'Sora','Inter',system-ui,-apple-system,sans-serif;
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a { color:var(--accent2); text-decoration:none; }
a:hover { text-decoration:underline; }

/* ── Shell ── */
.bm-layout { display:flex; min-height:100vh; }

.bm-sidebar {
  width:var(--sidebar-w); background:var(--white);
  border-right:1px solid var(--border);
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:100;
  transition:var(--transition);
}
.bm-sidebar-logo {
  height:var(--header-h); display:flex; align-items:center;
  padding:0 18px; border-bottom:1px solid var(--border); gap:10px;
}
.bm-logo-mark {
  width:30px; height:30px; border-radius:9px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:800; font-size:12px; letter-spacing:.02em; flex-shrink:0;
}
.bm-logo-text { font-weight:700; font-size:22px; color:var(--dark); letter-spacing:.02em; }
.bm-logo-text span { color:var(--accent); }

/* Active workspace: its own row under the logo bar, which is a fixed-height
   flex row and cannot host a second line. */
.bm-workspace { padding:10px 14px; border-bottom:1px solid var(--border); }
.bm-workspace-name {
  font-size:13px; font-weight:600; color:var(--dark);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bm-workspace-name i { color:var(--muted2); margin-right:6px; }

.bm-nav { flex:1; padding:10px 10px; overflow-y:auto; }
/* The nav is the one pane that reliably overflows (a workspace with every
   module on runs past the viewport), and macOS/iOS paint overlay scrollbars
   that stay invisible until something is already scrolling - so there was no
   standing hint that the list continued below the fold. Styling
   ::-webkit-scrollbar opts this element out of overlay mode in Chrome/Safari;
   scrollbar-width/color does the same job in Firefox. */
.bm-nav { scrollbar-width:thin; scrollbar-color:var(--border2) transparent; }
.bm-nav::-webkit-scrollbar { width:10px; }
.bm-nav::-webkit-scrollbar-track { background:transparent; }
.bm-nav::-webkit-scrollbar-thumb {
  background:var(--border2); border-radius:10px;
  /* Transparent border + background-clip keeps the visible thumb at 6px
     while the grab target stays the full 10px. */
  border:2px solid transparent; background-clip:content-box;
}
.bm-nav:hover::-webkit-scrollbar-thumb { background:var(--muted2); background-clip:content-box; }
.bm-nav-label {
  font-size:10px; font-weight:700; color:var(--muted2);
  text-transform:uppercase; letter-spacing:.12em; padding:12px 10px 6px;
}
.bm-nav-item {
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--radius); color:var(--muted);
  font-size:13px; font-weight:500; cursor:pointer; transition:var(--transition);
  margin-bottom:2px; position:relative;
}
.bm-nav-item i { font-size:16px; width:18px; text-align:center; flex-shrink:0; }
.bm-nav-item:hover { background:var(--off2); color:var(--dark); text-decoration:none; }
.bm-nav-item.active { background:var(--accent-light); color:var(--accent2); font-weight:600; }
.bm-nav-item.active i { color:var(--accent); }
.bm-nav-item.active::before { content:""; position:absolute; left:-2px; top:8px; bottom:8px; width:3px; border-radius:3px; background:var(--accent); }
.bm-nav-badge {
  margin-left:auto; background:var(--accent); color:#fff; font-size:10px;
  font-weight:700; padding:1px 7px; border-radius:20px; min-width:18px; text-align:center;
}
.bm-nav-badge--alert { background:var(--red); }

.bm-sidebar-footer { border-top:1px solid var(--border); padding:10px 8px; }
.bm-user-row { display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; }
.bm-user-row:hover { background:var(--off); }
.bm-avatar {
  width:34px; height:34px; border-radius:9px; background:var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.bm-user-info { flex:1; min-width:0; }
.bm-user-name { font-size:13px; font-weight:600; color:var(--dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bm-user-role { font-size:11px; color:var(--muted2); }
.bm-action-btn {
  display:flex; align-items:center; justify-content:center; width:30px; height:30px;
  border-radius:7px; color:var(--muted2); font-size:15px; transition:var(--transition);
}
.bm-action-btn:hover { background:#e5e7eb; color:var(--dark); text-decoration:none; }
.bm-action-btn.active { background:var(--accent-light); color:var(--accent); }
.bm-action-btn--logout:hover { background:var(--red-light); color:var(--red); }

/* ── Lead detail tabs ── */
.lead-tabs { display:flex; gap:0; flex-wrap:wrap; border-bottom:2px solid var(--border); margin-bottom:0; padding:0; list-style:none; }
.lead-tabs .nav-item { list-style:none; }
.lead-tabs .nav-link {
  display:inline-flex; align-items:center; gap:6px; padding:10px 16px;
  color:var(--muted); font-size:13px; font-weight:600; background:transparent;
  border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  border-radius:8px 8px 0 0; transition:var(--transition); white-space:nowrap;
}
.lead-tabs .nav-link:hover:not(.active) { color:var(--dark); background:var(--off2); }
.lead-tabs .nav-link.active { color:var(--accent2); border-bottom-color:var(--accent); }
.lead-tabs .nav-link i { font-size:13px; }
.lead-tab-content { padding-top:24px; }

/* ── Lead timeline (auto-captured change history) ── */
.lead-timeline-day { margin-bottom:8px; }
.lead-timeline-date {
  text-align:center; font-size:12px; font-weight:600; color:var(--muted2);
  border-bottom:1px solid var(--border); line-height:0.1em; margin:20px 0 14px;
}
.lead-timeline-day:first-child .lead-timeline-date { margin-top:0; }
.lead-timeline-date span { background:var(--white); padding:0 12px; }
.lead-timeline-entry { display:flex; gap:12px; padding:10px 0; border-bottom:1px solid var(--off2); }
.lead-timeline-entry:last-child { border-bottom:none; }
.lead-timeline-body { flex:1; min-width:0; }
.lead-timeline-head { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:2px; }
.lead-timeline-summary { font-size:13px; color:var(--dark); line-height:1.5; }

/* ── Settings tabs ── */
.settings-tabs { display:flex; gap:8px; flex-wrap:wrap; padding:0; margin-bottom:20px; }
.settings-tabs .nav-item { list-style:none; }
.settings-tabs .nav-link { color:var(--muted); font-size:13px; font-weight:600;
  padding:8px 16px; border-radius:999px; border:1px solid var(--border); background:var(--white); }
.settings-tabs .nav-link i { margin-right:6px; }
.settings-tabs .nav-link:hover:not(.active) { background:var(--off2); color:var(--dark); }
.settings-tabs .nav-link.active { color:#fff; background:var(--accent); border-color:var(--accent); }

/* ── Main + topbar ── */
.bm-main { margin-left:var(--sidebar-w); flex:1; min-width:0; display:flex; flex-direction:column; min-height:100vh; }
.bm-topbar {
  height:var(--header-h); background:var(--white); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; position:sticky; top:0; z-index:50; gap:16px;
}
.bm-topbar-title { font-size:15px; font-weight:700; color:var(--dark); }
.bm-topbar-right { display:flex; align-items:center; gap:10px; margin-left:auto; }
.bm-tenant-chip {
  display:flex; align-items:center; gap:8px; padding:6px 12px;
  background:var(--off); border:1px solid var(--border); border-radius:20px; font-size:12px; font-weight:600; color:var(--dark);
}
.bm-tenant-chip i { color:var(--accent); }

.bm-content { flex:1; min-width:0; padding:28px; max-width:1500px; }

/* ── Dashboard fixed-viewport layout ── */
.dashboard-content {
  height:calc(100vh - var(--header-h));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-bottom:16px;
}
.dash-bottom { flex:1; min-height:0; overflow:hidden; }

/* ── Lead form: fixed-viewport, 3-column, no page scroll ──
   Was one long centered column with wasted side gutters, so adding a field
   meant more scrolling. Full width, three columns side by side; each column
   scrolls on its own only if its own content overflows (a long label list),
   the page itself never does. */
.leadform-content {
  /* .bm-content sets flex:1 (flex-basis:0%), which ignores this block's own
     height and instead hugs its children's natural size — the parent chain
     (.bm-main) has no definite height for flex-grow to distribute against.
     flex:0 0 auto switches this element back to using `height` as its
     flex-basis directly, so it actually clips at the viewport instead of
     silently growing the whole page. */
  flex:0 0 auto;
  height:calc(100vh - var(--header-h));
  overflow:hidden;
  display:flex;
  flex-direction:column;
  padding-bottom:16px;
  max-width:none;
}
.leadform-head { flex:0 0 auto; }
.leadform-grid {
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
  overflow:hidden;
}
.leadform-col { display:flex; flex-direction:column; gap:14px; min-height:0; overflow-y:auto; padding-right:2px; }
/* Default .bm-card padding (22px 24px) is fine for one card alone; stacking
   2-3 per column eats the vertical budget this layout is trying to save. */
.leadform-col .bm-card { padding:16px 18px; }
.leadform-col .bm-card-title { margin-bottom:12px !important; }
.leadform-actions { flex:0 0 auto; padding-top:14px; display:flex; gap:8px; }
@media (max-width:1200px){
  .leadform-content { height:auto; overflow:visible; flex:1 1 auto; }
  .leadform-grid { grid-template-columns:1fr; overflow:visible; }
  .leadform-col { overflow-y:visible; }
}
.dash-bottom > .row { height:100%; }
.dash-card-full { height:100%; display:flex; flex-direction:column; }
.dash-card-scroll { flex:1; min-height:0; overflow-y:auto; }

/* Pagination bar */
.pg-bar { display:flex; align-items:center; gap:8px; padding-top:10px; margin-top:6px; border-top:1px solid var(--border); }
.pg-info { font-size:12px; color:var(--muted); flex:1; text-align:center; }
.pg-btn { display:inline-flex; align-items:center; gap:4px; padding:4px 12px; border:1px solid var(--border2); border-radius:7px; background:var(--white); color:var(--dark); font-size:12px; font-weight:600; cursor:pointer; transition:var(--transition); }
.pg-btn:hover:not(:disabled) { background:var(--off2); border-color:var(--accent-mid); }
.pg-btn:disabled { opacity:.38; cursor:default; }

.bm-page-head { margin-bottom:20px; }
.bm-page-title { font-size:20px; font-weight:700; color:var(--dark); margin:0; }
.bm-page-sub { font-size:13px; color:var(--muted); margin-top:3px; }

/* ── Cards / stats ── */
.bm-card { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px 24px; box-shadow:var(--shadow); }
.bm-card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; }
.bm-card-title { font-size:14px; font-weight:700; color:var(--dark); }
.bm-card-sub { font-size:12px; color:var(--muted2); margin-top:2px; }

.bm-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
@media (max-width:1200px){ .bm-stat-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .bm-stat-grid{ grid-template-columns:1fr; } }
/* 8 KPI cards in a single row (compact) */
.bm-stat-grid--5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:1200px){ .bm-stat-grid--5{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .bm-stat-grid--5{ grid-template-columns:1fr; } }

.bm-stat-grid--8 { grid-template-columns:repeat(8,1fr); gap:12px; }
.bm-stat-grid--8 .bm-stat { padding:14px 14px; }
.bm-stat-grid--8 .bm-stat-icon { width:32px; height:32px; font-size:15px; margin-bottom:8px; }
.bm-stat-grid--8 .bm-stat-value { font-size:20px; margin-top:4px; }
@media (max-width:1400px){ .bm-stat-grid--8{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:900px){ .bm-stat-grid--8{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .bm-stat-grid--8{ grid-template-columns:1fr; } }
.bm-stat { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; box-shadow:var(--shadow); transition:var(--transition); }
.bm-stat:hover { border-color:var(--accent-mid); box-shadow:var(--shadow-lg); }
.bm-stat-label { font-size:11px; font-weight:600; color:var(--muted2); text-transform:uppercase; letter-spacing:.06em; }
.bm-stat-value { font-size:26px; font-weight:700; color:var(--dark); margin-top:6px; letter-spacing:-.01em; }
.bm-stat-icon { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:18px; background:var(--accent-light); color:var(--accent); margin-bottom:10px; }
/* A whole card is the click target, not just a small link inside it. */
a.bm-stat-link { display:block; text-decoration:none; color:inherit; }
a.bm-stat-link:hover { border-color:var(--accent); transform:translateY(-1px); }
a.bm-stat-link:hover .bm-card-sub { color:var(--accent); }
a.bm-stat-link:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* ── Table ── */
.bm-table-wrap { overflow-x:auto; border-radius:var(--radius-lg); border:1px solid var(--border); box-shadow:var(--shadow); background:var(--white); }
.bm-table { width:100%; border-collapse:collapse; background:var(--white); }
.bm-table thead tr { background:var(--off); border-bottom:1px solid var(--border); }
.bm-table th { padding:11px 16px; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; text-align:left; white-space:nowrap; }
.bm-table td { padding:13px 16px; font-size:13px; color:var(--dark); border-bottom:1px solid var(--border); vertical-align:middle; }
.bm-table tbody tr:last-child td { border-bottom:none; }
.bm-table tbody tr { transition:var(--transition); }
.bm-table tbody tr:hover { background:var(--off); }
.bm-row-click { cursor:pointer; }

/* ── Badges ── */
.bm-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:600; }
.bm-badge-green,.bm-badge-success { background:var(--green-light); color:#15803d; }
.bm-badge-amber,.bm-badge-warning { background:var(--amber-light); color:#92400e; }
.bm-badge-red,.bm-badge-danger { background:var(--red-light); color:#991b1b; }
.bm-badge-blue,.bm-badge-info { background:var(--blue-light); color:#1d4ed8; }
.bm-badge-accent { background:var(--accent-light); color:var(--accent); }
.bm-badge-gray,.bm-badge-secondary { background:var(--off2); color:var(--muted); }
/* Toggleable label chips (pickers) */
.label-check { cursor:pointer; user-select:none; margin:0; }
.label-check input { position:absolute; opacity:0; pointer-events:none; }
.label-check .bm-badge, .label-check .bm-tag { opacity:.4; transition:opacity .12s, box-shadow .12s; }
.label-check input:checked + .bm-badge, .label-check input:checked + .bm-tag { opacity:1; box-shadow:0 0 0 1.5px currentColor inset; }
.label-check input:disabled ~ .bm-badge, .label-check input:disabled ~ .bm-tag { cursor:default; }
.bm-badge-purple { background:#f3e8ff; color:#7e22ce; }
.bm-badge-teal { background:#ccfbf1; color:#0f766e; }
.bm-badge-pink { background:#fce7f3; color:#be185d; }

/* ── Buttons ── */
/* Uniform sizing: every button shares one height + horizontal padding so rows of
   buttons line up. bm-btn-sm is the only smaller variant (icon/table actions). */
.bm-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; padding:0 18px; border-radius:8px; font-size:14px; font-weight:600; line-height:1; cursor:pointer; border:none; transition:var(--transition); font-family:inherit; text-decoration:none; white-space:nowrap; }
.bm-btn:hover { text-decoration:none; }
.bm-btn-primary { background:var(--accent); color:#fff; }
.bm-btn-primary:hover { background:var(--accent2); transform:translateY(-1px); box-shadow:0 4px 16px rgba(44,138,125,.28); color:#fff; }
.bm-btn-outline { background:transparent; color:var(--dark); border:1px solid var(--border2); }
.bm-btn-outline:hover { background:var(--off); border-color:var(--accent-mid); }
.bm-btn-danger { background:var(--red-light); color:var(--red); border:1px solid #fca5a5; }
.bm-btn-danger:hover { background:var(--red); color:#fff; }
.bm-btn-success { background:var(--green); color:#fff; }
.bm-btn-success:hover { background:#15803d; transform:translateY(-1px); color:#fff; }
.bm-btn-sm { min-height:32px; padding:0 12px; font-size:12.5px; }
.bm-btn-block { width:100%; justify-content:center; }

/* ── Progress / gauge ── */
.bm-progress { height:8px; background:var(--off2); border-radius:20px; overflow:hidden; }
.bm-progress-bar { height:100%; background:var(--accent); border-radius:20px; }

/* ── Pipeline timeline / agent steps ── */
.agent-step { border-left:3px solid var(--border); padding-left:12px; padding-top:6px; padding-bottom:6px; }
.agent-step.done { border-left-color:var(--green); }
.agent-step.running { border-left-color:var(--blue); }
.agent-step.failed { border-left-color:var(--red); }
pre.io { background:#0d1117; color:#c9d1d9; padding:.75rem; border-radius:.5rem; max-height:340px; overflow:auto; font-size:.78rem; }

/* ── Forms ── */
.bm-label { display:block; font-size:14px; font-weight:600; color:var(--dark); margin-bottom:6px; }
.bm-help { font-size:12.5px; color:var(--muted2); margin-top:5px; }
.bm-input, .bm-textarea, .bm-select {
  width:100%; padding:11px 14px; border:1px solid var(--border2); border-radius:9px;
  font-size:15px; font-family:inherit; color:var(--dark); background:var(--white); transition:var(--transition);
}
.bm-input:focus,.bm-textarea:focus,.bm-select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }

/* ── Alerts ── */
.bm-alert { padding:12px 16px; border-radius:10px; font-size:13px; border:1px solid; margin-bottom:14px; display:flex; gap:10px; align-items:flex-start; }
.bm-alert i { margin-top:2px; }
.bm-alert-info { background:var(--accent-light); border-color:var(--accent-mid); color:var(--accent2); }
.bm-alert-success { background:var(--green-light); border-color:#bbf7d0; color:#166534; }
.bm-alert-warning { background:var(--amber-light); border-color:#fde68a; color:#92400e; }
.bm-alert-danger,.bm-alert-error { background:var(--red-light); border-color:#fecaca; color:#991b1b; }
.bm-alert-light { background:var(--off); border-color:var(--border); color:var(--dark); }

/* ── Toasts ── */
.bm-toast-area { position:fixed; top:18px; right:18px; z-index:9999; display:flex; flex-direction:column; gap:10px; }

/* ── Global loader overlay ── */
.app-loader {
  position:fixed; inset:0; z-index:12000; display:none;
  align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background:rgba(244,247,246,.72); backdrop-filter:blur(2px);
}
.app-loader.show { display:flex; }
.app-loader-spinner {
  width:46px; height:46px; border-radius:50%;
  border:4px solid var(--accent-mid); border-top-color:var(--accent);
  animation:app-spin .8s linear infinite;
}
.app-loader-text { font-size:13px; font-weight:600; color:var(--accent2); letter-spacing:.02em; }
@keyframes app-spin { to { transform:rotate(360deg); } }

/* ── Kanban ── */
.kanban { display:flex; gap:16px; overflow-x:auto; padding-bottom:12px; align-items:flex-start; }
.kanban-col { flex:0 0 290px; background:var(--off2); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; flex-direction:column; max-height:calc(100vh - 180px); }
.kanban-col-head { padding:12px 14px; font-size:12px; font-weight:700; color:var(--dark); text-transform:uppercase; letter-spacing:.05em; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); }
.kanban-col-count { background:var(--accent-mid); color:var(--accent); border-radius:20px; padding:1px 8px; font-size:11px; }
.kanban-list { padding:10px; overflow-y:auto; flex:1; min-height:60px; }
.kanban-list.dragover { background:var(--accent-light); }
.kanban-card {
  background:var(--white); border:1px solid rgba(0,0,0,.12); border-radius:10px; padding:12px; margin-bottom:10px;
  box-shadow:var(--shadow); cursor:grab; transition:var(--transition);
}
.kanban-card:hover { border-color:var(--accent-mid); box-shadow:var(--shadow-lg); }
.kanban-card.dragging { opacity:.45; }
.kanban-card-title { font-size:13px; font-weight:700; color:var(--dark); }
.kanban-card-sub { font-size:11px; color:var(--muted2); margin-top:2px; }
.kanban-chips { display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; }
.kchip { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; background:var(--off2); color:var(--muted); }
.kchip-q { background:var(--green-light); color:#15803d; }
.kchip-i { background:var(--blue-light); color:#1d4ed8; }
.kchip-low { background:var(--red-light); color:#991b1b; }
.kchip-val { background:var(--accent); color:#fff; }
.kcard-age { align-self:center; font-size:11px; font-weight:700; color:#1d4ed8; }
.kcard-verified { align-self:center; font-size:13px; color:var(--green); line-height:1; }
/* Bottom-right signal cluster (qualified / entity / timeline / age) —
   grouped so the four are always read together, pinned to the card's
   right edge regardless of how many chips precede them. */
/* Above .kanban-card-link::after (components.css) — that pseudo-element
   stretches invisibly over the whole card as one big click target, and
   without its own stacking context this group would sit underneath it,
   same as .kcard-actions needs for the delete button. */
.kcard-signals { display:flex; align-items:center; gap:7px; margin-left:auto; position:relative; z-index:1; }
.kcard-signals .entity-dot { width:12px; height:12px; margin:0; flex-shrink:0; }
.kcard-timeline-btn {
  display:flex; align-items:center; font-size:13px; color:var(--muted2);
  line-height:1; transition:var(--transition);
}
.kcard-timeline-btn:hover { color:var(--accent2); text-decoration:none; }

/* card delete button (reveal on hover) */
.kcard-del { margin:-2px -2px 0 6px; }
.kcard-del-btn { border:none; background:none; color:var(--muted2); cursor:pointer; padding:0 2px; font-size:12px; opacity:0; transition:var(--transition); }
.kanban-card:hover .kcard-del-btn { opacity:1; }
.kcard-del-btn:hover { color:#dc2626; }

/* card status dots */
.kdot { display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:4px; vertical-align:middle; }
.kdot-orange { background:#f59e0b; }
.kdot-green { background:#22c55e; }

/* business-entity accent dot — clients table row, next to the account name */
.entity-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }

/* stage column menu (rename/delete) */
.kanban-col-menu { position:relative; }
.kanban-col-menu > summary { list-style:none; cursor:pointer; }
.kanban-col-menu > summary::-webkit-details-marker { display:none; }
.kanban-col-pop { position:absolute; right:0; top:28px; z-index:30; width:230px; padding:10px;
  background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }

/* stage reorder grip */
.kanban-grip { cursor:grab; color:var(--muted2); display:inline-flex; }
.kanban-grip:active { cursor:grabbing; }
.kanban-col.dragging { opacity:.5; }

/* add-stage column */
.kanban-col-add { background:transparent; border:1px dashed var(--border); }
.kanban-col-add .kanban-col-head { color:var(--muted); }

/* ════════════════════════════════════════════════════════════════
   Collapsible sidebar (desktop rail)
   `html.sidebar-collapsed` narrows one token, so every rule already
   sized off --sidebar-w follows without a second set of widths.
   app.js sets the class before first paint from localStorage, so a
   returning user never sees the wide sidebar snap shut.
════════════════════════════════════════════════════════════════ */
:root { --sidebar-w-rail:68px; }
html.sidebar-collapsed { --sidebar-w:var(--sidebar-w-rail); }

/* The fold is a width animation with the overflow clipped, so labels slide
   out of view instead of reflowing onto a second line mid-transition. */
.bm-sidebar { overflow-x:hidden; transition:width .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1); }
.bm-main { transition:margin-left .22s cubic-bezier(.4,0,.2,1); }
.bm-nav { overflow-x:hidden; }
.bm-nav-item, .bm-workspace .dropdown-toggle { white-space:nowrap; }
/* Hover keeps the 180ms house timing; the geometry that folds runs on the
   rail's 220ms so the whole sidebar moves as one thing. */
.bm-nav-item {
  transition:background .18s ease, color .18s ease,
             padding .22s cubic-bezier(.4,0,.2,1), gap .22s cubic-bezier(.4,0,.2,1);
}
/* Labels are flex items in every slot they appear in, so max-width is what
   folds them. Opacity alone leaves them taking their full width, which
   pushes the icons out of a 68px rail. */
.bm-fold-text {
  max-width:200px; overflow:hidden;
  transition:opacity .12s ease, max-width .22s cubic-bezier(.4,0,.2,1);
}

/* Text fades faster than the rail closes: it is gone before the edge
   reaches it, which is what makes the fold read as smooth rather than
   as a clip. */
html.sidebar-collapsed .bm-fold-text { opacity:0; max-width:0; pointer-events:none; }

html.sidebar-collapsed .bm-sidebar-logo { padding:0 10px; justify-content:center; }
html.sidebar-collapsed .bm-sidebar-logo > a { flex:none; justify-content:center; }
html.sidebar-collapsed .bm-sidebar-logo-img { max-width:34px; }

/* Monogram: only earns its place in the rail, and only when there is no
   uploaded logo to stand in for the workspace. */
.bm-rail-mark { display:none; }
html.sidebar-collapsed .bm-rail-mark {
  display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px; flex:none;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#fff; font-weight:700; font-size:14px;
}
html.sidebar-collapsed .bm-sidebar-logo-img ~ .bm-rail-mark { display:none; }

html.sidebar-collapsed .bm-workspace { padding:10px 10px; }
html.sidebar-collapsed .bm-workspace .dropdown-toggle { text-align:center!important; padding-left:0; padding-right:0; }
html.sidebar-collapsed .bm-workspace .dropdown-toggle::after { display:none; }
/* The menu must escape a 68px rail, so it drops beside it rather than under. */
html.sidebar-collapsed .bm-workspace .dropdown-menu { width:230px!important; min-width:230px; }

html.sidebar-collapsed .bm-nav-item { justify-content:center; gap:0; padding-left:0; padding-right:0; }
/* A scrollbar inside a 68px rail steals a quarter of it and pulls every icon
   off centre; the nav still scrolls by wheel and keyboard. */
html.sidebar-collapsed .bm-nav { scrollbar-width:none; }
html.sidebar-collapsed .bm-nav::-webkit-scrollbar { width:0; height:0; }
/* Section headings have no icon to fall back on, so they become the rule
   that separates the groups they used to name. The explicit expanded height
   is what lets that swap animate — auto height would snap and jolt every
   item below it mid-fold. */
.bm-nav-label {
  height:34px; overflow:hidden;
  transition:height .22s cubic-bezier(.4,0,.2,1), padding .22s cubic-bezier(.4,0,.2,1), margin .22s cubic-bezier(.4,0,.2,1);
}
html.sidebar-collapsed .bm-nav-label {
  height:0; padding:0; margin:12px 10px;
  border-top:1px solid var(--border);
}

html.sidebar-collapsed .bm-sidebar-footer { padding:10px 4px; }
html.sidebar-collapsed .bm-user-row { flex-direction:column; gap:6px; padding:8px 0; }
html.sidebar-collapsed .bm-user-info { display:none; }
html.sidebar-collapsed .bm-user-row > .d-flex { justify-content:center; }

.bm-rail-toggle i { transition:transform .22s cubic-bezier(.4,0,.2,1); }
html.sidebar-collapsed .bm-rail-toggle i { transform:rotate(180deg); }

@media (prefers-reduced-motion:reduce){
  .bm-sidebar, .bm-main, .bm-fold-text, .bm-rail-toggle i { transition:none; }
}

/* ── Mobile ── */
.bm-burger { display:none; }
@media (max-width:900px){
  .bm-sidebar { transform:translateX(-100%); }
  .bm-sidebar.open { transform:translateX(0); }
  .bm-main { margin-left:0; }
  .bm-burger { display:inline-flex; }
  /* Off-canvas already hides the sidebar here; a rail on top of that would
     hand the user a drawer with no labels. Full width wins. */
  html.sidebar-collapsed { --sidebar-w:240px; }
  html.sidebar-collapsed .bm-fold-text { opacity:1; max-width:200px; pointer-events:auto; }
  html.sidebar-collapsed .bm-rail-mark { display:none; }
  html.sidebar-collapsed .bm-user-info { display:block; }
  html.sidebar-collapsed .bm-user-row { flex-direction:row; gap:8px; padding:8px 10px; }
  html.sidebar-collapsed .bm-sidebar-footer { padding:10px 8px; }
  html.sidebar-collapsed .bm-nav { scrollbar-width:auto; }
  html.sidebar-collapsed .bm-nav::-webkit-scrollbar { width:auto; height:auto; }
  html.sidebar-collapsed .bm-nav-item { justify-content:flex-start; gap:10px; padding:9px 12px; }
  html.sidebar-collapsed .bm-nav-label { height:34px; padding:12px 10px 6px; margin:0; border-top:none; }
  html.sidebar-collapsed .bm-sidebar-logo { padding:0 18px; justify-content:flex-start; }
  html.sidebar-collapsed .bm-sidebar-logo > a { flex:1 1 auto; justify-content:flex-start; }
  html.sidebar-collapsed .bm-sidebar-logo-img { max-width:92px; }
  html.sidebar-collapsed .bm-workspace .dropdown-toggle { text-align:left!important; padding-left:12px; padding-right:12px; }
  html.sidebar-collapsed .bm-workspace .dropdown-toggle::after { display:inline-block; }
  .bm-rail-toggle { display:none!important; }
}

/* ════════════════════════════════════════════════════════════════
   Bootstrap compatibility layer — restyle existing markup to match.
   (Pages not yet ported to bm- components still look modern.)
════════════════════════════════════════════════════════════════ */
/* Retint Bootstrap's blue "primary" to RevIQ teal everywhere
   (buttons, badges, bg-primary, text-primary, spinners, --bs-primary). */
:root { --bs-primary:#2c8a7d; --bs-primary-rgb:44,138,125; }
.bg-primary,.text-bg-primary { background-color:var(--accent)!important; }
.text-primary { color:var(--accent2)!important; }
.border-primary { border-color:var(--accent)!important; }
.btn-primary {
  --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent2); --bs-btn-hover-border-color:var(--accent2);
  --bs-btn-active-bg:var(--accent2); --bs-btn-active-border-color:var(--accent2);
  --bs-btn-disabled-bg:var(--accent); --bs-btn-disabled-border-color:var(--accent);
}
.btn-outline-primary {
  --bs-btn-color:var(--accent); --bs-btn-border-color:var(--accent);
  --bs-btn-hover-bg:var(--accent); --bs-btn-hover-border-color:var(--accent);
  --bs-btn-active-bg:var(--accent2); --bs-btn-active-border-color:var(--accent2);
}
.spinner-border.text-primary,.spinner-border-sm.text-primary { color:var(--accent)!important; }

.card { border:1px solid var(--border)!important; border-radius:var(--radius-lg)!important; box-shadow:var(--shadow); }
.card-body { padding:20px 22px; }
/* Match bm-btn sizing so Bootstrap buttons line up with bm- buttons. */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:40px; border-radius:8px; font-weight:600; font-size:14px; }
.btn-sm { min-height:32px; font-size:12.5px; }
.btn-lg { min-height:48px; font-size:16px; }
.btn-brand,.btn-primary { background:var(--accent)!important; border-color:var(--accent)!important; color:#fff!important; }
.btn-brand:hover,.btn-primary:hover { background:var(--accent2)!important; }
.btn-outline-secondary { border-color:var(--border2); color:var(--dark); }
.text-brand { color:var(--accent)!important; }
.bg-brand { background:var(--accent)!important; }
.border-brand { border-color:var(--accent)!important; }
.table thead.table-light th, .table thead th { background:var(--off); color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.badge { border-radius:20px; font-weight:600; }
.form-control,.form-select { border-radius:9px; border-color:var(--border2); font-size:15px; padding:11px 14px; }
.form-control:focus,.form-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.form-label { font-size:14px; font-weight:600; color:var(--dark); margin-bottom:6px; }
.form-text { font-size:12.5px; }
textarea.form-control { min-height:auto; }
.alert { border-radius:10px; }
.progress { background:var(--off2); border-radius:20px; }
.progress-bar.bg-brand,.progress-bar { background:var(--accent); }
.list-group-item { border-color:var(--border); }
.nav-tabs .nav-link.active { color:var(--accent); border-bottom-color:var(--accent); }
.nav-tabs .nav-link { color:var(--muted); }

/* ════════════════════════════════════════════════════════════════
   RevIQ chat
════════════════════════════════════════════════════════════════ */
.reviq-shell { display:grid; grid-template-columns:264px 1fr; gap:16px; height:calc(100vh - var(--header-h) - 56px); }
@media (max-width:900px){ .reviq-shell{ grid-template-columns:1fr; height:auto; } .reviq-rail{ display:none; } }

.reviq-rail { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); }
.reviq-rail-head { padding:12px; border-bottom:1px solid var(--border); }
.reviq-convos { overflow-y:auto; padding:8px; flex:1; }
.reviq-convo { display:flex; align-items:center; gap:8px; padding:9px 10px; border-radius:10px; color:var(--muted); font-size:13px; cursor:pointer; text-decoration:none; margin-bottom:2px; }
.reviq-convo:hover { background:var(--off2); color:var(--dark); text-decoration:none; }
.reviq-convo.active { background:var(--accent-light); color:var(--accent2); font-weight:600; }
.reviq-convo .t { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reviq-convo .del { border:none; background:none; padding:0; color:var(--muted2); opacity:0; cursor:pointer; transition:var(--transition); }
.reviq-convo:hover .del { opacity:1; }
.reviq-convo .del:hover { color:var(--red); }

.reviq-chat { background:var(--white); border:1px solid var(--border); border-radius:var(--radius-lg); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow); min-height:520px; }
.reviq-thread { flex:1; overflow-y:auto; padding:24px clamp(16px,6%,72px); display:flex; flex-direction:column; gap:16px; }
.reviq-row { display:flex; gap:12px; align-items:flex-start; max-width:780px; }
.reviq-row.user { align-self:flex-end; flex-direction:row-reverse; }
.reviq-row.bot { align-self:flex-start; }
.reviq-av { width:30px; height:30px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; }
.reviq-av.bot { background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; }
.reviq-av.me { background:var(--off2); color:var(--muted); }
.reviq-bubble { padding:11px 15px; border-radius:16px; font-size:14px; line-height:1.6; white-space:pre-wrap; word-wrap:break-word; }
.reviq-row.bot .reviq-bubble { background:var(--off); border:1px solid var(--border); border-top-left-radius:5px; color:var(--dark); }
.reviq-row.user .reviq-bubble { background:var(--accent); color:#fff; border-top-right-radius:5px; }

.reviq-empty { margin:auto; text-align:center; max-width:540px; color:var(--muted); padding:20px; }
.reviq-empty .mark { width:56px; height:56px; border-radius:16px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:22px; background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:var(--shadow); }
.reviq-empty h2 { font-size:19px; color:var(--dark); margin:0 0 6px; }
.reviq-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:18px; }
.reviq-chip { padding:8px 13px; border:1px solid var(--border2); border-radius:20px; font-size:12.5px; color:var(--dark); background:var(--white); cursor:pointer; transition:var(--transition); }
.reviq-chip:hover { border-color:var(--accent-mid); background:var(--accent-light); color:var(--accent2); }

.reviq-composer { border-top:1px solid var(--border); padding:14px clamp(16px,6%,72px) 16px; background:var(--white); }
.reviq-inputwrap { display:flex; align-items:flex-end; gap:8px; border:1px solid var(--border2); border-radius:16px; padding:7px 7px 7px 15px; background:var(--white); transition:var(--transition); }
.reviq-inputwrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-light); }
.reviq-inputwrap textarea { flex:1; border:none; outline:none; resize:none; font-family:inherit; font-size:14px; line-height:1.5; max-height:168px; background:transparent; color:var(--dark); padding:6px 0; }
.reviq-sendbtn { width:38px; height:38px; border-radius:12px; border:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; transition:var(--transition); }
.reviq-sendbtn:hover { background:var(--accent2); }
.reviq-sendbtn:disabled { opacity:.45; cursor:default; }
.reviq-hint { font-size:11px; color:var(--muted2); text-align:center; margin-top:7px; }

.reviq-typing { display:inline-flex; gap:4px; padding:5px 2px; }
.reviq-typing span { width:7px; height:7px; border-radius:50%; background:var(--muted2); animation:reviqdot 1.2s infinite ease-in-out; }
.reviq-typing span:nth-child(2){ animation-delay:.2s; }
.reviq-typing span:nth-child(3){ animation-delay:.4s; }
@keyframes reviqdot { 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:1; } }

/* ════════════════════════════════════════════════════════════════
   Whiteboard (freeform sticky canvas)
════════════════════════════════════════════════════════════════ */
.wb-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.wb-toggle { display:inline-flex; background:var(--off2); border:1px solid var(--border); border-radius:20px; padding:3px; }
.wb-toggle a { padding:5px 14px; border-radius:18px; font-size:13px; font-weight:600; color:var(--muted); text-decoration:none; }
.wb-toggle a.active { background:var(--white); color:var(--accent2); box-shadow:var(--shadow); }
.wb-swatch { width:22px; height:22px; border-radius:6px; border:2px solid transparent; cursor:pointer; }
.wb-swatch.active { border-color:var(--dark); }

.wb-canvas { position:relative; height:calc(100vh - var(--header-h) - 150px); min-height:480px;
  border:1px solid var(--border); border-radius:var(--radius-lg); overflow:auto; background:var(--white);
  background-image:radial-gradient(var(--border) 1px, transparent 1px); background-size:22px 22px; }

.wb-note { position:absolute; width:280px; min-height:190px; border-radius:10px; padding:10px 12px 12px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:6px; border:1px solid rgba(0,0,0,.06); }
.wb-note .wb-grip { cursor:grab; display:flex; justify-content:space-between; align-items:center; font-size:11px; color:rgba(0,0,0,.45); }
.wb-note .wb-grip:active { cursor:grabbing; }
.wb-note textarea { border:none; background:transparent; resize:none; outline:none; font-family:inherit;
  font-size:14px; line-height:1.5; color:#1f2937; flex:1; min-height:110px; }
.wb-note .wb-foot { display:flex; align-items:center; gap:6px; font-size:11px; }
.wb-note .wb-foot select { font-size:11px; border:none; background:rgba(255,255,255,.5); border-radius:6px; max-width:120px; }
.wb-note .wb-act { border:none; background:none; cursor:pointer; color:rgba(0,0,0,.5); padding:0 2px; }
.wb-note .wb-act:hover { color:#111; }
.wb-c-yellow{ background:#fef9c3; } .wb-c-green{ background:#dcfce7; } .wb-c-blue{ background:#dbeafe; }
.wb-c-pink{ background:#fce7f3; } .wb-c-teal{ background:#e9f4f1; } .wb-c-gray{ background:#eef2f1; }
.wb-empty { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;
  color:var(--muted2); font-size:14px; pointer-events:none; }
.wb-note.dragging { box-shadow:var(--shadow-lg); }

/* ════════════════════════════════════════════════════════════════
   Performance racing track (gamified leaderboard)
════════════════════════════════════════════════════════════════ */
.race { background:linear-gradient(180deg,#26312b,#1d2620); border-radius:var(--radius-lg);
  padding:16px 14px; position:relative; box-shadow:var(--shadow); }
.race-lane { position:relative; height:48px; border-bottom:2px dashed rgba(255,255,255,.10); }
.race-lane:last-child { border-bottom:none; }
.race-finish { position:absolute; right:6px; top:6px; bottom:6px; width:12px; border-radius:2px;
  background:repeating-linear-gradient(45deg,#fff 0 5px,#1d2620 5px 10px); opacity:.55; }
.race-rankno { position:absolute; left:6px; top:50%; transform:translateY(-50%);
  font-size:11px; font-weight:800; color:rgba(255,255,255,.4); width:20px; text-align:center; }
.race-car { position:absolute; top:50%; transform:translateY(-50%); left:6px;
  transition:left 1.2s cubic-bezier(.22,1,.36,1); display:flex; align-items:center; gap:6px; white-space:nowrap; }
.race-car .car { font-size:20px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.race-car .tag { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:20px;
  font-size:12px; font-weight:700; color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); }
.race-car .pts { font-weight:800; }
.race-you { outline:2px solid rgba(255,255,255,.6); outline-offset:2px; border-radius:20px; }
.race-medal { font-size:14px; }

.lb-rank { font-weight:800; color:var(--muted); width:30px; }
.lb-dot { width:12px; height:12px; border-radius:50%; display:inline-block; }

/* ════════════════════════════════════════════════════════════════
   Softphone dock
   Fixed to the viewport rather than placed in a page, because a rep on a
   call keeps browsing — a dialler that unmounts on navigation is not a
   dialler. Hidden entirely when there is nothing happening.
════════════════════════════════════════════════════════════════ */
.tel-dock {
  position:fixed; right:20px; bottom:20px; z-index:1050; width:300px;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  overflow:hidden;
}
.tel-dock-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:var(--accent); color:#fff;
}
.tel-dock-state { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.tel-dock--ringing .tel-dock-head { background:var(--amber); }
.tel-dock--failed .tel-dock-head { background:var(--red); }
.tel-dock-close {
  background:none; border:none; color:#fff; opacity:.85; cursor:pointer;
  padding:0 2px; line-height:1;
}
.tel-dock-close:hover { opacity:1; }
.tel-dock-body { display:flex; align-items:center; gap:10px; padding:12px; }
.tel-who { flex:1; min-width:0; }
.tel-name { font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tel-sub { font-size:12px; color:var(--muted2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tel-lead { font-size:12px; display:inline-block; margin-top:2px; }
.tel-timer { font-variant-numeric:tabular-nums; font-size:18px; font-weight:700; color:var(--dark); }
.tel-dock-actions { display:flex; gap:6px; padding:0 12px 12px; }
.tel-dock-actions .bm-btn { flex:1; }
.tel-dock-notes { padding:0 12px 12px; }
.tel-dock-notes textarea { font-size:12px; }
.tel-dock-msg { padding:0 12px 10px; font-size:12px; color:var(--red); }
.tel-dock-msg:empty { display:none; }
@media (max-width:600px) {
  .tel-dock { left:12px; right:12px; width:auto; bottom:12px; }
}