/* ============================================================
   VIDARIA SLEEK SPINNER — platform standard
   ------------------------------------------------------------
   The single, canonical loading spinner for the whole app.
   Replaces every legacy `Content/assets/spinner.gif` <img>.

   Derived verbatim from the Vidaria mockup
   (demo/css/sidebar.css .officer-popup-btn-spinner +
    demo/css/base.css @keyframes spin): a thin ring with a
   solid navy "head" that rotates.

   UNSCOPED on purpose — these classes must render identically
   in legacy mode, the Vidaria shell (body.vds-shell), AND on the
   login page (_Layout.cshtml). Token names fall back to literal
   hex so the spinner is correct even if tokens.css hasn't loaded.
   ============================================================ */

.gt-spinner {
  display: inline-block;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  border: 3px solid var(--vidaria-blue-pale, #e8f0f8);
  border-top-color: var(--vidaria-blue, #103255);
  border-radius: 50%;
  animation: gt-spin 0.8s linear infinite;
  /* a11y: respect reduced-motion */
  flex-shrink: 0;
}

/* Size modifiers */
.gt-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.gt-spinner--lg { width: 44px; height: 44px; border-width: 4px; }
.gt-spinner--xl { width: 60px; height: 60px; border-width: 5px; }

/* On-dark variant (e.g. inside the navy nav / brand buttons) */
.gt-spinner--inverse {
  border-color: rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
}

/* Centering wrapper — drop a .gt-spinner inside to center it in
   the available box (mirrors the old .loading-overlay usage). */
.gt-spinner-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  padding: 24px;
}

/* Optional label under a centered spinner */
.gt-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.gt-spinner-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-500, #6b7280);
  letter-spacing: 0.01em;
}

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

@media (prefers-reduced-motion: reduce) {
  .gt-spinner { animation-duration: 1.6s; }
}