/* ============================================================
   CloserKit Design System
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sidebar-bg:    #2d3748;
  --page-bg:       #f0f2f5;
  --card-bg:       #ffffff;
  --accent:        #0d9488;
  --accent-dk:     #0f766e;
  --accent-lt:     #f0fdfa;
  --accent-ring:   rgba(13,148,136,.15);
  --success:       #34d399;
  --warning:       #f59e0b;
  --danger:        #ef4444;
  --danger-dk:     #dc2626;
  --text:          #1f2937;
  --text-muted:    #6b7280;
  --border:        #e5e7eb;
  --sidebar-w:     220px;
  --topbar-h:      52px;
  --r:             8px;
  --shadow-sm:     0 1px 2px rgba(0,0,0,.06);
  --shadow:        0 1px 3px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.06);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--page-bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

.mono { font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important; }

/* ============================================================
   SIDEBAR — 200px fixed
   ============================================================ */
#sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 20;
  overflow-y: auto;
  scrollbar-width: none;
}
#sidebar::-webkit-scrollbar { display: none; }

/* Logo */
.sidebar-logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 14px 15px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.logo-icon { flex-shrink: 0; display: block; }
.logo-text { display: flex; flex-direction: column; gap: 4px; }
.logo-wordmark {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.5px;
  line-height: 1;
}
.logo-closer { color: #ffffff; }
.logo-kit    { color: #2dd4bf; }
.logo-tagline {
  font-size: 8px;
  color: #2dd4bf;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
}

/* Section labels */
.sidebar-section-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.25);
  padding: 0 14px 5px;
}

/* Daily Stats */
.sidebar-stats {
  padding: 12px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 14px;
}
.stat-row-label { font-size: 11px; color: rgba(255,255,255,.38); }
.stat-row-val   {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,.65);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.stat-row-val.success { color: var(--success); }

/* Navigation */
.sidebar-nav {
  padding: 10px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  border-left: 2px solid transparent;
  transition: color .1s, background .1s, border-color .1s;
  margin: 1px 0;
}
.nav-item:hover {
  color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.05);
}
.nav-item.active {
  color: #fff;
  background: rgba(13,148,136,.2);
  border-left-color: var(--accent);
  font-weight: 600;
}
.nav-icon { font-size: 12px; width: 15px; text-align: center; flex-shrink: 0; opacity: .8; }

/* Lead Queue */
.sidebar-queue {
  padding: 10px 0 4px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#lead-queue-list {
  overflow-y: auto;
  scrollbar-width: none;
  flex: 1;
}
#lead-queue-list::-webkit-scrollbar { display: none; }

.queue-item {
  padding: 7px 8px;
  margin: 2px 6px;
  border-radius: 6px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .1s, border-color .1s;
}
.queue-item:hover:not(.active-lead) { background: rgba(255,255,255,.05); }
.queue-item.active-lead {
  background: rgba(13,148,136,.15);
  border-color: rgba(13,148,136,.45);
}
.queue-item-top {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 2px;
}
.queue-name {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.88);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.queue-badge {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 1px 5px;
  border-radius: 3px;
  flex-shrink: 0;
  line-height: 1.4;
}
.queue-badge.live     { background: rgba(13,148,136,.25); color: #2dd4bf; }
.queue-badge.referral { background: rgba(139,92,246,.2);  color: #a78bfa; }
.queue-phone {
  font-size: 9.5px;
  color: rgba(255,255,255,.28);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.queue-empty {
  font-size: 11px;
  color: rgba(255,255,255,.22);
  padding: 8px 14px;
  font-style: italic;
}

/* Start Dialing Button */
.sidebar-footer {
  padding: 10px 10px 14px;
  flex-shrink: 0;
}
.btn-start-dialing {
  width: 100%;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
  letter-spacing: .2px;
  font-family: inherit;
}
.btn-start-dialing:hover { background: var(--accent-dk); }

/* ============================================================
   APP MAIN
   ============================================================ */
#app-main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   TOP BAR
   ============================================================ */
#top-bar {
  /* Top header hidden globally — sidebar carries navigation context.
     The element stays in DOM so JS can write topbar-view-name
     (used by app.js navigate() and lead-detail.js). */
  display: none;
}
.topbar-view-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.2px;
}
.topbar-spacer { flex: 1; }

/* Call area (fills the right when a call is active) */
.topbar-call-area {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-lead-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.topbar-lead-name  { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.2; }
.topbar-lead-phone { font-size: 10.5px; color: var(--text-muted); font-family: 'SF Mono', 'Fira Code', monospace; }

.topbar-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52,211,153,.2);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 3px rgba(52,211,153,.2); }
  50%       { box-shadow: 0 0 0 6px rgba(52,211,153,.06); }
}

.call-timer {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1.5px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  min-width: 46px;
  text-align: center;
}
.btn-topbar-underwriter {
  background: #f3f4f6;
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.btn-topbar-underwriter:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-lt);
}
.btn-end-call {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 13px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
  letter-spacing: .2px;
  font-family: inherit;
}
.btn-end-call:hover { background: var(--danger-dk); }

/* ============================================================
   PAGE CONTENT
   ============================================================ */
#page-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

/* ============================================================
   VIEWS
   ============================================================ */
.view { display: none; }
.view.active { display: block; }
.view > h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 18px;
  letter-spacing: -.3px;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 22px;
  box-shadow: var(--shadow-sm);
}

/* ============================================================
   STATS GRID
   ============================================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
  gap: 12px;
}
.stat-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
}
.stat-card .label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.stat-card .value {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.5px;
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.stat-card .value.accent-val  { color: var(--accent); }
.stat-card .value.success-val { color: var(--success); }

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
}

/* ============================================================
   BUTTONS
   ============================================================ */
button {
  cursor: pointer;
  border: none;
  border-radius: var(--r);
  padding: 7px 13px;
  font-size: 13px;
  font-weight: 600;
  transition: background .1s, border-color .1s, color .1s;
  font-family: inherit;
  line-height: 1.4;
}
button:disabled { opacity: .38; cursor: not-allowed; }

button.primary {
  background: var(--accent);
  color: #fff;
}
button.primary:hover:not(:disabled) { background: var(--accent-dk); }

button.success { background: var(--success); color: #064e3b; font-weight: 700; }
button.success:hover:not(:disabled) { filter: brightness(.9); }

button.danger  { background: var(--danger); color: #fff; }
button.danger:hover:not(:disabled)  { background: var(--danger-dk); }

button.ghost {
  background: #f9fafb;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
button.ghost:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-lt);
}

/* ============================================================
   INPUTS
   ============================================================ */
input[type="text"], input[type="search"], input[type="tel"],
input[type="email"], input[type="number"], select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 7px 11px;
  font-size: 13px;
  outline: none;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
  transition: border-color .1s, box-shadow .1s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
#lead-search { width: 210px; }

/* ============================================================
   TABLE
   ============================================================ */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
th, td { padding: 9px 13px; text-align: left; border-bottom: 1px solid var(--border); font-size: 13px; }
th {
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  background: #f9fafb;
  font-weight: 700;
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--accent-lt); }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 9999px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.badge-new       { background: #e0f2fe; color: #0369a1; }
.badge-contacted { background: #fef9c3; color: #854d0e; }
.badge-qualified { background: var(--accent-lt); color: var(--accent-dk); }
.badge-closed    { background: #ecfdf5;  color: #059669; }
.badge-lost      { background: #fee2e2;  color: #991b1b; }

/* ============================================================
   DIALER PANEL — full-width, layout handled by .dv-layout
   ============================================================ */
#dialer-panel { width: 100%; height: 100%; }
.dial-pad {
  display: grid;
  grid-template-columns: repeat(3, 60px);
  gap: 8px;
  margin: 16px 0;
}
.dial-pad button {
  width: 60px; height: 60px;
  font-size: 18px;
  font-weight: 500;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 50%;
  transition: background .1s, border-color .1s, color .1s;
}
.dial-pad button:hover {
  background: var(--accent-lt);
  border-color: var(--accent);
  color: var(--accent);
}
#dial-number { width: 100%; font-family: 'SF Mono', 'Fira Code', monospace; font-size: 15px; }
.dialer-call-row { display: flex; gap: 8px; margin-top: 10px; }
.dialer-call-row button { flex: 1; padding: 12px; font-size: 14px; }

/* ============================================================
   SCRIPT PANEL — inside dv-script-scroll, max-width for readability
   ============================================================ */
#script-panel { max-width: 660px; }

.script-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.script-nav .spacer { flex: 1; }
.script-counter {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .6px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  text-transform: uppercase;
}

/* Progress bar track */
.script-progress {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 18px;
}
.script-progress-seg {
  height: 3px;
  flex: 1;
  background: var(--border);
  border-radius: 9999px;
  transition: background .2s;
}
.script-progress-seg.done   { background: var(--accent); }
.script-progress-seg.active { background: var(--accent); }

/* Script card */
.script-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 18px 22px;
  margin-bottom: 8px;
  transition: opacity .18s;
}
.script-card.dim-card { opacity: .28; pointer-events: none; }

.script-phase-badge {
  display: inline-flex;
  align-items: center;
  background: var(--accent-lt);
  border: 1px solid #99f6e4;
  color: var(--accent);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
}

.script-text {
  font-size: 13px;
  color: #374151;
  line-height: 1.95;
}

/* Highlighted lead variables [Name], [Company], etc. */
.script-var {
  color: var(--accent);
  background: var(--accent-lt);
  padding: 0 3px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 500;
}

/* Coach note */
.coach-note {
  border-left: 3px solid var(--warning);
  background: #fffbeb;
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  margin-top: 14px;
  font-size: 11.5px;
  color: #92400e;
  line-height: 1.55;
}
.coach-note-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--warning);
  margin-bottom: 3px;
}

/* Objections area */
.objections-area { margin-top: 16px; }
.objections-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.objection-item { margin-bottom: 5px; }
.objection-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #f9fafb;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text);
  text-align: left;
  font-family: inherit;
  transition: border-color .1s, background .1s, color .1s;
}
.objection-btn:hover {
  border-color: var(--accent);
  background: var(--accent-lt);
  color: var(--accent);
}
.objection-btn.open {
  border-color: var(--accent);
  background: var(--accent-lt);
  color: var(--accent);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.objection-arrow {
  font-size: 16px;
  color: var(--text-muted);
  flex-shrink: 0;
  line-height: 1;
  transition: transform .14s, color .1s;
}
.objection-btn.open .objection-arrow {
  transform: rotate(90deg);
  color: var(--accent);
}
.objection-response {
  display: none;
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--text);
  line-height: 1.65;
}
.objection-response.open { display: block; }

/* ============================================================
   MEDICAL UNDERWRITER SLIDE-IN
   ============================================================ */
#underwriter-panel {
  position: fixed;
  top: 0; right: 0;
  width: 340px;
  height: 100vh;
  background: var(--card-bg);
  border-left: 1px solid var(--border);
  box-shadow: -4px 0 24px rgba(0,0,0,.08);
  z-index: 30;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .26s cubic-bezier(.4,0,.2,1);
}
#underwriter-panel.open { transform: translateX(0); }

.underwriter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.underwriter-header h3 { font-size: 13px; font-weight: 700; }
#underwriter-close {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #f3f4f6;
  font-size: 13px;
  padding: 0;
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  border: none;
  cursor: pointer;
}
#underwriter-close:hover { background: #fee2e2; color: var(--danger); }

.underwriter-body { padding: 16px; overflow-y: auto; flex: 1; font-size: 13px; }
.uw-section { margin-bottom: 20px; }
.uw-section-title {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.uw-check-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  font-size: 12.5px;
  cursor: pointer;
  border-radius: 4px;
  transition: background .1s;
}
.uw-check-item:hover { background: #f9fafb; }
.uw-check-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 13px; height: 13px;
  border: none; padding: 0; box-shadow: none;
  flex-shrink: 0;
}
.uw-bmi-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.uw-bmi-inputs input { width: 100%; font-size: 12px; padding: 6px 9px; }
.uw-bmi-result {
  background: #f9fafb;
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.coach-tip {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  padding: 9px 11px;
  font-size: 12px;
  color: #92400e;
  line-height: 1.5;
  margin-bottom: 6px;
}
.coach-tip-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--warning);
  margin-bottom: 3px;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(17,24,39,.45);
  z-index: 50;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}
.modal-overlay.open { display: flex; }
.modal {
  background: var(--card-bg);
  border-radius: 10px;
  padding: 24px 28px;
  width: 450px;
  max-width: 94vw;
  box-shadow: 0 20px 60px rgba(0,0,0,.17);
}
.modal h3 { font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.form-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; }
.form-row label {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.form-row input, .form-row select, .form-row textarea { width: 100%; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }

/* ============================================================
   QUEUE HEADER — CSV upload
   ============================================================ */
.queue-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 10px;
}
.btn-csv-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent);
  background: rgba(13,148,136,.12);
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  transition: background .1s;
  line-height: 1.6;
  user-select: none;
  flex-shrink: 0;
}
.btn-csv-label:hover { background: rgba(13,148,136,.25); }

/* Queue items — state/age detail row */
.queue-detail {
  display: flex;
  align-items: center;
  gap: 6px;
}
.queue-state-age {
  font-size: 8.5px;
  color: rgba(255,255,255,.2);
  letter-spacing: .2px;
}

/* ============================================================
   TOPBAR — lead card + sub-info
   ============================================================ */
.topbar-lead-card {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.topbar-lead-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 1px;
}
.topbar-lead-meta {
  font-size: 10px;
  color: var(--text-muted);
  border-left: 1px solid var(--border);
  padding-left: 7px;
}
.topbar-elapsed {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: 1px;
}

/* Dial button */
.btn-dial {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
  letter-spacing: .3px;
  font-family: inherit;
}
.btn-dial:hover { background: var(--accent-dk); }

/* ============================================================
   SCRIPT VAR — filled (actual name substituted)
   ============================================================ */
.script-var.filled {
  color: var(--accent-dk);
  background: #99f6e4;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 12px;
}

/* ============================================================
   DISPOSITION MODAL
   ============================================================ */
.disp-modal { width: 400px; }

.disp-lead-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  padding: 9px 13px;
  background: var(--page-bg);
  border-radius: 6px;
}
#disp-lead-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.disp-duration {
  font-size: 12px;
  color: var(--text-muted);
}

.disp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.disp-btn {
  width: 100%;
  padding: 10px 8px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 7px;
  cursor: pointer;
  transition: filter .1s, transform .1s, box-shadow .1s;
  font-family: inherit;
  text-align: center;
  border: 2px solid transparent;
  line-height: 1.3;
}
.disp-btn:hover { filter: brightness(.93); transform: translateY(-1px); box-shadow: var(--shadow); }

/* No-contact */
.disp-btn.no-answer    { background: #fef9c3; color: #854d0e;           border-color: #fde68a; }
.disp-btn.busy         { background: #fef9c3; color: #854d0e;           border-color: #fde68a; }
/* Suppression */
.disp-btn.wrong-number { background: #f3f4f6; color: var(--text-muted); border-color: var(--border); }
.disp-btn.dnc          { background: #fee2e2; color: #991b1b;           border-color: #fca5a5; }
/* Contacted — no outcome (spans full row) */
.disp-btn.not-interested {
  grid-column: 1 / -1;
  background: #f3f4f6;
  color: var(--text);
  border-color: var(--border);
}
/* Follow-ups */
.disp-btn.callback     { background: #faf5ff; color: #6d28d9;           border-color: #ddd6fe; }
.disp-btn.appointment  { background: #eff6ff; color: #1d4ed8;           border-color: #bfdbfe; }
/* Win (spans full row) */
.disp-btn.sale {
  grid-column: 1 / -1;
  background: #ecfdf5;
  color: #065f46;
  border-color: #6ee7b7;
  font-size: 14px;
  font-weight: 800;
  padding: 12px;
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  bottom: 24px;
  left: calc(var(--sidebar-w) + 24px);
  background: var(--text);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 100;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .22s, transform .22s;
  pointer-events: none;
}
.toast.show      { opacity: 1; transform: translateY(0); }
.toast.toast-warn  { background: var(--warning); color: #1c1917; }
.toast.toast-error { background: var(--danger); }

/* ============================================================
   SCRIPT CARD — editable blocks
   ============================================================ */
.script-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.script-card-header .script-phase-badge { margin-bottom: 0; }

.script-card-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}

.script-edited-dot {
  font-size: 12px;
  color: var(--accent);
  opacity: .65;
  line-height: 1;
  cursor: default;
}

.btn-script-edit {
  background: none;
  border: none;
  padding: 3px 5px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  line-height: 1;
  transition: background .1s, color .1s;
  opacity: .4;
}
.btn-script-edit:hover,
.script-card:hover .btn-script-edit { opacity: 1; }
.btn-script-edit:hover { background: var(--page-bg); color: var(--accent); }

/* Edit panel */
.script-edit-panel { margin-top: 2px; }

.script-edit-ta {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  background: #fafafa;
  resize: vertical;
  line-height: 1.85;
  min-height: 120px;
  transition: border-color .1s, box-shadow .1s;
  outline: none;
}
.script-edit-ta:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  background: #fff;
}

.script-edit-actions {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
}
.script-edit-actions button { font-size: 12px; padding: 5px 11px; }

/* ============================================================
   SCRIPT NAV — top back link + inline next button
   ============================================================ */
.script-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.btn-script-prev {
  background: none;
  border: none;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 4px;
  transition: color .1s, background .1s;
  font-family: inherit;
  font-weight: 500;
}
.btn-script-prev:hover:not(:disabled) { color: var(--text); background: var(--page-bg); }
.btn-script-prev:disabled { opacity: .22; cursor: default; }

.script-next-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.btn-script-next {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
  letter-spacing: .2px;
}
.btn-script-next:hover { background: var(--accent-dk); }

/* ============================================================
   OBJECTION — Continue button
   ============================================================ */
.objection-response p { margin: 0; }

.btn-obj-continue {
  display: inline-block;
  margin-top: 14px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 7px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
  letter-spacing: .2px;
}
.btn-obj-continue:hover { background: var(--accent-dk); }

/* ============================================================
   NEW STATUS BADGES — callback, sold, dnc
   ============================================================ */
.badge-callback { background: #faf5ff; color: #6d28d9; }
.badge-sold     { background: #ecfdf5; color: #065f46; }
.badge-dnc      { background: #fee2e2; color: #991b1b; }

/* ============================================================
   LEADS — filter tabs
   ============================================================ */
.leads-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.filter-tab {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all .12s;
  font-family: inherit;
}
.filter-tab:hover { border-color: var(--accent); color: var(--accent); }
.filter-tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.filter-tab-count {
  font-size: 10px;
  font-weight: 700;
  background: rgba(0,0,0,.1);
  border-radius: 9999px;
  padding: 0 5px;
  min-width: 16px;
  text-align: center;
  line-height: 1.5;
}
.filter-tab.active .filter-tab-count { background: rgba(255,255,255,.25); }

/* ============================================================
   LEADS — two-col form row
   ============================================================ */
.form-row.two-col {
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}
.form-row.two-col .form-row { margin-bottom: 0; }

/* ============================================================
   DIALER VIEW — two-column layout
   ============================================================ */
.view-dialer-full {
  /* Cancel page-content padding on this view */
  margin: -24px;
  height: 100vh;
  overflow: hidden;
}
.dv-layout {
  display: flex;
  height: 100%;
}

/* Left queue column */
.dv-queue-col {
  width: 260px;
  flex-shrink: 0;
  background: var(--card-bg);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dv-queue-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.dv-queue-count {
  background: var(--page-bg);
  border-radius: 9999px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
}
.dv-queue-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.dv-queue-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 12px 8px;
  text-align: center;
  font-style: italic;
}
.dv-queue-item {
  padding: 9px 10px;
  border-radius: 7px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .1s, border-color .1s;
  margin-bottom: 3px;
}
.dv-queue-item:hover:not(.active) { background: var(--page-bg); }
.dv-queue-item.active {
  background: var(--accent-lt);
  border-color: #99f6e4;
}
.dv-qi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
.dv-qi-name {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dv-qi-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.dv-qi-phone {
  font-size: 10.5px;
  color: var(--text-muted);
  font-family: 'SF Mono', 'Fira Code', monospace;
}
.dv-qi-meta {
  font-size: 10px;
  color: var(--text-muted);
}
.dv-qi-badge { font-size: 8px; padding: 1px 5px; }

/* Right main column — flex column, controls fixed at top, script scrolls */
.dv-main-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Scrollable script area below controls */
.dv-script-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 20px 28px 28px;
}

/* ── Control bar ────────────────────────────────────────────── */
#dv-controls {
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.dv-ctrl-idle {
  padding: 14px 20px;
  font-size: 12.5px;
  color: var(--text-muted);
  background: #fafafa;
  text-align: center;
}

.dv-ctrl-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--card-bg);
  flex-wrap: wrap;
}
.dv-ctrl-live {
  background: #f0fdf9;
  border-bottom-color: #99f6e4;
}
.dv-ctrl-disposition {
  background: #f9fafb;
}

/* Lead info section */
.dv-ctrl-info {
  flex: 1;
  min-width: 0;
}
.dv-ctrl-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.3px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dv-ctrl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.dv-chip {
  display: inline-flex;
  align-items: center;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}
.dv-chip.phone {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  background: var(--card-bg);
  border-color: var(--border);
}
.dv-chip.count {
  background: rgba(13,148,136,.08);
  border-color: rgba(13,148,136,.2);
  color: var(--accent-dk);
  font-weight: 700;
}

/* Actions section */
.dv-ctrl-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Compact Dial button */
.dv-ctrl-dial-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, box-shadow .12s;
  font-family: inherit;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(13,148,136,.25);
}
.dv-ctrl-dial-btn:hover {
  background: var(--accent-dk);
  box-shadow: 0 3px 12px rgba(13,148,136,.35);
}

/* Live timer row */
.dv-ctrl-timer-row {
  display: flex;
  align-items: center;
  gap: 7px;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  border-radius: 7px;
  padding: 7px 13px;
}
.dv-ctrl-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(52,211,153,.2);
  animation: pulse-dot 2s infinite;
  flex-shrink: 0;
}
.dv-ctrl-timer {
  font-size: 17px;
  font-weight: 800;
  color: #065f46;
  letter-spacing: 2px;
}
.dv-ctrl-live-label {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--success);
}

/* End call button (compact) */
.dv-ctrl-end-btn {
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s;
  font-family: inherit;
  white-space: nowrap;
}
.dv-ctrl-end-btn:hover { background: var(--danger-dk); }

/* Call-ended state */
.dv-ctrl-ended {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
}
.dv-ctrl-ended-icon {
  font-size: 16px;
  color: var(--accent);
  font-weight: 800;
}

/* Underwriter button inside controls */
.dv-ctrl-uw-btn { font-size: 11.5px; padding: 6px 11px; }

/* ============================================================
   DISPOSITION MODAL — selection + conditional fields
   ============================================================ */
.disp-btn.selected {
  box-shadow: 0 0 0 2px var(--accent), inset 0 0 0 1px var(--accent);
  transform: scale(1.02);
  position: relative;
}
.disp-btn.selected::after {
  content: '✓';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 10px;
  color: var(--accent);
  font-weight: 800;
}
.disp-btn.sale.selected::after { color: #065f46; }

.disp-cond-fields {
  margin-top: 12px;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px 14px;
}
.disp-cond-fields .form-row { margin-bottom: 0; }
.disp-cond-fields label {
  font-size: 8px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
  display: block;
}
.disp-cond-fields input {
  width: 100%;
  font-size: 13px;
}
#disp-notes { width: 100%; font-size: 13px; resize: none; }

/* ============================================================
   IMPORT PREVIEW MODAL
   ============================================================ */
.import-modal { width: 400px; }

.import-summary { margin: 4px 0 0; }

.import-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 7px;
  margin-bottom: 6px;
  font-size: 13px;
}
.import-row .import-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.import-valid  { background: #f0fdf4; color: #065f46; }
.import-valid  .import-dot { background: var(--success); }
.import-dup    { background: #fef9c3; color: #854d0e; }
.import-dup    .import-dot { background: var(--warning); }
.import-inv    { background: #fef2f2; color: #991b1b; }
.import-inv    .import-dot { background: var(--danger); }

.import-replace-row {
  display:     flex;
  flex-direction: column;
  gap:         4px;
  margin-top:  14px;
  padding:     10px 12px;
  background:  #fff7ed;
  border:      1px solid #fed7aa;
  border-radius: var(--r);
  cursor:      pointer;
}
.import-replace-row input[type="checkbox"] { margin-right: 6px; accent-color: var(--warning); }
.import-replace-label { font-size: 13px; font-weight: 600; color: #92400e; }
.import-replace-hint  { font-size: 11.5px; color: #b45309; margin-left: 20px; line-height: 1.4; }

/* ============================================================
   ANALYTICS — section headers
   ============================================================ */
.an-section-head {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 10px;
}

/* AP summary row */
.an-ap-row {
  display: flex;
  gap: 12px;
}
.an-ap-card {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.an-ap-label {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
.an-ap-val {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  font-family: 'SF Mono','Fira Code',monospace;
  letter-spacing: -.5px;
}
.an-ap-val.accent { color: var(--accent); }

/* 7-day bar chart */
.an-chart-card { overflow: hidden; }
.an-bar-chart {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.an-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.an-bar-val {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  height: 18px;
  line-height: 18px;
  text-align: center;
}
.an-bar-track {
  width: 100%;
  height: 88px;
  background: var(--page-bg);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}
.an-bar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: #cbd5e1;
  border-radius: 4px 4px 0 0;
  transition: height .4s ease;
}
.an-bar-fill.today { background: var(--accent); }
.an-bar-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 6px;
  text-align: center;
  line-height: 1.3;
  white-space: nowrap;
}

/* Conversion funnel */
.an-funnel-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.an-funnel-row:last-child { border-bottom: none; }
.an-funnel-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.an-funnel-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--page-bg);
  border-radius: 4px;
  overflow: hidden;
}
.an-funnel-bar {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  transition: width .4s ease;
}
.an-funnel-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.an-funnel-n {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  min-width: 24px;
  text-align: right;
  font-family: 'SF Mono','Fira Code',monospace;
}
.an-funnel-pct {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 36px;
  font-family: 'SF Mono','Fira Code',monospace;
}

/* Disposition breakdown */
.an-disp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
}
.an-disp-row:last-child { border-bottom: none; }
.an-disp-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
}
.an-disp-bar-wrap {
  flex: 1;
  height: 8px;
  background: var(--page-bg);
  border-radius: 4px;
  overflow: hidden;
}
.an-disp-bar {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
  background: var(--accent);
}
/* Disposition-specific colors */
.disp-color-connected    { background: #34d399; }
.disp-color-sale         { background: #059669; }
.disp-color-voicemail    { background: #60a5fa; }
.disp-color-no_answer    { background: #fbbf24; }
.disp-color-callback     { background: #a78bfa; }
.disp-color-dnc          { background: #f87171; }
.disp-color-wrong_number { background: #9ca3af; }

.an-disp-n {
  min-width: 24px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  font-family: 'SF Mono','Fira Code',monospace;
  color: var(--text);
}

/* Disposition badges in analytics table */
.badge-disp-connected    { background: #ecfdf5; color: #059669; }
.badge-disp-sale         { background: #d1fae5; color: #065f46; }
.badge-disp-no_answer    { background: #fef9c3; color: #854d0e; }
.badge-disp-voicemail    { background: #e0f2fe; color: #0369a1; }
.badge-disp-callback     { background: #faf5ff; color: #6d28d9; }
.badge-disp-dnc          { background: #fee2e2; color: #991b1b; }
.badge-disp-wrong_number { background: #f3f4f6; color: #6b7280; }
.badge-disp-other        { background: #f3f4f6; color: #6b7280; }

/* ============================================================
   AUTH SCREEN
   Full-viewport centered card — shown before login
   ============================================================ */
/* ============================================================
   AUTH / LOGIN PAGE — Brief 9 redesign
   ============================================================ */
#auth-screen {
  position: fixed;
  inset: 0;
  background: #F8FAFC;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Faint R5d watermark — absolute, behind card */
.auth-watermark {
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 96px;
  background: #0D9488;
  opacity: 0.05;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
  color: white;
}

/* Login card */
.auth-card {
  position: relative;
  z-index: 1;
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 40px 36px 32px;
  width: 380px;
  max-width: calc(100vw - 32px);
  box-shadow: 0 1px 3px rgba(15,23,42,0.04), 0 0 0 1px rgba(15,23,42,0.02);
}

/* Header block */
.auth-header {
  text-align: center;
  margin-bottom: 28px;
}
.auth-brand-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
/* Teal tile wrapping the R5d mark */
.auth-mark {
  width: 32px;
  height: 32px;
  background: #0D9488;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.auth-mark svg {
  width: 16px;
  height: 16px;
  display: block;
}
.auth-wordmark {
  font-size: 20px;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.02em;
  line-height: 1;
}
.auth-tagline {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #94A3B8;
  font-weight: 500;
}

/* Welcome line */
.auth-welcome {
  text-align: center;
  font-size: 14px;
  color: #475569;
  margin-bottom: 24px;
}

/* Error banner (credentials / network errors) */
.auth-error {
  background: #FEF2F2;
  border: 0.5px solid #FECACA;
  color: #991B1B;
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
}
.auth-field-group {
  margin-bottom: 14px;
}
.auth-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  margin-bottom: 6px;
}
.auth-input {
  width: 100%;
  padding: 10px 12px;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  background: #F8FAFC;
  font-size: 14px;
  color: #0F172A;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
  outline: none;
}
.auth-input::placeholder { color: #94A3B8; }
.auth-input:focus {
  border-color: #0D9488;
  background: white;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.08);
}
.auth-input:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
/* Field-level validation hints */
.auth-field-hint {
  font-size: 11px;
  color: #991B1B;
  margin-top: 4px;
}

/* Remember me + Forgot password row */
.auth-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 0 20px;
}
.auth-remember {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  color: #475569;
  user-select: none;
}
.auth-checkbox {
  width: 16px;
  height: 16px;
  border: 0.5px solid #CBD5E1;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  accent-color: #0D9488;
}
.auth-forgot-btn {
  font-size: 12px;
  color: #0D9488;
  font-weight: 500;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: text-decoration 0.1s;
}
.auth-forgot-btn:hover { text-decoration: underline; }

/* Primary sign-in button */
.auth-submit-btn {
  width: 100%;
  padding: 11px 18px;
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.auth-submit-btn:hover:not(:disabled) { background: #0F766E; }
.auth-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Spinner inside submit button */
.auth-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.35);
  border-top-color: white;
  border-radius: 50%;
  animation: auth-spin 0.65s linear infinite;
  flex-shrink: 0;
}
@keyframes auth-spin { to { transform: rotate(360deg); } }

/* "or" divider */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
}
.auth-divider-line {
  flex: 1;
  height: 0.5px;
  background: #E2E8F0;
}
.auth-divider-or {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  font-weight: 500;
}

/* Secondary create-account button */
.auth-create-btn {
  width: 100%;
  padding: 11px 18px;
  background: white;
  color: #475569;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s, border-color 0.12s;
}
.auth-create-btn:hover {
  background: #F8FAFC;
  border-color: #94A3B8;
}

/* Footer */
.auth-footer {
  text-align: center;
  margin-top: 24px;
  font-size: 11px;
  color: #94A3B8;
}

/* ============================================================
   SIDEBAR — logged-in user area (above Start Dialing)
   ============================================================ */
.sidebar-user {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid rgba(255,255,255,.06);
  flex-shrink: 0;
  min-height: 0;
}
.sidebar-user-email {
  flex: 1;
  font-size: 9.5px;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.sidebar-logout-btn {
  font-size: 9px;
  padding: 3px 7px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.3);
  border: 1px solid rgba(255,255,255,.08);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  flex-shrink: 0;
  transition: all .12s;
  line-height: 1.5;
}
.sidebar-logout-btn:hover {
  background: rgba(239,68,68,.15);
  color: #fca5a5;
  border-color: rgba(239,68,68,.2);
}

/* ============================================================
   Lead Modal — Call History Panel
   ============================================================ */

.lead-history-section {
  border-top: 1px solid var(--border);
  margin-top: 16px;
  padding-top: 14px;
}

.lead-history-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.lead-history-list {
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.history-item {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 8px 10px;
  font-size: 12px;
}

.history-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}

.history-disp {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  background: #f3f4f6;
  color: var(--text-muted);
}
/* Disposition colour coding */
.history-disp-sold            { background: #d1fae5; color: #065f46; }
.history-disp-callback_set,
.history-disp-appointment_set { background: #dbeafe; color: #1e40af; }
.history-disp-dnc,
.history-disp-wrong_number    { background: #fee2e2; color: #991b1b; }
.history-disp-not_interested  { background: #fff7ed; color: #92400e; }
.history-disp-no_answer,
.history-disp-busy            { background: #fef9c3; color: #713f12; }

.history-date {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

.history-item-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 3px;
}

.history-dur {
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.history-ap {
  font-size: 11px;
  font-weight: 700;
  color: #065f46;
}

.history-notes {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
  margin-top: 2px;
}

.history-loading,
.history-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* ============================================================
   Lead Modal — Tabbed layout
   ============================================================ */

.modal-lead {
  width: 600px;
  max-width: 96vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.modal-tabs::-webkit-scrollbar { display: none; }

.modal-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s;
  font-family: inherit;
  flex-shrink: 0;
}
.modal-tab:hover { color: var(--text); }
.modal-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

.modal-tab-panel { min-height: 200px; }

/* ── Coverage ── */

.coverage-header-row,
.coverage-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 90px 80px 26px;
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.coverage-col-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-muted);
  padding-left: 2px;
}

.coverage-row input {
  width: 100%;
  padding: 6px 8px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card-bg);
  color: var(--text);
  font-family: inherit;
}
.coverage-row input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.btn-cov-remove {
  width: 24px;
  height: 24px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .12s;
  font-family: inherit;
}
.btn-cov-remove:hover { background: #fee2e2; color: var(--danger); border-color: #fca5a5; }

.coverage-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px 0 6px;
}

.btn-add-coverage {
  margin-top: 10px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  width: 100%;
  font-family: inherit;
  transition: all .12s;
}
.btn-add-coverage:hover { background: var(--accent-lt); border-color: var(--accent); }

/* ── Consent toggles ── */

.consent-section {
  display: flex;
  flex-direction: column;
}

.consent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  gap: 12px;
  user-select: none;
}
.consent-row:last-child { border-bottom: none; }

.consent-info { display: flex; flex-direction: column; gap: 2px; }
.consent-title { font-size: 13px; font-weight: 600; color: var(--text); }
.consent-sub   { font-size: 11px; color: var(--text-muted); }

.toggle-switch { position: relative; display: inline-block; flex-shrink: 0; }

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.toggle-track {
  display: block;
  width: 40px;
  height: 22px;
  background: #d1d5db;
  border-radius: 11px;
  cursor: pointer;
  transition: background .15s;
  position: relative;
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.toggle-switch input:checked + .toggle-track { background: var(--accent); }
.toggle-switch input:checked + .toggle-track .toggle-thumb { transform: translateX(18px); }

/* ── Tags ── */

.tag-chips-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  min-height: 40px;
  align-items: center;
  cursor: text;
  transition: border-color .12s;
}
.tag-chips-container:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--accent-lt);
  color: var(--accent-dk);
  border: 1px solid rgba(13,148,136,.2);
  border-radius: 20px;
  padding: 2px 4px 2px 10px;
  font-size: 12px;
  font-weight: 600;
}

.tag-chip-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--accent-dk);
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  opacity: .5;
  font-family: inherit;
}
.tag-chip-remove:hover { opacity: 1; }

.tag-input {
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--text);
  background: transparent;
  min-width: 80px;
  flex: 1;
  font-family: inherit;
  padding: 2px 0;
}

.tag-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 5px;
}

/* ── Referrer ── */

.referrer-display {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  flex-wrap: wrap;
}
.referrer-name { font-size: 13px; font-weight: 600; color: var(--text); }
.referrer-none { font-size: 13px; color: var(--text-muted); }

.btn-view-referrer  { font-size: 12px; padding: 3px 9px; }
.btn-clear-referrer {
  font-size: 12px;
  padding: 3px 9px;
  background: none;
  border: 1px solid #fca5a5;
  color: var(--danger);
  border-radius: var(--r);
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: all .12s;
}
.btn-clear-referrer:hover { background: #fee2e2; }


/* ════════════════════════════════════════════════════════════
   CSV Wizard — 4-step import overlay
   Class names match csv-wizard.js exactly.
   ════════════════════════════════════════════════════════════ */

/* ── Overlay & Panel ─────────────────────────────────────── */

#csv-wizard {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cw-panel {
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 14px;
  width: 100%;
  max-width: 780px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
  position: relative;
}

/* ── Header ──────────────────────────────────────────────── */

.cw-header {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  padding: 16px 20px 0;
  border-bottom: 0.5px solid #E2E8F0;
  flex-shrink: 0;
  gap: 12px;
}

.cw-title {
  font-size: 15px;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.01em;
}

.cw-close-btn {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  font-size: 16px;
  color: #94A3B8;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  transition: color 0.12s, background 0.12s;
}
.cw-close-btn:hover { color: #0F172A; background: #F1F5F9; }

/* ── Step Indicator ──────────────────────────────────────── */

.cw-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: -1px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.cw-step {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  cursor: default;
  transition: color 0.15s, border-color 0.15s;
}

.cw-step.cw-active {
  color: #0D9488;
  border-bottom-color: #0D9488;
}

.cw-step.cw-done { color: #94A3B8; }

.cw-sep {
  color: #CBD5E1;
  font-size: 13px;
  display: flex;
  align-items: center;
}

/* ── Body / Footer ───────────────────────────────────────── */

.cw-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: white;
}

.cw-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 0.5px solid #E2E8F0;
  flex-shrink: 0;
  gap: 10px;
  background: white;
}

/* Footer Next button */
.cw-next-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.cw-next-btn i { font-size: 15px; }
.cw-next-btn:hover:not(:disabled) { background: #0F766E; }
.cw-next-btn:disabled { opacity: 0.5; pointer-events: none; }

/* ── Step 1 — Upload ─────────────────────────────────────── */

.cw-dropzone {
  border: 1.5px dashed #CBD5E1;
  border-radius: 10px;
  padding: 36px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.15s ease;
  background: white;
}
.cw-dropzone:hover,
.cw-dropzone.cw-drag-over {
  border-color: #0D9488;
  background: #F0FDFA;
}

.cw-dz-icon {
  font-size: 32px;
  color: #94A3B8;
  margin-bottom: 12px;
  display: block;
  line-height: 1;
}

.cw-dz-text {
  font-size: 14px;
  font-weight: 500;
  color: #0F172A;
  margin-bottom: 4px;
}

.cw-dz-sub {
  font-size: 13px;
  color: #64748B;
}

.cw-dz-link {
  color: #0D9488;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
}
.cw-dz-link:hover { text-decoration: underline; }

/* Loading / parsing state */
.cw-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  background: #F8FAFC;
}
.cw-loading i {
  font-size: 18px;
  color: #0D9488;
  animation: cw-spin 0.8s linear infinite;
}
.cw-loading span {
  font-size: 14px;
  color: #64748B;
}
@keyframes cw-spin { to { transform: rotate(360deg); } }

/* file info bar after parse */
.cw-parse-result {}

.cw-file-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #F0FDFA;
  border: 0.5px solid rgba(13,148,136,0.2);
  border-radius: 8px;
  margin-bottom: 14px;
  font-size: 13px;
  flex-wrap: wrap;
}

.cw-filename {
  font-weight: 500;
  color: #0F766E;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-rowcount { color: #64748B; font-size: 12px; }

.cw-enc-pill {
  font-size: 11px;
  font-weight: 500;
  background: rgba(13,148,136,0.15);
  color: #0F766E;
  border-radius: 10px;
  padding: 2px 8px;
  letter-spacing: 0.03em;
}

.cw-reselect-btn { margin-left: auto; }

.cw-preview-wrap {
  overflow-x: auto;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
}

.cw-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.cw-preview-table th {
  background: #F8FAFC;
  color: #64748B;
  font-weight: 500;
  padding: 7px 10px;
  text-align: left;
  border-bottom: 0.5px solid #E2E8F0;
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.cw-preview-table td {
  padding: 5px 10px;
  border-bottom: 0.5px solid #F1F5F9;
  color: #0F172A;
  white-space: nowrap;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cw-preview-table tr:last-child td { border-bottom: none; }

/* ── Error states ────────────────────────────────────────── */

/* Full-body error (size limits, parse failure) */
.cw-error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  max-width: 460px;
  margin: 0 auto;
  padding: 48px 24px;
  background: #F8FAFC;
}
.cw-error-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #FEF2F2;
  color: #B91C1C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.cw-error-state-title {
  font-size: 17px;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.cw-error-row-count {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  font-size: 13px;
  color: #475569;
  font-variant-numeric: tabular-nums;
}
.cw-error-row-count strong { color: #B91C1C; font-weight: 500; }
.cw-error-state-desc {
  font-size: 14px;
  color: #64748B;
  line-height: 1.55;
  max-width: 420px;
}
.cw-error-state-hint {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.5;
  max-width: 380px;
  margin-top: 4px;
}
/* "Try another file" button (full-body errors) */
.cw-try-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: white;
  color: #334155;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.12s;
}
.cw-try-file-btn i { font-size: 15px; }
.cw-try-file-btn:hover { background: #F8FAFC; border-color: #94A3B8; }

/* Inline error card (header-row error — replaces drop zone) */
.cw-error-inline {
  background: #FEF2F2;
  border: 0.5px solid #FECACA;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}
.cw-error-inline-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: white;
  color: #B91C1C;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}
.cw-error-inline-title {
  font-size: 14px;
  font-weight: 500;
  color: #991B1B;
}
.cw-error-inline-desc {
  font-size: 13px;
  color: #7F1D1D;
  max-width: 380px;
  line-height: 1.5;
}
/* "Try again" button (inline error) */
.cw-try-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: white;
  color: #991B1B;
  border: 0.5px solid #FECACA;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.12s;
}
.cw-try-btn i { font-size: 14px; }
.cw-try-btn:hover { background: #FEF2F2; border-color: #FCA5A5; }

/* ── Step 2 — Map Columns ────────────────────────────────── */

.cw-step2 { display: flex; flex-direction: column; gap: 16px; }

/* required-field-not-mapped banner */
#cw-required-warn-slot:empty { display: none; }
.cw-required-warn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-left: 4px solid #B91C1C;
  border-radius: var(--r);
  color: #7F1D1D;
  font-size: 13px;
  line-height: 1.45;
}
.cw-required-warn strong { color: #B91C1C; }

/* mapping rows */
.cw-mapping-wrap {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.cw-mapping-header {
  display: grid;
  grid-template-columns: 1fr 24px 1fr;
  gap: 8px;
  padding: 7px 12px;
  background: var(--page-bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}

.cw-mapping-row {
  display: grid;
  grid-template-columns: 1fr 24px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
  transition: background .1s, box-shadow .1s;
}
.cw-mapping-row:last-child { border-bottom: none; }
.cw-mapping-row:hover { background: var(--page-bg); }

/* Fix A — mapping row state colors */
.cw-mapping-row.cw-row-unset   { box-shadow: inset 3px 0 0 #f59e0b; background: #fffbeb; }
.cw-mapping-row.cw-row-mapped  { box-shadow: inset 3px 0 0 #10b981; background: #f0fdf4; }
.cw-mapping-row.cw-row-custom  { box-shadow: inset 3px 0 0 var(--accent); background: var(--accent-lt); }
.cw-mapping-row.cw-row-ignored { box-shadow: inset 3px 0 0 #BA7517; background: #FAEEDA; }
.cw-mapping-row.cw-row-ignored .cw-csv-col { color: #BA7517; background: #fdf0d8; border-color: #d49532; }
.cw-mapping-row.cw-row-unset:hover   { background: #fef3c7; }
.cw-mapping-row.cw-row-mapped:hover  { background: #dcfce7; }
.cw-mapping-row.cw-row-custom:hover  { background: #ccfbf1; }
.cw-mapping-row.cw-row-ignored:hover { background: #f7e0b8; }
/* "Ignored" badge — visible only when row has cw-row-ignored */
.cw-ignored-badge {
  display: none;
  font-size: 11px;
  font-weight: 500;
  color: #BA7517;
  background: #fdf0d8;
  border: 1px solid #d49532;
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
}
.cw-row-ignored .cw-ignored-badge { display: inline; }

.cw-csv-col {
  font-family: monospace;
  font-size: 12px;
  color: var(--text);
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cw-map-arrow { color: var(--text-muted); text-align: center; font-size: 14px; }

.cw-map-select {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-size: 12px;
  padding: 5px 6px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  transition: border-color .12s;
}
.cw-map-select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.cw-custom-name {
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  color: var(--text);
  font-size: 12px;
  padding: 4px 7px;
  font-family: inherit;
  width: 120px;
  outline: none;
}
.cw-custom-name:focus { box-shadow: 0 0 0 2px var(--accent-ring); }
.cw-custom-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cw-custom-name--error {
  border-color: #E24B4A !important;
}
.cw-custom-err {
  font-size: 11px;
  color: #A32D2D;
  line-height: 1.2;
}

/* live mapping preview */
.cw-map-preview-wrap {}

.cw-map-preview-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 8px;
}

.cw-map-tbl { min-width: 400px; }

.cw-preview-empty {
  font-size: 13px;
  color: var(--text-muted);
  padding: 12px;
  margin: 0;
}

/* ── Unmapped column warning modal ───────────────────────── */
.cw-ignore-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.cw-ignore-modal {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
.cw-ignore-modal-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 10px;
}
.cw-ignore-modal-body {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 12px;
  line-height: 1.5;
}
.cw-ignore-col-list  { margin-bottom: 12px; }
.cw-ignore-col-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-left: 3px solid #BA7517;
  background: #FAEEDA;
  padding: 6px 10px;
  font-size: 13px;
  color: #633806;
  border-radius: var(--border-radius-md, 4px);
  margin-bottom: 4px;
}
.cw-ignore-col-warn { flex-shrink: 0; }
.cw-ignore-modal-sub {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 16px;
  line-height: 1.5;
}
.cw-ignore-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-ignore-btn-back {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 400;
  border: 0.5px solid var(--color-border-secondary, var(--border));
  border-radius: var(--r, 6px);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .1s;
}
.cw-ignore-btn-back:hover { background: var(--page-bg); }
.cw-ignore-btn-continue {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  border: none;
  border-radius: var(--r, 6px);
  background: #0d9488;
  color: #fff;
  cursor: pointer;
  transition: background .1s;
}
.cw-ignore-btn-continue:hover { background: #0a7a72; }

/* ── Step 3 — Batch Metadata ─────────────────────────────── */

.cw-step3 {}

.cw-meta-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cw-meta-row { display: flex; flex-direction: column; gap: 5px; }

.cw-meta-row.cw-two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));   /* two-up normally; stacks to one when too narrow */
  gap: 14px;
  align-items: start;                                            /* each field keeps its natural height (cost hint vs tier) */
}
.cw-meta-row.cw-two-col > div { display: flex; flex-direction: column; gap: 5px; }

.cw-meta-label {
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.cw-req { color: #0D9488; font-size: 10px; font-style: normal; }
.cw-optional { color: #94A3B8; font-weight: 400; font-size: 10px; text-transform: none; letter-spacing: 0; }

.cw-meta-input {
  background: var(--card-bg);
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  color: #0F172A;
  font-size: 13px;
  padding: 8px 11px;
  font-family: inherit;
  transition: border-color .12s;
  width: 100%;
  box-sizing: border-box;
}
.cw-meta-input:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.15);
}

.cw-meta-select {
  background: var(--card-bg);
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  color: #0F172A;
  font-size: 13px;
  padding: 8px 11px;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .12s;
}
.cw-meta-select:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.15);
}

.cw-meta-textarea {
  background: var(--card-bg);
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  color: #0F172A;
  font-size: 13px;
  padding: 8px 11px;
  font-family: inherit;
  resize: vertical;
  transition: border-color .12s;
  width: 100%;
  box-sizing: border-box;
}
.cw-meta-textarea:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.15);
}

.cw-meta-hint { font-size: 11px; color: var(--text-muted); }

/* vendor combobox */
.cw-vendor-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #F0FDFA;
  border: 0.5px solid rgba(13,148,136,.25);
  border-radius: 10px;
}

.cw-vendor-name { font-size: 13px; font-weight: 500; color: #0F766E; }

.cw-vendor-combo { position: relative; }

.cw-vendor-input {
  background: var(--card-bg);
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  color: #0F172A;
  font-size: 13px;
  padding: 8px 11px;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .12s;
}
.cw-vendor-input:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.15);
}

.cw-vendor-dd {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  z-index: 20;
  max-height: 200px;
  overflow-y: auto;
}

.cw-vendor-opt {
  padding: 8px 12px;
  font-size: 13px;
  color: #0F172A;
  cursor: pointer;
  transition: background .1s;
}
.cw-vendor-opt:hover { background: #F8FAFC; }

.cw-vendor-create { color: #0D9488; font-weight: 500; border-top: 0.5px solid #E2E8F0; }
.cw-dd-empty { color: #94A3B8; cursor: default; }

/* new vendor card */
.cw-nv-card {
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cw-nv-card-title {
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.cw-nv-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* Fix C — selected vendor: inline edit / delete */
.cw-vendor-sel-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  flex-wrap: wrap;
}

/* Vendor ⋮ actions menu — collapses Rename / Archive / Change */
.cw-vendor-menu-wrap { position: relative; margin-left: auto; flex-shrink: 0; }
.cw-vendor-menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 7px;
  border: 0.5px solid transparent; background: transparent;
  color: #0F766E; font-size: 18px; cursor: pointer; transition: background .12s;
}
.cw-vendor-menu-btn:hover { background: rgba(13,148,136,.10); }
.cw-vendor-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  background: white; border: 0.5px solid #E2E8F0; border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  z-index: 40; min-width: 152px; padding: 4px;
}
.cw-vendor-menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: none; background: transparent;
  font-size: 13px; color: #0F172A; cursor: pointer; border-radius: 6px;
  text-align: left; font-family: inherit;
}
.cw-vendor-menu-item:hover { background: #F1F5F9; }
.cw-vendor-menu-item i { font-size: 15px; color: #64748B; }

.cw-vendor-sel-actions .ghost {
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  border-radius: 6px;
  padding: 4px 8px;
}
.cw-vendor-sel-actions .ghost:hover { background: #F1F5F9; }

.cw-vendor-no-delete {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
}

.cw-vendor-edit-form {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cw-vendor-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.cw-vendor-edit-err {
  font-size: 12px;
  color: var(--danger);
  min-height: 16px;
}

/* state chips */
.cw-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  min-height: 40px;
  align-items: center;
  cursor: text;
  background: var(--card-bg);
  transition: border-color .12s;
}
.cw-chips-wrap:focus-within { border-color: #0D9488; box-shadow: 0 0 0 2px rgba(13,148,136,0.15); }

.cw-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #F0FDFA;
  color: #0F766E;
  border: 0.5px solid rgba(13,148,136,.25);
  border-radius: 20px;
  padding: 2px 4px 2px 9px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
}

.cw-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  color: #0F766E;
  font-size: 10px;
  line-height: 1;
  padding: 0 3px;
  opacity: .6;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
}
.cw-chip-x:hover { opacity: 1; color: #B91C1C; }

.cw-state-inp {
  border: none;
  outline: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  color: #0F172A;
  background: transparent;
  min-width: 80px;
  flex: 1;
  font-family: inherit;
  padding: 2px 0;
  text-transform: uppercase;
  transition: color .1s;
}
.cw-state-inp--error {
  color: #dc2626 !important;
  animation: cw-shake .15s ease-in-out 2;
}
@keyframes cw-shake {
  0%,100% { transform: translateX(0); }
  33%      { transform: translateX(-3px); }
  66%      { transform: translateX(3px); }
}

/* Fix D — state typeahead */
.cw-state-field { position: relative; }

.cw-state-dd {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12);
  z-index: 30;
  max-height: 200px;
  overflow-y: auto;
}

.cw-state-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
  transition: background .1s;
}
.cw-state-opt:hover { background: #F8FAFC; }
.cw-state-opt--hi  { background: #F0FDFA; }   /* keyboard-highlighted match (mirrors .al-state-opt--hi) */

.cw-state-opt--added { opacity: .45; cursor: default; pointer-events: none; }

.cw-state-opt-code {
  font-weight: 500;
  font-family: monospace;
  color: #0F172A;
  min-width: 28px;
  flex-shrink: 0;
}

.cw-state-opt-name { color: #64748B; flex: 1; }

.cw-state-opt-check { color: #0D9488; font-size: 12px; }

.cw-state-err {
  font-size: 12px;
  color: var(--danger);
  padding: 4px 2px 0;
  min-height: 18px;
}

/* tier radios (legacy — kept for any existing references) */
.cw-tier-radios {
  display: flex;
  gap: 8px;
}

.cw-tier-radio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 20px;
  border: 2px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--card-bg);
  transition: border-color .12s, background .12s, color .12s;
}
.cw-tier-radio input[type="radio"] { display: none; }
.cw-tier-radio:hover { border-color: var(--accent); color: var(--text); }
.cw-tier-radio.cw-active { border-color: var(--accent); background: var(--accent-lt); color: var(--accent-dk); }

/* ── Auto-tier read-only display (Step 3) ────────────────── */
.cw-tier-auto-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 0.5px solid #E2E8F0;
  border-radius: 10px;
  min-height: 38px;
}
.cw-tier-auto-label {
  font-size: 13px;
  font-weight: 500;
  color: #475569;
}
.cw-tier-auto-placeholder {
  font-size: 13px;
  color: #94A3B8;
}
.cw-tier-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 500;
}
.cw-tier-pill-a { background: #D1FAE5; color: #047857; }
.cw-tier-pill-b { background: #CCFBF1; color: #115E59; }
.cw-tier-pill-c { background: #F1F5F9; color: #475569; }

/* cost hint */
.cw-cost-hint { font-size: 12px; color: #64748B; margin-top: 4px; min-height: 16px; }

/* $ prefix wrapper */
.cw-cost-wrap {
  position: relative;
  display: block;
  width: 100%;
}
.cw-cost-prefix {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.cw-cost-input { padding-left: 22px !important; }

/* remove browser number spinners */
input[type="number"].cw-meta-input::-webkit-outer-spin-button,
input[type="number"].cw-meta-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"].cw-meta-input { -moz-appearance: textfield; }

/* meta error */
/* Inline per-field error text */
.cw-field-err {
  font-size: 12px;
  color: #B91C1C;
  padding: 3px 2px 0;
  margin-top: 2px;
}
/* Red border on field with validation error */
.cw-meta-select.cw-field-error,
.cw-meta-input.cw-field-error {
  border-color: #B91C1C !important;
  box-shadow: 0 0 0 2px rgba(185,28,28,.12);
}
.cw-chips-wrap.cw-field-error {
  border-color: #B91C1C !important;
  box-shadow: 0 0 0 2px rgba(185,28,28,.12);
}

/* ghost button for Step 3 footer */
.cw-ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  background: white;
  color: #334155;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.cw-ghost-btn i { font-size: 14px; }
.cw-ghost-btn:hover { background: #F8FAFC; border-color: #94A3B8; }
.cw-vendor-combo.cw-field-error .cw-vendor-input,
#cw-vendor-wrap.cw-field-error .cw-vendor-input {
  border-color: var(--danger) !important;
}
/* Bottom banner (legacy — kept for any remaining references) */
.cw-meta-err {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-radius: var(--r);
  padding: 10px 14px;
  color: var(--danger);
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
}

/* ── Step 4 — Review & Import ────────────────────────────── */

.cw-step4 {}

.cw-dedup-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 0;
  color: #64748B;
  font-size: 14px;
}

.cw-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: cw-spin .7s linear infinite;
  flex-shrink: 0;
}

@keyframes cw-spin { to { transform: rotate(360deg); } }

/* dedup summary cards */
.cw-dedup-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.cw-dedup-card {
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 14px 12px;
  text-align: center;
}

.cw-dedup-num {
  font-size: 28px;
  font-weight: 800;
  color: var(--text);
  line-height: 1;
  margin-bottom: 4px;
}

.cw-dedup-card.accent .cw-dedup-num { color: var(--accent); }
.cw-dedup-card.warn   .cw-dedup-num { color: #d97706; }
.cw-dedup-card.danger .cw-dedup-num { color: var(--danger); }

.cw-dedup-lbl {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
}

/* expandable dedup detail */
.cw-dedup-detail {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
}

.cw-dedup-detail summary {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 8px 12px;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  background: var(--page-bg);
}
.cw-dedup-detail summary::before {
  content: '▶';
  font-size: 10px;
  transition: transform .15s;
  flex-shrink: 0;
}
.cw-dedup-detail[open] summary::before { transform: rotate(90deg); }

.cw-dedup-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  color: var(--text-muted);
  max-height: 160px;
  overflow-y: auto;
}

.cw-dedup-list li {
  padding: 5px 12px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.cw-dedup-list .name { color: var(--text); font-weight: 600; }
.cw-dedup-list .meta { color: var(--text-muted); font-size: 11px; flex: 1; }
.cw-dedup-list .badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--accent-lt);
  color: var(--accent-dk);
  flex-shrink: 0;
}
.cw-dedup-list .badge.sold    { background: #dcfce7; color: #166534; }
.cw-dedup-list .badge.supp    { background: #fee2e2; color: #991b1b; }
.cw-dedup-list .badge.active  { background: #fef9c3; color: #854d0e; }
.cw-dedup-list .badge.invalid { background: #fee2e2; color: #991b1b; }

.cw-warn-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #92400E;
  padding: 10px 14px;
  background: #FFFBEB;
  border: 0.5px solid #FDE68A;
  border-radius: 8px;
  margin-bottom: 14px;
}

/* ── Step 4 — Batch Name Block ───────────────────────────── */
/* Neutralized so the name pill below (Q-session-card style) reads cleanly,
   not nested inside a competing teal card. */
.cw-batch-name-block {
  margin-bottom: 18px;
}
.cw-batch-name-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #0D9488;
  margin-bottom: 6px;
}
/* Match the Q-session-card name box (.ad-session-namebox): black text on a
   light-teal pill — same padding, radius, color, weight. */
.cw-batch-name-value {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  background: #E1F5EE;
  color: var(--color-text-primary, #0F172A);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* clip cleanly (match the other batch-name pills) */
}
.cw-batch-name-note {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* ── Step 4 — 3 Summary Review Cards ────────────────────── */
.cw-review-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.cw-review-card {
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: center;
}
.cw-review-card-num {
  font-size: 22px;
  font-weight: 500;
  color: #0D9488;
  line-height: 1.1;
}
.cw-review-card-num.cw-review-card-text {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}
.cw-review-card-lbl {
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: 4px;
}

/* ── Step 4 — Single Dedup Row ───────────────────────────── */
.cw-dedup-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 12px;
}
.cw-dedup-row-ok {
  background: white;
  border: 0.5px solid #E2E8F0;
  color: #64748B;
}
.cw-dedup-row-warn {
  background: #FFFBEB;
  border: 0.5px solid #FDE68A;
  color: #92400E;
}
.cw-dedup-row-text { flex: 1; }

/* ── Commit summary block ─────────────────────────────── */
.cw-commit-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: #FAFBFC;
  border: 0.5px solid #E2E8F0;
  border-radius: 10px;
  font-size: 13px;
  color: #0F172A;
}
.cw-commit-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  line-height: 1.5;
}
.cw-commit-line-label { font-weight: 500; }
.cw-commit-bullet { color: #475569; white-space: nowrap; }
.cw-commit-line--warn .cw-commit-line-label { color: #B45309; }
.cw-commit-line--warn .cw-commit-bullet     { color: #B45309; }
.cw-commit-line--note .cw-commit-line-label { color: #64748B; }
.cw-commit-line--note .cw-commit-bullet     { color: #64748B; }
.cw-commit-line--ok   { color: #047857; font-weight: 500; gap: 6px; }

/* commit import button */
.cw-commit-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
}
.cw-commit-btn:hover:not(:disabled) { background: #0F766E; }
.cw-commit-btn:disabled { opacity: 0.5; pointer-events: none; }

/* commit progress */
.cw-commit-progress { margin-top: 12px; }

.cw-commit-progress-label { font-size: 12px; color: #64748B; margin-bottom: 6px; }

.cw-commit-bar {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.cw-commit-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width .2s;
  width: 0%;
}

/* ── Close confirmation dialog ───────────────────────────── */

.cw-confirm-close {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  border-radius: 12px;
}

.cw-confirm-close-inner {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px 24px;
  max-width: 320px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  text-align: center;
}

.cw-confirm-close-inner p {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 16px;
}

.cw-confirm-close-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* danger-toned primary for destructive confirm */
.btn-danger-confirm {
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 600;
  background: var(--danger);
  color: #fff;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  font-family: inherit;
  transition: background .12s;
}
.btn-danger-confirm:hover { background: var(--danger-dk); }

/* ── Step 1 — Upload intro & header requirement ──────────── */

.cw-s1-upload {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cw-s1-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Removed: .cw-s1-heading, .cw-s1-help, .cw-s1-example-caption, .cw-s1-tip
   (Section 1 of brief — content removed) */

.cw-s1-requirement {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #FFFBEB;
  border: 0.5px solid #FDE68A;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #92400E;
}

.cw-s1-req-icon { font-size: 16px; flex-shrink: 0; color: #92400E; }

.cw-s1-example-wrap {
  overflow-x: auto;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  background: white;
}

.cw-s1-example-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.cw-s1-example-table th {
  background: #F0FDFA;
  color: #0F766E;
  font-weight: 500;
  padding: 7px 10px;
  text-align: left;
  border-bottom: 0.5px solid #E2E8F0;
  white-space: nowrap;
  font-family: monospace;
  letter-spacing: 0.02em;
}

.cw-s1-example-table td {
  padding: 5px 10px;
  border-bottom: 0.5px solid #F1F5F9;
  color: #64748B;
  white-space: nowrap;
  font-family: monospace;
  background: white;
}

.cw-s1-example-table tr:last-child td { border-bottom: none; }

/* ── Success card (Step 4 post-commit) ───────────────────── */

.cw-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  gap: 10px;
}

.cw-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #0D9488;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
  box-shadow: 0 4px 16px rgba(13,148,136,.35);
}

.cw-success-title {
  font-size: 20px;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.01em;
}

/* Same light-teal pill as the step-4 batch name (.cw-batch-name-value /
   .ad-session-namebox): black text on #E1F5EE — same padding, radius, weight. */
.cw-success-name {
  display: inline-block;
  max-width: 100%;
  padding: 3px 10px;
  background: #E1F5EE;
  color: var(--color-text-primary, #0F172A);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
}

/* View Batch button on success screen */
.cw-success-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 28px;
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-top: 20px;
  transition: background 0.12s;
}
.cw-success-btn:hover { background: #0F766E; }

.cw-success-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 6px;
}

.cw-stat-pill {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  background: #F8FAFC;
  color: #64748B;
  border: 0.5px solid #E2E8F0;
}

.cw-stat-pill.accent {
  background: #F0FDFA;
  color: #0F766E;
  border: 0.5px solid rgba(13,148,136,.2);
}

.cw-stat-pill.warn {
  background: #FFFBEB;
  color: #92400E;
  border: 0.5px solid #FDE68A;
}

/* ════════════════════════════════════════════════════════════
   Vendor Manager Modal
   ════════════════════════════════════════════════════════════ */

#vm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.vm-panel {
  position: relative;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.vm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.vm-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
}

.vm-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  color: var(--text-muted);
  cursor: pointer;
  line-height: 1;
  padding: 4px 6px;
  border-radius: var(--r);
  font-family: inherit;
  transition: color .12s, background .12s;
}
.vm-close-btn:hover { color: var(--text); background: var(--page-bg); }

.vm-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 20px;
}

.vm-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

.vm-loading { color: var(--text-muted); font-size: 13px; padding: 20px 0; text-align: center; }
.vm-error   { color: var(--danger); font-size: 13px; padding: 12px 0; }
.vm-empty   { color: var(--text-muted); font-size: 13px; padding: 20px 0; text-align: center; }

/* Table */
.vm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.vm-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
}

.vm-col-leads   { width: 120px; }
.vm-col-actions { width: 160px; }

.vm-row td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.vm-row:last-child td { border-bottom: none; }
.vm-row:hover td { background: var(--page-bg); }

.vm-name-display { font-weight: 600; color: var(--text); }

.vm-rename-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vm-rename-inp {
  background: var(--card-bg);
  border: 1px solid var(--accent);
  border-radius: var(--r);
  color: var(--text);
  font-size: 13px;
  padding: 5px 8px;
  font-family: inherit;
  flex: 1;
  outline: none;
  box-shadow: 0 0 0 2px var(--accent-ring);
}

.vm-inline-err {
  font-size: 11px;
  color: var(--danger);
  margin-top: 4px;
}

.vm-leads-td {
  color: var(--text-muted);
  font-size: 13px;
}

.vm-batch-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-left: 4px;
}

.vm-actions-td {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vm-btn-rename {
  font-size: 12px;
  color: var(--text-muted);
}

.vm-btn-delete {
  font-size: 12px;
  color: var(--danger);
  background: none;
  border: 1px solid #fca5a5;
  border-radius: var(--r);
  cursor: pointer;
  font-family: inherit;
  padding: 4px 10px;
  font-weight: 600;
  transition: background .12s, color .12s;
}
.vm-btn-delete:hover { background: #fee2e2; }

.vm-no-delete {
  font-size: 11px;
  color: var(--text-muted);
  font-style: italic;
  cursor: help;
}

/* ── Archived vendors section (Vendor Manager) ──────────────── */
.vm-archived-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  margin-bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 0.5px solid #CBD5E1;
  background: #F8FAFC;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.vm-archived-toggle:hover { background: #F1F5F9; color: #0F172A; }
.vm-archived-toggle i { font-size: 12px; }

.vm-archived-header-row td {
  padding: 8px 10px 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  border-bottom: 0.5px solid #E2E8F0;
}

.vm-archived-row td { opacity: 0.7; }
.vm-archived-name   { color: #64748B !important; }

.vm-empty-row {
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
  padding: 16px 10px;
}

/* ── Archived vendors in CSV wizard vendor dropdown ─────────── */
.cw-vendor-archived {
  display: flex;
  align-items: center;
  gap: 6px;
}
.cw-vendor-archived-name { color: #64748B; }
.cw-vendor-archived-label {
  font-size: 10px;
  font-weight: 500;
  color: #94A3B8;
  flex-shrink: 0;
}
.cw-vendor-dd-divider {
  height: 0;
  border-top: 0.5px solid #E2E8F0;
  margin: 4px 0;
}
.cw-vendor-restore-confirm {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cw-vendor-restore-msg {
  font-size: 13px;
  color: #0F172A;
  line-height: 1.4;
}
.cw-vendor-restore-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ================================================================
   MODULE 5 — LEADS LIST  (ll- prefix)
   ================================================================ */

/* ── Toolbar (legacy flex — kept for reference) ───────────────── */
.ll-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 10px;
  gap: 10px;
  flex-wrap: wrap;
}
.ll-toolbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ll-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ll-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.3px;
}

/* ── Top bar — three-column grid layout ───────────────────────── */
.ll-topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 12px 0 10px;
}
.ll-topbar-left {
  display: flex;
  align-items: center;
}
.ll-topbar-center {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ll-topbar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ── Saved Views Chips ────────────────────────────────────────── */
.ll-views-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 8px;
  flex-wrap: wrap;
}
.ll-view-chip {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
  white-space: nowrap;
  font-family: inherit;
}
.ll-view-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-lt);
}
.ll-view-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.ll-view-chip-save {
  border-style: dashed;
  color: var(--text-muted);
}
.ll-view-chip-save:hover {
  border-style: dashed;
}

/* ── Filter Bar ───────────────────────────────────────────────── */
.ll-filter-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 4px;
  flex-wrap: wrap;
}
.ll-search-wrap {
  flex: 1 1 160px;
  min-width: 140px;
  max-width: 280px;
  position: relative;
}
.ll-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  font-size: 13px;
  pointer-events: none;
}
.ll-search-input {
  width: 100%;
  height: 34px;
  padding: 0 10px 0 32px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color .12s;
}
.ll-search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(13,148,136,.12);
}
.ll-search-input::placeholder { color: var(--text-muted); }

/* Custom multi-select dropdown */
.ll-fd {
  position: relative;
}
.ll-fd-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, background .12s;
}
.ll-fd-btn:hover { border-color: var(--accent); }
.ll-fd--active .ll-fd-btn {
  border-color: var(--accent);
  background: var(--accent-lt);
  color: var(--accent-dk);
  font-weight: 600;
}
.ll-fd-arr {
  font-size: 9px;
  opacity: .6;
  margin-left: 2px;
}
.ll-fd-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 300;
  min-width: 190px;
  max-width: 260px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  padding: 6px 0;
}
.ll-fd-panel-search {
  padding: 6px 10px 4px;
}
.ll-fd-search {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--page-bg);
  font-size: 12px;
  font-family: inherit;
  color: var(--text);
  box-sizing: border-box;
}
.ll-fd-search:focus { outline: none; border-color: var(--accent); }
.ll-fd-opts {
  max-height: 220px;
  overflow-y: auto;
  padding: 2px 0;
}
.ll-fd-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  user-select: none;
  transition: background .08s;
}
.ll-fd-opt:hover { background: var(--page-bg); }
.ll-fd-opt.checked { color: var(--accent-dk); font-weight: 600; }
.ll-fd-opt input[type="checkbox"] {
  accent-color: var(--accent);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}
.ll-fd-empty {
  padding: 8px 12px;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}
.ll-fd-footer {
  padding: 4px 10px 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.ll-fd-clear {
  font-size: 12px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 2px 0;
}
.ll-fd-clear:hover { text-decoration: underline; }

/* Single-select <select> filters */
.ll-select-filter {
  height: 34px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  transition: border-color .12s;
}
.ll-select-filter:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(13,148,136,.12);
}
.ll-select-filter.ll-sel--active {
  border-color: var(--accent);
  background-color: var(--accent-lt);
  color: var(--accent-dk);
  font-weight: 600;
}

/* ── Active Filter Chips ──────────────────────────────────────── */
.ll-filter-chips {
  padding: 2px 0 6px;
}
.ll-chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.ll-act-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 8px 0 10px;
  background: var(--accent-lt);
  border: 1px solid #99f6e4;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent-dk);
  white-space: nowrap;
}
.ll-chip-x {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  color: var(--accent-dk);
  padding: 0;
  margin-left: 2px;
  font-family: inherit;
  opacity: .7;
  transition: opacity .1s;
}
.ll-chip-x:hover { opacity: 1; }
.ll-match-count {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 2px;
}
.ll-clear-all {
  font-size: 12px;
  color: var(--danger);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  padding: 0 4px;
  transition: opacity .1s;
}
.ll-clear-all:hover { text-decoration: underline; }

/* ── Status Tabs ──────────────────────────────────────────────── */
.ll-status-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px 0 0;
  border-bottom: 2px solid var(--border);
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.ll-status-tab {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 12px;
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: var(--r) var(--r) 0 0;
  transition: color .12s, border-color .12s, background .12s;
  white-space: nowrap;
}
.ll-status-tab:hover {
  color: var(--text);
  background: var(--page-bg);
}
.ll-status-tab.active {
  color: var(--accent-dk);
  font-weight: 700;
  border-bottom-color: var(--accent);
}
.ll-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 0 5px;
  background: var(--page-bg);
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
}
.ll-status-tab.active .ll-tab-count {
  background: var(--accent-lt);
  color: var(--accent-dk);
}

/* ── Table ────────────────────────────────────────────────────── */
.ll-table-wrap {
  overflow-x: auto;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
}
.ll-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  color: var(--text);
}
.ll-th {
  position: sticky;
  top: 0;
  padding: 9px 10px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  user-select: none;
  z-index: 1;
}
.ll-th-sortable { cursor: pointer; }
.ll-th-sortable:hover { color: var(--text); }
.ll-th-sort-asc .ll-sort-icon::after  { content: ' ↑'; }
.ll-th-sort-desc .ll-sort-icon::after { content: ' ↓'; }
.ll-sort-icon {
  font-size: 11px;
  color: var(--text-muted);
  display: inline;
}
.ll-sort-icon.active { color: var(--accent); }

/* Row */
.ll-row { border-bottom: 1px solid var(--border); transition: background .08s; }
.ll-row:last-child { border-bottom: none; }
.ll-row:hover { background: var(--page-bg); }
.ll-row td { padding: 8px 10px; vertical-align: middle; }

/* Column widths */
.ll-td-check   { width: 32px; text-align: center; }
.ll-td-name    { min-width: 130px; }
.ll-td-phone   { min-width: 110px; white-space: nowrap; }
.ll-td-state   { min-width: 80px; white-space: nowrap; }
.ll-td-status  { min-width: 110px; }
.ll-td-batch   { min-width: 120px; max-width: 160px; }
.ll-td-niche   { min-width: 90px; }
.ll-td-attempts{ min-width: 60px; text-align: right; }
.ll-td-last    { min-width: 100px; white-space: nowrap; }
.ll-td-next    { min-width: 110px; white-space: nowrap; }
.ll-td-source  { min-width: 90px; }
.ll-td-actions { min-width: 100px; white-space: nowrap; }

/* Cell content helpers */
.ll-lead-name {
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}
.ll-lead-name:hover { color: var(--accent); text-decoration: underline; }
.ll-state-code { font-weight: 600; }
.ll-local-time {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.ll-text-muted { color: var(--text-muted); }
.ll-text-sm    { font-size: 12px; }
.ll-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Next action date coloring */
.ll-overdue { color: var(--danger); font-weight: 600; }
.ll-today   { color: var(--accent-dk); font-weight: 600; }

/* Status pills */
.ll-status-pill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 11px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .2px;
}
/* ── 7 approved disposition states ─────────────────────── */
.ll-s-open             { background: #E6F1FB; color: #185FA5; } /* Active     — blue   */
.ll-s-appointments     { background: #EEEDFE; color: #534AB7; } /* Appts      — purple */
.ll-s-closed           { background: #EAF3DE; color: #3B6D11; } /* Closed     — green  */
.ll-s-nurture          { background: #FAEEDA; color: #BA7517; } /* Nurture    — amber  */
.ll-s-not_qualified    { background: #F1EFE8; color: #5F5E5A; } /* NQ         — gray   */
.ll-s-bad_number       { background: #FAECE7; color: #993C1D; } /* Bad Number — coral  */
.ll-s-suppressed       { background: #FCEBEB; color: #A32D2D; } /* Suppressed — red    */

/* Action buttons */
.ll-btn-call,
.ll-btn-edit {
  height: 26px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s, opacity .12s;
  border: 1px solid transparent;
}
.ll-btn-call {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.ll-btn-call:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
.ll-btn-call.tcpa-blocked {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: auto; /* keep tooltip hover working */
}
.ll-btn-edit {
  background: var(--card-bg);
  color: var(--text-muted);
  border-color: var(--border);
}
.ll-btn-edit:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: var(--page-bg);
}

/* ── Pagination ───────────────────────────────────────────────── */
.ll-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 2px 4px;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-muted);
}
.ll-pag-info { flex: 1 1 auto; }
.ll-pag-right {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ll-pag-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ll-pag-btn {
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.ll-pag-btn:hover:not(:disabled) {
  background: var(--page-bg);
  border-color: var(--accent);
}
.ll-pag-btn:disabled { opacity: .4; cursor: not-allowed; }
.ll-pag-size {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}
.ll-pag-size select {
  height: 28px;
  padding: 0 22px 0 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.ll-pag-size select:focus { outline: none; border-color: var(--accent); }

/* ── Empty state ──────────────────────────────────────────────── */
.ll-empty {
  text-align: center;
  padding: 56px 20px;
  color: var(--text-muted);
}
.ll-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
  opacity: .5;
}
.ll-empty p {
  font-size: 14px;
  margin: 0;
}

/* ================================================================
   SECTION 3 — BATCHES VIEW  (ll-main-toggle, ll-batch-, ll-import-banner- prefixes)
   ================================================================ */

/* ── Main view toggle (Batches / All Leads) ─────────────────── */
.ll-main-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--page-bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px;
  gap: 0;
}
.ll-toggle-pill {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border-radius: 18px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s;
  font-family: inherit;
  white-space: nowrap;
}
.ll-toggle-pill:hover { color: var(--text); }
.ll-toggle-pill.active {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

/* ── Toolbar right additions ────────────────────────────────── */
.ll-add-manual-link {
  font-size: 13px;
  color: var(--text-muted);
  text-decoration: none;
  padding: 0 4px;
  cursor: pointer;
}
.ll-add-manual-link:hover { color: var(--accent); text-decoration: underline; }

/* ── Import complete banner ─────────────────────────────────── */
.ll-import-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #d1fae5;
  border: 1px solid #6ee7b7;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 13px;
}
.ll-import-banner-icon {
  color: #065f46;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}
.ll-import-banner-text {
  flex: 1;
  color: #065f46;
  font-weight: 500;
}
.ll-import-banner-dismiss {
  color: #047857;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}
.ll-import-banner-dismiss:hover { text-decoration: underline; }

/* ── Batches list container ─────────────────────────────────── */
.ll-batches-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 24px;
}
.ll-batches-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ── Batch card ─────────────────────────────────────────────── */
.ll-batch-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px 14px;
  border-left: 3px solid transparent;
  transition: border-left-color .12s, box-shadow .12s;
}
.ll-batch-card:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.ll-batch-card--new {
  border-left: 3px solid var(--accent);
}

/* Card header row */
.ll-batch-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.ll-batch-name-wrap { flex: 1; min-width: 0; }
.ll-batch-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ll-batch-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Status pills */
.ll-batch-status-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
}
.ll-batch-status-new        { background: #E1F5EE; color: #0F6E56; }
.ll-batch-status-active     { background: #E6F1FB; color: #185FA5; }
.ll-batch-status-needs-work { background: #FAEEDA; color: #BA7517; }
.ll-batch-status-archived   { background: var(--color-background-secondary, #f3f4f6); color: var(--color-text-secondary, #9ca3af); }

/* Two-zone stats layout (Campaign + Performance) */
.ll-batch-zones {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
}
.ll-batch-zone {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 7px;
  overflow: hidden;
}
.ll-batch-zone-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--text-muted);
  text-transform: uppercase;
  padding: 4px 10px 3px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--border);
}
.ll-batch-zone-stats {
  display: flex;
  gap: 0;
}
.ll-batch-stat {
  flex: 1;
  padding: 8px 10px 7px;
  text-align: center;
  border-right: 1px solid var(--border);
}
.ll-batch-stat:last-child { border-right: none; }
.ll-batch-zone--campaign .ll-batch-stat-val {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.1;
}
/* State A: 5 equal muted columns (no dials yet) */
.ll-batch-perf--empty .ll-batch-stat-val {
  font-size: 19px;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.1;
}
/* State B: AP written in performance left section */
.ll-batch-perf--active .ll-batch-zone-stats {
  flex-direction: row;
  align-items: stretch;
}
.ll-batch-perf-body {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
}
.ll-batch-perf-left {
  flex: 1.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px 7px;
  border-right: 1px solid var(--border);
}
.ll-batch-ap-val {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.ll-batch-ap-lbl-row {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ll-batch-perf-right {
  flex: 1;
  display: flex;
  flex-direction: row;
}
.ll-batch-perf-right .ll-batch-stat-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
/* Muted "—" value (State A columns, Working=0) */
.ll-batch-stat-val--muted {
  color: var(--text-muted) !important;
}
/* Amber Untouched value when "Needs work" status */
.ll-batch-stat-val--needs-work {
  color: #BA7517 !important;
}
.ll-batch-stat-lbl {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ll-batch-roi-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--accent-lt);
  color: var(--accent-dk);
}

/* Batch list pagination */
.ll-batch-load-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 16px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--r);
  color: var(--text-muted);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, color .15s;
}
.ll-batch-load-more:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ll-batch-show-less-row {
  text-align: center;
  padding: 6px 0 2px;
}
.ll-batch-show-less {
  font-size: 12px;
  color: var(--text-muted);
  text-decoration: none;
  cursor: pointer;
}
.ll-batch-show-less:hover { color: var(--accent); text-decoration: underline; }

/* Batch search bar */
.ll-batch-search-wrap {
  margin-bottom: 10px;
}
.ll-batch-search {
  width: 100%;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--card-bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  box-sizing: border-box;
  outline: none;
  transition: border-color .1s, box-shadow .1s;
}
.ll-batch-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-ring);
}

/* Health tags row */
.ll-batch-health-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.ll-batch-htag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
}
.ll-batch-htag--ok   { background: #d1fae5; color: #065f46; }
.ll-batch-htag--warn { background: #fef3c7; color: #92400e; }

/* Actions row */
.ll-batch-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding-top: 2px;
}
.ll-batch-act-btn {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background .1s, border-color .1s;
}
.ll-batch-act-btn:hover {
  background: var(--accent-lt);
  border-color: var(--accent);
}
.ll-batch-act-flagged {
  color: #92400e;
  border-color: #fbbf24;
}
.ll-batch-act-flagged:hover {
  background: #fef3c7;
  border-color: #f59e0b;
}

/* ================================================================
   SECTION 1 — FIRST-TIME EMPTY STATE  (ll-fte- prefix)
   ================================================================ */
.ll-fte {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 64px;
  text-align: center;
  min-height: 420px;
}
.ll-fte-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent-lt);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.ll-fte-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 8px;
}
.ll-fte-sub {
  font-size: 14px;
  color: var(--text-muted);
  max-width: 380px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.ll-fte-actions {
  margin-bottom: 16px;
}
.ll-fte-actions .primary {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  padding: 10px 22px;
}
.ll-fte-manual {
  font-size: 13px;
  color: var(--text-muted);
}
.ll-fte-manual-link {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.ll-fte-manual-link:hover { text-decoration: underline; }

/* ================================================================
   MODULE 5b — BATCH HEALTH PANEL  (bh- prefix)
   ================================================================ */

/* Outer container */
.bh-panel {
  background: var(--page-bg);
  border-radius: 12px;
  padding: 14px;
  margin: 6px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Success Banner ───────────────────────────────────────── */
.bh-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f0fdf4;
  border-radius: var(--r);
  padding: 11px 14px;
}
.bh-banner-icon {
  font-size: 18px;
  color: #15803d;
  flex-shrink: 0;
  line-height: 1;
}
.bh-banner-body { flex: 1; min-width: 0; }
.bh-banner-title {
  font-size: 14px;
  font-weight: 500;
  color: #15803d;
  line-height: 1.4;
}
.bh-banner-meta {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bh-banner-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: var(--text-muted);
  padding: 2px 4px;
  line-height: 1;
  flex-shrink: 0;
  transition: color .1s;
  font-family: inherit;
}
.bh-banner-close:hover { color: var(--text); }

/* ── Health Card ──────────────────────────────────────────── */
.bh-health-card {
  background: var(--card-bg);
  border-radius: var(--r);
  padding: 14px;
}
.bh-section-label {
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
}
.bh-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.bh-sub-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 5px;
}
/* Data completeness rows */
.bh-dc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 12px;
  line-height: 1.9;
  gap: 6px;
}
.bh-dc-ok  { color: #15803d; font-size: 12px; flex-shrink: 0; }
.bh-dc-bad { color: var(--danger); font-size: 12px; flex-shrink: 0; }
.bh-dc-val { font-weight: 500; }
.bh-dc-val-bad { color: var(--danger); }
/* Quality signal rows */
.bh-qs-row {
  font-size: 12px;
  line-height: 1.9;
}
.bh-warn-icon { color: #b45309; font-size: 12px; }

/* Cohort summary */
.bh-cohort {
  background: var(--page-bg);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 12px;
}
.bh-cohort-val {
  font-size: 13px;
  color: var(--text);
}

/* Needs attention */
.bh-needs {
  background: #faeeda;
  border-radius: var(--r);
  padding: 10px 12px;
}
.bh-needs-header {
  font-size: 11px;
  color: #854f0b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}
.bh-needs-row {
  font-size: 12px;
  color: #633806;
  line-height: 1.8;
}
.bh-needs-dot {
  font-size: 14px;
  vertical-align: -2px;
  margin-right: 3px;
}
.bh-needs-link {
  margin-left: 4px;
  text-decoration: underline;
  color: #633806;
  font-weight: 500;
  cursor: pointer;
}
.bh-needs-link:hover { opacity: .8; }
.bh-needs-note {
  margin-left: 4px;
  color: #854f0b;
  font-style: italic;
}

/* ── Three Action Cards ───────────────────────────────────── */
.bh-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.bh-card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: var(--r);
  padding: 12px;
  cursor: pointer;
  transition: background .1s, border-color .1s;
}
.bh-card:hover { background: var(--page-bg); border-color: var(--text-muted); }
.bh-card-primary {
  border: 2px solid var(--accent);
}
.bh-card-primary:hover { background: var(--accent-lt); }
.bh-card-icon {
  font-size: 16px;
  margin-bottom: 4px;
}
.bh-card-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  margin-top: 4px;
}
.bh-card-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.bh-card-sub-ok { color: #15803d; }

/* ── Leads Preview Card ───────────────────────────────────── */
.bh-preview-card {
  background: var(--card-bg);
  border-radius: var(--r);
  padding: 12px;
}
.bh-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bh-view-all {
  font-size: 11px;
  color: var(--accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.bh-view-all:hover { text-decoration: underline; }
.bh-preview-row {
  display: flex;
  align-items: center;
  padding: 4px 0;
  border-bottom: 0.5px solid var(--border);
  font-size: 11px;
  gap: 8px;
}
.bh-preview-last { border-bottom: none; }
.bh-preview-name  { flex: 2; color: var(--text); font-weight: 500; }
.bh-preview-phone { flex: 1; color: var(--text-muted); }
.bh-preview-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 6px 0;
}

/* ── Preview status pills ─────────────────────────────────── */
.bh-pill {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  align-self: center;
}
.bh-pill-nodob        { background: #fac775; color: #412402; }
/* The 7 canonical lead statuses (keyed by raw lead.status). */
.bh-s-active          { background: #E6F1FB; color: #185FA5; } /* Active      — blue   */
.bh-s-appointment_set { background: #EEEDFE; color: #534AB7; } /* Appointment — purple */
.bh-s-nurture         { background: #FAEEDA; color: #BA7517; } /* Nurture     — amber  */
.bh-s-closed          { background: #EAF3DE; color: #3B6D11; } /* Closed      — green  */
.bh-s-not_qualified   { background: #F1EFE8; color: #5F5E5A; } /* Not Qual    — gray   */
.bh-s-suppressed      { background: #FCEBEB; color: #A32D2D; } /* Suppressed  — red    */
.bh-s-bad_number      { background: #FAECE7; color: #993C1D; } /* Bad Number  — coral  */
/* TCPA call-window badge (reuses the .bh-pill family palette) */
.bh-tcpa-green        { background: #d1fae5; color: #065f46; }
.bh-tcpa-amber        { background: #fef3c7; color: #92400e; }
.bh-tcpa-red          { background: #fee2e2; color: #991b1b; }

/* ================================================================
   SECTION 4 — BATCH DETAIL VIEW  (bv- prefix)
   ================================================================ */

/* ── Top bar ──────────────────────────────────────────────── */
.bv-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-bottom: 0.5px solid #E2E8F0;
  font-size: 13px;
}
.bv-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #0D9488;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  padding: 4px 6px;          /* match .dl-back so the hover box has padding */
  border-radius: 6px;        /* match .dl-back */
  transition: color .15s, background .15s;
}
/* Same greenish hover box as the dial screen's "Back to Auto Dialer" (.dl-back:hover). */
.bv-back:hover { color: #0F766E; background: var(--accent-lt); }
.bv-back i { font-size: 14px; }
.bv-sep { color: #94A3B8; display: inline-flex; align-items: center; }
/* CloserKit batch-name pill — matches .ad-session-namebox / .cw-batch-name-value. */
.bv-title {
  display: inline-block;
  background: #E1F5EE;
  color: var(--color-text-primary, #0F172A);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Tab bar ──────────────────────────────────────────────── */
/* Tabs row = scrolling tab lane (flex:1) + far-right pinned filter slot */
/* Sticky header rows (batch-detail list view only). The window is the scroller, so
   #page-content's overflow:auto must be neutralised for sticky to pin to the viewport
   — scoped via :has() so ONLY the batch-detail view (which renders .bv-tabs-row) is
   affected; every other view keeps #page-content's overflow untouched. */
#page-content:has(.bv-tabs-row) { overflow: visible; }
.bv-tabs-row {
  display: flex;
  align-items: stretch;
  background: white;
  border-bottom: 0.5px solid #E2E8F0;
  padding-right: 24px;            /* gutter so the filter isn't flush to the edge */
  position: sticky;
  top: 0;
  z-index: 30;                    /* above the sticky column headers (z-20) */
}
.bv-tabs {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 0 24px;
  background: white;
  flex: 1;                        /* fills the lane → pushes .bv-tab-filter far right */
  min-width: 0;                   /* allow the lane to shrink/scroll instead of pushing the filter off */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bv-tab-filter {
  flex: 0 0 auto;                 /* pinned far right, sized to the dropdown */
  display: flex;
  align-items: center;            /* vertically center the dropdown in the row */
  padding-left: 16px;             /* clear space between tabs and filter */
}
.bv-tabs::-webkit-scrollbar { display: none; }
.bv-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  color: #64748B;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color .12s, border-color .12s;
  outline: none;
}
.bv-tab:focus-visible {
  box-shadow: inset 0 0 0 1.5px rgba(13, 148, 136, 0.4);
  border-radius: 6px 6px 0 0;
}
.bv-tab:hover { color: #0F172A; }
.bv-tab.active {
  color: #0F172A;
  border-bottom-color: #0D9488;
}
.bv-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 18px;
  padding: 1px 7px;
  background: #F1F5F9;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
}
.bv-tab-count--active,
.bv-tab.active .bv-tab-count {
  color: #0F766E;
  background: #F0FDFA;
}
/* Expand button */
.bv-tab-expand {
  display: inline-flex;
  align-items: center;
  padding: 12px 10px;
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: color .12s;
  margin-bottom: -0.5px;
}
.bv-tab-expand:hover, .bv-tab-expand.is-open { color: #0F172A; }
.bv-tab-expand i { transition: transform .2s; }
.bv-tab-expand.is-open i { transform: rotate(180deg); }
/* Hidden tabs */
.bv-tab.bv-tab-hidden {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  pointer-events: none;
  background: #F1F5F9;
  border-top: 1px solid #E2E8F0;
  margin-top: -0.5px;
  transition: max-width 0.2s ease, opacity 0.2s ease, padding 0.2s ease;
}
.bv-tab.bv-tab-hidden .bv-tab-count {
  background: #E2E8F0;
  color: #64748B;
}
.bv-tabs.is-open .bv-tab.bv-tab-hidden {
  max-width: 200px;
  opacity: 1;
  padding-left: 14px;
  padding-right: 14px;
  pointer-events: auto;
}

/* ── Controls bar (queue + search + per-page) ────────────── */
.bv-controls-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0 6px;
  flex-wrap: wrap;
}
.bv-cbar-left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bv-cbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.bv-cbar-queue-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
  border-radius: var(--r, 6px);
  border: 0.5px solid #0d9488;
  background: transparent;
  color: #0d9488;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  transition: background .12s, color .12s;
}
.bv-cbar-queue-btn.bv-cbar-queue-btn--active {
  border: 0.5px solid #0d9488;
  background: #0d9488;
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  pointer-events: auto;
}
.bv-cbar-queue-btn.bv-cbar-queue-btn--active:hover { background: #0a7a72; }
.bv-cbar-sel-count {
  font-size: 12px;
  color: #0d9488;
  font-weight: 500;
}
.bv-cbar-show-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ── Table ────────────────────────────────────────────────── */
.bv-table-wrap {
  /* overflow must stay visible so the sticky <thead> pins to the window, not to an
     intermediate scrollport (overflow-x:auto would force overflow-y:auto too). */
  overflow: visible;
}

/* Scroll-to-top button — batch-detail list view only (created/removed in JS). */
.bv-scroll-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.22);
  z-index: 50;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.bv-scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.bv-scroll-top:hover { background: var(--accent-dk); }
.bv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  /* Override the global `table { overflow: hidden }` so the sticky <thead> isn't
     trapped in a table scrollport (border-collapse already nullifies border-radius,
     so nothing was being clipped). */
  overflow: visible;
}
.bv-table thead {
  background: #FAFBFC;
  border-bottom: 0.5px solid #E2E8F0;
}
.bv-table thead th {
  padding: 11px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  /* Stick directly below the tabs row (its measured height is set on #ll-table-wrap).
     th needs its own bg + bottom hairline since the <thead> bg doesn't follow a
     sticky cell. */
  position: sticky;
  top: var(--bv-tabs-h, 41px);
  z-index: 20;
  background: #FAFBFC;
  box-shadow: inset 0 -0.5px 0 #E2E8F0;
}
.bv-table thead th.sort-active { color: #0F172A; }
.bv-table tbody tr {
  border-bottom: 0.5px solid #F1F5F9;
  transition: background .1s;
  cursor: pointer;
}
.bv-table tbody tr:hover { background: #FAFBFC; }
.bv-table tbody tr.selected { background: #F0FDFA; }
.bv-table tbody tr.selected:hover { background: #E6FFFA; }
.bv-table tbody td {
  padding: 14px 16px;
  vertical-align: top;
  font-size: 13px;
  color: #0F172A;
}
.bv-th-cb, .bv-td-cb {
  width: 36px;
  padding-left: 16px !important;
  padding-right: 4px !important;
  cursor: default;
}
.bv-th-cb {
  white-space: nowrap;
}
/* Quiet 1..N row number, sits to the right of the per-row checkbox */
.bv-row-num {
  margin-left: 8px;
  font-size: 12px;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
  vertical-align: middle;
}
/* Styled checkbox */
.bv-checkbox, .bv-row-check {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  min-width: 16px;
  border: 1.5px solid #CBD5E1;
  border-radius: 4px;
  background: white;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  vertical-align: middle;
}
.bv-checkbox:checked, .bv-row-check:checked {
  background: #0D9488;
  border-color: #0D9488;
}
.bv-checkbox:checked::after, .bv-row-check:checked::after {
  content: '\2714';
  font-size: 10px;
  color: white;
  font-weight: bold;
  line-height: 1;
}

/* ── Select-N input ──────────────────────────────────────── */
.bv-select-n-input {
  width: 56px;
  height: 24px;
  padding: 2px 6px;
  font-size: 12px;
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  color: #0F172A;
  background: white;
  border: 0.5px solid #CBD5E1;
  border-radius: 6px;
  text-align: center;
  outline: none;
  transition: border-color 0.12s, box-shadow 0.12s;
  vertical-align: middle;
  margin-left: 6px;
}
.bv-select-n-input:focus {
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.12);
}
.bv-select-n-input::placeholder { color: #94A3B8; }
/* Hide browser spin buttons */
.bv-select-n-input::-webkit-outer-spin-button,
.bv-select-n-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bv-select-n-input[type=number] { -moz-appearance: textfield; }

/* ── Active tab: equal-width cols 2–5 ───────────────────── */
.bv-table.bv-active-table { table-layout: fixed; width: 100%; }
.bv-active-table .bv-th-cb { width: 120px; }
.bv-active-table .bv-td-cb { width: 120px; }
.bv-active-table th:not(.bv-th-cb),
.bv-active-table td:not(.bv-td-cb) { width: 25%; }
/* With the conditional "Best time" column there are 5 content columns */
.bv-active-table.bv-has-bt th:not(.bv-th-cb),
.bv-active-table.bv-has-bt td:not(.bv-td-cb) { width: 20%; }
.bv-best-time { font-size: 13px; color: #0F172A; }

/* ── Lead cell ────────────────────────────────────────────── */
.bv-lead-cell { min-width: 0; }
.bv-lead-name {
  position: relative;          /* anchors the absolutely-positioned Q badge */
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  margin-bottom: 3px;
  color: #0F172A;
}
.bv-lead-phone { font-size: 12px; color: #64748B; font-variant-numeric: tabular-nums; }
/* Queue chip */
.bv-q-chip {
  background: #F0FDFA;
  color: #0F766E;
  border: 0.5px solid rgba(13,148,136,0.25);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Dial-queue "Q#" badge — leading slot before the lead name (Active tab) */
.bv-q-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 1px 7px;
  border-radius: 10px;
  background: #E1F5EE;
  color: #0F6E56;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}
.bv-q-badge i { font-size: 12px; }
/* In the Active-tab lead row, float the Q badge into the gap left of the name
   so the lead name keeps a fixed left position whether or not a badge is present. */
.bv-lead-name .bv-q-badge {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}
/* Queued leads: checkbox greyed + not selectable — muted, plain cursor (no 🚫) */
.bv-checkbox:disabled, .bv-row-check:disabled { opacity: .35; cursor: default; }
/* Phone cell */
.bv-phone-cell { vertical-align: top; }
/* Attempts cell */
.bv-attempts-cell { vertical-align: top; }
.bv-attempts-count { font-weight: 500; color: #0F172A; font-size: 13px; font-variant-numeric: tabular-nums; }
.bv-attempts-zero  { color: #94A3B8; }
.bv-attempts-meta  { font-size: 12px; color: #94A3B8; margin-left: 4px; }
/* State/Time cell */
.bv-state-cell { display: flex; align-items: center; gap: 8px; }
.bv-state-code {
  font-weight: 500; color: #0F172A; font-size: 13px;
  width: 108px;            /* fits the longest state name → badges align in a column */
  white-space: nowrap;
}
.bv-state-time { font-size: 11px; font-variant-numeric: tabular-nums; }
/* "Call now" fire — lit when the lead's best-time window is open (Active tab only) */
.bv-fire { color: #D85A30; font-size: 15px; flex-shrink: 0; }
/* Bulk action bar */
.bv-bulk-bar {
  position: fixed;
  /* Near the top of the list, just below the sticky tabs + column-header rows,
     so it's visible right after selecting from the top — no scroll needed. */
  top: calc(var(--bv-tabs-h, 41px) + 48px);
  /* Centre over the content column (right of the fixed sidebar), not the viewport,
     otherwise the sidebar makes it look shifted left. */
  left: calc((100vw + var(--sidebar-w)) / 2);
  transform: translateX(-50%);
  z-index: 50;
  width: auto;
  min-width: 320px;
  max-width: 480px;
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.12), 0 2px 8px rgba(15,23,42,0.06);
}
/* Keep it centred over the narrower content column when the sidebar is collapsed. */
body.ck-collapsed .bv-bulk-bar { left: calc((100vw + var(--ck-sidebar-collapsed-w)) / 2); }
.bv-bulk-count { font-size: 13px; font-weight: 500; color: #0F172A; font-variant-numeric: tabular-nums; }
.bv-bulk-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.bv-bulk-action-btn:hover { background: #0F766E; }
.bv-bulk-clear {
  margin-left: auto;
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
  cursor: pointer;
}
.bv-bulk-clear:hover { color: #0F172A; }

/* ── Add-to-queue confirmation modal (two-step) ───────────── */
.bvq-overlay {
  position: fixed; inset: 0;
  background: rgba(17,24,39,.45);
  backdrop-filter: blur(2px);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
/* Hard dialer pop-up: dim only the center — start past the 360px left rail so the Pause
   button stays uncovered/clickable. The modal still centers within the remaining area. */
.bvq-overlay.bvq-overlay--hard { left: 360px; }
.bvq-modal {
  background: #fff;
  border-radius: 14px;
  width: 420px; max-width: 94vw;
  box-shadow: 0 20px 60px rgba(15,23,42,.22);
  overflow: hidden;
}
.bvq-step { padding: 20px 22px 22px; }
.bvq-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bvq-head-center { justify-content: center; }
.bvq-title { font-size: 16px; font-weight: 600; color: #0F172A; margin: 0; }
.bvq-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: none; background: none; border-radius: 6px;
  color: #94A3B8; cursor: pointer; font-size: 18px; transition: background .12s, color .12s;
}
.bvq-x:hover { background: #F1F5F9; color: #0F172A; }
/* CloserKit teal batch-name pill (matches .ad-session-namebox / .cw-success-name) */
.bvq-batch-name {
  display: inline-block; max-width: 100%;
  padding: 3px 10px; background: #E1F5EE; color: #0F172A;
  border-radius: 8px; font-size: 13px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* clip cleanly (match the other batch-name pills) */
}
.bvq-pill-row { margin-bottom: 16px; }
.bvq-meta { display: flex; flex-direction: column; gap: 10px; }
.bvq-meta-row { display: flex; align-items: center; justify-content: space-between; }
.bvq-meta-label { font-size: 13px; color: #64748B; }
.bvq-meta-value { font-size: 13px; font-weight: 600; color: #0F172A; font-variant-numeric: tabular-nums; }
.bvq-actions { display: flex; gap: 10px; margin-top: 22px; }
.bvq-btn {
  flex: 1; padding: 10px 16px; border-radius: 9px;
  font-size: 13.5px; font-weight: 500; font-family: inherit; cursor: pointer;
  border: 0.5px solid transparent; transition: background .12s, border-color .12s;
}
.bvq-btn-ghost   { background: #fff; border-color: #E2E8F0; color: #475569; }
.bvq-btn-ghost:hover { background: #F8FAFC; border-color: #CBD5E1; }
.bvq-btn-primary { background: #0D9488; color: #fff; }
.bvq-btn-primary:hover { background: #0F766E; }
.bvq-btn-danger  { background: #C0362C; color: #fff; }
.bvq-btn-danger:hover { background: #A32D2D; }
/* Quiet "give up" option — red text on white (distinct from neutral ghost, lighter than filled danger) */
.bvq-btn-danger-ghost { background: #fff; border-color: #F0C8C2; color: #C0362C; }
.bvq-btn-danger-ghost:hover { background: #FBF1EF; border-color: #E0A89F; }
.bvq-btn:disabled { opacity: .6; cursor: default; }
/* Step 2 — success */
.bvq-success { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 8px 0 4px; }
.bvq-check {
  width: 52px; height: 52px; border-radius: 50%;
  background: #0D9488; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; box-shadow: 0 4px 16px rgba(13,148,136,.35); margin-bottom: 4px;
}
.bvq-success-title { font-size: 18px; font-weight: 500; color: #0F172A; letter-spacing: -0.01em; }

/* ── Shared cell helpers ──────────────────────────────────── */
.bv-muted        { color: var(--text-muted); }
.bv-td-num       { text-align: right; color: var(--text-muted); width: 70px; }
.bv-td-attempts  { width: 80px; vertical-align: middle; }
.bv-att-count    { font-size: 13px; font-weight: 500; color: var(--text); line-height: 1.3; }
.bv-att-zero     { font-weight: 400; color: var(--text-muted); }
.bv-att-date     { font-size: 11px; margin-top: 2px; }
.bv-td-muted     { color: var(--text-muted); }
.bv-td-reason    { font-style: italic; color: var(--text-muted); max-width: 200px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Last contact colors ──────────────────────────────────── */
.bv-lc--green { color: #0F6E56; }
.bv-lc--amber { color: #BA7517; }

/* ── State / Time cell ────────────────────────────────────── */
.bv-state-time { display: flex; flex-direction: column; gap: 1px; }
.bv-state-abbr { font-size: 12px; color: var(--text-muted); }
.bv-local-time { font-size: 12px; font-weight: 500; }
.bv-time--green { color: #0F6E56; }
.bv-time--amber { color: #BA7517; }
.bv-time--muted { color: var(--text-muted); }

/* ── Scheduled time cell ──────────────────────────────────── */
.bv-sched-cell  { display: flex; flex-direction: column; gap: 1px; min-width: 160px; }
.bv-sched-time  { font-size: 13px; font-weight: 500; color: #3C3489; }
.bv-sched-cd    { font-size: 11px; }
.bv-sched-overdue { color: var(--danger); }

/* ── AP written ───────────────────────────────────────────── */
.bv-ap-val { color: #0F6E56; font-weight: 500; }

/* ── Action buttons ───────────────────────────────────────── */
.bv-call-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px;
  border: 0.5px solid #0D9488; border-radius: 8px;
  background: transparent; color: #0D9488;
  font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.bv-call-btn:hover { background: #0D9488; color: #fff; }
.bv-edit-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 12px;
  border: 0.5px solid #CBD5E1; border-radius: 8px;
  background: transparent; color: #64748B;
  font-size: 12px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: border-color .1s, color .1s;
  white-space: nowrap; margin-left: 4px;
}
.bv-edit-btn:hover { border-color: #94A3B8; color: #0F172A; }
.bv-sm-queue-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 26px; padding: 0 10px;
  border: 1px solid var(--accent); border-radius: 5px;
  background: transparent; color: var(--accent);
  font-size: 11px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: background .1s, color .1s;
  white-space: nowrap;
}
.bv-sm-queue-btn:hover { background: var(--accent); color: #fff; }

/* ── Empty state ──────────────────────────────────────────── */
.bv-empty {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 64px 24px; gap: 14px;
  text-align: center;
}
.bv-empty-icon-tile {
  width: 64px; height: 64px;
  border-radius: 14px;
  background: #F0FDFA;
  color: #0D9488;
  display: flex; align-items: center; justify-content: center;
}
.bv-empty-title {
  font-size: 17px;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.bv-empty-desc {
  font-size: 14px;
  color: #64748B;
  max-width: 420px;
  line-height: 1.5;
}
.bv-empty-actions { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
.bv-empty-action-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 0.5px solid #CBD5E1;
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #334155;
  cursor: pointer;
  font-family: inherit;
  transition: background .1s;
}
.bv-empty-action-pill:hover { background: #F8FAFC; }
.pill-count { font-size: 11px; color: #0D9488; }

/* ================================================================
   SECTION 4b — LEAD LIST VIEW PART 2 — TAB STYLES
   ================================================================ */

/* ── Table layout per tab ─────────────────────────────────── */
.bv-closed-table      { table-layout: fixed; width: 100%; }
.bv-appt-table        { table-layout: fixed; width: 100%; }
.bv-nurture-table     { table-layout: fixed; width: 100%; }
.bv-nq-table          { table-layout: fixed; width: 100%; }
.bv-suppressed-table  { table-layout: fixed; width: 100%; }
.bv-bad-number-table  { table-layout: fixed; width: 100%; }

.bv-closed-table      th:nth-child(1), .bv-closed-table      td:nth-child(1) { width: 30%; }
.bv-closed-table      th:nth-child(2), .bv-closed-table      td:nth-child(2) { width: 22%; }
.bv-closed-table      th:nth-child(3), .bv-closed-table      td:nth-child(3) { width: 30%; }
.bv-closed-table      th:nth-child(4), .bv-closed-table      td:nth-child(4) { width: 18%; }

.bv-appt-table        th:nth-child(1), .bv-appt-table        td:nth-child(1) { width: 25%; }
.bv-appt-table        th:nth-child(2), .bv-appt-table        td:nth-child(2) { width: 25%; }
.bv-appt-table        th:nth-child(3), .bv-appt-table        td:nth-child(3) { width: 25%; }
.bv-appt-table        th:nth-child(4), .bv-appt-table        td:nth-child(4) { width: 25%; }

.bv-nurture-table     th:nth-child(1), .bv-nurture-table     td:nth-child(1) { width: 18%; }
.bv-nurture-table     th:nth-child(2), .bv-nurture-table     td:nth-child(2) { width: 18%; }
.bv-nurture-table     th:nth-child(3), .bv-nurture-table     td:nth-child(3) { width: 14%; }
.bv-nurture-table     th:nth-child(4), .bv-nurture-table     td:nth-child(4) { width: 32%; }
.bv-nurture-table     th:nth-child(5), .bv-nurture-table     td:nth-child(5) { width: 18%; }

.bv-nq-table          th:nth-child(1), .bv-nq-table          td:nth-child(1) { width: 22%; }
.bv-nq-table          th:nth-child(2), .bv-nq-table          td:nth-child(2) { width: 36%; }
.bv-nq-table          th:nth-child(3), .bv-nq-table          td:nth-child(3) { width: 22%; }
.bv-nq-table          th:nth-child(4), .bv-nq-table          td:nth-child(4) { width: 20%; }

.bv-suppressed-table  th:nth-child(1), .bv-suppressed-table  td:nth-child(1) { width: 30%; }
.bv-suppressed-table  th:nth-child(2), .bv-suppressed-table  td:nth-child(2) { width: 30%; }
.bv-suppressed-table  th:nth-child(3), .bv-suppressed-table  td:nth-child(3) { width: 40%; }

.bv-bad-number-table  th:nth-child(1), .bv-bad-number-table  td:nth-child(1) { width: 30%; }
.bv-bad-number-table  th:nth-child(2), .bv-bad-number-table  td:nth-child(2) { width: 28%; }
.bv-bad-number-table  th:nth-child(3), .bv-bad-number-table  td:nth-child(3) { width: 22%; }
.bv-bad-number-table  th:nth-child(4), .bv-bad-number-table  td:nth-child(4) { width: 20%; }

/* ── Date cell ───────────────────────────────────────────── */
.bv-date-cell   { vertical-align: top; }
.bv-date-main   { font-size: 13px; font-weight: 500; color: #0F172A; margin-bottom: 3px; }
.bv-date-meta   { font-size: 11px; color: #94A3B8; font-variant-numeric: tabular-nums; }

/* ── Closed badge ────────────────────────────────────────── */
.bv-closed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #065F46;
  background: #D1FAE5;
  border: 0.5px solid #A7F3D0;
  border-radius: 10px;
  padding: 2px 10px;
}
.bv-closed-badge i { font-size: 12px; }

/* ── Appointments tab ────────────────────────────────────── */
.bv-appt-cell         { vertical-align: top; }
.bv-appt-missed-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #B91C1C;
  background: #FEF2F2;
  border: 0.5px solid #FECACA;
  border-radius: 4px;
  padding: 1px 6px;
  margin-bottom: 4px;
}
.bv-appt-missed-label i { font-size: 12px; }
.bv-appt-time-main    { font-size: 13px; font-weight: 500; color: #0F172A; margin-bottom: 3px; }
.bv-appt-countdown    { font-size: 11px; color: #64748B; }
.bv-row-missed        { background: #FEF7F7 !important; }
.bv-row-missed:hover  { background: #FEF2F2 !important; }

/* ── Reason cell (Nurture + NQ) ──────────────────────────── */
.bv-reason-cell       { vertical-align: top; }
.bv-reason-tag {
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  padding: 1px 7px;
  margin-bottom: 4px;
}
.bv-reason-tag-amber {
  color: #92400E;
  background: #FEF3C7;
  border: 0.5px solid #FDE68A;
}
.bv-reason-tag-purple {
  color: #5B21B6;
  background: #EDE9FE;
  border: 0.5px solid #DDD6FE;
}
.bv-reason-note {
  font-size: 12px;
  color: #475569;
  line-height: 1.4;
  max-width: 280px;
}

/* ── Suppressed reason cell ──────────────────────────────── */
.bv-suppressed-reason-cell  { vertical-align: top; }
.bv-suppressed-reason {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 6px;
  padding: 1px 7px;
  margin-bottom: 4px;
  color: #B91C1C;
  background: #FEF2F2;
  border: 0.5px solid #FECACA;
}
.bv-suppressed-reason.federal {
  color: #6B21A8;
  background: #F3E8FF;
  border: 0.5px solid #E9D5FF;
}
.bv-suppressed-reason-detail { font-size: 12px; color: #475569; margin-top: 4px; }

/* ── Bad number tab ──────────────────────────────────────── */
.bv-phone-with-warn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.bv-phone-with-warn i { color: #B45309; font-size: 14px; flex-shrink: 0; }
.bv-bad-action-td     { vertical-align: middle; }
.bv-fix-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  color: #0D9488;
  border: 0.5px solid rgba(13,148,136,0.3);
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .1s;
}
.bv-fix-action-btn:hover { background: #F0FDFA; }
.bv-fix-action-btn i     { font-size: 12px; }
.bv-fix-inline-input {
  border: 0.5px solid #0D9488;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  font-family: inherit;
  width: 130px;
  box-shadow: 0 0 0 2px rgba(13,148,136,0.12);
  outline: none;
}
.bv-fix-inline-save {
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  margin-right: 6px;
}
.bv-fix-inline-cancel {
  font-size: 11px;
  color: #64748B;
  cursor: pointer;
}
.bv-fix-inline-cancel:hover { color: #0F172A; }

/* ── Referrals: chronological capture events ─────────────── */
/* Single header row */
.bv-ref-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 11px 24px;
  background: #FAFBFC;
  border-bottom: 0.5px solid #E2E8F0;
  font-size: 11px;
  font-weight: 500;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Sections container */
.bv-ref-sections { padding-bottom: 32px; }
/* Individual section */
.bv-ref-section {
  display: grid;
  grid-template-columns: 1fr 4fr;
  gap: 16px;
  padding: 12px 24px 12px 20px;
  border-bottom: 0.5px solid #E2E8F0;
  align-items: start;
}
.bv-ref-section-last { border-bottom: none; }
/* Left column */
.bv-ref-left {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 2px 12px;
  align-items: center;
}
/* Chain stack */
.bv-ref-chain-stack { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; grid-column: 1 / -1; }
.bv-ref-chain-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #94A3B8;
  font-weight: 400;
  cursor: pointer;
  padding: 1px 0;
}
.bv-ref-chain-item i { color: #CBD5E1; font-size: 11px; width: 12px; text-align: center; }
.bv-ref-chain-item-name { font-weight: 500; }
.bv-ref-chain-item:hover .bv-ref-chain-item-name { color: #0D9488; }
/* Main referrer row */
/* .bv-ref-main-row removed — button/name are now direct grid children of .bv-ref-left */
/* Branch toggle button */
.bv-ref-branch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #F0FDFA;
  border: 0.5px solid rgba(13,148,136,0.25);
  color: #0F766E;
  cursor: pointer;
  font-size: 11px;
  flex-shrink: 0;
  transition: background .1s, border-color .1s, color .1s;
}
.bv-ref-branch-btn:hover:not([disabled]):not(.is-empty) { background: #E6FFFA; }
.bv-ref-branch-btn.is-open {
  background: #134E4A;
  border-color: #134E4A;
  color: white;
}
.bv-ref-branch-btn.is-empty {
  background: #F1F5F9;
  border-color: #CBD5E1;
  color: #64748B;
  cursor: default;
}
/* Referrer name */
.bv-ref-referrer-name {
  font-size: 11px;
  font-weight: 500;
  color: #0F172A;
  cursor: pointer;
  transition: color .1s;
  grid-column: 2;
  align-self: center;
}
.bv-ref-referrer-name:hover { color: #0D9488; }
/* Count + when */
.bv-ref-count-meta { font-size: 12px; color: #64748B; grid-column: 2; }
.bv-ref-count-meta strong { font-size: 12px; font-weight: 500; color: #0F172A; }
.bv-ref-more-tag { font-size: 12px; color: #94A3B8; font-weight: 400; margin-left: 4px; }
.bv-ref-when { font-size: 11px; color: #94A3B8; font-variant-numeric: tabular-nums; grid-column: 2; }
/* Right column — referral rows */
.bv-ref-rows-col { display: flex; flex-direction: column; }
.bv-ref-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 0.5px solid #F1F5F9;
  font-size: 13px;
  align-items: center;
  cursor: pointer;
  border-radius: 0;
  transition: background .1s;
}
.bv-ref-row-first { padding-top: 4px; }
.bv-ref-row-last  { border-bottom: none; padding-bottom: 4px; }
.bv-ref-row:hover {
  background: #FAFBFC;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
  border-radius: 6px;
}
.bv-ref-row-name  { font-weight: 500; color: #0F172A; }
.bv-ref-row-phone { color: #64748B; font-size: 12px; font-variant-numeric: tabular-nums; }
.bv-ref-row-rel   { color: #64748B; font-size: 12px; }
.bv-ref-row-plain-status { font-size: 11px; color: #94A3B8; }
/* Status pills (kept from old design) */
.bv-ref-status-pill {
  display: inline-flex;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.bv-ref-status-active  { background: #F0FDFA; color: #0F766E; border: 0.5px solid rgba(13,148,136,0.2); }
.bv-ref-status-nurture { background: #FEF3C7; color: #92400E; border: 0.5px solid #FDE68A; }
.bv-ref-status-appt    { background: #EDE9FE; color: #5B21B6; border: 0.5px solid #DDD6FE; }
.bv-ref-status-closed  { background: #D1FAE5; color: #065F46; border: 0.5px solid #A7F3D0; }

/* ================================================================
   SECTION 5 — DISPOSITION COLOR MAP  (shared across views)
   ================================================================ */

.disp-no-answer, .disp-voicemail, .disp-not-interested,
.disp-not-qualified, .disp-suppressed
  { color: var(--color-text-secondary, var(--text-muted)); }
.disp-never
  { color: var(--color-text-secondary, var(--text-muted)); font-style: italic; }
.disp-hang-up-opener              { color: #BA7517; }
.disp-hang-up-pitch, .disp-no-show, .disp-wrong-number { color: #A32D2D; }
.disp-hang-up-close               { color: #185FA5; }
.disp-callback-set, .disp-callback-no-answer           { color: #3C3489; }
.disp-appointment-set             { color: #26215C; }
.disp-nurture                     { color: #72243E; }
.disp-sold                        { color: #0F6E56; }

/* ── Sort indicators ──────────────────────────────────────── */
.bv-th-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.bv-th-sortable:hover { color: #0F172A; }
.bv-th-sorted, .sort-active { color: #0F172A !important; }
.bv-th-num { text-align: right; }

/* ── Sold tab — special accent ──────────────────────────── */
.bv-tab[data-bv-tab="sold"].active {
  color: #0F6E56;
  border-bottom-color: #27500A;
}
.bv-tab[data-bv-tab="sold"].active .bv-tab-count {
  background: #EAF3DE;
  border-color: #C0DD97;
  color: #27500A;
}

/* ── Sold row left border ────────────────────────────────── */
.bv-sold-row { border-left: 3px solid var(--accent); }
.bv-table tbody .bv-sold-row td:first-child { padding-left: 9px !important; }

/* ── Sold scoreboard ─────────────────────────────────────── */
.bv-sold-scoreboard {
  display: flex;
  align-items: center;
  background: #EAF3DE;
  border-bottom: 0.5px solid #C0DD97;
  padding: 12px 20px;
}
.bv-score-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.bv-score-divider {
  width: 1px;
  height: 32px;
  background: #C0DD97;
  margin: 0 20px;
  flex-shrink: 0;
}
.bv-score-val {
  font-size: 20px;
  font-weight: 500;
  color: #27500A;
  line-height: 1;
}
.bv-score-lbl {
  font-size: 10px;
  color: #3B6D11;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.bv-score-roi { color: var(--accent); }

/* ── All Leads Global view ───────────────────────────────── */
.alg-search-wrap {
  position: relative;
  padding: 10px 24px 6px;   /* 24px side gutters, matching the batch view */
}
.alg-search-input {
  width: 100%;
  height: 42px;
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.alg-search-input:focus {
  border-color: #0D9488;
  box-shadow: 0 0 0 2px rgba(13,148,136,.15);
}
.alg-search-input::placeholder { color: var(--text-muted); }

/* Pre-search empty state */
.alg-pre-search {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px;
  gap: 14px;
}
.alg-pre-icon-tile {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: #F0FDFA;
  color: #0D9488;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-bottom: 2px;
}
.alg-pre-icon-tile i { font-size: 28px; }
.alg-pre-title {
  font-size: 17px;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.alg-pre-desc {
  font-size: 14px;
  color: #64748B;
  max-width: 380px;
  line-height: 1.5;
}

/* No-results state */
.alg-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 20px;
  gap: 8px;
  font-size: 14px;
  color: #64748B;
}
.alg-no-results i { font-size: 20px; color: #94A3B8; }

/* Results wrapper + count — 24px side gutters matching the batch view */
.alg-results-wrap { padding: 6px 24px 0; }
.alg-results-count {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  padding: 10px 16px 8px;   /* 16px aligns the count with the table's cell text */
}

/* Search results reuse the batch .bv-table look; headers aren't sortable here */
.alg-table thead th { cursor: default; }

/* ── Search input + per-page selector ────────────────────── */
.bv-search-inp {
  width: 200px;
  height: 34px;
  padding: 0 10px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r, 6px);
  background: var(--card-bg);
  color: var(--text);
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s, box-shadow .12s;
}
.bv-search-inp:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(13,148,136,.12);
}
.bv-search-inp::placeholder { color: var(--text-muted); }
.bv-page-size-sel {
  height: 34px;
  padding: 0 8px;
  font-size: 13px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r, 6px);
  background: var(--card-bg);
  color: var(--text);
  outline: none;
  cursor: pointer;
}

/* ── Batch view pagination ───────────────────────────────── */
.bv-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 4px;
  gap: 10px;
  flex-wrap: wrap;
}
.bv-pg-info {
  font-size: 12px;
  color: var(--text-muted);
}
.bv-pg-controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bv-pg-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--card-bg);
  color: var(--text);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .1s, background .1s, color .1s;
  white-space: nowrap;
}
.bv-pg-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}
.bv-pg-btn.active {
  background: #E1F5EE;
  border-color: #0d9488;
  color: #0d9488;
  font-weight: 600;
}
.bv-pg-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.bv-pg-prev, .bv-pg-next { padding: 0 10px; }
.bv-pg-ellipsis {
  padding: 0 4px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 30px;
}

/* ── Controls bar suppress button (bad number tab) ──────── */
.bv-cbar-suppress-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 400;
  border-radius: var(--r, 6px);
  border: 0.5px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  opacity: 1;
  cursor: not-allowed;
  pointer-events: none;
  transition: background .12s, color .12s, border-color .12s;
}
.bv-cbar-suppress-btn.bv-cbar-suppress-btn--active {
  border: 0.5px solid #A32D2D;
  background: #A32D2D;
  color: #ffffff;
  cursor: pointer;
  font-weight: 500;
  pointer-events: auto;
}
.bv-cbar-suppress-btn.bv-cbar-suppress-btn--active:hover { background: #872323; }

/* ── Bad Number tab ───────────────────────────────────────── */
.bv-bn-phone        { font-size: 11px; color: #A32D2D; margin-top: 2px; }
.bv-bn-phone-warn   { margin-right: 2px; }
.bv-bn-actions      { white-space: nowrap; }
.bv-fix-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r, 6px);
  background: var(--card-bg);
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color .1s, color .1s;
}
.bv-fix-btn:hover { border-color: var(--accent); color: var(--accent); }
.bv-release-row-btn {
  height: 26px;
  padding: 0 10px;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid #0d9488;
  border-radius: var(--r, 6px);
  background: transparent;
  color: #0d9488;
  cursor: pointer;
  transition: background .1s;
}
.bv-release-row-btn:hover { background: #E1F5EE; }
.bv-bn-edit-wrap    { display: flex; align-items: center; gap: 6px; }
.bv-bn-phone-input {
  height: 28px;
  padding: 0 8px;
  font-size: 12px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r, 6px);
  background: var(--card-bg);
  color: var(--text);
  width: 140px;
  outline: none;
  box-sizing: border-box;
  transition: border-color .12s;
}
.bv-bn-phone-input:focus { border-color: var(--accent); }
.bv-btn-confirm-fix {
  height: 28px;
  padding: 0 10px;
  font-size: 11px;
  font-family: inherit;
  border: none;
  border-radius: var(--r, 6px);
  background: #0d9488;
  color: #fff;
  cursor: pointer;
}
.bv-btn-confirm-fix:disabled { opacity: 0.6; cursor: default; }
.bv-btn-cancel-fix {
  height: 28px;
  padding: 0 8px;
  font-size: 11px;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: var(--r, 6px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

/* ── Referrals tab ────────────────────────────────────────── */
.bv-ref-by  { font-size: 13px; color: var(--text-muted); max-width: 140px; }
.bv-ref-rel { font-size: 12px; color: var(--text-muted); font-style: italic; }

/* ============================================================
   NEW SIDEBAR (Brief 8) — ck- prefix to avoid conflicts
   ============================================================ */

/* Override sidebar width */
:root {
  --ck-sidebar-w: 220px;
  --ck-sidebar-collapsed-w: 60px;
}

/* Collapsed state — width + main margin use body class (can't target parent from child) */
body.ck-collapsed #sidebar { width: var(--ck-sidebar-collapsed-w); }
body.ck-collapsed #app-main { margin-left: var(--ck-sidebar-collapsed-w); }

/* Collapsed state — sidebar-internal styles use #sidebar.collapsed */
#sidebar.collapsed .ck-brand { display: none !important; }
#sidebar.collapsed .ck-brand-row {
  justify-content: center;
  padding: 4px 0 16px;
}
#sidebar.collapsed .ck-collapse-btn {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
#sidebar.collapsed .ck-collapse-btn i { font-size: 16px; }
#sidebar.collapsed .ck-collapse-icon-collapse { display: none !important; }
#sidebar.collapsed .ck-collapse-icon-expand  { display: inline !important; }
#sidebar.collapsed .ck-context-block         { display: none !important; }
#sidebar.collapsed .ck-nav-group-label,
#sidebar.collapsed .ck-nav-item-label,
#sidebar.collapsed .ck-standalone-label,
#sidebar.collapsed .ck-account-info,
#sidebar.collapsed .ck-account-chevron       { display: none !important; }
#sidebar.collapsed .ck-nav-item {
  justify-content: center;
  padding: 0;
  width: 36px;
  height: 36px;
  margin: 0 auto;
}
#sidebar.collapsed .ck-nav-item::before { display: none; }
#sidebar.collapsed .ck-nav-item i { font-size: 16px; }
#sidebar.collapsed .ck-account-row { justify-content: center; padding: 8px 0; }
/* Collapsed popover — icons only */
#sidebar.collapsed .ck-account-popover { width: 48px; padding: 4px; }
#sidebar.collapsed .ck-popover-label   { display: none; }
#sidebar.collapsed .ck-popover-item    { justify-content: center; padding: 8px; }

/* Sidebar transitions */
#sidebar { transition: width 200ms ease-out; }
#app-main { transition: margin-left 200ms ease-out; }

/* Override sidebar to new design */
#sidebar {
  width: var(--ck-sidebar-w);
  background: #0F172A;
  padding: 14px 10px 12px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* Brand row */
.ck-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 14px;
  flex-shrink: 0;
}
.ck-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Teal tile housing the R5d mark in the sidebar */
.ck-brand-mark {
  width: 22px;
  height: 22px;
  background: #0D9488;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  flex-shrink: 0;
}
.ck-brand-mark svg {
  width: 14px;
  height: 14px;
  display: block;
}
.ck-wordmark {
  font-size: 14px;
  font-weight: 500;
  color: #F1F5F9;
  white-space: nowrap;
}
.ck-collapse-btn {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 0.5px solid #1E293B;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  font-size: 14px;
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.ck-collapse-btn:hover {
  background: #1E293B;
  color: #CBD5E1;
  border-color: #334155;
}
.ck-collapse-icon-expand { display: none; }

/* Context block */
.ck-context-block {
  background: #060B17;
  border: 0.5px solid #1E293B;
  border-radius: 8px;
  margin: 0 4px 16px;
  padding: 10px 12px;
  flex-shrink: 0;
}
.ck-time-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-bottom: 9px;
  border-bottom: 0.5px solid #1E293B;
  margin-bottom: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.ck-time-day {
  font-size: 12px;
  font-weight: 500;
  color: #E2E8F0;
}
.ck-time-dot {
  color: #475569;
  font-size: 11px;
}
.ck-time-rest {
  font-size: 11px;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.ck-today-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #475569;
  font-weight: 500;
  padding: 0 2px 6px;
}
.ck-score-h {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 0;
}
.ck-score-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 2px;
  padding: 4px 2px;
  border-right: 0.5px solid #1E293B;
}
.ck-score-cell:last-child {
  border-right: none;
}
.ck-score-cell-val {
  display: block;
  font-size: 16px;
  font-weight: 500;
  color: #F1F5F9;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ck-score-cell-val.ck-zero {
  color: #475569;
}
.ck-score-cell-lbl {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748B;
  font-weight: 500;
}
.ck-ap-row {
  margin-top: 6px;
  padding: 6px 8px 6px 11px;
  background: #0F172A;
  border-radius: 0 4px 4px 0;
  position: relative;
}
.ck-ap-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 3px;
  background: #0D9488;
  border-radius: 0 2px 2px 0;
}
.ck-ap-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748B;
  font-weight: 500;
}
.ck-ap-val {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #10B981;
  margin-top: 1px;
  line-height: 1;
}
.ck-ap-val.ck-zero {
  color: #1D6B58;
}

/* Nav groups */
.ck-nav {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: none;
}
.ck-nav::-webkit-scrollbar { display: none; }
.ck-nav-group {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 16px;
}
.ck-nav-group-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  padding: 6px 12px;
  font-weight: 500;
}
.ck-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: #94A3B8;
  cursor: pointer;
  position: relative;
  transition: background 0.12s, color 0.12s;
  text-decoration: none;
  overflow: hidden;
}
.ck-nav-item:hover {
  background: #1E293B;
  color: #E2E8F0;
}
.ck-nav-item.active {
  background: #1E293B;
  color: #F1F5F9;
  font-weight: 500;
}
.ck-nav-item.active::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: #0D9488;
  border-radius: 0 2px 2px 0;
}
.ck-nav-item i {
  font-size: 16px;
  flex-shrink: 0;
}
.ck-nav-item-label {
  white-space: nowrap;
}

/* Tooltip in collapsed state */
body.ck-collapsed .ck-nav-item {
  overflow: visible;
}
body.ck-collapsed .ck-nav-item:hover .ck-nav-tooltip {
  display: block;
}
.ck-nav-tooltip {
  display: none;
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  background: #1E293B;
  color: #E2E8F0;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
  border: 0.5px solid #334155;
}

/* Standalone section */
.ck-standalone {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 0.5px solid #1E293B;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* Account section */
.ck-account {
  margin-top: auto;
  padding-top: 14px;
  border-top: 0.5px solid #1E293B;
  position: relative;
  flex-shrink: 0;
}
.ck-account-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.ck-account-row:hover { background: #1E293B; }
.ck-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #334155;
  color: #F1F5F9;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ck-account-info {
  flex: 1;
  min-width: 0;
}
.ck-account-name {
  font-size: 13px;
  font-weight: 500;
  color: #F1F5F9;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-account-email {
  font-size: 11px;
  color: #64748B;
  line-height: 1.3;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-account-chevron {
  font-size: 14px;
  color: #64748B;
  flex-shrink: 0;
}
.ck-account-popover {
  position: absolute;
  bottom: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #1E293B;
  border: 0.5px solid #334155;
  border-radius: 8px;
  padding: 6px;
  z-index: 50;
}
.ck-popover-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 13px;
  color: #CBD5E1;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.1s;
}
.ck-popover-item:hover { background: #0F172A; }
.ck-popover-item i { font-size: 15px; }

/* ============================================================
   DASHBOARD PAGE (Brief 8)
   ============================================================ */
#view-dashboard {
  background: #F8FAFC;
  padding: 32px 36px;
  min-height: 100vh;
}
#view-dashboard.active {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ck-dash-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.ck-dash-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748B;
  font-weight: 500;
  margin-bottom: 10px;
}
.ck-dash-section-label.muted { color: #CBD5E1; }
.ck-placeholder-card {
  background: white;
  border-radius: 12px;
  padding: 32px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  min-height: 240px;
  justify-content: center;
}
.ck-placeholder-card {
  border: 0.5px dashed #CBD5E1;
  gap: 6px;
}
.ck-placeholder-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  font-weight: 500;
}
.ck-placeholder-hint {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.5;
  max-width: 220px;
}

/* ============================================================
   COMING SOON PAGE (Brief 8)
   ============================================================ */
#view-coming-soon {
  background: #F8FAFC;
  padding: 60px 36px;
  min-height: 70vh;
}
#view-coming-soon.active {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
/* Auto Dialer view */
#view-auto-dialer {
  background: #F8FAFC;
  padding: 60px 36px;
  /* Full-height white surface — same fix as #view-leads: fill the content box
     (viewport − topbar) and mirror #page-content's 24px top padding with a
     −24px margin-bottom so the surface reaches the bottom with no dead scroll. */
  min-height: calc(100vh - var(--topbar-h));
  margin-bottom: -24px;
}
#view-auto-dialer.active { display: flex; flex-direction: column; }
/* Empty state — centered, fills the view */
#ad-empty {
  /* Fill the content area (viewport minus topbar and #page-content's 24px padding)
     and center the icon/text/button on screen — like the Leads empty state. */
  min-height: calc(100vh - var(--topbar-h) - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
#ad-empty .ck-soon-icon-wrap { color: var(--accent); }   /* native teal icon */
#ad-empty .primary {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Same size as the Leads empty-state Import Batch button (.bp-fte-import-btn). */
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
}
/* Populated state — queues list, top-aligned */
#ad-content { display: none; }
#view-auto-dialer.ad-has-queues { padding: 24px 36px; }
#view-auto-dialer.ad-has-queues #ad-empty   { display: none; }
#view-auto-dialer.ad-has-queues #ad-content { display: block; }

/* ── Auto Dialer — chrome (build button + dashboard) ──────────── */
/* Full width with the same gutters as the Batches list (page-content 24px +
   the populated view's 24px), not a centered column. */
.ad-wrap { width: 100%; }
.ad-topbar { margin-bottom: 14px; }
.ad-build-btn { display: inline-flex; align-items: center; gap: 6px; }
/* Drop .bp-strip's side margin so the dashboard's outer edges line up exactly
   with the full-width session list below it. Scoped to .ad-wrap so it beats
   .bp-strip's later margin: 0 24px regardless of source order. */
.ad-wrap .ad-dash { margin: 0 0 14px; }
.ad-tile-note { font-size: 12px; font-weight: 400; color: #94A3B8; }
.ad-month-empty { text-align: center; color: #64748B; font-size: 13px; padding: 32px 0; }

/* ── Auto Dialer — batch sessions ─────────────────────────────── */
.ad-sessions { display: flex; flex-direction: column; gap: 12px; }
.ad-session  {
  background: #fff; border: 0.5px solid #E2E8F0; border-radius: 12px; overflow: hidden;
  transition: border-color 0.15s ease, background 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease;
}
/* Whole-card hover — reuses the Batches .bp-card:hover shadow verbatim. */
.ad-session:hover {
  border-color: #94A3B8;
  background: #FAFBFC;
  box-shadow:
    -8px 0 24px -4px rgba(13, 148, 136, 0.35),
    0 4px 12px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.ad-session-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; cursor: pointer;
}
.ad-session-id { flex: 0 1 38%; min-width: 0; }   /* name block ~38%, leaves the rest for the stats spread */
.ad-session-kicker { font-size: 11px; color: #94A3B8; }
.ad-session-namebox {
  display: inline-block; max-width: 100%;
  margin: 3px 0;
  padding: 3px 10px;
  background: #E1F5EE; color: #2d3748;  /* slate batch-name text on the light-teal pill (intentional dark accent) */
  border-radius: 8px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom;
}
.ad-session-when { font-size: 12px; color: #64748B; }
/* Fill the space right of the name block and spread the four stats evenly across
   it (space-between), with a generous minimum gap so they never bunch. */
.ad-session-stats { display: flex; flex: 1; justify-content: space-between; gap: 40px; }
.ad-stat { text-align: right; }
.ad-stat-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #94A3B8; font-weight: 500; }
.ad-stat-val { font-size: 16px; font-weight: 500; color: #0F172A; font-variant-numeric: tabular-nums; }
.ad-stat-val--muted { color: #94A3B8; }
.ad-session-body {
  display: none; border-top: 0.5px solid #E2E8F0; padding: 4px 10px 8px;
  /* Cap at ~3 sub-Q rows (62px each + 4/8px padding); any more scroll inside the
     card so it stops growing and doesn't push the session cards below it down. */
  max-height: 199px; overflow-y: auto; scrollbar-width: thin;
}
.ad-session.is-open .ad-session-body { display: block; }

/* The execute-mode colour experiment (slate / teal-blue landing identity) was
   reverted — the Queue Dialer landing inherits the app's normal green/teal theme
   again (no .ad-execute wrapper / scoped tokens). The ONE intentional dark accent
   that remains is the slate batch-name text (.ad-session-namebox, above). */

/* ── Auto Dialer — View-2 Qx rows as cards (two-row layout, green/teal theme) ──
   White card surface with the normal card border + hover lift. Two stacked rows:
   header (badge + count + pill + action) and a progress+metrics line. */
.ad-queue {
  display: flex; flex-direction: row; align-items: stretch; gap: 24px;
  padding: 14px 16px; border-radius: 12px;
  /* White card with a stronger 1px slate hairline so stacked cards' edges read clearly
     against the white View-2 page (the separator is the border, no fill needed). */
  background: #fff; border: 1px solid #CBD5E1;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
/* Hover = the batch / Q-session card teal-shadow lift, matched verbatim
   (.bp-card:hover / .ad-session:hover). */
.ad-queue:hover {
  border-color: #94A3B8;
  background: #FAFBFC;
  box-shadow:
    -8px 0 24px -4px rgba(13, 148, 136, 0.35),
    0 4px 12px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
/* ── Two columns. LEFT = fixed width (badge/lead-line row above the action+pill row);
   RIGHT = flex:1 (metrics-grid row above the worked row). The right column's two rows are
   BOTH width:100% of the SAME column, so the worked bar spans exactly the metrics grid's
   zone — left edge under "Dials", right edge under "Closes". The .ad-queue inter-column gap
   is the visible space between the status pill and where the worked bar starts. Both columns
   use space-between so the top rows align (badge↔metrics) and the bottom rows align
   (button/pill↔worked) regardless of differing intrinsic row heights. */
.ad-q-left  { width: 232px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.ad-q-left-top { display: flex; align-items: center; gap: 8px; }   /* badge + "{total} leads · {day}" inline on one row */
.ad-q-left-bot { display: flex; align-items: center; gap: 12px; }
.ad-q-right { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.ad-q-leadline { font-size: 12px; color: #64748B; }
.ad-q-day { color: #94A3B8; }
.ad-q-day--now { color: var(--accent); font-weight: 500; }   /* teal "just now" — fresh queue */

.ad-q-action { width: 120px; flex-shrink: 0; }
.ad-q-action > button { width: 100%; justify-content: center; }
.ad-start-btn { display: inline-flex; align-items: center; }
.ad-queue-done-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 12px; border-radius: 6px;
  background: transparent; border: 1px solid var(--border);
  color: #64748B; font-size: 13px; font-weight: 500; cursor: default;
}
.ad-queue-done-btn i { font-size: 14px; }
.ad-q-worked { width: 100%; }
.ad-q-worked-lbl { display: flex; justify-content: space-between; font-size: 11px; color: #94A3B8; margin-bottom: 4px; }

/* ── Auto Dialer — View-1 card drill-in affordances ───────────── */
.ad-session-ico { font-size: 13px; margin-right: 6px; vertical-align: -1px; color: var(--accent, #0d9488); }

/* ── Auto Dialer — View 2 (inside a session) ──────────────────── */
/* Back-to-sessions header: "← Sessions  ›  <batch name>" */
/* View-2 header mirrors the Leads list top-bar (.bv-topbar/.bv-back/.bv-sep/.bv-title)
   exactly. Values are duplicated here under .ad-sv-* (rather than reusing the bv- classes)
   so the .ad-sv-back JS handler hook + class specificity stay intact and the leads view is
   left untouched. */
.ad-sv-head {
  display: flex; align-items: center; gap: 8px;
  /* Full-bleed the divider: bleed out by the page's 36px horizontal padding
     (#view-auto-dialer.ad-has-queues) so the bottom border reaches both edges,
     then restore 36px inner padding so the content stays aligned with the cards. */
  margin: 0 -36px;
  padding: 14px 36px; border-bottom: 0.5px solid #E2E8F0; font-size: 13px;
}
.ad-sv-back {
  display: inline-flex; align-items: center; gap: 6px;
  color: #0D9488; font-weight: 500; text-decoration: none; white-space: nowrap;
  padding: 4px 6px; border-radius: 6px;
  background: none; border: 0; cursor: pointer; font-family: inherit; font-size: 13px;
  transition: color .15s, background .15s;
}
.ad-sv-back:hover { color: #0F766E; background: var(--accent-lt); }
.ad-sv-back i { font-size: 14px; }
.ad-sv-sep  { color: #94A3B8; display: inline-flex; align-items: center; }
.ad-sv-name {
  display: inline-block;
  background: #E1F5EE; color: var(--color-text-primary, #0F172A);
  padding: 3px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-sv-queues  { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }

/* Status pill — FIXED WIDTH so it never shifts between states.
   Neutral grey (Not started), blue info (In progress), green (Complete). */
.ad-pill {
  display: inline-block; width: 96px; box-sizing: border-box; flex-shrink: 0;
  padding: 2px 8px; text-align: center;
  border-radius: 999px; font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-pill--new  { background: #F1F5F9; color: #64748B; }
.ad-pill--prog { background: #E0F2FE; color: #0369A1; }
.ad-pill--done { background: #DCFCE7; color: #15803D; }
.ad-pill--placeholder { background: #F1F5F9; }   /* holds the pill footprint while stats load */

/* Per-queue metrics — mirror the session card's distribution recipe (.ad-session-stats):
   flex + space-between with content-sized items, so the four spread evenly across the
   right column — first (Dials) flush-left, last (Closes) flush-right — with no
   center-clustering or overflow, and no per-column flush hacks. (QX keeps its OWN
   value-over-label order + fonts; only the layout logic is copied.) Each .ad-qm
   left-aligns its stack so every value sits directly above its label. */
.ad-queue-metrics { width: 100%; display: flex; justify-content: space-between; gap: 20px; }
.ad-qm   { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ad-qm-v { font-size: 16px; font-weight: 500; color: #0F172A; font-variant-numeric: tabular-nums; line-height: 1; }
.ad-qm-l { font-size: 10px; color: #94A3B8; }

/* ============================================================
   DIAL SCREEN — foundation behind a queue's "Start dialing"
   (UI + state only; no live dialing). On this page the sidebar is
   fully hidden (ck-dial-active) so the back arrow is the only exit
   and the panel sits flush at the viewport's left edge.
   ============================================================ */
/* Dialer page: hide the sidebar entirely and reclaim its left margin. Toggled by
   ck-dial-active (added in DialScreen.open(), removed in onDeactivate → all other
   pages keep the sidebar normal). */
body.ck-dial-active #sidebar  { display: none; }
body.ck-dial-active #app-main { margin-left: 0; }

.view-dial-full {
  margin: -24px;                                   /* cancel #page-content's 24px padding */
  height: 100vh;                                   /* full-bleed to the viewport bottom — #top-bar is display:none, so reserve nothing (no footer on this page) */
  overflow: hidden;
}
.dl-layout { display: flex; height: 100%; background: #F8FAFC; }

/* ============================================================
   QUEUE DIALER — left panel (rebuilt: dark-slate card).
   ============================================================ */
.dl-queue-col {
  width: 360px; flex-shrink: 0;
  background: #2d3748; padding: 18px 16px;          /* flush, square, full-height built-in panel (no margin/radius) */
  display: flex; flex-direction: column; overflow: hidden;
  color: #e2e8f0;
}
.dl-controls { display: flex; flex-direction: column; flex-shrink: 0; }
.dl-label {
  font-size: 11px; letter-spacing: 0.06em; color: #94a3b8; font-weight: 500; margin-bottom: 6px;
}

/* Header */
.dl-head { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
/* Back arrow — understated nav chrome, light icon on the slate panel, left of the headset. */
.dl-head-back {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; line-height: 0;
  color: #94a3b8; font-size: 18px; padding: 3px; margin-left: -3px; border-radius: 6px;
  transition: color .12s, background .12s;
}
.dl-head-back:hover { color: #e2e8f0; background: rgba(255,255,255,0.08); }
.dl-head-ico { color: #0d9488; font-size: 18px; }
.dl-head-title { color: #fff; font-size: 16px; font-weight: 500; }

/* Queue identity */
.dl-id { margin-bottom: 14px; }
.dl-id-line { color: #fff; font-size: 15px; font-weight: 500; line-height: 1.35; word-break: break-word; }

/* Round row + progress bar */
.dl-round { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.dl-round-n { color: #cbd5e1; font-size: 13px; }
.dl-round-total { color: #94a3b8; font-size: 13px; font-variant-numeric: tabular-nums; }
.dl-prog { height: 6px; background: #1a202c; border-radius: 99px; overflow: hidden; }
.dl-prog-fill { height: 100%; background: #0d9488; border-radius: 99px; transition: width .25s; }

/* Session-cumulative stats line */
.dl-sess { font-size: 11px; color: #94a3b8; margin: 10px 0 14px; font-variant-numeric: tabular-nums; }

/* Current-call card — FIXED HEIGHT across every state */
.dl-cc { background: #232c3d; border-radius: 10px; padding: 14px; margin-bottom: 16px; }
.dl-cc-row1 { display: flex; align-items: center; justify-content: space-between; height: 34px; }
.dl-cc-timer { font-size: 30px; font-weight: 500; color: #fff; font-variant-numeric: tabular-nums; line-height: 1; }
.dl-cc-status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #cbd5e1; min-height: 18px; }
.dl-cc-row2 { display: flex; align-items: center; gap: 10px; margin-top: 14px; }

/* Blinking status dot */
.dl-dot { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; animation: dl-blink 1.3s ease-in-out infinite; }
.dl-dot--dialing   { background: #f59e0b; }
.dl-dot--ringing   { background: #378ADD; }
.dl-dot--connected { background: #5dcaa5; }
@keyframes dl-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Row2 controls — two icon squares (Pause, Mute) + a trimmed primary. Fixed 40px height. */
.dl-pauseaf, .dl-mute, .dl-primary {
  min-width: 0; height: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border-radius: 9px; font-size: 13px; font-weight: 500; cursor: pointer;
  border: none; white-space: nowrap;
}
/* Icon-only square controls (Pause, Mute) — 40×40, never flex-stretch */
.dl-iconbtn { flex: 0 0 40px; width: 40px; padding: 0; }
.dl-iconbtn .ti { font-size: 18px; }
/* Primary — TRIMMED (not full-stretch) so the two icon squares sit to its left */
.dl-primary { flex: 0 0 168px; }

.dl-pauseaf { background: transparent; border: 1px solid #4a5568; color: #e2e8f0; }
.dl-pauseaf.is-armed { background: #0d9488; border-color: #0d9488; color: #fff; }   /* armed → filled teal */
.dl-pauseaf.is-dim   { opacity: 0.4; }                                              /* disabled/locked dim */
.dl-pauseaf:disabled, .dl-mute:disabled { cursor: default; }
.dl-mute { background: transparent; border: 1px solid #4a5568; color: #e2e8f0; }
.dl-mute.is-muted { background: #7f1d1d; border-color: #7f1d1d; color: #fff; }      /* muted → filled red */
.dl-mute.is-dim   { opacity: 0.4; }
.dl-iconbtn:not(.is-dim):not(.is-armed):not(.is-muted):hover { background: rgba(255,255,255,0.06); }
.dl-primary--go       { background: #0d9488; color: #fff; }
.dl-primary--go:hover { background: #0f766e; }
.dl-primary--end      { background: #dc2626; color: #fff; }
.dl-primary--cancel   { background: transparent; border: 1px solid #b85c52; color: #f0997b; }
.dl-primary:disabled  { opacity: 0.5; cursor: default; }
/* Loader spinner inside the Calling… (cancel) button */
.dl-loader { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(240,153,123,0.35); border-top-color: #f0997b; animation: dl-spin .7s linear infinite; }
@keyframes dl-spin { to { transform: rotate(360deg); } }

/* Attempt-mode segmented (1x/2x/3x) with a ✓ to confirm an increase */
.dl-mode { margin-bottom: 16px; }
.dl-seg { display: flex; gap: 4px; background: #1a202c; border-radius: 9px; padding: 4px; }
.dl-seg-pill {
  flex: 1; padding: 7px 0; border: none; cursor: pointer; border-radius: 6px;
  background: transparent; color: #cbd5e1; font-size: 13px; font-weight: 500;
  font-variant-numeric: tabular-nums; transition: background .12s, color .12s;
}
.dl-seg-pill.is-active  { background: #0d9488; color: #fff; }
.dl-seg-pill.is-pending { color: #5dcaa5; }
.dl-seg-ok {
  flex-shrink: 0; width: 30px; border: none; border-radius: 6px; cursor: pointer;
  background: #0d9488; color: #fff; display: inline-flex; align-items: center; justify-content: center;
}

/* Lead-queue label */
.dl-queue-lbl { margin-top: 2px; margin-bottom: 8px; }

/* The scrollable lead list */
.dl-seq { flex: 1; overflow-y: auto; margin: 0 -4px; padding: 0 4px; scrollbar-width: thin; }
.dl-row-empty { padding: 24px 8px; text-align: center; color: #94a3b8; font-size: 13px; }
.dl-row { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; }
.dl-row.is-active  { background: rgba(13,148,136,0.16); }
.dl-row.is-crossed { opacity: 0.6; }
.dl-row.is-crossed .dl-row-name { text-decoration: line-through; }
.dl-row-pos {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #3a4659; color: #cbd5e1;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.dl-row-main { flex: 1; min-width: 0; }
.dl-row-name { font-size: 14px; font-weight: 500; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-row-phone { font-size: 12px; color: #94a3b8; font-variant-numeric: tabular-nums; }
.dl-row-status, .dl-row-next, .dl-row-disp { flex-shrink: 0; font-size: 12px; font-weight: 500; }
.dl-row-status--live { display: inline-flex; align-items: center; gap: 6px; color: #5dcaa5; }
.dl-row-next { color: #5dcaa5; border: 1px solid #2f6f5e; border-radius: 6px; padding: 2px 8px; }

/* End-round footer */
.dl-foot { flex-shrink: 0; padding-top: 12px; }
.dl-endround {
  width: 100%; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: 1px solid #4a5568; color: #cbd5e1; border-radius: 9px;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.dl-endround:hover { background: rgba(255,255,255,0.04); }

/* CENTER — the embedded lead-detail page fills the whole area (no header strip). */
.dl-center { flex: 1; display: flex; flex-direction: column; min-width: 0; background: #F8FAFC; }

/* Stage = the center: the embedded lead-detail page (.dl-center-body) is the ONLY
   thing shown during countdown / in-call. A session-boundary panel (.dl-center-state)
   and the gate pop-up (.dl-gate) layer over it only when needed. */
.dl-center-stage { position: relative; flex: 1; min-height: 0; }
.dl-center-body {
  position: absolute; inset: 0;
  overflow-y: auto;                 /* the embedded lead-detail page scrolls */
  padding: 24px;
}
/* Session-boundary panel — round-end / fresh idle (no page on screen). Opaque. */
.dl-center-state {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: #F8FAFC;
}
/* The one allowed pop-up over the center — the disposition gate. The embedded page
   stays visible (and untouched) behind the translucent backdrop. */
.dl-gate {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: rgba(15, 23, 42, 0.18);
  backdrop-filter: blur(1px);
}
.dl-gate-card {
  background: #fff; border: 0.5px solid #E2E8F0; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.16);
  padding: 24px 26px; max-width: 92%;
}

.dl-center-idle { text-align: center; color: #94A3B8; }
.dl-center-idle i { font-size: 40px; display: block; margin-bottom: 12px; color: #CBD5E1; }
.dl-center-idle strong { color: #64748B; }
/* Secondary "View Lead Detail" action on the paused message. */
.dl-view-detail {
  margin-top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 8px; cursor: pointer;
  background: #fff; border: 0.5px solid #CBD5E1; color: #334155;
  font-size: 13px; font-weight: 500; transition: background .12s;
}
.dl-view-detail i { font-size: 16px; display: inline; margin: 0; color: inherit; }
.dl-view-detail:hover { background: #F1F5F9; }

/* Resume Call overlay — floats over the upcoming lead's detail (paused view). The
   bar is click-through; only the teal button captures clicks. Sits below the gate. */
.dl-resume-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; justify-content: center; padding: 18px;
  pointer-events: none;
  background: linear-gradient(to top, rgba(248,250,252,0.96) 35%, rgba(248,250,252,0));
}
.dl-resume-detail {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 30px; border: none; border-radius: 10px; cursor: pointer;
  background: #0d9488; color: #fff; font-size: 15px; font-weight: 600;
  box-shadow: 0 8px 22px rgba(13,148,136,0.34); transition: background .12s;
}
.dl-resume-detail:hover { background: #0F766E; }

.dl-current { text-align: center; }
.dl-current-kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #94A3B8; font-weight: 600; }
.dl-current-name { font-size: 32px; font-weight: 600; color: #0F172A; margin: 6px 0 4px; }
.dl-current-phone { font-size: 15px; color: #64748B; font-variant-numeric: tabular-nums; }
.dl-current-note { font-size: 12px; color: #94A3B8; margin-top: 16px; }

/* End Call / Continue Q confirm-modal message line. */
.dl-confirm-msg { font-size: 14px; color: #475569; line-height: 1.45; margin-bottom: 4px; }

/* ── Dial loop — control-zone buttons (round-end) ── */
.dl-nextround {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border: none; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 600; color: #fff; background: var(--accent);
  transition: background .12s;
}
.dl-nextround:hover { background: var(--accent-dk); }
.dl-release {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px; border-radius: 8px; cursor: pointer;
  font-size: 14px; font-weight: 500; background: #fff; border: 0.5px solid #CBD5E1; color: #475569;
}
.dl-release:hover { background: #F8FAFC; }

/* Start Q confirmation modal — "X leads ready to dial" line (reuses .bvq-* chrome). */
.dl-start-ready { font-size: 14px; color: #475569; font-weight: 500; margin-bottom: 4px; }

/* ── Center — disposition gate (six dispositions; Bad number is automatic) ── */
.dl-disp-group {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-top: 22px; width: 480px; max-width: 86vw;
}
.dl-disp {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 10px; cursor: pointer; text-align: left;
  background: #fff; border: 0.5px solid #E2E8F0;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.dl-disp:hover { box-shadow: 0 2px 10px rgba(15,23,42,.08); }
.dl-disp i { font-size: 18px; flex-shrink: 0; }
.dl-disp-lbl { font-size: 14px; font-weight: 600; color: #0F172A; flex: 1; }
.dl-disp-cat { font-size: 11px; color: #94A3B8; font-weight: 500; white-space: nowrap; }
.dl-disp--remove i     { color: #10B981; }
.dl-disp--remove:hover { border-color: #10B981; background: #F0FDF9; }
.dl-disp--eligible i     { color: #64748B; }
.dl-disp--eligible:hover { border-color: #94A3B8; background: #FAFBFC; }
.dl-disp--suppressed i     { color: #B9651B; }
.dl-disp--suppressed:hover { border-color: #E0A872; background: #FBF4EC; }

/* ── Center — round end ── */
.dl-roundend { text-align: center; }
.dl-re-badge {
  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent-lt); color: var(--accent);
}
.dl-re-badge i { font-size: 28px; }
.dl-re-title { font-size: 22px; font-weight: 600; color: #0F172A; }
.dl-re-sum { font-size: 14px; color: #64748B; margin-top: 4px; font-variant-numeric: tabular-nums; }
.dl-re-note { font-size: 13px; color: #94A3B8; margin-top: 14px; max-width: 380px; }

.ck-soon-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: white;
  border: 0.5px solid #E2E8F0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #94A3B8;
}
.ck-soon-title {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 500;
  color: #0F172A;
}
.ck-soon-msg {
  margin-top: 6px;
  font-size: 13px;
  color: #64748B;
}
.ck-soon-back {
  margin-top: 24px;
  font-size: 12px;
  color: #0D9488;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
}
.ck-soon-back:hover { text-decoration: underline; }

/* ============================================================
   PROFILE PAGE — tabbed settings (User Tools: Dialer mode)
   ============================================================ */
.pf-wrap { max-width: 640px; margin: 0 auto; padding: 8px 0; }

/* Tab bar */
.pf-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.pf-tab {
  background: none; border: none; cursor: pointer;
  padding: 10px 4px; margin-bottom: -1px;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.pf-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* Generic settings card + the Dialer-mode card */
.pf-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px;
}
.pf-card-title { font-size: 14px; font-weight: 600; color: var(--text); }
.pf-card-sub   { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

.dlmode-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dlmode-info { min-width: 0; }
.dlmode-toggle-group { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.dlmode-toggle-lbl { font-size: 13px; font-weight: 600; color: var(--text-muted); min-width: 28px; text-align: right; }

.dlmode-status { margin-top: 14px; font-size: 12px; color: var(--text-muted); }
.dlmode-status strong { color: var(--text); }

/* ── Live (danger) treatment ── */
.dlmode-card.is-live { border: 2px solid var(--danger); padding: 17px 19px; }   /* 2px border; pad −1 keeps height steady */
.dlmode-card.is-live .dlmode-toggle-lbl { color: var(--danger-dk); }
.dlmode-card.is-live .toggle-switch input:checked + .toggle-track { background: var(--danger); }   /* knob/track red, not teal */
.dlmode-status.is-live { color: var(--danger-dk); }
.dlmode-status.is-live strong { color: var(--danger-dk); }

/* Warning banner inside the live card */
.dlmode-warn {
  display: flex; align-items: center; gap: 8px;
  background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px;
  padding: 10px 12px; margin-bottom: 16px;
  color: var(--danger-dk); font-size: 12.5px; font-weight: 500;
}
.dlmode-warn i { font-size: 16px; flex-shrink: 0; }

/* ── Reset-all-data card (destructive testing tool) ── */
.pf-panel > .pf-card + .pf-card { margin-top: 16px; }
.pf-reset-card { border: 2px solid var(--danger); padding: 17px 19px; }   /* mirrors the live dialer card */
.pf-reset-btn {
  flex-shrink: 0; background: var(--danger); color: #fff; border: none;
  border-radius: 8px; padding: 9px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.pf-reset-btn:hover { background: var(--danger-dk); }
.pf-reset-btn:disabled { opacity: .6; cursor: default; }

/* ============================================================
   BATCHES PAGE — portfolio redesign (bp- prefix)
   ============================================================ */

/* ── Page background ───────────────────────────────────────── */
#view-leads {
  background: #F8FAFC;
  /* Fill #page-content's content box (viewport − topbar − its 24px top/bottom
     padding) so the surface always reaches the bottom with 0–1 cards, instead of
     cutting off after the last card. min-height (not height) keeps it scrollable
     when content overflows. The top gap is #page-content's 24px padding-top; mirror
     it with a 24px margin-bottom (the parent's padding-bottom gets clipped by the
     scroll container, so it doesn't render). The extra −24px in min-height leaves
     room for that gap so it shows without dead scroll. */
  min-height: calc(100vh - var(--topbar-h));
  margin-bottom: -24px;
}
#ll-table-wrap {
  padding: 0 0 32px;
}

/* ── Toolbar ───────────────────────────────────────────────── */
.bp-toolbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px 14px;
}
.bp-toolbar-left { flex: 1; display: flex; align-items: center; }
.bp-toolbar-center { flex: 0 0 auto; }
.bp-toolbar-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; }

/* Import Batch — primary teal */
.bp-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s;
  white-space: nowrap;
}
.bp-import-btn i { font-size: 15px; }
.bp-import-btn:hover { background: #0F766E; }

/* Segmented toggle */
.bp-toggle {
  display: inline-flex;
  align-items: center;
  background: #F1F5F9;
  border-radius: 9px;
  padding: 3px;
  gap: 0;
}
.bp-toggle-btn {
  min-width: 130px;
  padding: 7px 18px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.1s, background 0.1s, box-shadow 0.1s;
  white-space: nowrap;
}
.bp-toggle-btn:hover:not(.active):not(:disabled) { color: #334155; }
.bp-toggle-btn.active {
  background: white;
  color: #0F172A;
  box-shadow: 0 1px 2px rgba(15,23,42,0.08), 0 0 0 0.5px rgba(15,23,42,0.04);
}
.bp-toggle-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Add Lead — secondary outlined */
.bp-add-lead-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  background: white;
  color: #334155;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.bp-add-lead-btn i { font-size: 15px; }
.bp-add-lead-btn:hover { background: #F8FAFC; border-color: #94A3B8; }

/* ── Summary + search strip ────────────────────────────────── */
.bp-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 24px 14px;
}
.bp-summary {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-size: 13px;
  color: #64748B;
  gap: 0;
}
.bp-sum-count, .bp-sum-invested {
  font-weight: 500;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.bp-sum-ap {
  font-weight: 500;
  color: #10B981;
  font-variant-numeric: tabular-nums;
}
.bp-sum-dot {
  color: #CBD5E1;
  padding: 0 8px;
}
.bp-sum-placeholder {
  color: #CBD5E1;
  font-variant-numeric: tabular-nums;
}

/* ── Header metric tiles (four-up) ───────────────────────────── */
#bp-summary { flex: 1; min-width: 0; }
.bp-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* packed together on the LEFT — tiles don't stretch to fill the strip */
  justify-content: flex-start;
}
.bp-tile {
  flex: 0 0 132px;               /* identical fixed width (fits "AP produced" on one line), no flex-grow */
  width: 132px;
  background: #F8FAFC;            /* app secondary surface (matches search field) */
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 8px 12px;             /* compact — tight label→value rhythm */
}
.bp-tile-lbl {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;               /* native .bp-metric-lbl */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
  color: #94A3B8;
  margin-bottom: 4px;
  white-space: nowrap;           /* keep every label on a single line */
}
/* Icon reuses the app's teal accent (.ldp-reach-icon = #0D9488) */
.bp-tile-ico { font-size: 13px; color: #0D9488; flex-shrink: 0; }
.bp-tile-val {
  font-size: 16px;               /* native .bp-metric-val (was 24px) */
  font-weight: 500;
  color: #0F172A;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bp-tile-val--green { color: #10B981; }
.bp-tile-val--muted { color: #94A3B8; }

/* Search wrapper */
.bp-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 280px;
  max-width: 280px;
  background: #F8FAFC;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 7px 12px;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}
.bp-search-wrap.focused {
  background: white;
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.08);
}
.bp-search-icon { font-size: 14px; color: #94A3B8; flex-shrink: 0; }
.bp-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  color: #0F172A;
  font-family: inherit;
}
.bp-search-input::placeholder { color: #94A3B8; }
.bp-search-input:disabled { cursor: not-allowed; }

/* ── Month filter + search group (right side of strip) ───────── */
.bp-strip-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
/* Month dropdown reuses the native .ll-fd* filter-dropdown styling */
/* Calendar icon reuses the app's teal accent (matches .bp-tile-ico / .ldp-reach-icon) */
.bp-month-ico { font-size: 14px; color: #0D9488; flex-shrink: 0; }
/* One fixed width sized for the widest label ("All batches") + chevron, so the
   button never resizes when the selection changes. Chevron stays flush right. */
.bp-month-fd .ll-fd-btn { gap: 6px; width: 150px; }
.bp-month-fd .ll-fd-arr { margin-left: auto; }
/* Menu anchored to the button width (overrides the native 190px min-width). */
.bp-month-fd .ll-fd-panel { min-width: 0; width: 150px; max-width: none; }
/* Fixed max-height + internal scroll so the menu never runs off-screen */
.bp-month-opts { max-height: 264px; overflow-y: auto; }
/* "All batches" stays pinned at the top while the month rows scroll */
.bp-month-all {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.bp-month-hidden { display: none; }
.bp-month-more {
  padding: 7px 12px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  border-top: 1px solid var(--border);
  margin-top: 2px;
}
.bp-month-more:hover { text-decoration: underline; }

/* ── Batch-view best-time filter (topbar, far right) ──────────── */
.bp-bt-ico { font-size: 14px; color: #0D9488; flex-shrink: 0; }   /* teal clock */
/* One fixed width sized for the widest label ("Not specified") + chevron, so the
   button never resizes on selection; chevron flush right. */
.bp-bt-fd .ll-fd-btn { gap: 6px; width: 160px; }
.bp-bt-fd .ll-fd-arr { margin-left: auto; }
/* Menu anchored to the button width (overrides the native 190px min-width). */
.bp-bt-fd .ll-fd-panel { min-width: 0; width: 160px; max-width: none; }

/* ── Batch card list ───────────────────────────────────────── */
.bp-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px;
}

/* ── Empty / no-results message ────────────────────────────── */
.bp-empty-msg {
  font-size: 14px;
  color: #64748B;
  text-align: center;
  padding: 48px 32px;
  line-height: 1.6;
}

/* ── Batch card ────────────────────────────────────────────── */
.bp-card {
  position: relative; /* anchors ::before accent bar */
  display: block;     /* single column — the hover-reveal arrow was removed */
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease,
              box-shadow 0.15s ease, transform 0.15s ease;
  outline: none;
  text-align: left;
}
.bp-card:hover,
.bp-card:focus-visible {
  border-color: #94A3B8;
  background: #FAFBFC;
  box-shadow:
    -8px 0 24px -4px rgba(13, 148, 136, 0.35),
    0 4px 12px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.bp-card:focus-visible {
  outline: 2px solid #0D9488;
  outline-offset: 2px;
}

/* Card body (left column) */
.bp-card-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* Identity row */
.bp-identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* CloserKit batch-name pill — matches .ad-session-namebox / .cw-batch-name-value. */
.bp-name {
  display: inline-block;
  background: #E1F5EE;
  color: var(--color-text-primary, #0F172A);
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
/* Leading "Lead" icon before the batch name — mirrors the Q-session card's .ad-session-ico */
.bp-name-ico { font-size: 13px; margin-right: 6px; vertical-align: -1px; color: var(--accent, #0d9488); }
.bp-age {
  font-size: 12px;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
}
.bp-referral-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  background: #ECFDF5;
  color: #047857;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bp-referral-badge i { font-size: 12px; }

/* Metrics row */
.bp-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2.2fr;   /* four equal columns + a wider Worked column */
  gap: 16px;
}
.bp-metric { display: flex; flex-direction: column; gap: 4px; }
.bp-metric-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
  font-weight: 500;
  white-space: nowrap;           /* keep labels (e.g. "AP produced") on one line in the tighter 5-col cells */
}
/* Worked cell: label centered over the bar; beneath it a row of [ full-length bar ][ % ].
   The bar fills the (wider) Worked column via flex:1 — scoped to .bp-metrics-row so the
   SHARED base .bp-worked-track and the Queue Dialer .ad-queue-progress bar stay untouched. */
.bp-metric--worked .bp-metric-lbl { text-align: center; }
.bp-worked-row { display: flex; align-items: center; gap: 8px; }
.bp-metrics-row .bp-worked-track { flex: 1; width: auto; }
.bp-worked-pct {
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);   /* CloserKit brand teal (matches the worked-bar fill) */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.bp-metric-val {
  font-size: 16px;
  font-weight: 500;
  color: #0F172A;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.bp-metric-val--green { color: #10B981; }
.bp-metric-val--muted { color: #94A3B8; }

/* Worked progress bar — base track/fill are SHARED with the Queue Dialer
   (.ad-queue-progress) bar; the in-column sizing override lives in .bp-metrics-row above. */
.bp-worked-track {
  flex: 1;
  height: 4px;
  background: #F1F5F9;
  border-radius: 2px;
  overflow: hidden;
}
.bp-worked-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Data quality pill */

/* ── Skeleton loading cards ────────────────────────────────── */
.bp-card--skeleton {
  cursor: default;
  pointer-events: none;
}
.bp-card--skeleton:hover {
  border-color: #E2E8F0;
  background: white;
  box-shadow: none;
  transform: none;
}
@keyframes bp-pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1;   }
}
.bp-sk {
  background: #E2E8F0;
  border-radius: 4px;
  animation: bp-pulse 1.5s ease-in-out infinite;
}
.bp-sk-name   { height: 18px; width: min(340px, 80%); }
.bp-sk-age    { height: 12px; width: 80px; margin-top: 6px; }
.bp-sk-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2.2fr;   /* match the loaded card's wider Worked column */
  gap: 16px;
}
.bp-sk-mlbl   { height: 10px; width: 50px; margin-bottom: 6px; }
.bp-sk-mval   { height: 16px; width: 60px; }
.bp-metric--worked .bp-sk-mlbl { margin-left: auto; margin-right: auto; }   /* center skeleton label */
.bp-sk-wbar   { height: 4px;  flex: 1; border-radius: 2px; }                /* fills the row beside the % pill */
.bp-sk-wpct   { height: 13px; width: 28px; border-radius: 4px; }
/* .bp-sk-btn removed — Open batch button replaced by hover-reveal arrow */

/* ── Error card ────────────────────────────────────────────── */
.bp-error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  background: white;
  border: 0.5px solid #E2E8F0;
  border-radius: 14px;
  padding: 48px 32px;
  margin: 0 24px;
}
.bp-error-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #FEF2F2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-error-icon { font-size: 26px; color: #B91C1C; }
.bp-error-title {
  font-size: 15px;
  font-weight: 500;
  color: #0F172A;
}
.bp-error-desc {
  font-size: 13px;
  color: #64748B;
  max-width: 360px;
  line-height: 1.55;
}

/* ============================================================
   BATCHES PAGE — Empty state (zero batches)
   ============================================================ */
.bp-fte-wrap {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F8FAFC;
}
.bp-fte-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 400px;
  pointer-events: none;
  z-index: 0;
  color: #0D9488;
  opacity: 0.04;
}
.bp-fte-watermark svg {
  display: block;
  width: 100%;
  height: 100%;
}
.bp-fte-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px 24px;
}
/* Boxed icon — same style as the Auto Dialer empty state (.ck-soon-icon-wrap). */
.bp-fte-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: white;
  border: 0.5px solid #E2E8F0;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.bp-fte-title {
  font-size: 20px;
  font-weight: 500;
  color: #0F172A;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.bp-fte-desc {
  font-size: 14px;
  color: #64748B;
  max-width: 380px;
  line-height: 1.55;
  margin: 0 0 28px;
}
.bp-fte-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: #0D9488;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.12s;
}
.bp-fte-import-btn i { font-size: 15px; }
.bp-fte-import-btn:hover { background: #0F766E; }
/* Stacked empty-state actions — Add Lead directly under Import Batch. */
.bp-fte-btns {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ============================================================
   Add Lead Modal
   ============================================================ */

/* Overlay / scrim */
.al-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .18s ease;
}
.al-overlay.al-open { opacity: 1; }

/* Panel */
.al-panel {
  background: #fff;
  border-radius: 12px;
  width: 520px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(15,23,42,.18);
  transform: translateY(6px) scale(.985);
  transition: transform .18s ease, opacity .18s ease;
  overflow: hidden;
}
.al-overlay.al-open .al-panel {
  transform: translateY(0) scale(1);
}

/* Header */
.al-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 0.5px solid #E2E8F0;
  flex-shrink: 0;
}
.al-title {
  font-size: 15px;
  font-weight: 600;
  color: #0F172A;
  letter-spacing: -0.01em;
}
.al-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #64748B;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.al-close-btn i { font-size: 16px; }
.al-close-btn:hover { background: #F1F5F9; color: #0F172A; }

/* Body */
.al-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 20px;
}

/* Form rows */
.al-form { display: flex; flex-direction: column; gap: 18px; }
.al-row  { width: 100%; }
.al-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Field */
.al-field { display: flex; flex-direction: column; gap: 5px; }

/* Label */
.al-label {
  font-size: 12px;
  font-weight: 500;
  color: #64748B;
  display: flex;
  align-items: center;
  gap: 3px;
}
.al-req { color: #0D9488; font-size: 9px; display: flex; align-items: center; }

/* Input */
.al-input {
  height: 38px;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  padding: 0 11px;
  font-size: 14px;
  color: #0F172A;
  font-family: inherit;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
.al-input::placeholder { color: #94A3B8; }
.al-input:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}
.al-input.al-input-error {
  border-color: #B91C1C;
  box-shadow: 0 0 0 3px rgba(185,28,28,.08);
}

/* Select */
.al-select-wrap { position: relative; }
.al-select-wrap::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #64748B;
  pointer-events: none;
}
.al-select {
  height: 38px;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  padding: 0 30px 0 11px;
  font-size: 14px;
  color: #0F172A;
  font-family: inherit;
  background: #fff;
  appearance: none;
  width: 100%;
  transition: border-color .12s, box-shadow .12s;
  cursor: pointer;
}
.al-select:focus {
  outline: none;
  border-color: #0D9488;
  box-shadow: 0 0 0 3px rgba(13,148,136,.12);
}

/* Other niche text input */
.al-other-niche-wrap { margin-top: 8px; }

/* State text input + suggestions dropdown */
.al-state-field { position: relative; }

/* State dropdown */
.al-state-dd {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12);
  z-index: 200;
  max-height: 240px;
  overflow-y: auto;
}
.al-state-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background .1s;
}
.al-state-opt:hover { background: #F8FAFC; }
.al-state-opt--hi  { background: #F0FDFA; }
.al-state-opt-code {
  font-size: 12px;
  font-weight: 600;
  color: #0D9488;
  width: 26px;
  flex-shrink: 0;
}
.al-state-opt-name {
  font-size: 13px;
  color: #0F172A;
  flex: 1;
}

/* Field error */
.al-field-err {
  font-size: 11.5px;
  color: #B91C1C;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 1px;
}

/* Submit error banner */
.al-submit-err {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FEF2F2;
  border: 0.5px solid #FECACA;
  border-radius: 8px;
  color: #B91C1C;
  font-size: 13px;
  padding: 10px 14px;
  margin-bottom: 16px;
}

/* Footer */
.al-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px 18px;
  border-top: 0.5px solid #E2E8F0;
  flex-shrink: 0;
}
.al-cancel-btn {
  height: 36px;
  padding: 0 16px;
  background: none;
  border: 0.5px solid #CBD5E1;
  border-radius: 8px;
  color: #64748B;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.al-cancel-btn:hover { background: #F1F5F9; color: #0F172A; border-color: #94A3B8; }
.al-create-btn {
  height: 36px;
  padding: 0 18px;
  background: #0D9488;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 13.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background .12s;
}
.al-create-btn i { font-size: 15px; }
.al-create-btn:hover:not(:disabled) { background: #0F766E; }
.al-create-btn:disabled { opacity: .6; cursor: not-allowed; }

/* Spinner keyframe (reused across modals) */
@keyframes al-spin { to { transform: rotate(360deg); } }

/* ============================================================
   My Leads Collapsible Component
   ============================================================ */

/* Collapsed row */
.ml-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F8FAFC;
  border: 0.5px solid #E2E8F0;
  border-radius: 8px;
  padding: 10px 14px;
  margin: 0 24px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  user-select: none;
}
.ml-row:hover { background: #F1F5F9; border-color: #CBD5E1; }
.ml-row.is-open {
  border-radius: 8px 8px 0 0;
  border-bottom-color: #F1F5F9;
  margin-bottom: 0;
}

/* Icon tile */
.ml-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #F0FDFA;
  color: #0D9488;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ml-icon i { font-size: 14px; }

/* Label */
.ml-label {
  font-size: 13px;
  font-weight: 500;
  color: #0F172A;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Unopened badge */
.ml-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #DC2626;
  color: #fff;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 500;
  min-width: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}

/* Lead count meta */
.ml-meta {
  font-size: 12px;
  font-weight: 500;
  color: #94A3B8;
  white-space: nowrap;
}

/* Chevron */
.ml-chevron {
  font-size: 16px;
  color: #94A3B8;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.ml-row.is-open .ml-chevron { transform: rotate(180deg); }

/* Expanded body */
.ml-body {
  display: flex;
  align-items: center;
  gap: 32px;
  background: #fff;
  border: 0.5px solid #E2E8F0;
  border-top: none;
  border-radius: 0 0 8px 8px;
  padding: 14px 50px 14px 16px;
  margin: 0 24px 14px;
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .12s;
  position: relative;
  user-select: none;
}
.ml-body:hover {
  background: #FAFBFC;
  border-color: #CBD5E1;
  box-shadow: -8px 0 24px -4px rgba(13,148,136,.35), 0 4px 12px rgba(15,23,42,.06);
  transform: translateY(-1px);
}
.ml-body:hover .ml-body-arrow { opacity: 1; }

/* Stats grid */
.ml-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  flex: 1;
}
.ml-stat { display: flex; flex-direction: column; gap: 3px; }
.ml-stat-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
}
.ml-stat-value {
  font-size: 16px;
  font-weight: 500;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.ml-stat-value.ap { color: #10B981; }

/* % Worked section */
.ml-worked {
  min-width: 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ml-worked-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ml-worked-lbl {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94A3B8;
}
.ml-worked-pct {
  font-size: 13px;
  font-weight: 500;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.ml-worked-track {
  height: 4px;
  background: #F1F5F9;
  border-radius: 2px;
  overflow: hidden;
}
.ml-worked-fill {
  height: 100%;
  background: #EAB308;
  border-radius: 2px;
  transition: width .3s ease;
}

/* Hover arrow */
.ml-body-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #0D9488;
  font-size: 22px;
  opacity: 0;
  transition: opacity .12s;
  display: flex;
  align-items: center;
}

/* ============================================================
   Add Lead Modal — Part 2 (expandable section + success state)
   ============================================================ */

/* Divider between required and optional field groups */
.al-optional-divider {
  border: none;
  border-top: 0.5px solid #E2E8F0;
  margin: 2px 0 4px;
}

/* DOB row */
.al-dob-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.al-dob-row .al-input { flex: 1; }

/* Age pill */
.al-age-display {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  height: 36px;
  padding: 0 10px;
  background: #F0FDFA;
  border: 0.5px solid #99F6E4;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #0D9488;
  white-space: nowrap;
}

/* ── Success state ─────────────────────────────────────────── */
.al-success-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px 36px;
  gap: 10px;
}

.al-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #F0FDFA;
  border: 0.5px solid #99F6E4;
  color: #0D9488;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 6px;
}

.al-success-title {
  font-size: 16px;
  font-weight: 500;
  color: #0F172A;
}

.al-success-body {
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  line-height: 1.5;
}

.al-success-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.al-later-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: 0.5px solid #CBD5E1;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #64748B;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.al-later-btn:hover { background: #F1F5F9; color: #0F172A; border-color: #94A3B8; }

.al-view-btn {
  height: 36px;
  padding: 0 16px;
  border-radius: 8px;
  border: none;
  background: #0D9488;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background .12s;
}
.al-view-btn:hover { background: #0F766E; }
.al-view-btn i { font-size: 14px; }