/**
 * Lägertabellen på webbplatsen.
 *
 * Temat laddar Bootstrap 5, så tabellen använder Bootstrapklasser där det går
 * och lägger bara till det som behövs ovanpå.
 */

.usf-lager {
	--usf-lager-marin: #011936;
	--usf-lager-linje: #e3e6ec;
	--usf-lager-dampad: #5b6472;

	margin: 2rem 0;
}

.usf-lager__rubrik {
	font-weight: 300;
	margin-bottom: 1rem;
}

.usf-lager__tom {
	color: var(--usf-lager-dampad);
	font-style: italic;
}

.usf-lager__tabell {
	border-collapse: collapse;
	margin-bottom: 0;
	width: 100%;
}

.usf-lager__tabell .usf-lager__rubrikcell {
	border-bottom: 2px solid var(--usf-lager-marin);
	color: var(--usf-lager-marin);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	padding: 0.6rem 0.75rem;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
}

.usf-lager__tabell .usf-lager__cell {
	border-bottom: 1px solid var(--usf-lager-linje);
	padding: 0.85rem 0.75rem;
	vertical-align: middle;
}

.usf-lager__tabell .usf-lager__cell--namn {
	font-weight: 500;
}

.usf-lager__tabell .usf-lager__cell--datum {
	white-space: nowrap;
}

.usf-lager__tabell .usf-lager__cell--pris {
	white-space: nowrap;
}

.usf-lager__tabell .usf-lager__cell--info > p {
	margin-bottom: 0.5rem;
}

.usf-lager__tabell .usf-lager__cell--info > p:last-child {
	margin-bottom: 0;
}

.usf-lager__rad--genomfort .usf-lager__cell {
	color: var(--usf-lager-dampad);
}

/* Etiketter för status utan anmälningslänk. */
.usf-lager__etikett {
	border-radius: 999px;
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.2;
	padding: 0.35rem 0.75rem;
	white-space: nowrap;
}

.usf-lager__etikett--planeras {
	background-color: #eef1f6;
	color: #3f4a5a;
}

.usf-lager__etikett--anmalan {
	background-color: #e4f3e8;
	color: #1b5e20;
}

.usf-lager__etikett--fulltecknat {
	background-color: #fbeedd;
	color: #8a4b08;
}

.usf-lager__etikett--genomfort {
	background-color: #f2f2f2;
	color: #6b7280;
}

/* Knappen till anmälningslänken. Temat sätter a { color: black }, därför !important. */
.usf-lager .usf-lager__knapp,
.usf-lager .usf-lager__knapp:visited {
	background-color: var(--usf-lager-marin);
	border: 1px solid var(--usf-lager-marin);
	border-radius: 999px;
	color: #fff !important;
	display: inline-block;
	font-weight: 500;
	padding: 0.4rem 1.1rem;
	text-decoration: none;
	white-space: nowrap;
}

.usf-lager .usf-lager__knapp:hover,
.usf-lager .usf-lager__knapp:focus {
	background-color: #0a2f5c;
	border-color: #0a2f5c;
	color: #fff !important;
}

.usf-lager .usf-lager__knapp:focus-visible {
	outline: 3px solid rgba(1, 25, 54, 0.35);
	outline-offset: 2px;
}

/* Ledarvyn: en liten tabell per läger med uppgifterna under varandra. */
.usf-lager__ledartabell {
	border-collapse: collapse;
	margin-bottom: 1.75rem;
	width: 100%;
}

.usf-lager__ledartabell .usf-lager__ledaretikett,
.usf-lager__ledartabell .usf-lager__ledarvarde {
	border: 1px solid var(--usf-lager-linje);
	padding: 0.6rem 0.75rem;
	vertical-align: top;
}

.usf-lager__ledartabell .usf-lager__ledaretikett {
	background-color: #f7f8fa;
	color: var(--usf-lager-marin);
	font-weight: 600;
	text-align: left;
	width: 34%;
}

.usf-lager__ledarnotering {
	margin: 0.75rem 0 0;
}

@media (max-width: 767.98px) {
	.usf-lager__ledartabell,
	.usf-lager__ledartabell tbody,
	.usf-lager__ledartabell .usf-lager__ledarrad,
	.usf-lager__ledartabell .usf-lager__ledaretikett,
	.usf-lager__ledartabell .usf-lager__ledarvarde {
		display: block;
		width: 100%;
	}

	.usf-lager__ledartabell .usf-lager__ledaretikett {
		border-bottom: 0;
		font-size: 0.8rem;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.usf-lager__ledartabell .usf-lager__ledarvarde {
		border-top: 0;
		min-height: 1.5rem;
	}
}

/* På mobilen blir varje läger ett eget kort i stället för en tabellrad. */
@media (max-width: 767.98px) {
	.usf-lager__scroll {
		overflow-x: visible;
	}

	.usf-lager__tabell,
	.usf-lager__tabell tbody,
	.usf-lager__tabell .usf-lager__rad,
	.usf-lager__tabell .usf-lager__cell {
		display: block;
		width: 100%;
	}

	.usf-lager__tabell thead {
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		overflow: hidden;
		position: absolute;
		white-space: nowrap;
		width: 1px;
	}

	.usf-lager__tabell .usf-lager__rad {
		border: 1px solid var(--usf-lager-linje);
		border-radius: 0.5rem;
		margin-bottom: 1rem;
		padding: 0.5rem 0.25rem;
	}

	.usf-lager__tabell .usf-lager__cell {
		border-bottom: 0;
		padding: 0.35rem 0.75rem;
		text-align: left;
		white-space: normal;
	}

	.usf-lager__tabell .usf-lager__cell--namn {
		font-size: 1.15rem;
		font-weight: 600;
	}

	/* Tomma celler döljs helt, annars syns bara en etikett utan värde. */
	.usf-lager__tabell .usf-lager__cell:empty {
		display: none;
	}

	/* Kolumnrubriken följer med som etikett framför värdet. */
	.usf-lager__tabell .usf-lager__cell:not(.usf-lager__cell--namn)::before {
		color: var(--usf-lager-dampad);
		content: attr(data-etikett) ": ";
		font-size: 0.8rem;
		font-weight: 600;
		letter-spacing: 0.03em;
		text-transform: uppercase;
	}

	.usf-lager__tabell .usf-lager__cell--info::before,
	.usf-lager__tabell .usf-lager__cell--status::before {
		display: block;
		margin-bottom: 0.25rem;
	}

	.usf-lager__tabell .usf-lager__cell--info {
		padding-bottom: 0.6rem;
		padding-top: 0.6rem;
	}
}