/*
 * Shared mobile / small-screen rules. Loaded on every page from header.html, after the
 * theme stylesheets, so it can soften the desktop-first layouts without touching each page.
 */

/* A stray wide element (usually a table) must not make the whole page scroll sideways. */
html, body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Any table can outgrow a phone, so let it scroll inside its own box. */
.table-responsive,
.table-scroll {
	-webkit-overflow-scrolling: touch;
}

/*
 * Stop wide media from breaking the layout. Note: no `height: auto` here — that would beat the
 * height="30" attribute on the navbar logo and blow it up to its natural size.
 */
img,
video,
canvas {
	max-width: 100%;
}

.navbar img,
.navbar-brand img {
	max-width: none;
}

/* Tables built by DataTables keep their own controls; keep them from stacking oddly. */
@media (max-width: 767.98px) {
	.dataTables_wrapper .dataTables_filter,
	.dataTables_wrapper .dataTables_length,
	.dataTables_wrapper .dataTables_info,
	.dataTables_wrapper .dataTables_paginate {
		float: none !important;
		text-align: left !important;
		width: 100%;
	}
	.dataTables_wrapper .dataTables_filter input {
		width: 100%;
		margin-left: 0;
	}
	.dt-buttons {
		display: flex;
		flex-wrap: wrap;
		gap: .3rem;
		margin-bottom: .5rem;
	}
}

@media (max-width: 767.98px) {
	.container,
	.container-fluid {
		padding-left: .75rem;
		padding-right: .75rem;
	}

	/* Bootstrap grid rows inside cards often carry negative margins that overflow on phones. */
	.card-body > .row,
	.modal-body > .row {
		margin-left: 0;
		margin-right: 0;
	}

	/* Full-width dialogs read much better than the default centred box on a phone. */
	.modal-dialog {
		margin: .5rem;
		max-width: calc(100% - 1rem);
	}
	.modal-footer {
		flex-wrap: wrap;
		gap: .4rem;
	}
	.modal-footer > .btn {
		flex: 1 1 auto;
		margin: 0;
	}

	/* Buttons that sit side by side should stack rather than spill off the edge. */
	.btn-group-mobile-stack,
	.form-inline {
		flex-wrap: wrap;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.3rem; }
	h3, .h3 { font-size: 1.15rem; }
	.card-header { font-size: 1rem !important; }

	/* Keep tap targets at a usable size. */
	.btn,
	.form-control,
	select.form-control {
		min-height: 40px;
	}
	/* ...but not the tiny inline action buttons inside dense tables. */
	.btn-sm,
	.txn-act,
	.pla-btn,
	.pl-act {
		min-height: 0;
	}

	/* Dashboard tiles: one per row so the numbers stay readable. */
	.db-stats { grid-template-columns: 1fr; }
	.db-hero { flex-direction: column; align-items: flex-start; }
	.db-hero h1 { font-size: 1.2rem; }
	.db-filter { grid-template-columns: 1fr; }
	.db-btn { width: 100%; }

	/* Society deposit page. */
	.sd-summary { grid-template-columns: 1fr; }
	.ic-grid { grid-template-columns: 1fr; }
	.sd-actions { flex-direction: column; }
	.sd-actions > * { width: 100%; }
	.acc-search-box { flex-wrap: wrap; }
	.acc-search-btn { width: 100%; margin-top: .5rem; }

	/* Member info card, edit member, add member, manage user, credit point pages. */
	.mi-grid,
	.ep-grid,
	.am-grid,
	.mu-grid,
	.cp-grid { grid-template-columns: 1fr !important; }
	.mi-docs,
	.ep-foot,
	.am-foot,
	.mu-foot { flex-direction: column; align-items: stretch; }
	.ep-foot > *,
	.am-foot > *,
	.mu-foot > * { width: 100%; }
	.cp-tabs { flex-wrap: wrap; }
	.mi-top { flex-direction: column; align-items: center; text-align: center; }
	.mi-identity { text-align: center; }
	.mu-acts,
	.cp-actions { flex-wrap: wrap; }

	/* Payment link tables. */
	.pla-det { grid-template-columns: 1fr; }
	.txn-modal-grid { grid-template-columns: 1fr; }
}

@media (max-width: 575.98px) {
	body { font-size: .93rem; }
	.table { font-size: .8rem; }
	.navbar-brand img { height: 26px; }
}