/**
 * Chart Styling (Recharts + Chart.js Theming)
 * 
 * Applies ALKemy design tokens to chart elements.
 * Standardized on Recharts for React components (per ADR-105 CR-4).
 * 
 * @see .ai_handoffs/plans/ADR-105_ALKEMY_FULL_UI_REDESIGN_SPECIFICATION.md Section 2.2
 */

@layer alkemy-design {
  /* ==========================================================================
     Chart Container
     ========================================================================== */
  
  .alkemy-chart {
    background: var(--bg-card, rgba(255, 255, 255, 0.05));
    border-radius: var(--radius-md, 12px);
    padding: var(--space-md, 16px);
  }

  .alkemy-chart--glass {
    backdrop-filter: blur(var(--glass-blur, 10px));
    -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
    border: 1px solid var(--border-card, rgba(0, 212, 255, 0.2));
  }

  /* ==========================================================================
     Recharts Overrides (React Charts)
     ========================================================================== */
  
  /* Line colors by parameter type */
  .recharts-line.line-ph .recharts-line-curve {
    stroke: var(--chart-ph, #00d4ff);
    stroke-width: 2;
  }

  .recharts-line.line-salinity .recharts-line-curve {
    stroke: var(--chart-salinity, #ffd93d);
    stroke-width: 2;
  }

  .recharts-line.line-temperature .recharts-line-curve {
    stroke: var(--chart-temperature, #00ff88);
    stroke-width: 2;
  }

  .recharts-line.line-calcium .recharts-line-curve {
    stroke: var(--chart-calcium, #ff6b6b);
    stroke-width: 2;
  }

  .recharts-line.line-alkalinity .recharts-line-curve {
    stroke: var(--chart-alkalinity, #a855f7);
    stroke-width: 2;
  }

  .recharts-line.line-magnesium .recharts-line-curve {
    stroke: var(--chart-magnesium, #f97316);
    stroke-width: 2;
  }

  /* Grid lines */
  .recharts-cartesian-grid-horizontal line,
  .recharts-cartesian-grid-vertical line {
    stroke: var(--chart-grid, rgba(255, 255, 255, 0.1));
    stroke-dasharray: 4 4;
  }

  /* Axis labels */
  .recharts-xAxis .recharts-text,
  .recharts-yAxis .recharts-text {
    fill: var(--text-secondary, #a0aec0);
    font-size: var(--text-xs, 11px);
    font-family: var(--font-sans, Inter, sans-serif);
  }

  /* Tooltip */
  .recharts-tooltip-wrapper {
    outline: none;
  }

  .recharts-default-tooltip {
    background: var(--bg-secondary, #0d2035) !important;
    border: 1px solid var(--border-card, rgba(0, 212, 255, 0.2)) !important;
    border-radius: var(--radius-sm, 8px) !important;
    box-shadow: var(--shadow-card, 0 4px 24px rgba(0, 0, 0, 0.3)) !important;
  }

  .recharts-tooltip-label {
    color: var(--text-primary, #ffffff) !important;
    font-weight: var(--font-semibold, 600) !important;
  }

  .recharts-tooltip-item {
    color: var(--text-secondary, #a0aec0) !important;
  }

  /* Legend */
  .recharts-legend-item-text {
    color: var(--text-secondary, #a0aec0) !important;
    font-size: var(--text-sm, 12px) !important;
  }

  /* Area fill gradient */
  .recharts-area .recharts-area-area {
    fill-opacity: 0.2;
  }

  /* Dot styling */
  .recharts-dot {
    fill: var(--bg-secondary, #0d2035);
    stroke-width: 2;
  }

  .recharts-active-dot .recharts-dot {
    fill: var(--accent-primary, #00d4ff);
    filter: drop-shadow(0 0 4px var(--accent-primary, #00d4ff));
  }

  /* Reference lines */
  .recharts-reference-line line {
    stroke: var(--status-warning, #ff9f1c);
    stroke-dasharray: 6 3;
  }

  .recharts-reference-line.danger line {
    stroke: var(--status-danger, #ff4757);
  }

  .recharts-reference-line.success line {
    stroke: var(--status-success, #00ff88);
  }

  /* ==========================================================================
     Chart.js Overrides (Legacy Charts)
     Note: New charts should use Recharts per CR-4
     ========================================================================== */
  
  canvas.chartjs-render-monitor {
    background: transparent !important;
  }

  /* ==========================================================================
     Sparkline Mini-Charts
     ========================================================================== */
  
  .sparkline {
    display: inline-block;
    vertical-align: middle;
  }

  .sparkline-container {
    height: 32px;
    width: 80px;
  }

  .sparkline-line {
    stroke: var(--accent-primary, #00d4ff);
    stroke-width: 1.5;
    fill: none;
  }

  .sparkline-area {
    fill: rgba(0, 212, 255, 0.1);
  }

  /* ==========================================================================
     Data Point Markers
     ========================================================================== */
  
  .chart-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: var(--space-xs, 4px);
  }

  .chart-marker--ph { background-color: var(--chart-ph, #00d4ff); }
  .chart-marker--salinity { background-color: var(--chart-salinity, #ffd93d); }
  .chart-marker--temperature { background-color: var(--chart-temperature, #00ff88); }
  .chart-marker--calcium { background-color: var(--chart-calcium, #ff6b6b); }
  .chart-marker--alkalinity { background-color: var(--chart-alkalinity, #a855f7); }
  .chart-marker--magnesium { background-color: var(--chart-magnesium, #f97316); }

  /* ==========================================================================
     Chart Header / Controls
     ========================================================================== */
  
  .chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md, 16px);
  }

  .chart-title {
    font-size: var(--text-lg, 16px);
    font-weight: var(--font-semibold, 600);
    color: var(--text-primary, #ffffff);
  }

  .chart-subtitle {
    font-size: var(--text-sm, 12px);
    color: var(--text-muted, #6b7280);
    margin-top: var(--space-xs, 4px);
  }

  .chart-range-selector {
    display: flex;
    gap: var(--space-xs, 4px);
  }

  .chart-range-btn {
    padding: var(--space-xs, 4px) var(--space-sm, 8px);
    font-size: var(--text-xs, 11px);
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-card, rgba(0, 212, 255, 0.2));
    background: transparent;
    color: var(--text-secondary, #a0aec0);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease);
  }

  .chart-range-btn:hover {
    border-color: var(--accent-primary, #00d4ff);
    color: var(--text-primary, #ffffff);
  }

  .chart-range-btn.active {
    background: var(--accent-primary, #00d4ff);
    border-color: var(--accent-primary, #00d4ff);
    color: var(--bg-primary, #0a1628);
  }

  /* ==========================================================================
     Loading State
     ========================================================================== */
  
  .chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted, #6b7280);
  }

  .chart-loading-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border-card, rgba(0, 212, 255, 0.2));
    border-top-color: var(--accent-primary, #00d4ff);
    border-radius: 50%;
    animation: chart-spin 0.8s linear infinite;
  }

  @keyframes chart-spin {
    to { transform: rotate(360deg); }
  }

  /* ==========================================================================
     Empty State
     ========================================================================== */
  
  .chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-muted, #6b7280);
    text-align: center;
  }

  .chart-empty-icon {
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-md, 16px);
    opacity: 0.5;
  }

  .chart-empty-text {
    font-size: var(--text-sm, 12px);
  }
}