/* AI Field Mapping Editor — SuiteCentral 2.0 page-scoped styles
   Namespace: selectors are scoped under `.fm-*` classes so this file
   never targets existing (legacy) markup on ai-field-mapping-editor.html —
   with one explicit exception: the reduced-motion block below overrides
   `html.scroll-smooth` (the root scroller; scroll-behavior does not inherit,
   and this stylesheet only loads on this page).
   Depends on the shared ERP tokens loaded via /css/erp-theme.css
   (including the --erp-ai* accent tokens and --erp-spacing-* scale);
   var() fallbacks below cover tokens erp-theme.css does not yet define.

   This file is foundation-only for PR 1 of the restyle program: it defines
   the page container, the responsive grid breakpoint, and motion-reduction
   behavior ahead of the actual canvas/queue markup landing in later PRs. */

/* Page content container: centers the future editor shell within the
   shared ERP max-width and applies consistent outer gutters. */
.fm-page {
  max-width: var(--erp-content-max-width, 1600px);
  margin: 0 auto;
  padding: var(--erp-spacing-lg, 16px);
}

/* Main grid: canvas + review queue side by side on wide desktop viewports.
   Collapses to a single column at narrow desktop widths (design spec
   verification widths are 1600/1280/1024 CSS px; the one-column fallback
   engages at 1024px so the queue follows the canvas). */
.fm-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--erp-spacing-lg, 16px);
}

@media (max-width: 1024px) {
  .fm-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ERP chrome adaptations (PR 3 — chrome restyle)
   Page-scoped rules — `.fm-*` helpers plus a few body.erp-body-scoped
   overrides (header-action wrapping, modal-overlay z-index) — that adapt
   the shared ERP primitives (.erp-header/.erp-btn/.erp-alert/.erp-tabs) to
   this editor's existing markup WITHOUT moving or re-authoring any
   functional region. Indigo (--erp-ai*) is used ONLY for AI-originated
   affordances (provider chip, Suggest All); all other chrome uses the
   platform theme tokens.
   ============================================================ */

/* Back button: ghost styling that stays legible on the dark ERP header. */
.fm-header-back {
  background: transparent;
  color: var(--erp-header-text, #fff);
  border: 1px solid transparent;
}
.fm-header-back:hover {
  background: rgba(255, 255, 255, 0.12);
  color: var(--erp-header-text, #fff);
}

/* MCP badge sits on the dark header — force the translucent-white pill look. */
.fm-header-badge {
  background: rgba(255, 255, 255, 0.2);
  color: var(--erp-header-text, #fff);
  display: inline-flex;
  align-items: center;
  text-transform: none;
  letter-spacing: 0;
}

/* AI provider chip — indigo (AI-originated content only). */
.fm-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--erp-radius, 3px);
  background: var(--erp-ai, #6366f1);
  color: #fff;
  border: 1px solid var(--erp-ai-deep, #4c1d95);
  font-size: var(--erp-font-size-xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Suggest All — AI-accented action button on the header. */
.fm-suggest-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--erp-spacing-xs, 4px) var(--erp-spacing-md, 12px);
  border-radius: var(--erp-radius, 3px);
  background: var(--erp-ai, #6366f1);
  color: #fff;
  border: 1px solid var(--erp-ai-deep, #4c1d95);
  font-size: var(--erp-font-size-sm, 11px);
  font-weight: 700;
  cursor: pointer;
  transition: filter var(--erp-transition, 0.2s ease), opacity var(--erp-transition, 0.2s ease);
}
.fm-suggest-all-btn:hover:not(:disabled) {
  filter: brightness(1.08);
}
.fm-suggest-all-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Light-background header chips (Demo/Live, AI Assistant, AI Config).
   Their conditional Tailwind background/text classes still apply; this only
   normalizes the ERP button metrics so they line up with the rest. */
.fm-header-chip {
  border: 1px solid transparent;
}

/* Template tool buttons keep the secondary (white) ERP look on the dark bar. */
.fm-header-tool {
  white-space: nowrap;
}

/* Mapping-count meta text — muted-but-legible on the dark header. */
.fm-header-meta {
  color: var(--erp-header-text-muted, #e0e6ef);
  font-size: var(--erp-font-size-sm, 11px);
  white-space: nowrap;
}

/* Full-width sticky banners reuse .erp-alert colors but drop the inset
   rounding/margins so the sticky bar + tabs offset stays predictable. */
.fm-banner {
  margin-bottom: 0;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  padding: var(--erp-spacing-sm, 8px) var(--erp-spacing-lg, 16px);
}

/* The header carries many controls this phase (the toolbar relocation is a
   later phase); let the action clusters wrap gracefully on narrow desktops
   instead of overflowing. Scoped under body.erp-body (review R2) so the rule
   cannot couple to another page's header even if this file is ever reused. */
body.erp-body .erp-header .erp-header-actions {
  flex-wrap: wrap;
  row-gap: 6px;
}

/* Modal stacking regression guard.
   The Tailwind v2 CDN does NOT compile arbitrary `z-[...]` utilities, so
   several full-screen modal overlays fall back to `z-auto` and would render
   UNDER the sticky `.erp-header` (z-40) — the header can then intercept
   clicks on a modal's controls. Restore correct stacking: any full-screen
   fixed overlay on this page floats above the header. Scoped to `.inset-0`
   overlays, so the header itself and the `fixed top-4` toast stack are
   untouched; modals that already set a higher inline z-index keep it. */
body.erp-body .fixed.inset-0 {
  z-index: 1000;
}

/* Navigation tabs: reuse .erp-tabs/.erp-tab but keep the horizontal-scroll
   sticky bar; the outer .tabs-spacer already provides the gap below. */
.fm-tabs-bar {
  border-bottom: 0;
}
.fm-tabs {
  margin-bottom: 0;
  gap: 2px;
}
.fm-tab {
  font-size: var(--erp-font-size-sm, 11px);
  gap: 6px;
}

/* ============================================================
   Mapping canvas + surrounding cards (PR 4 — Task 7)
   The visible canvas layout (Setup / Load Data / live KPI / Mapping
   Canvas cards) sits above the unchanged Active Field Mappings and
   Custom Fields cards. Indigo (--erp-ai*) is used ONLY for the selected
   state (an AI-adjacent affordance); accepted-mapping links are solid
   slate, per the design spec.
   ============================================================ */

/* Live KPI strip — values are derived only from current editor state. */
.fm-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--erp-spacing-md, 12px);
}
@media (max-width: 720px) {
  .fm-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fm-kpi {
  background: var(--erp-bg-subtle, #f8fafc);
  border: 1px solid var(--erp-border-light, #e2e8f0);
  border-radius: var(--erp-radius, 3px);
  padding: var(--erp-spacing-md, 12px);
}
.fm-kpi-label {
  font-size: var(--erp-font-size-xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--erp-text-muted, #64748b);
}
.fm-kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--erp-text, #0f172a);
  line-height: 1.1;
  margin-top: 2px;
}
.fm-kpi-sub {
  font-size: var(--erp-font-size-xs, 10px);
  color: var(--erp-text-light, #94a3b8);
  margin-top: 2px;
}

/* Setup + Load Data toolbars: horizontal action clusters that wrap. */
.fm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--erp-spacing-md, 12px);
}
.fm-toolbar-label {
  font-size: var(--erp-font-size-sm, 11px);
  font-weight: 600;
  color: var(--erp-text-muted, #64748b);
}
.fm-load-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

/* Canvas: three columns — source rows | SVG gutter | target rows.
   The gutter width and the row metrics below MUST stay in sync with the
   Alpine canvas* constants (canvasColumnGap=240, canvasRowTopOffset=16,
   canvasRowHeight=32) so the SVG link endpoints line up with DOM rows. */
.fm-canvas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px minmax(0, 1fr);
  align-items: start;
  overflow-x: auto;
}
.fm-canvas-col-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  height: 34px;
  padding: 0 8px;
}
.fm-canvas-col-title {
  font-size: var(--erp-font-size-sm, 11px);
  font-weight: 700;
  color: var(--erp-text, #0f172a);
  margin: 0;
  text-transform: none;
}
.fm-canvas-col-count {
  font-size: var(--erp-font-size-xs, 10px);
  color: var(--erp-text-muted, #64748b);
  white-space: nowrap;
}
/* padding-top MUST equal canvasRowTopOffset (16px). */
.fm-canvas-rows { padding-top: 16px; }
.fm-canvas-gutter { align-self: stretch; }
.fm-canvas-gutter svg { display: block; width: 240px; }
/* Each row height MUST equal canvasRowHeight (32px); rows are contiguous
   (no inter-row gap) so row-center i = 16 + i*32 + 16. */
.fm-canvas-row {
  height: 32px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  border: 1px solid var(--erp-border-light, #e2e8f0);
  border-radius: var(--erp-radius, 3px);
  background: var(--erp-bg-card, #fff);
  font-size: 12px;
}
.fm-canvas-rows--source .fm-canvas-row { cursor: grab; }
.fm-canvas-row--mapped {
  background: var(--erp-bg-subtle, #f8fafc);
  cursor: pointer;
}
/* Mapped source rows are click/keyboard-selectable — pointer must win over
   the source column's grab cursor (higher specificity above). */
.fm-canvas-rows--source .fm-canvas-row--mapped { cursor: pointer; }
.fm-canvas-row--unmapped { opacity: 0.55; }
.fm-canvas-row--selected {
  border-color: var(--erp-ai, #6366f1);
  background: var(--erp-ai-bg, #eef2ff);
}
.fm-canvas-row:focus-visible {
  outline: 2px solid var(--erp-ai, #6366f1);
  outline-offset: 1px;
}
.fm-canvas-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.fm-canvas-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.fm-type-chip {
  font-size: 10px;
  font-weight: 600;
  color: var(--erp-text-muted, #64748b);
  background: var(--erp-border-light, #eef1f5);
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.fm-canvas-unmapped-tag {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--erp-text-light, #94a3b8);
}
.fm-canvas-empty {
  padding: var(--erp-spacing-lg, 16px);
  text-align: center;
  color: var(--erp-text-muted, #64748b);
  font-size: var(--erp-font-size-sm, 11px);
}

/* Canvas legend — accepted-mapping links are solid slate. */
.fm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 10px;
  font-size: 10px;
  color: var(--erp-text-muted, #64748b);
}
.fm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.fm-legend-swatch--accepted {
  display: inline-block;
  width: 22px;
  border-top: 2px solid #64748b;
}
.fm-legend-swatch--selected {
  display: inline-block;
  width: 22px;
  border-top: 2px solid #0f172a;
}
/* Pending AI suggestions draw as dashed indigo links (AI-originated). */
.fm-legend-swatch--pending {
  display: inline-block;
  width: 22px;
  border-top: 2px dashed var(--erp-ai, #6366f1);
}

/* ============================================================
   AI Review Queue (PR 5 — Task 9, read-only rollout stage)
   Cards render the canonical reviewQueue projection. Indigo (--erp-ai*)
   marks AI-originated affordances (confidence/origin chips, the selected
   card); card chrome stays on the platform theme. Decision buttons are
   enabled through the audited queue decision adapter.
   ============================================================ */
.fm-queue-count {
  display: inline-block;
  margin-left: 6px;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--erp-ai-bg, #eef2ff);
  color: var(--erp-ai-text, #4338ca);
  font-size: var(--erp-font-size-xs, 10px);
  font-weight: 700;
  text-align: center;
}
.fm-queue-note {
  margin: 0 0 var(--erp-spacing-md, 12px);
  font-size: var(--erp-font-size-sm, 11px);
  color: var(--erp-text-muted, #64748b);
}
.fm-queue-empty {
  padding: var(--erp-spacing-lg, 16px);
  text-align: center;
  color: var(--erp-text-muted, #64748b);
  font-size: var(--erp-font-size-sm, 11px);
}
.fm-queue-list {
  display: flex;
  flex-direction: column;
  gap: var(--erp-spacing-sm, 8px);
}
.fm-queue-item {
  border: 1px solid var(--erp-border-light, #e2e8f0);
  border-radius: var(--erp-radius, 3px);
  background: var(--erp-bg-card, #fff);
}
.fm-queue-item--selected {
  border-color: var(--erp-ai, #6366f1);
  background: var(--erp-ai-bg, #eef2ff);
}
.fm-queue-item--decided { opacity: 0.65; }
.fm-queue-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: var(--erp-spacing-sm, 8px);
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  text-align: left;
  color: var(--erp-text, #0f172a);
}
.fm-queue-item-header:focus-visible {
  outline: 2px solid var(--erp-ai, #6366f1);
  outline-offset: 1px;
}
.fm-queue-item-fields {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-weight: 600;
}
.fm-queue-item-source,
.fm-queue-item-target {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fm-queue-item-arrow {
  color: var(--erp-text-light, #94a3b8);
  font-size: 10px;
  flex-shrink: 0;
}
/* Screen-reader-only text (visually hidden, kept in the accessible name).
   Used for the "to" between a queue card's source and target field names —
   the arrow icon between them is aria-hidden, so without it the two names
   read adjacent with no direction. position:absolute removes it from the
   inline-flex flow, so the visual layout is untouched. */
.fm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.fm-queue-item-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  flex-shrink: 0;
}
.fm-queue-chip {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 9px;
  white-space: nowrap;
  background: var(--erp-border-light, #eef1f5);
  color: var(--erp-text-muted, #64748b);
}
.fm-queue-chip--confidence,
.fm-queue-chip--origin {
  background: var(--erp-ai-bg, #eef2ff);
  color: var(--erp-ai-text, #4338ca);
}
.fm-queue-chip--state {
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.fm-queue-item-details {
  padding: 0 var(--erp-spacing-sm, 8px) var(--erp-spacing-sm, 8px);
  border-top: 1px solid var(--erp-border-light, #e2e8f0);
  font-size: 12px;
}
.fm-queue-detail-block { margin-top: var(--erp-spacing-sm, 8px); }
.fm-queue-detail-label {
  font-size: var(--erp-font-size-xs, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--erp-text-muted, #64748b);
  margin-bottom: 2px;
}
.fm-queue-reasoning,
.fm-queue-origins {
  margin: 0;
  padding-left: 18px;
  list-style: disc;
}
.fm-queue-reasoning li,
.fm-queue-origins li { margin: 1px 0; }
.fm-queue-reasoning-empty {
  color: var(--erp-text-light, #94a3b8);
  font-style: italic;
}
/* Non-direct transformations get a warning-tinted callout (not indigo —
   the warning is about the mapping's mechanics, not its AI origin). */
.fm-queue-transform {
  padding: var(--erp-spacing-xs, 4px) var(--erp-spacing-sm, 8px);
  border: 1px solid var(--erp-warning, #f59e0b);
  border-radius: var(--erp-radius, 3px);
  background: var(--erp-warning-bg, #fef3c7);
  color: var(--erp-warning-text, #92400e);
}
.fm-queue-actions {
  display: flex;
  align-items: center;
  gap: var(--erp-spacing-sm, 8px);
  margin-top: var(--erp-spacing-md, 12px);
}
.fm-queue-decision-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--erp-spacing-xs, 4px) var(--erp-spacing-md, 12px);
  border-radius: var(--erp-radius, 3px);
  border: 1px solid var(--erp-border, #cbd5e1);
  background: var(--erp-bg-subtle, #f8fafc);
  color: var(--erp-text-muted, #64748b);
  font-size: var(--erp-font-size-sm, 11px);
  font-weight: 700;
}
.fm-queue-decision-btn:focus-visible {
  outline: 2px solid var(--erp-ai, #6366f1);
  outline-offset: 2px;
}
.fm-queue-decision-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.fm-queue-bulk-actions {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--erp-spacing-sm, 8px);
  margin-bottom: var(--erp-spacing-md, 12px);
}
.fm-queue-bulk-confirm {
  position: absolute;
  z-index: 2;
  top: calc(100% + 4px);
  left: 0;
  min-width: 260px;
  padding: var(--erp-spacing-md, 12px);
  border: 1px solid var(--erp-border, #cbd5e1);
  border-radius: var(--erp-radius, 3px);
  background: var(--erp-bg-card, #fff);
  box-shadow: var(--erp-shadow-md, 0 4px 12px rgb(15 23 42 / 15%));
}
.fm-queue-bulk-confirm p { margin: 0; font-size: var(--erp-font-size-sm, 11px); }

.fm-queue-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--erp-spacing-sm, 8px);
  margin-bottom: var(--erp-spacing-md, 12px);
}
.fm-queue-tool-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: var(--erp-spacing-xs, 4px) var(--erp-spacing-md, 12px);
  border-radius: var(--erp-radius, 3px);
  border: 1px solid var(--erp-border, #cbd5e1);
  background: var(--erp-bg-subtle, #f8fafc);
  color: var(--erp-text-muted, #64748b);
  font-size: var(--erp-font-size-sm, 11px);
  font-weight: 700;
}
.fm-queue-tool-btn:focus-visible {
  outline: 2px solid var(--erp-ai, #6366f1);
  outline-offset: 2px;
}
.fm-queue-tool-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Respect the user's reduced-motion preference by removing nonessential
   transitions within the .fm-* scope. The root scroller is html (Tailwind's
   scroll-smooth), not .fm-page, and scroll-behavior does not inherit — so it
   needs its own override; this stylesheet only loads on this page. */
@media (prefers-reduced-motion: reduce) {
  html.scroll-smooth {
    scroll-behavior: auto !important;
  }

  .fm-page *,
  .fm-page *::before,
  .fm-page *::after {
    transition: none !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}