// Dashboard component styles
.dashboard-container {
  max-width: 1600px;
  margin: 0 auto;
}

// Animations
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

// Animation classes
.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-in-left {
  animation: slideInLeft 0.6s ease-out forwards;
}

// Animation delays
.animation-delay-100 {
  animation-delay: 100ms;
}

.animation-delay-200 {
  animation-delay: 200ms;
}

.animation-delay-300 {
  animation-delay: 300ms;
}

.animation-delay-400 {
  animation-delay: 400ms;
}

.animation-delay-500 {
  animation-delay: 500ms;
}

.animation-delay-600 {
  animation-delay: 600ms;
}

.animation-delay-700 {
  animation-delay: 700ms;
}

.animation-delay-800 {
  animation-delay: 800ms;
}

.animation-delay-900 {
  animation-delay: 900ms;
}

.animation-delay-1000 {
  animation-delay: 1000ms;
}

// Section styles
.section-header {
  h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;

    mat-icon {
      font-size: 1.25rem;
      width: 1.25rem;
      height: 1.25rem;
    }
  }
}

// Widget card styles
.widget-card {
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

// Content card styles
.content-card {
  transition: all 0.3s ease;
}

// Stats card styles
.stats-card {
  transition: all 0.3s ease;
}

// Action button styles
.action-button {
  color: #6b7280;
  transition: all 0.3s ease;
  transform: scale(0.95);
  width: fit-content;

  &:hover {
    transform: scale(1);
  }

  mat-icon {
    font-size: 1rem;
    width: 1rem;
    height: 1rem;
    transition: transform 0.3s ease;
  }

  &:hover mat-icon {
    transform: translateX(2px);
  }
}

// Content gallery styles
.content-gallery {
  min-height: 200px;

  ::ng-deep {
    .gallery-container {
      border-radius: 0.5rem;
      overflow: hidden;
    }
  }
}

// Statistics content styles
.statistics-content {
  min-height: 300px;

  ::ng-deep {
    .chart-container {
      border-radius: 0.5rem;
    }
  }
}

// Enhanced loading state
@keyframes bounce {

  0%,
  80%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }
}

// Responsive improvements
@media (max-width: 640px) {
  .dashboard-container {
    padding: 1rem;
  }

  .section-header h2 {
    font-size: 1rem;
  }

  .content-card,
  .stats-card {
    mat-card-content {
      padding: 1rem !important;
    }
  }
}

// Print styles
@media print {
  .action-button {
    display: none;
  }

  .dashboard-container {
    animation: none;
  }

  .animate-fade-in,
  .animate-slide-in-left {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

// Accessibility improvements
@media (prefers-reduced-motion: reduce) {

  .animate-fade-in,
  .animate-slide-in-left,
  .widget-card,
  .content-card,
  .stats-card,
  .action-button {
    animation: none;
    transition: none;
  }
}

// Focus styles for better keyboard navigation
.action-button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

// Custom scrollbar for content areas
.content-gallery,
.statistics-content {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;

    &:hover {
      background: #9ca3af;
    }
  }
}