/* Palette ATP condivisa: il blu scuro assicura contrasto sui controlli bianchi. */
:root{
 color-scheme:light;--brand:#1B9FE5;--background:#F5F9FC;--surface:#FFFFFF;--surface-soft:#EAF5FC;
 --border:#DCE7EF;--text:#102C40;--muted:#526D80;--blue:#0068A6;--green:#137333;--amber:#8A5D00;
 --red:#B42318;--radius:24px;--shadow:0 8px 28px #102c4005;
 font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--background);scroll-behavior:smooth}
body{margin:0;color:var(--text);line-height:1.5;min-width:0}
button,input,a{-webkit-tap-highlight-color:transparent}
button,input{font:inherit}
button,a,input{touch-action:manipulation}
button,a{transition:background-color .15s,border-color .15s,box-shadow .15s}
a{color:var(--blue);text-decoration:none}
button{cursor:pointer}
button:disabled{cursor:default;opacity:.45}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(2rem,3.7vw,3.15rem);letter-spacing:-.035em;line-height:1.14;font-weight:700;overflow-wrap:anywhere}
h2{font-size:1.07rem;font-weight:650;line-height:1.4}
h3{font-size:1rem;line-height:1.4}
img,svg{max-width:100%}
.skip-link{position:fixed;left:16px;top:-100px;z-index:20;background:var(--surface);padding:12px;border:1px solid var(--blue);opacity:0;pointer-events:none}
.skip-link:focus{top:12px;opacity:1;pointer-events:auto}
.topbar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px 24px;padding:16px 32px;background:var(--surface);border-bottom:1px solid #edf3f7}
.brand{justify-self:start;display:block;line-height:0}
.brand img{width:108px;height:auto}
.topbar nav{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.topbar nav a{min-height:44px;display:grid;place-items:center;padding:9px 14px;border:1px solid var(--border);border-radius:12px;color:var(--muted);font-size:.82rem;font-weight:600;white-space:nowrap}
.topbar nav a[aria-current="page"]{background:var(--blue);border-color:var(--blue);color:white}
.connection-status{justify-self:end;color:var(--muted);font-size:.72rem;text-align:right;overflow-wrap:anywhere}
.connection-status.error{color:var(--red)}
main{max-width:1440px;padding:44px 80px 28px;margin:auto;min-width:0}
.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 28px}
.hero>div{min-width:0}
.eyebrow{font-size:.68rem;font-weight:650;text-transform:uppercase;letter-spacing:.1em;color:var(--blue);margin-bottom:12px}
.subtitle{color:var(--muted);font-size:.88rem;margin-top:18px}
.refresh-info{display:flex;flex-direction:column;gap:4px;font-size:.72rem;color:var(--muted);text-align:right;flex-shrink:0}
.refresh-info time{font-size:.85rem;font-weight:600;color:var(--text)}
.notice{padding:12px 16px;border-radius:12px;margin-bottom:22px;overflow-wrap:anywhere;font-size:.8rem}
.notice{background:#FFF7E5;border:1px solid #dfcb9d;color:var(--amber)}
.gateway-panel{padding:12px 16px;border-radius:18px;margin-bottom:20px;border:1px solid #ffffff;
 background:linear-gradient(135deg,#edf5fc,#f9fbfd);box-shadow:0 8px 30px #102c4005}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;margin-bottom:18px}
.section-heading>div{min-width:0}
.section-heading .eyebrow{margin-bottom:5px}
.gateway-panel h2{font-size:.82rem;letter-spacing:-.02em}
.gateway-panel .section-heading{margin-bottom:8px;flex-wrap:wrap;gap:4px 12px}
.gateway-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:8px;
 align-items:start}
.gateway-item{--gateway-color:var(--muted);--gateway-tint:#edf1f5;min-width:0;
 padding:4px 10px;border-radius:12px;
 border:1px solid #ffffff;background:#ffffffd9;box-shadow:0 4px 16px #102c4005}
.gateway-item[data-status=online]{--gateway-color:var(--green);--gateway-tint:#eaf5ee}
.gateway-item[data-status=warning]{--gateway-color:var(--amber);--gateway-tint:#fff5e2}
.gateway-item[data-status=offline]{--gateway-color:var(--red);--gateway-tint:#fceeed}
.gateway-top{display:flex;align-items:center;gap:9px;min-height:36px}
.gateway-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;flex:none;
 color:var(--gateway-color);background:var(--gateway-tint)}
.gateway-icon svg{width:24px;height:24px}
.gateway-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
 gap:4px 10px;min-width:0;flex:1}
.gateway-heading h3{font-size:.8rem;line-height:1.4;letter-spacing:-.015em;overflow-wrap:anywhere;
 margin:0;min-width:0;flex:1 1 80px}
.gateway-item .status{white-space:normal;overflow-wrap:anywhere;font-size:.72rem;
 padding:2px 7px;border-radius:6px;background:var(--gateway-tint);color:var(--gateway-color)}
.gateway-metadata{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;
 padding:2px 0 6px;font-size:.7rem;color:var(--muted)}
.gateway-contact{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:3px}
.gateway-contact strong{font-size:inherit;color:var(--text);font-weight:500}
.gateway-id{overflow-wrap:anywhere;min-width:0}
.gateway-id::before{content:"\00b7 ";margin-right:4px}
.status{display:inline-flex;align-items:center;gap:5px;font-size:.7rem;color:var(--green);flex-shrink:0}
.status:before{content:"";width:7px;height:7px;flex:0 0 7px;background:currentColor;border-radius:50%}
.status.late,.status.warning{color:var(--amber)}
.status.unknown,.status.unavailable,.status.never_seen{color:var(--muted)}
.status.offline{color:var(--red)}
#gateway-count{font-size:.73rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.fleet-tools{display:flex;gap:12px;margin-bottom:26px;align-items:center}
.search-field{min-width:0;display:flex;align-items:center;gap:10px;flex:1;background:white;border:1px solid var(--border);border-radius:12px;padding:0 15px;min-height:48px;color:var(--muted)}
.search-field input{min-width:0;width:100%;border:0;outline:0;background:transparent;padding:12px 0;color:var(--text);font-size:.82rem}
.search-field:focus-within{outline:3px solid var(--blue);outline-offset:3px}
.search-field input::placeholder{color:var(--muted);opacity:1}
.segmented,.range-controls{display:flex;gap:8px;min-width:0}
.segmented button,.range-controls button,.pagination-button{min-height:46px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 18px;color:var(--muted);font-size:.78rem;font-weight:600}
.segmented button[aria-pressed="true"],.range-controls button[aria-pressed="true"],.pagination-button[aria-current="page"]{background:var(--blue);color:white;border-color:var(--blue)}
/* Colonne automatiche: schede compatte, testi lunghi a capo e nessuna larghezza minima sul telefono. */
.device-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:10px}
.device-card{display:flex;flex-direction:column;min-width:0;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);box-shadow:var(--shadow)}
.device-card:hover{border-color:#87b9d7;box-shadow:0 10px 32px #102c400d}
/* Nome e foto hanno aree separate; il carico resta allineato in basso anche con nomi lunghi. */
.device-card{min-height:148px;gap:6px;overflow:hidden;container-type:inline-size}
.device-header{display:grid;grid-template-columns:minmax(0,1fr) clamp(76px,42%,140px);
 gap:8px;min-height:52px;align-items:start;flex:1}
.device-visual{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
/* Il centro dell'etichetta segue lo spostamento della foto, relativo alla stessa colonna. */
.device-identifier{position:relative;left:12%;padding:2px 7px;border-radius:6px;background:var(--surface-soft);
 /* La dimensione segue la larghezza della scheda, con limiti per mantenere compatta l'etichetta. */
 color:#245775;font-size:11px;font-size:clamp(11px,5cqi,13px);line-height:1.45;
 font-weight:600;font-variant-numeric:tabular-nums;
 overflow-wrap:anywhere;max-width:76%}
/* L'immagine ha spazio trasparente laterale: compensalo senza cambiare quota o proporzioni della sagoma. */
.device-photo{display:block;width:100%;height:auto;aspect-ratio:1735/906;
 object-fit:contain;object-position:right top;transform:translateX(12%);
 opacity:.95;pointer-events:none;user-select:none}
.device-card .load-reading{margin:0;min-height:40px}
.device-card .load-reading.invalid{align-items:flex-end}
.device-card .load-value{font-size:2.1rem}
.device-card .device-footer{margin-top:0}
.device-card h3{font-size:.85rem;overflow-wrap:anywhere;min-width:0}
.load-reading{display:flex;align-items:baseline;gap:6px;margin:6px 0 8px;min-width:0}
.load-value{font-size:1.8rem;line-height:1.2;letter-spacing:-.03em;font-weight:700;font-variant-numeric:tabular-nums}
.load-unit{color:var(--muted);font-size:.85rem}
.load-reading.invalid .load-value{font-size:1rem;letter-spacing:-.015em;color:var(--red);overflow-wrap:anywhere}
.load-reading.unavailable .load-value{color:var(--muted);font-size:1rem}
.device-footer{margin-top:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:4px 8px;font-size:.65rem;color:var(--muted)}
.device-footer .battery{min-width:0;overflow-wrap:anywhere}
.device-footer .battery.low{color:var(--amber)}
.device-footer .status{font-size:.65rem;max-width:100%;overflow-wrap:anywhere}
.list-footer{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-top:24px;color:var(--muted);font-size:.72rem}
#pagination{display:flex;gap:8px;flex-wrap:wrap}
.pagination-button{min-width:44px;padding:8px 15px}
.empty-state{grid-column:1/-1;padding:48px 24px;text-align:center;border:1px dashed var(--border);border-radius:20px;color:var(--muted);background:var(--surface)}
.empty-state h3{color:var(--text);margin-bottom:8px}
.back-link{display:inline-block;margin-bottom:25px;font-size:.83rem;padding:4px 0}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:24px}
/* Five equal cells on wide screens; existing narrow-screen breakpoints remain active. */
@media(min-width:1101px){#detail-metrics{grid-template-columns:repeat(5,minmax(0,1fr))}}
.battery-indicator{display:inline-flex;align-items:center;gap:7px;color:var(--green);white-space:nowrap}
.battery-indicator svg{flex:none;width:32px;height:17px}
/* Contorno e terminale attenuati lasciano risaltare il livello e la percentuale. */
.battery-indicator svg rect:first-child{stroke-width:1.4;stroke-opacity:.45;rx:3.5}
.battery-indicator svg rect:nth-child(2){opacity:.45}
.battery-indicator svg rect:nth-child(3){rx:1.8}
.battery-indicator.low{color:var(--red)}
.battery-indicator.unknown{color:var(--muted)}
.battery-number{font-variant-numeric:tabular-nums}
#detail-advanced summary{cursor:pointer;font-weight:650}
#detail-advanced[open] summary{margin-bottom:16px}
#detail-diagnostics{margin-top:16px}
.metric-card{min-width:0;padding:22px;border:1px solid var(--border);background:var(--surface);border-radius:20px}
.metric-card .label{font-size:.75rem;color:var(--muted)}
.metric-card .value{display:block;font-size:1.75rem;font-weight:650;margin-top:8px;line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.metric-card .value.invalid{color:var(--red);font-size:1.15rem}
.metric-card .description{display:block;font-size:.67rem;color:var(--muted);margin-top:8px}
.panel{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:var(--surface);min-width:0;margin-bottom:24px}
.unit-label,.muted{color:var(--muted);font-size:.75rem}
.unit-label{white-space:nowrap}
.range-controls{flex-wrap:wrap;margin-bottom:22px}
.range-controls button{flex:1;min-width:65px;padding:10px 12px;white-space:nowrap}
.chart-host{position:relative;min-height:290px;min-width:0}
.chart-host svg{display:block;width:100%;height:auto;aspect-ratio:2.6/1;overflow:visible}
.chart-axis-text{font-family:inherit;fill:var(--muted);font-size:12px}
.chart-grid-line{stroke:var(--border);stroke-width:1}
.chart-host .empty-state{padding:80px 16px;border:0}
.chart-note{font-size:.7rem;line-height:1.6;color:var(--muted);margin-top:12px}
.chart-readout{min-height:34px;font-size:.73rem;color:var(--muted);padding:6px 0;overflow-wrap:anywhere}
.chart-slider{width:100%;accent-color:var(--blue);margin-top:14px;min-height:24px}
.statistics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;border-top:1px solid var(--border);margin-top:18px;padding-top:18px}
.statistics .label{display:block;font-size:.68rem;color:var(--muted)}
.statistics .value{font-size:1.2rem;font-weight:600;font-variant-numeric:tabular-nums}
.radio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 18px;margin:0}
.radio-grid>div{min-width:0}
.radio-grid dt{font-size:.71rem;color:var(--muted)}
.radio-grid dd{margin:5px 0 0;font-size:.9rem;font-weight:600;overflow-wrap:anywhere}
.comparison-layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:20px;align-items:start}
.comparison-layout .chart-panel{margin-bottom:0}
.comparison-toolbar{
 display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:20px;
}
.comparison-toolbar .range-controls{margin:0}
.comparison-help{font-size:.75rem;color:var(--muted);margin-bottom:20px;line-height:1.6}
.latest-panel{overflow:hidden}
.load-legend{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:.72rem;color:var(--muted);margin-bottom:24px}
.load-legend>span{display:inline-flex;align-items:center;gap:7px}
.legend-dot{width:9px;height:9px;border-radius:50%;background:var(--blue)}
.legend-dot.alarm{background:var(--red)}
.legend-dot.error{background:var(--amber)}
.columns-layout{display:flex;gap:8px;min-width:0}
.columns-axis{position:relative;flex:0 0 34px;height:180px;margin-top:50px;color:var(--muted);font-size:.66rem}
.columns-axis span{position:absolute;right:0;transform:translateY(50%);font-variant-numeric:tabular-nums}
.columns-scroll{overflow-x:auto;min-width:0;flex:1;padding:12px 4px 10px;scrollbar-color:var(--border) transparent}
.columns-items{display:flex;gap:12px;min-width:100%;width:max-content}
.load-column{
 display:flex;flex-direction:column;align-items:stretch;flex:1 0 96px;width:96px;max-width:128px;
 padding:0;border:0;background:transparent;text-align:center;color:var(--text);border-radius:8px;
}
.column-track{
 display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:218px;
 background:repeating-linear-gradient(to top,var(--border) 0 1px,transparent 1px var(--grid-step));
 border-bottom:1px solid var(--border);padding:0 8px;
}
.column-value{font-size:.8rem;font-weight:650;white-space:nowrap;margin-bottom:7px;font-variant-numeric:tabular-nums}
.column-bar{display:block;flex-shrink:0;width:40px;max-width:100%;border-radius:7px 7px 0 0;background:var(--blue)}
.load-column.alarm .column-bar{background:var(--red)}
.load-column.error .column-bar{background:var(--amber)}
.column-bar.zero{height:3px!important;border-radius:2px}
.column-bar.missing{background:var(--border)}
.column-name{margin-top:12px;font-size:.73rem;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.column-status{font-size:.64rem;line-height:1.4;color:var(--muted);margin-top:5px;min-height:28px}
.load-column.alarm .column-status{color:var(--red);font-weight:600}
.load-column.error .column-status{color:var(--amber);font-weight:600}
.column-time{font-size:.62rem;color:var(--muted);margin-top:5px;line-height:1.5}
.load-column:hover .column-name,.load-column:focus-visible .column-name{color:var(--blue)}
.comparison-layout .chart-host{min-height:330px}
.series-panel{margin-bottom:0}
.compact{min-height:44px;padding:0 12px}
.series-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}
.text-button{background:none;border:0;color:var(--blue);padding:6px 0;font-size:.75rem;min-height:36px}
.small{font-size:.68rem;line-height:1.6;margin-top:12px}
.series-list{max-height:540px;overflow:auto;margin-top:14px;padding:2px 4px 6px 0}
.series-row{display:flex;gap:8px;align-items:center;min-height:52px;border-top:1px solid var(--border);font-size:.76rem}
.series-row label{display:flex;align-items:center;gap:9px;min-width:0;flex:1;cursor:pointer;padding:8px 0}
.series-row input{width:16px;height:16px;flex-shrink:0;accent-color:var(--blue);margin:0}
.series-swatch{width:20px;flex-shrink:0;border-top:3px solid var(--blue)}
.series-name{min-width:0;overflow-wrap:anywhere}
.series-row .text-button{font-size:.67rem;padding:8px 2px}
.page-footer{
 display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
 color:var(--muted);font-size:.72rem;margin-top:44px;padding-top:20px;border-top:1px solid var(--border);
}
.footer-brand{font-weight:600;letter-spacing:.02em}
.footer-signature{display:inline-flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto}
.footer-version{
 display:inline-flex;align-items:center;padding:4px 10px;border:1px solid var(--border);border-radius:999px;
 background:var(--surface-soft);color:var(--blue);font-size:.68rem;font-weight:650;white-space:nowrap;
}
/* Ogni griglia usa minmax(0,1fr): nomi e testi lunghi si restringono senza overflow. */
@media(max-width:1100px){
 main{padding:34px 32px 24px}
 .comparison-layout{grid-template-columns:minmax(0,1fr)}
 .series-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;max-height:350px}
 .metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .chart-host{min-height:240px}
 .topbar{gap:18px}
}
@media(max-width:650px){
 .brand img{width:94px}
 main{padding:28px 20px 20px}
 .hero{display:block;margin-bottom:24px}
 .hero>.status{margin-top:16px}
 .eyebrow{font-size:.62rem}
 .subtitle{font-size:.8rem;margin-top:16px}
 .refresh-info{flex-direction:row;text-align:left;gap:10px;margin-top:12px;font-size:.65rem}
 .refresh-info time{font-size:.65rem}
 .gateway-panel{padding:12px;margin-bottom:20px}
 .gateway-grid{grid-template-columns:minmax(0,1fr);gap:6px}
 .fleet-tools{flex-direction:column;align-items:stretch;gap:12px}
 .segmented button{flex:1;padding:10px 8px}
 .list-footer{align-items:stretch;flex-direction:column}
 #pagination{justify-content:center;gap:6px}
 .pagination-button{padding:8px 12px}
 .panel{padding:18px 16px;border-radius:20px}
 .metric-card{padding:17px 14px}
 .metric-grid{gap:12px}
 .metric-card .value{font-size:1.45rem}
 .metric-card .value.invalid{font-size:1rem}
 .section-heading{gap:10px;align-items:flex-start}
 .section-heading h2{font-size:.93rem}
 .section-heading>.muted{max-width:110px;text-align:right;font-size:.67rem}
 .range-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #comparison-ranges{grid-template-columns:repeat(2,minmax(0,1fr))}
 .range-controls button{min-width:0;padding:10px 6px;font-size:.73rem}
 .chart-host{min-height:160px}
 .chart-host svg{aspect-ratio:1.25/1}
 .statistics{gap:8px}
 .statistics .value{font-size:1rem}
 .statistics .label{font-size:.62rem}
 .radio-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
 .series-list{display:block;max-height:390px}
 .page-footer{flex-direction:column;align-items:flex-start;gap:12px;font-size:.68rem;margin-top:32px}
 .footer-signature{align-self:flex-end}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Moduli e account: campi allineati, azioni separate e target tattili di almeno 44 px. */
:root{--control-height:44px}
.fleet-account{grid-column:1/-1;display:grid;grid-template-columns:minmax(200px,320px) minmax(0,1fr) auto;align-items:center;gap:12px 24px;border-top:1px solid var(--border);padding-top:14px;font-size:.8rem}
.fleet-picker{display:flex;align-items:center;gap:10px;min-width:0}
.fleet-picker select{width:100%;min-width:0;text-overflow:ellipsis}
#fleet-top-summary{color:var(--muted);overflow-wrap:anywhere;line-height:1.6}
#fleet-empty{grid-column:1/-1;color:var(--muted)}
.account-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;flex-wrap:wrap}
#account-name{max-width:200px;overflow-wrap:anywhere;font-weight:600}
.login-panel{width:min(100% - 32px,440px);margin:clamp(24px,8vh,80px) auto;padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow)}
.login-logo{display:block;width:112px;height:auto;margin-bottom:24px}
.login-panel h1,.admin-view h1{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.2;letter-spacing:-.025em;margin-bottom:10px;overflow-wrap:anywhere}
.login-panel>p,.admin-view h1+p{color:var(--muted);font-size:.88rem;line-height:1.65;max-width:70ch;margin-bottom:22px}
.login-panel form{display:grid;gap:18px;margin:22px 0 0}
.admin-form,.configuration-form{display:flex;flex-direction:column;gap:20px;padding:24px;border:1px solid var(--border);border-radius:16px;background:var(--surface);margin:20px 0}
.admin-form h2{font-size:1rem;overflow-wrap:anywhere}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px 20px}
.form-field{display:flex;flex-direction:column;gap:8px;min-width:0;font-size:.85rem}
.field-label{display:block;min-height:1.5em;line-height:1.5;font-weight:600;overflow-wrap:anywhere}
.form-field small{font-size:.72rem;color:var(--muted);line-height:1.5;overflow-wrap:anywhere}
input:not([type=checkbox]):not([type=range]),select{min-height:var(--control-height)}
.login-panel input,.admin-view input:not([type=checkbox]),.admin-view select,.fleet-account select{width:100%;min-width:0;max-width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:8px;font:inherit;line-height:1.4;background:var(--surface);color:var(--text)}
input[readonly]{background:var(--background);color:var(--muted)}
button,.text-button,.chart-slider{min-height:var(--control-height)}
.login-panel button,.admin-view button,.fleet-account button,dialog button,#rename-sensor{min-height:var(--control-height);padding:10px 16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--blue);font:inherit;font-size:.8rem;line-height:1.45;white-space:normal;overflow-wrap:anywhere;max-width:100%}
button.primary-button{background:var(--blue);border-color:var(--blue);color:white;font-weight:600}
button.primary-button:hover{background:#005b91}
.form-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding-top:16px;border-top:1px solid var(--border)}
.form-actions small{margin-right:auto;color:var(--muted);font-size:.75rem;line-height:1.5}
.form-message{font-size:.82rem;line-height:1.6;overflow-wrap:anywhere;color:var(--text)}
.form-message:empty{display:none}
.assignment-picker{min-width:0;max-width:100%;margin:0;padding:12px;border:1px solid var(--border);border-radius:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:4px 12px}
.assignment-picker legend{font-size:.8rem;font-weight:600;padding:0 6px}
.check-field{display:flex;align-items:center;gap:10px;min-width:0;min-height:44px;padding:6px 0;font-size:.83rem;line-height:1.5;overflow-wrap:anywhere}
.check-field input[type=checkbox]{width:18px;height:18px;padding:0;margin:0;flex:0 0 18px;accent-color:var(--blue)}
.check-field>.field-label{order:1;min-height:0;font-weight:400}
.users-grid,.fleets-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:20px;margin:20px 0}
.users-grid .panel,.fleets-grid .admin-form{margin:0;min-width:0}
.admin-user{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:16px}
.admin-user>button{align-self:flex-end}
.admin-user>p{font-size:.82rem;line-height:1.6;color:var(--muted)}
.password-reset{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px;border-top:1px solid var(--border);padding-top:18px}
.fleet-form .form-grid{grid-template-columns:minmax(0,1fr)}
.configuration-notice{padding:12px 16px;background:var(--surface-soft);border:1px solid var(--border);border-radius:10px;font-size:.82rem;line-height:1.6;color:var(--muted);margin:16px 0 22px}
.sensor-picker{display:flex;flex-direction:column;gap:8px;max-width:560px;min-width:0;font-size:.85rem;font-weight:600}
.config-group{border:0;padding:0;margin:0;min-width:0}
.config-group+ .config-group{border-top:1px solid var(--border);padding-top:20px}
.config-group legend{font-size:1rem;font-weight:650;margin-bottom:14px;padding:0}
.zones-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin:24px 0}
.zones-toolbar small{margin-right:auto;color:var(--muted)}
.zones-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.zone-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;min-width:0}
.zone-heading{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.zone-heading h2{overflow-wrap:anywhere}
.zone-badge{font-size:.72rem;font-weight:600;color:var(--green);background:#edf7ef;border-radius:20px;padding:5px 10px}
.zone-badge.is-warning,.zone-warning{color:var(--amber);background:#fff7e5}
.zone-caption{font-size:.7rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:24px}
.zone-value{font-size:clamp(2.5rem,5vw,3.5rem);font-weight:700;letter-spacing:-.04em;line-height:1.2;margin:8px 0}
.zone-value span{font-size:1.4rem;font-weight:500;color:var(--muted);letter-spacing:0}
.zone-warning{font-size:.8rem;padding:10px 12px;border-radius:10px;margin-top:14px;overflow-wrap:anywhere}
.zone-details{border-top:1px solid var(--border);padding-top:16px;margin-top:20px}
.zone-details summary{cursor:pointer;font-size:.82rem;font-weight:600;color:var(--blue);min-height:32px}
.zone-member{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.zone-member a,.zone-member span{overflow-wrap:anywhere;font-size:.85rem}
.zone-member small{display:block;color:var(--muted);font-size:.72rem;overflow-wrap:anywhere}
.zone-member strong{font-size:.9rem;white-space:nowrap;font-variant-numeric:tabular-nums}
.zone-actions{display:flex;justify-content:flex-end;margin-top:18px}
.zones-note{font-size:.8rem;line-height:1.7;color:var(--muted);margin-top:22px}
.zone-editor{margin-bottom:24px}
.zone-options{border:0;padding:0;margin:0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.zone-options legend{font-weight:600;font-size:.9rem;margin-bottom:12px}
.zone-option{display:flex;gap:12px;align-items:center;padding:10px;min-width:0;overflow-wrap:anywhere;border-bottom:1px solid var(--border)}
.zone-option input{flex-shrink:0;accent-color:var(--blue);width:18px;height:18px}
.zone-option small{display:block;font-size:.72rem;color:var(--muted)}
@media(max-width:700px){.zones-grid,.zone-options{grid-template-columns:minmax(0,1fr)}.zone-card{padding:20px 16px}.zones-toolbar small{flex-basis:100%}}
.config-diagnostics summary{cursor:pointer;font-weight:650;color:var(--muted)}
.config-diagnostics>p{font-size:.8rem;color:var(--muted);margin-top:12px;line-height:1.5}
.battery-equivalent{color:var(--muted);font-size:.78rem;margin-top:14px;line-height:1.5}
dialog{width:min(700px,calc(100% - 32px));max-width:calc(100% - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border:1px solid var(--border);border-radius:16px;color:var(--text)}
dialog::backdrop{background:#102c4077}dialog h2{font-size:1.15rem;margin-bottom:12px}dialog p{font-size:.85rem;line-height:1.6;margin-bottom:12px}dialog li{font-size:.82rem;line-height:1.6;overflow-wrap:anywhere;margin:8px 0}dialog ul{padding-left:20px}
.override-list{padding:12px 12px 12px 32px;background:#fff7e5;border:1px solid #dfcb9d;border-radius:10px}
@media(max-width:1000px){.topbar{grid-template-columns:auto minmax(0,1fr)}.connection-status{grid-column:2;grid-row:1}.topbar nav{grid-column:1/-1;grid-row:2}.fleet-account{grid-template-columns:minmax(0,1fr) auto}#fleet-top-summary{grid-column:1/-1;grid-row:2}.users-grid,.fleets-grid{grid-template-columns:minmax(0,1fr)}}
@media(max-width:650px){.topbar{padding:14px 16px;gap:12px}.topbar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.topbar nav a{padding:9px 8px;font-size:.75rem;white-space:normal;text-align:center}.fleet-account{grid-template-columns:minmax(0,1fr);gap:12px;padding-top:12px}.fleet-picker{flex-direction:column;align-items:stretch;gap:6px}.fleet-picker select{font-size:1rem}.account-actions{justify-content:flex-start}.account-actions #account-name{margin-right:auto;max-width:45%}#fleet-top-summary{grid-column:1;grid-row:auto;font-size:.75rem}.login-panel{padding:22px;margin:24px auto}.form-grid{grid-template-columns:minmax(0,1fr);gap:16px}.admin-form,.configuration-form,.admin-user{padding:18px 16px;gap:18px}.form-actions{flex-direction:column;align-items:stretch}.form-actions button{width:100%}.form-actions small{margin:0}.password-reset{grid-template-columns:minmax(0,1fr)}.password-reset button{width:100%}.admin-user>button{align-self:stretch}.login-panel input,.admin-view input:not([type=checkbox]),.admin-view select{font-size:1rem}.users-grid,.fleets-grid{gap:16px}dialog{padding:20px 16px}main{padding:24px 16px 20px}}

/* Menu compatto su telefono; stato rete e selettore rimangono sempre visibili. */
.header-actions{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.nav-toggle{display:none}
.admin-user.is-admin{grid-column:1/-1}
@media(max-width:1000px){.header-actions{grid-column:2;grid-row:1}.header-actions .connection-status{grid-column:auto;grid-row:auto}}
@media(max-width:650px){.header-actions{flex-direction:column;align-items:flex-end;gap:6px}.header-actions .connection-status{font-size:.65rem}.nav-toggle{display:block;min-height:44px;padding:8px 14px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--blue);font:inherit;font-size:.8rem}.topbar nav{display:none}.topbar.is-menu-open nav{display:grid}.topbar.is-menu-open nav a:last-child:nth-child(odd){grid-column:1/-1}}

/* Riserva lo stesso spazio alle etichette dei campi affiancati, anche con testo ingrandito. */
.form-grid .field-label{min-height:3em}
.back-link{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:650px){.form-grid .field-label{min-height:0}}

/* Letture del grafico su righe distinte: nomi lunghi senza comprimere i valori. */
.sample-time{display:block;color:var(--muted);font-size:.72rem;margin:4px 0 10px}
.chart-sample-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px 14px}
.chart-sample-reading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-width:0;border-left:3px solid var(--blue);padding-left:8px;font-size:.75rem;line-height:1.5}
.chart-sample-reading .sample-name{min-width:0;overflow-wrap:anywhere}.chart-sample-reading strong{flex-shrink:0;color:var(--text);font-variant-numeric:tabular-nums}

/* I moduli flotta sono a colonna singola: non richiedono spazio aggiuntivo sulle etichette. */
.fleet-form .field-label{min-height:1.5em}
/* Il nome condiviso resta leggibile anche su schermi stretti. */
#detail-title,#detail-id{overflow-wrap:anywhere}
.sensor-heading{min-width:0;flex:1}
.sensor-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px 20px}
.sensor-title-row h1{min-width:0;margin:0}
#rename-sensor{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-shrink:0;
 min-height:44px;padding:10px 16px;font-size:.8rem;white-space:nowrap}
#rename-sensor svg{flex:none}
@media(max-width:650px){.sensor-title-row{align-items:flex-start;flex-direction:column;gap:12px}}
#sensor-name-status{font-size:.8rem;color:var(--muted)}
#sensor-name-dialog{width:min(480px,calc(100% - 32px));box-sizing:border-box}
#sensor-name-form{display:grid;gap:16px}
#sensor-name-form h2,#sensor-name-form p{margin:0}
.calibration-branches { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.calibration-panel { padding:24px; margin:20px 0; border:1px solid var(--border);
 border-radius:12px; background:var(--surface); min-width:0; }
.calibration-panel h2 { margin:0 0 12px; }
.calibration-panel>p { color:var(--muted); line-height:1.5; }
.calibration-panel .radio-grid { margin:16px 0; }
.calibration-panel .radio-grid dd { font-variant-numeric:tabular-nums; }
.calibration-panel .calibration-metrics { grid-template-columns:repeat(5,minmax(0,1fr)); }
.calibration-panel .calibration-tare-status { margin:16px 0 8px; }
.calibration-panel .calibration-transfer-status { display:flex; align-items:center; justify-content:space-between;
 gap:12px; padding:12px 16px; margin:0 0 20px; border:1px solid var(--blue); border-radius:8px;
 background:rgba(0,110,166,.07); color:var(--blue); font-weight:600; }
.calibration-progress { flex-shrink:0; padding:4px 12px; border-radius:6px; background:var(--blue);
 color:#fff; font-variant-numeric:tabular-nums; }
.calibration-panel .calibration-transfer-status[data-state="error"] { border-color:var(--red); color:var(--red); }
.calibration-chart { margin:0 0 20px; min-width:0; }
.calibration-chart-legend { display:flex; flex-wrap:wrap; gap:8px 20px; font-size:.75rem; }
.calibration-chart-source { margin-left:auto; color:var(--muted); }
.calibration-chart-key { display:inline-flex; align-items:center; gap:6px; }
.calibration-chart-key::before { content:""; width:20px; border-top:3px solid var(--blue); }
.calibration-chart-key.down::before { border-color:var(--amber); }
.calibration-chart-key.original::before { border-top:2px dashed var(--muted); }
.calibration-chart-key.sample::before { width:8px; height:8px; border:0; border-radius:50%; background:var(--text); }
.calibration-chart-plot { display:block; width:100%; overflow:visible; }
.calibration-chart-plot text { fill:var(--muted); font-size:12px; }
.calibration-chart-line { stroke-width:2.5; stroke:var(--blue); }
.calibration-chart-line.down { stroke:var(--amber); }
.calibration-chart-line.draft { stroke:var(--amber); stroke-dasharray:7 5; }
.calibration-chart-key.draft::before { border-color:var(--amber); border-top-style:dashed; }
.calibration-chart-knot.draft { stroke:var(--amber); }
.calibration-chart-line.original { stroke:var(--muted); stroke-width:1.5; stroke-dasharray:6 5; }
.calibration-chart-knot { fill:var(--surface); stroke:var(--blue); stroke-width:1.5; }
.calibration-chart-knot.down { stroke:var(--amber); }
.calibration-chart-guide { stroke:var(--muted); stroke-opacity:.6; stroke-dasharray:3 4; }
.calibration-chart-delta { stroke:var(--text); stroke-width:2; }
.calibration-chart-marker { fill:var(--blue); stroke:var(--surface); stroke-width:2; }
.calibration-chart-marker.original { fill:var(--surface); stroke:var(--muted); }
.calibration-chart-marker.interpolated.down { fill:var(--amber); }
.calibration-chart-caption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 16px;
 font-size:.8rem; font-variant-numeric:tabular-nums; margin:0; }
.calibration-chart-hint { font-size:.75rem; color:var(--muted); margin:8px 0 0; }
.calibration-transfer-status[data-state="error"] .calibration-progress { background:var(--red); }
.calibration-panel .calibration-live-state { border-left:3px solid var(--blue); padding-left:12px; }
.calibration-panel.is-paused .calibration-live-state { font-weight:600; }
.calibration-panel details { margin-top:20px; padding:16px 0; border-top:1px solid var(--border); }
.calibration-panel .form-actions { border-top:1px solid var(--border); padding-top:16px; }
@media(max-width:700px) { .calibration-panel { padding:16px; } }
@media(max-width:700px) { .calibration-panel .calibration-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } }
.calibration-row { display:flex; gap:8px; margin:8px 0; }
.calibration-row input { width:100%; min-width:0; }
.calibration-row button { flex-shrink:0; }
.calibration-column-heading { flex:1; min-width:0; font-size:.8rem; }
.calibration-column-spacer {
 visibility:hidden; flex-shrink:0; padding:0 16px; border:1px solid transparent; font-size:.8rem; line-height:1.45;
}
@media(min-width:701px) {
 .calibration-branches>.config-group+.config-group { border-top:0; padding-top:0; }
}
@media(max-width:700px) { .calibration-branches { grid-template-columns:1fr; } }

.calibration-chart-threshold { stroke:var(--red); stroke-width:1.5; stroke-dasharray:5 4; }
.calibration-chart-theoretical { fill:var(--surface); stroke:var(--amber); stroke-width:2; stroke-dasharray:3 2; }
.calibration-chart-theoretical.original { stroke:var(--muted); }

/* Schede panoramica: il flag del sensore resta distinto dalla validita' della misura. */
.device-card .redistribution-note{font-size:.65rem;font-weight:600;color:var(--blue);}
.device-card .load-alarm-note{font-size:.65rem;font-weight:600;color:var(--red);}
.device-card.load-alarm,.device-card.load-alarm:hover{border-color:var(--red);}
.device-card.load-alarm .load-value,.device-card.load-alarm .load-unit{color:var(--red);}
/* Due righe riservate: nomi, errori e valori mancanti non spostano il grafico al passaggio del cursore. */
#comparison-chart .chart-sample-reading{height:3em;overflow:hidden;}
#comparison-chart .chart-sample-reading .sample-name,
#comparison-chart .chart-sample-reading strong{flex:1;min-width:0;display:-webkit-box;
 -webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;}
#comparison-chart .chart-sample-reading strong{text-align:right;}
.calibration-panel .calibration-measurements{grid-template-columns:repeat(4,minmax(0,1fr));}
.calibration-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;}
.calibration-panel-heading h2{margin:0;}
.calibration-measure-state{font-size:.8rem;color:var(--muted);}
.calibration-measure-state[data-state="warning"]{color:var(--amber);}
.calibration-measure-state[data-state="normal"]{color:var(--green);}
.calibration-reception{padding-top:12px;border-top:1px solid var(--border);}
.calibration-table-summary{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;
 color:var(--muted);margin-top:12px;}
.calibration-active-step{color:var(--blue);}
@media(max-width:500px){.calibration-table-summary{flex-wrap:wrap;}
 .calibration-panel .calibration-transfer-status{flex-wrap:wrap;}
 .calibration-progress{max-width:100%;font-size:.8rem;}}

@media(max-width:500px){.calibration-panel .calibration-measurements{grid-template-columns:repeat(2,minmax(0,1fr));}}

.load-reading:has(.saturation-note){flex-wrap:wrap;}
.saturation-note{font-size:.75rem;font-weight:600;color:var(--amber);margin-left:8px;}