/* ==========================================================================
   Elite Avengers — Responsive content layer for in-game pages.

   Mechanisms:
     (a) fluid defaults  - neutralise fixed widths, fluid media/inputs
     (b) .ea-stack       - collapse a side-by-side layout table into stacked rows
     (c) .ea-row/.ea-col - lightweight Bootstrap-style grid (stacks when narrow)
     (d) .ea-scroll-x    - horizontal scroll for genuine wide data tables
   ========================================================================== */

/* --- Grid base (applies at all widths; .ea-row is a row on wide screens) --- */
.ea-row {
	display: flex;
	flex-wrap: wrap;
}

.ea-row>.ea-col {
	flex: 1 1 0;
	min-width: 0;
}

/* --- Wide data-table escape hatch (usable at any width) --- */
.ea-scroll-x {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
}

.ea-scroll-x>table {
	min-width: max-content;
}

/* --- Forum signatures (applies at all widths) --- */
.signature img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Narrow viewport (phones, tablets, narrowed desktop windows)
   ========================================================================== */
@media (max-width: 768px) {

	/* (a) Fluid defaults — stop fixed widths from forcing horizontal scroll. */
	table[width] {
		max-width: 100% !important;
	}

	td[width],
	th[width] {
		max-width: 100% !important;
	}

	table {
		table-layout: auto;
		max-width: 100%;
	}

	td,
	th {
		overflow-wrap: break-word;
	}

	img {
		max-width: 100%;
	}

	img[src*="rankbar.php"] {
		max-width: 100%;
		height: auto;
	}

	.ea-overlay-caption {
		position: static !important;
		top: auto !important;
	}

	input[type="text"],
	input[type="password"],
	input[type="number"],
	input[type="email"],
	input[type="search"],
	input[type="tel"],
	input[type="url"],
	select,
	textarea {
		max-width: 100%;
		box-sizing: border-box;
		font-size: 16px;
	}

	button,
	input[type="submit"],
	input[type="button"],
	input[type="reset"] {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* Submit/action buttons (e.g. crimes "Commit!", GTA Confirm/Cancel) */
	input[type="submit"],
	input[type="button"] {
		font-size: 13px;
		padding: 5px 12px;
	}

	input[type="radio"],
	input[type="checkbox"] {
		width: 16px;
		height: 16px;
		margin: 0 4px 0 0;
		vertical-align: middle;
	}

	input[type="radio"]+label,
	input[type="checkbox"]+label {
		display: inline-block;
		vertical-align: middle;
		padding: 2px 4px;
		line-height: 1.3;
	}

	input.normalRadio+label {
		width: calc(100% - 30px);
		box-sizing: border-box;
		padding: 3px 4px;
		cursor: pointer;
	}

	input.normalRadio:checked+label {
		color: #ffffff;
		font-weight: bold;
	}

	tr:has(> td > input.normalRadio)>td {
		border-bottom: 1px solid #333;
	}

	tr:has(> td > input.normalRadio:checked)>td {
		background: rgba(204, 0, 0, 0.12);
	}

	#gymimg {
		width: 96px !important;
		height: auto !important;
		max-width: none !important;
	}

	td[rowspan] {
		width: auto !important;
	}

	td[width="120"][valign="top"],
	td[valign="top"][style*="width: 120px"],
	td[width="120"][style*="background-color: #404040"] {
		min-width: 120px !important;
	}

	/* Forum avatar: keep square, never distort. */
	td[valign="top"] img[width="100"][height="100"] {
		width: 100px !important;
		height: 100px !important;
		max-width: none !important;
	}

	.cLogo1 {
		position: relative;
		display: inline-block;
		width: 100px;
		height: 100px;
	}

	#boxingring {
		width: 120px !important;
		min-width: 120px;
		height: 179px;
		background-size: contain !important;
		background-position: center !important;
		background-repeat: no-repeat !important;
	}

	/* (b) Bootstrap-style stacking */
	table.ea-stack,
	table.ea-stack>tbody,
	table.ea-stack>tbody>tr,
	table.ea-stack>tbody>tr>td,
	table.ea-stack>tbody>tr>th {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
	}

	.ea-safehouse,
	.ea-safehouse>tbody,
	.ea-safehouse>tbody>tr,
	.ea-safehouse>tbody>tr>td,
	.ea-safehouse>tbody>tr>th,
	.ea-jail,
	.ea-jail>tbody,
	.ea-jail>tbody>tr,
	.ea-jail>tbody>tr>td,
	.ea-jail>tbody>tr>th {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
	}

	.ea-safehouse td:empty,
	.ea-jail td:empty {
		display: none;
	}

	.ea-safehouse img,
	.ea-jail img {
		display: block;
		margin: 0 auto;
	}

	/* (c) Grid: collapse columns to full width (stack). */
	.ea-row {
		display: block;
	}

	.ea-row>.ea-col {
		width: 100%;
	}

	.ea-oj-map img {
		max-width: none !important;
	}

	.ea-territory-map {
		width: auto !important;
		min-width: max-content !important;
		max-width: none !important;
	}

	.ea-territory-map td {
		width: 50px !important;
		height: 50px !important;
		min-width: 50px !important;
		min-height: 50px !important;
		max-width: 50px !important;
		max-height: 50px !important;
		padding: 0 !important;
	}

	.ea-territory-map td img {
		max-width: none !important;
		width: 50px !important;
		height: 50px !important;
	}

	.ea-territory-layout>tbody>tr.ea-territory-map-row {
		display: flex;
		flex-direction: column;
	}

	.ea-territory-layout>tbody>tr.ea-territory-map-row>td {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
	}

	.ea-territory-layout>tbody>tr.ea-territory-map-row>td[valign="top"][width="320"],
	.ea-territory-layout>tbody>tr.ea-territory-map-row>td[width="320"] {
		width: 100% !important;
		padding-left: 0 !important;
	}
}

/* --- Finer pass for small phones --- */
@media (max-width: 480px) {

	td,
	th {
		padding: 4px 6px;
	}

	#gymimg {
		width: 72px !important;
	}
}