/*
 * Travikas mobile — build.css
 * Owner: Buildings: build.php pages (rally point, barracks/stable/workshop, academy, smithy, marketplace, palace/residence, hero mansion, treasury, celebration) and a2b send-troops forms.
 *
 * Loaded by Templates/mobile_assets.tpl after the gpack CSS.
 * Put rules only inside @media screen and (max-width: 1023px) (or narrower);
 * desktop (>= 1024px) must stay unchanged.
 *
 * Hooks used from the templates (all presentational, no form names changed):
 *   span.bcost   one resource icon + amount (costs wrap per resource)
 *   td.desc / td.val / td.max / td.act / td.cond   rows of table.build_details
 */

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

	/* --- Page frame ------------------------------------------------------ */

	div#content.build div#build,
	div#content.a2b,
	div#content.celebration {
		box-sizing: border-box;
		max-width: 100%;
		min-width: 0;
	}

	div#content.build div#build h1,
	div#content.a2b h1 {
		font-size: 20px;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	div#content.build div#build p.build_desc {
		margin-right: 0;
		overflow-wrap: anywhere;
	}

	div#content.build div#build table,
	div#content.a2b table {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Tabs: Travian #textmenu, wrapped into a row of tab buttons. */
	div#content.build div#build div#textmenu,
	div#content.build div#textmenu {
		align-items: stretch;
		display: flex;
		flex-wrap: wrap;
		font-size: 0;
		gap: 6px;
		margin: 12px 0 16px;
		white-space: normal;
	}

	div#content.build div#textmenu a {
		align-items: center;
		background: linear-gradient(#fff, #ececec);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-flex;
		flex: 1 1 auto;
		font: bold 13px/1.2 Verdana, Tahoma, Arial, sans-serif;
		justify-content: center;
		min-height: 44px;
		padding: 8px 10px;
		text-align: center;
		text-decoration: none;
	}

	div#content.build div#textmenu a.selected {
		background: #e8f5dc;
		border-color: #71a832;
		color: #333;
	}

	/* --- Costs: one icon + amount per unbreakable chip ------------------- */

	div#content.build span.bcost,
	div#content.a2b span.bcost {
		display: inline-block;
		white-space: nowrap;
	}

	div#content.build p#contract {
		line-height: 1.9;
		margin-top: 14px;
		overflow-wrap: anywhere;
	}

	div#content.build p#contract span.bcost {
		margin-right: 2px;
	}

	/* Upgrade / research / celebrate links: full-width Travian buttons. */
	div#content.build div#build a.build,
	div#content.build table.build_details td.act a,
	div#content.build table.build_details td.act span.none {
		align-items: center;
		background: linear-gradient(to bottom, #fdfdfd, #c6c6c6);
		border: 1px solid #71d000;
		border-radius: 5px;
		box-sizing: border-box;
		display: flex;
		font: bold 14px/1.2 Verdana, Tahoma, Arial, sans-serif;
		justify-content: center;
		margin: 8px 0 0;
		min-height: 44px;
		padding: 10px 14px;
		text-align: center;
		text-decoration: none;
		width: 100%;
	}

	div#content.build table.build_details td.act span.none {
		background: #f3f3f3;
		border-color: #ccc;
		font-weight: normal;
	}

	div#content.build div#build a.build:active,
	div#content.build table.build_details td.act a:active {
		background: #fff;
	}

	/* CSS buttons (Train, OK, Save ...). */
	div#content.build button.trav_buttons,
	div#content.a2b button.trav_buttons,
	div#content.celebration button.trav_buttons {
		box-sizing: border-box;
		font-size: 15px;
		min-height: 44px;
		padding: 10px 20px;
	}

	div#content.build button#btn_train,
	div#content.build form button#btn_ok,
	div#content.a2b button#btn_ok {
		display: block;
		margin: 12px 0;
		width: 100%;
	}

	/* Sprite image buttons (<input type="image" class="dynamic_img">): keep
	 * the gpack sprite, centred in a 44px Travian-framed tap area. */
	div#content.build input.dynamic_img,
	div#content.a2b input.dynamic_img {
		background-clip: content-box;
		background-origin: content-box;
		background-position: center top;
		background-color: transparent;
		background-repeat: no-repeat;
		border: 1px solid #71d000;
		border-radius: 5px;
		box-sizing: border-box;
		display: block;
		height: 44px;
		left: auto;
		margin: 12px 0;
		padding: 11px 0;
		position: static;
		top: auto;
		width: 100%;
	}

	div#content.build input.dynamic_img.over,
	div#content.a2b input.dynamic_img.over {
		background-position: center bottom;
	}

	div#content.build input.dynamic_img[disabled],
	div#content.a2b input.dynamic_img[disabled] {
		border-color: #ccc;
		opacity: .6;
	}

	/* Form fields: >= 16px so iOS does not zoom on focus. */
	div#content.build input,
	div#content.build select,
	div#content.a2b input,
	div#content.a2b select,
	div#content.celebration input,
	div#content.celebration select {
		font-size: 16px;
	}

	div#content.build input.text,
	div#content.build input[type="text"],
	div#content.build input[type="number"],
	div#content.build select,
	div#content.build textarea,
	div#content.a2b input.text,
	div#content.a2b input[type="text"],
	div#content.a2b select,
	div#content.celebration input[type="text"],
	div#content.celebration select {
		border-radius: 3px;
		box-sizing: border-box;
		font-size: 16px;
		max-width: 100%;
		min-height: 36px;
		padding: 4px 6px;
	}

	div#content.build input[type="checkbox"],
	div#content.build input[type="radio"],
	div#content.a2b input[type="checkbox"],
	div#content.a2b input[type="radio"] {
		height: 22px;
		margin: 0 6px 0 0;
		vertical-align: middle;
		width: 22px;
	}

	/* --- table.build_details: stacked cards ------------------------------ */
	/* Training (barracks, stable, workshop, great barracks/stable, trapper,
	 * residence/palace settlers, hero mansion), research (academy, smithy,
	 * armoury), celebrations (town hall). */

	div#content.build table.build_details {
		background: transparent;
		border: 0;
		display: block;
		margin: 10px 0;
		width: 100% !important;
	}

	div#content.build table.build_details > thead,
	div#content.build table.build_details > tbody {
		display: block;
		width: 100%;
	}

	div#content.build table.build_details > thead > tr {
		background: #f3f3f3;
		border: 1px solid #c0c0c0;
		border-radius: 4px 4px 0 0;
		display: flex;
		flex-wrap: wrap;
	}

	div#content.build table.build_details > thead > tr > td,
	div#content.build table.build_details > thead > tr > th {
		background: transparent;
		border: 0;
		display: block;
		flex: 1 1 auto;
		font-weight: bold;
		padding: 6px 8px;
	}

	/* Column titles (Name / Quantity / Max) mean nothing once rows are cards. */
	div#content.build table.build_details:has(td.val) > thead {
		display: none;
	}

	div#content.build table.build_details > tbody > tr {
		background: #fff;
		border: 1px solid #c0c0c0;
		border-radius: 4px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
		box-sizing: border-box;
		column-gap: 8px;
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		margin: 0 0 10px;
		padding: 8px;
	}

	div#content.build table.build_details:not(:has(td.val)) > thead + tbody > tr:first-child {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		border-top: 0;
	}

	div#content.build table.build_details > tbody > tr:empty {
		display: none;
	}

	div#content.build table.build_details > tbody > tr > td,
	div#content.build table.build_details > tbody > tr > th {
		background: transparent;
		border: 0;
		box-sizing: border-box;
		display: block;
		min-width: 0;
		padding: 0;
		text-align: left;
		width: auto !important;
	}

	div#content.build table.build_details td.desc,
	div#content.build table.build_details td[colspan] {
		grid-column: 1 / -1;
	}

	div#content.build table.build_details td.desc .tit {
		font-size: 14px;
		font-weight: bold;
		margin-bottom: 4px;
	}

	div#content.build table.build_details td.desc .tit a {
		display: inline-block;
		padding: 6px 0;
	}

	div#content.build table.build_details td.desc .details {
		font-size: 12px;
		line-height: 1.9;
		overflow-wrap: anywhere;
	}

	div#content.build table.build_details td.desc .details span.bcost {
		margin-right: 1px;
	}

	/* Unit portrait + copy (Templates/Build/unit_illu.inc.php). */
	div#content.build table.build_details .train-unit {
		align-items: flex-start;
		display: flex;
		gap: 8px;
		min-width: 0;
	}

	div#content.build table.build_details .train-unit .unit-illu-frame {
		flex: 0 0 auto;
		max-width: 30%;
		overflow: hidden;
	}

	div#content.build table.build_details .train-copy {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Quantity input + max link side by side under the card. */
	div#content.build table.build_details td.val {
		align-self: center;
		grid-column: 1;
		margin-top: 8px;
	}

	div#content.build table.build_details td.val input.text {
		font-size: 16px;
		height: 44px;
		text-align: center;
		width: 100% !important;
	}

	div#content.build table.build_details td.max {
		align-self: center;
		grid-column: 2;
		margin-top: 8px;
	}

	div#content.build table.build_details td.max a,
	div#content.build table.build_details td.max span {
		align-items: center;
		background: linear-gradient(#fff, #ececec);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-flex;
		font-size: 14px;
		justify-content: center;
		min-height: 44px;
		min-width: 64px;
		padding: 6px 10px;
		white-space: nowrap;
	}

	div#content.build table.build_details td.act,
	div#content.build table.build_details td.cond {
		grid-column: 1 / -1;
		margin-top: 6px;
	}

	/* Training / research queue. */
	div#content.build table.under_progress {
		display: table;
		font-size: 12px;
		table-layout: fixed;
		width: 100% !important;
	}

	div#content.build table.under_progress td {
		overflow-wrap: anywhere;
		padding: 4px;
	}

	div#content.build table.under_progress td.desc img.unit {
		margin-right: 2px;
	}

	/* --- Main building: demolish ---------------------------------------- */

	div#content.build table#demolish {
		width: 100% !important;
	}

	div#content.build div#build input#btn_demolish {
		left: auto;
		margin: 12px 0;
		top: auto;
	}

	div#content.build div#build.gid15 select.dropdown,
	div#content.build select#demolition_type {
		height: 44px;
		width: 100%;
	}

	/* --- Info tables (warehouse, granary, cranny, main building ...) ---- */

	div#content.build table#build_value {
		table-layout: fixed;
		width: 100% !important;
	}

	div#content.build table#build_value th,
	div#content.build table#build_value td {
		overflow-wrap: anywhere;
		white-space: normal;
	}

	/* --- Troop tables (rally point, a2b confirm, send back) -------------- */
	/* Each row becomes a flex row; the unit columns share the width equally
	 * so icons and numbers stay lined up without sideways scrolling. */

	div#content.build table.troop_details,
	div#content.a2b table.troop_details {
		display: block;
		font-size: 12px;
		margin: 8px 0 14px;
		width: 100% !important;
	}

	div#content.build table.troop_details > thead,
	div#content.build table.troop_details > tbody,
	div#content.a2b table.troop_details > thead,
	div#content.a2b table.troop_details > tbody {
		display: block;
		width: 100%;
	}

	div#content.build table.troop_details tr,
	div#content.a2b table.troop_details tr {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	div#content.build table.troop_details tr[hidden],
	div#content.a2b table.troop_details tr[hidden] {
		display: none;
	}

	div#content.build table.troop_details td,
	div#content.build table.troop_details th,
	div#content.a2b table.troop_details td,
	div#content.a2b table.troop_details th {
		box-sizing: border-box;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	div#content.build table.troop_details > thead td,
	div#content.a2b table.troop_details > thead td {
		flex: 1 1 auto;
		padding: 6px;
		width: auto;
	}

	div#content.build table.troop_details > thead td.role,
	div#content.a2b table.troop_details > thead td.role {
		flex: 0 1 auto;
		font-weight: bold;
	}

	/* Unit rows: label on its own line, then one equal cell per unit. */
	div#content.build table.troop_details > tbody.units > tr > th,
	div#content.a2b table.troop_details > tbody.units > tr > th {
		flex: 0 0 100%;
		width: auto;
		padding: 4px 6px 2px;
		text-align: left;
	}

	div#content.build table.troop_details > tbody.units > tr:first-child > th,
	div#content.a2b table.troop_details > tbody.units > tr:first-child > th {
		display: none;
	}

	div#content.build table.troop_details > tbody.units > tr > td,
	div#content.a2b table.troop_details > tbody.units > tr > td {
		/* basis 0 + min-width: the cells wrap below the label as one line
		 * and share the width equally. */
		flex: 1 1 0;
		font-size: 11px;
		min-width: 16px;
		padding: 4px 0;
		text-align: center;
		width: auto;
	}

	div#content.build table.troop_details > tbody.units > tr > td input.text,
	div#content.a2b table.troop_details > tbody.units > tr > td input.text {
		min-height: 36px;
		padding: 2px 0;
		text-align: center;
		width: 100%;
	}

	/* Info rows (arrival, upkeep, bounty, catapult targets...). */
	div#content.build table.troop_details > tbody:not(.units) > tr > th,
	div#content.a2b table.troop_details > tbody:not(.units) > tr > th {
		flex: 0 0 auto;
		overflow-wrap: normal;
		padding: 6px;
		text-align: left;
		width: auto;
	}

	div#content.build table.troop_details > tbody:not(.units) > tr > td,
	div#content.a2b table.troop_details > tbody:not(.units) > tr > td {
		flex: 1 1 0;
		padding: 6px;
	}

	div#content.build table.troop_details div.in,
	div#content.build table.troop_details div.at,
	div#content.a2b table.troop_details div.in,
	div#content.a2b table.troop_details div.at {
		float: none;
		text-align: left;
	}

	div#content.build table.troop_details div.abort,
	div#content.build table.troop_details div.abort a {
		display: inline-block;
		min-height: 32px;
	}

	/* --- Rally point farm list (16_99) ----------------------------------- */

	div#content.build div#raidList {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	div#content.build div#raidList table {
		table-layout: fixed;
		width: 100% !important;
	}

	div#content.build div#raidList td,
	div#content.build div#raidList th {
		overflow-wrap: anywhere;
		padding: 4px 2px;
	}

	div#content.build div#raidList input[type="checkbox"] {
		height: 24px;
		width: 24px;
	}

	div#content.build div#raidList a,
	div#content.build div#raidList button {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* --- Marketplace: send resources (17) -------------------------------- */

	div#content.build div#build table#send_select,
	div#content.build div#build table#target_select,
	div#content.build div#build table#target_validate {
		display: block;
		float: none;
		margin: 0 0 12px;
		width: 100% !important;
	}

	div#content.build div#build table#send_select > tbody,
	div#content.build div#build table#target_select > tbody,
	div#content.build div#build table#target_validate > tbody {
		display: block;
		width: 100%;
	}

	div#content.build div#build table#send_select tr {
		align-items: center;
		border-bottom: 1px solid #e3e3e3;
		display: grid;
		gap: 6px;
		grid-template-columns: 32px 64px minmax(0, 1fr) auto;
		padding: 4px 0;
	}

	div#content.build div#build table#send_select td {
		display: block;
		padding: 0;
		white-space: nowrap;
		width: auto;
	}

	div#content.build div#build table#send_select td.ico a {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 32px;
	}

	div#content.build div#build table#send_select td.val input.text {
		height: 44px;
		width: 100%;
	}

	div#content.build div#build table#send_select td.max a {
		align-items: center;
		background: linear-gradient(#fff, #ececec);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: inline-flex;
		justify-content: center;
		min-height: 44px;
		min-width: 64px;
		padding: 4px 8px;
	}

	div#content.build div#build table#target_select tr,
	div#content.build div#build table#target_validate tr {
		display: block;
	}

	div#content.build div#build table#target_select td {
		display: block;
		padding: 6px 0;
		text-align: left;
		width: auto;
	}

	div#content.build div#build table#target_select td.vil *,
	div#content.build div#build table#target_select td.coo * {
		float: none;
		margin: 0;
	}

	div#content.build div#build table#target_select td.vil span,
	div#content.build div#build table#target_select td.coo span {
		display: block;
		font-weight: bold;
		margin-bottom: 4px;
	}

	div#content.build div#build table#target_select td.vil input.text {
		height: 44px;
		width: 100%;
	}

	div#content.build div#build table#target_select td.coo {
		align-items: center;
		display: grid;
		gap: 6px;
		grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
	}

	div#content.build div#build table#target_select td.coo span {
		margin: 0;
	}

	div#content.build div#build table#target_select td.coo input.text {
		height: 44px;
		width: 100%;
	}

	div#content.build div#build table#target_validate th,
	div#content.build div#build table#target_validate td {
		display: inline-block;
		padding: 4px 6px 4px 0;
		vertical-align: top;
	}

	div#content.build div#build table#target_validate th {
		width: 38%;
	}

	/* Merchants on the way (tables.traders): label + values stacked. */
	div#content.build table.traders {
		table-layout: fixed;
		width: 100% !important;
	}

	div#content.build table.traders td,
	div#content.build table.traders th {
		overflow-wrap: anywhere;
	}

	/* Buy / offer / NPC / trade routes. */
	div#content.build table#sell,
	div#content.build table#bid_select,
	div#content.build table#search_select,
	div#content.build table#ratio_select,
	div#content.build table#range,
	div#content.build table#sell_overview,
	div#content.build table#npc,
	div#content.build table#tradeRouteForm,
	div#content.build table.options {
		table-layout: auto;
		width: 100% !important;
	}

	div#content.build table#sell td,
	div#content.build table#sell th,
	div#content.build table#sell_overview td,
	div#content.build table#sell_overview th,
	div#content.build table#range td,
	div#content.build table#range th,
	div#content.build table#npc td,
	div#content.build table#npc th {
		overflow-wrap: anywhere;
		padding: 4px 3px;
	}

	div#content.build table#sell input.text,
	div#content.build table#npc input.text,
	div#content.build table#npc input[type="text"] {
		width: 100%;
	}

	div#content.build input[type="range"] {
		height: 32px;
		touch-action: pan-y;
		width: 100%;
	}

	/* --- Palace / residence expansion, hero land (cox/coy/pi columns) --- */

	div#content.build table#expansion,
	div#content.build table#oases,
	div#content.build table#own,
	div#content.build table#near,
	div#content.build table#show_artefacts,
	div#content.build table#art_details,
	div#content.build table#distribution,
	div#content.build table#building_contract,
	div#content.build table#demolition_type {
		table-layout: auto;
		width: 100% !important;
	}

	div#content.build table#expansion td,
	div#content.build table#oases td,
	div#content.build table#own td,
	div#content.build table#near td,
	div#content.build table#show_artefacts td,
	div#content.build table#art_details td,
	div#content.build table#distribution td {
		overflow-wrap: anywhere;
		padding: 4px 3px;
	}

	/* --- Send troops (a2b.php) ------------------------------------------- */

	/* Unit inputs: 2-column grid (3 on wider screens), grouped like the
	 * Travian columns: infantry, cavalry, siege, chiefs/settlers, hero. */
	div#content.a2b table#troops {
		border: 0;
		display: block;
		margin: 8px 0 14px;
		width: 100% !important;
	}

	div#content.a2b table#troops > tbody {
		display: grid;
		gap: 6px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	div#content.a2b table#troops > tbody > tr {
		display: contents;
	}

	div#content.a2b table#troops > tbody > tr > td {
		align-items: center;
		background: #fff;
		border: 1px solid #c0c0c0;
		border-radius: 4px;
		box-sizing: border-box;
		display: flex;
		gap: 4px;
		min-width: 0;
		order: 2;
		padding: 4px 6px;
		width: auto;
	}

	div#content.a2b table#troops > tbody > tr > td.column-first {
		order: 1;
	}

	div#content.a2b table#troops > tbody > tr > td.regular {
		order: 3;
	}

	div#content.a2b table#troops > tbody > tr > td.column-last {
		order: 4;
	}

	div#content.a2b table#troops > tbody > tr > td:empty {
		display: none;
	}

	div#content.a2b table#troops td img.unit {
		flex: 0 0 auto;
	}

	div#content.a2b table#troops td input.text {
		flex: 1 1 0;
		height: 44px;
		min-width: 0;
		text-align: center;
		width: 100%;
	}

	div#content.a2b table#troops td input.text[disabled] {
		background: #f3f3f3;
	}

	div#content.a2b table#troops td > a,
	div#content.a2b table#troops td > span.none {
		align-items: center;
		display: inline-flex;
		flex: 0 0 auto;
		font-size: 12px;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
	}

	/* Target: attack type as big options, then village name / x|y. */
	div#content.a2b table#coords {
		display: block;
		width: 100% !important;
	}

	div#content.a2b table#coords > tbody {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	div#content.a2b table#coords > tbody > tr:not([hidden]) {
		display: contents;
	}

	div#content.a2b table#coords td {
		box-sizing: border-box;
		display: block;
		order: 2;
		padding: 0;
		text-align: left;
		white-space: normal;
		width: auto;
	}

	div#content.a2b table#coords td.sel {
		order: 1;
	}

	div#content.a2b table#coords td.sel label {
		align-items: center;
		background: linear-gradient(#fff, #ececec);
		border: 1px solid #b4b4b4;
		border-radius: 4px;
		box-sizing: border-box;
		display: flex;
		font-size: 14px;
		font-weight: bold;
		min-height: 48px;
		padding: 8px 10px;
	}

	div#content.a2b table#coords td.sel label:has(input:checked) {
		background: #e8f5dc;
		border-color: #71a832;
	}

	div#content.a2b table#coords td.sel label:has(input:disabled) {
		color: #999;
		font-weight: normal;
	}

	div#content.a2b table#coords td.vil span,
	div#content.a2b table#coords td.target span {
		font-weight: bold;
	}

	div#content.a2b table#coords td.vil {
		margin-top: 8px;
	}

	div#content.a2b table#coords td.vil span {
		display: block;
		margin-bottom: 4px;
	}

	div#content.a2b table#coords td.vil input.text {
		height: 44px;
		width: 100%;
	}

	div#content.a2b table#coords td.or {
		color: #777;
	}

	div#content.a2b table#coords td.target {
		align-items: center;
		display: grid;
		gap: 6px;
		grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr);
	}

	div#content.a2b table#coords td.target input.text {
		height: 44px;
		width: 100%;
	}

	div#content.a2b table#coords td.rvian-a2b-preload button {
		min-height: 44px;
		width: 100%;
	}

	/* Confirmation: short info + catapult targets. */
	div#content.a2b table#short_info {
		table-layout: fixed;
		width: 100% !important;
	}

	div#content.a2b table#short_info th,
	div#content.a2b table#short_info td {
		overflow-wrap: anywhere;
		padding: 4px;
	}

	div#content.a2b table.troop_details select.dropdown {
		width: 100%;
	}

	div#content.a2b table.troop_details div.in {
		font-weight: bold;
	}

	div#content.a2b p.btn {
		margin: 12px 0;
	}
}

@media screen and (min-width: 480px) and (max-width: 1023px) {
	div#content.a2b table#troops > tbody {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}