/* YBDB mobile-friendly overrides.
 * These rules only apply on narrow screens (phones/small tablets);
 * desktop rendering is untouched.
 */

@media only screen and (max-width: 768px) {

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

	/* The app centers content in a fixed 1000px-wide table (set via the
	 * width attribute in include_header*.html).  On mobile, let it fill
	 * the viewport instead of overflowing it. */
	table[width="1000"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	/* page-level table wrapper cell */
	table[width="1000"] td {
		word-wrap: break-word;
	}

	/* Navigation bars: wrap onto multiple lines with comfortable touch
	 * targets instead of forcing one long line. */
	table[width="1000"] td[height="40"] {
		height: auto !important;
		padding: 6px 4px !important;
		text-align: left !important;
	}
	table[width="1000"] td[height="40"] a {
		padding: 6px 4px;
		white-space: nowrap;
		line-height: 2.2em;
	}
	/* transaction_log search form cell uses white-space: nowrap, which
	 * cannot fit a phone screen -- let it wrap */
	td[style*="white-space: nowrap"] {
		white-space: normal !important;
	}
	div[style*="width: 12.5%"] {
		display: none !important;
	}
	div[style*="width: 75%"] {
		width: 100% !important;
	}

	/* shop-page nav header (include_header_shop.html): the 40px inline
	 * height overflows on phones when the links wrap, covering the
	 * content below -- let it grow instead. */
	div[style*="align-content: center"] {
		height: auto !important;
		min-height: 40px;
		padding: 4px 0;
		line-height: 2em;
	}
	/* stack the About/Help and link blocks full-width instead of floating */
	div[style*="float: left; width: auto"], div[style*="float: right; width: auto"] {
		float: none !important;
		width: 100% !important;
	}

	/* Data-heavy tables (shop log, transaction log, history, reports):
	 * keep their columns intact but let the user scroll horizontally
	 * inside a viewport-width box. */
	table[id="shop_log"],
	table[id="transactions"],
	table[width="1"],
	.tabulator {
		display: block;
		overflow-x: auto;
		width: 100%;
		max-width: 100%;
	}

	/* wide explicit-width tables used in forms/reports */
	table[width="850"], table[width="800"], table[width="750"],
	table[width="700"], table[width="650"], table[width="600"] {
		width: 100% !important;
	}

	/* Form fields: full width, 16px text so iOS Safari does not zoom in
	 * on focus. */
	input[type="text"], input[type="password"], input[type="number"],
	input[type="email"], input[type="tel"], input[type="date"], input[type="time"],
	input:not([type]), select, textarea {
		max-width: 100%;
		font-size: 16px;
		box-sizing: border-box;
	}

	/* keep buttons tappable */
	input[type="submit"], input[type="button"], button {
		font-size: 16px;
		min-height: 40px;
	}

	/* chosen.js searchable dropdowns: fill their container */
	.chosen-container {
		width: 100% !important;
		max-width: 100%;
	}
	/* the dropdown's search field: chosen.css sets user-select:none and a
	 * 13px font on the container, which on iOS blocks focusing the field
	 * and zooms the page on focus -- undo both on phones */
	.chosen-container .chosen-search input {
		-webkit-user-select: text;
		user-select: text;
	}
	.chosen-container-single .chosen-search input[type="text"] {
		font-size: 16px !important;
	}
	.chosen-container .chosen-results {
		max-height: 55vh !important;
	}

	/* pickmeup datepicker: it is a flat inline calendar on the stats
	 * pages, so keep it in the document flow (above the submit button)
	 * and only constrain it to the screen width. */
	.pickmeup {
		max-width: calc(100vw - 20px) !important;
	}
	.pickmeup .pmu-instance {
		width: auto !important;
		max-width: 100%;
	}
	.pickmeup .pmu-days, .pickmeup .pmu-day-of-week {
		table-layout: fixed;
		width: 100%;
	}
	.pickmeup .pmu-button {
		font-size: 14px;
		padding: 4px 2px;
	}

	/* jQuery UI datepicker: fit the screen */
	.ui-datepicker {
		max-width: calc(100vw - 20px) !important;
		position: fixed !important;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%, -50%) !important;
	}
	.ui-datepicker table {
		table-layout: fixed;
	}
	.ui-datepicker .ui-datepicker-calendar td a {
		padding: 5px 2px;
	}

	/* jQuery UI dialogs/popups (if any appear): keep inside the screen */
	.ui-dialog {
		max-width: calc(100vw - 20px) !important;
		left: 50% !important;
		margin-left: 0 !important;
		transform: translateX(-50%) !important;
	}
	.ui-dialog .ui-dialog-content {
		max-height: 70vh !important;
		overflow-y: auto;
	}

	/* etherpad iframe + shop log iframe */
	iframe, #shop_log_iframe {
		max-width: 100%;
	}

	/* The shop log iframe page itself */
	#shop_height {
		width: 100%;
		max-width: 100%;
	}

	/* textareas grow to container width */
	textarea {
		width: 100%;
	}

	/* GnuCash date-range slider is fixed at 496px -- fit the screen */
	#gnucash_csv_range {
		max-width: 100% !important;
	}
}