/* =====================================================
Themes for colours. root default is MODERN
===================================================== */

:root {
	--theme-primary: var(--bs-info-bg-subtle);
	--theme-primary-light: var(--bs-info-bg-subtle);
	--theme-primary-dark: var(--bs-info-emphasis);

	--theme-text-on-primary: var(--bs-info-text-emphasis);

	--theme-bg-dark: var(--bs-info);
	--theme-bg-dark-soft: var(--bs-info);

	--theme-link: var(--bs-primary-bg);
	--theme-link-hover: var(--bs-primary-bg);

	--bs-link-color: #0b7285;
	--bs-link-hover-color: #055160;
	
	--bs-primary: var(--bs-info);
	--bs-primary-rgb: var(--bs-info-rgb);
}

[data-theme="RED"] {
	--theme-primary: var(--bs-danger-bg-subtle);
	--theme-primary-light: var(--bs-danger-bg-subtle);
	--theme-primary-dark: var(--bs-danger-emphasis);

	--theme-text-on-primary: var(--bs-danger-text-emphasis);

	--theme-bg-dark: var(--bs-danger);
	--theme-bg-dark-soft: var(--bs-danger);

	--theme-link: var(--bs-primary-bg);
	--theme-link-hover: var(--bs-primary-bg);

	--bs-link-color: #b02a37;
	--bs-link-hover-color: #842029;
	 
	--bs-primary: var(--bs-danger);
	--bs-primary-rgb: var(--bs-danger-rgb);
}

[data-theme="YELLOW"] {
	--theme-primary: var(--bs-warning-bg-subtle);
	--theme-primary-light: var(--bs-warning-bg-subtle);
	--theme-primary-dark: var(--bs-warning-emphasis);

	--theme-text-on-primary: var(--bs-warning-text-emphasis);

	--theme-bg-dark: var(--bs-warning);
	--theme-bg-dark-soft: var(--bs-warning);

	--theme-link: var(--bs-primary-bg);
	--theme-link-hover: var(--bs-primary-bg);

	--bs-link-color: #b02a37;
	--bs-link-hover-color: #842029;
	 
	--bs-primary: var(--bs-warning);
	--bs-primary-rgb: var(--bs-warning-rgb);
}

[data-theme="DARK"] {
	--theme-primary: var(--bs-dark);
	--theme-primary-light: var(--bs-dark-bg-subtle);
	--theme-primary-dark: var(--bs-dark-emphasis);

	--theme-text-on-primary: var(--bs-dark-text-emphasis);

	/* LINKS */
	--theme-link: var(--bs-primary-bg);
	--theme-link-hover: var(--bs-primary-bg);
	--bs-link-color: #4dd4ff;
	--bs-link-hover-color: #9be7ff;
}

[data-theme="CLASSIC"] {
	--theme-primary: var(--bs-secondary-bg-subtle);
	--theme-primary-light: var(--bs-secondary-bg-subtle);
	--theme-primary-dark: var(--bs-secondary-emphasis);

	--theme-text-on-primary: var(--bs-secondary-text-emphasis);

	--theme-bg-dark: var(--bs-secondary);
	--theme-bg-dark-soft: var(--bs-secondary);

	--theme-link: var(--bs-primary-bg);
	--theme-link-hover: var(--bs-primary-bg);

	--bs-link-color: #b02a37;
	--bs-link-hover-color: #842029;
	 
	--bs-primary: var(--bs-secondary);
	--bs-primary-rgb: var(--bs-secondary-rgb);
}

[data-theme="BLUE"] {
	--theme-primary: var(--bs-primary-bg-subtle);
	--theme-primary-light: var(--bs-primary-bg-subtle);
	--theme-primary-dark: var(--bs-primary-emphasis);

	--theme-text-on-primary: var(--bs-primary-text-emphasis);

	--theme-bg-dark: var(--bs-primary);
	--theme-bg-dark-soft: var(--bs-primary);

	--theme-link: var(--bs-primary-bg);
	--theme-link-hover: var(--bs-primary-bg);

	--bs-link-color: #b02a37;
	--bs-link-hover-color: #842029;
	 
	--bs-primary: var(--bs-blue);
	--bs-primary-rgb: var(--bs-blue-rgb);
}

[data-theme="GREEN"] {
	--theme-primary: var(--bs-success-bg-subtle);
	--theme-primary-light: var(--bs-success-bg-subtle);
	--theme-primary-dark: var(--bs-success-emphasis);

	--theme-text-on-primary: var(--bs-success-text-emphasis);

	--theme-bg-dark: var(--bs-success);
	--theme-bg-dark-soft: var(--bs-success);

	--theme-link: var(--bs-primary-bg);
	--theme-link-hover: var(--bs-primary-bg);

	--bs-link-color: #b02a37;
	--bs-link-hover-color: #842029;
	 
	--bs-primary: var(--bs-success);
	--bs-primary-rgb: var(--bs-success-rgb);
}

body {
	background-color: whitesmoke;
	color: black;
}

a {
	color: var(--theme-link);
	text-decoration: none;
}

a:hover,
a:focus {
	background-color: var(--theme-primary-light) !important;
	color: darkgray !important;
	font-weight: 600 !important;
	text-decoration: underline;
}

.navbar {
	background-color: var(--theme-primary) !important;
	color: black !important;
}

.nav-link {
	color: var(--bs-body-color);
	background-color: transparent;
	border: none;
}

.nav-link:hover {
	text-decoration: underline;
}

.nav-link.active {
	background-color: var(--theme-primary) !important;
	color: darkgray !important;
	font-weight: 600 !important;
	border-color: none;
}

.nav-link:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}

.bg-theme {
	background-color: var(--theme-primary) !important;
}

.table-theme {
	--bs-table-bg: var(--theme-primary-light);
	--bs-table-striped-bg: #f8f9fa;
	--bs-table-hover-bg: #eef2f6;
	--bs-table-color: #000;
}

.text-theme {
	color: var(--theme-primary) !important;
}

.spinner-border.text-theme {
	color: var(--theme-primary) !important;
}

.card-header-theme {
	background-color: var(--theme-primary-light);
}

.card a {
	font-weight: 500;
}

.btn-primary {
	--bs-btn-color: #000;
	--bs-btn-bg: var(--theme-primary);
	--bs-btn-border-color: var(--theme-primary);

	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: var(--theme-primary);
	--bs-btn-hover-border-color: var(--theme-primary-dark);
}

.btn-outline-primary {
	--bs-btn-color: var(--theme-primary-dark);
	--bs-btn-border-color: var(--theme-primary);

	--bs-btn-hover-color: #000;
	--bs-btn-hover-bg: var(--theme-primary);
	--bs-btn-hover-border-color: var(--theme-primary);
}

.helpbutton {
	color: black;
	background-color: var(--theme-primary);
	transition: background-color .2s ease;
}

.helpbutton:hover, .helpbutton:focus {
	background-color: var(--theme-primary-dark);
	color: slategrey;
}

.dropdown-menu {
	--bs-dropdown-bg: var(--theme-page-bg, whitesmoke);
	--bs-dropdown-color: #000;
	--bs-dropdown-border-color: var(--bs-border-color);
	--bs-dropdown-link-color: #000;
	--bs-dropdown-link-hover-bg: var(--theme-primary-light);
	--bs-dropdown-link-hover-color: #000;
}

.dropdown-item.active,
.dropdown-item:active {
	background-color: var(--theme-primary) !important;
	color: #000 !important;
}

.licence a:hover,
.licence a:focus {
	color: var(--theme-text-on-primary) !important;
}
.licence {
	color: black !important;
}
.licence a {
	color: black !important;
}

#fixtureFilter:not(:checked),
#matchFilter:not(:checked) {
	background-color: #e9ecef;
	border-color: #ffffff;
}

#fixtureFilter:checked,
#matchFilter:checked {
	background-color: var(--theme-primary-light);
	border-color: black;
}

[data-theme="DARK"] .navbar {
	color: #fff !important;
}

[data-theme="DARK"] .nav-link {
	color: #fff;
}

[data-theme="DARK"] .card {
	background-color: #1e1e1e;
	color: #f8f9fa;
}

[data-theme="DARK"] .dropdown-menu {
	--bs-dropdown-bg: #1e1e1e;
	--bs-dropdown-color: #f8f9fa;
	--bs-dropdown-link-color: #f8f9fa;
}
[data-theme="DARK"] .helpbutton {
	color: #fff;
	border: 1px solid #666;
	background-color: #212529;
	border: none;
	outline: none;
	box-shadow: none;
}

[data-theme="DARK"] .helpbutton:hover, [data-theme="DARK"] .helpbutton:focus {
	background-color: #212529;
	color: slategrey;
}