/* ErdeMED Content Blocks — pagespeed-optimiert, nur bei Bedarf geladen.
   Nutzt die vorhandenen Theme-/Bricks-Variablen (Dark-Mode kippt automatisch). */

:root {
	--em-table-head-bg: var(--neutral-active-color, #f1f5f9);
	--em-border: var(--border-color, #e2e8f0);
	--em-radius: 8px;
	--em-cell-min: 120px;
	--em-firstcol-min: 160px;
	--em-ic-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3m8 0h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E");
}

/* Body-Scroll sperren, solange der Vollbild-Dialog offen ist */
html.em-scroll-lock,
html.em-scroll-lock body {
	overflow: hidden !important;
}

/* =========================================================
   TABELLE
   ========================================================= */

.em-table-block {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	margin: 1.25rem 0;
}

.em-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--em-border);
	border-radius: var(--em-radius);
	outline: none;
	/* Scroll-Schatten (Lea-Verou-Technik): Cover-Verläufe (local) verdecken die
	   Kanten-Schatten (scroll) am Anfang/Ende → Schatten erscheint nur, wenn in
	   diese Richtung weiter gescrollt werden kann. */
	background-color: var(--panel-color, #fff);
	background-image:
		linear-gradient(to right, var(--panel-color, #fff), rgba(0, 0, 0, 0)),
		linear-gradient(to left, var(--panel-color, #fff), rgba(0, 0, 0, 0)),
		radial-gradient(farthest-side at 0 50%, rgba(15, 23, 42, 0.16), rgba(0, 0, 0, 0)),
		radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.16), rgba(0, 0, 0, 0));
	background-position: left center, right center, left center, right center;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

/* Scrollbar wie im erdemed-ai Chatfenster (schlank), aber über Theme-Variablen
   → passt sich automatisch dem Dark-Mode an (--shadow-color ≈ #c9d5e0 hell). */
.em-table-wrap,
.em-table-dialog__body {
	scrollbar-width: thin;
	scrollbar-color: var(--shadow-color, #c9d5e0) transparent;
}
.em-table-wrap::-webkit-scrollbar,
.em-table-dialog__body::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
.em-table-wrap::-webkit-scrollbar-track,
.em-table-dialog__body::-webkit-scrollbar-track {
	background: transparent;
}
.em-table-wrap::-webkit-scrollbar-thumb,
.em-table-dialog__body::-webkit-scrollbar-thumb {
	background: var(--shadow-color, #c9d5e0);
	border-radius: 999px;
	border: 2px solid transparent;
	background-clip: content-box;
}
.em-table-wrap::-webkit-scrollbar-thumb:hover,
.em-table-dialog__body::-webkit-scrollbar-thumb:hover {
	background: var(--text-color, #25303c);
	border: 2px solid transparent;
	background-clip: content-box;
}

.em-table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 0;
	background: transparent;
	font-size: 14px;
	line-height: 1.5;
}

.em-table--fixed { table-layout: fixed; }

.em-table th,
.em-table td {
	min-width: var(--em-cell-min, 120px);
	padding: 0.6rem 0.85rem;
	text-align: left;
	vertical-align: top;
	background-color: transparent;
	border-right: 1px solid var(--em-border);
	border-bottom: 1px solid var(--em-border);
	overflow-wrap: break-word;
}

/* Erste Spalte (Label-Spalte): breiterer Mindestwert.
   (Hartes max-width auf Tabellenzellen ist bei table-layout:auto wirkungslos –
   der Browser ignoriert es laut Spec. Lange Labels brechen via overflow-wrap um.) */
.em-table th:first-child,
.em-table td:first-child {
	min-width: var(--em-firstcol-min, 160px);
}

/* Voll-Breite-Sektionszeilen (colspan) brauchen keine Mindestbreite */
.em-table td[colspan],
.em-table th[colspan] {
	min-width: 0;
}

/* rechte/untere Außenkante nicht doppeln (Wrap hat schon Border) */
.em-table tr > *:last-child { border-right: 0; }
.em-table tr:last-child > * { border-bottom: 0; }

/* Kopfzeile (echtes thead) fett */
.em-table thead th {
	font-weight: 700;
}

/* Header-Hintergrund: alle th, die erste Spalte UND die erste Zeile der Tabelle
   (auch wenn die Kopfzeile aus <td><strong> statt <th> gebaut ist).
   Fettung kommt aus dem Inhalt (<strong>) – wir bolden NICHT zusätzlich. */
.em-table th,
.em-table th:first-child,
.em-table td:first-child,
.em-table > thead > tr:first-child > *,
.em-table > tbody:first-child > tr:first-child > *,
.em-table > tr:first-child > * {
	background-color: var(--em-table-head-bg);
}

/* Nie doppelt fetten: vorhandenes Bold liefert die Fettung, hart auf max. 700 gekappt */
.em-table strong,
.em-table b {
	font-weight: 700;
}

/* Sticky Kopf + erste Spalte (wirkt v.a. im Vollbild-Dialog) */
.em-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
}
/* Sticky erste Spalte NUR ab Tablet/Desktop – auf Mobile fräße die
   eingefrorene 160px-Spalte zu viel Breite, daher dort normal mitscrollen. */
@media (min-width: 768px) {
	.em-table th:first-child,
	.em-table td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
	}
	.em-table thead th:first-child { z-index: 3; }
}

/* Vollbild-Button: OBERHALB der Tabelle, rechtsbündig, ohne Rahmen.
   Hintergrund = Tabellenkopf-Farbe (--neutral-active-color). Icon per CSS-Maske. */
.em-table-full {
	align-self: flex-end;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 8px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: var(--text-color, #25303c);
	background: var(--neutral-active-color, #f1f5f9);
	border: 0;
	border-radius: 6px;
	cursor: pointer;
	transition: filter 0.2s;
}
.em-table-full:hover,
.em-table-full:focus-visible {
	filter: brightness(0.96);
}
.em-table-full__ic {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: var(--em-ic-expand) center / contain no-repeat;
	        mask: var(--em-ic-expand) center / contain no-repeat;
}

/* =========================================================
   VOLLBILD-LIGHTBOX (Overlay-<div>, bewusst NICHT top-layer/showModal –
   damit die Tooltip-Popover [z-index 99999] darüber sichtbar bleiben und
   in ihren korrekten Dokument-Koordinaten liegen)
   ========================================================= */

.em-table-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99990; /* unter Tooltip-Popover (99999) / -Backdrop (99998) */
	display: none;
	align-items: center;
	justify-content: center;
	padding: 2vmin;
}
.em-table-lightbox.is-open {
	display: flex;
}
.em-table-lightbox::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(89, 123, 148, 0.3);
	-webkit-backdrop-filter: saturate(130%) blur(2px);
	        backdrop-filter: saturate(130%) blur(2px);
}
.em-table-lightbox__panel {
	position: relative; /* über dem ::before-Backdrop */
	display: flex;
	flex-direction: column;
	width: min(96vw, 1400px);
	max-width: 96vw;
	max-height: 92vh;
	background: var(--panel-color, #fff);
	color: var(--text-color, inherit);
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.em-table-dialog__bar {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: flex-end;
	padding: 8px;
	background: var(--panel-color, #fff);
	border-bottom: 1px solid var(--em-border);
	z-index: 10;
}
.em-table-dialog__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	color: var(--text-color, #25303c);
	background: transparent;
	border: 0;
	border-radius: 0;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.2s;
}
.em-table-dialog__close:hover,
.em-table-dialog__close:focus-visible {
	opacity: 1;
}

.em-table-dialog__body {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	max-height: calc(92vh - 57px);
	padding: 2rem;
}
/* im Dialog braucht der Wrap keinen eigenen Rahmen mehr */
.em-table-dialog__body .em-table-block { margin: 0; }
.em-table-dialog__body .em-table-full { display: none; }
.em-table-dialog__body .em-table-wrap {
	border: 1px solid var(--em-border);
	max-height: 100%;
}

/* FAB (Chat) + Back-to-top ausblenden, solange das Lightbox offen ist –
   sie haben einen sehr hohen z-index und würden das Overlay sonst überlagern. */
body.em-lightbox-open .erdemed-ai-fab,
body.em-lightbox-open .brxe-back-to-top {
	display: none !important;
}

/* Mobile: Panel = Vollflächen-Sheet, in beide Richtungen scrollbar */
@media (max-width: 767px) {
	.em-table-lightbox { padding: 0; }
	.em-table-lightbox__panel {
		width: 100vw;
		max-width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		border-radius: 0;
	}
	.em-table-dialog__body { max-height: calc(100dvh - 57px); }
}

/* =========================================================
   HIGHLIGHT-HEADING (3 Farbkombis)
   ========================================================= */

.em-heading {
	font-weight: 600;
	border: none;
	border-radius: var(--em-radius);
	background-color: var(--color-default);
	color: var(--text-color-default);
	padding: 1.4rem 1.5rem 1.5rem;
	margin: 1rem -0.5rem;
}
.em-heading strong,
.em-heading b { font-weight: 700; }

.em-heading-inner {
	display: block;
	text-align: left;
	font-size: 14px;
	padding: 0;
	border: none;
}

.em-heading--warning {
	color: var(--text-color-warning);
	background-color: var(--color-warning);
}
.em-heading--blue {
	color: var(--text-color-blue);
	background-color: var(--color-blue);
}

@media (max-width: 1024px) {
	.em-heading-inner { font-size: 15px; }
}
@media (max-width: 767px) {
	.em-heading-inner { font-size: 15px; }
	.em-heading {
		margin-left: -0.5rem;
		padding: 1.3rem 1rem 1.4rem;
	}
}

/* =========================================================
   BUTTON (Ersatz für [su_button] – repliziert .su-button-style-default)
   ========================================================= */

.em-button {
	display: inline-block;
	font-weight: 600;
	line-height: 1.4;
	color: var(--primary-color, #eef3f8);
	background-color: var(--toggle-color, #334352);
	border: 0;
	border-radius: 6px;
	text-decoration: none;
	transition: color 0.35s, background-color 0.35s;
}
.em-button span {
	display: inline-block;
	padding: 4px 16px;
	color: inherit;
	font-weight: 600;
}
.em-button:hover,
.em-button:focus-visible {
	color: var(--panel-color, #fff);
}

@media (max-width: 767px) {
	.em-button span { padding: 10px 15px; }
}