/* Mobile web work-order overflow containment.
   Keep every provider work-order section inside the phone viewport without changing desktop layout. */
@media (max-width: 760px) {
  html,
  body,
  #root,
  .app,
  main {
    width: 100%;
    max-width: 100%;
  }

  .app,
  main,
  .stack,
  .panel,
  .detail,
  .providerOwnedDetail,
  .providerAssignedDetail,
  .providerStageWorkspace,
  .providerStageWorkspace > *,
  .providerAssetCard,
  .providerAssetCard > *,
  .workflowSection,
  .workflowSection > *,
  .workOrderFleetioIssues,
  .workOrderFleetioIssueList,
  .workOrderFleetioAdd,
  .repairOrderHead,
  .equipmentCard,
  .unitSummary,
  .providerStageTitle,
  .providerStageActions,
  .providerStageActions > div,
  .detailActions,
  .numberedEditor,
  .workPerformedEditor,
  .complaintWorkPair,
  .repairLineEditor,
  .estimateLine,
  .formGrid,
  .detailGrid {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* A flex/grid child with intrinsic content is the most common source of the
     page-wide overflow. Make every descendant of the active work-order shell
     shrinkable, while leaving desktop untouched. */
  .providerOwnedDetail *,
  .providerAssignedDetail *,
  .providerStageWorkspace * {
    min-width: 0;
    box-sizing: border-box;
  }

  .providerOwnedDetail,
  .providerAssignedDetail,
  .providerStageWorkspace,
  .providerOwnedDetail > *,
  .providerAssignedDetail > * {
    width: 100%;
  }

  .providerOwnedDetail,
  .providerAssignedDetail {
    overflow-x: clip;
  }

  .providerAssetCard .equipmentCard,
  .providerAssetCard .unitSummary,
  .workflowSection,
  .workPerformedEditor,
  .complaintWorkPair {
    width: 100%;
  }

  /* Work-order forms should become one readable column on a phone instead of
     preserving desktop columns that push Scheduled/Approval/etc. off screen. */
  .providerOwnedDetail .formGrid,
  .providerAssignedDetail .formGrid,
  .providerStageWorkspace .formGrid,
  .providerOwnedDetail .detailGrid,
  .providerAssignedDetail .detailGrid,
  .providerStageWorkspace .detailGrid,
  .providerStageWorkspace .estimateLine,
  .providerStageWorkspace .repairLineEditor {
    grid-template-columns: minmax(0, 1fr);
  }

  .providerOwnedDetail input,
  .providerOwnedDetail select,
  .providerOwnedDetail textarea,
  .providerAssignedDetail input,
  .providerAssignedDetail select,
  .providerAssignedDetail textarea,
  .providerStageWorkspace input,
  .providerStageWorkspace select,
  .providerStageWorkspace textarea {
    width: 100%;
    max-width: 100%;
  }

  .providerOwnedDetail button,
  .providerAssignedDetail button,
  .providerStageWorkspace button {
    max-width: 100%;
  }

  .providerStageTitle,
  .providerStageActions > div,
  .detailActions,
  .repairOrderHead {
    flex-wrap: wrap;
  }

  .workflowStepper {
    width: 100%;
    max-width: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .workflowStepper li,
  .workflowStepper li strong {
    min-width: 0;
    max-width: 100%;
  }

  .workflowStepper li strong,
  .workflowSection,
  .workflowSection p,
  .workflowSection strong,
  .workPerformedEditor,
  .complaintWorkPair,
  .providerStageWorkspace h2,
  .providerStageWorkspace h3 {
    overflow-wrap: anywhere;
  }

  .repairOrderHead > * {
    min-width: 0;
    max-width: 100%;
  }

  .repairOrderHead .pill {
    flex: 0 1 auto;
  }

  .workOrderFleetioAdd label,
  .workOrderFleetioAdd select,
  .workOrderFleetioAdd button,
  .workOrderFleetioIssue,
  .workOrderFleetioIssue > div {
    min-width: 0;
    max-width: 100%;
  }

  .workOrderFleetioAdd select,
  .workOrderFleetioAdd button {
    width: 100%;
  }

  .workOrderFleetioIssue strong,
  .workOrderFleetioIssue small,
  .workOrderFleetioIssue p,
  .providerReviewHeader h2,
  .providerReviewHeader span {
    overflow-wrap: anywhere;
  }

  /* The provider bottom bar has six destinations. Keep the entire bar inside
     the viewport so Settings is not pushed off the right edge. */
  .mobileTabBar {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    overflow-x: hidden;
  }

  .mobileTabBar > *,
  .mobileTabBar button,
  .mobileTabBar a {
    min-width: 0;
    max-width: 100%;
  }

  .mobileTabBar button,
  .mobileTabBar a {
    padding-left: 2px;
    padding-right: 2px;
  }

  .mobileTabBar span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}