/* Chart Styling for Roster Nerd - ApexCharts Integration with DaisyUI */

/* Chart Container Base Styling */
.chart-container {
  @apply w-full h-80 relative overflow-hidden rounded-lg;
}

/* Loading State */
.chart-container.loading {
  @apply flex items-center justify-center bg-base-200;
}

.chart-loading-spinner {
  @apply loading loading-spinner loading-lg text-primary;
}

/* Chart Skeleton Loader */
.chart-skeleton {
  @apply animate-pulse bg-base-200 rounded-lg h-full w-full;
}

.chart-skeleton::before {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r from-transparent via-base-300 to-transparent;
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

/* ApexCharts Theme Overrides */
.apexcharts-canvas {
  @apply font-sans;
}

/* Tooltip Styling */
.apexcharts-tooltip {
  @apply bg-base-100 border border-base-300 rounded-lg shadow-lg !important;
  font-family: inherit !important;
}

.apexcharts-tooltip-title {
  @apply bg-base-200 text-base-content font-semibold px-3 py-2 border-b border-base-300 !important;
  margin: 0 !important;
  font-family: inherit !important;
}

.apexcharts-tooltip-series-group {
  @apply px-3 py-2 !important;
}

.apexcharts-tooltip-text {
  @apply text-base-content !important;
  font-family: inherit !important;
}

.apexcharts-tooltip-y-group {
  @apply text-primary font-semibold !important;
}

/* Legend Styling */
.apexcharts-legend {
  @apply justify-center !important;
  font-family: inherit !important;
}

.apexcharts-legend-text {
  @apply text-base-content !important;
  font-family: inherit !important;
}

.apexcharts-legend-marker {
  @apply mr-2 !important;
}

/* Grid and Axes */
.apexcharts-xaxistooltip {
  @apply bg-base-100 border border-base-300 text-base-content !important;
  font-family: inherit !important;
}

.apexcharts-yaxistooltip {
  @apply bg-base-100 border border-base-300 text-base-content !important;
  font-family: inherit !important;
}

/* Data Labels */
.apexcharts-datalabel {
  @apply text-base-content font-medium !important;
  font-family: inherit !important;
}

/* Toolbar */
.apexcharts-toolbar {
  @apply top-2 right-2 !important;
}

.apexcharts-menu {
  @apply bg-base-100 border border-base-300 rounded-lg shadow-lg !important;
}

.apexcharts-menu-item {
  @apply text-base-content hover:bg-base-200 !important;
  font-family: inherit !important;
}

/* Responsive Improvements */
@media (max-width: 768px) {
  .chart-container {
    @apply h-64;
  }

  .apexcharts-legend {
    @apply text-sm !important;
    flex-wrap: wrap !important;
  }

  .apexcharts-legend-text {
    @apply text-xs !important;
  }
}

@media (max-width: 480px) {
  .chart-container {
    @apply h-56;
  }

  .apexcharts-legend {
    display: none !important;
  }

  .apexcharts-tooltip {
    @apply text-sm !important;
  }
}

/* Chart Type Specific Overrides */

/* Donut/Pie Charts */
.apexcharts-pie-label {
  @apply text-base-content font-semibold !important;
  font-family: inherit !important;
}

/* Bar Charts */
.apexcharts-bar-goals-markers {
  @apply opacity-70;
}

/* Area Charts */
.apexcharts-area-series .apexcharts-series-markers {
  @apply opacity-80;
}

/* Treemap */
.apexcharts-treemap-rect {
  @apply stroke-base-300 !important;
  stroke-width: 1 !important;
}

/* Dark Mode Specific Adjustments */
[data-theme="dark"] .apexcharts-gridline {
  @apply stroke-base-content/20 !important;
}

[data-theme="dark"] .apexcharts-text {
  @apply fill-base-content !important;
}

[data-theme="dark"] .apexcharts-xaxis-title-text,
[data-theme="dark"] .apexcharts-yaxis-title-text {
  @apply fill-base-content !important;
}

/* Animation Enhancements */
.chart-container .apexcharts-canvas {
  animation: chartFadeIn 0.8s ease-out;
}

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

/* Focus States for Accessibility */
.apexcharts-legend-series:focus {
  @apply outline-2 outline-primary outline-offset-2 rounded;
}

.apexcharts-toolbar-menu-icon:focus {
  @apply outline-2 outline-primary outline-offset-2 rounded;
}

/* Print Styles */
@media print {
  .chart-container {
    @apply h-auto;
    break-inside: avoid;
  }

  .apexcharts-canvas {
    max-height: 400px !important;
  }

  .apexcharts-legend {
    @apply text-black !important;
  }

  .apexcharts-tooltip {
    display: none !important;
  }
}

/* High DPI / Retina Display Adjustments */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .apexcharts-canvas {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Custom Chart Utilities */
.chart-title {
  @apply text-lg font-semibold text-base-content mb-4 text-center;
}

.chart-subtitle {
  @apply text-sm text-base-content/70 mb-2 text-center;
}

.chart-error {
  @apply flex items-center justify-center h-80 text-error bg-error/10 rounded-lg border border-error/20;
}

.chart-empty {
  @apply flex items-center justify-center h-80 text-base-content/50 bg-base-200 rounded-lg border border-base-300 border-dashed;
}

.chart-loading {
  @apply flex items-center justify-center h-80 bg-base-100;
}

/* Hover Effects */
.chart-container:hover .apexcharts-canvas {
  filter: brightness(1.05);
  transition: filter 0.2s ease;
}

/* Chart Card Integration */
.card .chart-container {
  @apply -mx-6 -mb-6 mt-4;
  border-radius: 0 0 1rem 1rem;
}

/* Ensure charts respect card padding on mobile */
@media (max-width: 640px) {
  .card .chart-container {
    @apply -mx-4 -mb-4;
  }
}