/* Action groups stay on one line. Narrow cards scroll instead of wrapping. */
:is(.btn, button[type="submit"], button[type="reset"], input[type="button"], input[type="submit"]):not(.text-wrap) {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  flex-shrink: 0;
}

:is(.dashboard-card-actions, .table-actions, .action-buttons,
    td:has(> .btn ~ .btn), td[data-card-label="Action" i], td[data-card-label="Actions" i]) {
  white-space: nowrap !important;
  overflow-wrap: normal;
}

:is(.action-buttons, .table-actions, .btn-toolbar,
    td > .d-flex:has(> .btn), td > .d-inline-flex:has(> .btn),
    .dashboard-card-actions .d-flex, .dashboard-card-actions .d-inline-flex,
    .dashboard-card-actions .btn-group) {
  flex-wrap: nowrap !important;
  align-items: center;
  gap: .375rem;
}

:is(.dashboard-card-actions, .action-buttons, .table-actions, .btn-toolbar,
    td > .d-flex:has(> .btn), td > .d-inline-flex:has(> .btn)) > form {
  display: inline-block;
  flex: 0 0 auto;
  margin-bottom: 0;
}

@media (max-width: 1199.98px) {
  /* Keep the label above a single horizontally scrollable row of actions. */
  :is(#dashboard-main-container, #dashboard-route-modal-content) table.dashboard-card-table > tbody > tr > .dashboard-card-actions,
  .component-card-table tbody td:is([data-card-label="Action" i], [data-card-label="Actions" i]) {
    display: block;
    text-align: left !important;
    white-space: nowrap !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  :is(#dashboard-main-container, #dashboard-route-modal-content) table.dashboard-card-table > tbody > tr > .dashboard-card-actions::before,
  .component-card-table tbody td:is([data-card-label="Action" i], [data-card-label="Actions" i])::before {
    display: block;
    margin-bottom: .5rem;
    text-align: left;
  }

  :is(#dashboard-main-container, #dashboard-route-modal-content) table.dashboard-card-table > tbody > tr > .dashboard-card-actions > :is(.btn, form, .d-flex, .d-inline-flex, .btn-group, .action-buttons, .table-actions),
  .component-card-table tbody td:is([data-card-label="Action" i], [data-card-label="Actions" i]) > :is(.btn, form, .d-flex, .d-inline-flex, .btn-group) {
    max-width: none;
    margin-left: 0;
  }

  :is(#dashboard-main-container, #dashboard-route-modal-content) table.dashboard-card-table > tbody > tr > .dashboard-card-actions :is(.d-flex, .d-inline-flex, .btn-group, .action-buttons, .table-actions):not(.btn),
  .component-card-table tbody td:is([data-card-label="Action" i], [data-card-label="Actions" i]) :is(.d-flex, .d-inline-flex, .btn-group):not(.btn) {
    width: max-content;
    max-width: none;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    gap: .375rem;
  }

  :is(#dashboard-main-container, #dashboard-route-modal-content) .dashboard-card-actions :is(.btn, form),
  .component-card-table td:is([data-card-label="Action" i], [data-card-label="Actions" i]) :is(.btn, form) {
    flex-shrink: 0;
  }
}