/* Estilos customizados para Dashboard CBMMG */

:root {
  --cbmmg-red: #DC2626;
  --cbmmg-blue: #1E40AF;
  --cbmmg-yellow: #F59E0B;
  --cbmmg-green: #10B981;
}

/* Logo dos Bombeiros animado */
.logo-bombeiros {
  transition: transform 0.3s ease;
}

.logo-bombeiros:hover {
  transform: scale(1.1) rotate(5deg);
}

/* Animações personalizadas */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

/* Cards com hover effect */
.metric-card {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--cbmmg-blue);
}

/* Gradientes CBMMG */
.gradient-cbmmg-red {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%);
}

.gradient-cbmmg-blue {
  background: linear-gradient(135deg, #1E40AF 0%, #1D4ED8 100%);
}

.gradient-cbmmg-yellow {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
}

/* Estilos para tabela */
.table-hover tr:hover {
  background-color: #F8FAFC;
  transform: scale(1.01);
  transition: all 0.2s ease;
}

/* Loading spinner customizado */
.cbmmg-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--cbmmg-red);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

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

/* Status indicators */
.status-success {
  color: var(--cbmmg-green);
  animation: pulse 2s infinite;
}

.status-error {
  color: var(--cbmmg-red);
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.5; }
}

/* Progress bars com estilo CBMMG */
.progress-cbmmg {
  background: linear-gradient(90deg, var(--cbmmg-blue) 0%, var(--cbmmg-red) 100%);
  background-size: 200% 100%;
  animation: progressShine 3s ease-in-out infinite;
}

@keyframes progressShine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Botão de exportação estilizado */
.btn-export {
  background: linear-gradient(45deg, var(--cbmmg-blue), var(--cbmmg-red));
  transition: all 0.3s ease;
}

.btn-export:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* Timeline de atividades */
.timeline-item {
  position: relative;
  padding-left: 20px;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 8px;
  width: 2px;
  height: calc(100% - 16px);
  background: #E5E7EB;
}

.timeline-item:last-child::before {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .logo-bombeiros {
    width: 60px;
    height: 60px;
  }
  
  .metric-card {
    padding: 1rem;
  }
  
  .container {
    padding: 0.5rem;
  }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #1F2937;
    --bg-secondary: #374151;
    --text-primary: #F9FAFB;
    --text-secondary: #D1D5DB;
  }
}

/* Scrollbar customizada */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #F1F5F9;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--cbmmg-blue);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cbmmg-red);
}