@import "tailwindcss";

/* Custom utilities */

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

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

::-webkit-scrollbar-thumb {
  background: #64748b;
  border-radius: 4px;
}

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

/* Loading animation for stats */
.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Improved focus styles for accessibility */
.focus-enhanced:focus {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 8px;
}

/* Modern shimmer animation for loading states */
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.animate-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}

/* Enhanced image loading skeleton */
.image-skeleton {
  background: linear-gradient(90deg, 
    #f3f4f6 25%, 
    #e5e7eb 50%, 
    #f3f4f6 75%
  );
  background-size: 200% 100%;
  animation: loading-gradient 1.5s ease-in-out infinite;
}

/* Sticky pagination container */

/* Sidebar width variable (desktop) */
:root {
  --sidebar-width: 14rem;
  --sidebar-width-collapsed: 4rem;
}

/* Toggle via body class set by Navbar */
body.sidebar-collapsed {
  --sidebar-width: var(--sidebar-width-collapsed);
}

/* Desktop main padding follows variable */
@media (min-width: 768px) {
  main#main {
    padding-left: var(--sidebar-width) !important;
    transition: padding-left 0.3s;
  }
}

/* Mobile keeps zero regardless of state */
@media (max-width: 767px) {
  main#main {
    padding-left: 0 !important;
  }
}

#pagination-container {
  position: sticky;
  bottom: 0;
  z-index: 30;
  /* background: white; */
}

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