/* ─────────────────────────────────────────────────────────────────────────────
   leads.css — Module 4: status tracking and the saved-leads page.

   Kept separate from style.css rather than appended to it. One extra request
   against a much lower chance of clobbering something while editing a large
   stylesheet blind — and it is trivial to merge later if you want the request
   back.

   Uses the custom properties already declared in style.css. No new colours
   are invented here; --color-success-* and --color-error-* are the ones the
   alerts already use, so a "Won" badge and a success alert agree.
   ──────────────────────────────────────────────────────────────────────── */

/* ─── Inline row controls ─────────────────────────────────────────────── */

.lead-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 190px;
}

.lead-status {
  font: inherit;
  font-size: 0.85rem;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  width: 100%;
}

.lead-status:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

/* Colour follows meaning: untouched is quiet, won is the only celebratory
   one. Colour is never the ONLY signal — the option text says the same
   thing, which matters for the ~8% of men with colour vision deficiency. */
.lead-status--not_called { color: var(--color-text-muted); }
.lead-status--called     { border-color: var(--color-border); }
.lead-status--callback   { border-color: #fbbf24; }
.lead-status--won {
  border-color: var(--color-success-border);
  background:   var(--color-success-bg);
  color:        var(--color-success-text);
  font-weight:  500;
}

.lead-notes {
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.4;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
  min-height: 32px;
  resize: vertical;
}

.lead-notes:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 1px;
}

/* Reserves its own line height so the row does not jump when the text
   appears and disappears. Layout shift on every save is worse than the
   handful of pixels this costs. */
.lead-save-state {
  font-size: 0.72rem;
  min-height: 1em;
  color: var(--color-text-subtle);
}

.lead-save-state.is-saving { color: var(--color-text-muted); }
.lead-save-state.is-saved  { color: var(--color-success-text); }
.lead-save-state.is-error  { color: var(--color-error-text); font-weight: 500; }

.lead-controls-cell { vertical-align: top; }

/* ─── Saved-leads page ────────────────────────────────────────────────── */

.leads-wrap  { padding: 32px 20px 64px; }
.leads-inner { max-width: 1160px; margin: 0 auto; }

.leads-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.leads__heading { margin: 0 0 4px; font-size: 1.5rem; }
.leads__sub     { margin: 0; color: var(--color-text-muted); font-size: 0.9rem; }

.leads-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.leads-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.leads-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  text-decoration: none;
}

.leads-tab:hover { color: var(--color-text); }

.leads-tab.is-active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.leads-tab__count {
  font-size: 0.75rem;
  opacity: 0.75;
  font-variant-numeric: tabular-nums;
}

.leads-sort {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.leads-sort select {
  font: inherit;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.leads-empty {
  text-align: center;
  padding: 56px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.leads-empty p { margin: 0 0 10px; }

.leads-table td { vertical-align: top; }

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 20px;
}

.pagination__info {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

/* ─── Narrow screens ──────────────────────────────────────────────────── */

/* A five-column table does not fit a phone. The table scrolls horizontally
   rather than reflowing, because a lead list is genuinely tabular and
   stacking it into cards makes scanning worse, not better. */
@media (max-width: 720px) {
  .leads-toolbar { flex-direction: column; align-items: stretch; }
  .leads-sort    { justify-content: space-between; }
  .lead-controls { min-width: 160px; }
}