/*
 * Everything is styled with Bootstrap components and utility classes (see
 * master.js and index.html). Only the few things Bootstrap has no class for live here.
 */

/* Use the extra width on very large screens */
@media (min-width: 1600px) {
	.container-xxl {
		max-width: 1520px;
	}
}

/* Page: very dark green derived from the logo icon green (#198754, same hue, much darker).
   Surfaces for tables, rows and tabs: the same green, a bit lighter. */
[data-bs-theme="dark"] {
	--bs-body-bg: rgb(12, 26, 20);
	--bs-body-bg-rgb: 12, 26, 20;
	--bs-tertiary-bg: rgb(21, 30, 26);
	--bs-tertiary-bg-rgb: 21, 30, 26;
}

.table {
	--bs-table-bg: var(--bs-tertiary-bg);
	--bs-table-hover-bg: rgb(30, 42, 36);
	--bs-table-color: #ffffff;
	--bs-table-border-color: rgba(255, 255, 255, 0.1);
}

/* Type badges: fixed palette */
.badge {
	--bs-badge-font-size: 13px;
	--bs-badge-padding-x: 7px;
	--bs-badge-padding-y: 2px;
	--bs-badge-border-radius: 4px;
	--bs-badge-color: #ffffff;
}
.tag-green { background-color: #2d5a27; }
.tag-blue  { background-color: #2a5c7a; }
.tag-red   { background-color: #7a3030; }
.tag-brown { background-color: #6b4226; }
.tag-grey  { background-color: #4a4a4a; }
.tag-gold  { background-color: #7a5c00; }

/* Score bars: 120px wide, 8px high from lg up (flexible in a phone card and on tablets) */
.score-row {
	gap: 6px;
}
.score-row + .score-row {
	margin-top: 3px;
}
.score-row > .bi {
	font-size: 13px;
}
.score-value {
	min-width: 14px;
	font-size: 13px;
}
.score-track {
	--bs-progress-height: 8px;
	--bs-progress-bg: rgba(255, 255, 255, 0.1);
	--bs-progress-border-radius: 4px;
	min-width: 5rem;
}
.score-track .progress-bar {
	border-radius: 4px;
}
@media (min-width: 992px) {
	.score-track {
		flex: none !important;
		width: 120px;
	}
}

/*
 * Tabs (Bootstrap nav-tabs): every tab is a visible box and the selected
 * one is taller. Bootstrap makes the selected tab flow into the content area below.
 */
.nav-tabs .nav-link {
	--bs-nav-link-padding-y: 0.4rem;
	background-color: var(--bs-tertiary-bg);
	border-color: var(--bs-border-color);
}

.nav-tabs .nav-link.active {
	--bs-nav-link-padding-y: 0.7rem;
}

/* Rows are cards on phones: no table borders between the stacked cells */
@media (max-width: 767.98px) {
	.table > tbody > tr > td {
		border-bottom-width: 0;
	}
}

/* Phone mode: the row itself is the card, so cells get no background of their own and no hover effect */
@media (max-width: 767.98px) {
	.table {
		--bs-table-bg: transparent;
	}
	.table-hover > tbody > tr:hover > * {
		--bs-table-bg-state: initial;
		--bs-table-color-state: initial;
	}
}

/* Filter checkboxes in the theme green instead of Bootstrap's blue */
.form-check-input:checked {
	background-color: var(--bs-success);
	border-color: var(--bs-success);
}
.form-check-input:focus {
	border-color: var(--bs-success);
	box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb), 0.25);
}

/* Filter dropdown rows: green instead of Bootstrap's blue when pressed */
.dropdown-menu {
	--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
	--bs-dropdown-link-active-bg: rgba(var(--bs-success-rgb), 0.35);
	--bs-dropdown-link-active-color: #ffffff;
}