@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --indigo: #4f46e5;
  --indigo-dark: #4338ca;
  --indigo-light: #6366f1;
  --blue: #3b82f6;
  --blue-dark: #2563eb;
  --blue-light: #60a5fa;
  --amber: #f59e0b;
  --amber-dark: #d97706;
  --amber-light: #fbbf24;
  --emerald: #10b981;
  --emerald-dark: #059669;
  --emerald-light: #34d399;
}

/* Make scrollbars more appealing */
.task-list::-webkit-scrollbar {
  width: 6px;
}

.task-list::-webkit-scrollbar-track {
  background-color: #f3f4f6;
  border-radius: 8px;
}

.dark .task-list::-webkit-scrollbar-track {
  background-color: #374151;
}

.task-list::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 8px;
}

.dark .task-list::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

.task-list::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

.dark .task-list::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

::-webkit-scrollbar {
  height: 6px;
}

::-webkit-scrollbar-track {
  background-color: #f3f4f6;
  border-radius: 8px;
}

.dark ::-webkit-scrollbar-track {
  background-color: #374151;
}

::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 8px;
}

.dark ::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #9ca3af;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background-color: #6b7280;
}

.task-card {
  @apply rounded-lg shadow-sm bg-white dark:bg-gray-800 p-3 transition-all duration-200 border border-gray-200 dark:border-gray-700 hover:shadow-md;
  display: flex;
  flex-direction: column;
  min-height: 120px;
}

.dark .task-card {
  @apply hover:border-gray-600;
}

.task-card.dragging {
  opacity: 0.5;
  border-style: dashed;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

.task-list.drag-over {
  background-color: #f3f4f6;
  border: 2px dashed #9ca3af;
  border-radius: 0.5rem;
}

.dark .task-list.drag-over {
  background-color: #374151;
  border: 2px dashed #6b7280;
}

/* Priority Colors */
.bg-priority-low-bg {
  background-color: rgba(16, 185, 129, 0.15);
}

.dark .bg-priority-low-bg {
  background-color: rgba(16, 185, 129, 0.1);
}

.text-priority-low-text {
  color: #065f46;
}

.dark .text-priority-low-text {
  color: #34d399;
}

.bg-priority-medium-bg {
  background-color: rgba(245, 158, 11, 0.15);
}

.dark .bg-priority-medium-bg {
  background-color: rgba(245, 158, 11, 0.1);
}

.text-priority-medium-text {
  color: #92400e;
}

.dark .text-priority-medium-text {
  color: #fbbf24;
}

.bg-priority-high-bg {
  background-color: rgba(239, 68, 68, 0.15);
}

.dark .bg-priority-high-bg {
  background-color: rgba(239, 68, 68, 0.1);
}

.text-priority-high-text {
  color: #b91c1c;
}

.dark .text-priority-high-text {
  color: #f87171;
}

.transition-colors {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@media (max-width: 639px) {
  .task-list {
    max-height: calc(100vh - 180px);
  }
}

@media (min-width: 640px) and (max-width: 1023px) {
  .task-list {
    max-height: calc(100vh - 190px);
  }
}

@media (min-width: 1024px) {
  .task-list {
    max-height: calc(100vh - 200px);
  }
}

.task-card-title {
  @apply font-medium text-gray-900 dark:text-white mb-2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.task-card-content {
  @apply text-sm text-gray-600 dark:text-gray-300 flex-grow;
}

.task-card-footer {
  @apply mt-2 pt-2 border-t border-gray-100 dark:border-gray-700 flex justify-between items-center;
}

.task-priority {
  @apply text-xs font-medium px-2 py-1 rounded-full;
}

.task-date {
  @apply text-xs text-gray-500 dark:text-gray-400;
}

.task-assignee {
  @apply text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-1 rounded-full;
}

@media (max-width: 480px) {
  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }
}

.bg-gradient-to-r.from-indigo-600.to-violet-500,
.bg-gradient-to-r.from-indigo-700.to-violet-600 {
  background: #5c6bc0;
}

.bg-gradient-to-r.from-blue-500.to-cyan-500,
.bg-gradient-to-r.from-blue-600.to-cyan-600 {
  background: #42a5f5;
}

.bg-gradient-to-r.from-amber-500.to-orange-500,
.bg-gradient-to-r.from-amber-600.to-orange-600 {
  background: #ffb300;
}

.bg-gradient-to-r.from-emerald-500.to-teal-500,
.bg-gradient-to-r.from-emerald-600.to-teal-600 {
  background: #26a69a;
}

.dark input[type='date']::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.hover\:bg-indigo-50:hover {
  background-color: rgba(92, 107, 192, 0.1);
}
.hover\:bg-blue-50:hover {
  background-color: rgba(66, 165, 245, 0.1);
}
.hover\:bg-amber-50:hover {
  background-color: rgba(255, 179, 0, 0.1);
}
.hover\:bg-emerald-50:hover {
  background-color: rgba(38, 166, 154, 0.1);
}

.dark .hover\:bg-indigo-900\/30:hover {
  background-color: rgba(92, 107, 192, 0.3);
}

.dark .hover\:bg-blue-900\/30:hover {
  background-color: rgba(66, 165, 245, 0.3);
}

.dark .hover\:bg-amber-900\/30:hover {
  background-color: rgba(255, 179, 0, 0.3);
}

.dark .hover\:bg-emerald-900\/30:hover {
  background-color: rgba(38, 166, 154, 0.3);
}
button[data-custom-color] {
  color: var(--btn-color) !important;
  border-color: var(--btn-color) !important;
}

button[data-custom-color]:hover {
  background-color: var(--btn-hover-bg) !important;
}
