/*
 * CHARTS.CSS
 * Chart and visualization styles with CSS custom properties
 */

/* --------------------------------------------
 * CSS CUSTOM PROPERTIES FOR CHARTS
 * -------------------------------------------- */

:root {
  /* Progress bar widths */
  --progress: 0%;
  --bar-width: 0%;

  /* Chart colors */
  --chart-color-1: #06b6d4;  /* Cyan */
  --chart-color-2: #14b8a6;  /* Teal */
  --chart-color-3: #fb923c;  /* Orange */
  --chart-color-4: #8b5cf6;  /* Purple */
  --chart-color-5: #ec4899;  /* Pink */
  --chart-color-6: #22c55e;  /* Green */
}

/* --------------------------------------------
 * PROGRESS BARS
 * -------------------------------------------- */

.progress-bar {
  position: relative;
  height: 1rem;
  background: linear-gradient(
    to right,
    rgb(229 231 235 / 0.5),
    rgb(229 231 235 / 1)
  );
  dark:background(
    linear-gradient(
      to right,
      rgb(55 65 81 / 0.5),
      rgb(55 65 81 / 1)
    )
  );
  border-radius: 9999px;
  overflow: hidden;
}

.progress-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: linear-gradient(
    to right,
    rgb(6 182 212),
    rgb(20 184 166)
  );
  border-radius: 9999px;
  transition: width 0.5s ease-out;
  /* Use CSS variable for dynamic width */
  width: var(--progress);
}

/* Success progress bar */
.progress-bar-fill-success {
  @apply bg-gradient-to-r from-green-500 to-green-600;
}

/* Warning progress bar */
.progress-bar-fill-warning {
  @apply bg-gradient-to-r from-yellow-500 to-yellow-600;
}

/* Danger progress bar */
.progress-bar-fill-danger {
  @apply bg-gradient-to-r from-red-500 to-red-600;
}

/* Info progress bar */
.progress-bar-fill-info {
  @apply bg-gradient-to-r from-blue-500 to-blue-600;
}

/* Striped progress bar */
.progress-bar-fill-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

/* Animated progress bar */
.progress-bar-fill-animated {
  animation: progress 1s ease-out forwards;
}

/* --------------------------------------------
 * BAR CHARTS
 * -------------------------------------------- */

.bar-chart {
  @apply flex items-end space-x-2;
  height: 12rem;
}

.bar-chart-item {
  @apply flex-1 flex flex-col items-center;
}

.bar-chart-bar {
  @apply w-full rounded-t-lg transition-all duration-300;
  min-height: 0.5rem;
  /* Use CSS variable for dynamic height */
  height: var(--bar-height, 0%);
}

.bar-chart-bar:hover {
  @apply opacity-80;
  transform: scaleY(1.02);
  transform-origin: bottom;
}

/* Bar chart colors */
.bar-chart-blue {
  @apply bg-gradient-to-t from-blue-600 to-blue-500;
}

.bar-chart-green {
  @apply bg-gradient-to-t from-green-600 to-green-500;
}

.bar-chart-yellow {
  @apply bg-gradient-to-t from-yellow-600 to-yellow-500;
}

.bar-chart-orange {
  @apply bg-gradient-to-t from-orange-600 to-orange-500;
}

.bar-chart-red {
  @apply bg-gradient-to-t from-red-600 to-red-500;
}

.bar-chart-purple {
  @apply bg-gradient-to-t from-purple-600 to-purple-500;
}

.bar-chart-label {
  @apply text-xs text-gray-600 dark:text-gray-400 mt-2 text-center;
}

.bar-chart-value {
  @apply text-sm font-bold text-gray-900 dark:text-white mb-1;
}

/* --------------------------------------------
 * HORIZONTAL BAR CHARTS
 * -------------------------------------------- */

.horizontal-bar-chart {
  @apply space-y-3;
}

.horizontal-bar-chart-item {
  @apply flex items-center space-x-3;
}

.horizontal-bar-chart-label {
  @apply w-16 text-xs font-bold text-gray-600 dark:text-gray-400 text-right;
}

.horizontal-bar-chart-container {
  @apply flex-1 relative h-7 overflow-hidden
         bg-gray-100 dark:bg-gray-700 rounded-lg;
}

.horizontal-bar-chart-bar {
  @apply absolute top-0 left-0 h-full rounded-lg
         transition-all duration-700 ease-out
         shadow-lg;
  /* Use CSS variable for dynamic width */
  width: var(--bar-width);
}

.horizontal-bar-chart-value {
  @apply absolute inset-0 flex items-center px-2.5
         text-xs font-black text-gray-700 dark:text-gray-200 z-10;
}

/* --------------------------------------------
 * DONUT CHARTS
 * -------------------------------------------- */

.donut-chart {
  position: relative;
  width: 12rem;
  height: 12rem;
}

.donut-chart-svg {
  @apply w-full h-full;
  transform: rotate(-90deg);
}

.donut-chart-segment {
  @apply transition-all duration-300;
  cursor: pointer;
}

.donut-chart-segment:hover {
  @apply opacity-80;
  transform: scale(1.05);
  transform-origin: center;
}

.donut-chart-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.donut-chart-value {
  @apply text-3xl font-black text-gray-900 dark:text-white;
}

.donut-chart-label {
  @apply text-xs font-semibold text-gray-500 dark:text-gray-400
         uppercase tracking-wide;
}

/* --------------------------------------------
 * LINE CHARTS (CSS-only approximation)
 * -------------------------------------------- */

.line-chart {
  @apply relative;
  height: 12rem;
  padding: 1rem;
}

.line-chart-grid {
  @apply absolute inset-0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    rgb(229 231 235 / 0.5) 20px
  );
  dark:background-image(
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 19px,
      rgb(55 65 81 / 0.5) 20px
    )
  );
}

.line-chart-path {
  @apply absolute inset-0;
}

.line-chart-line {
  fill: none;
  stroke: url(#line-gradient);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-chart-area {
  fill: url(#area-gradient);
  opacity: 0.3;
}

.line-chart-point {
  fill: white;
  stroke: rgb(6 182 212);
  stroke-width: 3;
  r: 5;
  transition: all 0.2s;
}

.line-chart-point:hover {
  r: 7;
  stroke-width: 4;
}

/* --------------------------------------------
 * STAT CARDS
 * -------------------------------------------- */

.stat-card {
  @apply p-4 rounded-xl
         bg-white dark:bg-gray-800
         border border-gray-200 dark:border-gray-700
         shadow-sm;
}

.stat-card-value {
  @apply text-2xl font-black text-gray-900 dark:text-white;
}

.stat-card-label {
  @apply text-xs font-semibold text-gray-500 dark:text-gray-400
         uppercase tracking-wide;
}

.stat-card-change {
  @apply flex items-center space-x-1 text-sm font-bold mt-2;
}

.stat-card-change-positive {
  @apply text-green-600 dark:text-green-400;
}

.stat-card-change-negative {
  @apply text-red-600 dark:text-red-400;
}

.stat-card-change-neutral {
  @apply text-gray-600 dark:text-gray-400;
}

/* --------------------------------------------
 * SPARKLINES (Mini charts)
 * -------------------------------------------- */

.sparkline {
  @apply inline-block align-middle;
  height: 2rem;
  width: 6rem;
}

.sparkline-path {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sparkline-positive {
  stroke: rgb(34 197 94);
}

.sparkline-negative {
  stroke: rgb(239 68 68);
}

.sparkline-neutral {
  stroke: rgb(107 114 128);
}

/* --------------------------------------------
 * HEATMAP (for peak hours, etc.)
 * -------------------------------------------- */

.heatmap {
  @apply grid gap-1;
}

.heatmap-cell {
  @apply relative h-8 rounded-lg
         transition-all duration-200
         cursor-pointer
         overflow-hidden;
}

.heatmap-cell:hover {
  @apply shadow-md transform scale-105;
}

.heatmap-cell-value {
  @apply absolute inset-0 flex items-center justify-center
         text-xs font-bold text-gray-700 dark:text-gray-200 z-10;
}

/* Heatmap intensity levels */
.heatmap-intensity-low {
  @apply bg-gradient-to-br from-green-500 to-green-600
         text-white;
}

.heatmap-intensity-medium-low {
  @apply bg-gradient-to-br from-yellow-500 to-yellow-600
         text-white;
}

.heatmap-intensity-medium {
  @apply bg-gradient-to-br from-orange-500 to-orange-600
         text-white;
}

.heatmap-intensity-high {
  @apply bg-gradient-to-br from-red-500 to-red-600
         text-white;
}

/* --------------------------------------------
 * FUNNEL CHART
 * -------------------------------------------- */

.funnel-chart {
  @apply space-y-3;
}

.funnel-stage {
  @apply relative;
}

.funnel-stage-bar {
  @apply relative h-12 rounded-xl
         transition-all duration-700 ease-out;
}

.funnel-stage-fill {
  @apply absolute inset-y-0 left-0 rounded-xl
         transition-all duration-700 ease-out;
}

.funnel-stage-fill-full {
  @apply h-full w-full;
}

.funnel-stage-fill-partial {
  @apply rounded-l-xl;
}

.funnel-stage-label {
  @apply absolute inset-0 flex items-center justify-center
         text-sm font-bold text-white;
}

.funnel-connector {
  @apply absolute top-0 left-0 w-6 h-8 flex flex-col items-center;
}

.funnel-connector-line {
  @apply w-0.5 h-full bg-gradient-to-b;
}

/* --------------------------------------------
 * LEGEND
 * -------------------------------------------- */

.chart-legend {
  @apply flex flex-wrap items-center gap-4 mt-4;
}

.legend-item {
  @apply flex items-center space-x-2;
}

.legend-color {
  @apply w-3 h-3 rounded;
}

.legend-label {
  @apply text-xs font-medium text-gray-600 dark:text-gray-400;
}

/* --------------------------------------------
 * TOOLTIP (for charts)
 * -------------------------------------------- */

.chart-tooltip {
  @apply absolute bg-gray-900 dark:bg-gray-100
         text-white dark:text-gray-900
         text-xs font-medium px-2 py-1 rounded
         shadow-lg pointer-events-none
         opacity-0 transition-opacity duration-200;
  z-index: 50;
}

.chart-tooltip.visible {
  @apply opacity-100;
}

/* --------------------------------------------
 * LOADING STATE FOR CHARTS
 * -------------------------------------------- */

.chart-loading {
  @apply relative overflow-hidden;
}

.chart-loading::after {
  content: '';
  @apply absolute inset-0 bg-gradient-to-r;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: shimmer 1.5s infinite;
}

.dark .chart-loading::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

/* --------------------------------------------
 * RESPONSIVE CHARTS
 * -------------------------------------------- */

@media (max-width: 640px) {
  .bar-chart {
    height: 8rem;
  }

  .bar-chart-label {
    @apply text-[10px];
  }

  .donut-chart {
    width: 8rem;
    height: 8rem;
  }

  .donut-chart-value {
    @apply text-2xl;
  }

  .horizontal-bar-chart-label {
    @apply w-12 text-[10px];
  }
}