/* Bot page v3 (Alex 10/22, ~/soda-audit/bot-page-v3c): This Week list, Max Profit / Max Loss
   bars, the entry marker, the small outline buttons on a Connected Bots row, the Trigger
   Entry Scan card, the ONE confirm card and the Unmanaged position banner. Tokens only
   (frontend/css/tokens.css), both themes. */

/* ── the ONE confirm card (js/confirm-card.js) ─────────────────────────────── */
.modal.cc-card { max-width: 460px; padding: 24px; text-align: left; }
.cc-card.red { border-top: 4px solid var(--ds-danger); }
.cc-card .modal-title { font-size: 17px; margin-bottom: 10px; }
.cc-body { font-size: 14px; line-height: 1.55; color: var(--ds-text); }
.cc-body p { margin: 0 0 10px; }
.cc-body ul { margin: 4px 0 10px 18px; padding: 0; }
.cc-body li { margin: 2px 0; }
.cc-muted { color: var(--ds-muted); font-size: 13px; }
.cc-note { font-size: 12px; color: var(--ds-muted); margin-top: 6px; }
.cc-pill { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--ds-border-strong); color: var(--ds-muted); margin-bottom: 8px; }
.cc-diff { font-size: 13px; border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 8px 10px; margin: 6px 0 10px; }
.cc-diff div { padding: 1px 0; }
.cc-field { margin: 10px 0; }
.cc-label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cc-radio, .cc-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 4px 0; cursor: pointer; }
.cc-check { margin-top: 10px; }
.cc-type { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 9px 10px; font: inherit; font-size: 14px;
  border-radius: var(--ds-r-md); border: 1px solid var(--ds-border-strong); background: var(--ds-bg); color: var(--ds-text); letter-spacing: 1px; }
.cc-msg { font-size: 13px; color: var(--ds-danger); min-height: 0; margin-top: 6px; }
.cc-msg:empty { display: none; }
.cc-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.cc-btn { min-height: var(--ds-tap, 44px); padding: 8px 18px; font: inherit; font-size: 13px; font-weight: 600; border-radius: var(--ds-r-md);
  border: 1px solid var(--ds-border-strong); background: transparent; color: var(--ds-text); cursor: pointer; }
.cc-btn:hover { background: var(--ds-hover); }
.cc-btn.primary { background: var(--ds-text); color: var(--ds-bg); border-color: var(--ds-text); }
.cc-btn.danger { background: var(--ds-danger); border-color: var(--ds-danger); color: var(--ds-on-primary); }
.cc-btn:disabled { opacity: .45; cursor: not-allowed; }
.cc-btn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.cc-kv { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; font-size: 13px; border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md); padding: 8px 10px; margin: 6px 0 10px; font-variant-numeric: tabular-nums; }
.cc-kv dt { color: var(--ds-label); } .cc-kv dd { margin: 0; font-weight: 600; }
@media (max-width: 600px) { .modal.cc-card { margin: 0 12px; padding: 20px; } .cc-actions .cc-btn { flex: 1 1 auto; } }

/* ── small outline buttons on a Connected Bots row ─────────────────────────── */
.cb-sbtns { display: inline-flex; gap: 6px; margin-left: 10px; flex-wrap: wrap; }
.cb-sbtn { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 0 10px; font: inherit; font-size: 12px;
  font-weight: 500; border-radius: var(--ds-r-sm); border: 1px solid var(--ds-border-strong); background: transparent;
  color: var(--ds-text); cursor: pointer; text-decoration: none; white-space: nowrap; }
.cb-sbtn:hover { background: var(--ds-hover); }
.cb-sbtn:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }
.cb-sbtn[disabled] { opacity: .45; cursor: not-allowed; }
.csev-strip-h .cb-sbtns { margin-left: auto; }

/* ── This Week (js/cs-event-week.js) ───────────────────────────────────────── */
.tw-wk { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.tw-wk th, .tw-wk td { text-align: left; padding: 6px 8px; vertical-align: top; }
.tw-wk th { font-size: 12px; font-weight: 500; color: var(--ds-label); text-transform: uppercase; letter-spacing: .04em;
  vertical-align: bottom; border-bottom: 1px solid var(--ds-border); }
.tw-wk tbody td { padding: 12px 10px; border-bottom: 1px solid var(--ds-border-strong); }
.tw-wk tbody tr:last-child td { border-bottom: 0; }
.tw-wk .r { text-align: right; white-space: nowrap; }
.tw-wk td.d { white-space: nowrap; font-weight: 700; color: var(--ds-text); }
.tw-wk tr.today td { background: var(--ds-hover); }
.tw-wk tr.today td:first-child { box-shadow: inset 3px 0 0 var(--ds-text); }
.tw-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; white-space: normal; font-weight: 400; }
.tw-chips .csev-pill { font-weight: 500; background: transparent; }
.tw-chips .csev-pill.rule { border-style: dashed; color: var(--ds-muted); }
.tw-live { font-size: 12px; color: var(--ds-muted); margin-left: 6px; display: inline-flex; align-items: center; gap: 5px; }
.tw-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-pnl-up); display: inline-block; }
.tw-tagrow { display: none; }
@media (max-width: 640px) {
  .tw-wk th.r { white-space: normal; } .tw-wk td.d { white-space: normal; }
  .tw-wk th, .tw-wk tbody td { padding: 8px 4px; } .tw-wk td { font-size: 12px; }
  .tw-wk td.d .tw-chips { display: none; } .tw-tagrow { display: table-row; } .tw-wk .tw-tagrow td { padding-top: 0; }
  .tw-wk tr.hasrow td { border-bottom: 0; } .tw-live { display: none; }
}

/* ── Max Profit / Max Loss bars (js/cs-open-card.js) ───────────────────────── */
.coc-bar { margin-top: 10px; }
.coc-bar-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--ds-muted); margin-bottom: 4px; }
.coc-bar-row b { color: var(--ds-text); font-weight: 600; }
.coc-bar-track { position: relative; height: 8px; border-radius: 4px; background: var(--ds-hover); box-shadow: inset 0 0 0 1px var(--ds-border); }
.coc-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.coc-bar-fill.up { background: var(--ds-pnl-up); } .coc-bar-fill.down { background: var(--ds-pnl-down); }
.coc-bar-tick { position: absolute; top: -4px; width: 2px; height: 16px; margin-left: -1px; background: var(--ds-text); }
.coc-bar-lbl { position: relative; min-height: 18px; margin-top: 3px; }
.coc-bar-lbl span { position: absolute; top: 0; font-size: 12px; color: var(--ds-muted); white-space: nowrap; }
.coc-bar-lbl span b { color: var(--ds-text); font-weight: 600; }
/* entry marker on the stop bar: a hollow diamond at the entry SPX */
.coc-entry { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; transform: rotate(45deg);
  border-radius: 2px; background: var(--ds-surface); border: 2px solid var(--ds-text); z-index: 1; }
.coc-al.coc-al-trig, .coc-al.coc-al-trig b { color: var(--ds-text); }
.coc-actions { gap: 8px; flex-wrap: wrap; }

/* ── Trigger Entry Scan card (js/cs-entry-scan.js) ─────────────────────────── */
.es-card { border: 1px solid var(--ds-border-strong); border-radius: var(--ds-r-lg); background: var(--ds-surface); padding: 16px;
  display: grid; gap: 12px; color: var(--ds-text); font-size: 13px; line-height: 1.45; font-variant-numeric: tabular-nums; margin: 0 0 16px; }
.es-card h4 { margin: 0; font-size: 15px; font-weight: 600; }
.es-head { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; }
.es-sub { font-size: 12px; color: var(--ds-muted); }
.es-steps { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.es-step { font-size: 12px; color: var(--ds-muted); } .es-step b { color: var(--ds-text); }
.es-res { font-weight: 600; white-space: nowrap; } .es-res.pass { color: var(--ds-text); } .es-res.fail { color: var(--ds-danger); }
.es-res.off, .es-res.not_run { color: var(--ds-muted); font-weight: 500; }
.es-card .tw-wk tbody td { padding: 8px 10px; border-bottom: 1px solid var(--ds-border); }
.es-card tr.es-bad td { background: var(--ds-danger-soft); }
.es-verdict { border-radius: var(--ds-r-md); padding: 10px 12px; font-weight: 600; border: 1px solid var(--ds-border-strong); }
.es-verdict.bad { border-color: var(--ds-danger); color: var(--ds-danger); background: var(--ds-danger-soft); }
.es-verdict.chg { border-color: var(--ds-warn); }
.es-trade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; border: 1px solid var(--ds-border);
  border-radius: var(--ds-r-md); padding: 6px 12px; margin: 0; }
.es-trade div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ds-border); }
.es-trade dt { color: var(--ds-label); } .es-trade dd { margin: 0; font-weight: 600; text-align: right; }
.es-note { font-size: 12px; color: var(--ds-muted); border-left: 2px solid var(--ds-border-strong); padding-left: 10px; }
.es-chg { color: var(--ds-warn); font-weight: 600; }
.es-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.es-confirm { border: 1px solid var(--ds-text); border-radius: var(--ds-r-lg); padding: 16px; display: grid; gap: 12px; }
@media (max-width: 640px) { .es-trade { grid-template-columns: 1fr; } .es-actions .cc-btn { flex: 1; } }

/* ── Unmanaged position banner (js/stop-managing.js) ───────────────────────── */
.sm-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between;
  background: var(--ds-warn-soft); border: 1px solid var(--ds-warn); color: var(--ds-text);
  border-radius: var(--ds-r-lg); padding: 12px 16px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
.sm-banner strong { font-weight: 700; }
.sm-banner .cc-btn { background: var(--ds-surface); }

/* ── Archived trades / orders (Alex 10/22): hidden by default, shown with "Show archived" ── */
.th-arch-pill { display: inline-block; margin-left: 6px; padding: 0 7px; border-radius: var(--ds-r-pill); font-size: 11px;
  font-weight: 600; letter-spacing: .02em; border: 1px dashed var(--ds-border-strong); color: var(--ds-muted); vertical-align: middle; }
.th-tbl tr.th-archived td { color: var(--ds-muted); background: var(--ds-hover); }