/* your-admin/assets/css/loader.css
 * Circular page loader overlay.
 * - Hidden by default
 * - Show it by adding either:
 *      1) body[data-loading="true"]  (recommended)
 *      2) #pageLoader.active
 * - Colors follow your theme variables (light/dark)
 */

/* ---------- Theme-aware defaults & fallbacks ---------- */
:root{
  /* Use your palette when available, otherwise fall back */
  --loader-accent: var(--primary-color, #6366f1);          /* spinner color */
  --loader-track:  var(--bg-tertiary, rgba(0,0,0,.12));    /* ring track */
  --loader-text:   var(--text-primary, #222);

  /* OPAQUE overlay (light) — prevents background from showing at all */
  --loader-backdrop: rgba(255,255,255,1);
}
[data-theme="dark"]{
  --loader-track:  var(--bg-tertiary, rgba(255,255,255,.18));
  --loader-text:   var(--text-primary, #e5e7eb);

  /* Near-opaque overlay (dark) — visually solid without banding */
  --loader-backdrop: rgba(0,0,0,.98);
}

/* ---------- Overlay container ---------- */
#pageLoader{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--loader-backdrop);
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);

  /* hidden by default; enable via body[data-loading="true"] or .active */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
}

/* Show states */
body[data-loading="true"] #pageLoader,
#pageLoader.active{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ---------- Loader content ---------- */
#pageLoader .loader-wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 96px;
}

/* Pure-CSS circular spinner (conic-gradient + mask = crisp ring) */
#pageLoader .spinner{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, var(--loader-accent) 0 90deg, transparent 90deg 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation: loader-spin 900ms linear infinite;
  box-shadow: 0 0 0 1px var(--loader-track) inset; /* faint track */
}

/* Optional subtle pulsing dot in the center */
#pageLoader .dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--loader-accent);
  opacity: .9;
  animation: loader-pulse 900ms ease-in-out infinite;
}

/* Label text (optional) */
#pageLoader .loader-text{
  font-size: .9rem;
  line-height: 1.2;
  color: var(--loader-text);
  opacity: .9;
  user-select: none;
}

/* ---------- Size variants (optional) ---------- */
#pageLoader .spinner.sm{ width: 42px; height: 42px; }
#pageLoader .spinner.lg{ width: 72px; height: 72px; }

/* ---------- Animations ---------- */
@keyframes loader-spin{
  to{ transform: rotate(1turn); }
}
@keyframes loader-pulse{
  0%,100%{ transform: scale(.9); opacity:.6; }
  50%{ transform: scale(1.1); opacity:1; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  #pageLoader .spinner{ animation-duration: 1800ms; }
  #pageLoader .dot{ animation: none; }
}

/* ---------- Utility: keep overlay above any sticky headers/sidebars ---------- */
header, .sidebar, .nav, .topbar{
  /* nothing here; this comment is a reminder that #pageLoader is z-index: 9999 */
}