/**
 * Frontend-Styles der Badplaner-Anbindung.
 *
 * Farben laufen über CSS-Variablen mit Fallback, damit dieselbe Datei auf
 * friedrich-lange.de und sanikue.de zum jeweiligen Corporate Design passt.
 * Überschreiben lässt sich alles im Theme/Oxygen über :root.
 */

:root {
	--flbp-blue: #00549e;
	--flbp-blue-dark: #013f78;
	--flbp-blue-light: #d1eefa;
	--flbp-blue-tint: #eaf6fd;
	--flbp-ink: #4d4d4d;
	--flbp-muted: #8a929a;
	--flbp-line: #e6eaee;
	/* Durchgehend eckig – Vorgabe des Auftraggebers. */
	--flbp-radius: 0;
}

/* --- Planungscode-Chip --------------------------------------------------- */

.flbp-chip {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	background: #fff;
	border: 1px solid var(--flbp-blue-light);
	border-radius: var(--flbp-radius);
	padding: 10px 12px 10px 16px;
}

.flbp-chip__label {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--flbp-muted);
}

.flbp-chip__code {
	font-family: inherit;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 2px;
	color: var(--flbp-blue);
	background: none;
	padding: 0;
}

.flbp-chip__copy {
	font: inherit;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--flbp-blue);
	border: 1.5px solid var(--flbp-blue-light);
	background: var(--flbp-blue-tint);
	border-radius: 0;
	padding: 6px 10px;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}

.flbp-chip__copy:hover,
.flbp-chip__copy:focus-visible {
	background: var(--flbp-blue);
	border-color: var(--flbp-blue);
	color: #fff;
}

.flbp-chip__copy[data-flbp-copied="1"] {
	background: var(--flbp-blue);
	border-color: var(--flbp-blue);
	color: #fff;
}

/* --- Icons ---------------------------------------------------------------- */
/* Inline-SVGs übernehmen über currentColor die Textfarbe des Zustands. */

.flbp-icon {
	width: 1em;
	height: 1em;
	flex: none;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* Im Code-Knopf wechseln Kopier-Symbol und Häkchen. */
.flbp-code__icon {
	display: inline-flex;
	align-items: center;
	font-size: 12px;
	opacity: 0.6;
}

.flbp-icon--haken {
	display: none;
}

.flbp-code[data-flbp-copied="1"] .flbp-icon--kopieren {
	display: none;
}

.flbp-code[data-flbp-copied="1"] .flbp-icon--haken {
	display: inline-block;
}

/* --- Links --------------------------------------------------------------- */

.flbp-link {
	display: inline-block;
	font-weight: 700;
	color: var(--flbp-blue);
	text-decoration: none;
}

.flbp-link:hover,
.flbp-link:focus-visible {
	text-decoration: underline;
}

.flbp-link--pdf::after,
.flbp-link--deeplink::after {
	content: "";
	display: inline-block;
	width: 0.85em;
	height: 0.85em;
	margin-left: 0.4em;
	vertical-align: -0.05em;
	background-color: currentColor;
	-webkit-mask: url( '../icons/extern.svg' ) no-repeat center / contain;
	mask: url( '../icons/extern.svg' ) no-repeat center / contain;
}

/* --- Hinweis (fehlende ID) ----------------------------------------------- */

.flbp-note {
	background: var(--flbp-blue-tint);
	border: 1px solid var(--flbp-blue-light);
	border-radius: var(--flbp-radius);
	color: var(--flbp-ink);
	font-size: 14px;
	line-height: 1.5;
	padding: 12px 16px;
	margin: 0 0 16px;
}

/* --- Buttons -------------------------------------------------------------- */

.flbp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 30px;
	border: 2px solid transparent;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.flbp-btn--primary {
	background: var(--flbp-blue);
	color: #fff;
}

.flbp-btn--primary:hover,
.flbp-btn--primary:focus-visible {
	background: var(--flbp-blue-dark);
	color: #fff;
	text-decoration: none;
}

.flbp-btn--outline {
	background: transparent;
	color: var(--flbp-blue);
	border-color: var(--flbp-blue);
}

.flbp-btn--outline:hover,
.flbp-btn--outline:focus-visible {
	background: var(--flbp-blue);
	color: #fff;
}

.flbp-btn--sm {
	padding: 10px 18px;
	font-size: 13px;
	letter-spacing: 1px;
}

.flbp-btn--xs {
	padding: 6px 12px;
	font-size: 11.5px;
	letter-spacing: 0.8px;
}

/* --- Planungscode als Kopier-Schaltfläche -------------------------------- */

.flbp-code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: inherit;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--flbp-blue);
	background: var(--flbp-blue-tint);
	border: 1px solid var(--flbp-blue-light);
	border-radius: 0;
	padding: 5px 9px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.flbp-code:hover,
.flbp-code:focus-visible {
	background: var(--flbp-blue);
	border-color: var(--flbp-blue);
	color: #fff;
}

.flbp-code:hover .flbp-code__icon {
	opacity: 1;
}

/* Rückmeldung nach dem Kopieren. */
.flbp-code[data-flbp-copied="1"] {
	background: var(--flbp-blue-dark);
	border-color: var(--flbp-blue-dark);
	color: #fff;
}

.flbp-code--gross {
	font-size: 17px;
	letter-spacing: 2px;
	padding: 9px 14px;
}

/* --- Interne Übersicht (O2) ----------------------------------------------- */

.flbp-list__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 0 0 18px;
}

.flbp-list__filters label {
	margin: 0;
}

.flbp-list__search {
	flex: 1 1 320px;
}

/* Kompakter als der Fliesstext der Seite: Die Filterzeile ist Werkzeug, nicht
   Inhalt. Mit `font: inherit` erbten die Felder die Schriftgrösse der Website
   und wirkten dadurch wuchtiger als die Tabelle darunter. */
.flbp-list__filters input,
.flbp-list__filters select {
	width: 100%;
	height: 38px;
	border: 1.5px solid var(--flbp-line);
	border-radius: 0;
	padding: 0 10px;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.2;
	background: #fff;
	color: var(--flbp-ink);
}

/* Auswahlfelder werden vom Browser so breit wie ihre längste Option – dann
   klafft zwischen Text und Pfeil eine Lücke, die wie ein Fehler aussieht.
   Eigener Pfeil, passgenaue Breite, Abstand rechts nur so gross wie nötig. */
.flbp-list__filters select {
	width: auto;
	max-width: 100%;
	padding-right: 28px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url( 'data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m19.434 8.235c-.1513-.36556-.4077-.67802-.7366-.89785-.329-.21984-.7158-.33717-1.1114-.33715h-11.172c-.3955.00008-.78209.11743-1.11091.3372s-.5851.53209-.73644.89749-.19095.76747-.11381 1.15537c.07713.38791.26754.74424.54716 1.02394l5.586 5.586c.3751.3749.8837.5856 1.414.5856s1.0389-.2107 1.414-.5856l5.586-5.586c.2797-.2796.4702-.63584.5474-1.02369.0773-.38785.0378-.78989-.1134-1.15531z" fill="%234d4d4d"/></svg>' );
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 11px 11px;
}

.flbp-list__filters select::-ms-expand {
	display: none;
}

.flbp-list__filters input:focus,
.flbp-list__filters select:focus {
	outline: none;
	border-color: var(--flbp-blue);
	box-shadow: 0 0 0 3px rgba(0, 84, 158, 0.12);
}

.flbp-list__meta {
	color: var(--flbp-muted);
	font-size: 14px;
	margin: 0 0 10px;
}

.flbp-list__scroll {
	overflow-x: auto;
}

.flbp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
}

.flbp-table th,
.flbp-table td {
	text-align: left;
	padding: 12px 14px;
	border-bottom: 1px solid var(--flbp-line);
	vertical-align: top;
}

.flbp-table th {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: var(--flbp-muted);
	white-space: nowrap;
}

/* Ganze Zeile ist anklickbar – der Zeiger sagt das auch. */
.flbp-table tbody tr[data-flbp-row] {
	cursor: pointer;
}

.flbp-table tbody tr:hover {
	background: var(--flbp-blue-tint);
}

.flbp-table__name {
	font-weight: 700;
	color: var(--flbp-blue);
	text-decoration: none;
}

.flbp-table__name:hover {
	text-decoration: underline;
}

.flbp-table__leer {
	color: var(--flbp-muted);
}

.flbp-table__actions {
	white-space: nowrap;
}

.flbp-table__actions .flbp-btn {
	margin: 2px 6px 2px 0;
	width: auto;
}

.flbp-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 18px;
}

.flbp-pagination a,
.flbp-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	border: 1px solid var(--flbp-line);
	border-radius: 0;
	text-decoration: none;
	color: var(--flbp-blue);
	font-weight: 700;
	font-size: 14px;
}

.flbp-pagination .current {
	background: var(--flbp-blue);
	border-color: var(--flbp-blue);
	color: #fff;
}

.flbp-detail {
	background: #fff;
	padding: 0;
	margin: 0 0 24px;
}

.flbp-detail__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.flbp-detail__head h2 {
	margin: 0;
	font-size: 20px;
	color: var(--flbp-blue);
}

.flbp-detail__badge {
	display: inline-block;
	margin-left: 10px;
	padding: 3px 10px;
	border-radius: 0;
	background: var(--flbp-blue-tint);
	color: var(--flbp-blue);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.5px;
	vertical-align: middle;
}

.flbp-detail__close {
	color: var(--flbp-muted);
	text-decoration: none;
	font-size: 18px;
	line-height: 1;
}

.flbp-detail__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
}

/* --- Detailansicht als eigene Seite -------------------------------------- */

.flbp-detail--seite {
	/* Bewusst ohne Rahmen und ohne farbige Oberkante – die Seite trägt sich
	   über Typografie und Abstände. */
	padding: 0;
	border: 0;
	background: transparent;
}

.flbp-detail__zurueck {
	margin: 0 0 18px;
}

.flbp-detail__aktionen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.flbp-detail__aktionen .flbp-btn {
	width: auto;
}

.flbp-detail__herkunft {
	margin: 0;
	font-size: 13px;
	color: var(--flbp-muted);
}

/* --- Zeitraumfilter ------------------------------------------------------ */

.flbp-list__zeitraum {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.flbp-list__zeitraum[hidden] {
	display: none;
}

.flbp-detail h3 {
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	color: var(--flbp-muted);
	margin: 0 0 10px;
}

.flbp-detail dl {
	margin: 0;
}

.flbp-detail dt {
	font-size: 12px;
	color: var(--flbp-muted);
	margin-top: 8px;
}

.flbp-detail dd {
	margin: 2px 0 0;
	color: var(--flbp-ink);
}

@media (max-width: 780px) {
	.flbp-table thead {
		display: none;
	}

	.flbp-table tbody tr {
		display: block;
		border-bottom: 2px solid var(--flbp-line);
		padding: 8px 0;
	}

	.flbp-table td {
		display: flex;
		justify-content: space-between;
		gap: 16px;
		border: 0;
		padding: 6px 0;
	}

	.flbp-table td::before {
		content: attr(data-label);
		font-size: 11px;
		font-weight: 800;
		letter-spacing: 1.2px;
		text-transform: uppercase;
		color: var(--flbp-muted);
	}
}

/* --- Screenreader --------------------------------------------------------- */

.flbp-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.flbp-chip__copy {
		transition: none;
	}
}