/* =============================================================================
   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); padding-bottom:var(--space-4);
  border-bottom:1px solid var(--border);
}
.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; }
/* Optional leading icon badge, e.g. campaigns.html's page-head - wraps
   .page-head-icon + .page-head-text as one flex item so .page-head's own
   space-between still only balances against .page-head-actions, not the
   icon itself. Purely opt-in: pages that don't use it are unaffected. */
.page-head-lead{ display:flex; align-items:flex-start; gap:12px; }
.page-head-icon{
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  width:36px; height:36px; margin-top:1px;
  border-radius:var(--radius-md);
  background:var(--brand-primary-soft); color:var(--brand-primary-hover);
}

/* =============================================================================
   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{
  display:inline-flex;
  align-items:center;
  gap:6px;
  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-link-icon{ display:inline-flex; flex-shrink:0; color:currentColor; opacity:.85; }
.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; }
.agency-context-switch{
  display:flex; align-items:center; gap:6px; flex-shrink:0;
  padding:2px; border-radius:var(--radius-sm);
  border:1px solid transparent;
}
.agency-context-switch.in-context{
  border-color:var(--brand-primary-hover, #6d5ef7);
  background:var(--brand-primary-soft, rgba(109,94,247,.08));
}
/* Compact "Back to Clients" icon button while managing a client - replaces
   the old "Managing: <name> / Exit to Agency" badge+button pair, which was
   wide enough to push the header into horizontal scroll at normal window
   widths. The client's own name is still shown by the "Current Client" nav
   dropdown right next to this slot, so nothing is lost - see
   renderAgencyContextSwitcher's own comment in app.js. */
.agency-context-back{ color:var(--brand-primary-hover, #6d5ef7); }
.agency-context-back:hover{ background:var(--brand-primary-soft, rgba(109,94,247,.14)); }
.agency-context-exit{
  font-size:12px; font-weight:600; color:var(--text-secondary);
  background:none; border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:5px 9px; cursor:pointer; white-space:nowrap;
}
.agency-context-exit:hover{ color:var(--text-primary); background:var(--surface-sunken); }
.agency-context-switch-mobile{
  display:block; margin:0 0 14px; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface-sunken);
}
.agency-context-switch-mobile.in-context{ border-color:var(--brand-primary-hover, #6d5ef7); }
.agency-context-mobile-agency{ font-size:13px; font-weight:700; color:var(--text-primary); }
.agency-context-mobile-status{ font-size:12px; color:var(--text-secondary); margin:2px 0 8px; display:flex; gap:5px; }
.agency-context-mobile-status strong{ color:var(--text-primary); }
.agency-context-switch-mobile .agency-context-select{ max-width:none; width:100%; background:#fff; margin-bottom:8px; }
.agency-context-switch-mobile .agency-context-exit{ width:100%; }
.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-notification{ display:flex; flex-direction:column; gap:3px; width:100%; padding:9px 10px; border:0; border-radius:var(--radius-sm); background:none; color:var(--text-primary); text-align:left; cursor:pointer; font-family:inherit; }
.dropdown-notification:hover,.dropdown-notification.unread{ background:var(--surface-sunken); }
.dropdown-notification strong{ font-size:12.5px; }
.dropdown-notification span{ font-size:12px; color:var(--text-muted); line-height:1.35; }
.dropdown-notification em{ font-size:11px; color:var(--brand-primary-hover); font-style:normal; font-weight:700; }
.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:flex; align-items:center; gap:8px; 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.active{ color:var(--brand-primary-hover); background:var(--brand-primary-soft); font-weight:600; }
.dropdown-item-danger{ color:var(--danger); }
.dropdown-item-danger:hover{ background:var(--danger-soft); }

/* =============================================================================
   Trial Pill & Popover (Subscription / Trial Status)
============================================================================= */
.trial-menu-wrap {
  position: relative;
}

.trial-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  flex-shrink: 0;
}

.trial-pill:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-xs);
}

.trial-pill:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.trial-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
  flex-shrink: 0;
}

.trial-pill.warning .trial-pill-dot {
  background: var(--warning);
}

.trial-pill.expired {
  border-color: var(--danger-soft);
  color: var(--danger);
  background: var(--danger-soft);
}

.trial-pill.expired .trial-pill-dot {
  background: var(--danger);
}

/* Responsive display of pill text variations */
.trial-pill-text-desktop { display: inline; }
.trial-pill-text-tablet { display: none; }
.trial-pill-text-mobile { display: none; }

@media (min-width: 1200px) {
  .trial-pill-text-desktop { display: inline; }
  .trial-pill-text-tablet { display: none; }
  .trial-pill-text-mobile { display: none; }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .trial-pill-text-desktop { display: none; }
  .trial-pill-text-tablet { display: inline; }
  .trial-pill-text-mobile { display: none; }
}

@media (max-width: 767px) {
  .trial-pill-text-desktop { display: none; }
  .trial-pill-text-tablet { display: none; }
  .trial-pill-text-mobile { display: inline; }
  .trial-pill { padding: 0 9px; height: 30px; font-size: 12px; gap: 5px; }
}

/* Trial Popover */
.trial-popover {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(17, 24, 39, 0.12), 0 1px 3px rgba(17, 24, 39, 0.06);
  padding: 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.trial-popover[hidden] {
  display: none !important;
}

.trial-popover-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.trial-popover-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.trial-popover-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.trial-popover-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.trial-popover-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 6px 8px;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

.trial-popover-stat-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.trial-popover-stat-val {
  font-weight: 700;
  color: var(--text-primary);
}

.trial-popover-footer {
  margin-top: 4px;
}

.trial-popover-cta {
  width: 100%;
  justify-content: center;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  min-height: 40px;
}

/* Mobile drawer trial widget */
.mobile-drawer-trial {
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  margin-bottom: 8px;
}
.mobile-drawer-trial-top {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

/* "Settings" master menu in the primary nav (see settingsMenuHtml in
   app.js) - a dropdown trigger styled like the other nav-links, with its
   panel opening below-left rather than below-right (unlike the
   notifications/user menus in shell-right, this trigger sits mid-header
   so right:0 could push the panel off past the left edge). */
.nav-link-btn{ background:none; border:none; cursor:pointer; font-family:inherit; }
.nav-dropdown{ left:0; right:auto; }

.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:flex; align-items:center; gap:10px; 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; }
.mobile-nav-section-label{ padding:4px 10px 2px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }

/* =============================================================================
   Buttons
============================================================================= */
button.btn, a.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; text-decoration:none;
}
button.btn:hover, a.btn:hover{ background:var(--brand-primary-hover); text-decoration:none; }
button.btn:active, a.btn:active{ background:var(--brand-primary-active); }
button.btn:disabled, a.btn:disabled{ opacity:.5; cursor:not-allowed; }
button.btn.secondary, a.btn.secondary{ background:var(--surface); color:var(--text-primary); border:1px solid var(--border-strong); }
button.btn.secondary:hover, a.btn.secondary:hover{ background:var(--surface-sunken); }
button.btn.tertiary, a.btn.tertiary{ background:none; color:var(--text-secondary); padding:9px 8px; }
button.btn.tertiary:hover, a.btn.tertiary:hover{ background:var(--surface-sunken); color:var(--text-primary); }
button.btn.danger, a.btn.danger{ background:var(--danger); }
button.btn.danger:hover, a.btn.danger:hover{ background:#9A3333; }
button.btn.full, a.btn.full{ width:100%; justify-content:center; margin-top:18px; }
button.btn.sm, a.btn.sm{ padding:6px 11px; font-size:12.5px; }

/* =============================================================================
   Icon Buttons & Tooltips
============================================================================= */
button.icon-btn, a.icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; padding:0;
  border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--text-secondary);
  cursor:pointer; transition:all .15s ease; position:relative; flex-shrink:0;
  text-decoration:none;
}
button.icon-btn:hover, a.icon-btn:hover{
  background:var(--surface-sunken); color:var(--text-primary);
  border-color:var(--border-strong);
  text-decoration:none;
}
button.icon-btn:active, a.icon-btn:active{ background:var(--surface-sunken); }
button.icon-btn:disabled, a.icon-btn:disabled{ opacity:.4; cursor:not-allowed; }

button.icon-btn.primary, a.icon-btn.primary{
  background:var(--brand-primary); color:#fff; border-color:var(--brand-primary);
}
button.icon-btn.primary:hover, a.icon-btn.primary:hover{
  background:var(--brand-primary-hover); border-color:var(--brand-primary-hover); color:#fff;
}
button.icon-btn.danger, a.icon-btn.danger{
  color:var(--text-muted); border-color:var(--border);
}
button.icon-btn.danger:hover, a.icon-btn.danger:hover{
  background:var(--danger-soft); color:var(--danger); border-color:var(--danger);
}
button.icon-btn.sm, a.icon-btn.sm{ width:30px; height:30px; }

/* -- Tooltips: sleek hover bubble with arrow -- */
.has-tooltip{ position:relative; }
.has-tooltip::after{
  content:attr(data-tooltip);
  position:absolute; bottom:calc(100% + 7px); left:50%;
  transform:translateX(-50%) translateY(4px);
  background:var(--brand-dark); color:#fff;
  padding:5px 9px; border-radius:var(--radius-sm);
  font-size:11.5px; font-weight:600; line-height:1.2;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  box-shadow:var(--shadow-sm); z-index:100;
}
.has-tooltip::before{
  content:"";
  position:absolute; bottom:calc(100% + 2px); left:50%;
  transform:translateX(-50%) translateY(4px);
  border:5px solid transparent; border-top-color:var(--brand-dark);
  opacity:0; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  z-index:100;
}
.has-tooltip:hover::after, .has-tooltip:hover::before{
  opacity:1; transform:translateX(-50%) translateY(0);
}

/* -- Button row — a "Back" (or other secondary) button beside a primary
   full-width action, e.g. register.html step 2. Without this, a bare
   .btn.full sibling fights the secondary button for space (its width:100%
   flex-basis forces flexbox to squeeze both unevenly) instead of the two
   sitting as a clean, evenly-proportioned pair. */
.btn-row{ display:flex; gap:10px; margin-top:14px; }
.btn-row .btn{ margin-top:0; }
.btn-row .btn.secondary{ flex:0 0 auto; }
.btn-row .btn.full{ flex:1 1 auto; width:auto; }

@media (max-width:480px){
  .btn-row{ flex-direction:column-reverse; }
  .btn-row .btn.secondary{ flex:1 1 auto; }
}

/* =============================================================================
   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); }

/* -- Radio / checkbox — custom-drawn, cross-browser consistent -----------
   Native accent-color rendering varies a lot across browsers/OS (can look
   chunky or malformed). appearance:none + a hand-drawn indicator keeps
   every radio/checkbox in the app looking the same everywhere. */
input[type="radio"], input[type="checkbox"]{
  appearance:none; -webkit-appearance:none;
  width:16px; height:16px; min-width:16px; padding:0; margin:0;
  border:1.5px solid var(--border-strong); background:var(--surface);
  display:inline-block; vertical-align:middle; cursor:pointer; flex-shrink:0;
  transition:border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
input[type="radio"]{ border-radius:50%; }
input[type="checkbox"]{ border-radius:4px; }
input[type="radio"]:checked{
  border-color:var(--brand-primary); background:var(--brand-primary);
  box-shadow:inset 0 0 0 3px var(--surface);
}
input[type="checkbox"]:checked{
  border-color:var(--brand-primary); background:var(--brand-primary);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5L6.5 11.5L12.5 4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:11px 11px;
}
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible{
  outline:2px solid var(--brand-primary); outline-offset:2px;
}
input[type="radio"]:hover, input[type="checkbox"]:hover{ border-color:var(--brand-primary); }
input[type="radio"]:disabled, input[type="checkbox"]:disabled{
  cursor:not-allowed; opacity:.55; border-color:var(--border);
}

.checkbox-row{ display:flex; align-items:flex-start; gap:8px; margin:8px 0; }
.checkbox-row input{ width:16px; margin-top:2px; }
.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:10px;
  padding:12px 16px 12px 14px;
  border-radius:var(--radius-md);
  border-left:3px solid transparent;
  font-size:13px; margin-bottom:16px;
  box-shadow:var(--shadow-xs);
}
.banner-icon{ flex-shrink:0; display:flex; margin-top:1px; }
.banner-body{ flex:1; min-width:0; display:flex; flex-direction:column; }
.banner-title{ font-weight:700; }
.banner-detail{ margin-top:1px; opacity:.82; font-weight:500; }
.banner .btn{ flex-shrink:0; }
.banner.error{ background:var(--danger-soft); color:var(--danger); border-left-color:var(--danger); }
.banner.success{ background:var(--success-soft); color:var(--success); border-left-color:var(--success); }
.banner.info{ background:var(--info-soft); color:var(--info); border-left-color:var(--info); }
.banner.warning{ background:var(--warning-soft); color:var(--warning); border-left-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; }

/* "Current Subscription" tile (Dashboard) - the one KPI card that's a real
   link to /subscription.html rather than a plain stat. */
.kpi-card-link{ display:block; text-decoration:none; cursor:pointer; transition:background .1s ease, border-color .1s ease; }
.kpi-card-link:hover{ background:var(--surface-sunken); border-color:var(--border-strong); }

/* 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; }
.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.modal-lg{ max-width:660px; }
.modal.modal-xl{ max-width:880px; }
.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; }

/* Lead-details popup (Pipeline list view) - clickable rows, and the
   structured follow-up history + add-entry form inside the popup. */
#listBody tr.row-clickable{ cursor:pointer; }
#listBody tr.row-clickable:hover{ background:var(--surface-alt); }
.followup-entry-list{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }
.followup-entry{ border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 12px; background:var(--surface-alt); }
.followup-entry-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:4px; }
.followup-entry-author{ font-size:12px; font-weight:600; color:var(--text-primary); }
.followup-entry-date{ font-size:11px; color:var(--text-muted); white-space:nowrap; }
.followup-entry-remarks{ font-size:12.5px; color:var(--text-secondary); line-height:1.5; white-space:pre-wrap; }
.followup-entry-tags{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.followup-form{ border-top:1px solid var(--border); padding-top:14px; margin-top:14px; }

@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; }

/* Rule-based lead quality badge (v1 - see src/domain/leadQuality.ts).
   Same pill shape as .source above, right next to it - "likely_fake"
   still renders (this feature flags, never hides), just in the warning
   color so it reads as "worth a second look" rather than a hard error. */
.quality-badge{ margin-top:6px; margin-left:5px; display:inline-block; font-size:10.5px; font-weight:600; border-radius:999px; padding:2px 7px; cursor:default; }
.quality-badge.quality-hot{ color:var(--success); background:var(--success-soft); }
.quality-badge.quality-warm{ color:var(--warning); background:var(--warning-soft); }
.quality-badge.quality-cold{ color:var(--text-muted); background:var(--surface-sunken); }
.quality-badge.quality-likely_fake{ color:var(--danger); background:var(--danger-soft); }

/* =============================================================================
   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); }
/* Wider variant for multi-field steps (register, onboarding-agency) - a
   class instead of an inline style so the 480px breakpoint below can still
   override it to width:100% (an inline style would always win over any
   class, breakpoint or not, and overflow small screens). */
.auth-card.wide{ width:440px; }
.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); }

/* Guided onboarding wizard (public/onboarding.html) - a wider variant of
   .auth-card for a multi-field, multi-step flow. Deliberately max-width +
   width:100% rather than a fixed px width (unlike .auth-card above) - see
   PHASE 20's own "never overflow on a small screen" requirement - so it
   never needs its own @media override the way .auth-card does at 480px. */
.wizard-card{ width:100%; max-width:600px; }
.wizard-step-label{ font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); margin-bottom:8px; }
.wizard-actions{ display:flex; gap:10px; margin-top:20px; }
.wizard-actions .btn{ margin-top:0; }
.wizard-skip{ display:block; text-align:center; margin-top:14px; font-size:12.5px; color:var(--text-muted); background:none; border:none; cursor:pointer; padding:4px; width:100%; }
.wizard-skip:hover{ color:var(--text-primary); text-decoration:underline; }
.wizard-summary{ border:1px solid var(--border); border-radius:var(--radius-md); padding:14px 16px; margin:14px 0; }
.wizard-summary-row{ display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid var(--border); font-size:13px; }
.wizard-summary-row:last-child{ border-bottom:none; }
.wizard-summary-row .label{ color:var(--text-muted); }
.wizard-summary-row .value{ font-weight:600; color:var(--text-primary); text-align:right; }
.wizard-complete-icon{ width:52px; height:52px; border-radius:50%; background:var(--success-soft); color:var(--success); display:flex; align-items:center; justify-content:center; margin:0 auto 16px; font-size:26px; }

/* =============================================================================
   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; }
.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{ 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:flex; gap:6px; align-items:center; margin-left:auto; }
  .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; }
  .user-meta{ display:none; }
  .user-trigger{ padding:2px; }
  .user-trigger .chev{ display:none; }
}

@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; }
  .auth-card.wide{ width:100%; }
  .trial-popover{
    position:fixed;
    top:calc(var(--header-height) + 8px);
    right:16px;
    left:16px;
    width:auto;
    max-width:none;
  }
}

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

/* Shared numbered-pagination bar (App.renderPagination in app.js) - one
   definition for every server-paginated list page, generalized from the
   shape originally hand-rolled just for campaigns.html's two tables. */
.pagination-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap; }
.pagination-info{ font-size:12.5px; color:var(--text-muted); }
.pagination-controls{ display:flex; align-items:center; gap:10px; }
.pagination-controls button:disabled{ opacity:.4; cursor:not-allowed; }
.pagination-size{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--text-muted); }
.pagination-size-select{ font-size:12.5px; padding:2px 6px; }
.page-indicator{ font-size:12.5px; color:var(--text-secondary); min-width:64px; text-align:center; }