/* =========================================================
   Dashboard · Card comuni (ngDashboardPerformance / ngDashboardRealtime)
   ---------------------------------------------------------
   Un solo set di regole per entrambe le righe: stessa griglia,
   stessa card, stesso responsive. I file specifici dei due
   componenti non devono ridefinire nulla di quanto sta qui.
   ========================================================= */

/* ---- Griglia ---- */
.dash-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* tutte le colonne alla stessa altezza */
    margin: 0 -10px;        /* compensa il padding delle colonne (gutter) */
}

.dash-col {
    flex: 1 1 25%;
    max-width: 25%;
    min-width: 0;           /* CRUCIALE: annulla min-width:auto dei flex item,
                               altrimenti un testo lungo sfonda la colonna */
    padding: 0 10px;
    display: flex;          /* la card riempie la colonna */
    box-sizing: border-box;
}

/* ---- Card ----
   Si applica SEMPRE insieme a .statebox-dashboard (che porta
   background, padding, margini, radius, shadow di base). */
.dash-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    box-sizing: border-box;
    /* Bordo trasparente riservato: la card alert lo colora senza
       cambiare la larghezza interna, cosi' i testi restano allineati. */
    border-left: 7px solid transparent;
}

/* Modificatori di STATO: aggiungono solo colore e ombra, mai geometria,
   cosi' hero e alert restano allineate alle card normali.
   Vanno dichiarati dopo .dash-card per vincere sul border-left trasparente. */

/* Card alert (Offline, contatore != 0) */
.dash-card-alert {
    border-left-color: #E74C3C;
    box-shadow: 0 0 0 0.5px #ddd,
    0 1px 2px rgba(20, 30, 40, .04),
    0 6px 20px rgba(231, 76, 60, .20);
}

/* Card hero (Incasso): sempre attiva. Il bordo/ombra veri arrivano da
   .statebox-dashboard-hero / .stateboxok del CSS di progetto; qui si
   neutralizza solo il border-left trasparente di .dash-card. */
.dash-card-hero {
    border-left-color: transparent;   /* placeholder: vedi nota sotto */
}

/* ---- Contenuto ---- */
.dash-card .info-text {
    margin-bottom: 6px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.dash-card h2 {
    margin: 0 0 10px 0;
    overflow-wrap: break-word;
}

/* Spinge note/trend in fondo: le card restano allineate anche
   quando una ha la label su due righe. */
.dash-card-foot {
    margin-top: auto;
}

/* ---- Trend (opzionale) ---- */
.dash-trend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    min-width: 0;
}

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

.dash-trend-note {
    color: #797979;
    font-size: 13px;
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

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

/* ---- Nota di corredo (opzionale) ---- */
.dash-note {
    margin: 0;
    font-size: 13px;
    color: #797979;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ---- Responsive: 4 -> 2 -> 1 ---- */
@media (max-width: 991px) {
    .dash-col { flex-basis: 50%; max-width: 50%; }
}

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