html { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; line-height: 1.5; box-sizing: border-box; }
body { background-color: #fff; color: #000; padding: 0; margin: 0; padding-top: 150px; padding-left: 280px; }

.warning-auth { color: red; width: auto; padding-bottom: 10px; }

.test-form { padding: 20px; width: 100vw; display: flex; gap: 30px; }

.test-button { margin-left: 50px; width: auto; text-align: right; background-color: #ddd; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); font-size: 16px; }

#settings-button { width: auto; background-color: transparent; margin-left: 500px; margin-top: -10px; }

#settings-button:hover { background-color: #ddd; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); }

#info-auth { margin-left: 30px; color: #7a0; margin-top: -3px; }

.mail-box { display: flex; align-items: start; width: 100vw; }

#validation-feedback { display: flex; flex-direction: column; gap: 5px; width: 200px; }
.valid { background-color: #690; color: #fff; padding: 3px; font-size: 12px; }
.invalid { background-color: #c00; color: #fff; padding: 3px; font-size: 12px; }
.pw-conf { display: flex; gap: 30px; }

.invisible { display: none; }

.banner { width: auto; background-color: yellow; color: black; text-align: center; padding: 10px; z-index: 99999999; }

a, a:link, a:visited, a:active { color: #333; text-decoration: none; }
a:hover { color: #000;}
a img { border: none; }
input, select, textarea { font-family: Trebuchet MS, Arial, Helvetica, sans-serif; font-size: 100%; margin-bottom: 10px; min-width: 200px; }
input[type="submit"] { min-width: 20px; }
input[type="checkbox"] { min-width: 20px; }
input[type="radio"] { min-width: 20px; }
input[size] { min-width: auto; }
textarea { white-space: pre; }
table { border-spacing: 0px; border-collapse: collapse; }
tr { vertical-align: top; }
th { vertical-align: top; text-align: left; font-weight: normal; background-color: #eee; }
td { vertical-align: top; text-align: left; font-weight: normal; }
dl { padding: 0px; margin: 0px; }

table input, table select, table textarea { min-width: 30px; width: 100%; margin-bottom: 0px; }
table input[type="submit"] { min-width: 20px; width: auto; }
table input[type="checkbox"] { min-width: 20px; width: auto; }
table input[type="radio"] { min-width: 20px; width: auto; }
table th { padding: 5px; min-width: 50px; }
table td { padding: 5px; }

form { padding: 0px; margin: 0px; }
fieldset { border: none; border-top: 2px solid #999; margin-bottom: 30px; padding-top: 12px; }
legend { color: #999; padding: 0 0.2em; }

pre { line-height: 1em; padding: 8px; background-color: #eee; }

.error { padding: 20px; padding-left: 64px; background-color: #b00; color: #fff; font-weight: bold; }
.success { padding: 20px; padding-left: 64px; background-color: #7a0; color: #fff; font-weight: bold; }
.success a { color: #fff; }

.no { text-decoration: line-through; color: #999; }
.red { color: #c00; }
.orange { color: #f90; }
.green { color: #690; }
.blue { color: #009; }
.grey,
.gray { color: #999; }

.red a, .orange a, .green a, .blue a, .grey a, .gray a { color: #fff; }

tr.red, tr.red:hover { background-color: #c00; color: #fff; }
tr.orange, tr.orange:hover { background-color: #f90; color: #fff; }
tr.green, tr.green:hover { background-color: #690; color: #fff; }
tr.grey, tr.gray, tr.grey:hover, tr.gray:hover { background-color: #999; color: #fff; }

.preview.red { color: #c00; background-color: #c00; }
.preview.orange { color: #f90; background-color: #f90; }
.preview.green { color: #690; background-color: #690; }
.preview.grey, .preview.gray { color: #999; background-color: #999; }

/* menu */

#menu { position: fixed; left: 0px; top: 0px; bottom: 0px; width: 280px; padding-bottom: 80px; z-index: 10099; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; background-color: #222; color: #fff; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.5); }
#menu a { display: block; color: #fff; height: 50px; line-height: 50px; padding-left: 0px; border-left: 5px solid #222; background-position: 13px center; background-repeat: no-repeat; background-size: 24px; transition: all 0.5s; }
#menu a:hover { border-left: 5px solid #444; background-color: #333; transition: all 0.5s; }
#menu a.selected { border-left: 5px solid #9c0; transition: all 0.5s; }

#menuLogo { position: fixed; left: 0px; bottom: 0px; width: 250px; height: 80px; background-color: #222; background-image: url(/_images/logo.png); background-position: bottom center; background-repeat: no-repeat; background-size: 200px; }

.menuText { line-height: 50px; }

#menu hr { border: none; border-top: 1px solid #444; margin: 0; padding: 0; margin-top: 5px; margin-bottom: 5px; color: #fff; }

#staticData { padding-bottom: 40px; }
#staticData a { padding-left: 34px; }

#systemData { padding-bottom: 40px; }
#systemData a { padding-left: 34px; }

#migrationData { padding-bottom: 40px; }
#migrationData a { padding-left: 34px; }

#devData { padding-bottom: 40px; }
#devData a { padding-left: 34px; }

/* login dialog (before language switch) */

.noLine { border: none; }

.labelUsername { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; }
.labelPassword { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; }
.labelQR { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; }
.labelToken { display: inline-block; position:relative; top:6px; height: 24px; line-height:24px; width: 40px; }

.iframe-container { position: relative; }
.iframe-container::before { content: ""; position: absolute; left: 6px; top: 6px; width: 297px; height: 6px; background: linear-gradient(90deg, #ddd 0%, #9c0 50%, #ddd 100%); background-size: 200% 100%; animation: iframeLoading 1.2s linear infinite; }
/* iframe fertig geladen (Endzustand nach den Server-Redirects, auch bei Timeout) -> Laufbalken ausblenden. */
.iframe-container.ccLoaded::before { display: none; }
@keyframes iframeLoading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* Ladebalken der Status-Detailseite: das Grundgeruest wird sofort ausgegeben, die schweren Snapshot-/Vorschaudaten streamen nach. */
.statusLoading { position: relative; height: 6px; margin: 4px 0 12px; border-radius: 3px; background: linear-gradient(90deg, #ddd 0%, #9c0 50%, #ddd 100%); background-size: 200% 100%; animation: iframeLoading 1.2s linear infinite; }

/* ---- Massenverarbeitung / Fernsteuerung: je Geraet eine Statuszeile mit Countdown ----
   Loest die iframe-Laufbalken-Loesung (.iframe-container oben) ab. Wird von
   _js/device-batch.js befuellt. Farben wie im Rest des CCs (#690 gruen, #c00 rot, #9c0 Akzent). */
.ccBatchList { margin: 0 0 20px; }
.ccBatchRow { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #ddd; }
.ccBatchLabel { flex: 1 1 45%; }
.ccBatchBarWrap { flex: 1 1 35%; display: flex; align-items: center; gap: 8px; min-height: 12px; }
.ccBatchStatus { flex: 1 1 20%; text-align: right; font-weight: bold; }
.ccBatchTrack { position: relative; flex: 1 1 auto; height: 6px; border-radius: 3px; background: #ddd; overflow: hidden; }
.ccBatchFill { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #9c0; transition: width 0.2s linear; }
.ccBatchCount { flex: 0 0 auto; color: #999; font-size: 90%; min-width: 34px; text-align: right; }
.ccBatchOk .ccBatchStatus { color: #690; }
.ccBatchError .ccBatchStatus { color: #c00; }
.ccBatchSummary { padding: 14px 20px; font-weight: bold; margin-top: 10px; }
.ccBatchSummary.ccBatchRunning { color: #999; }
.ccBatchSummary.ccBatchAllOk { background: #690; color: #fff; }
.ccBatchSummary.ccBatchSomeErr { background: #c00; color: #fff; }
.ccBatchSummary ul { margin: 8px 0 0; padding-left: 20px; font-weight: normal; }

/* ---- Fernsteuerung (remote/): EIN Geraet, EIN Kommando ----
   Nutzt dieselbe Countdown-Laufleiste wie oben (ccBatch.countdownBar in device-batch.js),
   nur ohne Orchestrator/Zusammenfassung. .ccRemoteResult nimmt die Geraete-Antwort auf
   (Netzwerkzustand, Dateiliste, Framebuffer-Bild ...), die frueher das iframe zeigte. */
.ccRemoteHead { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.ccRemoteBarWrap { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-height: 12px; max-width: 297px; }
.ccRemoteStatus { font-weight: bold; }
.ccRemoteStatus.ccRemoteOk { color: #690; }
.ccRemoteStatus.ccRemoteError { color: #c00; }
.ccRemoteStatus.ccRemoteRunning { color: #999; }
.ccRemoteResult { margin-top: 10px; }

/* menu backdrop layer (grau, halbtransparent; bei offenem Kontextmenue) */

#menuLayer { display: none; position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; z-index: 15000; background-color: rgba(0, 0, 0, 0.5); cursor: default; }

/* systemMenu layer */

#systemMenu { display: none; position: fixed; right: 0px; top: 0px; bottom: 0px; width: 250px; z-index: 15001; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; padding-top: 60px; background-color: #ddd; color: #000; -webkit-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: -3px 0px 5px 0px rgba(0, 0, 0, 0.5); }
#systemMenu a { display: block; color: #000; height: 50px; line-height: 50px; padding: 0px 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#systemMenu a:hover { background-color: #eee; }

#systemMenuOpen { position: fixed; right: 0px; top: 0px; width: 120px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; }
#systemMenuOpen .menuText { font-weight: normal; color: #cf0; }
#systemMenuClose { position: fixed; right: 0px; top: 0px; width: 10px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }

#systemMenuAdd { position: fixed; right: 200px; bottom: 0px; width: 10px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }
#systemMenuEdit { position: fixed; right: 0px; bottom: 0px; width: 10px; height: 50px; z-index: 98; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }

/* contextMenu layer */

#contextMenu { display: none; position: fixed; right: 0px; top: 50px; bottom: 0px; width: 250px; z-index: 15001; padding-top: 50px; background-color: #ddd; color: #000; -webkit-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); -moz-box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); box-shadow: -3px -3px 5px 0px rgba(0, 0, 0, 0.5); }
#contextMenu a { display: block; color: #000; height: 50px; line-height: 50px; padding: 0px 20px; }
#contextMenu a:hover { background-color: #eee; }

#contextMenuOpen { position: fixed; right: 0px; top: 50px; width: 120px; height: 50px; z-index: 10098; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; }
#contextMenuOpen .menuText { font-weight: normal; color: #cf0; }
#contextMenuClose { position: fixed; right: 0px; top: 50px; width: 10px; height: 50px; z-index: 10098; background-color: transparent; background-position: right center; background-repeat: no-repeat; background-size: 50px; padding: 0; }

/* content */

#system { position: fixed; left: 280px; top: 0px; right: 0px; height: 50px; line-height: 50px; z-index: 10094; background-color: #7a0; color: #fff; padding: 0px 20px; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#title { position: fixed; left: 280px; top: 50px; right: 0px; height: 50px; line-height: 50px; z-index: 10093; background-color: #8b0; background-image: linear-gradient(90deg, #7a0 0%, #7a0 40%, #8b0 100%); color: #fff; padding: 0px 20px; font-weight: bold; -webkit-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35); -moz-box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35); box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.35); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Breadcrumb-Prefix in der Titelleiste (menu.js baut ihn aus dem aktiven Menuepunkt): Gruppentitel etwas
   gedaempft + Material-Chevron, damit der eigentliche Seitentitel (fett/weiss) dominiert. */
#title .crumbGroup { font-weight: normal; color: rgba(255, 255, 255, 0.75); }
#title .crumbSep::before { content: "\e5cc"; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 22px; vertical-align: middle; color: rgba(255, 255, 255, 0.75); margin: 0 4px; }
#buttons { position: fixed; left: 280px; top: 100px; right: 0px; height: 50px; z-index: 10092; text-align: right; background-color: #ddd; -webkit-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); box-shadow: 3px 0px 5px 0px rgba(0, 0, 0, 0.75); }
button, #buttons a { display: inline-block; box-sizing: border-box; padding: 0; background-position: 14px 14px; background-repeat: no-repeat; background-size: 24px; line-height: 50px; height: 50px; width: 50px; text-align: center; border: none; background-color: #ddd; transition: background-color 0.3s; }
button:hover, #buttons a:hover { background-color: #ccc; cursor: pointer; }
button:disabled, #buttons a:disabled { background-color: #eee; cursor: pointer; }
button.down, #buttons a.down { background-color: #aaa; cursor: pointer; }

.buttonCancel { float: left; }
.buttonOK { float: right; margin-left: 30px; }
.buttonDelete { margin-left: 30px; }
.buttonBack { float: left; }

button .buttonInline, .buttonInline { display: inline-block; background-color: #ccc; color: #333; border: none; width: auto; height: auto; padding: 0px 20px; }

content { padding: 0px; margin: 0px; z-index: 96; }

.systemHeader h1, .systemHeader h2 { margin: 0px; margin-bottom: 10px; cursor: pointer; }
.systemHeaderDetails { display: none; margin-bottom: 20px; }
.systemHeaderDashboard { width: 99%; }
.systemHeaderDashboard svg { max-width: 96%; }

/* lists */

.valueList { width: 100%; }
.valueList tr:hover { background-color: #eee; }
.valueList th { background-color: #ddd; padding: 4px 10px; font-weight: bold; }
.valueList td { border-bottom: 1px solid #ddd; padding: 4px 10px; vertical-align: top; }

.inlineButtonRemove { height: 24px; line-height: 24px; min-width: 40px; width: 40px; text-align: center; }
.inlineButtonAdd { height: 24px; line-height: 24px; min-width: 40px; width: 40px; text-align: center; }
.inlineButtonUpload { height: 24px; line-height: 24px; min-width: 40px; width: auto; text-align: center; }

.previewList { padding: 0px; padding-bottom: 30px; display: flex; flex-flow: row wrap; align-items: stretch; }
.previewList .previewListSeparator { display: block; width: 100%; font-weight: bold; color: #9c0; padding: 6px 20px; padding-top: 30px; border-bottom: 1px solid #ccc; }
.preview { display: inline-block; box-sizing: border-box; width: 250px; min-height: 250px; background-color: #fff; border: 1px solid #ccc; margin-left: 20px; margin-top: 20px; padding: 6px; transition: all 0.5s; }
.preview .previewTitle { display: block; background-color: #666; color: #fff; line-height: 1em; padding: 6px; margin: 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview img,
.preview svg,
.preview embed,
.preview object { max-width: 100%; height: auto; margin-top: 6px; }
.preview.zoom:hover { position: relative; transform: scale(1.25); transition: all 0.5s; z-index: 12000; -webkit-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4); -moz-box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4); box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.4); }
.preview a { display: inline-block; box-sizing: border-box; width: 28px; height: 28px; line-height: 28px; text-align: center; padding: 0; margin: 0 1px; }
.preview a:hover { background-color: #eee; }
/* Kachel-Buttons wie die Icon-Links: kompakt 28x28, transparent, Grau NUR bei Hover, gleiche Icongroesse (22px
   wie .linkIcon). Toolbar/Listen bleiben unberuehrt (50x50 mit grauem Grund). */
.preview button { width: 28px; height: 28px; line-height: 28px; margin: 0 1px; background-color: transparent; }
.preview button:hover { background-color: #eee; }
.preview button::before { width: 28px; height: 28px; line-height: 28px; font-size: 22px; color: #000; }

.preview object,
.preview embed { pointer-events: none; display: block; z-index: -1; }

/* Objekt-Bilder-Tab: Kachel-Bildflaeche (dezent grau, damit weisse/transparente Icons sichtbar bleiben) +
   Lade-Balken pro Kachel + Upload-/Drag-UI. 2026-08-19 aus den inline-<style>-Bloecken in objects/edit.php
   (emitImageTab / objTabsScript) hierher zentralisiert. @keyframes iframeLoading steht weiter oben. */
.preview .ccTileImg { position: relative; min-height: 44px; background: none; color: inherit; padding: 0; margin-top: 6px; white-space: normal; overflow: visible; transition: background-color 0.15s; }
/* Beim Hover ein dezentes Grau/Weiss-Schachbrett (wie in Grafikprogrammen) als TRANSPARENZ-Anzeige. Es liegt
   direkt hinter dem <img> (nicht auf dem vollbreiten Div), damit es nur bei echter Transparenz sichtbar wird -
   ein deckendes, schmales Bild verdeckt es vollstaendig. NICHT bei den Fonts (data-sec="files"): deren
   Vorschauen erzeugen wir selbst, sie sind nie weiss/transparent. */
.preview:not([data-sec="files"]):hover .ccTileImg img {
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #bcbcbc 25%, transparent 25%, transparent 75%, #bcbcbc 75%),
		linear-gradient(45deg, #bcbcbc 25%, transparent 25%, transparent 75%, #bcbcbc 75%);
	background-size: 14px 14px;
	background-position: 0 0, 7px 7px;
}
.preview .ccTileImg::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; height: 6px; margin-top: -3px; background: linear-gradient(90deg, #eee 0%, #bbb 50%, #eee 100%); background-size: 200% 100%; animation: iframeLoading 1.2s linear infinite; }
.preview .ccTileImg.ccLoaded::before { display: none; }
.ccDropZone { position: relative; }
.ccDropZone.ccDropOver { outline: 2px dashed #7a0; outline-offset: -6px; background: rgba(119,170,0,0.07); }
.ccDropHint { color: #999; font-size: 12px; font-style: italic; margin: 4px 0; }
.ccUploadCard { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px dashed #bbb; border-radius: 4px; color: #999; cursor: pointer; text-align: center; padding: 8px; box-sizing: border-box; }
.ccUploadCard:hover { border-color: #7a0; color: #7a0; }
.ccUploadCard.ccDropOver { border-color: #7a0; background: rgba(119,170,0,0.07); color: #7a0; }
.ccUploadCard .ccUploadPlus { background: none; color: #bbb; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 46px; line-height: 1; }
.ccUploadCard:hover .ccUploadPlus { color: #7a0; }
.ccUploadText { font-size: 12px; font-style: italic; margin-top: 6px; }
.objRow[draggable="true"] { cursor: grab; }
.objRow.objDragging { opacity: .4; }
.objRow.objDropBefore td { box-shadow: inset 0 2px 0 0 #7a0; }
.objRow.objDropAfter td { box-shadow: inset 0 -2px 0 0 #7a0; }

.valueList td .field { width: 100%; min-width: 120px; border-bottom: none; }
.valueList tr:hover .field { background-color: #fff; }

.flexList { display: flex; flex-flow: row wrap; align-items: flex-start; }
.flex { display: inline-block; width: auto; align-self: flex-start; }
.comment { padding: 10px; margin: 20px; background-color: #f7f7f7; }

.list { width: 100%; }

.iconCol { width: 24px; }

.listSeparator .keyCol { font-weight: bold; color: #9c0; padding: 6px 20px; padding-top: 30px; }
.listSeparator .listCol { color: #9c0; padding: 6px 20px; padding-top: 30px; }

.listHeader { color: #aaa; }
.listHeader .keyCol { font-weight: bold; border-bottom: 1px solid #ccc; padding: 6px 20px; padding-top: 30px; }
.listHeader .listCol { border-bottom: 1px solid #ccc; padding: 6px 20px; padding-top: 30px; }

.listItem { z-index: 33; cursor: pointer; }
.listItem .keyCol { font-weight: bold; padding: 0px 20px; border-bottom: 1px solid #ccc; height: 50px; line-height: 50px; }
.listItem .listCol { padding: 0px 20px; border-bottom: 1px solid #ccc; height: 50px; line-height: 50px; }
.listItem .linkCol { width: 40px; }
.listItem:hover { background-color: #eee; }
.listItem a { z-index: 44; display: inline-block; padding: 0px 10px; line-height: 50px; }
.listItem a:hover { background-color: #ddd; }
/* Log-Betrachter: XML-Spalte zeigt nur ein Auge-Icon; das <pre> mit den Log-Daten klappt erst per Klick auf
   (ccLogToggle). Spart die riesige XML-Vorschau in jeder Zeile. Umbruch, damit breite Zeilen in der Zelle bleiben. */
.logToggle { cursor: pointer; }
.logData { display: none; margin: 0; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }

.colorService { background-color: #06c; color: #fff; padding: 4px 14px; }
.colorInactive { background-color: #aaa; color: #fff; padding: 4px 14px; }
.colorSleep { background-color: #555; color: #fff; padding: 4px 14px; }
.colorWarning { background-color: #f90; color: #fff; padding: 4px 14px; }
.colorError { background-color: #b00; color: #fff; padding: 4px 14px; }
.colorOk { background-color: #690; color: #fff; padding: 4px 14px; }


.previewTitle.colorService { background-color: #06c; color: #fff; padding: 6px 8px; }
.previewTitle.colorInactive { background-color: #aaa; color: #fff; padding: 6px 8px; }
.previewTitle.colorSleep { background-color: #555; color: #fff; padding: 6px 8px; }
.previewTitle.colorWarning { background-color: #f90; color: #fff; padding: 6px 8px; }
.previewTitle.colorError { background-color: #b00; color: #fff; padding: 6px 8px; }
.previewTitle.colorOk { background-color: #690; color: #fff; padding: 6px 8px; }


.sleepAssigned { padding: 0px 14px; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 20px; line-height: 1; vertical-align: middle; color: #59c; }

.connectivityGood { padding: 0px 14px; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 20px; line-height: 1; vertical-align: middle; color: #690; }
.connectivityMedium { padding: 0px 14px; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 20px; line-height: 1; vertical-align: middle; color: #f90; }
.connectivityPoor { padding: 0px 14px; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 20px; line-height: 1; vertical-align: middle; color: #b00; }

.objectAssigned { display: inline-block; width: 40px; text-align: center; background-color: transparent; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 20px; line-height: 1; vertical-align: middle; color: #06c; }

.trendAssigned { display: inline-block; width: 40px; text-align: center; background-color: transparent; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 20px; line-height: 1; vertical-align: middle; color: #690; }

/* SuperUser: kleiner Schraubenschluessel direkt hinter einem Eingabefeld -> Entwickler-Doku (Anwendungen/Automatisierung).
   Hover wie die Kachel-Icons: graues Kaestchen, keine Farbaenderung. */
.rowWrench { display: inline-block; box-sizing: border-box; width: 24px; height: 24px; line-height: 24px; text-align: center; vertical-align: middle; margin-left: 6px; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 18px; color: #666; text-decoration: none; }
.rowWrench:hover { background-color: #eee; }

.deleted .keyCol,
.deleted .listCol { text-decoration: line-through; color: #999; }
.inactive .keyCol,
.inactive .listCol { color: #999; }

.hilite { background-color: #efb; }
.blulite { background-color: #def; }

.filterBox { background-color: #eee; border-bottom: 1px solid #ddd; }

.editList { width: 100%; }
.editList tr:hover { background-color:#eee; }

.editListSeparator .keyCol { color: #9c0; padding: 6px 20px; padding-top: 30px; }
.editListSeparator .listCol { color: #9c0; padding: 6px 20px; padding-top: 30px; }

.editListHeader { background-color: #bbb; }
.editListHeader .keyCol { border-bottom: 1px solid #ccc; padding: 0px 20px; }
.editListHeader .listCol { border-bottom: 1px solid #ccc; padding: 0px 20px; }

.editListItem { z-index: 33; }
.editListItem .keyCol { padding: 0px 20px; border-bottom: 1px solid #ccc; }
.editListItem .listCol { padding: 0px 20px; border-bottom: 1px solid #ccc; }
.editListItem .linkCol { width: 40px; }

.grid table { margin: 20px; }
.grid th { background-color: #ccc; padding: 0px 20px; text-align: center; }
.grid td { border-bottom: 1px solid #ccc; padding: 0px 20px; text-align: center; }
.grid tr:hover { background-color: #eee; color: #000; }

.systemHeader { clear: both; background-color: #eee; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; padding: 20px; }

.table { display: table; }
.tr { display: table-row; }
.td { display: table-cell; vertical-align: top; }
.td.label { width: 280px; }

.radio { display: inline-block; width: auto; }
.radio label { width: auto; border: 1px solid #ddd; width: 24px; height: 24px; }
.radio input[type="radio"] { display: none; }
.radio input[type="radio"]:checked + label { background-color: #ddd; }

.alignLeft { text-align: left; }
.alignCenter { text-align: center; }
.alignRight { text-align: right; }

#map { border: 1px solid #ccc; height: 300px; width: 100%; padding: 0; margin: 0; z-index: 12; }
.map a { display: inline-block; padding: 0px 4px; }
.map a:hover { background-color: #eee; }

.image-link img { width: 32px; }

.overviewPlanningPreview { display: inline-block; box-sizing: border-box; float: right; margin: 0 1px; width: 28px; height: 28px; line-height: 26px; text-align: center; border: 1px solid #666; font-size: 13px; }

.checkListSeparator { font-weight: bold; color: #9c0; border-bottom: 1px solid #ccc; margin-top: 30px; }

/* Style the tab — MD3-artige Reiter (Akzent = CC3-Marke #7a0). Eigenes Tab-Band (heller
   Hintergrund + feiner Schatten) und sticky unter der fixen #buttons-Leiste (0-150px),
   damit die Reiter beim Scrollen im umfangreichen Edit-Fenster oben sichtbar bleiben. */
.Tabs { display: flex; gap: 4px; position: sticky; top: 150px; z-index: 9000; margin-top: 28px; padding-left: 20px; background-color: #fff; border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.Tabs a { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px; cursor: pointer; color: #5f5e5a; font-weight: bold; font-size: 16px; background-color: rgba(29, 27, 32, 0.06); border-bottom: 3px solid transparent; transition: all 0.5s; white-space: nowrap; }
.Tabs a:hover { background-color: rgba(29, 27, 32, 0.18); }
.Tabs a.active { color: #000; border-bottom-color: #7a0; background-color: rgba(29, 27, 32, 0.14); }
.Tabs a .tabIcon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; -webkit-font-smoothing: antialiased; }
.TabContainer { display: none; }
.TabContainer.active { display: block; }

.matrix tr:hover { background-color:#ddd; }
.matrix th { background-color: #ddd; border-bottom: 2px solid #fff; padding: 0px; padding-left: 12px; min-width: 50px; vertical-align: middle; }
.matrix td { background-color: #eee; border-bottom: 2px solid #fff; padding: 0px; padding-left: 12px; vertical-align: middle; }
.matrix input,
.matrix select,
.matrix textarea { min-width: 30px; width: 100%; margin-bottom: 0px; }
.matrix input[type="submit"] { min-width: auto; width: auto; }
.matrix button { border-left: 2px solid #fff; width: 52px; }
.matrix th button { background-color: #ccc; }
.matrix th button:hover { background-color: #bbb; }
caption { caption-side: top; color: #999; margin-top: 20px; text-align: left; margin-bottom: 6px; }

/* Anwendungen (.appTemplate) UND Datenanbindungen (.dpRequest): faehrt man ueber den Loeschen-Button des GANZEN
   Blocks, wird der komplette Block eingefaerbt -> sofort sichtbar, dass sich das Loeschen auf den ganzen Block
   bezieht (nicht nur auf einen einzelnen Ausfuehrungszeitpunkt bzw. ein Feld/Filter). Nur der Block-Button
   (direktes Kind: > .alignRight > button), NICHT die Zeilen-Loeschen-Buttons in den inneren Tabellen (die liegen
   tiefer in td.alignRight). Farbe dezent (#f3f3f3), damit der Block nur zart getoent wird und der gehoverte
   Loeschen-Button (#ccc) klar darauf hervorsticht. */
.appTemplate:has(> .alignRight > button.buttonDelete:hover),
.dpRequest:has(> .alignRight > button.buttonDelete:hover) { background-color: #f3f3f3; transition: background-color 0.3s; }

.filterYear { min-width: auto; }
.filterMonth { min-width: auto; }
.filterDay { min-width: auto; }
.dropdown { min-width: auto; }

#version { position: fixed; right: 0px; bottom: 0px; padding: 4px 10px; font-size: 0.6em; background-color: #fff; color: #000; border: 1px solid #999; opacity: 0.5; }

#layer { position: fixed; top:0px; left:0px; bottom:0px; right:0px; z-index:20000; background-color:rgba(0, 0, 0, 0.5); cursor: wait !important; }

/* The Modal (background) */

.modal { display: none; position: fixed; z-index: 20050; padding-top: 250px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); }



.modal-content { margin: auto; display: block; margin-top: -80px; width: auto; height: auto; max-width: 90vw; max-height: 75vh; min-height: 50vh; }

.close { position: absolute; top: 180px; right: 30px; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: none; background-color: transparent; color: #fff; font-family: 'Material Symbols Outlined'; font-weight: normal; font-size: 40px; line-height: 1; cursor: pointer; }

.x { color: #fff; }

.close:hover, .close:focus { color: #3a3b3c; text-decoration: none; cursor: pointer; }

/* Animations */
.modal-content { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; }

@-webkit-keyframes zoom { from { transform: scale(0) } to { transform: scale(1)} }

@keyframes zoom { from { transform: scale(0.1) } to { transform: scale(1) } }

/* --- MEDIA: Desktop ----------------------------------------------------------------- */
@media (min-width: 700px)
{
  html { font-size: 1em; }

  input, select, textarea { min-width: 300px; }

  label { display: inline-block; width: 300px; }

  fieldset { margin: 20px; }
  .content { margin: 20px; }

  .listIcon { background-position: 14px center; background-repeat: no-repeat; background-size: 32px; padding-left: 60px; }

  .preview { width: 250px; }
}

/* --- MEDIA: Smartphones ----------------------------------------------------------------- */
@media (max-width: 700px) 
{
  html { font-size: 1em; }
  body { padding-left: 60px; padding-top: 150px; font-size: 0.8em; }

  label { display: block; }

  fieldset { margin: 20px; }
  .content { margin: 20px; }

  #menu { width: 60px; }
  #menu a { height: 50px; line-height: 50px; width: 50px; padding: 0px; background-position: 13px center; background-repeat: no-repeat; background-size: 24px; }

  #menuLogo { width: 60px; height: 50px; background-color: #222; background-image: url(/_images/favicon.png); background-position: bottom center; background-repeat: no-repeat; background-size: 40px; }

  .menuText { display: none; }

  #systemMenu a { height: 50px; line-height: 50px; }

  #systemMenuOpen { width: 50px; height: 50px; background-position: right center; background-size: 50px; }
  #systemMenuOpen .menuText { display: none; }
  #systemMenuClose { height: 50px; width: 10px; background-position: right center; background-size: 50px; }

  #systemMenuAdd { width: 10px; height: 50px; background-position: 13px center; background-size: 24px; }
  #systemMenuEdit { width: 10px; height: 50px; background-position: 13px center; background-size: 24px; }

  #contextMenu { top: 50px; }
  #contextMenuOpen .menuText { display: none; }
  #contextMenu a { top: 50px; height: 50px; line-height: 50px; }

  #contextMenuOpen { top: 50px; width: 50px; height: 50px; background-position: right center; background-size: 50px; }
  #contextMenuClose { top: 50px; height: 50px; width: 10px; background-position: right center; background-size: 50px; }

  #system { left: 60px; top: 0px; height: 50px; line-height: 50px; }
  #title { left: 60px; top: 50px; height: 50px; line-height: 50px; }
  #buttons { left: 60px; top: 100px; height: 50px; line-height: 50px; }
  button,
  #buttons a { background-position: 13px 13px; background-size: 24px; line-height: 50px; height: 50px; width: 50px; }

  .iframe-container::before { width: 199px; height: 3px; }

  .listCol { display: none; width: 0; height: 0; }
  .listSeparator .listCol { display: none; width: 0; height: 0; }
  .listHeader .listCol { display: none; width: 0; height: 0; }
  .listItem .linkCol { width: 20px; }

  .objectAssigned { width: 20px; }

  .listIcon { background-position: left center; background-repeat: no-repeat; background-size: 32px; padding-left: 48px; }

  .preview { width: 250px; }

  .table { display: block; }
  .tr { display: block; }
  .td { display: block; }

  .image-link img { width: 32px; }
}

/* ============================================================================
   Material Symbols (self-hosted) — ersetzt die bisherigen PNG-Icons.
   HTML/Klassen unveraendert; Glyphen via ::before, faerben sich per currentColor.
   ============================================================================ */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(/_fonts/material-symbols.woff2?v=20260828) format('woff2');
}

/* Gemeinsame Glyph-Basis */
.iconOverview::before,.iconOpen::before,.iconClose::before,.iconDataProviders::before,.iconApps::before,.iconCities::before,.iconStations::before,.iconStops::before,.iconTimeTables::before,.iconDeviceTypes::before,.iconDevices::before,.iconTtsLibrary::before,.iconObjectGroups::before,.iconObjects::before,.iconSchedule::before,.iconRemote::before,.iconBatch::before,.iconReports::before,.iconTrends::before,.iconLogs::before,.iconSystems::before,.iconUserGroups::before,.iconUsers::before,.iconSql::before,.iconLanguages::before,.iconSelf::before,.iconLogout::before,
.iconSystemMenuOpen::before,.iconSystemMenuClose::before,.iconSystemMenuAdd::before,.iconSystemMenuEdit::before,.iconContextMenuOpen::before,.iconContextMenuClose::before,
.buttonCancel::before,.buttonOK::before,.buttonNew::before,.buttonDelete::before,.buttonCopy::before,.buttonEdit::before,.buttonBack::before,.buttonRefresh::before,.buttonLast::before,.buttonNext::before,
.labelUsername::before,.labelPassword::before,.labelToken::before,
.error::before,.success::before {
  font-family: 'Material Symbols Outlined';
  font-weight: normal; font-style: normal;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1; letter-spacing: normal; white-space: nowrap; direction: ltr;
}

/* --- Hauptmenue: Glyph inline im .menuIcon-Span (feste 50px-Spalte, rueckt im Baum mit) --- */
.menuIcon { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; vertical-align: top; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; color: #fff; -webkit-font-smoothing: antialiased; }

/* --- System-/Kontextmenue-Umschalter: ⋮/X in einem 50x50-Feld rechts, Text links daneben --- */
.toggleIcon { display: inline-block; width: 50px; height: 50px; line-height: 50px; text-align: center; vertical-align: top; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; color: #fff; }
#systemMenuOpen, #contextMenuOpen { text-align: right; }
#systemMenu #systemMenuClose, #contextMenu #contextMenuClose { box-sizing: border-box; width: 50px; height: 50px; padding: 0; text-align: center; }
#systemMenuClose .toggleIcon, #contextMenuClose .toggleIcon { color: #000; }
/* Drei-Punkte-Umschalter (Mandant/Ansicht) in derselben hellgruenen Farbe wie der Menutext (#cf0). */
#systemMenuOpen .toggleIcon, #contextMenuOpen .toggleIcon { color: #cf0; }
.iconSystemMenuOpen::before,.iconSystemMenuClose::before,.iconSystemMenuAdd::before,.iconSystemMenuEdit::before,.iconContextMenuOpen::before,.iconContextMenuClose::before { font-size: 20px; vertical-align: middle; }
.iconSystemMenuAdd::before  { content: "\e145"; }
.iconSystemMenuEdit::before { content: "\f097"; }

/* --- Action-Buttons (50x50): Glyph via ::before (klassenbasiert, app-weit inkl. JS-generierter Buttons) --- */
.buttonCancel::before,.buttonOK::before,.buttonNew::before,.buttonDelete::before,.buttonCopy::before,.buttonEdit::before,.buttonBack::before,.buttonRefresh::before,.buttonLast::before,.buttonNext::before {
	display: block; width: 50px; height: 50px; line-height: 50px; text-align: center; font-size: 24px; color: #333;
	font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased;
}
.buttonCancel::before  { content: "\e5cd"; }
.buttonOK::before      { content: "\e668"; }
.buttonNew::before     { content: "\e145"; }
.buttonDelete::before  { content: "\e92e"; }
.buttonCopy::before    { content: "\e14d"; }
.buttonEdit::before    { content: "\f097"; }
.buttonBack::before    { content: "\e5c4"; }
.buttonRefresh::before { content: "\e5d5"; }
.buttonLast::before    { content: "\e5cb"; }
.buttonNext::before    { content: "\e5cc"; }

/* --- Statusicons: Glyph aus dem Font (via statusIconGlyph()), Vordergrundfarbe aus colorXxx
   (weiss; leerer Status -> geerbt), Hintergrund je Status. Liste = quadratisches 32px-Badge,
   Vorschau = rechtsbuendiges Suffix auf der Titelleiste. Verhalten wie gewohnt (bg + fg). --- */
.statusIcon { display: inline-block; padding: 4px; line-height: 1; text-align: center; vertical-align: middle; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 20px; }
.preview .previewTitle { position: relative; padding-right: 34px; }
.statusSuffix { position: absolute; right: 4px; top: 0px; bottom: 0px; display: flex; align-items: center; font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; line-height: 1; }

/* --- Link-Icons in Listen/Vorschau/Reports (Editlink, Remote, Info, PDF, CSV) --- */
.linkIcon { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 22px; line-height: 1; vertical-align: middle; color: #000; }
.linkIcon.pdf { color: #b00; }
.linkIcon.csv { color: #690; }

/* --- Login-Feld-Icons (Glyph als Entity im <label>) --- */
.labelUsername, .labelPassword, .labelToken { font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal; font-size: 24px; color: #888; }

/* --- Dialog-Icons (Fehler/Erfolg) --- */
.error, .success { position: relative; }
.error::before, .success::before { position: absolute; left: 16px; top: 16px; font-size: 32px; }
.error::before   { content: "\f8b6"; color: #fff; }
.success::before { content: "\f0be"; color: #fff; }