/* Pc en laptop: uitsluitend actief vanaf 1024 px. */
:root {
  --wandelapp-navigation-width: 280px;
  --wandelapp-page-gutter: 24px;
}

html,
body,
#root {
  box-sizing: border-box;
  margin: 0;
  min-height: 100%;
  min-width: 0;
  width: 100%;
}

#desktop-app-shell {
  max-width: none !important;
  min-height: 100vh;
  width: 100% !important;
}

#desktop-navigation {
  position: sticky !important;
  top: 0;
}

#backoffice-page {
  min-height: 100vh;
  width: 100%;
}

#backoffice-header {
  position: sticky !important;
  top: 0;
  z-index: 30;
}

#backoffice-navigation {
  align-self: flex-start !important;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
  position: sticky !important;
  top: 88px;
}

#backoffice-workspace {
  min-width: 0;
  width: 100%;
}

#backoffice-event-grid,
#backoffice-analytics-primary,
#backoffice-analytics-secondary {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#backoffice-attention-grid {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

#backoffice-metric-grid {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#backoffice-metric-grid > * {
  min-width: 0 !important;
  width: auto !important;
}

#dashboard-main[data-testid="dashboard-layout"] {
  align-items: start;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  width: 100%;
}

/* Vanaf een brede laptop passen kaart en voortgang veilig naast elkaar. */
@media screen and (min-width: 1200px) {
  #dashboard-main[data-testid="dashboard-layout"] {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  }
}

@media screen and (min-width: 1600px) {
  #backoffice-event-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}