/* =====================================================================
   AEROSOPHIA ROTOR LOADERS — brand-consistent loading animation
   ---------------------------------------------------------------------
   Single source of truth that re-skins every generic loading spinner in
   the platform into the Aerosophia rotating rotor mark
   (apps/static/assets/images/aerosophia/rotor-mark.png).

   This file is intentionally loaded LAST in includes/styles.html so its
   rules win the cascade over Bootstrap, DataTables, Font Awesome and the
   legacy Datta-Able theme without having to touch the 70+ call sites that
   render a spinner. New code SHOULD use the .aero-loader helper below,
   but legacy `.spinner-border`, `.spinner-grow`, DataTables processing,
   `.fa-spin` icons and the global preloader are all converted in place.

   This file is self-contained: it ships its own `aero-rotor-spin`
   keyframe so it also works on standalone pages (e.g. the RT-video share
   viewers) that do not load aerosophia-ds.css.
   ===================================================================== */

/* Reusable rotor token shared by every override below. */
:root {
  --aero-rotor-img: url('../images/aerosophia/rotor-mark.png');
  --aero-rotor-speed: 2.2s;
}

@keyframes aero-rotor-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   0 · First-class helper for new markup
   <span class="aero-loader"></span>            (inline, 1.5em)
   <span class="aero-loader aero-loader--sm"></span>
   <div class="aero-loader aero-loader--lg"></div>
   ------------------------------------------------------------------- */
.aero-loader {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  flex: 0 0 auto;
  vertical-align: -0.3em;
  background: var(--aero-rotor-img) center / contain no-repeat;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite;
}
.aero-loader--sm { width: 1em;   height: 1em;   vertical-align: -0.15em; }
.aero-loader--lg { width: 3rem;  height: 3rem;  vertical-align: middle; }
.aero-loader--xl { width: 4.5rem; height: 4.5rem; vertical-align: middle; }

/* Centered block loader for overlays / empty states. */
.aero-loader-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}

/* ---------------------------------------------------------------------
   1 · Bootstrap spinners  (.spinner-border / .spinner-grow)
   Used directly in templates and injected by dozens of JS modules,
   including inside table cells while their data loads.
   We keep Bootstrap's box-size but swap the border ring / growing dot
   for the rotor mark.
   ------------------------------------------------------------------- */
.spinner-border,
.spinner-grow {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--aero-rotor-img) center / contain no-repeat !important;
  color: transparent !important;           /* hide currentColor ring/dot */
  opacity: 1 !important;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite !important;
}
/* Preserve Bootstrap's default + small sizes. */
.spinner-border       { width: 2rem;  height: 2rem; }
.spinner-grow         { width: 2rem;  height: 2rem; }
.spinner-border-sm,
.spinner-grow-sm      { width: 1rem;  height: 1rem; }

/* ---------------------------------------------------------------------
   2 · Design-system .spinner  (aerosophia-ds.css §10 border ring)
   ------------------------------------------------------------------- */
.spinner:not(.dt-processing):not(.spinner-border):not(.spinner-grow) {
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--aero-rotor-img) center / contain no-repeat !important;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite !important;
}

/* ---------------------------------------------------------------------
   3 · DataTables processing indicator — "loading data into tables"
   Modern DataTables renders four pulsing dots inside
   `div.dt-processing > div:last-child`. Replace the dots with a single
   spinning rotor and keep the "Processing…" caption.
   ------------------------------------------------------------------- */
div.dt-processing > div:last-child,
div.dataTables_processing > div:last-child {
  width: 36px !important;
  height: 36px !important;
  margin: 8px auto 2px !important;
  background: var(--aero-rotor-img) center / contain no-repeat;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite;
}
div.dt-processing > div:last-child > div,
div.dataTables_processing > div:last-child > div {
  display: none !important;                /* hide the four dots */
}
/* Legacy DataTables that show only a text caption: prepend a rotor. */
div.dt-processing:not(:has(> div)),
div.dataTables_processing:not(:has(> div)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
div.dt-processing:not(:has(> div))::before,
div.dataTables_processing:not(:has(> div))::before {
  content: "";
  width: 32px;
  height: 32px;
  background: var(--aero-rotor-img) center / contain no-repeat;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite;
}

/* ---------------------------------------------------------------------
   4 · Font Awesome spinning icons (.fa-spin / .fa-pulse)
   The icon glyph (fa-spinner, fa-circle-notch, fa-sync, …) is replaced
   by the rotor mark; the glyph box stops spinning since the rotor inside
   its ::before now carries the rotation.
   ------------------------------------------------------------------- */
.fa-spin,
.fa-pulse {
  animation: none !important;
}
.fa-spin::before,
.fa-pulse::before {
  content: "" !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  background: var(--aero-rotor-img) center / contain no-repeat;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite;
}

/* ---------------------------------------------------------------------
   5 · Global Datta-Able page pre-loader (.loader-bg)
   The legacy thin top progress bar becomes a centered rotor overlay.
   ------------------------------------------------------------------- */
.loader-bg {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 255, 255, 0.65) !important;
  box-shadow: none !important;
}
.loader-bg .loader-track {
  width: 64px !important;
  height: 64px !important;
  overflow: visible !important;
  background: var(--aero-rotor-img) center / contain no-repeat;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite;
}
.loader-bg .loader-track .loader-fill,
.loader-bg .loader-track .loader-fill:before,
.loader-bg .loader-track .loader-fill:after {
  display: none !important;
}

/* ---------------------------------------------------------------------
   6 · Custom image-page overlay spinner (images.css .loading-overlay)
   The green fa icon spinner becomes a rotor.
   ------------------------------------------------------------------- */
.loading-overlay .spinner i {
  animation: none !important;
  color: transparent !important;
  position: relative;
}
.loading-overlay .spinner i::before {
  content: "" !important;
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--aero-rotor-img) center / contain no-repeat;
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite;
}

/* ---------------------------------------------------------------------
   7 · Multitemporal redesign helper (.mtx-spin) — defensive override.
   ------------------------------------------------------------------- */
.mtx-spin {
  animation: aero-rotor-spin var(--aero-rotor-speed) linear infinite !important;
}
.mtx-spin::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: var(--aero-rotor-img) center / contain no-repeat;
}

/* ---------------------------------------------------------------------
   8 · Respect reduced-motion: keep the rotor visible but stop spinning.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .aero-loader,
  .aero-loader--sm,
  .aero-loader--lg,
  .aero-loader--xl,
  .spinner-border,
  .spinner-grow,
  .spinner:not(.dt-processing),
  div.dt-processing > div:last-child,
  div.dataTables_processing > div:last-child,
  .fa-spin::before,
  .fa-pulse::before,
  .loader-bg .loader-track,
  .loading-overlay .spinner i::before,
  .mtx-spin {
    animation: none !important;
  }
}