/* Gemeinsame Prozesswertdarstellung im geschützten Portal. Veraltete Binärwerte
   besitzen bewusst keine grüne Lampe und werden zusätzlich als unbekannt beschriftet. */
.process-signal-section { margin: 2rem 0; }
.process-signal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.process-signal-card { background: #fff; border: 1px solid #dfe6f0; border-radius: 1rem; box-shadow: 0 12px 30px rgba(11,21,40,.06); padding: 1.1rem; }
.process-signal-card.is-stale { border-style: dashed; opacity: .72; }
.process-signal-label { color: #52627a; display: block; font-size: .85rem; font-weight: 800; margin-bottom: .45rem; }
.process-signal-number { align-items: baseline; color: #0b1528; display: flex; flex-wrap: wrap; font-size: clamp(1.8rem, 4vw, 2.8rem); gap: .25em; line-height: 1.1; }
.process-signal-number.is-negative > span { color: #c81e2a; }
.process-signal-number small { color: #607089; font-size: .9rem; }
.process-signal-time { color: #718096; display: block; font-size: .72rem; margin-top: .7rem; }
.binary-indicator { align-items: center; display: flex; gap: .75rem; font-size: 1.2rem; }
.binary-indicator i { background: #9aa5b5; border: .2rem solid #fff; border-radius: 50%; box-shadow: 0 0 0 .2rem #d7dee8; height: 1.2rem; width: 1.2rem; }
.binary-indicator i.active { background: #19b96b; box-shadow: 0 0 0 .2rem #b8ecd2, 0 0 1rem rgba(25,185,107,.45); }
.signal-chart-toggle { margin-top: .8rem; }
.signal-chart { border-top: 1px solid #e4e9f0; margin-top: 1rem; padding-top: 1rem; }
/* Vollbild innerhalb des Browserfensters, inklusive dynamischer Mobilhöhe.
   Nur der Inhalt scrollt bei kleinen Höhen; Schließen bleibt immer erreichbar. */
html.signal-chart-modal-open { overflow: hidden; }
.signal-chart-dialog { background: #fff; border: 0; color: #0b1528; inset: 0; margin: 0; padding: 0; width: 100%; max-width: none; height: 100vh; height: 100dvh; max-height: none; }
.signal-chart-dialog[open] { display: flex; flex-direction: column; }
.signal-chart-dialog::backdrop { background: rgba(11,21,40,.6); }
.signal-chart-dialog-header { align-items: center; background: #f8fafc; border-bottom: 1px solid #dfe6f0; display: flex; flex: 0 0 auto; gap: 1rem; justify-content: space-between; padding: .75rem max(1rem, env(safe-area-inset-right)) .75rem max(1rem, env(safe-area-inset-left)); }
.signal-chart-dialog-header h2 { font-size: 1.15rem; margin: 0; overflow-wrap: anywhere; }
.signal-chart-dialog-header button { flex-shrink: 0; min-height: 44px; }
.signal-chart-dialog > .signal-chart { border: 0; display: flex; flex: 1; flex-direction: column; margin: 0; min-height: 0; overflow: auto; padding: .8rem max(1rem, env(safe-area-inset-right)) max(.8rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.signal-chart-dialog .signal-chart-controls { flex: 0 0 auto; }
.signal-chart-dialog .signal-chart-output { flex: 1 0 320px; min-width: 0; }
.signal-chart-dialog .signal-chart-output svg { display: block; }
.signal-chart-controls { align-items: end; display: flex; flex-wrap: wrap; gap: .6rem; }
.signal-chart-controls label { color: #52627a; display: flex; flex-direction: column; font-size: .72rem; font-weight: 700; }
.signal-chart-controls input { border: 1px solid #cbd5e1; border-radius: .4rem; max-width: 9rem; padding: .35rem; }
.signal-chart-zoom { align-items: center; display: inline-flex; gap: .35rem; }
.signal-chart-zoom output { color: #334155; font-size: .78rem; font-weight: 800; min-width: 2.2rem; text-align: center; }
.signal-chart-zoom button { font-size: 1.05rem; font-weight: 900; min-width: 2.2rem; }
.signal-chart-output svg { background: #f8fafc; border-radius: .6rem; margin-top: .8rem; width: 100%; }
.signal-chart-grid { stroke: #dce3eb; stroke-width: 1; }
.signal-chart-axis { stroke: #64748b; stroke-width: 1.5; }
.signal-chart-tick { fill: #52627a; font-size: 15px; }
.signal-chart-tick.is-negative { fill: #c81e2a; }
.signal-chart-axis-title { fill: #334155; font-size: 16px; font-weight: 800; }
.signal-chart-band { fill: rgba(231,185,40,.2); stroke: none; }
.signal-chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.signal-chart-gap { fill: rgba(200,30,42,.09); stroke: rgba(200,30,42,.45); stroke-dasharray: 4 4; stroke-width: 1; }
.signal-chart-gap-label { fill: #a11722; font-size: 12px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 3px; }
.signal-chart-quarter-line { stroke: #59677a; stroke-dasharray: 3 5; stroke-width: 1.25; }
.signal-chart-quarter-point { fill: #fff; stroke-width: 3; }
.signal-chart-quarter-label { fill: #25334a; font-size: 13px; font-weight: 900; paint-order: stroke; stroke: #f8fafc; stroke-width: 4px; }
.signal-chart-reference-line { stroke-width: 2.5; }
.signal-chart-reference-label { font-size: 14px; font-weight: 800; paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.signal-chart-legend { color: #607089; font-size: .75rem; margin: .35rem 0 0; }
.signal-chart-legend-line { border-top-width: 3px; display: inline-block; min-width: 1.8rem; transform: translateY(-.18rem); }
.signal-chart-legend .is-negative { color: #c81e2a; font-weight: 800; }
/* Die Messwertkarte liegt im Dialog, folgt aber Fensterkoordinaten. Sie fängt
   keine Mausereignisse ab und verändert weder Diagrammgröße noch Scrollbereich. */
.signal-chart-tooltip { background: #fff; border: 1px solid #cbd5e1; border-radius: .65rem; box-shadow: 0 5px 22px rgba(11,21,40,.2); color: #0b1528; display: grid; gap: .2rem; max-width: min(24rem, calc(100vw - 16px)); overflow-wrap: anywhere; padding: .65rem .8rem; pointer-events: none; position: fixed; z-index: 5; }
.signal-chart-tooltip[hidden], .signal-chart-cursor[hidden] { display: none; }
.signal-chart-tooltip-label { color: #52627a; font-size: .75rem; }
.signal-chart-tooltip-value { font-size: 1rem; }
.signal-chart-tooltip-value.is-negative { color: #c81e2a; }
.signal-chart-tooltip-time { color: #52627a; font-size: .78rem; }
.signal-chart-cursor { pointer-events: none; }
.signal-chart-cursor-guide { stroke: #64748b; stroke-dasharray: 4 4; stroke-width: 1; }
.signal-chart-cursor-point { fill: #fff; stroke-width: 3; }
.signal-admin-list { display: grid; gap: 1rem; }
.signal-admin-heading { align-items: center; display: flex; justify-content: space-between; gap: 1rem; }
.signal-admin-heading h2 { overflow-wrap: anywhere; }
.signal-received { color: #607089; font-size: .8rem; }
.signal-admin-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .8rem; }
.signal-admin-checks { display: flex; flex-direction: column; gap: .55rem; justify-content: center; }
.signal-admin-form > button { align-self: end; }
.signal-admin-wide { grid-column: 1 / -1; }
.control-admin-title { margin-top: 2.25rem; }
.control-admin-list { margin-top: 1rem; }
.control-delete-form { margin-top: .85rem; }
.process-control-section { margin: 2rem 0; }
.process-control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1rem; }
.process-control-card { background: #fff; border: 1px solid #dfe6f0; border-left: .3rem solid #e7b928; border-radius: 1rem; box-shadow: 0 12px 30px rgba(11,21,40,.06); padding: 1.1rem; }
.process-control-card.is-disabled { border-left-color: #94a3b8; }
.process-control-card p { color: #607089; font-size: .85rem; margin: .25rem 0 .8rem; }
.control-feedback { align-items: center; background: #f5f8fc; border-radius: .7rem; display: flex; justify-content: space-between; margin: .65rem 0; padding: .65rem .75rem; }
.control-feedback span { color: #607089; font-size: .75rem; }
.control-button-row { display: flex; gap: .55rem; }
.control-button-row form { flex: 1 1 0; }
.control-button-row button, .process-control-card > form button { width: 100%; }
.control-button-row button.is-selected { box-shadow: 0 0 0 .2rem rgba(15,23,42,.18), inset 0 0 0 2px #fff; }
.control-pulse-button { align-items:center; display:flex; gap:.65rem; justify-content:center; }
.control-pulse-button.has-feedback { justify-content:space-between; }
.control-pulse-button.feedback-active { background:#19b96b; border-color:#19b96b; color:#fff; box-shadow:0 0 .9rem rgba(25,185,107,.28); }
.control-pulse-button.feedback-stale { background:#d8dee7; border-color:#cbd5e1; color:#52627a; }
.control-pulse-feedback { align-items:center; background:rgba(255,255,255,.76); border-radius:999px; color:#334155; display:inline-flex; flex:0 0 auto; font-size:.7rem; gap:.35rem; padding:.3rem .55rem; }
.control-pulse-feedback i { background:#94a3b8; border-radius:50%; height:.58rem; width:.58rem; }
.control-pulse-button.feedback-active .control-pulse-feedback i { background:#19b96b; box-shadow:0 0 .5rem rgba(25,185,107,.75); }
.control-pulse-button.feedback-stale .control-pulse-feedback i { background:#64748b; }

/* Persönliche Achseneinstellung über dem Diagramm, auch auf schmalen Displays. */
.signal-scale-dialog { width: min(480px, 94vw); border: 1px solid #94a3b8; border-radius: 12px; padding: 24px; }
.signal-scale-dialog::backdrop { background: rgb(0 0 0 / 40%); }
.signal-scale-dialog label { display: block; margin: 12px 0; }
.signal-scale-dialog input { display: block; width: 100%; padding: 8px; }
.scale-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.scale-error { color: #b91c1c; }

/* Der Exportdialog liegt über dem Vollbilddiagramm und startet die Übertragung
   erst nach Bestätigung eines gültigen Berliner Zeitraums. */
.signal-export-dialog { background: #fff; border: 1px solid #94a3b8; border-radius: 12px; color: #0b1528; padding: 24px; width: min(480px, 94vw); }
.signal-export-dialog::backdrop { background: rgb(0 0 0 / 48%); }
.signal-export-dialog h2 { font-size: 1.2rem; }
.signal-export-dialog label { color: #334155; display: block; font-size: .82rem; font-weight: 800; margin: 12px 0; }
.signal-export-dialog input { border: 1px solid #94a3b8; border-radius: .45rem; box-sizing: border-box; color: #0b1528; display: block; margin-top: .3rem; min-height: 44px; padding: 8px; width: 100%; }