/*
============================================================
ATLAS – spinner.css
============================================================
Uebernommen aus Transpera HUB transpera-spinner-enhanced.css (v2.0),
reduziert auf die fuer ATLAS-Lite genutzten Varianten:
  - .tp-ring-spinner   (Laden von Tabellen/Dashboard)
  - .fullscreen-loading-overlay
  - .btn-saving        (Speicher-Zustand in der Datenpflege)
Logo-inspirierte Farben: Teal #005a76 + Grau #888.
============================================================
*/

@keyframes tp-spin { to { transform: rotate(360deg); } }
@keyframes pulse   { 0%,100% { opacity: .6; } 50% { opacity: 1; } }

/* ---- Ring Spinner (Logo-inspiriert) ---- */
.tp-ring-spinner {
  --size: 50px; --thickness: 4px;
  position: relative; width: var(--size); height: var(--size);
  display: inline-block; box-sizing: border-box; vertical-align: middle;
}
.tp-ring-spinner::before,
.tp-ring-spinner::after {
  content: ""; position: absolute; inset: 0; box-sizing: border-box;
  border-radius: 50%; border: var(--thickness) solid transparent;
  animation: tp-spin 1.2s cubic-bezier(.5,0,.5,1) infinite; pointer-events: none;
}
.tp-ring-spinner::before { border-top-color: #005a76; border-right-color: #005a76; border-bottom-color: #005a76; }
.tp-ring-spinner::after  { border-top-color: #888; border-left-color: #888; animation-delay: .15s; }

.tp-ring-spinner--sm { --size: 24px; --thickness: 3px; }
.tp-ring-spinner--lg { --size: 60px; --thickness: 5px; }

/* ---- Tabellen-Spinner inline ---- */
.tbl-spinner { --size: 20px; --thickness: 3px; vertical-align: middle; margin-right: 8px; }

/* ---- Spinner mit Label ---- */
.spinner-centered { display: flex; justify-content: center; align-items: center; padding: 40px; }
.spinner-with-label { display: inline-flex; flex-direction: column; align-items: center; gap: 12px; }
.spinner-with-label .label { font-size: 14px; color: #666; font-weight: 500; }

/* ---- Fullscreen Loading Overlay ---- */
.fullscreen-loading-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 20px; z-index: 9999; color: #fff; font-size: 18px;
}
.fullscreen-loading-overlay p { animation: pulse 1.8s ease-in-out infinite; margin: 0; font-weight: 500; }
.fullscreen-loading-overlay .tp-ring-spinner { --size: 60px; --thickness: 5px; }

/* ---- Button Saving State (CSS-only Ring via ::before) ---- */
.btn-saving { position: relative; padding-left: 36px !important; pointer-events: none; opacity: .85; }
.btn-saving::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%;
  animation: tp-spin .8s linear infinite;
}