/* LOADER JAVNE STRANICE (normativ ui--loader) — izgled; ponašanje je u `loader.js`.
   #DRY #apuiload7k2mxq9v — parnjak u `core/magic/magic.css` (`.magic-loader` / `.magic-spinner`).

   Boja spinnera NAMJERNO nasljeđuje `currentColor`: loader stoji nad temom klijenta, a svaka
   tema ima svoju paletu. Tko želi drukčije, ne dira ovaj file nego `ui.loader.accent` u configu
   (`loader.js` ga upiše kao CSS varijablu). */

:root {
  --ap-loader-accent: currentColor;
  --ap-loader-size: 2.2rem;
  --ap-loader-size-sm: 1rem;
  --ap-loader-speed: .8s;
  --ap-loader-overlay: rgba(255, 255, 255, .6);
  --ap-loader-overlay-global: rgba(15, 17, 21, .45);
}

/* ELEMENT tip: overlay nad opsegom operacije. `inset: 0` traži pozicioniran opseg — to mu
   `loader.js` privremeno postavi kad je `static`. Overlay blokira interakciju unutar opsega
   (normativ, pravilo 8), pa se ista akcija ne pokrene dvaput. */
.ap-loader {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--ap-loader-overlay);
}

.ap-loader--global {
  position: fixed;
  z-index: 99997;   /* ispod magic edita (99998), koji je admin sloj iznad stranice */
  background: var(--ap-loader-overlay-global);
  color: #fff;
}

/* Animacija ODAJE TRAJANJE (pravilo 11) — statična ikona nije loader. */
.ap-spinner {
  box-sizing: border-box;
  width: var(--ap-loader-size);
  height: var(--ap-loader-size);
  /* PRSTEN S PRAZNINOM, sve u jednoj boji — a ne obojeni luk nad sivim tragom. Loader stoji
     nad temom klijenta i, kod button tipa, nad gumbom u boji: svaka pretpostavljena boja traga
     ondje promaši (siva se na ružičastom gumbu čita kao prljav krug, prozirna na tamnoj podlozi
     nestane pa se vrti samo crtica). Ovako je vidljiv na bilo čemu — nasljeđuje boju teksta
     svoje okoline, a rotaciju odaje praznina. */
  border: 3px solid var(--ap-loader-accent);
  border-top-color: transparent;
  border-radius: 50%;
  animation: ap-spin var(--ap-loader-speed) linear infinite;
}

/* BUTTON tip: spinner UZ natpis (gumb je uz to `disabled`), pa ostatak forme ostaje upotrebljiv.
   Bez ovog modifikatora bi u gumb sjeo spinner od 2.2rem i razvukao ga. */
.ap-spinner--sm {
  display: inline-block;
  width: var(--ap-loader-size-sm);
  height: var(--ap-loader-size-sm);
  border-width: 2px;
  vertical-align: -.15em;
  margin-left: .5em;
}

@keyframes ap-spin { to { transform: rotate(360deg); } }

/* Tko je u postavkama sustava tražio manje pokreta dobiva puls umjesto rotacije — i dalje se
   vidi da nešto traje, ali bez vrtnje. */
@media (prefers-reduced-motion: reduce) {
  .ap-spinner { animation: ap-pulse 1.2s ease-in-out infinite; }
  @keyframes ap-pulse { 50% { opacity: .35; } }
}