/* EatenByAnts on phones and small tablets.
   Loaded by header.php with media="screen and (max-width: 959px)", so desktop never sees these
   rules. The PHP views keep their desktop markup (fixed widths, layout tables, inline styles);
   this file overrides them. !important is needed where inline style="" attributes are overridden. */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { font-size: 13px; }
#main { line-height: 1.4; }

#fix { width: auto; }

/* Header: the desktop image (930px with frame and the backdrop of the desktop status box) is not
   shown; instead a card with the frameless mobile crop (img/header*_mobile.jpg, 619x174, set per
   variant in header.css/header_speed.css/header_ostern.css), followed by the status/login card. */
#header { height: auto; background-size: 0 0; }
#header > img[src*="img/winter/"] { display: none; }
#status {
	margin: 0;
	height: auto;
	padding: 6px;
	font-size: 13px;
}
#status::before {
	content: "";
	display: block;
	aspect-ratio: 619 / 174;
	margin-bottom: 6px;
	border: 1px solid #2e6a32;
	border-radius: 8px;
	background-color: #00320b;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: cover;
}
/* Tablets: a flatter strip (the full-width crop would be over 200px high) */
@media (min-width: 600px) {
	#status::before {
		aspect-ratio: 5 / 1;
		background-position: left 30%;
	}
}
#status > table,
#status > form > table {
	width: 100%;
	border-collapse: separate;
	border: 1px solid #2e6a32;
	border-radius: 8px;
	background: #00320b;
	padding: 4px 6px;
}
#status td { vertical-align: middle; padding: 1px 4px; line-height: 1.45; }
#status tr:has(> td[height]) { display: none; }
#status br:first-child { display: none; }
#status > a.forgotpw { display: inline-block; margin: 6px 4px 0; }
#status img { vertical-align: middle; }
/* "private Nachrichten (n ungelesen)" on one line, the count highlighted */
#status #group { display: inline; padding: 0; }
#status #group br { display: none; }
#status center { display: inline; font-weight: bold; color: #ffd36b; }

/* Main menu: rounded buttons in a grid (4 per row; 2 wide buttons when logged out) */
#mainmenu { height: auto; background: none; padding: 2px 6px 8px; }
#menu ul {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(78px, 1fr));
	gap: 5px;
}
#menu li { float: none; }
#menu a,
#menu a:visited,
#menu a:hover {
	width: auto;
	height: auto;
	padding: 10px 2px;
	border: 1px solid #3cac56;
	border-radius: 6px;
	background: linear-gradient(#1f6e2f, #0c4419);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 1.2;
	text-decoration: none;
}
#menu a:active { background: #2a8a3e; }

/* Content and footer form one panel (desktop: main.png/footer.png, a 930px column with page-green
   margins that would blur when scaled): panel colour of the desktop design, same 6px side
   spacing as the status card and the menu, rounded at the top and bottom. */
#main {
	min-height: 0;
	margin: 0 6px;
	padding: 0 4px 12px;
	background: #00320b;
	border: 1px solid #2e6a32;
	border-bottom: none;
	border-radius: 8px 8px 0 0;
	overflow-x: hidden;
}
#text { padding-left: 4px; padding-right: 4px; overflow-x: auto; }
#main img { max-width: 100%; height: auto; }
/* Floated pictures on the start page would leave only a narrow text column */
#main img[src^="img/ant"][style*="float"] {
	float: none !important;
	display: block;
	margin: 0 auto;
	padding: 10px 0 !important;
}
/* Buttons placed with a large left margin (ASW "Ja"/"Nein") */
#main input[style*="margin-left"] { margin-left: 10px !important; }
/* Item/ant pictures next to their description (table cells can't shrink an image by percent) */
#main td img { max-width: 40vw; }
/* Colony/box rows (picture | numbers | details 350-400px: Lager, Formicarien, Formicarium view,
   Futtertierzucht, showformi.php) are stacked */
#main tr:has(> td[style*="width:350px"]) > td,
#main tr:has(> td[style*="width:400px"]) > td {
	display: block;
	width: auto !important;
	padding-left: 0 !important;
	text-align: center;
}
#main tr:has(> td[style*="width:350px"]) > td table,
#main tr:has(> td[style*="width:400px"]) > td table { margin: 0 auto; text-align: left; }
/* Cards with a picture next to the text (Shop, Forschung, Jobs, Lexikon, Moebel): picture on top */
@media (max-width: 599px) {
	#shopitem tr:has(> td:first-child img[src*="img/items/"]) > td,
	#shopitem tr:has(> td:first-child img[src*="img/ants/"]) > td,
	#shopitem tr:has(> td:first-child img[src*="img/tasks/"]) > td {
		display: block;
		width: auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	#shopitem tr:has(> td:first-child img[src*="img/items/"]) > td:first-child,
	#shopitem tr:has(> td:first-child img[src*="img/ants/"]) > td:first-child,
	#shopitem tr:has(> td:first-child img[src*="img/tasks/"]) > td:first-child { text-align: center; }
}

/* Section pages (Ameisenzimmer, Shop, Internet, Draussen, Lexikon, Statistik, Nachrichten):
   the side menu table stacks above the content and its links become wrapping buttons. */
#text table:has(> tbody > tr > td > table.shop),
#text table:has(> tbody > tr > td > table.shop) > tbody,
#text table:has(> tbody > tr > td > table.shop) > tbody > tr,
#text table:has(> tbody > tr > td > table.shop) > tbody > tr > td,
table.shop,
table.shop > tbody,
table.shop > tbody > tr,
table.shop > tbody > tr > td {
	display: block;
	width: auto !important;
}
table.shop {
	margin: 0 0 10px;
	border: none !important;
	border-bottom: 1px solid #2e6a32 !important;
	border-radius: 0;
}
table.shop hr { display: none; }
#shopmenu { padding: 2px 4px 4px; text-align: left; font-size: 14px; }
#shopmenu b { font-weight: bold; }
#shopmenucats { width: auto !important; padding: 0 0 8px; }
#shopmenucats br { display: none; }
#shopmenucats a {
	display: inline-block;
	height: auto;
	margin: 3px 2px;
	padding: 7px 11px;
	border: 1px solid #2e6a32;
	border-radius: 16px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	text-decoration: none;
}
#shopmenucats a b { font-weight: bold; color: #b8f0c4; }
#shopinfo { padding: 10px 4px; }

/* Fixed widths from the views (width=870px, style="width:600px", min-width:300px, ...) */
#main table[width]:not([width="100%"]),
#main td[width]:not([width="100%"]),
#main th[width]:not([width="100%"]) { width: auto; }
#main [style*="width:"] { max-width: 100% !important; box-sizing: border-box; }
#main table[style*="width:"]:not([style*="width:100%"]) { width: auto !important; }
#main [style*="min-width"] { min-width: 0 !important; }
#error, #message, #shopitem { max-width: 100%; box-sizing: border-box; border-radius: 8px; }
#error { width: auto; }

/* Long lists scroll sideways inside the page instead of widening it */
#main table.liste,
#main table.regal {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
table.regal { min-width: 0; }

/* Forms: 16px stops iOS from zooming into fields; bigger buttons are easier to tap */
input[type="text"], input[type="password"], input[type="number"], input[type="email"],
select, .dropdown, textarea {
	font-size: 16px;
	max-width: 100%;
	box-sizing: border-box;
}
textarea { width: 100% !important; }
input[type="submit"], input[type="button"] {
	font-size: 15px;
	padding: 8px 14px;
	border-color: #3cac56;
	border-radius: 6px;
}
input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; vertical-align: middle; }

/* Tooltips open on tap (js/eba.js) as a box at the bottom of the screen */
a.tooltip:hover span { display: none; }
a.tooltip.open span {
	display: block;
	position: fixed;
	top: auto;
	left: 8px;
	right: 8px;
	bottom: 8px;
	width: auto;
	max-height: 50vh;
	overflow-y: auto;
	z-index: 3000;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Footer: the info lines close the content panel; the ad and the privacy link follow on green */
#footer { height: auto; background: none; padding-top: 0; padding-bottom: 6px; }
#footer > table {
	display: block;
	width: auto;
	margin: 0 6px 8px;
	padding: 6px 0 8px;
	background: #00320b;
	border: 1px solid #2e6a32;
	border-top: 1px solid #1d4d24;
	border-radius: 0 0 8px 8px;
}
#footer > table > tbody,
#footer > table > tbody > tr,
#footer td { display: block; }
#footer td > div { padding: 2px 6px !important; text-align: center !important; }
ins.eba-ad-mobile { margin: 0 auto; }