/* ── Import Modal ── */

.import-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.45);
  z-index: 900;
  display: none;
}
.import-backdrop.open { display: block; }

.import-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 640px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 64px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 40px rgba(var(--shadow-rgb), 0.18);
  display: none;
  flex-direction: column;
  z-index: 901;
}
.import-modal.open { display: flex; }

.import-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

.import-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}

.import-close-btn {
  width: 28px;
  height: 28px;
  border: none;
  background: none;
  color: var(--text-dim);
  font-size: 18px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color var(--speed), background var(--speed);
  line-height: 1;
}
.import-close-btn:hover { color: var(--red); background: var(--bg); }

.import-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  min-height: 0;
}

.import-drop-area {
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: border-color var(--speed), background var(--speed);
  text-align: center;
}
.import-drop-area:hover,
.import-drop-area.drag-over {
  border-color: var(--gold);
  background: var(--gold-soft);
}

.import-drop-icon { font-size: 40px; line-height: 1; margin-bottom: 4px; }
.import-drop-text { font-size: 15px; font-weight: 600; color: var(--text); }
.import-drop-sub  { font-size: 12px; color: var(--text-muted); }

.import-status {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.import-status strong { color: var(--text); }

.import-preview-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}

.import-preview-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.import-preview-tbl th {
  background: var(--bg-warm);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-light);
}

.import-preview-tbl td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text);
  white-space: nowrap;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.import-preview-tbl tbody tr:last-child td { border-bottom: none; }

.import-more {
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 11px;
}

.import-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid var(--border-light);
  flex-shrink: 0;
}

.import-toast {
  position: fixed;
  bottom: 90px;
  right: 28px;
  background: var(--green);
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  z-index: 2000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: opacity 0.4s;
}

/* ── Generalized importer: wider modal + map/review steps ── */

.import-modal { width: 880px; }
.import-footer { justify-content: space-between; }
.import-footer .btn-primary.disabled,
.import-footer .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.import-drop-area.import-drop-error { border-color: var(--red); background: var(--red-soft, rgba(138, 74, 64, 0.08)); }

.import-hint { font-size: 12.5px; color: var(--text-muted); margin: 0 0 16px; line-height: 1.55; }
.import-hint strong { color: var(--text); }
.import-hint em { font-style: italic; }

/* One fact per line. This used to be a single run-on sentence with the counts
   separated by middots and the instructions trailing off the end of it — the
   numbers are what a user scans for before deciding whether the mapping went
   well, and they were the hardest part to find. */
.import-hint-line {
  display: block;
  color: var(--text);
}

/* The count that still needs the user's attention. */
.import-hint-line.is-warn strong { color: var(--sand); }

.import-hint-note {
  display: block;
  margin-top: 8px;
  color: var(--text-muted);
}
.import-dim { color: var(--text-dim); }

/* Map step — 3-column grid: source column, sample, target dropdown */
.import-map-grid {
  display: grid;
  grid-template-columns: 1fr 1fr minmax(220px, 1.2fr);
  gap: 1px;
  align-items: center;
}
.import-map-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--text-muted);
  padding: 6px 8px;
  position: sticky;
  top: 0;
  background: var(--bg-warm);
}
.import-map-col,
.import-map-sample {
  padding: 8px;
  font-size: 12.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-bottom: 1px solid var(--border-light);
}
.import-map-col    { color: var(--text); font-weight: 500; }
.import-map-sample { color: var(--text-muted); }
.import-map-grid > div { border-bottom: 1px solid var(--border-light); }
.import-map-grid > .import-map-head { border-bottom: 1px solid var(--border); }

.import-map-select {
  width: 100%;
  padding: 6px 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

/* Review step — provenance bar */
.import-prov {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 22px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-warm);
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.import-prov-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 240px;
  flex: 1;
}
.import-prov-field label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}
.import-prov-field small {
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
}
.import-prov-field small em { font-style: normal; font-weight: 600; color: var(--text); }
.import-prov select {
  padding: 6px 8px;
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}
.import-dup-note { font-size: 12px; color: var(--red); font-weight: 500; flex-basis: 100%; }

/* Do-not-call notices. Three tones for three different asks:
   error  - the check did not run, so nothing below has been verified
   block  - rows removed from the import; settled, nothing to decide
   warn   - rows flagged; a decision the agent still has to make
   Each takes a full row of the provenance strip: a compliance message that
   wraps around a select box reads as decoration. */
.import-sup-note {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  padding: 7px 9px;
  border-radius: 6px;
  border: 1px solid transparent;
}
.import-sup-note.is-error {
  color: var(--red);
  background: var(--red-soft, rgba(138, 74, 64, 0.08));
  border-color: var(--red);
}
.import-sup-note.is-block {
  color: var(--red);
  background: var(--red-soft, rgba(138, 74, 64, 0.06));
}
.import-sup-note.is-warn {
  color: var(--gold);
  background: var(--gold-soft, rgba(176, 141, 87, 0.08));
}

/* Review step — editable table */
.import-review-scroll {
  overflow: auto;
  max-height: 46vh;
  border: 1px solid var(--border-light);
  border-radius: 8px;
}
.import-review-tbl { border-collapse: collapse; font-size: 12px; white-space: nowrap; }
.import-review-tbl th {
  position: sticky;
  top: 0;
  background: var(--bg-warm);
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.05em;
  padding: 8px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.import-review-tbl td { padding: 3px 5px; border-bottom: 1px solid var(--border-light); }
.import-rev-check { width: 34px; text-align: center; }
.import-rev-flag  { width: 30px; text-align: center; }
.import-row-dup   { background: var(--red-soft, rgba(138, 74, 64, 0.06)); }

/* A locked row. Dimmed rather than hidden: the agent needs to see that the
   number was in the file and is not being imported, or the counts at the end
   look like rows went missing. */
.import-row-dnc   { background: var(--red-soft, rgba(138, 74, 64, 0.10)); opacity: 0.62; }
.import-row-dnc .import-rev-input { text-decoration: line-through; }
.import-rev-cb:disabled { cursor: not-allowed; }

.import-rev-input {
  width: 130px;
  min-width: 90px;
  padding: 5px 7px;
  font: inherit;
  font-size: 12px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: 5px;
}
.import-rev-input:hover  { border-color: var(--border-light); }
.import-rev-input:focus  { border-color: var(--gold); background: var(--bg-warm); outline: none; }

/* A real button now, not a span with a title. `cursor: help` used to promise a
   tooltip you had to hover and wait for — invisible on touch and unreachable by
   keyboard — for the one control that explains why a row is flagged. */
.import-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 5px;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
.import-badge:hover        { filter: brightness(1.12); }
.import-badge:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.import-badge-dup  { background: var(--red);  color: #fff; }
/* Darker than DUP on purpose. A duplicate is a judgement call; this is not. */
.import-badge-dnc  { background: var(--text); color: var(--surface); }
.import-badge-warn { background: var(--gold); color: #fff; font-size: 12px; padding: 0 4px; }

/* ── Flag detail popover ──
   Appended to <body> and positioned in viewport coordinates, because the review
   table is a scroll container that would clip it. z-index clears the import
   modal, which is the highest thing on screen when this opens. */
.import-flag-pop {
  position: fixed;
  z-index: 2000030;
  width: min(340px, calc(100vw - 16px));
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 12px 32px rgba(var(--shadow-rgb), 0.18);
  font-size: 13px;
  color: var(--text);
}

.import-flag-pop-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-weight: 600;
}

.import-flag-pop-close {
  margin-left: auto;
  padding: 0 4px;
  background: none;
  border: 0;
  font-size: 13px;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
}

.import-flag-pop-close:hover { color: var(--text); }

.import-flag-pop-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.5;
}

.import-flag-pop-list li + li { margin-top: 4px; }

.import-flag-pop-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

/* Map step — "Create new field" inline controls. When active, the name box
   REPLACES the Import-as dropdown; a corner ▾ brings the dropdown back. The
   name box and the category dropdown sit side by side on one line. */
.import-create-fields {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-top: 0;
}

/* Name box: text input with a caret button tucked into its right corner. */
.import-create-namebox {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.import-create-label {
  width: 100%;
  padding: 6px 26px 6px 8px;   /* right pad clears the ▾ */
  font: inherit;
  font-size: 12.5px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.import-create-label:focus { border-color: var(--gold); outline: none; }
.import-create-reopen {
  position: absolute;
  top: 50%;
  right: 3px;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  line-height: 1;
  color: var(--text-muted);
  padding: 3px 4px;
  border-radius: 4px;
}
.import-create-reopen:hover { color: var(--text); background: var(--bg-warm); }

.import-create-group {
  flex: 0 0 auto;
  max-width: 45%;
  padding: 5px 6px;
  font: inherit;
  font-size: 11.5px;
  color: var(--text-muted);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

/* Review step — removed-column chips (undo) */
.import-removed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: -4px 0 12px;
  font-size: 11.5px;
}
.import-removed-label { color: var(--text-muted); font-weight: 600; }
.import-removed-chip {
  font: inherit;
  font-size: 11.5px;
  color: var(--text);
  background: var(--bg-warm);
  border: 1px dashed var(--border);
  border-radius: 12px;
  padding: 3px 10px;
  cursor: pointer;
}
.import-removed-chip:hover { border-color: var(--gold); border-style: solid; }

/* Review step — per-column remove control in the header */
.import-review-tbl th .import-th-label { margin-right: 6px; }
.import-col-remove {
  font: inherit;
  font-size: 11px;
  line-height: 1;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 1px 3px;
  cursor: pointer;
  opacity: 0.5;
}
.import-review-tbl th:hover .import-col-remove { opacity: 1; }
.import-col-remove:hover { color: var(--red); background: var(--red-soft, rgba(138, 74, 64, 0.1)); }

/* Partial-import toast. A different colour and a longer hold, because it is
   telling the agent that rows did NOT land — something they have to act on,
   not a confirmation they can ignore. */
.import-toast.is-warn {
  background: var(--sand);
  color: #241a00;
  max-width: min(560px, calc(100vw - 32px));
  line-height: 1.5;
}

/* ── Import progress ──
   Shown in place of the review table while the write queue drains. */

.import-progress {
  padding: 48px 32px;
  text-align: center;
}

.import-progress-count {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.import-progress-track {
  height: 8px;
  margin: 0 auto 16px;
  max-width: 420px;
  background: var(--bg-warm);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.import-progress-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: var(--radius-pill);
  transition: width 0.2s linear;
}

.import-progress-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* Close is disabled while the queue drains — leaving loses unwritten rows. */
.import-modal.is-busy .import-close-btn {
  opacity: 0.35;
  pointer-events: none;
}

/* Preview-trimmed note, beside the duplicate note above the review table. */
.import-trim-note {
  color: var(--text-muted);
  font-size: 12px;
}

/* ── New Lead Order dialog ─────────────────────────────────────────────────
   Reuses the import modal's chrome (.import-backdrop / .import-modal) and the
   Costs page's editor grid, so the dialog that creates a lead order looks the
   same wherever it's opened from. It sits one layer above the import modal
   because that's where it gets opened from most: mid-import, when the purchase
   the CSV came from turns out not to exist yet.
   See src/js/components/lead-order-modal.js. */
.lead-order-backdrop { z-index: 950; }

.lead-order-modal {
  z-index: 951;
  max-width: 620px;
}

.lead-order-modal .import-body { padding: 18px 22px; }

.lead-order-grid textarea { resize: vertical; }

/* ── Long-import warning ─────────────────────────────────────────────────────
   Shown on the review step above ~250 rows. Amber rather than red: a long
   import is not an error, it is a commitment the agent should make knowingly.
   Sits at the top of the body so it is read before the mapping is fiddled
   with, not discovered after the Import button is pressed. */
.import-long-notice {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-left: 3px solid var(--amber);
  background: var(--amber-soft);
  border-radius: 4px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text);
}

.import-long-notice strong { font-weight: 600; }
.import-long-notice span   { color: var(--text-muted); }

/* Remaining-time line on the progress screen. Sits between the bar and the
   "keep this tab open" note: the two answer the same anxiety, one with a
   number and one with an instruction. */
.import-progress-remaining {
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Oversized-file refusal ──────────────────────────────────────────────────
   The drop area's text is a 600-weight single line by default. A refusal is
   two sentences plus an optional how-to, so it needs its own measure and a
   normal weight to stay readable. */
.import-drop-refusal {
  display: block;
  max-width: 46ch;
  margin: 0 auto;
  font-weight: 500;
  line-height: 1.5;
}

/* Folded by default: the row count and the instruction are read every time,
   the steps only by someone who has not split a file before. */
.import-drop-help {
  max-width: 46ch;
  margin: 12px auto 0;
  text-align: left;
  font-weight: 400;
  font-size: 13px;
  color: var(--text-muted);
}

.import-drop-help > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  padding: 4px 0;
  list-style: revert;          /* keep the native disclosure triangle */
}

.import-drop-help > summary:focus-visible {
  outline: 2px solid var(--accent, currentColor);
  outline-offset: 2px;
  border-radius: 3px;
}

.import-drop-help ol {
  margin: 6px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  line-height: 1.5;
}

.import-drop-help-note {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid var(--border-light, var(--border));
  line-height: 1.5;
}