/* Enquiries: the lead inbox (M3).
 *
 * Everything namespaced under .enq-* so nothing leaks. Deliberately built on the
 * same conventions as client-retention.css rather than a new visual language:
 * the global styles.css custom props with hard fallbacks, the page owns its own
 * scroll (.dashboard-content is overflow:hidden), and it is mobile-first so the
 * filter bar wraps, the table scrolls inside its own wrapper and the detail
 * drawer becomes a full-height sheet.
 *
 * Palette: the CRM's existing semantic set, which ui-ux-pro-max independently
 * returned for this product type (inbox blue #2563eb, priority red #dc2626,
 * amber #d97706, green #16a34a). Density is dashboard-dense, 8px to 32px.
 * Motion is subtle, 150ms to 200ms, and prefers-reduced-motion turns it off.
 *
 * Accessibility notes that are load-bearing here:
 *   - No pill relies on colour alone, every one carries its text label.
 *   - Tables scroll horizontally inside .enq-tablewrap, content is never cut off.
 *   - Focus rings are visible on every interactive element.
 *   - Action buttons are 32px tall in the dense table but 44px on touch widths.
 */

.enq-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.enq-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.enq-head-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.enq-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--text-primary, #1a1a1a); }
.enq-sub { font-size: 13px; color: var(--text-muted, #666); max-width: 76ch; line-height: 1.45; }
.enq-head-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── tabs ────────────────────────────────────────────────────────────────── */
.enq-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.enq-tab {
  appearance: none; border: none; background: none; cursor: pointer;
  padding: 10px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--text-muted, #666); border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color 150ms ease, border-color 150ms ease;
}
.enq-tab:hover { color: var(--text-primary, #1a1a1a); }
.enq-tab:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; border-radius: 4px; }
.enq-tab.is-active { color: #2563eb; border-bottom-color: #2563eb; }

/* ── summary chips ───────────────────────────────────────────────────────── */
.enq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.enq-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-color, #e5e7eb); background: var(--card-bg, #fff);
  font-size: 12.5px; color: var(--text-secondary, #444);
  transition: border-color 150ms ease, background 150ms ease;
}
.enq-chip:hover { border-color: #2563eb; }
.enq-chip:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.enq-chip.is-active { border-color: #2563eb; background: rgba(37, 99, 235, .08); color: #1d4ed8; }
.enq-chip-n { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, #1a1a1a); }
.enq-chip.is-warn .enq-chip-n { color: #b45309; }
.enq-chip.is-bad .enq-chip-n { color: #dc2626; }

/* ── notice banner (configuration gaps) ──────────────────────────────────── */
.enq-notice {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: 10px; font-size: 13px; line-height: 1.5;
  border: 1px solid #fcd9a4; background: #fffaf0; color: #7c4a03;
}
.enq-notice.is-info { border-color: #bfdbfe; background: #eff6ff; color: #1e40af; }
/* Amber says "not connected yet". Red says "work is silently not happening":
   an empty page register or no delivery route, which leaves leads undelivered
   while the inbox looks tidy. Those must not read the same. */
.enq-notice.is-bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
/* Amber, between neutral and bad: something needs a person, but nothing is
   broken and nothing has been lost. */
.enq-notice.is-warn { border-color: #fcd9a4; background: #fffaf0; color: #7c4a03; }
.enq-notice-ico { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; }
.enq-notice-body { min-width: 0; }
.enq-notice-title { font-weight: 700; margin-bottom: 2px; }
.enq-notice-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.enq-notices { display: flex; flex-direction: column; gap: 10px; }

/* A chip that only reports a count and is not a filter. */
.enq-chip.is-static { cursor: default; }
.enq-chip.is-static:hover { border-color: var(--border-color, #e5e7eb); }
/* The duplicate rate. Not a filter, a fact, so it reads as a figure rather than
   as another button. */
.enq-chip-rate .enq-chip-n { color: #7c3aed; }

/* ── filter bar ──────────────────────────────────────────────────────────── */
.enq-filters {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  padding: 12px; border-radius: 10px;
  border: 1px solid var(--border-color, #e5e7eb); background: var(--card-bg, #fff);
}
.enq-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.enq-field-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #666); }
.enq-input, .enq-select, .enq-textarea {
  font: inherit; font-size: 13px; color: var(--text-primary, #1a1a1a);
  padding: 7px 10px; min-height: 34px; border-radius: 8px;
  border: 1px solid var(--border-color, #e5e7eb); background: var(--card-bg, #fff);
  box-sizing: border-box; max-width: 100%;
}
.enq-input:focus, .enq-select:focus, .enq-textarea:focus { outline: 2px solid #2563eb; outline-offset: 0; border-color: #2563eb; }
.enq-textarea { min-height: 120px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; }

/* Growth belongs on the FIELD WRAPPER, never on the control itself. .enq-field
 * is a flex COLUMN, so a `flex: 1 1 220px` on the input inside it is read as a
 * 220px flex-basis in the column axis, which makes the input 220px TALL. */
.enq-field-grow { flex: 1 1 240px; min-width: 200px; }
.enq-field-grow .enq-input { width: 100%; }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.enq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--border-color, #e5e7eb); background: var(--card-bg, #fff);
  color: var(--text-primary, #1a1a1a); cursor: pointer;
  border-radius: 8px; padding: 8px 14px; min-height: 34px;
  font-size: 13px; font-weight: 600; white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, opacity 150ms ease;
}
.enq-btn:hover { background: #f8fafc; }
.enq-btn:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.enq-btn:disabled { opacity: .55; cursor: default; }
.enq-btn-primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.enq-btn-primary:hover { background: #1d4ed8; }
.enq-btn-danger { color: #dc2626; border-color: #fecaca; }
.enq-btn-danger:hover { background: #fef2f2; }
.enq-btn-sm { padding: 5px 10px; min-height: 30px; font-size: 12.5px; border-radius: 7px; }
.enq-btn-ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* ── bulk action bar ─────────────────────────────────────────────────────── */
.enq-bulk {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid #bfdbfe; background: #eff6ff; color: #1e40af; font-size: 13px;
}
.enq-bulk-count { font-weight: 700; }
.enq-bulk-spacer { flex: 1 1 auto; }

/* ── table ───────────────────────────────────────────────────────────────── */
.enq-tablewrap {
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px;
  background: var(--card-bg, #fff); overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.enq-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 940px; }
.enq-table th {
  text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted, #666); padding: 10px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--border-color, #e5e7eb); background: #fafbfc; position: sticky; top: 0; z-index: 1;
}
.enq-table td { padding: 10px 12px; border-bottom: 1px solid var(--ui-border-soft, rgba(128,128,128,.1)); vertical-align: top; color: var(--text-secondary, #444); }
.enq-table tbody tr { cursor: pointer; transition: background 150ms ease; }
.enq-table tbody tr:hover { background: #f8fafc; }
.enq-table tbody tr.is-open { background: rgba(37, 99, 235, .06); }
.enq-table tbody tr:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; }
.enq-col-check { width: 34px; }
.enq-check { width: 16px; height: 16px; cursor: pointer; accent-color: #2563eb; }

.enq-cell-who { display: flex; flex-direction: column; gap: 2px; min-width: 150px; }
.enq-who-name { font-weight: 600; color: var(--text-primary, #1a1a1a); }
.enq-who-contact { font-size: 12px; color: var(--text-muted, #666); word-break: break-word; }
.enq-cell-msg { max-width: 340px; color: var(--text-secondary, #444); line-height: 1.45; }
.enq-cell-when { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--text-muted, #666); }
.enq-muted { color: var(--text-muted, #666); }

/* ── pills ───────────────────────────────────────────────────────────────── */
.enq-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  border: 1px solid transparent;
}
.enq-pill-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }

.enq-st-new         { background: #eff6ff; color: #1d4ed8; border-color: #bfdbfe; }
.enq-st-quarantined { background: #fffaf0; color: #b45309; border-color: #fcd9a4; }
.enq-st-valid       { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.enq-st-routed      { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }
.enq-st-delivered   { background: #16a34a; color: #fff; border-color: #16a34a; }
.enq-st-rejected    { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
/* Duplicate reads as "held", not as "wrong". It is deliberately cooler than
   quarantined, which is the amber warning: a duplicate is a perfectly good lead
   that the client already has, not a lead anybody needs to fix. */
.enq-st-duplicate   { background: #f5f3ff; color: #7c3aed; border-color: #ddd6fe; }

.enq-gr-hot      { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }
.enq-gr-warm     { background: #fffaf0; color: #b45309; border-color: #fcd9a4; }
.enq-gr-cold     { background: #f1f5f9; color: #475569; border-color: #e2e8f0; }
.enq-gr-ungraded { background: transparent; color: var(--text-muted, #666); border-color: var(--border-color, #e5e7eb); }

.enq-flag-unrouted { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* ── states ──────────────────────────────────────────────────────────────── */
.enq-loading, .enq-empty { padding: 40px 20px; text-align: center; color: var(--text-muted, #666); font-size: 13px; }
.enq-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.enq-empty-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.enq-empty-body { max-width: 62ch; line-height: 1.55; }
.enq-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.enq-spinner {
  width: 18px; height: 18px; border-radius: 50%; margin: 0 auto 10px;
  border: 2px solid var(--border-color, #e5e7eb); border-top-color: #2563eb;
  animation: enq-spin 700ms linear infinite;
}
@keyframes enq-spin { to { transform: rotate(360deg); } }
.enq-error { padding: 18px; border-radius: 10px; border: 1px solid #fecaca; background: #fef2f2; color: #991b1b; font-size: 13px; }

/* ── pagination ──────────────────────────────────────────────────────────── */
.enq-pager { display: flex; align-items: center; gap: 10px; justify-content: flex-end; font-size: 12.5px; color: var(--text-muted, #666); }

/* ── Live leads sheet ────────────────────────────────────────────────────────
   The sheet is wide by design: thirteen columns, and the two that matter most
   (country and product) sit in the middle. Content must NEVER be cut off, so the
   host scrolls horizontally inside itself rather than clipping, and the page
   body never scrolls sideways. */
.enq-sheet-host {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
  min-height: 120px;
}
.enq-sheet-host .proagri-sheet-wrap { min-width: 1180px; }

/* The country and product pills. proagri-sheet only styles status tokens it
   knows about, and a country name is not one of them, so without this every
   country and product would render as flat unstyled text beside styled state
   and grade pills and would read as broken. Scoped to this sheet via the
   data-col-key the component already puts on every cell, so nothing else that
   uses proagri-sheet is touched. */
.enq-sheet-host .proagri-sheet-cell[data-col-key="country"] .proagri-sheet-status,
.enq-sheet-host .proagri-sheet-cell[data-col-key="product"] .proagri-sheet-status {
  background: rgba(37, 99, 235, .08);
  color: #1d4ed8;
  text-transform: none;
}
/* The empty sentinel. An unset cell has to read as unset, not as a value. */
.enq-sheet-host .proagri-sheet-status-not_set {
  background: transparent;
  color: var(--text-muted, #666);
  border: 1px dashed var(--border-color, #e5e7eb);
  font-style: italic;
}
/* Duplicate and quarantined in the state column, matching the Inbox pills so the
   same word means the same thing on both screens. */
.enq-sheet-host .proagri-sheet-status-duplicate { background: #f5f3ff; color: #7c3aed; }
.enq-sheet-host .proagri-sheet-status-quarantined { background: #fffaf0; color: #b45309; }
.enq-sheet-host .proagri-sheet-status-valid { background: #ecfdf5; color: #047857; }
.enq-sheet-host .proagri-sheet-status-delivered { background: #16a34a; color: #fff; }
.enq-sheet-host .proagri-sheet-status-rejected { background: #f1f5f9; color: #475569; }
.enq-sheet-host .proagri-sheet-status-hot { background: #fef2f2; color: #b91c1c; }
.enq-sheet-host .proagri-sheet-status-warm { background: #fffaf0; color: #b45309; }
.enq-sheet-host .proagri-sheet-status-cold { background: #f1f5f9; color: #475569; }
.enq-sheet-host .proagri-sheet-status-ungraded {
  background: transparent; color: var(--text-muted, #666);
  border: 1px dashed var(--border-color, #e5e7eb);
}
.enq-sheet-foot {
  display: flex; align-items: center; gap: 10px; justify-content: flex-end;
  font-size: 12.5px; color: var(--text-muted, #666); flex-wrap: wrap;
}
/* A compact template box: it sits in a filter-style form row, so it must not
   tower over the single-line inputs beside it. */
.enq-textarea-sm { min-height: 64px; }

/* ── per-client required fields ──────────────────────────────────────────── */
.enq-rule-list {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 8px 18px; margin: 4px 0 12px;
}
.enq-rule {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--text-primary, #1a1a1a); cursor: pointer;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-color, #e5e7eb);
}
.enq-rule:hover { border-color: #2563eb; }
.enq-rule input:disabled { cursor: not-allowed; }
.enq-rule:has(input:disabled) { cursor: not-allowed; opacity: .7; }

/* On a phone the sheet drops to its card mode, where each cell self-labels, so
   the fixed minimum width would only force a pointless sideways scroll. */
@media (max-width: 720px) {
  .enq-sheet-host .proagri-sheet-wrap { min-width: 0; }
  .enq-sheet-foot { justify-content: flex-start; }
}

/* ── drawer ──────────────────────────────────────────────────────────────── */
.enq-scrim {
  position: fixed; inset: 0; background: rgba(15, 23, 42, .38); z-index: 900;
  animation: enq-fade 150ms ease;
}
@keyframes enq-fade { from { opacity: 0; } to { opacity: 1; } }
.enq-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); z-index: 901;
  background: var(--card-bg, #fff); border-left: 1px solid var(--border-color, #e5e7eb);
  box-shadow: -12px 0 32px rgba(15, 23, 42, .12);
  display: flex; flex-direction: column; min-height: 0;
  animation: enq-slide 180ms ease;
}
@keyframes enq-slide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
.enq-drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.enq-drawer-title { font-size: 16px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.enq-drawer-meta { font-size: 12px; color: var(--text-muted, #666); margin-top: 3px; }
.enq-drawer-close {
  appearance: none; border: 1px solid var(--border-color, #e5e7eb); background: var(--card-bg, #fff);
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer; color: var(--text-muted, #666);
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.enq-drawer-close:hover { background: #f8fafc; color: var(--text-primary, #1a1a1a); }
.enq-drawer-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
.enq-drawer-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px 28px; display: flex; flex-direction: column; gap: 16px; }
.enq-drawer-foot {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px;
  border-top: 1px solid var(--border-color, #e5e7eb); background: #fafbfc;
}

.enq-section { display: flex; flex-direction: column; gap: 8px; }
.enq-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #666); }
.enq-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.enq-card {
  border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px;
  padding: 12px; background: var(--card-bg, #fff); font-size: 13px; line-height: 1.5;
}
.enq-card.is-warn { border-color: #fcd9a4; background: #fffaf0; color: #7c4a03; }
.enq-card.is-bad { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.enq-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; opacity: .75; margin-bottom: 4px; }
.enq-raw {
  margin: 0; padding: 12px; border-radius: 10px; max-height: 260px; overflow: auto;
  background: #0f172a; color: #e2e8f0; font-size: 11.5px; line-height: 1.55;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre; -webkit-overflow-scrolling: touch;
}

/* ── timeline ────────────────────────────────────────────────────────────── */
.enq-timeline { display: flex; flex-direction: column; gap: 0; }
.enq-tl-item { display: grid; grid-template-columns: 14px 1fr; gap: 10px; padding-bottom: 12px; position: relative; }
.enq-tl-rail { display: flex; flex-direction: column; align-items: center; }
.enq-tl-dot { width: 9px; height: 9px; border-radius: 50%; background: #2563eb; margin-top: 4px; flex: 0 0 auto; }
.enq-tl-line { flex: 1 1 auto; width: 2px; background: var(--border-color, #e5e7eb); margin-top: 3px; }
.enq-tl-body { min-width: 0; }
.enq-tl-top { display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; }
.enq-tl-event { font-size: 12.5px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.enq-tl-actor { font-size: 12px; color: #2563eb; }
.enq-tl-when { font-size: 11.5px; color: var(--text-muted, #666); font-variant-numeric: tabular-nums; }
.enq-tl-detail { font-size: 12px; color: var(--text-secondary, #444); margin-top: 2px; word-break: break-word; }

/* ── modal ───────────────────────────────────────────────────────────────── */
.enq-modal {
  position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(15, 23, 42, .4); animation: enq-fade 150ms ease;
}
.enq-modal-box {
  background: var(--card-bg, #fff); border-radius: 12px; width: min(720px, 100%);
  max-height: min(86vh, 780px); display: flex; flex-direction: column; min-height: 0;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .22);
}
.enq-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border-color, #e5e7eb); }
.enq-modal-title { font-size: 16px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.enq-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; font-size: 13px; line-height: 1.5; }
.enq-modal-foot { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border-color, #e5e7eb); }

/* A delete destroys the comment upstream, so the modal that asks about it does
   not look like the ordinary one. */
.enq-modal-box.is-danger { border-top: 4px solid #dc2626; }
/* The exact words about to be hidden or destroyed, quoted verbatim. */
.enq-quote {
  padding: 10px 12px; border-radius: 8px; border-left: 3px solid #94a3b8;
  background: #f8fafc; color: var(--text-primary, #1a1a1a);
  font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 220px; overflow-y: auto;
}
.enq-card.is-bad .enq-quote { border-left-color: #dc2626; background: #fff; }

/* ── moderation queue ────────────────────────────────────────────────────── */
.enq-table-mod { min-width: 1040px; }
.enq-col-act { white-space: nowrap; }
.enq-col-act .enq-btn { margin-right: 6px; }
.enq-sent-positive { background: #ecfdf5; color: #15803d; }
.enq-sent-neutral { background: #f1f5f9; color: #475569; }
.enq-sent-negative { background: #fef2f2; color: #b91c1c; }
.enq-sent-abusive { background: #450a0a; color: #fecaca; }
.enq-sent-unknown { background: #f8fafc; color: #94a3b8; }
/* How the comment was scored. A word-list score is much weaker evidence than an
   AI one, so it is called out rather than sitting behind a tooltip. */
.enq-method {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 6px; border-radius: 5px; white-space: nowrap;
}
.enq-method-relay { background: #eef2ff; color: #4338ca; }
.enq-method-keyword { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.enq-mod-flagged { background: #fffbeb; color: #b45309; }
.enq-mod-scored { background: #f1f5f9; color: #475569; }
/* Why a footer action is unavailable, next to the action itself. */
.enq-foot-note {
  flex: 1 1 100%; font-size: 12px; line-height: 1.45; color: var(--text-muted, #666);
}
.enq-mod-hidden { background: #eef2ff; color: #4338ca; }
.enq-mod-deleted { background: #450a0a; color: #fecaca; }
.enq-mod-kept { background: #ecfdf5; color: #15803d; }
/* An action the platform refused is never allowed to read as done. */
.enq-mod-fail {
  margin-top: 5px; font-size: 11.5px; line-height: 1.45;
  color: #b91c1c; overflow-wrap: anywhere;
}

/* ── configuration tab ───────────────────────────────────────────────────── */
.enq-config { display: flex; flex-direction: column; gap: 20px; }
.enq-panel { display: flex; flex-direction: column; gap: 10px; }
.enq-panel-wide { gap: 12px; }

/* The two lists this module cannot run without, stated up front. */
.enq-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.enq-health-tile {
  display: flex; flex-direction: column; gap: 3px;
  padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border-color, #e5e7eb); background: var(--card-bg, #fff);
}
.enq-health-tile.is-ok { border-color: #a7f3d0; background: #f6fffb; }
.enq-health-tile.is-bad { border-color: #fecaca; background: #fff7f7; }
.enq-health-n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-primary, #1a1a1a); }
.enq-health-tile.is-bad .enq-health-n { color: #b91c1c; }
.enq-health-tile.is-ok .enq-health-n { color: #15803d; }
.enq-health-l { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #666); }
.enq-health-d { font-size: 12px; line-height: 1.45; color: var(--text-secondary, #444); }
.enq-panel-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px; }
.enq-panel-title { font-size: 15px; font-weight: 700; color: var(--text-primary, #1a1a1a); }
.enq-panel-sub { font-size: 12.5px; color: var(--text-muted, #666); max-width: 76ch; line-height: 1.5; }
.enq-form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 12px; border: 1px solid var(--border-color, #e5e7eb); border-radius: 10px; background: #fafbfc; }

/* ── toast ───────────────────────────────────────────────────────────────── */
.enq-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 980;
  max-width: min(560px, calc(100vw - 32px));
  padding: 11px 16px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: #0f172a; color: #f8fafc; box-shadow: 0 12px 28px rgba(15, 23, 42, .28);
}
.enq-toast.is-bad { background: #991b1b; }
.enq-toast.is-good { background: #166534; }
/* Used when something partly succeeded, for example an export that hit its row
   limit. It must not read as a plain success. */
.enq-toast.is-warn { background: #92400e; }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .enq-drawer { width: min(480px, 100vw); }
}
@media (max-width: 768px) {
  .enq-page { padding: 14px; gap: 14px; }
  .enq-title { font-size: 19px; }
  .enq-grid2 { grid-template-columns: 1fr; }
  .enq-drawer { width: 100vw; border-left: none; }
  .enq-search { flex-basis: 100%; }
  /* Touch targets go to the 44px minimum once we are on a touch-sized width. */
  .enq-btn, .enq-input, .enq-select { min-height: 44px; }
  .enq-btn-sm { min-height: 38px; }
  .enq-chip { padding: 9px 14px; }
  .enq-tab { padding: 12px 14px; }
  .enq-health { grid-template-columns: 1fr; }
  /* Moderation buttons stack so Delete is never a mis-tap away from Keep. */
  .enq-col-act { white-space: normal; }
  .enq-col-act .enq-btn { display: flex; width: 100%; margin: 0 0 6px; justify-content: center; }
  .enq-modal-foot .enq-btn { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .enq-page *, .enq-drawer, .enq-scrim, .enq-modal { animation: none !important; transition: none !important; }
  .enq-spinner { animation: enq-spin 1.4s linear infinite; }
}

/* ── #134 dark mode overrides ─────────────────────────────────────────────────
   Appended, never edited above. Only selectors with hardcoded NEUTRAL literals
   are repeated; anything on var(--text-*) / var(--card-bg) / var(--border-color)
   / var(--ui-border-soft) already flips via ui/css/theme.css.

   The accessibility promises in the header still hold: every pill keeps its
   text label, and no pill is distinguished by hue alone. Each state hue is
   preserved and only its FORM changes — pale tint becomes translucent tint,
   dark ink becomes a light saturated foreground. */

/* tabs */
html[data-theme="dark"] .enq-tab:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .enq-tab.is-active { color: #60a5fa; border-bottom-color: #60a5fa; }

/* summary chips */
html[data-theme="dark"] .enq-chip:hover { border-color: #60a5fa; }
html[data-theme="dark"] .enq-chip:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .enq-chip.is-active {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}
html[data-theme="dark"] .enq-chip.is-warn .enq-chip-n { color: #fbbf24; }
html[data-theme="dark"] .enq-chip.is-bad .enq-chip-n { color: #fca5a5; }
html[data-theme="dark"] .enq-chip-rate .enq-chip-n { color: #c4b5fd; }

/* notice banners. The three severities must still not read the same: amber is
   "not connected yet", red is "work is silently not happening". */
html[data-theme="dark"] .enq-notice,
html[data-theme="dark"] .enq-notice.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
}
html[data-theme="dark"] .enq-notice.is-info {
  border-color: rgba(96, 165, 250, 0.38);
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}
html[data-theme="dark"] .enq-notice.is-bad {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

/* form controls sit recessed rather than on the card surface, so an input is
   still legible as an input inside an already-dark drawer or panel. */
html[data-theme="dark"] .enq-input,
html[data-theme="dark"] .enq-select,
html[data-theme="dark"] .enq-textarea {
  background: #172033;
  border-color: #475569;
  color: var(--text-primary);
}
html[data-theme="dark"] .enq-input:focus,
html[data-theme="dark"] .enq-select:focus,
html[data-theme="dark"] .enq-textarea:focus { outline-color: #60a5fa; border-color: #60a5fa; }

/* buttons */
html[data-theme="dark"] .enq-btn:hover { background: #334155; }
html[data-theme="dark"] .enq-btn:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .enq-btn-danger { color: #fca5a5; border-color: rgba(248, 113, 113, 0.38); }
html[data-theme="dark"] .enq-btn-danger:hover { background: rgba(239, 68, 68, 0.16); }

/* bulk action bar */
html[data-theme="dark"] .enq-bulk {
  border-color: rgba(96, 165, 250, 0.34);
  background: rgba(96, 165, 250, 0.12);
  color: #93c5fd;
}

/* table */
html[data-theme="dark"] .enq-table th { background: #273449; }
html[data-theme="dark"] .enq-table tbody tr:hover { background: #273449; }
html[data-theme="dark"] .enq-table tbody tr.is-open { background: rgba(96, 165, 250, 0.14); }
html[data-theme="dark"] .enq-table tbody tr:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .enq-check { accent-color: #60a5fa; }

/* state pills */
html[data-theme="dark"] .enq-st-new { background: rgba(96, 165, 250, 0.16); color: #93c5fd; border-color: rgba(96, 165, 250, 0.34); }
html[data-theme="dark"] .enq-st-quarantined { background: rgba(245, 158, 11, 0.16); color: #fcd34d; border-color: rgba(245, 158, 11, 0.34); }
html[data-theme="dark"] .enq-st-valid { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; border-color: rgba(16, 185, 129, 0.34); }
html[data-theme="dark"] .enq-st-routed { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.34); }
/* Delivered stays the one solid fill: it is the terminal success state and has
   to stand apart from the six tinted pills around it. */
html[data-theme="dark"] .enq-st-delivered { background: #15803d; color: #ecfdf5; border-color: #15803d; }
html[data-theme="dark"] .enq-st-rejected { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.28); }
/* Duplicate stays cooler than quarantined: a good lead the client already has,
   not one anybody has to fix. */
html[data-theme="dark"] .enq-st-duplicate { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; border-color: rgba(167, 139, 250, 0.34); }

html[data-theme="dark"] .enq-gr-hot { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border-color: rgba(239, 68, 68, 0.34); }
html[data-theme="dark"] .enq-gr-warm { background: rgba(245, 158, 11, 0.16); color: #fcd34d; border-color: rgba(245, 158, 11, 0.34); }
html[data-theme="dark"] .enq-gr-cold { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.28); }
html[data-theme="dark"] .enq-flag-unrouted { background: rgba(239, 68, 68, 0.16); color: #fca5a5; border-color: rgba(239, 68, 68, 0.34); }

/* states */
html[data-theme="dark"] .enq-spinner { border-top-color: #60a5fa; }
html[data-theme="dark"] .enq-error {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}

/* live leads sheet — the same word has to mean the same thing here as in the
   Inbox pills above, so these mirror them exactly. */
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-cell[data-col-key="country"] .proagri-sheet-status,
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-cell[data-col-key="product"] .proagri-sheet-status {
  background: rgba(96, 165, 250, 0.16);
  color: #93c5fd;
}
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-duplicate { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; }
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-quarantined { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-valid { background: rgba(16, 185, 129, 0.16); color: #6ee7b7; }
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-delivered { background: #15803d; color: #ecfdf5; }
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-rejected { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-hot { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-warm { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
html[data-theme="dark"] .enq-sheet-host .proagri-sheet-status-cold { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }

/* per-client required fields */
html[data-theme="dark"] .enq-rule:hover { border-color: #60a5fa; }

/* drawer */
html[data-theme="dark"] .enq-scrim { background: rgba(0, 0, 0, 0.62); }
html[data-theme="dark"] .enq-drawer { box-shadow: -12px 0 32px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .enq-drawer-close:hover { background: #334155; }
html[data-theme="dark"] .enq-drawer-close:focus-visible { outline-color: #60a5fa; }
html[data-theme="dark"] .enq-drawer-foot { background: #273449; }

html[data-theme="dark"] .enq-card.is-warn {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(245, 158, 11, 0.12);
  color: #fcd34d;
}
html[data-theme="dark"] .enq-card.is-bad {
  border-color: rgba(239, 68, 68, 0.38);
  background: rgba(239, 68, 68, 0.12);
  color: #fca5a5;
}
/* The raw payload block was ALREADY dark, which now makes it identical to the
   page background. It drops a step instead, so it still reads as a code well. */
html[data-theme="dark"] .enq-raw { background: #0b1220; }

/* timeline */
html[data-theme="dark"] .enq-tl-dot { background: #60a5fa; }
html[data-theme="dark"] .enq-tl-actor { color: #60a5fa; }

/* modal */
html[data-theme="dark"] .enq-modal { background: rgba(0, 0, 0, 0.62); }
html[data-theme="dark"] .enq-modal-box { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.60); }
html[data-theme="dark"] .enq-quote {
  border-left-color: #64748b;
  background: rgba(148, 163, 184, 0.10);
}
html[data-theme="dark"] .enq-card.is-bad .enq-quote {
  border-left-color: #f87171;
  background: rgba(0, 0, 0, 0.28);
}

/* moderation queue */
html[data-theme="dark"] .enq-sent-positive { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .enq-sent-neutral { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
html[data-theme="dark"] .enq-sent-negative { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
/* Abusive and deleted were near-black slabs. On a dark page they need to be
   lighter than the surface, not darker, or they vanish. */
html[data-theme="dark"] .enq-sent-abusive,
html[data-theme="dark"] .enq-mod-deleted { background: #7f1d1d; color: #fecaca; }
html[data-theme="dark"] .enq-sent-unknown { background: rgba(148, 163, 184, 0.10); color: #94a3b8; }
html[data-theme="dark"] .enq-method-relay { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }
html[data-theme="dark"] .enq-method-keyword {
  background: rgba(249, 115, 22, 0.16);
  color: #fdba74;
  border-color: rgba(249, 115, 22, 0.35);
}
html[data-theme="dark"] .enq-mod-flagged { background: rgba(245, 158, 11, 0.16); color: #fcd34d; }
html[data-theme="dark"] .enq-mod-scored { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; }
html[data-theme="dark"] .enq-mod-hidden { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }
html[data-theme="dark"] .enq-mod-kept { background: rgba(34, 197, 94, 0.16); color: #86efac; }
html[data-theme="dark"] .enq-mod-fail { color: #fca5a5; }

/* configuration tab */
html[data-theme="dark"] .enq-health-tile.is-ok {
  border-color: rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.10);
}
html[data-theme="dark"] .enq-health-tile.is-bad {
  border-color: rgba(239, 68, 68, 0.35);
  background: rgba(239, 68, 68, 0.10);
}
html[data-theme="dark"] .enq-health-tile.is-ok .enq-health-n { color: #86efac; }
html[data-theme="dark"] .enq-health-tile.is-bad .enq-health-n { color: #fca5a5; }
html[data-theme="dark"] .enq-form-row { background: rgba(148, 163, 184, 0.06); }

/* toast — was near page-background; it lifts to a raised neutral so it still
   reads as something that floated in over the page. */
html[data-theme="dark"] .enq-toast {
  background: #334155;
  color: #f1f5f9;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.60);
}
html[data-theme="dark"] .enq-toast.is-bad { background: #991b1b; }
html[data-theme="dark"] .enq-toast.is-good { background: #166534; }
html[data-theme="dark"] .enq-toast.is-warn { background: #92400e; }