/* ===========================================================================
   CAMPUSonline COmmunity — boot loader
   ---------------------------------------------------------------------------
   This is the very first paint, before Angular exists, so it cannot know which
   theme variant the user picked (that lives in an HttpOnly cookie the boot
   markup has no access to). It follows the OS preference instead — close
   enough in practice, and it avoids a white flash for dark-mode users.

   The spinner uses the brand crimson #E4154B rather than the text-safe
   #C4123F: this is a graphic, not text, so the 3:1 threshold applies and the
   brand tone is the recognisable one.
   =========================================================================== */

/* hide default loader */
#id-loader span {
  display: none;
}

#id-loader {
  background-color: #ffffff;
  padding-bottom: 0;
}

#id-loader::before {
  content: '';
  width: 44px;
  height: 44px;
  border: 3px solid #ebebef;
  border-top-color: #E4154B;
  border-radius: 50%;
  animation: id-loader-override-spin 0.8s linear infinite;
}

@media (prefers-color-scheme: dark) {
  #id-loader {
    background-color: #14161a;
  }

  #id-loader::before {
    border-color: #2a2f36;
    border-top-color: #ffa0b4;
  }
}

/* Respect a reduced-motion preference: keep the ring, drop the spin. */
@media (prefers-reduced-motion: reduce) {
  #id-loader::before {
    animation: none;
  }
}

@keyframes id-loader-override-spin {
  to { transform: rotate(360deg); }
}

/* Hide the boot loader once Angular has rendered anything into its root
   element. Tag-agnostic: the consumer's index.html decides between
   <app-root>, <oc-application>, etc. — we just check that the sibling
   right after #id-loader has become non-empty. */
body:has(#id-loader ~ *:not(:empty)) #id-loader {
  display: none;
}