/* =========================================================
   INTERFACE FINALE YT60234
   ========================================================= */

.source-value {
    color: #35d2ff !important;
    font-weight: 700;
}

.status-bad {
    color: #ff6868 !important;
}

.status-bad .status-dot {
    background: #ff5252 !important;
}

.forecast-learning {
    min-height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    border:
        1px dashed
        rgba(53, 210, 255, .32);

    border-radius: 11px;

    background:
        rgba(3, 18, 29, .42);

    color: #91adbe;

    text-align: center;

    line-height: 1.6;

    font-size: 12px;
}

.tv-hours .forecast-learning {
    grid-column: 1 / -1;
}

.demo-warning.final-info {
    border-color:
        rgba(53, 210, 255, .32);

    background:
        rgba(5, 34, 52, .70);

    color: #b8d4e4;
}


/* =========================================================
   ROSE DES VENTS
   La direction météo indique D'OU vient le vent.
   La flèche indique OÙ va réellement l'air.
   ========================================================= */

.wind-arrow.final-wind-arrow {

    width: 52px !important;
    height: 4px !important;

    position: absolute !important;

    left: 50% !important;
    top: 50% !important;

    margin: -2px 0 0 0 !important;

    padding: 0 !important;

    color: transparent !important;

    font-size: 0 !important;

    background: #1ddbb4 !important;

    border-radius: 4px;

    transform-origin:
        0 50% !important;

    /*
       L'élément pointe naturellement vers l'Est.
       wind-angle = provenance météo depuis le Nord.

       +90° donne donc la direction opposée
       vers laquelle souffle le vent.

       Exemple :
       SSE 167° -> déplacement ~347° NNO.
    */

    transform:
        rotate(
            calc(
                var(--wind-angle, 0deg)
                + 90deg
            )
        ) !important;

    transition:
        transform .4s ease;

    box-shadow:
        0 0 10px
        rgba(29,219,180,.40);
}

.wind-arrow.final-wind-arrow::after {

    content: "";

    position: absolute;

    right: -4px;
    top: 50%;

    transform:
        translateY(-50%);

    width: 0;
    height: 0;

    border-top:
        8px solid transparent;

    border-bottom:
        8px solid transparent;

    border-left:
        13px solid #1ddbb4;
}

.wind-arrow.final-wind-arrow::before {

    content: "";

    position: absolute;

    left: -4px;
    top: 50%;

    transform:
        translateY(-50%);

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #1ddbb4;
}


/* =========================================================
   GRAPHIQUES
   ========================================================= */

.chart-empty {

    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #7898aa;

    font-size: 12px;

    text-align: center;
}

.chart svg text {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =========================================================
   PETITES CORRECTIONS
   ========================================================= */

.metric-value {
    overflow: hidden;
    text-overflow: ellipsis;
}

.data-source-note {
    margin-top: 6px;
    color: #7896a8;
    font-size: 10px;
}

.forecast-card {
    overflow: hidden;
}

.sensor-card {
    overflow: hidden;
}

.green-text {
    color: #32e47a !important;
}

.orange-text {
    color: #ffbd57 !important;
}


@media (max-width: 1250px) {

    .status-grid {

        grid-template-columns:
            repeat(
                2,
                minmax(130px,1fr)
            );

    }

}

/* =====================================================
   PREVISIONS V10 - SOURCE + FIABILITE
   ===================================================== */

.forecast-row .forecast-detail {
    line-height: 1.55;
}

.forecast-row .forecast-detail {
    color: #8fa9b8;
}