/* Step 1: make the list a flex column */
#dashboardList {
  display: flex;
  flex-direction: column;
}

/* Step 2: assign order to each block's wrapper div */
/* Upcoming Reservations (Kommende) → 1st */
#dashboardList > div:has(.upcomingReservationsDashboard:not(.dashboard)) {
  order: 1;
}

/* Resource Availability (Ressourcen Verfügbarkeit) → 2nd */
#dashboardList > div:has(#availabilityDashboard) {
  order: 2;
}

/* Past Reservations (Vergangene) → 3rd */
#dashboardList > div:has(.dashboard.upcomingReservationsDashboard) {
  order: 3;
}

/* Announcements (Ankündigungen) → 4th */
#dashboardList > div:has(#announcementsDashboard) {
  order: 4;
}

/* Admin blocks (if present) stay at the bottom */
#dashboardList > div:has(#allUpcomingReservationsDashboard),
#dashboardList > div:has(#groupUpcomingReservationsDashboard),
#dashboardList > div:has(#pendingApprovalDashboard),
#dashboardList > div:has(#missingCheckInOutDashboard) {
  order: 10;
}