/* R4P · HMI Linea 01 — proposta SUPERFLAT.
   Stessa UX del Liquid Glass; cambia solo il materiale: campiture piene, nessuna ombra, sfocatura, gradiente o rifrazione.
   La gerarchia la danno colore di fondo, peso tipografico e spazio. Movimento breve, lineare, senza rimbalzi.
   Caricato per ultimo: sovrascrive token e superfici dei fogli comuni. */

:root:root{
 --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
 --bg:#e6e8ec;--bg-top:#e6e8ec;--solid:#ffffff;--panel:#ffffff;--field:#ffffff;--chrome:#ffffff;
 --card-glass:#ffffff;--glass-tint:#ffffff;--glass-fallback:#ffffff;--glass-focus:#eef0f3;--glass-edge:transparent;
 --inset:#f1f2f5;--inset-strong:#e4e6eb;--line:#e1e3e8;--strong:#c3c8d1;
 --text:#111318;--secondary:#454b56;--muted:#6a717d;
 --ink:#2747ff;--accent:#2747ff;--accent-soft:#e3e8ff;--on-ink:#ffffff;
 --green:#007a3d;--green-fill:#00b25c;--green-soft:#d6f5e4;
 --amber:#7a4b00;--amber-fill:#ffad0d;--amber-soft:#ffefc9;
 --red:#c4001e;--red-fill:#ff2d3f;--red-soft:#ffe0e3;
 --vac:#2747ff;--grip:#8a3ffc;
 --belt:#eceef2;--slat:#d5d9e0;--product:#ffffff;--product-edge:#9aa1ad;
 --diagram-stroke:#111318;--diagram-fill:#ffffff;--diagram-base:#111318;--diagram-joint:#ffffff;
 --shadow:none;--dialog-shadow:none;--glass-shadow:none;
 --chrome-spectrum:none;--panel-spectrum:none;--prism-edge:none;--selection-spectrum:none;
 --radius-sm:0;--radius-control:0;--radius-card:0;--radius-inset:0;
 --flat-ease:linear;--flat-fast:90ms;--on-amber:#1d1300;--scrim:rgba(11,11,13,.55);--bar-past:#b9c4ff;
}
:root:root[data-theme=dark]{
 --bg:#0b0b0d;--bg-top:#0b0b0d;--solid:#18181b;--panel:#18181b;--field:#18181b;--chrome:#18181b;
 --card-glass:#18181b;--glass-tint:#18181b;--glass-fallback:#18181b;--glass-focus:#26262b;--glass-edge:transparent;
 --inset:#111113;--inset-strong:#26262b;--line:#2a2a30;--strong:#4a4a52;
 --text:#f4f4f5;--secondary:#b4b4bc;--muted:#8d8d96;
 --ink:#4d6bff;--accent:#6b84ff;--accent-soft:#1d2450;--on-ink:#ffffff;
 --green:#3ee08a;--green-fill:#00c466;--green-soft:#0f3322;
 --amber:#ffcf5c;--amber-fill:#ffb31a;--amber-soft:#3d2c06;
 --red:#ff8a96;--red-fill:#ff3348;--red-soft:#43121a;
 --vac:#6b84ff;--grip:#b28cff;--bar-past:#3a4690;
 --belt:#111113;--slat:#2a2a30;--product:#3a3a42;--product-edge:#6c6c76;
 --diagram-stroke:#f4f4f5;--diagram-fill:#18181b;--diagram-base:#f4f4f5;--diagram-joint:#18181b;
}

/* Contrasto elevato: stessa palette superflat, testi secondari a piena tinta e bordi marcati. */
:root:root[data-contrast=true]{--secondary:var(--text);--muted:#2b2f36;--strong:#4a505b;--line:#8a909b;--bar-past:#8d9cff}
:root:root[data-theme=dark][data-contrast=true]{--muted:#e4e4e7;--strong:#c4c4cc;--line:#6a6a74;--bar-past:#4c5bc0}

/* ---------- Fondo: tinta unita, niente livelli animati ---------- */
html,body,:root[data-theme=dark] body{background:var(--bg)!important}
html::before,html::after,body::before,body::after{display:none!important;animation:none!important}

/* ---------- Superfici piatte: niente vetro, ombre, gradienti o bordi prismatici ---------- */
.header,.rail,.card,.kpi-grid,#dialog,.account-menu,.vision-box,.alarm-row,.notice,.critical-banner,.camera,.robot,.library-item,.toast,#toast{
 backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-image:none!important;box-shadow:none!important}
.header,.rail,.header[data-refraction=active],.rail[data-refraction=active]{background-color:var(--solid)!important;border:0!important}
.header::before,.rail::before,.card::before,.kpi-grid::before{display:none!important}
.card,.kpi-grid{background-color:var(--solid)!important;border:0!important;border-radius:var(--radius-card)!important}
.kpi-grid>.card,.kpi-grid>.status-card,.card .card{background-color:transparent!important;border-radius:0!important}
.kpi-grid>.card+.card{border-left:1px solid var(--line)!important}
.machine{background:var(--inset)!important;border:0!important;border-radius:var(--radius-inset)!important}
#dialog{border:0!important;border-radius:var(--radius-card)!important}
#dialog::backdrop{background:var(--scrim)!important;backdrop-filter:none!important}
.account-menu{border:2px solid var(--text)!important}

/* ---------- Tipografia: il peso fa la gerarchia ---------- */
body{font-family:var(--font)}
.metric-value{font-weight:800!important;letter-spacing:-.04em}
.page-heading h1,.card-heading h2,.synoptic h2,h1,h2{font-weight:750;letter-spacing:-.02em}
.metric-label{font-weight:650;text-transform:uppercase;letter-spacing:.06em;font-size:11px!important;color:var(--secondary)}

/* ---------- Controlli: pieni, angoli piccoli, hover = cambio di tinta immediato ---------- */
button,.button,select,input,.nav-item,.vision-box,.robot,.alarm-row,.header-recipe,.account-trigger,.lane-name{transition:background-color var(--flat-fast) var(--flat-ease),color var(--flat-fast) var(--flat-ease),border-color var(--flat-fast) var(--flat-ease)!important}
.button,button.button{border-radius:var(--radius-control)!important;box-shadow:none!important;background-image:none!important}
.button.primary,.button.go,button.primary{background:var(--accent)!important;color:var(--on-ink)!important;border-color:var(--accent)!important}
.button.danger{background:var(--red-fill)!important;color:#fff!important;border-color:var(--red-fill)!important}
.button:not(.primary):not(.go):not(.danger){background:var(--inset-strong)!important;border-color:transparent!important;color:var(--text)!important}
input:not([type=checkbox]):not([type=radio]),select,.stepper{background:var(--inset)!important;border:2px solid transparent!important;box-shadow:none!important;border-radius:var(--radius-control)!important}
input:not([type=checkbox]):not([type=radio]):focus,select:focus{border-color:var(--accent)!important;outline:none}
.read-only{background:transparent!important;border:2px dashed var(--line)!important;box-shadow:none!important}
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:2px}

/* Navigazione: voce attiva = blocco pieno d'accento. */
.nav-item{border-radius:var(--radius-control)!important;box-shadow:none!important}
.nav-item[aria-current=page]{background:var(--accent)!important;color:var(--on-ink)!important;box-shadow:none!important}
.nav-item[aria-current=page] *{color:var(--on-ink)!important}

/* Intestazione: blocchi pieni, stato linea a campitura. */
.header .line-state,.header .alarm-bell,.header .language select,.header-recipe{box-shadow:none!important;border:0!important;border-radius:var(--radius-control)!important}
.header .line-state{background:var(--green-soft)!important}
.header .line-state.state-idle{background:var(--amber-soft)!important}
.header .line-state.state-fault{background:var(--red-fill)!important;color:#fff!important}
.header .line-state .state-icon{border-radius:var(--radius-sm)!important}
.header .alarm-bell{background:var(--inset-strong)!important}
.header .client-brand>span{border-radius:var(--radius-sm)!important}
.brand img{filter:none!important;opacity:1!important}
.header .user-name .level{box-shadow:none!important;border-radius:0!important}
.avatar{border-radius:var(--radius-control)!important}

/* ---------- Stati: colori pieni, niente aloni; l'errore lampeggia a scatti ---------- */
.robot-id::after,.lane-name b::after{box-shadow:none!important;width:10px!important;height:10px!important;border-radius:0!important}
.robot.fault .robot-id::after,.lane.fault .lane-name b::after{animation:flat-blink 1s steps(1) infinite!important}
.robot.off .robot-id::after,.lane.off .lane-name b::after{box-shadow:inset 0 0 0 2px var(--muted)!important}
.legend i{box-shadow:none!important;border-radius:0!important}
.legend i.off{box-shadow:inset 0 0 0 2px var(--muted)!important}
@keyframes flat-blink{50%{opacity:.15}}
.badge,.chip,.delta,.severity{border-radius:0!important;box-shadow:none!important}
.badge.critical{box-shadow:none!important}
.critical-banner{background:var(--red-fill)!important;color:#fff!important;border-radius:var(--radius-card)!important}
.critical-banner .button{background:#fff!important;color:var(--red)!important;border:0!important}
.alarm-row{border:0!important;border-radius:var(--radius-inset)!important;background:var(--amber-soft)!important}
.alarm-row.critical{background:var(--red-soft)!important}
.notice{border-radius:var(--radius-inset)!important;border:0!important}
.severity.critical{background:var(--red-fill)!important;color:#fff!important}
.severity.warning{background:var(--amber-fill)!important;color:var(--on-amber)!important}

/* ---------- Sinottico ---------- */
.lane-body .conveyor,.conveyor{border:0!important;border-radius:var(--radius-sm)!important;background:var(--belt)!important;box-shadow:none!important}
.belt-track{stroke:var(--slat)!important;stroke-width:2!important}
.belt-mark{stroke:var(--slat)!important}
.belt-product{fill:var(--product)!important;stroke:var(--product-edge)!important;stroke-width:1.5!important;rx:0}
.product-seam{stroke:var(--product-edge)!important}
.scan-zone{background:color-mix(in srgb,var(--accent) 8%,transparent)!important;border-color:var(--accent)!important}
.lane.warn .conveyor{outline:3px solid var(--amber-fill);outline-offset:-3px}
.lane.fault .conveyor{outline:3px solid var(--red-fill);outline-offset:-3px}

/* Visioni: blocco pieno con fascia di stato. */
.vision-box{border:0!important;border-radius:var(--radius-inset)!important;background:var(--solid)!important;transform:none!important}
.vision-icon{border-radius:var(--radius-sm)!important;background:var(--v)!important;color:#fff!important}
.vision-box.warn{background:var(--amber-soft)!important}
.vision-box.fault{background:var(--red-soft)!important}

/* Robot: riquadro piatto; avviso ed errore diventano blocchi di colore pieno. */
.robot{border-radius:var(--radius-inset)!important}
.robot.warn{background:var(--amber-soft)!important;border:0!important}
.robot.fault{background:var(--red-soft)!important;border:0!important;animation:none!important}
.robot.off{background:transparent!important;border:2px dashed var(--strong)!important}
.flat-robot .flat-base,.flat-robot .flat-wrist{fill:var(--text)}
.flat-robot .flat-arm{stroke:var(--text);stroke-width:5;stroke-linecap:butt;fill:none}
.flat-robot .flat-floor{fill:var(--line)}
.flat-robot .flat-status{fill:var(--m,var(--muted))}
.robot.run .flat-robot .flat-status{fill:var(--green-fill)}
.robot.warn .flat-robot .flat-status{fill:var(--amber-fill)}
.robot.fault .flat-robot .flat-status{fill:var(--red-fill)}
.robot.tool-vac .flat-tool{fill:var(--vac)}
.robot.tool-grip .flat-tool{fill:var(--grip)}
.robot.off .flat-robot{opacity:.35}

/* ---------- Grafici piatti: rettangoli e linee pieni, senza arrotondamenti né aloni ---------- */
.plot .bar::before{border-radius:0!important;background:var(--bar-past)!important}
.plot .bar.now::before,.plot .bar:hover::before{background:var(--accent)!important}
.plot .bar::after,.spark-tip{border-radius:0!important;background:var(--text)!important;color:var(--solid)!important}
.goal{border-top:2px solid var(--text)!important;opacity:.55}
.spark .area,.spark.good .area,.spark.low .area{fill:none!important}
.spark .line,.spark.good .line,.spark.low .line{stroke:var(--accent)!important;stroke-width:2.5!important;stroke-linejoin:miter!important;stroke-linecap:butt!important}
.spark .target{stroke:var(--text)!important;stroke-width:1.5!important;opacity:.45}
.spark-dot,.spark-cross::after{border-radius:0!important;box-shadow:none!important}
.meter,.oee .meter{border-radius:0!important;background:var(--inset-strong)!important;height:10px!important}
.meter span{border-radius:0!important}
.oee .meter:has(.good),.oee .meter:has(.low){background:var(--inset-strong)!important}
.meter .tick{box-shadow:none!important;width:3px!important;opacity:1!important;background:var(--text)!important}

/* ---------- Movimento superflat: breve e lineare, niente rimbalzi o dissolvenze lunghe ---------- */
.card,.kpi-grid,.header,.rail{transition:none!important}
.plot .bar::before,.plot .bar::after,.spark-tip{transition-duration:var(--flat-fast)!important;transition-timing-function:var(--flat-ease)!important}

/* Mobile: stessi blocchi, nessuna variazione di materiale. */
@media(max-width:560px){
 .header{border-radius:var(--radius-card)!important}
}

/* Chip di stato nel riquadro robot: blocco pieno con margini veri, testo piccolo maiuscolo. */
.robot .chip,.robot.run .chip,.robot.warn .chip,.robot.fault .chip,.robot.off .chip{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 8px!important;border-radius:0!important;font-size:10px!important;font-weight:750!important;letter-spacing:.06em;text-transform:uppercase;line-height:1;white-space:nowrap}
.robot.fault .chip{background:var(--red-fill)!important;color:#fff!important}
.robot.warn .chip{background:var(--amber-fill)!important;color:var(--on-amber)!important}
.robot.off .chip{background:transparent!important;color:var(--muted)!important;box-shadow:inset 0 0 0 2px var(--strong)!important}
.robot .chip::before{display:none!important}

/* Superflat pieno: spigoli vivi ovunque, anche su avatar, interruttori, chip, indicatori e tooltip. */
*,*::before,*::after{border-radius:0!important}
/* Campanella: grigia a riposo, ambra con avvisi, rossa con un critico. */
.header .alarm-bell.has-alarms{background:var(--amber-fill)!important;color:var(--on-amber)!important}
.header .alarm-bell.critical{background:var(--red-fill)!important;color:#fff!important}
.header .alarm-bell.has-alarms *{color:inherit!important}

/* ---------- KPI superflat: tasselli, waffle, segmenti, scostamenti, perdite ---------- */
/* Pezzi per ora: un tassello per ora con la percentuale dell'obiettivo orario. */
.flat-hours{margin:12px 0 0}
.flat-hours-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px}
.flat-hour{position:relative;display:grid;align-content:space-between;height:46px;padding:5px 4px 4px;background:var(--bar-past);color:var(--text);cursor:default}
.flat-hour b{font-size:11px;font-weight:750;font-variant-numeric:tabular-nums}
.flat-hour small{font-size:10px;color:inherit;opacity:.75;font-variant-numeric:tabular-nums}
.flat-hour.hit{background:var(--accent);color:var(--on-ink)}
.flat-hour.near{background:var(--bar-past)}
.flat-hour.low{background:var(--amber-fill);color:var(--on-amber)}
.flat-hour.now{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--accent)}
.flat-hour::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 4px);translate:-50% 0;z-index:3;padding:4px 7px;background:var(--text);color:var(--solid);font-size:11px;font-weight:650;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity var(--flat-fast) var(--flat-ease)}
.flat-hour:hover::after{opacity:1}
.flat-hour:first-child::after{translate:0 0;left:0}.flat-hour:last-child::after{translate:0 0;left:auto;right:0}
.flat-caption{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;color:var(--muted);font-size:10.5px}
.flat-caption span{display:inline-flex;align-items:center;gap:5px}
.flat-caption i{width:9px;height:9px;background:var(--bar-past)}
.flat-caption i.hit{background:var(--accent)}.flat-caption i.low{background:var(--amber-fill)}
/* Turno: 30 quadrati da 1.000 pezzi che si riempiono dal basso. */
.flat-waffle{display:grid;grid-template-columns:repeat(15,minmax(0,1fr));gap:3px;margin-top:12px}
.flat-waffle i{--f:0;aspect-ratio:1;background:linear-gradient(to top,var(--accent) calc(var(--f)*100%),var(--inset-strong) 0)}

/* Velocità: 24 segmenti da 10 pz/min con la tacca del target. */
.flat-gauge{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;height:22px;margin-top:14px}
.flat-gauge i{position:relative;background:var(--inset-strong)}
.flat-gauge i.on{background:var(--accent)}
.flat-gauge.good i.on{background:var(--green-fill)}
.flat-gauge.low i.on{background:var(--amber-fill)}
.flat-gauge i.target::after{content:'';position:absolute;right:-2px;top:-5px;bottom:-5px;width:2px;background:var(--text)}
.flat-gauge-scale{position:relative;height:14px;margin-top:5px;color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
.flat-gauge-scale span{position:absolute;top:0;translate:-50% 0}
.flat-gauge-scale span:first-child{translate:0 0}.flat-gauge-scale span:last-child{translate:-100% 0}
.flat-gauge-scale .target{color:var(--text);font-weight:700}
/* Ultimi 30 minuti: colonne sopra (più veloce) o sotto (più lento) la linea del target. */
.flat-deviation{flex:1;display:flex;flex-direction:column;margin:12px 0 0;min-height:56px}
.flat-deviation svg{flex:1;width:100%;min-height:44px}
.flat-deviation .flat-zero{stroke:var(--text);stroke-width:1.5;vector-effect:non-scaling-stroke;opacity:.6}
.flat-deviation rect.over{fill:var(--green-fill)}
.flat-deviation rect.under{fill:var(--amber-fill)}

/* OEE: barra al 100% con OEE e tre perdite, poi un tassello per componente. */
.flat-loss{display:flex;gap:2px;height:30px;margin-top:12px}
.flat-loss span{min-width:4px}
.flat-loss .oee-part{display:flex;align-items:center;padding:0 8px;background:var(--accent);color:var(--on-ink);font-size:11px;white-space:nowrap}
.flat-loss .loss-part{position:relative}
.flat-loss .l0,.flat-loss-key .l0{background:var(--red-fill)}
.flat-loss .l1,.flat-loss-key .l1{background:var(--amber-fill)}
.flat-loss .l2,.flat-loss-key .l2{background:var(--grip)}
.flat-loss-key{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:6px;color:var(--muted);font-size:10.5px;font-variant-numeric:tabular-nums}
.flat-loss-key span{display:inline-flex;align-items:center;gap:5px}
.flat-loss-key i{width:9px;height:9px}
.flat-oee-tiles{display:grid;gap:3px;margin-top:10px}
.flat-oee-tile{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;column-gap:8px;padding:6px 8px;background:var(--green-soft)}
.flat-oee-tile.low{background:var(--amber-soft)}
.flat-oee-tile small{grid-row:1;font-size:11px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flat-oee-tile b{grid-row:1/3;grid-column:2;align-self:center;font-size:17px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.flat-oee-tile span{font-size:10px;color:var(--muted)}
.flat-oee-tile.good b{color:var(--green)}.flat-oee-tile.low b{color:var(--amber)}
@media(max-width:560px){
 .flat-gauge-scale span:last-child{display:none}
 .flat-hour{height:30px;padding:3px 2px;justify-items:center}
 .flat-hour b{display:none}
}

/* Riepilogo moduli nel box Turno: riempie lo spazio con un'informazione utile. */
.status-card{justify-content:flex-start}
.flat-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin:12px 0}
.flat-module{display:grid;gap:2px;padding:8px 10px;background:var(--green-soft)}
.flat-module b{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--green);font-variant-numeric:tabular-nums;line-height:1}
.flat-module b small{font-size:13px;font-weight:650;color:var(--muted)}
.flat-module span{font-size:11.5px;font-weight:600;color:var(--secondary)}
.flat-module.idle,.flat-module.stop{background:var(--inset-strong)}.flat-module.idle b,.flat-module.stop b{color:var(--text)}
.flat-module.warn{background:var(--amber-soft)}.flat-module.warn b{color:var(--amber)}
.flat-module.fault{background:var(--red-fill)}.flat-module.fault b,.flat-module.fault span,.flat-module.fault small{color:#fff}
.flat-module.off{background:transparent;box-shadow:inset 0 0 0 2px var(--strong)}
.status-card>.flat-modules+*{margin-top:auto}

/* Leggibilità: testi dei grafici più grandi. */
.flat-hour{height:52px}
.flat-hour b{font-size:14px}
.flat-hour small{font-size:11px}
.flat-caption,.flat-loss-key,.flat-gauge-scale{font-size:11.5px}
.flat-gauge{height:26px}
.flat-loss{height:34px}
.flat-loss .oee-part{font-size:12.5px;font-weight:750}
.flat-oee-tile small{font-size:12px}
.flat-oee-tile span{font-size:11px}
.flat-oee-tile b{font-size:19px}
.flat-deviation{margin-top:10px}
.flat-waffle{grid-template-columns:repeat(10,minmax(0,1fr));gap:3px}
.flat-hour{height:60px}
@media(max-width:560px){.flat-hour{height:34px}}
@media(max-width:560px){.flat-oee-tile small{white-space:normal;overflow:visible;font-size:11px}.flat-oee-tile b{font-size:16px}.flat-module b{font-size:18px}}

/* ---------- Leggibilità dei KPI: titoli di sezione, scale, unità ---------- */
.flat-section-title{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:14px;color:var(--text);font-size:12.5px;font-weight:700}
.flat-section-title span{color:var(--muted);font-weight:500;font-size:12px}
.flat-hour b{font-size:16px!important;line-height:1}
.flat-hour b small{font-size:10px;font-weight:650;margin-left:1px}
.flat-hour small{font-size:12px!important}
.flat-caption{font-size:12px!important;gap:6px 14px;margin-top:8px}
.flat-caption-title{flex-basis:100%;color:var(--text);font-weight:650}
.flat-waffle{margin-top:8px}
/* Scostamenti: valori massimo e minimo e target sulla linea dello zero. */
.flat-deviation .flat-section-title{margin-top:0}
.flat-deviation-plot{position:relative;flex:1;display:flex;margin-top:6px;padding-left:34px;min-height:70px}
.flat-deviation-plot svg{flex:1;width:100%;height:auto}
.flat-deviation-plot span{position:absolute;left:0;font-size:11.5px;font-weight:650;font-variant-numeric:tabular-nums;color:var(--secondary)}
.dev-max{top:0}.dev-min{bottom:0}
.dev-zero{top:var(--zero,50%);translate:0 -50%;color:var(--text)!important;font-size:10.5px!important;line-height:1;width:32px;white-space:normal}
.flat-deviation figcaption{padding-left:34px}
/* OEE: ogni componente porta la sua perdita con lo stesso colore del blocco nella barra. */
.flat-loss{height:38px!important}
.flat-loss .oee-part{font-size:14px!important}
.flat-oee-tile small{display:flex;align-items:center;gap:6px;font-size:13px!important}
.flat-oee-tile small i{flex:none;width:10px;height:10px}
.flat-oee-tile small i.l0{background:var(--red-fill)}.flat-oee-tile small i.l1{background:var(--amber-fill)}.flat-oee-tile small i.l2{background:var(--grip)}
.flat-oee-tile span{font-size:11.5px!important}
.flat-oee-tile b{font-size:21px!important}
.flat-gauge-scale{font-size:12px!important}
.flat-module span{font-size:12px}
@media(max-width:560px){.flat-hour b{display:none}.flat-deviation-plot,.flat-deviation figcaption{padding-left:28px}.flat-oee-tile b{font-size:17px!important}}
/* Turno: i tasselli dei moduli occupano lo spazio libero. */
.flat-modules{flex:1;align-items:stretch;min-height:76px}
.flat-module{align-content:center;padding:10px 12px}
.flat-module b{font-size:30px}
.flat-module b small{font-size:15px}
.flat-module span{font-size:12.5px}
.flat-gauge-scale span:last-child{translate:-50% 0}
.flat-gauge-scale .target{translate:-50% 0!important}
/* Logo: tinte piene (lettere quasi nere / bianche, 4 giallo) e più grande. */
.header .brand img{width:80px!important;filter:none!important;opacity:1!important}
@media(min-width:561px) and (max-width:1100px){.header .brand img{width:72px!important}}
@media(max-width:560px){.header .brand img{width:64px!important}}

/* ---------- KPI semplificati: una lettura principale per box ---------- */
.kpi-grid .flat-section-title{align-items:center;margin-top:16px;font-size:13px}
.kpi-grid .flat-section-title b{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--accent)}
.flat-waffle{flex:1;align-content:start;margin-top:10px}
.flat-note{margin:12px 0 0;font-size:13px;color:var(--secondary)}
.flat-note b{color:var(--text);font-weight:750}
.flat-gauge{height:44px!important;margin-top:18px}
.flat-gauge-scale{font-size:12.5px!important;margin-top:8px}
.flat-stats{flex:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3px;margin-top:16px;align-content:end}
.flat-stats div{display:grid;gap:4px;padding:10px;background:var(--inset-strong)}
.flat-stats small{font-size:11.5px;color:var(--secondary);font-weight:600}
.flat-stats b{font-size:22px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.flat-oee-tiles{flex:1;align-content:stretch;margin-top:14px}
.flat-oee-tile{align-content:center;padding:10px 12px!important}
.flat-oee-tile small{font-size:14px!important}
.flat-oee-tile span{font-size:12px!important}
.flat-oee-tile b{font-size:24px!important}
@media(max-width:560px){.flat-stats b{font-size:17px}.flat-stats div{padding:8px}.flat-oee-tile b{font-size:18px!important}.flat-gauge{height:30px!important}}

/* ---------- Hover superflat (lo stesso del pulsante della landing) ----------
   Su ogni elemento selezionabile una campitura entra da sinistra, lineare in 140ms; le frecce avanzano.
   La campitura è una tinta del colore del testo dell'elemento: si adatta a chiaro, scuro e pulsanti pieni. */
:is(button,a,fluent-button,[data-action],[data-page]):not(.skip-link):not(.brand):not([disabled]):not([aria-current=page]){
 --wipe:color-mix(in srgb,currentColor 12%,transparent);
 background-image:linear-gradient(var(--wipe),var(--wipe))!important;background-repeat:no-repeat!important;background-position:left center!important;background-size:0% 100%!important;
 transition:background-size 140ms linear,color 140ms linear!important}
:is(fluent-button.primary,fluent-button.go,fluent-button.danger,.button.primary,.button.go,.button.danger){--wipe:color-mix(in srgb,currentColor 24%,transparent)}
:is(button,a,fluent-button,[data-action],[data-page]):not(.skip-link):not(.brand):not([disabled]):not([aria-current=page]):is(:hover,:focus-visible){background-size:100% 100%!important}
:is(button,a,fluent-button,[data-action],[data-page]):not([disabled]) .icon{transition:transform 140ms linear}
: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(4px)}
@media(prefers-reduced-motion:reduce){:is(button,a,fluent-button,[data-action],[data-page]){transition:none!important}}

/* Icone della barra superflat: campiture piene, nessun tratto. */
.nav-icon{fill:currentColor!important;stroke:none!important}
/* Icone della barra a 24px esatti: ogni unità del disegno è un pixel, bordi netti. */
.rail .nav-icon{width:24px!important;height:24px!important}