/* R4P · HMI Fluent — aggiornamento Fluent 2.
   Caricato per ultimo. Intestazione neutra in stile Mica (niente barra blu), navigazione moderna con indicatore a pillola,
   logo cliente visibile anche su tablet e grafici KPI Fluent (area cumulata, semicerchio, anello con bullet). */

:root{--radius-card:8px;--radius-pill:999px;--radius-header:6px;--radius-indicator:2px;--radius-control:4px;--radius-conveyor:22px;--chart:var(--accent);--chart-soft:color-mix(in srgb,var(--accent) 16%,transparent);--chart-plan:var(--muted);--nav-indicator:var(--accent)}
:root[data-theme=dark]{--chart:#479ef5}

/* ---------- Intestazione: superficie neutra (Mica), testo e controlli normali ---------- */
.header,:root[data-contrast=true] .header{background:var(--chrome);color:var(--text);border-bottom:1px solid var(--line)}
.header .brand img{filter:none!important;opacity:1}
.header .client-brand{color:var(--muted);border-color:var(--line)}
.header .header-recipe,.header .header-recipe strong,.header .clock strong,.header .user-name strong,.header .account-trigger>.icon,.header .language .icon{color:var(--text)}
.header .header-recipe small,.header .clock small,.header .user-name small{color:var(--muted)}
.header .header-user{border-color:var(--line)}
.header .avatar,.header .level{background:var(--accent-soft);color:var(--accent)}
.header .line-state{background:var(--green-soft);color:var(--green);border-radius:var(--radius-header)}
.header .line-state.state-idle{background:var(--amber-soft);color:var(--amber)}
.header .line-state.state-fault{background:var(--red-fill);color:#fff}
.header .line-state .state-icon{background:var(--green-fill);color:#fff;border-radius:var(--radius-control)}
.header .state-idle .state-icon{background:var(--amber-fill);color:#fff}
.header .state-fault .state-icon{background:#fff;color:var(--red-fill)}
:root[data-contrast=true] .header .line-state{background:var(--green-soft)}
.header .alarm-bell{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:var(--radius-header)}
.header .alarm-bell:hover{background:var(--inset-strong)}
.header .alarm-bell.has-alarms{background:var(--amber-soft);color:var(--amber);border-color:transparent}
.header .alarm-bell.critical{background:var(--red-fill);color:#fff;border-color:transparent}
.header .alarm-bell .badge{outline-color:var(--chrome);background:var(--red-fill);color:#fff}
.header .language select{background:var(--field);border-color:var(--strong);color:var(--text);border-radius:var(--radius-header)}
.header .account-trigger{border-radius:var(--radius-header)}
.header .account-trigger:hover,.header .account-trigger[aria-expanded=true]{background:var(--inset-strong)}

/* Tablet: il logo cliente resta visibile (brief: intestazione con loghi R4P e cliente). */
@media(min-width:561px) and (max-width:1100px){.header .client-brand{display:block;flex:none;font-size:10px;padding:6px 10px;margin-left:0}}

/* ---------- Navigazione Fluent 2: voci arrotondate, indicatore a pillola, icona piena sulla voce attiva ---------- */
.rail{background:var(--bg);border-right:0;gap:4px;padding-inline:8px}
.nav-item{position:relative;border-radius:var(--radius-card);transition:background-color .12s cubic-bezier(.33,0,.67,1),color .12s cubic-bezier(.33,0,.67,1)}
.nav-item:hover{background:var(--inset-strong)}
.nav-item:active{background:var(--line)}
.nav-item[aria-current=page]{background:var(--solid);color:var(--text);font-weight:600;box-shadow:0 0 0 1px var(--line),var(--shadow-2)}
.nav-item[aria-current=page] .icon{color:var(--accent)}
.nav-item[aria-current=page]::before{content:'';position:absolute;left:-8px;top:50%;width:3px;height:20px;bottom:auto;translate:0 -50%;border-radius:var(--radius-indicator);background:var(--nav-indicator);animation:nav-pill .2s cubic-bezier(.1,.9,.2,1)}
@keyframes nav-pill{from{height:6px}}
:root[data-theme=dark] .nav-item[aria-current=page]{background:var(--panel);box-shadow:0 0 0 1px var(--line)}
@media(max-width:560px){
 .rail{background:var(--chrome);border-top:1px solid var(--line)}
 .nav-item[aria-current=page]{background:var(--accent-soft);color:var(--accent);box-shadow:none}
 .nav-item[aria-current=page]::before{left:50%;top:auto;bottom:2px;width:18px;height:3px;translate:-50% 0}
}
@media(prefers-reduced-motion:reduce){.nav-item[aria-current=page]::before{animation:none}}

/* Pannelli: angoli Fluent 2 (8px) sulle superfici principali. */
.card,.kpi-grid,.synoptic{border-radius:var(--radius-card)}

/* ---------- KPI: area cumulata contro piano ---------- */
.fl-cumulative{flex:1;display:flex;flex-direction:column;margin:12px 0 10px;min-height:120px}
.fl-chart-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;font-size:12px;color:var(--secondary)}
.fl-chart-head span{display:inline-flex;align-items:center;gap:6px}
.fl-chart-head b{margin-left:auto;padding:2px 8px;border-radius:var(--radius-control);font-size:12px;font-weight:600}
.fl-chart-head b.good{background:var(--green-soft);color:var(--green)}.fl-chart-head b.low{background:var(--amber-soft);color:var(--amber)}
.fl-key{width:14px;height:3px;border-radius:var(--radius-indicator)}
.fl-key.actual{background:var(--chart)}.fl-key.plan{background:var(--chart-plan)}
.fl-plot{position:relative;flex:1;min-height:84px;margin-top:8px;border-bottom:1px solid var(--line)}
.fl-plot svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fl-plot .area{fill:var(--chart-soft)}
.fl-plot .actual{fill:none;stroke:var(--chart);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.fl-plot .plan{fill:none;stroke:var(--chart-plan);stroke-width:1.5;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.fl-hit{position:absolute;top:0;bottom:0;width:14%;translate:-50% 0;cursor:default}
.fl-hit:first-of-type{translate:0 0}.fl-hit:last-of-type{translate:-100% 0}
.fl-hit::before{content:'';position:absolute;left:50%;top:var(--y);width:10px;height:10px;translate:-50% -50%;border-radius:50%;background:var(--chart);box-shadow:0 0 0 2px var(--panel);opacity:0;transition:opacity .1s}
.fl-hit:first-of-type::before{left:0}.fl-hit:last-of-type::before{left:100%;opacity:1}
.fl-hit::after{content:attr(data-tip);position:absolute;left:50%;top:calc(var(--y) - 14px);translate:-50% -100%;z-index:4;padding:6px 10px;border-radius:var(--radius-header);background:var(--solid);color:var(--text);box-shadow:0 0 0 1px var(--line),var(--shadow-8);font-size:12px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .1s}
.fl-hit:first-of-type::after{left:0;translate:0 -100%}.fl-hit:last-of-type::after{left:auto;right:0;translate:0 -100%}
.fl-hit:hover::before,.fl-hit:hover::after{opacity:1}
.fl-hours{display:flex;justify-content:space-between;margin-top:4px}

/* ---------- KPI: semicerchio della velocità ---------- */
.fl-arc{flex:1;display:flex;align-items:center;justify-content:center;margin:10px 0 0;min-height:110px}
.fl-arc svg{width:100%;max-width:240px;height:auto;overflow:visible}
.fl-arc .track,.fl-arc .fill{fill:none;stroke-width:16;stroke-linecap:round}
.fl-arc .track{stroke:var(--inset-strong)}
.fl-arc .fill{stroke:var(--chart);stroke-dasharray:0 100;transition:stroke-dasharray .6s cubic-bezier(.33,0,.67,1)}
.fl-arc.good .fill{stroke:var(--green-fill)}.fl-arc.low .fill{stroke:var(--amber-fill)}
.fl-arc .target{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.fl-arc text{fill:var(--muted);font-size:11px;font-family:var(--font)}
.fl-arc .target-label{fill:var(--text);font-weight:600}
.fl-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.fl-stats div{display:grid;gap:2px}
.fl-stats dt{font-size:11.5px;color:var(--muted)}
.fl-stats dd{margin:0;font-size:18px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}

/* ---------- KPI: anello OEE + bullet dei fattori ---------- */
.fl-oee{flex:1;display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;margin-top:12px}
.fl-ring{width:96px;height:96px;overflow:visible}
.fl-ring circle{fill:none;stroke-width:12}
.fl-ring .track{stroke:var(--inset-strong)}
.fl-ring .value{stroke:var(--chart);stroke-linecap:round}
.fl-ring .tick{stroke:var(--text);stroke-width:3;stroke-linecap:round}
.fl-ring .ring-label{fill:var(--text);font-size:13px;font-weight:600;font-family:var(--font)}
.fl-ring .ring-target{fill:var(--muted);font-size:10px;font-family:var(--font)}
.fl-bullets{display:grid;gap:10px}
.fl-bullet-head{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--secondary)}
.fl-bullet-head b{color:var(--text);font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.fl-bullet-track{position:relative;height:8px;margin-top:4px;border-radius:var(--radius-control);background:var(--inset-strong)}
.fl-bullet-track span{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-control);background:var(--green-fill)}
.fl-bullet.low .fl-bullet-track span{background:var(--amber-fill)}
.fl-bullet-track i{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;border-radius:var(--radius-indicator);background:var(--text)}
.fl-bullet small{display:block;margin-top:3px;font-size:11px;color:var(--muted)}

@media(max-width:560px){
 .fl-oee{grid-template-columns:1fr;justify-items:center;gap:10px}
 .fl-bullets{width:100%}
 .fl-stats dd{font-size:15px}
 .fl-chart-head b{margin-left:0}
}

/* ---------- Sinottico Fluent 2: nastri con rulli, schede con elevazione ---------- */
:root{--shadow-2:0 0 2px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.14);--shadow-4:0 0 2px rgba(0,0,0,.12),0 2px 4px rgba(0,0,0,.14);--shadow-8:0 0 2px rgba(0,0,0,.12),0 4px 8px rgba(0,0,0,.14);--roller:#c8ced6;--roller-core:#8a96a3}
:root[data-theme=dark]{--shadow-2:0 0 2px rgba(0,0,0,.24),0 1px 2px rgba(0,0,0,.28);--shadow-4:0 0 2px rgba(0,0,0,.24),0 2px 4px rgba(0,0,0,.28);--shadow-8:0 0 2px rgba(0,0,0,.24),0 4px 8px rgba(0,0,0,.28);--roller:#4a525c;--roller-core:#8f9aa6}
.machine{background:var(--inset);border:0;border-radius:var(--radius-card);padding:18px}
:root[data-contrast=true] .machine{box-shadow:inset 0 0 0 1px var(--line)}

/* Nastro: superficie arrotondata con un rullo a ciascuna estremità. */
.conveyor{position:relative;border:0;border-radius:var(--radius-conveyor);background:var(--belt);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;padding:0 22px}
.conveyor::before,.conveyor::after{content:'';position:absolute;top:50%;width:30px;height:30px;translate:0 -50%;border-radius:50%;background:radial-gradient(circle,var(--roller-core) 0 4px,var(--roller) 4.5px)!important;box-shadow:0 0 0 2px var(--belt);z-index:2;pointer-events:none}
.conveyor::before{left:6px}.conveyor::after{right:6px}
.conveyor .machine-belt{border-radius:0}
.conveyor:hover{box-shadow:inset 0 0 0 2px var(--accent)}
.belt-track{stroke:transparent}
.belt-mark{stroke:color-mix(in srgb,var(--slat) 70%,transparent)}
.belt-product{fill:var(--product);stroke:var(--product-edge);stroke-width:1;rx:4px;filter:drop-shadow(0 1px 1px rgba(0,0,0,.12))}
.scan-zone{background:color-mix(in srgb,var(--accent) 10%,transparent)!important;border-color:var(--accent)!important}
.lane.warn .conveyor{box-shadow:inset 0 0 0 2px var(--amber-fill)}.lane.fault .conveyor{box-shadow:inset 0 0 0 2px var(--red-fill)}

/* Telecamere: scheda flottante con icona in un cerchio d'accento. */
.camera{border:0;border-radius:var(--radius-card);background:var(--solid);box-shadow:var(--shadow-4);padding:5px 12px 5px 5px;gap:8px;z-index:3}
.camera>.icon{box-sizing:content-box;width:16px;height:16px;padding:6px;border-radius:50%;background:var(--accent-soft);color:var(--accent)}
.camera:hover{box-shadow:var(--shadow-8);border:0}
.camera.warn{background:var(--amber-soft);box-shadow:var(--shadow-4),inset 0 0 0 1px var(--amber-fill)}
.camera.warn>.icon{background:var(--amber-fill);color:#fff}
.camera.fault{background:var(--red-soft);box-shadow:var(--shadow-4),inset 0 0 0 1px var(--red-fill)}
.camera.fault>.icon{background:var(--red-fill);color:#fff}

/* Robot: schede Fluent 2 con elevazione; si sollevano al passaggio. */
.robot{border:0;border-radius:var(--radius-card);background:var(--solid);box-shadow:var(--shadow-2);transition:box-shadow .15s cubic-bezier(.33,0,.67,1),translate .15s cubic-bezier(.33,0,.67,1)}
.robot:hover{background:var(--solid);box-shadow:var(--shadow-8);translate:0 -2px;border:0}
.robot:active{box-shadow:var(--shadow-2);translate:0 0}
.robot.warn{background:var(--amber-soft);box-shadow:var(--shadow-2),inset 0 0 0 2px var(--amber-fill)}
.robot.fault{background:var(--red-soft);box-shadow:var(--shadow-2),inset 0 0 0 2px var(--red-fill)}
.robot.off{background:transparent;box-shadow:inset 0 0 0 1px var(--strong)}
.robot-tool{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--radius-pill);background:var(--accent-soft)}
.robot.tool-grip .robot-tool{background:color-mix(in srgb,var(--grip) 16%,transparent)}
:root[data-contrast=true] .robot,:root[data-contrast=true] .camera{box-shadow:inset 0 0 0 1px var(--strong)}
@media(prefers-reduced-motion:reduce){.robot{transition:none}.robot:hover{translate:none}}

/* ---------- Intestazione mobile: due righe, tutti gli elementi del brief ---------- */
@media(max-width:560px){
 .header{display:grid;height:auto;min-height:100px;padding:12px 12px 10px;grid-template-columns:84px minmax(0,1fr) 84px;grid-template-rows:38px 30px;row-gap:8px;column-gap:8px;align-items:center}
 .header .spacer{display:none}
 .header .brand{grid-area:1/1;width:auto;justify-self:start}
 .header .brand img{width:60px}
 .header .line-state{grid-area:1/2;justify-self:center}
 .header .alarm-bell{grid-area:1/3;justify-self:start}
 .header .header-user{grid-area:1/3;justify-self:end;border:0;padding:0}
 .header .client-brand{display:grid;place-items:center;grid-area:2/1;width:64px;height:28px;padding:0 3px;margin:0;font-size:0;letter-spacing:.06em;white-space:nowrap;border:1px dashed var(--strong);border-left:1px dashed var(--strong);border-radius:var(--radius-control)}
 .header .client-brand::after{content:'CLIENTE';font-size:10px;color:var(--muted)}
 .header .header-recipe{display:flex;grid-area:2/2;justify-content:center;text-align:center;gap:4px;min-width:0}
 .header .header-recipe>.icon:first-child{display:none}
 .header .header-recipe small{font-size:10px}.header .header-recipe strong{font-size:11px}
 .header .clock{display:grid;grid-area:2/3;justify-self:start;text-align:left;line-height:1.1}
 .header .clock strong{font-size:11.5px}.header .clock small{display:none}
 .header .language{grid-area:2/3;justify-self:end;width:auto}
 .header .language select{width:38px;padding:0;text-align:center;text-align-last:center;-webkit-appearance:none;appearance:none;height:28px}
 .header .language .icon{display:none}
}
.robot.tool-vac .robot-tool{background:var(--accent-soft);color:var(--vac)}.robot.tool-grip .robot-tool{color:var(--grip)}
@media(max-width:560px){
 .header .language select{width:32px}
 .header .clock strong{font-size:11px}
}
@media(max-width:350px){
 .header .line-state small{display:none}.header .line-state strong{white-space:nowrap}
 .header .clock small{display:none}
}

/* ---------- Pastello per schemi, grafici e pulsanti (allarmi, sfondi e testi restano invariati) ---------- */
:root{--pastel-blue:#b9d4f4;--pastel-blue-strong:#7fa9de;--pastel-green:#a9dcb9;--pastel-amber:#f5d796;--pastel-lilac:#cdc2f1;--pastel-ink:#0b3a66;--pastel-mint:#bfe6dc}
:root[data-theme=dark]{--pastel-blue:#8fb3e2;--pastel-blue-strong:#a9c8f0;--pastel-green:#8ccaa1;--pastel-amber:#e6c57c;--pastel-lilac:#b6a8e6;--pastel-ink:#0b2540;--pastel-mint:#8fcdbd}
:root{--chart:var(--pastel-blue-strong);--chart-soft:color-mix(in srgb,var(--pastel-blue) 45%,transparent);--nav-indicator:var(--pastel-blue-strong)}
:root[data-theme=dark]{--chart:var(--pastel-blue-strong)}
/* Grafici KPI */
.fl-arc .fill,.fl-arc.good .fill{stroke:var(--pastel-green)}
.fl-arc:not(.good):not(.low) .fill{stroke:var(--pastel-blue)}
.fl-arc.low .fill{stroke:var(--pastel-amber)}
.fl-ring .value{stroke:var(--pastel-blue-strong)}
.fl-bullet-track span{background:var(--pastel-green)}
.fl-bullet.low .fl-bullet-track span{background:var(--pastel-amber)}
.kpi-grid .meter span{background:var(--pastel-blue-strong)!important}
.fl-chart-head b.good{background:color-mix(in srgb,var(--pastel-green) 45%,transparent);color:var(--text)}
.fl-chart-head b.low{background:color-mix(in srgb,var(--pastel-amber) 50%,transparent);color:var(--text)}
/* Schema del sinottico */
:root{--vac:#7fa9de;--grip:#a596dc;--diagram-fill:var(--pastel-blue);--diagram-base:color-mix(in srgb,var(--pastel-blue) 70%,var(--solid));--product:var(--solid);--product-edge:color-mix(in srgb,var(--pastel-blue-strong) 70%,var(--strong))}
:root[data-theme=dark]{--vac:#a9c8f0;--grip:#c2b5ee;--diagram-fill:#3b5068;--diagram-base:#4c6584}
.diagram-vac{stroke:var(--vac);fill:color-mix(in srgb,var(--pastel-blue) 55%,transparent)}
.diagram-grip{stroke:var(--grip)}
.robot.tool-vac .robot-tool{background:color-mix(in srgb,var(--pastel-blue) 55%,transparent);color:var(--text)}
.robot.tool-grip .robot-tool{background:color-mix(in srgb,var(--pastel-lilac) 60%,transparent);color:var(--text)}
.scan-zone{background:color-mix(in srgb,var(--pastel-blue) 35%,transparent)!important;border-color:var(--pastel-blue-strong)!important}
.camera>.icon{background:color-mix(in srgb,var(--pastel-blue) 60%,transparent);color:var(--pastel-ink)}
:root[data-theme=dark] .camera>.icon{color:#fff}
.legend-tool.vac{color:var(--vac)}.legend-tool.grip{color:var(--grip)}
/* Pulsanti: pieni in pastello con testo scuro; il rosso dei pulsanti d'allarme resta invariato. */
fluent-button.button.primary,fluent-button.button.go{--colorBrandBackground:var(--pastel-blue);--colorBrandBackgroundHover:var(--pastel-blue);--colorBrandBackgroundPressed:var(--pastel-blue-strong);--colorNeutralForegroundOnBrand:var(--pastel-ink);color:var(--pastel-ink)}

/* ---------- Reveal Fluent su ogni elemento selezionabile (come il pulsante della landing) ----------
   Al passaggio: luce morbida che segue il puntatore, contorno pastello e freccia che avanza. Solo con mouse. */
@media(hover:hover) and (pointer:fine){
 :is(button,a,fluent-button,[data-action],[data-page]):not(.skip-link):not([disabled]):hover{
  background-image:radial-gradient(160px circle at var(--fx,50%) var(--fy,50%),color-mix(in srgb,var(--pastel-blue) 42%,transparent),transparent 70%)!important;
  outline:1px solid color-mix(in srgb,var(--pastel-blue-strong) 70%,transparent);outline-offset:-1px}
 :root[data-theme=dark] :is(button,a,fluent-button,[data-action],[data-page]):not(.skip-link):not([disabled]):hover{
  background-image:radial-gradient(160px circle at var(--fx,50%) var(--fy,50%),color-mix(in srgb,var(--pastel-blue) 22%,transparent),transparent 70%)!important}
 :is(button,a,fluent-button,[data-action],[data-page]) .icon{transition:transform .25s cubic-bezier(0,0,0,1)}
 :is(button,a,fluent-button,[data-action],[data-page]):not([disabled]):hover>.icon:last-child:not(:first-child),.header-recipe:hover>.icon:last-child{transform:translateX(3px)}
 .nav-item[aria-current=page]:hover{outline:0}
}

/* Icone Fluent System: regolari a riposo, piene e d'accento sulla voce attiva. */
.nav-icon{fill:currentColor!important;stroke:none!important}