@import "styles/loading-spinner.css";


/* GLOBAL VARIABLES */
:root {

	/* FONTS FAMILIES */
	--ff-primary: "Nunito", "Inter", "Arial";					/* BODY */
	--ff-secondary: "Fredoka", "Inter", "Arial";			/* NAV LINKS & HEADINGS */
	--ff-tertiary: "Sriracha", "Inter", "Arial";				/* NAV BRANDING */

	/* TABLE BORDERS */
	--border-bottom-light: solid 1px hsl(0, 0%, 80%) !important;
	--border-bottom-dim: solid 1px hsl(0, 0%, 60%) !important;

}



/* THEME - LIGHT */
[data-bs-theme=''] {

	/* BACKGROUND COLORS */
	--bg-color-primary: hsl(160, 10%, 65%);		/* BODY */
	--bg-color-secondary: hsl(190, 90%, 15%);		/* NAV */
	--bg-color-tertiary: hsl(190, 65%, 25%);		/* CARD */

	--bg-color-accent-primary: hsl(205, 0%, 90%);				/* BUTTON GROUPS */

	/* FONT COLORS */
	--fc-accent-primary: hsl(50,55%, 65%);		/* HEADERS */

}



/* THEME - DARK */
[data-bs-theme='dark'] {

	/* BACKGROUND COLORS */
	--bg-color-primary: hsl(195, 60%, 10%);		/* BODY */
	--bg-color-secondary: hsl(200, 65%, 15%);		/* NAV */
	--bg-color-tertiary: hsl(205, 50%, 20%);		/* CARD */

	--bg-color-accent-primary: hsl(205, 0%, 70%);			/* BUTTON GROUPS */

	/* FONT COLORS */
	--fc-accent-primary: hsl(50, 70%, 55%);		/* HEADERS */

}



/* THEME - FONT FAMILIES */
body {
	font-family: var(--ff-primary);
}

nav .navbar-brand {
	font-family: var(--ff-tertiary);
}

nav .offcanvas {
	font-family: var(--ff-secondary);
}

nav .btn {
	font-family: var(--ff-primary);
}

.text-warning-emphasis {
	font-family: var(--ff-secondary);
	font-weight: 400;
}

#view_modal .text-warning-emphasis {
	font-family: var(--ff-primary);
}



/* THEME - FONT COLORS */
.text-warning-emphasis {
	color: var(--fc-accent-primary) !important;
}



/* THEME - BACKGROUND COLORS */
body {
	background-color: var(--bg-color-primary);
}

nav,
nav .offcanvas {
	background-color: var(--bg-color-secondary);
}

nav .dropdown-menu {
	background-color: var(--bg-color-tertiary);
}

.modal-content {
	background-color: var(--bg-color-tertiary);
}

.card {
	background-color: var(--bg-color-tertiary);
	border: 0;
}

.table th,
.table td,
.table caption {
	background-color: var(--bg-color-tertiary);
}

.toast {
	/* background-color: var(--bg-color-secondary); */
}

.badge.text-bg-secondary {
	background-color: var(--bg-color-accent-primary) !important;
	color: black !important;
}

.btn-check+.btn,
.btn-outline-light {
	border-color: var(--bg-color-accent-primary) !important;
	color: var(--bg-color-accent-primary) !important;
}
.btn-check:checked+.btn,
.btn-outline-light.show {
	background-color: var(--bg-color-accent-primary) !important;
	color: var(--bg-color-tertiary) !important;
}



/* HTML */
* {
	touch-action: manipulation;
}



/* BOOTSTRAP */
body.modal-open .navbar,
body.modal-open #content {
	filter: blur(5px) brightness(50%) !important;
}

.modal-open {
	overflow: none !important;
}

label.readonly:after {
	background: var(--readonly-color) !important;
}

.form-control:read-only {
	background-color: var(--bs-secondary-bg) !important;
}

.accordion-button,
.accordion-body {
	background-color: var(--bg-color-tertiary) !important;
}

.accordion-button:not(.collapsed) {
	background-color: var(--bg-color-secondary) !important;
	color: var(--fc-accent-primary);
}

.accordion-button.collapsed {
	color: hsl(0, 5%, 77%);
}

button.accordion-button:focus {
	box-shadow: inherit;
}

.badge {
	min-width: 37px !important;
}


/* NAVBAR */

#navbar_offcanvas.offcanvas-end {
	font-size: 12pt;
	max-width: 75% !important;
}

.row.clear-nav {
	margin-bottom: 15px !important;
}

@media (max-width: 1200px) {
	.row.clear-nav {
		margin-top: 70px !important;
	}
}

@media (min-width: 1200px) {
	.navbar {
		align-items: flex-start;
		height: 100%;
		width: 250px;
	}
	.navbar-brand {
		margin-bottom: 1rem;
	}
	.navbar .container-fluid,
	.navbar-expand-xl .navbar-collapse,
	.navbar-expand-xl .navbar-nav {
		align-items: flex-start;
		flex-direction: column;
	}
	.navbar .nav-link,
	.navbar .dropdown-menu li {
		font-size: 1.15rem;
	}
	.row.clear-nav {
		margin-top: 25px !important;
	}
}



/* TABLES */
.fixed-table-loading {
	background-color: var(--bg-color-tertiary) !important;
}

th {
	border-bottom: var(--border-bottom-light) !important;
	font-weight: 400 !important;
	opacity: 0.75;
}

th, td {
	white-space: nowrap;
}

tr.dim_row > td {
	opacity: 0.75 !important;
}

tr.highlight_row > td {
	color: var(--fc-accent-primary) !important;
}

td.highlight_cell {
	color: var(--fc-accent-primary) !important;
}


/* FONT AWESOME */
.fa-stack i {
	vertical-align: bottom;
}

.fa-stack.small {
	font-size: 0.8em;
}

.fa-circle-1,
.fa-circle-2,
.fa-circle-3,
.fa-circle-4,
.fa-circle-5,
.fa-circle-6,
.fa-circle-7,
.fa-circle-8,
.fa-circle-9,
.fa-circle-question {
	--fa-primary-color: hsl(0, 0%, 100%) !important;
	--fa-secondary-color: hsl(0, 0%, 40%) !important;
	--fa-secondary-opacity: 0.8 !important;
}

.fa-circle-a,
.fa-circle-b,
.fa-circle-c,
.fa-circle-d,
.fa-circle-e,
.fa-circle-f {
	--fa-secondary-color: hsl(200, 85%, 55%) !important;
	--fa-secondary-opacity: 0.5 !important;
	opacity: 0.8 !important;
}

.fa-regular-circle-1-sparkle,
.fa-regular-circle-2-sparkle,
.fa-regular-circle-3-sparkle,
.fa-regular-circle-4-sparkle,
.fa-regular-circle-5-sparkle,
.fa-regular-circle-a-sparkle,
.fa-regular-circle-b-sparkle,
.fa-regular-circle-c-sparkle,
.fa-regular-circle-d-sparkle {
	opacity: 0.75 !important;
}

.fa-trophy:not(.ignore) {
	--fa-primary-color: #bfbfbf;
	--fa-primary-opacity: 1;
	--fa-secondary-color: #a1a4aa;
	--fa-secondary-opacity: 0.7;
}

.edit_order,
.edit_round,
.edit_closest,
.edit_group,
.edit_flight,
.edit_score,
.edit_cup
.fa-pen-to-square,
.fa-circle-minus {
	cursor: pointer;
}