/* MSK 61 — iPhone horizontal overflow guard */
html,
body {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body,
#app,
#app .shell {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

#app,
#app .shell {
  width: 100% !important;
}

#app .topbar {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* v59 made the first topbar child width:100%; when another header node survives on iOS,
   that can make the document wider than the viewport. Let flexbox size it instead. */
#app .topbar > div:first-child {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#app .msk-header-actions053 {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  flex: 1 1 auto !important;
  gap: clamp(3px, 1.5vw, 8px) !important;
}

#app .msk-header-actions053 > button {
  width: auto !important;
  min-width: 0 !important;
  max-width: 48px !important;
  flex: 1 1 0 !important;
}

#app .quick-entry,
#app .quick-grid,
#app .quick-button,
#app .panel,
#app #dashboard-summary-button,
#app .dashboard-summary-card,
#app .transactions {
  min-width: 0 !important;
  max-width: 100% !important;
}

@media (max-width: 520px) {
  #app .shell {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #app .quick-grid {
    width: 100% !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #app .quick-button {
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}