/* Renesas MES: dense industrial HMI. Grey by default, colour only for the abnormal. Shares the Timmins layout; Renesas blue brand. */

:root{
  --brand:#1F3A93; --brand-dark:#162A6B; --brand-tint:#E3E8F6;
  --page:#E4E7EA; --panel:#FFFFFF; --border:#C9CDD1;
  --titlebar:#33383D; --nav:#2B2F33; --grid-head:#5B6670;
  --field:#EEF0F2; --divider:#E1E4E7; --text:#1D2226; --text-2:#4B5560;
  --stopped:#B45309; --warn-bg:#F7DFC2; --warn-fg:#7C2D12;
  --island-banner:#92400E; --island-chip:#F59E0B;
  --alarm-high:#B91C1C; --alarm-med:#C2650A; --complete:#2F4A68;
  --live-bg:#DCE6F7; --live-fg:#1E3A8A; --live-dot:#1D4ED8;
  --e10-prod:#33383D; --e10-standby:#C9CDD1; --e10-eng:#2F4A68; --e10-sched:#D97706; --e10-unsched:#B91C1C;
  --mono:'Cascadia Mono',Consolas,'Noto Sans Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--page); color:var(--text);
  font-family:'Segoe UI','Noto Sans',system-ui,sans-serif; font-size:13px; line-height:1.4;
  min-height:100vh; display:flex; flex-direction:column;
}
button{font-family:inherit}
.mono{font-family:var(--mono)}
.tnum{font-variant-numeric:tabular-nums}

/* header */
header.top{background:var(--brand); color:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; min-height:48px; padding-right:12px}
.menu-btn{width:56px; height:48px; border:0; background:var(--brand-dark); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:32px; height:32px}
.brand .name{font-size:15px; font-weight:700; letter-spacing:.02em}
.vbar{width:1px; height:24px; background:rgba(255,255,255,.35)}
.module-name{font-size:14px; font-weight:500}
.top-right{margin-left:auto; display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px}
.alarm-counts{display:flex; align-items:center; gap:2px; background:#fff; border-radius:2px; padding:3px 8px; color:var(--text)}
.alarm-counts span{display:inline-flex; align-items:center; gap:4px; padding:0 6px; font-weight:600}
.chip{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600}
.chip .dot{width:8px; height:8px; border-radius:50%; background:#fff}
.chip.island{background:var(--island-chip); color:var(--text); padding:4px 8px; border-radius:2px; font-weight:700}
.user{display:inline-flex; align-items:center; gap:6px; font-size:12px}

/* site picker */
.sites{display:inline-flex; background:var(--brand-dark); border-radius:3px; padding:2px; gap:2px}
.sites button{min-height:32px; padding:0 12px; border:0; border-radius:2px; background:transparent; color:#D7DDF3; font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.sites button[aria-pressed="true"]{background:#fff; color:var(--brand)}
.sites button .st{width:8px; height:8px; border-radius:50%; background:#8DA2E6}
.sites button[aria-pressed="true"] .st{background:var(--grid-head)}
.sites button .st.isl{background:var(--island-chip)}
.sites button .st.stop{background:var(--stopped)}

/* island banner */
.island-banner{background:var(--island-banner); color:#fff; padding:10px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px}
.island-banner strong{font-size:14px; letter-spacing:.05em}
.island-banner .grow{flex:1 1 420px}

/* body split: left nav + content */
.split{display:flex; flex-wrap:wrap; flex-grow:1; align-items:stretch}
nav.modules{flex:0 0 76px; background:var(--nav); display:flex; flex-direction:column; padding:6px 0; gap:2px}
nav.modules button{min-height:64px; border:0; background:transparent; color:#C9CDD1; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; font-weight:500; padding:4px 2px; text-align:center}
nav.modules button[aria-pressed="true"]{background:var(--brand); color:#fff}
.content{flex:999 1 560px; min-width:0; display:flex; flex-direction:column}

/* breadcrumb + footer bars */
.crumb{background:#fff; border-bottom:1px solid var(--border); padding:8px 16px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; min-height:40px}
.crumb .sep{color:#8A939B}
.crumb .here{color:var(--brand); font-weight:600}
.crumb .right{margin-left:auto; color:var(--text-2)}
main{padding:12px; display:flex; flex-direction:column; gap:12px}
footer.status{background:var(--nav); color:#D5D9DD; font-size:12px; display:flex; flex-wrap:wrap; align-items:center; gap:4px 20px; padding:6px 12px}
footer.status .right{margin-left:auto}

/* panels */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:2px; display:flex; flex-direction:column}
.panel > h2{margin:0; background:var(--titlebar); color:#fff; font-size:13px; font-weight:600; padding:8px 12px}
.panel > h2.alarm-head.alert{background:var(--stopped)}
.panel > h2 .sub{color:#D5D9DD; font-weight:400}
.panel > h2.flex{display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap}
.panel .body{padding:12px; display:flex; flex-direction:column; gap:10px}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px}
.row{display:flex; flex-wrap:wrap; gap:12px}
.col-main{flex:999 1 560px; min-width:0}
.col-side{flex:1 1 300px; min-width:0}

/* live badge */
.live{display:inline-flex; align-items:center; gap:4px; padding:0 6px; border-radius:2px; background:var(--live-bg); color:var(--live-fg); font-size:10px; font-weight:700; letter-spacing:.06em}
.live .dot{width:6px; height:6px; border-radius:50%; background:var(--live-dot); animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%{opacity:1}50%{opacity:.25}100%{opacity:1}}
@media (prefers-reduced-motion: reduce){ .live .dot{animation:none} .amr{transition:none !important} }

/* fields */
.field{background:var(--field); padding:4px 8px}
.label{font-size:11px; color:var(--text-2)}
.kv{display:flex; flex-direction:column; gap:2px}
.two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px}

/* bars */
.bar{position:relative; height:18px; background:#EEF0F2; border:1px solid #D5D9DD}
.bar > i{display:block; height:100%; background:var(--grid-head)}
.bar .marker{position:absolute; top:-3px; width:2px; height:24px; background:var(--text)}
.minibar{flex:1 1 auto; height:10px; background:#EEF0F2}
.minibar > i{display:block; height:100%; background:var(--grid-head)}

/* line state blocks */
.state3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px}
.state3 span{text-align:center; padding:12px 4px; font-weight:700; font-size:13px; letter-spacing:.04em; background:#EEF0F2; color:#6B747C}
.state3 span.on-run{background:var(--titlebar); color:#fff}
.state3 span.on-stop{background:var(--stopped); color:#fff}
.state3 span.on-isl{background:var(--island-banner); color:#fff}

/* tables */
.scroll-x{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13px}
thead tr{text-align:left; background:var(--grid-head); color:#fff}
th,td{padding:7px 10px}
tbody td{border-bottom:1px solid var(--divider)}
tbody tr.sel{background:var(--brand-tint)}
.cell-run{background:var(--titlebar); color:#fff}
.cell-risk{background:var(--stopped); color:#fff}
.cell-queued{background:#EEF0F2; color:var(--text)}
.cell-done{background:var(--complete); color:#fff}
.cell-hold{background:var(--warn-bg); color:var(--warn-fg)}
.cell-held{background:var(--alarm-high); color:#fff}
.statuscell{font-weight:700; font-size:12px; letter-spacing:.03em; white-space:nowrap; text-align:center}
.linkid{min-height:36px; padding:0; border:0; background:transparent; color:var(--brand); font-family:var(--mono); font-size:12px; font-weight:600; text-decoration:underline; cursor:pointer; text-align:left}
.hot{display:inline-block; padding:1px 6px; background:var(--alarm-high); color:#fff; font-size:10px; font-weight:700; letter-spacing:.06em; border-radius:2px}

/* toolbar + buttons */
.toolbar{display:flex; flex-wrap:wrap; gap:6px; padding:10px 12px; border-bottom:1px solid var(--divider)}
.btn{min-height:44px; padding:0 16px; border:0; background:var(--brand); color:#fff; font-size:13px; font-weight:600; cursor:pointer}
.btn.ghost{background:#fff; color:var(--brand); border:1px solid var(--brand)}
.btn.small{min-height:34px; padding:0 12px; font-size:12px}
.btn:disabled{background:#E1E4E7; color:#6B747C; cursor:default}
.push-right{margin-left:auto}

/* process flow */
.flow{display:grid; grid-auto-flow:column; grid-auto-columns:minmax(132px,1fr); min-width:1180px; padding:12px 8px}
.stage{display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; border-right:1px solid var(--divider)}
.stage:last-child{border-right:0}
.stage .nm{font-size:13px; font-weight:600; text-align:center; min-height:34px; display:flex; align-items:center}
.stage .st{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600; padding:2px 8px; background:#EEF0F2; color:var(--text)}
.stage.stopped .st{background:var(--stopped); color:#fff}
.stage.paused .st{background:var(--island-chip); color:var(--text)}
.stage .glyph{width:104px; height:72px; border:1px solid var(--border); background:#FAFBFB; display:flex; align-items:center; justify-content:center; color:var(--text-2)}
.stage.stopped .glyph{border:2px solid var(--stopped)}
.stage.paused .glyph{border:2px solid var(--island-chip)}
.stage .rd{font-size:11px; color:var(--text-2); text-align:center; min-height:30px}

/* SPC chart */
.spcwrap{position:relative; padding:0 8px 22px 48px}
.spcbox{position:relative; height:190px; background:#FAFBFB; border:1px solid #D5D9DD}
.spcbox svg{display:block}
.spc-ylab{position:absolute; left:0; width:42px; text-align:right; font-size:11px; color:var(--text-2)}
.spc-lim{position:absolute; right:6px; font-size:11px; color:var(--alarm-high); background:#FAFBFB; padding:0 2px}
.hist{display:flex; align-items:flex-end; gap:4px; height:170px; border-bottom:1px solid #8A939B; padding:0 4px}
.hist > i{flex:1 1 0; background:#7A8FA6}
.hist > i.mid{background:var(--complete)}

/* KPI tiles */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:8px; padding:10px 12px}
.kpi{background:var(--field); padding:8px 10px; display:flex; flex-direction:column; gap:2px}
.kpi .v{font-size:24px; font-weight:600; color:var(--text); line-height:1.1}
.kpi .v small{font-size:12px; font-weight:500; color:var(--text-2); margin-left:4px}
.kpi.bad .v{color:var(--alarm-high)}
.kpi.warn .v{color:#B45309}
.bignum{font-size:34px; font-weight:600; color:var(--brand); line-height:1}

/* connection + disconnected bar */
.connbar{background:#fff; border-bottom:1px solid var(--border); padding:10px 32px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 20px; font-size:14px; color:var(--text-2)}
.connbar .ok{display:inline-flex; align-items:center; gap:8px; color:var(--text); font-weight:500}
.connbar .ok .dot{width:8px; height:8px; border-radius:50%; background:var(--grid-head)}
.reconnect{background:#E1E4E7; color:#33383D; padding:6px 16px; font-size:12px; text-align:center}

/* ---- network view ---- */
.sitecards{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px}
.sitecard{display:flex; flex-direction:column}
.sitecard > h2{display:flex; justify-content:space-between; align-items:center; gap:8px}
.sitecard .stateblk{padding:10px 12px; font-weight:700; letter-spacing:.05em; font-size:14px; background:var(--titlebar); color:#fff; display:flex; justify-content:space-between; align-items:center}
.sitecard .stateblk.isl{background:var(--island-banner)}
.sitecard .stateblk.red{background:var(--stopped)}
.sitecard .stateblk.stop{background:var(--alarm-high)}
.sitecard .stateblk small{font-weight:500; font-size:11px; letter-spacing:0; opacity:.85}
.sitecard .meta{display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:12px}
.sitecard .meta b{font-variant-numeric:tabular-nums}
.sitecard .headline{font-size:12px; min-height:34px}
.sitecard .ghost-note{font-size:11px; color:var(--text-2)}
.netmap svg{display:block; width:100%; height:auto}

/* ---- lots ---- */
.track{display:flex; gap:2px}
.track i{display:block; flex:1 1 0; height:8px; background:#E1E4E7}
.track i.done{background:var(--complete)}
.track i.here{background:var(--brand)}
.track i.held{background:var(--alarm-high)}
.pbar{position:relative; height:10px; background:#EEF0F2; border:1px solid #D5D9DD; min-width:90px}
.pbar i{display:block; height:100%; background:var(--grid-head)}
.pbar.held i{background:var(--alarm-high)}
.wip{display:flex; align-items:flex-end; gap:6px; height:120px; padding:0 4px; border-bottom:1px solid #8A939B}
.wip > div{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%}
.wip i{display:block; width:100%; background:#7A8FA6}
.wip i.hold{background:var(--alarm-high)}
.wip span{font-size:10px; color:var(--text-2); text-align:center; line-height:1.1}
.wip b{font-size:11px}

/* ---- equipment matrix ---- */
.e10sum{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; padding:10px 12px}
.e10sum .kpi{border-left:6px solid var(--grid-head)}
.e10sum .kpi.prod{border-color:var(--e10-prod)} .e10sum .kpi.standby{border-color:var(--e10-standby)} .e10sum .kpi.eng{border-color:var(--e10-eng)} .e10sum .kpi.sched{border-color:var(--e10-sched)} .e10sum .kpi.unsched{border-color:var(--e10-unsched)}
.matrix{display:flex; flex-direction:column; gap:10px; padding:12px}
.mgroup{display:flex; align-items:flex-start; gap:6px}
.mgroup .gname{width:140px; font-size:12px; font-weight:600; flex-shrink:0; padding-top:10px}
.mgroup .tiles{display:flex; flex-wrap:wrap; gap:6px; min-width:0}
.tool{width:58px; height:40px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; background:var(--e10-prod); border-radius:2px; position:relative}
.tool small{font-size:9px; font-weight:500; opacity:.85}
.tool.standby{background:var(--e10-standby); color:var(--text)}
.tool.eng{background:var(--e10-eng)}
.tool.sched{background:var(--e10-sched)}
.tool.unsched{background:var(--e10-unsched)}
.tool .ai{position:absolute; top:-5px; right:-5px; width:14px; height:14px; border-radius:50%; background:#fff; color:var(--brand); font-size:9px; font-weight:800; display:flex; align-items:center; justify-content:center; border:1px solid var(--brand)}
.legend{display:flex; flex-wrap:wrap; gap:14px; font-size:11px; color:var(--text-2); padding:0 12px 10px}
.legend i{display:inline-block; width:10px; height:10px; margin-right:4px; vertical-align:middle}

/* ---- smart factory: AMR map, anomaly cards ---- */
.floor{position:relative; background:#F3F5F7; border:1px solid var(--border)}
.floor svg{display:block; width:100%; height:auto}
.amr{transition:transform 1s linear}
.amrlist td{padding:5px 10px}
.batt{display:inline-flex; align-items:center; gap:6px}
.batt i{display:inline-block; width:46px; height:8px; background:#E1E4E7; position:relative}
.batt i b{display:block; height:100%; background:var(--grid-head)}
.batt i b.low{background:var(--stopped)}
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px}
.card > h2{display:flex; justify-content:space-between; align-items:center; gap:8px}
.card .status{font-size:11px; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:2px; background:#EEF0F2; color:var(--text)}
.card .status.watch{background:var(--island-chip); color:var(--text)}
.card .status.action{background:var(--alarm-high); color:#fff}
.card.watch > h2{background:#8A5A0B}
.card.action > h2{background:var(--alarm-high)}
.health{display:flex; align-items:center; gap:10px}
.health .num{font-size:30px; font-weight:600; min-width:56px; text-align:right}
.health .hbar{flex:1 1 auto; height:12px; background:#EEF0F2; border:1px solid #D5D9DD}
.health .hbar i{display:block; height:100%; background:var(--grid-head)}
.card.watch .health .hbar i{background:#D97706}
.card.action .health .hbar i{background:var(--alarm-high)}
.spark{display:block; width:100%; height:48px; background:#FAFBFB; border:1px solid #D5D9DD}
.due{font-size:12px; padding:6px 8px; background:#EEF0F2}
.card.watch .due{background:var(--warn-bg); color:var(--warn-fg); font-weight:600}
.card.action .due{background:#FBE3E3; color:#7F1D1D; font-weight:600}
.model{font-size:11px; color:var(--text-2); font-family:var(--mono)}

/* ---- utilities ---- */
.gauge{display:flex; align-items:center; gap:10px}
.gauge svg{flex-shrink:0}
.gauge .gv{font-size:22px; font-weight:600; line-height:1.1}
.gauge .gv small{font-size:11px; font-weight:500; color:var(--text-2); margin-left:4px}
.ustat{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em; padding:2px 8px; border-radius:2px; background:#EEF0F2; color:var(--text)}
.ustat.bad{background:var(--alarm-high); color:#fff}
.ustat.warn{background:var(--island-chip)}
.panel.quake > h2{background:var(--alarm-high)}
.trace{display:block; width:100%; height:120px; background:#0F172A; border:1px solid #334155}
.timeline{display:flex; flex-direction:column; gap:0}
.tl{display:grid; grid-template-columns:62px 1fr; gap:10px; padding:6px 0; border-bottom:1px solid var(--divider); font-size:12px}
.tl b{font-family:var(--mono); color:var(--brand)}

/* ---- data path ---- */
.hops{display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:10px 12px}
.hop{display:flex; flex-direction:column; min-width:104px; border:1px solid var(--border); background:#FAFBFB; padding:6px 8px}
.hop b{font-size:12px}
.hop span{font-size:11px; color:var(--text-2)}
.hop.site{border-left:3px solid var(--brand)}
.hop.cloud{border-left:3px solid var(--complete)}
.hop.cut{background:var(--warn-bg); border:2px solid #D97706; color:var(--warn-fg)}
.hop.cut span{color:var(--warn-fg); font-weight:600}
.arrow{color:#8A939B; font-size:16px}
.arrow.cut{color:#D97706; font-weight:700}
.devtypes{display:flex; flex-direction:column; gap:4px}
.devtype{display:grid; grid-template-columns:1fr 60px; gap:8px; padding:6px 8px; background:#EEF0F2; font-size:12px}
.devtype b{text-align:right; font-variant-numeric:tabular-nums}

/* ---- quality bars ---- */
.vbars{display:flex; align-items:flex-end; gap:6px; height:150px; padding:0 6px; border-bottom:1px solid #8A939B}
.vbars > div{flex:1 1 0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:4px; height:100%}
.vbars i{display:block; width:100%; background:#7A8FA6}
.vbars i.flag{background:#D97706}
.vbars i.today{background:var(--complete)}
.vbars span{font-size:10px; color:var(--text-2); white-space:nowrap}
.vbars b{font-size:10px}

/* print */
@media print{
  header.top,nav.modules,.toolbar,.crumb .right,footer.status,.connbar{display:none !important}
  body{background:#fff}
  .panel{border:1px solid #333}
}
.hidden{display:none !important}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--brand); outline-offset:1px}