/* Finovas Global - loading states (js/loading.js): the progress bar across the
   top of the window, the spinners that hold each section's place until its
   own data lands, and how real content comes in to replace them. Everything
   that moves animates transform/opacity only. */

/* ── Top progress bar ────────────────────────────────────── */
.fv-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 9999;
  overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease);
}
.fv-progress::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent, var(--brand) 35%,
    var(--brand-2) 80%, transparent);
  transform: translateX(-100%);
}
/* only animate while visible — an idle bar must cost nothing */
.fv-progress.on { opacity: 1; }
.fv-progress.on::before { animation: fvProgress 1.05s var(--ease) infinite; }
@keyframes fvProgress { to { transform: translateX(240%); } }

/* ── Spinners: each section spins until its own data lands ── */
.fv-spin {
  --fv-spin: 28px;
  display: inline-block; flex: 0 0 auto;
  width: var(--fv-spin); height: var(--fv-spin); border-radius: 50%;
  /* ~3px on a section spinner, 2px on the small ones (badge, quarter tile) */
  border: max(2px, calc(var(--fv-spin) / 9)) solid
    color-mix(in srgb, var(--brand) 16%, transparent);
  border-top-color: var(--brand);
  animation: fvSpin .8s linear infinite;
}
.nav-item .count .fv-spin { vertical-align: -1px; }
.fv-loading { display: flex; flex-direction: column; }
.fv-loading-body {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 24px;
  color: var(--text-soft); font-size: 13px; font-weight: 600;
  animation: fvFade .25s var(--ease) both;
}
.fv-loading-stat .stat-value { display: flex; align-items: center; min-height: 34px; }
.qtile .qval .fv-spin { margin: 5px 0 3px; }

/* ── Entrance ────────────────────────────────────────────── */
/* `backwards`, not `both`: once the animation ends the element's own styles
   must win again, or a card's hover lift (also a transform) stops working */
.fv-enter {
  animation: fvFadeUp .34s var(--ease) backwards;
  animation-delay: calc(var(--fv-i, 0) * var(--fv-step, 28ms));
}
/* the table on กล่องเอกสาร while the next page is on its way: the rows on
   screen fade back under a spinner (dimmed children, so the spinner itself
   stays at full strength) */
.fv-dim { position: relative; }
.fv-dim > * { opacity: .45; transition: opacity .15s var(--ease); }
.fv-dim::after {
  content: ""; position: absolute; left: 50%; top: min(50%, 140px);
  width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-top-color: var(--brand);
  animation: fvSpin .8s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  /* base.css cuts every animation to one .01ms run, which would leave the
     bar's stripe parked off-screen — show a still bar instead */
  .fv-progress::before { width: 100%; transform: none; opacity: .7; }
}