body {
  margin: 0;
  padding: 0;
}

/* ---------------------------------------------------------------------------
   Pre-boot splash screen (shown in index.html before Angular renders).
   Keep position:absolute + z-index:1000 + full size — the Angular app renders
   over it once bootstrapped (there is no explicit removal). Do NOT switch to
   position:fixed or it would stay on top of the app.

   Deliberately restrained: one logo, one progress bar, one motion. A boot
   screen is seen on every load, so it should read as calm and finished rather
   than compete for attention.
   --------------------------------------------------------------------------- */
.splash-screen {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: 'Inter', Helvetica, 'sans-serif';
  background: #ffffff;
  color: #5e6278;
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
}

html[lang='ar'] .splash-screen,
html[dir='rtl'] .splash-screen {
  font-family: 'Cairo', 'Noto Kufi Arabic', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
}

.splash-screen__content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  animation: splashFadeIn 0.5s ease-out both;
}

.splash-logo {
  height: 46px;
  width: auto;
  display: block;
}

/* Slim indeterminate bar: a single, quiet signal that work is happening. */
.splash-progress {
  position: relative;
  width: 168px;
  height: 3px;
  border-radius: 999px;
  background: rgba(28, 50, 91, 0.09);
  overflow: hidden;
}

.splash-progress span {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6366f1, #7c3aed);
  animation: splashSlide 1.25s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* In RTL the bar should travel right-to-left, matching the reading direction. */
html[lang='ar'] .splash-progress span,
html[dir='rtl'] .splash-progress span {
  animation-direction: reverse;
}

/* Dark mode */
[data-bs-theme='dark'] .splash-screen {
  background: #151521;
  color: #92929f;
}

[data-bs-theme='dark'] .splash-progress {
  background: rgba(255, 255, 255, 0.1);
}

@keyframes splashFadeIn {
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes splashSlide {
  0% { transform: translateX(-105%); }
  100% { transform: translateX(345%); }
}

/* Respect users who prefer less motion — leave a static, filled bar. */
@media (prefers-reduced-motion: reduce) {
  .splash-screen__content {
    animation: none !important;
  }

  .splash-progress span {
    animation: none !important;
    width: 100%;
  }
}

#root {
  opacity: 1;
  transition: opacity 1s ease-in-out;
}