/* ===========================
   Chart-Specific Styles
   =========================== */

/* Tooltip Styles */
.chart-tooltip {
    position: absolute;
    background: rgba(30, 39, 73, 0.98);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    pointer-events: none;
    font-size: var(--font-size-sm);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(10px);
    z-index: 1000;
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.chart-tooltip.visible {
    opacity: 1;
}

.tooltip-title {
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: var(--spacing-xs);
}

.tooltip-row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: 4px 0;
}

.tooltip-label {
    color: var(--color-text-secondary);
}

.tooltip-value {
    color: var(--color-text-primary);
    font-weight: 600;
}

/* Axis Styles */
.axis {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.axis path,
.axis line {
    stroke: var(--color-border);
    shape-rendering: crispEdges;
}

.axis text {
    fill: var(--color-text-secondary);
    font-family: var(--font-family);
}

.axis-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    fill: var(--color-text-primary);
}

/* Grid Lines */
.grid line {
    stroke: var(--color-border);
    stroke-opacity: 0.3;
    stroke-dasharray: 2, 2;
}

.grid path {
    stroke-width: 0;
}

/* Scatter Plot Styles */
.scatter-circle {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1.5px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.scatter-circle:hover {
    stroke: white;
    stroke-width: 2.5px;
    filter: drop-shadow(0 0 8px currentColor);
}

.scatter-circle.smoker {
    fill: var(--color-smoker);
}

.scatter-circle.non-smoker {
    fill: var(--color-non-smoker);
}

/* Bar Chart Styles */
.bar {
    cursor: pointer;
    transition: all var(--transition-base);
}

.bar:hover {
    opacity: 0.8;
    filter: brightness(1.2);
}

.bar.smoker {
    fill: var(--color-smoker);
}

.bar.non-smoker {
    fill: var(--color-non-smoker);
}

.bar-label {
    font-size: var(--font-size-xs);
    fill: var(--color-text-primary);
    font-weight: 600;
}

/* Histogram Styles */
.histogram-bar {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.histogram-bar:hover {
    stroke: white;
    stroke-width: 2px;
    filter: brightness(1.2);
}

/* Box Plot Styles */
.box {
    stroke-width: 2px;
    fill-opacity: 0.7;
    transition: all var(--transition-base);
}

.box:hover {
    fill-opacity: 0.9;
    filter: brightness(1.1);
}

.box.smoker {
    fill: var(--color-smoker);
    stroke: var(--color-smoker);
}

.box.non-smoker {
    fill: var(--color-non-smoker);
    stroke: var(--color-non-smoker);
}

.whisker {
    stroke-width: 2px;
}

.median-line {
    stroke: white;
    stroke-width: 3px;
}

.outlier {
    fill: var(--color-warning);
    stroke: white;
    stroke-width: 1.5px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.outlier:hover {
    r: 6;
    filter: drop-shadow(0 0 6px var(--color-warning));
}

/* Heatmap Styles */
.heatmap-cell {
    stroke: var(--color-bg-card);
    stroke-width: 2px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.heatmap-cell:hover {
    stroke: white;
    stroke-width: 3px;
    filter: brightness(1.2);
}

.heatmap-label {
    font-size: var(--font-size-xs);
    fill: var(--color-text-secondary);
    font-weight: 500;
}

.heatmap-value {
    font-size: var(--font-size-xs);
    fill: white;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Donut Chart Styles */
.arc {
    cursor: pointer;
    stroke: var(--color-bg-card);
    stroke-width: 2px;
    transition: all var(--transition-base);
}

.arc:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

.arc.male {
    fill: var(--color-male);
}

.arc.female {
    fill: var(--color-female);
}

.arc.smoker-yes {
    fill: var(--color-smoker);
}

.arc.smoker-no {
    fill: var(--color-non-smoker);
}

.arc-label {
    font-size: var(--font-size-sm);
    fill: white;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

.arc-percentage {
    font-size: var(--font-size-xs);
    fill: rgba(255, 255, 255, 0.9);
}

/* Bubble Chart Styles */
.bubble {
    stroke: rgba(255, 255, 255, 0.4);
    stroke-width: 2px;
    cursor: pointer;
    transition: all var(--transition-base);
}

.bubble:hover {
    stroke: white;
    stroke-width: 3px;
    filter: drop-shadow(0 0 10px currentColor);
}

.bubble.northeast {
    fill: var(--color-northeast);
}

.bubble.northwest {
    fill: var(--color-northwest);
}

.bubble.southeast {
    fill: var(--color-southeast);
}

.bubble.southwest {
    fill: var(--color-southwest);
}

/* Legend Styles */
.legend {
    font-size: var(--font-size-sm);
}

.legend-item {
    cursor: pointer;
    transition: opacity var(--transition-fast);
}

.legend-item:hover {
    opacity: 0.7;
}

.legend-color {
    stroke: rgba(255, 255, 255, 0.3);
    stroke-width: 1px;
}

.legend-label {
    fill: var(--color-text-primary);
    font-weight: 500;
}

/* Chart Annotations */
.annotation-line {
    stroke: var(--color-accent);
    stroke-width: 2px;
    stroke-dasharray: 5, 5;
    opacity: 0.6;
}

.annotation-label {
    font-size: var(--font-size-xs);
    fill: var(--color-accent);
    font-weight: 600;
}

/* Zoom & Brush Controls */
.brush .selection {
    fill: var(--color-accent);
    fill-opacity: 0.2;
    stroke: var(--color-accent);
    stroke-width: 2px;
}

.zoom-controls {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    display: flex;
    gap: var(--spacing-xs);
}

.zoom-btn {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.zoom-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    transform: scale(1.1);
}

/* Chart Loading State */
.chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--color-text-secondary);
}

.chart-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(102, 126, 234, 0.2);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Empty State */
.chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    color: var(--color-text-secondary);
    text-align: center;
}

.chart-empty-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-md);
    opacity: 0.5;
}

.chart-empty-text {
    font-size: var(--font-size-lg);
    font-weight: 600;
}

/* Responsive Chart Adjustments */
@media (max-width: 768px) {
    .chart-canvas {
        min-height: 300px;
    }

    .axis text {
        font-size: 10px;
    }

    .legend {
        font-size: 11px;
    }

    .zoom-controls {
        top: var(--spacing-xs);
        right: var(--spacing-xs);
    }
}