/* Phone layout fixes (added 2026-11-06). Everything is inside a max-width: 767px query, so the desktop layout is unchanged. */
@media (max-width: 767px) {
	/* Wide tables scroll inside their own box (globals.js wraps them in Bootstrap's .table-responsive) and keep wrapping their text */
	.table-responsive { border: 0; }
	.table-responsive > .table > thead > tr > th,
	.table-responsive > .table > tbody > tr > th,
	.table-responsive > .table > tbody > tr > td,
	.table-responsive > .table > tfoot > tr > td,
	.table-responsive > table > tbody > tr > td { white-space: normal; }

	/* Form fields placed side by side (2, 3 or 4 across) stack one per row */
	.row > .col-xs-6:has(.form-group), .row > .col-xs-6:has(.input-group),
	.row > .col-xs-4:has(.input-group), .row > .col-xs-3:has(.input-group) { width: 100%; float: none; }

	/* Nothing wider than the screen: drop-downs, document viewers, images and boxes given a fixed width */
	.select2-container { max-width: 100%; }
	object, embed, iframe, video { max-width: 100%; }
	.box-body img, .modal-body img { max-width: 100%; height: auto; }
	.box-body [style*="width"], .modal-body [style*="width"] { max-width: 100%; }
	.modal-dialog { margin: 10px; }
}