/* Allt som Bootstrap inte redan har. Layout, avstånd och färger för vanliga element sätts med Bootstraps klasser i index.html. */

:root {
	--page-gap: .5rem; /* luft över och under den vita ytan; stegvis större för varje brytpunkt */
	--sl-blue: #007bb5; /* SL:s blå, hämtad från SL:s logotyp */
	--sl-blue-rgb: 0, 123, 181;
	--sl-blue-light: #d1e7f2; /* SL-blå blandad med vitt (18 %), används vid hovring */
}

/* ---------- Sidan ---------- */
body {
	height: 100vh;
	height: 100dvh;
	padding-block: var(--page-gap); /* sidan är exakt lika hög som fönstret, så bara tabellen kan scrolla */
	/* dvh räknar bort mobilens adressfält; med vh blir sidan högre än skärmen och scrollar i onödan */
	background: #222 url("../images/bg.jpg") center / cover no-repeat fixed;
}

/* Mörkare lager över bakgrundsbilden */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	background-color: black;
	opacity: .3;
}

main {
	position: relative;
	z-index: 1;
	box-shadow: 0 0 20px black;
}

/* ---------- Tabellen ---------- */
/* Luft mellan kolumnerna: på mobil 4 px till vänster och 10 px till höger, från md (768 px) och uppåt Bootstraps standard till vänster och 20 px till höger */
.table th,
.table td {
	padding-left: .25rem;
}

.table th:not(:last-child),
.table td:not(:last-child) {
	padding-right: 10px;
}

/* Lite mindre text i tabellen på mobil, så att raderna ryms i bredd på smala skärmar */
@media (max-width: 767.98px) {
	#table-scroll {
		font-size: .9375rem;
	}
}

/* Avvikelser är dold på mobil, så Avgår är sista synliga kolumnen och behöver ingen högerpadding */
@media (max-width: 767.98px) {
	.table th:nth-child(4),
	.table td:nth-child(4) {
		padding-right: 0;
	}
}

@media (min-width: 768px) {
	.table th,
	.table td {
		padding-left: .5rem;
	}

	.table th:not(:last-child),
	.table td:not(:last-child) {
		padding-right: 20px;
	}
}

.deviations {
	max-width: 65ch;
}

/* Avvikelser på mobil visas i en popover (klicka på varningsikonen efter tiden); radbrytningar i texten bevaras */
.deviation-popover .popover-body {
	white-space: pre-line;
}

/* Tabellen scrollar inuti sig själv och rubrikraden står kvar överst. Linjen under rubrikerna ritas av skuggan, som följer
   med när tabellen scrollar (en vanlig kantlinje gör det inte), därför tas Bootstraps kantlinje bort. */
@media (min-width: 576px) { :root { --page-gap: .75rem; } }
@media (min-width: 768px) { :root { --page-gap: 1.5rem; } }
@media (min-width: 992px) { :root { --page-gap: 2rem; } }
@media (min-width: 1200px) { :root { --page-gap: 2.5rem; } }
@media (min-width: 1400px) { :root { --page-gap: 4rem; } }

#table-scroll {
	min-height: 0; /* tabellen krymper till det som blir över av fönstret och scrollar själv */
}

#table-scroll thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	background-color: var(--bs-body-bg);
	border-bottom-width: 0;
	box-shadow: inset 0 -1px 0 var(--bs-border-color);
}

/* Felrutan: \n i texten blir radbrytning */
.status-banner {
	white-space: pre-line;
}

/* ---------- Rullistor ---------- */
/* SL:s blå på valt alternativ, en ljusare variant vid hovring och markering, och radernas sidopadding 5 px smalare än standard */
.dropdown-menu {
	--bs-dropdown-link-active-bg: var(--sl-blue);
	--bs-dropdown-link-hover-bg: var(--sl-blue-light);
	--bs-dropdown-item-padding-x: calc(1rem - 5px);
	--bs-dropdown-header-padding-x: calc(1rem - 5px);
}

.form-check-input:checked {
	background-color: var(--sl-blue);
	border-color: var(--sl-blue);
}

.form-check-input:focus {
	border-color: var(--sl-blue);
	box-shadow: 0 0 0 .25rem rgba(var(--sl-blue-rgb), .25);
}

/* Knapparna ser ut som Bootstraps rullistor (form-select), men är så breda som sin text */
.select-button {
	max-width: 16rem;
}

.station-menu,
.direction-menu,
#transport,
#forecast-menu {
	width: max-content; /* så breda som den längsta raden, ingen radbrytning */
}

.station-menu {
	min-width: 20rem;
	max-width: calc(100vw - 2rem); /* bara så att menyn aldrig går utanför skärmen */
}

#forecast-menu {
	min-width: 0;
}

.station-search {
	width: calc(100% - 1rem); /* bredden minus de båda sidomarginalerna (mx-2) */
}

.station-list,
.direction-menu {
	max-height: 20rem;
	overflow-x: hidden;
	overflow-y: auto;
}

.direction-menu {
	max-width: 90vw;
}

/* Markerad rad vid sökning och pilnavigering (klassen sätts av master.js): samma färg som vid hovring */
.dropdown-item.highlighted:not(.active) {
	background-color: var(--bs-dropdown-link-hover-bg);
	color: var(--bs-dropdown-link-hover-color);
}

/* Rader med kryssruta (färdmedel, riktningar) är dropdown-item, så de får Bootstraps hovring, färger och padding */
label.dropdown-item {
	cursor: pointer;
}

label.dropdown-item:focus-within {
	background-color: var(--bs-dropdown-link-hover-bg);
}

/* "Alla ..." valt: de enskilda alternativen är ikryssade men nedtonade */
.all-selected > .dropdown-item:not(:first-child) {
	opacity: .55;
}

/* ---------- Favoritstjärnor i stationslistan ---------- */
.station-list .dropdown-item {
	padding-right: 2.25rem; /* plats för stjärnan, som ligger ovanpå raden */
}

.favorite-star {
	color: var(--bs-gray-500);
}

.favorite-star:hover {
	color: var(--bs-gray-600);
}

.favorite-star.is-favorite,
.favorite-star.is-favorite:hover {
	color: var(--bs-warning);
}

/* På den markerade (blå) raden syns en grå stjärna dåligt */
.station-list .dropdown-item.active ~ .favorite-star:not(.is-favorite) {
	color: rgba(255, 255, 255, .6);
}

/* ---------- Linjemärken ---------- */
/* Tunnelbanans färger är hämtade från SL:s tunnelbanekarta, övriga från SL:s spårtrafikkarta och bussmärkena */
.line-green { background-color: #20a64b; }
.line-red { background-color: #e30613; }
.line-blue { background-color: #078ed0; }
.line-bus-red { background-color: #ba0d2b; }
.line-bus-blue { background-color: #015ca3; }
.line-boat { background-color: #00aeef; }
.line-commuter { background-color: #f067a6; }
.line-tram-7 { background-color: #80857e; }
.line-tram-12 { background-color: #738ba4; }
.line-tram-21 { background-color: #b66732; }
.line-tram-25 { background-color: #00aaad; }
.line-tram-27 { background-color: #a05da6; }
.line-tram-30 { background-color: #de8221; }

a.line-badge:hover,
a.line-badge:focus-visible {
	filter: brightness(.9);
}

/* ---------- Symboler för trafikslag ---------- */
/* Filerna ligger i mappen assets/images/ och får textens färg (currentColor). */
.mode-symbol {
	display: inline-block;
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	opacity: .75;
	-webkit-mask: center / contain no-repeat;
	mask: center / contain no-repeat;
}

.line-badge .mode-symbol {
	opacity: 1;
}

.mode-symbol-metro {
	-webkit-mask-image: url("../images/metro.svg");
	mask-image: url("../images/metro.svg");
}

.mode-symbol-commuter {
	-webkit-mask-image: url("../images/commuter.svg");
	mask-image: url("../images/commuter.svg");
}

.mode-symbol-rail {
	-webkit-mask-image: url("../images/rail.svg");
	mask-image: url("../images/rail.svg");
}

.mode-symbol-bus {
	-webkit-mask-image: url("../images/bus.svg");
	mask-image: url("../images/bus.svg");
}

.mode-symbol-boat {
	-webkit-mask-image: url("../images/boat.svg");
	mask-image: url("../images/boat.svg");
}