/* ═══════════════════════════════════════════════════════════════════
   EFIN — UNIFIED PROFESSIONAL LOADING SYSTEM
   One single design language for every loading state in the app.
   Design: Clean progress bar + subtle pulse dots (no spinners/emoji)
   Used via:  .efin-loader  wrapper class  +  JS: eLoader.show/hide
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Core keyframes ─────────────────────────────────────────── */
@keyframes _ef-bar {
  0%   { transform: scaleX(0);    opacity: .7; }
  40%  { transform: scaleX(.55);  opacity: 1;  }
  80%  { transform: scaleX(.88);  opacity: 1;  }
  100% { transform: scaleX(1);    opacity: 0;  }
}
@keyframes _ef-dot {
  0%, 80%, 100% { transform: scale(.55); opacity: .3; }
  40%           { transform: scale(1);   opacity: 1;  }
}
@keyframes _ef-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes _ef-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}
@keyframes _ef-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ─── Full-page / overlay loader ─────────────────────────────── */
#efin-global-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(240, 244, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  animation: _ef-fade-in .18s ease-out forwards;
  pointer-events: all;
}
#efin-global-loader.hiding {
  animation: _ef-fade-out .22s ease-in forwards;
}

/* Logo mark */
#efin-global-loader .egl-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 28px rgba(26,79,163,.28);
}
#efin-global-loader .egl-logo svg { display: block; }

/* Message text */
#efin-global-loader .egl-msg {
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: -.2px;
  margin-bottom: 20px;
  animation: _ef-slide-up .25s ease-out .1s both;
}

/* Progress bar track */
#efin-global-loader .egl-track {
  width: 160px;
  height: 3px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 16px;
}
#efin-global-loader .egl-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 99px;
  transform-origin: left;
  animation: _ef-bar 1.4s cubic-bezier(.4,0,.2,1) infinite;
}

/* Three dots */
#efin-global-loader .egl-dots {
  display: flex;
  gap: 6px;
}
#efin-global-loader .egl-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: _ef-dot 1.1s ease-in-out infinite;
}
#efin-global-loader .egl-dot:nth-child(1) { animation-delay: 0s;   }
#efin-global-loader .egl-dot:nth-child(2) { animation-delay: .18s; }
#efin-global-loader .egl-dot:nth-child(3) { animation-delay: .36s; }

/* ─── Inline section loader (replaces any loading text/spinner) ── */
/* Usage: <div class="efin-section-loader">...</div>             */
.efin-section-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  animation: _ef-fade-in .2s ease-out forwards;
}
.efin-section-loader .esl-track {
  width: 120px;
  height: 2px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.efin-section-loader .esl-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 99px;
  transform-origin: left;
  animation: _ef-bar 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
.efin-section-loader .esl-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: .1px;
}
.efin-section-loader .esl-dots {
  display: flex;
  gap: 5px;
}
.efin-section-loader .esl-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: _ef-dot 1.1s ease-in-out infinite;
}
.efin-section-loader .esl-dot:nth-child(1) { animation-delay: 0s;   }
.efin-section-loader .esl-dot:nth-child(2) { animation-delay: .18s; }
.efin-section-loader .esl-dot:nth-child(3) { animation-delay: .36s; }

/* ─── Button loading state ───────────────────────────────────── */
/* Usage: btn.classList.add('efin-btn-loading') */
.efin-btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
  cursor: not-allowed;
}
.efin-btn-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  border-radius: inherit;
}
/* Dot bar inside button */
.efin-btn-loading::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 2px;
  background: rgba(255,255,255,.35);
  border-radius: 99px;
  overflow: hidden;
  z-index: 1;
}
/* Animated fill on button */
@keyframes _ef-btn-bar {
  0%   { transform: translate(-50%,-50%) scaleX(0); }
  50%  { transform: translate(-50%,-50%) scaleX(1); }
  100% { transform: translate(-50%,-50%) scaleX(0); }
}

/* ─── Skeleton / Shimmer for cards/tables ────────────────────── */
.efin-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface2) 25%,
    var(--surface3) 50%,
    var(--surface2) 75%
  );
  background-size: 400% 100%;
  animation: _ef-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--r-xs);
}
@keyframes _ef-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
.efin-skeleton-row {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.efin-skeleton-cell {
  height: 14px;
  border-radius: 4px;
}

/* ─── Overlay loader for modals/panels ───────────────────────── */
.efin-overlay-loader {
  position: absolute;
  inset: 0;
  background: rgba(240,244,255,.88);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  z-index: 10;
  animation: _ef-fade-in .18s ease-out forwards;
}
.efin-overlay-loader .eol-track {
  width: 100px;
  height: 2px;
  background: var(--border);
  border-radius: 99px;
  overflow: hidden;
}
.efin-overlay-loader .eol-fill {
  height: 100%;
  width: 100%;
  background: var(--accent);
  border-radius: 99px;
  transform-origin: left;
  animation: _ef-bar 1.4s cubic-bezier(.4,0,.2,1) infinite;
}
.efin-overlay-loader .eol-label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .1px;
}
.efin-overlay-loader .eol-dots {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}
.efin-overlay-loader .eol-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent);
  opacity: .3;
  animation: _ef-dot 1.1s ease-in-out infinite;
}
.efin-overlay-loader .eol-dot:nth-child(1) { animation-delay: 0s;   }
.efin-overlay-loader .eol-dot:nth-child(2) { animation-delay: .18s; }
.efin-overlay-loader .eol-dot:nth-child(3) { animation-delay: .36s; }

/* ─── Top progress bar (page-level, always on top) ───────────── */
#efin-topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  z-index: 100000;
  pointer-events: none;
  background: transparent;
}
#efin-topbar-fill {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 0 99px 99px 0;
  transition: width .3s cubic-bezier(.4,0,.2,1), opacity .3s;
  box-shadow: 0 0 8px rgba(26,79,163,.4);
}
#efin-topbar.active #efin-topbar-fill {
  animation: _ef-topbar 1.8s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes _ef-topbar {
  0%   { width: 0%;   opacity: 1; }
  60%  { width: 82%;  opacity: 1; }
  90%  { width: 92%;  opacity: 1; }
  100% { width: 100%; opacity: 0; }
}