/* FLIGHT MAP (class.mwlFlightMap.php): a globe or flat world map with the airports as dots and the visited countries
   filled. The map colours are custom properties read by js/flightmap, one set for the light theme and one for the
   dark (the same three ways as css_main: the OS setting, data-theme="dark", data-theme="light"). Everything around
   the map uses css_main's theme tokens. */

/* The toolbar of the Airports, Countries and Routes reports (psumToolbar in p_summary.php): back to the analysis
   page, the year and the table filter, in the modern look of the Airports page (10px radius). Everything is as high
   as the site's buttons (css_button's --btn-height, Magnus 2026-10-30). The text fields override css_main's own
   rules, so every state is set here. */
.fmap-toolbar
{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px 16px;
	margin:4px 0 14px 0;
	font-family:"Exo 2","Helvetica Neue", Verdana, Arial, sans-serif;
	font-size:14px;
}

/* Back to the analysis page: a frameless link, as Cancel in the modern look */
a.fmap-tb-btn,
a.fmap-tb-btn:visited
{
	display:inline-flex;
	align-items:center;
	gap:0.5em;
	box-sizing:border-box;
	height:var(--btn-height, 32px);
	padding:0 4px;
	color:var(--text-neutral-11);
	line-height:1;
	text-decoration:none;
	white-space:nowrap;
}

a.fmap-tb-btn:hover
{
	color:var(--text-brand);
	text-decoration:none;
}

a.fmap-tb-btn:focus-visible
{
	outline:2px solid var(--border-info-4);
	outline-offset:2px;
}

/* The organization's map page (c_map.php): the frame around title, toolbar, map and table */
.fmap-page
{
	max-width:1100px;
	margin:0 auto;
	padding:0 max(16px, 3vw) 24px max(16px, 3vw);
	box-sizing:border-box;
}

/* The same space between the title's icon and text as on the lobby */
.fmap-page .cText h1 i
{
	margin-right:0.8em;
}

.fmap-page table#c_map_table
{
	width:100%;
}

/* The public References page (club_ref.php): the globe of the organizations' home airports in the centred page */
.fmap-refs
{
	max-width:900px;
	margin:16px auto 0 auto;
	text-align:left;
}

/* The organization's map (c_map.php): Airports | Routes | Countries as one segmented control of links */
.fmap-tb-switch
{
	display:inline-flex;
	box-sizing:border-box;
	height:var(--btn-height, 32px);
	border:1px solid var(--border-neutral-4);
	border-radius:10px;
	background:var(--bg-neutral-1);
	overflow:hidden;
}

.fmap-tb-switch a,
.fmap-tb-switch a:visited
{
	display:inline-flex;
	align-items:center;
	padding:0 16px;
	color:var(--text-neutral-11);
	text-decoration:none;
	white-space:nowrap;
}

.fmap-tb-switch a + a
{
	border-left:1px solid var(--border-neutral-4);
}

.fmap-tb-switch a:hover
{
	color:var(--text-brand);
	text-decoration:none;
}

.fmap-tb-switch a.active,
.fmap-tb-switch a.active:hover
{
	background:var(--bg-brand);
	color:var(--text-neutral-1);
	font-weight:600;
}

.fmap-tb-switch a:focus-visible
{
	outline:2px solid var(--border-info-4);
	outline-offset:-2px;
}

/* The pickers (year, aircraft): js/list-picker (css/select-picker) in the toolbar's look, with a chevron, each in a
   small GET form (mwlFlightMap::pickerForm). The list shows the first row, its divider and at most ten rows (a row
   is 36px), then scrolls. */
.fmap-toolbar form.fmap-tb-picker
{
	margin:0;
}

.fmap-toolbar div.selectpicker
{
	width:auto;
}

.fmap-toolbar div.selectpicker::after
{
	content:"";
	position:absolute;
	right:15px;
	top:calc(var(--btn-height, 32px) / 2 - 5px);   /* the chevron in the middle of the field */
	width:6px;
	height:6px;
	border-right:1.5px solid var(--text-neutral-9);
	border-bottom:1.5px solid var(--text-neutral-9);
	transform:rotate(45deg);
	pointer-events:none;
}

.fmap-toolbar div.selectpicker input.listPickerText,
.fmap-toolbar div.selectpicker input.listPickerText:hover
{
	box-sizing:border-box;
	width:11em;
	height:var(--btn-height, 32px);
	margin:0;
	padding:0 34px 0 12px;
	font:inherit;
	letter-spacing:normal;
	color:var(--text-neutral-13);
	background-color:var(--bg-neutral-1);
	border:1px solid var(--border-neutral-4);
	border-radius:10px;
	cursor:pointer;
}

.fmap-toolbar div.selectpicker input.listPickerText:hover
{
	border-color:var(--border-neutral-8);
}

.fmap-toolbar div.selectpicker input.listPickerText:focus
{
	border-color:var(--border-info-4);
	box-shadow:0 0 6px 2px var(--bg-info-4);
	outline:0;
	transition:none;
	cursor:text;
}

/* Always under the field: js/list-picker opens a list upwards (inline top/bottom) when the window has more room
   above, and there it went under the page's advert banner. These pages scroll instead. */
.fmap-toolbar div.selectpicker div.picker-options
{
	top:calc(var(--btn-height, 32px) + 4px) !important;
	bottom:auto !important;
	right:auto;
	width:max-content;
	min-width:100%;
	max-height:calc(11 * 36px + 15px + 10px);   /* "All years", the divider, ten years, padding and border */
	overflow-y:auto;
	padding:4px 0;
	box-sizing:border-box;
	border:1px solid var(--border-neutral-4);
	border-radius:10px;
}

.fmap-toolbar div.picker-options .picker-option
{
	padding:8px 14px;
	line-height:20px;
	white-space:nowrap;
	font-variant-numeric:tabular-nums;
}

/* The filter: the label is the rounded frame with the icon inside, the text field has no frame of its own */
label.fmap-tb-filter
{
	display:flex;
	align-items:center;
	gap:10px;
	margin-left:auto;   /* to the right end of the toolbar */
	flex:0 1 300px;
	min-width:180px;
	box-sizing:border-box;
	height:var(--btn-height, 32px);
	padding:0 14px;
	background:var(--bg-neutral-1);
	border:1px solid var(--border-neutral-4);
	border-radius:10px;
	color:var(--text-neutral-8);
	cursor:text;
	transition:border-color 0.15s, box-shadow 0.15s;
}

label.fmap-tb-filter:hover
{
	border-color:var(--border-neutral-8);
}

label.fmap-tb-filter:focus-within
{
	border-color:var(--border-info-4);
	box-shadow:0 0 6px 2px var(--bg-info-4);
}

label.fmap-tb-filter:focus-within i
{
	color:var(--border-info-4);
}

.fmap-toolbar .fmap-tb-filter input[type=text],
.fmap-toolbar .fmap-tb-filter input[type=text]:hover,
.fmap-toolbar .fmap-tb-filter input[type=text]:focus
{
	flex:1;
	min-width:0;
	height:100%;
	margin:0;
	padding:0;
	border:0;
	outline:0;
	box-shadow:none;
	background:transparent;
	color:var(--text-neutral-12);
	font:inherit;
	letter-spacing:normal;
	transition:none;
}

.fmap-toolbar .fmap-tb-filter input[type=text]::placeholder
{
	color:var(--text-neutral-8);
	opacity:1;
}

.fmap-frame
{
	margin:0 0 16px 0;
	font-family:"Exo 2","Helvetica Neue", Verdana, Arial, sans-serif;
}

.fmap
{
	/* light map */
	--fmap-ocean:#dce8f3;
	--fmap-graticule:rgba(51, 102, 153, 0.10);
	--fmap-land:#fbfbf8;
	--fmap-border:#c3c9d1;
	--fmap-visited:#8fb2d9;
	--fmap-visited-hover:#5f8fc4;
	--fmap-visited-border:#336699;
	--fmap-edge:#b9c6d4;
	--fmap-dot:#e07b00;
	--fmap-dot-ring:#ffffff;
	--fmap-route:rgba(51, 102, 153, 0.7);
	--fmap-route-hover:#e07b00;

	position:relative;
	width:100%;
	aspect-ratio:16 / 10;
	max-height:70vh;
	min-height:240px;
	background:var(--bg-neutral-1);
	border:1px solid var(--border-neutral-3);
	border-radius:8px;
	overflow:hidden;
	box-sizing:border-box;
}

@media screen and (prefers-color-scheme: dark)
{
	:root:not([data-theme="light"]) .fmap
	{
		--fmap-ocean:#142030;
		--fmap-graticule:rgba(255, 255, 255, 0.05);
		--fmap-land:#2a2e35;
		--fmap-border:#414852;
		--fmap-visited:#3a6aa3;
		--fmap-visited-hover:#5288c8;
		--fmap-visited-border:#7aa5d8;
		--fmap-edge:#3a3e43;
		--fmap-dot:#ffb547;
		--fmap-dot-ring:#1b1d20;
		--fmap-route:rgba(122, 165, 216, 0.75);
		--fmap-route-hover:#ffb547;
	}
}

@media screen
{
	[data-theme="dark"] .fmap
	{
		--fmap-ocean:#142030;
		--fmap-graticule:rgba(255, 255, 255, 0.05);
		--fmap-land:#2a2e35;
		--fmap-border:#414852;
		--fmap-visited:#3a6aa3;
		--fmap-visited-hover:#5288c8;
		--fmap-visited-border:#7aa5d8;
		--fmap-edge:#3a3e43;
		--fmap-dot:#ffb547;
		--fmap-dot-ring:#1b1d20;
		--fmap-route:rgba(122, 165, 216, 0.75);
		--fmap-route-hover:#ffb547;
	}
}

/* Full screen: the whole screen, no frame */
.fmap:fullscreen
{
	width:100%;
	height:100%;
	max-height:none;
	aspect-ratio:auto;
	border:0;
	border-radius:0;
}

.fmap canvas
{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	display:block;
	touch-action:none;
	cursor:grab;
}

.fmap canvas:active
{
	cursor:grabbing;
}

/* The number of airports or countries, top left */
.fmap-hud
{
	position:absolute;
	left:12px;
	top:10px;
	padding:6px 10px;
	border-radius:6px;
	background:var(--bg-neutral-1);
	opacity:0.92;
	color:var(--text-neutral-13);
	pointer-events:none;
	font-variant-numeric:tabular-nums;
}

.fmap-hud span
{
	display:block;
	font-size:24px;
	font-weight:600;
	line-height:1;
}

.fmap-hud small
{
	display:block;
	margin-top:3px;
	font-size:11px;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:var(--text-neutral-9);
}

/* Globe/map, zoom, reset and full screen, top right. css_button frames every button in every state, so all are
   reset here. The full screen button is hidden where the browser cannot do it. */
.fmap-tools
{
	position:absolute;
	right:10px;
	top:10px;
	display:flex;
	flex-direction:column;
	gap:6px;
}

/* The zoom buttons: the site's standard button (css_button), only made square for one icon */
.fmap .fmap-btn
{
	width:32px;
	padding:0;
	margin:0;
	font-size:13px;
}

.fmap .fmap-btn[hidden]
{
	display:none;
}

/* The airport or country under the pointer */
.fmap-tip
{
	position:absolute;
	max-width:260px;
	padding:8px 10px;
	border:1px solid var(--border-neutral-3);
	border-radius:6px;
	background:var(--bg-neutral-1);
	color:var(--text-neutral-13);
	box-shadow:0 4px 14px rgba(0, 0, 0, 0.18);
	font-size:13px;
	line-height:1.35;
	pointer-events:none;
	z-index:2;
}

.fmap-tip[hidden]
{
	display:none;
}

.fmap-tip-title
{
	font-weight:600;
}

/* Extra lines under an airport, e.g. the organizations based there (the public References map) */
.fmap-tip-line
{
	margin-top:2px;
}

.fmap-tip-codes,
.fmap-tip-figures
{
	color:var(--text-neutral-9);
	font-variant-numeric:tabular-nums;
}

.fmap-tip .fi
{
	margin-right:6px;
}

.fmap-hint
{
	margin:6px 0 0 0;
	color:var(--text-neutral-9);
	font-size:12px;
}

@media (max-width:640px)
{
	.fmap
	{
		aspect-ratio:4 / 3;
	}
}