/**
 * cm-bsf-planer — Frontend-Styles
 *
 * Hinweis: Filter-Header (.contenedor / .custom-select-cont / .planerKatClick / .planerSub)
 * wird vom Theme-CSS gestylt — wir liefern hier NUR die Listen- + Loading-Styles
 * und einen kleinen Override für unseren Clear-Date-Button.
 */

/* ============================================================
   Wrapper + Loading-State
   ============================================================ */
.cmbsf-planer-wrap {
	max-width: 100%;
	margin: 0;
}

/* ============================================================
   Filter-Header — Sub-Dropdowns als Overlay statt Doc-Flow.
   Gescoped auf .cmbsf-planer-wrap, damit der alte
   /schuetzenplaner/ unangetastet bleibt.
   ============================================================ */
.cmbsf-planer-wrap .custom-select-cont {
	position: relative;
}

.cmbsf-planer-wrap .planerSub {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0;
	z-index: 100;
	background: #fff;
	border: 1px solid #ccc;
	border-top: none;
	min-width: 100%;
	max-width: 320px;
	padding: 4px 0;
	list-style: none;
	box-shadow: 0 4px 12px rgba(0,0,0,0.12);
	max-height: 60vh;
	overflow-y: auto;
}

.cmbsf-planer-wrap .planerSub li.active {
	background: #FFDE07 !important; /* Marken-Gelb (Florian 15.06.2026, war #abddf7 Blau) */
}

/* Top-Header (Hierarchie-Label) bekommt weißen Hintergrund, sobald
   ein Sub-Item darunter ausgewählt ist — visueller Hinweis. */
.cmbsf-planer-wrap .planerKatClick.has-active {
	background: #fff !important;
}

/* Heart-Icons: leeres Heart schwarz, gefülltes Heart rot.
   Sicherheits-Override mit hoher Spezifität (Theme-CSS-Konflikte vermeiden). */
.cmbsf-planer-wrap .cmbsf-card .icon_heart_alt:before,
.cmbsf-planer-wrap .cmbsf-card .icon_heart_alt_full:before {
	font-family: 'FontAwesome';
	font-size: 1.5em;
	padding-left: 1px;
}
.cmbsf-planer-wrap .cmbsf-card .icon_heart_alt:before {
	content: "\f08a";
	color: #000;
}
.cmbsf-planer-wrap .cmbsf-card .icon_heart_alt_full:before {
	content: "\f004";
	color: #FF0000 !important;
}

.cmbsf-planer-wrap.cmbsf-is-loading .cmbsf-list {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.cmbsf-filter-status {
	margin: 8px 0 16px;
	min-height: 22px;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.cmbsf-loading {
	font-size: 13px;
	color: #666;
	font-style: italic;
}

/* Zurücksetzen-Button — kommt jetzt als <div class="resetPlaner"> über dem
   Filter-Container, das Theme-CSS .resetPlaner stylt das. Nur Cursor-Hint. */
.cmbsf-planer-wrap .resetPlaner.cmbsf-reset {
	cursor: pointer;
}

/* ============================================================
   2-Spalten-Aufteilung (Filter darüber bleibt voll-breit)
   ============================================================ */
.cmbsf-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	align-items: flex-start;
}

.cmbsf-row .cmbsf-main {
	flex: 1 1 0;
	min-width: 0;
}

.cmbsf-row .cmbsf-sidebar {
	flex: 0 0 22%;
	min-width: 220px;
	max-width: 320px;
}

.cmbsf-row--no-sidebar .cmbsf-main {
	flex: 1 1 100%;
}

@media (max-width: 900px) {
	.cmbsf-row {
		flex-direction: column;
	}
	.cmbsf-row .cmbsf-sidebar {
		flex: 1 1 100%;
		max-width: none;
		width: 100%;
	}
}

/* ============================================================
   List
   ============================================================ */
.cmbsf-list {
	transition: opacity 0.15s ease;
}

.cmbsf-empty {
	padding: 40px 20px;
	text-align: center;
	color: #888;
	font-style: italic;
}

/* Toggle-Title soll als klickbar erkennbar sein */
.cmbsf-card .et_pb_toggle_title {
	cursor: pointer;
}

/* Card darf beim Aufklappen mitwachsen (Theme-CSS schneidet sonst ab) */
.cmbsf-planer-wrap .cmbsf-card,
.cmbsf-planer-wrap .cmbsf-card .panelText,
.cmbsf-planer-wrap .cmbsf-card .et_pb_toggle,
.cmbsf-planer-wrap .cmbsf-card .et_pb_toggle_content {
	height: auto !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Card als Block Formatting Context — Theme rendert .panelImage + .panelText
   als float:left, ohne BFC kollabiert die Card-Höhe um die Floats herum
   (gelber Border bleibt oben hängen, ausgeklappter Toggle ragt raus). */
.cmbsf-planer-wrap .cmbsf-card.loadMore {
	display: flow-root !important;
}

/* ============================================================
   Box (Mein Schützenplan) — Klassen .plan_*, .icon_* werden vom
   Theme-CSS gestylt; hier nur Cursor + Hover für die Buttons.
   ============================================================ */
.cmbsf-planerbox .plan_line.showPlaner,
.cmbsf-planerbox .plan_line.downloadPlaner,
.cmbsf-planerbox .plan_line.trashBox {
	cursor: pointer;
}

.cmbsf-planerbox .plan_line:hover {
	opacity: 0.85;
}

/* ============================================================
   Modal
   ============================================================ */
.cmbsf-modal[hidden] {
	display: none;
}

.cmbsf-modal {
	position: fixed;
	top: 0; left: 0; right: 0; bottom: 0;
	z-index: 99999;
}

.cmbsf-modal-backdrop {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: rgba(0, 0, 0, 0.55);
}

.cmbsf-modal-window {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 6px;
	max-width: 1000px;
	width: calc(100% - 40px);
	max-height: 90vh;
	overflow-y: auto;
	padding: 0;
	box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

.cmbsf-modal-window .cmbsf-modal-title {
	padding: 18px 24px 0;
}

.cmbsf-modal-window .cmbsf-modal-body {
	padding: 0;
}

.cmbsf-modal-window .cmbsf-modal-footer {
	padding: 12px 24px;
}

/* Plan-Modal-Inhalt: Header/Footer-Bilder voll-breit, bsf_list normal */
.cmbsf-modal .cmbsf-plan-content #header img,
.cmbsf-modal .cmbsf-plan-content #footer img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 120px;
	object-fit: cover;
}

.cmbsf-modal .cmbsf-plan-content .bsf_list {
	padding: 18px 24px;
}

.cmbsf-modal .cmbsf-del-event {
	cursor: pointer;
	margin-left: 10px;
	color: #c00;
}
.cmbsf-modal .cmbsf-del-event:hover {
	color: #800;
}

.cmbsf-modal-close {
	position: absolute;
	top: 8px;
	right: 12px;
	background: transparent;
	border: none;
	font-size: 28px;
	line-height: 1;
	color: #666;
	cursor: pointer;
}
.cmbsf-modal-close:hover { color: #000; }

.cmbsf-modal-title {
	margin: 0 0 16px;
	font-size: 22px;
}

.cmbsf-modal-body {
	margin-bottom: 16px;
}

.cmbsf-modal-empty,
.cmbsf-modal-loading {
	padding: 30px 10px;
	text-align: center;
	color: #888;
	font-style: italic;
}

.cmbsf-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	border-top: 1px solid #eee;
	padding-top: 12px;
}

.cmbsf-modal-print,
.cmbsf-modal-close-btn {
	background: #2c79b0;
	color: #fff;
	border: none;
	border-radius: 3px;
	padding: 8px 16px;
	font-size: 14px;
	cursor: pointer;
}
.cmbsf-modal-close-btn { background: #888; }
.cmbsf-modal-print:hover { background: #1f5a85; }
.cmbsf-modal-close-btn:hover { background: #666; }

body.cmbsf-modal-open {
	overflow: hidden;
}

/* ============================================================
   Print — visibility-Trick statt display:none (robuster, weil
   Container nicht "verschwinden" und Print-Renderer Modal findet)
   ============================================================ */
@media print {
	/* Erst ALLES unsichtbar machen — Container bleiben im Layout */
	body.cmbsf-modal-open * {
		visibility: hidden;
	}
	/* Dann Modal + alles darin wieder sichtbar */
	body.cmbsf-modal-open .cmbsf-modal,
	body.cmbsf-modal-open .cmbsf-modal * {
		visibility: visible;
	}
	/* Modal aus Fixed/Translate raus, an Seitenanfang positionieren */
	body.cmbsf-modal-open .cmbsf-modal {
		position: absolute !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
	}
	body.cmbsf-modal-open .cmbsf-modal-backdrop {
		display: none !important;
	}
	body.cmbsf-modal-open .cmbsf-modal-window {
		position: static !important;
		transform: none !important;
		box-shadow: none !important;
		max-height: none !important;
		max-width: 100% !important;
		width: 100% !important;
		overflow: visible !important;
		padding: 10mm !important;
	}
	/* Buttons + Schließen + Heart + EventButton im Druck nicht zeigen */
	body.cmbsf-modal-open .cmbsf-modal-close,
	body.cmbsf-modal-open .cmbsf-modal-footer,
	body.cmbsf-modal-open .cmbsf-modal .icon_heart_alt,
	body.cmbsf-modal-open .cmbsf-modal .icon_heart_alt_full,
	body.cmbsf-modal-open .cmbsf-modal .EventButton {
		visibility: hidden !important;
	}
	/* Aufgeklappte Card-Beschreibungen zwingend zeigen */
	body.cmbsf-modal-open .cmbsf-modal .et_pb_toggle_content {
		display: block !important;
		visibility: visible !important;
	}
	/* Page-Breaks innerhalb einer Card vermeiden */
	body.cmbsf-modal-open .cmbsf-modal .cmbsf-card {
		page-break-inside: avoid;
	}
}