/* Base styles & Tailwind setup */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@layer utilities {
  .glass-card {
    @apply bg-white/70 dark:bg-dark-surface/70 backdrop-blur-lg border border-white/20 dark:border-white/5 shadow-xl;
  }
  
  .glass-panel {
    @apply bg-white/60 dark:bg-dark-surface/60 backdrop-blur-md border border-white/20 dark:border-white/5;
  }
}

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

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

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400 dark:bg-gray-500;
}

/* Chart Canvas Reset */
canvas {
  max-width: 100%;
}

/* Metric Cards Hover Animations */
.metric-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.metric-card:hover {
  transform: translateY(-4px);
}

/* Skeleton Loading Animation */
@keyframes pulse-light {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}

.skeleton {
  @apply bg-gray-200 dark:bg-dark-border rounded animate-pulse;
}

.skeleton-text {
  @apply h-4 w-3/4 skeleton mb-2;
}

.skeleton-text-short {
  @apply h-4 w-1/2 skeleton;
}

.skeleton-title {
  @apply h-8 w-2/3 skeleton mb-4;
}

.skeleton-avatar {
  @apply w-16 h-16 rounded-xl skeleton;
}

/* Table Row Hover */
tbody tr {
  @apply transition-colors duration-150;
}
tbody tr:hover {
  @apply bg-gray-50/50 dark:bg-white/5;
}

/* Progress Bars */
.progress-bar-bg {
  @apply w-full bg-gray-200 dark:bg-dark-border rounded-full h-1.5 overflow-hidden;
}

.progress-bar-fill {
  @apply bg-brand-500 h-1.5 rounded-full;
}

/* Smooth theme transitions */
* {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-duration: 300ms;
}