/* ============================================================
   NIVEAUX — CSS spécifique à la section niveaux en temps réel
   À charger via $this->Html->css('niveaux', ['block' => true])
   dans templates/NiveauDonneesTempsReels/index.php
   ============================================================ */

/* --- Navigabilité --- */

.riviere-navigabilite {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
}

.navigabilite-navigable {
    background-color: rgba(40, 167, 69, 0.12);
    color: var(--green);
    border: 1px solid var(--green);
}

.navigabilite-alerte {
    background-color: rgba(253, 126, 20, 0.12);
    color: var(--orange);
    border: 1px solid var(--orange);
}

.navigabilite-non-navigable {
    background-color: rgba(0, 123, 255, 0.10);
    color: var(--blue-evo);
    border: 1px solid var(--blue-evo);
}

.navigabilite-nd {
    background-color: rgba(108, 117, 125, 0.10);
    color: var(--gray);
    border: 1px solid var(--gris-light-evo);
    font-weight: 400;
}

/* --- Calibrage min/max --- */

.cal {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
}

.cal-min,
.cal-max {
    display: flex;
    align-items: center;
    gap: 4px;
}

.cal-min .cal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue-evo);
    flex-shrink: 0;
}

.cal-max .cal-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--orange-evo);
    flex-shrink: 0;
}

.cal-lbl { color: #888; }
.cal-val  { color: #333; }

.cal-arrow {
    color: #bbb;
    font-size: 11px;
}

.cal-none {
    color: #aaa;
    font-style: italic;
    font-size: 12px;
}