/* Delad KPI-kortkomponent.
 *
 * Ursprungligen skriven för KMA-dashboarden (kma/css/dashboard.css) och utbruten hit så att
 * admin-hemmet och KMA-översikten delar samma formspråk i stället för att divergera.
 * Laddas globalt via decorators/admin/partials/adm_includes.jsp.
 *
 * KMA-dashboarden scopar sina egna regler med .kma-dash och ligger därför kvar ovanpå den här. */

.kpi-card {
    border: none;
    border-radius: .6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    text-decoration: none;
    display: block;
    height: 100%;
    transition: transform .08s, box-shadow .08s;
}

a.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.kpi-num {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

/* Kompakt variant för täta kortrader (KMA-översiktens uppgiftskort m.fl.). */
.kpi-num.kpi-sm {
    font-size: 1.5rem;
}

.kpi-label {
    font-size: .82rem;
    color: #6c757d;
}

.kpi-icon {
    font-size: 1.3rem;
    opacity: .85;
}

/* Liten kontextrad under siffran ("8 fler än igår", "äldsta från 2026-06-02"). */
.kpi-sub {
    font-size: .76rem;
    color: #8a94a6;
    margin-top: .35rem;
    min-height: 1.1em;
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #34495e;
    margin: 1.4rem 0 .6rem;
}

.section-title:first-child {
    margin-top: 0;
}

/* Statusfärger: grönt när kön är tom, rött när något väntar. */
.kpi-card .attention {
    color: #dc3545;
}

.kpi-card .ok {
    color: #198754;
}

.kpi-num.attention {
    color: #dc3545;
}

.kpi-num.ok {
    color: #198754;
}