.admin-panel-wrap { margin-top: 18px; margin-bottom: 30px; }
.admin-panel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:14px; }
.admin-field { display:flex; flex-direction:column; gap:6px; }
.admin-field label { color:var(--muted); font-size:13px; }
.admin-field input { width:100%; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 12px; font:inherit; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.admin-actions button { background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:10px 14px; cursor:pointer; font:inherit; }
.admin-actions button:hover { border-color:var(--accent); }
.admin-actions button.active { border-color:var(--green); }
.admin-actions button:active, .chart-range-btn:active {
  background:rgba(110,168,254,.20);
  border-color:var(--accent);
  color:var(--text);
  filter:brightness(1.25);
  transform:translateY(1px);
}
.admin-actions button, .chart-range-btn {
  transition:background-color .08s ease, border-color .08s ease, color .08s ease, filter .08s ease, transform .05s ease;
}
.admin-status { margin-top:14px; padding:12px; border:1px solid var(--border); border-radius:10px; white-space:pre-wrap; color:var(--muted); }
.admin-note { color:var(--muted); font-size:13px; margin-top:10px; }
.compressor-chart-card { margin-bottom:18px; }
.compressor-chart-toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 4px; }
.chart-range-btn {
  min-width:48px; padding:7px 10px; border-radius:8px;
  border:1px solid var(--border); background:rgba(255,255,255,.025);
  color:var(--muted); cursor:pointer; font-weight:700;
}
.chart-range-btn:hover { border-color:var(--accent); color:var(--text); }
.chart-range-btn.active { border-color:var(--accent); color:var(--accent); background:rgba(110,168,254,.10); }
.chart-range-btn:active { background:rgba(110,168,254,.28); }
.compressor-chart-help { color:var(--muted); font-size:12px; margin-left:auto; }
.compressor-chart-wrap { position:relative; width:100%; height:330px; margin-top:8px; user-select:none; }
#compressorChart { width:100%; height:100%; display:block; cursor:crosshair; touch-action:none; }
.chart-tooltip {
  position:absolute; display:none; pointer-events:none; z-index:5;
  padding:7px 9px; border-radius:8px; border:1px solid var(--border);
  background:rgba(8,17,30,.94); color:var(--text); font-size:12px; white-space:nowrap;
}
.chart-meta { color:var(--muted); font-size:12px; margin-top:8px; }

.chart-series-toggles {display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; font-size:.85rem;}
.chart-series-toggles label {cursor:pointer; display:inline-flex; align-items:center; gap:5px;}

/* Status aus Modbus-Register 52; nicht der zuletzt geklickte Button. */
.admin-actions button.heating-state-btn.heating-is-on { border:2px solid #22c55e; box-shadow:inset 0 0 0 1px rgba(34,197,94,.18); }
.admin-actions button.heating-state-btn.heating-is-off { border:2px solid #ef4444; box-shadow:inset 0 0 0 1px rgba(239,68,68,.18); }


/* Responsive Admin und gemeinsame Kompressor-Grafik (Public + Admin) */
@media (max-width: 700px) {
  .admin-panel-wrap { margin-top: 12px; margin-bottom: 20px; }
  .admin-panel-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .admin-field, .admin-field input { min-width: 0; }
  .admin-field input { font-size: 16px; max-width: 100%; }
  .admin-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .admin-actions button { min-width: 0; min-height: 44px; padding: 10px 7px; white-space: normal; overflow-wrap: anywhere; }
  .compressor-chart-card { min-width: 0; overflow: hidden; }
  .compressor-chart-toolbar { gap: 6px; }
  .chart-range-btn { min-height: 42px; min-width: 44px; padding: 8px; flex: 1 1 44px; }
  .compressor-chart-help { width: 100%; margin: 4px 0 0; font-size: 11px; }
  .chart-series-toggles { gap: 8px 12px; font-size: 12px; }
  .chart-series-toggles label { min-height: 32px; }
  .chart-series-toggles input { width: 17px; height: 17px; }
  .compressor-chart-wrap { width: 100%; height: 255px; min-width: 0; }
  #compressorChart { max-width: 100%; }
  .chart-tooltip { max-width: calc(100% - 10px); white-space: normal; overflow-wrap: anywhere; }
  .chart-meta { line-height: 1.5; }
}
@media (max-width: 380px) {
  .admin-actions { grid-template-columns: minmax(0, 1fr); }
  .compressor-chart-wrap { height: 220px; }
}