/* Стили для графика цен */
.chart-container {
    position: relative;
    width: 100%;
    padding: 5px;
    
    /* 🔥 ИЗМЕНЕНИЕ: Убираем фиксированную высоту, теперь высота определяется родительским контейнером */
    height: auto;
    flex: 1;
}

/* 🔥 ИСПРАВЛЕНИЕ: Убираем фиксированные размеры, позволяем Chart.js автоматически подстраиваться */
#priceChartOverview, #priceChartFinancials, #priceChartMultipliers {
    width: 100%;
}

/* Отключаем автоматическое изменение размеров Chart.js */
.chart-container canvas {
    display: block;
    box-sizing: border-box;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .chart-container {
        /* 🔥 ИЗМЕНЕНИЕ: Убираем фиксированную высоту, используем автоматическую высоту от родителя */
        height: auto;
        padding: 10px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        /* 🔥 ИЗМЕНЕНИЕ: Убираем фиксированную высоту, используем автоматическую высоту от родителя */
        height: auto;
        padding: 5px;
    }
}

/* Дополнительные стили для лучшего отображения графика */
.price-chart-tooltip {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 4px;
    color: white;
    padding: 8px 12px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

/* Стили для легенды графика */
.chart-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 15px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

/* 🔥 РЕШЕНИЕ: Фиксированные размеры для карточек с графиками */
.info-container-card .card {
    min-height: 500px; /* Фиксированная минимальная высота */
    height: 500px; /* Фиксированная высота */
}

.info-container-card .chart-container {
    height: 400px; /* Фиксированная высота для контейнера графика */
    min-height: 400px;
    flex: none; /* Убираем flex растягивание */
}

/* 🔥 ЖЕСТКОЕ ОГРАНИЧЕНИЕ РАЗМЕРОВ ДЛЯ CHART.JS */
.info-container-card .chart-container {
    max-height: 400px !important;
    height: 400px !important;
    overflow: hidden !important;
}

.info-container-card .chart-container canvas {
    max-height: 400px !important;
    height: 400px !important;
    width: 100% !important;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .info-container-card .card {
        min-height: 400px;
        height: 400px;
    }
    
    .info-container-card .chart-container {
        height: 300px;
        min-height: 300px;
        max-height: 300px !important;
        height: 300px !important;
    }
    
    .info-container-card .chart-container canvas {
        max-height: 300px !important;
        height: 300px !important;
    }
}

@media (max-width: 480px) {
    .info-container-card .card {
        min-height: 350px;
        height: 350px;
    }
    
    .info-container-card .chart-container {
        height: 250px;
        min-height: 250px;
        max-height: 250px !important;
        height: 250px !important;
    }
    
    .info-container-card .chart-container canvas {
        max-height: 250px !important;
        height: 250px !important;
    }
}