/* ---- Custom CSS that complements Tailwind ---- */

/* Smooth scroll, accessible focus rings */
html { scroll-behavior: smooth; }
:focus-visible { outline: 2px solid #8b5cf6; outline-offset: 2px; border-radius: 6px; }

/* Custom scrollbars (dark) */
.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.dark ::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 10px; }
.dark ::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgba(139,92,246,0.5); }

/* Nav pills (top desktop nav) */
.nav-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71 85 105);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.dark .nav-pill { color: rgba(255,255,255,0.65); }

.nav-pill:hover {
  color: rgb(15 23 42);
  background: rgba(255,255,255,0.6);
  transform: translateY(-1px);
}
.dark .nav-pill:hover {
  color: white;
  background: rgba(255,255,255,0.08);
}

.nav-pill.is-active {
  color: white;
  background: linear-gradient(135deg, #8b5cf6 0%, #d946ef 100%);
  box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.6),
              0 2px 4px -2px rgba(0,0,0,0.1);
  transform: translateY(0);
}
.nav-pill.is-active:hover {
  color: white;
  background: linear-gradient(135deg, #a78bfa 0%, #e879f9 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(139, 92, 246, 0.7);
}

.nav-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke-width: 2;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  font-size: 0.65rem;
  font-weight: 700;
  background: linear-gradient(135deg, #f43f5e, #f97316);
  color: white;
  border-radius: 9999px;
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.2);
  animation: pulseSoft 2s ease-in-out infinite;
}
@keyframes pulseSoft {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

.nav-pill.is-active .nav-badge {
  background: white;
  color: rgb(139, 92, 246);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
}

.nav-pill.nav-locked {
  opacity: 0.45;
  position: relative;
}
.nav-pill.nav-locked::after {
  content: "🔒";
  position: absolute;
  top: -4px;
  right: -2px;
  font-size: 0.7rem;
  filter: grayscale(0.6);
}
.nav-pill.nav-locked:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* Mobile nav pills */
.nav-pill-mobile {
  flex-shrink: 0;
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 500;
  background: rgba(0,0,0,0.04);
  color: rgb(71 85 105);
  transition: all 0.2s ease;
}
.dark .nav-pill-mobile {
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.75);
}
.nav-pill-mobile:hover {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
  color: white;
}

[x-cloak] { display: none !important; }

/* Task quick-template buttons */
.task-template {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0.5rem;
  border-radius: 0.85rem;
  background: rgba(139,92,246,0.05);
  border: 1px solid rgba(139,92,246,0.2);
  font-size: 0.8rem;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: pointer;
}
.task-template:hover {
  background: linear-gradient(135deg, rgba(139,92,246,0.2), rgba(217,70,239,0.15));
  border-color: rgba(139,92,246,0.45);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px -8px rgba(139,92,246,0.4);
}

/* Form field defaults — applied where Tailwind classes aren't on the widget */
.dark input[type=text],
.dark input[type=email],
.dark input[type=password],
.dark input[type=number],
.dark input[type=url],
.dark input[type=date],
.dark textarea,
.dark select {
  color: white;
}
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], textarea, select {
  transition: all 0.2s ease;
}

/* Glass shimmer for loading skeletons */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.05) 100%);
  background-size: 1000px 100%;
  animation: shimmer 2s linear infinite;
}

/* Line clamp helper (in case of older browsers) */
.line-clamp-2 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.line-clamp-3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

/* Stagger fade-in helper for lists */
.stagger > * {
  opacity: 0;
  animation: fadeUp 0.6s cubic-bezier(0.16,1,0.3,1) forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }
.stagger > *:nth-child(5) { animation-delay: 240ms; }
.stagger > *:nth-child(6) { animation-delay: 300ms; }

@keyframes fadeUp { from { opacity:0; transform: translateY(15px); } to { opacity:1; transform: translateY(0); } }
@keyframes shimmer { 0% { background-position:-1000px 0; } 100% { background-position:1000px 0; } }

/* Reduce motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}