:root {
	--accent: #0066b3;
	--accent-dark: #004f8b;
	--border: #d0d5da;
	--bg: #fff;
	--head-bg: #f9f9f9;
	--btn-bg: #f9f9f9;
	--text: #1f2933;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--text);
	background: var(--bg);
}

.page {
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 20px 60px;
}

h1 {
	font-size: 1.5rem;
	margin: 0 0 20px;
}

/* Wenn die Seite per iframe eingebettet ist: Ueberschrift ausblenden
   und oberen Abstand reduzieren. */
html.embedded h1 {
	display: none;
}

html.embedded .page {
	padding-top: 12px;
}

/* Sticky Toolbar: Filter-Buttons links, Suchfeld rechts. Klebt oben am
   Viewport, der Tabellenkopf dockt direkt darunter an (--toolbar-height wird
   per JS gesetzt). */
.toolbar {
	position: sticky;
	top: 0;
	z-index: 3;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	background: var(--bg);
	padding: 2px 0 4px 0;
}

/* display:contents loest den .filter-bar-Kasten auf: die Buttons werden zu
   direkten Flex-Items der Toolbar. Dadurch teilen sich Buttons und Suchfeld
   denselben umbrechenden Flow, und das Suchfeld fuellt (per margin-left:auto)
   den Leerraum rechts neben der letzten Button-Zeile, statt in eine neue Zeile
   darunter zu rutschen. */
.filter-bar {
	display: contents;
}

/* Suchfeld rechtsbuendig; steht auch dann rechts, wenn keine Filter-Buttons
   vorhanden sind (leeres .filter-bar fehlt dann -> margin-left schiebt rechts). */
.toolbar .dataTables_filter {
	margin-left: auto;
	text-align: right;
}

/* Tabellenkopf sticky unter der Toolbar.
   !important, weil DataTables die position der thead-Zellen sonst aushebelt. */
table.dataTable thead th {
	position: sticky !important;
	top: var(--toolbar-height, 0px);
	z-index: 2;
	background: var(--head-bg);
}

.filter-btn {
	border: 1px solid var(--border);
	background: var(--btn-bg);
	color: var(--text);
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	font-size: 0.9rem;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-btn:hover {
	border-color: var(--accent);
	background: var(--bg);	
}

.filter-btn.active {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--bg);
}

table.dataTable {
	background: var(--bg);
}

a {
	color: var(--accent);
}

a:hover {
	color: var(--accent-dark);
}

input[type="search"] {
    border-radius: 20px;
    margin-left: 7px;
    height: 30px;
    padding: 5px;
    border: 1px solid var(--border);
}
input[type="search"]:focus {
	border: 1px solid var(--accent);
	outline: none;
	box-shadow: 0 0 0 2px rgba(0, 102, 179, 0.2);
}

/* === Zeilen-Toenung: nur per Alpha, additiv ===============================
   Problem: DataTables faerbt Zeilenstreifen, Sortierspalte UND Hover alle ueber
   denselben inset-box-shadow. Pro Zelle ist aber nur EIN box-shadow aktiv, daher
   ueberschreiben sie sich gegenseitig statt sich zu addieren (Hover auf der
   sortierten Spalte war z.B. unsichtbar).
   Loesung: Den Zeilenstreifen in einen eigenen Kanal (background-color)
   verschieben. Dann bleibt der box-shadow-Kanal frei fuer Sortierspalte + Hover,
   die sich als gestapelte Alpha-Schichten addieren. */

:root {
	--row-stripe: rgba(0, 0, 0, 0.03);      /* Zeilenstreifen (ungerade Zeilen) */
	--col-sort: rgba(0, 0, 0, 0.022);       /* Sortierspalte (neutrales Grau, dezent) */
	--row-hover: rgba(0, 0, 0, 0.05);       /* Hover-Zeile */
}

/* Zeilenstreifen als Hintergrund statt box-shadow (Vendor-Schatten abschalten),
   damit die Toenungen unten additiv darueberliegen koennen. */
table.dataTable.display > tbody > tr.odd > * {
	background-color: var(--row-stripe);
	box-shadow: none;
}
table.dataTable.display > tbody > tr.even > * {
	background-color: transparent;
	box-shadow: none;
}

/* Sortierspalte: eine Alpha-Schicht (ueberall gleich, da der Streifen jetzt im
   Hintergrund liegt und durchscheint). */
table.dataTable.display > tbody > tr > .sorting_1,
table.dataTable.display > tbody > tr > .sorting_2,
table.dataTable.display > tbody > tr > .sorting_3 {
	box-shadow: inset 0 0 0 9999px var(--col-sort) !important;
}

/* Sortierter Spaltenkopf: gleiche Alpha-Schicht ueber dem Header-Hintergrund. */
table.dataTable > thead > tr > th.sorting_asc,
table.dataTable > thead > tr > th.sorting_desc {
	box-shadow: inset 0 0 0 9999px var(--col-sort);
}

/* Hover-Zeile: eine Alpha-Schicht. */
table.dataTable.display > tbody > tr:hover > * {
	box-shadow: inset 0 0 0 9999px var(--row-hover) !important;
}

/* Ueberschneidung Hover x Sortierspalte: beide Schichten additiv stapeln, sodass
   die sortierte Zelle der ueberfahrenen Zeile sichtbar dunkler wird. */
table.dataTable.display > tbody > tr:hover > .sorting_1,
table.dataTable.display > tbody > tr:hover > .sorting_2,
table.dataTable.display > tbody > tr:hover > .sorting_3 {
	box-shadow: inset 0 0 0 9999px var(--row-hover),
		inset 0 0 0 9999px var(--col-sort) !important;
}