/* Canonical financial mobile presentation. No monetary formatting or calculations here. */
.financial-mobile-action { display: none; }
@media (max-width: 980px) {
  #app .mobile-financial :is(.wallet-grid, .game-payments-workspace) { display: flex; flex-direction: column; min-width: 0; }
  #app .mobile-financial :is(.game-payment-records-panel, .game-payment-form-panel, .panel) { min-width: 0; max-width: 100%; }
  #app .mobile-financial :is(.wallet-kpi-grid, .game-kpi-grid, .commission-kpi-grid) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app .mobile-financial .kpi-card { display: flex !important; flex-direction: column; gap: 10px; align-items: stretch; min-width: 0; width: auto; height: auto; min-height: 0; padding: 14px !important; overflow-wrap: anywhere; }
  #app .mobile-financial .kpi-card::before, #app .mobile-financial .kpi-card::after { display: none !important; }
  #walletView .wallet-kpi-grid :is([data-wallet-credit-details], [data-wallet-debt-details]) { order: -2; }
  #walletView .wallet-kpi-grid .kpi-card:last-child { order: -1; }
  #gamePaymentsView .game-kpi-grid [data-game-payable-remaining-formula] { order: -2; }
  #commissionView .commission-kpi-grid .kpi-card:nth-child(4) { order: -1; }
  #app .mobile-financial .kpi-card span { padding: 0 !important; min-height: 0 !important; width: 100%; max-width: 100%; min-width: 0; align-self: stretch; }
  #app .mobile-financial .kpi-card :is(strong, small, span) { white-space: normal; text-overflow: clip; }
  #app .mobile-financial .kpi-card > strong { font-size: 20px; line-height: 1.8; }
  #app .mobile-financial .kpi-card > small { font-size: 12px; line-height: 1.8; }
  #app .mobile-financial .financial-exact-amount { min-height: 0; display: block; font-size: 13px; line-height: 2; color: var(--ink); font-variant-numeric: tabular-nums; }
  .financial-game-source { display: none; }
  .financial-game-breakdown summary { min-height: 44px; padding-block: 10px; cursor: pointer; }
  .financial-game-breakdown > div { white-space: pre-line; overflow-wrap: anywhere; line-height: 2; }
  .financial-detail-hint { display: block; color: var(--primary); font-size: 12px; line-height: 2; }
  .financial-table-controls { display: grid; gap: 8px; margin-block: 12px; }
  .financial-table-controls button { min-height: 44px; width: fit-content; max-width: 100%; }
  .financial-comparison-label { margin: 0; font-size: 13px; color: var(--muted); }
  .financial-comparison-label[hidden] { display: none; }
  #app .mobile-financial .table-wrap.financial-table-region, .mobile-financial-dialog .table-wrap.financial-table-region { display: block; min-width: 0; max-width: 100%; margin-inline: 0; padding-inline: 0; }
  /* One canonical set of cells supplies both transaction cards and comparisons. */
  .mobile-financial .financial-table-region:not(.financial-comparison) { overflow: visible !important; max-height: none; }
  .mobile-financial .financial-table-region:not(.financial-comparison) .financial-record-table { display: block; width: 100%; min-width: 0; }
  .mobile-financial .financial-table-region:not(.financial-comparison) thead { display: none; }
  .mobile-financial .financial-table-region:not(.financial-comparison) :is(tbody, tfoot) { display: grid; gap: 14px; }
  .mobile-financial .financial-table-region:not(.financial-comparison) :is(tbody, tfoot) tr { display: grid; gap: 0; padding: 14px; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
  .mobile-financial .financial-table-region:not(.financial-comparison) :is(td, th) { display: block; width: auto !important; min-width: 0 !important; max-width: 100%; padding: 9px 0; white-space: normal; overflow-wrap: anywhere; }
  .mobile-financial .financial-table-region:not(.financial-comparison) :is(td, th)[hidden] { display: none !important; }
  .mobile-financial .financial-table-region:not(.financial-comparison) :is(td, th)::before { content: attr(data-financial-label); display: block; color: var(--muted); font-size: 12px; line-height: 1.9; font-weight: 500; }
  .mobile-financial .financial-table-region:not(.financial-comparison) .financial-empty-row td::before { content: none; }
  .mobile-financial .financial-table-region .table-note-preview { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }
  .mobile-financial .financial-table-region:not(.financial-comparison) .table-note-preview :is(strong, small) { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .mobile-financial .financial-audit-dates > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding-block: 6px; }
  .financial-audit-dates span { color: var(--muted); font-size: 12px; }
  .mobile-financial .financial-table-region:not(.financial-comparison) .financial-breakdown-control button { width: 100%; min-height: 44px; }
  .mobile-financial .financial-comparison { overflow-x: auto !important; max-height: 65dvh; overscroll-behavior: contain; }
  .mobile-financial .financial-comparison .financial-record-table { display: table; min-width: 900px; }
  .mobile-financial .financial-comparison :is(thead, tbody, tfoot, tr, th, td) { display: revert; }
  .mobile-financial .financial-comparison .financial-breakdown-control { display: none; }
  .mobile-financial .financial-comparison .financial-audit-dates { display: table-cell; min-width: 220px; white-space: normal; }
  #app .mobile-financial .financial-mobile-action { display: table-cell; }
  #app .mobile-financial .financial-table-region:not(.financial-comparison) .financial-mobile-action { display: block; }
  #app .mobile-financial .game-payment-mobile-list { display: none; }
  .mobile-financial :is(form, fieldset, .payment-summary) { min-width: 0; max-width: 100%; }
  .mobile-financial :is(.data-form, .sales-share-pills, .game-payment-form-grid, .payment-summary) { grid-template-columns: minmax(0, 1fr); }
  .mobile-financial :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; max-width: 100%; min-width: 0; min-height: 44px; font-size: 16px; }
  .mobile-financial :is(button, .secondary-btn, .primary-btn, .game-full-pay, label.checkbox-label) { min-height: 44px; }
  .mobile-financial .table-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
  .mobile-financial :is(.commission-payment-form, .game-payment-form) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .mobile-financial .form-actions { position: static; display: flex; flex-wrap: wrap; gap: 10px; }
  .mobile-financial .form-error { white-space: normal; overflow-wrap: anywhere; }
  .mobile-financial-dialog .invoice-preview { max-width: 100%; }
  .mobile-financial-dialog .invoice-preview img { max-width: 100%; height: auto; object-fit: contain; }
  .mobile-financial-dialog .wallet-debt-tooltip { max-width: calc(100vw - 24px); white-space: pre-wrap; }
}
@media (max-width: 380px) {
  #app .mobile-financial :is(.wallet-kpi-grid, .game-kpi-grid, .commission-kpi-grid) { grid-template-columns: minmax(0, 1fr); }
}