/*
 * What the template does not cover: narrow screens.
 *
 * Three pages set a width of 850 pixels in a style attribute - the activity report (CRA)
 * grid and the invoice - because they reproduce the layout of an A4 document. On a
 * phone, the page overflows and the browser adds a horizontal scrollbar to the whole
 * page, not to the table: the sidebar, the buttons and the breadcrumb are lost at the
 * same time.
 *
 * The rule below leaves those blocks at their width on a wide screen and makes them
 * scroll, on their own, below it. An `!important` is needed: what it neutralises is a
 * style attribute, which only an important declaration can beat.
 *
 * The rest of the application already uses `table-responsive` from the template.
 */

/* A block with an imposed width that overflows: it scrolls on its own */
@media (max-width: 991.98px) {
	[style*="width: 850px"],
	[style*="width:850px"] {
		width: 100% !important;
		max-width: 100% !important;
		overflow-x: auto;
	}

	/* The CRA grid and the invoice keep their inner layout: that is what makes them
	   readable. The container is what scrolls, not the content that folds. */
	[style*="width: 850px"] > table,
	[style*="width:850px"] > table {
		min-width: 800px;
	}
}

/* The action buttons of the record forms, laid side by side in a layout table, each
   with a fixed width: on a phone they run off the screen. */
@media (max-width: 575.98px) {
	input[type="button"][style*="width:150px"],
	input[type="button"][style*="width: 150px"] {
		width: 100% !important;
		margin-bottom: 0.5rem;
	}

	/* The table that lines them up becomes a column */
	.card-body table:not(.table) > tbody > tr,
	.card-body table:not(.table) > tr {
		display: block;
	}
	.card-body table:not(.table) > tbody > tr > td,
	.card-body table:not(.table) > tr > td {
		display: block;
		width: auto !important;
	}
}

/* The top navigation bar slipped under the content on narrow screens */
@media (max-width: 767.98px) {
	.main-content {
		overflow-x: hidden;
	}
}