/* =====================================================================
   Life Dashboard — Styles globaux
   ===================================================================== */

:root {
  --bg-base: #0a0a0f;
  --bg-card: rgba(20, 20, 28, 0.7);
  --bg-card-hover: rgba(28, 28, 38, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-bright: rgba(255, 255, 255, 0.12);
  --text-primary: #f5f5f7;
  --text-secondary: rgba(245, 245, 247, 0.65);
  --text-muted: rgba(245, 245, 247, 0.4);
  --accent: #8b5cf6;
  --accent-glow: #a78bfa;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --gold: #fbbf24;
}

* { -webkit-tap-highlight-color: transparent; box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* Force le thème sombre sur tous les éléments natifs (select, date picker, etc.) */
:root, html, body { color-scheme: dark; }

/* Style explicite des <option> pour les navigateurs qui ne respectent pas color-scheme */
select option {
  background-color: #15151f;
  color: #f5f5f7;
}
select optgroup {
  background-color: #15151f;
  color: #a78bfa;
  font-weight: 600;
}

/* Force aussi pour les inputs date/time qui ont des icônes natives blanches en dark */
input[type="date"], input[type="time"], input[type="datetime-local"] {
  color-scheme: dark;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg-base);
  color: var(--text-primary);
  background-image:
    radial-gradient(circle at 15% 10%, rgba(139, 92, 246, 0.18), transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(16, 185, 129, 0.12), transparent 50%);
  background-attachment: fixed;
  min-height: 100vh;
  padding-bottom: 96px;
  -webkit-font-smoothing: antialiased;
}

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

.card {
  background: var(--bg-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
}

.card-interactive { transition: all .2s cubic-bezier(.4,0,.2,1); cursor: pointer; }
.card-interactive:active { transform: scale(.98); }

.quest-checked { opacity: .55; }
.quest-checked .quest-label { text-decoration: line-through; }

.progress-bar { transition: width .6s cubic-bezier(.4,0,.2,1); }

.glow-violet { box-shadow: 0 0 40px -10px rgba(139, 92, 246, 0.5); }
.glow-gold { box-shadow: 0 0 30px -10px rgba(251, 191, 36, 0.4); }

.pulse-dot { animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.fade-in { animation: fadeIn .5s ease-out; }
@keyframes fadeIn {
  from { opacity:0; transform: translateY(8px); }
  to { opacity:1; transform: translateY(0); }
}

.xp-pop { animation: xpPop .8s ease-out; }
@keyframes xpPop {
  0% { transform: scale(1); }
  30% { transform: scale(1.18); color: var(--accent-glow); }
  100% { transform: scale(1); }
}

.streak-flame {
  background: linear-gradient(135deg, #fbbf24 0%, #f97316 50%, #ef4444 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.grid-pattern {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 24px 24px;
}

.bottom-nav {
  background: rgba(10, 10, 15, 0.85);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid var(--border-subtle);
}

.nav-active { color: var(--accent-glow); }

.ring-progress { transform: rotate(-90deg); transition: stroke-dashoffset .8s ease-out; }

.shimmer {
  background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.07) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 3s linear infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

::-webkit-scrollbar { width: 0; height: 0; }

@supports (padding: max(0px)) {
  .safe-top { padding-top: max(16px, env(safe-area-inset-top)); }
  .safe-bottom { padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* Toast XP */
.xp-toast {
  position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-100px);
  background: linear-gradient(135deg, var(--accent) 0%, #fbbf24 100%);
  color: white; padding: 12px 24px; border-radius: 100px; font-weight: 800;
  box-shadow: 0 8px 32px -8px rgba(139,92,246,0.6);
  opacity: 0; transition: all .4s cubic-bezier(.4,0,.2,1);
  z-index: 100; pointer-events: none;
}
.xp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Hide [x-cloak] until Alpine ready */
[x-cloak] { display: none !important; }