/* =====================================================================
 * App-like responsive polish (QA 2026-05)
 * Conservative, additive rules so the web app behaves more like a native
 * app on phones: no accidental horizontal page scroll, wide tables scroll
 * inside their own container, media never overflows, smooth momentum scroll.
 * ===================================================================== */

/* Never let the whole page scroll sideways (the #1 thing that breaks the
 * "app" feel and lets users zoom-pan unexpectedly). Wide content scrolls
 * inside its own container instead (see table rules below). */
html, body {
	overflow-x: hidden;
	max-width: 100%;
}

/* Media should always fit its column. */
img, svg, video, canvas, iframe {
	max-width: 100%;
}

/* Comfortable tap feedback. */
a, button, .btn, [role="button"] {
	-webkit-tap-highlight-color: rgba(99, 102, 241, 0.18);
}

/* Momentum scrolling for inner scroll areas. */
.table-responsive,
.modal-body,
.dlabnav-scroll,
.dataTables_wrapper {
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 991.98px) {
	/* Wide data tables scroll horizontally within their card instead of
	 * stretching the page. Mirrors Bootstrap's .table-responsive behaviour
	 * for tables that weren't wrapped. */
	.card table,
	table.dataTable,
	.table-responsive > table,
	.admin-table,
	.data-table {
		display: block;
		width: 100%;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	/* Slightly tighter gutters so cards use the full phone width. */
	.container,
	.container-fluid {
		padding-left: 14px;
		padding-right: 14px;
	}

	/* Long unbroken strings (hashes, emails, wallet addresses) wrap instead
	 * of forcing the page wider. */
	.text-break,
	.wallet-address,
	.ref-code,
	td,
	.card-body p {
		word-break: break-word;
		overflow-wrap: anywhere;
	}
}