/* SZ_R01_R02_RECENT_SWAP_LAYOUT_R74E31CS
   CSS-ONLY visual fix for the additive R01/R02 recent-swap rows.
   No data, JS logic, backend, balance, amount, TXID, sorting, admin, DB, nginx changes.
*/

/* CR inserted its additive block beside the title inside an existing flex header.
   Allow exactly that parent to wrap so the additive block occupies its own full row. */
*:has(> #sz-r01-r02-recent-r74e31cr){
  flex-wrap: wrap !important;
}

/* Keep only the CR additive block on a clean full-width line beneath the header. */
#sz-r01-r02-recent-r74e31cr{
  display: block !important;
  position: relative !important;
  inset: auto !important;
  order: 999 !important;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Match the visual rhythm of the existing recent-swap rows. */
#sz-r01-r02-recent-r74e31cr .sz-r01-r02-recent-r74e31cr-row{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 14px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Do not let the right metadata column squeeze the left route text. */
#sz-r01-r02-recent-r74e31cr .sz-r01-r02-recent-r74e31cr-row > div:nth-child(2){
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#sz-r01-r02-recent-r74e31cr .sz-r01-r02-recent-r74e31cr-row > div:nth-child(3){
  flex: 0 0 auto !important;
  min-width: 145px !important;
  max-width: 48% !important;
}

/* Narrow/mobile: stack only the text/meta portion cleanly; existing rows untouched. */
@media (max-width: 560px){
  #sz-r01-r02-recent-r74e31cr{
    margin-top: 10px !important;
  }
  #sz-r01-r02-recent-r74e31cr .sz-r01-r02-recent-r74e31cr-row{
    padding: 13px 0 !important;
    gap: 10px !important;
  }
  #sz-r01-r02-recent-r74e31cr .sz-r01-r02-recent-r74e31cr-row > div:nth-child(3){
    min-width: 116px !important;
    max-width: 46% !important;
  }
}