/* =========================================================
   Dashboard · Parco distributori · tempo reale (ngDashboardRealtime)
   ========================================================= */

/* Griglia flex: card di altezza uguale (align-items: stretch),
   indipendentemente dalla presenza di trend/note. */
.rt-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 0 -10px;
}

.rt-col {
    flex: 1 1 25%;
    max-width: 25%;
    padding: 0 10px;
    display: flex;
}

/* La card riempie in altezza la colonna. I margini top/bottom arrivano da
   .statebox-dashboard / .statebox-dashboard-alert (entrambi 15px / 10px). */
.rt-card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rt-card .info-text {
    margin-bottom: 6px;
}

/* Icona opzionale accanto alla label
.rt-card-icon {
    margin-right: 6px;
}*/

.rt-card h2 {
    margin: 0 0 10px 0;
}

/* ---- Card alert fissa (ultima). Attiva solo se il contatore e' != 0. ----
   Quando il contatore e' 0, il template usa .statebox-dashboard (stile normale). */
.statebox-dashboard-alert {
    background: white;
    padding: 20px 20px 15px 20px;
    margin-top: 15px;
    margin-bottom: 10px;
    border-radius: 4px;
    border-left: 7px solid #E74C3C;
    box-shadow: 0 0 0 0.5px #ddd, 0 1px 2px rgba(20,30,40,.04), 0 6px 20px rgb(231 76 60 / 0.20);
}

/* ---- Trend opzionale ---- */
.rt-trend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.rt-trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 13px;
    font-weight: 600;
    background: #e6f7f9;                                     /* fallback */
    background: color-mix(in srgb, currentColor 12%, #fff);  /* segue il brand */
}

.rt-trend-note { color: #797979; }

.rt-trend-up             { color: rgba(0, 150, 0, 0.9); }
.rt-trend-up   .rt-trend-value  { color: rgb(0, 100, 0); }
.rt-trend-down           { color: rgba(190, 30, 30, 0.9); }
.rt-trend-down .rt-trend-value  { color: #b00020; }
.rt-trend-flat           { color: #797979; }
.rt-trend-flat .rt-trend-value  { color: #555555; }

/* ---- Testo di corredo opzionale ---- */
.rt-note {
    margin: 0;
    font-size: 13px;
    color: #797979;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .rt-col { flex-basis: 50%; max-width: 50%; }
}

@media (max-width: 575px) {
    .rt-col { flex-basis: 100%; max-width: 100%; }
}


/* Link "Vedi dettaglio" sulla card ALERT del pannello real-time.
   Il colore arriva dalla classe utility .maincolor02 (definita in style.css,
   diversa per brand): qui solo margin/tipografia, nessun colore hardcodato. */
.dash-detail-link {
    display: inline-block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.dash-detail-link:hover,
.dash-detail-link:focus {
    text-decoration: underline;
}