/* CTR Reload Freeze Overlay
 *
 * Aktiv während eines `preservedReload`: signalisiert den Lade-Vorgang
 * über einen dezenten Spinner-Overlay und eine reduzierte Opazität des
 * Hauptbereichs. Blockiert das `body`-Element NICHT komplett, damit ein
 * hängengebliebener Reload niemals zu einer eingefrorenen Seite führt.
 *
 * Phase 5 (2026-05-27) — Light/Dark per zentralen Tokens auf
 * [data-bs-theme]. Tokens lassen sich aus base.html / theme-Layer
 * ueberschreiben.
 */

:root,
html[data-bs-theme="light"] {
  --ctr-reload-overlay-fg: 13, 110, 253;       /* Bootstrap primary */
  --ctr-reload-overlay-bg: rgba(13, 110, 253, 0.18);
  --ctr-reload-overlay-spinner-track: rgba(13, 110, 253, 0.25);
  --ctr-reload-overlay-spinner-arc: rgba(13, 110, 253, 0.95);
  --ctr-reload-overlay-shadow: rgba(0, 0, 0, 0.12);
}

html[data-bs-theme="dark"],
html[data-theme="dark"] {
  --ctr-reload-overlay-fg: 110, 168, 254;      /* Bootstrap-dark primary */
  --ctr-reload-overlay-bg: rgba(110, 168, 254, 0.18);
  --ctr-reload-overlay-spinner-track: rgba(110, 168, 254, 0.25);
  --ctr-reload-overlay-spinner-arc: rgba(110, 168, 254, 0.95);
  --ctr-reload-overlay-shadow: rgba(0, 0, 0, 0.45);
}

html.ctr-reload-freeze {
  cursor: progress;
}

html.ctr-reload-freeze main.ctr-main,
html.ctr-reload-freeze .ctr-main {
  opacity: 0.45;
  transition: opacity 0.18s ease-out;
  pointer-events: none;
}

html.ctr-reload-freeze::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 45%,
    var(--ctr-reload-overlay-bg) 0,
    rgba(0, 0, 0, 0) 38%
  );
}

html.ctr-reload-freeze::before {
  content: "";
  position: fixed;
  top: calc(50% - 22px);
  left: calc(50% - 22px);
  width: 44px;
  height: 44px;
  z-index: 2001;
  border: 3px solid var(--ctr-reload-overlay-spinner-track);
  border-top-color: var(--ctr-reload-overlay-spinner-arc);
  border-radius: 50%;
  animation: ctr-reload-freeze-spin 0.9s linear infinite;
  pointer-events: none;
  box-shadow: 0 6px 18px var(--ctr-reload-overlay-shadow);
}

@keyframes ctr-reload-freeze-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  html.ctr-reload-freeze::before {
    animation: none;
  }
}

/* ── Refresh-Failure Toast (theme-aware, dezent) ──────────────────── */

.ctr-refresh-toast {
  --ctr-refresh-fg: #0b3d91;
  --ctr-refresh-bg: #f4f7ff;
  --ctr-refresh-border: #c7d4f5;
  --ctr-refresh-action-bg: #0d6efd;
  --ctr-refresh-action-fg: #ffffff;
  --ctr-refresh-action-hover: #0b5ed7;

  color: var(--ctr-refresh-fg);
  background: var(--ctr-refresh-bg);
  border: 1px solid var(--ctr-refresh-border);
  border-left: 4px solid var(--ctr-refresh-action-bg);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(11, 61, 145, 0.12);
  min-width: 320px;
  max-width: 440px;
  padding: 0.6rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ctr-refresh-toast .ctr-refresh-toast__icon {
  font-size: 1.25rem;
  flex: 0 0 auto;
  color: var(--ctr-refresh-action-bg);
}

.ctr-refresh-toast .ctr-refresh-toast__body {
  flex: 1 1 auto;
  line-height: 1.25;
  font-size: 0.92rem;
}

.ctr-refresh-toast .ctr-refresh-toast__body strong {
  display: block;
  font-weight: 600;
  margin-bottom: 0.1rem;
}

.ctr-refresh-toast .ctr-refresh-toast__retry {
  flex: 0 0 auto;
  background: var(--ctr-refresh-action-bg);
  color: var(--ctr-refresh-action-fg);
  border: 0;
  border-radius: 0.375rem;
  padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ctr-refresh-toast .ctr-refresh-toast__retry:hover,
.ctr-refresh-toast .ctr-refresh-toast__retry:focus-visible {
  background: var(--ctr-refresh-action-hover);
  outline: none;
}

.ctr-refresh-toast .ctr-refresh-toast__close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: var(--ctr-refresh-fg);
  opacity: 0.6;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
}

.ctr-refresh-toast .ctr-refresh-toast__close:hover {
  opacity: 1;
}

html[data-bs-theme="dark"] .ctr-refresh-toast,
html[data-theme="dark"] .ctr-refresh-toast {
  --ctr-refresh-fg: #e6efff;
  --ctr-refresh-bg: #1a2540;
  --ctr-refresh-border: #2c3d6b;
  --ctr-refresh-action-bg: #6ea8fe;
  --ctr-refresh-action-fg: #0a1a33;
  --ctr-refresh-action-hover: #8db8ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}