/*
 Responsive layer for the existing markup. Loaded after site.layout.css, so everything here wins.
 The page structure is unchanged (fixed 995px wrapper, 598px + 370px columns, absolutely positioned stat boxes);
 this file makes it fluid:
   >= 1000px   the same two columns, but the wrapper grows up to 1240px and the left column takes the extra room
   <  1000px   one column, columns stack (the right column, with chat and the ruler list, goes under the main one)
   <  600px    larger touch targets, stat banner becomes a wrap of boxes, tables scroll sideways instead of overflowing
*/

*, *:before, *:after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { font-size: 14px; }

/* ---- the page container --------------------------------------------------------------------- */
#wrapper_trans {
	width: auto;
	max-width: 1240px;
	padding: 0 8px;
}
#wrapper {
	position: relative;       /* was absolute, which made the page height collapse on small screens */
	width: auto;
	max-width: 1240px;
	margin: 0 auto;
}
.main_menu, .blue_spacer { max-width: 1240px; margin-left: auto; margin-right: auto; }
#wrapper_trans img, #wrapper img { max-width: 100%; }
#wrapper_trans table, #wrapper table { max-width: 100%; }

/* ---- header: logo left, "logged in as" right ------------------------------------------------- */
#rightcolumn table[width] { width: auto; }

/* ---- columns ---------------------------------------------------------------------------------- */
@media (min-width: 1000px) {
	#leftcolumn { width: calc(100% - 392px); margin-right: 10px; }
	#rightcolumn { width: 370px; }
	#tableLeft, #tableFull { width: 100%; }
	#tableRight, #chatbox, #tableStat { width: 100%; }
	#tableLeft .ajaxtitle + *, #tableLeft #ajax, #tableLeft #message, #tableLeft #msg { width: 100%; }
}

@media (max-width: 999px) {
	#wrapper_trans, #wrapper, .main_menu, .blue_spacer { max-width: 100%; }
	#leftcolumn, #rightcolumn, #fullcolumn, #content, #map_left, #map_760 {
		float: none;
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		padding-right: 0;
	}
	#tableLeft, #tableRight, #tableFull, #chatbox, #tableStat, #statbox {
		width: 100%;
		float: none;
	}
	/* things inside the boxes that had a fixed pixel width */
	#tableLeft *, #tableRight *, #tableFull *, #chatbox * { max-width: 100%; }
	#wrap_advisor { width: 100% !important; }
	/* the header: logo and login status stack */
	#wrapper_trans > #leftcolumn, #wrapper_trans > #rightcolumn { float: none; width: 100%; text-align: center; }
	#wrapper_trans > #rightcolumn table { float: none; margin: 0 auto; }
	img.bg { margin-left: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
}

/* ---- menu: wrap instead of overflowing --------------------------------------------------------- */
ul.dropdown { width: 100%; }
ul.dropdown li { float: left; }
@media (max-width: 599px) {
	ul.dropdown li a { padding: 10px 12px; }
	.main_menu br { display: none; }
}

/* ---- stat banner: wrap of boxes when there is no room for the 980px strip ---------------------- */
@media (max-width: 1039px) {
	.stat_container { height: auto; display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; }
	.stat_container > img { display: none; }
	.stat_container .stat_box {
		position: static !important;
		margin-left: 0 !important;
		flex: 1 1 84px;
		width: auto;
		height: auto;
		min-height: 24px;
	}
}

/* ---- map: scaled by responsive.js; the container keeps its 375 x 324 design size ---------------- */
#map_container { transform-origin: 0 0; }

/* ---- forms and reports: tables may be wider than the screen; scroll them rather than the page ---- */
@media (max-width: 599px) {
	#tableLeft table, #tableRight table, #tableFull table { display: block; overflow-x: auto; }
	input[type=text], input[type=email], input[type=password], input[type=number], input[type=datetime-local], select, textarea {
		font-size: 16px;      /* keeps iOS from zooming into the field */
		max-width: 100%;
	}
	a.button, button { min-height: 38px; }
	p { padding: 8px 6px; }
	#chat-area { height: 220px; }
	#chatbox { min-height: 0; }
}

/* ---- chat ---------------------------------------------------------------------------------------- */
#sendie { width: 100%; max-width: 100%; float: none; }
#chat-wrap, #chat-area { max-width: 100%; }

/* the stat banner container carries id stat_banner twice (a wrapper and the strip inside it) */
#stat_banner, .stat_container { width: 100%; }

/* the boxes inside the panels had their own fixed pixel widths (591px, 370px, 365px, 990px) */
#tableLeft #ajax, #tableLeft #msg, #tableLeft #message, #tableLeft .acontent,
#tableRight #ajax, #tableRight #msg, #tableRight #message, #tableRight .acontent,
#tableFull #ajax, #tableFull #msg, #tableFull #message, #tableFull .acontent,
#chatbox #ajax, #chatbox .acontent, #chatbox #msg {
	width: 100%;
}
#tableLeft .ajaxtitle, #tableRight .ajaxtitle, #tableFull .ajaxtitle { white-space: nowrap; }

/* phones: tables that set a percentage width in their markup (the purchases list is 40%) get the whole column */
@media (max-width: 599px) {
	#tableLeft table[width], #tableRight table[width], #tableFull table[width] { width: 100%; }
	#tableLeft td, #tableRight td { word-wrap: break-word; }
}