/* Mobiele schermen: uitsluitend actief tot en met 1023 px. */
:root {
  --wandelapp-content-width: 520px;
  --wandelapp-page-gutter: 0px;
}

html,
body,
#root {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
}

#root > div {
  max-width: 100%;
}

#dashboard-main {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#backoffice-page {
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  width: 100%;
}

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

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

#desktop-app-shell,
#desktop-navigation {
  display: none !important;
}

/* Deelnemersimport: kaarten en lange bestands-/groepsnamen blijven op smalle schermen binnen beeld. */
#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;
}

/* Schoolgroepen en onderscheidingen zijn op mobiel volledige, zelfstandige werkruimtes. */
#backoffice-groups-layout,
#backoffice-group-detail,
#backoffice-group-contact-grid,
#backoffice-group-contact-cards,
#backoffice-route-responsibilities,
#backoffice-participation-awards,
#backoffice-rewards-list {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

#backoffice-groups-layout,
#backoffice-group-contact-cards,
#backoffice-rewards-list {
  display: grid !important;
  gap: 10px !important;
  grid-template-columns: minmax(0, 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: op telefoon is de recorder een echte schermvullende werkruimte. */
#private-walk-recorder {
  border-radius: 0 !important;
  box-sizing: border-box !important;
  height: 100dvh !important;
  inset: 0 !important;
  max-height: 100dvh !important;
  max-width: none !important;
  position: fixed !important;
  width: 100vw !important;
}

#private-walk-recorder-content {
  min-height: 0;
  padding-bottom: 112px !important;
}

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

#private-walk-recorder-actions {
  bottom: 0;
  padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
  position: sticky;
  z-index: 5;
}

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

#private-walk-active-button {
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  left: 18px !important;
  right: 18px !important;
}