/*
 * Dynamic pit map (pit_map.html, user_fsgevents pi1 EVENT_PITMAP action).
 * Mobile-first, pattern based on the EC team status pit grid
 * (EXT:fsg/Resources/Public/CSS/EC/TeamStatus/Backend/Backend.css):
 * one row per pit number with the boxes A/B/C side by side like the pit lane.
 * Sections (two pit rows each) are fenced in reality - rendered as tinted
 * background groups (no frames), the gap in between = fence.
 * Left border color marks the vehicle class: cyan = DV team, yellow = EV only.
 * Dark mode via html[data-theme="dark"] (fsgTheme bootstrap snippet).
 */

.fsg-pitmap {
	--fpm-bg: #ffffff;
	--fpm-surface: #eef0f2;
	--fpm-text: #1d1d1b;
	--fpm-muted: #6b6f76;
	--fpm-border: #bfbfbf;
	max-width: 952px;
	color: var(--fpm-text);
	line-height: 1.3;
}

html[data-theme="dark"] .fsg-pitmap {
	--fpm-bg: #2A2B2E;
	--fpm-surface: #202124;
	--fpm-text: #E7E9EC;
	--fpm-muted: #9BA0A8;
	--fpm-border: #3A3D42;
}

/* legend (with the filter input in front)
   (defensive input sizing against global #maincol input rules) */
.fsg-pitmap-legend {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	margin: 0 0 10px 0;
}
/* each legend unit (chip + text, pit size) stays together as one block */
.fsg-pitmap-legend > span {white-space: nowrap;}
.fsg-pitmap input.fsg-pitmap-filter {
	display: inline-block !important;
	width: 200px !important;
	min-height: 32px;
	padding: 0 10px;
	border: 1px solid var(--fpm-border);
	border-radius: 6px;
	background-color: var(--fpm-bg);
	color: var(--fpm-text);
	font-size: 14px;
}
.fsg-pitmap-chip {
	display: inline-block;
	min-width: 30px;
	padding: 1px 7px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
.fsg-pitmap-chip-dv {
	background-color: var(--fsg_cyan_dvc, #0088B6);
	color: #ffffff;
}
.fsg-pitmap-chip-ev {
	background-color: var(--fsg_yellow_ev, #FFDD00);
	color: #1d1d1b;
}

/* fence sections (two pit rows each): tinted background instead of a frame,
   the gap between the sections is the fence (no passage) */
.fsg-pitmap-section {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 5px;
	border-radius: 8px;
	background-color: var(--fpm-surface);
	margin: 0 0 12px 0;
}

.fsg-pitmap-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 4px;
}

/* pit box: no outline, just the card on the section background plus the
   class color bar (defensive link styling against global #maincol a rules) */
.fsg-pitmap-pit {
	display: flex;
	flex-direction: column;
	gap: 0;
	min-height: 40px;
	padding: 3px 8px;
	border: none;
	border-left: 5px solid var(--fpm-border);
	border-radius: 5px;
	background-color: var(--fpm-bg);
	color: var(--fpm-text) !important;
	font-size: 14px;
	text-align: left;
	text-decoration: none !important;
}
a.fsg-pitmap-pit:hover {
	outline: 1px solid var(--fsg_blue, #0069B4);
	outline-offset: -1px;
}

/* vehicle class colors (left border): DV team vs EV-only team */
.fsg-pitmap-dv {border-left-color: var(--fsg_cyan_dvc, #0088B6);}
.fsg-pitmap-ev {border-left-color: var(--fsg_yellow_ev, #FFDD00);}

/* filter states: matches get a green frame; sections without any match are
   hidden by default, or just dimmed with "show all sections" checked (to see
   where a pit sits within the whole pit lane) */
.fsg-pitmap-pit.fsg-pitmap-hit {
	box-shadow: 0 0 0 2px var(--fsg_green, #76B82A);
}
.fsg-pitmap-section.fsg-pitmap-nohit {opacity: 0.35;}
.fsg-pitmap-section.fsg-pitmap-hidden {display: none;}

/* only visible while a filter is active (.fsg-pitmap-filtered set by JS);
   !important counters the global #maincol label display rule */
.fsg-pitmap-showall {
	display: none !important;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	cursor: pointer;
}
.fsg-pitmap.fsg-pitmap-filtered .fsg-pitmap-showall {display: inline-flex !important;}
.fsg-pitmap-showall input[type="checkbox"] {
	margin: 0;
	accent-color: var(--fsg_blue, #0069B4);
}

.fsg-pitmap-emptypit {
	background-color: transparent;
	opacity: 0.6;
}
.fsg-pitmap-emptypit .fsg-pitmap-team {color: var(--fpm-muted);}

.fsg-pitmap-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	width: 100%;
}
.fsg-pitmap-code {
	font-size: 15px;
	font-weight: bold;
	white-space: nowrap;
}
.fsg-pitmap-car {
	font-size: 13px;
	font-weight: bold;
	white-space: nowrap;
	margin-left: auto;
}
.fsg-pitmap-team {
	font-size: 12px;
	overflow-wrap: anywhere;
}

/* phones: keep A/B/C side by side (like the pit lane), just compact boxes */
@media (max-width: 700px) {
	/* legend units flow into lines as space allows (they never break inside);
	   tighter gaps to keep the legend flat on phones */
	.fsg-pitmap-legend {gap: 5px 10px;}
	.fsg-pitmap-section {
		gap: 3px;
		padding: 3px;
		margin-bottom: 8px;
	}
	.fsg-pitmap-row {gap: 3px;}
	.fsg-pitmap-pit {
		min-height: 34px;
		padding: 2px 5px;
		border-left-width: 4px;
	}
	.fsg-pitmap-head {gap: 4px;}
	.fsg-pitmap-code {font-size: 13px;}
	.fsg-pitmap-car {font-size: 11px;}
	.fsg-pitmap-team {
		font-size: 10px;
		line-height: 1.2;
	}
}