/* ============================================================================
   MOQ Buy-Sheet Importer (spec/PLAN_moq_csv_upload_ui.md §7).

   Upload form + progress card + review-queue/ready tables for /moq_imports.
   Loads GLOBALLY via the :app glob, so every class is `.mi-`-prefixed
   (design-system §19); the batch status pills REUSE the editor's `.mqe-status`
   base and only add the importer's extra state tints here. Warm-minimal tokens
   only — NO inline styles (the progress-bar width is set by the poll
   controller's JS, never a static style attribute).
   ========================================================================== */

/* ── Status pill variants (base .mqe-status lives in moq_groups.css) ─────── */
.mqe-status--running   { color: var(--blue); background: #eff6ff; }
.mqe-status--applying  { color: var(--purple); background: #f5f3ff; }
.mqe-status--failed    { color: var(--red); background: #fef2f2; }
.mqe-status--cancelled { color: var(--muted); background: var(--surface-alt); }

/* ── Upload form ─────────────────────────────────────────────────────────── */
.mi-upload-card { max-width: 640px; }
.mi-field { margin-bottom: 16px; }
.mi-hint {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}
.mi-hint-inline { font-weight: 400; color: var(--muted); }
.mi-checkbox {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.mi-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 12px;
}

/* ── Progress card (polled) ──────────────────────────────────────────────── */
.mi-progress { max-width: 640px; }
.mi-progress__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.mi-progress__step { font-size: 14px; font-weight: 600; color: var(--ink); }
.mi-progress__pct {
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  color: var(--muted);
}
.mi-progress__track {
  height: 8px;
  border-radius: 999px;
  background: var(--border-light);
  overflow: hidden;
}
.mi-progress__bar {
  height: 100%;
  width: 0; /* the poll controller sets the live width */
  border-radius: 999px;
  background: var(--accent);
  transition: width 0.4s ease;
}

/* ── Banners ─────────────────────────────────────────────────────────────── */
.mi-banner {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}
.mi-banner--ai {
  color: var(--amber);
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.mi-banner--error {
  color: var(--red);
  background: #fef2f2;
  border: 1px solid #fecaca;
}

/* ── Summary strip ───────────────────────────────────────────────────────── */
.mi-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}
.mi-summary__cell {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mi-summary__num {
  font-family: "JetBrains Mono", monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
}
.mi-summary__label { font-size: 11px; color: var(--muted); }

/* ── Review queue / ready tables ─────────────────────────────────────────── */
.mi-section-head { margin-bottom: 10px; }
.mi-section-head h2 { display: inline; font-size: 15px; }
.mi-count { color: var(--muted); font-weight: 400; }
.mi-style-name { font-weight: 600; color: var(--ink); }
.mi-products { font-size: 12px; color: var(--muted); }
.mi-filename { font-size: 12px; }
.mi-chip {
  display: inline-block;
  margin: 1px 4px 1px 0;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  color: var(--amber);
  background: #fffbeb;
  border: 1px solid #fde68a;
}
.mi-chip--more { color: var(--muted); background: var(--surface-alt); border-color: var(--border); }

.mi-ready summary {
  cursor: pointer;
  list-style: none;
}
.mi-ready summary::-webkit-details-marker { display: none; }
.mi-ready summary .mi-hint { display: inline; margin-left: 8px; }
.mi-ready[open] summary { margin-bottom: 10px; }

.mi-downloads h2 { font-size: 15px; margin-bottom: 4px; }

/* ── Review-queue per-row actions (Chunk B) ──────────────────────────────── */
.mi-row-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
/* button_to renders a <form> — keep it inline so the actions sit on one row. */
.mi-row-actions form { display: inline; margin: 0; }