.dashboard-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}


/* =========================================================
   Карточка
   ========================================================= */

.summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 84px;
    padding: 18px 22px;

    border-width: 1px;
    border-style: solid;
    border-radius: 14px;

    box-shadow: none;

    cursor: pointer;

    transition:
            border-color .15s ease,
            outline-color .15s ease;
}


/* =========================================================
   Левая часть
   ========================================================= */

.summary-left {
    display: flex;
    align-items: center;
    gap: 14px;

    min-width: 0;
}

.summary-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 42px;
    height: 42px;
    flex: 0 0 42px;

    border-radius: 12px;

    background: rgba(255, 255, 255, .1);

    font-size: 22px;
}

.summary-title {
    min-width: 0;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;

    text-align: left;
}


/* =========================================================
   Значение
   ========================================================= */

.summary-value {
    flex: 0 0 auto;

    margin-left: 20px;

    font-size: 42px;
    font-weight: 800;
    line-height: 1;

    text-align: right;
    white-space: nowrap;
}


/* Наведение — без движения и тени */
.summary-card:hover {
    transform: none;
    box-shadow: none;
}

/* Фокус с клавиатуры */
.summary-card:focus-visible {
    outline: 2px solid #192b43;
    outline-offset: 2px;
}

/* Активный фильтр */
.summary-card.summary-active {
    transform: none;
    box-shadow: none;

    outline: 3px solid #192b43;
    outline-offset: 2px;
}

/* =========================================================
   ВСЕ МАШИНЫ
   ========================================================= */

.summary-dark {
    background: #192b43;
    border-color: #192b43;
    color: #ffffff;
}


/* =========================================================
   КОНДИЦИОНЕР НЕ РАБОТАЕТ
   ========================================================= */

.summary-danger {
    background: #fff0f1;
    border-color: #ff646b;
    color: #b5161d;
}


/* =========================================================
   ЖАРКО, КОНДИЦИОНЕР ВКЛЮЧЁН
   ========================================================= */

.summary-warning {
    background: #fff5e7;
    border-color: #f5a12b;
    color: #9a5800;
}


/* =========================================================
   НЕТ ДАННЫХ
   ========================================================= */

.summary-yellow {
    background: #fff9dc;
    border-color: #e0b51e;
    color: #806000;
}


/* =========================================================
   ТЕМПЕРАТУРА В НОРМЕ
   ========================================================= */

.summary-success {
    background: #edfaef;
    border-color: #62c77a;
    color: #08712a;
}


/* =========================================================
   НЕ КОНТРОЛИРУЮТСЯ
   ========================================================= */

.summary-gray {
    background: #f5f7fa;
    border-color: #cbd3dd;
    color: #52637a;
}


/* =========================================================
   ПРОБЛЕМНЫЕ / ТЕМПЕРАТУРА ВНЕ НОРМЫ
   ========================================================= */

.summary-blue {
    background: #f1f6ff;
    border-color: #73a6ff;
    color: #0c4ca3;
}