src/styles/dashboard.css

/* Dashboard Styles */
.hover-scale {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-scale:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);
}

/* Gradient backgrounds for stats cards */
.bg-gradient-to-br {
  background-size: 200% 200%;
  animation: gradient-animation 6s ease infinite;
}

@keyframes gradient-animation {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* Soft shadow for cards */
.shadow-sm {
  box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.1);
  transition: box-shadow 0.2s ease;
}

.shadow-sm:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.08);
}

/* Status and severity badges */
.badge-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    box-shadow: 0 0 5px -5px currentColor;
  }
  to {
    box-shadow: 0 0 10px -2px currentColor;
  }
}

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

/* Scrollable content */
.scrollable-content {
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.scrollable-content::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 10px;
}

.scrollable-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.25);
}

/* Fix for table container scroll */
.table-container {
  overflow-x: auto;
  overflow-y: hidden;
}

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

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

/* Status badge colors */
.badge-status-open {
  background-color: #f97316;
  color: white;
}

.badge-status-in-progress {
  background-color: #3b82f6;
  color: white;
}

.badge-status-completed {
  background-color: #22c55e;
  color: white;
}

.badge-status-closed {
  background-color: #64748b;
  color: white;
}

.badge-status-in-review {
  background-color: #8b5cf6;
  color: white;
}

/* Severity badge colors */
.badge-severity-high {
  color: #ef4444;
  border-color: #ef4444;
}

.badge-severity-medium {
  color: #f97316;
  border-color: #f97316;
}

.badge-severity-low {
  color: #22c55e;
  border-color: #22c55e;
}

/* Staggered animation for list items */
.stagger-item {
  opacity: 0;
  transform: translateY(10px);
  animation: staggerFadeIn 0.5s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }

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

/* Charts animation */
.chart-container {
  opacity: 0;
  animation: chartFadeIn 1s ease forwards 0.5s;
}

@keyframes chartFadeIn {
  to {
    opacity: 1;
  }
}

/* Dropdown animations and styling */
@keyframes dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dropdown-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.dropdown-menu {
  z-index: 9999 !important;
  animation: dropdown-in 0.2s ease forwards;
  box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.05);
  backdrop-filter: blur(5px);
}

.dropdown-item {
  transition: background-color 0.15s ease, color 0.15s ease;
  border-radius: 4px;
  margin: 2px 0;
}

.dropdown-item:hover {
  background-color: rgba(99, 102, 241, 0.1);
}

.dropdown-item.active {
  background-color: rgba(99, 102, 241, 0.15);
  color: rgb(99, 102, 241);
  font-weight: 500;
}

/* Improved scrollbar for dropdowns */
.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
}

/* Fix for dropdown positioning */
.dropdown-container {
  position: relative;
}

/* Ensure dropdowns appear over other elements */
.dropdown-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  z-index: 9990;
  pointer-events: none;
}

/* Clickable area for dropdowns */
.dropdown-active {
  pointer-events: auto;
}

/* Improved focus styles for dropdowns */
.dropdown-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.4);
}