/* ============================================
   INFINITY OS - CHART COMPONENTS
   Chart Containers & Styling
   ============================================ */

/* ============================================
   CHART WRAPPER
   ============================================ */

.chart-wrapper {
    position: relative;
    width: 100%;
    padding: var(--space-lg);
    background: var(--glass-bg);
    backdrop-filter: blur(var(--blur-md));
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
}

/* ============================================
   CHART CANVAS STYLES
   ============================================ */

canvas {
    max-width: 100%;
    height: auto;
}

/* ============================================
   CHART LEGEND
   ============================================ */

.chart-legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-color.cyan {
    background: var(--neon-cyan);
    box-shadow: 0 0 8px rgba(0, 240, 255, 0.4);
}

.legend-color.magenta {
    background: var(--neon-magenta);
    box-shadow: 0 0 8px rgba(255, 0, 170, 0.4);
}

.legend-color.green {
    background: var(--neon-green);
    box-shadow: 0 0 8px rgba(0, 255, 136, 0.4);
}

.legend-color.purple {
    background: var(--neon-purple);
    box-shadow: 0 0 8px rgba(187, 0, 255, 0.4);
}

.legend-color.orange {
    background: var(--neon-orange);
    box-shadow: 0 0 8px rgba(255, 102, 0, 0.4);
}

/* ============================================
   MINI CHARTS (Sparklines)
   ============================================ */

.mini-chart {
    width: 100%;
    height: 60px;
}

/* ============================================
   CHART TOOLTIPS
   ============================================ */

.chart-tooltip {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.tooltip-label {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.tooltip-value {
    color: var(--neon-cyan);
    font-weight: 700;
}

/* ============================================
   CHART EMPTY STATE
   ============================================ */

.chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    color: var(--text-tertiary);
}

.chart-empty svg {
    width: 64px;
    height: 64px;
    margin-bottom: var(--space-md);
    opacity: 0.3;
}

.chart-empty-text {
    font-size: 0.875rem;
}

/* ============================================
   RESPONSIVE CHARTS
   ============================================ */

@media (max-width: 768px) {
    .chart-wrapper {
        padding: var(--space-md);
    }
    
    .chart-container {
        min-height: 240px;
    }
}