/*
* custom css for the site
*/

/** biome-ignore-all lint/style/noDescendingSpecificity: <css is tested> */
/** biome-ignore-all lint/complexity/noImportantStyles: <bootstrap default handling> */

html {
	position: relative;
	min-height: 100%;
	scroll-padding-top: 60px; /* match your navbar height */
	scroll-behavior: smooth;
}

body {
	/* Margin bottom by footer height */
	margin-bottom: 80px;
}

/* big background watermark globe */
body::before {
	content: "";
	background-image: url("/img/bi-globe.svg");
	background-repeat: no-repeat;
	background-size: contain;
	filter: blur(5px);
	opacity: 0.015;
	position: fixed;
	top: 30px;
	left: -10vmax;
	width: 80vmax;
	height: 80vmax;
	z-index: -1;
	pointer-events: none;
}

[data-bs-theme="dark"] body::before {
	opacity: 0.1;
}

/*
* fix leaflet 2.0 popup overflow bug
*/
.leaflet-popup-content {
	overflow-y: auto;
}

/* 
* bootstrap css additions and changes
*/

/* dark mode background customization */
[data-bs-theme="dark"] {
	--bs-body-bg: #2c363e;
}

.highlight-row {
	background-color: #ffe15aa6;
}

[data-bs-theme="dark"] .highlight-row {
	background-color: #9b98009d;
}

.table-transparent-background {
	--bs-table-bg: transparent !important;
}

/* navbar dropdown align left + no margin to loose hover */
.nav-item.dropdown > .dropdown-menu {
	/* navbar hover no auto open */
	right: auto;
	left: 0;
	margin-top: 0px;
}

/*
* fix dropdown behavior in navbar
*/
.nav-item.dropdown:hover > .dropdown-menu-end {
	/* navbar hover no auto open, align end */
	right: auto;
	left: 0;
	margin-top: 0px;
}

@media (min-width: 992px) {
	/* navbar hover auto open */
	.nav-item.dropdown > .dropdown-menu {
		right: auto;
		left: 0;
		margin-top: 0px;
	}

	/* navbar hover auto open */
	.nav-item.dropdown:hover > .dropdown-menu-auto {
		display: block;
		right: auto;
		left: 0;
		margin-top: 0px;
	}

	/* navbar hover auto open align end */
	.nav-item.dropdown > .dropdown-menu-end {
		right: 0;
		left: auto;
		margin-top: 0px;
	}

	/* navbar hover auto open align end */
	.nav-item.dropdown:hover > .dropdown-menu-end {
		right: 0;
		left: auto;
		margin-top: 0px;
	}
}

/* navbar dropdown overlap */
.navbar-nav .dropdown-menu-overlap {
	position: absolute;
}

.dropdown-item-text {
	white-space: nowrap;
}

/* navbar placeholder */
.login-placeholder {
	min-width: 71px;
}

.login-field {
	width: 10em;
}

/* custom aspect ratio */
.ratio-9x16 {
	--bs-aspect-ratio: 177.7777777778%;
}

.ratio-1x1-25 {
	--bs-aspect-ratio: 125%;
}

/* the autocomplete container must be positioned relative:*/
.autocomplete {
	position: relative;
	display: inline-block;
}

.main-search {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.autocomplete-items {
	position: absolute;
	border: 1px solid #d4d4d4;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container + clear button:*/
	top: 100%;
	left: 0;
	right: 0;
	/* enable scrolling */
	height: auto;
	max-height: 90vh;
	overflow-x: hidden;
}

.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #fff;
	border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
	background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
	background-color: DodgerBlue !important;
	color: #ffffff;
}

.poll-chart {
	position: relative;
	height: 150px;
}

/* table toolbar input group buttons */
.inline-input-group {
	width: auto !important;
	float: right;
}

.icon-link {
	align-items: unset;
}

.dropdown-scrollable {
	height: auto;
	max-height: 250px;
	overflow-x: hidden;
}

/* searchable select dropdown (replacement for bootstrap-select) */
/*
.search-select {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}
*/

/* fixed width for the shooter compare dropdown (other uses size to their content) */
.search-select-wide {
	width: 18rem;
}

.search-select-wide > .search-select {
	width: 100%;
}

.search-select > .dropdown-toggle {
	display: inline-flex;
	align-items: center;
	width: 100%;
}

/* the chevron is the form-select background image; hide the
   dropdown-toggle border triangle that would render next to it */
.search-select > .dropdown-toggle::after {
	content: none;
}

.search-select > .dropdown-menu {
	width: max-content;
	min-width: 100%;
	max-width: 18rem;
}

.search-select .search-select-value {
	/* flex: 1 1 auto; */
	min-width: 0;
}

/* the placeholder text is not selectable when dragging over the page */
.search-select .search-select-value.search-select-placeholder {
	user-select: none;
}

.search-select-subtext {
	display: block;
	font-size: 0.85em;
	opacity: 0.75;
}

.search-select-list {
	max-height: 240px;
	overflow-y: auto;
}

/* make bootstrap-table adhere to bootstrap text color */
.bootstrap-table tbody td,
.bootstrap-table thead th {
	color: var(--bs-body-color);
}

/* make table detail + column static size */
.bootstrap-table .fixed-table-container .table thead th.detail {
	width: 30px;
	min-width: 30px;
}

.rankings .bootstrap-table .fixed-table-toolbar {
	padding-right: 5px;
	border-right: 1px solid;
	border-left: 1px solid;
	border-color: var(--bs-border-color);
}

.bootstrap-table .fixed-table-toolbar .bs-bars {
	margin-top: 5px;
	margin-bottom: 0px;
}

.bootstrap-table .fixed-table-toolbar .search {
	margin-top: 5px;
	margin-bottom: 0px;
}

.bootstrap-table .fixed-table-toolbar .search .input-group {
	margin-bottom: 3px;
}

td.rank-column {
	width: 60px;
	min-width: 60px;
	padding-top: 0px;
	padding-bottom: 0px;
}

.shooter-profile-column {
	width: 30px;
	min-width: 30px;
}

.gun-column {
	display: flex;
	min-width: fit-content;
}

.table-gun-image {
	min-width: 100px;
	min-height: 1px;
	max-width: fit-content;
	/* margin-left: auto; */
	margin-right: auto;
}

.table-gun-text {
	min-width: 100px;
	min-height: 1px;
	max-width: fit-content;
	margin-right: auto;
}

.table-sponsor-image-div {
	display: flex;
	min-width: fit-content;
	/*  align-items: center; */
	justify-content: center;
}

.card-image {
	overflow: hidden;
}

.profile-image {
	max-height: 350px;
	object-fit: contain;
}

.image-placeholder {
	aspect-ratio: 1 / 1;
	background-size: contain;
	background-position: center center;
	background-color: #cccccc;
	background-repeat: no-repeat;
	text-align: center;
	display: grid;
}

.profile-video {
	max-height: 300px;
	object-fit: contain;
}

.profile-reel {
	max-height: 350px;
	object-fit: contain;
}

.profile-sponsor-image-div {
	display: flex;
	min-width: fit-content;
	align-items: center;
	justify-content: center;
}

.profile-sponsor-image {
	object-fit: contain;
	max-height: 100px;
	max-width: 200px;
	aspect-ratio: auto;
}

.profile-rating-chart-div {
	position: relative;
	width: 100%;
	min-height: 350px;
}

.statistics-col {
	object-fit: contain;
	min-width: fit-content;
}

.statistics-chart-div {
	position: relative;
	width: 98%;
	min-width: 260px;
}

.statistics-chart-div-wide {
	position: relative;
	width: 98%;
	min-width: 260px;
	min-height: 400px;
}

.statistics-chart-div-top10 {
	position: relative;
	width: 98%;
	min-width: 260px;
	min-height: 300px;
}

.img-max-h-100 {
	max-height: 100%;
}

.img-max-h-90 {
	max-height: 90%;
}

.image-zoom-icon {
	font-size: 1rem;
	position: absolute;
	top: 6px;
	right: 4px;
}

.image-zoom-icon-card {
	position: absolute;
	top: 45px;
	right: 4px;
}

.shooter-image-table {
	object-fit: contain;
	aspect-ratio: auto;
	max-width: 100px;
}

.gun-image-table {
	object-fit: contain;
	aspect-ratio: auto;
	max-width: 100px;
}

.sponsor-image-table {
	object-fit: contain;
	max-width: 130px;
	aspect-ratio: auto;
}

.col-profile-images {
	text-align: center;
	float: left;
	min-width: 300px;
	max-width: min-content;
}

.vertical-social-links-big {
	min-width: 40px;
	float: left;
	font-size: 1.2em;
	letter-spacing: 1px;
	text-align: center;
}

.vertical-big {
	min-width: 40px;
	float: left;
	font-size: 1.7em;
	writing-mode: vertical-lr;
	text-orientation: upright;
	-webkit-text-orientation: upright;
	letter-spacing: 1px;
}

.vertical-small {
	min-width: 45px;
	font-size: 0.75em;
	writing-mode: vertical-lr;
	text-orientation: upright;
	-webkit-text-orientation: upright;
	display: flex;
	align-items: center;
	letter-spacing: 0.1em;
}

.vertical-small-spaced {
	letter-spacing: 0.4em;
}

.vertical-social {
	min-width: 45px;
	padding-top: 3px;
	padding-left: 4px;
	font-size: 1.25em;
	writing-mode: vertical-lr;
	text-orientation: upright;
	-webkit-text-orientation: upright;
	display: flex;
	align-items: center;
}

.upload-input {
	width: 0px;
	height: 0px;
	overflow: hidden;
}

.big-icons {
	font-size: 1.5em;
}

.huge-icons::before {
	font-size: 4em;
	vertical-align: top;
}

.trend-icon svg {
	fill: currentColor;
	width: 1em;
	height: 1em;
	padding-bottom: 0.1em;
}

.mt-6 {
	margin-top: 4rem !important;
}

.pt-6 {
	padding-top: 4rem !important;
}

.fs-0-75 {
	font-size: 0.75rem;
}

.fs-0-9 {
	font-size: 0.9rem;
}

.fs-1-1 {
	font-size: 1.1rem;
}

.fs-1-2 {
	font-size: 1.2rem;
}

.fs-1-25 {
	font-size: 1.25rem;
}

.fs-1-3 {
	font-size: 1.3rem;
}

.fs-1-5 {
	font-size: 1.5rem;
}

/* more width classes */
.w-80 {
	width: 80%;
}

.w-85 {
	width: 85%;
}

.w-90 {
	width: 90%;
}

.w-95 {
	width: 95%;
}

.mw-60px {
	min-width: 60px;
}

.mw-120px {
	min-width: 120px;
}

.mw-150px {
	min-width: 150px;
}

.mw-270px {
	min-width: 270px;
}

.mh-24px {
	min-height: 24px;
}

@media (min-width: 768px) {
	.w-md-25 {
		width: 25% !important;
	}

	.w-md-50 {
		width: 50% !important;
	}

	.w-md-75 {
		width: 75% !important;
	}

	.w-md-100 {
		width: 100% !important;
	}
}

.accordion {
	--bs-accordion-btn-color: var(--bs-gray-900);
	--bs-accordion-btn-bg: var(--bs-gray-100);
	--bs-accordion-active-color: var(--bs-gray-900);
	--bs-accordion-active-bg: var(--bs-gray-400);
}

.selectable-button {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

.carousel-control-next-shooter-profile-images,
.carousel-control-prev-shooter-profile-images {
	align-items: start !important;
	height: 40px !important;
	padding-top: 10px;
	padding-bottom: 10px;
}

.carousel-shooter-profile-images-indicators {
	bottom: unset;
	opacity: 0.4;
	margin-top: 25px;
}

[data-bs-theme="dark"] .carousel-otw {
	background-color: #bbbbbb;
}

[data-bs-theme="dark"] .carousel a.carousel-link {
	color: #0d6efd;
}

[data-bs-theme="light"] .carousel .carousel-control-prev-icon,
[data-bs-theme="light"] .carousel .carousel-control-next-icon {
	filter: none;
}

[data-bs-theme="dark"] .carousel .carousel-control-prev-icon,
[data-bs-theme="dark"] .carousel .carousel-control-next-icon {
	filter: invert(30) grayscale(100);
}

[data-bs-theme="light"] .carousel .carousel-indicators {
	filter: none;
}

[data-bs-theme="dark"] .carousel .carousel-indicators {
	filter: invert(30) grayscale(100);
}

[data-bs-theme="dark"] .accordion .accordion-button::after {
	filter: invert(30) grayscale(100);
}

[data-bs-theme="dark"] .modal .btn-close {
	filter: invert(100);
}

[data-bs-theme="dark"] .modal .modal-header {
	background-color: #666666;
}

[data-bs-theme="dark"] .modal .modal-footer {
	background-color: #666666;
}

/* bootstrap-table loading overlay: transparent so the page background
   shows through. Full descendant chain to match the library's
   specificity so this wins. The message is pinned to the top of the
   overlay (which the library positions right below the column header
   row, whose bottom border closes the top of the box) with a small gap.
   bottom:auto keeps the bordered box as tall as the message instead of
   stretching it over the whole table. */
.bootstrap-table .fixed-table-container .fixed-table-body .fixed-table-loading {
	padding: 0.5rem 0;
	background: transparent;
	border-left: 1px solid var(--bs-border-color);
	border-right: 1px solid var(--bs-border-color);
	border-bottom: 1px solid var(--bs-border-color);
	align-items: flex-start;
	bottom: auto;
}

/* the loading box is absolutely positioned against .fixed-table-container:
   while the body is still empty (initial load) it would overflow below the
   table and overlap the next page element (the contact section on the
   rating pages), so reserve its height in the body; existing rows make the
   body taller than this, so re-fetches don't jump */
.bootstrap-table .fixed-table-body:has(> .fixed-table-loading.open) {
	min-height: 3.5rem;
}

/* while the loading overlay is active, hide the table rows (layout is
   preserved, unlike display:none, so the page doesn't jump when the data
   arrives). visibility:hidden suppresses the text but NOT the borders,
   so the row borders are made transparent as well; the empty-state row
   (drawn by bootstrap-table before the first data arrives) is removed
   entirely, otherwise it shows as a stray empty row, e.g. on initial
   page load. The column header stays visible. */
.fixed-table-loading.open ~ table tbody {
	visibility: hidden;
}
.fixed-table-loading.open ~ table tbody tr,
.fixed-table-loading.open ~ table tbody td {
	border-color: transparent;
}
.fixed-table-loading.open ~ table tr.no-records-found {
	display: none;
}

.carousel-profileimages-indicators {
	bottom: unset;
	opacity: 0.4;
}

.carousel-control-next-profileimages,
.carousel-control-prev-profileimages {
	align-items: start !important;
	height: 255px !important;
}

.carousel-control-next-icon-profile-images,
.carousel-control-prev-icon-profile-images {
	width: 1.5rem;
	height: 1.5rem;
}

.carousel-otw {
	min-height: 300px;
	background-color: #eeeeee;
}

.carousel-control-next-otw,
.carousel-control-prev-otw {
	width: 5%;
}

.carousel-control-next-icon-otw,
.carousel-control-prev-icon-otw {
	width: 4rem;
	height: 4rem;
}

.carousel-otw-indicators {
	bottom: -25px;
	margin-bottom: unset;
	opacity: 0.5;
}

.carousel-otw-image-gun {
	max-height: 240px;
}

.otw-image-gun {
	max-height: 75vh;
}

.gun-image-container-otw {
	position: relative;
	width: fit-content;
	margin: 0 auto;
}

.match-image-container-otw {
	position: relative;
	width: fit-content;
	margin: 0 auto;
}

.general-image-container {
	position: relative;
	width: fit-content;
}

.carousel-otw-image-match {
	max-height: 260px;
}

.matches-otw {
	max-width: fit-content;
}

.sponsor-gotw-image {
	max-width: 350px;
	max-height: 100px;
}

.sponsor-matches-image {
	max-height: 140px;
}

/* site footer */
.site-footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	min-height: 45px;
}

/* medal colors */
.medal-presidents {
	color: #d4af37;
}

/* metallic gold, more contrast on white then #FFD700 */
.medal-gold {
	color: #d4af37;
}

.presidents-medal-17 {
	width: 1.7em;
	height: 1.7em;
}

.presidents-medal-13 {
	width: 1.3em;
	height: 1.3em;
}

.presidents-medal-12 {
	width: 1.2em;
	height: 1.2em;
}

.medal-silver {
	color: #c0c0c0;
}

.medal-bronze {
	color: #cd7f32;
}

.new-star {
	/* metallic gold, more contrast on white then #FFD700 */
	color: #d4af37;
	font-size: small;
	vertical-align: text-bottom;
}

/* profile image upload */
.image-preview {
	aspect-ratio: 1 / 1;
	background-size: contain;
	background-position: center center;
	background-color: #cccccc;
	background-repeat: no-repeat;
	text-align: center;
	box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
	display: grid;
}

.image-preview-icon {
	color: #888888;
	font-size: 2em;
	margin: auto;
}

.image-preview-icon-camera {
	color: #888888;
	font-size: 2em;
	margin: auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-placeholder-icon {
	color: #888888;
	font-size: 3em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-placeholder-icon-small {
	color: #888888;
	font-size: 2em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.image-placeholder-icon-xs {
	color: #888888;
	font-size: 1.5em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn-image-upload {
	display: block;
	border-radius: 0px;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
}

.nowrap {
	white-space: nowrap;
}

.hover:hover {
	cursor: pointer;
}

.hover-link {
	color: rgba(var(--bs-link-color-rgb));
}

.locations-map {
	min-width: 200px;
	min-height: 600px;
}

/* custom modal header and footer */
.modal-header {
	background-color: #cfcfcf;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.75em;
	padding-right: 1em;
}

.modal-footer {
	background-color: #cfcfcf;
	padding-top: 0.25em;
	padding-bottom: 0.25em;
	padding-left: 0.75em;
	padding-right: 0.75em;
}

/* site maintenance mode */
.site-maintenance {
	text-align: center;
}

.maintenance-icon-huge {
	font-size: 15em;
}

/*
* print styles: the site is screen-first (fixed navbar, dark theme, js-driven
* tables), so printing needs a light, paper-friendly layout. The beforeprint
* hook in js/common_dev.js additionally switches the theme and the chart
* palettes to light while printing; the [data-bs-theme="dark"] override below
* only acts as a fallback for printing without that js running.
*/
@media print {
	@page {
		margin: 10mm 10mm 12mm;
	}

	html {
		color-scheme: light;
	}

	[data-bs-theme="dark"] {
		--bs-body-bg: #ffffff;
		--bs-body-color: #212529;
		--bs-secondary-color: rgba(33, 37, 41, 0.75);
	}

	/* globe background watermark and screen padding around the fixed navbar;
	   body.pt-5 (not just body): the .pt-5 utility is !important and would
	   beat a plain body selector */
	body::before {
		display: none;
	}

	body {
		margin-bottom: 0;
	}

	body.pt-5 {
		padding-top: 0 !important;
	}

	/* screen-only chrome */
	.site-footer,
	.modal-backdrop,
	/* .carousel needs !important: the carousel has d-flex, and bootstrap's
	   .d-flex display:flex !important would otherwise win */
	.carousel {
		display: none !important;
	}

	.leaflet-top,
	.carousel-control-next,
	.carousel-control-prev,
	.carousel-indicators {
		display: none;
	}

	/* the navbar is reduced to its brand, printed as a letterhead: static
	   position (fixed-top would float over the content), no dark background,
	   and the dark scoped theme of the navbar would otherwise make the brand
	   light text on white paper */
	nav.navbar {
		position: static !important;
		background-color: transparent !important;
	}

	nav.navbar .navbar-toggler,
	nav.navbar .navbar-collapse,
	nav.navbar #network_status {
		display: none !important;
	}

	nav.navbar .navbar-brand {
		color: #212529 !important;
		text-decoration: none !important;
	}

	/* smaller letterhead icon (fs-3 utility uses !important) */
	nav.navbar .navbar-brand .bi {
		font-size: 1.25rem !important;
	}

	/* the top of page 1 is the letterhead: drop the doubled container top
	   margins and the empty wrapper left behind by the hidden carousel */
	[role="main"] {
		margin-top: 0 !important;
	}

	.text-center.mb-2:has(> .carousel) {
		display: none;
	}

	/* in print the page width passes the sm breakpoint, which would cap
	   .container at 540px and center it, leaving a big left margin; use the
	   full page width instead */
	.container {
		max-width: 100% !important;
	}

	/* world shoot results and pan american results image/link columns of the
	   rating pages */
	.worldshoot-col,
	.matchresults-col {
		display: none;
	}

	/* interactive controls: buttons, form fields, table toolbars + pagination */
	.btn,
	.btn-close,
	.form-control,
	.form-select,
	.bootstrap-table .fixed-table-toolbar,
	.bootstrap-table .fixed-table-pagination {
		display: none;
	}

	/* detail-view toggle column (first column when detailView is on): hide
	   it consistently — header cell plus the first cell of every data row.
	   Hiding only the cells that contain a detail icon would leave the empty
	   cells of rows without details behind and skew the columns. Only tables
	   that actually have the column are affected; expanded detail rows
	   (tr.detail-view) and the no-records row carry no data-index and stay
	   visible */
	.bootstrap-table thead th.detail,
	.bootstrap-table:has(thead th.detail) tbody tr[data-index] > td:first-child {
		display: none;
	}

	/* icon-only columns of the rating tables: elo class and profile link */
	.shooter-eloclass-column,
	.shooter-profile-column {
		display: none;
	}

	/* region column: on screen the region is a flag icon (a css background
	   image, which is not printed); on paper replace the icon with the
	   regionalpha3 code from the data attribute (the full name stays in the
	   title attribute for the screen tooltip) */
	.bootstrap-table .fi {
		width: auto;
		background: none;
	}

	.bootstrap-table .fi::after {
		content: attr(data-regionalpha3);
	}

	/* tables: no on-screen scrolling or height limits, fit the page width
	   (bootstrap-table sets inline column widths that would overflow), repeat
	   the header on every page, keep rows intact across page breaks */
	.bootstrap-table .fixed-table-container,
	.bootstrap-table .fixed-table-body {
		overflow: visible !important;
		height: auto !important;
	}

	.bootstrap-table .fixed-table-container .table {
		width: 100% !important;
		table-layout: fixed !important;
	}

	.bootstrap-table .fixed-table-container .table th,
	.bootstrap-table .fixed-table-container .table td {
		overflow-wrap: anywhere;
	}

	/* screen nowrap hints don't fit on paper */
	.nowrap {
		white-space: normal !important;
	}

	.bootstrap-table table {
		font-size: 0.8rem;
	}

	.bootstrap-table thead {
		display: table-header-group;
	}

	.bootstrap-table tbody tr {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* keep the "Highlight me" row color on paper */
	.highlight-row {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* printable modal: an open modal (e.g. a shooter profile) prints as a
	   plain document and the page content behind it is hidden */
	.modal {
		position: static !important;
		max-height: none !important;
		overflow: visible !important;
		padding: 0 !important;
	}

	.modal-dialog {
		max-width: none !important;
		margin: 0 !important;
	}

	.modal-content {
		max-height: none !important;
		border: 0 !important;
		box-shadow: none !important;
	}

	.modal-header,
	.modal-footer {
		background-color: transparent !important;
	}

	body.modal-open {
		padding-right: 0 !important;
	}

	body.modal-open [role="main"] {
		display: none;
	}
}