/*
 * Smartme-Seite: erbt das BKW-Light-Theme (style.css) und ergaenzt
 * nur die Smartme-spezifischen Layout-Klassen.
 */

/* ─────────────────── Topbar ─────────────────── */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  gap:0.8rem;padding:1.1rem 1.4rem;
  background:linear-gradient(135deg,#0f3460 0%,#16213e 100%);
  color:#fff;
}
.topbar h1{margin:0 0 0.1rem;font-size:1.25rem;font-weight:700}
.topbar p{margin:0;font-size:0.82rem;opacity:0.85}
.topbar-right{display:flex;align-items:center;gap:0.75rem}
.refresh-info{color:rgba(255,255,255,0.7);font-size:0.8rem}

.smart-kpi-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem}
.kpi-item{background:#fff;border:1px solid #e5e7eb;border-radius:12px;padding:0.75rem 0.9rem;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.kpi-label{display:block;color:#64748b;font-size:0.76rem;margin-bottom:0.25rem;text-transform:uppercase;letter-spacing:0.02em}

.flow-panel .panel-header{margin-bottom:0.8rem}
.power-flow{display:grid;gap:0.75rem}
.flow-grid{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:0.65rem}
.flow-node{border-radius:12px;padding:0.9rem 1rem;background:#f8fafc;border:1px solid #e2e8f0;text-align:center}
.flow-node .flow-title{display:block;font-size:0.75rem;color:#64748b;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:0.25rem}
.flow-subtitle{display:block;font-size:0.78rem;color:#475569;margin-bottom:0.35rem;min-height:1rem}
.flow-node strong{font-size:1.05rem;color:#1f2937}
.flow-node.pv{background:linear-gradient(135deg,#eef2ff,#e0e7ff)}
.flow-node.load{background:linear-gradient(135deg,#f8fafc,#f1f5f9)}
.flow-node.boiler.on{background:linear-gradient(135deg,#dcfce7,#bbf7d0)}
.flow-node.boiler.off{background:linear-gradient(135deg,#f8fafc,#f1f5f9)}
.flow-arrow{font-size:1.2rem;color:#94a3b8;font-weight:700}
.flow-net{font-size:0.9rem;color:#334155}

/* ─────────────────── Page ─────────────────── */
.page{padding:1.5rem 2rem 2.5rem;max-width:1440px;margin:auto;display:grid;gap:1.5rem}

/* ─────────────────── Status-Bar ─────────────────── */
.status-bar{
  padding:0.8rem 1.1rem;border-radius:10px;font-size:0.9rem;font-weight:500;
  background:#f8f9fa;border:1px solid #e9ecef;color:#2c3e50;
}
.status-bar.success{background:#d1fae5;border-color:#6ee7b7;color:#065f46}
.status-bar.error{background:#fee2e2;border-color:#fca5a5;color:#991b1b}
.status-bar.info{background:#dbeafe;border-color:#93c5fd;color:#1e40af}

/* ─────────────────── Panels (wie .card) ─────────────────── */
.panel{
  background:#fff;border-radius:14px;padding:1.1rem;
  box-shadow:0 2px 12px rgba(0,0,0,0.07);border:1px solid #f0f0f0;
}
.panel-header{
  display:flex;justify-content:space-between;align-items:center;
  gap:0.8rem;margin-bottom:0.9rem;flex-wrap:wrap;
}
.panel-header h2{margin:0 0 0.1rem;font-size:1rem;font-weight:700;color:#2c3e50}
.panel-header p{margin:0;color:#64748b;font-size:0.8rem}
.switch-wrap{display:flex;align-items:center;gap:0.6rem}
.switch-label{color:#64748b;font-size:0.88rem;font-weight:500}

.switch-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:0.75rem;
  align-items:stretch;
}

.switch-block{
  display:grid;
  gap:0.35rem;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:0.55rem 0.7rem;
}

.switch-control,
.switch-inline{
  display:flex;
  align-items:center;
  gap:0.5rem;
}

.switch-input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.switch-slider{
  position:relative;
  width:52px;
  height:30px;
  background:#dbe2ea;
  border-radius:999px;
  cursor:pointer;
  transition:background 0.2s ease;
  border:1px solid #c6d0db;
}

.switch-slider::before{
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
  transition:transform 0.2s ease;
}

.switch-input:checked + .switch-slider{
  background:#0f766e;
  border-color:#0f766e;
}

.switch-input:checked + .switch-slider::before{
  transform:translateX(22px);
}

.switch-input:focus + .switch-slider{
  outline:2px solid rgba(14,116,144,0.25);
  outline-offset:2px;
}

.switch-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  padding:0.15rem 0.45rem;
  border-radius:999px;
  background:#e2e8f0;
  color:#475569;
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:0.03em;
}

.switch-state.on{
  background:#ccfbf1;
  color:#0f766e;
}

.switch-state.off{
  background:#fee2e2;
  color:#b91c1c;
}

/* ─────────────────── Automation Status Grid ─────────────────── */
.automation-status-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0.6rem;margin-bottom:0.9rem;
}
.status-box{
  background:#f8f9fa;border:1px solid #e9ecef;
  border-radius:10px;padding:0.65rem 0.75rem;
}
.status-box.wide{grid-column:span 2}
.diagnostics-hidden{display:none !important}
.status-label{display:block;color:#64748b;font-size:0.7rem;font-weight:500;margin-bottom:0.2rem;text-transform:uppercase;letter-spacing:0.03em}
.status-box strong{display:block;font-size:0.96rem;font-weight:700;color:#2c3e50}
.runtime-remaining{font-size:1.1rem;font-weight:700}
.runtime-remaining.green{color:#16a34a}
.runtime-remaining.orange{color:#d97706}
.runtime-remaining.red{color:#dc2626}

.mode-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:fit-content;
  padding:0.18rem 0.5rem;
  border-radius:999px;
  border:1px solid transparent;
  font-size:0.74rem;
}

.mode-badge.neutral{background:#e2e8f0;color:#334155;border-color:#cbd5e1}
.mode-badge.info{background:#dbeafe;color:#1d4ed8;border-color:#93c5fd}
.mode-badge.success{background:#dcfce7;color:#166534;border-color:#86efac}
.mode-badge.warning{background:#fef3c7;color:#92400e;border-color:#fcd34d}
.mode-badge.critical{background:#ffedd5;color:#9a3412;border-color:#fdba74}
.mode-badge.danger{background:#fee2e2;color:#991b1b;border-color:#fca5a5}

/* ─────────────────── Automation Form ─────────────────── */
.automation-form{display:grid;gap:1rem}
.settings-layout{
  display:grid;
  gap:0.9rem;
}

.settings-card{
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:14px;
  padding:0.75rem;
}

.settings-card h3{
  margin:0 0 0.45rem;
  color:#0f3460;
  font-size:0.86rem;
}

.form-grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0.9rem;
}

.form-grid-settings{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:0.75rem;
}

.settings-compact{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.field-label{
  display:grid;gap:0.35rem;
  color:#334155;font-size:0.8rem;font-weight:500;
}

.field-title{
  display:flex;
  align-items:center;
  gap:0.4rem;
}

.automation-form input{
  width:100%;border-radius:8px;padding:0.48rem 0.62rem;
  border:1.5px solid #dde1e7;background:#fff;color:#2c3e50;
  font-size:0.82rem;transition:border-color 0.15s;
}
.automation-form input:focus{outline:none;border-color:#0f3460}
.form-actions{display:flex;gap:0.75rem;flex-wrap:wrap}

.form-action-hint{
  margin:0.15rem 0 0;
  padding:0.55rem 0.7rem;
  border-radius:10px;
  border:1px solid #dbe7f3;
  background:#f8fbff;
  color:#334155;
  font-size:0.78rem;
  line-height:1.35;
}

.help-dot{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  border:1px solid #93c5fd;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:0.72rem;
  font-weight:700;
  cursor:help;
  position:relative;
}

.help-dot:hover::after,
.help-dot:focus-visible::after{
  content:attr(data-help);
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:130%;
  width:250px;
  max-width:80vw;
  background:#0f172a;
  color:#f8fafc;
  border-radius:8px;
  padding:0.55rem 0.65rem;
  font-size:0.78rem;
  line-height:1.35;
  box-shadow:0 10px 24px rgba(2,6,23,0.3);
  z-index:20;
}

.quiet-hours-group{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0.9rem;
}

.quiet-hours-group .field-label{
  margin:0;
}

.quiet-hours-group.disabled{
  opacity:0.45;
}

.quiet-hours-group.disabled input{
  pointer-events:none;
  background:#f1f5f9;
}

.toast-message{
  position:fixed;
  right:18px;
  top:18px;
  z-index:2000;
  background:#0f172a;
  color:#f8fafc;
  border-radius:10px;
  border:1px solid #1e293b;
  box-shadow:0 14px 28px rgba(2,6,23,0.35);
  padding:0.7rem 0.85rem;
  font-size:0.85rem;
  opacity:0;
  transform:translateY(-8px);
  transition:opacity 0.2s ease, transform 0.2s ease;
  pointer-events:none;
}

.toast-message.show{
  opacity:1;
  transform:translateY(0);
}

.toast-message.success{ background:#064e3b; border-color:#065f46; }
.toast-message.error{ background:#7f1d1d; border-color:#991b1b; }

.btn-soft{
  margin-top:0.6rem;
  background:#ecfeff;
  color:#0f766e;
  border:1px solid #99f6e4;
}

.btn-soft:hover{
  background:#ccfbf1;
}

/* ─────────────────── Buttons ─────────────────── */
.btn{
  border:0;border-radius:8px;padding:0.5rem 0.85rem;cursor:pointer;
  font-weight:600;font-size:0.8rem;transition:all 0.15s;
}
.btn-primary{background:#0f3460;color:#fff}
.btn-primary:hover{background:#162952;box-shadow:0 4px 12px rgba(15,52,96,0.28)}
.btn-secondary{background:#f1f5f9;color:#334155;border:1px solid #e2e8f0}
.btn-secondary:hover{background:#e2e8f0}
.btn-ghost{background:#fff;color:#0f3460;border:1px solid #c7d8f5}
.btn-ghost:hover{background:#eff6ff;border-color:#93c5fd}
.btn-danger{background:#991b1b;color:#fff;border:1px solid #7f1d1d}
.btn-danger:hover{background:#7f1d1d;box-shadow:0 4px 12px rgba(127,29,29,0.25)}
.btn-danger.active{background:#dc2626;border-color:#b91c1c}
.btn-on{background:rgba(34,197,94,0.14);color:#16a34a;border:1px solid rgba(34,197,94,0.4)}
.btn-on:hover{background:rgba(34,197,94,0.25)}
.btn-off{background:rgba(239,68,68,0.1);color:#dc2626;border:1px solid rgba(239,68,68,0.35)}
.btn-off:hover{background:rgba(239,68,68,0.2)}

/* Monitoring Log */
.log-toolbar{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap}
.log-meta{font-size:0.76rem;color:#64748b}
.automation-log{display:grid;gap:0.55rem}
.log-row{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:0.7rem 0.85rem}
.log-main{display:flex;align-items:center;gap:0.55rem;flex-wrap:wrap;color:#0f172a}
.log-time{font-size:0.78rem;color:#64748b}
.log-badge{display:inline-flex;border-radius:999px;padding:0.15rem 0.5rem;font-size:0.7rem;font-weight:700}
.log-badge.blocked{background:rgba(239,68,68,0.15);color:#b91c1c}
.log-badge.switched{background:rgba(34,197,94,0.15);color:#15803d}
.log-badge.info{background:rgba(59,130,246,0.15);color:#1d4ed8}
.log-badge.repeat{background:rgba(148,163,184,0.2);color:#334155}
.log-details{margin-top:0.3rem;font-size:0.82rem;color:#475569}
.log-empty{padding:0.8rem;color:#64748b;background:#f8fafc;border-radius:10px;border:1px dashed #cbd5e1}

/* ─────────────────── Meter Grid ─────────────────── */
.meter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
}
.meter-card{
  background:#fff;border:1px solid #f0f0f0;
  border-radius:16px;padding:1.25rem;
  box-shadow:0 2px 8px rgba(0,0,0,0.07);
  transition:box-shadow 0.2s,transform 0.2s;
}
.meter-card:hover{box-shadow:0 6px 20px rgba(0,0,0,0.1);transform:translateY(-2px)}
.future-meter-card{border-style:dashed;border-color:#c7d2fe;background:linear-gradient(135deg,#fbfdff 0%,#f8fbff 100%)}
.meter-header{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:0.75rem;margin-bottom:1rem;
}
.meter-name{margin:0;font-size:1.1rem;font-weight:700;color:#2c3e50}
.meter-device-id{color:#94a3b8;font-size:0.78rem;margin-top:0.25rem;word-break:break-all}
.meter-badges{display:flex;gap:0.4rem;flex-wrap:wrap;justify-content:flex-end}

/* ─────────────────── Badges ─────────────────── */
.badge{
  display:inline-flex;padding:0.25rem 0.65rem;
  border-radius:999px;font-size:0.76rem;font-weight:600;border:1px solid transparent;
}
.badge-green{background:rgba(34,197,94,0.12);color:#16a34a;border-color:rgba(34,197,94,0.35)}
.badge-red{background:rgba(239,68,68,0.1);color:#dc2626;border-color:rgba(239,68,68,0.3)}
.badge-blue{background:rgba(59,130,246,0.1);color:#2563eb;border-color:rgba(59,130,246,0.3)}
.badge-amber{background:rgba(245,158,11,0.1);color:#d97706;border-color:rgba(245,158,11,0.3)}
.badge-neutral{background:#f1f5f9;color:#64748b;border-color:#e2e8f0}

/* ─────────────────── Metrics ─────────────────── */
.metric{
  background:#f8f9fa;border:1px solid #f0f0f0;
  border-radius:10px;padding:0.8rem;
}
.metric-primary{
  background:linear-gradient(135deg,#f0f5ff 0%,#e6f0ff 100%);
  border-color:#c7d8f5;margin-bottom:0.75rem;
}
.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.6rem}
.metric-grid-3{grid-template-columns:repeat(3,1fr);margin-top:0.6rem}
.metric.small{padding:0.6rem}
.metric-label{display:block;color:#64748b;font-size:0.76rem;font-weight:500;margin-bottom:0.25rem}
.metric-value{font-size:0.95rem;font-weight:700;color:#2c3e50}
.metric-primary .metric-value{font-size:1.5rem;color:#0f3460}

/* ─────────────────── Relay Section ─────────────────── */
.relay-section{
  margin-top:0.9rem;padding-top:0.9rem;
  border-top:1px solid #f0f0f0;
}
.hidden{display:none}
.relay-header{
  display:flex;justify-content:space-between;align-items:center;
  color:#64748b;font-size:0.88rem;margin-bottom:0.65rem;
}
.relay-state{font-weight:600;color:#2c3e50}
.relay-buttons{display:flex;gap:0.5rem}
.meter-footer{margin-top:0.8rem;color:#94a3b8;font-size:0.78rem}
.empty-state{
  background:#f8f9fa;border:1px dashed #cbd5e1;
  border-radius:12px;padding:1.5rem;color:#64748b;text-align:center;
}

/* ─────────────────── Responsive ─────────────────── */
@media(max-width:1100px){
  .form-grid,.automation-status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .status-box.wide{grid-column:span 2}
  .smart-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .switch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow-grid{grid-template-columns:1fr;justify-items:stretch}
  .flow-arrow{display:none}
  .quiet-hours-group{grid-template-columns:1fr}
}
@media(max-width:720px){
  .topbar{flex-direction:column;align-items:flex-start;padding:0.9rem 1rem}
  .panel-header{flex-direction:column;align-items:flex-start}
  .form-grid,.automation-status-grid{grid-template-columns:1fr}
  .status-box.wide{grid-column:auto}
  .switch-grid{grid-template-columns:1fr}
  .smart-kpi-strip{grid-template-columns:1fr}
  .page{padding:0.8rem}
  .form-actions .btn{width:100%}
  .log-toolbar{width:100%;justify-content:space-between}
  .log-toolbar .btn{width:100%}
  .help-dot:hover::after,
  .help-dot:focus-visible::after{
    left:0;
    transform:none;
  }
}

@media(max-width:560px){
  .meter-card{padding:0.9rem}
  .panel{padding:0.85rem}
  .status-box strong{font-size:0.9rem}
  .metric-primary .metric-value{font-size:1.2rem}
}