/* ---- Tema chiaro/scuro: token di superficie riusati da tutte le pagine ---- */
:root {
	--surface: #ffffff;
	--surface-muted: #f6f6f8;
	--surface-border: #e7e8ec;
	--text-muted: #6b7280;
	--text-subtle: #495057;
	--text-strong: #14161a;
	--table-hover: #fff3f3;
	--shadow-soft: 0 1px 2px rgba(0, 0, 0, .04);
}

[data-bs-theme="dark"] {
	--surface: #1b1d22;
	--surface-muted: #141518;
	--surface-border: #34363c;
	--text-muted: #9aa0aa;
	--text-subtle: #c3c7ce;
	--text-strong: #f1f2f4;
	--table-hover: rgba(232, 23, 32, .12);
	--shadow-soft: 0 1px 2px rgba(0, 0, 0, .4);
	color-scheme: dark;
}

body {
	padding-top: 64px;
	background-color: var(--surface-muted);
}

.btn {
	outline: none!important;
	box-shadow: none!important;
}

#main-header #top-bar {
	min-height: 64px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 12px;
	padding-right: 12px;
}

#top-bar #logo {
	max-height: 38px;
}

footer {
	background-color: #1c1c1e;
	padding: 20px 0px;
}

footer .logo {
	max-height: 100px;
}

/* ---- Footer: avviso non ufficiale + link su un'unica riga, a capo su mobile ---- */
.footer-warn {
	color: #d8d2d4;
	font-size: 13px;
	line-height: 1.5;
}

.footer-warn i {
	color: var(--color-primary);
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}

.footer-links a {
	color: #d8d2d4;
	font-size: 13px;
	text-decoration: none;
	white-space: nowrap;
}

.footer-links a:hover {
	color: #fff;
	text-decoration: underline;
}

@media screen and (min-width: 993px) {
	#top-bar ul li:not(:last-child) {
		padding-right: 15px;
	}
}

#top-bar #ris-navbar > ul > li > a,
#top-bar .dropdown-toggle {
	color: #ffffff;
	font-weight: 500;
	font-size: 14px;
	padding: 8px 12px !important;
	border-radius: 8px;
}

#top-bar #ris-navbar > ul > li > a:hover,
#top-bar .dropdown-toggle:hover,
#top-bar .dropdown-toggle.show {
	background: rgba(255, 255, 255, .16);
}

#top-bar .dropdown-menu {
	border: 1px solid var(--surface-border);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
	padding: 8px;
}

#top-bar .dropdown-item {
	border-radius: 8px;
	font-size: 14px;
	padding: 7px 12px;
	color: var(--bs-dropdown-link-color);
}

#top-bar .dropdown-item.active,
#top-bar .dropdown-item:active {
	color: #fff!important;
}

.itinerary-dropdown .dropdown-menu,
.edition-dropdown .dropdown-menu {
    max-height: 90vh;
    overflow-y: auto;
}

@media screen and (max-width: 992px) {
	.itinerary-dropdown .dropdown-menu,
	.edition-dropdown .dropdown-menu {
		max-height: 40vh;
		overflow-y: auto;
		max-width: calc(100vw - 18px);
	}

	.itinerary-dropdown .dropdown-menu a,
	.edition-dropdown .dropdown-menu a {
	    white-space: break-spaces;
	}
}

.driver-country {
	max-width: 20px;
	border: 1px solid var(--bs-dark);
}

[data-bs-theme="dark"] .driver-country {
	border-color: var(--surface-border);
}

#cookie-bar {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 380px;
	max-width: calc(100vw - 40px);
	background-color: var(--surface);
	color: var(--text-strong);
	border: 1px solid var(--surface-border);
	border-radius: 16px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .28);
	padding: 16px;
	font-size: 13px;
	z-index: 1000;
}

#cookie-bar a {
	color: var(--color-primary);
}

#cookie-bar .btn {
	border-radius: 999px;
	font-size: 13px;
	padding: 6px 16px;
}

@media screen and (max-width: 992px) {
	#cookie-bar {
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
		max-width: none;
		padding: 12px;
		font-size: 12px;
	}
}

#cookie-bar .cookie-bar-dismiss {
	cursor: pointer;
}

/* ---- Colori delle giornate: shakedown (0) e Day 1-4 ---- */
:root {
	--day-0: #d61f9c;
	--day-1: #2563eb;
	--day-2: #ca8a04;
	--day-3: #0f766e;
	--day-4: #7c3aed;
}

.day-0 { --day-color: var(--day-0); }
.day-1 { --day-color: var(--day-1); }
.day-2 { --day-color: var(--day-2); }
.day-3 { --day-color: var(--day-3); }
.day-4 { --day-color: var(--day-4); }

/* ---- Titoli di sezione con segno rosso ---- */
.h3.bebas {
	font-size: 20px;
	margin-bottom: 14px !important;
	display: flex;
	align-items: stretch;
	gap: 12px;
}

.h3.bebas::before {
	content: "";
	width: 7px;
	border-radius: 4px;
	background: var(--color-primary);
	flex-shrink: 0;
}

/* più aria tra un giorno e il successivo (percorso e tappe, mappa generale) */
.day-block + .day-block {
	margin-top: 3rem !important;
}

h3.day-title {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 20px;
}

h3.day-title::before {
	content: "";
	width: 7px;
	height: 30px;
	border-radius: 4px;
	background: var(--day-color, var(--color-primary));
	display: block;
}

.day-title .day-map-link {
	margin-left: auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--text-strong);
	border: 1.5px solid var(--surface-border);
	border-radius: 999px;
	padding: 4px 12px;
	letter-spacing: 0;
}

.day-badge {
	display: inline-block;
	background: var(--day-color, var(--color-primary));
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
}

/* ---- Tabelle ---- */
.table-responsive {
	margin-bottom: 8px;
	background: var(--surface);
	border: 1px solid var(--surface-border);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}

.table.table,
.table-responsive .table {
	margin: 0 !important;
	--bs-table-striped-bg: transparent;
	--bs-table-hover-bg: var(--table-hover);
	--bs-table-bg: transparent;
	--bs-table-color: var(--bs-body-color);
	font-size: 14px;
}

.table thead th {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	font-weight: 600;
	background: #b80f17;
	border: 0 !important;
	padding: 14px 18px;
}

.table td {
	padding: 16px 18px;
	line-height: 1.5;
	border-color: var(--surface-border);
	vertical-align: middle;
}

.table td:first-child {
	font-weight: 700;
}

.table td a {
	color: var(--color-primary);
	font-weight: 700;
}

/* Font coerente anche nei componenti di librerie e nei controlli */
button, input, select, textarea, .btn, .maplibregl-ctrl, .maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib a, .maplibregl-ctrl a, .maplibregl-popup-content {
	font-family: inherit !important;
}

/* ---- Segno rosso davanti a tutti i titoli (pagine interne) ---- */
h1 {
	display: flex;
	align-items: stretch;
	gap: 12px;
}

h1::before {
	content: "";
	width: 7px;
	border-radius: 4px;
	background: var(--color-primary);
	flex-shrink: 0;
}

.hero h1 {
	display: block;
}

.hero h1::before {
	content: none;
}

.maplibregl-map,
.maplibregl-map *,
.mapboxgl-map,
.mapboxgl-map * {
	font-family: inherit !important;
}

/* padding celle (specificita' sufficiente a battere Bootstrap) */
.table.table > :not(caption) > * > * {
	padding: 16px 18px;
	line-height: 1.5;
}

.table.table > thead > tr > th {
	padding: 14px 18px;
	line-height: 1.3;
}

/* ---- Testata delle pagine interne: titolo + eventuale sottotitolo/link, poi spazio pari a quello sopra ---- */
.page-head {
	margin-bottom: 3rem;
}

.page-head > :last-child {
	margin-bottom: 0;
}

.page-head .page-sub {
	padding-left: 19px;
	color: var(--text-muted);
}

/* ---- Paginazione tabelle (evo-table) ---- */
[data-bs-theme="dark"] .st-loader {
	background-color: rgba(27, 29, 34, .9);
}

[data-bs-theme="dark"] .st-pagination .st-pagination-btn,
[data-bs-theme="dark"] .st-pagination-pages .st-pagination-page-to a {
	background-color: var(--surface);
	border-color: var(--surface-border);
}

[data-bs-theme="dark"] .st-caret-up,
[data-bs-theme="dark"] .st-caret-down {
	border-color: var(--text-muted);
	border-right-color: transparent;
	border-left-color: transparent;
}

[data-bs-theme="dark"] .st-caret-up.active {
	border-bottom-color: var(--text-strong) !important;
}

[data-bs-theme="dark"] .st-caret-down.active {
	border-top-color: var(--text-strong) !important;
}

/* ---- Pulsanti cambio stile mappa (stradale/satellitare): stessa forma a pillola delle pill dell'header/mappa ---- */
.change-map-style .card {
	background-color: var(--surface);
	color: var(--text-strong);
	border-color: var(--surface-border) !important;
	border-radius: 999px !important;
	padding: 6px 14px !important;
	font-size: 13px;
	font-weight: 600;
}

.change-map-style.active .card {
	background-color: var(--color-primary);
	color: #fff;
	border-color: var(--color-primary) !important;
}

/* ---- Bordi stondati per le mappe, coerenti con card e tabelle ---- */
#full_map {
	border-radius: 14px;
	overflow: hidden;
}

@media screen and (min-width: 992px) {
	#stage_map {
		border-radius: 14px;
		overflow: hidden;
	}
}