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

/* How many consultant applications are waiting, on the sidebar item itself.

   They used to sit at the top of Team, where the office already goes every day. In their own group
   they are one click further away and nothing points at them, so the count has to — otherwise an
   application waits until somebody happens to look. Hidden entirely when there are none: a grey
   zero every day is a badge people stop reading. */
.nav-count {
  display: inline-block;
  margin-left: 0.4rem;
  min-width: 1.15rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Hiding it is the global `.hidden { display: none !important }` — no rule needed here. */

/* Who a consultant deals with, on Consultants → The firms. Wide enough for a full name and no
   wider: it is one column in an eight-column table. */
#panel-brokerfirms select.broker-poc {
  max-width: 100%;
  min-width: 150px;
}

.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);
}

/* "Exported data" — the only tab that answers "which data left the building", so it is marked out
   from the other three rather than sitting in the row looking like one more view. Kept as a tint,
   not a warning colour: nothing is wrong when it has entries, it is simply the one worth reading. */
.chip-export {
  border-color: var(--warn-border, var(--border-strong));
  color: var(--warn, var(--muted));
}
.chip-export.active {
  background: var(--warn-bg, var(--accent-light));
  border-color: var(--warn-border, var(--accent-border));
  color: var(--warn, 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;
  }
}

/* Numeric columns in a data table. Added for the Pages statistics, where a column of counts and
   durations is unreadable ragged-left; nothing else in the portal had needed it yet. */
.data-table th.num,
.data-table td.num {
  text-align: right;
  white-space: nowrap;
}

/* ── Pages editor: pictures and documents ────────────────────────────────────
   The first version listed everything as plain filenames with a × beside each, which made a cover, a
   brochure and four photos look identical — there was no way to pick one out. Pictures are now shown
   as pictures, and a document as a row with an icon and its size. */
.pg-thumbs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0 0 0.75rem; }
.pg-thumb {
  position: relative;
  width: 7.5rem;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--surface2, #f8fafc);
}
.pg-thumb img { display: block; width: 100%; height: 5.2rem; object-fit: cover; }
.pg-thumb-name {
  display: block;
  padding: 0.3rem 0.4rem;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pg-thumb-x {
  position: absolute;
  top: 4px;
  right: 4px;
  border: none;
  border-radius: 999px;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-size: 0.85rem;
}
.pg-thumb-x:hover { background: rgba(185, 28, 28, 0.9); }
/* The cover is the one picture that matters most, so it gets more room than the rest. */
.pg-cover .pg-thumb { width: 15rem; }
.pg-cover .pg-thumb img { height: 8.5rem; }

.pg-doc {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 10px;
  background: var(--surface2, #f8fafc);
  margin-bottom: 0.5rem;
}
.pg-doc-icon { font-size: 1.25rem; line-height: 1; }
.pg-doc-file { font-size: 0.85rem; color: var(--muted); flex: 1 1 12rem; min-width: 0; }
.pg-doc input[type="text"] { flex: 0 0 14rem; margin: 0; }
/* "Waiting" has to be visible at a glance, not a sentence repeated under every row. */
.pg-wait {
  background: #fef3c7;
  color: #78350f;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.pg-live {
  background: #dcfce7;
  color: #166534;
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Blocking overlay while something is being saved ─────────────────────────
   Written because a "Saving…" word beside the button was missed entirely: the owner pressed Save
   several times and the same files were uploaded on each press. Nothing here is decorative — the
   overlay exists to make a second press impossible. */
.pg-busy {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, 0.62);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.pg-busy-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  padding: 1.4rem 1.8rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-weight: 600;
  max-width: 22rem;
}
.pg-busy-spin {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 3px solid var(--accent-light, #e0e7ff);
  border-top-color: var(--accent, #2563eb);
  border-radius: 999px;
  animation: pg-spin 0.8s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }
.pg-busy-note { display: block; font-weight: 400; font-size: 0.85rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .pg-busy-spin { animation-duration: 2.4s; } }

/* ── the Dialer screen's call-list filter ─────────────────────────────────────
   One slim row, because it is a control for the list below it and not a section of
   its own. It began as a full card with big fields, which dominated the screen and,
   squeezed narrow with devtools open, stacked into something that read as content
   rather than a filter. */
.dialer-filter {
  align-items: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  padding: 0.6rem 0.8rem;
}

.dialer-filter .inline-field {
  display: flex;
  flex-direction: column;
}

.dialer-filter label {
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* Compact enough that three fields and a button sit on one line on any real screen. */
.dialer-filter input[type="date"],
.dialer-filter select {
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
}

.dialer-filter select {
  max-width: 200px;
}

/* "(PK)" beside the first date — the whole reminder that these are Pakistani days,
   in the one place it is read at the moment it matters. */
.pk-hint {
  opacity: 0.7;
}

/* Cover picture picker (Events). The browser's own file input cannot be styled, so it is hidden and
   a real button drives it — the thumbnail doubles as "is there a picture yet". */
.ev-cover-pick { display: flex; gap: 12px; align-items: flex-start; }
.ev-cover-thumb {
  width: 120px; height: 78px; border-radius: 8px; object-fit: cover;
  border: 1px solid var(--border, #e2e8f0); background: #f8fafc; flex: 0 0 auto;
}
.ev-cover-empty {
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; color: #94a3b8; border-style: dashed;
}
.ev-cover-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-cover-actions label.btn { margin: 0; cursor: pointer; }
/* Kept in the DOM (the label's `for` needs it) but never shown. */
.ev-cover-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ev-cover-hint { margin: 0; font-size: .8rem; flex-basis: 100%; }
.ev-cover-hint:empty { display: none; }

/* Event row: the small cover beside the name. */
.ev-row-event { display: flex; gap: 10px; align-items: center; }
.ev-row-thumb {
  width: 56px; height: 38px; border-radius: 6px; object-fit: cover; flex: 0 0 auto;
  border: 1px solid var(--border, #e2e8f0); background: #f8fafc;
}
.ev-row-thumb.ev-cover-empty { font-size: .62rem; }

/* Project routing. Who is chosen sits at the TOP of the screen, numbered in turn order, so it is never
   a hunt through the dropdown to see who is already in. */
.lr-chosen { background: #f8fafc; }
.lr-picked { list-style: none; margin: 0; padding: 0; }
.lr-picked li {
  display: flex; gap: .5rem; align-items: center; padding: .35rem 0;
  border-bottom: 1px solid var(--border, #e2e8f0);
}
.lr-picked li:last-child { border-bottom: 0; }
.lr-pos {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: #2563eb; color: #fff;
  font-size: .72rem; display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.lr-picked-name { flex: 1 1 auto; min-width: 0; }
.lr-picked-actions { display: flex; gap: .3rem; flex: 0 0 auto; }
/* A tick row inside the agents dropdown. */
.lr-tick { display: flex; gap: .5rem; align-items: flex-start; cursor: pointer; }
.lr-tick input { margin-top: .25rem; }

/* ── Chosen-first tick lists (assets/pickers.js) ────────────────────────────
   Picking two agents out of two hundred and then wanting to remove one meant
   scrolling the whole list hunting for a tick. The chosen ones now sit at the
   top under a heading, and stay visibly marked wherever they are. */

.picker-group-heading {
  padding: .45rem .6rem .3rem;
  font-size: .7rem;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}
/* The first heading is the chosen block — worth a colour, because it is the
   thing the eye is looking for. */
.picker-group-heading:first-child { color: #1d4ed8; }

.project-check.is-picked,
.project-check-item.is-picked {
  background: #eff6ff;
  border-radius: 8px;
}

/* ── Remove-member wizard: what will happen to THIS row ─────────────────────
   The boxes are pre-ticked and ticked means REMOVE — the right default for a
   removal wizard, but the opposite of the gesture everywhere else in the
   portal, where unticking is what removes. An admin unticked to remove, the
   wizard read it as keep, and the wizard looked broken. Each row now states
   its own fate, and restates it as you tick. */

.ar-will-remove { position: relative; padding-left: 4.6rem; }
.ar-will-remove .ar-tag {
  position: absolute; left: .5rem; top: 50%; transform: translateY(-50%);
  min-width: 3.4rem; text-align: center;
  padding: .15rem .35rem; border-radius: 6px;
  font-size: .62rem; font-weight: 700; letter-spacing: .04em;
  background: #e2e8f0; color: #475569;
}
.ar-will-remove.is-removing .ar-tag { background: #fee2e2; color: #b91c1c; }
.ar-will-remove.is-removing { background: #fef2f2; border-radius: 8px; }

.ar-warn {
  margin: 0 0 .6rem; padding: .55rem .7rem;
  background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px;
  color: #92400e; font-size: .85rem;
}

/* ── Permissions screen (assets/permissions.js) ──────────────────────────────
   One line per grantable thing; only the line being worked on opens.

   Every horizontal container here is a GRID with a minmax(0, 1fr) text column,
   never a flex row of fixed-width parts. The first version used flex with a
   nowrap button column, and the row grew wider than its card and pushed the
   whole panel off the right of the screen — .card sets overflow:hidden, but any
   card holding a .combo-menu is switched to overflow:visible so the dropdowns
   are not clipped, so an over-wide row had nothing stopping it. minmax(0, 1fr)
   is what makes the text column shrink instead of the row growing. */
.pm-small { font-size: .85rem; }

.pm-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .55rem .7rem;
  margin-bottom: .4rem;
  background: var(--surface);
  min-width: 0;
  max-width: 100%;
}
.pm-row.is-custom { border-color: var(--success); }
.pm-row.is-open {
  border-color: var(--accent-border);
  background: var(--accent-light);
}

.pm-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem .75rem;
  align-items: center;
}
.pm-head-main { min-width: 0; }
.pm-head-act { justify-self: end; }

.pm-name { font-weight: 600; }
.pm-state-line { min-width: 0; }
/* The one place long text lives: it must wrap, never widen the row. */
.pm-state {
  color: var(--muted);
  font-size: .85rem;
  overflow-wrap: anywhere;
}

.pm-body {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px dashed var(--border-strong);
  display: grid;
  gap: .7rem;
  min-width: 0;
}

.pm-block { min-width: 0; }
.pm-block-title { font-weight: 600; font-size: .85rem; margin-bottom: .3rem; }

.pm-verbs { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.pm-verb { display: inline-flex; align-items: center; gap: .3rem; font-size: .9rem; }
/* A dash rather than an empty box, so a verb that cannot apply here never reads
   as one that is merely switched off. */
.pm-verb-na { color: var(--text-secondary); cursor: default; }

.pm-radio { display: block; font-size: .9rem; padding: .12rem 0; }

.pm-cond {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: .3rem .7rem;
  align-items: center;
  margin-bottom: .4rem;
}
.pm-cond-label { font-size: .85rem; color: var(--muted); }
.pm-cond-picker { min-width: 0; max-width: 420px; }

.pm-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .75rem;
  align-items: center;
}

@media (max-width: 720px) {
  .pm-head { grid-template-columns: minmax(0, 1fr); }
  .pm-head-act { justify-self: start; }
  .pm-cond { grid-template-columns: minmax(0, 1fr); }
}

/* "What this adds up to" — the resolver's own answer, shown before anything obeys it. */
.pm-sum {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: .25rem .75rem;
  padding: .45rem 0;
  border-top: 1px solid var(--border);
  font-size: .9rem;
}
.pm-sum:first-of-type { border-top: 0; }
.pm-sum-name { font-weight: 600; }
.pm-sum-body { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 720px) {
  .pm-sum { grid-template-columns: minmax(0, 1fr); }
}
/* Not wired up yet — visible so the list stays complete, but with no control to set it. */
.pm-row.is-waiting { background: var(--surface2); border-style: dashed; }

/* ——— Lead transfer: "tick just this many" ———
   One compact row: label, number box, two buttons, then the hint on its own line beneath. Written as
   its own flex row rather than reusing .form-row, which is a two-column grid — inside it the button
   stretched to half the panel and the second button wrapped onto a line of its own. */
.lt-take {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 10px;
}
.lt-take label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.lt-take input[type="number"] {
  width: 96px;
  margin: 0;
  padding: 0.35rem 0.5rem;
}
.lt-take .btn { flex: 0 0 auto; }
.lt-take-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ——— Lead transfer: "what goes with them" ———
   A quiet panel under the lead list. Most of it is a statement of fact, not a set of choices — a
   transfer moves the same lead, so its number, notes and history are inseparable from it. Only the
   status is a decision, so only the status looks like one. */
.lt-travels {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2, #f8fafc);
}
.lt-travels-h {
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
}
.lt-travels-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2px 16px;
}
.lt-travels-list li {
  font-size: 0.83rem;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.lt-travels-yes {
  color: #16a34a;
  font-weight: 700;
  flex: 0 0 auto;
}
.lt-travels-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border-strong, var(--border));
}
.lt-travels-choice label {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.lt-travels-choice select { margin: 0; min-width: 230px; padding: 0.35rem 0.5rem; }
.lt-travels-choice input[type="text"] { margin: 0; flex: 1 1 240px; padding: 0.35rem 0.5rem; }
.lt-travels-hint {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ——— Lead transfer: which of the three jobs ———
   Three cards, one line of plain English each. Deliberately not a dropdown: the whole point is that
   somebody who has never seen this screen can read all three at once and pick the right one. */
.lt-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px;
}
.lt-mode {
  display: block;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.lt-mode:hover { border-color: var(--border-strong, var(--border)); }
.lt-mode.is-on {
  border-color: var(--accent);
  background: var(--accent-light, #eff6ff);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.lt-mode-t {
  display: block;
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 2px;
}
.lt-mode-b {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}
.lt-mode.is-on .lt-mode-b { color: var(--text); }

/* ——— Mobile: single column forms ———
   THIS BLOCK MUST STAY AT THE END OF THE FILE.

   There is already a `.form-row { grid-template-columns: 1fr }` inside the @media (max-width:768px)
   block at the top of this stylesheet — but the base `.form-row { grid-template-columns: 1fr 1fr }`
   is declared ~1000 lines LATER. Same specificity, so the later one wins and the media query has
   never done anything: every two-column form in the admin portal has been two columns on a phone.

   On Lead transfer that pushed the right-hand field off the card, because `.lt-row > .field` also
   carries `min-width: 220px` — two 220px columns plus a gap will not fit a 360px screen, and a grid
   item with a min-width refuses to shrink.

   Fixed here rather than by editing the two rules in place, so the intended mobile behaviour cannot
   be silently overridden again by anything declared above. */
@media (max-width: 720px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  /* Grid and flex items only shrink below their content when told they may. */
  .form-row .field,
  .lt-row > .field {
    min-width: 0;
    max-width: 100%;
  }

  /* A dropdown menu wider than the screen drags the whole page sideways. */
  .combo,
  .combo-menu {
    max-width: 100%;
    min-width: 0;
  }

  /* "Or tick just this many" reads better stacked than squeezed. */
  .lt-take input[type="number"] { width: 100%; max-width: 120px; }
  .lt-take-hint { margin-top: 2px; }

  /* The three job cards are already auto-fit; make sure they go single-file cleanly. */
  .lt-modes { grid-template-columns: 1fr; }
}

/* Sortable column headings on the Dialer's linked-phones table.

   Ad Analytics styles its own `th.is-sorted` inside the styles that file injects for itself, so
   .data-table never had a rule for it — a tapped heading would have looked identical to an
   untapped one apart from the arrow. Appended at the end of the stylesheet on purpose: a later
   rule of equal specificity wins. */
.data-table th.is-sorted {
  color: var(--accent-dark);
}
.data-table th[data-dl-sort]:hover {
  background: var(--accent-light);
}

/* ══ CONSULTANTS — PROJECTS & COMMISSION ═══════════════════════════════════════════════════════
   A row per project, edited in place: whether consultants may see it, what it pays, the page they
   promote it with, and a line the office wants them to read. Saved one row at a time, so one
   mistyped figure cannot fail the other forty-nine. */

/* A percentage, and it reads as one. The sign sits outside the box so the number is what gets
   typed and what gets read back — a "%" inside the value is a string the server then has to
   un-type, which is how "1.5%" ends up stored as 0. */
.pct-field {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pct-field .pct {
  width: 72px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.pct-field > span {
  color: var(--muted);
  font-size: 0.85rem;
}

/* "Show" — the whole label is the hit area, not just the 13px box inside it. */
.switch-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  cursor: pointer;
  font-size: 0.9rem;
}
.switch-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  cursor: pointer;
}

/* The project's own name, above its code and city. */
#panel-brokerprojects .strong {
  font-weight: 600;
}
#panel-brokerprojects .muted {
  margin: 2px 0 0;
}
#panel-brokerprojects td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
#panel-brokerprojects td input[type="text"],
#panel-brokerprojects td select {
  max-width: 100%;
}
/* The note is the widest thing on the row and the least urgent — it gets whatever is left. */
#panel-brokerprojects td input[data-bp-note] {
  min-width: 180px;
}

/* ── Who looks after a project's leads ──────────────────────────────────────────────────────────
   Set on Consultants → Projects & commission, written into the same rota the Project routing
   screen uses (0162). */
.rota-names { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.rota-names .chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface2);
  border: 1px solid var(--border);
  font-size: 0.78rem;
  white-space: nowrap;
}
/* Advertised with nobody on the rota — a referral lead for it would arrive assigned to nobody. */
.rota-none { color: var(--danger, #b3161f); font-weight: 600; font-size: 0.82rem; }

.rota-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.35rem 0.15rem 0.2rem;
}
.rota-head + .rota-head { margin-top: 0.4rem; }

.rota-pick {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.4rem 0.45rem;
  border-radius: var(--radius);
  cursor: pointer;
}
.rota-pick:hover { background: var(--surface2); }
.rota-pick.on { background: var(--accent-light); }
.rota-pick input { width: 16px; height: 16px; margin: 0; flex: 0 0 auto; cursor: pointer; }
.rota-pick > span { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.rota-pick strong { font-size: 0.88rem; font-weight: 600; }
.rota-pick .muted { font-size: 0.75rem; }
/* Their place in the rota — 1 gets the first lead, 2 the next, and so on. */
.rota-turn {
  flex: 0 0 auto;
  min-width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
#bp-rota-find { width: 100%; margin-bottom: 0.6rem; }

/* ── Material a consultant posts ────────────────────────────────────────────────────────────────
   Artwork for Facebook and Instagram, uploaded on Consultants -> Projects & commission. Not the
   project page: that is the project explained to somebody already talking to us. */
.promo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
  margin: 0 0 1rem;
}
.promo-item {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface2);
  display: flex;
  flex-direction: column;
}
/* Squared off, because that is the shape most of them are posted in. */
.promo-item img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  background: #fff;
}
.promo-item figcaption {
  padding: 0.4rem 0.5rem 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  word-break: break-word;
}
.promo-item .btn { margin: 0.3rem 0.5rem 0.5rem; }

.promo-add {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.7rem;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.promo-add label[for] { font-size: 0.8rem; font-weight: 600; }
.promo-add input[type="text"] { flex: 1 1 180px; min-width: 0; }
.promo-add .field-hint { flex: 1 0 100%; margin: 0; }
#bp-promo-caption { width: 100%; }

/* How many pictures a project has for consultants to post. The count is the point: "Material" on
   its own cannot tell you whether anybody has put any in. */
.mat-count {
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
}

/* The Meta CAPI master switch, at the top of Projects. Quiet when off, because off is the normal
   and safe state — it is a strip, not an alarm. */
.capi-strip {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.2rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.9rem;
  margin-bottom: 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  font-size: 0.85rem;
}
.capi-strip.on {
  border-color: var(--accent);
  background: var(--accent-light);
}
.capi-strip code {
  font-size: 0.8rem;
  padding: 1px 4px;
  border-radius: 4px;
  background: rgba(15, 23, 42, 0.06);
}

/* ── One consultant's application, read inside this portal ──────────────────────────────────────
   It used to open the consultant portal in another tab, which only worked because both sit on the
   same host and the admin's session cookie travelled with it. */
.broker-review {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--surface2);
}
.broker-review-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.broker-review-facts .fact {
  padding: 0.55rem 0.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.broker-review-facts .fact span {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.broker-review-facts .fact strong {
  font-size: 0.88rem;
  font-weight: 600;
  word-break: break-word;
}

/* The papers. An approval that cannot show them is not an approval. */
.broker-docs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem;
}
.broker-doc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.broker-doc strong { font-size: 0.86rem; }
.broker-doc .muted { font-size: 0.75rem; word-break: break-all; }

/* ── Team today ──────────────────────────────────────────────────────────────────────────────
   Read only. Every figure comes from what the CRM recorded while the work was happening, so
   nothing here is an input and nothing here can be flattered. */
.td-calls { font-size: 15px; }
/* Behind pace, and work that quietly did not happen. The same red, deliberately: to a manager
   they are the same kind of fact. */
.td-behind, .td-bad {
  font-size: 12px; font-weight: 600; color: var(--danger, #dc2626); margin-top: 1px;
}

/* ── Targets & hours ─────────────────────────────────────────────────────────────────────────
   The office rule on top, exceptions underneath. An empty box shows the office's own figure in
   grey, so nobody has to remember what the rule was to know they are following it. */
.tg-office {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 12px; margin-bottom: 6px;
  background: var(--soft, #f8fafc); border: 1px solid var(--line, #e2e8f0); border-radius: 10px;
}
.tg-office label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; font-weight: 600; color: var(--muted, #64748b);
}
.tg-office input { width: 110px; }
.tg-office input, .tg-in {
  padding: 6px 9px; border: 1px solid var(--line, #e2e8f0); border-radius: 7px;
  font: inherit; font-size: 13.5px; color: var(--ink, #0f172a);
}
.tg-in { width: 74px; }
.tg-time { width: 74px; }
/* A placeholder here is not a hint, it is the figure actually in force. Lighter than typed text
   so the two are never confused, but legible enough to be read as a value. */
.tg-office input::placeholder, .tg-in::placeholder { color: #94a3b8; opacity: 1; }

.tg-table { width: 100%; border-collapse: collapse; margin-top: 4px; }
.tg-table th {
  text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted, #64748b);
  padding: 6px 8px; border-bottom: 1px solid var(--line, #e2e8f0);
}
.tg-table td { padding: 7px 8px; border-bottom: 1px solid var(--line-soft, #f1f5f9); font-size: 13.5px; }
.tg-table td .muted { font-size: 12px; }

@media (max-width: 640px) {
  .tg-office { gap: 8px; }
  .tg-office input { width: 88px; }
  .tg-table th:nth-child(5), .tg-table td:nth-child(5) { display: none; }
}

/* Period presets on Team today. Buttons rather than a dropdown: there are six, they are the six
   anybody asks for, and a dropdown would hide five of them behind a click. */

/* A number you can open. Looks like a link, behaves like a button, and is not a .btn — .btn-ghost
   is width:100% (it was written for the sidebar's sign-out) and using it inline stretches a
   whole row. */
.linklike {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--accent); text-decoration: underline; text-underline-offset: 2px;
}
.linklike:hover { opacity: .8; }

/* ── Period presets: a segmented control, not six stretched buttons ──────────────────────────── */
.td-presets { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.td-preset {
  width: auto; flex: 0 0 auto; margin: 0;
  padding: 0.42rem 0.75rem; font: inherit; font-size: 0.82rem; font-weight: 600;
  background: var(--surface); color: var(--muted);
  border: 0; border-right: 1px solid var(--border); cursor: pointer; white-space: nowrap;
}
.td-preset:last-child { border-right: 0; }
.td-preset:hover { background: var(--surface2); color: var(--text); }
.td-preset.on { background: var(--accent); color: #fff; }
.td-period { margin: -4px 0 10px; font-size: 12.5px; }

/* ── One person's report ─────────────────────────────────────────────────────────────────────
   Figures laid out to be read and talked about, not scanned. This is what gets forwarded or read
   out in a morning meeting, so each number is given room and a plain label under it. */
.td-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 10px; margin: 6px 0 4px;
}
.td-stat {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface);
}
.td-stat-n { font-size: 22px; font-weight: 700; line-height: 1.15; color: var(--text); }
.td-stat-n.bad { color: var(--danger, #dc2626); }
.td-stat-l { font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.td-stat .muted { font-size: 11.5px; }
.td-unit { font-size: 13px; font-weight: 600; color: var(--muted); margin-left: 2px; }

/* A sortable column heading. A button, not a link: it does something on this page rather than
   going anywhere, and a screen reader should be told so. */
.th-sort {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: inherit; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.th-sort:hover { color: var(--text); }
.th-sort.on { color: var(--accent); }
.th-arrow { font-size: 9px; opacity: .55; }
.th-sort.on .th-arrow { opacity: 1; }

/* ═══ Inventory ══════════════════════════════════════════════════════════════════════════════
   A builder opens this to ask one question — what have I got left — so the screen answers it
   first, in a size he can read from across a desk, and arranges everything else underneath. */

.inv-hero {
  display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between;
  padding: 22px 24px; margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent) 0%, #4f46e5 100%);
  border-radius: var(--radius); color: #fff;
  box-shadow: var(--shadow);
}
.inv-hero-main { flex: 1 1 320px; min-width: 0; }
.inv-hero-n { font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.inv-hero-l { font-size: 13px; opacity: .88; margin-top: 4px; font-weight: 500; }
.inv-hero-side { display: flex; gap: 26px; }
.inv-kpi { text-align: right; }
.inv-kpi-n { display: block; font-size: 24px; font-weight: 700; line-height: 1.1; }
.inv-kpi-l { display: block; font-size: 11.5px; opacity: .85; text-transform: uppercase; letter-spacing: .05em; }

/* Sold / held / left as one bar. "Nearly gone" and "barely started" are the two things worth
   seeing instantly, and neither is obvious from three numbers side by side. */
.inv-bar {
  display: flex; height: 9px; border-radius: 999px; overflow: hidden;
  background: rgba(255, 255, 255, 0.28); margin-top: 14px;
}
.inv-bar .seg { display: block; height: 100%; }
.inv-bar .seg.sold { background: #fff; }
.inv-bar .seg.held { background: rgba(255, 255, 255, 0.62); }
.inv-bar .seg.left { background: transparent; }
.inv-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: 12px; opacity: .93; }
.inv-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; }
.inv-legend i.sold { background: #fff; }
.inv-legend i.held { background: rgba(255, 255, 255, 0.62); }
.inv-legend i.left { background: rgba(255, 255, 255, 0.28); }

/* Inside a project card the same bar sits on a white background, so it needs its own colours. */
.inv-card .inv-bar { background: var(--surface2, #eef2f7); margin-top: 10px; height: 8px; }
.inv-card .inv-bar .seg.sold { background: var(--accent); }
.inv-card .inv-bar .seg.held { background: #a5b4fc; }
.inv-card .inv-legend { color: var(--muted); opacity: 1; font-size: 11.5px; }
.inv-card .inv-legend i.sold { background: var(--accent); }
.inv-card .inv-legend i.held { background: #a5b4fc; }
.inv-card .inv-legend i.left { background: var(--surface2, #eef2f7); }

/* Cards in a grid, not a stack: a builder compares projects, and a column of full-width rows
   makes him scroll to do it. */
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.inv-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transition: box-shadow .15s ease;
}
.inv-card:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
/* An open card takes the full width — the unit table needs it. */
.inv-card.open { grid-column: 1 / -1; }

.inv-head {
  display: block; width: 100%; text-align: left; background: none; border: 0;
  padding: 16px 18px; cursor: pointer; font: inherit; color: inherit;
}
.inv-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inv-name { font-weight: 700; font-size: 15px; color: var(--text); }
.inv-caret { color: var(--muted); font-size: 11px; }
.inv-big { display: block; margin-top: 12px; font-size: 30px; font-weight: 800; line-height: 1; color: var(--text); }
.inv-big small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 3px; }
.inv-none { display: block; margin-top: 12px; font-size: 13px; color: var(--muted); }
.inv-warn { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; color: var(--danger, #dc2626); }
.inv-body { padding: 0 18px 16px; border-top: 1px solid var(--border); }

/* The one editable number. Narrow on purpose: it takes a count, not a price. */
.inv-total {
  width: 72px; padding: 5px 8px; text-align: right;
  border: 1px solid var(--border); border-radius: 7px; font: inherit; font-size: 13.5px;
}
.inv-total:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.inv-left { font-weight: 700; }
.inv-left.none { color: var(--danger, #dc2626); }

@media (max-width: 640px) {
  .inv-hero { padding: 18px; gap: 16px; }
  .inv-hero-n { font-size: 38px; }
  .inv-hero-side { gap: 18px; }
  .inv-grid { grid-template-columns: 1fr; }
}

.tg-search { max-width: 280px; margin: 4px 0 10px; }
.tg-search input { width: 100%; }

/* ── Inventory: stock or the records behind it ───────────────────────────────────────────────
   Two levels of one subject, so they are two tabs rather than two screens. The tab sits above
   everything because it decides what the rest of the screen means. */
.inv-tabs { display: flex; gap: 2px; margin-bottom: 1rem; border-bottom: 2px solid var(--border); }
.inv-tab {
  background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
  padding: 0.6rem 1rem; font: inherit; font-size: 0.92rem; font-weight: 600;
  color: var(--muted); cursor: pointer; width: auto;
}
.inv-tab:hover { color: var(--text); }
.inv-tab.on { color: var(--accent); border-bottom-color: var(--accent); }

.inv-note { margin: 14px 0 6px; font-size: 12.5px; }
.inv-loose table { margin-top: 0; }

/* ── A unit type's remaining fields ──────────────────────────────────────────────────────────
   Nine columns is the most a table can carry, so the rest sit in a row of their own that opens
   underneath. None of them is required to save a unit type — they are there so a type CAN be
   recorded completely at the moment it is created, rather than half now and half never. */
.btn-unit-more {
  background: none; border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 8px; font: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.btn-unit-more:hover { color: var(--text); background: var(--surface2); }
.unit-more > td { background: var(--surface2, #f8fafc); padding: 12px 14px !important; }
.unit-more-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 14px;
}
.unit-more-grid label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
}
.unit-more-grid input, .unit-more-grid select {
  padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  font: inherit; font-size: 13px; color: var(--text); background: #fff;
}
.unit-more-wide { grid-column: 1 / -1; }

/* The reconciliation line. Quiet, but always there when the two tabs differ — a gap somebody finds
   for themselves is a gap that discredits both halves of the screen. */
.inv-gap {
  margin-top: 14px; padding-top: 12px; font-size: 12.5px; line-height: 1.5;
  border-top: 1px solid rgba(255, 255, 255, 0.25); opacity: .92;
}

/* A tag on a project card. "Retired" and "no project set" are facts somebody needs at a glance —
   both projects still belong on the screen because real money is recorded against them. */
.inv-tag {
  display: inline-block; margin-left: 8px; padding: 2px 7px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--surface2, #eef2f7); color: var(--muted);
  vertical-align: middle;
}
.inv-tag.warn { background: #fee2e2; color: #b91c1c; }

/* ── Inventory: where the sales are ──────────────────────────────────────────────────────────
   One pie, six hues and a grey "Other". The hues are assigned in fixed order and never cycled;
   grey is not a seventh subject, it is the absence of one. Three of the six sit below 3:1 against
   the surface, so every slice is labelled and the same figures appear as a table underneath —
   identity never rests on colour alone. */
.inv-chart { padding: 18px 20px; margin-bottom: 1rem; }
.pie-wrap { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; margin-top: 14px; }
.pie { width: 220px; height: 220px; flex: 0 0 auto; }
/* Values wear text ink, never the series colour — a coloured swatch beside them carries the
   identity, which is what keeps them legible for everyone. */
.pie-lab {
  fill: #fff; font-size: 11px; font-weight: 700;
  text-anchor: middle; dominant-baseline: middle;
  paint-order: stroke; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2.5px; stroke-linejoin: round;
}
.pie-legend { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.pie-key { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text); }
.pie-key i { width: 11px; height: 11px; border-radius: 3px; flex: 0 0 auto; }
.pie-key-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.pie-key b { font-size: 14px; }

@media (max-width: 560px) {
  .pie-wrap { gap: 16px; justify-content: center; }
  .pie { width: 180px; height: 180px; }
}

/* The names behind the grey slice. Indented under it so it reads as its contents, not as more
   legend rows. */
.pie-also {
  margin: -4px 0 4px 20px; font-size: 11.5px; line-height: 1.5;
  color: var(--muted); overflow-wrap: anywhere;
}
/* Paperwork with no project is a fault, so it says what to do rather than only what it is. */
.pie-fix { display: block; font-size: 11px; font-weight: 600; color: var(--danger, #d03b3b); }
.pie-key.warn .pie-key-n { color: var(--text); font-weight: 600; white-space: normal; }

/* A stat tile you can open. It looks like the plain ones until you get near it — the invitation
   is the hover, not a permanent decoration on every figure. */
button.td-stat {
  width: 100%; text-align: left; font: inherit; cursor: pointer;
  position: relative; transition: border-color .12s ease, box-shadow .12s ease;
}
button.td-stat:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(15,23,42,.07); }
.td-stat-go {
  display: block; margin-top: 6px; font-size: 11px; font-weight: 600;
  color: var(--accent); opacity: 0; transition: opacity .12s ease;
}
button.td-stat:hover .td-stat-go { opacity: 1; }