.gradient-deep-5 {
    background: linear-gradient(270deg, #d5ffff 0%, #daffff 100%);
}
.gradient-deep-6 {
    background: linear-gradient(270deg, #eefbf1 0%, #eefbf1 100%);
}

.highcharts-legend {
    display: none !important;
}

.custom-legend {
    list-style: none;
    padding: 0;
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 5px;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.legend-color {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-text {
    white-space: normal;
    word-break: break-word;
}

.custom-line-legend {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.line-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
}

.line-legend-color {
    width: 24px;
    height: 4px;
    border-radius: 2px;
}

.card-grid-roi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "portoMP portoBHR"
        "pendMP  pendBHR"
        "roiMP   roiBHR";
    gap: 16px;
    margin-bottom: 0.5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

/* MOBILE pairing */
.card-grid-roi {
    .card-item:nth-child(1) { grid-area: portoMP; }
    .card-item:nth-child(2) { grid-area: pendMP; }
    .card-item:nth-child(3) { grid-area: roiMP; }
    .card-item:nth-child(4) { grid-area: portoBHR; }
    .card-item:nth-child(5) { grid-area: pendBHR; }
    .card-item:nth-child(6) { grid-area: roiBHR; }

}

/* DESKTOP */
@media (min-width: 992px) {
    .card-grid-roi {
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "portoMP pendMP roiMP"
            "portoBHR pendBHR roiBHR";
    }
}