body {
    background: #fff url(../img/header-bg.png) 0 0 repeat;
    }

.ajax-loader {
    position: absolute;
    z-index: 10001;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background: #efefef url(../img/ajax-loader-bonicloud-spin-transparent.gif) center 180px no-repeat;
    opacity: 0.6;
    }

/* Inline loader used inside archive details while history is fetched */
.archive-inline-loader {
    display: inline-block;
    padding: 6px 8px;
    margin: 6px 0;
    border-radius: 4px;
    background: rgba(25,176,247,0.08);
    color: var(--primary-color);
    font-size: 12px;
}

/* Animate the glyphicon refresh icon */
.glyphicon-refresh-animate {
    animation: spin 0.7s infinite linear;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.demo-overlay {
    position: absolute;
    z-index: 10001;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: #efefef;
    opacity: 0.4;
    font-weight: bold;
    font-size: 25px;
    text-align: center;
    line-height: 1250%;
    }

.control-label-left {
    padding-top: 7px;
    margin-bottom: 0;
    text-align: left;
    }

.monitoring-title {
    font-weight: 600;
    font-size: 15px;
    text-align: left;
    color: var(--primary-color);
    }

.monitoring-headline {
    font-weight: 500;
    font-size: 14px;
    text-align: left;
    color: var(--primary-color);
    }

.standardmonitoring-info-tile {
    font-weight: 600;
    font-size: 13px;
    text-align: left;
    }

.standardmonitoring-info {
    font-weight: 400;
    font-size: 13px;
    text-align: left;
    padding-left: 30px;
    }

.subheader-wrapper {
    margin-top: 70px;
    margin-bottom: 30px;
    padding-top: 10px;
    padding-bottom: 10px;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.2);
    }

.subheader {
    background-color: var(--primary-color);
    height: 60px;
    }

.navbar-inverse {
    background-image: url(../img/header-bg.png);
    background-repeat: repeat;
    border-radius: 0px;
    }

.navbar-inverse {
    border-color: var(--primary-color);
    }

.navbar-inverse .navbar-nav > .open > a,
.navbar-inverse .navbar-nav > .active > a {
    background-image: none;
    background-color: var(--primary-color);
    background-repeat: repeat-x;
    box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
    }

.navbar-inverse .navbar-nav > li > a {
    color: var(--text-color);
    }

.navbar-inverse .navbar-nav > li > a:hover,
.navbar-inverse .navbar-nav > li > a:focus {
    color: var(--primary-color);
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: var(--primary-color);
}

/* Suchergebnis-Details: Pfeil im Button bei geöffnetem Zustand um 180° drehen */
.sr-chevron {
    display: inline-block;
    transition: transform 0.2s ease-in-out;
}
.chevron-rotated {
    transform: rotate(180deg);
}

.well {
    background-image: none;
    background-color: #f8f8f8;
    background-repeat: repeat-x;
    border-color: #dcdcdc;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 1px 0 rgba(255, 255, 255, 0.1);
    }

.well-headline {
    background: #fff url(../img/bg-dark.png) 0 0 repeat;
    background-color: rgba(100, 100, 100, 0.05);
    margin: -20px;
    margin-bottom: 15px;
    padding: 15px;
    font-size: 16px;
    color: #f39b3c;
    text-transform: uppercase;
    border-bottom: 2px solid #19b0f7;
    }

.btn-disabled {
    background-image: linear-gradient(to bottom, #FFF 0%, #CCCCCC 100%);
    background-repeat: repeat-x;
    border-color: #c1c1c1;
    color: #c2c2c2;
    pointer-events: none;
    cursor: default;
    }

.btn-disabled:hover,
.btn-disabled:focus {
    background-image: linear-gradient(to bottom, #FFF 0%, #CCCCCC 100%);
    background-repeat: repeat-x;
    border-color: #c1c1c1;
    color: #c2c2c2;
    pointer-events: none;
    cursor: default;
    }

.btn-primary {
    background-image: linear-gradient(to bottom, #19b0f7 0%, #1386bd 100%);
    background-repeat: repeat-x;
    border-color: #aaa;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    }

.btn-primary:hover,
.btn-primary:focus {
    background-color: #19b0f7;
    background-image: none;
    background-position: 0 0;
    border-color: #aaa;
    }

.bottomspace20 {
    margin-bottom: 20px;
    }

.bottomspace5 {
    margin-bottom: 5px;
    }

.odd {
    background-color: var(--bg-alt);
    }

.even {
    background-color: var(--bg-color);
    }

.table-striped > tbody > tr:nth-of-type(2n+1) {
    background-color: var(--bg-alt);
    }

.table-striped > tbody > tr:nth-of-type(2n) {
    background-color: var(--bg-color);
    }

.table-striped > tbody > tr {
    font-size: 12px;
    }

.table-striped > tbody > tr:hover {
    background-color: var(--bg-color);
    }

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    }

div.dataTables_info {
    position: absolute;
    padding-left: 8px;
    }

div.dataTables_wrapper div.dataTables_paginate {
    float: none;
    text-align: center;
    }

.navbar-nav > li > a {
    padding-bottom: 25px;
    padding-top: 25px;
    }

.footer {
    background-color: rgb(75, 75, 75);
    background-image: url("../img/bg-dark.png");
    height: 50px;
    /*box-shadow: -1px 2px 3px #333;*/
    color: #fff;
    font-size: 12px;
    padding: 10px 0px;
    margin-top: 10px;
    line-height: 20px;
    }

.footer a {
    color: #fff;
    }

.toplink {
    background-color: var(--primary-color);
    background-image: url(../img/arrow-up.png);
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
    display: inline-block;
    padding: 10px;
    height: 40px;
    width: 40px;
    right: 50px;
    bottom: -9px;
    position: absolute;
    z-index: 1000;
    }

.toplink a {
    display: block;
    width: 100%;
    height: 100%;
    }

.navbar-brand {
    height: 70px;
    margin-right: 10px;
    }

.archiveDetailsBox {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* horizontales Überlaufen in der Detailbox verhindern */
    }

/* Ensure detail area uses full available width and wraps long content safely */
.archiveDetailsBox .detailBoxDetails {
    width: 100% !important;
    margin-left: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Verhindert Links-/Rechts-Versatz beim Ein-/Ausblenden der vertikalen Scrollbar */
html { scrollbar-gutter: stable both-edges; }
/* Fallback für Browser ohne scrollbar-gutter: reserviert immer die Scrollbar-Breite */
body { overflow-y: scroll; }

/* Obere 2-Spalten-Tabelle in der Detailbox (CrefoId, Report-Typ, …): 34/66 via <colgroup> und stabiles Layout */
.archiveDetailsBox .detail-extract-table {
    width: 100%;
    table-layout: fixed; /* verhindert Aufweiten bei langem Inhalt */
}
.archiveDetailsBox .detail-extract-table th,
.archiveDetailsBox .detail-extract-table td {
    box-sizing: border-box;
}
.archiveDetailsBox .detail-extract-table td:last-child {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* lange Werte laufen nicht aus dem Raster */
}

.consumerDetailsBox {
    width: 100%;
    height: auto;
    }

.tab-content.colored .tab-pane {
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: 0px;
    }

.ui-slider-horizontal .ui-slider-handle {
    cursor: pointer;
    }

.nav-tabs {
    background-color: #fff;
    }

.dataTables_filter {
    margin-right: 10px;

    }

/* Archive: „Details“-Button in der ersten Spalte oben ausrichten */
table.archiveDataTable td.details-toggle-col {
    vertical-align: top; /* Button steht am oberen Zellenrand */
}
/* Optional: sicherstellen, dass der Button nicht zusätzlich nach unten versetzt ist */
table.archiveDataTable td.details-toggle-col .btn {
    margin-top: 0;
}

.cronjob_enabler {
    margin-left: 20px;
    margin-top: 15px;
    margin-right: 75px;
    margin-bottom: 20px;
    }

.cronjob_enabler_text {
    font-size: 13px;
    font-weight: bolder;
    }

.notification_header {
    font-size: 14px;
    font-weight: 500;
    margin: 20px;
    }

.bonireportLicense_header {
    font-size: 14px;
    font-weight: 500;
    margin: 20px;
    }

.centerIcon {
    text-align: center;
    }

.cronjob_enabler_hinttext {
    font-size: 11px;
    font-weight: 500;
    }

.mbtooltip {
    position: relative;
    display: inline-block;
    }

.mbtooltip .mbtooltiptext {
    visibility: hidden;
    color: #fff;
    font-size: 1.0em;
    width: 400px;
    background-color: black;
    text-align: center;
    border-radius: 4px;
    position: absolute;
    z-index: 1;
    top: 130%;
    left: -220%;
    margin-left: -60px;
    }

.mbtooltip .mbtooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 85%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
    }

.mbtooltip:hover .mbtooltiptext {
    visibility: visible;
    }

table.borderless td, table.borderless th {
    border: none !important;
    }


/* Detail rows: make the details cell content span full table width (remove td padding) */
tr[class^="archiveDetailsRow_"] > td {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ensure base table inside details uses full width and consistent layout */
.archiveDetailsBox .baseTable {
    width: 100% !important;
    table-layout: auto;
}

/* --- AI Analyze column stabilization and busy state (added) --- */
.ai-column,
th.ai-column,
td.ai-column {
    text-align: center !important;
    width: 46px !important;
}

/* Center the icon in its cell robustly */
.aiAnalyzeCellCol {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Busy/disabled visual state to prevent double clicks */
.aiAnalyzeBtn.is-busy,
.aiAnalyzeBtn[aria-disabled="true"] {
    opacity: 0.6;
    pointer-events: none;
    cursor: default;
}

/* Explicit disabled state (for disallowed product types) */
.aiAnalyzeBtn.ai-disabled {
    opacity: 0.75;
    pointer-events: none;
    cursor: not-allowed;
}

/* Cached state: color is applied via JS filter; keep full opacity */
.aiAnalyzeBtn.ai-cached {
    opacity: 1;
}

/* Punkt-Indicator für AI-Cache-Status */
.aiAnalyzeBtn .ai-cache-dot {
    position: absolute;
    /* 75% der bisherigen Größe (12px → 9px) */
    width: 9px;
    height: 9px;
    border-radius: 50%;
    /* Position für kleineren Punkt etwas näher an die Ecke anpassen */
    top: -2px;
    right: -2px;
    display: none;
    background: #F39C12; /* Orange als gewünschte Indikatorfarbe */
    box-shadow: 0 0 0 1px #fff; /* dünner Rand gegen dunklen Hintergrund */
    z-index: 1;
}
.aiAnalyzeBtn.ai-cached .ai-cache-dot {
    display: inline-block !important;
}
.aiAnalyzeBtn.ai-disabled .ai-cache-dot {
    display: none; /* optional: auf grau stellen, wenn Sichtbarkeit gewünscht */
    /* background: #CFD8DC; */
}

/* Ensure same centering inside detail view tables */
.archiveDetailsBox .baseTable td.ai-column {
    text-align: center !important;
    width: 46px !important;
}

/* Monochrome mode for inline SVG AI icon (when aiIconExactColors === false) */
.aiIconSvg.mono * {
    fill: currentColor !important;
    stroke: currentColor !important;
}


/* Allow tooltips on disabled AI buttons (but still prevent action via JS) */
.aiAnalyzeBtn.ai-disabled,
.aiAnalyzeBtn.ai-disabled[aria-disabled="true"] {
    /* Keep visual disabled look but allow hover to show native title tooltip */
    opacity: 0.75;
    pointer-events: auto; /* enable hover for title tooltip */
    cursor: not-allowed;
}


/* Stabilize the archive details toggle (first) column: keep button centered and prevent left shift on details open */
#archiveDataTable th.details-toggle-col,
#archiveDataTable td.details-toggle-col {
    text-align: left !important;
    vertical-align: top; /* Button oben in der Spalte ausrichten */
}
#archiveDataTable td.details-toggle-col .showEntry.btn{
    display: inline; /* keine Vollbreite */
    width: auto;
	margin:0;
    gap: 6px; /* Abstand zwischen Text und Chevron */
}
#archiveDataTable td.details-toggle-col .archive-close-details.btn {
	display: inline; /* keine Vollbreite */
	width: auto;
	margin-left:10px;
	gap: 6px; /* Abstand zwischen Text und Chevron */
}
/* Minimale Breite für beide Buttons, damit die Spalte nicht optisch schmaler wirkt */
#archiveDataTable td.details-toggle-col .showEntry.btn,
#archiveDataTable td.details-toggle-col .archive-close-details.btn {
    min-width: 90px;
}
    /* Neues Flex-Grid für unteren Bereich (Boni-Index / E-Mail / Cronjob) */
	/* Scoped Flex-Grid nur für den Benachrichtigungs-Tab */
	 /* Einheitliche Breiten/Abstände für alle drei Button-Spalten */
 :root {
	 --nr-actions-width: 180px;
	 --nr-right-padding: 27px;
	 /* Anteil der Label-Spalte wie im Flex-Grid (.nr-col-label => 25%) */
	 --nr-label-col: 0.25;
	 /* Spaltenabstand innerhalb der Flex-Reihe (zwischen Label und Controls) */
	 --nr-grid-gap: 16px;
	 /* Optionales Pixel-Feintuning für die Pagination-Ausrichtung */
	 --nr-pagination-nudge: 0px;
 }
.nr-flex-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 15px; padding-left: 27px; padding-right: var(--nr-right-padding); box-sizing: border-box; }
/* Mailbox-Zeile: gleicher rechter Innenabstand wie bei allen Buttons, damit die Button-Flucht identisch ist */
.nr-flex-grid.nr-flex-grid--mailbox { padding-right: var(--nr-right-padding); }
.nr-flex-row { display: flex; align-items: center; gap: 16px; }
.nr-col-label { flex: 0 0 25%; max-width: 25%; font-weight: 600; padding-top: 6px; }
.nr-col-controls { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.nr-col-actions { flex: 0 0 var(--nr-actions-width); max-width: var(--nr-actions-width); display: flex; justify-content: flex-end; }
.nr-col-actions .btn {
	width: var(--nr-actions-width);
	text-align: left;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	box-sizing: border-box;
	margin: 0; /* verhindert minimale Versätze */
}
.nr-col-actions { box-sizing: border-box; }
.nr-col-actions .btn .glyphicon { margin-right: 6px; }
/* Rechter Außenabstand konstant (etwas vergrößert) – jetzt auf Grid statt Zeile gesetzt */
/* Eingabefeldbreiten wie abgestimmt */
/* Bonitätswert-Feld: genauso breit wie das E-Mail-Feld */
#boni_index_value { width: 360px; max-width: 360px; flex: 0 0 360px; }
#notification_mail { max-width: 360px; }
/* Hinweistext unter Mailboxabruf: volle Breite + Abstand unten */
.nr-info-full { padding-left: 30px; padding-right: var(--nr-right-padding); margin-top: 20px; margin-bottom: 20px; }
/* Tabelle optisch vom Folge-Bereich abheben (V4: Abstand + Marken-Divider) */
.nr-table-wrap { position: relative; }
.nr-divider {
	height: 1px;
	/* Markenfarbe (aus Seite verwendetem Blau #0f6aa4) mit etwas mehr Deckkraft */
	background-color: rgba(15, 106, 164, 0.22);
	margin-top: 22px;   /* ~10px mehr Abstand nach oben */
	margin-bottom: 34px;/* ~10px mehr Abstand nach unten */
	margin-left: 27px;  /* links bündig mit Flex-Bereich */
	margin-right: var(--nr-right-padding); /* rechts bündig wie Buttons (vergrößert) */
}
/* DataTables: Paginierung linksbündig und auf Höhe Beginn der Formularfelder (Kontrollspalte) */
#notificationRules_wrapper {
    text-align: left;
    /* Gewünschter Abstand links/rechts rund um den Scroll-Container (Header + Body) */
    padding-left: 27px;
    padding-right: 27px;
    box-sizing: border-box;
}
#notificationRules_wrapper .row:last-child { text-align: left; }
#notificationRules_wrapper .row:last-child > div { float: none; width: 100%; }
#notificationRules_wrapper .dataTables_paginate {
	float: none !important;
	display: block;
	margin: 8px 0 0;
	font-size: 0.8em;
	/* Links exakt am Beginn der Formularfelder (Controls-Spalte):
	   linker Innenabstand (27px)
	   + (nutzbare Breite × Anteil Label-Spalte)
	   + Grid-Gap zwischen Label und Controls
	   + optionales Feintuning (Nudge) */
	margin-left: calc(
			27px +
			(100% - 1827px - var(--nr-right-padding)) * var(--nr-label-col) +
			var(--nr-grid-gap) +
			var(--nr-pagination-nudge)
	);
}
#notificationRules_wrapper .dataTables_paginate .pagination { margin: 0; }
/* Responsive: unter sm stapeln */
@media (max-width: 767px) {
	.nr-col-label { flex: 0 0 100%; max-width: 100%; padding-top: 0; }
	.nr-col-controls { flex: 0 0 100%; max-width: 100%; }
	.nr-col-actions { flex: 0 0 100%; max-width: 100%; justify-content: flex-start; }
	.nr-flex-row { flex-wrap: wrap; row-gap: 8px; }
	.nr-divider { margin-left: 0; margin-right: 0; }
	/* Pagination unter 768px nicht versetzen */
	#notificationRules_wrapper .dataTables_paginate { margin-left: 0; }
}
/* Mailbox-Zeile: Erklärungstext soll weit laufen, aber mit Abstand vor dem Button */
.nr-row-mailbox .nr-col-label {
	/* Platz bis zur Button-Spalte (var(--nr-actions-width)) abzüglich zusätzlicher Luft (120px) */
	flex: 0 0 calc(100% - var(--nr-actions-width) - 120px);
	max-width: calc(100% - var(--nr-actions-width) - 120px);
	padding-right: 120px; /* Abstand zwischen Erklärungstext und Button (reduziert, Text läuft länger) */
}
.nr-row-mailbox .nr-col-controls { display: block; }
/* Erklärungstext: kleinere Schrift (0.85em) + ~20px Abstand nach unten */
.nr-row-mailbox .nr-col-label .text-muted { font-size: 0.85em; margin-bottom: 20px; }
@media (max-width: 767px) {
	.nr-row-mailbox .nr-col-label { flex: 0 0 100%; max-width: 100%; padding-right: 0; }
	.nr-row-mailbox .nr-col-controls { display: none; }
}
/* Bonitätsindex-Zeile: Operator + Wert zusammen so breit wie das E-Mail-Feld (360px) */
/* Row-spezifischer Selektor, damit andere Felder unberührt bleiben */
/* Etwas Abstand zwischen Operator und Boni-Wert, Gesamtbreite weiterhin 360px */
.nr-row-boni .nr-col-controls { gap: 8px; }
/* Aufteilung: Operator 120px + Gap 8px + Wert 232px => Summe 360px */
.nr-row-boni #boni_index_operator { width: 120px; max-width: 120px; flex: 0 0 120px; }
.nr-row-boni #boni_index_value { width: 232px; max-width: 232px; flex: 0 0 232px; }
/* Responsiv: unter 768px jeweils 100% Breite und Stapelung */
@media (max-width: 767px) {
	.nr-row-boni #boni_index_operator, .nr-row-boni #boni_index_value { width: 100%; max-width: 100%; flex: 1 1 auto; }
	.nr-row-boni .nr-col-controls { gap: 10px; }
}

/* Notification-Rule-Tabelle: Checkbox-Spalte (4.) zentrieren – Header und Zellen */
#notificationRules thead th:nth-child(4),
#notificationRules tbody td:nth-child(4) {
    text-align: center;
    vertical-align: middle;
}
#notificationRules tbody td:nth-child(4) input[type="checkbox"],
#notificationRules thead th:nth-child(4) input[type="checkbox"] {
    display: inline-block;
    margin: 0 auto;
    vertical-align: middle;
}

/* Zebra‑Streifen für die Notification‑Rule‑Tabelle (abwechselnde Zeilenfärbung)
   Hinweis: DataTables mit scrollY splittet Header/Body in separate Tabellen.
   Darum zusätzlich den Scroll-Body spezifisch ansprechen, damit die Streifen dort ebenfalls greifen. */
#notificationRules tbody tr:nth-child(odd),
#notificationRules_wrapper .dataTables_scrollBody table tbody tr:nth-child(odd) {
    background-color: #f9f9f9; /* dezent – angelehnt an Bootstrap .table-striped */
}
#notificationRules tbody tr:nth-child(even),
#notificationRules_wrapper .dataTables_scrollBody table tbody tr:nth-child(even) {
    background-color: #ffffff;
}
/* Hover-Zustand bewusst nicht überschreiben –
   Bootstrap .table-hover sorgt für klaren Hover, der die Streifen temporär überlagert. */

/* Gruppe-Spalte (3. Spalte) nur VOR DataTables-Init ausblenden (Flash verhindern).
   Sobald DataTables initialisiert ist, übernimmt columnDefs (visible:false) das Verbergen.
   Wichtig: Keinerlei nth-child-Hacks auf den von DataTables erzeugten Tabellen verwenden,
   um versehentlich sichtbare Spalten (z. B. Checkboxen) nicht zu verstecken. */
#notificationRules:not(.dataTable) thead th:nth-child(3),
#notificationRules:not(.dataTable) tbody td:nth-child(3) {
    display: none !important;
}

/* Header-Layout stabilisieren: kein Zeilenumbruch in den Kopfzellen der DataTables-Header-Tabelle. */
#notificationRules_wrapper .dataTables_scrollHead thead th {
    white-space: nowrap;
}

/* Dezente untere Abgrenzung der scrollbaren Datentabelle (Notification Rules) */
#notificationRules_wrapper .dataTables_scrollBody {
    /* etwas schlanker und heller als zuvor */
    border-bottom: 2px solid #d6e3ef; /* dezenter Blauton, weniger dominant */
    box-shadow: 0 1px 0 rgba(15, 106, 164, 0.10); /* sehr leichte Schattenlinie */
    /* Scrollbar immer sichtbar halten (vertikal) und Platz dafür reservieren */
    overflow-y: scroll !important; /* DataTables setzt inline overflow:auto – daher !important nötig */
    overflow-x: hidden; /* horizontales Scrollen vermeiden */
    scrollbar-gutter: stable; /* verhindert Layout-Sprung, Header/Body bleiben bündig */
}

/* Kompakte Zeilenhöhe für Notification-Rule-Tabelle (geringstmögliche Höhe) */
/* Body-Zellen: Padding stark reduzieren, kleinere Schrift, enge Zeilenhöhe */
#notificationRules tbody td,
#notificationRules_wrapper .dataTables_scrollBody table.dataTable tbody td {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 1.2;
    vertical-align: middle;
}

/* Kopfzellen ebenfalls kompakt halten */
#notificationRules thead th,
#notificationRules_wrapper .dataTables_scrollHead thead th {
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 6px;
    padding-right: 6px;
    line-height: 1.2;
    font-size: 14px !important; /* Header deutlich größer als Body (11px) */
}

/* Checkbox-Zellen: mittig ausrichten bleibt erhalten; bei sehr geringer Höhe sicherstellen, dass Checkbox vertikal stimmig sitzt */
#notificationRules tbody td:nth-child(4) input[type="checkbox"],
#notificationRules thead th:nth-child(4) input[type="checkbox"] {
    transform: translateY(0); /* Platzhalter für spätere Feintuning-Anpassungen, aktuell neutral */
}

/* Sichtbare Auswahl-Markierung (blau) für angeklickte Zeilen in Benutzer-/Lizenzverwaltung
   und Notification Rules. DataTables Select setzt die Klasse .selected auf <tr> bzw. <td>.
   Durch unsere ID-spezifischen Zebra-Styles kann die Standardfarbe der Select-Extension
   überlagert werden – daher hier gezielt und mit hoher Spezifität überschreiben. */

/* Lizenz-Tabelle: ausgewählte Zeile klar blau hinterlegen (auch im Scroll-Body, falls aktiv) */
#bonireportlicenseTable tbody tr.selected,
#bonireportlicenseTable tbody tr.selected:hover,
#bonireportlicenseTable_wrapper .dataTables_scrollBody table tbody tr.selected,
#bonireportlicenseTable_wrapper .dataTables_scrollBody table tbody tr.selected:hover,
/* Fallback, falls Select auf Zellenebene markiert */
#bonireportlicenseTable tbody td.selected,
#bonireportlicenseTable_wrapper .dataTables_scrollBody table tbody td.selected {
    background-color: #cfe8ff !important; /* angenehmes Blau, nah an DataTables-Standard */
    color: inherit; /* Textfarbe lesbar lassen */
}

/* Notification Rules: gleiche, deutliche Markierung trotz Zebra-Streifen und scrollY-Split */
#notificationRules tbody tr.selected,
#notificationRules tbody tr.selected:hover,
#notificationRules_wrapper .dataTables_scrollBody table tbody tr.selected,
#notificationRules_wrapper .dataTables_scrollBody table tbody tr.selected:hover,
#notificationRules tbody td.selected,
#notificationRules_wrapper .dataTables_scrollBody table tbody td.selected {
    background-color: #cfe8ff !important;
    color: inherit;
}

/* =========================
   Lizenz-Tabelle: Buttons tiefer setzen – unterhalb des Suche-Labels
   Hinweis: Nur für #bonireportlicenseTable anwenden.
   ========================= */
/* Toolbar strukturiert ausrichten */
#bonireportlicenseTable_wrapper .dt-toolbar {
    display: flex;
    align-items: center; /* exakt bündig mit dem "Suche:"-Label ausrichten */
    justify-content: space-between; /* Buttons links, Suche rechts */
}

/* Buttons (links) etwas nach unten versetzen, sodass sie optisch unterhalb des "Suche:"-Labels liegen */
#bonireportlicenseTable_wrapper .dt-toolbar .dt-actions {
    margin-top: 0; /* exakt bündig mit dem Suche-Label */
}

/* Suche rechtsbündig innerhalb der Toolbar ausrichten */
#bonireportlicenseTable_wrapper .dt-toolbar .dt-search {
    margin-left: auto;           /* nach rechts schieben */
    text-align: right;           /* Label/Input rechtsbündig */
}
#bonireportlicenseTable_wrapper .dt-toolbar .dt-search label {
    width: 100%;
    display: inline-block;
    margin-bottom: 0;
}

/* Zusätze: Bootstrap-Grid-Einflüsse innerhalb der Toolbar neutralisieren,
   damit die Flex-Ausrichtung (Buttons links, Suche rechts) zuverlässig greift. */
#bonireportlicenseTable_wrapper .dt-toolbar.row {
    margin-left: 0;  /* entfernt negative Außenabstände der .row */
    margin-right: 0;
}
#bonireportlicenseTable_wrapper .dt-toolbar > [class^="col-"],
#bonireportlicenseTable_wrapper .dt-toolbar > [class*=" col-"] {
    float: none;         /* Bootstrap-Float aufheben */
    width: auto;         /* Breite nicht durch Grid erzwingen */
    padding-left: 0;     /* Innenabstände reduzieren, damit es bündig wirkt */
    padding-right: 0;
}
#bonireportlicenseTable_wrapper .dt-toolbar .dt-actions {
    flex: 0 0 auto;      /* Buttons nehmen nur so viel Platz wie nötig */
}
#bonireportlicenseTable_wrapper .dt-toolbar .dt-search {
    flex: 1 1 auto;      /* Suchblock darf wachsen, bleibt aber rechts durch margin-left:auto */
}
#bonireportlicenseTable_wrapper .dt-toolbar .dt-search label {
    display: inline-flex;          /* Suche-Label + Input in einer Reihe */
    align-items: center;           /* vertikal mittig */
    justify-content: flex-end;     /* Inhalte im Label nach rechts ausrichten */
    gap: 8px;                      /* kleiner Abstand zwischen Text und Input */
    width: auto;                   /* nicht volle Breite erzwingen */
}
#bonireportlicenseTable_wrapper .dt-toolbar .dt-search input[type="search"] {
    max-width: 260px;              /* Suchfeldbreite sinnvoll begrenzen */
}

/* Responsive: bei schmalen Breiten ggf. umbrechen – dann Versatz zurücknehmen */
@media (max-width: 767.98px) {
    #bonireportlicenseTable_wrapper .dt-toolbar {
    display: block; /* Spalten untereinander */
    }
    #bonireportlicenseTable_wrapper .dt-toolbar .dt-actions {
        margin-top: 0; /* auch mobil ohne zusätzlichen Versatz */
    }
    /* Mobil: keine erzwungene Rechtsausrichtung, damit es natürlich umbrechen kann */
    #bonireportlicenseTable_wrapper .dt-toolbar .dt-search {
        margin-left: 0;
        text-align: left;
    }
    #bonireportlicenseTable_wrapper .dt-toolbar .dt-search label {
        justify-content: flex-start; /* mobil linksbündig */
        gap: 6px;
    }
}

/* =========================
   Lizenz-Tabelle insgesamt ca. 50px höher setzen
   Hinweis: Wir verschieben ausschließlich den DataTables-Wrapper dieser Tabelle,
   damit Toolbar, Suche, Tabelle und Pagination gemeinsam nach oben rücken.
   ========================= */
#bonireportlicenseTable_wrapper {
    margin-top: 0px; /* Versatz nach oben entfernt, um Überlappungen zu vermeiden */
}

/* Auf kleineren Viewports ebenfalls auf 0 setzen */
@media (max-width: 767.98px) {
    #bonireportlicenseTable_wrapper {
        margin-top: 0px;
    }
}

/* =========================
   Orders-DataTable: Checkboxen im Filterbereich vertikal zentrieren
   und etwas mehr Abstand zwischen Checkbox und Label-Text herstellen.
   Gilt nur für die Bestellübersicht (#orderDataTable).
   ========================= */
#orderDataTable_wrapper #orderDataTable_filter {
    /* Filterzeile als Flex-Container: Checkbox-Labels und DataTables-Suche vertikal zentrieren */
    display: flex;
    align-items: center; /* exakt bündig mit dem „Suche:“‑Label */
    flex-wrap: wrap;     /* bei schmalen Breiten sauber umbrechen */
}

#orderDataTable_wrapper #orderDataTable_filter label {
    display: inline-flex;           /* Checkbox + Text in einer Reihe */
    align-items: center;
    margin-right: 20px;
    padding-top: 0;                 /* keine zusätzliche Vertikalverschiebung */
    font-weight: normal;            /* konsistent mit Bootstrap-Filter */
}

#orderDataTable_wrapper #orderDataTable_filter input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0 10px 0 0 !important;  /* mehr Platz zum Label-Text, neg. Inline-Margins übersteuern */
    vertical-align: middle;
    position: relative;
    top: 0;                         /* Basiswert – wird durch transform zusätzlich feinversetzt */
}

/* Suchblock (DataTables-Label) am rechten Rand ausrichten */
#orderDataTable_wrapper #orderDataTable_filter > label:last-child {
    margin-left: auto;          /* schiebt den Suchblock nach rechts */
    text-align: right;          /* Text + Input rechtsbündig */
    display: inline-flex;       /* Label-Inhalt in einer Zeile */
    align-items: center;        /* vertikal mittig zu den Checkboxen */
    justify-content: flex-end;  /* Inhalt im Label nach rechts */
    gap: 8px;                   /* kleiner Abstand zwischen „Suche:“ und Input */
}

/* Suchfeldbreite sinnvoll begrenzen */
#orderDataTable_wrapper #orderDataTable_filter input[type="search"] {
    max-width: 260px;
}

/* Bei sehr schmalen Ansichten untereinander umbrechen und Abstände anpassen */
@media (max-width: 575.98px) {
    #orderDataTable_wrapper #orderDataTable_filter label {
        display: inline-flex;
        margin-right: 12px;
        margin-bottom: 6px;
    }
    /* Auf sehr kleinen Viewports den Vertikalversatz etwas reduzieren */
    #orderDataTable_wrapper #orderDataTable_filter input[type="checkbox"] {
        /* kein transform nötig – Grundausrichtung erfolgt über Flex am Label */
    }
    /* Mobil: Rechtsausrichtung der Suche aufheben, natürlicher Umbruch */
    #orderDataTable_wrapper #orderDataTable_filter > label:last-child {
        margin-left: 0;
        text-align: left;
        justify-content: flex-start;
        gap: 6px;
    }
}

/* =========================
   Benutzer-/Lizenzen Tabelle: Cursor-Styling für klickbare Rechte-Icons
   (Icons werden per .perm-toggle gerendert und toggeln beim Klick die Berechtigung)
   ========================= */
#bonireportlicenseTable .perm-toggle {
    cursor: pointer; /* Hand-Cursor als visuelle Rückmeldung für Klickbarkeit */
}

/* Benutzer-/Lizenzen Tabelle: Cursor-Styling für Lösch-Icon in letzter Spalte */
#bonireportlicenseTable .license-delete-row {
    cursor: pointer; /* ebenfalls als klickbar kenntlich machen */
}

/* Benutzer-/Lizenzen Tabelle: Lösch-Icon in Rot darstellen */
#bonireportlicenseTable .license-delete-row .glyphicon-trash {
    color: #d9534f; /* Bootstrap-danger Rot */
}

/* Leichte Verstärkung bei Hover/Fokus für besseres Feedback */
#bonireportlicenseTable .license-delete-row:hover .glyphicon-trash,
#bonireportlicenseTable .license-delete-row:focus .glyphicon-trash,
#bonireportlicenseTable .license-delete-row:active .glyphicon-trash {
    color: #c9302c; /* dunkleres Rot bei Interaktion */
}

/* Vertikale Abgrenzung der letzten Spalte (Löschen-Icon) */
/* Hinweis: Bei aktiviertem DataTables-Scrolling existieren getrennte Tabellen
   für Header (scrollHead) und Body (scrollBody). Daher beide Bereiche stylen. */
#bonireportlicenseTable_wrapper .dataTables_scrollHead th:last-child,
#bonireportlicenseTable thead th:last-child {
    border-left: 1px solid #ddd;
}

#bonireportlicenseTable_wrapper .dataTables_scrollBody td:last-child,
#bonireportlicenseTable tbody td:last-child {
    border-left: 1px solid #ddd;
    /* etwas Luft zwischen Linie und Icon */
    padding-left: 10px;
}

/* Verhindern von Zeilenumbrüchen in der Lizenz-Tabelle (Browser-Overflow Fix) */
#bonireportlicenseTable thead th,
#bonireportlicenseTable tbody td {
    white-space: nowrap !important;
}

/* =========================
   Archive-DataTable: Nur die aktuell geöffnete Reihe hervorheben.
   - Nicht mehr global alle Zeilen abdunkeln
   - Beschriftungen & Icons in der geöffneten Reihe sind weiß
   ========================= */
/* Basis: Alle Zeilen behalten Standard-Styles; die alte globale Abdunklung wurde entfernt. */

/* Geöffnete Datenzeile (die mit Klick expandiert wurde) optisch hervorheben */
#archiveDataTable tbody tr.archive-row-open {
    background-color: #eeeeee !important; /* mittleres Grau für die Hervorhebung */
    color: #000 !important;               /* Standard-Text innerhalb der Zellen weiß *!*/
}

/* Hover soll die Hervorhebung nicht aufheben */
#archiveDataTable tbody tr.archive-row-open:hover {
    background-color: #eeeeee !important;
}

/* Innerhalb der geöffneten Reihe: Texte, Links, Labels, Badges und Icons in Weiß erzwingen */
#archiveDataTable tbody tr.archive-row-open td,
#archiveDataTable tbody tr.archive-row-open td a,
#archiveDataTable tbody tr.archive-row-open td .glyphicon,
#archiveDataTable tbody tr.archive-row-open td .fa,
#archiveDataTable tbody tr.archive-row-open td .label,
#archiveDataTable tbody tr.archive-row-open td .badge {
    color: #fff !important;
}

/* Buttons in der geöffneten Reihe: Standard-Bootstrap-Buttons beibehalten,
   Icons innerhalb der Buttons sollen die gleiche Schriftfarbe übernehmen */
#archiveDataTable tbody tr.archive-row-open .btn .glyphicon,
#archiveDataTable tbody tr.archive-row-open .btn .fa {
    color: inherit !important;
}

/* Optional: Pfeil-/Chevron-Icon innerhalb des Toggle-Buttons sicher weiß darstellen */
#archiveDataTable tbody tr.archive-row-open .details-toggle-col .glyphicon {
    color: #fff !important;
}

/* =========================
   Anpassung: Textfarbe in der geöffneten Reihe auf #141414 setzen.
   Icons (Glyphicons/FontAwesome) bleiben weiß für klaren Kontrast.
   Diese Regeln überschreiben frühere Farbvorgaben bewusst.
   ========================= */
#archiveDataTable tbody tr.archive-row-open td,
#archiveDataTable tbody tr.archive-row-open td a {
    color: #141414 !important;
}

/* Icons weiterhin weiß halten */
#archiveDataTable tbody tr.archive-row-open td .glyphicon,
#archiveDataTable tbody tr.archive-row-open td .fa {
    color: #ffffff !important;
}

/* Labels/Badges: Text ebenfalls in #141414 (Icons bleiben weiß, s.o.) */
#archiveDataTable tbody tr.archive-row-open td .label,
#archiveDataTable tbody tr.archive-row-open td .badge {
    color: #141414 !important;
}

/* =========================
   Archive-Detailbox: Rahmen (Bordern) vollständig entfernen
   - Entfernt evtl. verbleibende Ränder um die Detailbox
   - Unterbindet auch etwaige Box-Shadows aus globalen Themes
   ========================= */
.archiveDetailsBox .detailBoxDetails {
    border: none !important;
    box-shadow: none !important;
}

/* Falls irgendwo die Klasse "boxed" einen Rahmen erhält, hier innerhalb der Detailbox neutralisieren */
.archiveDetailsBox .tab-content .tab-pane.boxed {
    border: none !important;
    box-shadow: none !important;
}

/* =========================
   Archive: Erste Spalte (Action) in Header und Body sauber ausrichten
   Problem: In EN rutscht die Beschriftung in TH/TD nach links/oben.
   Lösung: Konsistente horizontale/vertikale Ausrichtung und kein Umbruch.
   ========================= */
/* Archive: Erste Header-Spalte (Action) zuverlässig zentrieren –
   berücksichtigt DataTables-Headerzustände (sorting*, disabled) und Scroll-Header */
#archiveDataTable thead th:first-child,
#archiveDataTable thead th:first-child.sorting,
#archiveDataTable thead th:first-child.sorting_asc,
#archiveDataTable thead th:first-child.sorting_desc,
#archiveDataTable thead th:first-child.sorting_disabled,
#archiveDataTable_wrapper .dataTables_scrollHead thead th:first-child,
#archiveDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting,
#archiveDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_asc,
#archiveDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_desc,
#archiveDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_disabled {
    text-align: center !important;            /* horizontal zentriert */
    vertical-align: middle !important;        /* vertikal mittig */
    white-space: nowrap;                      /* kein Umbruch */
}

/* Verhindert Sorting-Icons in der Action-Spalte des Archivs */
#archiveDataTable thead th:first-child:after,
#archiveDataTable thead th:first-child:before {
    content: "" !important;
}
#archiveDataTable thead th:first-child {
    background-image: none !important;
}

#archiveDataTable tbody td.details-toggle-col {
    text-align: center !important;     /* Button zentrieren */
    vertical-align: top !important; /* vertikal mittig */
    white-space: nowrap;               /* Label+Icon in einer Zeile halten */
}

/* Button-Inhalt in der Action-Spalte optisch mittig halten, egal welche Sprache */
#archiveDataTable tbody td.details-toggle-col .showEntry.btn {
    display: inline-flex;          /* zentrierte Ausrichtung von Text + Icon */
    align-items: center;           /* vertikal mittig */
    justify-content: center;       /* horizontal mittig */
    gap: 6px;                      /* kleiner Abstand zwischen Text und Icon */
    line-height: 1.2;              /* stabile Zeilenhöhe */
    white-space: nowrap;           /* kein Umbruch */
}

/* Auskünfte-Toggle: Chevron im geöffneten Zustand um 180° drehen */
#archiveDataTable tbody td.details-toggle-col .showEntry .glyphicon-chevron-down {
    display: inline-block;              /* nötig, damit transform wirkt */
    transition: transform 180ms ease;   /* sanfte Rotation */
}

#archiveDataTable tbody tr.archive-row-open td.details-toggle-col .showEntry .glyphicon-chevron-down {
    transform: rotate(180deg);
}

/* Consumer-Tab: gleiche Ausrichtung für die erste Spalte (Action) */
#consumerDataTable thead th:first-child,
#consumerDataTable thead th:first-child.sorting,
#consumerDataTable thead th:first-child.sorting_asc,
#consumerDataTable thead th:first-child.sorting_desc,
#consumerDataTable thead th:first-child.sorting_disabled,
#consumerDataTable_wrapper .dataTables_scrollHead thead th:first-child,
#consumerDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting,
#consumerDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_asc,
#consumerDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_desc,
#consumerDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_disabled {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap;
}

/* =========================
   Mailbox-Buttons: etwas mehr Abstand zwischen Icon und Beschriftung
   Gilt für alle Aktionen mit vereinheitlichter Klasse .btn-mailbox-action
   ========================= */
.btn-mailbox-action > .glyphicon {
    margin-right: 6px;
}

/* =========================
   Mailbox DataTable: KEIN Umbruch in Headern (Anforderung)
   Spalten dürfen breiter werden; Headertexte bleiben stets einzeilig.
   Gilt auch für den DataTables-Scroll-Header.
   ========================= */
#mailboxDataTable thead th,
#mailboxDataTable_wrapper .dataTables_scrollHead thead th {
    white-space: nowrap !important;   /* kein Umbruch zulassen */
    word-break: normal !important;    /* Wörter nicht künstlich umbrechen */
    hyphens: none;                    /* keine Silbentrennung */
    vertical-align: middle;           /* optisch mittig ausrichten */
}

/* Erste Spalte (Aktion) kompakt halten: zentriert und ohne Umbruch */
#mailboxDataTable thead th:first-child,
#mailboxDataTable thead th:first-child.sorting,
#mailboxDataTable thead th:first-child.sorting_asc,
#mailboxDataTable thead th:first-child.sorting_desc,
#mailboxDataTable thead th:first-child.sorting_disabled,
#mailboxDataTable_wrapper .dataTables_scrollHead thead th:first-child,
#mailboxDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting,
#mailboxDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_asc,
#mailboxDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_desc,
#mailboxDataTable_wrapper .dataTables_scrollHead thead th:first-child.sorting_disabled {
    text-align: center !important;
    vertical-align: middle !important;
    white-space: nowrap !important;   /* explizit kein Umbruch (redundant zur globalen Regel) */
}

/* Verhindert Sorting-Icons in der AI-Spalte des Archivs */
#archiveDataTable thead th.ai-column:after,
#archiveDataTable thead th.ai-column:before {
    content: "" !important;
}
#archiveDataTable thead th.ai-column {
    background-image: none !important;
}

/* ========================================
   Batch-Upload Formular Styles
   ======================================== */

/* Moderne Formular-Styles */
.batch-upload-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    background: #fff;
}
.batch-upload-card .card-header {
    background: linear-gradient(135deg, #0175AB 0%, #015d8a 100%);
    color: #fff;
    padding: 16px 24px;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
}
.batch-upload-card .card-header h4 {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
}
.batch-upload-card .card-body {
    padding: 24px;
}

/* Formular-Gruppen */
.batch-form-section {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #e9ecef;
}
.batch-form-section-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0175AB;
    display: inline-block;
}

/* Input-Felder */
.batch-upload-card .form-control {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: #fff;
    height: 42px;
}
.batch-upload-card .form-control:focus {
    border-color: #0175AB;
    box-shadow: 0 0 0 3px rgba(0,102,204,0.15);
    outline: none;
}
.batch-upload-card .form-control::placeholder {
    font-size: 14px;
    color: #999;
}
.batch-upload-card select.form-control {
    font-size: 14px;
    color: #333 !important;
    cursor: pointer;
    -webkit-appearance: menulist;
    -moz-appearance: menulist;
    appearance: menulist;
    background-color: #fff !important;
    height: auto;
    line-height: 1.5;
}
.batch-upload-card select.form-control option {
    color: #333;
    background-color: #fff;
}
.batch-upload-card textarea.form-control {
    min-height: 120px;
}
.batch-upload-card input[type="date"].form-control {
    font-size: 13px;
}


/* Labels */
.batch-upload-card label {
    font-weight: 500;
    font-size: 14px;
    color: #444;
    margin-bottom: 8px;
    display: block;
}
.batch-upload-card label .required-star {
    color: #dc3545;
    margin-left: 2px;
}

/* Hilfetext */
.batch-upload-card .form-text {
    font-size: 11px;
    color: #555;
    margin-top: 6px;
    line-height: 1.5;
}

/* Checkboxen modern */
.batch-checkbox-card {
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    margin: 6px 0;
    transition: all 0.2s ease;
    min-height: 100px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.batch-checkbox-card:hover {
    border-color: #0175AB;
    background: #f0f7ff;
}
.batch-checkbox-card.active {
    border-color: #0175AB;
    background: #fff;
}
.batch-checkbox-card.readonly {
    cursor: not-allowed;
    background: #f8f9fa;
    border-color: #e0e0e0;
    opacity: 0.8;
}
.batch-checkbox-card.readonly:not(.active) {
    /* Optisch deutlicher: schraffierter Hintergrund + dezenter Inset-Rahmen */
    background-image: repeating-linear-gradient(
        45deg,
        #f3f3f3,
        #f3f3f3 8px,
        #ececec 8px,
        #ececec 16px
    );
    box-shadow: inset 0 0 0 2px rgba(1,117,171,0.15);
    border-color: #d0d7dd;
}
.batch-checkbox-card.readonly .checkbox-title,
.batch-checkbox-card.readonly .checkbox-desc {
    color: #777;
}
.batch-checkbox-card.readonly .checkbox-title::after {
    /* Kleines Schloss-Icon als Hinweis auf Readonly */
    content: ' 🔒';
    color: #777;
    margin-left: 6px;
    font-size: 13px;
}
.batch-checkbox-card.readonly input[type="checkbox"] {
    cursor: not-allowed;
    pointer-events: none;
}
.batch-checkbox-card.readonly .checkbox-title {
    color: #666;
}

/* Bessere Unterscheidung: Unchecked + disabled (readonly) klar erkennbar */
.batch-checkbox-card.readonly:not(.active) {
    background: repeating-linear-gradient(135deg, #f3f4f6, #f3f4f6 8px, #eef1f4 8px, #eef1f4 16px); /* leichte Schraffur für disabled */
    border-color: #c8ced6;
    box-shadow: inset 0 0 0 2px #d6dbe1; /* zusätzlicher Rahmen-Inset für deutlichen disabled-Look */
}
.batch-checkbox-card.readonly:not(.active) .checkbox-title,
.batch-checkbox-card.readonly:not(.active) .checkbox-desc {
    color: #777; /* Titel/Description abgedunkelt */
}
.batch-checkbox-card.readonly:not(.active) input[type="checkbox"] {
    filter: grayscale(100%);
    opacity: 0.9; /* Checkbox optisch stärker abgeschwächt */
}

/* Deutlicher disabled-Badge innerhalb der Karte */
.batch-checkbox-card.readonly:not(.active) .checkbox-content::after {
    content: "deaktiviert";
    display: inline-block;
    margin-left: 8px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    color: #5c6773;
    background: #e5e9ef;
    border: 1px solid #c8ced6;
    border-radius: 10px;
    vertical-align: middle;
}

/* Zusätzlich: globales Muster für deaktivierte, ungecheckte Controls innerhalb der Batch-Form */
.batch-upload-card .form-control:disabled::placeholder,
.batch-upload-card .form-control[disabled]::placeholder {
    color: #aaa;
}
.batch-checkbox-card input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: #0175AB;
}
.batch-checkbox-card .checkbox-content {
    flex: 1;
}
.batch-checkbox-card .checkbox-title {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
}
.batch-checkbox-card .checkbox-desc {
    font-size: 11px;
    line-height: 1.5;
    color: #555;
    margin: 0;
}

/* Buttons */
.batch-upload-card .btn-primary {
    background: linear-gradient(135deg, #0175AB 0%, #015d8a 100%);
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
}
.batch-upload-card .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,102,204,0.3);
}
.batch-upload-card .btn-default {
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 28px;
    font-weight: 500;
    color: #666;
    transition: all 0.2s ease;
}
.batch-upload-card .btn-default:hover {
    background: #e9ecef;
    border-color: #ccc;
}

/* Info-Box */
.batch-upload-card .alert-info {
    background: linear-gradient(135deg, #e6f3ff 0%, #cce5ff 100%);
    border: none;
    border-left: 4px solid #0175AB;
    border-radius: 8px;
    color: #004085;
}

/* Ergebnis-Bereich */
#batchResult {
    border-radius: 8px;
}
#batchResult.alert-info {
    background: linear-gradient(135deg, #e6f3ff 0%, #cce5ff 100%);
    border: none;
    border-left: 4px solid #0175AB;
}
#batchResult .table {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}
#batchResult .table thead th {
    background: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #333;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .batch-upload-card .card-body {
        padding: 16px;
    }
    .batch-form-section {
        padding: 16px;
    }
}