tududi/frontend/styles/tailwind.css

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

@layer base {
  html {
    /* Scale down everything by 10% by setting base font-size to 90% */
    font-size: 90%;
  }
}

.spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border-left-color: #09f;
  animation: spin 1s ease infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes border-pulse {
  0%, 100% {
    border-color: rgba(74, 222, 128, 0.3);
  }
  50% {
    border-color: rgba(74, 222, 128, 0.8);
  }
}

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

@keyframes border-pulse-dark {
  0%, 100% {
    border-color: rgba(34, 197, 94, 0.3);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.8);
  }
}

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

/* Rotating border animation for in-progress tasks */
@keyframes border-spin {
  0% {
    border-color: rgba(74, 222, 128, 0.8);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.8);
  }
  25% {
    border-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.2);
  }
  50% {
    border-color: rgba(74, 222, 128, 0.8);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.8);
  }
  75% {
    border-color: rgba(74, 222, 128, 0.2);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.2);
  }
  100% {
    border-color: rgba(74, 222, 128, 0.8);
    box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.8);
  }
}

.task-border-rotate {
  border: 2px solid rgba(74, 222, 128, 0.8);
  border-radius: 0.5rem;
  animation: border-spin 1.5s ease-in-out infinite;
}

.dark .task-border-rotate {
  border-color: rgba(34, 197, 94, 0.8);
}

@keyframes border-spin-dark {
  0% {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
  }
  25% {
    border-color: rgba(34, 197, 94, 0.2);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
  }
  50% {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
  }
  75% {
    border-color: rgba(34, 197, 94, 0.2);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.2);
  }
  100% {
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.8);
  }
}

.dark .task-border-rotate {
  animation: border-spin-dark 1.5s ease-in-out infinite;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: none;
}

/* Select styling */
select {
  appearance: none;
  background-color: white;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

select:hover {
  border-color: #9ca3af;
}

select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Dark mode select styling */
.dark select {
  background-color: #111827;
  border-color: #374151;
  color: #f9fafb;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

.dark select:hover {
  border-color: #6b7280;
}

.dark select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Hide scrollbar for mobile tab navigation */
.scrollbar-hide {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.scrollbar-hide::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

@layer utilities {
  .line-clamp-1,
  .line-clamp-2,
  .line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .line-clamp-1 {
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    -webkit-line-clamp: 2;
  }

  .line-clamp-3 {
    -webkit-line-clamp: 3;
  }
}