/*!
* Default skin for Imperator Admin
*/

/*
##################################################
AdminLTE 4 / Bootstrap 5.3 compatibility layer (Imperator v6)
ASCII-only comments (TV/Opera-safe convention kept project-wide)
##################################################
*/
/* .text-sm gibt es in AdminLTE 4 nicht mehr (in v3 = 0.875rem auf dem Body ->
   kompaktere UI). Der Body traegt weiterhin class="text-sm"; ohne Definition
   liefe der ganze Admin auf 16px statt der 14px des v5-Bestands -> alles groesser,
   Tabellen breiter (Responsive klappt zu frueh ein). Nachdefinieren = Bestand-Dichte. */
.text-sm { font-size: 0.875rem; }

/* BS5 .row-Gutter ist 1.5rem (24px) -> Formulare wirken weiter auseinander als der
   v5-Bestand. Gemessen: Schriftgroessen sind auf neu/Bestand identisch 14px, die
   Differenz war REIN das Gutter (BS5 col-Padding 12px vs Bestand 7.5px). Auf den
   Bestand-Wert ziehen (0.9375rem = 15px -> 7.5px col-Padding) = gewohnte Dichte.
   Kein g-*-Utility im Admin in Benutzung -> kein Konflikt. */
.row { --bs-gutter-x: 0.9375rem; }

/* Tom Select Multiselect (ersetzt bootstrap-select) auf Bestand-Optik:
   - Dropdown mit Haken je Option (checkbox_options-Plugin).
   - Control zeigt die Auswahl als KOMMA-LISTE ("Tarif 1, Tarif 2, ...") statt als
     gestapelte Tags -> niedrige Box wie das alte bootstrap-select-Dropdown.
   Abwaehlen laeuft ueber die Dropdown-Haken (kein remove_button). */
.ts-wrapper.multi .ts-control > .item {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: inherit;
}
.ts-wrapper.multi .ts-control > .item:not(:last-of-type)::after {
  content: ", ";
  white-space: pre;
}
/* Theme gibt dem Such-Input min-width:7rem -> bricht (leer) auf eine 2. Zeile um.
   Bei Multi wird per Dropdown-Haken gewaehlt, kein breites Tippfeld noetig -> klein
   halten, damit das Control einzeilig bleibt ("Tarif 1, Tarif 2"). */
.ts-wrapper.multi .ts-control > input { min-width: 2ch; }
/* Sobald etwas gewaehlt ist (has-items): Input klein + Placeholder ausgeblendet.
   Tom Select setzt den Placeholder beim Schliessen/Blur wieder -> CSS gewinnt
   robust, damit "Bitte auswaehlen" nach einer Auswahl nicht zurueckkommt.
   Ohne Auswahl bleibt der Placeholder normal sichtbar. */
.ts-wrapper.multi.has-items .ts-control > input {
  width: 2ch !important;
  min-width: 0 !important;
  flex: 0 1 auto;
}
.ts-wrapper.multi.has-items .ts-control > input::placeholder { color: transparent !important; }
.ts-dropdown .option .tomselect-checkbox {
  margin: 0 0.45em 0 0;
  vertical-align: middle;
}
/* ▼-Pfeil: Tom Select rendert fuer Multiselects keinen Caret -> CSS-Dreieck rechts
   (wie das alte bootstrap-select-Dropdown). */
.ts-wrapper.multi .ts-control {
  position: relative;
  padding-right: 1.8rem;
  /* Bestand: bei vielen Eintraegen EINZEILIG abschneiden statt umbrechen
     (sonst waechst die Box in die Hoehe). Vollstaendige Auswahl bleibt ueber
     die Dropdown-Haken sichtbar. */
  flex-wrap: nowrap;
  overflow: hidden;
  /* Konstante Hoehe (= BS5 form-control-sm) + vertikal zentriert, damit das Feld
     NICHT zwischen "Bitte auswaehlen" (leer) und Auswahl in der Groesse springt. */
  min-height: calc(1.5em + 0.5rem + 2px);
  align-items: center;
}
.ts-wrapper.multi .ts-control > .item { flex: 0 0 auto; }
.ts-wrapper.multi .ts-control::after {
  content: "\25BE"; /* ▾ */
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 0.6rem 0 0.45rem;
  /* Control-Hintergrund -> maskiert den einzeilig ueberlaufenden Text rechts,
     damit die Komma-Liste "abgeschnitten" wirkt und der Pfeil frei steht. */
  background-color: var(--bs-secondary-bg, #e9ecef);
  color: #343a40;
  font-size: 0.7rem;
  line-height: 1;
  pointer-events: none;
}

/* AdminLTE 3 hat im text-sm-Modus auch BS-Komponenten verkleinert. BS5-Buttons/
   Inputs nutzen aber absolute Groessen (1rem) und erben die 14px des Body NICHT
   -> explizit auf Bestand-Groesse (text-sm) ziehen, sonst ~25-33% zu gross.
   .btn-sm/.btn-lg/.btn-xs bleiben spezifischer und gewinnen weiterhin. */
.btn {
  padding: 0.375rem 0.75rem; /* BS4/Bestand-Maß (war 0.25/0.5 -> zu kompakt) */
  font-size: 0.875rem;
  border-radius: 0.25rem;     /* BS4-Radius 4px statt BS5 6px */
}
/* Button-Farben an den v5-Bestand (BS4-Palette) angleichen - BS5 nutzt andere
   Gruen-/Cyan-Toene (Test-Rueckmeldung: Button-Farben weichen ab). Ueber die
   BS5-Button-Variablen, damit Hover/Active konsistent bleiben. */
/* Toolbar-Aktionsbuttons: einheitlicher ~8px Abstand wie Bestand (BS5-Inline-
   Whitespace   ist nur ~4px). Gilt fuer ALLE Buttons der Toolbar-Gruppen
   (nicht per ID), sonst haben open/clone/compress/... keinen gleichen Abstand.
   Test-Rueckmeldung: Button-Abstaende weichen ab / sind ungleich. */
.button-add-edit-delete > .btn,
.button-add-edit-delete > span > .btn,
.button-add-edit-delete > .btn-group,
.button-export > .btn,
.button-export > .btn-group { margin-right: 0.25rem; }

.btn-success {
  --bs-btn-bg: #28a745; --bs-btn-border-color: #28a745;
  --bs-btn-hover-bg: #218838; --bs-btn-hover-border-color: #1e7e34;
  --bs-btn-active-bg: #1e7e34; --bs-btn-active-border-color: #1c7430;
  --bs-btn-disabled-bg: #28a745; --bs-btn-disabled-border-color: #28a745;
}
.btn-info {
  --bs-btn-bg: #17a2b8; --bs-btn-border-color: #17a2b8; --bs-btn-color: #fff;
  --bs-btn-hover-bg: #138496; --bs-btn-hover-border-color: #117a8b; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #117a8b; --bs-btn-active-border-color: #10707f; --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: #17a2b8; --bs-btn-disabled-border-color: #17a2b8; --bs-btn-disabled-color: #fff;
}
.form-control,
.form-select,
.input-group-text {
  font-size: 0.875rem;
}

/* Formular-Feld-Labels waren im v5-Bestand fett; AdminLTE4/BS5 setzt sie normal.
   Generell wieder fetten - nur Feld-Labels (col-form-label/form-label), NICHT
   Checkbox-/Radio-Labels (.form-check-label). */
.col-form-label,
.form-label {
  font-weight: 600;
}

/* Aktiv-Switch (Sprachen/Waehrungen/TV-Klone/Navigation) soll GRUEN sein wenn an
   (wie v5-Bestand), nicht BS5-Default-Blau. .form-switch-on-success hatte nach der
   Migration keine CSS-Regel mehr (Test-Rueckmeldung K5). */
.form-switch-on-success .form-check-input:checked {
  background-color: var(--bs-success, #198754);
  border-color: var(--bs-success, #198754);
}
.form-switch-on-success .form-check-input:focus {
  border-color: var(--bs-success, #198754);
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

/* BS5 hat .btn-group-toggle / data-toggle="buttons" entfernt -> die rohe Checkbox
   im Toggle-Button ausblenden (wie BS4); das Label.btn bleibt der sichtbare
   Schalter, der .active-Zustand wird per JS (p-labor.js) mit :checked gehalten. */
.btn-group-toggle > .btn > input[type="checkbox"],
.btn-group-toggle > .btn > input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
}

/* elevation-* utilities were removed in AdminLTE 4 but are still used widely */
.elevation-1 { box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.24) !important; }
.elevation-2 { box-shadow: 0 3px 6px rgba(0,0,0,.16), 0 3px 6px rgba(0,0,0,.23) !important; }
.elevation-3 { box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23) !important; }
.elevation-4 { box-shadow: 0 14px 28px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.22) !important; }
.elevation-5 { box-shadow: 0 19px 38px rgba(0,0,0,.30), 0 15px 12px rgba(0,0,0,.22) !important; }

/* Top navbar (was .main-header.navbar-dark) keeps the imperator slate color */
/* Header fixiert (Bestand-Verhalten): AdminLTE4s layout-fixed haengt am
   .app-main-wrapper-Markup, das hier (Grid-Layout) fehlt -> Header scrollte weg.
   Im Grid stattdessen .app-wrapper auf feste Hoehe und nur .app-main intern
   scrollen lassen -> Header/Sidebar/Footer bleiben stehen.

   Das Dokument selbst darf NIE scrollen: frueher stand hier height:100vh, und
   100vh ist die Viewport-Hoehe OHNE Ruecksicht auf eine Scrollleiste. Sobald
   irgendwo eine (auch nur 1px) Scrollleiste auftauchte, war .app-wrapper hoeher
   als der verbleibende Platz -> das Dokument bekam eine zweite, kurze
   Scrollleiste. Mit overflow:hidden und height:100% statt 100vh kann das nicht
   mehr passieren, unabhaengig von der Scrollleisten-Breite des Systems
   (Windows: echte 15-17px, headless/Overlay: 0px).
   Nur fuer .layout-fixed - login.php nutzt dasselbe CSS ohne App-Grundgeruest
   und muss bei kleinem Fenster scrollen koennen. */
html { height: 100%; }
body.layout-fixed { height: 100%; overflow: hidden; }
.layout-fixed .app-wrapper { height: 100%; }
.layout-fixed .app-main { overflow-y: auto; }

/* Header-Hoehe auf Bestand-48px statt AdminLTE4-56px (nav-link 40 + 2x4px Padding),
   damit Logo + Navbar-Inhalte wie im Bestand auf einer Linie fluchten.
   Test-Rueckmeldung: Logo/Header-Flucht. Gilt global. */
.app-header.navbar { background-color: rgb(62, 77, 84); border-bottom: none;
  min-height: 48px; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.app-header .navbar-nav .nav-link { color: rgba(255,255,255,.85); }
.app-header .navbar-nav .nav-link:hover,
.app-header .navbar-nav .nav-link:focus { color: #fff; }
/* Footer schlanker als AdminLTEs 3rem+1rem (=54px, hoeher als der 48px-Header).
   .app-main ist der einzige scrollende Bereich, jeder Pixel hier kostet dort
   Platz. Dazu unten kein Leerraum mehr: .app-main-Padding raus und die letzte
   Karte ohne margin-bottom - sonst muss man 36px leere Flaeche wegscrollen. */
.app-footer { min-height: 0; padding: 0.375rem 1rem; font-size: 0.8rem; }
.app-main { padding-bottom: 0; }
.app-content > .card:not(:has(~ .card)):not(:has(~ .row)) { margin-bottom: 0; }

/* User-Avatar rechts: das 32px-Bild vertikal in den 48px-Header zentrieren und
   den Randabstand ueber Padding setzen. Frueher standen dafuer negative Margins
   (-8px/-6px) inline am <li>; die schoben das Element ueber den rechten
   Viewport-Rand hinaus -> horizontale Scrollbar -> die kostete 15px Hoehe, womit
   .app-wrapper (height:100vh) nicht mehr passte -> zusaetzlich vertikale
   Scrollbar. Padding statt negativem Margin: gleiche Optik, kein Ueberstand. */
.app-header .navbar-nav .user-menu-link {
  display: flex; align-items: center;
  padding-top: 0; padding-bottom: 0; padding-right: 0.5rem;
}

/* Sidebar: helle Sidebar mit dunklem Marken-Header. AdminLTE-4-Theming ueber
   die --lte-sidebar-* Variablen (gilt einheitlich fuer Top- und Sub-Level),
   Schiefer-Akzent (rgb(62,77,84)) fuer Active/Hover wie im v5-Skin. */
.app-sidebar {
  background-color: #ffffff;
  --lte-sidebar-menu-active-bg: rgba(62, 77, 84, 0.92);
  --lte-sidebar-menu-active-color: #fff;
  --lte-sidebar-submenu-active-bg: rgba(0, 0, 0, 0.08);
  --lte-sidebar-submenu-active-color: #212529;
  --lte-sidebar-hover-bg: rgba(62, 77, 84, 0.10);
  --lte-sidebar-submenu-hover-bg: rgba(0, 0, 0, 0.05);
}
.app-sidebar .sidebar-brand { background-color: rgb(62, 77, 84);
  /* an die 48px-Navbar angeglichen, Logo vertikal mittig (= Bestand) */
  display: flex; align-items: center; height: 48px; padding-top: 0; padding-bottom: 0; }
.app-sidebar .sidebar-brand .brand-link { background-color: rgb(62, 77, 84); }

/* Aktiver Zweig (.active = enthaelt die aktuelle Seite): dunkles Schiefer wie v5. */
.app-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background-color: rgba(62, 77, 84, 0.92);
  color: #fff;
}
/* Nur aufgeklapptes Parent OHNE aktive Seite darin: helle Hover-Optik, NICHT das
   Aktiv-Dunkel. Test-Rueckmeldung: Sender (aktiv) und Content (nur offen) sahen
   identisch aus; im Bestand ist das offene Parent nur leicht hinterlegt. */
.app-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:not(.active) {
  background-color: rgba(62, 77, 84, 0.10);
  color: inherit;
}
/* Expandable-Caret rechtsbuendig (AdminLTE3 .right-Icon; v4 nutzt .nav-arrow)
   + Rotation nach unten wenn das Menue offen ist. */
.app-sidebar .nav-sidebar .nav-link { position: relative; }
.app-sidebar .nav-sidebar .nav-link > p > .right {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}
.app-sidebar .nav-sidebar .menu-open > .nav-link > p > .right {
  transform: translateY(-50%) rotate(-90deg);
}
/* Submenu-Items eingerueckt (wie Bestand) */
.app-sidebar .nav-treeview { padding-left: 1rem; }

/* Main content area background (was .content-wrapper) */
.app-main { background-color: #e9ecef; }

/* btn-close (was .close with &times;) must stay visible on colored modal headers */
.modal-header[class*="bg-"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* BS5 zeigt den Dropdown-Caret nur bei .form-select. Viele <select> nutzen aber
   noch .form-control (in BS4 hatten die den Browser-Pfeil) -> Caret nachruesten. */
select.form-control {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 12px;
  padding-right: 2.25rem;
}
select.form-control-sm {
  background-position: right 0.5rem center;
  background-size: 14px 10px;
  padding-right: 2rem;
}
select.form-control[multiple],
select.form-control[size]:not([size="1"]) {
  background-image: none;
  padding-right: 0.75rem;
}

/* .btn-xs gibt es in BS5 nicht mehr (nur btn-sm/btn-lg). AdminLTE3-Groesse
   nachbilden, sonst rendern kompakte Row-Action-Buttons (z.B. TV-Liste:
   Pull/Reboot/Info) in Default-Groesse und brechen in der Spalte um. */
.btn-xs {
  padding: 0.125rem 0.4rem;
  font-size: 0.75rem;
  line-height: 1.4;
  border-radius: 0.2rem;
}

/* .input-group-prepend/.input-group-append gibt es in BS5 nicht mehr (Addons
   sind direkte input-group-Kinder). Als flex-Wrapper nachbilden, damit Addons
   (Such-Icons, Einheiten, Buttons) buendig am Feld sitzen statt umzubrechen. */
.input-group-prepend,
.input-group-append {
  display: flex;
  align-items: stretch;
}
.input-group-prepend { margin-right: -1px; }
.input-group-append { margin-left: -1px; }

/* 
##################################################
Logo, top & left navigation begin 
##################################################
*/
/* Main header top */
.navbar-dark {
  background-color:rgb(62, 77, 84);
}
/* Main header logo top left */
.layout-navbar-fixed .wrapper .sidebar-light-secondary .brand-link:not([class*="navbar"]) {
  background-color: rgb(62, 77, 84);
}
/* Main header logo layout fixes */
.logo-xl {
  position: relative;
}
.logo-main {
  /* AdminLTE4: .sidebar-brand/.brand-link zentrieren per flex -> keine feste
     Hoehe/kein top-padding mehr (das drueckte das Logo aus der Mitte). */
  padding-left: 4px;
}
.logo-plabor {
  width: 26px;
  height: 26px;
  margin: 0 6px 0 6px;
}
.logo-imperator {
  height: 32px;
}

/* Main menu left */
/* .sidebar {
  background-color: rgba(173, 169, 128 , 0.2);
} */
/* Main menu left: Open main folder + main folder hover */
/* [class*="sidebar-light-"] .nav-sidebar > .nav-item.menu-open > .nav-link,
[class*="sidebar-light-"] .nav-sidebar > .nav-item:hover > .nav-link {
  background-color: rgba(173, 169, 128 , 0.5);
  color: #212529;
} */
/* Main menu left: Active main folder */
.sidebar-light-secondary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: rgba(62, 77, 84, 0.9);
  color: #fff;
}
/* Main menu left: Active sub folder */
/* [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active, 
[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active:hover {
  background-color: rgba(173, 169, 128 , 1);
  color: #212529;
} */
/* Main menu left: Sub menu item hover + select */
/* [class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:hover, 
[class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link:focus {
  background-color: rgba(173, 169, 128 , 0.5);
} */
/* Main menu left: Text color of main menu item when in focus */
/* [class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link:active, [class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link:focus {
  color: rgb(62, 77, 84);
} */

/* Navigation sublevel specifics */
.nav-item-sublevel {
  display: block;
  min-height: 28px;
}
.nav-item-sublevel-last {
  display: block;
  min-height: 28px;
  margin-bottom: 4px;
}
.nav-item-sublevel-layer,
.nav-item-sublevel-layer2 {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 1ch;
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 165%;
  font-weight: normal;
  line-height: 1;
  white-space: pre;
  color: rgba(62, 77, 84, 0.6);
  vertical-align: middle;
  position: relative;
  top: -2px;
}
.nav-item-sublevel-layer:empty {
  display: none;
}
.nav-item-sublevel3-icon {
  color: rgba(62, 77, 84, 0.7);
  font-size: 120%;
  vertical-align: middle;
}
.nav-item-sublevel4-icon {
  color: rgba(62, 77, 84, 0.7);
  font-size: 100%;
  vertical-align: middle;
}
.navicon-faded {
  color: rgba(62, 77, 84, 0.4);
}
.nav-item-sublevel3-text {
  max-width: 200px;
  display: inline-block;
  vertical-align: middle;
}
.nav-item-sublevel4-text {
  max-width: 200px;
  display: inline-block;
  vertical-align: middle;
}
.navtext-faded {
  color: rgba(62, 77, 84, 0.4);
}
.nav-link-sublevel {
  height: 26px;
  overflow: hidden;
  padding: 1px 0 0 4px !important;
  margin-bottom: 0 !important;
}
.nav-link-sublevel-3 {
  height: 26px;
  overflow: hidden;
  padding: 1px 0 0 6px !important;
  margin-bottom: 0 !important;
}
.nav-treeview {
  padding-left: 0 !important;
}
.nav-sidebar .nav-link p {
  width: auto !important;
  max-width: none !important;
}
.nav-link-sublevel-3,
.nav-link-sublevel {
  white-space: nowrap !important;
}
.nav-link-sublevel-3 > p,
.nav-link-sublevel > p {
  display: inline-block !important;
}

/* 
##################################################
General page content layout begin 
##################################################
*/
/* Main page */
.content-wrapper {
  background-color: #e9ecef;
}
/* Main page footer */
/* .main-footer {
  background-color: rgba(173, 169, 128 , 0.1)
} */
/* Main content frame top border */
.card-secondary.card-outline {
  border-top: 3px solid rgb(62, 77, 84);
}
.card-header-secondary {
  background-color: rgba(62, 77, 84, 0.9) !important;
}
/* Main content divider bars */
.card-header {
  border-bottom: 1px solid rgba(62, 77, 84, .25);
  padding-bottom: 5px;
}
/* Seitentitel statisch: BS5 Responsive-Font-Sizes skaliert h2 unter 1200px mit
   der Viewport-Breite -> Titelzeile aenderte ihre Hoehe. Im Bestand war der Titel
   konstant. Auf festen 2rem-Wert (= Desktop/Bestand) setzen. */
.card-header h2 {
  font-size: 2rem;
}
.card-divider {
  border-bottom: 1px solid rgba(62, 77, 84, .25);
}
/* Main content sticky */
.card-sticky {
  position: sticky;
  top: 48px;
  opacity: 1;
  background-color: #fff;
  z-index: 1;
}
/* Offset for sticky-top to remove the headline for scrolling */
.sticky-offset {
  top: -25px;
}
/* Dashboard load animation */
/* Lade-Overlay (Dashboard): AdminLTE4 hat die .preloader-Overlay-Styles entfernt
   -> ohne sie stand die GIF dauerhaft unten im Fluss. Als Vollbild-Overlay
   herstellen + nach dem Laden ausblenden (JS in dashboard.js). */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(62, 77, 84, .99);
  transition: opacity 0.4s ease;
}
.preloader.preloader-hidden {
  opacity: 0;
  visibility: hidden;
}
/* Dashboard settings */
.card-dashboard {
  padding: 0 4px 0 4px !important;
  margin-top: 0px !important;
  color: rgb(62, 77, 84) !important;
  background-color: #fff !important;
}
.card-dashboard:hover {
  color: black !important;
}
.dashboard-dropdown {
  margin: 2px 10px 0 0;
}

/* (Entfernt: .tariffBox-Regeln fuer bootstrap-select-Klassen .dropdown-toggle/
   .dropdown-menu/.dropdown-item/.btn-light/.filter-option-inner-inner - bootstrap-
   select ist durch Tom Select ersetzt; diese Klassen existieren nicht mehr.) */

/* Powerstate Button */
.btn-powerstate {
  width:  20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
}
.btn-powerstate:hover {
  cursor: pointer;
}
.btn-powerstate-on {
  background-color: #5fd13d;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #0d8d2b 0 -1px 8px, #5fd13d 0 2px 8px; 
}
.btn-powerstate-standby {
  background-color: #ff5246;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #9e1a27 0 -1px 8px, #ff5246 0 2px 8px;
}
.btn-powerstate-offline {
  background-color: #adadad;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #747474 0 -1px 8px, #adadad 0 2px 9px;
}
/* Definition-List im TV-Info-Modal: dichtere Zeilen, dt rechtsbuendig
   damit Werte links unter sich stehen. */
.tvs-info-list dt { font-weight: 500; color: #6c757d; }
.tvs-info-list dd { margin-bottom: 0.25rem; word-break: break-word; }
.btn-powerstate-update {
  background-color: #19cae6;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #0f6370 0 -1px 8px, #19cae6 0 2px 8px;
}
.btn-powerstate-something {
  background-color: #ffce3b;
  box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 6px 1px, inset #a37b04 0 -1px 8px, #ffce3b 0 2px 9px;
}

/* Button list: Set to left and right*/
/* Toolbar als Flex-Container statt Floats: bei zu vielen Buttons (z.B. TV-Liste
   mit neuem Zuweisen-Control) bricht die Export-Gruppe sauber MIT Zeilenabstand
   um, statt sich per float ueber die Aktionsreihe zu schieben (Test-Rueckmeldung:
   Buttons responsive uebereinander). Bei breitem Fenster bleibt es eine Reihe. */
.button-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  row-gap: 8px;
  column-gap: 8px;
}
.button-add-edit-delete {
  display: flex;
  flex-wrap: wrap;
  row-gap: 5px;
}
.button-export {
  margin-left: auto;
}
/* Compact-Modus (per JS gesetzt, wenn die Toolbar sonst umbrechen wuerde) - stufig,
   damit nur so viel eingeklappt wird wie noetig fuer EINE Reihe:
   Stufe 1: Export-Gruppe (Aenderungen/Export/Druck) auf Icons. */
.button-list.btn-list-compact .button-export .button-text {
  display: none !important;
}
/* Stufe 2: zusaetzlich die Aktionsbuttons (hinzufuegen/bearbeiten/...) auf Icons. */
.button-list.btn-list-compact-2 .button-add-edit-delete .d-xl-inline {
  display: none !important;
}
/* Buttons: Set color and fix dropdown cursor */
.btn-secondary, .btn-export{
  color: #fff;
  background-color: rgba(62, 77, 84, .9);
}
/* disabled-Zustand: BS5 .btn.disabled (hoehere Spezifitaet) wuerde .btn-export sonst
   auf transparent/grau zuruecksetzen -> "weiss mit grauer Schrift" (Test-Rueckmeldung
   K4). BS5-Disabled-Variablen auf Slate setzen -> bleibt grau mit weisser Schrift. */
.btn-export {
  --bs-btn-disabled-bg: rgba(62, 77, 84, .9);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-border-color: rgba(62, 77, 84, .9);
}
.btn-secondary.disabled:hover, .btn-export.disabled:hover {
  color: #fff;
}

.btn-secondary:hover:not(.disabled), .btn-export:hover:not(.disabled),
.btn-secondary:focus, .btn-secondary.focus, 
.btn-export:focus, .btn-export.focus {
  color: #fff;
  background-color: rgba(62, 77, 84, 1);
}

.dropdown-item.disabled {
  pointer-events: all;
}
.dropdown-item.disabled:hover {
  cursor: not-allowed;
}
#select-assign-wrap.disabled .btn-export {
  opacity: .65;
  cursor: not-allowed;
}
/* Das Select erbt von .btn-export weisse Schrift -> aufgeklappte <option>s waren
   weiss auf weiss (unsichtbar bis Hover). Optionen dunkel auf weiss setzen.
   Test-Rueckmeldung: Zuweisen-Dropdown-Schrift nicht erkennbar. */
#select-assign option {
  color: #212529;
  background-color: #fff;
}
/* Zuweisen-Dropdown mit-minimieren, wenn die Aktionsbuttons auf Icons schrumpfen
   (Compact-Stufe 2 ODER Viewport < xl, wo die Button-Texte per Media-Query weg
   sind): Select auf Icon-Breite, Label verbergen. Das ✈️/Chip-Icon davor kenn-
   zeichnet die Funktion, der Titel-Tooltip bleibt. Optionen (oben) bleiben lesbar. */
.button-list.btn-list-compact-2 #select-assign {
  width: 2.6em;
  color: transparent;
}
@media (max-width: 1199.98px) {
  #select-assign { width: 2.6em; color: transparent; }
}
.dropdown-item:active {
  background-color: rgba(62, 77, 84, .75) !important;
}
.dropdown-success:active {
  background-color: rgba(40, 167, 69, 0.9) !important;
}
.dropdown-info:active {
  background-color: rgba(23, 162, 184, 0.9) !important;
}

/* Popup form: Header */
.modal-header {
  padding-top: 6px;
  padding-bottom: 8px;
}
.bg-export {
  color: #fff;
  background-color: rgba(62, 77, 84, .9);
}
/* Popup form: Footer */
.modal-footer {
  padding-top: 6px;
  padding-bottom: 8px;
}
/* Popup form: Delete confirmation */
.modal-delete {
  padding-bottom: 0px;
}
/* Popup form: Info tag on edit */
.modal-info-tag {
  display: flex;
  justify-content: left;
}
/* Popup form: Info tag small icon fix */
.modal-info-icon-fix {
  margin-top: 0.5px;
}
/* Popup form: fixed height with scrollbar when content too long */
.modal-scrollbar {
  height: 80vh; 
  overflow-y: auto;
}

/* Input form labels */
.col-form-label {
  padding-bottom: 2px;
}
/* Input form layout placement */
.content-move-down-icon {
  margin-top: 10px;
}
.content-short-bottom {
  margin-bottom: -12px;
}
.eye-to-left {
  margin-left: -5px;
}
/* Input form smaller select box */
.usergroups-select-sm {
  padding-top:0;
  padding-bottom:0;
  padding-left: 0.2rem;
  height: 1.7rem;
}
/* Usergroups form small button */
.usergroups-btn-sm {
  height: 19px;
  width: 18px;
  border-radius: 20%;
  padding: 0;
}
.usergroups-btn-add {
  margin-top: 2px;
}
/* Usergroups form small button icon*/
.usergroups-btn-icon {
  position: relative;
  top: -2px;
}

/* login page */
.login-version {
  margin:-8px -2px -10px 0;
}
.login-stay-fix {
  padding: 6px 0 0 5px;
}
.login-box-up {
  margin-top: -10%;
}
/* Login-Card auf Bestand-Breite (360px); AdminLTE4 macht sie breiter (~400) ->
   wirkte "flacher und breiter" (Test-Rueckmeldung K1). */
.login-box {
  width: 360px;
}
.login-bg {
  background-color: rgb(62, 77, 84);
}

/* Licence error notification */
.licence-error-info {
  display: flex;
  justify-content: center;
  font-size: 1rem;
}

/* general tag to prevent line break */
.nobr { 
  white-space: nowrap; 
}

/* roomservice item/layout image*/
.item-image {
  position: relative;
  flex-shrink: 0;
  margin-top: 3px;
  height: auto;
  width: auto;
  max-height: 99px !important;
  max-width: 176px !important;
  padding: 0;
}
.item-image-empty-icon, .button-image-empty-icon, .background-image-empty-icon {
  position: relative;
  top: 50px;
  left: -102px;
  color: #ced4da;
}
.btn-item-image {
  margin-top: 33px;
}
.roomservice-text-notice {
  margin-top: 8px;
  color: rgba(62, 77, 84, 0.6);
}

/* channel logo layout */
.channel-logo-frame {
  display: flex;
  justify-content: center;
}
.channel-logo-tv {
  position: relative;
  left: -30%;
  margin-top: 5px;
}
.channel-logo {
  position: relative;
  left: 41%;
  margin-top: 21px;
  width: 144px;
  height: 81px;
}

/* zoom for channel logos */
.zoom {
  background-color: rgb(116, 113, 141, 0);
  transition: transform .2s; /* Animation */
  width: 48px;
  height: 27px;
  margin: -4px 0 -4px 0;
}
.zoom:hover {
  transform: scale(5.5); /* (150% zoom)*/
}
.zoom img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}
.zoom-2 {
  background-color: rgb(116, 113, 141);
  transition: transform .2s; /* Animation */
  width: 65px;
  height: 42px;
  margin: 0 auto;
}
.zoom-2:hover {
  transform: scale(2.5); /* (250% zoom)*/
}
.zoom-2 img {
  width: 100%;
  height: 100%;
}

/* Context menu add filter */
#contextmenu {
  position: fixed;
  z-index: 100;
  min-width: 150px;
  width: auto;
  background: white;
  border: 1px solid lightgrey;
  border-radius: 3px;
  display: none;
}
#contextmenu .contextmenu-item {
  padding: 8px 10px;
  color: black;
  cursor: pointer;
  border-radius: inherit;
}
#contextmenu .contextmenu-item:hover {
  background: whitesmoke;
}
#contextmenu.visible {
  display: block;
  color: rgb(170, 0, 170)
}
/* 
##################################################
Datatables begin 
##################################################
*/
/* Table: Row even selected */
table.dataTable tbody tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.7);
}
/* Table: Row even selected hover */
table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.8);
}
/* Table: Row even selected ordered by */
table.dataTable.display > tbody > tr.even.selected > .sorting_1, table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.85);}
table.dataTable.display > tbody > tr.even.selected > .sorting_2, table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.85);}
table.dataTable.display > tbody > tr.even.selected > .sorting_3, table.dataTable.order-column.stripe > tbody > tr.even.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.85);}
/* Table: Row even selected ordered by hover */
table.dataTable.display.hover > tbody > tr.even.selected:hover .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.9);
}
/* Table: Row odd selected */
table.dataTable.stripe > tbody > tr.odd.selected > *, table.dataTable.display > tbody > tr.odd.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.8);
}
/* Table: Row odd selected hover */
table.dataTable.hover > tbody > tr.odd.selected:hover > *, table.dataTable.display > tbody > tr.odd.selected:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.9);
}
/* Table: Row odd selected ordered by */
table.dataTable.display > tbody > tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.95);}
table.dataTable.display > tbody > tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.95);}
table.dataTable.display > tbody > tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe > tbody > tr.odd.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 0.95);}
/* Table: Row odd selected ordered by hover */
table.dataTable.display.hover > tbody > tr.odd.selected:hover .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(25, 140, 175, 1);
}
/* Table: Checkbox small layout fix */
table.dataTable tbody td.select-checkbox:before,
table.dataTable tbody th.select-checkbox:before {
  position: relative;
  margin-top: -23px;
  margin-left: -6px;
}
/* Table: Checkbox checked small layout fix */
table.dataTable tr.selected td.select-checkbox:after,
table.dataTable tr.selected th.select-checkbox:after {
  position: relative;
  content: "✓";
  font-size: 16px;
  margin-top: -23px;
  margin-left: -5px;
}
/* Table: Checkbox-Auswahlspalte in allen DataTables einheitlich schmal (matcht Bestand) */
/* :has() greift nur, wenn Spalte 0 wirklich die Checkbox ist - andere Tabellen bleiben unberuehrt */
table.dataTable:has(> thead th:first-child.select-checkbox) > colgroup > col:first-child {
  width: 30px !important;
}
table.dataTable th.select-checkbox,
table.dataTable td.select-checkbox {
  width: 30px;
  box-sizing: border-box;
  padding-left: 6px !important;
  padding-right: 6px !important;
  text-align: center;
}
/* Table: Checkbox in header */
.th-checkbox-centered {
  display: flex;
  justify-content: center;
  font-size: 1rem;
}
/* Table: show move cursor for reorder column*/
.reorder-column:hover {
  cursor: all-scroll;
}
/* individual padding for Dashboard ActionMonitor */
.action-monitor-padding {
  padding-top: 2px !important;
  padding-bottom: 1px !important;
}

/* highlight new events in Live Events table in Dashboard */
.live-event-highlight {
  animation-name: live-event-highlight;
  animation-duration: 1.1s;
  animation-timing-function: ease;
}
@keyframes live-event-highlight {
  0%   { background-color: rgba(255, 193, 7, 0.4); }
  100% { background-color: none; }
}

/* 
##################################################
CMS-Editor begin 
##################################################
*/
.editor {
  background: repeating-linear-gradient(
    0deg,
    #ffffff,
    #ffffff 1em,
    #e9e9e9 1em,
    #e9e9e9 2em
  );
  /* sichtbarer Abstand zwischen den Editor-Bloecken wie im Bestand (BS5-Card
     hat keine Default-margin mehr). Test-Rueckmeldung: Bloecke klebten aneinander. */
  margin-bottom: 1rem;
}
.editor.drag, .editor.delete {
	margin-left: -10px;
}
.editor-menubar {
	background-color: rgb(62, 77, 84);
	color: #ffffff;
	padding-bottom: 3px;
	font-size: 16px;
  line-height: 28px;
}
.editor-menubar .btn {
	color: #ffffff;
}
.editor-menubar .btn:hover, .editor-menubar .btn.active {
	background-color: #ff6e48;
}
.editor-menubar > DIV > I {
	padding-top: 8px;
}
/* Abstands-/Typ-Selects in der Block-Menuleiste: native Dropdown-Optik wie im
   v5-Bestand. Die globale select.form-control-Caret-Regel (appearance:none) hatte
   sie ~18px schmaler gemacht. Test-Rueckmeldung: Selects im Bestand breiter. */
.editor-menubar select.width-box {
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	background-image: none;
	padding-right: 0.5rem;
}
.editor-menubar .dragzone {
	cursor: grab;
}

.editor-canvas {
	width: 100%;
	padding: 1em;
	font-size: 1.2em;
	color: #000000;
	font-family: arial;
  margin: auto;
  background: #ffffff;
}
.editor-canvas:focus {
	outline: none
}
.editor-canvas.align-left {
  text-align: left;
}
.editor-canvas.align-center {
  text-align: center;
}
.editor-canvas.align-right {
  text-align: right;
}
.editor-canvas.align-justify {
  text-align: justify;
}
.editor IMG.align-left {
  display: block;
  margin-left: 0px;
  margin-right: auto;
}
.editor IMG.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.editor IMG.align-right {
  display: block;
  margin-left: auto;
  margin-right: 0px;
}
.editor .qrcode.align-left {
  display: block;
  margin-left: 0px;
  margin-right: auto;
}
.editor .qrcode.align-center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.editor .qrcode.align-right {
  display: block;
  margin-left: auto;
  margin-right: 0px;
}
.editor IMG,.editor .qrcode {
  height: 10em;
  /* Breite begrenzen wie im Bestand (10em). Ohne width nahm das Bild bei breitem
     Seitenverhaeltnis die volle Spaltenbreite ein (gestreckt) und margin-auto-
     Alignment hatte keine freie Breite -> Links/Rechts ohne Wirkung. */
  width: 10em;
  object-fit: contain;
}

.file-drop-area {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 100%;
  padding: 25px;
  border: 1px dashed rgb(62, 77, 84);
  border-radius: 3px;
  transition: 0.2s;
}

.file-drop-area.is-active {
  background-color: rgba(40, 167, 69, 0.1);
  border-color: #28a745;
}

.choose-file-button {
  flex-shrink: 0;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  padding: 8px 15px;
  margin-right: 10px;
  font-size: 12px;
  text-transform: uppercase;
}

.file-message {
  font-size: small;
  font-weight: 300;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-input {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  cursor: pointer;
  opacity: 0;
  
}

.mt-10{
  margin-top:10px;
}

.mt-100{
  margin-top:100px;
}

.ml-5{
  margin-left:5px;
}

.modal-lg-30 {
  max-width: 30% !important;
}
.modal-lg-36 {
  max-width: 36% !important;
}
.modal-lg-40 {
  max-width: 40% !important;
}
.modal-lg-50 {
  max-width: 50% !important;
}
.modal-lg-60 {
  max-width: 60% !important;
}
.modal-lg-70 {
  max-width: 70% !important;
}

.modal-card{
    height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.image-manager {
  align-content: flex-start;
  flex-wrap: wrap;
  padding-top: 1em;
  margin-left: -0.8em;
  margin-right: -0.8em;
}

.image-manager .image {
  border: 0.4em solid rgb(255, 255, 255);
  border-radius: 0.4em;
}

.image-manager img {
  object-fit: contain;
  background-color: lightgrey;
  width: 10vw;
  height: 10vw;
}

.image-manager .image.active {
  border-color: rgb(33, 37, 41);
}

.image-manager .folder {
  text-align: center;
  position: relative;
  width: 10vw;
  height: 10vw;
  margin: 0.4em;
}

.image-manager .folder span {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1vw;
  width: 8vw;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}

.image-manager .folder span i {
  font-size: 4vw;
}

.image-manager i {
  padding-top: 0.5vw;
  font-size: 9vw;
}

.image-manager button {
  position:absolute;
  right: 0px;
  margin: 0.2vw;
}

.image-manager button i {
  font-size: 1em;
  padding: 0px;
  margin: 0px;
}

.image-manager .ribbon {
  font-size: 1em;
}

.navitem-image {
  position: relative;
  left: 20%;
  width: 144px;
  height: 81px;
}

.background-preview {
  position: relative;
  margin-top: 1em;
  width: 192px;
  height: 108px;
}

.custom-css-input {
  width: 100%;
  height: 360px;
  padding: 8px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  outline: none;
  resize: none;
  overflow: auto;
}

.app-wrapper .preview {
  min-height: calc(100vh - calc(2.975rem + 1px) - calc(2.975rem + 1px));
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.preview .preview-container {
  position: absolute;
  transform-origin: top left;
}
.preview .preview-container iframe {
  top: 0px;
  left: 0px;
  width: 1920px;
  height: 1080px;
  border: none;
  display: block;
}
.preview .control {
  position: absolute;
  width: 160px;
  margin: 10px 0px 10px 10px;
  max-height: calc(100vh - calc(2.975rem + 1px) - calc(2.975rem + 1px) - 20px);
  overflow: hidden;
}
.preview .control .settings, .control .remote {
  padding: 1em;
}
.preview .control .remote .row {
  padding-top: 1em;
}
.preview .control .remote button {
  width: 40px;
  color: #fff;
  background-color: rgba(62, 77, 84, .9);
}
.preview .control .remote button:hover {
  color: #fff;
  background-color: rgba(62, 77, 84, 1);
}

/*
##################################################
CMS Schedule
##################################################
*/
.schedule-fallback-row td { background-color: rgba(255, 193, 7, 0.08) !important; }
.draggable-page { cursor: grab; user-select: none; transition: background-color 0.15s; color: #343a40; }
.draggable-page:hover { background-color: #e2e6ea !important; border-color: #6c757d !important; }
.draggable-page:active { cursor: grabbing; }
.fc-event-cal-selected { box-shadow: 0 0 0 2px #000 !important; }
#calendarContainer .fc-prev-button,
#calendarContainer .fc-next-button,
#calendarContainer .fc-today-button,
#calendarContainer .fc-jumpToDate-button { background-color: #6c757d !important; border-color: #6c757d !important; }
#calendarContainer .fc-prev-button:hover,
#calendarContainer .fc-next-button:hover,
#calendarContainer .fc-today-button:hover,
#calendarContainer .fc-jumpToDate-button:hover { background-color: #5a6268 !important; border-color: #545b62 !important; }
#calendarContainer .fc-timegrid-slot-minor { border-top-color: rgba(0, 0, 0, 0.12); }
/* FC prev/next nutzen mit themeSystem 'bootstrap5' bootstrap-icons (bi-chevron-*),
   deren Font NICHT geladen ist -> leere graue Buttons. Mit der geladenen
   FontAwesome-Glyphe ersetzen. */
#calendarContainer .bi-chevron-left::before,
#calendarContainer .bi-chevron-right::before {
  font-family: "Font Awesome 7 Free"; font-weight: 900;
}
#calendarContainer .bi-chevron-left::before { content: "\f053"; }
#calendarContainer .bi-chevron-right::before { content: "\f054"; }
/* Clamped zone top handle: hide FC time text, show data-rt-time via ::before */
/* FC only writes textContent (never attributes) → data-rt-time stays stable */
.fc-resize-time-clamped .fc-event-time { visibility: hidden; }
.fc-resize-time-clamped .fc-event-time::before { content: attr(data-rt-time); visibility: visible; }

/* tvs.js: Klon-/Firmware-Status-Box. Eigener weisser Hintergrund + Padding,
   damit die farbigen Texte (text-success/text-info/text-muted) auch auf
   selektierten DataTable-Zeilen lesbar bleiben - sonst saufen die Farben
   im Selection-Highlight ab. */
table.dataTable td.tvs-clone-status { background-color: transparent !important; padding: 4px; }
table.dataTable td.tvs-clone-status .tvs-clone-status-box {
    background-color: #ffffff;
    color: #212529;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    line-height: 1.35;
    display: block;
}
/* Auch innerhalb der Box bleiben Farben stabil (Selection-Override neutralisieren) */
table.dataTable tr.selected td.tvs-clone-status .tvs-clone-status-box,
table.dataTable tr.selected.odd td.tvs-clone-status .tvs-clone-status-box,
table.dataTable tr.selected.even td.tvs-clone-status .tvs-clone-status-box {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/* Klon-/Firmware-Item-Zeile: Icon + Name nebeneinander, Icon schrumpft nicht,
   nur der Name darf umbrochen werden wenn die Spalte schmal ist. */
.tvs-clone-status-box .tvs-item-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}
.tvs-clone-status-box .tvs-item-row > i {
    flex: 0 0 auto;
}
.tvs-clone-status-box .tvs-item-row > .tvs-item-text {
    flex: 1 1 auto;
    min-width: 0;
    /* Lange Namen (Klon-Name oder Firmware-Version) werden mit ... abge-
       schnitten statt auf eine zweite Zeile zu springen. Der vollstaendige
       Wert wird per title-Attribut (siehe cloneBlock/fwBlock im Renderer)
       beim Hover als Tooltip eingeblendet. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Klon- und Firmware-Block sind jeweils ein Block. Nahtlos untereinander
   stapeln, mit minimalem Abstand statt fettem <br>-Linebreak. */
.tvs-clone-status-box .tvs-clone-info,
.tvs-clone-status-box .tvs-fw-info {
    display: block;
}
.tvs-clone-status-box .tvs-fw-info { margin-top: 2px; }