/* =========================================================
   Dashboard · Performance overview (ngDashboardPerformance)
   ========================================================= */

/* Griglia flex: sostituisce col-md-3 (float) per ottenere
   card di altezza uguale grazie ad align-items: stretch. */
.perf-overview-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;   /* tutte le colonne alla stessa altezza (la piu' alta) */
    margin: 0 -10px;        /* compensa il padding delle colonne (gutter) */
}

.perf-overview-col {
    flex: 1 1 25%;
    max-width: 25%;
    padding: 0 10px;
    display: flex;          /* fa in modo che la card riempia la colonna */
}

/* La card riempie in altezza la colonna: cosi' una card senza rigo
   percentuale resta alta quanto quella che ce l'ha. */
.perf-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 15px;
    margin-bottom: 10px;
}

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

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

/* ---- Rigo percentuale (trend) ---- */
.perf-trend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.perf-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 */
}

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

/* Testo di corredo opzionale sotto il valore (alternativo/aggiuntivo al trend) */
.perf-note {
    margin: 0;
    font-size: 13px;
    color: #797979;
}

/* Direzioni: colore del badge + colore del valore/freccia */
.perf-trend-up            { color: rgba(0, 150, 0, 0.9); }
.perf-trend-up   .perf-trend-value  { color: rgb(0, 100, 0); }

.perf-trend-down          { color: rgba(190, 30, 30, 0.9); }
.perf-trend-down .perf-trend-value  { color: #b00020; }

.perf-trend-flat          { color: #797979; }
.perf-trend-flat .perf-trend-value  { color: #555555; }

/* ---- Responsive: allineato al comportamento col-sm-3 originale ---- */
@media (max-width: 991px) {
    .perf-overview-col { flex-basis: 50%; max-width: 50%; }
}

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

.perf-hero-value { color: #039bb5 !important; }

.dash-trend {
    display: flex;
    align-items: baseline;
    justify-content: flex-start !important; /* Impedisce la spaziatura forzata */
    flex-wrap: nowrap !important;
    width: 100%;
    overflow: visible !important;            /* Evita che la parte bassa dei caratteri si tagli */
    gap: 6px;                                /* Gestisce in modo pulito lo spazio tra badge e testi */
}

.dash-trend-badge,
.dash-trend-note {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.dash-trend-note {
    margin-left: 6px;
}

.dash-trend-extra-note {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin-left: 0 !important;              /* Usiamo la gap del contenitore */
    color: #797979;
}


/* la nota va a capo sotto il trend, senza parentesi, con spazio sopra */
.dash-card-split-note {
    display: block;
    min-height: 1.2em; /* riserva lo spazio anche quando è vuoto */
    margin-top: 8px;
    font-size: 12px;
    color: #797979;
}

.statebox-dashboard.dash-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dash-scroll-wrapper {
    position: relative;
}

.dash-grid {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    padding-bottom: 10px;           /* spazio per la scrollbar, non si sovrappone alle card */
}

/* Scrollbar sottile e visibile — Chrome/Safari/Edge */
.dash-grid::-webkit-scrollbar {
    height: 6px;
}
.dash-grid::-webkit-scrollbar-track {
    background: transparent;
}
.dash-grid::-webkit-scrollbar-thumb {
    background: #d0d0d0;
    border-radius: 3px;
}
.dash-grid::-webkit-scrollbar-thumb:hover {
    background: #b0b0b0;
}

/* Firefox */
.dash-grid {
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
}

.dash-col {
    flex: 0 0 auto;
    width: 300px;
    scroll-snap-align: start;
}

@media (max-width: 600px) {
    .dash-col {
        width: 78vw;
        max-width: 300px;
    }
}

.dash-scroll-caption {
    font-size: 12px;
    font-weight: 400;
    color: #9a9a9a;
    margin-left: 4px;
}