/* ============================================================
   MOBILE PAGE BODIES — finance (registrar): cart, Financial (wallets,
   sub-wallets, cards, payouts, transactions, invoices), pricing.

   Every rule sits inside @media (max-width: 767px), the phone breakpoint of
   mobile-shell.css and mobile-pages.css (src/lib/mobile.js MOBILE_QUERY).
   The class hooks the pages carry for it (m-fin-cards, m-wallet-head,
   m-tx-bulk, ...) have no styles at 768px and up, so tablet and desktop render
   exactly as before. Built on mobile-pages.css (table.m-cards, m-wrap,
   m-sticky-total) and mobile-shell.css (.mobile-sticky-actions, sheets).
   ============================================================ */

@media (max-width: 767px) {
  /* ---------- Finance card tables (table.m-cards.m-fin-cards) ---------- */
  /* A title cell with more than one piece (domain + badge, invoice number +
     kind) wraps its pieces under each other instead of squeezing them. */
  table.m-fin-cards td[data-m="primary"] {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: var(--space-1);
  }
  /* Text blocks (domain lists, deletion policy) wrap between words. */
  table.m-fin-cards td[data-m="block"] {
    word-break: normal;
    overflow-wrap: anywhere;
  }
  table.m-fin-cards td[data-m="primary"] > div {
    flex-basis: 100%;
  }
  /* A status badge in the title (a pending withdrawal) wraps rather than spill past a
     narrow card (320px, Arabic: the amount column takes the rest). */
  table.m-fin-cards td[data-m="primary"] .badge {
    white-space: normal;
  }
  /* Its secondary line (pre-launch badge, invoice kind) reads as a sub-line. */
  table.m-fin-cards td[data-m="primary"] > :is(span + div, [data-testid="invoice-kind"]) {
    margin: 0 !important;
    font-size: var(--text-xs);
    font-weight: 400;
  }
  /* Amount in the card's top-right corner: never split across lines. */
  table.m-fin-cards td[data-m="status"] {
    white-space: nowrap !important;
    font-size: var(--text-base) !important;
    font-weight: 600 !important;
  }
  /* A labelled value with a note under it (invoice total + card fee). */
  table.m-fin-cards td[data-label]:not([data-m]) > div {
    flex-basis: 100%;
    text-align: right;
  }
  /* Row remove button (cart): a 44px target in the card's top-right corner. */
  table.m-fin-cards td[data-m="kebab"] .btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0 !important;
    justify-content: center;
  }
  /* Single-control lines (privacy toggle, PDF download) keep a 44px target. */
  table.m-fin-cards td[data-label] > .btn-sm {
    min-width: 44px;
    justify-content: center;
  }
  /* A row's attached note (stale-price badge): joined to the card above it. */
  table.m-fin-cards tbody tr:has(+ tr.m-attach) {
    margin-bottom: 0;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  table.m-fin-cards tbody tr.m-attach {
    display: block;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  table.m-fin-cards tbody tr.m-attach td[colspan] {
    display: block;
    padding: 0 !important;
    text-align: left !important;
  }
}

@media (max-width: 767px) {
  /* ---------- Cart ---------- */
  .m-cart-clear {
    display: flex;
    justify-content: flex-start;
  }
  .page-content .bulk-toolbar.m-wrap .btn {
    flex: 1 1 auto;
  }
  .page-content .bulk-toolbar.m-wrap > span {
    flex-basis: 100%;
  }
  /* Stale-items banner: Review / Refresh / dismiss as 44px targets. */
  .page-content .cart-banner__action {
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Pre-launch section: the SMD picker fits the card; Reserve spans the row
     (it rides the sticky bar instead when the cart holds nothing else). */
  [data-testid="cart-prelaunch-section"] input[type="file"] {
    max-width: 100%;
    min-height: 44px;
    font-size: var(--text-sm);
  }
  [data-testid="cart-prelaunch-section"] > div:last-child:not(.mobile-sticky-actions) > .btn {
    flex: 1 1 auto;
    min-height: 48px;
  }

  /* ---------- Financial: wallet cards ---------- */
  /* Currency, balance and breakdown on top; Top Up / Transfer / Withdraw as an
     even row of full-size buttons under them (they ran off the card). */
  .m-wallet-head {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--space-4);
  }
  .m-wallet-head > div:first-child > div:first-child + div {
    font-size: var(--text-2xl) !important;
    overflow-wrap: anywhere;
  }
  .m-wallet-actions {
    width: 100%;
  }
  .m-wallet-actions > .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
  }
  /* Balance / Allocated / In escrow / Available as a 2x2 grid. */
  .m-figures {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3) var(--space-4) !important;
  }

  /* Saved cards: the actions drop under the card line when it is tight. */
  .m-pm-row {
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .m-pm-row > div:first-child {
    min-width: 0;
    flex: 1 1 auto;
    gap: var(--space-3) !important;
  }
  .m-pm-actions {
    margin-left: auto;
  }
  .m-pm-actions .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }

  /* Payout accounts: a long label / address wraps beside Remove. */
  .m-payout-row {
    gap: var(--space-3);
  }
  .m-payout-row > div:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
  }
  .m-payout-row > .btn {
    flex-shrink: 0;
  }

  /* Sub-wallet allocation form: amount field full width, actions under it. */
  .m-subwallet-form > input {
    flex: 1 1 100%;
    min-height: 44px;
    font-size: 16px;
  }
  .m-subwallet-form > .btn {
    flex: 1 1 auto;
  }

  /* ---------- Financial: transactions ---------- */
  .m-tx-toolbar {
    align-items: stretch !important;
  }
  .m-tx-filters {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .m-tx-filters .form-input {
    width: 100% !important;
  }
  .m-tx-filters > .btn {
    grid-column: 1 / -1;
  }
  .m-tx-toolbar > .btn {
    width: 100%;
  }
  /* Selected rows: count + Clear on top, the two downloads under them, pinned
     above the tab bar (two rows, so the page clears a taller bar). */
  .mobile-sticky-actions.m-tx-bulk {
    flex-wrap: wrap !important;
    row-gap: var(--space-2) !important;
  }
  .mobile-sticky-actions.m-tx-bulk > span {
    flex: 1 1 60% !important;
    order: 0;
  }
  .mobile-sticky-actions.m-tx-bulk > .btn {
    flex: 1 1 calc(50% - var(--space-2));
    order: 2;
    min-height: 44px;
    font-size: var(--text-sm);
  }
  .mobile-sticky-actions.m-tx-bulk > .btn:last-child {
    flex: 0 0 auto;
    order: 1;
    margin-left: auto !important;
  }
  .app-container:has(.m-tx-bulk) {
    --m-sticky-h: 124px;
  }

  /* ---------- Payout destination form (modal) ---------- */
  .m-form-actions {
    position: sticky;
    bottom: 0;
    padding-top: var(--space-3);
    background: var(--bg-elevated);
  }
  .m-form-actions > .btn {
    flex: 1 1 0;
    min-height: 48px;
  }
  .modal .form-row {
    grid-template-columns: 1fr;
  }

  /* ---------- Pricing (public page) ---------- */
  .m-pricing-page {
    padding: var(--space-4) var(--space-3) !important;
  }
  .m-pricing-card {
    padding: var(--space-5) var(--space-4) !important;
  }
  .m-pricing-card h1 {
    font-size: var(--text-xl) !important;
  }
  /* The cells carry inline desktop padding / rules; the card supplies both. */
  table.m-pricing-table td {
    padding: 3px 0 !important;
    border-bottom: none !important;
  }
  table.m-pricing-table td[data-m="primary"] {
    font-size: var(--text-lg) !important;
  }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .page-content :is(.m-wallet-actions, .m-pm-actions, .m-tx-bulk) .btn:active {
    transform: none;
  }
}