/* ===================================
   Forecast Outlook Core Chart Styles
   Standalone chart component for temperature & precipitation
   =================================== */

/* Section wrapper */
#forecastOutlookChartSlot {
    /* Uses standard chart section spacing from chart-base.css */
}

/* Chart container */
#forecastOutlookChartWrapper {
    /* Uses standard .chart-mount styles from chart-base.css */
}

/* Chart-specific styling */
.forecast-outlook-core-chart {
    /* Will be rendered by chart-renderer */
}

/* Temperature series - left axis */
.forecast-outlook-core-chart .series-left {
    stroke: #b2182b;
    fill: none;
    stroke-width: 2;
}

.forecast-outlook-core-chart .series-left path {
    stroke: #b2182b;
}

/* Rain bars - right axis */
.forecast-outlook-core-chart .series-right {
    fill: #2166ac;
    opacity: 0.6;
    stroke: #2166ac;
    stroke-width: 0.5;
}

.forecast-outlook-core-chart .series-right rect {
    fill: #2166ac;
    opacity: 0.6;
}

.forecast-outlook-core-chart .series-right path {
    stroke: #2166ac;
}

/* Legend styling */
.forecast-outlook-core-chart .legend-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-right: 1rem;
}

.forecast-outlook-core-chart .legend-label {
    font-size: 0.9rem;
    color: var(--bs-body-color);
}

.forecast-outlook-core-chart .legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    flex-shrink: 0;
}

/* Grid and axis */
.forecast-outlook-core-chart .chart-grid line {
    stroke: var(--bs-border-color);
    stroke-dasharray: 2,2;
    opacity: 0.3;
}

.forecast-outlook-core-chart .axis {
    color: var(--bs-body-color);
    font-size: 0.85rem;
}

.forecast-outlook-core-chart .axis-label {
    font-size: 0.8rem;
    color: var(--bs-text-muted);
}

/* Tooltip styling */
.forecast-outlook-core-chart .chart-tooltip {
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: 4px;
    padding: 0.5rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    font-size: 0.85rem;
}

/* Responsive behavior */
@media (max-width: 767.98px) {
    .forecast-outlook-core-chart .legend-item {
        display: block;
        margin-bottom: 0.25rem;
    }
    
    .forecast-outlook-core-chart .legend-label {
        font-size: 0.85rem;
    }
}