/* ===== Interactive loader (owner 2026-11-04) =====================================================
   1) #glBoot  - full-screen brand loader while the system opens, fades out once the first screen draws
   2) .gl-view - in-page loader shown in #view while a screen loads its data (replaced by the screen)
   3) #glBar   - thin top progress bar while any API request takes longer than a moment
   4) .gl-frame - overlay over the accounting frame until it has loaded
   None of them catch clicks once hidden (display:none / pointer-events:none). */

#glBoot{position:fixed;inset:0;z-index:2147483000;display:grid;place-items:center;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,40%),#323a46 0,#242a33 38%,#161a20 100%);
  color:#fff;font-family:Cairo,system-ui,sans-serif;transition:opacity .45s ease,visibility .45s ease;overflow:hidden}
#glBoot.is-done{opacity:0;visibility:hidden;pointer-events:none}
#glBoot.is-done .gl-boot__card{transform:scale(.94)}
.gl-boot__card{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px;text-align:center;
  transition:transform .45s ease;width:min(360px,88vw)}
.gl-orbit{position:relative;width:156px;height:156px;display:grid;place-items:center}
.gl-orbit__ring{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 55%,#f7931e 80%,#ffc20e 100%);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 5px),#000 calc(100% - 4px));
  animation:gl-spin 1.15s linear infinite}
.gl-orbit__ring--2{inset:16px;opacity:.45;animation-duration:1.9s;animation-direction:reverse;
  background:conic-gradient(from 90deg,transparent 0 60%,#ffc20e 100%)}
.gl-orbit__plane{position:absolute;inset:-12px;animation:gl-spin 3.2s linear infinite}
.gl-orbit__plane svg{position:absolute;top:0;left:50%;width:22px;height:22px;margin-left:-11px;color:#ffc20e;
  transform:rotate(45deg);filter:drop-shadow(0 0 6px rgba(255,194,14,.6))}
.gl-orbit__logo{width:74px;height:74px;object-fit:contain;animation:gl-breathe 2.2s ease-in-out infinite;
  transition:transform .2s ease}
.gl-boot__name{font-size:1.35rem;font-weight:800;letter-spacing:.2px}
.gl-boot__name small{display:block;font-size:.8rem;font-weight:700;color:#f7931e;margin-top:2px}
.gl-boot__track{width:100%;height:6px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
.gl-boot__fill{height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,#f7931e,#ffc20e);
  box-shadow:0 0 12px rgba(247,147,30,.7);transition:width .35s ease}
.gl-boot__row{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:.86rem;color:#c8ced8;gap:12px}
.gl-boot__msg{transition:opacity .25s ease}
.gl-boot__pct{font-variant-numeric:tabular-nums;font-weight:800;color:#fff;direction:ltr}

/* in-page loader (inside #view) */
.gl-view{display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(28px,8vh,72px) 16px;
  font-family:Cairo,system-ui,sans-serif;animation:gl-in .25s ease both}
.gl-view .gl-orbit{width:76px;height:76px}
.gl-view .gl-orbit__ring{-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px))}
.gl-view .gl-orbit__ring--2{inset:10px}
.gl-view .gl-orbit__plane{inset:-9px}
.gl-view .gl-orbit__plane svg{width:16px;height:16px;margin-left:-8px;color:#f7931e;filter:none}
.gl-view__dot{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,#f7931e,#ffc20e);animation:gl-breathe 1.4s ease-in-out infinite}
.gl-view__t{font-weight:800;color:#242a33;font-size:1rem}
.gl-view__s{color:#6b7280;font-size:.85rem;min-height:1.3em}
.gl-view__skel{display:grid;gap:10px;width:min(720px,100%);margin-top:10px}
.gl-view__skel i{display:block;height:54px;border-radius:12px;
  background:linear-gradient(90deg,#f1f3f6 25%,#e6e9ee 50%,#f1f3f6 75%);background-size:200% 100%;animation:gl-shine 1.2s ease-in-out infinite}
.gl-view__skel i:nth-child(2){width:86%;animation-delay:.1s}
.gl-view__skel i:nth-child(3){width:70%;animation-delay:.2s}

/* top progress bar */
#glBar{position:fixed;top:0;inset-inline:0;height:3px;z-index:2147482000;pointer-events:none;opacity:0;transition:opacity .3s ease}
#glBar.is-on{opacity:1}
#glBar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#f7931e,#ffc20e);
  box-shadow:0 0 10px rgba(247,147,30,.8);transition:width .4s ease;margin-inline-start:0}

/* accounting frame overlay */
#erpHost{position:relative}
.gl-frame{position:absolute;inset:0;background:#F5F6F8;display:flex;align-items:flex-start;justify-content:center;
  transition:opacity .3s ease;z-index:2}
.gl-frame.is-done{opacity:0;pointer-events:none}

@keyframes gl-spin{to{transform:rotate(360deg)}}
@keyframes gl-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes gl-shine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes gl-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .gl-orbit{width:124px;height:124px}
  .gl-orbit__logo{width:60px;height:60px}
  .gl-boot__name{font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){
  .gl-orbit__ring,.gl-orbit__plane,.gl-orbit__logo,.gl-view__dot,.gl-view__skel i{animation-duration:3s}
}