/* =========================================================
   Dashboard · Banner riepilogo parco (ngDashboardSummary)
   ========================================================= */

/* Solo layout: il contenitore usa .statebox-dashboard (style.css) per
   background, padding, bordi, ombre e margini. */
.summary-banner {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ---- Riquadro icona ---- */
.ps-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f2f4f7;
    color: #6f7173;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ---- Testi ---- */
.ps-body {
    flex: 1 1 auto;
    min-width: 0;   /* consente il troncamento su spazi stretti */
}

.ps-title {
    margin: 0;
    font-size: 15px;
    color: #2b2f33;
}

.ps-title strong {
    font-weight: 700;
}

/* Numero dispositivi installati (dal multi-counter) */
.ps-count {
    font-weight: 700;
}

.ps-subtitle {
    margin: 2px 0 0 0;
    font-size: 13px;
    color: #9aa0a6;
}

/* ---- Azione a destra ---- */
.ps-action-wrap {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ps-status {
    display: inline-flex;
    align-items: center;
}

.ps-action {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #12a594;
    text-decoration: none;
    white-space: nowrap;
}

.ps-action:hover,
.ps-action:focus {
    color: #0e8175;
    text-decoration: none;
}

/* Azione in stato errore */
.ps-action-error,
.ps-action-error:hover,
.ps-action-error:focus {
    color: #E74C3C;
}

.ps-chevron {
    font-size: 16px;
    line-height: 1;
}

/* ---- Pallino di stato ---- */
.ps-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.ps-dot-ok      { background: #16a34a; }
.ps-dot-warning { background: #E67E22; }
.ps-dot-error   { background: #E74C3C; }

/*
 * Regole per la lista errori della modale ngDashboardSummary
 * (template: custom-modal-summary-errors.html)
 *
 * Da accodare al file dashboard-summary.css esistente del progetto.
 */

.summary-errors-list {
    list-style: none;
    margin: 0;
    padding: 0;
}



.summary-errors-row {
    display: flex;
    align-items: center;
    padding: 14px 8px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.summary-errors-row:last-child {
    border-bottom: none;
}

.summary-errors-row:hover {
    background-color: #f5f5f5;
}

.summary-errors-row:hover .ps-chevron {
    transform: translateX(3px);
}

.summary-errors-row .ps-icon {
    margin-right: 14px;
    position: relative;   /* riferimento per il badge */
}

/* Badge del contatore, ancorato all'angolo in alto a destra del riquadro icona */
.summary-errors-row .ps-icon .badge {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 2;

    box-sizing: border-box;
    min-width: 18px;      /* = height -> cerchio con una sola cifra */
    height: 18px;
    padding: 0 5px;       /* cresce in larghezza -> pillola con piu' cifre */
    border-radius: 999px;

    line-height: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;

    border: none;
}

.summary-errors-row .ps-body {
    flex: 1;
}

.summary-errors-row .ps-chevron {
    font-size: 26px;
    line-height: 1;
    margin-left: 12px;
    transition: transform 0.15s ease;
}

/* ---- Responsive ---- */
@media (max-width: 575px) {
    .summary-banner {
        flex-wrap: wrap;
    }
    .ps-action {
        width: 100%;
        justify-content: flex-end;
    }
}