@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    min-height: 44px;
  }

  .form-control-sm,
  .form-select-sm {
    min-height: 40px;
  }

  .btn,
  .btn-sm,
  button,
  [role="button"],
  .dropdown-item,
  .navbar-brand,
  .navbar__brand,
  .app-breadcrumb__link,
  .nav-link,
  .dashboard-search__shortcut,
  .search-filter-summary__chip,
  .status-filter-tabs a,
  .request-filter-tabs a,
  .page-header__actions a,
  .page-header__actions button,
  .admin-card__actions a,
  .admin-card__actions button,
  .toolbar a,
  .toolbar button,
  .breadcrumbs a,
  .breadcrumb a,
  .admin-breadcrumb a,
  .back-link,
  .skip-link {
    min-height: 44px !important;
  }

  .btn,
  .btn-sm,
  button,
  [role="button"],
  .dropdown-item,
  .navbar-brand,
  .navbar__brand,
  .app-breadcrumb__link,
  .nav-link,
  .dashboard-search__shortcut,
  .status-filter-tabs a,
  .request-filter-tabs a,
  .page-header__actions a,
  .admin-card__actions a,
  .toolbar a,
  .breadcrumbs a,
  .breadcrumb a,
  .admin-breadcrumb a,
  .back-link,
  .skip-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .choice-chip,
  .ws-toggle-card,
  label.form-check-label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Keep short utility actions whole; the surrounding flex layout may wrap. */
  .mobile-nowrap-control__wrap {
    display: inline-flex !important;
    flex: 0 0 auto;
    max-width: 100%;
  }

  .mobile-nowrap-control {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    min-width: max-content;
    max-width: 100%;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  /* A control may move to its own line on a phone, but its label must remain
     whole. Older admin styles allowed buttons to wrap, which made actions look
     broken on narrow and folded screens. */
  .btn,
  .btn-sm,
  button,
  [role="button"],
  .dropdown-item {
    hyphens: none !important;
    overflow-wrap: normal !important;
    white-space: nowrap !important;
    word-break: normal !important;
  }

  .button-row,
  .smart-action-bar,
  .admin-actions-group,
  .dashboard-search__shortcuts,
  .status-filter-tabs,
  .request-filter-tabs,
  .page-header__actions,
  .admin-card__actions,
  .toolbar {
    flex-wrap: wrap;
  }

  .dashboard-search__shortcuts,
  .status-filter-tabs,
  .request-filter-tabs,
  .page-header__actions,
  .admin-card__actions,
  .toolbar {
    gap: 0.5rem;
  }
}

/* The account avatar is a menu button, never a navigation link. Keep its
   touch target self-contained so adjacent utility controls cannot steal a
   near-miss on desktop, tablets, or folded screens. */
.theme-nav .nav-account-menu-wrapper {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  isolation: isolate;
}

.theme-nav .nav-account-menu-wrapper > .nav-avatar-button {
  cursor: pointer;
  pointer-events: auto;
}

/* Foldables can report tablet-sized CSS widths while still using a phone shell. */
@media (max-width: 1199.98px) {
  .theme-nav.navbar {
    justify-content: flex-start !important;
  }

  .theme-nav .navbar-brand {
    align-self: center;
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  .theme-nav .navbar__title {
    text-align: left !important;
  }

  .theme-nav .nav-utility-bar {
    margin-left: 0 !important;
  }
}