/* ===========================================================================
   iGO branded loader — self-contained styles + keyframes.
   Paired with igo-loader.js (window.igoLoader). Safe to load on any page:
   it never touches existing selectors and brings its own brand colors.

   The mark faithfully mirrors .app-logo-mark from igo-design-system.css
   ("iGO", Syne 700, letter-spacing -0.04em, underline bar) but the letters
   carry an animated brand-green shimmer and the bar runs an indeterminate
   sliding fill — the real "loading" motion.

   Brand greens are hard-coded (not var(--accent)) so the loader stays brand
   green across every theme and on the admin surface, exactly per spec:
   #0E7A62 (deep) -> #10B892 (mid) -> #3FE0C0 (light).
   =========================================================================== */

/* ---- core mark + bar (shared by overlay and inline) ---------------------- */
.igo-ld{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  -webkit-user-select:none; user-select:none;
  line-height:1;
}

/* the "iGO" lettermark — green gradient shimmering through the glyphs */
.igo-ld-mark{
  display:inline-block;
  font-family:var(--display,'Syne','Inter',system-ui,-apple-system,sans-serif);
  font-weight:700;
  font-size:23px;
  letter-spacing:-0.04em;
  line-height:1;
  background-image:linear-gradient(90deg,#0E7A62 0%,#10B892 26%,#3FE0C0 50%,#10B892 74%,#0E7A62 100%);
  background-size:200% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:igoLdShimmer 1.4s linear infinite;
}

/* underline track + indeterminate sliding fill */
.igo-ld-bar{
  position:relative;
  width:100%;
  min-width:38px;
  height:2.5px;
  border-radius:0;
  overflow:hidden;
  background:rgba(16,184,146,0.16);
}
.igo-ld-bar-fill{
  position:absolute;
  top:0; bottom:0; left:0;
  width:45%;
  border-radius:0;
  background:linear-gradient(90deg,rgba(63,224,192,0) 0%,#10B892 38%,#3FE0C0 62%,rgba(63,224,192,0) 100%);
  box-shadow:0 0 9px rgba(63,224,192,0.6),0 0 3px rgba(16,184,146,0.85);
  animation:igoLdSlide 1.4s cubic-bezier(.65,.02,.36,1) infinite;
  will-change:transform;
}

/* visually-hidden accessible label */
.igo-ld-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- size variants ------------------------------------------------------- */
.igo-ld--lg .igo-ld-mark{ font-size:48px; }
.igo-ld--lg{ gap:14px; }
.igo-ld--lg .igo-ld-bar{ height:3.5px; }

.igo-ld--sm{ gap:6px; }
.igo-ld--sm .igo-ld-mark{ font-size:15px; }
.igo-ld--sm .igo-ld-bar{ height:2px; min-width:26px; }

/* ---- overlay presentation (page transitions + full-page initial load) ---- */
.igo-ld-overlay{
  position:fixed;
  inset:0;
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse 60% 50% at 50% 44%,rgba(14,122,98,0.12),transparent 70%),rgba(24,27,33,0.56);
  -webkit-backdrop-filter:blur(7px) saturate(115%);
  backdrop-filter:blur(7px) saturate(115%);
  opacity:0;
  visibility:hidden;
  transition:opacity .22s ease,visibility 0s linear .22s;
}
.igo-ld-overlay.igo-ld-show{
  opacity:1;
  visibility:visible;
  transition:opacity .2s ease,visibility 0s linear 0s;
}
.igo-ld-overlay .igo-ld{ animation:igoLdRise .32s cubic-bezier(.2,.7,.2,1) both; }

/* ---- inline presentation (content regions: lists, grids, panels) --------- */
.igo-ld-inline{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:148px;
  padding:clamp(28px,7vh,64px) 16px;
  box-sizing:border-box;
}
.igo-ld-inline--sm{
  min-height:72px;
  padding:18px 12px;
}

/* ---- keyframes ----------------------------------------------------------- */
@keyframes igoLdShimmer{
  0%{ background-position:200% 50%; }
  100%{ background-position:0% 50%; }
}
@keyframes igoLdSlide{
  0%{ transform:translateX(-100%); }
  100%{ transform:translateX(240%); }
}
@keyframes igoLdRise{
  0%{ opacity:0; transform:translateY(7px) scale(.975); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes igoLdBreathe{
  0%,100%{ opacity:.42; }
  50%{ opacity:1; }
}

/* ---- reduced motion: gentle opacity pulse, no shimmer/slide -------------- */
@media (prefers-reduced-motion: reduce){
  .igo-ld-mark{
    background:none;
    -webkit-text-fill-color:#10B892;
    color:#10B892;
    animation:igoLdBreathe 1.8s ease-in-out infinite;
  }
  .igo-ld-bar-fill{
    left:12%; width:76%;
    transform:none;
    animation:igoLdBreathe 1.8s ease-in-out infinite;
  }
  .igo-ld-overlay .igo-ld{ animation:none; }
  .igo-ld-overlay{ transition:opacity .15s ease,visibility 0s linear .15s; }
}

/* ===========================================================================
   Text-replacement bridge — turn any element's loading text into the branded
   mark+bar with NO markup change. Add class "igo-ld-text" to an element, or it
   auto-applies to the admin console's existing .apm-loading placeholders (used
   for every list/queue/table loader in admin/index.html, including the ones the
   admin JS injects via innerHTML). Mark via ::before, sliding bar via ::after.
   =========================================================================== */
.igo-ld-text, .apm-loading{
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  min-height:64px;
  font-size:0 !important;
  color:transparent !important;
  line-height:1;
}
.igo-ld-text::before, .apm-loading::before{
  content:"iGO";
  font-family:var(--display,'Syne','Inter',system-ui,-apple-system,sans-serif);
  font-weight:700;
  font-size:22px;
  letter-spacing:-0.04em;
  line-height:1;
  background-image:linear-gradient(90deg,#0E7A62 0%,#10B892 26%,#3FE0C0 50%,#10B892 74%,#0E7A62 100%);
  background-size:200% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  animation:igoLdShimmer 1.4s linear infinite;
}
.igo-ld-text::after, .apm-loading::after{
  content:"";
  width:58px;
  height:3px;
  border-radius:0;
  background:linear-gradient(90deg,rgba(16,184,146,0.14) 0%,#10B892 38%,#3FE0C0 56%,rgba(16,184,146,0.14) 100%);
  background-size:220% 100%;
  box-shadow:0 0 8px rgba(63,224,192,0.5);
  animation:igoLdShimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .igo-ld-text::before, .apm-loading::before{
    background:none; -webkit-text-fill-color:#10B892; color:#10B892;
    animation:igoLdBreathe 1.8s ease-in-out infinite;
  }
  .igo-ld-text::after, .apm-loading::after{
    background:#10B892; animation:igoLdBreathe 1.8s ease-in-out infinite;
  }
}

/* ===== Skeleton placeholders — prebuilt block/table shapes while data loads ===== */
@keyframes igoSkSweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
.igo-sk{background:linear-gradient(100deg,rgba(255,255,255,0.045) 28%,rgba(63,224,192,0.13) 50%,rgba(255,255,255,0.045) 72%);background-size:200% 100%;animation:igoSkSweep 1.5s linear infinite;border-radius:0}
.igo-sk-ln{display:inline-block;height:11px;border-radius:0;vertical-align:middle}
.igo-sk-cir{border-radius:50%}
.igo-sk-row{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid rgba(255,255,255,0.06);border-radius:0;margin-bottom:8px}
.igo-sk-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px}
.igo-sk-lines{padding:6px 2px}
.igo-sk-lines>div{margin-bottom:13px}
.igo-sk-graph{display:flex;gap:30px;align-items:center;justify-content:center;opacity:.85}
@media (prefers-reduced-motion:reduce){.igo-sk{animation:none}}