/* MT Monitor page (#mtMonitorModal) + its two floating windows (#mon-overlay,
   #mon-rescue-float) in "The Ladder" design language. Loaded after ladder.css.
   Every rule is scoped under #mtMonitorModal so nothing leaks into other pages.
   style.css (old dark UI) hard-codes colours both in rules and — via mt4_monitor.js —
   in inline style="" attributes; the [style*="#hex"] selectors below remap those
   inline colours onto the palette (buy = gold, sell = steel, money = up/down). */

/* ---------- shared bits ---------- */
#mtMonitorModal .hint{opacity:1;color:var(--ink3)}
#mtMonitorModal em{color:var(--ink2)}
#mtMonitorModal .sort-asc::after,#mtMonitorModal .sort-desc::after{color:var(--gold);font-size:9px}
#mtMonitorModal th.sortable{cursor:pointer;user-select:none}
#mtMonitorModal th.sortable:hover{color:var(--ink)}
/* inline money colours written by mt4_monitor.js */
#mtMonitorModal [style*="color:#2ec27e"],#mtMonitorModal [style*="color:#3b8cff"]{color:var(--up) !important}
#mtMonitorModal [style*="color:#e5484d"]{color:var(--down) !important}
#mtMonitorModal [style*="color:var(--muted, #8b93a3)"],#mtMonitorModal [style*="color:var(--muted, #8b97a6)"]{color:var(--ink3) !important}

/* filters bar */
#mtMonitorModal .mon-filters{align-items:flex-end;gap:10px 12px}
#mtMonitorModal .mon-filters label{font-size:12.5px;color:var(--ink2);gap:4px}
#mtMonitorModal .mon-filters input,#mtMonitorModal .mon-filters select{height:34px}

/* panel headings: hint text + inline controls sit on the heading baseline */
#mtMonitorModal .webpart > h3 .hint,#mtMonitorModal .webpart > h4 .hint,#mtMonitorModal #mon-master > h3 .hint{
  display:inline;font:400 12.5px/1.3 var(--display);color:var(--ink3);letter-spacing:0}
#mtMonitorModal .webpart > h3 select{height:30px;width:auto;min-width:150px;font:500 13px var(--display)}
#mtMonitorModal .webpart > h3 .btn-sq,#mtMonitorModal .webpart > h4 .btn-sq{height:28px;min-width:28px;padding:0 7px;font-size:13px;border-radius:6px}

/* ---------- summary cards ---------- */
#mtMonitorModal #mon-cards{margin:0}
#mtMonitorModal .mon-card{padding:10px 14px}
#mtMonitorModal .mon-card .v{font:640 21px/1.15 var(--mono);letter-spacing:-.02em}
#mtMonitorModal .mon-card .k{font-size:12.5px;color:var(--ink2);margin-top:3px}
#mtMonitorModal .mon-card .hint,#mtMonitorModal .mon-card a{font-size:12px}
#mtMonitorModal .mon-card a{color:var(--ink3);text-decoration:underline;text-underline-offset:2px}
#mtMonitorModal .mon-card a:hover{color:var(--ink)}

/* ---------- live orders at the broker ---------- */
#mtMonitorModal #mon-orders{overflow-x:auto;max-width:100%}
#mtMonitorModal #mon-orders:not(:has(table)){padding:10px 12px;border:1px dashed var(--line2);border-radius:10px;
  background:var(--bg);color:var(--ink2);font-size:13px;overflow-wrap:anywhere}
/* plain text (no <em>) = the "orders unavailable … unreachable" error */
#mtMonitorModal #mon-orders:not(:has(table)):not(:has(em)):not(:empty){border:1px solid color-mix(in srgb,var(--warn) 45%,transparent);
  border-style:solid;background:var(--warn-bg);color:var(--warn)}
#mtMonitorModal #mon-orders em{font-style:normal;color:var(--ink2)}
#mtMonitorModal .mon-orders-grp{margin:0 0 14px}
#mtMonitorModal .mon-orders-grp h5{font:600 13.5px/1.3 var(--display);color:var(--ink2);margin:4px 0 6px}
#mtMonitorModal #mon-orders .mtx-tbl th,#mtMonitorModal #mon-orders .mtx-tbl td{text-align:left;white-space:nowrap}
#mtMonitorModal #mon-orders .mtx-tbl td{font-family:var(--mono);font-size:12.5px}
#mtMonitorModal #mon-orders .mtx-tbl td:nth-child(n+9){font-family:var(--display);font-size:13px}

/* ---------- sessions list ---------- */
#mtMonitorModal #mon-master > h3{margin-bottom:12px}
#mtMonitorModal .mon-sess-tools{gap:10px;font:400 12.5px var(--display)}
#mtMonitorModal .mon-sess-tools .btn{height:28px;padding:0 10px;font-size:12.5px;border-radius:6px}
#mtMonitorModal .mon-show-arc{font-size:12.5px;color:var(--ink2);gap:6px}
#mtMonitorModal .mon-sess-card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  margin-bottom:10px;gap:6px 8px;font-size:13.5px;transition:border-color .15s,background .15s}
#mtMonitorModal .mon-sess-card:hover{border-color:var(--line2);background:var(--bg3)}
#mtMonitorModal .mon-sess-card.sel{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset;background:var(--bg2)}
#mtMonitorModal .mon-sess-card > b{font:600 13.5px/1.2 var(--mono)}
#mtMonitorModal .mon-sess-card .who{color:var(--ink);font-weight:540}
#mtMonitorModal .mon-sess-card > .hint{font-size:12px}
#mtMonitorModal .mon-sess-card > span[title]:not(.badge){font:600 12px/1 var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
#mtMonitorModal .mon-sess-card .pl-real{font:500 12px/1 var(--mono)}
#mtMonitorModal .mon-sess-card .badge{height:20px;font-size:11.5px;padding:0 8px}
#mtMonitorModal .mon-sess-card button{height:26px;min-width:26px;padding:0 7px;border-radius:6px;font-size:12px;
  background:var(--bg);border:1px solid var(--line2);color:var(--ink2);cursor:pointer;line-height:1}
#mtMonitorModal .mon-sess-card button:hover{background:var(--bg4);color:var(--ink)}
#mtMonitorModal .mon-sess-card .mon-stop{color:var(--down);font:600 12px/1 var(--display);padding:0 10px}
#mtMonitorModal .mon-sess-card .mon-stop:hover,#mtMonitorModal .mon-sess-card .mon-del:hover{background:var(--down-bg);border-color:color-mix(in srgb,var(--down) 50%,transparent);color:var(--down)}
#mtMonitorModal .mon-sess-card .mon-unarc{color:var(--ink);font-size:13px}
/* heartbeat dots */
#mtMonitorModal .hb-dot{width:8px;height:8px;margin-right:2px;box-shadow:none;vertical-align:middle}
#mtMonitorModal .hb-green{background:var(--up);box-shadow:0 0 0 3px var(--up-bg)}
#mtMonitorModal .hb-amber{background:var(--warn)}
#mtMonitorModal .hb-red{background:var(--down)}
#mtMonitorModal .hb-grey{background:var(--ink3)}
/* the selected card's "2 · Safety limits / 3 · Mode & start" block */
#mtMonitorModal .mon-sess-cfg{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;gap:10px 22px;font-size:12.5px}
#mtMonitorModal .mon-sess-cfg .grp{gap:3px;min-width:200px;flex:1 1 200px}
#mtMonitorModal .mon-sess-cfg .ttl{text-transform:none;letter-spacing:0;font:600 12.5px/1.4 var(--display);color:var(--ink2);margin-bottom:2px}
#mtMonitorModal .mon-sess-cfg .kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 0;
  border-bottom:1px dashed var(--line)}
#mtMonitorModal .mon-sess-cfg .kv:last-child{border-bottom:0}
#mtMonitorModal .mon-sess-cfg .kv .k{color:var(--ink2);white-space:nowrap}
#mtMonitorModal .mon-sess-cfg .kv .k::after{content:none}
#mtMonitorModal .mon-sess-cfg .kv .v{color:var(--ink);text-align:right;font-weight:520}

/* ---------- session detail ---------- */
#mtMonitorModal #mon-d-empty{padding:28px 16px;text-align:center;border:1px dashed var(--line2);border-radius:10px;font-size:13px;color:var(--ink2)}
#mtMonitorModal #mon-d-title{overflow-wrap:anywhere}
#mtMonitorModal #mon-d-title .badge{vertical-align:middle;margin-left:4px}
#mtMonitorModal .mon-heart{color:var(--ink2);font-size:13px}
#mtMonitorModal #mon-d-heart{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap}
#mtMonitorModal #mon-d-ping{height:30px;padding:0 11px;font-size:13px}
#mtMonitorModal #mon-d-ping-out{font-family:var(--mono);font-size:12px}
/* detail sections sit flat inside the Sessions panel, divided by hairlines */
#mtMonitorModal #mon-d-body > .webpart{background:none;border:0;border-top:1px solid var(--line);border-radius:0;padding:18px 0 4px;margin:0 0 14px}
#mtMonitorModal #mon-d-body > .webpart > h4{font:640 16px/1.3 var(--display);margin:0 0 12px}
#mtMonitorModal #mon-d-grid{gap:14px}
#mtMonitorModal #mon-d-grid > .webpart{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-width:0}
#mtMonitorModal #mon-d-grid > .webpart > h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font:600 13.5px/1.3 var(--display);color:var(--ink2);margin:0 0 10px}
#mtMonitorModal #mon-d-grid > .webpart > h4 .hint{font-size:12px}
#mtMonitorModal #mon-d-grid .hint{font-size:12.5px}

/* Buy / Sell bars */
#mtMonitorModal .mon-bars{gap:18px 30px;margin:0;font-size:12.5px}
#mtMonitorModal .mon-bars .cl-title{font:600 12.5px/1.3 var(--display);color:var(--ink2);margin-bottom:6px}
#mtMonitorModal .mon-bars .barrow{gap:8px;margin:4px 0}
#mtMonitorModal .mon-bars .barrow.total{border-top:1px solid var(--line);padding-top:5px;margin-top:5px}
#mtMonitorModal .mon-bars .barrow .lbl{width:auto;min-width:34px;font-size:12.5px;color:var(--ink2)}
#mtMonitorModal .mon-bars .lbl[style*="#2ec27e"]{color:var(--gold) !important;font-weight:600}
#mtMonitorModal .mon-bars .lbl[style*="#e5484d"]{color:var(--steel) !important;font-weight:600}
#mtMonitorModal .mon-bars .bar{height:10px;border-radius:5px;background:var(--bg4)}
#mtMonitorModal .mon-bars .bar[style*="#2ec27e"]{background:var(--up) !important}
#mtMonitorModal .mon-bars .bar[style*="#e5484d"]{background:var(--down) !important}
#mtMonitorModal .mon-bars .seg[style*="#3b82f6"]{background:var(--ink2) !important}
#mtMonitorModal .mon-bars .barrow:has(.lbl[style*="#2ec27e"]) .seg[style*="#3b82f6"]{background:var(--gold) !important}
#mtMonitorModal .mon-bars .barrow:has(.lbl[style*="#e5484d"]) .seg[style*="#3b82f6"]{background:var(--steel) !important}
#mtMonitorModal .mon-bars .seg[style*="#566070"]{background:var(--line2) !important}
#mtMonitorModal .mon-bars .seg[style*="#f0b90b"]{background:var(--warn) !important;opacity:.75}
#mtMonitorModal .mon-bars .val{font:500 12px/1.3 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
#mtMonitorModal .mon-bars .val.hint{color:var(--ink3)}
#mtMonitorModal .mon-bars .ccy{color:var(--ink3);font-size:11px}

/* Session P/L: per-cycle chips */
#mtMonitorModal .mon-cycle-dd{gap:6px;font-size:12px;color:var(--ink2);margin:0 0 8px}
#mtMonitorModal .mon-cycle-dd .cyc{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border:1px solid var(--line2);
  border-radius:11px;background:var(--bg2);font:500 11.5px/1 var(--mono)}
#mtMonitorModal .mon-cycle-dd .cyc b{color:var(--ink);font-weight:600}
#mtMonitorModal .mon-cycle-dd .cyc .dd{color:var(--down)}

/* Trend gate panel */
#mtMonitorModal .tg-state{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--line2);border-radius:8px;
  padding:8px 10px;margin:0 0 8px;font-size:12.5px;color:var(--ink)}
#mtMonitorModal .tg-state.scanning{border-left-color:var(--warn)}
#mtMonitorModal .tg-state.cycle_running.up,#mtMonitorModal .tg-state.trend_found.up{border-left-color:var(--up)}
#mtMonitorModal .tg-state.cycle_running.down,#mtMonitorModal .tg-state.trend_found.down,#mtMonitorModal .tg-state.deferred{border-left-color:var(--down)}
#mtMonitorModal .tg-state .tg-why{color:var(--ink2)}
#mtMonitorModal .tg-state .tg-next{color:var(--ink3);font-family:var(--mono);font-size:12px}
#mtMonitorModal .tg-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font:600 12px/1 var(--display);
  border:1px solid var(--line2);background:var(--bg3);color:var(--ink2);white-space:nowrap}
#mtMonitorModal .tg-badge.scanning{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
#mtMonitorModal .tg-badge.trend_found,#mtMonitorModal .tg-badge.cycle_running{background:var(--up-bg);color:var(--up);border-color:color-mix(in srgb,var(--up) 45%,transparent)}
#mtMonitorModal .tg-badge.trend_found.down,#mtMonitorModal .tg-badge.cycle_running.down,#mtMonitorModal .tg-badge.deferred{background:var(--down-bg);color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,transparent)}
#mtMonitorModal .tg-badge.cooldown,#mtMonitorModal .tg-badge.not_used,#mtMonitorModal .tg-badge.stopped{background:var(--bg3);color:var(--ink2);border-color:var(--line2)}
#mtMonitorModal .tg-calc{font-size:12.5px;margin-top:8px}
#mtMonitorModal .tg-calc table{width:100%;border-collapse:collapse}
#mtMonitorModal .tg-calc td{padding:5px 6px;border:0;border-top:1px solid var(--line);white-space:normal;font-size:12.5px;font-family:var(--display)}
#mtMonitorModal .tg-calc td.k{color:var(--ink2);white-space:nowrap}
#mtMonitorModal .tg-calc td.v{color:var(--ink)}
#mtMonitorModal .tg-calc td.d{font-family:var(--mono);font-size:12px;color:var(--ink3);text-align:right;white-space:nowrap}
#mtMonitorModal .tg-calc tr.up td.v:not(.d){color:var(--up)}
#mtMonitorModal .tg-calc tr.down td.v:not(.d){color:var(--down)}
#mtMonitorModal .tg-calc tr.flat td.v:not(.d),#mtMonitorModal .tg-calc tr.muted td.v:not(.d){color:var(--ink3)}
#mtMonitorModal .tg-calc tr.warn td.v:not(.d){color:var(--warn)}
#mtMonitorModal .tg-calc .tg-result{margin:8px 0 6px;padding:8px 10px;border-radius:8px;background:var(--bg2);border:1px solid var(--line);font-weight:500;color:var(--ink2)}
#mtMonitorModal .tg-calc .tg-result b{color:var(--ink)}
#mtMonitorModal .tg-calc .tg-result.up b{color:var(--up)}
#mtMonitorModal .tg-calc .tg-result.down b{color:var(--down)}
#mtMonitorModal .tg-calc .tg-result.flat b{color:var(--warn)}
#mtMonitorModal .tg-calc .hint{line-height:1.5}

/* ---------- sortable/filterable tables (Timeline + Report) ---------- */
#mtMonitorModal .mon-tl,#mtMonitorModal .mt-report{background:var(--bg2);border:1px solid var(--line);border-radius:10px}
#mtMonitorModal .mon-tl{max-height:360px;margin:0}
#mtMonitorModal .mon-tl > .hint,#mtMonitorModal .mon-tl > em,#mtMonitorModal .mt-report > .hint{display:block;padding:10px 12px}
#mtMonitorModal .tl-table,#mtMonitorModal .mtr-table{width:100%;font-size:13px}
#mtMonitorModal .tl-table thead,#mtMonitorModal .mtr-table thead{position:sticky;top:0;z-index:2;background:var(--bg2)}
#mtMonitorModal .tl-table th,#mtMonitorModal .mtr-table th,#mtMonitorModal .mon-tl th{position:static;background:var(--bg2);
  font:560 12.5px/1.3 var(--display);color:var(--ink2);padding:7px 10px;white-space:nowrap;border-bottom:1px solid var(--line2)}
#mtMonitorModal tr.tl-filters th,#mtMonitorModal tr.mtr-filters th{padding:5px 4px 6px;border-bottom:1px solid var(--line2)}
#mtMonitorModal .mtr-filter{height:26px;width:100%;min-width:44px;padding:0 7px;border-radius:6px;border:1px solid var(--line);
  background:var(--bg);color:var(--ink);font:400 12px/1 var(--display);text-align:left}
#mtMonitorModal .mtr-filter::placeholder{color:var(--ink3)}
#mtMonitorModal .mtr-filter:focus{border-color:var(--focus);outline:none;box-shadow:0 0 0 2px color-mix(in srgb,var(--focus) 25%,transparent)}
#mtMonitorModal .tl-table td,#mtMonitorModal .mtr-table td{padding:7px 10px;border-bottom:1px solid var(--line);font-size:12.5px}
#mtMonitorModal .tl-table tbody tr:last-child td,#mtMonitorModal .mtr-table tbody tr:last-child td{border-bottom:0}
#mtMonitorModal td.mtr-empty{text-align:center;color:var(--ink3);font:italic 13px var(--display);padding:16px}

/* Timeline */
#mtMonitorModal .mon-tl tr[data-t]:hover td{background:var(--bg3)}
#mtMonitorModal .mon-tl tr.focus td{background:var(--gold-bg)}
#mtMonitorModal .mon-tl tr.focus td:first-child{box-shadow:inset 2px 0 0 var(--gold)}
#mtMonitorModal .mon-tl .tl-ts{font-family:var(--mono);color:var(--ink2);white-space:nowrap}
#mtMonitorModal .tl-table td:nth-child(2){font-family:var(--mono);text-align:right;color:var(--ink2)}
#mtMonitorModal .tl-table td:nth-child(4){font-family:var(--mono);white-space:nowrap}
#mtMonitorModal .tl-table td:nth-child(4) .hint{font-size:12px}
#mtMonitorModal .tl-table td:nth-child(5){font:400 13px/1.4 var(--display);white-space:normal;min-width:260px;color:var(--ink)}
#mtMonitorModal .tl-table td:nth-child(6){text-align:right;font-family:var(--mono)}
#mtMonitorModal .tl-table thead tr:first-child th:nth-child(2),#mtMonitorModal .tl-table thead tr:first-child th:nth-child(6){text-align:right}
/* type chips: the JS gives each type a raw hex (inline background / --c); map them onto the palette */
#mtMonitorModal .tl-type,#mtMonitorModal .tl-chip{--tc:var(--ink2);--tb:var(--bg3)}
#mtMonitorModal .tl-type[style*="#a78bfa"],#mtMonitorModal .tl-chip[style*="#a78bfa"]{--tc:var(--gold);--tb:var(--gold-bg)}
#mtMonitorModal .tl-type[style*="#3b8cff"],#mtMonitorModal .tl-chip[style*="#3b8cff"]{--tc:var(--steel);--tb:var(--steel-bg)}
#mtMonitorModal .tl-type[style*="#ffd479"],#mtMonitorModal .tl-chip[style*="#ffd479"],
#mtMonitorModal .tl-type[style*="#f97316"],#mtMonitorModal .tl-chip[style*="#f97316"]{--tc:var(--warn);--tb:var(--warn-bg)}
#mtMonitorModal .tl-type[style*="#2ec27e"],#mtMonitorModal .tl-chip[style*="#2ec27e"]{--tc:var(--up);--tb:var(--up-bg)}
#mtMonitorModal .tl-type[style*="#e5484d"],#mtMonitorModal .tl-chip[style*="#e5484d"]{--tc:var(--down);--tb:var(--down-bg)}
#mtMonitorModal .tl-type[style*="#6f7d8c"],#mtMonitorModal .tl-chip[style*="#6f7d8c"]{--tc:var(--ink3);--tb:transparent}
#mtMonitorModal .tl-type{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;
  background:var(--tb) !important;color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 40%,transparent);
  font:600 11.5px/1 var(--display);white-space:nowrap}
#mtMonitorModal .tl-type[style*="#f97316"]{border-color:var(--warn)}

/* chip rows (timeline type toggles + report status filter) */
#mtMonitorModal .mtr-chips{gap:5px;margin:0 2px}
#mtMonitorModal .mtr-chip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:12px;
  border:1px solid var(--line2);background:var(--bg2);color:var(--ink2);font:540 12px/1 var(--display);cursor:pointer;letter-spacing:0}
#mtMonitorModal .mtr-chip:hover{color:var(--ink);border-color:var(--ink3);background:var(--bg3)}
#mtMonitorModal .mtr-chip.sel{background:var(--gold-bg);color:var(--gold);border-color:color-mix(in srgb,var(--gold) 55%,transparent)}
#mtMonitorModal .mtr-chip.tl-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tc);opacity:.35}
#mtMonitorModal .mtr-chip.tl-chip:not(.sel){color:var(--ink3);text-decoration:line-through;text-decoration-color:var(--ink3)}
#mtMonitorModal .mtr-chip.tl-chip.sel{background:var(--tb);color:var(--tc);border-color:color-mix(in srgb,var(--tc) 45%,transparent);text-decoration:none}
#mtMonitorModal .mtr-chip.tl-chip.sel::before{opacity:1}
#mtMonitorModal #mon-d-tl-chips{margin-left:4px}

/* Report */
#mtMonitorModal #mon-d-report-seg{margin-left:4px}
#mtMonitorModal #mon-d-report-custom{gap:6px;margin-left:4px}
#mtMonitorModal #mon-d-report-custom input{height:28px;padding:0 8px;width:auto;font:400 12.5px var(--mono)}
#mtMonitorModal #mon-d-report-custom .btn{height:28px;padding:0 10px;font-size:13px}
#mtMonitorModal .mt-report{max-height:none}
#mtMonitorModal .mt-report.tbl{overflow:hidden}
#mtMonitorModal .mtr-bar{padding:8px 10px;border-bottom:1px solid var(--line);gap:10px}
#mtMonitorModal .mtr-scroll{max-height:440px;overflow:auto}
#mtMonitorModal .mtr-table td{white-space:nowrap;font-family:var(--mono)}
#mtMonitorModal .mtr-table td:nth-child(5),#mtMonitorModal .mtr-table td:nth-child(6),
#mtMonitorModal .mtr-table td:nth-child(13),#mtMonitorModal .mtr-table td:nth-child(14){font-family:var(--display);font-size:13px}
#mtMonitorModal .mtr-table td:nth-child(n+7):nth-child(-n+12),#mtMonitorModal .mtr-table td:nth-child(3),#mtMonitorModal .mtr-table td:nth-child(4),
#mtMonitorModal .mtr-table thead tr:first-child th:nth-child(n+7):nth-child(-n+12),
#mtMonitorModal .mtr-table thead tr:first-child th:nth-child(3),#mtMonitorModal .mtr-table thead tr:first-child th:nth-child(4){text-align:right}
#mtMonitorModal .mtr-table tbody tr:hover td{background:var(--bg3)}
#mtMonitorModal .mtr-table tr.k-pending td{background:color-mix(in srgb,var(--warn) 6%,transparent)}
#mtMonitorModal .mtr-table tr.k-open td{background:color-mix(in srgb,var(--steel) 7%,transparent)}
#mtMonitorModal .mtr-table tr.k-closed td{background:none}
#mtMonitorModal .mtr-table tr.k-cancelled td{opacity:.6;background:none}
#mtMonitorModal .mtr-table td.side{font-family:var(--mono);font-weight:600}
#mtMonitorModal .mtr-table td.side.buy{color:var(--gold)}
#mtMonitorModal .mtr-table td.side.sell{color:var(--steel)}
#mtMonitorModal .mtr-pl{font-family:var(--mono);font-weight:600}
#mtMonitorModal .mtr-pl.pos{color:var(--up)}
#mtMonitorModal .mtr-pl.neg{color:var(--down)}
#mtMonitorModal .mtr-pl.zero{color:var(--ink3)}
#mtMonitorModal .mtr-pill{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;font:600 11.5px/1 var(--display);
  border:1px solid var(--line2);background:var(--bg3);color:var(--ink2);text-transform:capitalize}
#mtMonitorModal .mtr-pill.pending{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
#mtMonitorModal .mtr-pill.open{background:var(--steel-bg);color:var(--steel);border-color:color-mix(in srgb,var(--steel) 45%,transparent)}
#mtMonitorModal .mtr-pill.closed{background:var(--up-bg);color:var(--up);border-color:color-mix(in srgb,var(--up) 45%,transparent)}
#mtMonitorModal .mtr-pill.cancelled{background:var(--bg3);color:var(--ink3);border-color:var(--line2)}
/* totals footer: #mon-d-report-foot (outer .mtr-foot) wraps the rendered .mtr-foot grid */
#mtMonitorModal #mon-d-report-foot{display:block;padding:0;border-top:1px solid var(--line2);background:var(--bg3);border-radius:0 0 10px 10px}
#mtMonitorModal #mon-d-report-foot:empty{display:none}
#mtMonitorModal .mt-report .mtr-foot .mtr-foot,#mtMonitorModal .mt-report > .mtr-foot:not(#mon-d-report-foot){display:grid;
  grid-template-columns:max-content minmax(80px,max-content);gap:4px 22px;padding:10px 14px;border:0;background:none;font:500 13px/1.4 var(--display)}
#mtMonitorModal .mt-report .mtr-foot .k{color:var(--ink2);font-weight:500}
#mtMonitorModal .mt-report .mtr-foot .v{font-family:var(--mono);font-size:12.5px;font-weight:600;color:var(--ink);text-align:left}
#mtMonitorModal .mt-report .mtr-foot .v .hint{font-weight:400}
/* list-style report (non-table fallback) */
#mtMonitorModal .mt-report .mtr-row{border-bottom:1px solid var(--line)}
#mtMonitorModal .mt-report .mtr-row.filled{border-left-color:var(--steel)}
#mtMonitorModal .mt-report .mtr-row.filled.buy{border-left-color:var(--gold)}
#mtMonitorModal .mt-report .buy .side{color:var(--gold)}
#mtMonitorModal .mt-report .sell .side{color:var(--steel)}
#mtMonitorModal .mt-report .mtr-sub,#mtMonitorModal .mt-report .mtr-time,#mtMonitorModal .mt-report .mtr-status{color:var(--ink3)}
#mtMonitorModal .mt-report .mtr-empty{color:var(--ink3);font-style:normal}

/* ---------- ladder projection + future-fills map ---------- */
#mtMonitorModal .mon-ladder{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:12.5px;max-height:360px}
#mtMonitorModal .mon-ladder > .hint,#mtMonitorModal .mon-ladder > em{display:block;padding:2px 0}
#mtMonitorModal .lad-row{gap:12px;padding:3px 6px;border-radius:5px}
#mtMonitorModal .lad-price{font-family:var(--mono);color:var(--ink)}
#mtMonitorModal .lad-side{font:600 12.5px var(--display)}
#mtMonitorModal .lad-buy .lad-side{color:var(--gold)}
#mtMonitorModal .lad-sell .lad-side{color:var(--steel)}
#mtMonitorModal .lad-lots{font-family:var(--mono);color:var(--ink2)}
#mtMonitorModal .lad-state{color:var(--ink2)}
#mtMonitorModal .lad-filled{background:var(--gold-bg)}
#mtMonitorModal .lad-filled .lad-state{color:var(--gold);font-weight:600}
#mtMonitorModal .lad-cum{height:6px;border-radius:3px;opacity:.75}
#mtMonitorModal .lad-buy .lad-cum{background:var(--gold)}
#mtMonitorModal .lad-sell .lad-cum{background:var(--steel)}
#mtMonitorModal .lad-cumtxt{font-family:var(--mono);color:var(--ink2)}
#mtMonitorModal .lad-cumtxt .pos,#mtMonitorModal .mon-ladder .pos{color:var(--up)}
#mtMonitorModal .lad-cumtxt .neg,#mtMonitorModal .mon-ladder .neg{color:var(--down)}
#mtMonitorModal .lad-now{color:var(--gold);font:600 12px/1.4 var(--mono);border-top:1px dashed var(--gold);border-bottom:1px dashed var(--gold);
  background:var(--gold-bg);margin:6px 0;padding:3px 0}
#mtMonitorModal .mon-ladbar{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:6px}
#mtMonitorModal .mon-ladbar:empty{min-height:0;padding:12px;border-style:dashed}
#mtMonitorModal .lad-tip{background:var(--bg2);border:1px solid var(--line2);border-radius:8px;color:var(--ink);font-size:12px;
  box-shadow:0 8px 24px rgba(20,30,50,.18);padding:7px 10px}
#mtMonitorModal .lad-tip b[style*="#2ec27e"]{color:var(--gold) !important}
#mtMonitorModal .lad-tip b[style*="#e5484d"]{color:var(--steel) !important}

/* ---------- margin table ---------- */
#mtMonitorModal .mon-margin{overflow-x:auto;max-width:100%}
#mtMonitorModal .mon-margin > .hint,#mtMonitorModal .mon-margin > em{display:block;padding:10px 12px;border:1px dashed var(--line2);border-radius:10px;background:var(--bg)}
#mtMonitorModal .mon-margin .mtx-tbl td{font-family:var(--mono);font-size:12.5px;white-space:nowrap}
#mtMonitorModal .mon-margin .mtx-tbl tr.running td{background:var(--gold-bg)}
#mtMonitorModal .mon-margin .mtx-tbl tr.total td{border-top:1px solid var(--line2);font-weight:600;background:var(--bg3)}

/* ---------- bottom tabs: Orders / Session log / Trade journal / Recent MT events ---------- */
#mtMonitorModal .mon-tab-sess{font-size:12.5px;margin:0 0 10px}
#mtMonitorModal #mon-d-orders,#mtMonitorModal #mon-journal{overflow-x:auto;max-width:100%}
#mtMonitorModal #mon-d-orders > em,#mtMonitorModal #mon-journal > em{display:block;padding:12px;border:1px dashed var(--line2);border-radius:10px;color:var(--ink2);font-style:normal}
#mtMonitorModal #mon-d-orders .mtx-tbl th,#mtMonitorModal #mon-d-orders .mtx-tbl td,
#mtMonitorModal #mon-journal .mtx-tbl th,#mtMonitorModal #mon-journal .mtx-tbl td{text-align:left;white-space:nowrap}
#mtMonitorModal #mon-d-orders .mtx-tbl td,#mtMonitorModal #mon-journal .mtx-tbl td{font-family:var(--display);font-size:13px}
/* Orders tab: opened · symbol · ticket · side · kind · lots · open · close · SL · TP · profit · status · reason */
#mtMonitorModal #mon-d-orders .mtx-tbl td:nth-child(1),#mtMonitorModal #mon-d-orders .mtx-tbl td:nth-child(3),
#mtMonitorModal #mon-d-orders .mtx-tbl td:nth-child(n+6):nth-child(-n+11){font-family:var(--mono);font-size:12.5px}
#mtMonitorModal #mon-d-orders .mtx-tbl td:nth-child(3),#mtMonitorModal #mon-d-orders .mtx-tbl th:nth-child(3),
#mtMonitorModal #mon-d-orders .mtx-tbl td:nth-child(n+6):nth-child(-n+11),#mtMonitorModal #mon-d-orders .mtx-tbl th:nth-child(n+6):nth-child(-n+11){text-align:right}
/* Trade journal: id · opened · user · src · sess · broker · symbol · ticket · side · lots · open · close · profit · status · reason */
#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(1),#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(2),#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(5),
#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(8),#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(n+10):nth-child(-n+13){font-family:var(--mono);font-size:12.5px}
#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(1),#mtMonitorModal #mon-journal .mtx-tbl th:nth-child(1),
#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(8),#mtMonitorModal #mon-journal .mtx-tbl th:nth-child(8),
#mtMonitorModal #mon-journal .mtx-tbl td:nth-child(n+10):nth-child(-n+13),#mtMonitorModal #mon-journal .mtx-tbl th:nth-child(n+10):nth-child(-n+13){text-align:right}
#mtMonitorModal .mtx-tbl .badge{height:18px;padding:0 6px;font-size:11px;margin-left:4px;vertical-align:middle}
#mtMonitorModal #mon-j-filters{margin-bottom:12px}
/* session log + recent events */
#mtMonitorModal .mon-events-box,#mtMonitorModal #mon-events{max-height:340px;overflow-y:auto;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;padding:4px 14px;font-size:13px}
#mtMonitorModal .mon-events-box:has(> em:only-child),#mtMonitorModal .mon-events-box:has(> .hint:only-child),#mtMonitorModal #mon-events:empty{padding:12px 14px}
#mtMonitorModal .mon-event{padding:6px 0;border-bottom:1px solid var(--line);color:var(--ink);line-height:1.45;overflow-wrap:anywhere}
#mtMonitorModal .mon-event:last-child{border-bottom:0}
#mtMonitorModal .mon-event .hint{display:inline;font:400 12px var(--mono);color:var(--ink3);margin-right:6px;white-space:nowrap}
#mtMonitorModal .mon-events-head{margin-bottom:10px}
#mtMonitorModal .mon-events-head .hint{display:inline}
#mtMonitorModal .mon-events-head .btn{height:30px;padding:0 11px;font-size:13px}
/* pagers */
#mtMonitorModal .pager{justify-content:flex-end;gap:10px;padding:10px 0 0;font-size:12.5px;color:var(--ink2)}
#mtMonitorModal .pager .pg-btn{height:28px;padding:0 10px;border-radius:6px;background:var(--bg3);border:1px solid var(--line2);color:var(--ink);
  font:500 13px/1 var(--display);cursor:pointer}
#mtMonitorModal .pager .pg-btn:hover:not(:disabled){background:var(--bg4);border-color:var(--line2)}
#mtMonitorModal .pager .pg-btn:disabled{opacity:.45;cursor:not-allowed}
#mtMonitorModal .pager .pg-info{font-family:var(--mono);font-size:12px;color:var(--ink2)}

/* ---------- floating windows (session overlay + Cycle rescue) ---------- */
#mtMonitorModal .mon-overlay{background:var(--bg2);border:1px solid var(--line2);border-radius:12px;box-shadow:var(--shadow);
  color:var(--ink);font:400 13px/1.4 var(--display)}
#mtMonitorModal .mon-overlay.dragging{box-shadow:var(--shadow);opacity:.95}
#mtMonitorModal .mon-overlay .mo-head{gap:8px;padding:8px 10px 8px 14px;background:var(--bg3);border-bottom:1px solid var(--line);border-radius:12px 12px 0 0;min-height:42px}
#mtMonitorModal .mon-overlay.collapsed .mo-head{border-bottom:0;border-radius:12px}
/* the titles are literal ALL-CAPS in the markup; show them in sentence case */
#mtMonitorModal .mo-title{font:640 14px/1.2 var(--display);letter-spacing:-.005em;color:var(--ink);display:flex;align-items:baseline;gap:8px;min-width:0;white-space:nowrap}
#mtMonitorModal .mo-title .mo-age{font-size:12px}
#mtMonitorModal .mo-status{display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:10px;border:1px solid var(--line2);
  font:600 11px/1 var(--display);letter-spacing:.02em;background:var(--bg2)}
#mtMonitorModal .mo-status:empty{display:none}
#mtMonitorModal .mo-status.live{color:var(--up);border-color:color-mix(in srgb,var(--up) 45%,transparent);background:var(--up-bg)}
#mtMonitorModal .mo-status.stale{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:var(--warn-bg)}
#mtMonitorModal .mo-status.lost{color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,transparent);background:var(--down-bg)}
#mtMonitorModal .mo-status.off{color:var(--ink3)}
#mtMonitorModal .mo-btn{width:26px;height:26px;flex:0 0 26px;display:inline-grid;place-items:center;border-radius:6px;border:1px solid var(--line2);
  background:var(--bg2);color:var(--ink2);font:500 14px/1 var(--display);cursor:pointer;padding:0}
#mtMonitorModal .mo-btn:hover{background:var(--bg4);color:var(--ink);border-color:var(--line2)}
#mtMonitorModal .mo-btn:focus-visible,#mtMonitorModal .rs-mode:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
#mtMonitorModal .mo-body{padding:12px 14px 14px}
#mtMonitorModal .mo-sym{align-items:baseline;gap:8px;font:640 15px/1.3 var(--display);margin:0 0 8px}
#mtMonitorModal .mo-age{font:400 12px/1.3 var(--display);color:var(--ink3);letter-spacing:0}
#mtMonitorModal .mo-trend:empty{display:none}
#mtMonitorModal .mo-trend{margin:0 0 8px;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2)}
#mtMonitorModal .mo-kv{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--line)}
#mtMonitorModal .mo-kv td{padding:3px 0;color:var(--ink2);font-size:12.5px;border:0}
#mtMonitorModal .mo-kv td.num{font:500 12.5px/1.4 var(--mono);font-variant-numeric:tabular-nums;color:var(--ink)}
#mtMonitorModal .mo-kv td.num.pos{color:var(--up)} #mtMonitorModal .mo-kv td.num.neg{color:var(--down)}
#mtMonitorModal .mo-kv td.side{font:600 12.5px/1.4 var(--display);letter-spacing:0;width:52px}
#mtMonitorModal .mo-kv td.side.buy{color:var(--gold)} #mtMonitorModal .mo-kv td.side.sell{color:var(--steel)}
#mtMonitorModal .mo-cyc-head{font:600 13px/1.3 var(--display);letter-spacing:0;color:var(--ink2);margin:4px 0 6px;align-items:baseline}
#mtMonitorModal .mo-cyc-head .mo-age{font-size:12px}
#mtMonitorModal .mo-cycles{border:1px solid var(--line);border-radius:8px;background:var(--bg2);max-height:220px}
#mtMonitorModal .mo-cycles table{font:400 12px/1.3 var(--mono);font-variant-numeric:tabular-nums}
#mtMonitorModal .mo-cycles th{background:var(--bg3);color:var(--ink2);font:560 12px/1.3 var(--display);letter-spacing:0;padding:6px 8px;border-bottom:1px solid var(--line2)}
#mtMonitorModal .mo-cycles td{padding:5px 8px;border-top:1px solid var(--line);color:var(--ink);font-size:12px}
#mtMonitorModal .mo-cycles tbody tr:first-child td{border-top:0}
#mtMonitorModal .mo-cycles td.pos{color:var(--up)} #mtMonitorModal .mo-cycles td.neg{color:var(--down)}
#mtMonitorModal .mo-row.active td{background:var(--gold-bg)}
#mtMonitorModal .mo-row.active td:first-child{border-left:2px solid var(--gold);padding-left:6px}
#mtMonitorModal .mo-flag{color:var(--gold);font:600 10.5px var(--display);letter-spacing:.02em}
#mtMonitorModal .mo-empty{color:var(--ink3);font-family:var(--display);padding:12px 6px !important}
#mtMonitorModal .mo-final{padding:6px 8px;font:600 12.5px var(--mono);border-top:1px solid var(--line)}
#mtMonitorModal .mo-final:empty{display:none}
#mtMonitorModal .mo-final.pos{color:var(--up)} #mtMonitorModal .mo-final.neg{color:var(--down)}

/* Cycle rescue window */
#mtMonitorModal .mon-rescue-float .mo-head .rs-mode{height:26px;max-width:170px;padding:0 6px;border-radius:6px;border:1px solid var(--line2);
  background:var(--bg2);color:var(--ink);font:500 12px/1 var(--display);margin-left:auto}
#mtMonitorModal .mon-rescue-float .mo-title{flex:1 1 auto;overflow:hidden}
#mtMonitorModal .mon-rescue-float .rs-float-body{padding:10px 14px 14px}
#mtMonitorModal #mon-d-rescue-meta{display:block;font-size:12.5px;margin:0 0 6px}
#mtMonitorModal #mon-d-rescue-meta:empty{display:none}
#mtMonitorModal .rs-state{gap:8px;padding:2px 0 10px;margin-bottom:4px;border-bottom:1px solid var(--line);font-size:12.5px}
#mtMonitorModal .rs-state .hint{display:inline;font-size:12.5px;line-height:1.45}
#mtMonitorModal #mon-d-rescue-body details{margin:0;border-bottom:1px solid var(--line)}
#mtMonitorModal #mon-d-rescue-body details:last-child{border-bottom:0}
#mtMonitorModal #mon-d-rescue-body summary,#mtMonitorModal .mon-rescue-float .rs-float-body details summary{font:600 13px/1.3 var(--display);color:var(--ink);padding:9px 0;cursor:pointer}
#mtMonitorModal #mon-d-rescue-body summary::marker{color:var(--ink3)}
#mtMonitorModal #mon-d-rescue-body summary:hover{color:var(--gold)}
#mtMonitorModal .rs-sec{font-size:12.5px;margin:0 0 10px}
#mtMonitorModal .rs-sec > .hint{display:block}
#mtMonitorModal .rs-sec table{width:100%;border-collapse:collapse}
#mtMonitorModal .rs-sec th{font:560 12px/1.3 var(--display);color:var(--ink2);padding:5px 6px;text-align:left;border-bottom:1px solid var(--line2)}
#mtMonitorModal .rs-sec td{padding:4px 6px;border-top:1px solid var(--line);font:400 12.5px/1.4 var(--mono);color:var(--ink);white-space:normal;overflow-wrap:anywhere}
#mtMonitorModal .rs-sec tr:first-child td{border-top:0}
#mtMonitorModal .rs-sec td.k{font-family:var(--display);color:var(--ink2);white-space:nowrap;overflow-wrap:normal}
#mtMonitorModal .rs-sec td .hint{font-family:var(--display)}
#mtMonitorModal .rs-sec .pos{color:var(--up)} #mtMonitorModal .rs-sec .neg{color:var(--down)}
#mtMonitorModal .rs-badge{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font:600 12px/1 var(--display);
  border:1px solid var(--line2);background:var(--bg3);color:var(--ink2);white-space:nowrap}
#mtMonitorModal .rs-badge.WATCH{background:var(--warn-bg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
#mtMonitorModal .rs-badge.RESCUE,#mtMonitorModal .rs-badge.EXITING{background:var(--down-bg);color:var(--down);border-color:color-mix(in srgb,var(--down) 45%,transparent)}
#mtMonitorModal .rs-badge.RECOVERED{background:var(--up-bg);color:var(--up);border-color:color-mix(in srgb,var(--up) 45%,transparent)}
#mtMonitorModal .rs-hypo{display:inline-flex;align-items:center;height:18px;margin-left:6px;padding:0 6px;border-radius:4px;
  border:1px solid color-mix(in srgb,var(--warn) 60%,transparent);color:var(--warn);background:var(--warn-bg);font:600 10.5px/1 var(--display);letter-spacing:.02em}
#mtMonitorModal .rs-active{display:inline-flex;align-items:center;height:18px;margin-left:6px;padding:0 6px;border-radius:4px;
  background:var(--danger);color:#fff;font:600 10.5px/1 var(--display);letter-spacing:.02em}
#mtMonitorModal .rs-stale{color:var(--down);font:600 12px var(--display)}

/* ---------- phone ---------- */
@media (max-width:640px){
  #mtMonitorModal #mon-cards{grid-template-columns:1fr 1fr}
  #mtMonitorModal .mon-card{border-right:0;border-bottom:1px solid var(--line);padding:10px 8px 10px 2px}
  #mtMonitorModal .mon-card:nth-child(odd){border-right:1px solid var(--line)}
  #mtMonitorModal .mon-card:nth-child(even){padding-left:12px}
  #mtMonitorModal .mon-card:nth-last-child(-n+2):nth-child(odd),#mtMonitorModal .mon-card:last-child{border-bottom:0}
  #mtMonitorModal .mon-card .v{font-size:19px}
  #mtMonitorModal .webpart > h3 select{min-width:0;max-width:100%}
  #mtMonitorModal .mon-master,#mtMonitorModal .mon-detail{min-width:0;flex-basis:100%}
  #mtMonitorModal .mon-sess-tools{margin-left:0}
  #mtMonitorModal .mon-sess-cfg .grp{min-width:0}
  #mtMonitorModal #mon-d-title{font-size:19px}
  #mtMonitorModal .mon-bars{gap:14px}
  #mtMonitorModal .tl-table td:nth-child(5){min-width:220px}
  #mtMonitorModal #mon-d-report-seg{margin-left:0}
  #mtMonitorModal .segctl{flex-wrap:wrap}
  #mtMonitorModal .mt-report .mtr-foot .mtr-foot{grid-template-columns:max-content 1fr}
  #mtMonitorModal .mon-tabs{flex-wrap:nowrap;overflow-x:auto}
  #mtMonitorModal .mon-tab{white-space:nowrap}
  #mtMonitorModal .pager{justify-content:center;flex-wrap:wrap}
  #mtMonitorModal .mon-overlay,#mtMonitorModal .mon-rescue-float{max-width:calc(100vw - 16px)}
  #mtMonitorModal .mon-rescue-float{min-width:0}
}
@media (prefers-reduced-motion:reduce){
  #mtMonitorModal .mon-sess-card{transition:none}
  #mtMonitorModal .tg-badge.scanning,#mtMonitorModal .rs-badge.WATCH{animation:none}
}

/* the hidden drag handle is a zero-width flex item: cancel the heading gap it adds */
#mtMonitorModal .webpart > h3 > .drag-handle,#mtMonitorModal .webpart > h4 > .drag-handle,#mtMonitorModal #mon-master > h3 > .drag-handle{margin-right:-8px !important}
#mtMonitorModal .webpart:hover > h3 > .drag-handle,#mtMonitorModal .webpart:hover > h4 > .drag-handle,#mtMonitorModal .webpart:hover #mon-master > h3 > .drag-handle{margin-right:0 !important}

/* .cyc also names the backtest cycle-strip tiles in ladder.css: undo that inside the chips */
#mtMonitorModal .mon-cycle-dd .cyc{position:static;flex:0 0 auto;min-width:0;flex-direction:row;overflow:visible;cursor:default;box-shadow:none;
  text-align:left;color:var(--ink2);font-family:var(--mono);padding:0 8px}
#mtMonitorModal .mon-cycle-dd .cyc::before{content:none;display:none}
#mtMonitorModal .mon-cycle-dd .cyc b{font:600 11.5px/1 var(--mono);color:var(--ink)}
#mtMonitorModal .mon-cycle-dd .cyc span{font:500 11.5px/1 var(--mono);overflow:visible;color:var(--ink2)}
#mtMonitorModal .mon-cycle-dd .cyc span.dd{color:var(--down)}
/* trend-gate calc: let the label column wrap so the explanation column keeps its width */
#mtMonitorModal .tg-calc td.k{white-space:normal;width:30%;min-width:110px}
#mtMonitorModal .tg-calc td.v:not(.d){min-width:160px}
/* In a narrow box (a third of the page on desktop, a phone) the three columns need
   ~570px: each row becomes label | value, with the note under the value. */
#mtMonitorModal #mon-part-trend{container-type:inline-size}
@container (max-width:600px){
  #mtMonitorModal .tg-calc table,#mtMonitorModal .tg-calc tbody{display:block}
  #mtMonitorModal .tg-calc tr{display:grid;grid-template-columns:minmax(0,36%) minmax(0,1fr);border-top:1px solid var(--line)}
  #mtMonitorModal .tg-calc td{border-top:0;overflow-wrap:anywhere}
  #mtMonitorModal .tg-calc td.k,#mtMonitorModal .tg-calc td.v:not(.d){width:auto;min-width:0}
  #mtMonitorModal .tg-calc td.d{grid-column:2;text-align:left;white-space:normal;padding-top:0}
  #mtMonitorModal .tg-calc td.d:empty{display:none}
}
/* margin table: cycle label left, every figure right (headers follow their column) */
#mtMonitorModal .mon-margin .mtx-tbl th,#mtMonitorModal .mon-margin .mtx-tbl td{text-align:right}
#mtMonitorModal .mon-margin .mtx-tbl th:first-child,#mtMonitorModal .mon-margin .mtx-tbl td:first-child{text-align:left;font-family:var(--display);font-size:13px}

/* Session overlay: same window chrome as the Rescue window — collapse, close and a corner resize grip */
#mon-overlay{display:flex;flex-direction:column;resize:both;overflow:hidden;min-width:320px;min-height:90px;
  max-width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
#mon-overlay .mo-head{flex:0 0 auto}
#mon-overlay .mo-body{flex:1 1 auto;min-height:0;overflow:auto}
#mon-overlay.collapsed{height:auto !important;min-height:0;resize:none}
#mon-overlay[hidden]{display:none}

/* =====================================================================
   Monitor laid out like prototype 03 (2026-10-28). Grid areas place every
   block by id, so saved web-part orders don't matter; the nested chart grid
   is flattened (display:contents) so its cells take their own areas.
   ===================================================================== */
#mtMonitorModal .drag-handle,#mtMonitorModal #monResetLayoutBtn{display:none !important}
/* top: figure strip, then P/L over time | Live orders at broker, then sessions */
/* (Live orders at the broker was removed 2026-10-28: P/L over time takes the full row) */
#mtMonitorModal #mon-parts{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cards" "chart" "sess";align-items:start}
#mtMonitorModal #mon-part-chart{grid-area:chart}
#mtMonitorModal #mon-part-cards{grid-area:cards}
#mtMonitorModal #mon-part-sessions{grid-area:sess}
#mtMonitorModal #mon-part-cards > h3{display:none}
#mtMonitorModal #mon-part-cards{padding:0;overflow:hidden}
#mtMonitorModal #mon-part-cards .mon-cards{border:0;margin:0}
#mtMonitorModal #mon-part-cards .mon-card{padding:12px 16px}
#mtMonitorModal #mon-part-orders{max-height:none}
/* sessions: a row of tiles; the selected session's detail below, full width */
#mtMonitorModal #mon-part-sessions{background:none;border:0;padding:0}
#mtMonitorModal .mon-split{display:flex;flex-direction:column;gap:22px}
#mtMonitorModal .mon-master,#mtMonitorModal .mon-detail{flex:none;width:100%;min-width:0;border:0;padding:0}
#mtMonitorModal #mon-master > h3{display:flex;justify-content:space-between;align-items:center;font-size:18px;margin:0 0 10px}
#mtMonitorModal .mon-allusers{font-size:12.5px;font-weight:400;margin-left:6px}
#mtMonitorModal #mon-sessions{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}
#mtMonitorModal #mon-sessions > em{grid-column:1 / -1}
#mtMonitorModal .mon-sess-card{margin:0;align-content:flex-start;background:var(--bg2)}
#mtMonitorModal .mon-sess-card .mon-sess-cfg{display:none !important}   /* shown as chips in the detail header */
#mtMonitorModal .mon-sess-card .who{flex-basis:100%;order:2;white-space:nowrap}
#mtMonitorModal .mon-detail{border-top:1px solid var(--line);padding-top:20px}
/* session detail */
#mtMonitorModal #mon-d-body{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 18px;align-items:start;
  grid-template-areas:
    "title  title  title"
    "cfg    cfg    cfg"
    "heart  heart  heart"
    "bars   bars   bars"
    "price  price  pnl"
    "sides  sides  trend"
    "tl     tl     trend"
    "report report report"
    "margin margin margin"}
#mtMonitorModal #mon-part-grid,#mtMonitorModal #mon-d-grid{display:contents}
#mtMonitorModal #mon-part-grid > h4{display:none}
#mtMonitorModal #mon-d-title{grid-area:title;font:680 26px/1.2 var(--display);letter-spacing:-.012em;margin:0}
#mtMonitorModal #mon-d-cfg{grid-area:cfg;display:flex;flex-wrap:wrap;gap:6px;margin-top:-6px}
#mtMonitorModal #mon-d-cfg:empty{display:none}
#mtMonitorModal .mchip{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;font-size:12px;color:var(--ink2);
  border:1px solid var(--line2);background:var(--bg2);white-space:nowrap}
#mtMonitorModal .mchip b{font-weight:600;color:var(--ink)}
#mtMonitorModal .mchip.real{background:var(--down-bg);border-color:color-mix(in srgb,var(--down) 50%,transparent)}
#mtMonitorModal .mchip.real b{color:var(--down)}
#mtMonitorModal .mon-heart{grid-area:heart;display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0}
#mtMonitorModal .mon-d-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
#mtMonitorModal .mon-d-actions .btn{height:30px;font-size:13px}
#mtMonitorModal #mon-part-bars{grid-area:bars}
#mtMonitorModal #mon-part-pnl{grid-area:pnl}
#mtMonitorModal #mon-part-sides{grid-area:sides}
#mtMonitorModal #mon-part-price{grid-area:price}
#mtMonitorModal #mon-part-trend{grid-area:trend}
#mtMonitorModal #mon-part-timeline{grid-area:tl}
#mtMonitorModal #mon-part-report{grid-area:report}
#mtMonitorModal #mon-part-margin{grid-area:margin}
#mtMonitorModal #mon-d-body > .webpart,#mtMonitorModal #mon-d-grid > .webpart{margin:0;min-width:0;background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
#mtMonitorModal #mon-d-body > .webpart > h4,#mtMonitorModal #mon-d-grid > .webpart > h4{font:640 16px/1.3 var(--display);color:var(--ink);margin:0 0 10px}
/* the "stage": price & orders large, ladder projection beside it */
#mtMonitorModal #mon-part-price{border-radius:14px}
#mtMonitorModal #mon-d-price{height:440px}
@media (max-width:1100px){
  #mtMonitorModal #mon-d-body{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"title" "cfg" "heart" "bars" "price" "pnl" "sides" "trend" "tl" "report" "margin"}
  #mtMonitorModal #mon-d-price{height:340px}
  #mtMonitorModal .mon-d-actions{margin-left:0}
}

/* Buy / Sell as the prototype's compact bars row */
#mtMonitorModal #mon-part-bars{padding:12px 16px}
#mtMonitorModal #mon-d-grid > #mon-part-bars > h4{display:none}
/* stage side: Session P/L sits beside the large price chart, like the prototype's gauge column */
#mtMonitorModal #mon-part-pnl{align-self:stretch}

/* =====================================================================
   Session stage like prototype 03 (2026-10-28): crumb + title + chips with
   heartbeat / actions on the right, Buy/Sell bars + P/L figures, then the
   price chart with the broker's rung ladder beside it and the cycle gauge,
   rung detail and margin summary in the side column. ladder.js fills it.
   ===================================================================== */
#mtMonitorModal #mon-d-body{
  grid-template-areas:
    "crumb  crumb  heart"
    "h1     h1     heart"
    "cfg    cfg    heart"
    "bars   bars   bars"
    "price  price  price"
    "pnl    pnl    trend"
    "sides  sides  trend"
    "tl     tl     tl"
    "report report report"
    "margin margin margin"}
#mtMonitorModal #mon-d-title{display:none}
#mtMonitorModal .mon-d-crumb{grid-area:crumb;margin:0}
#mtMonitorModal .mon-d-h1{grid-area:h1;font:680 26px/1.2 var(--display);letter-spacing:-.012em;margin:-10px 0 0;overflow-wrap:anywhere}
#mtMonitorModal #mon-d-cfg{margin-top:-8px}
#mtMonitorModal .mchip.on{border-color:color-mix(in srgb,var(--up) 50%,transparent);color:var(--up)}
#mtMonitorModal .mchip.steel{background:var(--steel-bg);color:var(--steel)}
#mtMonitorModal .mchip.real{color:var(--down)}
#mtMonitorModal .mon-heart{align-self:start;justify-content:flex-end}
#mtMonitorModal .mon-heart .mon-d-actions{margin-left:0;justify-content:flex-end}
/* Buy / Sell bars + figures: no card, like the prototype */
#mtMonitorModal #mon-d-grid > #mon-part-bars{background:none;border:0;padding:0}
#mtMonitorModal .pbars-row{display:flex;gap:24px;flex-wrap:wrap;align-items:center}
#mtMonitorModal .pbars{display:flex;flex-direction:column;gap:6px;min-width:220px;flex:1;max-width:620px}
#mtMonitorModal .pbar{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:8px;align-items:center;font-size:12.5px}
#mtMonitorModal .pbar .pbar-l{font-weight:600}
#mtMonitorModal .pbar.B .pbar-l{color:var(--gold)} #mtMonitorModal .pbar.S .pbar-l{color:var(--steel)}
#mtMonitorModal .pbar .track{height:10px;border-radius:3px;background:var(--line);display:flex;overflow:hidden}
#mtMonitorModal .pbar .track i{display:block;height:100%;box-sizing:border-box}
#mtMonitorModal .pbar.B .f{background:var(--gold)} #mtMonitorModal .pbar.S .f{background:var(--steel)}
#mtMonitorModal .pbar.B .p{background:var(--gold-bg);border:1px dashed var(--gold)}
#mtMonitorModal .pbar.S .p{background:var(--steel-bg);border:1px dashed var(--steel)}
#mtMonitorModal .pbar .p[style^="width:0%"]{border:0}
#mtMonitorModal .pbar .num{color:var(--ink2);white-space:nowrap}
#mtMonitorModal .pkv{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:0;font-size:13px}
#mtMonitorModal .pkv dt{color:var(--ink3)} #mtMonitorModal .pkv dd{margin:0 8px 0 0;font-weight:600;font-variant-numeric:tabular-nums}
#mtMonitorModal .pkv .pos{color:var(--up)} #mtMonitorModal .pkv .neg{color:var(--down)}
#mtMonitorModal .mon-bars-more{margin-top:10px;font-size:12.5px}
#mtMonitorModal .mon-bars-more > summary{cursor:pointer;color:var(--ink3);width:max-content}
#mtMonitorModal .mon-bars-more[open] > summary{margin-bottom:8px}
/* the stage: chart + rail + side column, no extra card around it */
#mtMonitorModal #mon-d-grid > #mon-part-price{background:none;border:0;padding:0}
#mtMonitorModal #mon-part-price > h4{font-size:14px !important;color:var(--ink2) !important;margin-bottom:8px !important}
#mtMonitorModal .mon-stage .stage-chart #mon-d-price{flex:1;min-width:0;height:560px;position:relative}
#mtMonitorModal .mon-stage .ladder-rail{height:560px}
#mtMonitorModal .mon-stage .rail-empty{padding:16px;font-size:12.5px;color:var(--ink3)}
#mtMonitorModal .mon-margin-sum .m-now{display:flex;justify-content:space-between;gap:8px;font-size:12.5px}
#mtMonitorModal .mon-margin-sum .m-now > span:first-child{color:var(--ink3)}
#mtMonitorModal .mon-margin-sum .kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:12.5px;margin:8px 0 0}
#mtMonitorModal .mon-margin-sum .kv dt{color:var(--ink3)}
#mtMonitorModal .mon-margin-sum .kv dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
#mtMonitorModal .mon-stage.full{position:fixed;inset:10px;z-index:75;box-shadow:var(--shadow)}
#mtMonitorModal .mon-stage.full .stage-chart #mon-d-price,#mtMonitorModal .mon-stage.full .ladder-rail{height:calc(100vh - 22px)}
#mtMonitorModal .mon-stage.full .stage-side{overflow:auto;max-height:calc(100vh - 22px)}
@media (max-width:1100px){
  #mtMonitorModal #mon-d-body{grid-template-areas:"crumb" "h1" "cfg" "heart" "bars" "price" "pnl" "sides" "trend" "tl" "report" "margin"}
  #mtMonitorModal .mon-d-h1{margin-top:-8px}
  #mtMonitorModal .mon-heart,#mtMonitorModal .mon-heart .mon-d-actions{justify-content:flex-start}
  #mtMonitorModal .mon-stage .stage-chart #mon-d-price,#mtMonitorModal .mon-stage .ladder-rail{height:440px}
}
@media (max-width:640px){
  #mtMonitorModal .mon-stage .stage-chart #mon-d-price,#mtMonitorModal .mon-stage .ladder-rail{height:400px}
}
#mtMonitorModal .mon-stage #mon-d-price > .hint{padding:52px 16px 0}   /* clear of Export PNG / Full screen */
/* the page is its own stacking layer under the top bar: lift it while its stage is full screen */
body.stage-full #mtMonitorModal{z-index:76}
/* Cycles strip above the stage (like Backtests) */
#mtMonitorModal #mon-cycle-strip{margin:0 0 10px}
/* Sessions list pager (only drawn above 20 sessions) */
#mtMonitorModal #mon-sessions-pager:empty{display:none}
#mtMonitorModal #mon-sessions-pager{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;padding:12px 0 0}
#mtMonitorModal #mon-sessions-pager .pg-size{display:inline-flex;flex-direction:row;align-items:center;gap:6px;margin:0;font-size:12.5px;color:var(--ink2)}
#mtMonitorModal #mon-sessions-pager .pg-size select{width:auto;height:28px;padding:0 6px;font-size:12.5px}
/* Per-side detail web-part (split out of Session P/L, 2026-11-01): one table,
   Buy / Sell / Total rows; P/L cells carry a thin magnitude bar */
#mtMonitorModal .mon-sides .ps-scroll{overflow-x:auto}
#mtMonitorModal .ps-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;font-variant-numeric:tabular-nums}
#mtMonitorModal .ps-tbl th,#mtMonitorModal .ps-tbl td{padding:7px 9px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line);background:none}
#mtMonitorModal .ps-tbl thead th{font:600 11.5px/1.2 var(--display);color:var(--ink3)}
#mtMonitorModal .ps-tbl thead tr.grp th{padding-bottom:3px;border-bottom:0;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
#mtMonitorModal .ps-tbl thead tr.grp th[colspan]{border-bottom:1px solid var(--line2)}
#mtMonitorModal .ps-tbl .n{text-align:right;font-family:var(--mono)}
#mtMonitorModal .ps-tbl thead .n{font-family:var(--display)}
#mtMonitorModal .ps-tbl td.nil{color:var(--ink3)}
#mtMonitorModal .ps-tbl tbody th,#mtMonitorModal .ps-tbl tfoot th{font-weight:600}
#mtMonitorModal .ps-tbl .ps-side{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
#mtMonitorModal .ps-tbl .ps-side::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--ink3)}
#mtMonitorModal .ps-tbl tr.B .ps-side{color:var(--gold)}
#mtMonitorModal .ps-tbl tr.B .ps-side::before{background:var(--gold)}
#mtMonitorModal .ps-tbl tr.S .ps-side{color:var(--steel)}
#mtMonitorModal .ps-tbl tr.S .ps-side::before{background:var(--steel)}
#mtMonitorModal .ps-tbl tfoot th,#mtMonitorModal .ps-tbl tfoot td{border-bottom:0;font-weight:600;background:var(--bg3)}
#mtMonitorModal .ps-tbl tfoot th:first-child{border-radius:6px 0 0 6px}
#mtMonitorModal .ps-tbl tfoot td:last-child{border-radius:0 6px 6px 0}
#mtMonitorModal .ps-tbl .ps-mixcell{width:22%;min-width:120px}
#mtMonitorModal .ps-mix{display:flex;height:9px;border-radius:5px;overflow:hidden;background:var(--bg4)}
#mtMonitorModal .ps-mix.empty{width:100%;opacity:.5}
#mtMonitorModal .ps-mix i{display:block;height:100%}
#mtMonitorModal .ps-key{display:inline-flex;align-items:center;gap:4px;font-weight:500;color:var(--ink3)}
#mtMonitorModal .ps-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-left:6px}
#mtMonitorModal .ps-key i:first-child{margin-left:0}
#mtMonitorModal .m-open{background:var(--ink2)}
#mtMonitorModal tr.B .m-open{background:var(--gold)}
#mtMonitorModal tr.S .m-open{background:var(--steel)}
#mtMonitorModal .m-pending{background:var(--warn);opacity:.75}
#mtMonitorModal .m-closed{background:var(--line2)}
#mtMonitorModal .ps-money{min-width:96px}
#mtMonitorModal .ps-money .pos{color:var(--up)}
#mtMonitorModal .ps-money .neg{color:var(--down)}
#mtMonitorModal .ps-money .zero{color:var(--ink3)}
#mtMonitorModal .ps-dbar{display:block;height:3px;border-radius:2px;margin:4px 0 0 auto;max-width:100%}
#mtMonitorModal .ps-dbar.pos{background:var(--up)}
#mtMonitorModal .ps-dbar.neg{background:var(--down)}
#mtMonitorModal .ps-dbar.zero{background:none}
#mtMonitorModal .ps-final{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
#mtMonitorModal .ps-fig{display:flex;align-items:baseline;gap:10px;flex:1 1 240px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg)}
#mtMonitorModal .ps-fig .k{font-size:12px;color:var(--ink2)}
#mtMonitorModal .ps-fig .v{margin-left:auto;font:600 15px/1.2 var(--mono);font-variant-numeric:tabular-nums}
#mtMonitorModal .ps-fig .v.pos{color:var(--up)}
#mtMonitorModal .ps-fig .v.neg{color:var(--down)}
#mtMonitorModal .ps-fig .v.zero{color:var(--ink3)}