/**
 * Site-wide responsive safety net.
 * Loaded after styles.css / dashboard.css so common overflow and
 * multi-column layouts collapse cleanly on phones and tablets.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
}

img,
svg,
video,
canvas {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
  width: 100%;
}

input,
select,
textarea,
button {
  max-width: 100%;
}

/* Scroll wrappers used across modules */
.table-wrap,
.table-scroll,
.dash-table-wrap,
.feat-table-wrap,
.adm-table-wrap,
[class*='-table-wrap'],
[class*='table-scroll'] {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Long unbroken tokens shouldn't force page-wide scroll */
.dash-main,
.rn-page,
.site-main,
main {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

code,
pre,
.mono,
.token,
.role-code {
  overflow-wrap: normal;
  word-break: normal;
  overflow-x: auto;
  max-width: 100%;
}

/* --- Tablet and below --- */
@media (max-width: 900px) {
  .dash-body,
  .dash-shell,
  .dash-content-wrap,
  .dash-main {
    min-width: 0;
    max-width: 100%;
  }

  .dash-main {
    padding: 1.25rem 1rem 2rem !important;
  }

  .dash-topbar {
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem !important;
    flex-wrap: wrap;
  }

  .dash-topbar-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
    margin-left: auto;
  }

  .dash-page-header {
    flex-wrap: wrap;
    gap: 0.65rem;
  }

  .dash-page-title {
    font-size: 1.35rem !important;
  }

  .dash-tabs {
    gap: 0.25rem 0.85rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.15rem;
  }

  .dash-tab {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .dash-form-grid,
  .account-grid,
  .account-grid--password,
  .rn-form-grid,
  .rn-detail,
  .rn-browse-layout,
  .adm-wa-grid,
  .two-col,
  .form-grid,
  .profile-grid {
    grid-template-columns: 1fr !important;
  }

  .dash-card,
  .dash-welcome-card {
    padding: 1.15rem !important;
    max-width: 100%;
  }

  /* Any wide data table inside dashboard cards scrolls horizontally */
  .dash-card,
  .dash-panel,
  .rn-panel,
  .adm-panel,
  .module-panel,
  .feat-card {
    max-width: 100%;
  }

  .dash-card > table,
  .dash-panel > table,
  .rn-panel > table,
  .adm-panel > table,
  .module-panel > table,
  .dash-card .feat-table,
  .dash-main > table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .rn-browse-filters,
  .shop-filters {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 640px) {
  .dash-main {
    padding: 1rem 0.75rem 1.75rem !important;
  }

  .dash-topbar-leading {
    width: 100%;
    order: 2;
  }

  .dash-topbar-actions {
    width: 100%;
    order: 1;
    justify-content: flex-end;
  }

  .dash-subscription-banner {
    width: 100%;
  }

  .dash-user-menu-dropdown {
    right: 0;
    left: auto;
    min-width: min(240px, calc(100vw - 1.5rem)) !important;
    max-width: calc(100vw - 1.5rem);
  }

  .dash-notif-dropdown {
    right: 0 !important;
    left: auto !important;
    width: min(380px, calc(100vw - 1rem)) !important;
  }

  .rn-actions-row,
  .dash-actions,
  .adm-actions,
  .ev-actions,
  .btn-row,
  .form-actions {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  .feature-grid,
  .card-grid,
  .listing-grid,
  .rn-listing-grid,
  .rn-stats {
    grid-template-columns: 1fr !important;
  }

  .hero-stack {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .mfx-wa {
    right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    bottom: max(5.5rem, env(safe-area-inset-bottom, 0px)) !important;
  }
}

@media (max-width: 480px) {
  .dash-page-title {
    font-size: 1.2rem !important;
  }

  .dash-page-icon {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ——— Stat / KPI grids: prefer 3×2 when 6 cards ——— */
.ch-stats,
.gy-stats,
.bd-stats,
.jr-stats,
.ra-stats,
.og-metrics,
.sb-metrics,
.adm-hub-metrics,
.org-kpi-row,
.feat-stats,
.mp-stats,
.rn-stats,
.fc-stats,
.med-stats,
.st-admin-stats,
.wm-stats,
.dr-stats,
.rf-stats--hero {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0.85rem !important;
}

@media (max-width: 960px) {
  .ch-stats,
  .gy-stats,
  .bd-stats,
  .jr-stats,
  .ra-stats,
  .og-metrics,
  .sb-metrics,
  .adm-hub-metrics,
  .org-kpi-row,
  .feat-stats,
  .mp-stats,
  .rn-stats,
  .fc-stats,
  .med-stats,
  .st-admin-stats,
  .wm-stats,
  .dr-stats,
  .rf-stats--hero {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .ch-stats,
  .gy-stats,
  .bd-stats,
  .jr-stats,
  .ra-stats,
  .og-metrics,
  .sb-metrics,
  .adm-hub-metrics,
  .org-kpi-row,
  .feat-stats,
  .mp-stats,
  .rn-stats,
  .fc-stats,
  .med-stats,
  .st-admin-stats,
  .wm-stats,
  .dr-stats,
  .rf-stats--hero {
    grid-template-columns: 1fr !important;
  }
}

/* Stat cards: taller, stacked — heading left, number flush right */
.gy-stat,
.ch-stat,
.bd-stat,
.jr-stat-card,
.ra-stat,
.fa-stat,
.fc-stat,
.med-stat,
.med-gym-stat,
.mp-stats article,
.pg-members-stat,
.rn-stats article,
.st-admin-stat,
.adm-hub-metric,
.adm-packages-stat,
.adm-review-stat,
.adm-charities-stat,
.adm-user-stat-card,
.org-kpi,
.og-metric,
.sb-metric,
.sx-metric-card,
.feat-stat,
.ev-stat-card,
.owm-stat {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.55rem;
  min-height: 6.25rem;
  padding: 1.15rem 1.2rem !important;
  box-sizing: border-box;
  text-align: left;
}

/* Headings / labels — clearer & left */
.gy-stat-label,
.ch-stat-label,
.bd-stat-label,
.jr-stat-label,
.adm-hub-metric-label,
.org-kpi-label,
.og-metric-label,
.sb-metric-label,
.sx-metric-label,
.feat-stat-label,
.ev-stat-label,
.owm-stat-label,
.wm-hub-stat-label,
.rf-stat-label,
.wm-stat-label,
.dr-stat-label,
.ra-stat > span,
.fc-stat > span,
.med-stat > span,
.med-gym-stat > span,
.fa-stat > span,
.st-admin-stat > span,
.mp-stats article > span,
.rn-stats article > span,
.pg-members-stat > span,
.adm-packages-stat > span,
.adm-review-stat > span,
.adm-charities-stat > span,
.adm-user-stat-card > span {
  display: block;
  width: 100%;
  margin: 0 !important;
  text-align: left;
  font-size: 0.8rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  opacity: 1 !important;
}

/* Light dashboards: darker, clearer headings */
.ch-stat-label,
.jr-stat-label,
.adm-hub-metric-label,
.org-kpi-label,
.og-metric-label,
.sb-metric-label,
.feat-stat-label,
.ev-stat-label,
.ra-stat > span,
.fc-stat > span,
.med-stat > span,
.st-admin-stat > span,
.mp-stats article > span,
.rn-stats article > span,
.adm-packages-stat > span,
.adm-review-stat > span,
.adm-charities-stat > span,
.adm-user-stat-card > span {
  color: #1e293b !important;
}

/* Dark dashboards: brighter headings */
.gy-stat-label,
.wm-hub-stat-label,
.wm-stat-label,
.rf-stat-label,
.dr-stat-label {
  color: #ffffff !important;
}

.bd-stat-label,
.bd-stat-hint {
  color: #111111 !important;
}

html[data-dash-theme="dark"] .ch-stat-label,
html[data-dash-theme="dark"] .jr-stat-label,
html[data-dash-theme="dark"] .adm-hub-metric-label,
html[data-dash-theme="dark"] .org-kpi-label,
html[data-dash-theme="dark"] .og-metric-label,
html[data-dash-theme="dark"] .sb-metric-label,
html[data-dash-theme="dark"] .ra-stat > span,
html[data-dash-theme="dark"] .st-admin-stat > span,
html[data-dash-theme="dark"] .mp-stats article > span,
html[data-dash-theme="dark"] .rn-stats article > span {
  color: #e2e8f0 !important;
}

/* Numbers — own row, flush right, prominent */
.gy-stat strong,
.ch-stat strong,
.bd-stat strong,
.jr-stat-card strong,
.rf-stat-card strong,
.ra-stat strong,
.ra-modal-stats strong,
.rd-corner-stats strong,
.fa-stat strong,
.fc-stat strong,
.med-stat strong,
.med-gym-stat strong,
.mp-stats strong,
.pg-members-stat strong,
.rn-stats strong,
.st-admin-stat strong,
.adm-hub-metric-value,
.adm-packages-stat strong,
.adm-review-stat strong,
.adm-charities-stat strong,
.adm-user-stat-card strong,
.org-kpi strong,
.og-metric-value,
.og-int-stats strong,
.owm-stat-value,
.sb-metric-value,
.sh-stat-value,
.sx-metric-value,
.sx-stat-list li strong,
.sp-mini-stats strong,
.wm-stat strong,
.wm-hub-stat-value,
.dr-stat-value,
.ev-stat-value,
.rs-stat-value,
.feat-stat-num,
.wl-goal-stat-value {
  display: block;
  width: 100%;
  margin: 0.15rem 0 0 !important;
  text-align: right;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* Number-first DOM → label above, number below */
.ra-stat > span,
.fc-stat > span,
.med-stat > span,
.med-gym-stat > span,
.fa-stat > span,
.st-admin-stat > span,
.mp-stats article > span,
.rn-stats article > span,
.pg-members-stat > span,
.adm-packages-stat > span,
.adm-review-stat > span,
.adm-charities-stat > span,
.adm-user-stat-card > span,
.feat-stat-label {
  order: 1;
}

.ra-stat > strong,
.fc-stat > strong,
.med-stat > strong,
.med-gym-stat > strong,
.fa-stat > strong,
.st-admin-stat > strong,
.mp-stats article > strong,
.rn-stats article > strong,
.pg-members-stat > strong,
.adm-packages-stat > strong,
.adm-review-stat > strong,
.adm-charities-stat > strong,
.adm-user-stat-card > strong,
.feat-stat-num {
  order: 2;
}

/* Hints under number, left */
.gy-stat-hint,
.ch-stat-hint,
.bd-stat-hint,
.jr-stat-hint,
.adm-hub-metric-meta,
.og-metric-meta,
.sb-metric-meta,
.sx-metric-meta,
.ev-stat-desc,
.wm-hub-stat-meta,
.wm-stat-pct,
.rf-stat-hint {
  order: 3;
  display: block;
  width: 100%;
  text-align: left;
  margin-top: 0 !important;
  font-size: 0.74rem !important;
  line-height: 1.35;
  opacity: 0.85;
}

/* Icon+body cards: icon left; body stacks heading left / number right */
.wm-stat,
.dr-stat,
.rf-stat-card {
  display: flex !important;
  flex-direction: row;
  align-items: stretch;
  gap: 0.85rem;
  min-height: 6.25rem;
  padding: 1.15rem 1.2rem !important;
  box-sizing: border-box;
  text-align: left;
}

.wm-stat > div:last-child,
.dr-stat > div:last-child,
.rf-stat-card > div:last-child {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.45rem;
}

.wm-stat-label,
.dr-stat-label,
.rf-stat-label {
  display: block;
  width: 100%;
  margin: 0 !important;
  text-align: left;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wm-stat strong,
.dr-stat-value,
.rf-stat-card strong {
  display: block;
  width: 100%;
  margin: 0.15rem 0 0 !important;
  text-align: right;
  font-size: clamp(1.45rem, 2.2vw, 1.85rem) !important;
  font-weight: 900 !important;
  font-variant-numeric: tabular-nums;
}

.wm-stat-pct,
.dr-stat-meta,
.rf-stat-hint {
  display: block;
  width: 100%;
  text-align: left;
}

/* Shop Earnings & payout: keep labels and amounts stacked and centered (long NL copy). */
.sh-tab-panel--earnings .sh-earn-metrics {
  align-items: stretch;
}

.sh-tab-panel--earnings .sh-earn-metric {
  display: grid !important;
  grid-template-rows: minmax(2.6rem, auto) auto minmax(1.2rem, auto);
  align-items: center !important;
  justify-items: center;
  text-align: center !important;
  min-height: 7.25rem;
  gap: 0.3rem;
}

.sh-tab-panel--earnings .sh-earn-metric-label,
.sh-tab-panel--earnings .sh-earn-metric-value,
.sh-tab-panel--earnings .sh-earn-metric-hint {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center !important;
}

.sh-tab-panel--earnings .sh-earn-metric-label {
  align-items: flex-end;
  min-height: 2.6rem;
  margin: 0 !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  line-height: 1.25 !important;
}

.sh-tab-panel--earnings .sh-earn-metric-value {
  margin: 0 !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.15 !important;
}

.sh-tab-panel--earnings .sh-earn-metric-hint {
  align-items: flex-start;
  min-height: 1.2rem;
  font-size: 0.72rem !important;
  line-height: 1.3;
}

.sh-tab-panel--earnings .sh-orders-table th:last-child,
.sh-tab-panel--earnings .sh-orders-table td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sh-sidebar-text strong,
.sh-sidebar-text small {
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* Wallet Transaction history: Amount/Status stay table text, not KPI sizes. */
.wl-card--history .wl-table td.wl-amt,
.wl-card--history .wl-table .wl-amt,
.wl-card--history .wl-table .wl-amt--pos,
.wl-card--history .wl-table .wl-amt--neg {
  display: table-cell !important;
  width: auto !important;
  margin: 0 !important;
  text-align: right !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wl-card--history .wl-table td .wl-status {
  display: inline-block !important;
  width: auto !important;
  margin: 0 !important;
  text-align: center;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.01em;
  text-transform: capitalize;
  white-space: nowrap;
}

/* Charity partners admin: center labels + values; keep numbers on one row when NL labels wrap. */
.adm-charities-page .adm-charities-stats {
  align-items: stretch;
}

.adm-charities-page .adm-charities-stat {
  display: grid !important;
  grid-template-rows: minmax(3.6rem, auto) auto;
  align-items: center !important;
  justify-items: center;
  text-align: center !important;
  gap: 0.3rem;
}

.adm-charities-page .adm-charities-stat > span,
.adm-charities-page .adm-charities-stat > strong {
  display: flex !important;
  justify-content: center;
  width: 100%;
  margin: 0 !important;
  text-align: center !important;
}

.adm-charities-page .adm-charities-stat > span {
  order: 1;
  align-items: flex-end;
  min-height: 3.6rem;
  line-height: 1.25 !important;
}

.adm-charities-page .adm-charities-stat > strong {
  order: 2;
  align-items: center;
}