/* ================================================================
   Resayil — LDRS loaders (Phase 24.12 Plan 03)
   ----------------------------------------------------------------
   Swaps Frappe's default grey gear spinner for LDRS web components
   tinted the Resayil accent. The LDRS custom elements (<l-ring>,
   <l-pulsar>, <l-dot-pulse>) are registered globally by rs-motion.js
   (Phase 24.11 Plan 01) — this file only (a) hides the vanilla
   Frappe spinners, (b) styles the LDRS host wrappers rs-loaders.js
   injects, and (c) ships a pure-CSS fallback spinner for users in
   prefers-reduced-motion mode or when the LDRS CDN fails to load.

   Kill-switch (JS side): window.RESAYIL_DISABLE_LOADERS = true;
   ================================================================ */

/* -------------------------------------------------------------
   1. Hide Frappe's own spinners so they never double-render.
   Scoped to `body` so the rules win against Frappe's own defaults
   without leaking into portal shells that don't share the Desk
   selector chain. The `!important` is required because Frappe
   injects inline `style="display:block"` on some of these at run
   time (e.g. .freeze-spinner on route change).
   ------------------------------------------------------------- */
body .freeze .freeze-spinner,
body .loading-indicator,
body .spinner.spinner-sm,
body .page-title .indicator-pill.working img,
body .standard-actions .working-spinner,
body .btn-group > .btn.working > .fa-spinner,
body .btn-working-inline .fa-spinner {
  display: none !important;
}

/* -------------------------------------------------------------
   2. Generic LDRS host wrapper. rs-loaders.js injects
   <div class="rs-loader-host" data-rs-loader="ring|pulsar|dot-pulse">
   containing the actual LDRS custom element. This rule gives the
   wrapper a predictable box model so inline mounts (e.g. inside a
   button label) and block mounts (list rows, freeze overlays)
   both look right out of the box.
   ------------------------------------------------------------- */
.rs-loader-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  color: var(--rs-accent);
  line-height: 1;
}
.rs-loader-host[data-rs-variant="block"] {
  display: flex;
  width: 100%;
  min-height: 120px;
}

/* -------------------------------------------------------------
   3. Tint the LDRS custom elements themselves. LDRS reads both
   the `color` attribute and the `--uib-color` CSS custom property
   at construction time; binding both to --rs-accent means the
   loader colour follows the theme (light vs dark) automatically.
   ------------------------------------------------------------- */
l-ring,
l-pulsar,
l-dot-pulse {
  --uib-color: var(--rs-accent);
  color: var(--rs-accent);
  display: inline-flex;
  line-height: 1;
}

/* -------------------------------------------------------------
   4. Tidy Frappe's freeze overlay. We don't inject any content
   via CSS (JS handles that), but we do ensure the .freeze-message
   container is a clean flex row so the JS-injected <l-ring> and
   any sibling text span line up neatly.
   ------------------------------------------------------------- */
body .freeze {
  position: relative;
}
body .freeze .freeze-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rs-space-3);
  font-family: var(--rs-font-sans);
  color: var(--rs-fg);
}

/* -------------------------------------------------------------
   5. Pure-CSS fallback spinner. Used when either:
   - the user has prefers-reduced-motion enabled (we skip the
     LDRS custom element entirely to avoid the GPU animation), or
   - the LDRS CDN failed to load (rs-loaders.js swaps the fallback
     in via makeCssFallback()).
   Copied verbatim from the showcase §8 block (rs-ui-showcase.css
   lines 571-581) and renamed with the rs- prefix for production.
   ------------------------------------------------------------- */
.rs-css-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--rs-border);
  border-top-color: var(--rs-accent);
  border-radius: 50%;
  animation: rs-spin 0.75s linear infinite;
  box-sizing: border-box;
  display: inline-block;
}
@keyframes rs-spin {
  to { transform: rotate(360deg); }
}

/* -------------------------------------------------------------
   6. Reduced-motion handling. We freeze the CSS fallback
   (animation: none) and hide the LDRS web components outright;
   rs-loaders.js also swaps to makeCssFallback() at mount time,
   so the .rs-css-spinner inside the host stays visible as a
   static ring that conveys "in progress" without motion.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rs-css-spinner {
    animation: none;
  }
  l-ring,
  l-pulsar,
  l-dot-pulse {
    display: none;
  }
  l-ring + .rs-css-fallback,
  l-pulsar + .rs-css-fallback,
  l-dot-pulse + .rs-css-fallback {
    display: inline-flex;
  }
}