/* ==========================================================================
   ECHARTS — Chart container sizing, tooltip classes, and focus states.
   All colors reference --dp-chart-* tokens from variables.css.
   ========================================================================== */

/* --- Chart Container Sizing ----------------------------------------------- */
.dp-chart-sm  { height: 200px; width: 100%; }
.dp-chart-md  { height: 300px; width: 100%; }
.dp-chart-lg  { height: 400px; width: 100%; }
.dp-chart-xl  { height: 500px; width: 100%; }

.dp-chart-gauge  { height: 240px; width: 100%; }
.dp-chart-radar  { height: 320px; width: 100%; }
.dp-chart-heat   { height: auto;  width: 100%; min-height: 160px; }

/* --- Tablet (768-1279px) ------------------------------------------------- */
@media (max-width: 1279px) {
    .dp-chart-lg    { height: 320px; }
    .dp-chart-xl    { height: 400px; }
    .dp-chart-gauge { height: 200px; }
    .dp-chart-radar { height: 280px; }
}

/* --- Mobile (< 768px) ---------------------------------------------------- */
@media (max-width: 767px) {
    .dp-chart-md    { height: 240px; }
    .dp-chart-lg    { height: 280px; }
    .dp-chart-xl    { height: 320px; }
    .dp-chart-gauge { height: 180px; }
    .dp-chart-radar { height: 260px; }
}

/* --- Focus Ring (keyboard accessibility) --------------------------------- */
.dp-chart-focus-ring:focus {
    outline: 2px solid var(--dp-border-focus);
    outline-offset: 2px;
}

.dp-chart-focus-ring:focus:not(:focus-visible) {
    outline: none;
}

/* --- ECharts Custom Tooltip (HTML formatter) ----------------------------- */
.dp-echarts-tooltip {
    font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
    font-size: 12px;
    line-height: 1.5;
}

.dp-echarts-tooltip__date {
    font-weight: 600;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--dp-chart-tooltip-border);
    color: var(--dp-chart-tooltip-text);
}

.dp-echarts-tooltip__row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
}

.dp-echarts-tooltip__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dp-echarts-tooltip__label {
    flex: 1;
    color: var(--dp-chart-tooltip-text);
    opacity: 0.8;
}

.dp-echarts-tooltip__value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--dp-chart-tooltip-text);
}

/* --- Empty State (inside chart container) -------------------------------- */
.dp-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    color: var(--dp-chart-empty-text);
}

.dp-chart-empty__icon {
    font-size: 2rem;
    opacity: 0.3;
}

.dp-chart-empty__text {
    font-size: 0.8125rem;
}

/* --- Loading State ------------------------------------------------------- */
.dp-chart-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: var(--dp-chart-loading-mask-bg);
}

/* --- Mobile Legend (rendered outside ECharts canvas) ---------------------- */
.dp-chart-legend-mobile {
    display: none;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 0;
}

@media (max-width: 767px) {
    .dp-chart-legend-mobile {
        display: flex;
    }
}

.dp-chart-legend-mobile__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--dp-text-secondary);
}

.dp-chart-legend-mobile__dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* --- Reduced Motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .dp-chart-sm,
    .dp-chart-md,
    .dp-chart-lg,
    .dp-chart-xl,
    .dp-chart-gauge,
    .dp-chart-radar,
    .dp-chart-heat {
        transition: none;
    }
}