/* ==================================================================
DASHBOARD — paginalayout van home/index.php (docs/ui/areas/dashboard.md)
Drie groepen widgets: a (to-do's, jouw lijstjes), b (bewaarde lijstjes, favoriete shops),
c (nieuws, blog). Hun plaats hangt af van de schermbreedte, zie .dash-grid.
Alleen tokens, prefix dash-.
================================================================== */
.dash {
    --dash-max: 2200px;          /* enkel een rem voor extreem brede schermen */
    --dash-side: clamp(320px, 26%, 420px);
    --dash-gap: 2rem;
    width: 100%;
    max-width: var(--dash-max);
    margin: 0 auto;
    padding-bottom: 3rem;
}
/* iets minder zijmarge dan de standaard 3rem van #app-container (lt.css, APP-SHELL) */
@media (min-width: 992px) {
    #app-container.dashboard { --lt-shell-pad: 2rem; }
}

/* begroeting + cijfers */
.dash-hello {
    margin-bottom: var(--dash-gap);
}
#app-container .dash-hello__title {
    margin: 0;
    font-size: clamp(1.75rem, 2.5vw, 2.25rem);
    font-weight: 600;
    color: var(--lt-navy);
}
.dash-hello__stats {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: .75rem 0 0;
    padding: 0;
    list-style: none;
}
.dash-hello__stat {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    height: 32px;
    padding: 0 .875rem;
    border-radius: var(--lt-radius-pill);
    background: var(--lt-white);
    box-shadow: var(--lt-shadow-card);
    font-size: .875rem;
    color: var(--lt-muted);
}
.dash-hello__stat strong {
    color: var(--lt-navy);
    font-weight: 600;
}
.dash-hello__stat i { color: var(--lt-faint); }

/* kolommen (grid-areas, zodat de volgorde per breedte kan wisselen) */
.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "a" "b" "c";
    gap: var(--dash-gap);
    align-items: start;
}
.dash-a { grid-area: a; }
.dash-b { grid-area: b; }
.dash-c { grid-area: c; }
.dash-a,
.dash-b,
.dash-c {
    display: flex;
    flex-direction: column;
    gap: var(--dash-gap);
    min-width: 0;
}
/* de widgets krijgen hun afstand van de gap, niet van de oude marge */
.dash .ltd2-widget + .ltd2-widget { margin-top: 0; }

/* tablet: lijstjes over de volle breedte, daaronder b en c naast elkaar */
@media (min-width: 768px) {
    .dash-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "a a" "b c";
    }
    .dash-grid--guest { grid-template-areas: "a a" "c c"; }
}
/* laptop: persoonlijk links (a met b eronder), ontdekken rechts */
@media (min-width: 1200px) {
    .dash-grid {
        grid-template-columns: minmax(0, 1fr) var(--dash-side);
        grid-template-rows: auto 1fr;      /* b sluit meteen aan onder a */
        grid-template-areas: "a c" "b c";
    }
    .dash-grid--guest { grid-template-areas: "a c" "a c"; }
}
/* groot scherm: drie kolommen */
@media (min-width: 1600px) {
    .dash-grid {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) var(--dash-side);
        grid-template-rows: auto;
        grid-template-areas: "a b c";
    }
    .dash-grid--guest {
        grid-template-columns: minmax(0, 1fr) var(--dash-side);
        grid-template-areas: "a c";
    }
}
@media (max-width: 575.98px) {
    .dash { --dash-gap: 1.5rem; }
}