/* Energy Hub — app degli appartamenti (/patrizia/, /ambrogio/).
   Stessi token e componenti dell'app principale (index.html): colori serie
   sole/batteria/rete validati per daltonismo (dataviz, 26/09), chiaro/scuro. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  color-scheme:light;
  --bg:#f3f4f6; --card:#ffffff; --card2:#f6f7f9; --line:rgba(11,11,11,.08); --line2:rgba(11,11,11,.14);
  --txt:#0f1115; --txd:#555a63; --txf:#8a8f98;
  --c-solar:#eda100; --c-batt:#1baf7a; --c-grid:#2a78d6; --c-heat:#eb6834; --c-cold:#2a78d6;
  --ok:#0ca30c; --warn:#d48a00; --err:#d03b3b;
  --ok-bg:rgba(12,163,12,.10); --warn-bg:rgba(250,178,25,.16); --err-bg:rgba(208,59,59,.10);
  --accent:#2a78d6; --accent-ink:#ffffff;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --r:16px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme:dark;
    --bg:#0b0e13; --card:#151a21; --card2:#1c222b; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
    --txt:#f2f4f7; --txd:#aab2bd; --txf:#6f7782;
    --c-solar:#c98500; --c-batt:#199e70; --c-grid:#3987e5; --c-heat:#d95926; --c-cold:#3987e5;
    --ok:#0ca30c; --warn:#fab219; --err:#e66767;
    --ok-bg:rgba(12,163,12,.16); --warn-bg:rgba(250,178,25,.14); --err-bg:rgba(230,103,103,.14);
    --accent:#3987e5; --shadow:none;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0b0e13; --card:#151a21; --card2:#1c222b; --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --txt:#f2f4f7; --txd:#aab2bd; --txf:#6f7782;
  --c-solar:#c98500; --c-batt:#199e70; --c-grid:#3987e5; --c-heat:#d95926; --c-cold:#3987e5;
  --ok:#0ca30c; --warn:#fab219; --err:#e66767;
  --ok-bg:rgba(12,163,12,.16); --warn-bg:rgba(250,178,25,.14); --err-bg:rgba(230,103,103,.14);
  --accent:#3987e5; --shadow:none;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;}
html,body{background:var(--bg);color:var(--txt);font-family:var(--sans);overflow-x:hidden;}
body{min-height:100vh;min-height:100dvh;}
button{font:inherit;color:inherit;}
[hidden]{display:none !important;}

/* ── Login ── */
.auth{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px;}
.auth form{width:100%;max-width:360px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px;box-shadow:var(--shadow);}
.auth-h{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;margin-bottom:4px;}
.auth-sub{font-size:14px;color:var(--txd);margin-bottom:18px;}
.logo{width:36px;height:36px;background:linear-gradient(135deg,var(--c-heat),var(--c-solar));border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.field{margin-bottom:12px;}
.field label{display:block;font-size:13px;font-weight:600;color:var(--txd);margin-bottom:6px;}
.field input{width:100%;height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);color:var(--txt);padding:0 12px;font:inherit;font-size:16px;}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px;}
.btn{height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);font-weight:600;cursor:pointer;padding:0 16px;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);width:100%;margin-top:4px;}
.auth-err{color:var(--err);font-size:13px;margin-top:10px;min-height:18px;text-align:center;}

/* ── Layout ── */
.wrap{max-width:1100px;margin:0 auto;padding:0 16px 40px;}
.hd{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:22px 0 14px;}
.hd-kicker{font-size:13px;color:var(--txd);font-weight:500;}
.hd h1{font-size:24px;font-weight:800;letter-spacing:-.02em;margin-top:2px;line-height:1.15;}
.hd-r{display:flex;align-items:center;gap:8px;flex-shrink:0;margin-left:auto;}
.fresh{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border-radius:100px;border:1px solid var(--line2);
  background:var(--card);font-size:13px;font-weight:500;white-space:nowrap;}
.fresh-dot{width:8px;height:8px;border-radius:50%;background:var(--txf);flex-shrink:0;}
.fresh.ok .fresh-dot{background:var(--ok);} .fresh.warn .fresh-dot{background:var(--warn);} .fresh.err .fresh-dot{background:var(--err);}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line2);background:var(--card);cursor:pointer;
  font-size:15px;display:inline-flex;align-items:center;justify-content:center;}
.icon-btn:active{transform:scale(.94);}
@media(max-width:560px){ .fresh-long{display:none;} .hd h1{font-size:21px;} }

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px;}
.span-12{grid-column:span 12;} .span-7{grid-column:span 7;} .span-5{grid-column:span 5;} .span-6{grid-column:span 6;}
@media(max-width:900px){ .span-7,.span-5,.span-6{grid-column:span 12;} }

.alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;margin-bottom:16px;
  background:var(--warn-bg);border:1px solid rgba(250,178,25,.35);font-size:14px;line-height:1.45;}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow);min-width:0;}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.card-h h2{font-size:15px;font-weight:700;display:flex;align-items:center;gap:8px;}
.tag{font-size:12px;font-weight:600;padding:3px 10px;border-radius:100px;background:var(--card2);color:var(--txd);white-space:nowrap;}
.tag.ok{background:var(--ok-bg);color:var(--ok);} .tag.warn{background:var(--warn-bg);color:var(--warn);} .tag.err{background:var(--err-bg);color:var(--err);}

/* Energia: un solo numero grande (consumo casa) */
.hero-lbl{font-size:13px;color:var(--txd);font-weight:500;}
.hero{font-size:52px;font-weight:800;letter-spacing:-.03em;line-height:1.05;}
.hero small{font-size:20px;font-weight:600;color:var(--txd);margin-left:4px;letter-spacing:0;}
.hero-sub{font-size:14px;color:var(--txd);margin-top:4px;line-height:1.4;}
@media(max-width:560px){ .hero{font-size:44px;} }
.mix{display:flex;gap:2px;height:14px;margin:18px 0 10px;border-radius:7px;overflow:hidden;background:var(--card2);}
.mix-seg{height:100%;min-width:0;transition:flex-grow .6s ease;}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--txd);}
.legend span{display:inline-flex;align-items:center;gap:6px;}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.legend i.ln{height:2px;width:14px;border-radius:1px;}
.legend b{color:var(--txt);font-weight:600;}

.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:18px;}
.tiles.t3{grid-template-columns:repeat(3,minmax(0,1fr));}
.tiles.t2{grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:560px){ .tiles,.tiles.t3{grid-template-columns:repeat(2,minmax(0,1fr));} }
.tile{background:var(--card2);border-radius:12px;padding:12px 14px;min-width:0;}
.tile-l{font-size:12px;color:var(--txd);font-weight:500;display:flex;align-items:center;gap:6px;}
.tile-l i{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.tile-v{font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:4px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tile-v small{font-size:13px;font-weight:600;color:var(--txd);margin-left:2px;}
.tile-s{font-size:12px;color:var(--txd);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.meter{height:6px;border-radius:3px;background:var(--line2);margin-top:8px;overflow:hidden;}
.meter>div{height:100%;border-radius:3px;background:var(--c-batt);transition:width .6s ease;}

/* Meteo */
.wx{display:flex;align-items:center;gap:14px;}
.wx-ic{font-size:44px;line-height:1;}
.wx-t{font-size:44px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.wx-d{font-size:14px;color:var(--txd);margin-top:4px;}
.wx-src{font-size:12px;color:var(--txf);margin-top:14px;}

/* Grafico di oggi */
.chart-wrap{position:relative;margin-top:14px;}
.chart-wrap svg{display:block;width:100%;height:220px;overflow:visible;touch-action:pan-y;}
.chart-wrap .ax{font-size:11px;fill:var(--txf);font-family:var(--sans);}
.chart-wrap .gl{stroke:var(--line);stroke-width:1;}
.chart-tip{position:absolute;top:0;pointer-events:none;background:var(--card);border:1px solid var(--line2);border-radius:10px;
  padding:8px 10px;font-size:12px;line-height:1.5;box-shadow:0 6px 20px rgba(0,0,0,.12);white-space:nowrap;z-index:2;}
.chart-tip b{font-weight:700;}
.chart-tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}
.chart-empty{height:220px;display:flex;align-items:center;justify-content:center;text-align:center;color:var(--txd);font-size:14px;
  background:var(--card2);border-radius:12px;margin-top:14px;padding:0 20px;line-height:1.5;}
.tbl-toggle{margin-top:12px;font-size:13px;font-weight:600;color:var(--accent);background:none;border:none;cursor:pointer;}
.tbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px;}
.tbl th,.tbl td{text-align:right;padding:6px 8px;border-bottom:1px solid var(--line);}
.tbl th:first-child,.tbl td:first-child{text-align:left;}
.tbl th{color:var(--txd);font-weight:600;}
.tbl-box{max-height:260px;overflow:auto;}

/* Pompa di calore */
.mode{display:flex;align-items:center;gap:12px;}
.mode-ic{width:44px;height:44px;border-radius:12px;background:var(--card2);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
.mode-t{font-size:17px;font-weight:700;}
.mode-s{font-size:13px;color:var(--txd);margin-top:2px;}
.ctl{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px 12px;padding:12px 0;border-top:1px solid var(--line);}
.ctl:first-of-type{margin-top:16px;}
.ctl-l{font-size:14px;font-weight:600;}
.ctl-s{font-size:12px;color:var(--txd);margin-top:2px;}
.step{display:inline-flex;align-items:center;gap:6px;}
.step button,.chip{height:38px;min-width:38px;border-radius:10px;border:1px solid var(--line2);background:var(--card2);font-weight:700;font-size:16px;cursor:pointer;}
.step b{min-width:56px;text-align:center;font-size:17px;}
.chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end;margin-left:auto;}
.chip{font-size:13px;font-weight:600;padding:0 12px;}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}
.step button:disabled,.chip:disabled{opacity:.5;}
.soon{display:flex;gap:16px;align-items:flex-start;}
.soon-ic{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--c-heat),var(--c-solar));display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;}
.soon h3{font-size:16px;font-weight:700;margin-bottom:4px;}
.soon p{font-size:14px;color:var(--txd);line-height:1.5;}
.soon ul{margin:10px 0 0 18px;font-size:14px;color:var(--txd);line-height:1.7;}
.prog{display:flex;height:12px;border-radius:6px;overflow:hidden;background:var(--card2);margin-top:6px;gap:1px;}
.prog div{height:100%;}
.prog-ax{display:flex;justify-content:space-between;font-size:11px;color:var(--txf);margin-top:4px;}

/* Collegamenti */
.src{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;}
.src:first-of-type{border-top:none;padding-top:0;}
.src-s{font-size:12px;color:var(--txd);margin-top:2px;}
.foot{font-size:12px;color:var(--txf);text-align:center;margin-top:22px;}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--txt);color:var(--bg);padding:10px 18px;border-radius:100px;font-size:13px;font-weight:600;box-shadow:0 6px 24px rgba(0,0,0,.25);z-index:9999;opacity:0;transition:opacity .2s;pointer-events:none;max-width:calc(100% - 32px);}
.toast.show{opacity:1;}
/* Selettore casa (solo per chi vede più impianti, es. Teo): casa mia + appartamenti */
.houses{display:flex;gap:6px;overflow-x:auto;padding:0 0 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.houses::-webkit-scrollbar{display:none;}
.houses[hidden]{display:none;}
.house{flex-shrink:0;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:100px;background:var(--card2);
  border:1px solid var(--line);color:var(--txd);font:600 13px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .15s,color .15s;}
.house:hover{color:var(--txt);border-color:var(--line2);}
.house.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);pointer-events:none;}
/* Casa Netatmo/Legrand: clima, luci, tapparelle */
.room{flex-wrap:nowrap;}
.room-l{flex:1;min-width:0;}
.room .ctl-l{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room .ctl-s{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0;}
.room-t{font-size:22px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;}
.room-t small{font-size:12px;color:var(--txd);font-weight:600;margin-left:2px;}
.room .step b{min-width:48px;}
@media(max-width:560px){ .room{flex-wrap:wrap;} .room-l{flex-basis:100%;} .room-t{margin-right:auto;} }
.grp+.grp{margin-top:14px;}
.grp-h{font-size:12px;font-weight:600;color:var(--txf);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.lights{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px;}
.lt{display:flex;align-items:center;gap:8px;min-height:46px;padding:8px 12px;border-radius:12px;border:1px solid var(--line);background:var(--card2);
  color:var(--txt);font:600 13px/1.2 var(--sans);text-align:left;cursor:pointer;transition:background .15s,border-color .15s;}
.lt-ic{font-size:16px;width:18px;text-align:center;color:var(--txf);flex-shrink:0;}
.lt-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;}
.lt-b{font-size:11px;color:var(--txd);}
.lt.on{background:color-mix(in srgb,var(--c-solar) 18%,var(--card));border-color:color-mix(in srgb,var(--c-solar) 55%,transparent);}
.lt:disabled{opacity:.45;cursor:default;}
.lt:active,.step button:active,.chip:active{transform:scale(.97);}
.busy{opacity:.55;pointer-events:none;}
.sh{display:flex;align-items:center;gap:12px;padding:8px 0;}
.sh+.sh{border-top:1px solid var(--line);}
.sh-l{flex:1;min-width:0;}
.sh-n{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sh-bar{height:5px;border-radius:3px;background:var(--card2);margin:6px 0 4px;overflow:hidden;max-width:220px;}
.sh-bar>div{height:100%;background:var(--c-grid);border-radius:3px;transition:width .6s ease;}