/* Base styles */
[x-cloak] { display: none !important; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* Smooth transitions */
* { scrollbar-color: #30363d #0d1117; }

/* Toggle switch animation */
.peer:checked ~ div::after {
  transition: transform 0.2s ease-in-out;
}

/* Loading skeleton */
.skeleton {
  background: linear-gradient(90deg, #161b22 25%, #1c2128 50%, #161b22 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
}

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

/* Chart.js canvas */
canvas {
  max-width: 100%;
}

/* Mobile sidebar overlay */
@media (max-width: 1023px) {
  #sidebar:not(.-translate-x-full) ~ .lg\:ml-64 {
    position: relative;
  }
  #sidebar:not(.-translate-x-full)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: -1;
  }
}

/* Table responsive */
.overflow-x-auto {
  -webkit-overflow-scrolling: touch;
}

/* Focus styles */
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.3);
}