/* eit-geraete.css — Geraeteverwaltung: Icon-Feld-Layout + Dark-Mode (2.4.191)
   Dark Mode wird ueber html[data-theme="dark"] gesteuert (siehe inc/scripts.php). */

/* 2.4.191: #dialog_ticket ist ein verstecktes JS-Zwischenablage-Feld (haelt einen
   Ticket-Hash zur Uebergabe zwischen Handlern). Es darf NIE sichtbar sein - auf
   einigen Seiten fehlte das inline display:none. Global sicher ausblenden. */
#dialog_ticket { display: none !important; }

/* 2.4.196: Unterschrift-Modals von fenster.php (global geladen) zuverlaessig verstecken.
   Ihr inline-<style> liegt am Body und wird bei SPA-Navigation entfernt (style steht nicht
   in ignore_key_elms), der Modal-Div ueberlebt aber -> der Text "...serverseitig eingefuegt."
   blitzt sonst im Hintergrund auf. Hier im persistenten <head>-CSS. KEIN !important, damit
   jQuery-UI dialog('open') es per inline-display sichtbar machen kann. */
#ltg-unterschrift-modal, #ltg-unterschrift-zeigen-modal { display: none; }

/* ---------- Icon-Feld: nur Icon-Vorschau + Button (Klassenname als hidden) ---------- */
.device-icon-field {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.device-icon-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 34px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #fff;
    font-size: 18px;
    color: #444;
    flex: 0 0 auto;
}

/* =====================================================================
   DARK MODE
   ===================================================================== */
/* Icon-Feld + Icon-Picker */
html[data-theme="dark"] .device-icon-preview { background: #2a2f35; border-color: #3a434c; color: #d7dee2; }
html[data-theme="dark"] #dialog-device-icons { color: #d7dee2; }
html[data-theme="dark"] .device-icon-list { background: #232629; border-color: #3a434c; }
html[data-theme="dark"] .device-icon-item { background: #2a2f35; border-color: #3a434c; color: #cfd8dc; }
html[data-theme="dark"] .device-icon-item:hover { background: #1e3a4a; border-color: #2196F3; color: #7ec2ff; }
html[data-theme="dark"] #device_icon_search { background: #2a2f35; border-color: #3a434c; color: #d7dee2; }
/* jQuery-UI Dialog-Chrome nur des Icon-Pickers (via :has, moderne Browser) */
html[data-theme="dark"] .ui-dialog:has(#dialog-device-icons),
html[data-theme="dark"] .ui-dialog:has(#dialog-device-icons) .ui-dialog-titlebar,
html[data-theme="dark"] .ui-dialog:has(#dialog-device-icons) .ui-dialog-buttonpane {
    background: #232629 !important;
    color: #d7dee2 !important;
    border-color: #3a434c !important;
}

/* Editor-Shell / Topbar (background weg vom weissen #fff -> erbt dunklen Widget-Body) */
html[data-theme="dark"] .device-editor-shell { background: transparent; color: #d7dee2; }
html[data-theme="dark"] .device-editor-title { color: #e6ebee; }
html[data-theme="dark"] .device-editor-topbar { border-color: #3a434c; }

/* Footer-Leisten (SmartAdmin .smart-form footer) im Geraete-Kontext dunkel machen */
html[data-theme="dark"] .device-editor-shell footer,
html[data-theme="dark"] .device-protocol-widget-body footer,
html[data-theme="dark"] .device-protocol-form-footer {
    background: #232629 !important;
    border-color: #3a434c !important;
}

/* Dynamische Formularfelder */
html[data-theme="dark"] .device-dynamic-fields { background: #232629; border-color: #3a434c; color: #d7dee2; }

/* Kopier-Button */
html[data-theme="dark"] .device-copy-btn { background: #2a2f35; border-color: #3a434c; color: #cfd8dc; }

/* Protokoll-Bereich */
html[data-theme="dark"] .device-protocol-widget-body { background: transparent; color: #d7dee2; }
html[data-theme="dark"] .device-protocol-list-head { border-color: #3a434c; color: #e6ebee; }
html[data-theme="dark"] .device-protocol-entry { background: #262d33; border-color: #3a434c; border-left-color: #739e73; }
html[data-theme="dark"] .device-protocol-entry-head { color: #e6ebee; }
html[data-theme="dark"] .device-protocol-entry-text { color: #d7dee2; }
html[data-theme="dark"] .device-protocol-entry-meta,
html[data-theme="dark"] .device-protocol-entry-updated { color: #9aa4ab; }
html[data-theme="dark"] .device-protocol-form-footer { border-color: #3a434c; }

/* Zugewiesene Tickets */
html[data-theme="dark"] .device-ticket-entry { background: #262d33; border-color: #3a434c; border-left-color: #739e73; }
html[data-theme="dark"] .device-ticket-entry:hover { background: #2b343b; }
html[data-theme="dark"] .device-ticket-entry-hash { color: #8fbf8f; }
html[data-theme="dark"] .device-ticket-entry-name { color: #d7dee2; }
html[data-theme="dark"] .device-ticket-entry-meta { color: #9aa4ab; }

/* Ansicht-Header */
html[data-theme="dark"] .device-view-header { background: #232629; border-color: #3a434c; color: #d7dee2; }
html[data-theme="dark"] .device-view-header-title { color: #e6ebee; }
html[data-theme="dark"] .device-view-header-meta { color: #9aa4ab; }

/* =====================================================================
   Markdown-Editor (bootstrap-markdown, .md-editor) im Dark Mode.
   Genutzt u.a. in der Beschreibung von "Ticket Neu" (laeuft im iframe).
   smartadmin-dark deckt nur Textarea/Hover ab - die helle Toolbar-Leiste
   (.md-header) bzw. der Container bleiben sonst weiss. html- UND body-
   Selektor, weil beide je nach Kontext data-theme tragen koennen.
   ===================================================================== */
html[data-theme="dark"] .md-editor,
body[data-theme="dark"] .md-editor { background: #232629; border-color: #3a434c; }
html[data-theme="dark"] .md-editor .md-header,
body[data-theme="dark"] .md-editor .md-header { background: #2a2f35; border-color: #3a434c; color: #d7dee2; }
html[data-theme="dark"] .md-editor .md-header .btn,
body[data-theme="dark"] .md-editor .md-header .btn { background: #2a2f35; border-color: #3a434c; color: #cfd8dc; }
html[data-theme="dark"] .md-editor .md-header .btn:hover,
body[data-theme="dark"] .md-editor .md-header .btn:hover { background: #1e3a4a; border-color: #2196F3; color: #7ec2ff; }
html[data-theme="dark"] .md-editor > textarea,
body[data-theme="dark"] .md-editor > textarea,
html[data-theme="dark"] .md-editor .md-input,
body[data-theme="dark"] .md-editor .md-input { background: #1b1e20; color: #d7dee2; border-color: #3a434c; }
html[data-theme="dark"] .md-editor .md-preview,
body[data-theme="dark"] .md-editor .md-preview { background: #1b1e20; color: #d7dee2; }
html[data-theme="dark"] .md-editor .md-footer,
body[data-theme="dark"] .md-editor .md-footer { background: #2a2f35; border-color: #3a434c; color: #9aa4ab; }

/* =====================================================================
   Feld-Typen "URL" + "Geraete-Verknuepfung" (FormBuilder) + Picker-Modal
   ===================================================================== */
.device-ref-field, .device-url-field { display: flex; align-items: center; gap: 6px; }
.device-ref-name, .device-url-input { flex: 1 1 auto; min-width: 0; }
.device-ref-btn { flex: 0 0 auto; }
.device-ref-pick-filter { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.device-ref-pick-filter label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.device-ref-pick-result { max-height: 380px; overflow-y: auto; }
.device-ref-pick-table { margin-bottom: 0; }
@media (max-width: 700px) { .device-ref-pick-filter { grid-template-columns: 1fr; } }

/* Dark Mode fuer die neuen Felder + Picker */
html[data-theme="dark"] .device-ref-name, body[data-theme="dark"] .device-ref-name,
html[data-theme="dark"] .device-url-input, body[data-theme="dark"] .device-url-input { background: #1b1e20; color: #d7dee2; border-color: #3a434c; }
html[data-theme="dark"] .device-ref-btn, body[data-theme="dark"] .device-ref-btn { background: #2a2f35; border-color: #3a434c; color: #cfd8dc; }
html[data-theme="dark"] .device-ref-btn:hover, body[data-theme="dark"] .device-ref-btn:hover { background: #1e3a4a; border-color: #2196F3; color: #7ec2ff; }
html[data-theme="dark"] .device-ref-pick-filter label, body[data-theme="dark"] .device-ref-pick-filter label { color: #cfd8dc; }
html[data-theme="dark"] #device-ref-pick-dialog, body[data-theme="dark"] #device-ref-pick-dialog { color: #d7dee2; }
html[data-theme="dark"] .ui-dialog:has(#device-ref-pick-dialog),
html[data-theme="dark"] .ui-dialog:has(#device-ref-pick-dialog) .ui-dialog-titlebar,
html[data-theme="dark"] .ui-dialog:has(#device-ref-open-dialog),
html[data-theme="dark"] .ui-dialog:has(#device-ref-open-dialog) .ui-dialog-titlebar {
    background: #232629 !important; color: #d7dee2 !important; border-color: #3a434c !important;
}
