body {
  margin: 0;
  padding: 0;
}

.splash-screen {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  font-family: Helvetica, 'sans-serif';
  /* Use Metronic tokens with fallbacks so the splash looks right before
     the Angular styles bundle has loaded. */
  background-color: var(--kt-body-bg, #f2f3f8);
  color: var(--kt-gray-600, #5E6278);
  line-height: 1;
  font-size: 14px;
  font-weight: 400;
}

.splash-screen__logo {
  max-width: 60vw;
  width: 360px;
  height: auto;
  margin-bottom: 32px;
}

.splash-screen__label {
  color: var(--kt-gray-600, #5E6278);
  transition: none !important;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  margin-bottom: 20px;
  min-height: 1em; /* prevent layout shift as the label text changes */
}

/* Thin determinate-looking progress bar driven by a CSS keyframe.
   It fills 0 → 90% over ~4s and holds at 90% until Angular bootstraps
   and replaces the splash. Never reaches 100% — the real "done" signal
   is the app rendering. */
.splash-screen__bar {
  width: 220px;
  max-width: 60vw;
  height: 4px;
  border-radius: 4px;
  background-color: var(--kt-gray-200, #e9ecef);
  overflow: hidden;
}

.splash-screen__bar-fill {
  height: 100%;
  width: 0;
  border-radius: 4px;
  background-color: var(--kt-primary, #5d78ff);
  animation: splash-progress 4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes splash-progress {
  0%   { width: 0%; }
  60%  { width: 70%; }
  100% { width: 90%; }
}

[data-bs-theme="dark"] .splash-screen {
  background-color: var(--kt-body-bg, #151521);
  color: var(--kt-gray-500, #92929F);
}

[data-bs-theme="dark"] .splash-screen__label {
  color: var(--kt-gray-500, #92929F);
}

[data-bs-theme="dark"] .splash-screen__bar {
  background-color: var(--kt-gray-700-dark, #2a2a3a);
}

/* Respect reduced-motion: replace the animated bar with a static 80% fill. */
@media (prefers-reduced-motion: reduce) {
  .splash-screen__bar-fill {
    animation: none;
    width: 80%;
  }
}

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