/* Dashboard (ADR-062): cards on a six-column grid — a third is two columns, a half three, full width six. */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--spacing-5);
}
.dashboard-card { min-width: 0; display: flex; flex-direction: column; }
.dashboard-card > .card { flex: 1; }
.dashboard-card--third { grid-column: span 2; }
.dashboard-card--half { grid-column: span 3; }
.dashboard-card--full { grid-column: 1 / -1; }

/* The last card of a row it doesn't fill sits at the right edge, leaving the gap between (wide screens only; the
   narrower layouts below re-flow the columns). */
@media (min-width: 1101px) {
    .dashboard-card--third.dashboard-card--row-end { grid-column: span 2 / -1; }
    .dashboard-card--half.dashboard-card--row-end { grid-column: span 3 / -1; }
}

.dashboard-card__list { list-style: none; margin: var(--spacing-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-2); }
.dashboard-card__item {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-3);
    font-size: var(--font-size-sm);
}
.dashboard-card__item a { color: var(--color-text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-card__item a:hover { text-decoration: underline; }
.dashboard-card__figure { font-weight: var(--font-weight-semibold); white-space: nowrap; }
.dashboard-card__figure--over { color: var(--color-danger); }
.dashboard-card__more { margin-top: var(--spacing-3); font-size: var(--font-size-sm); }

@media (max-width: 1100px) {
    .dashboard-card--third { grid-column: span 3; }
}
@media (max-width: 768px) {
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-card--third, .dashboard-card--half, .dashboard-card--full { grid-column: 1 / -1; }
}