/* ==========================================================================
   Shared mobile ACTION-AREA polish  (module layer, presentation-only)
   --------------------------------------------------------------------------
   Purpose: give the form/modal FOOTER button groups a consistent mobile
   arrangement — equal touch height, even spacing, balanced widths and a
   predictable primary-on-top hierarchy — WITHOUT redefining the shared button
   base (.small-button colours/borders/fonts stay owned by the foundation) and
   WITHOUT touching the header/nav action clusters (.utility-actions /
   .customer-actions / toolbars) which the shared foundation already handles.

   Rules apply ONLY at <=640px, so desktop is never affected. Only layout
   properties are set (height, gap, flex distribution, order). Icon-only, exit
   and help buttons keep their natural size. No button behaviour is changed.
   ========================================================================== */

@media (max-width: 640px) {
  .release-actions,
  .release-popup-actions,
  .staff-edit-actions,
  .packing-actions,
  .po-req-actions,
  .account-actions,
  .supplier-po-detail-actions,
  .supplier-po-items-actions,
  .ws-transfer-actions,
  .workshop-bottom-actions,
  .workshop-detail-actions,
  .job-desc-buttons,
  .letterhead-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
  }

  /* Every real action button in these groups gets one consistent touch height
     and grows to share the row (balanced 2-column / evenly distributed rows).
     Icon-only, exit and help buttons are left at their natural size. */
  .release-actions > .small-button,
  .release-popup-actions > .small-button,
  .staff-edit-actions > .small-button,
  .packing-actions > .small-button,
  .po-req-actions > .small-button,
  .account-actions > .small-button,
  .account-actions > .action-button,
  .supplier-po-detail-actions > .small-button,
  .supplier-po-items-actions > .small-button,
  .ws-transfer-actions > .small-button,
  .workshop-bottom-actions > .small-button,
  .workshop-detail-actions > .small-button,
  .job-desc-buttons > .small-button,
  .letterhead-actions > .small-button {
    min-height: 44px;
    flex: 1 1 calc(50% - 4px);
  }

  /* Keep icon / exit / help / close controls compact — never stretch them. */
  .release-actions > .icon-only,
  .staff-edit-actions > .icon-only,
  .packing-actions > .icon-only,
  .po-req-actions > .icon-only,
  .supplier-po-detail-actions > .icon-only,
  .supplier-po-items-actions > .icon-only,
  .workshop-bottom-actions > .icon-only,
  .workshop-detail-actions > .icon-only,
  .letterhead-actions > .icon-only,
  .release-actions > .exit-button,
  .staff-edit-actions > .exit-button,
  .packing-actions > .exit-button,
  .po-req-actions > .exit-button,
  .supplier-po-detail-actions > .exit-button,
  .supplier-po-items-actions > .exit-button,
  .workshop-bottom-actions > .exit-button,
  .workshop-detail-actions > .exit-button,
  .letterhead-actions > .exit-button,
  .supplier-po-detail-actions > .help-button {
    flex: 0 0 auto;
    min-width: 0;
  }

  /* Predictable hierarchy: the primary action sits on its own full-width row at
     the TOP of the group; status text drops to its own line. Secondary /
     destructive/neutral buttons then share the row(s) beneath it. */
  .release-actions > .primary-soft,
  .release-popup-actions > .primary-soft,
  .staff-edit-actions > .primary-soft,
  .packing-actions > .primary-soft,
  .po-req-actions > .primary-button,
  .account-actions > .action-button,
  .account-actions > [type="submit"],
  .supplier-po-detail-actions > .primary-soft,
  .supplier-po-items-actions > .primary-soft,
  .ws-transfer-actions > .primary-soft {
    order: -1;
    flex-basis: 100%;
  }

  .release-actions > .import-status,
  .staff-edit-actions > .import-status,
  .po-req-actions > .import-status,
  .supplier-po-detail-actions > .import-status,
  .release-actions > .release-status-text,
  .staff-edit-actions > span,
  .packing-actions > span {
    flex-basis: 100%;
    min-width: 0;
    order: 2;
  }
}