/* cloudflare/pages/assets/theme.css
   Base + animations partagees par toutes les pages du dashboard. */

@layer base {
  html, body { margin: 0; padding: 0; }
  body { overscroll-behavior: none; font-feature-settings: "tnum" 1; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #2a364f; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #454655; }

/* ── Fond anime discret (particules / gradient qui respire) ─────────── */
.bg-ambient {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(600px circle at 15% 10%, rgba(88, 101, 242, 0.10), transparent 60%),
    radial-gradient(500px circle at 85% 30%, rgba(16, 185, 129, 0.06), transparent 55%),
    radial-gradient(700px circle at 50% 100%, rgba(88, 101, 242, 0.05), transparent 60%);
  animation: ambient-drift 18s ease-in-out infinite alternate;
}
@keyframes ambient-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(1.5%, -1.5%, 0) scale(1.03); }
}

/* ── Entree en fondu + glissement, avec delai en cascade ─────────────── */
.reveal { opacity: 0; transform: translateY(10px); animation: reveal-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
@keyframes reveal-in { to { opacity: 1; transform: translateY(0); } }
.reveal-1 { animation-delay: 0.03s; } .reveal-2 { animation-delay: 0.08s; }
.reveal-3 { animation-delay: 0.13s; } .reveal-4 { animation-delay: 0.18s; }
.reveal-5 { animation-delay: 0.23s; } .reveal-6 { animation-delay: 0.28s; }

/* ── Cartes : leger relief au survol ─────────────────────────────────── */
.card-hover { transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s, box-shadow 0.2s; }
.card-hover:hover { transform: translateY(-2px); border-color: #2a364f; box-shadow: 0 8px 32px -8px rgba(0,0,0,0.5); }

/* ── Pulsation pour indicateurs "live" ───────────────────────────────── */
.dot-live { position: relative; }
.dot-live::before {
  content: ""; position: absolute; inset: -4px; border-radius: 9999px;
  background: currentColor; opacity: 0.35; animation: dot-ping 1.8s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes dot-ping { 75%, 100% { transform: scale(2); opacity: 0; } }

/* ── Barres / jauges qui se remplissent en douceur ───────────────────── */
.gauge-fill { transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

/* ── Chiffres qui defilent (count-up géré en JS, transition de couleur) ─ */
.metric-number { font-variant-numeric: tabular-nums; transition: color 0.3s; }

/* ── Boutons ─────────────────────────────────────────────────────────── */
.btn-press { transition: transform 0.12s ease, background-color 0.15s, border-color 0.15s; }
.btn-press:active { transform: scale(0.97); }

/* ── Switch / toggle animes ──────────────────────────────────────────── */
.toggle-track { width: 36px; height: 20px; border-radius: 9999px; background: #1e2638; position: relative; cursor: pointer; transition: background-color 0.15s cubic-bezier(0.16,1,0.3,1); flex: none; }
.toggle-track.on { background: #5865f2; }
.toggle-thumb { position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 9999px; background: #94a3b8; transition: transform 0.15s cubic-bezier(0.16,1,0.3,1), background-color 0.15s; }
.toggle-track.on .toggle-thumb { transform: translateX(16px); background: #fff; }

/* ── Skeleton loading (pendant les fetch) ────────────────────────────── */
.skeleton { position: relative; overflow: hidden; background: #161d2d; border-radius: 0.5rem; }
.skeleton::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: skeleton-sweep 1.4s ease-in-out infinite;
}
@keyframes skeleton-sweep { 100% { transform: translateX(100%); } }

/* ── Toast de confirmation (sauvegarde reussie, etc.) ─────────────────── */
.toast { animation: toast-in 0.35s cubic-bezier(0.16,1,0.3,1) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.toast.leaving { animation: toast-out 0.25s ease forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* ── Onglets categorie : soulignage anime ────────────────────────────── */
.nav-item { position: relative; }
.nav-item.active::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 60%; border-radius: 9999px; background: #5865f2;
}

/* ── Spinner ─────────────────────────────────────────────────────────── */
.spinner { width: 18px; height: 18px; border-radius: 9999px; border: 2px solid rgba(255,255,255,0.15); border-top-color: #bec2ff; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Preferences reduites (accessibilite) ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}