/* Dashboard: originele moduleafbeeldingen op witte tegels. */
body:has(.dashboardGrid){
    background:#F5F9FF;
}

.dashboardGrid{
    --tile-gap:24px;
    max-width:840px;
    margin:12px auto 32px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:var(--tile-gap);
}

.dashboardTile{
    position:relative;
    flex:0 0 calc((100% - 2 * var(--tile-gap)) / 3);
    min-width:0;
    aspect-ratio:1;
    margin:0;
    padding:12px;
    background:#fff;
    border:0;
    border-radius:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    box-shadow:0 3px 16px rgba(39,76,110,.08);
    transition:transform .2s, box-shadow .2s;
    cursor:pointer;
    overflow:hidden;
}

.dashboardTile[hidden]{
    display:none;
}

.dashboardBadge{
    position:absolute;
    top:8px;
    right:8px;
    min-width:22px;
    height:22px;
    padding:0 5px;
    border-radius:999px;
    background:#c62828;
    color:#fff;
    font:700 13px/22px sans-serif;
    text-align:center;
    pointer-events:none;
}
.dashboardBadge[hidden]{display:none;}

.dashboardTile:hover{
    background:#fff;
    transform:translateY(-3px);
    box-shadow:0 6px 20px rgba(39,76,110,.12);
}

.dashboardTile:focus-visible{
    outline:3px solid #2B92B5;
    outline-offset:4px;
}

.dashboardTile img{
    width:100%;
    height:100%;
    object-fit:contain;
}

@media(max-width:760px){
    .dashboardGrid{
        max-width:560px;
        --tile-gap:18px;
    }
    .dashboardTile{
        flex-basis:calc((100% - var(--tile-gap)) / 2);
        padding:8px;
    }
}

@media(max-width:380px){
    .dashboardGrid{
        max-width:260px;
    }
    .dashboardTile{
        flex-basis:100%;
    }
}

@media(prefers-reduced-motion:reduce){
    .dashboardTile{
        transition:none;
    }
    .dashboardTile:hover{
        transform:none;
    }
}