/* #view-group — Group POM Command Center (owner: group view). Every selector prefixed #view-group. */

/* readable minimums on the projected group page (foundation components default to 13px) */
#view-group .kpi-s { font-size: 14px; color: #7f9cc4; }
#view-group .kpi-l { font-size: 15px; }   /* "Peninsular CPO Produced" fits the tile */
#view-group .kpi-s .delta { font-size: 14px; }
#view-group .badge { font-size: 14px; padding: 2px 11px; }
#view-group .mini-table th { font-size: 14px; }
#view-group .alert-row .am { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#view-group .alert-row .ar { font-size: 14px; }
#view-group .alert-row { padding: 6px 6px; }
#view-group .pill-sel { font-size: 14px; cursor: pointer; transition: border-color .2s, color .2s; }
#view-group .pill-sel:hover { border-color: var(--border-hi); color: var(--text); }

/* KPI: mills-running dots in the spark slot (4 × 14 px for a region, 7 × 10 px for all 21 mills) */
#view-group .g-dots { display: grid; grid-template-columns: repeat(4, 14px); gap: 6px; padding-right: 2px; }
#view-group .g-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
#view-group .g-dots.many { grid-template-columns: repeat(7, 10px); gap: 5px; }
#view-group .g-dots.many i { width: 10px; height: 10px; box-shadow: 0 0 6px var(--green); }
#view-group .g-dots i.watch { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
#view-group .g-dots i.crit { background: var(--red); box-shadow: 0 0 10px var(--red); animation: blink 1.2s infinite; }

/* layout: 440 | map | 470 under the KPI row (882 px high) */
#view-group .g-grid { display: grid; grid-template-columns: 440px minmax(0, 1fr) 470px; gap: 14px; height: 882px; }
#view-group .g-center, #view-group .g-right { display: flex; flex-direction: column; gap: 14px; min-height: 0; min-width: 0; }
#view-group .g-map { flex: 1; min-height: 0; }
#view-group .g-trend { flex: none; height: 212px; }
#view-group .g-status, #view-group .g-health { flex: none; }
#view-group .g-alerts { flex: 1; min-height: 0; }

/* ---------------------------------------------------------- mill production */
/* one compact line per mill (all 21 fit); a region view (≤ 10 mills) adds a second line: CPO · target bar · 7-day FFB · status */
#view-group .g-mills-b { display: flex; flex-direction: column; gap: 5px; padding-bottom: 12px; }
#view-group .gm-hd, #view-group .gm-a { display: grid; grid-template-columns: 42px minmax(0, 1fr) 60px 52px 44px 50px; gap: 6px; align-items: center; }
#view-group .gm-hd { flex: none; padding: 0 10px 0 12px; font-size: 14px; color: var(--text-mute); white-space: nowrap; }
#view-group .gm-hd span:nth-child(1) { grid-column: 1 / 3; }
#view-group .gm-hd span:nth-child(n+2) { text-align: right; }
#view-group .g-mills { flex: 1; min-height: 0; overflow: hidden; position: relative; }
#view-group .g-mills-in { display: flex; flex-direction: column; gap: 4px; min-height: 100%; will-change: transform; }
#view-group .gm { flex: none; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 5px 10px 5px 8px; cursor: pointer;
  border-radius: 7px; border: 1px solid rgba(80, 140, 230, 0.2); border-left: 4px solid var(--green);
  background: linear-gradient(90deg, rgba(20, 50, 96, 0.55), rgba(8, 22, 46, 0.6)); transition: background .2s, border-color .2s, box-shadow .2s; }
#view-group .gm.watch { border-left-color: var(--amber); }
#view-group .gm.crit { border-left-color: var(--red); background: linear-gradient(90deg, rgba(110, 20, 34, 0.45), rgba(8, 22, 46, 0.6)); }
#view-group .gm:hover, #view-group .gm.hl { border-color: var(--border-hi); background: linear-gradient(90deg, rgba(30, 80, 150, 0.6), rgba(10, 30, 62, 0.7)); box-shadow: 0 0 14px rgba(47, 160, 255, 0.25); }
#view-group .gm.watch.hl, #view-group .gm.watch:hover { border-left-color: var(--amber); }
#view-group .gm.crit.hl, #view-group .gm.crit:hover { border-left-color: var(--red); }
#view-group .gm-a { min-height: 22px; }
#view-group .gm-id { font-family: var(--num); font-size: 14px; font-weight: 700; letter-spacing: 0.6px; color: #8cc8ff; text-align: center; padding: 0 2px; border-radius: 4px; border: 1px solid rgba(100, 170, 255, 0.35); background: rgba(10, 30, 60, 0.8); line-height: 20px; }
#view-group .gm.watch .gm-id { color: #ffc65a; border-color: rgba(255, 178, 36, 0.55); background: rgba(70, 46, 6, 0.6); }
#view-group .gm.crit .gm-id { color: #fff; border-color: #ff6a78; background: rgba(226, 52, 71, 0.7); }
#view-group .gm-n { font-family: var(--num); font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: #eaf4ff; }
#view-group .gm-a > b { font-size: 17px; font-weight: 700; color: #eaf4ff; text-align: right; white-space: nowrap; }
#view-group .gm-a > b[data-v="thr"] { color: #bcd4f2; }
#view-group .gm-a .pv { font-size: 15px; font-weight: 700; text-align: right; color: #cfe3fa; }
#view-group .gm-b { display: none; grid-template-columns: 96px minmax(0, 1fr) 50px auto; gap: 10px; align-items: center; padding-left: 48px; }
#view-group .gm-cpo { font-size: 14px; color: var(--text-mute); white-space: nowrap; }
#view-group .gm-cpo b { font-size: 17px; font-weight: 700; color: #eaf4ff; margin-left: 3px; }
#view-group .gm-cpo small { font-family: var(--num); font-size: 14px; color: var(--text-dim); margin-left: 2px; }
#view-group .gm-b .bar { height: 6px; }
#view-group .gm-sp { display: flex; align-items: flex-end; }
#view-group .gm-sp .spark { width: 50px; height: 22px; display: block; }
#view-group .gm-b .badge { padding: 1px 10px; }
/* region view: fewer, taller rows */
#view-group .g-mills-b.roomy .g-mills-in { gap: 7px; }
#view-group .g-mills-b.roomy .gm { flex: 1 1 0; padding: 8px 10px 8px 8px; gap: 10px; }
#view-group .g-mills-b.roomy .gm-b { display: grid; }
#view-group .g-mills-b.roomy .gm-n { font-size: 16px; }
#view-group .g-mills-b.roomy .gm-a > b { font-size: 19px; }
#view-group .g-mills-b.roomy .gm-hd { padding: 0 12px 0 14px; }

/* --------------------------------------------------------------------- map */
#view-group .g-map { padding: 0; background: #020814; }
#view-group .g-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#view-group .g-cv:active { cursor: grabbing; }
#view-group .g-ovl { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
#view-group .g-ovl.lo { z-index: 4; }     /* an open cluster list sits above the map head / legend while hovered */
#view-group .g-lead { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .25s; }
#view-group .g-lead polyline { fill: none; stroke-width: 1.4; stroke-opacity: 0.85; }
#view-group .g-lead polyline.tl { stroke-width: 1; stroke-opacity: 0.6; }
#view-group .g-lead circle { stroke: rgba(255, 255, 255, 0.7); stroke-width: 1; }
#view-group .g-lead polyline.tl.kc { stroke-width: 1.2; stroke-opacity: 0.75; }                       /* cluster spokes */
#view-group .g-lead polyline.tl.ko { stroke-width: 1.3; stroke-opacity: 0.85; }                       /* open cluster: beacon → list row */
#view-group .g-ovl.fly .g-lead, #view-group .g-ovl.fly .mc, #view-group .g-ovl.fly .mt, #view-group .g-ovl.fly .mk { opacity: 0; pointer-events: none; }

#view-group .g-head { position: absolute; left: 6px; top: 4px; z-index: 3; display: flex; gap: 10px; align-items: flex-start; pointer-events: none;
  padding: 8px 26px 8px 10px; border-radius: 10px;   /* soft backdrop: the title stays legible over lit coastlines and beacons (region views) */
  background: linear-gradient(90deg, rgba(2, 8, 20, 0.82), rgba(2, 8, 20, 0.66) 75%, rgba(2, 8, 20, 0)); }
#view-group .g-head .ico { width: 26px; height: 26px; color: var(--cyan); margin-top: 2px; filter: drop-shadow(0 0 6px rgba(47, 212, 255, 0.6)); }
#view-group .g-head .ico svg { width: 26px; height: 26px; }
#view-group .g-head .t { font-family: var(--num); font-size: 21px; font-weight: 700; letter-spacing: 0.5px; text-shadow: 0 2px 8px #000; }
#view-group .g-head .s { font-size: 14px; color: var(--text-dim); text-shadow: 0 1px 4px #000; white-space: nowrap; }
#view-group .g-legend { position: absolute; right: 16px; top: 16px; z-index: 3; display: flex; gap: 16px; font-size: 14px; color: var(--text-dim); pointer-events: none;
  padding: 5px 12px; border-radius: 16px; background: rgba(4, 14, 32, 0.7); border: 1px solid var(--line); }
#view-group .g-legend span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
#view-group .g-legend .dotc { box-shadow: 0 0 6px currentColor; }
#view-group .g-legend b { font-family: var(--num); font-size: 16px; color: var(--text); }
#view-group .g-compass { position: absolute; right: 16px; bottom: 12px; z-index: 3; width: 44px; height: 44px; pointer-events: none; }
#view-group .g-compass svg { width: 44px; height: 44px; display: block; }
#view-group .g-compass .nd { transform-origin: 20px 20px; transform-box: view-box; }
#view-group .g-compass span { position: absolute; left: 0; right: 0; top: -17px; text-align: center; font-family: var(--num); font-size: 14px; font-weight: 700; color: #8cc8ff; }
#view-group .g-scale { position: absolute; left: 16px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; font-family: var(--num); font-size: 14px; color: var(--text-dim); white-space: nowrap; }
#view-group .g-scale i { display: block; width: 90px; height: 7px; border: 1.5px solid rgba(140, 190, 255, 0.6); border-top: 0; }

/* region chips (bottom centre): Malaysia · Peninsular · Sabah · Sarawak */
#view-group .g-chips { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; display: flex; gap: 4px; padding: 4px; border-radius: 22px;
  background: rgba(4, 14, 32, 0.82); border: 1px solid rgba(90, 150, 230, 0.35); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
#view-group .g-chip { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid transparent; background: transparent; cursor: pointer;
  font-family: var(--ui); font-size: 15px; color: #a9c2e2; white-space: nowrap; transition: background .2s, color .2s, border-color .2s; }
#view-group .g-chip b { font-weight: 600; }
#view-group .g-chip .n { font-family: var(--num); font-size: 15px; font-weight: 700; color: #6f8fb8; min-width: 14px; text-align: center; }
#view-group .g-chip .sd { display: flex; gap: 3px; align-items: center; }
#view-group .g-chip .sd i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); }
#view-group .g-chip .sd i.watch { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
#view-group .g-chip .sd i.crit { background: var(--red); box-shadow: 0 0 6px var(--red); }
#view-group .g-chip:hover { background: rgba(40, 90, 160, 0.35); color: #e4f0ff; }
#view-group .g-chip.on { background: linear-gradient(180deg, rgba(40, 120, 220, 0.55), rgba(20, 70, 150, 0.55)); border-color: rgba(120, 200, 255, 0.7); color: #fff; box-shadow: 0 0 12px rgba(47, 160, 255, 0.35); }
#view-group .g-chip.on .n { color: #bfe6ff; }

/* mill label cards (positioned by JS with translate) */
#view-group .mc { position: absolute; left: 0; top: 0; width: 214px; pointer-events: auto; cursor: pointer; padding: 7px 11px 8px; border-radius: 6px;
  --lc: var(--green);
  background: linear-gradient(180deg, rgba(10, 28, 58, 0.93), rgba(4, 14, 32, 0.93)); border: 1px solid color-mix(in srgb, var(--lc) 70%, transparent); border-left: 3px solid var(--lc);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 12px color-mix(in srgb, var(--lc) 28%, transparent); will-change: transform; transition: box-shadow .2s, background .2s, opacity .25s; }
#view-group .mc.watch { --lc: var(--amber); }
#view-group .mc.crit { --lc: var(--red); animation: g-mccrit 1.2s infinite; }
@keyframes g-mccrit { 50% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 75, 92, 0.85); } }
#view-group .mc:hover, #view-group .mc.hl { background: linear-gradient(180deg, rgba(22, 56, 108, 0.96), rgba(8, 24, 52, 0.96)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55), 0 0 22px color-mix(in srgb, var(--lc) 70%, transparent); z-index: 4; }
#view-group .mc.hide, #view-group .mt.hide { opacity: 0; visibility: hidden; pointer-events: none; animation: none; transition: opacity .2s, visibility 0s .2s; }
#view-group .mc-h { display: flex; align-items: center; gap: 6px; min-width: 0; }
#view-group .mc-n { font-family: var(--num); font-size: 16px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
#view-group .mc-id { font-family: var(--num); font-size: 14px; font-weight: 600; color: var(--text-mute); flex: none; }
#view-group .mc-v { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; white-space: nowrap; }
#view-group .mc-k { display: inline-flex; align-items: baseline; gap: 3px; }
#view-group .mc-k b { font-size: 19px; font-weight: 700; color: #fff; }
#view-group .mc-k small { font-family: var(--num); font-size: 14px; color: var(--text-dim); }
#view-group .mc-sep { width: 1px; height: 14px; background: rgba(140, 180, 230, 0.35); align-self: center; }
#view-group .mc-f { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; }
#view-group .mc-f .badge { padding: 1px 10px; }
#view-group .mc-hp { font-size: 14px; color: var(--text-dim); white-space: nowrap; }
#view-group .mc-hp b { font-size: 16px; color: var(--text); margin-left: 3px; }

/* code tags (Malaysia view, one per mill without a card) */
#view-group .mt { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; height: 24px; padding: 0 7px 0 6px; border-radius: 5px; pointer-events: auto; cursor: pointer;
  font-family: var(--num); font-size: 14px; font-weight: 700; letter-spacing: 0.6px; color: #d8ecff; white-space: nowrap; will-change: transform;
  background: rgba(6, 20, 44, 0.86); border: 1px solid rgba(34, 217, 130, 0.55); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); transition: opacity .25s, background .2s, box-shadow .2s; }
#view-group .mt i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 6px var(--green); flex: none; }
#view-group .mt.watch { border-color: rgba(255, 178, 36, 0.7); } #view-group .mt.watch i { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
#view-group .mt.crit { border-color: rgba(255, 75, 92, 0.85); } #view-group .mt.crit i { background: var(--red); box-shadow: 0 0 6px var(--red); }
#view-group .mt:hover, #view-group .mt.hl { background: rgba(22, 56, 108, 0.96); box-shadow: 0 0 14px rgba(47, 160, 255, 0.5); z-index: 4; }

/* cluster chips (Malaysia view): "●●● 6 mills" for dense Stable / Watch beacons; hover → list, click → zoom to the region */
#view-group .mk { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border-radius: 13px; pointer-events: auto; cursor: pointer;
  font-family: var(--num); font-size: 14px; font-weight: 600; color: #a9c8ea; white-space: nowrap; will-change: transform;
  background: rgba(6, 20, 44, 0.9); border: 1px solid rgba(34, 217, 130, 0.6); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5); transition: opacity .25s, background .2s, box-shadow .2s; }
#view-group .mk.watch { border-color: rgba(255, 178, 36, 0.75); }
#view-group .mk > b { font-size: 16px; font-weight: 700; color: #fff; }
#view-group .mk .sd { display: flex; gap: 3px; align-items: center; }
#view-group .mk .sd i, #view-group .mk-r > i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px var(--green); flex: none; }
#view-group .mk .sd i.watch, #view-group .mk-r.watch > i { background: var(--amber); box-shadow: 0 0 5px var(--amber); }
#view-group .mk:hover, #view-group .mk.open { background: rgba(22, 56, 108, 0.97); box-shadow: 0 0 14px rgba(47, 160, 255, 0.5); z-index: 5; }
#view-group .mk.hide { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s, visibility 0s .2s; }
#view-group .mk-l { display: none; position: absolute; left: 0; top: calc(100% + 5px); width: 262px; padding: 4px 5px 5px; border-radius: 8px; cursor: default;
  background: linear-gradient(180deg, rgba(10, 28, 58, 0.97), rgba(4, 14, 32, 0.97)); border: 1px solid rgba(120, 190, 255, 0.5); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); }
#view-group .mk.open .mk-l { display: block; }
#view-group .mk.up .mk-l { top: auto; bottom: calc(100% + 5px); }
#view-group .mk.rt .mk-l { left: auto; right: 0; }
#view-group .mk-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 2px 6px 5px; margin-bottom: 2px; font-family: var(--ui); font-size: 14px; font-weight: 400; color: var(--text-mute); border-bottom: 1px solid rgba(100, 160, 240, 0.18); cursor: pointer; }
#view-group .mk-h b { font-family: var(--num); font-size: 15px; color: #bfe2ff; }
#view-group .mk-z { color: var(--cyan); }
#view-group .mk-r { display: grid; grid-template-columns: 8px 38px minmax(0, 1fr) auto auto; align-items: center; gap: 6px; height: 25px; padding: 0 6px; border-radius: 5px; cursor: pointer; }
#view-group .mk-r > b { font-size: 14px; font-weight: 700; letter-spacing: 0.5px; color: #8cc8ff; }
#view-group .mk-r.watch > b { color: #ffc65a; }
#view-group .mk-r > span { font-family: var(--ui); font-size: 14px; font-weight: 400; color: #d6e6fa; overflow: hidden; text-overflow: ellipsis; }
#view-group .mk-r > em { font-style: normal; font-size: 15px; font-weight: 700; color: #fff; text-align: right; }
#view-group .mk-r > small { font-size: 14px; font-weight: 400; color: var(--text-dim); }
#view-group .mk-r:hover, #view-group .mk-r.hl { background: rgba(47, 140, 255, 0.22); }

/* ------------------------------------------------------------------- trend */
#view-group .g-trend .panel-h .r .legend { gap: 14px; }

/* ------------------------------------------------------------- mill status */
#view-group .g-status .panel-h .r { font-size: 14px; color: var(--text-dim); gap: 5px; }
#view-group .g-status .panel-h .r b { font-size: 19px; color: var(--text); }
#view-group .g-status .panel-b { padding-bottom: 12px; }
#view-group .g-st-row { display: flex; align-items: center; gap: 16px; }
#view-group .g-donut { flex: none; width: 112px; height: 112px; }
#view-group .g-st-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#view-group .g-sr { display: grid; grid-template-columns: 96px 1fr 28px; align-items: center; gap: 10px; font-size: 15px; }
#view-group .g-sr .l { display: flex; align-items: center; gap: 8px; color: #cfe0f6; }
#view-group .g-sr .dotc { width: 10px; height: 10px; background: var(--green); box-shadow: 0 0 6px var(--green); }
#view-group .g-sr.watch .dotc { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
#view-group .g-sr.crit .dotc { background: var(--red); box-shadow: 0 0 6px var(--red); }
#view-group .g-sr b { font-size: 21px; font-weight: 700; text-align: right; }
#view-group .g-names { display: flex; flex-wrap: wrap; gap: 5px 6px; margin-top: 9px; overflow: hidden; min-height: 26px; max-height: 58px; font-size: 14px; }
#view-group .g-nm { padding: 1px 8px; border-radius: 5px; font-size: 14px; line-height: 22px; white-space: nowrap; cursor: pointer; border: 1px solid; }
#view-group .g-nm.crit { color: #ff8592; border-color: rgba(255, 75, 92, 0.6); background: rgba(80, 12, 22, 0.75); }
#view-group .g-nm.watch { color: #ffc65a; border-color: rgba(255, 178, 36, 0.55); background: rgba(70, 46, 6, 0.7); }
#view-group .g-nm:hover { filter: brightness(1.25); }
#view-group .g-nm.more { color: #a9c2e2; border-color: rgba(100, 160, 240, 0.35); background: rgba(10, 30, 60, 0.7); cursor: default; }
#view-group .g-allok { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: 14px; line-height: 24px; }
#view-group .g-allok svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- process health */
#view-group .g-health .panel-h .r { font-size: 14px; }
#view-group .g-health .panel-b { padding-bottom: 10px; }
#view-group .g-ht { table-layout: fixed; }
#view-group .g-ht th { padding: 2px 2px 6px; vertical-align: bottom; }
#view-group .g-ht th:first-child { width: 130px; padding-left: 8px; }
#view-group .g-ht th:last-child { width: 64px; }
#view-group .g-ht .hd { display: flex; flex-direction: column; align-items: center; gap: 3px; }
#view-group .g-ht .hd .st-icon { width: 26px; height: 26px; }
#view-group .g-ht .hd em { font-style: normal; font-family: var(--num); font-size: 14px; font-weight: 600; letter-spacing: 0.4px; color: var(--text-dim); }
#view-group .g-ht td { padding: 3px 2px; height: 33px; }
#view-group .g-ht td.nm { padding-left: 8px; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#view-group .g-ht tr.hl td { background: rgba(47, 140, 255, 0.12); }
#view-group .hc { display: inline-grid; place-items: center; width: 38px; height: 25px; border-radius: 5px; font-family: var(--num); font-size: 16px; font-weight: 700; cursor: pointer;
  color: #4ff0a2; background: rgba(34, 217, 130, 0.13); border: 1px solid rgba(34, 217, 130, 0.35); }
#view-group .hc.watch { color: #ffc65a; background: rgba(255, 178, 36, 0.16); border-color: rgba(255, 178, 36, 0.55); }
#view-group .hc.crit { color: #fff; background: rgba(226, 52, 71, 0.75); border-color: #ff6a78; box-shadow: 0 0 10px rgba(255, 75, 92, 0.5); }
#view-group .hc:hover { filter: brightness(1.3); }
#view-group .g-ht td.ov { padding: 0 6px; }
#view-group .g-ht td.ov b { font-size: 18px; display: block; line-height: 1.1; }
#view-group .g-ht td.ov .bar { height: 3px; margin-top: 3px; }
/* Malaysia scope: one subtotal row per region (click = focus the region), then the lowest-health mills */
#view-group .g-ht tr.rg td { background: rgba(40, 100, 190, 0.16); border-top: 1px solid rgba(100, 170, 255, 0.18); }
#view-group .g-ht tr.rg td.nm { color: #bfe2ff; font-family: var(--num); font-size: 16px; font-weight: 700; letter-spacing: 0.3px; }
#view-group .g-ht tr.rg td.nm small { font-family: var(--num); font-size: 14px; font-weight: 600; color: var(--text-mute); margin-left: 7px; padding: 0 6px; border-radius: 9px; border: 1px solid rgba(100, 170, 255, 0.3); }
#view-group .g-ht tr.rg:hover td { background: rgba(47, 140, 255, 0.26); }
#view-group .g-ht tr.dv td { height: 26px; padding: 6px 8px 2px; font-size: 14px; color: var(--text-mute); letter-spacing: 0.4px; background: none; border-bottom: 1px solid rgba(100, 160, 240, 0.14); }

/* ---------------------------------------------------------------- alerts */
#view-group .g-alerts .panel-h .r { gap: 6px; }
#view-group .g-al { overflow: hidden; gap: 2px; }
#view-group .g-empty { display: flex; align-items: center; gap: 10px; color: var(--green); font-size: 15px; padding: 14px 6px; }
#view-group .g-empty svg { width: 22px; height: 22px; }