/* ==========================================================================
   Marketplace inbound-shipment sync — platform distinction + sync UI.
   Loaded after styles.css; reuses its design tokens (--muted, --line, …).
   Kept as a separate file so it never collides with the core stylesheet.
   ========================================================================== */

/* --- Platform pill (Amazon / Walmart / Manual) ---------------------------- */
.plat {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .03em;
}
.plat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.plat-amazon  { background: #fdefe0; color: #c2410c; }   /* Amazon — smile orange */
.plat-walmart { background: #e5efff; color: #0053e2; }   /* Walmart — true blue   */
.plat-manual  { background: #eef1f5; color: #64748b; }   /* hand-entered — neutral */

/* Stacked trailing tags on a row card: platform pill above the status badge. */
.rc-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: 0 0 auto; }

/* --- Platform filter chips (a quieter second filter row) ------------------ */
.filters-plat { margin-top: -6px; }
.chip .plat { padding: 0; background: none; }   /* allow a pill-dot inside a chip if ever needed */

/* --- Sync toolbar --------------------------------------------------------- */
.sync-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 2px 0 var(--s3);
}
.sync-bar .last-sync { font-size: .8125rem; color: var(--muted); }
.sync-bar form { margin: 0; }

/* Spin the icon while a sync POST is in flight (progressive enhancement). */
.btn[data-syncing] svg { animation: mp-spin 1s linear infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }

/* --- Detail page: platform block ------------------------------------------ */
.detail-plat { display: inline-flex; align-items: center; gap: 8px; }
.detail-plat .ext-id { font-variant-numeric: tabular-nums; color: var(--ink-soft); }