/* ====================================================================
   IO CHART - 60 FPS Real-time Line Chart Component
   ==================================================================== */

.io-chart-wrapper {
    position: relative;
    background: var(--io-surface-sunken);
    border: 1px solid var(--io-border);
    padding: var(--io-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--io-space-sm);
}

/* Fading border effect - incomplete right side */
.io-chart-wrapper::after {
    content: '';
    position: absolute;
    right: 0;
    top: 15%;
    height: 70%;
    width: 1px;
    background: var(--io-border-fade-accent-v);
    pointer-events: none;
}

/* ====================================================================
   CHART LABEL
   ==================================================================== */

.io-chart-label {
    font-size: var(--io-text-sm);
    color: var(--io-text-secondary);
    font-family: var(--io-font-mono);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--io-space-xs);
}

.io-chart-label::before {
    content: '';
    width: 3px;
    height: 12px;
    background: var(--io-accent);
    display: block;
    box-shadow: var(--io-glow-sm);
}

/* ====================================================================
   CANVAS CONTAINER
   ==================================================================== */

.io-chart-canvas-container {
    position: relative;
    background: var(--io-surface-base);
    border: 1px solid var(--io-border-subtle);
    overflow: hidden;
}

/* Top border fade */
.io-chart-canvas-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--io-border-fade-accent-h);
    pointer-events: none;
    z-index: 1;
}

/* Bottom border fade */
.io-chart-canvas-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--io-border-fade-accent-h);
    pointer-events: none;
    z-index: 1;
}

.io-chart-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ====================================================================
   CURRENT VALUE DISPLAY
   ==================================================================== */

.io-chart-value {
    position: absolute;
    top: var(--io-space-md);
    right: var(--io-space-md);
    background: var(--io-surface-raised);
    border: 1px solid var(--io-border);
    padding: var(--io-space-xs) var(--io-space-sm);
    font-family: var(--io-font-mono);
    font-size: var(--io-text-lg);
    font-weight: 600;
    color: var(--io-accent);
    letter-spacing: 0.05em;
    box-shadow: var(--io-shadow-sm);
    z-index: 2;
    pointer-events: none;
}

/* Subtle glow on value */
.io-chart-value::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: var(--io-bg-accent-gradient);
    opacity: 0.3;
    z-index: -1;
    pointer-events: none;
}

/* ====================================================================
   GRID OVERLAY (Optional - if you want styled grid labels)
   ==================================================================== */

.io-chart-grid-label {
    font-family: var(--io-font-mono);
    font-size: var(--io-text-xs);
    color: var(--io-text-tertiary);
    opacity: 0.6;
}

/* ====================================================================
   STATES
   ==================================================================== */

.io-chart-wrapper.paused {
    opacity: 0.6;
}

.io-chart-wrapper.paused::before {
    content: 'PAUSED';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--io-surface-overlay);
    border: 1px solid var(--io-border);
    padding: var(--io-space-sm) var(--io-space-md);
    font-family: var(--io-font-mono);
    font-size: var(--io-text-xs);
    color: var(--io-text-secondary);
    letter-spacing: 0.1em;
    z-index: 10;
    pointer-events: none;
}

/* ====================================================================
   VARIANTS - Different chart sizes
   ==================================================================== */

.io-chart-wrapper.small {
    padding: var(--io-space-sm);
}

.io-chart-wrapper.small .io-chart-label {
    font-size: var(--io-text-xs);
}

.io-chart-wrapper.small .io-chart-value {
    font-size: var(--io-text-base);
    padding: 4px 8px;
}

.io-chart-wrapper.large {
    padding: var(--io-space-lg);
}

.io-chart-wrapper.large .io-chart-label {
    font-size: var(--io-text-base);
}

.io-chart-wrapper.large .io-chart-value {
    font-size: var(--io-text-xl);
}

/* ====================================================================
   NO DATA STATE
   ==================================================================== */

.io-chart-wrapper.no-data .io-chart-canvas-container::after {
    content: 'NO DATA';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--io-font-mono);
    font-size: var(--io-text-sm);
    color: var(--io-text-tertiary);
    letter-spacing: 0.1em;
    opacity: 0.3;
    z-index: 5;
}

/* ====================================================================
   ANIMATIONS
   ==================================================================== */

.io-chart-wrapper {
    animation: io-fade-in var(--io-transition-base);
}

.io-chart-value {
    transition: color var(--io-transition-fast);
}

/* Pulse effect when value changes dramatically */
@keyframes io-chart-value-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
        color: var(--io-accent-bright);
        text-shadow: 0 0 8px var(--io-accent-glow);
    }
}

.io-chart-value.spike {
    animation: io-chart-value-pulse 0.3s ease;
}