/* 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%;
}

/* Deelnemersimport benut de beheerwerkruimte zonder dat lange bronwaarden de layout oprekken. */
#participant-import-panel {
  max-width: 100%;
  width: 100%;
}

#participant-import-panel * {
  min-width: 0;
  overflow-wrap: anywhere;
}

#participant-import-panel [role="button"] {
  min-height: 44px;
}

/* Compact overzicht met een brede detailwerkruimte zodra één groep wordt beheerd. */
#backoffice-groups-layout {
  display: grid !important;
  gap: 12px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#backoffice-groups-layout > * {
  margin-top: 0 !important;
  min-width: 0;
}

#backoffice-groups-layout:has(#backoffice-group-detail) > *:has(#backoffice-group-detail) {
  grid-column: 1 / -1;
}

#backoffice-group-detail,
#backoffice-group-contact-grid,
#backoffice-route-responsibilities,
#backoffice-participation-awards {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

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

#backoffice-group-detail *,
#backoffice-participation-awards * {
  min-width: 0;
  overflow-wrap: anywhere;
}

#backoffice-group-detail [role="button"],
#backoffice-group-detail [role="radio"],
#backoffice-group-detail [role="tab"],
#backoffice-participation-awards [role="button"],
#backoffice-participation-awards [role="radio"],
#backoffice-participation-awards [role="tab"] {
  min-height: 44px;
}

/* Privéwandeling: pc/laptop benut de ruimte zonder een mobiele fullscreensheet na te bootsen. */
#private-walk-recorder {
  max-height: min(840px, calc(100vh - 48px)) !important;
  max-width: 920px !important;
  width: min(920px, calc(100vw - 64px)) !important;
}

#private-walk-recorder-content {
  min-height: 330px;
}

#private-walk-recorder-stats {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#private-walk-recorder-actions {
  position: sticky;
  bottom: 0;
  z-index: 5;
}

#private-walk-recorder [role="button"] {
  min-height: 44px;
}

#private-walk-active-button {
  bottom: 24px !important;
  right: 28px !important;
}

#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));
  }
}