/* ══════════════════════════════════════════════════════════════════════════════
   ViyaBook — viya-loader.css
   THE ONE LOADING STYLE (task 1). Loaded on every page, last in the chain.
   ------------------------------------------------------------------------------
   Before this file the app had SIX different loading looks, each defined ad-hoc in
   a different page's <style> block:
       @keyframes spin        (23 copies)   @keyframes loaderSpin  (4 copies)
       @keyframes viya-shimmer (6 copies)   @keyframes shimmer     (2 copies)
       @keyframes pulse        (5 copies)   @keyframes al-spin     (2 copies)
   …so Login span differently from Checkout, which span differently from Settings,
   and the skeleton pages shimmered instead. Nothing matched.

   This file does NOT rewrite any page's markup. It redefines the APPEARANCE of
   every loader element that already exists, so all of them render as the same
   ViyaBook loader: an ocean-blue ring on a foam track, and a foam→white shimmer
   for skeletons. One motion, one colour, one timing, everywhere.

   Brand constants (unchanged, taken from the existing theme):
       ocean blue  #185FA5      foam   #EEF4FA
       abyss navy  #0C1E3E      coral  #FF6A4D
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --viya-load-ring:  #185FA5;   /* ocean blue — the moving arc      */
  --viya-load-track: #EEF4FA;   /* foam — the stationary ring       */
  --viya-load-size:  34px;
  --viya-load-width: 3px;
  --viya-load-speed: 720ms;
}
html.viya-dv, html[data-theme="dark"] {
  --viya-load-ring:  #4f9bff;   /* lighter blue reads on abyss navy */
  --viya-load-track: rgba(148,163,184,0.18);
}

/* ── THE canonical spin. One keyframe name the whole app can rely on. ────────── */
@keyframes viya-spin { to { transform: rotate(360deg); } }

/* ── THE canonical spinner ───────────────────────────────────────────────────────
   Every spinner selector already used anywhere in the app is listed here and given
   the identical treatment. Adding a page's own class to this list is all it takes
   to bring that page in line — no markup change needed. */
.viya-spinner,
.spinner,
.loader,
.loading-spinner,
.viya-page-loader .spinner,
.paper-loading-overlay .spinner,
.mira-loading .spinner,
.biz-loading .spinner,
.btn-spinner,
.ti-loader {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: var(--viya-load-size) !important;
  height: var(--viya-load-size) !important;
  border: var(--viya-load-width) solid var(--viya-load-track) !important;
  border-top-color: var(--viya-load-ring) !important;
  border-radius: 50% !important;
  animation: viya-spin var(--viya-load-speed) linear infinite !important;
  /* kill any inherited glyph/text from icon-font spinners (.ti-loader) */
  font-size: 0 !important;
  color: transparent !important;
  background: none !important;
}

/* Inside a button the ring must sit on the button's line, sized to the text. */
button .viya-spinner,
button .spinner,
button .loader,
button .btn-spinner,
.btn .viya-spinner,
.btn .spinner {
  --viya-load-size: 16px;
  --viya-load-width: 2px;
  border-top-color: currentColor !important;
  border-color: rgba(255,255,255,0.32) !important;
  border-top-color: #fff !important;
  vertical-align: -3px !important;
  margin-inline-end: 8px !important;
}

/* ── THE canonical shimmer (skeleton cells) ──────────────────────────────────── */
@keyframes viya-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.viya-shimmer,
.skel-cell,
.skeleton,
.vss-bar,
.vss-nav,
.vss-logo {
  background: linear-gradient(90deg, #EEF4FA 25%, #ffffff 50%, #EEF4FA 75%) !important;
  background-size: 200% 100% !important;
  animation: viya-shimmer 1.4s ease-in-out infinite !important;
  border-radius: 8px;
}
html.viya-dv .viya-shimmer, html[data-theme="dark"] .viya-shimmer,
html.viya-dv .skel-cell,    html[data-theme="dark"] .skel-cell,
html.viya-dv .skeleton,     html[data-theme="dark"] .skeleton,
html.viya-dv .vss-bar,      html[data-theme="dark"] .vss-bar,
html.viya-dv .vss-nav,      html[data-theme="dark"] .vss-nav,
html.viya-dv .vss-logo,     html[data-theme="dark"] .vss-logo {
  background: linear-gradient(90deg, #12233f 25%, #1c3557 50%, #12233f 75%) !important;
  background-size: 200% 100% !important;
}

/* ── Full-page loading overlay (auth pages, handlers, paper pages) ───────────── */
.viya-page-loader,
.paper-loading-overlay,
.mira-loading,
.biz-loading {
  position: fixed !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  background: #f5f8fd !important;
  z-index: 9998 !important;
}
html.viya-dv .viya-page-loader,   html[data-theme="dark"] .viya-page-loader,
html.viya-dv .paper-loading-overlay, html[data-theme="dark"] .paper-loading-overlay,
html.viya-dv .mira-loading,       html[data-theme="dark"] .mira-loading,
html.viya-dv .biz-loading,        html[data-theme="dark"] .biz-loading {
  background: #0a0f1e !important;
}

/* The message under a loader — same voice everywhere. */
.loading-msg,
.viya-page-loader .msg,
.biz-loading .msg {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.01em;
}
html.viya-dv .loading-msg, html[data-theme="dark"] .loading-msg { color: #94a3b8; }

/* Respect the OS "reduce motion" setting — hold a static ring rather than spin. */
@media (prefers-reduced-motion: reduce) {
  .viya-spinner, .spinner, .loader, .loading-spinner, .btn-spinner, .ti-loader,
  .viya-shimmer, .skel-cell, .skeleton, .vss-bar, .vss-nav, .vss-logo {
    animation: none !important;
  }
}