@media (max-width: 768px){
  .table-wrap {
    margin: 0 -0.25rem;
    padding-bottom: 0.25rem;
  }

  .table-wrap table {
    min-width: 520px;
  }
}

@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px){
  .filters-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .filter-actions {
    width: 100%;
  }

  .filter-actions .btn {
    flex: 1;
  }

  .leads-toolbar-inline {
    flex-direction: column;
    align-items: stretch;
  }

  .leads-toolbar-inline #leads-agent-filter,
  .leads-toolbar-inline select,
  .leads-toolbar-inline .search-wrap {
    width: 100%;
    max-width: none;
  }

  .leads-toolbar-inline .btn {
    width: 100%;
  }

  .pagination {
    justify-content: center;
  }
}
@media (max-width: 900px){
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(288px, 88vw);
    z-index: 1050;
    padding: 1rem 0.75rem;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 4px 0 24px rgba(15, 23, 42, 0.12);
    transform: translateX(-105%);
    transition: transform 0.22s ease;
    overflow-y: auto;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-nav {
    flex: 1;
    overflow-y: auto;
  }

  .nav-item {
    padding: 0.75rem 0.85rem;
    font-size: 0.95rem;
    min-height: 44px;
  }

  .sidebar-logout {
    width: 100%;
    margin-top: 0.5rem;
    min-height: 44px;
  }

  .main {
    padding: 1rem;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    width: 100%;
    min-width: 0;
  }

  .topbar {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .topbar h2 {
    font-size: 1.25rem;
  }

  .topbar-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .days-select {
    flex: 1;
    min-width: 120px;
  }

  .days-select select {
    width: 100%;
  }

  .topbar-actions .btn-secondary {
    flex: 1;
    min-width: 100px;
  }

  .section-title {
    font-size: 0.85rem;
    margin-top: 1.25rem;
  }

  .bar-row {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 0.35rem 0.5rem;
  }

  .bar-row span:first-child {
    grid-column: 1 / -1;
  }

  .bar-row .bar-track {
    grid-column: 1;
  }

  .bar-row span:last-child {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .toolbar .search-wrap {
    max-width: none;
    min-width: 0;
    width: 100%;
  }

  .toolbar .btn-primary.btn-sm {
    width: 100%;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .modal-backdrop {
    padding: 0;
    align-items: flex-end;
  }

  .modal,
  .modal-wide {
    max-width: none;
    width: 100%;
    max-height: 92vh;
    border-radius: 16px 16px 0 0;
    margin: 0;
  }

  .modal-header h3 {
    font-size: 1rem;
    padding-right: 0.5rem;
  }

  .modal-footer {
    flex-wrap: wrap;
  }

  .modal-footer .btn {
    flex: 1;
    min-width: 120px;
  }

  .project-check-list {
    max-height: 40vh;
  }

  th, td {
    padding: 0.55rem 0.65rem;
    font-size: 0.82rem;
  }

  .login-card {
    padding: 1.5rem;
  }

  .login-brand h1 {
    font-size: 1.2rem;
  }
}
@media (max-width: 400px){
  .topbar-actions {
    flex-direction: column;
  }

  .topbar-actions .btn-secondary,
  .days-select {
    width: 100%;
  }
}
:root {
  /* ── Surfaces & text ─────────────────────────────────────────── */
  --bg: #f6f7fb;              /* app canvas */
  --surface: #ffffff;        /* cards, panels */
  --surface2: #f4f5fa;       /* subtle fills, table heads, inset areas */
  --surface3: #eef0f7;       /* deeper insets / hover fills */
  --border: #e6e8f0;         /* hairline borders */
  --border-strong: #d5d9e6;
  --text: #171a2b;           /* primary text */
  --text-secondary: #5b6478;
  --muted: #414a63;          /* secondary text (darkened so it stays legible on the colored page background) */

  /* ── One accent hue: indigo/violet (all decorative chrome) ───── */
  --accent: #5457e6;         /* primary accent */
  --accent-dim: #4143c9;     /* darker (hover, links-strong) */
  --accent-dark: #363796;    /* deepest */
  --accent-light: #eef0fe;   /* tinted surface (active bg, chips) */
  --accent-light-2: #e0e3fd; /* slightly stronger tint */
  --accent-border: #c7cbfa;  /* tinted border */
  --accent-strong: #6d70f0;
  --accent-contrast: #ffffff;
  --focus-ring: rgba(84, 87, 230, 0.28);
  --accent-glow: rgba(84, 87, 230, 0.16);

  /* ── Semantic status colors (carry meaning, kept distinct) ───── */
  --success: #16a34a;
  --success-bg: #ecfdf3;
  --success-border: #a7f3d0;
  --warn: #d97706;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --hot: #ea580c;

  /* ── Geometry, type, elevation ───────────────────────────────── */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --font: "DM Sans", system-ui, -apple-system, sans-serif;

  /* Spacing scale (4pt rhythm) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;

  /* Elevation */
  --shadow-xs: 0 1px 2px rgba(23, 26, 43, 0.05);
  --shadow: 0 1px 2px rgba(23, 26, 43, 0.05), 0 1px 3px rgba(23, 26, 43, 0.05);
  --shadow-md: 0 4px 12px rgba(23, 26, 43, 0.08);
  --shadow-lg: 0 12px 32px rgba(23, 26, 43, 0.12);

  /* ── Sidebar (dark, shared chrome — separate ramp from the light canvas) ── */
  --sidebar-bg-top: #2f2b7a;
  --sidebar-bg-bottom: #1c1a42;
  --sidebar-text: rgba(255, 255, 255, 0.72);      /* default nav-item label */
  --sidebar-text-strong: #ffffff;                  /* brand title, hover/active label */
  --sidebar-muted: rgba(255, 255, 255, 0.6);       /* build-tag caption */
  --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
  --sidebar-active-bg: rgba(255, 255, 255, 0.12);
  --sidebar-active-accent: #a5b4fc;                /* active-item left bar */
  --sidebar-border: rgba(255, 255, 255, 0.1);
}

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

html, body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
}

.hidden { display: none !important; }

.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: #f1f5f9;
}

.login-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--shadow);
}

.login-brand {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.75rem;
}

.login-brand h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
}

.login-brand p {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}

.logo-mark {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent-dim));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-mark.sm {
  width: 32px;
  height: 32px;
  font-size: 0.9rem;
  border-radius: 8px;
}

label {
  display: block;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 0.4rem;
}

input[type="password"],
input[type="text"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form-error {
  color: var(--danger);
  font-size: 0.85rem;
  margin: 0.5rem 0 0;
}

.btn {
  font: inherit;
  font-weight: 600;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0.6rem 1.1rem;
  transition: background 0.15s, opacity 0.15s;
}

.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary:hover:not(:disabled) { background: var(--accent-dim); }

#login-form .btn-primary {
  width: 100%;
  margin-top: 1rem;
}

.cell-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: flex-end;
}

.cell-actions .btn-sm {
  white-space: nowrap;
}

input.readonly {
  background: var(--surface-2, #f1f5f9);
  color: var(--muted, #64748b);
  cursor: not-allowed;
}

.btn-danger:hover:not(:disabled) {
  background: #fef2f2;
  border-color: var(--danger);
}

.reg-footer {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.reg-section {
  margin-bottom: 2rem;
}

.team-section {
  margin-top: 0.5rem;
}

.btn-secondary {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--border);
}

.btn-sm {
  padding: 0.35rem 0.75rem;
  font-size: 0.8rem;
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  width: 100%;
  margin-top: auto;
}

.btn-ghost:hover { color: var(--text); background: var(--surface2); }

#login-form { margin-top: 0.5rem; }

.app {
  display: grid;
  min-height: 100vh;
  background: var(--bg);
}

.table-wrap .col-actions {
  width: 72px;
  white-space: nowrap;
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.topbar h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--text);
}
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .topbar h2 {
    background: linear-gradient(135deg, var(--text), var(--accent-dim));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

.muted { color: var(--muted); font-size: 0.85rem; margin: 0.2rem 0 0; }

.days-select {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.days-select select { width: auto; min-width: 110px; }

.panel { display: none; }
.panel.active { display: block; }

.section-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 1.5rem 0 0.75rem;
  padding-left: 0.6rem;
  border-left: 3px solid var(--accent);
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.table-wrap::after {
  content: '';
  display: block;
  height: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th, td {
  padding: 0.65rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface2);
}

tr:last-child td { border-bottom: none; }

tbody tr:hover td { background: #f8fafc; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface2);
  color: var(--muted);
}

.badge.hot { background: #ffedd5; color: var(--hot); }
.badge.ok { background: #dcfce7; color: var(--success); }
.badge.warn { background: #fef3c7; color: var(--warn); }

.bar-list { padding: 1rem; }

.bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 48px;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
}

.bar-track {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
}

.empty {
  padding: 2rem;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.banner {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

.banner-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--danger);
}

.banner-success {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #047857;
}

.banner-warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #b45309;
}

.banner-info {
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  color: var(--accent-dim);
}

.loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--muted);
  padding: 2rem 0;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Small inline variant — e.g. "loading more…" next to a results count, where
   the full-size centered .spinner would be too heavy. */
.loading-inline-spinner {
  display: inline-block;
  vertical-align: middle;
  width: 12px;
  height: 12px;
  margin-right: 6px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

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

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  box-shadow: var(--shadow);
}
@media (min-width: 901px) { .toolbar { align-items: center; } }

.toolbar .search-wrap {
  flex: 1;
  min-width: 220px;
  max-width: 420px;
}

.toolbar .search-wrap input { margin: 0; }

.toolbar .count {
  font-size: 0.85rem;
  color: var(--muted);
}

.code-cell {
  font-weight: 700;
  color: var(--accent);
}

/* Modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  z-index: 1000;
}

.modal {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
}

.modal-wide {
  max-width: 560px;
}

.project-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: var(--surface2);
}

.project-check {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  border: 1px solid transparent;
}

.project-check:hover {
  border-color: var(--border);
}

.project-check input {
  width: auto;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.project-check.is-hidden {
  display: none;
}

.project-check-label {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.9rem;
}

.project-check-meta {
  font-size: 0.78rem;
  color: var(--muted);
}

/* Rows for people who have been removed from the team but are still linked somewhere.
   Shown (never hidden) so the link can be seen and unticked. */
.is-inactive-agent {
  background: var(--surface3);
}

/* Greyed-out tick list: "All agents" is on, so the individual picks do not apply. */
.agent-checklist-box.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* Lead transfer: dropdowns that hold a tick list rather than single-choice options. */
.combo-options-ticks {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.35rem;
}

.combo-options-ticks .project-check {
  background: #fff;
}

/* Each filter row lays its fields out side by side and wraps on small screens. */
.lt-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-start;
}

.lt-row > .field {
  flex: 1 1 260px;
  min-width: 220px;
}

.lt-row > .field.hidden {
  display: none;
}

/* ── Remove member wizard ──────────────────────────────────────────────────── */

.ar-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  margin: 0 0 0.9rem;
  padding: 0;
}

.ar-step {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.ar-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--surface3);
  font-size: 0.68rem;
  font-weight: 600;
}

.ar-step.is-current {
  color: var(--accent-dim);
  background: var(--accent-light);
  border-color: var(--accent-border);
  font-weight: 600;
}

.ar-step.is-current .ar-step-num {
  background: var(--accent);
  color: #fff;
}

.ar-step.is-done {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

.ar-h {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.ar-summary {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

.ar-choices {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.ar-choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}

.ar-choice:hover {
  border-color: var(--accent-border);
}

.ar-choice input {
  width: auto;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.ar-choice > span {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.9rem;
}

.ar-choice .muted {
  font-size: 0.78rem;
  margin: 0;
}

.ar-log {
  margin-top: 1rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  border-radius: var(--radius);
}

.ar-log h4 {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
  color: #047857;
}

.ar-log ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.83rem;
  color: #065f46;
  line-height: 1.6;
}

.field-check {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0.35rem;
}

.check-inline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--text);
  cursor: pointer;
  margin: 0;
}

.check-inline input {
  width: auto;
  margin: 0;
}

.toolbar .btn-primary.btn-sm {
  padding: 0.45rem 0.9rem;
}

.filters-toolbar {
  align-items: flex-end;
}

.filter-field {
  flex: 1;
  min-width: 140px;
}

.leads-toolbar-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin-bottom: 1rem;
  padding: 0.85rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.leads-toolbar-inline .inline-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.leads-toolbar-inline .inline-field label {
  margin-bottom: 0.25rem;
  font-size: 0.75rem;
}

.leads-toolbar-inline #leads-agent-filter {
  width: min(160px, 28vw);
  margin: 0;
}

.leads-toolbar-inline select {
  width: min(160px, 28vw);
  margin: 0;
  padding: 0.45rem 0.5rem;
  font-size: 0.875rem;
}

.leads-toolbar-inline .search-wrap {
  flex: 1;
  min-width: min(200px, 36vw);
  max-width: 280px;
}

.leads-toolbar-inline .search-wrap input {
  width: 100%;
  margin: 0;
}

.leads-toolbar-inline .btn {
  flex-shrink: 0;
  margin-bottom: 0;
}

.leads-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.leads-pagination-bottom {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}
.legacy-pool-pagination {
  justify-content: space-between;
}
.legacy-pool-pagination .pagination {
  flex: 1;
}
.leads-page-info {
  font-size: 0.88rem;
  color: var(--muted);
  min-width: 10rem;
}
.leads-bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  margin: 0.75rem 0 1rem;
  padding: 0.65rem 0.75rem;
  background: var(--accent-light);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}

.leads-selected-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text);
  margin-right: 0.25rem;
}

.leads-table-wrap .col-check {
  width: 2.25rem;
  text-align: center;
  vertical-align: middle;
}

.leads-table-wrap .col-check input[type='checkbox'] {
  width: 1rem;
  height: 1rem;
  margin: 0;
  cursor: pointer;
}

.leads-table-wrap th.col-check,
.leads-table-wrap td.col-check {
  padding-left: 0.5rem;
  padding-right: 0.35rem;
}

.filter-field label {
  margin-bottom: 0.35rem;
}

.label-hint {
  font-weight: 400;
  color: var(--muted);
}

.filter-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  padding: 0.5rem 0;
}

.pagination .page-btn.btn-primary {
  color: #fff;
}

.page-info {
  font-size: 0.85rem;
  color: var(--muted);
  margin-left: 0.35rem;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.modal-header h3 {
  margin: 0;
  font-size: 1.1rem;
}

.modal-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  padding: 0.25rem;
}

.modal-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid var(--border);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.form-row .field { min-width: 0; }

/* ——— Mobile navigation ——— */
/* Base rule intentionally has no `display` — the mobile media query (≤900px)
   turns it on with `inline-flex`; the desktop-only rule below turns it back
   off. An earlier unconditional `display:none` here was winning the cascade
   on every screen size (same bug class as the .app/.main overrides), hiding
   the hamburger on mobile entirely. */
.nav-toggle {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
@media (min-width: 901px) { .nav-toggle { display: none; } }

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
  position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.nav-toggle-icon::before { top: -6px; }
.nav-toggle-icon::after { top: 6px; }

.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1040;
}

body.nav-open {
  overflow: hidden;
}

.topbar-left {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.topbar-titles {
  min-width: 0;
}

.topbar-titles h2 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* ─── Ad Mappings panel ───────────────────────────────────────────────── */
.mono {
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 0.78rem;
  background: var(--surface-2, #f4f5f7);
  padding: 2px 6px;
  border-radius: 4px;
  word-break: break-all;
}

.badge-green {
  background: #dcfce7;
  color: #166534;
}

.badge-grey {
  background: #f1f5f9;
  color: #64748b;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.panel-subtitle {
  font-size: 0.85rem;
  color: var(--text-secondary, #64748b);
  margin-top: 0.25rem;
  max-width: 60ch;
}

.field-hint {
  font-size: 0.78rem;
  color: var(--text-secondary, #64748b);
  margin-top: 0.25rem;
}

.field-hint code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 0.76rem;
  background: #f1f5f9;
  padding: 1px 4px;
  border-radius: 3px;
}

.optional {
  font-size: 0.75rem;
  color: var(--text-secondary, #94a3b8);
  font-weight: 400;
  margin-left: 4px;
}

.btn-danger {
  background: #fee2e2;
  color: #991b1b;
  border: none;
}
.btn-danger:hover {
  background: #fecaca;
}

/* ─── Campaign Mapping panel ──────────────────────────────────────────────── */

.agents-cell {
  max-width: 280px;
}

.agent-badge {
  display: inline-block;
  background: var(--accent-light);
  color: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  margin: 2px 3px 2px 0;
  white-space: nowrap;
}

/* Agent picker — available list */
.agent-pick-list {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  max-height: 180px;
  overflow-y: auto;
  margin-top: 6px;
}

.agent-pick-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #f1f5f9);
  transition: background 0.1s;
}

.agent-pick-item:last-child { border-bottom: none; }
.agent-pick-item:hover { background: #f8fafc; }

.agent-pick-role {
  font-size: 0.72rem;
  flex: 1;
}

/* Agent sortable list (selected) */
.field-sublabel {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #64748b);
  margin: 10px 0 4px;
}

.agent-sortable-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  overflow: hidden;
}

.agent-sortable-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid var(--border, #f1f5f9);
  cursor: default;
  user-select: none;
  transition: background 0.1s;
}

.agent-sortable-item:last-child { border-bottom: none; }
.agent-sortable-item:hover { background: #f8fafc; }
.agent-sortable-item[draggable="true"] { cursor: grab; }
.agent-sortable-item[draggable="true"]:active { cursor: grabbing; }

.drag-handle {
  color: #94a3b8;
  font-size: 1rem;
  cursor: grab;
  padding: 0 2px;
}

.agent-order-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: var(--accent-dim);
  color: #fff;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}

.agent-name {
  flex: 1;
  font-size: 0.875rem;
}

/* Search within picker */
#amf-agent-search-wrap {
  padding: 6px;
  border-bottom: 1px solid var(--border, #e2e8f0);
  background: #fafafa;
}

#amf-agent-search {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 4px;
  font-size: 0.8rem;
}

/* Table improvements */
.text-muted { color: #94a3b8; font-size: 0.8rem; }

/* ─── Custom Select Combobox ────────────────────────────────────────────── */
.combo {
  position: relative;
  display: block;
  width: 100%;
  min-width: 190px;
}

.combo-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.88rem;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.combo-trigger:focus,
.combo-trigger.has-value {
  border-color: var(--accent);
  outline: none;
}

.combo-trigger-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combo-chevron {
  color: var(--muted);
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.combo-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  max-height: 250px;
  overflow: hidden;
}

.combo-menu.hidden {
  display: none !important;
}

.combo-search-wrap {
  padding: 0.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface2);
}

.combo-search-wrap input {
  width: 100%;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 2px);
  font-size: 0.85rem;
  font-family: var(--font);
  box-sizing: border-box;
}

.combo-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(84, 87, 230, 0.15);
}

.combo-options {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.combo-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-size: 0.85rem;
  transition: background 0.1s;
}

.combo-option:last-child {
  border-bottom: none;
}

.combo-option:hover,
.combo-option:focus {
  background: var(--surface2);
  outline: none;
}

.combo-option.is-selected {
  background: var(--accent-light);
  color: var(--accent);
  font-weight: 600;
}

.combo-option.is-hidden {
  display: none !important;
}

.combo-option-meta {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.agent-checklist-box {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.agent-checklist-box .combo-search-wrap {
  border-bottom: 1px solid var(--border);
}
.agent-checklist-scroll {
  max-height: 220px;
  overflow: auto;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

.is-hidden {
  display: none !important;
}
.unit-editor {
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fafbfc;
}

.unit-editor-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem 0.35rem;
}

.unit-editor-scroll {
  overflow-x: auto;
  padding: 0 0.5rem 0.75rem;
}

.unit-editor-table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.unit-editor-table th,
.unit-editor-table td {
  padding: 0.35rem 0.3rem;
  vertical-align: middle;
}

.unit-editor-table th {
  color: var(--muted);
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.unit-editor-table input,
.unit-editor-table select {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.82rem;
}

.unit-editor-table .unit-col-label input {
  min-width: 9rem;
}

.unit-editor-table .unit-col-num input {
  min-width: 5.5rem;
}

.btn-remove-unit {
  color: var(--danger, #b91c1c);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.35rem;
}

/* ── Lead Automation panel ─────────────────────────────── */
.la-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--border);
  margin-bottom: 20px;
}
.la-tab {
  background: none;
  border: none;
  padding: 8px 16px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.la-tab.active {
  color: var(--primary, var(--accent));
  border-bottom-color: var(--primary, var(--accent));
}
.la-tabpanel { display: none; }
.la-tabpanel.active { display: block; }

.la-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 12px;
}
.la-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.la-card-name {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
}
.la-card-meta {
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.la-card-meta span {
  background: var(--bg-chip, rgba(0,0,0,0.05));
  padding: 2px 7px;
  border-radius: 100px;
}
.la-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.la-card-assigned {
  font-size: 0.78rem;
  color: var(--muted);
}
.la-card.is-mapped {
  border-color: var(--success-border, var(--success-border));
  background: var(--success-bg, #f0fdf4);
}
.la-card.is-mapped .la-card-name::after {
  content: ' ✓';
  color: var(--success, #16a34a);
  font-weight: 700;
}

/* Lead list + detail (Recent leads) */
.leads-table-wrap .col-datetime {
  font-size: 0.82rem;
  color: var(--muted, #64748b);
  white-space: nowrap;
}

.leads-table-wrap .col-actions {
  width: 6.5rem;
  text-align: right;
  white-space: nowrap;
}

.leads-table-wrap .lead-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.leads-table-wrap tr.lead-row.clickable {
  cursor: pointer;
}

.leads-table-wrap tr.lead-row.clickable:hover td {
  background: #f8fafc;
}

.leads-table-wrap tr.lead-row.clickable:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.an-status-table tr.an-status-row.clickable {
  cursor: pointer;
}

.an-status-table tr.an-status-row.clickable:hover td {
  background: #f8fafc;
}

.an-status-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent, var(--accent));
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.an-status-link:hover {
  color: var(--accent-dim);
}

.lead-cell-name {
  font-weight: 500;
}

.lead-detail-summary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.65rem 1rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.lead-detail-status-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding-bottom: 0.35rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid var(--border);
}

.lead-detail-status-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.lead-status-badge {
  font-size: 0.85rem;
}

.lead-detail-kv {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.lead-detail-k {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
}

.lead-detail-v {
  font-size: 0.92rem;
  color: var(--text);
  word-break: break-word;
}

.lead-detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.lead-form-qa {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.lead-form-row {
  display: grid;
  grid-template-columns: minmax(8rem, 34%) 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0.65rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.lead-form-q {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.lead-form-a {
  font-size: 0.92rem;
  color: var(--text);
  word-break: break-word;
}

.lead-client-messages {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.lead-client-message-item {
  padding: 0.65rem 0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.lead-client-message-meta {
  font-size: 0.8rem;
  margin-bottom: 0.35rem;
}

.lead-client-message-body {
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* WhatsApp messages inbox — layout only when this panel is active */
#panel-wamessages.panel.active {
  margin: 0 -0.25rem;
  height: calc(100vh - 150px);
  min-height: 420px;
  display: flex;
  flex-direction: column;
}

.wa-inbox {
  display: grid;
  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow);
}

.wa-inbox-list {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: #f8fafc;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

.wa-inbox-list-head {
  padding: 0.85rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  background: #075e54;
  color: #fff;
}

.wa-inbox-search-wrap {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border);
  background: #f0f2f5;
}

.wa-inbox-search {
  width: 100%;
  padding: 0.45rem 0.65rem;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 0.88rem;
  background: #fff;
}

.wa-inbox-search:focus {
  outline: 2px solid #075e54;
  outline-offset: 0;
}

.wa-chat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.wa-chat-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  border: none;
  border-bottom: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  font: inherit;
}

.wa-chat-item:hover {
  background: #f0f2f5;
}

.wa-chat-item.active {
  background: #e9edef;
}

.wa-chat-item-top {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: baseline;
}

.wa-chat-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
}

.wa-chat-time {
  font-size: 0.72rem;
  flex-shrink: 0;
}

.wa-chat-phone {
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.wa-chat-preview {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-chat-campaign {
  font-size: 0.72rem;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wa-chat-loading,
.wa-chat-empty {
  padding: 1.5rem;
  text-align: center;
}

.wa-inbox-thread {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: #e5ddd5;
}

.wa-thread-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.65rem 1rem;
  background: #075e54;
  color: #fff;
}

.wa-thread-header-main {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.wa-thread-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.wa-thread-title {
  font-weight: 600;
  font-size: 1rem;
}

.wa-thread-sub {
  font-size: 0.82rem;
  opacity: 0.9;
}

.wa-thread-header .btn-secondary {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
  flex-shrink: 0;
}

.wa-thread-header .btn-secondary:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.25);
}

.wa-campaign-banner {
  padding: 0.5rem 1rem;
  background: #dcf8c6;
  border-bottom: 1px solid #c5e1a5;
  font-size: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

.wa-campaign-banner-label {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: #33691e;
}

.wa-campaign-banner-value {
  color: #1b5e20;
  font-weight: 500;
}

.wa-campaign-id,
.wa-ad-id {
  font-family: ui-monospace, monospace;
  font-size: 0.85em;
}

.wa-campaign-pending {
  font-size: 0.78rem;
}

.wa-campaign-banner-meta {
  color: var(--muted);
  width: 100%;
  font-size: 0.78rem;
}

.wa-thread-body {
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: #e5ddd5;
}

.wa-bubble {
  max-width: 78%;
  padding: 0.5rem 0.65rem 0.35rem;
  border-radius: 8px;
  box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
}

.wa-bubble-in {
  align-self: flex-start;
  background: #fff;
  border-top-left-radius: 2px;
}

.wa-bubble-text {
  font-size: 0.92rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.wa-bubble-meta {
  font-size: 0.68rem;
  color: var(--muted);
  text-align: right;
  margin-top: 0.25rem;
}

.wa-no-msgs {
  margin: auto;
  text-align: center;
}

.wa-thread-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  color: var(--muted);
  background: #f0f2f5;
  text-align: center;
}

.wa-thread-empty-icon {
  font-size: 3rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.lead-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.lead-activity-item {
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}

.lead-activity-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 0.75rem;
}

.lead-activity-detail {
  margin-top: 0.35rem;
  font-size: 0.88rem;
  color: var(--text);
  white-space: pre-wrap;
}

.note-edited-tag,
.note-edit-btn {
  display: inline-block;
  border: none;
  background: none;
  padding: 0;
  margin-left: 0.35rem;
  font: inherit;
  font-size: 0.8rem;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  white-space: normal;
}

.note-original {
  display: block;
  margin-top: 0.2rem;
  color: var(--muted, #64748b);
  font-size: 0.82rem;
  font-style: italic;
  white-space: pre-wrap;
}

.note-edit-textarea {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  resize: vertical;
}

.lead-call-screenshot {
  margin-top: 0.5rem;
}

.lead-call-screenshot a {
  display: inline-block;
  line-height: 0;
}

.lead-call-screenshot img {
  display: block;
  max-width: min(100%, 320px);
  max-height: 240px;
  width: auto;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--border);
  cursor: zoom-in;
  transition: box-shadow 0.15s ease;
}

.lead-call-screenshot a:hover img {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.kpi-tap-hint {
  font-size: 0.72rem;
  margin-top: 0.35rem;
}

/* Responsive polish — mobile & tablet */
.app {
  min-width: 0;
}

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.topbar-actions {
  margin-left: auto;
}

.topbar-actions .btn-secondary {
  min-height: 44px;
}

.inline-field {
  min-width: 0;
}

.inline-field select,
.inline-field input[type="date"] {
  max-width: 100%;
}

@media (max-width: 900px){
  .topbar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .topbar-actions {
    width: auto;
    margin-left: auto;
  }

  .leads-toolbar-inline,
  .legacy-pool-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .leads-toolbar-inline > * {
    width: 100%;
    min-width: 0;
  }

  .panel-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  #panel-leadauto .panel-header > div:last-child {
    flex-wrap: wrap;
    width: 100%;
  }

  .la-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .data-table th,
  .data-table td,
  .leads-table th,
  .leads-table td {
    white-space: nowrap;
  }

  .wa-inbox {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(180px, 40vh) minmax(0, 1fr);
    height: 100%;
  }

  #panel-wamessages.panel.active {
    height: calc(100vh - 180px);
  }
}
@media (max-width: 480px){
  .main {
    padding: 0.85rem;
  }

  .topbar h2 {
    font-size: 1.1rem;
  }

  .topbar-actions {
    width: 100%;
    margin-left: 0;
  }

  .topbar-actions .btn-secondary {
    width: 100%;
  }
}
@media print{
  .sidebar,
  .topbar,
  .sidebar-backdrop {
    display: none !important;
  }
  .main {
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Legacy pool import — column mapping modal */
.legacy-import-intro {
  margin: 0 0 12px;
}

.legacy-import-dropzone {
  border: 2px dashed var(--border, #d1d5db);
  border-radius: 12px;
  padding: 2rem 1.5rem;
  text-align: center;
  cursor: pointer;
  background: var(--surface-2, #f9fafb);
  transition: border-color 0.15s, background 0.15s;
}

.legacy-import-dropzone:hover,
.legacy-import-dropzone:focus-visible,
.legacy-import-dropzone.drag-over {
  border-color: var(--accent, var(--accent));
  background: var(--accent-light);
}

.legacy-import-dropzone-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legacy-import-formats {
  font-size: 0.85rem;
}

.legacy-import-map-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: flex-end;
  margin-bottom: 14px;
}

.legacy-import-batch-field {
  flex: 1;
  min-width: 220px;
}

.legacy-import-batch-field input {
  width: 100%;
  margin-top: 4px;
}

.legacy-import-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}

.legacy-import-map-col h4 {
  margin: 0 0 4px;
  font-size: 0.95rem;
}

.legacy-import-map-hint {
  margin: 0 0 10px;
  font-size: 0.82rem;
}

.legacy-import-db-fields,
.legacy-import-excel-cols {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 120px;
}

.legacy-import-db-field {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.legacy-import-db-field.required .legacy-import-db-label::after {
  content: ' *';
  color: #dc2626;
}

.legacy-import-db-field.mapped {
  border-color: var(--success-border);
  background: #f0fdf4;
}

.legacy-import-db-field.drop-target {
  border-color: var(--accent, var(--accent));
  box-shadow: 0 0 0 2px rgba(84, 87, 230, 0.15);
}

.legacy-import-db-field.pick-target {
  outline: 2px solid var(--accent, var(--accent));
  outline-offset: 1px;
}

.legacy-import-db-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.legacy-import-db-hint {
  font-size: 0.78rem;
  margin-top: 2px;
}

.legacy-import-db-mapped {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.legacy-import-mapped-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--accent-light-2);
  font-size: 0.82rem;
}

.legacy-import-mapped-chip button {
  border: none;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  font-size: 1rem;
  line-height: 1;
  padding: 0 2px;
}

.legacy-import-excel-col {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
  cursor: grab;
  user-select: none;
}

.legacy-import-excel-col:active {
  cursor: grabbing;
}

.legacy-import-excel-col.mapped-away {
  opacity: 0.45;
}

.legacy-import-excel-col.pick-target {
  outline: 2px solid var(--accent, var(--accent));
  outline-offset: 1px;
}

.legacy-import-excel-label {
  font-weight: 600;
  font-size: 0.9rem;
}

.legacy-import-excel-samples {
  font-size: 0.78rem;
  color: #64748b;
  margin-top: 4px;
  word-break: break-word;
}

.legacy-import-preview-wrap h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
}

.legacy-import-preview {
  max-height: 180px;
  overflow: auto;
}

.campaign-import-assign-wrap {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border, #e5e7eb);
}

.campaign-import-assign-wrap h4 {
  margin: 0 0 6px;
}

.campaign-import-assign-row {
  margin: 10px 0;
}

.campaign-folder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.campaign-folder-card {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campaign-folder-card:hover {
  border-color: var(--accent, var(--accent));
  box-shadow: 0 2px 8px rgba(84, 87, 230, 0.08);
}

.campaign-folder-card h4 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.campaign-folder-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.85rem;
}

.campaign-folder-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0;
}

.campaign-folder-kpis {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 12px 0 4px;
}

.campaign-folder-kpi {
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--surface-2, #f9fafb);
  border: 1px solid var(--border, #e5e7eb);
  min-width: 100px;
}

.campaign-folder-kpi-btn {
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.campaign-folder-kpi-btn:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(84, 87, 230, 0.12);
}

.campaign-folder-kpi-btn.campaign-folder-kpi-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(84, 87, 230, 0.18);
}

.campaign-folder-kpi-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.campaign-folder-kpi strong {
  display: block;
  font-size: 1.25rem;
}

.leads-table-wrap .notes-cell {
  max-width: 240px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
  color: var(--text);
}

.campaign-folder-leads-table .notes-cell {
  max-width: 220px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 0.85rem;
}
@media (max-width: 768px){
  .legacy-import-map-grid {
    grid-template-columns: 1fr;
  }
}

.mt-agent-list {
  max-height: 280px;
  overflow: auto;
  margin-top: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}

.mt-agent-list .project-check {
  padding: 0.35rem 0.25rem;
}

#manager-team-section .data-table td {
  vertical-align: top;
}

#manager-team-section .mt-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  max-width: 420px;
}

#manager-team-section .mt-chip {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.78rem;
  background: var(--surface2, #f3f4f6);
  border-radius: 999px;
  color: var(--text);
}

/* Any card hosting a searchable agent combo must not clip its popup menu, which
   is positioned absolutely and extends below the card's own box (.card sets
   overflow:hidden, which otherwise clips the "Revert mistaken assignments" and
   similar agent-picker dropdowns to almost nothing).

   .has-combo is the same thing done from JS (bindAgentCombo), for browsers with no :has()
   support — older phone browsers and in-app webviews, where the list was reported cut off
   after the first name. Both selectors are kept: whichever works, works. */
.card:has(.combo-menu),
.card.has-combo,
.legacy-pool-revert-bar.card {
  overflow: visible;
}

/* Leads panel project filter — dropdown picker + checklist */
.ov-ps-picker-wrap { position: relative; display: inline-block; }
.ov-ps-project-picker {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.4rem);
  left: 0;
  width: min(360px, 80vw);
  padding: 0.75rem;
  box-shadow: var(--shadow);
}
.ov-ps-project-picker .search-wrap { margin-bottom: 0.5rem; }
.ov-ps-project-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  background: var(--surface2);
  margin-top: 0.5rem;
}

/* Leads nav dropdown group */
.nav-group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-caret {
  transition: transform 0.15s ease;
  font-size: 0.75rem;
}
.nav-group-toggle[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-subgroup[hidden] { display: none; }
.nav-subgroup {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 0.75rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--border);
}
.nav-subitem { font-size: 0.83rem; padding-left: 0.6rem; }

.an-total-toggle {
  border: none;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
}
.an-total-toggle:hover { text-decoration: underline; }

/* ============================================================
   Consistency + responsive polish pass (desktop / tablet / mobile)
   Appended last on purpose — wins the cascade over earlier/duplicated
   rules without needing to untangle the rest of this file.
   Simple, decent, not overstyled — same tokens already in :root.
   ============================================================ */

html { background: #f1f5f9; }
body { background: #f1f5f9; }

.main {
  overflow-x: auto;
}

/* Subtle depth + consistent hover on every card-like surface across all panels */
.card,
.kpi,
.data-table,
.table-wrap {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card:hover,
.kpi:hover {
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

/* Sticky table headers so long lists (Recent Leads, Pool Leads, Team) stay readable */
.table-wrap { max-height: 70vh; overflow: auto; }
.table-wrap table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* Zebra striping for readability on dense tables */
.data-table tbody tr:nth-child(even) td,
.table-wrap table tbody tr:nth-child(even) td {
  background: #fafbfc;
}
.data-table tbody tr:hover td,
.table-wrap table tbody tr:hover td {
  background: var(--accent-light);
}

/* Consistent button hierarchy everywhere */
.btn {
  border-radius: 8px;
  font-weight: 600;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 1px 2px rgba(84, 87, 230, 0.25);
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-secondary:hover { filter: brightness(0.97); }

/* Toolbars always wrap gracefully instead of overflowing on narrow screens */
.toolbar,
.form-row {
  flex-wrap: wrap;
  row-gap: 0.6rem;
}

/* ---------- Tablet (≤ 900px): sidebar becomes a drawer, content gets full width ---------- */
@media (max-width: 900px) {
  .main { padding: 1rem 1.1rem 2rem; }
  .table-wrap { max-height: 60vh; }
  h2 { font-size: 1.25rem; }
}

/* ---------- Mobile (≤ 600px): single column everything, larger tap targets ---------- */
@media (max-width: 600px) {
  .main { padding: 0.85rem 0.85rem 2rem; }
  table { font-size: 0.82rem; }
  th, td { padding: 0.5rem 0.6rem; }
  .btn, .btn-sm { padding: 0.55rem 0.9rem; font-size: 0.85rem; }
  .toolbar > * { width: 100%; }
  .toolbar .inline-field,
  .toolbar .search-wrap { width: 100%; }
}

/* ---- Final visual refinement pass (typography rhythm + subtle sidebar/card polish) ---- */
h1, h2, h3, h4 { letter-spacing: -0.01em; }
h2 { font-weight: 700; }
.panel-header h2, .report-header-block h3 { margin-bottom: 0.2rem; }

input[type="password"],
input[type="text"],
input[type="search"],
input[type="date"],
input[type="datetime-local"],
input[type="number"],
select,
textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(84, 87, 230, 0.12);
}

.nav-item.active {
  position: relative;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.5rem;
  top: 0.35rem;
  bottom: 0.35rem;
  width: 3px;
  border-radius: 3px;
  background: var(--accent);
}

.card { border-radius: 12px; }
.section-title { letter-spacing: 0.06em; }

/* ============================================================================
   REDESIGN v2 — consolidated design system (2026-07-19)
   Appended last so it wins the cascade cleanly over legacy rules without
   removing any existing selector. One accent hue (indigo/violet) for all
   decorative chrome; semantic green/amber/red retained for real status only.
   ========================================================================== */

/* ---- Canvas & rhythm -------------------------------------------------- */
html, body { background: linear-gradient(135deg, var(--accent-border) 0%, var(--accent-light) 45%, var(--sidebar-active-accent) 100%); }
.main { background: linear-gradient(135deg, var(--accent-border) 0%, var(--accent-light) 45%, var(--sidebar-active-accent) 100%); background-attachment: fixed; }
/* Desktop padding only — mobile media queries set their own tighter padding. */
@media (min-width: 901px) { .main { padding: 1.75rem 2rem 3rem; } }

/* ---- Sidebar ---------------------------------------------------------- */
/* Scoped to desktop so it never overrides the ≤900px mobile drawer layout
   (single-column grid) defined in the earlier media queries. */
@media (min-width: 901px) { .app { grid-template-columns: 244px 1fr; } }
.sidebar {
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--sidebar-bg-top), var(--sidebar-bg-bottom));
  border-right: none;
  gap: 0.15rem;
}
/* Desktop padding only — mobile drawer keeps its own safe-area padding. */
@media (min-width: 901px) { .sidebar { padding: 1.25rem 0.85rem; } }
.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding: 0.15rem 0.5rem 0.75rem;
  color: var(--sidebar-text-strong);
}
.build-tag {
  font-size: 0.66rem;
  letter-spacing: 0.02em;
  color: var(--sidebar-muted);
  margin: 0 0.5rem 0.85rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid var(--sidebar-border);
}
.sidebar-nav { display: flex; flex-direction: column; flex: 1; gap: 3px; }
.nav-item {
  text-align: left;
  background: none;
  border: none;
  font: inherit;
  cursor: pointer;
  color: var(--sidebar-text);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.6rem 0.8rem;
  border-radius: var(--radius-sm);
  transition: background 0.13s ease, color 0.13s ease;
}
.nav-item:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }
.nav-item.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-text-strong);
  font-weight: 600;
  box-shadow: none;
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -0.85rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sidebar-active-accent);
}
.nav-subgroup { border-left-color: var(--sidebar-border); margin-left: 0.85rem; }
.nav-subitem { font-size: 0.83rem; }
.sidebar-logout {
  border: 1px solid var(--sidebar-border);
  border-radius: var(--radius-sm);
  padding: 0.55rem;
  margin-top: 0.75rem;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--sidebar-text);
}
.sidebar-logout:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text-strong); }

/* ---- Topbar ----------------------------------------------------------- */
.topbar { margin-bottom: 1.5rem; padding-bottom: 1.1rem; }
.topbar h2 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
/* Gradient text on the title was fragile; use solid, confident text */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .topbar h2 { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--text); }
}

/* ---- Cards ------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.card:hover { box-shadow: var(--shadow-md); }

/* Overrides the earlier .kpi-tap-hint definition (later in cascade, same specificity) */
.kpi-tap-hint { font-size: 0.7rem; color: var(--accent); margin-top: 0.15rem; }

/* ---- Section titles --------------------------------------------------- */
.section-title {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent-dim);
  border-left: 3px solid var(--accent);
  padding-left: 0.6rem;
}

/* ---- Tables ----------------------------------------------------------- */
table { font-size: 0.875rem; }
th, td { padding: 0.7rem 1rem; }
th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  font-weight: 600;
  background: var(--surface2);
}
.table-wrap table thead th { position: sticky; top: 0; z-index: 1; }
.data-table tbody tr:nth-child(even) td,
.table-wrap table tbody tr:nth-child(even) td { background: var(--surface3); }
.data-table tbody tr:hover td,
.table-wrap table tbody tr:hover td,
tbody tr:hover td { background: var(--accent-light); }
.code-cell { color: var(--accent-dim); font-weight: 700; }

/* ---- Buttons ---------------------------------------------------------- */
.btn {
  border-radius: var(--radius-sm);
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  transition: background 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease, transform 0.04s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-dim)); color: #fff; box-shadow: 0 1px 2px var(--accent-glow); }
.btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--accent-dim), var(--accent-dark)); filter: none; }
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
}
.btn-secondary:hover:not(:disabled) { background: var(--surface2); filter: none; border-color: var(--border-strong); }
.btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }
.btn-danger { background: var(--danger-bg); color: #991b1b; border: 1px solid var(--danger-border); }
.btn-danger:hover:not(:disabled) { background: var(--danger-border); border-color: var(--danger); }

/* ---- Inputs & focus --------------------------------------------------- */
input[type="password"], input[type="text"], input[type="search"],
input[type="date"], input[type="datetime-local"], input[type="number"],
select, textarea {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
  background: var(--surface);
}
input:focus, select:focus, textarea:focus,
.combo-trigger:focus, .combo-search-wrap input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }

/* ---- Badges ----------------------------------------------------------- */
.badge {
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: var(--surface3);
  color: var(--text-secondary);
}
.badge.ok, .badge-green, .badge-success { background: var(--success-bg); color: #166534; }
.badge.warn { background: var(--warn-bg); color: #b45309; }
.badge.hot { background: #fff1e6; color: var(--hot); }
.badge-grey, .badge-gray { background: var(--surface3); color: var(--muted); }
.agent-badge {
  background: var(--accent-light);
  color: var(--accent-dim);
  border: 1px solid var(--accent-border);
  border-radius: 999px;
}

/* ---- Combo dropdowns -------------------------------------------------- */
.combo-trigger { border-radius: var(--radius-sm); border-color: var(--border-strong); }
.combo-menu { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.combo-option.is-selected { background: var(--accent-light); color: var(--accent-dim); }

/* ---- Tabs / pills (Lead Automation) ------------------------------------ */
.la-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---- Modals ----------------------------------------------------------- */
.modal { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { padding: 1.1rem 1.35rem; }
.modal-body { padding: 1.35rem; gap: 0.9rem; }
.modal-footer { padding: 1.1rem 1.35rem; }

/* ---- Banners (semantic — kept distinct) ------------------------------- */
.banner { border-radius: var(--radius-sm); }
.banner-info { background: var(--accent-light); border: 1px solid var(--accent-border); color: var(--accent-dim); }

/* ---- Misc accent-driven chrome --------------------------------------- */
.leads-bulk-bar { background: var(--accent-light); border-color: var(--accent-border); }
.team-top-row { background: var(--accent-light); }
.bar-fill { background: var(--accent); }
.agent-order-num { background: var(--accent-dim); }
.spinner { border-top-color: var(--accent); }

/* ---- Typography rhythm ------------------------------------------------ */
h1, h2, h3, h4 { letter-spacing: -0.015em; }

/* ============================================================================
   Mobile top bar — always on screen (<=900px)
   The hamburger used to scroll away with the page, leaving no way back to the
   menu without scrolling to the very top. It was made `sticky` first, but
   sticky is only honoured while nothing in the ancestor chain becomes a scroll
   container, so on some phones it still scrolled off. `fixed` cannot be
   defeated that way, so the bar is pinned to the viewport and .main reserves
   the same height underneath it.
   The bar is also folded into ONE row here (hamburger + title on the left,
   Refresh on the right) instead of the stacked layout used lower down, so
   pinning it costs ~54px rather than a third of a phone screen. Title and
   "last updated" truncate with an ellipsis instead of wrapping, which is what
   keeps that height fixed.
   z-index stays below modals (1000), the sidebar backdrop (1040) and the
   drawer itself (1050), so all three still cover it correctly - and the drawer
   keeps its own scrolling, so every menu option remains reachable.
   ========================================================================== */
@media (max-width: 900px) {
  :root {
    --mobile-topbar-h: 3.5rem;
  }

  .topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    margin: 0;
    padding: max(0.4rem, env(safe-area-inset-top)) max(0.95rem, env(safe-area-inset-right)) 0.45rem
      max(0.95rem, env(safe-area-inset-left));
    min-height: var(--mobile-topbar-h);
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.06);
  }

  /* Room for the pinned bar, so the first panel does not start underneath it. */
  .main {
    padding-top: calc(var(--mobile-topbar-h) + env(safe-area-inset-top) + 0.6rem);
  }

  .nav-toggle {
    flex: 0 0 auto;
  }

  .topbar-left {
    align-items: center;
    margin-top: 0;
    min-width: 0;
    flex: 1 1 auto;
    gap: 0.55rem;
  }

  .topbar-titles {
    min-width: 0;
  }

  .topbar h2,
  .topbar-titles h2 {
    font-size: 1.02rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-titles .muted,
  #last-updated {
    font-size: 0.7rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar-actions {
    width: auto;
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin-left: auto;
  }

  .topbar-actions .btn-secondary,
  .topbar-actions .btn {
    flex: 0 0 auto;
    min-width: 0;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
  }
}

@media (max-width: 600px) {
  :root {
    --mobile-topbar-h: 3.35rem;
  }

  .topbar {
    padding-left: max(0.8rem, env(safe-area-inset-left));
    padding-right: max(0.8rem, env(safe-area-inset-right));
  }

  .main {
    padding-top: calc(var(--mobile-topbar-h) + env(safe-area-inset-top) + 0.5rem);
  }
}

/* ============================================================
   Logs panel + OTP login  (added 2026-07-31)
   View-only action log with the IP each action came from, and the
   passwordless login screen. Uses the same :root tokens as everything else.
   ============================================================ */

.login-hint {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
  margin: 0 0 0.85rem;
}
#otp-step-code input#otp-code {
  letter-spacing: 0.4em;
  text-align: center;
  font-size: 1.35rem;
  font-weight: 600;
}
#otp-resend-btn,
#otp-change-admin-btn {
  display: block;
  margin: 0.6rem auto 0;
}
/* Sign-in picker: "Signing in as [ name ▾ ]" then one Continue button. A dropdown keeps the
   card compact however many admins exist, instead of a growing stack of buttons. */
.otp-admin-picker {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.otp-admin-picker label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.otp-admin-picker select {
  width: 100%;
  min-height: 46px;
  font: inherit;
  font-size: 16px;            /* 16px stops iOS zooming the page on focus */
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
}
.otp-admin-picker select:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}
.otp-admin-picker .btn {
  width: 100%;
  min-height: 48px;
  margin-top: 0.35rem;
}

.logs-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin-bottom: 0.85rem;
}
.logs-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 0;
}
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.chip {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  min-height: 34px;
}
.chip:hover { background: var(--surface2); }
.chip.active {
  background: var(--accent-light);
  border-color: var(--accent-border);
  color: var(--accent-dark);
}

.badge-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}
tr.row-failed td { background: var(--danger-bg); }
.logs-detail {
  color: var(--muted);
  font-size: 0.82rem;
  max-width: 28rem;
  word-break: break-word;
}
.logs-pager {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
}
.logs-pager .muted { margin-right: auto; font-size: 0.85rem; }

/* ============================================================
   View as — an agent's portal embedded read-only  (2026-08-03)
   Desktop: the frame fills the panel area, tall enough to use like a real screen.
   Mobile: the picker stacks, and the frame becomes a near-full-height panel — a small
   scrollable frame inside an already-scrolling page is unusable on a phone, so it gets
   the whole viewport minus the topbar instead.
   ============================================================ */

.viewas-picker {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 520px;
  /* .card has no padding of its own, so without this the label sits on the card's top border. */
  padding: 0.9rem 1rem 1rem;
  /* The open dropdown hangs BELOW this card, and .card sets overflow:hidden — which cut the
     agent list off after the first name or two. There is a general override for that
     (.card:has(.combo-menu)) but :has() is not something to depend on in a phone browser, so
     this card says it plainly. Same specificity as .card, declared later, so it wins. */
  overflow: visible;
  /* Deliberately NO position/z-index here. Giving this card a z-index makes it a stacking
     context, which caps the menu's own z-index inside it — the menu then renders UNDERNEATH
     the page below the card. The menu is anchored to .combo (already position:relative), so
     the card needs nothing. */
}
/* The team-member field is the shared .combo (dropdown with the search inside it), so it needs
   no styling of its own — only a comfortable tap target and no iOS zoom on the search box. */
.viewas-picker .combo-trigger {
  min-height: 44px;
  font-size: 16px;
}
.viewas-picker .combo-search-wrap input {
  font-size: 16px;              /* stops iOS zooming when focused */
}
/* Show a useful number of names at once instead of the shared 250px, and let the list scroll. */
.viewas-picker .combo-menu {
  max-height: min(60vh, 420px);
}
.viewas-picker .combo-option {
  min-height: 44px;             /* thumb-sized rows */
}
.viewas-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.viewas-frame-wrap {
  margin-top: 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.viewas-frame-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.85rem;
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
  font-weight: 600;
}
.viewas-frame-note {
  font-weight: 500;
  color: var(--muted);
  font-size: 0.78rem;
}
.viewas-frame {
  display: block;
  width: 100%;
  height: calc(100vh - 240px);
  min-height: 520px;
  border: 0;
  background: #fff;
}

@media (max-width: 900px) {
  .viewas-picker { max-width: none; }
  .viewas-actions .btn { flex: 1 1 auto; min-height: 44px; }

  /* On a phone the list is pinned to the SCREEN instead of hanging off the card. position:fixed
     ignores any ancestor's overflow and any stacking context above it, which is what kept hiding
     the names — first clipped by the card, then painted behind the page. Anchored to the TOP,
     under the fixed topbar, on purpose: the search box inside takes focus straight away, and a
     bottom-anchored sheet would sit behind the on-screen keyboard. */
  .viewas-picker .combo-menu {
    position: fixed;
    top: calc(var(--mobile-topbar-h, 3.5rem) + env(safe-area-inset-top) + 0.6rem);
    left: 0.75rem;
    right: 0.75rem;
    bottom: auto;
    width: auto;
    max-height: 60vh;
    max-height: 60dvh;              /* dvh where supported; vh above is the fallback */
    z-index: 1200;                  /* over the topbar (500) and the nav backdrop (1040) */
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
  }
  /* Give the frame the screen: the phone's own scrolling drives the agent portal inside it. */
  .viewas-frame {
    height: calc(100dvh - var(--mobile-topbar-h, 56px) - 150px);
    min-height: 420px;
  }
}