/* tables.css — MageGrid DataTable / Grid base table styling */

/* ----- Table Base (modern style — uniform across app) ----- */
.mage-table{font-size:var(--fs-base);border:none;border-collapse:separate;border-spacing:0;width:100%;border-radius:0}
.mage-table thead th{background-color:var(--ink) !important;color:var(--muted) !important;font-weight:var(--fw-normal);border:none;padding:var(--sp-3) var(--sp-7);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking);white-space:nowrap;cursor:pointer;position:sticky !important;top:var(--dtx-head-h, 0px) !important;z-index:var(--z-nav);user-select:none;transition:background var(--dur-fast) ease}
/* Sticky-Header-Overlap: tbody-Zellen dürfen den fixierten Kopf NICHT übermalen */
.mage-table tbody td{position:static;background-clip:padding-box}
.mage-table tbody tr{position:relative;z-index:var(--z-base)}
/* Ecken: NUR links an der ersten, NUR rechts an der letzten Spalte (galt vorher rundum → optisch schief,
   sobald das Kernmodul die Auswahl-Spalte voranstellt). Zentral hier, nie im aufsetzenden Modul. */
.mage-table thead th:first-child{border-radius:var(--radius) 0 0 2px}
.mage-table thead th:last-child{border-radius:0 var(--radius) var(--radius) 0}
.mage-table thead th:hover{background:var(--grey-800) !important;color:var(--surface) !important}
.mage-table thead th.sorting_asc::after,
.mage-table thead th.sorting_desc::after{color:var(--o);opacity:1}
.mage-table thead{border-bottom:none}
.mage-table tbody::before{content:'';display:table-row;height:var(--sz-20)}
.mage-table tbody td{padding:var(--sp-6) var(--sp-7);vertical-align:middle;border:none;border-bottom:1px solid var(--grey-200);color:var(--grey-800);font-size:var(--fs-base);background-color:var(--surface);transition:background-color var(--dur-fast) ease}
.mage-table tbody tr:nth-child(odd) td{background-color:var(--surface)}
.mage-table tbody tr:hover td{background-color:var(--info-bg) !important}
.mage-table tbody tr:hover td:first-child{border-radius:var(--radius) 0 0 2px}
.mage-table tbody tr:hover td:last-child{border-radius:0 var(--radius) var(--radius) 0}
.mage-table tbody tr.clickable-row{cursor:pointer}

/* ----- Checkbox Column (minimal width, aligned — MUST stay 28px on ALL tables) ----- */
.mage-table th.col-check,
.mage-table td.col-check{width:var(--sz-28) !important;min-width:var(--sz-28) !important;max-width:var(--sz-28) !important;text-align:center;padding:var(--sp-4) var(--sp-1) !important;box-sizing:border-box;overflow:hidden}
.mage-table th.col-check{cursor:default !important;padding-right:var(--sp-1) !important}
.mage-table th.col-check::before,
.mage-table th.col-check::after{display:none !important;content:none !important}
table.dataTable thead>tr>th.col-check::before,
table.dataTable thead>tr>th.col-check::after{display:none !important;content:none !important}
table.dataTable thead>tr>th.col-check{padding-right:var(--sp-1) !important;cursor:default !important}
.mage-table colgroup col:first-child{width:var(--sz-28) !important}
.mage-table th.col-check .mage-check-wrap{max-width:var(--sz-28);overflow:visible}
.mage-table th.col-check input[type="checkbox"],
.mage-table td.col-check input[type="checkbox"]{width:var(--sz-14);height:var(--sz-14);cursor:pointer;accent-color:var(--ink);margin:0 auto;display:block}

/* ----- Row Action Buttons ----- */
.mage-table .btn-action{padding:var(--sp-2);font-size:var(--fs-md);border:none;border-radius:var(--radius);background:var(--grey-100);color:var(--grey-600);cursor:pointer;transition:background var(--dur-fast),color var(--dur-fast);line-height:1;width:var(--sz-32);height:var(--sz-32);display:inline-flex;align-items:center;justify-content:center}
.mage-table .btn-action:hover{background:var(--grey-200);color:var(--grey-700)}

/* ----- Status Indicator (centralized — single source of truth) ----- */
.status-indicator { display: flex; align-items: center; gap:var(--sp-2); white-space: nowrap; }
.status-dot { width:var(--sz-8); height:var(--sz-8); border-radius: 50%; flex-shrink: 0; }
.status-dot.active { background: var(--ok); box-shadow:var(--shadow-md); }
.status-dot.inactive { background: var(--grey-300); }
.status-dot-label { font-size:var(--fs-sm); color: var(--grey-500); }
.mage-table td:last-child .status-indicator { justify-content: flex-end; }

/* ----- Status Badges ----- */

/* ----- Count Badges ----- */
.count-badge{display:inline-block;background:var(--grey-200);color:var(--grey-700);font-size:var(--fs-2xs);font-weight:var(--fw-bold);padding:var(--sp-0) var(--sp-2);border-radius:var(--radius);line-height:1.6;min-width:var(--sz-24);text-align:center}
.count-badge.has-items{background:var(--ok-bg);color:var(--ok-fg)}

/* ----- Clickable Label Hover (global, works with any background color) ----- */
/* Uses ::after with semi-transparent black overlay so it darkens any label color on hover. */
.mage-label-clickable{position:relative;cursor:pointer;overflow:hidden}
.mage-label-clickable::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;transition:background var(--dur-fast)}
.mage-label-clickable:hover::after{background:var(--shadow-line)}

/* ----- Link Icons in Table Cells ----- */
.mage-table .cell-link{color:var(--grey-600);text-decoration:none;font-size:var(--fs-md)}
.mage-table .cell-link:hover{color:var(--o)}

/* ----- Logo Cell (Customers) ----- */
.customer-logo-cell img{max-height:var(--sz-28);max-width:var(--sz-80);object-fit:contain}


/* ===== Toolbar im ERP-Layout: 2 Zeilen ===== */
/* Zeile 1: Suche links · Filter/Spalten/Export/Modul-Buttons rechts */
.dataTables_wrapper .dtx-r1{display:flex;align-items:center;gap:var(--sp-5);margin-bottom:var(--sp-5);flex-wrap:wrap}
.dataTables_wrapper .dtx-r1 .dataTables_filter{flex:1;min-width:0;margin:0;text-align:left;position:relative}
.dataTables_wrapper .dtx-r1 .dataTables_filter input{width:100%;min-width:0;margin:0 !important}
.dataTables_wrapper .dtx-searchwrap .dtx-search-x{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:none;background:none;color:var(--muted);font-size:var(--fs-lg);line-height:1;cursor:pointer;padding:0 var(--sp-1)}
.dataTables_wrapper .dtx-searchwrap .dtx-search-x:hover{color:var(--grey-700)}
.dataTables_wrapper .dtx-r1-btns{flex-wrap:wrap;display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}
.dataTables_wrapper .dtx-dd{position:relative;display:inline-flex}
/* Zeile 2: Aktionen + Zähler links · Seitenwahl + Pager rechts */
/* Die Werkzeugleiste UMBRICHT, wenn der Platz nicht reicht — sonst schiebt die rechte Gruppe
   (Seitenlänge + Pager, ~330px) im schmalen Fenster ueber den rechten Fensterrand hinaus. Das traf
   JEDE Tabelle im System; die Kompakt-Schwellen in datatable.js (< 560px) greifen erst spaeter und
   sind eine Schaetzung — Umbruch stimmt bei jeder Breite. */
/* KEIN eigener Abstand nach unten: die Luft zum Tabellenkopf gehört dem Kopf-BLOCK (.dtx-head,
   padding-bottom) — ein margin hier fiele aus dessen gemessener Höhe heraus (Margin-Collapse) und
   der klebende Kopf sässe genau um diesen Betrag zu hoch: beim Scrollen klebte er an der
   Paginierung (Florian 12.09.2026: „schiebt es den dunklen Tableheader noch weiter hoch"). */
.dataTables_wrapper .dtx-r2{display:flex;align-items:center;gap:var(--sp-6);margin-bottom:0;flex-wrap:wrap;row-gap:var(--sp-2)}
.dataTables_wrapper .dtx-r2-l{display:inline-flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;min-width:0}
.dataTables_wrapper .dtx-r2-r{margin-left:auto;display:inline-flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;min-width:0}
.dataTables_wrapper .dtx-r2 .dataTables_info{color:var(--muted);font-size:var(--fs-base);padding:0;white-space:nowrap}
.dataTables_wrapper .dtx-r2 .dataTables_length{display:inline-flex;align-items:center}
.dataTables_wrapper .dtx-r2 .dataTables_length label{font-size:var(--fs-base);color:var(--muted);display:inline-flex;align-items:center;gap:var(--sp-2)}
.dataTables_wrapper .dtx-r2 .dataTables_length select.form-select{width:auto;min-width:var(--sz-64);padding:var(--sp-2) var(--sp-3) !important}
.dataTables_wrapper .dtx-act{display:inline-flex}
.dataTables_wrapper .dtx-act .mpp-mount{min-width:var(--sz-120)}
.dataTables_wrapper .dtx-sel-count{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--o);white-space:nowrap}
/* Dropdown-Panels (Filter/Spalten) */
.dataTables_wrapper .dtx-panel{position:absolute;top:100%;right:0;margin-top:var(--sp-1);z-index:var(--z-nav);min-width:var(--sz-240);max-height:var(--sz-360);overflow-y:auto;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-md);padding:var(--sp-3)}
/* Filter-Panel: Facetten (Label + flache Wert-Chips) — KEIN verschachteltes Dropdown */
.dataTables_wrapper .dtx-frow{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-3) var(--sp-2);border-bottom:1px solid var(--grey-100)}
.dataTables_wrapper .dtx-frow:last-child{border-bottom:none}
.dataTables_wrapper .dtx-flabel{font-size:var(--fs-xs);font-weight:var(--fw-heavy);letter-spacing:var(--tracking);text-transform:uppercase;color:var(--muted)}
.dataTables_wrapper .dtx-fopts{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.dataTables_wrapper .dtx-fopt{border:1px solid var(--border);background:var(--surface);color:var(--grey-700);border-radius:var(--radius);padding:var(--sp-1) var(--sp-4);font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast)}
.dataTables_wrapper .dtx-fopt:hover{background:var(--grey-100)}
.dataTables_wrapper .dtx-fopt.active{background:var(--o);border-color:var(--o);color:var(--surface)}
/* Seitenwahl-Dropdown (Dropdown-Modul) */
.dataTables_wrapper .dtx-lenwrap{display:inline-flex;align-items:center;gap:var(--sp-3)}
.dataTables_wrapper .dtx-len-lbl{font-size:var(--fs-base);color:var(--muted);white-space:nowrap}
.dataTables_wrapper .dtx-len-mount .mpp-mount{min-width:var(--sz-64)}
.dataTables_wrapper .dtx-crow{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2);font-size:var(--fs-base);color:var(--text);cursor:pointer;border-radius:var(--radius)}
.dataTables_wrapper .dtx-crow:hover{background:var(--grey-100)}
/* Auswahl-Spalte (Checkboxen) */
.mage-table th.dt-select,.mage-table td.dt-select{width:var(--sz-36);text-align:center;padding-left:var(--sp-4);padding-right:var(--sp-2)}
.mage-table td.dt-select input,.mage-table th.dt-select input{width:var(--sz-14);height:var(--sz-14);cursor:pointer;accent-color:var(--o);margin:0}
/* Pager (numeriert) — flach, 2px, aktiv = Orange */
.dataTables_wrapper .dataTables_paginate{padding:0}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--border)!important;border-radius:var(--radius)!important;background:var(--surface)!important;
  color:var(--text)!important;padding:var(--sp-1) var(--sp-4)!important;margin:0 var(--sp-0)!important;font-size:var(--fs-base)!important;
  min-width:auto!important;box-shadow:none!important;cursor:pointer}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{background:var(--grey-100)!important;border-color:var(--border)!important;color:var(--text)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background:var(--o)!important;border-color:var(--o)!important;color:var(--surface)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{background:var(--surface)!important;color:var(--grey-300)!important;cursor:default;border-color:var(--border)!important}
/* Eine Gruppe bricht nicht um — bei Platzmangel kürzt stattdessen der ResizeObserver (dtx-pg-compact/-min) */
.dataTables_wrapper .dataTables_paginate{white-space:nowrap}
/* Pager = EINE Gruppe (wie grouped icons): innen keine Doppel-Border — border-right 0 bis aufs letzte Element */
.dataTables_wrapper .dataTables_paginate .paginate_button{border-right:0!important;border-radius:0!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.first{border-radius:var(--radius) 0 0 var(--radius)!important}
.dataTables_wrapper .dataTables_paginate .paginate_button.last{border-right:1px solid var(--border)!important;border-radius:0 var(--radius) var(--radius) 0!important}
.dataTables_wrapper .dataTables_paginate .ellipsis{display:inline-block;border:1px solid var(--border);border-right:0;padding:var(--sp-1) var(--sp-4);background:var(--surface);color:var(--grey-500);font-size:var(--fs-base)}
/* Aktive Seite rechts abgrenzen: die Trennlinie IST die linke Border des Nachbarn — die färben wir,
   statt der aktiven Seite eine eigene rechte Border zu geben (das würde die Gruppe verschieben). */
.dataTables_wrapper .dataTables_paginate .paginate_button.current + .paginate_button,
.dataTables_wrapper .dataTables_paginate .paginate_button.current + .ellipsis{border-left-color:var(--o)!important}

/* Gruppen-Kopfzeile (data-group-by) — vom Kern gerendert, damit kein Modul eigene Gruppen-<tr> baut */
.mage-table tbody tr.dtx-group td{background:var(--grey-50);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:var(--tracking);color:var(--grey-500);font-weight:var(--fw-bold);padding:var(--sp-3) var(--sp-6) !important;border-bottom:1px solid var(--border)}
.mage-table tbody tr.dtx-group:hover td{background:var(--grey-50) !important}

/* Responsive Pagination (dtx-pg-compact/-min via ResizeObserver in datatable.js) — Platz sparen bei kleinen Fenstern. */
.dataTables_wrapper.dtx-pg-compact .dataTables_paginate .paginate_button:not(.previous):not(.next):not(.first):not(.last){display:none}
.dataTables_wrapper.dtx-pg-min .dataTables_paginate .paginate_button.first,
.dataTables_wrapper.dtx-pg-min .dataTables_paginate .paginate_button.last,
.dataTables_wrapper.dtx-pg-min .dataTables_paginate .paginate_button:not(.previous):not(.next){display:none}

/* Inaktive Zeile (Design::table Zeile ['inactive'=>true]) — EINE System-Optik für „aus". */
.mage-table tbody tr.dt-row-inactive td{opacity:var(--op-dim)}

/* ── Eine Datentabelle sprengt NIE ihr Fenster ─────────────────────────────────────────────
   Entitäts-Zellen (Design::entityCell) enthalten lange Titel mit `white-space:nowrap`. In einer
   auto-Layout-Tabelle zieht das die Spalte auf die volle Textbreite → die Tabelle wird breiter als
   das Fenster und die hinteren Spalten (Status, Tags …) waren nicht mehr zu sehen. `max-width:0`
   nimmt der Zelle diesen Mindest-Anspruch: der Titel kürzt mit „…" (wie im ERP), die Spalten
   bleiben. Kern-Regel, damit KEIN Modul das je wieder selbst lösen muss. */
.mage-table td:has(> .cc-ent) { max-width: 0; overflow: hidden; min-width: var(--sz-240); }
/* Lange Titel (Ticket-Betreffs!) brechen auf ZWEI Zeilen um, statt nach drei Wörtern zu enden.
   Erst darüber hinaus wird gekürzt — der volle Text hängt ohnehin als Tooltip an der Zelle. */
.mage-table td > .cc-ent > .cc-ent-info > .cc-ent-title {
  white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.25;
}
.mage-table td > .cc-ent { min-width: 0; }
/* Der NAME ist das, wonach man sucht: er darf nie zur Briefmarke schrumpfen. Wird das Fenster zu
   schmal für alle Spalten, rollt die Tabelle waagerecht — der Name bleibt lesbar. */
.dataTables_wrapper { min-width: 0; max-width: 100%; }
/* STICKY beim Scrollen (Florian 2026-09-12, jede Tabelle in jedem Fenster): die Werkzeugzeilen
   (Suche · Filter · Aktionen · Pager) kleben als EIN Block oben, der Tabellenkopf direkt darunter
   (top = gemessene Blockhöhe --dtx-head-h, datatable.js). Der Rahmen um die Tabelle ist NUR dann ein
   waagerechter Rollbereich, wenn die Tabelle wirklich breiter ist als das Fenster (.dtx-scrollx) —
   jeder Rollbereich wäre sonst der Bezugsrahmen des klebenden Kopfes und der klebte nie. */
/* Der Abstand zum Tabellenkopf ist Teil des Blocks (padding, nicht margin) — damit steht er auch im
   klebenden Zustand und ist in der gemessenen Höhe (--dtx-head-h) enthalten. Er ist derselbe wie
   zwischen den Werkzeugzeilen (--sp-5): „es braucht hier den gleichen Abstand". */
.dataTables_wrapper .dtx-head { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--surface); padding-bottom: var(--sp-5); }
/* Der Block klebt an der INNENkante des Rollbereichs — darüber liegt noch dessen Innenabstand (Fenster:
   --sp-7). Diese Fläche deckt ihn ab, sonst schimmern hochgerollte Zeilen über der Suche durch. */
.dataTables_wrapper .dtx-head::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--sp-7); background: var(--surface); }
/* Verschachtelte Tabellen (Unterzeile einer Liste, Tabelle in der Sidebar eines Fensters) erben den
   Versatz NICHT: sonst klebt ihr Kopf um die Höhe der FREMDEN Werkzeugleiste versetzt — über ihrer
   ersten Zeile, deren Klicks er dann schluckt. */
.mage-table tbody tr.cc-row-child, .dataTables_wrapper .dataTables_wrapper { --dtx-head-h: 0px; }
.dataTables_wrapper .dtx-tblwrap { overflow-x: visible; max-width: 100%; }
.dataTables_wrapper.dtx-scrollx .dtx-tblwrap { overflow-x: auto; }
/* Wird das Fenster schmal, darf der Inhalt NICHT in die Nachbarspalte laufen (Status-Chip lag
   sonst über dem Projektnamen). Alles in der Entitäts-Zelle kürzt statt zu überlaufen. */
.mage-table td > .cc-ent > .cc-ent-info { overflow: hidden; }
.mage-table td .cc-ent-meta { min-width: 0; overflow: hidden; flex-wrap: nowrap; }
.mage-table td .cc-ent-meta-text { overflow: hidden; text-overflow: ellipsis; }

/* Spaltenbreiten-Skala (Design::table ['width' => 30]) — feste Stufen statt geratener Pixelwerte. */
.mage-table th.dt-w-5  { width: 5%; }
.mage-table th.dt-w-7  { width: 7%; }
.mage-table th.dt-w-10 { width: 10%; }
.mage-table th.dt-w-12 { width: 12%; }
.mage-table th.dt-w-15 { width: 15%; }
.mage-table th.dt-w-20 { width: 20%; }
.mage-table th.dt-w-25 { width: 25%; }
.mage-table th.dt-w-30 { width: 30%; }
.mage-table th.dt-w-35 { width: 35%; }
.mage-table th.dt-w-40 { width: 40%; }
.mage-table th.dt-w-50 { width: 50%; }

/* ── Tabellen IN DER SIDEBAR: kein Querlauf ──────────────────────────────────────────────────
   Im Fenster darf eine Tabelle waagerecht rollen (der Name bleibt dann lesbar). In der Sidebar
   NICHT: dort ist der Querlauf nicht erkennbar, und die Bedien-Knöpfe der letzten Spalte werden
   unerreichbar (gemeldet bei den DNS-Records). Deshalb hier: die deklarierten Spaltenbreiten
   gelten EXAKT (table-layout: fixed), der Mindestanspruch der Namensspalte entfällt, und jeder
   Inhalt kürzt mit „…" statt die Tabelle breiter zu machen. */
.mage-sidebar-body .dataTables_wrapper .dtx-tblwrap { overflow-x: hidden; }
.mage-sidebar-body .mage-table { table-layout: fixed; width: 100%; }
.mage-sidebar-body .mage-table td:has(> .cc-ent) { min-width: 0; }
.mage-sidebar-body .mage-table th,
.mage-sidebar-body .mage-table td { overflow: hidden; text-overflow: ellipsis; }
.mage-sidebar-body .mage-table td > * { max-width: 100%; }
/* Kennungen (Endpunkte, Pfade, Schlüssel) sind KEIN Fliesstext, der gekürzt werden darf — „i18n.capt…" ist
   wertlos. Sie brechen deshalb in der schmalen Sidebar-Spalte um, statt abgeschnitten zu werden. */
.mage-sidebar-body .mage-table td code,
.mage-sidebar-body .mage-table td .txt-mono { white-space: normal; overflow-wrap: anywhere; }
/* Die Aktions-Spalte behält ihre Knöpfe nebeneinander — sie ist das, was man erreichen muss. */
.mage-sidebar-body .mage-table td.dt-actions { overflow: visible; white-space: nowrap; }

/* GOLDENE REGEL G9 (Florian 12.09.2026): „Controls in der letzten Spalte müssen rechtsbündig sein."
   Sie standen linksbündig und liessen rechts eine grosse Lücke — die Knöpfe gehören an die Kante,
   an der man sie sucht. Gilt für Kopf und Zelle, in Fenstern wie in Sidebars. */
.mage-table th.dt-actions, .mage-table td.dt-actions { text-align: right; }
.mage-table td.dt-actions > .dt-actions,
.mage-table td.dt-actions > .cc-ent-actions,
.mage-table td.dt-actions > .cc-row { display: flex; justify-content: flex-end; }
/* Zweiter Weg, unabhängig von der Modul-Disziplin: Design::table setzt die Spaltenklasse nur auf den
   KOPF — ob die Zelle sie auch trägt, muss das Modul je Zeile selbst angeben, und genau das wird
   vergessen. Deshalb greift die Regel zusätzlich an der letzten Zelle, wenn dort Bedienknöpfe sitzen. */
.mage-table td:last-child:has(> .cc-ent-actions),
.mage-table td:last-child:has(> .dt-actions),
.mage-table td:last-child:has(> .ac-btn-action),
.mage-table td:last-child:has(> .cc-row > .ac-btn-action) { text-align: right; }
.mage-table td:last-child > .dt-actions,
.mage-table td:last-child > .cc-ent-actions { display: flex; justify-content: flex-end; }

/* ── Tabellen IN DER SIDEBAR kleben NICHT (Florian 12.09.2026) ───────────────────────────────
   Eine Sidebar ist eine Lesefläche mit vielen Akkordeon-Tabs, kein Datengitter. Ein klebender
   Tabellenkopf hängt dort über fremdem Inhalt und lag VOR der ersten Zeile — „man sieht den ersten
   Record nicht", „die erste Zeile ist am Text abgeschnitten, etwas Weisses liegt darüber" (WAF,
   Monitorings, Git, Verbindungsdaten, Controlling-Detail). Deshalb: Kopf und Werkzeugblock stehen
   hier im Fluss, die weisse Deckfläche des Blocks entfällt, und der Abstand über der Tabelle ist
   derselbe wie überall. Das `!important` spiegelt nur das `!important` der Basisregel oben. */
.mage-sidebar-body .mage-table thead th { position: static !important; top: auto !important; }
.mage-sidebar-body .dataTables_wrapper .dtx-head { position: static; padding-bottom: var(--sp-5); }
.mage-sidebar-body .dataTables_wrapper .dtx-head::before { content: none; }
/* Ohne Werkzeugleiste (features 'none') trägt der leere Block keinen Abstand — sonst steht die
   Tabelle grundlos tief im Tab („zu viel Whitespace bis zum Tableheader"). */
.mage-sidebar-body .dataTables_wrapper .dtx-head:empty { display: none; }
/* Der Platzhalter über der ersten Zeile ist im Fenster die Luft unter dem klebenden Kopf; in der
   Sidebar klebt nichts — dort ist er nur Leerraum. */
.mage-sidebar-body .mage-table tbody::before { display: none; }

/* ── SIDEBAR: Suche steht LINKS NEBEN der Paginierung, in EINER Zeile ────────────────────────
   Florian 12.09.2026: „Das Suchfeld steht heute oberhalb der Paginierung. Es soll in ALLEN
   Sidebar-Tabellen links neben der Paginierung stehen, in einer Zeile." Das dom in datatable.js
   setzt die Suche dafür in Zeile 2; hier bekommt sie den freien Platz links, der Pager sitzt
   (über das margin-left:auto von .dtx-r2-r) unmittelbar rechts daneben. min-width:0 sorgt dafür,
   dass die Suche schrumpft statt die Zeile umzubrechen — in der schmalen Sidebar der Normalfall. */
.mage-sidebar-body .dataTables_wrapper .dtx-r2 .dataTables_filter { flex: 1; min-width: 0; margin: 0; text-align: left; position: relative; }
.mage-sidebar-body .dataTables_wrapper .dtx-r2 .dataTables_filter input { width: 100%; min-width: 0; margin: 0 !important; }
/* Die linke Gruppe (Bulk-Aktionen) steht in der Sidebar meist leer — als leeres Flex-Kind kostet sie
   trotzdem einen Zeilen-Abstand zwischen Suche und Pager. „Links NEBEN der Paginierung" heisst genau
   ein Abstand, nicht zwei. Mit Aktionen (Auswahl-Spalte) greift die Regel nicht. */
.mage-sidebar-body .dataTables_wrapper .dtx-r2 > .dtx-r2-l:empty { display: none; }
/* GLEICHE HÖHE wie das Suchfeld — und zwar die im System vorhandene, nicht eine erfundene: das
   Formular-Kernmodul gibt ALLEN einzeiligen Controls (Input/Select/Picker) var(--sz-36)
   (forms.css: „EINE Höhe für ALLE einzeiligen Controls"). Das Suchfeld ist ein input[type=search]
   und hat sie damit schon; die Pager-Knöpfe holten ihre Höhe bisher aus dem Polster und waren
   niedriger. Also: feste Höhe, Polster oben/unten raus, Inhalt mittig. Das !important spiegelt
   nur das !important der Pager-Grundregel weiter oben — sonst gewönne dort das Polster. */
.mage-sidebar-body .dataTables_wrapper .dtx-r2 .dataTables_paginate .paginate_button,
.mage-sidebar-body .dataTables_wrapper .dtx-r2 .dataTables_paginate .ellipsis {
  height: var(--sz-36) !important; box-sizing: border-box !important;
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  padding-top: 0 !important; padding-bottom: 0 !important;
}
/* Zeile 1 trägt in der Sidebar jetzt nur noch die Knöpfe (Filter/Spalten/Export/Modul-Buttons).
   Ist dort keiner — oder nur der ausgeblendete Filter-Knopf, weil es keine Facetten gibt —, wäre
   sie eine leere Zeile samt Abstand. Dann fällt sie ganz weg. */
.mage-sidebar-body .dataTables_wrapper .dtx-r1:not(:has(> .dtx-r1-btns > *)),
.mage-sidebar-body .dataTables_wrapper .dtx-r1:has(> .dtx-r1-btns > .dtx-dd:only-child > button[hidden]) { display: none; }

/* ── SIDEBAR mit HÖCHSTENS ZEHN Datensätzen: kein Suchfeld, keine Paginierung ────────────────
   Florian 12.09.2026: bei zehn oder weniger Datensätzen sind beide „sinnlos und nur Lärm";
   ab dem elften erscheinen sie automatisch wieder. Die Klasse setzt datatable.js nach jedem
   Zeichnen anhand der Gesamtzahl (page.info().recordsTotal) — damit greift es auch bei
   server-seitig geladenen Listen, wo die Zahl erst nach der Antwort feststeht. */
/* Runde 4 (Florian 12.09.2026): „Suche, Filter und Paginierung werden nur angezeigt, wenn die Tabelle
   mehr als zehn Elemente hat" — der Filter-Knopf gehört ausdrücklich dazu. Export bleibt (optional). */
.dataTables_wrapper.dtx-sb-few .dataTables_filter,
.dataTables_wrapper.dtx-sb-few .dtx-filter-dd,
.dataTables_wrapper.dtx-sb-few .dataTables_paginate { display: none; }

/* Schlichte Tabelle (Design::plainTable) — Datei-Inhalt (CSV): Gitter, klebender Kopf, Zebra, Zeilennummern.
   Bewusst KEINE Datentabelle (kein dunkler Kopf, keine Suche/Pager). */
.cc-ptable-wrap { overflow: auto; max-width: 100%; }
.cc-ptable { border-collapse: collapse; font-size: var(--fs-sm); background: var(--surface); }
.cc-ptable th, .cc-ptable td { border: 1px solid var(--grey-200); padding: var(--sp-2) var(--sp-4); text-align: left; white-space: nowrap; vertical-align: top; }
.cc-ptable thead th { position: sticky; top: 0; background: var(--grey-100); font-weight: var(--fw-bold); color: var(--grey-700); z-index: var(--z-base); }
.cc-ptable tbody tr:nth-child(even) { background: var(--grey-50); }
.cc-ptable .cc-ptable-num { background: var(--grey-100); color: var(--muted); font-size: var(--fs-2xs); text-align: right; position: sticky; left: 0; z-index: var(--z-base); }

/* Zeitraster in einer Tabelle (Design::gridCell) — Stunden je Tag im Wochenblatt: zentrierter Wert in Mono;
   Tageszustände heute (Markenfarbe, hauchzart) und Wochenende (schraffiert); klickbare Zelle beim Zeigen in
   Markenfarbe. Kopf der heutigen Spalte = Spalten-'class' cc-col-today; Zeilen: cc-row-sum (Summenzeile, fett mit
   kräftiger Unterkante), cc-row-group (Gruppenzeile mit Trennlinie oben).
   GEWICHTUNG: FETT sind die SUMMEN (cc-gcell-sum, cc-row-sum) — Einzelwerte bleiben normal, auch wenn sie
   klickbar sind. Ein Blatt, in dem jede Einzelzahl fett ist, hat keine auffällige Summe mehr. */
.mage-table th.cc-col-today { border-bottom: 2px solid var(--o); }
.cc-gcell { display: block; text-align: center; font-family: var(--mono); min-height: var(--sz-20); }
.cc-gcell.cc-gcell-today { background: color-mix(in srgb, var(--o) 8%, transparent); }
.cc-gcell.cc-gcell-weekend { background: repeating-linear-gradient(135deg, transparent 0 var(--sz-6), color-mix(in srgb, var(--grey-300) 45%, transparent) var(--sz-6) calc(var(--sz-6) + 1px)); }
.cc-gcell.cc-gcell-link { cursor: pointer; color: var(--ink); font-weight: var(--fw-normal); }
.cc-gcell.cc-gcell-link:hover { color: var(--o); }
.cc-gcell.cc-gcell-sum { color: var(--ink); font-weight: var(--fw-bold); }
.mage-table tbody tr.cc-row-sum td { font-weight: var(--fw-bold); border-bottom: 2px solid var(--border); }
.mage-table tbody tr.cc-row-group td { border-top: 1px solid var(--border); }
/* UNTERZEILE einer Gruppenzeile (CC.table.childRow): nachgeladener Inhalt zu EINER Zeile, über die
   volle Breite eingerückt und hauchzart hinterlegt — damit sichtbar bleibt, wozu er gehört. */
.mage-table tbody tr.cc-row-child > td { background: var(--grey-50); border-top: 0; padding: 0 0 0 var(--sp-8); }

/* Sidebar: die Knopfgruppe sitzt in Zeile 2 zwischen Suche und Blätterung (datatable.js verschiebt sie). */
.mage-sidebar-body .dataTables_wrapper .dtx-r2 > .dtx-r1-btns { display: flex; align-items: center; gap: var(--sp-2); flex: 0 0 auto; }
.mage-sidebar-body .dataTables_wrapper .dtx-r2 > .dtx-r1-btns:empty { display: none; }
/* Wenige Datensätze (<= 10): Suche und Blätterung sind aus. Bleibt dann auch kein sichtbarer Knopf,
   fällt der ganze Werkzeugblock samt seinem Polster weg — vorher standen dort 12 px Leerraum,
   weil :empty an den nur versteckten Kindern scheiterte. */
.mage-sidebar-body .dataTables_wrapper.dtx-sb-few .dtx-head:not(:has(.dtx-r1-btns > :not(.dtx-filter-dd))) { display: none; }