/* Custom styles beyond Tailwind utilities. */

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Pulsing border used by the active timer card. */
@keyframes pulse-border {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
}
.timer-active {
  animation: pulse-border 2s infinite;
}

/* Kanban columns */
.kanban-col {
  min-height: 200px;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.kanban-col.drop-target {
  background-color: rgba(59, 130, 246, 0.08);
  border-color: rgba(59, 130, 246, 0.6);
}

.kanban-card {
  cursor: grab;
}
.kanban-card.dragging {
  opacity: 0.4;
}

/* -----------------------------------------------------------
   Light theme overrides.
   Tailwind classes in the HTML are tuned for dark mode; when
   the html element loses .dark we re-map the most common ones.
   ----------------------------------------------------------- */
html:not(.dark) body { background: #f8fafc; color: #0f172a; }
html:not(.dark) .bg-slate-950 { background-color: #f1f5f9 !important; }
html:not(.dark) .bg-slate-900 { background-color: #ffffff !important; }
html:not(.dark) .bg-slate-900\/50 { background-color: rgba(255, 255, 255, 0.85) !important; }
html:not(.dark) .bg-slate-800 { background-color: #e2e8f0 !important; }
html:not(.dark) .bg-slate-700\/40 { background-color: rgba(148, 163, 184, 0.3) !important; }
html:not(.dark) .border-slate-800 { border-color: #e2e8f0 !important; }
html:not(.dark) .border-slate-700 { border-color: #cbd5e1 !important; }
html:not(.dark) .text-slate-100 { color: #0f172a !important; }
html:not(.dark) .text-slate-200 { color: #1e293b !important; }
html:not(.dark) .text-slate-300 { color: #334155 !important; }
html:not(.dark) .text-slate-400 { color: #64748b !important; }
html:not(.dark) .text-slate-500 { color: #64748b !important; }
html:not(.dark) .text-white { color: #0f172a !important; }
html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}
html:not(.dark) .text-blue-400 { color: #2563eb !important; }