:root{
  --bg:#0d1420;
  --card:#141e2e;
  --card-edge:#1f2c42;
  --text:#dbe6f3;
  --muted:#7d8ca3;
  --accent:#3fb8d4;      /* wilgoć / woda */
  --accent-soft:#173444;
  --green:#39c07a;
  --red:#e05a5a;
  --yellow:#e0b64f;
  --radius:14px;
  font-size:16px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
}

/* ---------- login ---------- */
.login-body{display:flex;align-items:center;justify-content:center;padding:1rem}
.login-card{
  width:100%;max-width:380px;background:var(--card);
  border:1px solid var(--card-edge);border-radius:var(--radius);
  padding:2rem;
}
.brand{text-align:center;margin-bottom:1.5rem}
.brand h1{margin:.3rem 0 0;font-size:1.6rem;letter-spacing:.02em}
.brand .sub{color:var(--muted);margin:.3rem 0 0;font-size:.85rem}
.accent{color:var(--accent)}
label{display:block;margin:.9rem 0 .3rem;color:var(--muted);font-size:.85rem}
input[type=text],input[type=password],input[type=number]{
  width:100%;padding:.6rem .7rem;border-radius:8px;
  border:1px solid var(--card-edge);background:#0e1826;color:var(--text);
  font-size:1rem;
}
input:focus{outline:2px solid var(--accent);outline-offset:1px}
button{
  cursor:pointer;border:none;border-radius:8px;font-size:1rem;
  padding:.6rem 1rem;background:var(--accent);color:#04222b;font-weight:600;
}
.login-card button{width:100%;margin-top:1.3rem}
button:hover{filter:brightness(1.1)}
.alert{
  background:#3a1a1e;border:1px solid #6b2a31;color:#f0b9bd;
  padding:.6rem .8rem;border-radius:8px;font-size:.9rem;
}

/* ---------- layout ---------- */
.top{
  display:flex;justify-content:space-between;align-items:center;
  padding:.9rem 1.2rem;border-bottom:1px solid var(--card-edge);
  position:sticky;top:0;background:rgba(13,20,32,.92);backdrop-filter:blur(6px);
}
.brand-inline{font-weight:700;font-size:1.05rem}
.top-right{display:flex;align-items:center;gap:1rem}
.logout{color:var(--muted);text-decoration:none;font-size:.9rem}
.logout:hover{color:var(--text)}

.grid{
  max-width:1000px;margin:0 auto;padding:1.2rem;
  display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;
}
.card{
  background:var(--card);border:1px solid var(--card-edge);
  border-radius:var(--radius);padding:1.2rem 1.3rem;
}
.card h2{margin:0 0 1rem;font-size:1rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;font-weight:600}
.events{grid-column:1 / -1}
.banner{
  grid-column:1 / -1;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;background:#2e2712;border-color:#5c4d1e;color:#efe0ac;
}
.hidden{display:none}

/* ---------- readings ---------- */
.big-row{display:flex;gap:2.5rem;margin-bottom:1rem}
.big-val{font-size:2.6rem;font-weight:700;color:var(--accent)}
.big:last-child .big-val{color:var(--text)}
.big-label{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em}
.kv{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:.45rem 1.5rem}
.kv div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--card-edge);padding:.25rem 0}
.kv dt{color:var(--muted);font-size:.88rem}
.kv dd{margin:0;font-size:.88rem;font-weight:600}

/* ---------- controls ---------- */
.toggle-row{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.2rem}
.toggle-title{font-weight:600}
.toggle-sub{color:var(--muted);font-size:.82rem}
.switch{position:relative;display:inline-block;width:52px;height:28px;flex:none}
.switch input{opacity:0;width:0;height:0}
.slider{
  position:absolute;inset:0;background:#25344c;border-radius:28px;transition:.2s;
}
.slider:before{
  content:"";position:absolute;height:22px;width:22px;left:3px;top:3px;
  background:#94a6bd;border-radius:50%;transition:.2s;
}
.switch input:checked + .slider{background:var(--accent)}
.switch input:checked + .slider:before{transform:translateX(24px);background:#04222b}
.switch input:focus-visible + .slider{outline:2px solid var(--accent)}

.hyst{border-top:1px solid var(--card-edge);padding-top:1rem}
.hyst-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem;gap:1rem}
.hyst-row label{margin:0;color:var(--text);font-size:.92rem}
.hyst-input{display:flex;align-items:center;gap:.4rem}
.hyst-input input{width:80px;text-align:center}
.btn-primary{margin-top:.3rem}
.msg{font-size:.85rem;margin-top:.5rem;min-height:1.1em}
.msg.ok{color:var(--green)} .msg.err{color:var(--red)}
.note{color:var(--muted);font-size:.82rem;line-height:1.5;border-top:1px solid var(--card-edge);
  padding-top:.9rem;margin-top:1.1rem}
.note em{color:var(--accent);font-style:normal}
.statusline{margin-top:.6rem;font-size:.9rem;color:var(--muted)}

/* ---------- pills ---------- */
.pill{padding:.2rem .65rem;border-radius:999px;font-size:.78rem;font-weight:600}
.pill-green{background:#12301f;color:var(--green)}
.pill-red{background:#341418;color:var(--red)}
.pill-gray{background:#1d2838;color:var(--muted)}
.pill-blue{background:var(--accent-soft);color:var(--accent)}
.pill-yellow{background:#2e2712;color:var(--yellow)}

/* ---------- events ---------- */
#events{list-style:none;margin:0;padding:0;max-height:280px;overflow-y:auto}
#events li{display:flex;gap:.7rem;align-items:baseline;padding:.4rem 0;
  border-bottom:1px dashed var(--card-edge);font-size:.86rem;flex-wrap:wrap}
.ev-time{color:var(--muted);font-size:.78rem;white-space:nowrap}
.ev-type{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  padding:.1rem .45rem;border-radius:6px;background:#1d2838;color:var(--muted)}
.ev-manual_continuities{background:#2e2712;color:var(--yellow)}
.ev-control_on{background:var(--accent-soft);color:var(--accent)}
.ev-control_off,.ev-control_released{background:#12301f;color:var(--green)}
.ev-error{background:#341418;color:var(--red)}
.event-empty{color:var(--muted)}

@media (max-width:760px){
  .grid{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
  .banner{flex-direction:column;align-items:flex-start}
}

/* ---------- Home Assistance Premium Gold ---------- */
.login-card h1{font-size:1.25rem}
.back{color:var(--muted);text-decoration:none;margin-right:.5rem;font-size:1.1rem}
.back:hover{color:var(--text)}

/* kafelki urządzeń */
.tile{
  display:flex;gap:1rem;align-items:center;text-decoration:none;color:var(--text);
  position:relative;transition:border-color .15s, transform .15s;
}
.tile:hover{border-color:#2c405f;transform:translateY(-2px)}
.tile-name{font-weight:700;font-size:1.05rem}
.tile-type{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.tile-extra{margin-top:.35rem;font-size:.82rem;color:var(--muted)}
.tile-extra.ok{color:var(--accent)}
.tile-extra.bad{color:var(--red)}
.rename{
  position:absolute;top:.6rem;right:.7rem;background:transparent;color:var(--muted);
  font-size:1rem;padding:.2rem .4rem;border-radius:6px;
}
.rename:hover{background:#1d2838;color:var(--text);filter:none}
.home-intro h2{margin-bottom:.4rem}

/* kamera */
.cam-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:10px;overflow:hidden;border:1px solid var(--card-edge)}
.cam-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
code{background:#0e1826;padding:.1rem .35rem;border-radius:5px;font-size:.85em}

/* przycisk w stylu <a> lub <button> */
.btn{
  display:inline-block;cursor:pointer;border:none;border-radius:8px;font-size:1rem;
  padding:.6rem 1rem;background:var(--accent);color:#04222b;font-weight:600;
  text-decoration:none;
}
.btn:hover{filter:brightness(1.1)}

/* sterowanie ręczne */
.manual-row{display:flex;gap:.6rem;margin-bottom:.8rem;flex-wrap:wrap}

/* krzywa progu włączenia */
.curve-wrap{width:100%;overflow-x:auto}
#curve-canvas{
  width:100%;height:260px;display:block;touch-action:none;cursor:crosshair;
  background:#0e1826;border-radius:10px;border:1px solid var(--card-edge);
}
.curve-readout{margin-top:.6rem;font-size:.9rem;color:var(--muted)}
.curve-actions{display:flex;align-items:center;gap:.8rem;margin-top:.8rem;flex-wrap:wrap}

/* tooltip najechania nad wykresami canvas */
.chart-wrap{position:relative}
.chart-tooltip{
  position:absolute;pointer-events:none;transform:translate(-50%, -100%) translateY(-10px);
  background:#141e2e;border:1px solid var(--card-edge);border-radius:8px;
  padding:.5rem .7rem;font-size:.8rem;line-height:1.5;color:var(--text);
  white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.35);z-index:5;
}
.chart-tooltip.hidden{display:none}

/* wybornik zakresu czasu (czas pracy / tempo wilgotności) */
.range-row{display:flex;gap:.5rem;margin-bottom:.8rem;flex-wrap:wrap}
.range-btn{
  cursor:pointer;border:1px solid var(--card-edge);border-radius:8px;background:transparent;
  color:var(--muted);font-size:.85rem;padding:.4rem .8rem;
}
.range-btn:hover{color:var(--text);border-color:#2c405f}
.range-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.range-custom{display:flex;align-items:center;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
.range-custom input[type=datetime-local]{
  padding:.4rem .5rem;border-radius:8px;border:1px solid var(--card-edge);
  background:#0e1826;color:var(--text);font-size:.85rem;
}
.ontime-result{font-size:1.05rem;font-weight:600}

/* linki zewnętrzne (Grafana/InfluxDB) i osadzony dashboard */
.ext-links{display:flex;gap:.8rem;margin-bottom:1rem}
.dash-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:10px;overflow:hidden;border:1px solid var(--card-edge)}
.dash-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* select w stylu inputów */
select{
  padding:.5rem .6rem;border-radius:8px;border:1px solid var(--card-edge);
  background:#0e1826;color:var(--text);font-size:.95rem;
}
select:focus{outline:2px solid var(--accent);outline-offset:1px}