/* swish2 plus a phone layout. Select with CSSTheme = "swish2-responsive" in zendto.conf.
 * Needs <meta name="viewport" content="width=device-width, initial-scale=1"> in
 * templates/header.tpl, which an RPM upgrade will overwrite, so re-add it after upgrades. */
@import url(swish2.css);

@media (max-width: 760px) {
	/* "html body" outranks local.css, which loads after us and sets min-width:1350px */
	html body { min-width: 0; background-size: 100% 150px; }

	.content { width: auto; margin: 0; }
	#container { padding: 12px; border-radius: 0; overflow-x: auto; }

	/* Header: logo on its own row, tabs and language below */
	#logo { float: none; height: auto; padding: 10px 12px; max-width: none; }
	html #logo img { height: 40px; }
	#topMenu { float: none; height: auto; padding-top: 0; font-size: 1em; }
	#topMenu ul { margin-left: 4px; height: auto; vertical-align: top; }
	#topMenu li, #topMenu li.selected, #topMenu li a { width: auto; }
	#topMenu li a { padding: 0 12px; }
	.dropdownMenu { position: absolute; top: 18px; right: 10px; padding-top: 0; }
	.dropdownContent { top: 26px; right: 0; }
	#loginForm { position: static; height: auto; float: none; overflow: hidden; }

	/* Layout tables become stacked blocks */
	.homeButtons, .homeButtons tbody, .homeButtons tr, .homeButtons td,
	.UD_form, .UD_form tbody, .UD_form tr, .UD_form td { display: block; width: auto !important; }
	.homeButtons td.UD_nav_label { padding: 0 0 12px; }
	.UD_error { width: 100%; }

	input[type="text"], input[type="password"], input[type="email"], textarea, select {
		max-width: 100%; box-sizing: border-box;
	}
	/* iOS zooms the page when focusing an input under 16px */
	input, select, textarea { font-size: 16px; }
	td[style*="nowrap"], #footer span { white-space: normal !important; }

	/* New drop-off form: one column. The grid places items by position, so re-pair labels with fields */
	#newdropoff-boxes { display: flex; flex-direction: column; }
	#newdropoff-boxes > * { order: 5; margin-bottom: 6px; min-width: 0; }
	#newdropoff-boxes .text { align-self: stretch; }
	#newdropoff-boxes #fromLabel { order: 1; }
	#newdropoff-boxes #fromHolder { order: 2; }
	#newdropoff-boxes #subjectLabel { order: 3; }
	#newdropoff-boxes #subject { order: 4; }

	/* Request form: 4 columns down to label + field; order drives auto-placement */
	#request-boxes { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; }
	#request-boxes > * { grid-row: auto !important; grid-column: auto !important; order: 20; }
	#request-boxes .text { width: auto; min-width: 0; }
	#request-boxes #fromLabel { order: 1; }
	#request-boxes #fromHolder { order: 2; }
	#request-boxes #orgLabel { order: 3; }
	#request-boxes #senderOrg { order: 4; }
	#request-boxes #recipNameLabel { order: 5; }
	#request-boxes #recipName { order: 6; }
	#request-boxes #recipEmailLabel { order: 7; }
	#request-boxes #recipEmail { order: 8; }
	#request-boxes #subjectLabel { order: 9; }
	#request-boxes #subject { order: 10; }
	#request-boxes #timelimit, #request-boxes #noteLabel, #request-boxes #noteHolder { grid-column: 1 / -1 !important; }
	#request-boxes .request-space { display: none; }

	#uploadDialog, #progressBarContainer { width: auto !important; max-width: 100%; margin-left: 0 !important; }
	#facebox { left: 0 !important; width: 100%; }
	#facebox .popup, #facebox .content { width: auto !important; box-sizing: border-box; }
	#facebox table { width: 100%; }
	#facebox input[type="text"] { width: 100%; }

	/* DataTables: let the table scroll sideways inside the page, not the page itself */
	.dt-container { overflow-x: auto; }
	.dt-search, .dt-paging, .dt-info { float: none; text-align: left; }
}