/**
 * Styles personnalisés pour les composants Chantier
 */

// Styles pour les barres de progression
.progress-small {
  .p-progressbar-value {
    border-radius: 3px;
  }
}

.progress-normal {
  .p-progressbar-value {
    border-radius: 4px;
  }
}

.progress-large {
  .p-progressbar-value {
    border-radius: 6px;
  }
}

// Animation pour les indicateurs d'urgence
.urgency-indicator {
  animation: pulse 2s infinite;
  
  &.retard {
    animation: pulse-red 2s infinite;
  }
  
  &.bientot-termine {
    animation: pulse-green 2s infinite;
  }
}

@keyframes pulse-red {
  0% { opacity: 1; }
  50% { opacity: 0.5; color: #ef4444; }
  100% { opacity: 1; }
}

@keyframes pulse-green {
  0% { opacity: 1; }
  50% { opacity: 0.7; color: #10b981; }
  100% { opacity: 1; }
}

// Styles pour les boutons d'actions
.chantier-actions {
  .p-button {
    transition: all 0.2s ease;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    &:active {
      transform: translateY(0);
    }
  }
  
  // Couleurs spécifiques pour les boutons
  .action-view:hover {
    color: var(--blue-500) !important;
    background: var(--blue-50) !important;
  }
  
  .action-phases:hover {
    color: var(--green-500) !important;
    background: var(--green-50) !important;
  }
  
  .action-planning:hover {
    color: var(--purple-500) !important;
    background: var(--purple-50) !important;
  }
  
  .action-stats:hover {
    color: var(--cyan-500) !important;
    background: var(--cyan-50) !important;
  }
  
  .action-menu:hover {
    color: var(--gray-600) !important;
    background: var(--gray-100) !important;
  }
}

// Styles pour les tags de statut
.chantier-status-tag {
  font-weight: 500;
  
  &.status-en-cours {
    background: var(--green-100);
    color: var(--green-700);
  }
  
  &.status-planifie {
    background: var(--blue-100);
    color: var(--blue-700);
  }
  
  &.status-en-retard {
    background: var(--red-100);
    color: var(--red-700);
  }
  
  &.status-termine {
    background: var(--green-200);
    color: var(--green-800);
  }
  
  &.status-suspendu {
    background: var(--orange-100);
    color: var(--orange-700);
  }
}

// Responsive design
@media (max-width: 768px) {
  .chantier-actions {
    .p-button {
      padding: 0.5rem;
    }
  }
}