/* ABSA 4DX Custom Styles */

/* Dashboard animations */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* WIG status indicators */
.wig-status-indicator {
  animation: pulse 2s infinite;
}

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

/* Scoreboard auto-refresh styles */
.scoreboard-card {
  transition: all 0.3s ease;
}

.scoreboard-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* Progress bars animation */
.progress-bar {
  transition: width 1s ease-in-out;
}

/* Lead measure cards */
.lead-measure-card {
  border: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.lead-measure-card:hover {
  border-color: #3B82F6;
}

/* Commitment status badges */
.commitment-done {
  background: linear-gradient(135deg, #10B981, #059669);
}

.commitment-blocked {
  background: linear-gradient(135deg, #EF4444, #DC2626);
}

.commitment-open {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
}

/* Mobile responsive improvements */
@media (max-width: 768px) {
  .mobile-stack {
    flex-direction: column !important;
  }
  
  .mobile-full {
    width: 100% !important;
  }
}

/* Chart container styles */
.chart-container {
  position: relative;
  height: 300px;
}

/* Loading spinner */
.spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3B82F6;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
  margin: 20px auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Button hover effects */
.btn-primary {
  background: linear-gradient(135deg, #3B82F6, #2563EB);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

/* Modal backdrop */
.modal-backdrop {
  backdrop-filter: blur(4px);
}

/* WIG risk level indicators */
.risk-low { color: #10B981; }
.risk-med { color: #F59E0B; }  
.risk-high { color: #EF4444; }

/* 4DX specific colors */
.color-wig { color: #1E40AF; }
.color-lead { color: #059669; }
.color-scoreboard { color: #DC2626; }
.color-cadence { color: #7C3AED; }