/* Custom styles for Swipangs Admin - Video Analytics Dashboard */

/* Smooth animations */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Video container aspect ratio */
.aspect-9-16 {
  aspect-ratio: 9 / 16;
}

/* Custom rounded corners */
.rounded-3xl {
  border-radius: 1.5rem;
}

/* Smooth transitions */
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

.duration-300 {
  transition-duration: 300ms;
}

.duration-500 {
  transition-duration: 500ms;
}

/* Light theme improvements */
:root {
  --analytics-card-bg: #ffffff;
  --analytics-card-border: #f3f4f6;
  --analytics-stat-bg: #f8fafc;
  --analytics-text-primary: #111827;
  --analytics-text-secondary: #6b7280;
  --analytics-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --analytics-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Dark theme */
[data-theme="dark"],
.dark {
  --analytics-card-bg: #1f2937;
  --analytics-card-border: #374151;
  --analytics-stat-bg: #374151;
  --analytics-text-primary: #f9fafb;
  --analytics-text-secondary: #9ca3af;
  --analytics-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3);
  --analytics-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.5);
}

/* Apply custom properties to analytics cards */
.analytics-card {
  background-color: var(--analytics-card-bg);
  border-color: var(--analytics-card-border);
  box-shadow: var(--analytics-shadow);
}

.analytics-card:hover {
  box-shadow: var(--analytics-shadow-hover);
}

.analytics-stat-box {
  background: var(--analytics-stat-bg);
  border: 1px solid var(--analytics-card-border);
}

.analytics-text-primary {
  color: var(--analytics-text-primary);
}

.analytics-text-secondary {
  color: var(--analytics-text-secondary);
}

/* Gradient backgrounds for light theme */
.gradient-blue-light {
  background: linear-gradient(to bottom right, rgba(59, 130, 246, 0.08), transparent);
}

.gradient-green-light {
  background: linear-gradient(to bottom right, rgba(34, 197, 94, 0.08), transparent);
}

.gradient-purple-light {
  background: linear-gradient(to bottom right, rgba(168, 85, 247, 0.08), transparent);
}

.gradient-amber-light {
  background: linear-gradient(to bottom right, rgba(245, 158, 11, 0.08), transparent);
}

/* Icon containers with better shadows */
.icon-container {
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}

/* Stat boxes */
.stat-box {
  background: linear-gradient(to bottom right, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0;
}

[data-theme="dark"] .stat-box,
.dark .stat-box {
  background: linear-gradient(to bottom right, #374151, #1f2937);
  border: 1px solid #4b5563;
}

/* Progress bar */
.progress-bar-track {
  background-color: #f3f4f6;
  border-radius: 9999px;
  height: 0.625rem;
  overflow: hidden;
}

[data-theme="dark"] .progress-bar-track,
.dark .progress-bar-track {
  background-color: #374151;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, #06b6d4, #3b82f6);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Video player container */
.video-container {
  max-width: 24rem;
  margin: 0 auto;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #000000;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.video-container video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Responsive utilities */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

.performance-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .performance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .stats-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Spacing utilities */
.mb-8 {
  margin-bottom: 2rem;
}

.space-y-5 > * + * {
  margin-top: 1.25rem;
}