/* ============================================================================
   CD Chart Animation Styles
   Production-ready modular CSS with exposed variables
   ============================================================================ */

/* Color Variables - Customize these for your brand */
:root {
  /* Border & Outline Colors */
  --cd-chart-anim-border-dotted: #d0d0d0;
  --cd-chart-anim-border-solid: #d0d0d0;
  
  /* Background & Fill Colors */
  --cd-chart-anim-bg: transparent;
  --cd-chart-anim-fill: transparent;
  
  /* Chart Element Colors */
  --cd-chart-anim-chart-stroke: #1a1a1a;
  --cd-chart-anim-chart-fill: #1a1a1a;
  
  /* Checkmark Colors */
  --cd-chart-anim-checkmark-bg: #22c55e;
  --cd-chart-anim-checkmark-border: #16a34a;
  --cd-chart-anim-checkmark-icon: white;
  
  /* Shadow Colors */
  --cd-chart-anim-shadow-color: rgba(0, 0, 0, 0);
}

/* Dark Mode Colors */
.dark {
  --cd-chart-anim-border-dotted: #404040;
  --cd-chart-anim-border-solid: #404040;
  --cd-chart-anim-bg: transparent;
  --cd-chart-anim-fill: transparent;
  --cd-chart-anim-chart-stroke: #FAFAFA;
  --cd-chart-anim-chart-fill: #FAFAFA;
  --cd-chart-anim-shadow-color: rgba(0, 0, 0, 0);
}

/* Container Styles */
.cd-chart-anim-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background: var(--cd-chart-anim-bg);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* SVG Canvas */
.cd-chart-anim-svg {
  position: absolute;
  width: 100%;
  height: 100%;
}

/* Rectangle Styles */
.cd-chart-anim-rect-outline {
  fill: none;
  stroke: var(--cd-chart-anim-border-dotted);
  stroke-width: 2;
  stroke-dasharray: 8 6;
}

.cd-chart-anim-rect-filled {
  fill: var(--cd-chart-anim-fill);
  stroke: none;
}

.cd-chart-anim-rect-border {
  fill: none;
  stroke: var(--cd-chart-anim-border-solid);
  stroke-width: 2;
}

/* Chart Element Styles */
.cd-chart-anim-chart-element {
  stroke: var(--cd-chart-anim-chart-stroke);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cd-chart-anim-pie-slice {
  fill: transparent;
}

.cd-chart-anim-bar {
  fill: transparent;
}

.cd-chart-anim-chart-fill {
  fill: none;
}

.cd-chart-anim-chart-dot {
  fill: var(--cd-chart-anim-chart-fill);
}

.cd-chart-anim-chart-axis {
  stroke: var(--cd-chart-anim-chart-stroke);
  stroke-width: 2;
}

/* Checkmark Styles */
.cd-chart-anim-checkmark-circle {
  fill: var(--cd-chart-anim-checkmark-bg);
  stroke: var(--cd-chart-anim-checkmark-border);
  stroke-width: 2.5;
}

.cd-chart-anim-checkmark-path {
  fill: none;
  stroke: var(--cd-chart-anim-checkmark-icon);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Debug Display */
.cd-chart-anim-debug {
  position: fixed;
  top: 10px;
  left: 10px;
  color: #333;
  background: rgba(255, 255, 255, 0.9);
  padding: 10px;
  font-family: monospace;
  font-size: 12px;
  z-index: 1000;
  border: 1px solid #ddd;
  border-radius: 4px;
  pointer-events: none;
}

/* Hide debug by default */
.cd-chart-anim-debug.cd-chart-anim-debug-hidden {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cd-chart-anim-container {
    min-height: 300px;
  }
}

/* Full viewport mode (optional) */
.cd-chart-anim-container.cd-chart-anim-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  min-height: 100vh;
}