/* สถานะสด (real-time) — dashboard (ธีมสว่าง เข้ากับแอป OEE)
   ใช้ token ของแอป: --oee-surface/line/text/muted/accent/ok/warn/danger · ตัวเลข --oee-font-num */

#mod-live { color:var(--oee-text,#1f2933); }
#mod-live .lv-live { font-size:12px; font-weight:800; letter-spacing:1px; color:var(--oee-danger,#c02626); margin-left:8px;
  vertical-align:middle; animation:lv-pulse 1.6s ease-in-out infinite; }
#mod-live .lv-live.on { color:var(--oee-ok,#1a7f4b); }
@keyframes lv-pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#mod-live .ic { width:17px; height:17px; flex:none; vertical-align:middle; }

/* ========== OVERVIEW ========== */
#mod-live .ov-sum { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
#mod-live .ov-tot, #mod-live .ov-it { display:flex; align-items:center; gap:7px; padding:8px 14px; border-radius:10px;
  background:var(--oee-surface,#fff); border:1px solid var(--oee-line,#dfe4ea); font-size:13px; color:var(--oee-muted,#6b7684); box-shadow:var(--oee-shadow-sm); }
#mod-live .ov-tot b { font-size:17px; color:var(--oee-text); } #mod-live .ov-it b { font-size:15px; color:var(--oee-text); }
#mod-live .ov-it .d { width:9px; height:9px; border-radius:50%; background:var(--acc); }
#mod-live .ov-grid { display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); }
#mod-live .ov-card { text-align:left; cursor:pointer; background:var(--oee-surface,#fff); border:1px solid var(--oee-line,#dfe4ea);
  border-top:3px solid var(--acc,#9aa7b4); border-radius:14px; padding:14px 16px; color:var(--oee-text);
  display:flex; flex-direction:column; gap:8px; box-shadow:var(--oee-shadow-sm); transition:transform .1s, box-shadow .2s; }
#mod-live .ov-card:hover { transform:translateY(-2px); box-shadow:var(--oee-shadow); }
#mod-live .ov-h { display:flex; align-items:center; gap:10px; }
#mod-live .ov-name { font-weight:700; font-size:16px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mod-live .ov-badge { margin-left:auto; flex:none; padding:3px 12px; border-radius:999px; font-size:12px; font-weight:800;
  color:#fff; background:var(--acc); }
#mod-live .ov-big { display:flex; align-items:baseline; gap:8px; }
#mod-live .ov-big b { font-family:var(--oee-font-num,Consolas,monospace); font-size:38px; font-weight:800; color:var(--oee-text); }
#mod-live .ov-big span { font-size:12px; color:var(--oee-muted); }
#mod-live .ov-row { display:flex; justify-content:space-between; font-size:13px; color:var(--oee-muted); }
#mod-live .ov-row b { font-family:var(--oee-font-num,Consolas,monospace); font-size:16px; color:var(--oee-text); }
#mod-live .ov-row b.neg { color:var(--oee-danger); } #mod-live .ov-row b.pos { color:var(--oee-ok); }
#mod-live .ov-go { font-size:12px; color:var(--acc); font-weight:700; }

/* ========== DETAIL ========== */
#mod-live .dash-top { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
#mod-live .dash-bc { font-size:13px; color:var(--oee-muted); } #mod-live .dash-bc b { color:var(--oee-text); }
#mod-live .dash-back { margin-left:auto; cursor:pointer; background:var(--oee-surface,#fff); border:1px solid var(--oee-line,#dfe4ea); color:var(--oee-text);
  border-radius:9px; padding:7px 14px; font-size:13px; font-weight:700; box-shadow:var(--oee-shadow-sm); }
#mod-live .dash-back:hover { border-color:var(--oee-accent); color:var(--oee-accent); }
#mod-live .dash-head { display:flex; align-items:center; gap:14px; margin-bottom:12px; flex-wrap:wrap; }
#mod-live .dash-mc { display:flex; align-items:center; gap:10px; font-size:clamp(20px,2.4vw,28px); font-weight:800; min-width:0; }
#mod-live .dash-mc .ic { width:26px; height:26px; color:var(--oee-muted); }
#mod-live .dash-mc .d-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#mod-live .dash-sub { font-size:13px; color:var(--oee-muted); }
#mod-live .d-commu.ok { color:var(--oee-ok); font-weight:600; } #mod-live .d-commu.no { color:var(--oee-danger); }

/* สถานะใหญ่ — ยังใช้สีสดเพื่อให้เด่น */
#mod-live .dash-status { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:14px 22px; border-radius:14px;
  font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:.5px; color:#fff;
  background:linear-gradient(90deg, var(--acc), color-mix(in srgb,var(--acc) 72%, #ffffff));
  box-shadow:0 6px 18px color-mix(in srgb,var(--acc) 28%, transparent); }
#mod-live .dash-status .d-sdot { width:15px; height:15px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.8); animation:lv-pulse 1.6s ease-in-out infinite; }
#mod-live .dash-status em { font-style:normal; font-size:15px; font-weight:600; opacity:.92; }

/* การ์ดใหญ่ 3 — ธีมอ่อน tint */
#mod-live .dash-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:14px; }
#mod-live .dash-card { border-radius:14px; padding:16px 18px; border:1px solid var(--oee-line,#dfe4ea); background:var(--oee-surface,#fff); min-width:0; box-shadow:var(--oee-shadow-sm); }
#mod-live .dc-h { display:flex; align-items:center; gap:8px; font-size:14px; color:var(--oee-muted); margin-bottom:8px; font-weight:600; }
#mod-live .dc-n { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
#mod-live .dc-n b { font-family:var(--oee-font-num,Consolas,monospace); font-size:clamp(30px,5vw,46px); font-weight:800;
  color:var(--oee-text); min-width:0; overflow:hidden; text-overflow:ellipsis; }
#mod-live .dc-n i { font-style:normal; font-size:14px; color:var(--oee-muted); }
#mod-live .dc-sub { font-size:12px; color:var(--oee-muted); margin-top:4px; }
#mod-live .c-plan { background:#eef4fd; border-color:#c7ddf7; } #mod-live .c-plan .dc-h { color:var(--oee-accent,#0b6bcb); }
#mod-live .c-act  { background:#eaf6ef; border-color:#bfe3cd; } #mod-live .c-act .dc-h { color:var(--oee-ok,#1a7f4b); }
#mod-live .c-diff { background:#fdeeee; border-color:#f3cccc; } #mod-live .c-diff .dc-h { color:var(--oee-danger,#c02626); }
#mod-live .c-act .dc-sub b { color:var(--oee-ok); font-family:var(--oee-font-num,Consolas,monospace); }
#mod-live .d-diffpc { font-family:var(--oee-font-num,Consolas,monospace); font-size:13px; font-weight:800; padding:3px 9px;
  border-radius:8px; background:#e4f4ec; color:var(--oee-ok,#1a7f4b); }
#mod-live .d-diffpc.neg { background:#fde3e3; color:var(--oee-danger,#c02626); }

/* progress */
#mod-live .dash-prog { background:var(--oee-surface,#fff); border:1px solid var(--oee-line,#dfe4ea); border-radius:14px; padding:14px 18px; margin-bottom:14px; box-shadow:var(--oee-shadow-sm); }
#mod-live .dp-top { display:flex; align-items:center; gap:12px; font-size:14px; color:var(--oee-muted); margin-bottom:8px; font-weight:600; }
#mod-live .dp-top b { margin-left:auto; font-family:var(--oee-font-num,Consolas,monospace); font-size:26px; font-weight:800; color:var(--oee-ok,#1a7f4b); }
#mod-live .dp-top em { font-style:normal; font-family:var(--oee-font-num,Consolas,monospace); font-size:14px; color:var(--oee-muted); }
#mod-live .dp-bar { height:16px; background:#eef1f5; border-radius:9px; overflow:hidden; border:1px solid var(--oee-line,#dfe4ea); }
#mod-live .dp-bar > i { display:block; height:100%; border-radius:9px; transition:width .5s ease;
  background:linear-gradient(90deg,#34c27e,var(--oee-ok,#1a7f4b)); }

/* stat tiles */
#mod-live .dash-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
#mod-live .ds { background:var(--oee-surface,#fff); border:1px solid var(--oee-line,#dfe4ea); border-radius:12px; padding:12px 14px; min-width:0; box-shadow:var(--oee-shadow-sm); }
#mod-live .ds span { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--oee-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mod-live .ds b { display:block; margin-top:5px; font-family:var(--oee-font-num,Consolas,monospace); font-size:24px; font-weight:800;
  color:var(--oee-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mod-live .ds b.pos { color:var(--oee-ok); } #mod-live .ds b.warn { color:var(--oee-warn); } #mod-live .ds b.neg { color:var(--oee-danger); }

/* chart + oee */
#mod-live .dash-low { display:grid; grid-template-columns:2fr 1fr; gap:14px; margin-bottom:14px; }
#mod-live .dash-chart, #mod-live .dash-oee { background:var(--oee-surface,#fff); border:1px solid var(--oee-line,#dfe4ea); border-radius:14px; padding:14px 16px; min-width:0; box-shadow:var(--oee-shadow-sm); }
#mod-live .dl-h { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--oee-text); margin-bottom:8px; }
#mod-live .dl-h em { font-style:normal; font-weight:400; font-size:12px; color:var(--oee-muted); }
#mod-live .dl-legend { font-size:12px; margin-bottom:6px; } #mod-live .lg-plan { color:var(--oee-accent,#0b6bcb); margin-right:14px; } #mod-live .lg-act { color:var(--oee-ok,#1a7f4b); margin-right:14px; } #mod-live .lg-out { color:#0891b2; }
#mod-live .dl-empty { color:var(--oee-muted); text-align:center; padding:40px 0; font-size:13px; }
#mod-live .chart { width:100%; height:auto; }
#mod-live .chart .gl { stroke:#eef1f5; stroke-width:1; }
#mod-live .chart .ax { fill:var(--oee-muted,#6b7684); font-size:11px; font-family:var(--oee-font-num,Consolas,monospace); }
#mod-live .chart .c-plan { fill:none; stroke:var(--oee-accent,#0b6bcb); stroke-width:2.5; stroke-dasharray:6 5; }
#mod-live .chart .c-act { fill:none; stroke:var(--oee-ok,#1a7f4b); stroke-width:3; }
#mod-live .chart .c-out { fill:none; stroke:#0891b2; stroke-width:2.5; }
#mod-live .chart .c-area { fill:rgba(26,127,75,.10); stroke:none; }
#mod-live .chart .pt-act { fill:var(--oee-ok,#1a7f4b); } #mod-live .chart .pt-plan { fill:var(--oee-accent,#0b6bcb); } #mod-live .chart .pt-out { fill:#0891b2; }
#mod-live .chart-cap { display:flex; gap:16px; justify-content:flex-end; font-family:var(--oee-font-num,Consolas,monospace); font-size:13px; margin-top:4px; }
#mod-live .cc-act { color:var(--oee-ok,#1a7f4b); } #mod-live .cc-out { color:#0891b2; } #mod-live .cc-plan { color:var(--oee-accent,#0b6bcb); }
#mod-live .donut { width:100%; max-width:200px; display:block; margin:0 auto; }
#mod-live .donut .dn-n { fill:var(--oee-text,#1f2933); font-size:26px; font-weight:800; font-family:var(--oee-font-num,Consolas,monospace); }
#mod-live .donut .dn-c { fill:var(--oee-muted,#6b7684); font-size:13px; }
#mod-live .d-apq { margin-top:8px; display:flex; flex-direction:column; gap:6px; }
#mod-live .apq { display:flex; justify-content:space-between; font-size:13px; color:var(--oee-muted); }
#mod-live .apq b { font-family:var(--oee-font-num,Consolas,monospace); color:var(--oee-text); }

/* ปุ่มล่าง */
#mod-live .dash-actions { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:12px; }
#mod-live .da { cursor:pointer; background:#eceff3; border:1px solid var(--oee-line,#dfe4ea); border-radius:12px; padding:12px; color:var(--oee-text); text-align:center; }
#mod-live .da:hover { border-color:var(--oee-accent); }
#mod-live .da span { display:block; font-weight:800; font-size:15px; } #mod-live .da em { font-style:normal; font-size:11px; color:var(--oee-muted); }
#mod-live .da.on { color:#fff; border-color:transparent; background:var(--acc); }
#mod-live .da.on em { color:rgba(255,255,255,.9); }

/* raw */
#mod-live .lv-raw { margin-top:10px; }
#mod-live .lv-raw summary { cursor:pointer; color:var(--oee-muted); font-size:12px; }
#mod-live .lv-raw table { width:100%; border-collapse:collapse; margin-top:6px; font-size:12px; font-family:var(--oee-font-num,Consolas,monospace); }
#mod-live .lv-raw td { padding:2px 6px; border-top:1px solid var(--oee-line-soft,#eef1f5); } #mod-live .lv-raw td:first-child { color:var(--oee-muted); width:55%; }

#mod-live .dash.stale { opacity:.72; }

@media (max-width:820px){ #mod-live .dash-low { grid-template-columns:1fr; } #mod-live .dash-cards { grid-template-columns:1fr; } #mod-live .dash-actions { grid-template-columns:repeat(2,1fr); } }