/* Phase AX: lead queue search and premium list polish */
.qf-lead-searchbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 0.8fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-md);
}

.qf-lead-searchbar strong {
  display: block;
  color: var(--ink, #0f172a);
  font-size: 15px;
  letter-spacing: -0.02em;
}

.qf-lead-searchbar div span,
.qf-lead-searchbar label span {
  display: block;
  color: var(--muted, #536174);
  font-size: 12px;
}

.qf-lead-searchbar label {
  display: grid;
  gap: 5px;
}

.qf-lead-searchbar input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-2);
  color: var(--ink);
  padding: 10px 13px;
  font-size: 13.5px;
  outline: none;
}

.qf-lead-searchbar input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.qf-lead-search-count {
  justify-self: end;
  border: 1px solid rgba(51, 86, 238, 0.28);
  border-radius: var(--radius-btn);
  background: var(--accent-soft);
  color: var(--accent);
  padding: 8px 11px;
  font-size: 12px;
  white-space: nowrap;
}

.qf-lead-search-hidden {
  display: none !important;
}

.qf-lead-search-empty {
  margin: 0 0 12px;
  border: 1px dashed var(--border-strong);
  border-radius: 16px;
  padding: 12px 14px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.025);
}

html[data-theme="light"] .qf-leads-focus {
  border-color: rgba(184, 207, 245, 0.72);
  background: #ffffff;
  box-shadow: var(--qf-shadow-md);
}

html[data-theme="light"] .qf-leads-focus-card,
html[data-theme="light"] .qf-leads-filter {
  border-color: rgba(184, 207, 245, 0.74);
  background: rgba(255, 255, 255, 0.85);
}

html[data-theme="light"] .qf-leads-filter.is-active,
html[data-theme="light"] .qf-leads-filter:hover {
  border-color: rgba(59, 34, 244, 0.28);
  background: rgba(59, 34, 244, 0.08);
  color: var(--accent, #3b22f4);
}

html[data-theme="light"] tr.qf-lead-hot-row {
  outline-color: rgba(245, 158, 11, 0.30);
  background: rgba(245, 158, 11, 0.055);
}

@media (max-width: 900px) {
  .qf-lead-searchbar {
    grid-template-columns: 1fr;
  }
  .qf-lead-search-count {
    justify-self: start;
  }
}

/* ── Leads list: mobile stacked-card reflow (≤480px) ──────────────────────
   The shared .table rule (dashboard-polish.css ≤900px) turns the leads grid
   into a sideways-scrolling block, which pushes the decision-critical Total
   and Status columns off-screen at 390px. Below 480px each lead reflows into a
   stacked card so ref + customer + lane + Total + Status all read WITHOUT any
   horizontal scroll. Each <td> labels itself via its data-label attribute. */
@media (max-width: 480px) {
  .qf-leads-table {
    display: block;
    overflow-x: visible;
    border: 0;
    background: transparent;
  }
  .qf-leads-table thead { display: none; }
  .qf-leads-table tbody { display: block; }
  .qf-leads-table tbody tr {
    display: block;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    padding: 4px 16px 8px;
    margin-bottom: 12px;
  }
  .qf-leads-table tbody tr:hover { background: var(--surface); }
  .qf-leads-table tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    text-align: left !important;
    border-bottom: 1px solid var(--border);
  }
  .qf-leads-table tbody tr td:last-child { border-bottom: 0; }
  .qf-leads-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    color: var(--muted);
    font: 700 11px var(--font-mono);
    letter-spacing: .05em;
    text-transform: uppercase;
  }
  /* Customer cell: name over email in a right-aligned column, so the pair
     stays together instead of the label/name/email spreading three ways. */
  .qf-leads-table tbody td[data-label="Customer"] { text-align: right; }
  .qf-leads-table tbody td[data-label="Customer"] br { display: block; }
  .qf-leads-table tbody td .muted-small { display: inline-block; }

  /* Zones reuse this reflow but their cells hold INPUTS with fixed inline
     widths (e.g. 300px) that would overflow a 375px card. Let each input take
     the remaining width beside its label. !important overrides the per-input
     inline width set in zoneRow(). */
  .qf-zones-table tbody td .input {
    width: auto !important;
    min-width: 0;
    flex: 1 1 auto;
    text-align: right;
  }
  .qf-zones-table tbody td { gap: 16px; }
  /* Delete-button cell (last, no data-label): let the button span the row. */
  .qf-zones-table tbody td:last-child { justify-content: stretch; }
  .qf-zones-table tbody td:last-child .btn { width: 100%; }
}

/* ── Leads header (title + Export CSV) ──────────────────────────────────────
   The Export CSV button sits opposite the page title. On a narrow phone it
   wraps under the title instead of pushing the H1 off-screen. */
.qf-leads-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.qf-leads-export { flex: 0 0 auto; }

/* ── Callbacks + Audit tables: reuse the leads ≤480px card reflow ────────────
   Both tables carry `qf-leads-table`, so the block above already stacks their
   rows into labelled cards on a phone. These rules only tune the two cells the
   leads table doesn't have — the callbacks status <select> and the inline
   notes-editor row. Desktop is untouched (all scoped to ≤480px). */
@media (max-width: 480px) {
  /* Status <select> fills the space beside its STATUS label rather than letting
     its default 100% width overflow the card. */
  .qf-callbacks-table tbody td .select {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    text-align: left;
  }
  /* Notes editor is a full-width expander, not a labelled key/value cell: drop
     the card chrome + the empty ::before so the textarea spans the card. */
  .qf-callbacks-table tbody tr.callback-notes-editor {
    border: 0;
    background: transparent;
    padding: 0;
  }
  .qf-callbacks-table tbody tr.callback-notes-editor td {
    display: block;
    border-bottom: 0;
  }
  .qf-callbacks-table tbody tr.callback-notes-editor td::before { display: none; }
}

/* ── Leads: server-backed search + status filter + pagination ────────────────
   renderLeads (app.js) now owns the leads queue controls and drives them
   against GET /api/tenant/leads (page/pageSize/search/status). These rules
   extend the .qf-lead-searchbar shell above with a status <select> that
   matches the search input, a 3-across control layout (search · status ·
   count) that collapses to a single column on a phone, and a centered
   Prev/Next pager. Tokens + 8px ramp only. */
.qf-lead-searchbar.qf-leads-controls {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
  grid-template-areas:
    "head   head   head"
    "search status count";
  row-gap: 12px;
}
.qf-lead-searchbar.qf-leads-controls > div { grid-area: head; }
.qf-lead-searchbar.qf-leads-controls > label:nth-of-type(1) { grid-area: search; }
.qf-lead-searchbar.qf-leads-controls > label:nth-of-type(2) { grid-area: status; }
.qf-lead-searchbar.qf-leads-controls > .qf-lead-search-count { grid-area: count; }

.qf-lead-searchbar select {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-btn);
  background: var(--surface-2);
  color: var(--ink);
  padding: 8px 12px;
  font-size: 13.5px;
  outline: none;
}
.qf-lead-searchbar select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.qf-leads-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 16px 0 0;
}
.qf-leads-pager .btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
.qf-leads-pager-info {
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .qf-lead-searchbar.qf-leads-controls {
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "search"
      "status"
      "count";
  }
}

/* ── Stacked value cells (name over email/company/phone) ─────────────────────
   The ≤480px card reflow makes each <td> a flex row (data-label ::before on the
   left, value on the right). A raw `name<br><span>email</span>` value would turn
   the <br> and the <span> into SEPARATE flex items, dropping the name and email
   onto the same line. Wrapping the pair in .qf-stack-cell makes it ONE flex item
   whose internal <br> stacks name ABOVE email as intended. Desktop is a plain
   inline span (block content flows exactly as before). Tokens + 8px ramp only. */
.qf-stack-cell { display: inline; }
@media (max-width: 480px) {
  .qf-leads-table tbody td .qf-stack-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-0-5);
  }
  .qf-leads-table tbody td .qf-stack-cell br { display: none; }
  .qf-leads-table tbody td .qf-stack-cell .muted-small { display: block; }
}

/* ── Callback status cell: tinted badge above the change <select> ────────────
   Mirrors how the leads table badges a status, then keeps the <select> for
   changing it. On a phone the pair is the single value flex-item of the STATUS
   card row, right-aligned with the select spanning the card. */
.qf-cb-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-0-5);
}
@media (max-width: 480px) {
  .qf-callbacks-table tbody td .qf-cb-status {
    flex: 1 1 auto;
    align-items: flex-end;
  }
  .qf-callbacks-table tbody td .qf-cb-status .select {
    flex: 0 0 auto;
    width: 100%;
  }
}

/* ── badge-progress: WCAG-AA amber "In progress" status ──────────────────────
   The callback "in_progress" status can't reuse .badge-warn — dashboard-polish
   .css overrides that global class to a low-contrast blue (--accent-2) that
   fails AA (~2.1:1 light) and is indistinguishable from the blue .badge-info
   "Open" badge. This dedicated class uses conventional amber with OPAQUE
   backgrounds (so the ratio doesn't depend on a translucent blend over the
   card surface), verified against the badge TEXT:
     dark  (default): #FCD34D on #451A03 = 10.39:1  (AA pass, needs >=4.5)
     light (opt-in) : #92400E on #FEF3C7 =  6.37:1  (AA pass)
   Amber is a distinct hue from the blue "Open" badge. Not white/black, so the
   hardcoded-color guard is satisfied. Theme-aware via the data-theme override. */
.badge-progress {
  background: #451A03;
  color: #FCD34D;
}
html[data-theme="light"] .badge-progress {
  background: #FEF3C7;
  color: #92400E;
}