/* Màn #/sim · Mô phỏng vận hành (DEMO). Màu theo UI_SPEC của bộ nguồn: gốc xanh đậm, thêm cam, thay tím, huỷ xám, người teal; mọi trạng thái có chữ bên cạnh màu. */
.sim { --sx-navy: #102c54; --sx-blue: #2563eb; --sx-ai: #6d3db4; --sx-human: #087f8c; --sx-add: #f05b32; --sx-ok: #2f7a4a; --sx-no: #b4372f; --sx-unk: #9a6a12; }
.sim-warn { background: #fbf3e3; border: 1px solid #ecd9ae; border-radius: 12px; padding: 10px 14px; font-size: 13px; line-height: 1.5; margin: 0 0 14px; }
.sim-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin: 0 0 16px; }
.sim-clock { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; }
.sim-clock span { color: var(--ink-3); } .sim-clock b { font-variant-numeric: tabular-nums; font-size: 16px; min-width: 70px; }
.sim-code { display: inline-block; font: 600 11px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 0 6px; border-radius: 6px; background: #e7efe9; color: var(--sx-ok); }
.sim-code.no { background: #f6e3e1; color: var(--sx-no); }
.sim-ai { display: inline-block; font: 700 10px/1.5 system-ui, sans-serif; padding: 0 5px; border-radius: 5px; background: var(--sx-ai); color: #fff; letter-spacing: .04em; }
.sim-t { font-size: 10.5px; padding: 0 5px; border-radius: 5px; border: 1px solid var(--line); color: var(--ink-3); }
.sim-note { margin-top: 4px; font-size: 12px; color: var(--sx-unk); }
.sim-s { display: inline-block; font-size: 10.5px; font-weight: 600; padding: 1px 6px; border-radius: 6px; background: #eceae4; color: #4d5a55; }
.sim-s.s-ACTIVE, .sim-s.s-SENT, .sim-s.s-OPEN, .sim-s.s-PROPOSED, .sim-s.s-ACTION_PENDING, .sim-s.s-APPROVAL_REQUIRED { background: #e3ecfb; color: var(--sx-blue); }
.sim-s.s-CONSUMED, .sim-s.s-ACK_ACCEPTED, .sim-s.s-PUBLISHED, .sim-s.s-RESOLVED, .sim-s.s-CLOSED, .sim-s.s-VERIFIED { background: #e2f0e5; color: var(--sx-ok); }
.sim-s.s-EXPIRED, .sim-s.s-RELEASED, .sim-s.s-REJECTED, .sim-s.s-BLOCKED, .sim-s[class*="s-REJECTED_"], .sim-s.s-TIMEOUT_CHECK_STATUS, .sim-s.s-ESC { background: #f6e3e1; color: var(--sx-no); }
.sim-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 14px; font-size: 13px; }
.sim-filters select { margin-left: 6px; }
.sim-sw { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.sim-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sim-box h4 { margin: 0 0 8px; font-size: 13.5px; }
.sim-tb { font-size: 12px; } .sim-tb td, .sim-tb th { padding: 5px 8px; }

/* 1. Kịch bản */
.sim-play { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 16px; align-items: start; }
.sim-scs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 74px; }
.sim-sc { text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 9px 11px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: inherit; color: inherit; }
.sim-sc b { font-size: 12px; color: var(--sx-navy); } .sim-sc span { font-size: 12.5px; line-height: 1.35; } .sim-sc em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.sim-sc.on { border-color: var(--sx-navy); box-shadow: inset 3px 0 0 var(--sx-navy); }
.sim-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.sim-head h3 { margin: 4px 0 6px; text-transform: none; letter-spacing: 0; font-size: 18px; line-height: 1.3; } .sim-head p { margin: 0 0 6px; }
.sim-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; align-content: flex-start; }
.sim-score { width: 100%; font-size: 12.5px; font-weight: 600; color: var(--ink-3); } .sim-score.ok { color: var(--sx-ok); } .sim-score.no { color: var(--sx-no); }
.sim-steps { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sim-st { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 9px 12px; opacity: .72; }
.sim-st .n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11.5px; font-weight: 700; background: #eceae4; }
.sim-st .l { font-weight: 600; font-size: 13.5px; } .sim-st .m { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.sim-st .r { margin-top: 5px; font-size: 12.5px; line-height: 1.5; } .sim-st .r ol { margin: 4px 0 0; padding-left: 18px; } .sim-st .r em { color: var(--ink-3); font-style: normal; }
.sim-st.ok, .sim-st.no, .sim-st.next { opacity: 1; } .sim-st.ok .n { background: var(--sx-ok); color: #fff; } .sim-st.no { border-color: var(--sx-no); } .sim-st.no .n { background: var(--sx-no); color: #fff; }
.sim-st.next { border-color: var(--sx-navy); border-style: dashed; }
.sim-state { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sim-v { font-size: 12.5px; padding: 4px 0; border-bottom: 1px dashed var(--line); } .sim-v.head { font-weight: 600; } .sim-v em { display: block; font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.sim-k { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 6px; border-radius: 6px; margin-right: 4px; color: #fff; background: var(--sx-navy); }
.sim-k.k-add { background: var(--sx-add); } .sim-k.k-rep { background: var(--sx-ai); } .sim-k.k-can { background: #8b8f8c; }
.sim-svcs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.sim-svc { font-size: 11.5px; padding: 1px 7px; border-radius: 10px; border: 1px solid var(--sx-navy); color: var(--sx-navy); }
.sim-svc.s-add { border-color: var(--sx-add); color: #b0401f; } .sim-svc.s-replace { border-color: var(--sx-ai); color: var(--sx-ai); } .sim-svc.s-cancelled { border-color: #aaa; color: #888; text-decoration: line-through; }
.sim-case-s { font-size: 12.5px; padding: 4px 0; }
.sim-prop { font-size: 12.5px; padding: 3px 0; }
.sim-log { list-style: none; margin: 0; padding: 0; font-size: 12px; line-height: 1.45; max-height: 260px; overflow: auto; }
.sim-log li { padding: 3px 0; border-bottom: 1px dashed var(--line); } .sim-log li > span:first-child { color: var(--ink-3); font-variant-numeric: tabular-nums; margin-right: 6px; }

/* 2. So sánh kế hoạch */
.sim-tls { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; }
.sim-tl { flex: 0 0 auto; text-align: left; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 8px 10px; cursor: pointer; font: inherit; color: inherit; max-width: 200px; display: flex; flex-direction: column; gap: 3px; }
.sim-tl b { font-size: 13px; } .sim-tl span:last-child { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; } .sim-tl.on { border-color: var(--sx-navy); box-shadow: 0 0 0 2px rgba(16, 44, 84, .15); }
.sim-sum { margin: 12px 0; } .sim-sum b { font-size: 16px; }
.sim-diff tr.d-add td:first-child { box-shadow: inset 3px 0 0 var(--sx-add); } .sim-diff tr.d-replace td:first-child { box-shadow: inset 3px 0 0 var(--sx-ai); }
.sim-diff tr.d-cancelled td:first-child { box-shadow: inset 3px 0 0 #8b8f8c; text-decoration: line-through; color: #777; }

/* 3. Điều độ */
.sim-trip h4 { margin: 2px 0; font-size: 15px; }
.sim-tris { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.sim-tri { font-size: 11.5px; padding: 2px 7px; border-radius: 8px; background: #e2f0e5; color: var(--sx-ok); }
.sim-tri.no { background: #f6e3e1; color: var(--sx-no); } .sim-tri.unk { background: #fbf0d9; color: var(--sx-unk); }
.sim-mf { display: grid; grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 6px 0; }
.sim-mf > div { background: var(--card); padding: 6px 8px; display: flex; flex-direction: column; } .sim-mf b { font-size: 16px; font-variant-numeric: tabular-nums; } .sim-mf span { font-size: 11px; color: var(--ink-3); }
.sim-crews { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.sim-crew { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 8px; align-items: center; font-size: 12px; }
.sim-crew i { display: block; height: 6px; border-radius: 4px; background: linear-gradient(90deg, var(--sx-human) var(--w), #e6e3dc var(--w)); }
.sim-crew i.hot { background: linear-gradient(90deg, var(--sx-no) var(--w), #e6e3dc var(--w)); } .sim-crew em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.sim-cmds { font-size: 12.5px; display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

.sim-quiet { font-size: 12px; padding: 4px 9px; border-radius: 8px; background: #eef0f6; color: #3d4a6b; margin: 4px 0 6px; display: inline-block; }
.sim-quiet.on { background: #23304f; color: #e9edf8; }
.sim-onboard { margin: 2px 0 6px; }
.sim-noti { align-items: center; }
.sim-ret { margin-top: 8px; font-size: 12.5px; } .sim-ret ol { list-style: none; margin: 4px 0 0; padding: 0; } .sim-ret li { padding: 2px 0; color: var(--ink-2); } .sim-ret li.ok { color: var(--sx-ok); } .sim-ret em { font-style: normal; color: var(--ink-3); font-size: 11.5px; }
.sim-s.s-BLOCKED_QUIET_HOURS { background: #f6e3e1; color: var(--sx-no); } .sim-s.s-DEFERRED_QUIET_HOURS { background: #fbf0d9; color: var(--sx-unk); }
.sim-s.s-SENT, .sim-s.s-SENT_TARGETED, .sim-s.s-SENT_AFTER_QUIET { background: #e2f0e5; color: var(--sx-ok); } .sim-s.s-SENT_EMERGENCY_OVERRIDE { background: #23304f; color: #fff; }

/* 4. Heartmap */
.sim-heatw { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.sim-heat { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: 12px; }
.sim-heat th { font-weight: 600; color: var(--ink-3); padding: 2px 4px; }
.sim-heat td { border-radius: 8px; text-align: center; padding: 6px 4px; cursor: pointer; position: relative; min-width: 62px; }
.sim-heat td b { display: block; font-size: 14px; } .sim-heat td span { font-size: 10.5px; color: #3b4a44; } .sim-heat td em { position: absolute; top: 2px; right: 5px; font-style: normal; font-size: 9.5px; color: #55605b; }
.sim-heat td.sel { outline: 2px solid var(--sx-navy); }
.sim-pbtn { display: flex; flex-wrap: wrap; gap: 4px; }

/* 5. Hộp việc */
.sim-task h4 { margin: 3px 0 6px; font-size: 14.5px; line-height: 1.35; } .sim-task.rej { opacity: .7; }
.sim-lc { list-style: none; display: flex; flex-wrap: wrap; gap: 3px; margin: 8px 0 0; padding: 0; }
.sim-lc li { font-size: 10.5px; padding: 1px 6px; border-radius: 6px; background: #eceae4; color: #6b746f; } .sim-lc li.on { background: var(--sx-human); color: #fff; }

/* 6. Sự cố */
.sim-case-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-bottom: 6px; }
.sim-case-h h4 { margin: 0; font-size: 14px; }
.sim-sev { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 7px; background: #fbf0d9; color: var(--sx-unk); }
.sim-sev.v-S1, .sim-sev.v-S2 { background: #f6e3e1; color: var(--sx-no); }
.sim-over { color: var(--sx-no); font-weight: 600; }
.sim-opts { display: flex; flex-direction: column; gap: 3px; margin: 8px 0; font-size: 12.5px; }
.sim-tml { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 2px solid var(--line); font-size: 12px; }
.sim-tml li span { color: var(--ink-3); margin-right: 6px; font-variant-numeric: tabular-nums; }

@media (max-width: 980px) {
  .sim-play { grid-template-columns: minmax(0, 1fr); } .sim-scs { position: static; flex-direction: row; overflow-x: auto; } .sim-sc { flex: 0 0 200px; }
  .sim-state, .sim-heatw { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .sim-crew { grid-template-columns: 1fr; } .sim-case-h { grid-template-columns: auto minmax(0, 1fr); } .sim-case-h > .sim-s { grid-column: 1 / -1; justify-self: start; } }