/* Phones and narrow windows. Loaded after taskmaster.css / taskmaster.public.css
   by start.php, start.public.php and start.popup.php, so these rules win.

   Until 2.5.0 everything below 1024px was covered by a "Display width is too
   small" overlay. That is gone; this file is what replaced it.

   Two widths:
     1024px - wide tables scroll sideways inside their box (see wrap_tables()
              in functions.js) rather than pushing the page wide.
      768px - single column: the menu rail is hidden behind the menu button,
              form fields stack, popups fill the screen. */

/* --------------------------------------------------------- Wide tables */
@media screen and (max-width: 1024px) {
	.table_scroll {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}
	/* Kanban columns squeezed to a few characters are unreadable - scroll instead. */
	.table_scroll .pipeline td { min-width: 160px }
}

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

	/* ------------------------------------------------ Header and menu */
	/* Room on the right for the menu button, which sits over the header. */
	header { padding-right: 56px }
	.nav_open,
	.nav_open:visited {
		top: 12px;
		right: 14px;
		font-size: 26px;
	}
	/* On a desktop the menu's icon rail stays visible down the right edge, which
	   is why section keeps 80px of padding there. On a phone the rail would eat a
	   sixth of the screen, so the whole menu slides in from off-screen instead. */
	nav {
		right: 0;
		transform: translateX(100%);
		overflow-y: auto;
		transition: transform .25s;
		box-shadow: none;
	}
	nav.nav_show {
		transform: none;
		box-shadow: -6px 0 24px rgba(0, 0, 0, .35);
	}
	nav a,
	nav a:visited { opacity: .85; margin: 4px 0; padding: 8px 0 }

	/* ------------------------------------------------ Page area */
	section { padding: 12px }
	.breadcrumb { padding: 10px 12px 0 }
	h1 { font-size: 125% }
	h2 { font-size: 115% }
	.box { padding: 12px }
	/* Long unbroken strings (URLs, file names) would otherwise push the page wide.
	   Not applied to tables - there it would squash cells to a letter a line
	   instead of letting .table_scroll scroll them. */
	section p,
	section .rich_text,
	section .box_details { overflow-wrap: anywhere }
	.gw_wrap { padding-left: 0 }

	/* ------------------------------------------------ Forms */
	.form { display: block; width: 100% }
	.form x-label,
	.form_1 x-label,
	.form_2 x-label,
	.form_3 x-label,
	.form_4 x-label,
	.form_5 x-label,
	.form_6 x-label {
		display: block;
		width: 100%;
		padding: 12px 0 0;
	}
	section input[type=text],
	section input[type=password],
	section select,
	section textarea { max-width: 100% }
	section select.full { margin-right: 0 }
	/* 16px stops iOS zooming the page when a field takes focus. */
	input[type=text],
	input[type=password],
	input[type=submit],
	select,
	textarea { font-size: 16px }
	input[type=submit] { padding: 12px 16px }
	.tox-tinymce { max-width: 100% }

	/* ------------------------------------------------ Popups */
	/* A fixed 500 x 500 box centred with negative margins runs off a phone. */
	.pop_up_inner {
		left: 8px;
		right: 8px;
		top: 8px;
		bottom: auto;
		width: auto;
		height: auto;
		max-height: calc(100% - 16px);
		margin: 0;
		overflow-y: auto;
	}
	.close_popup,
	.close_popup:visited,
	.close_popup:hover { padding: 4px 6px }

	/* ------------------------------------------------ Job page */
	.task_actions { flex-wrap: wrap; row-gap: 6px }
	.box .task_actions .material-symbols-outlined { font-size: 1.4em }
}