/* Smooth transitions */
.transition-spring { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.transition-fast { transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); }

/* Card hover lift */
.card-lift { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 20px 40px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(0,0,0,0.02); }

/* Analytics chart line */
.chart-line {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: drawLine 1.5s ease-out forwards;
}
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.chart-dot { animation: popIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards; opacity: 0; }
@keyframes popIn { to { opacity: 1; transform: scale(1); } }

/* Circular progress ring */
.progress-ring { transform: rotate(-90deg); }
.progress-ring__circle { transition: stroke-dashoffset 0.8s cubic-bezier(0.16, 1, 0.3, 1); }

/* Growth chart card */
.growth-line { stroke-dasharray: 200; stroke-dashoffset: 200; animation: drawGrowth 2s ease-out forwards; }
@keyframes drawGrowth { to { stroke-dashoffset: 0; } }

/* Fade in animations — PROGRESSIVE ENHANCEMENT ONLY.
   Element is visible by default; the fade-up runs only when motion is allowed.
   The old `opacity: 0` default left cards permanently invisible for users with
   `prefers-reduced-motion: reduce`. */
.fade-in-up { opacity: 1; }
.fade-in-up-1 { animation-delay: 0.1s; }
.fade-in-up-2 { animation-delay: 0.2s; }
.fade-in-up-3 { animation-delay: 0.3s; }
.fade-in-up-4 { animation-delay: 0.4s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

/* Activity dot pulse */
.activity-dot { animation: pulse 2s ease-in-out infinite; }

/* Motion is opt-in: everything that animates is gated behind this query so the
   content is always readable, and let a reduced-motion user see a static page. */
@media (prefers-reduced-motion: no-preference) {
  .fade-in-up { animation: fadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@media (prefers-reduced-motion: reduce) {
  .activity-dot, .growth-line, .chart-dot, .progress-ring__circle { animation: none !important; }
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Task tag pill */
.tag-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.tag-pill--work { background: #EEF2FF; color: #4338CA; }
.tag-pill--meeting { background: #FCE7F3; color: #BE185D; }
.tag-pill--planning { background: #FEF3C7; color: #92400E; }
.tag-pill--learn { background: #DBEAFE; color: #1D4ED8; }
.tag-pill--sport { background: #D1FAE5; color: #065F46; }
.tag-pill--personal { background: #FEF3C7; color: #92400E; }
.tag-pill--high { background: #FEE2E2; color: #B91C1C; }
.tag-pill--low { background: #ECFDF5; color: #065F46; }

/* Dark mode styles.
   These previously forced the *light* palette back on (`.dark body` was
   #F8FAFC), which meant the dashboard rendered light cards in dark mode while
   tasks, completed and calendar all went dark in the same session. Values now
   match those pages. */
.dark body { background-color: #0F172A; color: #F1F5F9; }
.dark .bg-surface { background-color: #0F172A !important; }
.dark .bg-white { background-color: #1E293B !important; }
.dark .bg-slate-800 { background-color: #1E293B !important; }
.dark .border-slate-100, .dark .border-slate-200 { border-color: #334155 !important; }
.dark .border-slate-700 { border-color: #334155 !important; }
.dark .text-slate-900 { color: #F8FAFC !important; }
.dark .text-slate-700 { color: #CBD5E1 !important; }
/* #64748B on the #1E293B card was 2.85:1 and #94A3B8 was 3.83:1, both
   under the 4.5:1 required for small text. */
.dark .text-slate-500 { color: #CBD5E1 !important; }
.dark .text-slate-400 { color: #B6C2D4 !important; }
.dark .text-white { color: #FFFFFF !important; }
.dark .bg-slate-50 { background-color: #0F172A !important; }
.dark .bg-slate-100 { background-color: #334155 !important; }
.dark .bg-indigo-50 { background-color: #EEF2FF !important; }
.dark .bg-indigo-900\/30 { background-color: #312E81 !important; }
.dark .bg-emerald-50 { background-color: #ECFDF5 !important; }
.dark .bg-emerald-900\/30 { background-color: #064E3B !important; }
.dark .bg-amber-50 { background-color: #FFFBEB !important; }
.dark .bg-amber-900\/30 { background-color: #78350F !important; }
.dark .bg-brand-50 { background-color: #EFF6FF !important; }
.dark .bg-brand-900\/30 { background-color: #1E3A8A !important; }
.dark .text-brand-600 { color: #2563EB !important; }
.dark .text-brand-400 { color: #60A5FA !important; }
.dark .text-indigo-600 { color: #4F46E5 !important; }
.dark .text-indigo-400 { color: #818CF8 !important; }
.dark .text-emerald-600 { color: #059669 !important; }
.dark .text-emerald-400 { color: #34D399 !important; }
.dark .text-amber-600 { color: #D97706 !important; }
.dark .text-amber-400 { color: #FBBF24 !important; }
.dark .border-indigo-100 { border-color: #C7D2FE !important; }
.dark .border-indigo-800 { border-color: #3730A3 !important; }
.dark .border-emerald-100 { border-color: #A7F3D0 !important; }
.dark .border-emerald-800 { border-color: #065F46 !important; }
.dark .border-amber-100 { border-color: #FDE68A !important; }
.dark .border-amber-800 { border-color: #92400E !important; }
.dark .border-brand-100 { border-color: #BFDBFE !important; }
.dark .border-brand-800 { border-color: #1E40AF !important; }
.dark .border-slate-700 { border-color: #334155 !important; }
.dark .border-slate-800 { border-color: #1E293B !important; }
.dark .hover\:bg-brand-50:hover { background-color: #EFF6FF !important; }
.dark .hover\:bg-brand-900\/30:hover { background-color: #1E3A8A !important; }
.dark .hover\:border-brand-200:hover { border-color: #BFDBFE !important; }
.dark .hover\:border-brand-800:hover { border-color: #1E40AF !important; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }
.dark ::-webkit-scrollbar-thumb { background: #475569; }
.dark ::-webkit-scrollbar-thumb:hover { background: #64748B; }

/* Focus visible styles */
:focus-visible { outline: 2px solid #2563EB; outline-offset: 2px; }
.dark :focus-visible { outline-color: #60A5FA; }

/* Selection styles */
::selection { background-color: #2563EB; color: white; }
::-moz-selection { background-color: #2563EB; color: white; }