/* SuriyaONE operations UI. Brand values follow the Suriyavaan navy/cyan token audit. */
body{font:13px/1.5 "Inter",Arial,sans-serif}
button,input{font-family:inherit}
h1,h2,h3,.brand strong{font-family:"Titillium Web","Inter",sans-serif}
.mono,.overline,.sidebar-label,.panel-note,.view-footnote,.field-label,.tag,.route-strip,.handover-strip,.trace-summary span,.insight-prompt span{font-family:"Inter",Arial,sans-serif}
.app-shell{grid-template-columns:232px minmax(0,1fr)}
.sidebar{background:#0A111C;border-right:1px solid #24354D;color:#DCE7F4}
.brand{height:72px;padding:0 18px;border-bottom:1px solid rgba(255,255,255,.11)}
.brand img{width:38px;height:38px;padding:3px;border-radius:7px;background:#FFF}
.brand strong{font-size:18px;color:#F4F8FD}
.brand strong span{color:#67D4FF}
.brand small{color:#8B9BB4}
#site-nav{display:block;padding:16px 8px}
.nav-group+.nav-group{margin-top:19px}
.nav-group-label{margin:0 10px 7px;color:#8B9BB4;font:600 10px "Inter",Arial,sans-serif;letter-spacing:.075em;text-transform:uppercase}
.nav-link{width:100%;display:flex;align-items:center;gap:11px;margin:2px 0;padding:10px 12px;border:0;border-left:2px solid transparent;border-radius:5px;background:transparent;color:#B9C9DC;text-align:left;font:500 12px "Inter",Arial,sans-serif}
.nav-link svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-link:hover{background:#14253B;color:#FFF}
.nav-link.active{border-left-color:#00A0DE;background:#12314A;color:#F5FBFF}
.nav-link.active svg{color:#67D4FF}
.sidebar-bottom{border-top:1px solid rgba(255,255,255,.11);padding:15px 18px}
.sidebar-bottom a{margin:0;color:#67D4FF;font-size:11px}
.command-bar{min-height:75px;padding:9px 24px;background:var(--surface);border-color:var(--line)}
.header-context{display:grid;gap:4px;min-width:0}
.header-identity{display:flex;align-items:center;gap:10px}
.org-switcher{display:flex;align-items:center;gap:7px;padding:0;border:0;background:transparent;color:var(--text);font-size:12px}
.org-switcher strong{white-space:nowrap;font-weight:650}
.org-avatar{display:grid;place-items:center;width:22px;height:22px;border-radius:5px;background:#00205B;color:#FFF;font:700 11px "Titillium Web",sans-serif}
.sandbox-badge{padding:3px 7px;border:1px solid var(--line);border-radius:4px;background:var(--subtle);color:var(--muted);font:500 10px "Inter",sans-serif;white-space:nowrap}
.breadcrumb{gap:7px;padding-left:29px;font-size:10px;color:var(--muted)}
.breadcrumb i{font-size:13px;color:var(--muted)}
.breadcrumb strong{color:var(--text);font-weight:600}
.quick-jump{border-radius:5px;background:var(--subtle)}
.quick-jump input{font-size:11px}
.theme-toggle,.discuss-link{height:34px;border-radius:5px;font-size:11px}
.discuss-link{background:var(--accent-fill);border-color:var(--accent-fill);color:#0A111C}
.discuss-link:hover{background:#67D4FF;border-color:#67D4FF;color:#0A111C}
.view{padding:22px 24px 56px}
.view-heading{padding-bottom:16px}
.view-heading h1{font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:0 0 4px}
.view-heading>p:last-child{font-size:11px;max-width:none}
.panel-heading h2{font-size:15px}
.text-link{font:600 11px "Inter",sans-serif;color:var(--accent)}
.filter.active,.mode.active{border-bottom-color:var(--accent);background:var(--accent-soft)}
.site-footer{background:var(--surface)}

.ops-dashboard{--run:var(--status-run);--setup:var(--status-amber);--idle:var(--status-amber);--alarm:var(--status-alarm);margin-bottom:14px}
.ops-dashboard-heading,.dashboard-subhead,.ops-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ops-dashboard-heading{padding:0 0 10px}
.ops-dashboard-heading h2{margin:0;font-size:16px;font-weight:600;letter-spacing:-.015em}
.ops-dashboard-heading span{font-size:10px;color:var(--muted)}
.production-panel{padding:0}
.production-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kpi-card{min-width:0;padding:12px 14px 10px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.kpi-head{display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--muted);font-size:11px;font-weight:600}
.target-chip{padding:3px 6px;border:1px solid var(--line);border-radius:4px;background:var(--subtle);font-size:9px;color:var(--muted);white-space:nowrap}
.kpi-value{margin:6px 0 0;font:600 28px/1 "Titillium Web",sans-serif;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.kpi-value small{font-size:15px}
.kpi-delta{margin-top:5px;font-size:10px;font-weight:600}
.kpi-delta.positive{color:var(--status-run)}
.kpi-delta.negative{color:var(--status-alarm)}
.sparkline{display:block;width:100%;height:28px;margin-top:6px;overflow:visible}
.sparkline polyline{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.kpi-card:nth-child(3) .sparkline polyline{stroke:var(--status-alarm)}
.shift-breakdown,.machine-board{margin-top:9px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.dashboard-subhead{margin-bottom:9px}
.dashboard-subhead strong{font-size:11px;font-weight:650}
.dashboard-subhead span{font-size:10px;color:var(--muted)}
.shift-bar{display:flex;height:10px;overflow:visible;border-radius:3px;background:var(--line)}
.shift-bar button{position:relative;display:block;height:10px;min-width:0;padding:0;border:0;border-radius:0;cursor:help}
.shift-bar button:first-child{border-radius:3px 0 0 3px}
.shift-bar button:last-child{border-radius:0 3px 3px 0}
.shift-bar button:hover,.shift-bar button:focus-visible{filter:brightness(1.15);outline-offset:3px}
.shift-bar button:after{content:attr(data-tooltip);display:none;position:absolute;bottom:calc(100% + 8px);left:50%;z-index:4;transform:translateX(-50%);padding:5px 7px;border-radius:4px;background:#0A111C;color:#FFF;font:10px "Inter",sans-serif;white-space:nowrap;box-shadow:0 4px 12px #0A111C38;pointer-events:none}
.shift-bar button:hover:after,.shift-bar button:focus-visible:after{display:block}
.shift-bar button:first-child:after{left:0;transform:none}
.shift-bar button:last-child:after{left:auto;right:0;transform:none}
.shift-bar .run,.shift-legend .run,.machine-timeline .run{background:var(--run)}
.shift-bar .setup,.shift-legend .setup,.machine-timeline .setup{background:var(--setup)}
.shift-bar .idle,.shift-legend .idle,.machine-timeline .idle{background:var(--idle);filter:opacity(.68)}
.shift-bar .alarm,.shift-legend .alarm,.machine-timeline .alarm{background:var(--alarm)}
.shift-legend{display:flex;flex-wrap:wrap;gap:5px 15px;margin-top:8px;color:var(--muted);font-size:9px}
.shift-legend span{display:inline-flex;align-items:center;gap:5px}
.shift-legend i{display:inline-block;width:7px;height:7px;border-radius:2px}
.machine-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.machine-cell{min-width:0;border:1px solid var(--line);border-radius:5px;background:var(--subtle);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.machine-cell:hover,.machine-cell:focus-within{transform:translateY(-2px);border-color:var(--accent);box-shadow:0 6px 14px #0A111C18}
.machine-open{display:block;width:100%;min-height:78px;padding:9px;text-align:left;border:0;background:transparent;color:var(--text);cursor:pointer}
.machine-id{display:block;color:var(--muted);font:600 10px "Inter",sans-serif}
.state-label{display:block;margin:5px 0 2px;font-size:11px}
.state-label:before{content:"";display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:currentColor}
.state-label.run{color:var(--run)}
.state-label.setup,.state-label.idle{color:var(--setup)}
.state-label.alarm{color:var(--alarm)}
.machine-open small{display:block;overflow:hidden;color:var(--muted);font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.alarm-cell{border-color:var(--alarm);background:var(--alarm-soft,#FFF4F5)}
.alarm-cell .machine-open{min-height:61px}
.machine-investigate{margin:0 9px 9px;padding:0;border:0;background:transparent;color:var(--alarm);font:650 10px "Inter",sans-serif;cursor:pointer}
.machine-investigate:hover{text-decoration:underline}
.dashboard-footnote{margin:8px 1px 0;color:var(--muted);font-size:9px}

.ops-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:10px}
.ops-card{min-width:0;padding:13px 14px;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.ops-card-head{align-items:start}
.ops-card-head h3{margin:0;font-size:14px;font-weight:600;letter-spacing:-.015em}
.signal{padding:3px 6px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:9px;white-space:nowrap}
.signal.warn{border-color:var(--status-alarm);color:var(--status-alarm)}
.ops-card-value{display:flex;align-items:baseline;gap:9px;margin:7px 0}
.ops-card-value strong{font:600 28px/1 "Titillium Web",sans-serif;font-variant-numeric:tabular-nums}
.ops-card-value span{font-size:10px;color:var(--muted)}
.defect-split,.supplier-metrics,.rio-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:8px 0 10px}
.defect-split>div,.supplier-metrics>div,.rio-grid>div{padding:8px;border:1px solid var(--line);border-radius:4px;background:var(--subtle)}
.defect-split b,.supplier-metrics strong,.rio-grid strong{display:block;font:600 18px/1.1 "Titillium Web",sans-serif;font-variant-numeric:tabular-nums}
.defect-split span,.supplier-metrics span,.rio-grid span,.rio-grid small{display:block;color:var(--muted);font-size:9px}
.source-bars{display:grid;gap:9px;margin:12px 0}
.source-bars>div{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:10px}
.source-bars strong{font-size:11px}
.source-track,.supplier-meter{height:6px;grid-column:1/-1;border-radius:3px;background:var(--line)}
.source-track i,.supplier-meter i{display:block;height:100%;border-radius:3px;background:var(--status-amber)}
.source-bars>div:nth-child(2) .source-track i{background:var(--status-alarm)}
.ops-card-note,.rio-caption{margin:7px 0;color:var(--muted);font-size:9px}
.supplier-metrics strong small{font-size:11px}
.supplier-meter{margin:-2px 0 11px}
.supplier-meter i{background:var(--status-run)}
.rio-grid{grid-template-columns:repeat(3,1fr)}
.rio-grid small{margin-top:2px}
.rio-grid>div:first-child strong{color:var(--status-alarm)}
.rio-grid>div:nth-child(2) strong{color:var(--status-amber)}
.rio-grid>div:nth-child(3) strong{color:var(--accent)}
.ops-card .text-link{padding:0}

.machine-drawer-state{display:inline-block;margin-right:5px;padding:2px 6px;border-radius:4px;background:var(--accent-soft);font-weight:700;color:var(--accent)}
.machine-drawer-state.running{background:#DFF3EB;color:#14654B}
.machine-drawer-state.setup,.machine-drawer-state.idle{background:#FFF1D3;color:#8A5C0A}
.machine-drawer-state.alarm{background:#FDE7EA;color:#B13245}
.machine-timeline{--run:var(--status-run);--setup:var(--status-amber);--idle:var(--status-amber);--alarm:var(--status-alarm);display:flex;height:12px;border-radius:3px;overflow:hidden}
.machine-timeline>span{display:block;height:100%}
.machine-timeline-labels{display:flex;justify-content:space-between;margin-top:5px;color:var(--muted);font-size:9px}
body[data-theme=dark]{--alarm-soft:#291B28}
body[data-theme=dark] .machine-drawer-state.running{background:#153B31;color:#83D7B6}
body[data-theme=dark] .machine-drawer-state.setup,body[data-theme=dark] .machine-drawer-state.idle{background:#392B14;color:#F1C56A}
body[data-theme=dark] .machine-drawer-state.alarm{background:#41212B;color:#FF9FAB}

@media(max-width:1180px){.machine-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.quick-jump{width:200px}.discuss-link{display:none}}
@media(max-width:820px){.app-shell{display:block}.sidebar{position:relative;height:auto;border-right:0}.brand{height:54px}#site-nav{display:flex;gap:10px;padding:4px 10px;overflow-x:auto}.nav-group{display:flex;gap:2px;flex:none}.nav-group+.nav-group{margin:0}.nav-group-label,.sidebar-bottom{display:none}.nav-link{width:auto;white-space:nowrap;margin:0;padding:9px 10px;border-left:0;border-bottom:2px solid transparent;border-radius:0}.nav-link.active{border-bottom-color:#00A0DE}.command-bar{padding:8px 16px}.view{padding:18px 16px 45px}}
@media(max-width:640px){.command-bar{align-items:stretch;flex-direction:column}.header-context{gap:3px}.command-actions{width:100%}.quick-jump{width:auto;flex:1}.breadcrumb{padding-left:0;white-space:normal}.view-heading h1{font-size:23px}.production-metrics{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.kpi-card{padding:9px}.kpi-head{display:block}.target-chip{display:inline-block;margin-top:5px}.kpi-value{font-size:24px}.kpi-delta{font-size:9px}.machine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-card-grid{grid-template-columns:1fr}}
@media(max-width:390px){.sandbox-badge{font-size:9px}.org-switcher strong{font-size:11px}.production-metrics{grid-template-columns:1fr}.kpi-card{display:grid;grid-template-columns:1fr auto;column-gap:8px}.kpi-head{grid-column:1}.kpi-value{grid-column:1}.kpi-delta{grid-column:1}.sparkline{grid-column:2;grid-row:1/4;width:85px;height:40px;align-self:center}.machine-grid{grid-template-columns:1fr 1fr}.ops-dashboard-heading{align-items:start}.shift-legend{gap:4px 8px}}
@media(prefers-reduced-motion:reduce){.machine-cell{transition:none}.machine-cell:hover,.machine-cell:focus-within{transform:none}}
