/* Configuration Tailwind */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Variables de couleurs personnalisées */
:root {
  --primary: #228B22;
  --background-light: #F8F9FA;
  --background-dark: #102216;
  --text-light: #212529;
  --text-dark: #E8E6E3;
  --text-secondary-light: #6C757D;
  --text-secondary-dark: #A5A3A0;
  --card-light: #FFFFFF;
  --card-dark: #1A2E20;
  --border-light: #E9ECEF;
  --border-dark: #2C3E32;
  --input-light: #F1F3F5;
  --input-dark: #213426;
}

/* Configuration des icônes Material Symbols */
.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
}

/* Animations personnalisées */
@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.5s ease-out forwards;
}

.animate-fade-out-up {
  animation: fadeOutUp 0.5s ease-out forwards;
}

/* Styles pour les tâches */
.task-item {
  transition: all 0.3s ease;
}

.task-item .delete-btn {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.task-item:hover .delete-btn {
  opacity: 1;
  transform: scale(1);
}

/* Styles pour les catégories */
.category-item .category-actions {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.category-item:hover .category-actions {
  opacity: 1;
}

/* Configuration Tailwind inline */
.bg-primary {
  background-color: var(--primary);
}

.text-primary {
  color: var(--primary);
}

.bg-background-light {
  background-color: var(--background-light);
}

.bg-background-dark {
  background-color: var(--background-dark);
}

.text-text-light {
  color: var(--text-light);
}

.text-text-dark {
  color: var(--text-dark);
}

.text-text-secondary-light {
  color: var(--text-secondary-light);
}

.text-text-secondary-dark {
  color: var(--text-secondary-dark);
}

.bg-card-light {
  background-color: var(--card-light);
}

.bg-card-dark {
  background-color: var(--card-dark);
}

.border-border-light {
  border-color: var(--border-light);
}

.border-border-dark {
  border-color: var(--border-dark);
}

.bg-input-light {
  background-color: var(--input-light);
}

.bg-input-dark {
  background-color: var(--input-dark);
}

/* Mode sombre */
.dark .bg-background-light {
  background-color: var(--background-dark);
}

.dark .text-text-light {
  color: var(--text-dark);
}

.dark .text-text-secondary-light {
  color: var(--text-secondary-dark);
}

.dark .bg-card-light {
  background-color: var(--card-dark);
}

.dark .border-border-light {
  border-color: var(--border-dark);
}

.dark .bg-input-light {
  background-color: var(--input-dark);
}

/* Personnalisation des checkboxes */
input[type="checkbox"] {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  position: relative;
}

input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background-image: url('data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e');
  background-size: contain;
  background-repeat: no-repeat;
}

/* Styles responsifs */
@media (max-width: 640px) {
  .task-item .delete-btn {
    opacity: 1;
  }
  
  .category-item .category-actions {
    opacity: 1;
  }
}