/* DLB Mining Controller — industrielles Steuerpult-Theme.
   Standard ist das HELLE Schema (:root). Das dunkle Schema wird über
   html[data-theme="dark"] aktiviert — umschaltbar über die Topbar; die Wahl
   wird unter dem localStorage-Schlüssel "dlb.theme" gespeichert. Alle Flächen
   nutzen ausschließlich CSS-Variablen, sodass der Wechsel ohne Neuladen wirkt. */
:root{
  --bg:#f3f5f8; --panel:#ffffff; --panel-2:#eef1f6; --line:#d7dee7;
  --txt:#1b2430; --muted:#5b6b7d; --accent:#0f9d76; --accent-dim:#0c8663;
  --warn:#b0791b; --bad:#cf4a41; --good:#0f9d76; --info:#2f74c0;
  --strong:#0b1119;
  --login-veil:radial-gradient(circle at 50% 28%,rgba(226,232,240,.96),rgba(243,245,248,.99));
  --radius:8px; --mono:"JetBrains Mono","SFMono-Regular",Consolas,monospace;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
html[data-theme="dark"]{
  --bg:#0e1116; --panel:#161b22; --panel-2:#1c232d; --line:#2a3340;
  --txt:#d7dee8; --muted:#7d8b9c; --accent:#3ad6a0; --accent-dim:#1f7a5c;
  --warn:#e6b14c; --bad:#e0584f; --good:#3ad6a0; --info:#4c9be6;
  --strong:#e7edf5;
  --login-veil:radial-gradient(circle at 50% 28%,rgba(28,35,45,.97),rgba(14,17,22,.99));
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--sans);font-size:14px}
#app{display:flex;min-height:100vh}
/* Material Icons – lokal eingebunden (kein externer Google-Fonts-Abruf).
   Schriftdatei: static/fonts/material-icons.woff2 (Filled-Variante). */
@font-face{
  font-family:"Material Icons";
  font-style:normal;
  font-weight:400;
  font-display:block;
  src:url("../fonts/material-icons.woff2") format("woff2");
}
.material-icons{
  font-family:"Material Icons";
  font-weight:normal;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;
  display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;font-feature-settings:"liga";
  font-size:20px;vertical-align:middle}

/* Sidebar */
.sidebar{width:236px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{display:flex;gap:12px;align-items:center;padding:18px 18px;border-bottom:1px solid var(--line)}
.brand .material-icons{color:var(--accent);font-size:30px}
.brand strong{display:block;font-size:16px;letter-spacing:1px}
.brand small{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:1.5px}
.brand .brand-version{display:block;margin-top:2px;color:var(--accent);font-size:10px;text-transform:none;letter-spacing:.5px;font-family:var(--mono)}
nav{flex:1;padding:10px 0;overflow:auto}
.nav-item{display:flex;gap:12px;align-items:center;padding:11px 18px;color:var(--muted);
  text-decoration:none;border-left:3px solid transparent;font-size:13.5px}
.nav-item:hover{color:var(--txt);background:var(--panel-2)}
.nav-item.active{color:var(--accent);border-left-color:var(--accent);background:var(--panel-2)}
.sysstate{padding:14px 18px;border-top:1px solid var(--line);font-size:12px;color:var(--muted);
  display:flex;align-items:center;gap:8px}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
.dot.on{background:var(--good);box-shadow:0 0 8px var(--good)}
.dot.off{background:var(--bad)}
/* Sidebar-Systemstatus: EIN Dot (Farbe je Statuscode) + Popover mit Details */
.sysstate{position:relative}
.sysstate-btn{background:none;border:none;margin:0;padding:5px;cursor:pointer;
  display:inline-flex;align-items:center;border-radius:6px}
.sysstate-btn:hover{background:var(--panel-2)}
.dot.sys-ok{background:var(--good);box-shadow:0 0 8px var(--good)}
.dot.sys-warn{background:var(--warn);box-shadow:0 0 8px var(--warn)}
.dot.sys-bad{background:var(--bad);box-shadow:0 0 8px var(--bad)}
.dot.sys-info{background:var(--info);box-shadow:0 0 8px var(--info)}
.dot.sys-idle{background:var(--muted)}
.sysstate-pop{position:absolute;left:12px;bottom:46px;z-index:60;width:212px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);padding:10px 12px;font-size:12px;color:var(--txt)}
.sysstate-pop.hidden{display:none}
.sys-pop-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px}
.sys-pop-head .status-code{margin-left:auto;font-family:var(--mono);padding:1px 6px;
  border-radius:4px;border:1px solid var(--line)}
.sys-pop-head .status-code.ok{color:var(--good);border-color:var(--accent-dim)}
.sys-pop-head .status-code.warn{color:var(--warn);border-color:var(--warn)}
.sys-pop-row{display:flex;justify-content:space-between;align-items:center;padding:3px 0;color:var(--muted)}
.sys-pop-row .v{font-family:var(--mono);color:var(--txt)}

/* Content */
.content{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;justify-content:space-between;align-items:center;
  padding:16px 26px;border-bottom:1px solid var(--line);background:var(--panel)}
.topbar h1{margin:0;font-size:18px;font-weight:600;letter-spacing:.3px}
.topbar-actions{display:flex;gap:14px;align-items:center}
.btn-icon{background:none;border:1px solid var(--line);color:var(--muted);
  border-radius:var(--radius);padding:6px 8px;cursor:pointer}
.btn-icon:hover{color:var(--txt);border-color:var(--accent)}
/* Ladeindikator beim Tab-Wechsel */
.view-loading{display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:260px;color:var(--muted);font-size:14px}
.spinner{width:22px;height:22px;border:2.5px solid var(--line);
  border-top-color:var(--accent);border-radius:50%;animation:dlb-spin .7s linear infinite}
@keyframes dlb-spin{to{transform:rotate(360deg)}}
#view{padding:26px;overflow:auto}

/* Cards / grid */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h3{margin:0 0 4px;font-size:14px}
.card .sub{color:var(--muted);font-size:12px;margin-bottom:12px}
/* Einheitlicher Kartenkopf: Titel links, Badge/Aktionen rechts. Ersetzt die
   zuvor in jeder Geräte-Karte wiederholten Inline-Styles. */
.card-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.card-head h3{margin:0}
.card-head .row-actions{flex:0 0 auto}
.card-head .head-right{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto}
.mode-info{font-size:18px;color:var(--muted);cursor:help}
.mode-info:hover{color:var(--accent)}
.lbl-tip{font-size:15px;vertical-align:-3px}
/* KPI-Kachel: einheitliches Layout für Dashboard/Phasen (Titel, sub, große Zahl) */
.tile .kpi{margin-top:2px}
.kpi{font-family:var(--mono);font-size:26px;font-weight:600}
.kpi small{font-size:13px;color:var(--muted);font-weight:400;margin-left:4px}

/* Dashboard-Kachel-Historie (Sparklines) + Range-Umschalter */
.spark{margin-top:10px;height:28px;display:block}
.spark .spark-svg{width:100%;height:28px;display:block;overflow:visible}
.spark .spark-empty{color:var(--muted);font-size:11px;line-height:28px}
/* Kombinierte Leistungs-Sparkline (Gemessen + Ziel + Differenzband) */
.spark-power{height:auto;min-height:65px}
.spark-power .spark-svg{height:42px}
.spark-power .spark-empty{line-height:65px}
.pw-legend{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:6px;font-size:11px;color:var(--muted)}
.pw-leg{display:inline-flex;align-items:center;gap:5px}
.pw-swatch{width:14px;height:3px;border-radius:2px;display:inline-block}
.pw-swatch-dash{background:repeating-linear-gradient(90deg,var(--info) 0 3px,transparent 3px 5px)}
.pw-delta{margin-left:auto;font-family:var(--mono);color:var(--txt);font-weight:600}
.dash-range{display:flex;align-items:center;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.dash-range .dash-range-lbl{color:var(--muted);font-size:12px;margin-right:2px}
.dash-range .rbtn{background:var(--panel);border:1px solid var(--line);color:var(--muted);
  border-radius:var(--radius);padding:4px 12px;font-size:12px;font-family:var(--mono);cursor:pointer;
  transition:color .12s,border-color .12s,background .12s}
.dash-range .rbtn:hover{color:var(--txt);border-color:var(--accent)}
.dash-range .rbtn.active{color:var(--accent);border-color:var(--accent);background:var(--panel-2)}

/* Anklickbare Kennzahl-Kachel (öffnet Verlaufs-Plot) */
.tile-click{cursor:pointer;transition:border-color .12s,transform .06s}
.tile-click:hover{border-color:var(--accent)}
.tile-click:active{transform:translateY(1px)}

/* Kombinierte Kachel „Leistung": links gemessen, rechts Ziel. Die beiden
   Hälften sind je einzeln anklickbar (eigener Verlaufs-Plot); der Trenner
   liegt mittig. Auf schmalen Viewports untereinander statt nebeneinander. */
.power-tile .pw-row{display:block}
.power-tile .pw-row.pw-split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.power-tile .pw-half{padding:0}
.power-tile .pw-row.pw-split .pw-half:first-child{padding-right:14px;border-right:1px solid var(--line)}
.power-tile .pw-row.pw-split .pw-half:last-child{padding-left:14px}
.power-tile .pw-half.tile-click{border:none;border-radius:6px}
.power-tile .pw-row.pw-split .pw-half.tile-click:hover{background:var(--panel-2)}
.power-tile .pw-row.pw-split .pw-half:first-child.tile-click:hover{border-right:1px solid var(--line)}
.power-tile .pw-label{font-size:12px;font-weight:600;color:var(--txt)}
.power-tile .pw-sub{color:var(--muted);font-size:11px;margin:2px 0 6px;min-height:14px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.power-tile .pw-half .kpi{margin-top:0}
@media(max-width:520px){
  .power-tile .pw-row.pw-split{grid-template-columns:1fr;gap:12px}
  .power-tile .pw-row.pw-split .pw-half:first-child{padding-right:0;border-right:none;
    padding-bottom:12px;border-bottom:1px solid var(--line)}
  .power-tile .pw-row.pw-split .pw-half:last-child{padding-left:0}
}

/* Hover-Tooltip (z.B. Phasensymmetrie-Details) */
.has-tip{position:relative}
.has-tip .tip-ico{font-size:13px;vertical-align:-2px;opacity:.6}
.has-tip .tip{position:absolute;left:14px;right:14px;top:100%;margin-top:-4px;z-index:5;
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:9px 11px;font-size:12px;color:var(--txt);line-height:1.5;
  box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;visibility:hidden;
  transform:translateY(-3px);transition:opacity .12s,transform .12s,visibility .12s;
  pointer-events:none}
.has-tip:hover .tip{opacity:1;visibility:visible;transform:translateY(0)}

/* Verlaufs-Plot im Modal */
.hist-chart{margin-top:6px;min-height:340px}
.hist-chart .sp-svg{width:100%}

.metric-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line);font-size:13px}
.metric-row:last-child{border-bottom:none}
.metric-row .v{font-family:var(--mono)}
/* Einklappbare Karte (<details class="card collapse-card">) */
details.collapse-card>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:8px}
details.collapse-card>summary::-webkit-details-marker{display:none}
details.collapse-card>summary::marker{content:""}
details.collapse-card>summary h3{margin:0}
details.collapse-card>summary .collapse-ico{color:var(--muted);font-size:20px;transition:transform .15s}
details.collapse-card[open]>summary .collapse-ico{transform:rotate(180deg)}
/* Schnittstellen-Zeile: Status-Badge rechtsbündig direkt links neben dem Schalter */
.iface-row{align-items:center}
.iface-label{flex:1;min-width:0;display:inline-flex;align-items:center}
.iface-ctrl{display:inline-flex;align-items:center;gap:10px;flex:none}
.iface-badge{display:inline-flex;justify-content:flex-end;min-width:64px}
/* Zugriffsmodus (Monitoring+Steuerung / Read-Only) unter der Schalter-Zeile */
.iface-mode{margin:2px 0 12px;max-width:320px}
.iface-mode label{font-size:11px}
/* RMS: letzter Fehler umbrechend innerhalb der Kachel + Zeitstempel */
.err-block{padding:6px 0 2px;border-top:1px dashed var(--line);margin-top:2px}
.err-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px}
.err-msg{margin-top:4px;font-family:var(--mono);font-size:11.5px;line-height:1.45;color:var(--bad);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%}

/* Status badges */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 8px;
  border-radius:20px;text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.badge.ok{background:rgba(58,214,160,.12);color:var(--good)}
.badge.warn{background:rgba(230,177,76,.12);color:var(--warn)}
.badge.bad{background:rgba(224,88,79,.12);color:var(--bad)}
.badge.idle{background:rgba(125,139,156,.12);color:var(--muted)}
.badge.fallback{background:rgba(230,177,76,.18);color:var(--warn)}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:500;text-transform:uppercase;font-size:11px;letter-spacing:.5px}
td.mono,.v{font-family:var(--mono)}
tr:hover td{background:var(--panel-2)}

/* Buttons */
.btn{background:var(--accent-dim);color:#fff;border:none;border-radius:var(--radius);
  padding:9px 16px;cursor:pointer;font-size:13px;font-weight:600}
.btn:hover{background:var(--accent);color:#04130d}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--txt)}
.btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn.danger{background:none;border:1px solid var(--bad);color:var(--bad)}
.btn.sm{padding:5px 10px;font-size:12px}
.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.toolbar .left{display:flex;gap:10px;align-items:center}
.toolbar .right{display:flex;gap:8px;align-items:center}

/* Forms */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;background:var(--bg);
  border:1px solid var(--line);color:var(--txt);border-radius:6px;padding:9px 11px;font-size:13px;font-family:var(--sans)}
.field textarea{font-family:var(--mono);min-height:90px}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}

/* Toggle */
.switch{position:relative;display:inline-block;width:42px;height:22px}
.switch input{display:none}
.slider{position:absolute;inset:0;background:var(--line);border-radius:22px;transition:.2s}
.slider:before{content:"";position:absolute;height:16px;width:16px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--accent-dim)}
.switch input:checked + .slider:before{transform:translateX(20px)}

/* Modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;
  align-items:flex-start;justify-content:center;padding:60px 20px;z-index:50;overflow-y:auto}
.modal.hidden{display:none}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  width:560px;max-width:100%;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
  display:flex;flex-direction:column;
  /* Härtung: Inhalt darf NIE außerhalb der Karte gerendert werden — selbst wenn
     der Body-Scroll (z.B. durch gecachtes altes CSS/abweichende Engines) nicht
     greift, wird der Überlauf hier an der Kartenkante abgeschnitten. */
  overflow:hidden}
.modal-card.wide{width:min(960px,94vw)}
.modal-card header{display:flex;justify-content:space-between;align-items:center;
  padding:16px 20px;border-bottom:1px solid var(--line);flex:0 0 auto}
.modal-card header h2{margin:0;font-size:16px}
#modal-body{padding:20px;overflow-y:auto;flex:1 1 auto;min-height:0;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:8px}

.muted{color:var(--muted)}
.row-actions{display:flex;gap:6px}
.test-result{margin-top:10px;font-size:13px}

/* Energy-Meter-Tabelle: bleibt in der Kachel, lange Namen umbrechen */
.em-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:12.5px}
.em-table th,.em-table td{padding:7px 6px;border-bottom:1px solid var(--line);
  overflow:hidden}
.em-table th{font-size:10px}
.em-table col.c-name{width:auto}
.em-table col.c-num{width:46px}
.em-table .c-name-cell{white-space:normal;word-break:break-word;line-height:1.25}
.em-table td.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.em-table th.num{text-align:right}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;
  color:var(--muted);margin:22px 0 10px}
.empty{color:var(--muted);text-align:center;padding:40px}

/* Phasen-Karten (overflow-sicher in schmalen Grid-Spalten) */
.phase-card{min-width:0;overflow:hidden}
.phase-card .card-head{flex-wrap:wrap;gap:6px}
.phase-card .phase-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.phase-table{table-layout:fixed;width:100%}
.phase-table th,.phase-table td{padding:8px 8px}
.phase-table col.c-name{width:auto}
.phase-table col.c-num{width:64px}
.phase-table col.c-sign{width:44px}
.phase-table col.c-act{width:92px}
.phase-table td:first-child{white-space:normal;word-break:break-word;line-height:1.3}
.phase-table td.num{text-align:right;font-family:var(--mono);white-space:nowrap}
.phase-table th.num{text-align:right}
.phase-add{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.phase-add label{display:block;font-size:12px;color:var(--muted);margin:0}
.phase-add label>span{display:block;margin-bottom:5px}
.phase-add select{width:100%;background:var(--bg);border:1px solid var(--line);
  color:var(--txt);border-radius:6px;padding:9px 11px;font-size:13px;font-family:var(--sans)}
.phase-add .pa-ch{flex:1 1 100%;min-width:0}
.phase-add .pa-sign{flex:1 1 140px;min-width:0}
.phase-add .pa-btn{flex:0 0 auto}

/* Abschnitts-Überschrift mit rechtsbündigen Aktionen (Layout-Konsistenz) */
.section-head{display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin:22px 0 10px}
.section-head .section-title{margin:0}
.section-head .sh-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.section-head .sh-count{color:var(--muted);font-weight:400;font-size:12px}
.section-head #audit-filter{background:var(--bg);border:1px solid var(--line);
  color:var(--txt);border-radius:6px;padding:6px 10px;font-size:12.5px;
  font-family:var(--sans);width:160px}
.section-head #audit-filter:focus{outline:none;border-color:var(--accent)}
.section-head #audit-range{padding:6px 8px}

@media(max-width:720px){
  .sidebar{width:64px}.brand div,.nav-item span:last-child{display:none}
  .form-grid{grid-template-columns:1fr}
  .docs-layout{flex-direction:column}
  .docs-toc{position:static;width:100%;max-height:none}
  .modal{padding:16px 10px}
  .modal-card,.modal-card.wide{max-height:calc(100vh - 32px);width:100%}
}

/* Global helper */
.hidden{display:none !important}

/* Sprachauswahl (Toolbar) */
.lang-select{background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:6px 8px;font-size:12.5px;font-family:var(--sans);cursor:pointer}
.lang-select:hover{border-color:var(--accent)}
.lang-select:focus{outline:none;border-color:var(--accent)}

/* Mining-Relais-Auswahl (Checkbox-Liste) */
.mr-item{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:13px;
  border-bottom:1px dashed var(--line)}
.mr-item:last-of-type{border-bottom:none}
.mr-item input{width:16px;height:16px;accent-color:var(--accent)}

/* Dokumentation (zweispaltig) */
.docs-layout{display:flex;gap:26px;align-items:flex-start}
.docs-toc{width:232px;flex-shrink:0;position:sticky;top:26px;
  max-height:calc(100vh - 120px);overflow:auto}
.docs-search{margin-bottom:14px}
.docs-search input{width:100%;background:var(--bg);border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:8px 11px;font-size:13px;font-family:var(--sans)}
.docs-search input:focus{outline:none;border-color:var(--accent)}
.docs-toc-title{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin:0 0 8px}
#doc-nav a{display:block;padding:7px 10px;margin-bottom:2px;color:var(--muted);text-decoration:none;
  border-radius:6px;font-size:13px;border-left:2px solid transparent}
#doc-nav a:hover{color:var(--txt);background:var(--panel-2)}
#doc-nav a.active{color:var(--accent);border-left-color:var(--accent);background:var(--panel-2)}
.docs-content{flex:1;min-width:0;max-width:840px}
.doc-section{margin-bottom:32px;scroll-margin-top:26px}
.doc-section h2{font-size:18px;margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.doc-body{font-size:13.5px;line-height:1.65}
.doc-body h3{font-size:14px;margin:18px 0 8px;color:var(--accent)}
.doc-body p{margin:0 0 12px}
.doc-body ul,.doc-body ol{margin:0 0 12px;padding-left:22px}
.doc-body li{margin-bottom:6px}
.doc-body code,.doc-body .mono{font-family:var(--mono);font-size:12px;
  background:var(--panel-2);padding:1px 5px;border-radius:4px}
.doc-body .metric-row{border-bottom:1px dashed var(--line)}
.doc-body strong{color:var(--strong)}

/* --- Statuscode (Dashboard-Karte + Sidebar-Badge) --- */
.status-card.ok .kpi{color:var(--good)}
.status-card.warn{border-color:var(--warn)}
.status-card.warn .kpi{color:var(--warn)}
.status-card .kpi small{display:block;margin:2px 0 0;font-size:12px}
.sysstate .status-code{margin-left:auto;font-family:var(--mono);font-size:12px;
  padding:1px 6px;border-radius:4px;border:1px solid var(--line)}
.sysstate .status-code.ok{color:var(--good);border-color:var(--accent-dim)}
.sysstate .status-code.warn{color:var(--warn);border-color:var(--warn)}

/* ---------- Setpoint-Visualisierung ---------- */
.sp-svg{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius)}
.sp-grid{stroke:var(--line);stroke-width:1;opacity:.5}
.sp-axis{stroke:var(--muted);stroke-width:1.2}
.sp-lbl{fill:var(--muted);font-family:var(--mono);font-size:11px}
.sp-lbl.axis{fill:var(--txt);font-family:var(--sans);font-size:12.5px}
.sp-line{fill:none;stroke:var(--accent-dim);stroke-width:1.4;opacity:.55;stroke-dasharray:4 3}
.sp-dot{fill:var(--accent);stroke:var(--panel);stroke-width:1.5;transition:r .1s}
.sp-dot:hover{fill:var(--warn)}
.sp-dot.sel{fill:var(--warn);stroke:var(--txt);stroke-width:2}
tr.sp-row-sel td{background:rgba(58,214,160,.08)}

/* ============================================================
   Authentifizierung & Rollen
   ============================================================ */

/* --- Login-Overlay --- */
.login-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;
  justify-content:center;padding:20px;
  background:var(--login-veil)}
.login-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  width:min(380px,100%);padding:26px 24px;box-shadow:0 18px 50px rgba(0,0,0,.5)}
.login-brand{display:flex;gap:12px;align-items:center;margin-bottom:22px}
.login-brand .material-icons{color:var(--accent);font-size:34px}
.login-brand strong{display:block;font-size:16px;letter-spacing:.8px}
.login-brand small{display:block;color:var(--muted);font-size:11px;
  text-transform:uppercase;letter-spacing:1.5px;margin-top:2px}
.login-card .field{margin-bottom:14px}
.login-card .field>span{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}
.login-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:6px}

/* --- Fehlermeldung (Login + Modals: pw-err/u-err/r-err) --- */
.login-error{background:rgba(224,88,79,.12);color:var(--bad);border:1px solid var(--bad);
  border-radius:var(--radius);padding:8px 10px;font-size:12.5px;margin-bottom:12px}

/* --- User-Box (Topbar) --- */
.user-box{display:flex;align-items:center;gap:8px}
.user-box .user-name{font-size:13px;color:var(--txt);font-weight:500}
.badge.user-role{background:rgba(76,155,230,.14);color:var(--info);
  text-transform:none;letter-spacing:.3px}
/* Nutzer-Menü: Icon-Trigger + Dropdown (Passwort ändern / Abmelden) */
.user-menu{position:relative;display:inline-flex}
.user-trigger .material-icons{font-size:22px}
.user-dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:70;min-width:206px;
  background:var(--panel);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);padding:6px}
.user-dropdown.hidden{display:none}
.user-dropdown-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.user-dropdown-head .user-name{font-size:13px;color:var(--txt);font-weight:600}
.user-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:none;color:var(--txt);padding:9px 10px;border-radius:6px;
  cursor:pointer;font:inherit;font-size:13px}
.user-dropdown-item:hover{background:var(--panel-2)}
.user-dropdown-item .material-icons{font-size:18px;color:var(--muted)}

/* --- Hinweisbanner (Standard-Admin / Nur-Lese) --- */
.auth-warning{background:rgba(230,177,76,.12);border:1px solid var(--warn);color:var(--warn);
  border-radius:var(--radius);padding:10px 14px;margin-bottom:16px;font-size:13px}
.readonly-banner{background:rgba(76,155,230,.10);border:1px solid var(--info);color:var(--info);
  border-radius:var(--radius);padding:9px 14px;margin-bottom:16px;font-size:12.5px}

/* --- Kein-Zugriff-Karte --- */
.no-access{display:flex;flex-direction:column;align-items:center;gap:10px}
.no-access .material-icons{font-size:42px;color:var(--muted)}

/* --- Switch mit Beschriftung in einer Zeile (Auth-Konfig + Rollen-Modal) --- */
.switch-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;cursor:pointer}
.switch-row>span:last-child{font-size:13.5px}

/* --- Rechte-Matrix (Rollen-Modal) --- */
.perm-grid th:not(:first-child),.perm-grid td:not(:first-child){width:78px;text-align:center}
.perm-grid input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.perm-grid tr:hover td{background:transparent}
.perm-disabled{opacity:.55}
input.perm-disabled,button.perm-disabled,.perm-disabled input,.perm-disabled button{cursor:not-allowed}

/* --- Toast (Hinweise, z.B. „Zugriff verweigert") --- */
#auth-toast.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);
  background:var(--panel-2);color:var(--txt);border:1px solid var(--line);
  border-radius:var(--radius);padding:11px 18px;font-size:13px;z-index:1100;
  opacity:0;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:opacity .2s,transform .2s}
#auth-toast.toast.show{opacity:1;transform:translate(-50%,0)}
/* --- Dashboard-Elemente je Rolle (Benutzerverwaltung) --- */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.dash-group-title{font-size:12px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:0 0 8px;font-weight:600}
.dash-item{display:flex;align-items:center;gap:9px;padding:5px 0;cursor:pointer;font-size:13.5px}
.dash-item input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex:0 0 auto}
.section-head #dash-role{padding:6px 8px}

/* --- Toasts (Warnhinweise) ------------------------------------------------ */
#toast-host{position:fixed;right:18px;bottom:18px;z-index:9999;display:flex;
  flex-direction:column;gap:8px;max-width:360px}
.toast{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--accent);
  border-radius:var(--radius);padding:10px 13px;color:var(--txt);font-size:13px;line-height:1.45;
  box-shadow:0 8px 24px rgba(0,0,0,.4);opacity:0;transform:translateY(8px);
  transition:opacity .2s,transform .2s}
.toast.show{opacity:1;transform:translateY(0)}
.toast.warn{border-left-color:var(--warn)}
.toast.error{border-left-color:var(--bad)}
.toast.ok{border-left-color:var(--good)}

/* --- Miner-Debug-Log: ein-/ausklappbare Antworten ------------------------- */
.mdbg-row.has-detail{cursor:pointer}
.mdbg-row.has-detail:hover{background:var(--panel-2)}
.mdbg-caret{font-size:16px;vertical-align:middle;color:var(--muted)}
.mdbg-detail td{background:var(--bg)}
.mdbg-detail-box{padding:6px 4px 10px}
.mdbg-detail-lbl{font-size:11px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin:6px 0 2px}
.mdbg-detail-box pre{margin:0;white-space:pre-wrap;word-break:break-word;
  font-family:var(--mono);font-size:11.5px;color:var(--txt);
  background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:8px;max-height:320px;overflow:auto}

/* Inline-Switch-Label (Regelungs-Modal) */
.switch-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-weight:400;text-transform:none;letter-spacing:0}
.switch-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* --- Geräte-Verlauf-Modal (Plots je Metrik-Gruppe) ------------------------ */
.dh-charts{display:flex;flex-direction:column;gap:16px;margin-top:8px}.dh-chart{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px}
.dh-chart-title{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px}
/* Ziel-Verteilung (Regulierung): lesbar auch in schmaler Kachel */
.dist-head{display:flex;flex-direction:column;gap:2px;padding-bottom:8px;
  border-bottom:1px solid var(--line);margin-bottom:6px}
.dist-head-mode{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:600}
.dist-head-target{font-family:var(--mono);font-size:13px;color:var(--accent)}
.dist-periph{font-size:11.5px;margin-bottom:6px}
.dist-periph .mono{font-family:var(--mono)}
.dist-item{padding:7px 0;border-bottom:1px solid var(--line)}
.dist-item:last-child{border-bottom:none}
.dist-item-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dist-item-top .dist-name{font-weight:500}
.dist-item-vals{font-family:var(--mono);font-size:12.5px;color:var(--txt);margin-top:3px;
  white-space:nowrap;overflow-x:auto}
.dist-item-note{font-size:11px;color:var(--muted);margin-top:2px}
/* Energy-Meter-Kalibrierung (Offset je Kanal) */
.off-table td,.off-table th{padding:5px 6px;vertical-align:middle}
.off-table .off-in{width:84px;padding:5px 6px}
.off-table .off-mode{padding:5px 4px}
.ts-legend{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 6px;font-size:11.5px;color:var(--txt)}
.ts-leg{display:inline-flex;align-items:center;gap:5px}
.ts-swatch{width:11px;height:11px;border-radius:2px;display:inline-block}

/* Sub-Tabs (Peripherie: Router/Energy/Relays/Temperatur/Host; Energy: Geräte/Phasen) */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;border-bottom:1px solid var(--line);padding-bottom:0}
.subtab{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);
  padding:8px 14px;font-size:13px;cursor:pointer;border-radius:6px 6px 0 0}
.subtab:hover{color:var(--txt);background:var(--bg)}
.subtab.active{color:var(--accent);border-bottom-color:var(--accent);font-weight:600}
.subtabs.sm{margin-bottom:12px}
.subtabs.sm .subtab{padding:6px 12px;font-size:12px}