/* دستور کار نسخه ۲، بند ۱۰ — تراکنش‌ها، از پایین صفحه‌ی عضویت به صفحه‌ی
   مستقل خودش منتقل شد. همان قوانین قبلی membership.css، بدون تغییر. */
[data-shell-page] { --accent: var(--color-gold) }
[data-shell-page][data-plan="plan-free"] { --accent: var(--plan-free) }
[data-shell-page][data-plan="plan-iran"] { --accent: var(--plan-iran) }
[data-shell-page][data-plan="plan-basic"] { --accent: var(--plan-basic) }
[data-shell-page][data-plan="plan-silver"] { --accent: var(--plan-silver) }
[data-shell-page][data-plan="plan-gold"] { --accent: var(--plan-gold) }
[data-shell-page][data-plan="plan-diamond"] { --accent: var(--plan-diamond) }

.tx-table-wrap { overflow-x: auto; border: 1px solid rgba(196,163,90,.25); border-radius: 12px; margin-bottom: 14px }
.tx-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap }
.tx-table th, .tx-table td { padding: 10px 14px; text-align: start }
.tx-table thead th { background: var(--color-navy-light); color: var(--text-70); font-weight: 600; font-size: 12px }
.tx-table tbody tr { border-top: 1px solid rgba(196,163,90,.15) }
.tx-table td.num { font-variant-numeric: tabular-nums; unicode-bidi: isolate }
.tx-status { font-size: 11.5px; border-radius: 6px; padding: 3px 9px; border: 1px solid transparent }
.tx-status--success { color: var(--good); border-color: var(--good) }
.tx-status--pending { color: var(--color-gold); border-color: var(--color-gold) }
.tx-status--failed { color: var(--bad); border-color: var(--bad) }
.tx-empty { font-size: 13px; color: var(--text-70) }
.tx-pager { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-70) }
.tx-pager .btn-link:disabled { opacity: .4; cursor: not-allowed }

/* دستور کار نسخه ۲، بند ۹ — روی موبایل جدول را به کارت تبدیل می‌کنیم تا
   هرگز overflow-x افقی لازم نشود (فقط همین صفحه واقعاً جدول دارد). */
@media (max-width: 640px) {
  .tx-table-wrap { overflow-x: visible; border: 0 }
  .tx-table, .tx-table thead, .tx-table tbody, .tx-table th, .tx-table td, .tx-table tr { display: block; white-space: normal }
  .tx-table thead { position: absolute; inset-inline-start: -9999px }
  .tx-table tr {
    border: 1px solid rgba(196,163,90,.25); border-radius: 12px; margin-bottom: 10px; padding: 10px 14px;
  }
  .tx-table td { border-top: 0 !important; padding: 4px 0; display: flex; justify-content: space-between; gap: 10px }
  .tx-table td::before { content: attr(data-label); color: var(--text-70); font-size: 12px }
}