/* ============================================================
   style.css — Custom styles that extend Tailwind
   Rule: Only add here what Tailwind cannot express.
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,700;0,9..144,900;1,9..144,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

/* ── CSS Custom Properties ────────────────────────────────── */
:root {
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 99px; }
.dark ::-webkit-scrollbar-thumb { background: #374151; }

/* ── Task List Animations ─────────────────────────────────── */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

.animate-slide-in {
  animation: slideIn 0.25s ease-out both;
}

.shake {
  animation: shake 0.4s ease-in-out;
}

/* ── Task Card ────────────────────────────────────────────── */
.task-card {
  transition: transform var(--transition-fast),
              box-shadow var(--transition-fast),
              opacity var(--transition-base),
              border-color var(--transition-fast);
  will-change: transform;
}

.task-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.dark .task-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

/* ── Drag & Drop States ────────────────────────────────────── */
.task-card.dragging {
  opacity: 0.4;
  transform: scale(0.98);
  cursor: grabbing;
}

.task-card.drag-over {
  border-color: var(--accent) !important;
  background: rgba(99, 102, 241, 0.04) !important;
  transform: translateY(-2px);
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

/* ── Filter Tabs ──────────────────────────────────────────── */
.filter-btn {
  transition: all var(--transition-fast);
  position: relative;
}

.filter-active {
  background-color: var(--accent) !important;
  color: #fff !important;
}

.cat-active {
  background-color: #f1f5f9;
  color: #334155;
  font-weight: 600;
}

.dark .cat-active {
  background-color: #1e293b;
  color: #e2e8f0;
}

/* ── Progress Bar ─────────────────────────────────────────── */
#progress-bar {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Input Focus Ring ─────────────────────────────────────── */
#task-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* ── Checkbox Custom Style ────────────────────────────────── */
input[type="checkbox"] {
  accent-color: var(--accent);
  cursor: pointer;
}

/* ── Toast ────────────────────────────────────────────────── */
#toast {
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Empty State ──────────────────────────────────────────── */
.empty-state-icon {
  animation: fadeIn 0.4s ease-out;
}

/* ── App Logo ─────────────────────────────────────────────── */
.app-logo {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  letter-spacing: -0.03em;
}

/* ── Responsive: tighten padding on small screens ─────────── */
@media (max-width: 480px) {
  .task-card { padding: 12px; }
}

/* ── Dark Mode Transitions ────────────────────────────────── */
body, header, .task-card, input, select, button {
  transition-property: background-color, border-color, color;
  transition-duration: 200ms;
  transition-timing-function: ease;
}