/* Стили для контейнеров графиков */
.sales-charts-grid .chart-card,
.sales-trends-row .chart-card-half {
    background-color: #f8f9fa; /* Слегка сероватый фон */
    border: 1px solid #e9ecef; /* Светлая граница */
    box-shadow: none; /* Убираем тень для более плоского вида */
    padding: 25px;
    border-radius: 24px; /* Более выраженное скругление */
    corner-shape: continuous; /* Сглаживание углов в стиле Apple */
    transition: all 0.3s ease;
}

.sales-charts-grid .chart-card:hover,
.sales-trends-row .chart-card-half:hover {
    border-color: #dee2e6;
    background-color: #ffffff;
}

/* Стили для заголовков внутри карточек графиков */
.chart-card .chart-title,
.chart-card-half .chart-title {
    color: var(--heading-color);
    font-size: 1.1em;
    font-weight: 700;
}

/* Новый стиль для текста о периоде сравнения в виде стикера/плашки */
.chart-comparison-note {
    display: block; /* Делаем блочным элементом */
    width: -moz-fit-content; /* Firefox */
    width: fit-content; /* Современные браузеры */
    margin: 20px 0 0 0; /* Выравнивание по левому краю */
    padding: 8px 16px;
    font-size: 0.85em;
    font-weight: 600;
    color: #475569; /* Темно-серый текст для читаемости */
    background-color: #f1f5f9; /* Светло-серый фон */
    border: 1px solid #e2e8f0; /* Светлая граница */
    border-radius: 16px;
    corner-shape: continuous;
}

/* Скрываем пустую плашку */
.chart-comparison-note:empty {
    display: none;
}