/* #view-overview — Mill Command Center overview (owned by the overview view). Every selector prefixed #view-overview. */

#view-overview .ov-grid { display: grid; grid-template-columns: 424px minmax(0, 1fr) 468px; gap: 14px; height: 882px; }
#view-overview .kpi-img { width: 72px; height: 72px; }
#view-overview .kpi-s { font-size: 14px; }

/* ------------------------------------------------------------ production rings */
#view-overview .ov-prog { height: 212px; }
#view-overview .ov-day { font-size: 14px; color: var(--text-mute); }
#view-overview .ov-rings { display: flex; justify-content: space-around; align-items: flex-start; padding-top: 2px; }
#view-overview .ov-ring { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
#view-overview .ov-ring .rl { font-size: 14.5px; color: var(--text-dim); }
#view-overview .ov-ring svg { display: block; overflow: visible; }
#view-overview .ov-ring .tv { font-family: var(--num); font-size: 26px; font-weight: 700; fill: #fff; }
#view-overview .ov-ring .arc { transition: stroke-dasharray .8s ease; }
#view-overview .ov-ring .rs { font-size: 14px; color: var(--text-dim); white-space: nowrap; }

/* ------------------------------------------------------------ shift summary */
#view-overview .ov-shift { height: 344px; }
#view-overview .ov-shl { font-size: 14px; color: var(--text-mute); }
#view-overview .ov-st { table-layout: fixed; }
#view-overview .ov-st th { font-size: 14px; padding: 4px 6px 6px; vertical-align: bottom; line-height: 1.15; }
#view-overview .ov-st th small { display: block; font-size: 14px; color: var(--text-mute); font-weight: 400; margin-top: 1px; font-family: var(--ui); }
#view-overview .ov-st th:nth-child(1) { width: 138px; }
#view-overview .ov-st th:nth-child(4) { width: 70px; }
#view-overview .ov-st th.sh-m, #view-overview .ov-st th.sh-c { color: #a9c4e6; font-family: var(--num); font-size: 15px; font-weight: 600; }
#view-overview .ov-st td { padding: 5px 6px; font-size: 14.5px; }
#view-overview .ov-st td:first-child { color: #d3e2f6; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
#view-overview .ov-st td.num { font-size: 16px; }
#view-overview .ov-st td.m { color: #6fb6ff; }
#view-overview .ov-st td.c { color: #fff; }
#view-overview .ov-st td.d { font-size: 15px; }
#view-overview .ov-st tr:nth-child(odd) td { background: rgba(60, 120, 220, 0.045); }

/* ------------------------------------------------------------ key indicators */
#view-overview .ov-ki .panel-h .legend { font-size: 14px; }
#view-overview .ov-ki .panel-h .legend i { background: #ff6a78 !important; width: 3px; height: 13px; border-radius: 1px; }
#view-overview .ov-ki-b { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
#view-overview .ki-col { display: flex; flex-direction: column; min-width: 0; }
#view-overview .ki-col .cap { margin-bottom: 4px; font-size: 14px; white-space: nowrap; }
#view-overview .ki-row { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; min-height: 0; border-bottom: 1px solid rgba(120, 170, 255, 0.06); }
#view-overview .ki-row:last-child { border-bottom: 0; }
#view-overview .ki-row .kl { display: flex; align-items: baseline; gap: 6px; }
#view-overview .ki-row .kn { font-size: 14.5px; color: #c6d6ee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
#view-overview .ki-row .kv { font-size: 17px; font-weight: 600; color: #fff; white-space: nowrap; }
#view-overview .ki-row .kd { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex: none; align-self: center; }
#view-overview .ki-row.tot .kn { color: #fff; font-weight: 600; }
#view-overview .ki-row.tot .kv { font-size: 18px; }
#view-overview .ki-row .kb { position: relative; height: 5px; border-radius: 3px; background: rgba(120, 160, 220, 0.15); }
#view-overview .ki-row .kf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, #17b56c, #3cf0a0); transition: width .8s ease; }
#view-overview .ki-row .kt { position: absolute; top: -3px; width: 2px; height: 11px; margin-left: -1px; background: #ff6a78; border-radius: 1px; box-shadow: 0 0 5px rgba(255, 75, 92, 0.7); }
#view-overview .ki-row.watch .kv { color: #ffc65a; }
#view-overview .ki-row.watch .kd { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
#view-overview .ki-row.watch .kf { background: linear-gradient(90deg, #d98a0b, #ffc65a); }
#view-overview .ki-row.crit .kv { color: #ff8592; }
#view-overview .ki-row.crit .kd { background: var(--red); box-shadow: 0 0 6px var(--red); animation: blink 1.2s infinite; }
#view-overview .ki-row.crit .kf { background: linear-gradient(90deg, #c4202f, #ff6a78); }
#view-overview .ki-row.off .kd { background: var(--grey); box-shadow: none; }

/* ------------------------------------------------------------ 3D viewport */
#view-overview .ov-vp { padding: 0; position: relative; background: #040b18; }
#view-overview .ov-3d { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; outline: none; }
#view-overview .ov-vig { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 70% at 50% 52%, transparent 60%, rgba(2, 8, 20, 0.55) 100%),
              linear-gradient(180deg, rgba(2, 8, 20, 0.45), transparent 14%, transparent 88%, rgba(2, 8, 20, 0.5)); }
#view-overview .ov-pins { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#view-overview .ov-tl { position: absolute; left: 16px; top: 14px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
#view-overview .ov-tl .lv { display: inline-flex; align-items: center; gap: 8px; font-family: var(--num); font-size: 14px; font-weight: 700; letter-spacing: 1.4px; color: var(--cyan);
  padding: 4px 11px; border: 1px solid rgba(47, 212, 255, 0.45); border-radius: 6px; background: rgba(4, 16, 36, 0.78); }
#view-overview .ov-tl .lv i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: pulse 1.6s infinite; }
#view-overview .ov-cap { font-size: 14px; color: var(--text-dim); text-shadow: 0 1px 4px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#view-overview .ov-tl { right: 290px; }
#view-overview .ov-tl .lv { flex: none; }
#view-overview .ov-bl { position: absolute; left: 16px; bottom: 12px; padding: 6px 12px; border-radius: 7px; background: rgba(4, 14, 32, 0.78); border: 1px solid var(--border); pointer-events: none; }
#view-overview .ov-bl .legend { gap: 14px; }
#view-overview .ov-tr { position: absolute; right: 14px; top: 12px; z-index: 2; }
#view-overview .ov-cam { background: rgba(4, 16, 36, 0.82); border-color: rgba(47, 212, 255, 0.35); }
#view-overview .ov-cam button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 14px; white-space: nowrap; }
#view-overview .ov-cam button svg { width: 16px; height: 16px; flex: none; }
#view-overview .ov-cam button.on { background: linear-gradient(180deg, rgba(30, 140, 220, 0.85), rgba(18, 90, 170, 0.85)); color: #fff; }
#view-overview .ov-br { position: absolute; right: 16px; bottom: 14px; font-size: 14px; color: var(--text-mute); text-shadow: 0 1px 4px #000; pointer-events: none; white-space: nowrap; }

/* station hotspot pins (positioned every frame: translate(anchor), --stem lifts the card) */
#view-overview .ov-pin { --pc: #2fd4ff; position: absolute; left: 0; top: 0; width: 0; height: 0; transition: opacity .3s; will-change: transform; }
#view-overview .ov-pin.ok { --pc: #22d982; } #view-overview .ov-pin.watch { --pc: #ffb224; } #view-overview .ov-pin.crit { --pc: #ff4b5c; } #view-overview .ov-pin.off { --pc: #7f8ea6; }
#view-overview .ov-pin .stem { position: absolute; left: -1px; bottom: 0; width: 2px; height: var(--stem, 34px);
  background: linear-gradient(0deg, var(--pc), color-mix(in srgb, var(--pc) 25%, transparent)); opacity: .8; }
#view-overview .ov-pin .dot { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 10px var(--pc), 0 0 0 3px rgba(2, 8, 20, 0.6); }
#view-overview .ov-pin .dot::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--pc); animation: ovping 2s ease-out infinite; }
#view-overview .ov-pin .pc { position: absolute; left: var(--cx, 0px); bottom: var(--stem, 34px); transform: translate(-50%, -2px);
  display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px; white-space: nowrap; cursor: pointer; pointer-events: auto;
  background: linear-gradient(180deg, rgba(10, 28, 58, 0.94), rgba(5, 16, 36, 0.94)); border: 1px solid color-mix(in srgb, var(--pc) 55%, transparent);
  border-radius: 9px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px color-mix(in srgb, var(--pc) 22%, transparent); transition: box-shadow .2s, border-color .2s, transform .2s; }
#view-overview .ov-pin .pn { font-family: var(--num); font-size: 16px; font-weight: 600; color: #eef5ff; letter-spacing: 0.2px; }
#view-overview .ov-pin .ph { font-size: 16px; font-weight: 700; color: var(--pc); }
#view-overview .ov-pin .pd { width: 9px; height: 9px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); }
#view-overview .ov-pin.crit .pd { animation: blink 1s infinite; }
#view-overview .ov-pin.hot { z-index: 3; }
#view-overview .ov-pin.hot .pc { border-color: var(--pc); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 22px color-mix(in srgb, var(--pc) 60%, transparent); transform: translate(-50%, -5px) scale(1.06); }
#view-overview .ov-pin.sec { --pc: #2fd4ff; }
#view-overview .ov-pin.sec .pc { padding: 4px 10px 4px 5px; gap: 7px; background: rgba(5, 16, 36, 0.86); }
#view-overview .ov-pin.sec .pn { font-size: 15px; font-weight: 500; color: #cfe0f6; }
#view-overview .ov-pin.sec .pv { font-size: 15px; font-weight: 600; color: var(--cyan); }
#view-overview .ov-pin.sec .dot { width: 9px; height: 9px; left: -4.5px; top: -4.5px; }
#view-overview .ov-pin.sec .dot::after { display: none; }
#view-overview .st-icon.xs { width: 26px; height: 26px; }
#view-overview .ov-pin .st-icon.sm { width: 30px; height: 30px; }
@keyframes ovping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.1); opacity: 0; } }

/* ------------------------------------------------------------ process flow */
#view-overview .ov-flow { height: 180px; }
#view-overview .ov-pf { display: grid; grid-template-columns: 1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr; align-items: start; padding-top: 4px; }
#view-overview .ov-pf .ar { color: var(--text-mute); font-size: 22px; text-align: center; margin-top: 12px; }
#view-overview .pf-n { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; min-width: 0; border-radius: 8px; padding: 2px 0 4px; }
#view-overview .pf-n:hover { background: rgba(47, 140, 255, 0.08); }
#view-overview .pf-n .sd { position: absolute; top: 2px; left: calc(50% + 17px); width: 11px; height: 11px; border-radius: 50%; background: var(--green); box-shadow: 0 0 7px var(--green), 0 0 0 2px #071630; }
#view-overview .pf-n.watch .sd { background: var(--amber); box-shadow: 0 0 7px var(--amber), 0 0 0 2px #071630; }
#view-overview .pf-n.crit .sd { background: var(--red); box-shadow: 0 0 7px var(--red), 0 0 0 2px #071630; animation: blink 1s infinite; }
#view-overview .pf-n.off .sd { background: var(--grey); box-shadow: 0 0 0 2px #071630; }
#view-overview .pf-l { font-family: var(--num); font-size: 15px; color: #d3e2f6; margin-top: 6px; line-height: 1.12; white-space: normal; }
#view-overview .pf-v { font-family: var(--num); font-size: 14.5px; color: var(--text-dim); margin-top: 3px; white-space: nowrap; }
#view-overview .pf-n.watch .pf-v { color: #ffc65a; } #view-overview .pf-n.crit .pf-v { color: #ff8592; }

/* ------------------------------------------------------------ process health */
#view-overview .ov-health { height: 300px; }
#view-overview .ov-ph { display: flex; flex-direction: column; justify-content: space-between; padding-top: 2px; }
#view-overview .ov-ph .bar-row { grid-template-columns: 168px 1fr 40px; cursor: pointer; border-radius: 6px; padding: 0 4px; min-height: 36px; }
#view-overview .ov-ph .bar-row:hover { background: rgba(47, 140, 255, 0.08); }
#view-overview .ov-oh { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
#view-overview .ov-oh .badge { font-family: var(--num); font-size: 14px; }

/* ------------------------------------------------------------ attention list */
#view-overview .ov-ac { gap: 6px; }
#view-overview .ov-al { overflow: hidden; padding-bottom: 12px; }
#view-overview .ov-al .alert-row { padding: 8px 6px; }
#view-overview .ov-al .alert-row .am { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#view-overview .ov-al .alert-row .ar { font-size: 14px; }
#view-overview .ov-none { height: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--green); font-size: 16px; }
#view-overview .ov-none svg { width: 34px; height: 34px; }
#view-overview .ov-none small { display: block; color: var(--text-mute); font-size: 14px; margin-top: 2px; }