/* FreshCredit Chart Design System
   =================================
   
   Standardized styling for all SVG charts and data visualizations.
   Uses the 5 PASTEL ACCENTS color palette for consistent visual language.
   
   Chart Types:
   - Line charts (area charts with gradient fill)
   - Bar charts (segmented with opacity variants)
   - Progress bars (horizontal with gradient)
   - Mini charts (sparklines for cards)
   
   Import after theme.css to ensure CSS custom properties are available.
*/

@layer components {
  /* ==========================================================================
     SVG CHART CONTAINERS
     ========================================================================== */
  
  .fc-chart {
    @apply w-full h-full;
  }
  
  .fc-chart-container {
    @apply relative;
  }
  
  .fc-chart-container--sm { @apply h-16; }
  .fc-chart-container--md { @apply h-24; }
  .fc-chart-container--lg { @apply h-48; }
  
  /* ==========================================================================
     CHART GRID LINES (Consistent across all dashboards)
     ========================================================================== */
  
  .fc-chart-grid {
    stroke: hsl(var(--border));
    stroke-width: 1;
    opacity: 0.5;
  }
  
  /* ==========================================================================
     LINE CHART STYLES
     ========================================================================== */
  
  .fc-line-chart__line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  .fc-line-chart__line--success { stroke: hsl(var(--success)); }
  .fc-line-chart__line--info { stroke: hsl(var(--info)); }
  .fc-line-chart__line--warning { stroke: hsl(var(--warning)); }
  .fc-line-chart__line--destructive { stroke: hsl(var(--destructive)); }
  .fc-line-chart__line--accent { stroke: hsl(var(--accent)); }
  .fc-line-chart__line--foreground { stroke: hsl(var(--foreground)); }
  
  .fc-line-chart__point {
    stroke-width: 1.5;
  }
  
  .fc-line-chart__point--success {
    fill: hsl(var(--background));
    stroke: hsl(var(--success));
  }
  
  .fc-line-chart__point--info {
    fill: hsl(var(--background));
    stroke: hsl(var(--info));
  }
  
  /* ==========================================================================
     BAR CHART STYLES (Segmented bars with opacity variants)
     ========================================================================== */
  
  .fc-bar-chart__bar {
    @apply rounded-sm transition-all;
  }
  
  .fc-bar-chart__bar:hover {
    filter: brightness(1.1);
    cursor: pointer;
  }
  
  /* Bar color variants with 3 opacity levels */
  .fc-bar--success { @apply bg-success; }
  .fc-bar--success-70 { @apply bg-success/70; }
  .fc-bar--success-40 { @apply bg-success/40; }
  
  .fc-bar--info { @apply bg-info; }
  .fc-bar--info-70 { @apply bg-info/70; }
  .fc-bar--info-40 { @apply bg-info/40; }
  
  .fc-bar--warning { @apply bg-warning; }
  .fc-bar--warning-70 { @apply bg-warning/70; }
  .fc-bar--warning-40 { @apply bg-warning/40; }
  
  .fc-bar--destructive { @apply bg-destructive; }
  .fc-bar--destructive-70 { @apply bg-destructive/70; }
  .fc-bar--destructive-40 { @apply bg-destructive/40; }
  
  .fc-bar--accent { @apply bg-accent; }
  .fc-bar--accent-70 { @apply bg-accent/70; }
  .fc-bar--accent-40 { @apply bg-accent/40; }
  
  /* ==========================================================================
     MINI BARS (for status cards)
     ========================================================================== */
  
  .fc-mini-bars {
    @apply flex gap-0.5 h-6;
  }
  
  .fc-mini-bar {
    @apply flex-1 rounded-sm;
  }
  
  /* ==========================================================================
     PROGRESS BARS
     ========================================================================== */
  
  .fc-progress {
    @apply w-full bg-muted rounded-full overflow-hidden;
  }
  
  .fc-progress--sm { @apply h-1; }
  .fc-progress--md { @apply h-2; }
  .fc-progress--lg { @apply h-3; }
  
  .fc-progress__bar {
    @apply h-full rounded-full transition-all duration-300;
  }
  
  .fc-progress__bar--success { @apply bg-success; }
  .fc-progress__bar--info { @apply bg-info; }
  .fc-progress__bar--warning { @apply bg-warning; }
  .fc-progress__bar--destructive { @apply bg-destructive; }
  .fc-progress__bar--accent { @apply bg-accent; }
  
  /* ==========================================================================
     CHART LABELS & TYPOGRAPHY
     ========================================================================== */
  
  .fc-chart-label {
    @apply text-[10px] text-muted-foreground;
  }
  
  .fc-chart-value {
    @apply text-sm font-mono text-foreground;
  }
  
  .fc-chart-legend {
    @apply flex items-center gap-4 text-xs text-muted-foreground;
  }
  
  .fc-chart-legend__item {
    @apply flex items-center gap-1.5;
  }
  
  .fc-chart-legend__dot {
    @apply w-3 h-0.5 rounded-full;
  }
}