/* =============================================================================
   Setu Design System
   Shared tokens + components across every page of the app (dashboard,
   campaigns, pipeline, users, roles, plus the legacy auth pages that still
   reuse this stylesheet: register / onboarding / change-password).

   Visual reference: empiryx.com's restrained, dark-navy, corporate-minimal
   language (near-black #030712 brand tone, no gradients/glassmorphism/neon)
   combined with the warm off-white neutral system this app already shipped
   (see the original --bg/#f7f6f3 - reused below as --page-bg). Setu's own
   product identity - the orange bridge mark - carries over from the login
   page so the whole product feels like one system, not a template.
============================================================================= */

:root{
  /* ---- Brand -------------------------------------------------------- */
  --brand-primary:#F47B32;
  --brand-primary-hover:#DC6824;
  --brand-primary-active:#C55A1C;
  --brand-primary-soft:#FFF1E8;

  --brand-dark:#111827;      /* Empiryx-derived near-black navy */
  --brand-dark-soft:#1B2438;

  /* ---- Surfaces ------------------------------------------------------ */
  --page-bg:#F7F6F3;
  --surface:#FFFFFF;
  --surface-alt:#FBFAF8;
  --surface-sunken:#F1EFEA;

  /* ---- Text ----------------------------------------------------------- */
  --text-primary:#20242C;
  --text-secondary:#464B57;
  --text-muted:#6B7280;
  --text-on-dark:#FFFFFF;
  --text-on-dark-muted:#9CA7BE;

  /* ---- Border ----------------------------------------------------------- */
  --border:#E5E2DB;
  --border-strong:#D6D2C8;

  /* ---- Status (restrained - text-forward, not filled blocks) ---------- */
  --success:#2F6B44;
  --success-soft:#E9F3EC;
  --warning:#A15F16;
  --warning-soft:#FBF1E1;
  --danger:#B23A3A;
  --danger-soft:#FBEDED;
  --info:#3C5B85;
  --info-soft:#EAEFF6;

  /* ---- Radius / shadow ------------------------------------------------- */
  --radius-sm:6px;
  --radius-md:8px;
  --radius-lg:12px;
  --shadow-xs:0 1px 2px rgba(17,24,39,.05);
  --shadow-sm:0 1px 3px rgba(17,24,39,.07), 0 1px 2px rgba(17,24,39,.04);

  /* ---- Spacing scale ---------------------------------------------------- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;

  /* ---- Layout ------------------------------------------------------------ */
  --header-height:64px;
  --content-max:1200px;

  /* ---- Legacy aliases ----------------------------------------------------
     Kept so pages outside this redesign pass (register.html, onboarding.html,
     change-password.html) - which reference the original variable names
     directly in markup/inline styles - keep rendering correctly unchanged. */
  --bg:var(--page-bg);
  --panel:var(--surface);
  --line:var(--border);
  --ink:var(--text-primary);
  --ink-soft:var(--text-muted);
  --accent:var(--brand-primary);
  --accent-soft:var(--brand-primary-soft);
  --warn:var(--warning);
  --warn-soft:var(--warning-soft);
  --bad:var(--danger);
  --bad-soft:var(--danger-soft);
  --radius:var(--radius-md);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text-primary);
  font-family:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
body.drawer-open{ overflow:hidden; }
a{ color:var(--brand-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:2px solid var(--brand-primary); outline-offset:2px; }
button{ font-family:inherit; }

.wrap{ max-width:var(--content-max); margin:0 auto; padding:var(--space-8) var(--space-6) var(--space-12); }
.wrap.narrow{ max-width:460px; }

h1.page-title{ font-size:22px; margin:0 0 4px; font-weight:700; letter-spacing:-0.01em; color:var(--text-primary); }
p.page-sub{ margin:0 0 var(--space-6); color:var(--text-muted); font-size:13.5px; }
h2.section-title{ font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; margin:var(--space-8) 0 var(--space-3); }
h2.section-title:first-of-type{ margin-top:0; }

.page-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-6); }
.page-head .page-title, .page-head .page-sub{ margin-bottom:0; }
.page-head-text .page-title{ margin-bottom:4px; }
.page-head-actions{ display:flex; gap:var(--space-2); flex-shrink:0; }

/* =============================================================================
   Application shell — header, primary/admin nav, notifications, user menu,
   mobile drawer. Markup is generated by App.renderNav() in app.js.
============================================================================= */
.topnav{
  display:flex;
  align-items:center;
  height:var(--header-height);
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:40;
}
.shell-inner{
  width:100%;
  max-width:var(--content-max);
  margin:0 auto;
  padding:0 var(--space-6);
  display:flex;
  align-items:center;
  gap:var(--space-6);
}

.shell-brand{ display:flex; align-items:baseline; gap:8px; flex-shrink:0; }
.brand-link{ display:inline-flex; align-items:center; gap:7px; color:var(--text-primary); }
.brand-link:hover{ text-decoration:none; }
.brand-mark{ color:var(--brand-primary); flex-shrink:0; }
.brand-word{ font-size:17px; font-weight:800; letter-spacing:-0.02em; color:var(--text-primary); }
.brand-tag{ font-size:10.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-muted); background:var(--surface-sunken); border-radius:4px; padding:2px 6px; }
.brand-by{ font-size:11px; color:var(--text-muted); white-space:nowrap; }

.shell-center{ display:flex; align-items:center; gap:2px; flex:1; }
.nav-link{
  color:var(--text-secondary);
  font-size:13.5px;
  font-weight:500;
  padding:7px 12px;
  border-radius:var(--radius-sm);
  white-space:nowrap;
}
.nav-link:hover{ color:var(--text-primary); background:var(--surface-sunken); text-decoration:none; }
.nav-link.active{ color:var(--brand-primary-hover); background:var(--brand-primary-soft); font-weight:600; }
.nav-sep{ width:1px; height:18px; background:var(--border); margin:0 6px; flex-shrink:0; }

.shell-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.branch-switch{ flex-shrink:0; }
.branch-switch-select{
  width:auto; max-width:180px; padding:7px 28px 7px 11px; margin:0;
  font-size:12.5px; font-weight:600; border-radius:var(--radius-sm);
  border:1px solid var(--border-strong); background:var(--surface-sunken); color:var(--text-primary);
}
.branch-switch-select:focus{ background:#fff; }
.branch-switch-mobile{ margin:0 0 14px; }
.branch-switch-mobile .branch-switch-select{ max-width:none; width:100%; background:#fff; }
.icon-btn{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-sm);
  background:none; border:none; color:var(--text-secondary); cursor:pointer;
}
.icon-btn:hover{ background:var(--surface-sunken); color:var(--text-primary); }

.menu-wrap{ position:relative; }
.dropdown{
  position:absolute; top:calc(100% + 8px); right:0;
  min-width:220px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  padding:6px;
  z-index:50;
}
.dropdown-title{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:8px 10px 4px; }
.dropdown-empty{ padding:14px 10px 16px; text-align:center; font-size:13px; color:var(--text-muted); }
.dropdown-head{ display:flex; align-items:center; gap:10px; padding:8px 8px 10px; }
.dropdown-divider{ height:1px; background:var(--border); margin:4px 0; }
.dropdown-item{
  display:block; width:100%; text-align:left;
  padding:8px 10px; border-radius:var(--radius-sm);
  font-size:13.5px; color:var(--text-primary);
  background:none; border:none; cursor:pointer; font-family:inherit;
}
.dropdown-item:hover{ background:var(--surface-sunken); text-decoration:none; }
.dropdown-item-danger{ color:var(--danger); }
.dropdown-item-danger:hover{ background:var(--danger-soft); }

.avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--brand-dark); color:var(--text-on-dark);
  font-size:11.5px; font-weight:700; letter-spacing:.01em; flex-shrink:0;
}
.avatar-lg{ width:36px; height:36px; font-size:13px; }

.user-trigger{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; cursor:pointer; padding:4px 8px 4px 4px;
  border-radius:999px; color:var(--text-primary);
}
.user-trigger:hover{ background:var(--surface-sunken); }
.user-meta{ display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.user-name{ font-size:13px; font-weight:600; color:var(--text-primary); }
.user-role{ font-size:11px; color:var(--text-muted); }
.chev{ color:var(--text-muted); flex-shrink:0; }

.nav-burger{
  display:none; align-items:center; justify-content:center;
  width:36px; height:36px; margin-left:auto;
  background:none; border:none; border-radius:var(--radius-sm); color:var(--text-primary); cursor:pointer;
}
.nav-burger:hover{ background:var(--surface-sunken); }

.mobile-drawer{
  position:fixed; inset:var(--header-height) 0 0 0;
  background:var(--surface);
  z-index:39;
  overflow-y:auto;
  border-top:1px solid var(--border);
}
.mobile-drawer-inner{ padding:var(--space-4) var(--space-4) var(--space-8); }
.mobile-user-row{ display:flex; align-items:center; gap:12px; padding:var(--space-2) var(--space-2) var(--space-4); }
.mobile-nav-group{ display:flex; flex-direction:column; gap:2px; }
.mobile-nav-link{
  display:block; width:100%; text-align:left;
  padding:12px 10px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:500; color:var(--text-primary);
  background:none; border:none; cursor:pointer; font-family:inherit;
}
.mobile-nav-link:hover, .mobile-nav-link:active{ background:var(--surface-sunken); text-decoration:none; }
.mobile-nav-link.active{ color:var(--brand-primary-hover); background:var(--brand-primary-soft); font-weight:600; }
.mobile-nav-link-danger{ color:var(--danger); }
.mobile-nav-divider{ height:1px; background:var(--border); margin:var(--space-3) 0; }

/* =============================================================================
   Buttons
============================================================================= */
button.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; cursor:pointer;
  background:var(--brand-primary); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:9px 16px; font-size:13.5px; font-weight:600; font-family:inherit; white-space:nowrap;
  transition:background-color .12s ease;
}
button.btn:hover{ background:var(--brand-primary-hover); }
button.btn:active{ background:var(--brand-primary-active); }
button.btn:disabled{ opacity:.5; cursor:not-allowed; }
button.btn.secondary{ background:var(--surface); color:var(--text-primary); border:1px solid var(--border-strong); }
button.btn.secondary:hover{ background:var(--surface-sunken); }
button.btn.tertiary{ background:none; color:var(--text-secondary); padding:9px 8px; }
button.btn.tertiary:hover{ background:var(--surface-sunken); color:var(--text-primary); }
button.btn.danger{ background:var(--danger); }
button.btn.danger:hover{ background:#9A3333; }
button.btn.full{ width:100%; justify-content:center; margin-top:18px; }
button.btn.sm{ padding:6px 11px; font-size:12.5px; }

/* =============================================================================
   Cards
============================================================================= */
.card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:20px 22px; }
.card + .card{ margin-top:12px; }

/* =============================================================================
   Forms
============================================================================= */
label{ display:block; font-size:12.5px; font-weight:600; margin:14px 0 6px; color:var(--text-primary); }
label:first-child{ margin-top:0; }
input, select, textarea{
  width:100%; padding:9px 11px; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  font-size:13.5px; font-family:inherit; background:#fff; color:var(--text-primary);
}
input:focus, select:focus, textarea:focus{ outline:none; border-color:var(--brand-primary); box-shadow:0 0 0 3px rgba(244,123,50,.14); }
.hint{ margin-top:5px; font-size:11.5px; color:var(--text-muted); }
.field-error{ margin-top:5px; font-size:11.5px; color:var(--danger); }
.checkbox-row{ display:flex; align-items:flex-start; gap:8px; margin:8px 0; }
.checkbox-row input{ width:auto; margin-top:2px; accent-color:var(--brand-primary); }
.checkbox-row label{ margin:0; font-weight:500; }
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

/* =============================================================================
   Banners / states
============================================================================= */
.banner{ display:flex; align-items:center; gap:8px; padding:11px 14px; border-radius:var(--radius-sm); font-size:13px; margin-bottom:16px; }
.banner.error{ background:var(--danger-soft); color:var(--danger); }
.banner.success{ background:var(--success-soft); color:var(--success); }
.banner.info{ background:var(--info-soft); color:var(--info); }
.banner.warning{ background:var(--warning-soft); color:var(--warning); }

/* Shared small-loading-state spinner (Meta integration screens, and
   anywhere else that fetches something inline without a page-level
   loader). */
.meta-spinner{
  display:inline-block; width:15px; height:15px; border-radius:50%;
  border:2px solid var(--border-strong); border-top-color:var(--brand-primary);
  animation:meta-spin .7s linear infinite; vertical-align:-3px; margin-right:8px;
}
@keyframes meta-spin{ to{ transform:rotate(360deg); } }
.meta-loading{ display:flex; align-items:center; padding:6px 0; font-size:13.5px; color:var(--text-muted); }

.state-block{ padding:44px 24px; text-align:center; }
.state-icon{ width:40px; height:40px; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:var(--surface-sunken); color:var(--text-muted); }
.state-title{ font-size:14.5px; font-weight:700; color:var(--text-primary); margin:0 0 5px; }
.state-desc{ font-size:13px; color:var(--text-muted); margin:0 auto 16px; max-width:340px; line-height:1.55; }
.state-actions{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }

.empty{ padding:36px 20px; text-align:center; color:var(--text-muted); font-size:13px; }

.skel{ position:relative; overflow:hidden; background:var(--surface-sunken); border-radius:var(--radius-sm); }
.skel::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%);
  animation:skel-sheen 1.4s ease-in-out infinite;
}
@keyframes skel-sheen{ 100%{ transform:translateX(100%); } }
.skel-text{ height:12px; width:60%; margin:4px 0; }
.skel-num{ height:26px; width:70px; margin-bottom:6px; }

/* =============================================================================
   Tables
============================================================================= */
.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
table{ width:100%; border-collapse:collapse; background:var(--surface); min-width:560px; }
.table-wrap table{ border:none; border-radius:0; }
thead th{
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--text-muted); font-weight:700; padding:11px 16px; border-bottom:1px solid var(--border); background:var(--surface-alt);
  white-space:nowrap;
}
tbody td{ padding:13px 16px; border-bottom:1px solid var(--border); font-size:13.5px; vertical-align:middle; color:var(--text-primary); }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:var(--surface-alt); }
td .cell-sub{ margin-top:2px; font-size:11.5px; color:var(--text-muted); }
td .cell-actions{ display:flex; gap:4px; }

/* Standalone tables not already wrapped in .table-wrap keep a border too */
body table:not(.table-wrap table){ border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; }

/* =============================================================================
   Badges / status pills — restrained: soft tint background, no filled blocks
============================================================================= */
.pill{ display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:11.5px; font-weight:600; line-height:1.5; white-space:nowrap; }
.pill::before{ content:""; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0; }
.pill.processed, .pill.active, .pill.verified{ background:var(--success-soft); color:var(--success); }
.pill.pending, .pill.draft{ background:var(--surface-sunken); color:var(--text-secondary); }
.pill.paused{ background:var(--warning-soft); color:var(--warning); }
.pill.failed, .pill.error{ background:var(--danger-soft); color:var(--danger); }
.pill.dead_lettered{ background:var(--danger-soft); color:var(--danger); }
.pill.duplicate{ background:var(--info-soft); color:var(--info); }
.pill.disabled, .pill.disconnected, .pill.archived{ background:var(--surface-sunken); color:var(--text-muted); }
.pill.system{ background:var(--brand-primary-soft); color:var(--brand-primary-hover); }

/* =============================================================================
   System status
============================================================================= */
.status-card{ display:flex; align-items:center; gap:10px; padding:14px 18px; margin-bottom:var(--space-6); }
.status-dot{ width:8px; height:8px; border-radius:50%; background:var(--success); flex-shrink:0; }
.status-dot.is-warn{ background:var(--warning); }
.status-dot.is-bad{ background:var(--danger); }
.status-main{ font-size:13.5px; font-weight:600; color:var(--text-primary); }
.status-sub{ font-size:12px; color:var(--text-muted); margin-top:1px; }
.status-refresh{ margin-left:auto; display:flex; align-items:center; gap:10px; flex-shrink:0; }
.status-updated{ font-size:11.5px; color:var(--text-muted); }
.refresh-btn{
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius-sm);
  background:none; border:1px solid var(--border-strong); color:var(--text-secondary); cursor:pointer;
}
.refresh-btn:hover{ background:var(--surface-sunken); color:var(--text-primary); }
.refresh-btn.is-loading svg{ animation:spin .7s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* =============================================================================
   KPI grid
============================================================================= */
.kpi-grid{ display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:var(--space-8); }
.kpi-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px 16px; }
.kpi-label{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); }
.kpi-value{ margin-top:7px; font-size:23px; font-weight:700; letter-spacing:-0.01em; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--text-primary); }
.kpi-note{ margin-top:6px; font-size:12px; color:var(--text-muted); }
.kpi-card.is-success .kpi-value{ color:var(--success); }
.kpi-card.is-warning .kpi-value{ color:var(--warning); }
.kpi-card.is-danger .kpi-value{ color:var(--danger); }
.kpi-card.is-danger{ border-color:#EAD3D3; }

/* Comparison badge under a KPI value - up/down/flat vs the prior period,
   or "New" when there's no prior-period baseline to compare against. */
.kpi-delta{ display:inline-flex; align-items:center; gap:3px; margin-top:6px; font-size:11.5px; font-weight:600; }
.kpi-delta svg{ flex-shrink:0; }
.kpi-delta.up{ color:var(--success); }
.kpi-delta.down{ color:var(--danger); }
.kpi-delta.flat, .kpi-delta.new{ color:var(--text-muted); }

/* =============================================================================
   Dashboard - layout, chart, funnel, donut, activity, follow-ups
============================================================================= */
.dash-section{ margin-bottom:var(--space-6); }
.dash-two-col{ display:grid; grid-template-columns:2fr 1fr; gap:12px; margin-bottom:var(--space-6); }
.dash-two-col.even{ grid-template-columns:1fr 1fr; }
.dash-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:18px 20px; }
.dash-card-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.dash-card-title{ font-size:13.5px; font-weight:700; color:var(--text-primary); margin:0; }
.dash-card-sub{ font-size:12px; color:var(--text-muted); margin:2px 0 0; }
.dash-card-link{ font-size:12.5px; font-weight:600; color:var(--brand-primary-hover); }

/* Date range selector */
.range-picker{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.range-custom{ display:flex; align-items:center; gap:6px; }
.range-custom input[type="date"]{ padding:6px 8px; font-size:12.5px; }

/* Line/area chart - hand-rolled SVG, no charting library */
.chart-legend{ display:flex; gap:6px; flex-wrap:wrap; }
.chart-legend-item{
  display:inline-flex; align-items:center; gap:5px; cursor:pointer; user-select:none;
  font-size:11.5px; font-weight:600; color:var(--text-secondary);
  padding:4px 9px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface);
}
.chart-legend-item .dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.chart-legend-item.off{ opacity:.4; }
.chart-svg-wrap{ width:100%; overflow-x:auto; }
.chart-svg-wrap svg{ display:block; }
.chart-empty{ padding:40px 0; text-align:center; color:var(--text-muted); font-size:13px; }

/* Funnel / pipeline overview - horizontal bars */
.funnel{ display:flex; flex-direction:column; gap:9px; }
.funnel-row{
  display:grid; grid-template-columns:120px 1fr 40px; align-items:center; gap:10px;
  cursor:pointer; border-radius:var(--radius-sm); padding:3px 4px;
}
.funnel-row:hover{ background:var(--surface-sunken); }
.funnel-label{ font-size:12.5px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.funnel-bar-track{ background:var(--surface-sunken); border-radius:999px; height:10px; overflow:hidden; }
.funnel-bar-fill{ height:100%; background:var(--brand-primary); border-radius:999px; }
.funnel-row.is-won .funnel-bar-fill{ background:var(--success); }
.funnel-row.is-lost .funnel-bar-fill{ background:var(--border-strong); }
.funnel-count{ font-size:12.5px; font-weight:700; color:var(--text-primary); text-align:right; font-variant-numeric:tabular-nums; }

/* Donut - CSS conic-gradient, no SVG arc math needed */
.donut-row{ display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.donut{ width:132px; height:132px; border-radius:50%; flex-shrink:0; position:relative; }
.donut::after{
  content:""; position:absolute; inset:20px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
}
.donut-center{ position:absolute; inset:20px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.donut-center .n{ font-size:19px; font-weight:700; color:var(--text-primary); line-height:1.1; }
.donut-center .l{ font-size:10px; color:var(--text-muted); margin-top:2px; }
.donut-legend{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:160px; }
.donut-legend-item{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.donut-legend-item .dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.donut-legend-item .label{ flex:1; color:var(--text-secondary); }
.donut-legend-item .pct{ font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }
.donut-legend-item .cnt{ color:var(--text-muted); font-size:11.5px; }

/* Sortable table headers (Campaign performance) */
th.sortable{ cursor:pointer; user-select:none; white-space:nowrap; }
th.sortable:hover{ color:var(--text-primary); }
th.sortable .sort-arrow{ margin-left:3px; opacity:.5; }
th.sortable.active .sort-arrow{ opacity:1; color:var(--brand-primary); }
.campaign-name-link{ font-weight:600; color:var(--text-primary); cursor:pointer; }
.campaign-name-link:hover{ color:var(--brand-primary-hover); text-decoration:underline; }

/* Recent activity */
.activity-list{ display:flex; flex-direction:column; gap:0; }
.activity-item{ display:flex; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.activity-item:last-child{ border-bottom:none; }
.activity-dot{ width:6px; height:6px; border-radius:50%; background:var(--brand-primary); margin-top:6px; flex-shrink:0; }
.activity-text{ color:var(--text-primary); flex:1; }
.activity-time{ color:var(--text-muted); font-size:11px; white-space:nowrap; }

/* Upcoming follow-ups */
.followup-list{ display:flex; flex-direction:column; gap:0; }
.followup-item{ display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--border); }
.followup-item:last-child{ border-bottom:none; }
.followup-info{ flex:1; min-width:0; }
.followup-name{ font-size:12.5px; font-weight:600; color:var(--text-primary); }
.followup-meta{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.followup-when{ font-size:12px; font-weight:600; text-align:right; white-space:nowrap; }
.followup-when.is-overdue{ color:var(--danger); }

/* =============================================================================
   Ingestion / operational flow
============================================================================= */
.flow-card{ padding:18px 20px; }
.flow{ display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.flow-node{ display:flex; align-items:center; gap:8px; padding:8px 4px; }
.flow-node .flow-dot{ width:7px; height:7px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.flow-node.is-live .flow-dot{ background:var(--success); }
.flow-node.is-warn .flow-dot{ background:var(--warning); }
.flow-node.is-bad .flow-dot{ background:var(--danger); }
.flow-node-label{ font-size:13px; font-weight:600; color:var(--text-primary); }
.flow-node-sub{ font-size:11.5px; color:var(--text-muted); }
.flow-arrow{ color:var(--border-strong); margin:0 10px; flex-shrink:0; }

/* =============================================================================
   Kanban / pipeline board
============================================================================= */
.board-toolbar{ display:flex; align-items:flex-end; gap:var(--space-4); flex-wrap:wrap; margin-bottom:var(--space-4); }
.board-toolbar .field-inline{ max-width:280px; flex:1 1 220px; }
.board-toolbar label{ margin:0 0 6px; }
.board-toolbar-right{ display:flex; align-items:flex-end; gap:var(--space-3); margin-left:auto; }
/* A branch filter mounted into a page toolbar (see App.mountBranchFilter)
   should read like every other field in that toolbar, not like the compact
   nav-bar switcher it shares functional CSS with. */
.board-toolbar .branch-switch-select, .page-head-actions .branch-switch-select{
  width:100%; max-width:none; padding:9px 11px; font-size:13.5px; font-weight:400; background:#fff;
}
.page-head-actions .field-inline{ display:flex; flex-direction:column; }
.page-head-actions .field-inline label{ margin:0 0 6px; }

.segmented{ display:inline-flex; padding:3px; background:var(--surface-sunken); border-radius:var(--radius-md); gap:2px; }
.segmented button{
  border:none; background:none; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:600; color:var(--text-secondary);
  padding:6px 13px; border-radius:calc(var(--radius-md) - 2px);
}
.segmented button.active{ background:var(--surface); color:var(--text-primary); box-shadow:var(--shadow-xs); }

.mobile-stage-select{ display:none; margin-bottom:var(--space-4); }
.mobile-stage-select select{ font-weight:600; }

.lead-card-meta-row{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; gap:6px; }
.lead-card .avatar-sm{ width:20px; height:20px; font-size:9.5px; }
.lead-card .followup{ font-size:11px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lead-card .context-line{ margin-top:5px; font-size:11.5px; color:var(--text-secondary); font-weight:500; }
.lead-card{ position:relative; }
.lead-card .card-kebab{
  position:absolute; top:6px; right:4px;
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  background:none; border:none; border-radius:5px; color:var(--text-muted); cursor:pointer;
}
.lead-card .card-kebab:hover{ background:var(--surface-sunken); color:var(--text-primary); }

/* =============================================================================
   Modals
============================================================================= */
.modal-overlay{
  position:fixed; inset:0; background:rgba(17,24,39,.44);
  display:flex; align-items:flex-start; justify-content:center;
  padding:5vh 16px; overflow-y:auto; z-index:100;
}
.modal{
  width:100%; max-width:560px; background:var(--surface);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  margin-bottom:5vh;
}
.modal.modal-sm{ max-width:400px; }
.modal-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 20px 14px; border-bottom:1px solid var(--border); }
.modal-header h2{ margin:0; font-size:16px; font-weight:700; letter-spacing:-0.01em; color:var(--text-primary); }
.modal-header p{ margin:4px 0 0; font-size:12.5px; color:var(--text-muted); }
.modal-close{ background:none; border:none; color:var(--text-muted); cursor:pointer; width:28px; height:28px; border-radius:var(--radius-sm); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.modal-close:hover{ background:var(--surface-sunken); color:var(--text-primary); }
.modal-body{ padding:18px 20px; max-height:70vh; overflow-y:auto; }
.modal-body label:first-child{ margin-top:0; }
.modal-footer{ display:flex; justify-content:flex-end; gap:8px; padding:14px 20px 18px; }
.modal-footer.modal-footer-split{ justify-content:space-between; }
.modal-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.modal-field-grid > div{ min-width:0; }

.choice-tile{
  display:block; width:100%; text-align:left; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:13px 14px; background:var(--surface); font-family:inherit;
  margin-bottom:8px;
}
.choice-tile:hover{ border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.choice-tile-title{ display:block; font-size:13.5px; font-weight:700; color:var(--text-primary); }
.choice-tile-desc{ display:block; margin-top:2px; font-size:12px; color:var(--text-muted); }

/* Simple label/value rows used in read-only detail views (e.g. the Users
   "View" modal) - not to be confused with .modal-field-grid, which is for
   editable form fields. */
.detail-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid var(--border); font-size:12.5px; }
.detail-row:last-child{ border-bottom:none; }
.detail-label{ color:var(--text-muted); }
.detail-value{ color:var(--text-primary); font-weight:600; text-align:right; }

@media (max-width:600px){
  .modal-field-grid{ grid-template-columns:1fr; }
  .modal-overlay{ padding:0; align-items:stretch; }
  .modal{ max-width:none; width:100%; min-height:100%; border-radius:0; margin-bottom:0; }
}
.board{ display:grid; grid-template-columns:repeat(6, minmax(200px, 1fr)); gap:10px; overflow-x:auto; padding-bottom:4px; }
.col{ background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-lg); min-height:220px; display:flex; flex-direction:column; }
.col-head{ padding:11px 13px; border-bottom:1px solid var(--border); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); display:flex; justify-content:space-between; align-items:center; }
.col-head span:last-child{ background:var(--surface-sunken); color:var(--text-secondary); border-radius:999px; padding:1px 7px; font-size:11px; }
.col-body{ padding:8px; flex:1; display:flex; flex-direction:column; gap:7px; min-height:60px; }
.col-body.dragover{ background:var(--brand-primary-soft); }
.lead-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; font-size:12.5px; cursor:grab; box-shadow:var(--shadow-xs); }
.lead-card:active{ cursor:grabbing; }
.lead-card .name{ font-weight:600; color:var(--text-primary); }
.lead-card .meta{ color:var(--text-muted); font-size:11.5px; margin-top:3px; }
.lead-card .source{ margin-top:6px; display:inline-block; font-size:10.5px; font-weight:600; color:var(--brand-primary-hover); background:var(--brand-primary-soft); border-radius:999px; padding:2px 7px; }

/* =============================================================================
   Recent leads / lead identity cell
============================================================================= */
.lead-identity .lead-name{ font-weight:600; color:var(--text-primary); }
.lead-identity .lead-meta-id{ font-size:11.5px; color:var(--text-muted); margin-top:2px; }
.icon-action{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:var(--radius-sm);
  background:none; border:1px solid var(--border-strong); color:var(--text-secondary); cursor:pointer;
}
.icon-action:hover{ background:var(--surface-sunken); color:var(--text-primary); }

/* =============================================================================
   Roles / permissions
============================================================================= */
.perm-group{ margin-bottom:14px; }
.perm-group .cat{ font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); font-weight:600; margin-bottom:6px; }
code.token{ display:block; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-sm); padding:9px 11px; font-size:12px; word-break:break-all; }

/* =============================================================================
   Legacy: auth shell (register / onboarding / change-password)
============================================================================= */
.auth-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--page-bg); }
.auth-card{ width:380px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:30px 28px; box-shadow:var(--shadow-sm); }
.auth-card h1{ font-size:18px; margin:0 0 4px; font-weight:700; letter-spacing:-0.01em; }
.auth-card p.sub{ margin:0 0 20px; color:var(--text-muted); font-size:13px; }
.auth-card .switch{ margin-top:16px; text-align:center; font-size:12.5px; color:var(--text-muted); }

.steps{ display:flex; gap:6px; margin-bottom:20px; }
.steps .step{ flex:1; height:4px; border-radius:2px; background:var(--border); }
.steps .step.done, .steps .step.active{ background:var(--brand-primary); }

/* =============================================================================
   Choice cards — radio/checkbox groups presented as selectable cards
   (e.g. industry picker at registration).
============================================================================= */
.choice-group{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:8px 0 4px; }
.choice-card{
  position:relative; display:block; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:12px 14px 13px; background:var(--surface);
}
.choice-card input{ position:absolute; top:12px; right:12px; width:15px; height:15px; margin:0; accent-color:var(--brand-primary); }
.choice-card-title{ display:block; font-size:13.5px; font-weight:700; color:var(--text-primary); padding-right:20px; }
.choice-card-desc{ display:block; margin-top:4px; font-size:12px; color:var(--text-muted); line-height:1.5; }
.choice-card:has(input:checked){ border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.choice-card:has(input:focus-visible){ outline:2px solid var(--brand-primary); outline-offset:2px; }

@media (max-width:480px){
  .choice-group{ grid-template-columns:1fr; }
}

/* =============================================================================
   Forms & Lead Capture (Form Builder, public form, submissions)
============================================================================= */

.clickable-row:hover{ background:var(--surface-sunken); }

/* -- Builder 3-column shell ------------------------------------------- */
.builder-shell{
  display:grid;
  grid-template-columns:220px minmax(0, 1fr) 300px;
  gap:var(--space-4);
  align-items:start;
}
.builder-col{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px;
}
.builder-col-canvas{ min-height:420px; }
.builder-col-settings{ position:sticky; top:calc(64px + var(--space-4)); max-height:calc(100vh - 96px); overflow-y:auto; }
.builder-col-title{ font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:700; margin-bottom:10px; }

/* -- Palette ----------------------------------------------------------- */
.palette-item{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px 11px; margin-bottom:6px;
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface-alt); cursor:grab; font-size:12.5px; font-weight:600; color:var(--text-primary);
  transition:border-color .12s, background .12s;
}
.palette-item:hover{ border-color:var(--brand-primary); background:var(--brand-primary-soft); }
.palette-item:active{ cursor:grabbing; }
.palette-item-plus{ color:var(--text-muted); font-weight:700; }

/* -- Canvas / field rows ------------------------------------------------ */
.builder-canvas{ min-height:200px; border-radius:var(--radius-md); transition:background .12s; }
.builder-canvas.dragover{ background:var(--brand-primary-soft); outline:2px dashed var(--brand-primary); outline-offset:-2px; }
.builder-field-row{
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:10px 12px; margin-bottom:10px; background:var(--surface);
  cursor:pointer;
}
.builder-field-row.selected{ border-color:var(--brand-primary); box-shadow:0 0 0 3px var(--brand-primary-soft); }
.builder-field-row.locked{ background:var(--surface-sunken); cursor:default; }
.builder-field-row.locked.selected{ box-shadow:0 0 0 3px var(--brand-primary-soft); }
.builder-field-row-head{ display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.drag-handle{ cursor:grab; color:var(--text-muted); font-size:13px; line-height:1; }
.drag-handle.locked{ cursor:default; opacity:.6; }
.builder-field-type-badge{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); background:var(--surface-sunken); border-radius:4px; padding:2px 6px; }
.builder-field-row-actions{ margin-left:auto; display:flex; gap:4px; }
.builder-field-row-body{ pointer-events:none; opacity:.9; } /* preview-only inside the builder - editing happens in the settings panel */
.builder-field-row-body input, .builder-field-row-body select, .builder-field-row-body textarea{ background:var(--surface-alt); }

/* -- Field settings panel ------------------------------------------------ */
.field-settings label{ margin-top:12px; }
.field-settings label:first-child{ margin-top:0; }
.required-mark{ color:var(--danger); margin-left:3px; }
.field-help{ margin-top:4px; font-size:11.5px; color:var(--text-muted); }
.field-error{ margin-top:4px; font-size:11.5px; color:var(--danger); min-height:0; }
.form-field{ margin-bottom:14px; }
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea{ border-color:var(--danger); }
.option-row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.option-row .option-input{ flex:1; }
.radio-group, .checkbox-group{ display:flex; flex-direction:column; gap:6px; margin-top:2px; }
.radio-option, .checkbox-option{ display:flex; align-items:center; gap:7px; font-size:13px; color:var(--text-primary); font-weight:500; }
.radio-option input, .checkbox-option input{ width:15px; height:15px; accent-color:var(--brand-primary); margin:0; }

/* -- Preview modal viewport toggle --------------------------------------- */
.preview-frame{ margin:0 auto; }
.preview-frame.mobile{ max-width:340px; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; background:var(--surface-alt); }

/* -- Public lead-capture page --------------------------------------------- */
.public-form-body{ background:var(--surface-alt); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:32px 16px; }
.public-form-wrap{ width:100%; max-width:480px; }
.public-form-card{ padding:28px 26px; }
.public-form-footer{ text-align:center; font-size:11.5px; color:var(--text-muted); margin-top:16px; }

@media (max-width:1080px){
  .builder-shell{ grid-template-columns:1fr; }
  .builder-col-settings{ position:static; max-height:none; }
}

/* =============================================================================
   Responsive
============================================================================= */
@media (max-width:1080px){
  .kpi-grid{ grid-template-columns:repeat(3, 1fr); }
  .dash-two-col{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .shell-center{ display:none; }
  .shell-right{ display:none; }
  .nav-burger{ display:flex; }
}

@media (max-width:768px){
  .wrap{ padding:var(--space-6) var(--space-4) var(--space-10); }
  .grid-2{ grid-template-columns:1fr; }
  .board{ display:none; }
  .mobile-stage-select{ display:block; }
}

@media (max-width:600px){
  .kpi-grid{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .kpi-card{ padding:11px 12px; }
  .kpi-value{ font-size:19px; }
  .page-head{ flex-direction:column; align-items:stretch; }
  .page-head-actions{ width:100%; }
  .page-head-actions button.btn{ flex:1; }
  .status-card{ flex-wrap:wrap; }
  .status-refresh{ margin-left:0; width:100%; justify-content:space-between; }
  .range-picker{ width:100%; }
  .range-picker .segmented{ flex:1; }
  /* Pipeline's custom date-range sub-panel (#filterDateCustom) - without
     this it's a single flex item inside .board-toolbar that wraps as a
     whole, but its own two date inputs + button never wrap and overflow
     narrow phone widths. */
  .range-custom{ flex-wrap:wrap; width:100%; }
  .range-custom input[type="date"]{ flex:1 1 120px; min-width:0; }
  .funnel-row{ grid-template-columns:84px 1fr 34px; gap:6px; }
  .donut-row{ flex-direction:column; align-items:flex-start; }
  .followup-when{ font-size:11px; }
  .public-form-card{ padding:20px 16px; }
  .preview-frame.mobile{ max-width:100%; padding:12px; }
}

@media (max-width:480px){
  .shell-inner{ padding:0 var(--space-4); }
  .brand-by{ display:none; }
  .auth-card{ width:100%; padding:26px 20px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition:none !important; }
}