/* ══════════════════════════════════════════════════════════════
   ENHANCE.CSS — interactive polish layer (additive, theme-aware)
   Loaded after main.css; only adds transitions / hover / motion.
   ══════════════════════════════════════════════════════════════ */

:root { scroll-behavior: smooth; }

/* ── Professional typography (index.html only) ──────────────── */
:root {
  --font-b: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;          /* body / UI */
  --font-d: 'Plus Jakarta Sans', 'Inter', -apple-system, 'Segoe UI', sans-serif;       /* headings */
  --font-m: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;                      /* numbers / mono */
}
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11';   /* nicer Inter letterforms */
  letter-spacing: -0.01em;
}
.page-title { letter-spacing: -0.025em; }

/* ── Custom scrollbars ──────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: var(--surface3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface3); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text3); background-clip: padding-box; }

/* ── Page transition ─────────────────────────────────────────── */
@keyframes pageIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.page.active { animation: pageIn .28s cubic-bezier(.2,.7,.3,1); }

/* ── Sidebar nav items ──────────────────────────────────────── */
.nav-item {
  position: relative;
  transition: background var(--trans), color var(--trans), transform .15s ease, padding-left .15s ease;
  border-radius: 10px;
}
.nav-item::before {
  content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%) scaleY(0);
  width: 3px; height: 60%; border-radius: 3px; background: var(--accent);
  transition: transform .2s cubic-bezier(.4,0,.2,1);
}
.nav-item:hover { background: var(--surface2); transform: translateX(2px); }
.nav-item.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.nav-item.active::before { transform: translateY(-50%) scaleY(1); }
.nav-item .nav-icon { transition: transform .2s ease; }
.nav-item:hover .nav-icon { transform: scale(1.12); }
.nav-item.active .nav-icon svg { stroke: var(--accent); }

/* ── Buttons: hover lift + press ────────────────────────────── */
.btn-primary, .btn-accent, .btn-ghost, .btn-icon, .card-btn, .filt, .logo-upload-btn {
  transition: background var(--trans), border-color var(--trans), color var(--trans),
              transform .12s ease, box-shadow var(--trans) !important;
}
.btn-primary:hover, .btn-accent:hover { transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-dim); }
.btn-primary:active, .btn-accent:active, .btn-ghost:active, .btn-icon:active, .filt:active { transform: translateY(0) scale(.97); }
.btn-ghost:hover, .card-btn:hover { transform: translateY(-1px); }
.btn-icon.btn-accent:hover { box-shadow: 0 6px 20px var(--accent-dim); transform: translateY(-1px) rotate(90deg); }

/* ── Filter chips ───────────────────────────────────────────── */
.filt:hover { border-color: var(--accent); color: var(--text); }
.filt.active { box-shadow: 0 2px 10px var(--accent-dim); }

/* ── Cards: hover lift ──────────────────────────────────────── */
.stat-card, .graph-card, .task-card {
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.stat-card:hover, .graph-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  border-color: var(--border2);
}
.task-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.20); }
.stat-card-clickable:hover { border-color: var(--accent) !important; }

/* staggered entrance for dashboard stat cards */
@keyframes statIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.stats-grid > .stat-card { animation: statIn .35s cubic-bezier(.2,.7,.3,1) both; }
.stats-grid > .stat-card:nth-child(1){animation-delay:.02s}
.stats-grid > .stat-card:nth-child(2){animation-delay:.06s}
.stats-grid > .stat-card:nth-child(3){animation-delay:.10s}
.stats-grid > .stat-card:nth-child(4){animation-delay:.14s}
.stats-grid > .stat-card:nth-child(5){animation-delay:.18s}
.stats-grid > .stat-card:nth-child(6){animation-delay:.22s}
.stats-grid > .stat-card:nth-child(7){animation-delay:.26s}
.stats-grid > .stat-card:nth-child(8){animation-delay:.30s}

/* ── Inputs / selects: focus glow ───────────────────────────── */
input, textarea, select {
  transition: border-color var(--trans), box-shadow var(--trans), background var(--trans);
}
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-dim);
}

/* ── Modals: smoother entrance + backdrop fade ──────────────── */
@keyframes ovFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: scale(.96) translateY(10px); } to { opacity: 1; transform: none; } }
.modal-overlay.show { animation: ovFade .18s ease; }
.modal-overlay.show .modal { animation: modalPop .26s cubic-bezier(.2,.8,.3,1.1); }

/* ── Table rows ─────────────────────────────────────────────── */
.hd-table tbody tr { transition: background .12s ease; }
.hd-table th { transition: color .15s ease; }
.hd-table th:hover { color: var(--accent); }

/* ── Badges / status pills: subtle pop on hover within rows ─── */
.task-row { transition: background .12s ease, transform .12s ease; }

/* ── Notification bell pulse when unread ────────────────────── */
@keyframes bellPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
#notif-badge { animation: bellPulse 2s ease-in-out infinite; }

/* ── Avatar / user chip ─────────────────────────────────────── */
.user-chip { transition: background var(--trans), transform .15s ease; border-radius: 12px; }
.user-chip:hover { background: var(--surface2); transform: translateY(-1px); }

/* ── Links & accent text ────────────────────────────────────── */
a { transition: color var(--trans), opacity var(--trans); }
a:hover { opacity: .85; }

/* ── Toast: slight bounce already in main; keep shadow rich ─── */
.toast { box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* ── Skeleton shimmer helper (optional use) ─────────────────── */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 37%, var(--surface2) 63%);
  background-size: 800px 100%; animation: shimmer 1.4s infinite; border-radius: 8px;
}

/* ── Respect users who prefer less motion ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}