/* ============================================================================
   09-progress.css — R4 — Global ERP progress / loading UX
   A clean centered progress modal for important operations + a compact
   synchronization activity indicator in the top-right status area.
   Uses ONLY existing design tokens (01-variables.css) and the existing modal
   language (05-components.css). No foreign design system. Additive — no
   existing selector is overridden.
   ========================================================================== */

/* ── Centered overlay (distinct from .modal-overlay which top-aligns) ─────── */
.erp-progress-overlay{
  position:fixed; inset:0; z-index:9500;              /* above modals (9000), below toasts (9999) */
  display:flex; align-items:center; justify-content:center;
  padding:24px 16px; background:rgba(28,37,32,.42);
  -webkit-backdrop-filter:saturate(120%) blur(1px); backdrop-filter:saturate(120%) blur(1px);
}
.erp-progress-overlay[hidden]{ display:none !important; }

.erp-progress-card{
  background:var(--card,#fffdf8); color:var(--text,#1c2520);
  border:1px solid var(--line,#d9d3c6); border-radius:14px;
  box-shadow:var(--shadow,0 16px 40px rgba(33,38,35,.10)), 0 24px 70px rgba(0,0,0,.28);
  width:100%; max-width:440px; overflow:hidden;
  font-family:inherit;
  animation:erp-progress-in .16s ease-out;
}
@keyframes erp-progress-in{ from{ opacity:0; transform:translateY(6px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .erp-progress-card{ animation:none; }
}

.erp-progress-head{ padding:18px 20px 6px; }
.erp-progress-title{ font-size:1.02rem; font-weight:650; letter-spacing:.1px; margin:0; color:var(--text,#1c2520); }
.erp-progress-sub{ font-size:.84rem; color:var(--muted,#68736d); margin:4px 0 0; line-height:1.35; }

.erp-progress-body{ padding:10px 20px 18px; }

/* ── The bar ──────────────────────────────────────────────────────────────── */
.erp-progress-track{
  position:relative; height:8px; border-radius:999px; overflow:hidden;
  background:color-mix(in srgb, var(--line,#d9d3c6) 60%, transparent);
  background:var(--line,#d9d3c6);
  margin:8px 0 6px;
}
.erp-progress-fill{
  position:absolute; inset:0 auto 0 0; height:100%; width:0%;
  border-radius:999px; background:var(--green,#167a4a);
  transition:width .28s ease;
}
/* Indeterminate: a travelling sliver, NO width/percent semantics. */
.erp-progress-track.is-indeterminate .erp-progress-fill{
  width:34%; inset:0 auto 0 -34%;
  animation:erp-progress-slide 1.15s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes erp-progress-slide{
  0%{ left:-40%; } 60%{ left:100%; } 100%{ left:100%; }
}
@media (prefers-reduced-motion:reduce){
  .erp-progress-track.is-indeterminate .erp-progress-fill{ animation-duration:2.2s; }
}
/* Success / error tint the fill (state is NOT conveyed by colour alone — see label + icon). */
.erp-progress-card.is-done   .erp-progress-fill{ background:var(--green-dark,#0f5f39); width:100% !important; animation:none; left:0; }
.erp-progress-card.is-error  .erp-progress-fill{ background:var(--red,#b83b3b); animation:none; }

.erp-progress-meta{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  font-size:.8rem; color:var(--muted,#68736d); min-height:1.1em;
}
.erp-progress-count{ font-variant-numeric:tabular-nums; }
.erp-progress-pct{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--text,#1c2520); }

/* ── Stage list ───────────────────────────────────────────────────────────── */
.erp-progress-stages{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.erp-progress-stage{
  display:flex; align-items:center; gap:10px; padding:5px 2px;
  font-size:.86rem; color:var(--muted,#68736d);
}
.erp-progress-stage .erp-stage-mark{
  flex:0 0 auto; width:18px; height:18px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line,#d9d3c6); background:transparent;
  font-size:.72rem; line-height:1; color:var(--muted,#68736d);
}
.erp-progress-stage .erp-stage-label{ flex:1 1 auto; }
.erp-progress-stage .erp-stage-note{ font-size:.76rem; color:var(--muted,#68736d); }

/* pending (muted) is the default above. active + done below. */
.erp-progress-stage.is-active{ color:var(--text,#1c2520); font-weight:600; }
.erp-progress-stage.is-active .erp-stage-mark{
  border-color:var(--green,#167a4a); color:var(--green,#167a4a);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--green,#167a4a) 16%, transparent);
}
.erp-progress-stage.is-active .erp-stage-mark::after{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--green,#167a4a);
  animation:erp-stage-pulse 1s ease-in-out infinite;
}
@keyframes erp-stage-pulse{ 0%,100%{ transform:scale(.7); opacity:.55; } 50%{ transform:scale(1); opacity:1; } }
@media (prefers-reduced-motion:reduce){ .erp-progress-stage.is-active .erp-stage-mark::after{ animation:none; } }
.erp-progress-stage.is-done{ color:var(--text,#1c2520); }
.erp-progress-stage.is-done .erp-stage-mark{
  border-color:var(--green,#167a4a); background:var(--green,#167a4a); color:#fff;
}
.erp-progress-stage.is-done .erp-stage-mark::after{ content:"\2713"; font-size:.72rem; font-weight:700; }
.erp-progress-stage.is-error .erp-stage-mark{ border-color:var(--red,#b83b3b); color:var(--red,#b83b3b); }
.erp-progress-stage.is-error .erp-stage-mark::after{ content:"\00d7"; font-size:.9rem; font-weight:700; }

/* ── Footer (status line + optional cancel) ───────────────────────────────── */
.erp-progress-foot{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 20px 16px; border-top:1px solid var(--line,#d9d3c6); margin-top:14px;
}
.erp-progress-foot[hidden]{ display:none; }
.erp-progress-status{ font-size:.84rem; display:inline-flex; align-items:center; gap:7px; }
.erp-progress-status .erp-status-ico{ font-weight:700; }
.erp-progress-card.is-done  .erp-progress-status{ color:var(--green-dark,#0f5f39); }
.erp-progress-card.is-error .erp-progress-status{ color:var(--red,#b83b3b); }
.erp-progress-cancel{
  appearance:none; cursor:pointer; font:inherit; font-size:.82rem;
  padding:7px 14px; border-radius:var(--ctrl-radius,8px);
  border:1px solid var(--line,#d9d3c6); background:var(--panel,#fffdf8); color:var(--text,#1c2520);
}
.erp-progress-cancel:hover{ background:color-mix(in srgb, var(--line,#d9d3c6) 30%, var(--panel,#fffdf8)); }
.erp-progress-cancel:focus-visible{ outline:2px solid var(--green,#167a4a); outline-offset:2px; }
.erp-progress-cancel[hidden]{ display:none; }

/* ── Narrow viewport ──────────────────────────────────────────────────────── */
@media (max-width:520px){
  .erp-progress-card{ max-width:100%; }
  .erp-progress-head{ padding:16px 16px 4px; }
  .erp-progress-body{ padding:8px 16px 16px; }
  .erp-progress-foot{ padding:10px 16px 14px; flex-wrap:wrap; }
}

/* ============================================================================
   Compact top-right synchronization activity indicator.
   Sits next to #cloudSyncIndicator. Shown ONLY while there are genuine pending
   OUTBOUND mutations (driven off the real sync queue) — never for hydration.
   ========================================================================== */
.erp-sync-activity{
  display:inline-flex; align-items:center; gap:7px; vertical-align:middle;
  margin-left:8px; font-size:.76rem; color:var(--muted,#68736d);
  max-width:180px;
}
.erp-sync-activity[hidden]{ display:none !important; }
.erp-sync-activity .erp-sync-label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.erp-sync-activity .erp-sync-count{ font-variant-numeric:tabular-nums; font-weight:600; color:var(--text,#1c2520); }
.erp-sync-activity .erp-sync-bar{
  position:relative; width:46px; height:4px; border-radius:999px; overflow:hidden;
  background:var(--line,#d9d3c6); flex:0 0 auto;
}
.erp-sync-activity .erp-sync-bar::after{
  content:""; position:absolute; top:0; bottom:0; left:-40%; width:40%;
  border-radius:999px; background:var(--green,#167a4a);
  animation:erp-progress-slide 1.05s cubic-bezier(.4,0,.2,1) infinite;
}
@media (prefers-reduced-motion:reduce){
  .erp-sync-activity .erp-sync-bar::after{ animation-duration:2.2s; }
}
@media (max-width:640px){
  .erp-sync-activity{ max-width:120px; }
  .erp-sync-activity .erp-sync-label{ display:none; }
}