/* =========================================
   CHART.JS / CANVAS CONTAINER (wiederverwendbar)
   ========================================= */

.base-chart-canvas-wrapper,
.base-asin-keyword-chart-canvas-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 2;
    max-height: 500px;
    margin-bottom: 3rem;
}

.base-chart-canvas {
    min-height: 100px;
    max-height: 500px;
    width: 100%;
}

/* Änderungsprotokoll: 2026-06-29 | agent | @skill-css-rules, @skill-change-provenance | HTML-Chart-Legende mit fettem Seller-Namen */
.base-chart-html-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
}

.base-chart-html-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.base-chart-html-legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.base-chart-html-legend-text strong {
    font-weight: 700;
}