/* =========================================================================
   skin-base.css — AcoBeSmart UI-Skins: gemeinsame Basis
   - Wird bei JEDEM Skin geladen (auch classic).
   - Teil A: Responsive-/Mobil-Pass (gilt für ALLE Skins, inkl. classic).
   - Teil B: „Reskin-Engine" – variablen-gesteuerte Overrides der Metronic-
     Kernflächen. Gilt NUR für die neuen Skins (body[data-skin]:not([data-skin="classic"]));
     die konkrete Palette liefert je Skin skin-modern/brand/leitstand.css.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   TEIL A — Responsive / Mobil (alle Skins, inkl. classic)
   Metronic klappt < 1024px bereits auf Mobil-Header + Off-Canvas-Aside um.
   Hier: breite Tabellen scrollbar machen, Portlet-Köpfe/Toolbars umbrechen,
   Touch-Ziele vergrößern, Content atmen lassen.
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* Breite Datatables/Tabellen horizontal scrollen statt Layout sprengen */
  .kt-datatable__table,
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .kt-portlet__head { min-height: 50px; height: auto; flex-wrap: wrap; padding: 10px 15px; }
  .kt-portlet__head-toolbar { flex-wrap: wrap; gap: 6px; }
  .kt-subheader__main,
  .kt-subheader__toolbar { flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .kt-portlet__body { padding: 14px !important; }
  .kt-portlet__head-label { min-width: 0; }
  .kt-portlet__head-title { font-size: 1.05rem; white-space: normal; }
  /* Touch-Ziele ≥ 40px */
  .btn { min-height: 40px; }
  .kt-menu__link { min-height: 44px; }
  /* Formularfelder voll ausnutzen */
  .form-group [class*="col-"] { flex: 0 0 100%; max-width: 100%; }
  /* Buttons in Toolbars nicht überlaufen lassen */
  .kt-portlet__head-toolbar .btn { padding-left: 12px; padding-right: 12px; }
  /* Modale voll nutzbar */
  .modal-dialog { margin: 0.5rem; }
}

/* Horizontales Scrollen des Body immer vermeiden */
@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden; }
}

/* ---------------------------------------------------------------------------
   TEIL B — Reskin-Engine (nur neue Skins). classic bleibt unberührt.
   Die Skins definieren die Variablen (--sk-bg, --sk-surface, …); hier werden
   sie auf die Metronic-Flächen angewandt. Fallbacks halten es robust.
--------------------------------------------------------------------------- */
/* Default-Palette (niedrige Spezifität `body[data-skin]`, damit die per-Skin-
   Blöcke in skin-modern/brand/leitstand.css sie per gleicher Spezifität +
   späterer Ladereihenfolge überschreiben). Gilt auch für classic, wird dort
   aber nie angewandt (Anwendungsregeln unten schließen classic aus). */
body[data-skin] {
  --sk-bg: #eef1f6;
  --sk-surface: #ffffff;
  --sk-surface-2: #f6f8fb;
  --sk-ink: #1f2b3a;
  --sk-ink-soft: #46596e;
  --sk-muted: #64748f;
  --sk-line: #e4e9f0;
  --sk-accent: #2f7bf6;
  --sk-accent-ink: #ffffff;
  --sk-aside-bg: #1a2232;
  --sk-aside-ink: #b7c2d6;
  --sk-aside-active-bg: rgba(255,255,255,.08);
  --sk-aside-active-ink: #ffffff;
  --sk-header-bg: #ffffff;
  --sk-radius: 12px;
  --sk-radius-sm: 9px;
  --sk-shadow: 0 1px 2px rgba(20,35,60,.05), 0 8px 24px -14px rgba(20,35,60,.22);
  --sk-font: inherit;
  /* Statusfarben. Hell-Modus: abgedunkelte Töne, die auf weißen Karten lesbar
     sind (>=4.5:1); die grellen Original-Töne sind dort unlesbar (Warngelb
     #ffb822 auf Weiß nur 1.7:1). --sk-warn-dot: Punkte/Flächen ohne Text
     dürfen heller bleiben (3:1 reicht). */
  --sk-ok: #0b8a7c;
  --sk-crit: #d31460;
  --sk-warn: #9c6f00;
  --sk-warn-dot: #d99a00;
  --sk-viol: #5f4bd8;
}

/* Dunkel-Modus: die hellen Original-Töne (auf dunklem Grund lesbar);
   crit leicht aufgehellt — #fd397a schafft auf dunklem Grund nur ~4.3:1. */
body[data-mode="dark"] {
  --sk-ok: #1dc9b7;
  --sk-crit: #ff6b96;
  --sk-warn: #ffb822;
  --sk-warn-dot: #ffb822;
  --sk-viol: #9b8cff;
}

/* Grundflächen */
body[data-skin]:not([data-skin="classic"]),
body[data-skin]:not([data-skin="classic"]) .kt-content,
body[data-skin]:not([data-skin="classic"]) .kt-wrapper,
body[data-skin]:not([data-skin="classic"]) .kt-body { background: var(--sk-bg); color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) { font-family: var(--sk-font); }

/* Portlets → Karten */
body[data-skin]:not([data-skin="classic"]) .kt-portlet {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
}
body[data-skin]:not([data-skin="classic"]) .kt-portlet__head {
  border-bottom: 1px solid var(--sk-line);
  background: transparent;
}
body[data-skin]:not([data-skin="classic"]) .kt-portlet__head-title,
body[data-skin]:not([data-skin="classic"]) .kt-portlet__head-title small { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .kt-portlet__foot { border-top: 1px solid var(--sk-line); background: transparent; }

/* Header themengerecht (auch DEV/Staging) — #kt_header (ID) schlägt das Inline-Rot. */
body[data-skin]:not([data-skin="classic"]) #kt_header { background: var(--sk-header-bg) !important; border-bottom: 1px solid var(--sk-line); }
body[data-skin]:not([data-skin="classic"]) .kt-header-mobile { background: var(--sk-header-bg); }
/* Topbar (Glocke, Zahnrad, Sprache, User) auf dem dunklen Header sichtbar machen */
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-icon i,
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-icon,
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-username,
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-item .kt-badge:not(.kt-badge--danger) { color: var(--sk-ink) !important; }
/* Auch der Zustand ".show" (Panel aufgeklappt) muss hier stehen: Metronic legt dort
   "background-color:#f2f3f7 !important" auf das Symbol. Ohne diese Ergaenzung blieb die helle
   Flaeche stehen, waehrend das Zeichen darauf hell eingefaerbt wurde - die Glocke sah dadurch
   wie ein leerer weisser Block aus. Das !important ist noetig, weil Metronic es ebenfalls fuehrt. */
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-item:hover .kt-header__topbar-icon,
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-item.show .kt-header__topbar-icon,
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-wrapper:hover .kt-header__topbar-icon { background: var(--sk-surface-2) !important; }
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-item:hover .kt-header__topbar-icon i,
body[data-skin]:not([data-skin="classic"]) #kt_header .kt-header__topbar-item.show .kt-header__topbar-icon i { color: var(--sk-ink) !important; }

/* Umgebungs-Marker: dünner farbiger Balken ganz oben (alle Skins inkl. classic,
   layout-unabhängig via data-env). Ergänzt die vorhandenen Marker
   ([DEV]-Titel + rotes Favicon); ersetzt den früheren vollroten classic-Header. */
body[data-skin][data-env="dev"]::before,
body[data-skin][data-env="staging"]::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10001; pointer-events: none;
}
body[data-skin][data-env="dev"]::before { background: #e5384d; }
body[data-skin][data-env="staging"]::before { background: #f5a524; }
body[data-skin][data-env="dev"]::after,
body[data-skin][data-env="staging"]::after {
  position: fixed; top: 3px; left: 50%; transform: translateX(-50%); z-index: 10001; pointer-events: none;
  font-size: 9px; font-weight: 700; letter-spacing: .14em; padding: 2px 12px; border-radius: 0 0 8px 8px; color: #fff;
}
body[data-skin][data-env="dev"]::after { content: "DEV"; background: #e5384d; }
body[data-skin][data-env="staging"]::after { content: "STAGING"; background: #f5a524; color: #3a2c00; }

/* Subheader */
body[data-skin]:not([data-skin="classic"]) .kt-subheader { background: transparent; }
body[data-skin]:not([data-skin="classic"]) .kt-subheader__title,
body[data-skin]:not([data-skin="classic"]) .kt-subheader__breadcrumbs-link { color: var(--sk-ink); }

/* Aside / Menü */
body[data-skin]:not([data-skin="classic"]) .kt-aside,
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu { background: var(--sk-aside-bg); }
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu .kt-menu__link-text,
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu .kt-menu__link-icon,
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu .kt-menu__section-text { color: var(--sk-aside-ink); }
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu .kt-menu__item--active > .kt-menu__link,
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu .kt-menu__item:hover > .kt-menu__link {
  background: var(--sk-aside-active-bg);
}
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu .kt-menu__item--active > .kt-menu__link .kt-menu__link-text,
body[data-skin]:not([data-skin="classic"]) .kt-aside-menu .kt-menu__item--active > .kt-menu__link .kt-menu__link-icon {
  color: var(--sk-aside-active-ink);
}

/* Text / Links / gedämpft */
body[data-skin]:not([data-skin="classic"]) .kt-font-dark,
body[data-skin]:not([data-skin="classic"]) h1, body[data-skin]:not([data-skin="classic"]) h2,
body[data-skin]:not([data-skin="classic"]) h3, body[data-skin]:not([data-skin="classic"]) h4,
body[data-skin]:not([data-skin="classic"]) h5 { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .text-muted,
body[data-skin]:not([data-skin="classic"]) .kt-font-muted { color: var(--sk-muted) !important; }
body[data-skin]:not([data-skin="classic"]) a { color: var(--sk-link, var(--sk-accent)); }
/* Anker, die als solide Buttons gerendert werden, behalten Button-Textfarbe
   (die a-Akzentfarbe machte z.B. die gruenen Excel-Buttons unlesbar) */
body[data-skin]:not([data-skin="classic"]) a.btn-success,
body[data-skin]:not([data-skin="classic"]) a.btn-success:hover,
body[data-skin]:not([data-skin="classic"]) a.btn-danger,
body[data-skin]:not([data-skin="classic"]) a.btn-danger:hover,
body[data-skin]:not([data-skin="classic"]) a.btn-warning,
body[data-skin]:not([data-skin="classic"]) a.btn-warning:hover { color: #111111; }

/* Buttons: Primär/Brand auf Akzent */
body[data-skin]:not([data-skin="classic"]) .btn-primary,
body[data-skin]:not([data-skin="classic"]) .btn-brand {
  background-color: var(--sk-accent);
  border-color: var(--sk-accent);
  color: var(--sk-accent-ink);
  border-radius: var(--sk-radius-sm);
}
body[data-skin]:not([data-skin="classic"]) .btn-primary:hover,
body[data-skin]:not([data-skin="classic"]) .btn-brand:hover { filter: brightness(.94); }
body[data-skin]:not([data-skin="classic"]) .btn { border-radius: var(--sk-radius-sm); }
body[data-skin]:not([data-skin="classic"]) .btn-secondary,
body[data-skin]:not([data-skin="classic"]) .btn-default {
  background: var(--sk-surface-2); border-color: var(--sk-line); color: var(--sk-ink-soft);
}

/* Formularfelder */
body[data-skin]:not([data-skin="classic"]) .form-control,
body[data-skin]:not([data-skin="classic"]) .custom-select {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  color: var(--sk-ink);
  border-radius: var(--sk-radius-sm);
}
body[data-skin]:not([data-skin="classic"]) .form-control:focus {
  border-color: var(--sk-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--sk-accent) 22%, transparent);
}

/* Tabellen */
body[data-skin]:not([data-skin="classic"]) .table,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__table { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .table th,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__head .kt-datatable__cell { color: var(--sk-muted); border-color: var(--sk-line); }
body[data-skin]:not([data-skin="classic"]) .table td,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__body .kt-datatable__cell { border-color: var(--sk-line); }
body[data-skin]:not([data-skin="classic"]) .kt-datatable__row:hover,
body[data-skin]:not([data-skin="classic"]) tr.clickable:hover { background: var(--sk-surface-2) !important; }

/* Cards / diverse Panels, die kein Portlet sind */
body[data-skin]:not([data-skin="classic"]) .card { background: var(--sk-surface); border-color: var(--sk-line); border-radius: var(--sk-radius); }

/* =========================================================================
   TEIL C — Komponenten-Abdeckung (alle neuen Skins, dunkel-sicher).
   Deckt die üblichen Metronic-Bausteine ab, damit im Dunkelmodus nichts
   hell-auf-hell / dunkel-auf-dunkel bricht. Alles variablen-gesteuert.
   ========================================================================= */

/* Iconbox-Statuskarten (Aufzug-Detail oben): heller Diagonal-Verlauf entfernen */
body[data-skin]:not([data-skin="classic"]) .kt-iconbox {
  background: var(--sk-surface) !important;
  background-image: none !important;
  border: 1px solid var(--sk-line);
}
body[data-skin]:not([data-skin="classic"]) .kt-iconbox::before,
body[data-skin]:not([data-skin="classic"]) .kt-iconbox::after { opacity: .05; }
body[data-skin]:not([data-skin="classic"]) .kt-iconbox__title,
body[data-skin]:not([data-skin="classic"]) .kt-iconbox__content,
body[data-skin]:not([data-skin="classic"]) .kt-iconbox__desc { color: var(--sk-ink); }

/* Widgets */
body[data-skin]:not([data-skin="classic"]) .kt-widget__title,
body[data-skin]:not([data-skin="classic"]) .kt-widget__username,
body[data-skin]:not([data-skin="classic"]) .kt-widget__value,
body[data-skin]:not([data-skin="classic"]) .kt-widget12__value,
body[data-skin]:not([data-skin="classic"]) .kt-widget24__title { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .kt-widget__desc,
body[data-skin]:not([data-skin="classic"]) .kt-widget__subtitle,
body[data-skin]:not([data-skin="classic"]) .kt-widget24__desc { color: var(--sk-muted); }

/* Text-Utilities, die helle Grundfläche annehmen */
body[data-skin]:not([data-skin="classic"]) .kt-font-dark,
body[data-skin]:not([data-skin="classic"]) .text-dark,
body[data-skin]:not([data-skin="classic"]) .kt-section__title { color: var(--sk-ink) !important; }

/* Dropdown-Menüs */
body[data-skin]:not([data-skin="classic"]) .dropdown-menu,
body[data-skin]:not([data-skin="classic"]) .kt-menu__subnav { background: var(--sk-surface); border: 1px solid var(--sk-line); box-shadow: var(--sk-shadow); }
body[data-skin]:not([data-skin="classic"]) .dropdown-item { color: var(--sk-ink-soft); }
body[data-skin]:not([data-skin="classic"]) .dropdown-item:hover,
body[data-skin]:not([data-skin="classic"]) .dropdown-item:focus { background: var(--sk-surface-2); color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .dropdown-divider { border-color: var(--sk-line); }

/* Modale */
body[data-skin]:not([data-skin="classic"]) .modal-content { background: var(--sk-surface); border: 1px solid var(--sk-line); border-radius: var(--sk-radius); }
body[data-skin]:not([data-skin="classic"]) .modal-header,
body[data-skin]:not([data-skin="classic"]) .modal-footer { border-color: var(--sk-line); }
body[data-skin]:not([data-skin="classic"]) .modal-title,
body[data-skin]:not([data-skin="classic"]) .modal-body { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .close { color: var(--sk-ink); text-shadow: none; opacity: .7; }

/* Tabs */
body[data-skin]:not([data-skin="classic"]) .nav-tabs { border-color: var(--sk-line); }
body[data-skin]:not([data-skin="classic"]) .nav-tabs .nav-link { color: var(--sk-muted); }
body[data-skin]:not([data-skin="classic"]) .nav-tabs .nav-link.active { color: var(--sk-accent); background: transparent; border-color: var(--sk-line) var(--sk-line) transparent; }
body[data-skin]:not([data-skin="classic"]) .kt-portlet__head-tabs .kt-menu__link-text { color: var(--sk-muted); }

/* Inputs erweitert */
body[data-skin]:not([data-skin="classic"]) .input-group-text,
body[data-skin]:not([data-skin="classic"]) .custom-file-label { background: var(--sk-surface-2); border-color: var(--sk-line); color: var(--sk-ink-soft); }
body[data-skin]:not([data-skin="classic"]) .form-control::placeholder { color: var(--sk-muted); opacity: 1; }
body[data-skin]:not([data-skin="classic"]) select.form-control option { background: var(--sk-surface); color: var(--sk-ink); }
/* Select2 (falls verwendet) */
body[data-skin]:not([data-skin="classic"]) .select2-container--default .select2-selection--single,
body[data-skin]:not([data-skin="classic"]) .select2-dropdown { background: var(--sk-surface); border-color: var(--sk-line); color: var(--sk-ink); }

/* Pagination */
body[data-skin]:not([data-skin="classic"]) .page-link,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__pager-link { background: var(--sk-surface); border-color: var(--sk-line); color: var(--sk-ink-soft); }
body[data-skin]:not([data-skin="classic"]) .page-item.active .page-link,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__pager-link.kt-datatable__pager-link--active { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-accent-ink); }

/* Notification / Quick-Panel (Glocke-Dropdown) */
body[data-skin]:not([data-skin="classic"]) .kt-notification,
body[data-skin]:not([data-skin="classic"]) .kt-quick-panel,
body[data-skin]:not([data-skin="classic"]) .kt-head { background: var(--sk-surface); }
body[data-skin]:not([data-skin="classic"]) .kt-notification__item-title { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .kt-notification__item-time { color: var(--sk-muted); }
body[data-skin]:not([data-skin="classic"]) .kt-notification__item { border-color: var(--sk-line); }
body[data-skin]:not([data-skin="classic"]) .kt-notification__item:hover { background: var(--sk-surface-2); }

/* Abschnitts-Balken im Glocke-Dropdown ("Anomalien", "Neu erkannte Standby-Anlagen", ...).
   Trug frueher einen Inline-Style mit heller Flaeche und blieb dadurch im Dunkelmodus weiss,
   waehrend die Ueberschrift darauf hell eingefaerbt wurde - also hell auf weiss. */
body[data-skin]:not([data-skin="classic"]) .kt-head--section { background: var(--sk-surface-2); border-bottom: 1px solid var(--sk-line); }

/* Eintraege im Glocke-Dropdown. Die volle Kette ist noetig: Metronic setzt
   ".kt-notification .kt-notification__item .kt-notification__item-details .kt-notification__item-title"
   mit vier Klassen (style.bundle.css) und schlaegt damit die kurze Fassung oben - der Text blieb
   dunkelgrau auf dunklem Grund. Diese Regel kommt auf sechs Klassen und gewinnt sicher. */
body[data-skin]:not([data-skin="classic"]) .kt-notification .kt-notification__item .kt-notification__item-details .kt-notification__item-title { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .kt-notification .kt-notification__item .kt-notification__item-details .kt-notification__item-time { color: var(--sk-muted); }
body[data-skin]:not([data-skin="classic"]) .kt-notification .kt-notification__item:hover .kt-notification__item-details .kt-notification__item-title { color: var(--sk-accent); }

/* Aktionsmenue (Zahnrad: "Observer neustarten", "Copy SSH", ...). Der Dropdown-Block weiter oben
   deckt nur .dropdown-item ab; dieses Menue nutzt kt-nav und blieb deshalb dunkelgrau. */
body[data-skin]:not([data-skin="classic"]) .dropdown-menu .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-text { color: var(--sk-ink-soft); }
body[data-skin]:not([data-skin="classic"]) .dropdown-menu .kt-nav .kt-nav__item > .kt-nav__link .kt-nav__link-icon { color: var(--sk-muted); }
body[data-skin]:not([data-skin="classic"]) .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link { background-color: var(--sk-surface-2); }
body[data-skin]:not([data-skin="classic"]) .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-text,
body[data-skin]:not([data-skin="classic"]) .dropdown-menu .kt-nav .kt-nav__item:hover:not(.kt-nav__item--disabled):not(.kt-nav__item--sub) > .kt-nav__link .kt-nav__link-icon { color: var(--sk-ink); }

/* Rueckmeldungen der Sensor-Befehle (sendSshCommand) im Dialog. Bootstrap gibt <pre> eine eigene
   Farbe (#212529), deshalb vererbt sich die helle Schrift des Dialogs dorthin nicht. */
body[data-skin]:not([data-skin="classic"]) pre,
body[data-skin]:not([data-skin="classic"]) code,
body[data-skin]:not([data-skin="classic"]) .form-control-static { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .modal-body pre { background: var(--sk-surface-2); border-color: var(--sk-line); }

/* Verschachtelte Datatable-Kopf (z.B. Fahrtenzähler Unterbrechung/ZÜS/Wartung) */
body[data-skin]:not([data-skin="classic"]) .kt-datatable__head,
body[data-skin]:not([data-skin="classic"]) .kt-datatable--subtable .kt-datatable__head,
body[data-skin]:not([data-skin="classic"]) thead.thead-light th,
body[data-skin]:not([data-skin="classic"]) .table thead th { background: var(--sk-surface-2); color: var(--sk-muted); }

/* Separatoren / Trennlinien */
body[data-skin]:not([data-skin="classic"]) .kt-separator,
body[data-skin]:not([data-skin="classic"]) hr { border-color: var(--sk-line); background: var(--sk-line); }

/* Helle Hintergrund-Utilities neutralisieren */
body[data-skin]:not([data-skin="classic"]) .bg-white,
body[data-skin]:not([data-skin="classic"]) .kt-bg-light,
body[data-skin]:not([data-skin="classic"]) .bg-light { background: var(--sk-surface) !important; }

/* Buttons: clean/outline lesbar halten */
body[data-skin]:not([data-skin="classic"]) .btn-clean,
body[data-skin]:not([data-skin="classic"]) .btn-outline-secondary { color: var(--sk-ink-soft); }
body[data-skin]:not([data-skin="classic"]) .btn-clean:hover { background: var(--sk-surface-2); }

/* =========================================================================
   TEIL D — Tabellen wirklich transparent + bootstrap-select-Filter dunkel.
   Gilt für ALLE neuen Skins (nicht classic). Behebt: weiße Datenzeilen im
   Dunkelmodus, weiße Filter-Dropdowns, sowie die „leere Box" rechts
   (bootstrap-select-Button füllt jetzt die volle Breite).
   ========================================================================= */
body[data-skin]:not([data-skin="classic"]) .kt-datatable,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__table,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__row,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__lock,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__lock--scroll,
body[data-skin]:not([data-skin="classic"]) .table,
body[data-skin]:not([data-skin="classic"]) .table > tbody,
body[data-skin]:not([data-skin="classic"]) .table > thead,
body[data-skin]:not([data-skin="classic"]) .table tr,
body[data-skin]:not([data-skin="classic"]) .table td,
body[data-skin]:not([data-skin="classic"]) .table th { background: transparent !important; }
body[data-skin]:not([data-skin="classic"]) .kt-datatable__row { border-bottom: 1px solid var(--sk-line) !important; }
body[data-skin]:not([data-skin="classic"]) .kt-datatable__head { background: var(--sk-surface-2) !important; }
body[data-skin]:not([data-skin="classic"]) .kt-datatable__cell,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__cell > span,
body[data-skin]:not([data-skin="classic"]) .table td { color: var(--sk-ink); }

/* bootstrap-select (Filter-Dropdowns) */
body[data-skin]:not([data-skin="classic"]) div.bootstrap-select.form-control { border: 0 !important; background: transparent !important; padding: 0 !important; height: auto !important; box-shadow: none !important; }
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .bootstrap-select { width: 100% !important; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > button.btn {
  width: 100% !important;
  background: var(--sk-surface) !important;
  color: var(--sk-ink) !important;
  border: 1px solid var(--sk-line) !important;
  border-radius: var(--sk-radius-sm) !important;
}
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle .filter-option,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle .filter-option-inner-inner { color: var(--sk-ink) !important; }
/* custom.css begrenzt filter-option/Button auf 80% — schneidet lange Werte ab */
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle .filter-option { width: 100% !important; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle.btn-light,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle.btn-secondary { max-width: none !important; }
/* Metronic daempft nicht-ausgewaehlte Selects (bs-placeholder) per opacity .8 — im Dark unlesbar */
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle.bs-placeholder > .filter-option { opacity: 1 !important; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-toggle .caret { border-top-color: var(--sk-muted) !important; }
/* "×" zum Leeren (multiselect-clear.js) — Farben im neuen Skin */
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .bs-clear-x { color: var(--sk-muted); }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .bs-clear-x:hover { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-menu { background: var(--sk-surface) !important; border: 1px solid var(--sk-line) !important; box-shadow: var(--sk-shadow); }
/* inneres ul heisst ebenfalls .dropdown-menu — darf keinen eigenen Rand tragen (zwei Linien oben/unten) */
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu .dropdown-menu,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select ul.dropdown-menu.inner { border: 0 !important; background: transparent !important; box-shadow: none; }
/* Scrollbar der Options-Liste (war grell weiss im Dark; scrollendes Element ist div.inner) */
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar { width: 8px; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-thumb { background: var(--sk-line); border-radius: 4px; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu .inner::-webkit-scrollbar-track { background: transparent; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li a,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li a span.text { color: var(--sk-ink-soft) !important; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li a:hover,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li.selected a,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li a.active { background: var(--sk-surface-2) !important; color: var(--sk-ink) !important; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li a:hover span.text,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li.selected a span.text,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .dropdown-menu li a.active span.text { color: var(--sk-ink) !important; }
body[data-skin]:not([data-skin="classic"]) .bootstrap-select .bs-searchbox .form-control { background: var(--sk-surface-2) !important; color: var(--sk-ink) !important; }

/* =========================================================================
   TEIL E — Listen-Neuaufbau (Mockup-Struktur): Titelzeile + KPI-Leiste +
   einklappbare Filter + flache Tabelle. Markup liefern die list-Templates
   (nur bei skin != classic gerendert), Palette kommt aus dem jeweiligen Skin.
   ========================================================================= */

/* Titelzeile */
body[data-skin]:not([data-skin="classic"]) .sk-pagehead {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 4px 14px;
}
body[data-skin]:not([data-skin="classic"]) .sk-pagehead .sk-title h1 {
  font-size: 20px; font-weight: 700; margin: 0; color: var(--sk-ink); letter-spacing: -.01em;
}
body[data-skin]:not([data-skin="classic"]) .sk-pagehead .sk-title small {
  display: block; color: var(--sk-muted); font-size: 12.5px; margin-top: 2px;
}
body[data-skin]:not([data-skin="classic"]) .sk-pagehead .sk-actions {
  margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* Live-Pill */
body[data-skin]:not([data-skin="classic"]) .sk-live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--sk-ok, #0b8a7c);
  background: rgba(29,201,183,.12); border: 1px solid rgba(29,201,183,.35);
  padding: 5px 13px; border-radius: 44px;
}
body[data-skin]:not([data-skin="classic"]) .sk-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sk-ok, #0b8a7c);
  animation: sk-pulse 2.2s infinite;
}
@keyframes sk-pulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* Primär-Aktion (+ Anlage) — brand färbt gold um */
body[data-skin]:not([data-skin="classic"]) .sk-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sk-accent); color: var(--sk-accent-ink);
  font-weight: 700; font-size: 13px; padding: 8px 18px; border-radius: 44px;
  border: 0; cursor: pointer; text-decoration: none !important;
}
body[data-skin]:not([data-skin="classic"]) .sk-cta:hover { filter: brightness(.95); color: var(--sk-accent-ink); }
/* Filter-Toggle-Button */
body[data-skin]:not([data-skin="classic"]) .sk-filterbtn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--sk-surface); color: var(--sk-ink); border: 1px solid var(--sk-line);
  font-weight: 600; font-size: 13px; padding: 8px 16px; border-radius: 44px; cursor: pointer;
}
body[data-skin]:not([data-skin="classic"]) .sk-filterbtn .sk-count {
  background: var(--sk-accent); color: var(--sk-accent-ink); border-radius: 44px;
  font-size: 10.5px; font-weight: 700; min-width: 18px; height: 18px; line-height: 18px; text-align: center; padding: 0 5px;
}
body[data-skin]:not([data-skin="classic"]) .sk-filterbtn[aria-expanded="true"] { border-color: var(--sk-accent); color: var(--sk-accent); }

/* KPI-Leiste */
body[data-skin]:not([data-skin="classic"]) .sk-kpis {
  display: flex; flex-wrap: wrap; gap: 0;
  background: var(--sk-surface); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); box-shadow: var(--sk-shadow);
  padding: 14px 6px; margin-bottom: 16px;
}
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi {
  flex: 1 1 0; min-width: 140px; padding: 4px 22px; position: relative;
}
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi + .sk-kpi::before {
  content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: var(--sk-line);
}
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi .sk-num {
  font-size: 26px; font-weight: 800; color: var(--sk-ink); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi .sk-lbl {
  font-size: 12px; color: var(--sk-muted); margin-top: 3px; font-weight: 500;
}
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi.crit .sk-num { color: var(--sk-crit); }
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi.ok .sk-num { color: var(--sk-ok); }
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi.warn .sk-num { color: var(--sk-warn); }
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi.viol .sk-num { color: var(--sk-viol); }

/* Einklappbare Filterleiste */
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel { display: none; margin-bottom: 14px; }
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel.sk-open { display: block; }
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel > .sk-filterpanel-inner {
  background: var(--sk-surface); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); box-shadow: var(--sk-shadow); padding: 16px 18px 6px;
}

/* Status-Pills (Mockup) */
body[data-skin]:not([data-skin="classic"]) .sk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 44px; white-space: nowrap;
}
body[data-skin]:not([data-skin="classic"]) .sk-pill.ok   { color: var(--sk-ok); background: rgba(29,201,183,.13); }
body[data-skin]:not([data-skin="classic"]) .sk-pill.crit { color: var(--sk-crit); background: rgba(253,57,122,.13); }
body[data-skin]:not([data-skin="classic"]) .sk-pill.warn { color: var(--sk-warn); background: rgba(255,184,34,.14); }
body[data-skin]:not([data-skin="classic"]) .sk-pill.viol { color: var(--sk-viol); background: rgba(124,108,255,.16); }
body[data-skin]:not([data-skin="classic"]) .sk-pill.mut  { color: var(--sk-muted); background: var(--sk-surface-2); }
/* Ticket-Edit: Formular-Selects als bootstrap-select (Init in edit.html.twig) —
   feste Breite verhindert die Landmine "Picker in display:none initialisiert" */
body[data-skin]:not([data-skin="classic"]) #ticketForm .bootstrap-select { width: 100% !important; }

/* Sensor-Status als Dot+Text */
body[data-skin]:not([data-skin="classic"]) .sk-dotline { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .sk-dotline::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sk-dot, var(--sk-ok)); }
body[data-skin]:not([data-skin="classic"]) .sk-dotline.off { --sk-dot: var(--sk-warn-dot); }
body[data-skin]:not([data-skin="classic"]) .sk-dotline.err { --sk-dot: var(--sk-crit); }

/* Flache Mockup-Tabelle */
body[data-skin]:not([data-skin="classic"]) .sk-table-wrap {
  background: var(--sk-surface); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); box-shadow: var(--sk-shadow); overflow: hidden;
}
body[data-skin]:not([data-skin="classic"]) table.sk-table { width: 100%; border-collapse: collapse; }
body[data-skin]:not([data-skin="classic"]) table.sk-table thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sk-muted); padding: 13px 18px; border-bottom: 1px solid var(--sk-line);
  background: var(--sk-surface-2);
}
body[data-skin]:not([data-skin="classic"]) table.sk-table tbody td {
  padding: 15px 18px; border-bottom: 1px solid var(--sk-line);
  font-size: 13.5px; color: var(--sk-ink); vertical-align: middle;
}
body[data-skin]:not([data-skin="classic"]) table.sk-table tbody tr:last-child td { border-bottom: 0; }
body[data-skin]:not([data-skin="classic"]) table.sk-table tbody tr { cursor: pointer; }
body[data-skin]:not([data-skin="classic"]) table.sk-table tbody tr:hover td { background: var(--sk-surface-2); }
body[data-skin]:not([data-skin="classic"]) table.sk-table .sk-name { font-weight: 700; color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) table.sk-table .sk-sub { display: block; font-size: 12px; color: var(--sk-muted); font-weight: 400; margin-top: 2px; }
body[data-skin]:not([data-skin="classic"]) table.sk-table .num { font-variant-numeric: tabular-nums; }
body[data-skin]:not([data-skin="classic"]) table.sk-table .crit { color: var(--sk-crit); font-weight: 700; }
body[data-skin]:not([data-skin="classic"]) table.sk-table .viol { color: var(--sk-viol); font-weight: 700; }
/* Leerzustand + Laden */
body[data-skin]:not([data-skin="classic"]) .sk-table-empty { padding: 40px; text-align: center; color: var(--sk-muted); }

/* Pagination unter der Tabelle */
body[data-skin]:not([data-skin="classic"]) .sk-pager { display: flex; align-items: center; gap: 8px; padding: 14px 4px; color: var(--sk-muted); font-size: 12.5px; }
body[data-skin]:not([data-skin="classic"]) .sk-pager .sk-pagebtn {
  min-width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--sk-line);
  background: var(--sk-surface); color: var(--sk-ink-soft); font-weight: 600; font-size: 12.5px; cursor: pointer;
}
body[data-skin]:not([data-skin="classic"]) .sk-pager .sk-pagebtn.on { background: var(--sk-accent); border-color: var(--sk-accent); color: var(--sk-accent-ink); }
body[data-skin]:not([data-skin="classic"]) .sk-pager .sk-total { margin-left: auto; }

/* Mobil: KPI 2×2, Tabelle → Karten (generisch über data-label, wie leitstand) */
@media (max-width: 768px) {
  body[data-skin]:not([data-skin="classic"]) .sk-kpis { padding: 8px; }
  body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi { flex: 1 1 40%; padding: 10px 14px; }
  body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi:nth-child(odd)::before { display: none; }
  body[data-skin]:not([data-skin="classic"]) table.sk-table thead { display: none; }
  body[data-skin]:not([data-skin="classic"]) table.sk-table,
  body[data-skin]:not([data-skin="classic"]) table.sk-table tbody { display: block; width: 100%; }
  body[data-skin]:not([data-skin="classic"]) .sk-table-wrap { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  body[data-skin]:not([data-skin="classic"]) table.sk-table tbody tr {
    display: block; margin: 0 0 10px; padding: 6px 14px;
    background: var(--sk-surface); border: 1px solid var(--sk-line);
    border-radius: var(--sk-radius); box-shadow: var(--sk-shadow);
  }
  body[data-skin]:not([data-skin="classic"]) table.sk-table tbody td {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 8px 0; border-bottom: 1px dashed var(--sk-line); text-align: right;
  }
  body[data-skin]:not([data-skin="classic"]) table.sk-table tbody td:last-child { border-bottom: 0; }
  body[data-skin]:not([data-skin="classic"]) table.sk-table tbody td[data-label]::before {
    content: attr(data-label); color: var(--sk-muted); font-size: 11px; font-weight: 600;
    text-align: left; margin-right: auto; text-transform: uppercase; letter-spacing: .06em;
  }
  body[data-skin]:not([data-skin="classic"]) table.sk-table tbody td.sk-main { text-align: left; }
  body[data-skin]:not([data-skin="classic"]) table.sk-table tbody td.sk-main::before { display: none; }
}

/* --- Teil E-Ergänzung: sk-listpage (Portlet der Listen-Seiten) --- */
/* Portlet-Rahmen verschwindet; die KTDatatable selbst wird zur Mockup-Karte. */
body[data-skin]:not([data-skin="classic"]) .sk-listpage { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage > .kt-portlet__head { display: none !important; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-portlet__body { padding: 0 !important; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable {
  background: var(--sk-surface) !important;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
  overflow: hidden;
}
/* Kopfzeile: klein, uppercase, gedämpft (Mockup) */
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__head .kt-datatable__cell > span {
  font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .09em; text-transform: uppercase;
  color: var(--sk-muted) !important;
}
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__head .kt-datatable__cell { padding: 13px 14px !important; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__cell { padding: 14px !important; font-size: 13.5px; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__row { border-bottom: 1px solid var(--sk-line) !important; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__row:hover { background: var(--sk-surface-2) !important; cursor: pointer; }
/* Name + Sub in der Anlage-Zelle */
body[data-skin]:not([data-skin="classic"]) .sk-listpage .sk-name { font-weight: 700; color: var(--sk-ink); line-height: 1.25; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .sk-name .sk-sub { display: block; font-size: 11.5px; color: var(--sk-muted); font-weight: 400; margin-top: 2px; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .num { font-variant-numeric: tabular-nums; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .num.crit { color: var(--sk-crit); font-weight: 700; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .num.viol { color: var(--sk-viol); font-weight: 700; }
/* Pagination der KTDatatable dunkel-fähig */
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__pager { padding: 10px 14px; }
/* Mobil: KTDatatable-Zeilen als Karten (alle neuen Skins; Labels via skin-cards.js data-label) */
@media (max-width: 768px) {
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__head { display: none !important; }
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable,
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__table,
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body { display: block !important; width: 100% !important; }
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable { background: transparent !important; border: 0; box-shadow: none; overflow: visible; }
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__row {
    display: block !important; width: 100% !important; margin: 0 0 10px !important; padding: 6px 13px !important;
    background: var(--sk-surface) !important; border: 1px solid var(--sk-line) !important;
    border-radius: var(--sk-radius) !important; box-shadow: var(--sk-shadow);
  }
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__cell {
    display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px;
    width: auto !important; max-width: none !important; padding: 7px 0 !important;
    border-bottom: 1px dashed var(--sk-line); text-align: right !important;
  }
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__cell:last-child { border-bottom: 0; }
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__cell > span { width: auto !important; text-align: right; }
  body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__cell[data-label]::before {
    content: attr(data-label); color: var(--sk-muted); font-size: 10.5px; font-weight: 700;
    text-align: left; margin-right: auto; text-transform: uppercase; letter-spacing: .07em;
  }
}

/* Fix: kein horizontaler Scrollbalken im Content (z.B. elevatorDashboard) */
body[data-skin]:not([data-skin="classic"]) .kt-content { overflow-x: clip; }
/* Breite Inhalte scrollen im eigenen Container statt rechts rauszulaufen */
body[data-skin]:not([data-skin="classic"]) .kt-datatable { max-width: 100%; overflow-x: auto; }
body[data-skin]:not([data-skin="classic"]) .kt-portlet { max-width: 100%; }
/* Fix: bootstrap-select-Dropdown-Menü nicht breiter als nötig (Status-Filter) */
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > .dropdown-menu { min-width: 100% !important; max-width: 340px !important; }


/* Mini-Popover für Status-Details: wird von skin-list.js als fixiertes, an <body> gehängtes
   Element (.sk-tip-float) positioniert, damit es aus JEDEM overflow-Container ausbricht.
   Dadurch braucht die Datatable KEINE overflow:visible-Hacks mehr (die frühere Fix 10/10b nahmen
   ihr den horizontalen Scroll und ließen bei schmaler Breite Zeilen/Rahmen überstehen). */
body[data-skin]:not([data-skin="classic"]) .sk-tip { display: inline-block; }
.sk-tip-float {
  position: fixed;
  z-index: 100000;
  display: none;
  background: #152735; color: #eef4f9;
  padding: 9px 13px; border-radius: 10px;
  font-size: 11.5px; line-height: 1.6; font-weight: 500;
  white-space: pre; text-align: left;
  box-shadow: 0 10px 26px -10px rgba(0,0,0,.5);
  pointer-events: none;
  max-width: 340px;
}

/* Fix 10 ENTFERNT: die overflow:visible-Hacks (fürs alte CSS-::after-Popover) nahmen der
   Datatable den horizontalen Scroll und ließen bei schmaler Fensterbreite Zeilen/Rahmen
   überstehen. Das Popover läuft jetzt als fixiertes .sk-tip-float (s.o.) — kein overflow-
   Eingriff mehr nötig. */

/* Fix 11: bootstrap-select-Menü exakt feldbreit — keine unsichtbare Überbreite
   (fing Klicks neben dem Feld ab und wählte Werte aus), kein H-Scrollbalken. */
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .bootstrap-select .dropdown-menu {
  width: 100% !important; min-width: 0 !important; max-width: none !important;
  overflow-x: hidden !important;
}
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .bootstrap-select .dropdown-menu.inner { width: 100% !important; min-width: 0 !important; }
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .bootstrap-select .dropdown-menu li a { white-space: normal !important; }

/* Fix 12: Pager-Größenauswahl nicht abschneiden */
body[data-skin]:not([data-skin="classic"]) .kt-datatable__pager .bootstrap-select,
body[data-skin]:not([data-skin="classic"]) .kt-datatable__pager .bootstrap-select > .dropdown-toggle {
  min-width: 72px !important; width: auto !important; padding: 6px 10px !important;
}

/* Fix 10b ENTFERNT (overflow:visible auf der Listen-Karte): sie behält jetzt ihren
   horizontalen Scroll (overflow-x:auto weiter oben), damit die Tabelle bei schmaler Breite
   scrollbar statt überstehend ist. Das Popover clippt dank .sk-tip-float nicht mehr. Kopf/Pager
   runden. */
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__head { border-radius: var(--sk-radius) var(--sk-radius) 0 0; }
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__pager { border-radius: 0 0 var(--sk-radius) var(--sk-radius); }

/* Fix 11b: Label-Klick darf das versteckte Select nicht aktivieren
   (bootstrap-select wählte sonst die erste Option aus). */
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .kt-form__label,
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .kt-form__label label { pointer-events: none; }

/* Fix 10c: In der ersten Datenzeile öffnet das Popover nach UNTEN (oben würde es
   vom Filter-Panel überdeckt); Pfeil entsprechend gedreht. */
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__row:first-child .sk-tip:hover::after {
  bottom: auto; top: calc(100% + 8px);
}
body[data-skin]:not([data-skin="classic"]) .sk-listpage .kt-datatable__body .kt-datatable__row:first-child .sk-tip:hover::before {
  bottom: auto; top: calc(100% + 2px);
  border-top-color: transparent; border-bottom-color: #152735;
}


/* Fix 11c: Das native <select> im bootstrap-select-Wrapper vollstaendig aus dem
   Klickpfad nehmen (war durch den form-control-Reset wieder gross+klickbar geworden
   und fing Klicks neben dem Feld ab -> waehlte "Online"). */
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > select.form-control,
body[data-skin]:not([data-skin="classic"]) .bootstrap-select > select,
body[data-skin]:not([data-skin="classic"]) select.bs-select-hidden {
  position: absolute !important;
  left: 0 !important; bottom: 0 !important;
  width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}


/* Detailseiten-Kopf im Header: Titelzeile + Meta-Chips statt wild umbrechender Pipes */
body[data-skin]:not([data-skin="classic"]) .kt-header-menu-wrapper { min-width: 0; flex: 1; }
body[data-skin]:not([data-skin="classic"]) #kt_header_menu .kt-menu__nav { display: block; }
body[data-skin]:not([data-skin="classic"]) .sk-detailhead {
  display: flex; flex-direction: column; gap: 4px; padding: 8px 0; min-width: 0;
}
body[data-skin]:not([data-skin="classic"]) .sk-dh-title {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  font-size: 14.5px; color: var(--sk-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-skin]:not([data-skin="classic"]) .sk-dh-title strong { font-weight: 700; }
body[data-skin]:not([data-skin="classic"]) .sk-dh-addr { color: var(--sk-ink-soft); overflow: hidden; text-overflow: ellipsis; }
body[data-skin]:not([data-skin="classic"]) .sk-dh-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--sk-ok, #0b8a7c); flex: none;
}
body[data-skin]:not([data-skin="classic"]) .sk-dh-dot.off { background: var(--sk-crit); }
body[data-skin]:not([data-skin="classic"]) .sk-dh-dot.warn { background: var(--sk-warn-dot); }
body[data-skin]:not([data-skin="classic"]) .sk-dh-meta {
  display: flex; flex-wrap: wrap; gap: 4px 6px; min-width: 0;
}
body[data-skin]:not([data-skin="classic"]) .sk-dh-chip {
  white-space: nowrap; font-size: 11px; color: var(--sk-muted); line-height: 1;
  background: var(--sk-surface-2); border: 1px solid var(--sk-line); border-radius: 7px;
  padding: 3px 7px;
}
body[data-skin]:not([data-skin="classic"]) .sk-dh-chip b {
  color: var(--sk-ink-soft); font-weight: 600; margin-right: 4px; text-transform: uppercase; font-size: 9.5px; letter-spacing: .04em;
}

/* --- Dark-Lesbarkeit: Metronic-Festfarben (hohe Spezifitaet) auf Variablen umbiegen --- */
body[data-skin]:not([data-skin="classic"]) .kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title { color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) .kt-portlet .kt-portlet__head .kt-portlet__head-label .kt-portlet__head-title small { color: var(--sk-muted); }
/* Datatable-Zelltexte (Metronic: #595d6e fest) */
body[data-skin]:not([data-skin="classic"]) .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__body .kt-datatable__row > .kt-datatable__cell > span { color: var(--sk-ink-soft); }
body[data-skin]:not([data-skin="classic"]) .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__head .kt-datatable__row > .kt-datatable__cell > span,
body[data-skin]:not([data-skin="classic"]) .kt-datatable.kt-datatable--default > .kt-datatable__table > .kt-datatable__foot .kt-datatable__row > .kt-datatable__cell > span { color: var(--sk-muted); }
/* Iconboxen (Status-Kacheln z.B. auf ticket/edit) */
body[data-skin]:not([data-skin="classic"]) .kt-iconbox .kt-iconbox__body .kt-iconbox__desc .kt-iconbox__title,
body[data-skin]:not([data-skin="classic"]) .kt-iconbox .kt-iconbox__body .kt-iconbox__desc .kt-iconbox__content,
body[data-skin]:not([data-skin="classic"]) .kt-iconbox .kt-iconbox__body .kt-iconbox__desc .kt-iconbox__content b { color: var(--sk-ink); }
/* Native Formularfelder (Rueckmeldung-Select auf ticket/edit war weiss im Dark) */
body[data-skin]:not([data-skin="classic"]) select.form-control:not(.bs-select-hidden),
body[data-skin]:not([data-skin="classic"]) input.form-control,
body[data-skin]:not([data-skin="classic"]) textarea.form-control {
  background-color: var(--sk-surface-2); color: var(--sk-ink); border-color: var(--sk-line);
}

/* Dunkelmodus: Browser-eigene UI (native Select-Popups, Scrollbars, Datepicker)
   folgt der Seite — ohne das rendert Chrome z.B. das Options-Popup nativer Selects weiss */
body[data-skin]:not([data-skin="classic"])[data-mode="dark"] { color-scheme: dark; }

/* ZÜS-Dashboard-Kopf: Selects/Eingabe/Buttons im Stil der Filter-Dropdowns */
body[data-skin]:not([data-skin="classic"]) #zt-dash select,
body[data-skin]:not([data-skin="classic"]) #zt-dash input.zt-in,
body[data-skin]:not([data-skin="classic"]) #zt-dash a.zt-btn,
body[data-skin]:not([data-skin="classic"]) #zt-dash button.zt-btn {
  background: var(--sk-surface-2); color: var(--sk-ink);
  border: 1px solid var(--sk-line); border-radius: var(--sk-radius-sm);
  padding: 8px 12px; font-size: 12.5px;
}
body[data-skin]:not([data-skin="classic"]) #zt-dash select option { background: var(--sk-surface-2); color: var(--sk-ink); }
body[data-skin]:not([data-skin="classic"]) #zt-dash .zt-top .bootstrap-select { min-width: 235px; }
body[data-skin]:not([data-skin="classic"]) #zt-dash input.zt-in::placeholder { color: var(--sk-muted); opacity: 1; }
body[data-skin]:not([data-skin="classic"]) #zt-dash button.zt-btn:hover,
body[data-skin]:not([data-skin="classic"]) #zt-dash a.zt-btn:hover,
body[data-skin]:not([data-skin="classic"]) #zt-dash select:hover { border-color: var(--sk-muted); }

/* Export-Buttons im Filterpanel nebeneinander (Spalte ist schmaler als beide Buttons) */
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .sk-btnrow {
  display: flex; gap: 8px; align-items: center;
}
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .sk-btnrow .btn { white-space: nowrap; }

/* Footer (Metronic: background #fff fest — war im Dark ein heller Balken) */
body[data-skin]:not([data-skin="classic"]) .kt-footer { background: var(--sk-surface); }
body[data-skin]:not([data-skin="classic"]) .kt-footer .kt-footer__copyright,
body[data-skin]:not([data-skin="classic"]) .kt-footer .kt-footer__copyright .kt-link { color: var(--sk-muted); }
body[data-skin]:not([data-skin="classic"]) .kt-footer .kt-footer__menu .kt-footer__menu-link { color: var(--sk-ink-soft); }

/* Filter-Labels stehen immer ÜBER den Feldern (Metronic --inline stellt sie sonst daneben) */
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .kt-form__group--inline { display: block; }
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .kt-form__group--inline > .kt-form__label {
  display: block; width: auto; padding: 0 0 4px; text-align: left; vertical-align: baseline;
}
body[data-skin]:not([data-skin="classic"]) .sk-filterpanel .kt-form__group--inline > .kt-form__control { display: block; width: 100%; }

/* Kleine Überschrift über einer KPI-Zeile (Dashboard: „Anlagen" / „Tickets") */
body[data-skin]:not([data-skin="classic"]) .sk-kpihead {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--sk-muted); margin: 0 2px 6px;
}

/* Klickbare KPI-Boxen (Filter-Shortcuts + Dashboard-Links): Hover-Effekt */
body[data-skin]:not([data-skin="classic"]) .sk-kpis a.sk-kpi {
  display: block; text-decoration: none; color: inherit;
}
/* data-kpi-filter muss mit: Kacheln, die ihren Filter mitliefern (Ticket- und Aufzugsliste),
   sind genauso klickbar wie die mit data-kpi — ohne diesen Selektor fehlten ihnen Zeiger,
   Hover und Klick-Rückmeldung komplett. */
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi[data-kpi],
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi[data-kpi-filter],
body[data-skin]:not([data-skin="classic"]) .sk-kpis a.sk-kpi {
  cursor: pointer; border-radius: 10px;
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi[data-kpi]:hover,
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi[data-kpi-filter]:hover,
body[data-skin]:not([data-skin="classic"]) .sk-kpis a.sk-kpi:hover {
  background: var(--sk-surface-2);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -8px rgba(20,35,60,.25);
}
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi[data-kpi]:active,
body[data-skin]:not([data-skin="classic"]) .sk-kpis .sk-kpi[data-kpi-filter]:active,
body[data-skin]:not([data-skin="classic"]) .sk-kpis a.sk-kpi:active { transform: translateY(0); }

/* Dashboard-KPI-Boxen (a.kt-iconbox, verlinken auf gefilterte Listen): Hover wie Listen-KPIs */
body[data-skin]:not([data-skin="classic"]) a.kt-iconbox {
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body[data-skin]:not([data-skin="classic"]) a.kt-iconbox:hover {
  transform: translateY(-2px);
  background: var(--sk-surface-2) !important;
  box-shadow: 0 10px 26px -10px rgba(20,35,60,.30) !important;
}
body[data-skin]:not([data-skin="classic"]) a.kt-iconbox:active { transform: translateY(0); }

/* Datatable-Aktions-Buttons: nebeneinander statt umbrechend; Zelle nicht abschneiden */
body[data-skin]:not([data-skin="classic"]) .kt-datatable__cell:has(.btn) > span {
  display: inline-flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  width: auto !important;
  overflow: visible !important;
}
body[data-skin]:not([data-skin="classic"]) .kt-datatable__cell .btn { margin: 0 !important; flex: none; }
/* Breite Datatables außerhalb der Listen-Seiten (z.B. Dashboard-Tickets):
   im eigenen Container scrollen, Scrollbalken sichtbar */
body[data-skin]:not([data-skin="classic"]) .kt-datatable { scrollbar-width: thin; }
body[data-skin]:not([data-skin="classic"]) .kt-datatable::-webkit-scrollbar { height: 8px; }
body[data-skin]:not([data-skin="classic"]) .kt-datatable::-webkit-scrollbar-thumb { background: var(--sk-line); border-radius: 4px; }

/* Ticket-Tabelle (Liste + Dashboard): hart auf Containerbreite zwingen.
   KTDatatable setzt Inline-Festbreiten, deren Summe den Platz sprengt —
   !important schlägt die Inline-Styles; table-layout:fixed verteilt gleichmäßig. */
body[data-skin]:not([data-skin="classic"]) table#ticket_table,
body[data-skin]:not([data-skin="classic"]) .kt-datatable--loaded table.kt-datatable__table {
  width: 100% !important;
  min-width: 0 !important;
}
body[data-skin]:not([data-skin="classic"]) table#ticket_table { table-layout: fixed !important; }
body[data-skin]:not([data-skin="classic"]) table#ticket_table .kt-datatable__cell,
body[data-skin]:not([data-skin="classic"]) table#ticket_table th,
body[data-skin]:not([data-skin="classic"]) table#ticket_table td {
  width: auto !important; min-width: 0 !important; max-width: none !important;
  overflow-wrap: break-word;
}

/* =========================================================================
   TEIL F — Mobiles Layout (alle neuen Skins): Bottom-Nav, aufgeräumter
   Header, Detailkopf im Fluss, Kleinkram. Farben über --sk-*-Variablen,
   gelten damit automatisch für hell UND dunkel.
   ========================================================================= */

/* --- Bottom-Navigation (Partial _skinBottomNav.html.twig) --- */
body[data-skin]:not([data-skin="classic"]) .sk-bottomnav { display: none; }

@media (max-width: 768px) {
  body[data-skin]:not([data-skin="classic"]) .sk-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
    height: calc(58px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--sk-surface); border-top: 1px solid var(--sk-line);
    box-shadow: 0 -8px 24px -14px rgba(0, 0, 0, 0.45);
  }
  body[data-skin]:not([data-skin="classic"]) .sk-bottomnav .sk-bn-item {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; min-width: 0; border: 0; background: transparent; text-decoration: none !important;
    color: var(--sk-muted); font-size: 10px; font-weight: 600; cursor: pointer;
    font-family: inherit; padding: 0; letter-spacing: .01em;
  }
  body[data-skin]:not([data-skin="classic"]) .sk-bottomnav .sk-bn-lbl {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  }
  body[data-skin]:not([data-skin="classic"]) .sk-bottomnav .sk-bn-ico {
    width: 22px; height: 22px; background: currentColor; flex: none;
    -webkit-mask: var(--sk-bn-mask) center / 20px 20px no-repeat;
    mask: var(--sk-bn-mask) center / 20px 20px no-repeat;
  }
  body[data-skin]:not([data-skin="classic"]) .sk-bottomnav .sk-bn-item.skin-here { color: var(--sk-accent); }
  /* Icon-Masken (identische SVGs wie die Aside-Icons in skin-brand.css) */
  body[data-skin]:not([data-skin="classic"]) .sk-bn-item[data-ico="dashboard"] { --sk-bn-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013h8V3H3zM13%2021h8V3h-8zM3%2021h8v-6H3z%27/%3E%3C/svg%3E"); }
  body[data-skin]:not([data-skin="classic"]) .sk-bn-item[data-ico="elevator"] { --sk-bn-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%2716%27%20height%3D%2718%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M9%208l3-3%203%203M9%2016l3%203%203-3%27/%3E%3C/svg%3E"); }
  body[data-skin]:not([data-skin="classic"]) .sk-bn-item[data-ico="tickets"] { --sk-bn-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%27/%3E%3Cpath%20d%3D%27M14%202v6h6M8%2013h8M8%2017h5%27/%3E%3C/svg%3E"); }
  body[data-skin]:not([data-skin="classic"]) .sk-bn-item[data-ico="nea"] { --sk-bn-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%277%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M22%2010v4%27/%3E%3Cpath%20d%3D%27M11%209l-2.5%204H11l-1%203%27/%3E%3C/svg%3E"); }
  body[data-skin]:not([data-skin="classic"]) .sk-bn-item[data-ico="more"] { --sk-bn-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%206h18M3%2012h18M3%2018h18%27/%3E%3C/svg%3E"); }
  /* Content + Footer über der Bottom-Nav freistellen */
  body[data-skin]:not([data-skin="classic"]) .kt-content { padding-bottom: calc(66px + env(safe-area-inset-bottom)) !important; }
  body[data-skin]:not([data-skin="classic"]) .kt-footer { margin-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

/* --- Header-Zone mobil (Metronics Mobile-Breakpoint ist 1024px) --- */
@media (max-width: 1024px) {
  /* Topbar mobil auf das Wesentliche reduzieren: Leitstand-Button + Mode-Toggle + Glocke + User */
  body[data-skin]:not([data-skin="classic"]) .kt-header__topbar .kt-header__topbar-item--quick-panel,
  body[data-skin]:not([data-skin="classic"]) .kt-header__topbar .kt-header__topbar-item--langs { display: none !important; }
  /* Super-Admin-Button mobil mit kurzem Label „Leitstand" */
  body[data-skin]:not([data-skin="classic"]) .sk-tb-admin .sk-tb-admin-full { display: none; }
  /* Buttons in der 50px-Topbar-Zeile kompakt (die globale mobile
     Touch-Ziel-Höhe von 40px machte den Leitstand-Button zu groß) */
  body[data-skin]:not([data-skin="classic"]) .kt-header__topbar .btn {
    min-height: 0; padding: 5px 12px; font-size: 12px; line-height: 1.3;
  }
  /* Topbar deterministisch: versteckt, bis der Punkte-Toggler sie einblendet
     (Metronics margin-top-Trick ragte halb sichtbar in den Content) */
  body[data-skin]:not([data-skin="classic"]) .kt-header__topbar { display: none !important; }
  body[data-skin]:not([data-skin="classic"]).kt-header__topbar--mobile-on .kt-header__topbar {
    display: flex !important; position: fixed; top: 50px; left: 0; right: 0;
    margin-top: 0 !important; z-index: 96;
    height: 50px; align-items: center; justify-content: flex-end; flex-wrap: nowrap;
    padding: 0 10px;
    background: var(--sk-header-bg); border-bottom: 1px solid var(--sk-line);
    box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.45);
  }
  /* DEV/STAGING-Text-Badge kollidiert mit dem Logo im 50px-Mobile-Header —
     der 3px-Umgebungsbalken, [DEV]-Titel und das rote Favicon bleiben als Kennung */
  body[data-skin][data-env="dev"]::after,
  body[data-skin][data-env="staging"]::after { display: none; }
  /* Metronic reserviert 94px für Mobile-Header + Subheader — die Skins zeigen
     keinen Subheader, es blieben 44px Leerraum über dem Content */
  body[data-skin]:not([data-skin="classic"]) .kt-wrapper { padding-top: 50px !important; }

  /* Detailkopf (Titel + Chips) raus aus Metronics Off-Canvas, rein in den Fluss */
  body[data-skin]:not([data-skin="classic"]) .kt-header-menu-wrapper:has(.sk-detailhead) {
    position: static !important; width: 100% !important; left: auto !important; right: auto !important;
    transform: none !important; box-shadow: none !important; overflow: visible !important;
    z-index: auto; background: var(--sk-surface); border-bottom: 1px solid var(--sk-line);
  }
  body[data-skin]:not([data-skin="classic"]) .kt-header-menu-wrapper:has(.sk-detailhead) .sk-detailhead { padding: 10px 15px; }
  /* Header-Menü-Toggler + Close nutzlos (Menü leer oder statisch im Fluss) */
  body[data-skin]:not([data-skin="classic"]) #kt_header_mobile_toggler,
  body[data-skin]:not([data-skin="classic"]) .kt-header-menu-wrapper-close { display: none !important; }
  /* Titel umbrechen statt Ellipsis; Chips horizontal wischbar */
  body[data-skin]:not([data-skin="classic"]) .sk-dh-title { white-space: normal; overflow: visible; text-overflow: clip; flex-wrap: wrap; }
  body[data-skin]:not([data-skin="classic"]) .sk-dh-addr { overflow: visible; }
  body[data-skin]:not([data-skin="classic"]) .sk-dh-meta {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none;
  }
  body[data-skin]:not([data-skin="classic"]) .sk-dh-meta::-webkit-scrollbar { display: none; }
}

/* --- Kleinkram mobil --- */
@media (max-width: 768px) {
  body[data-skin]:not([data-skin="classic"]) .sk-pagehead { padding: 12px 2px 10px; gap: 10px; }
  body[data-skin]:not([data-skin="classic"]) .sk-pagehead .sk-title h1 { font-size: 17px; white-space: normal; }
  /* ZÜS-Dashboard-Kopfzeile stapeln (Markup rendert auch im classic — deshalb hier gescoped, nicht im Template) */
  body[data-skin]:not([data-skin="classic"]) #zt-dash .zt-top { flex-direction: column; align-items: stretch; }
  body[data-skin]:not([data-skin="classic"]) #zt-dash .zt-right { margin-left: 0; flex-direction: column; align-items: stretch; }
  body[data-skin]:not([data-skin="classic"]) #zt-dash .zt-top select,
  body[data-skin]:not([data-skin="classic"]) #zt-dash .zt-top input.zt-in,
  body[data-skin]:not([data-skin="classic"]) #zt-dash .zt-top .bootstrap-select { width: 100% !important; min-width: 0 !important; }
  /* OSM-Karte: volle Breite + ECHTE Höhe (OpenLayers' Viewport ist height:100%,
     und 100% von min-height/auto ergibt 0 — Karte blieb sonst unsichtbar) */
  body[data-skin]:not([data-skin="classic"]) #mapdiv { width: 100%; max-width: 100%; height: 320px; }
}

/* --- Mobile-Fixpaket (iPhone-Feedback): Header-Menü, Portlet-Köpfe,
       Datumsfelder, breite Tabellen --- */
@media (max-width: 1024px) {
  /* Metronic färbt das innere Header-Menü mobil fest weiß und gibt ihm in
     iOS-Safari echte Höhe — im Fluss-Detailkopf muss es transparent sein */
  body[data-skin]:not([data-skin="classic"]) .kt-header-menu,
  body[data-skin]:not([data-skin="classic"]) .kt-header-menu-mobile {
    background-color: transparent !important;
    height: auto !important; min-height: 0 !important;
  }
}
@media (max-width: 768px) {
  /* iOS Safari: date-Inputs haben eine intrinsische Mindestbreite und
     sprengen sonst die Karte (Von/Bis auf Flapping/Exporte/Logs) */
  body[data-skin]:not([data-skin="classic"]) input[type="date"],
  body[data-skin]:not([data-skin="classic"]) input[type="datetime-local"],
  body[data-skin]:not([data-skin="classic"]) input[type="time"] {
    -webkit-appearance: none; appearance: none;
    min-width: 0; max-width: 100%; width: 100%;
  }
  /* Portlet-Köpfe mit fester Höhe (--lg): Toolbar/Excel-Button überlappte
     den Titel — Höhe freigeben und umbrechen lassen */
  body[data-skin]:not([data-skin="classic"]) .kt-portlet > .kt-portlet__head {
    height: auto !important; min-height: 0 !important;
    padding-top: 12px; padding-bottom: 12px;
    flex-wrap: wrap; gap: 8px; align-items: flex-start;
  }
  body[data-skin]:not([data-skin="classic"]) .kt-portlet > .kt-portlet__head .kt-portlet__head-label {
    flex-wrap: wrap; min-width: 0; row-gap: 4px;
  }
  body[data-skin]:not([data-skin="classic"]) .kt-portlet > .kt-portlet__head .kt-portlet__head-toolbar {
    flex-wrap: wrap; min-width: 0;
  }
  /* Breite Log-/Report-Tabellen horizontal wischbar statt abgeschnitten */
  body[data-skin]:not([data-skin="classic"]) .kt-portlet__body table.table {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Tab-Leisten (z.B. Sensor-Offline-Report) horizontal wischbar */
  body[data-skin]:not([data-skin="classic"]) .nav-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body[data-skin]:not([data-skin="classic"]) .nav-tabs::-webkit-scrollbar { display: none; }
  body[data-skin]:not([data-skin="classic"]) .nav-tabs .nav-link { white-space: nowrap; }
}

/* --- Detailseiten: Tabellen in einer Box wie das Dokumente-Portlet
       (Titelzeile mit Trennlinie, keine Ausklappfunktion) --- */
body[data-skin]:not([data-skin="classic"]) .sk-boxed {
  background: var(--sk-surface);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  box-shadow: var(--sk-shadow);
  padding: 0 20px 16px;
  margin-bottom: 20px;
}
body[data-skin]:not([data-skin="classic"]) .sk-boxed .sk-pagehead {
  margin: 0 -20px 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--sk-line);
}
body[data-skin]:not([data-skin="classic"]) .sk-boxed .sk-pagehead .sk-title h1 {
  font-size: 15.5px; font-weight: 600;
}
/* Die Tabelle in der Box nicht als eigene Karte doppeln */
body[data-skin]:not([data-skin="classic"]) .sk-boxed .sk-listpage .kt-datatable {
  border: 0 !important; box-shadow: none !important;
  background: transparent !important; border-radius: 0;
}
@media (max-width: 768px) {
  body[data-skin]:not([data-skin="classic"]) .sk-boxed { padding: 0 12px 12px; }
  body[data-skin]:not([data-skin="classic"]) .sk-boxed .sk-pagehead { margin: 0 -12px 12px; padding: 12px; }
}

/* Super-Admin-Button: kurzes Label nur mobil in den neuen Skins (Regel oben);
   Standard (Desktop + classic) zeigt den vollen Text */
.sk-tb-admin .sk-tb-admin-short { display: none; }
@media (max-width: 1024px) {
  body[data-skin]:not([data-skin="classic"]) .sk-tb-admin .sk-tb-admin-short { display: inline; }
}

/* =========================================================================
   TEIL G — Aside für ALLE neuen Skins (Brand-Vorlage, Farben via --sk-aside-*):
   breitere Navy-Sidebar, Icon LINKS neben Text (Zeilen), abgerundetes aktives
   Element azurn, weißes Inline-Logo. Nur Desktop-Layoutbreite ändern.
   ========================================================================= */
@media (min-width: 1025px) {
  /* Nur wenn das Aside wirklich existiert (layout_nomenu-Seiten wie
     elevatorDetailHistory/StateHistory haben keins, tragen aber trotzdem
     kt-aside--enabled) — sonst 232px Leerraum links. */
  body:where([data-skin]:not([data-skin="classic"])):has(#kt_aside) .kt-aside { width: 232px !important; }
  body:where([data-skin]:not([data-skin="classic"])):has(#kt_aside) .kt-wrapper { padding-left: 232px !important; }
  body:where([data-skin]:not([data-skin="classic"])):has(#kt_aside) .kt-header { left: 232px !important; }
  /* Ohne Aside: auch Metronics eigenen Aside-Offset neutralisieren */
  body:where([data-skin]:not([data-skin="classic"])):not(:has(#kt_aside)) .kt-wrapper { padding-left: 0 !important; }
  body:where([data-skin]:not([data-skin="classic"])):not(:has(#kt_aside)) .kt-header { left: 0 !important; }
}

/* Aside-Fläche + Marken-Logo oben */
body:where([data-skin]:not([data-skin="classic"])) .kt-aside,
body:where([data-skin]:not([data-skin="classic"])) .kt-aside-menu { background: var(--sk-aside-bg, #152735) !important; }
body:where([data-skin]:not([data-skin="classic"])) .kt-aside__brand { padding: 14px 16px; border-bottom: 1px solid var(--sk-aside-line, rgba(255,255,255,.08)); justify-content: flex-start; }
body:where([data-skin]:not([data-skin="classic"])) .kt-aside__brand-logo img,
body:where([data-skin]:not([data-skin="classic"])) .kt-header-mobile__logo img {
  content: url("/assets/media/logos/ACOBESMART-logo-inline-neg.png");
  height: 28px !important; width: auto !important;
}

/* Menüpunkte — mit #kt_aside_menu (ID!), um Metronics ID-Regeln zu schlagen.
   margin-right:auto am Text erzwingt die Links-Ausrichtung neben dem Icon.
   Hinweis: ALLE <li> haben hart kt-menu__item--active → taugt NICHT zur Markierung
   der aktuellen Seite. Die aktuelle Seite markiert skin-cards.js per .skin-here. */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav { padding: 8px 0; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item { margin: 0 !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item > .kt-menu__link {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  text-align: left !important;
  height: auto !important;
  min-height: 40px !important;
  padding: 8px 12px !important;
  margin: 1px 8px !important;
  border-radius: 10px !important;
  background: transparent !important;
}
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item > .kt-menu__link > .kt-menu__link-icon {
  flex: 0 0 22px !important;
  width: 22px !important;
  min-width: 22px !important;
  margin: 0 12px 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  color: var(--sk-aside-icon, #8ea3b5) !important;
}
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item > .kt-menu__link > .kt-menu__link-text {
  flex: 0 1 auto !important;
  width: auto !important;
  text-align: left !important;
  margin: 0 auto 0 0 !important;   /* schiebt den Text nach links direkt neben das Icon */
  padding: 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--sk-aside-text, #c4d3e0) !important;
  font-family: var(--sk-font, 'Poppins', system-ui, sans-serif) !important;
}
/* Hover */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item:hover > .kt-menu__link { background: var(--sk-aside-hover, rgba(255,255,255,.06)) !important; }
/* Aktuelle Seite (per JS gesetzt) = azurn getönt, weiß */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item > .kt-menu__link.skin-here { background: var(--sk-aside-active, rgba(0,153,255,.28)) !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item > .kt-menu__link.skin-here > .kt-menu__link-text { color: #ffffff !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__nav .kt-menu__item > .kt-menu__link.skin-here > .kt-menu__link-icon { color: var(--sk-accent, #22a6ff) !important; }

/* Gruppen-/Section-Label ("Administration") */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__section { padding: 16px 22px 6px; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__section-text { color: var(--sk-aside-section, #6f8598) !important; font-size: 10px !important; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; }

/* Untermenü (Admin) — INLINE aufgeklappt & eingerückt wie im Mockup (NICHT als
   Hover-Popover). Das Aside ist zwar kt-aside-menu--dropdown; wir zwingen das eine
   Untermenü per !important dauerhaft sichtbar & statisch (schlägt das Dropdown-JS). */

/* „Administration"-Gruppenlabel über dem Admin-Punkt (im Markup nicht vorhanden). */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .menu_admin::before {
  content: "Administration";
  display: block;
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase; font-weight: 700;
  color: var(--sk-aside-section, #6f8598); padding: 14px 20px 5px;
}

/* Untermenü dauerhaft inline sichtbar, eingerückt mit linker Trennlinie, ohne Panel. */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .menu_admin > .kt-menu__submenu,
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__item--submenu > .kt-menu__submenu {
  display: block !important;
  position: static !important;
  float: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  height: auto !important;
  overflow: visible !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 2px 12px 8px 30px !important;
  padding: 2px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 1px solid var(--sk-aside-subline, rgba(255,255,255,.14)) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__subnav { padding: 0 !important; background: transparent !important; margin: 0 !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__item { margin: 0 !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__item > .kt-menu__link {
  margin: 0 !important;
  padding: 7px 12px !important;
  min-height: 32px !important;
  border-radius: 8px !important;
}
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__item > .kt-menu__link > .kt-menu__link-text { font-size: 12.5px !important; font-weight: 500 !important; color: var(--sk-aside-subtext, #a3b7c7) !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__item > .kt-menu__link > .kt-menu__link-icon { color: var(--sk-aside-subicon, #7f97aa) !important; font-size: 14px !important; margin-right: 10px !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__item:hover > .kt-menu__link { background: var(--sk-aside-hover, rgba(255,255,255,.06)) !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__item > .kt-menu__link.skin-here { background: var(--sk-aside-active, rgba(0,153,255,.28)) !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__item > .kt-menu__link.skin-here > .kt-menu__link-text { color: #fff !important; }
/* Admin-Hauptpunkt bei aufgeklapptem Untermenü nicht als aktiv/hover hervorheben */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .menu_admin > .kt-menu__link { background: transparent !important; }

/* Badges/Zähler im Menü (Tickets, Admin) */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link-badge .kt-badge { background: #fd397a !important; color: #111 !important; border-radius: 44px; font-weight: 700; font-size: 10.5px; min-width: 20px; }

/* =========================================================================
   TEIL G — Menü-Icons (alle neuen Skins): Flaticons durch Mockup-nahe SVGs ersetzen (Maske,
   nimmt currentColor → folgt dem aktiven/gedämpften Zustand). sk-ico-* per JS,
   Admin über .menu_admin. ========================================================= */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link[class*="sk-ico-"] > .kt-menu__link-icon::before,
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .menu_admin > .kt-menu__link > .kt-menu__link-icon::before { content: "" !important; }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link[class*="sk-ico-"] > .kt-menu__link-icon,
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .menu_admin > .kt-menu__link > .kt-menu__link-icon {
  display: inline-block !important; width: 22px !important; height: 20px !important;
  background: currentColor !important;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: 20px 20px; mask-size: 20px 20px;
}
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-dashboard > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013h8V3H3zM13%2021h8V3h-8zM3%2021h8v-6H3z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2013h8V3H3zM13%2021h8V3h-8zM3%2021h8v-6H3z%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-elevator > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%2716%27%20height%3D%2718%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M9%208l3-3%203%203M9%2016l3%203%203-3%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%273%27%20width%3D%2716%27%20height%3D%2718%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M9%208l3-3%203%203M9%2016l3%203%203-3%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-acquisition > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%2714%27%20height%3D%2717%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M9%203h6v3H9z%27/%3E%3Cpath%20d%3D%27M9%2011h6M9%2015h4%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%275%27%20y%3D%274%27%20width%3D%2714%27%20height%3D%2717%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M9%203h6v3H9z%27/%3E%3Cpath%20d%3D%27M9%2011h6M9%2015h4%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-nea > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%277%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M22%2010v4%27/%3E%3Cpath%20d%3D%27M11%209l-2.5%204H11l-1%203%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%272%27%20y%3D%277%27%20width%3D%2716%27%20height%3D%2710%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M22%2010v4%27/%3E%3Cpath%20d%3D%27M11%209l-2.5%204H11l-1%203%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-pump > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203s6%206%206%2010a6%206%200%200%201-12%200c0-4%206-10%206-10z%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%203s6%206%206%2010a6%206%200%200%201-12%200c0-4%206-10%206-10z%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-stats > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203v18h18%27/%3E%3Cpath%20d%3D%27M7%2014l3-3%203%202%204-5%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%203v18h18%27/%3E%3Cpath%20d%3D%27M7%2014l3-3%203%202%204-5%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-tickets > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%27/%3E%3Cpath%20d%3D%27M14%202v6h6M8%2013h8M8%2017h5%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%27/%3E%3Cpath%20d%3D%27M14%202v6h6M8%2013h8M8%2017h5%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-zues > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27/%3E%3Cpath%20d%3D%27M9%2012l2%202%204-4%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27/%3E%3Cpath%20d%3D%27M9%2012l2%202%204-4%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__link.sk-ico-apistats > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2012h-4l-3%209L9%203l-3%209H2%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2012h-4l-3%209L9%203l-3%209H2%27/%3E%3C/svg%3E"); }
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .menu_admin > .kt-menu__link > .kt-menu__link-icon { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2711%27%20r%3D%271.6%27/%3E%3Cpath%20d%3D%27M12%2012.6V16%27/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%27/%3E%3Ccircle%20cx%3D%2712%27%20cy%3D%2711%27%20r%3D%271.6%27/%3E%3Cpath%20d%3D%27M12%2012.6V16%27/%3E%3C/svg%3E"); }

/* Fix: Logo-Bereich exakt gleicher Hintergrund wie das Menü (Logo ist transparent) */
body:where([data-skin]:not([data-skin="classic"])) .kt-aside__brand,
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_brand { background: var(--sk-aside-bg, #152735) !important; }

/* Fix: Admin-Untermenü wie im Mockup — KEINE Box; Teil-B-Regel (.kt-menu__subnav
   bekommt surface+border+shadow) hier neutralisieren. */
body:where([data-skin]:not([data-skin="classic"])) #kt_aside_menu .kt-menu__submenu .kt-menu__subnav {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Fix #1 (wirklich): Der Logo-Block oben links ist #kt_header_mobile (dient auf
   Desktop als Brand-Ecke) — Metronic gibt ihm ein dunkleres Grau. Auf Menü-Navy setzen. */
body:where([data-skin]:not([data-skin="classic"])) #kt_header_mobile,
body:where([data-skin]:not([data-skin="classic"])) .kt-header-mobile,
body:where([data-skin]:not([data-skin="classic"])) .kt-header__brand { background: var(--sk-aside-bg, #152735) !important; }

/* --- OSM-Karte im Dunkelmodus: Tile-Layer (erster ol-layer) invertiert zu
       einer dunklen Karte; der Marker-Layer (zweiter) bleibt unberührt --- */
body[data-mode="dark"]:not([data-skin="classic"]) #mapdiv .ol-layer:first-child {
  filter: invert(1) hue-rotate(180deg) brightness(0.92) contrast(0.9) saturate(0.7);
}

/* =========================================================================
   TEIL H — CLASSIC mobil benutzbar (nur @media, Desktop-classic bleibt
   unangetastet). Gleiche Fixes wie fuer die neuen Skins, ohne Redesign:
   Metronic-Off-Canvas/Topbar/Look bleiben Original.
   ========================================================================= */
@media (max-width: 768px) {
  /* iOS Safari: date-Inputs haben eine intrinsische Mindestbreite */
  body[data-skin="classic"] input[type="date"],
  body[data-skin="classic"] input[type="datetime-local"],
  body[data-skin="classic"] input[type="time"] {
    -webkit-appearance: none; appearance: none;
    min-width: 0; max-width: 100%; width: 100%;
  }
  /* Portlet-Koepfe mit fester Hoehe (--lg): Toolbar ueberlappte den Titel */
  body[data-skin="classic"] .kt-portlet > .kt-portlet__head {
    height: auto !important; min-height: 0 !important;
    padding-top: 12px; padding-bottom: 12px;
    flex-wrap: wrap; gap: 8px; align-items: flex-start;
  }
  body[data-skin="classic"] .kt-portlet > .kt-portlet__head .kt-portlet__head-label { flex-wrap: wrap; min-width: 0; row-gap: 4px; }
  body[data-skin="classic"] .kt-portlet > .kt-portlet__head .kt-portlet__head-toolbar { flex-wrap: wrap; min-width: 0; }
  /* Breite Log-/Report-Tabellen horizontal wischbar statt abgeschnitten */
  body[data-skin="classic"] .kt-portlet__body table.table {
    display: block; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  /* Tab-Leisten horizontal wischbar */
  body[data-skin="classic"] .nav-tabs {
    flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  body[data-skin="classic"] .nav-tabs::-webkit-scrollbar { display: none; }
  body[data-skin="classic"] .nav-tabs .nav-link { white-space: nowrap; }
  /* KTDatatable-Listen: Scroll-Container auch am aeusseren Element */
  body[data-skin="classic"] .kt-datatable { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* OSM-Karte: OL-Viewport ist height:100% — braucht eine ECHTE Hoehe */
  body[data-skin="classic"] #mapdiv { width: 100%; max-width: 100%; height: 320px; }
}

/* =========================================================================
   TEIL I — Lesbarkeit der Status-Farben (Success #1dc9b7, Danger #fd397a,
   Warning #ffb822). Zwei Prinzipien:
   1) Status-BADGES und -ALERTS: "Soft State" — die Farbe traegt den Text,
      der Hintergrund ist nur ein Farbschimmer (~10-15%). Voll gesaettigte
      Flaechen unter kleiner Schrift flimmern, egal ob der Text weiss oder
      schwarz ist. Gleiches Muster wie sk-pill, Leitstand-Dashboard und
      kt-badge--unified-* — jetzt fuer alle Badges einheitlich.
   2) AKTIONS-Buttons und Zaehler (Glocke, Sidebar) bleiben Vollflaeche
      (Affordance/Alarm), aber mit dunklem Text #111 — derselbe Ton, den
      das Theme bei Warning-Gelb schon nutzt.
   Gilt fuer ALLE Skins; Textfarben sind je Modus (hell/dunkel) gesetzt. */

/* --- 1a) Soft-Badges: Hell-Modus als Default (greift auch in Layouts
       ohne data-mode, z.B. install_maintenance) --- */
.kt-badge.kt-badge--success, .badge-success {
  color: #0b8a7c !important;
  background: rgba(29, 201, 183, .14) !important;
  border: 1px solid rgba(29, 201, 183, .35) !important;
  font-weight: 600;
}
.kt-badge.kt-badge--danger, .badge-danger {
  color: #d31460 !important;
  background: rgba(253, 57, 122, .12) !important;
  border: 1px solid rgba(253, 57, 122, .35) !important;
  font-weight: 600;
}
.kt-badge.kt-badge--warning, .badge-warning {
  color: #9c6f00 !important;
  background: rgba(255, 184, 34, .15) !important;
  border: 1px solid rgba(255, 184, 34, .40) !important;
  font-weight: 600;
}

/* --- 1b) Soft-Badges: Dunkel-Modus — Original-Toene als Textfarbe
       (Danger aufgehellt, #fd397a schafft auf dunklem Grund nur ~4.3:1) --- */
body[data-mode="dark"] .kt-badge.kt-badge--success, body[data-mode="dark"] .badge-success { color: #1dc9b7 !important; }
body[data-mode="dark"] .kt-badge.kt-badge--danger, body[data-mode="dark"] .badge-danger { color: #ff6b96 !important; }
body[data-mode="dark"] .kt-badge.kt-badge--warning, body[data-mode="dark"] .badge-warning { color: #ffb822 !important; }

/* --- 1c) Zaehler bleiben Alarm-Punkte: Topbar-Glocke solid (Sidebar-Zaehler
       sind ueber #kt_aside_menu-Regeln oben bereits solid) --- */
#kt_header .kt-header__topbar-item .kt-badge.kt-badge--danger {
  color: #111111 !important;
  background: #fd397a !important;
  border: 0 !important;
}

/* --- 1d) Soft-Alerts: Schimmer + Ink-Text + farbiger Akzent links --- */
.alert.alert-success, .alert.alert-solid-success {
  color: inherit !important;
  background: rgba(29, 201, 183, .10) !important;
  border: 1px solid rgba(29, 201, 183, .30) !important;
  border-left: 3px solid #1dc9b7 !important;
}
.alert.alert-danger, .alert.alert-solid-danger {
  color: inherit !important;
  background: rgba(253, 57, 122, .10) !important;
  border: 1px solid rgba(253, 57, 122, .30) !important;
  border-left: 3px solid #fd397a !important;
}
.alert.alert-warning, .alert.alert-solid-warning {
  color: inherit !important;
  background: rgba(255, 184, 34, .10) !important;
  border: 1px solid rgba(255, 184, 34, .30) !important;
  border-left: 3px solid #ffb822 !important;
}

/* --- 2) Vollflaechen-Zustaende (Buttons, Fill-Utilities): dunkler Text --- */
.btn-success, .btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success.active, .btn-success.disabled, .btn-success:disabled,
.btn-danger, .btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-danger.active, .btn-danger.disabled, .btn-danger:disabled,
.show > .btn-success.dropdown-toggle, .show > .btn-danger.dropdown-toggle,
.btn-outline-success:hover, .btn-outline-success:active, .btn-outline-success.active,
.btn-outline-danger:hover, .btn-outline-danger:active, .btn-outline-danger.active,
.show > .btn-outline-success.dropdown-toggle, .show > .btn-outline-danger.dropdown-toggle,
.btn-hover-success:hover, .btn-hover-success:active, .btn-hover-success.active, .show > .btn-hover-success,
.btn-hover-danger:hover, .btn-hover-danger:active, .btn-hover-danger.active, .show > .btn-hover-danger,
.btn.btn-label-success:hover, .btn.btn-label-success:focus, .btn.btn-label-success.active,
.btn.btn-label-danger:hover, .btn.btn-label-danger:focus, .btn.btn-label-danger.active,
.kt-bg-fill-success, .kt-bg-fill-success > i,
.kt-bg-fill-danger, .kt-bg-fill-danger > i,
.kt-font-inverse-success, .kt-font-inverse-danger {
  color: #111111 !important;
}

/* =========================================================================
   Dunkelmodus-Fixes fuer die neuen Skins (classic-dark hat eigene Regeln
   in skin-classic-dark.css).
   ========================================================================= */
/* Browser-Autofill: Chrome uebermalt das Feld mit hellem UA-Hintergrund (nicht per
   Spezifitaet ueberschreibbar) -> heller Text auf hellem Grund. box-shadow-Trick
   erzwingt den dunklen Hintergrund, text-fill-color den hellen Text. */
body[data-mode="dark"]:not([data-skin="classic"]) input:-webkit-autofill,
body[data-mode="dark"]:not([data-skin="classic"]) input:-webkit-autofill:hover,
body[data-mode="dark"]:not([data-skin="classic"]) input:-webkit-autofill:focus,
body[data-mode="dark"]:not([data-skin="classic"]) textarea:-webkit-autofill,
body[data-mode="dark"]:not([data-skin="classic"]) select:-webkit-autofill,
body[data-mode="dark"]:not([data-skin="classic"]) .form-control:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--sk-surface-2, #1e2b3a) inset !important;
  -webkit-text-fill-color: var(--sk-ink, #d3dce6) !important;
  caret-color: var(--sk-ink, #d3dce6);
}

/* Status-Iconboxen: die eingebauten weissen Wellen-Hintergrundbilder passen
   nicht auf dunkle Flaechen */
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox,
body[data-mode="dark"]:not([data-skin="classic"]) .kt-widget26 { background-image: none !important; }

/* Status-Boxen: Metronics animierte weisse Welle (::after) + weisse Basis
   (::before) dunkel einfaerben — die Wellen-Animation bleibt erhalten */
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate,
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate-slow,
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate-slower { background-color: var(--sk-surface, #17222f) !important; }
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate::before,
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate-slow::before,
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate-slower::before { background-color: var(--sk-surface, #17222f) !important; }
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate::after,
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate-slow::after,
body[data-mode="dark"]:not([data-skin="classic"]) .kt-iconbox--animate-slower::after { background: var(--sk-surface-2, #1e2b3a) !important; }