/* se-loader — încărcarea, una singură pentru toată familia (se-loader.js).
 *
 * Hotărârea proprietarului (2026-10-06, scanexpert:one-loader-everywhere și
 * scanexpert:loader-which-mark = C): orice așteptare arată sigla ScanExpert
 * „scanată" — inelul stă în nuanța pală, o linie albă coboară peste el și îl umple
 * cu magenta, apoi urcă și îl golește. Nicio consolă nu desenează alt spinner.
 *
 * Desenul îl face se-loader.js (`seLoader.svg`): conturul siglei e masca, iar în
 * mască se mișcă două dreptunghiuri — umplerea (scaleY de sus în jos) și linia
 * (translateY), pe aceeași curbă, ca linia să fie mereu marginea umplerii.
 *
 * Ecranul de plecare (`.se-splash`) acoperă pagina când ea pleacă spre altă
 * adresă — ușa contului organizației întâi. E stratul de DEASUPRA a tot: poarta de
 * autentificare a recepției e ea însăși un strat fix la z-index 900 (styles-auth.css),
 * iar la 600 ecranul a stat, nevăzut, SUB ea — DOM-ul îl avea, ecranul nu. Peste
 * poartă, ferestrele modale (500), tur (550) și orice alt strat al consolelor.
 * Butoanele lui sunt `.btn-primary` / `.btn-secondary`, pe care le au amândouă
 * consolele; foaia de aici le scrie doar
 * lățimea și înălțimea, ca regula generică `button` a back office-ului și
 * `width: 100%` al recepției să nu le deformeze (aceeași regulă ca în se-tour.css).
 */
.se-loader {
  display: inline-block;
  flex: none;
  overflow: visible;
  vertical-align: middle;
}
.se-loader-tint {
  fill: var(--se-color-secondary-20);
}
.se-loader-fill {
  fill: var(--se-color-secondary-60);
  transform-box: view-box;
  transform-origin: 0 0;
  animation: se-loader-fill 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
.se-loader-line {
  fill: var(--se-color-text-on-dark);
  opacity: 0.9;
  animation: se-loader-line 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}
@keyframes se-loader-fill {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}
@keyframes se-loader-line {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(32px);
  }
}

/* Butonul ocupat (`seLoader.busy`): sigla stă în locul conținutului, lângă ce se
   întâmplă. Lățimea o ține scriptul; aici doar distanța și cursorul. */
.se-busy-label {
  margin-left: var(--se-space-8);
}
[aria-busy="true"] {
  cursor: progress;
}

/* O regiune care se reîncarcă (`aria-busy` pus de kit după 200 ms) își desenează
   rândurile de tabel ca schelet, în forma lor: celula rămâne, conținutul ei se
   ascunde, iar în locul lui stă o bară cu baleiajul scanării. Niciodată un spinner
   peste un tabel gol — regula 8. */
[aria-busy="true"] tbody td {
  position: relative;
}
[aria-busy="true"] tbody td > *,
[aria-busy="true"] tbody td {
  color: transparent;
}
[aria-busy="true"] tbody td > * {
  visibility: hidden;
}
[aria-busy="true"] tbody td::after {
  content: "";
  position: absolute;
  inset: 50% 12px auto 4px;
  height: 10px;
  margin-top: -5px;
  border-radius: 5px;
  background: linear-gradient(
      90deg,
      transparent,
      var(--se-color-secondary-10) 45%,
      var(--se-color-secondary-20) 50%,
      var(--se-color-secondary-10) 55%,
      transparent
    )
    var(--se-color-primary-10);
  background-size: 200% 100%;
  animation: se-skeleton 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
/* Rânduri-schelet (`seLoader.skeleton`): același baleiaj ca rândurile de tabel. */
.se-skeleton-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--se-space-8) 0;
}
.se-skeleton-lines {
  flex: 1;
  display: grid;
  gap: 6px;
}
.se-skeleton-line,
.se-skeleton-avatar {
  background: linear-gradient(
      90deg,
      transparent,
      var(--se-color-secondary-10) 45%,
      var(--se-color-secondary-20) 50%,
      var(--se-color-secondary-10) 55%,
      transparent
    )
    var(--se-color-primary-10);
  background-size: 200% 100%;
  animation: se-skeleton 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.se-skeleton-line {
  height: 12px;
  border-radius: 6px;
}
.se-skeleton-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: 0 0 auto;
}
@keyframes se-skeleton {
  from {
    background-position: 100% 0;
  }
  to {
    background-position: -100% 0;
  }
}

.se-splash {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--se-space-16);
  padding: var(--se-space-20);
  text-align: center;
  background: var(--se-color-bg-surface);
  font-family: var(--se-font-family);
  animation: se-splash-in 0.2s ease-out both;
}
.se-splash[hidden] {
  display: none;
}
.se-splash-msg {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--se-color-text-title);
}
.se-splash-slow {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--se-color-text-description);
}
.se-splash-slow[hidden],
.se-splash-actions[hidden] {
  display: none;
}
.se-splash-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--se-space-12);
  margin-top: var(--se-space-8);
}
.se-splash-actions .btn-primary,
.se-splash-actions .btn-secondary {
  width: auto;
  min-width: 140px;
  height: 40px;
}
@keyframes se-splash-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Mișcare redusă: nicio cursă și nicio linie — sigla plină se stinge și se
   aprinde încet, iar textul rămâne. Sensul („se lucrează") nu se pierde. */
@media (prefers-reduced-motion: reduce) {
  .se-loader-fill {
    animation: none;
    transform: none;
  }
  .se-loader-line {
    display: none;
  }
  .se-loader {
    animation: se-loader-fade 1.2s ease-in-out infinite alternate;
  }
  .se-splash,
  .se-skeleton-line,
  .se-skeleton-avatar,
  [aria-busy="true"] tbody td::after {
    animation: none;
  }
}
@keyframes se-loader-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.45;
  }
}
