/* ── Fleet compute panel (sim view) ─────────────────────────────── */
/* Lives as the first child of .main, which already supplies the sidebar offset and
   its own 20px/24px padding -- so no horizontal margin here, only a bottom gap. */
.compute-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 0;
    font-size: 12px;
    overflow: hidden;
    /* never let the grid's min column widths push the page into horizontal scroll */
    max-width: 100%;
}
.compute-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}
.compute-panel.is-collapsed .compute-head { border-bottom: none; }
.compute-panel.is-collapsed .compute-body { display: none; }
.compute-caret { color: var(--text-muted); transition: transform .15s; font-size: 10px; }
.compute-panel.is-collapsed .compute-caret { transform: rotate(-90deg); }
.compute-title {
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    font-size: 11px;
}
#compute-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    flex-wrap: wrap;
}
.cu-sum-main { color: var(--text-primary); font-weight: 600; }
.cu-sum-sep { color: var(--text-muted); }
.cu-hot { color: var(--profit); font-weight: 600; }
.cu-sum-age { color: var(--text-muted); margin-left: auto; font-size: 11px; }
.compute-refresh {
    margin-left: auto;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    border-radius: 4px;
    cursor: pointer;
    padding: 1px 7px;
    font-size: 13px;
    line-height: 1.4;
}
.compute-refresh:hover:not(:disabled) { background: var(--bg-card-hover); color: var(--text-primary); }
.compute-body { padding: 4px 0; }

.cu-row {
    display: grid;
    grid-template-columns: minmax(160px, 200px) minmax(90px, 1fr) 44px 54px 62px 84px minmax(0, 1.4fr);
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
}
.cu-row + .cu-row { border-top: 1px solid rgba(255, 255, 255, .04); }
.cu-row-down { opacity: .6; }

.cu-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cu-nm { color: var(--text-primary); font-weight: 600; }
.cu-os, .cu-mode {
    font-size: 10px;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0 4px;
}
.cu-mode { color: var(--accent); border-color: var(--accent-dim); }

.cu-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--neutral); }
.cu-dot-ok { background: var(--accent); }
.cu-dot-busy { background: var(--profit); box-shadow: 0 0 0 3px var(--profit-dim); }
.cu-dot-down { background: var(--loss); }

.cu-barwrap {
    position: relative;
    height: 14px;
    background: var(--bg-primary);
    border-radius: 3px;
    overflow: hidden;
}
.cu-bar { height: 100%; border-radius: 3px; transition: width .4s ease; }
.cu-bar-idle { background: var(--neutral); }
.cu-bar-live { background: var(--accent); }
.cu-bar-warm { background: #eab308; }
.cu-bar-hot { background: var(--profit); }
.cu-bar-unknown { background: transparent; }
.cu-barlabel {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--text-primary);
    text-shadow: 0 0 3px var(--bg-primary);
}

.cu-num { text-align: right; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.cu-unit { color: var(--text-muted); font-size: 10px; margin-left: 2px; }
.cu-procs.is-busy { color: var(--profit); font-weight: 600; }
.cu-mem { color: var(--text-muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }

.cu-note { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; }
.cu-err { color: var(--loss); font-size: 11px; white-space: nowrap; }
.cu-cap {
    color: #eab308;
    border: 1px solid rgba(234, 179, 8, .3);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    white-space: nowrap;
}
.cu-age { color: var(--text-muted); font-size: 10px; white-space: nowrap; }
/* Live VMs are up on this host -> a backtest here can starve live trading. */
.cu-vm {
    color: var(--loss);
    border: 1px solid var(--loss-dim);
    background: var(--loss-dim);
    border-radius: 3px;
    padding: 0 4px;
    font-size: 10px;
    white-space: nowrap;
    font-weight: 600;
}
.cu-role {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    .cu-row { grid-template-columns: minmax(140px, 180px) 1fr 40px 48px 56px; }
    .cu-mem, .cu-note { display: none; }
}

/* ── Sidebar live-run indicators ─────────────────────────────────────── */
.sb-live, .sb-done {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
    flex: none;
}
.sb-live { background: var(--profit); box-shadow: 0 0 0 2px var(--profit-dim); animation: sbPulse 1.6s ease-in-out infinite; }
.sb-done { background: var(--text-muted); opacity: .5; }
@keyframes sbPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
.sb-age { color: var(--text-muted); font-size: 10px; margin-right: 5px; font-variant-numeric: tabular-nums; }

/* ── Banner split: progress cards left, compute right ────────────────── */
.live-sim-split { display: none; gap: 10px; align-items: flex-start; margin-top: 6px; }
.live-sim-banner.is-expanded .live-sim-split { display: flex; }
/* the detail grid supplies its own top border/margin when standalone; inside the
   split the wrapper owns the spacing */
.live-sim-split .live-sim-detail {
    flex: 1 1 42%;
    min-width: 0;
    margin-top: 0;
    padding-top: 6px;
}
.live-sim-banner.is-expanded .live-sim-split .live-sim-detail { display: grid; }
/* The runs TABLE must not inherit the card grid: with grid, the filter bar and the
   table wrap get placed as grid items in 168px card columns — bar in column 1, table
   overflowing out of column 2, and a dead gap where the remaining columns sit. Same
   specificity as the grid rule above, so it must carry one extra class to win
   regardless of stylesheet order. */
.live-sim-banner.is-expanded .live-sim-split .live-sim-detail.is-table {
    display: flex; flex-direction: column;
}
.live-sim-split .compute-panel {
    flex: 0 1 clamp(360px, 30%, 560px);
    margin: 0;
    padding-top: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    border-left: none; border-right: none; border-bottom: none;
    background: transparent;
}
.live-sim-split .compute-head { background: transparent; border-bottom: none; padding: 6px 4px 2px; }
.live-sim-split .compute-body { padding: 0; }
.live-sim-split .cu-row { padding: 2px 4px; }
@media (max-width: 1200px) {
    .live-sim-split { flex-direction: column; }
    .live-sim-split .compute-panel { flex: 1 1 auto; width: 100%; }
}

/* Sim mode is single-select, so the All/Clear multi-select buttons are meaningless.
   The "All" ROW remains, so selecting everything is still reachable. */
body.sim-single-select .sidebar-selection-bar .selection-btn { display: none; }
body.sim-single-select .strategy-item .strategy-checkbox { color: var(--accent); }

/* ── Run queue panel ─────────────────────────────────────────────────── */
.queue-panel { flex: 0 1 clamp(320px, 28%, 620px); font-size: 12.5px; border-top: 1px solid var(--border); }
.queue-head { display: flex; align-items: center; gap: 8px; padding: 6px 4px 2px; cursor: pointer; user-select: none; }
.queue-caret { color: var(--text-muted); font-size: 10px; transition: transform .15s; }
.queue-panel.is-collapsed .queue-caret { transform: rotate(-90deg); }
.queue-panel.is-collapsed .queue-body { display: none; }
.queue-title { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); font-size: 11px; }
#queue-summary { color: var(--text-secondary); display: flex; gap: 6px; flex-wrap: wrap; }
.queue-body { max-height: 40vh; overflow-y: auto; }

.queue-body { max-height: 40vh; overflow-y: auto; }
.q-item { padding: 4px 4px 5px; }
.q-item + .q-item { border-top: 1px solid rgba(255,255,255,.05); }
.q-line { display: flex; align-items: center; gap: 7px; }
.q-name { color: var(--text-primary); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.q-age { color: var(--text-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.q-sub { display: flex; gap: 8px; margin: 1px 0 0 2px; font-size: 10px; color: var(--text-muted); flex-wrap: wrap; }
.q-syms { color: var(--accent); }
.q-sims { color: var(--text-secondary); }
.q-q, .q-a { font-size: 10px; line-height: 1.35; margin: 2px 0 0 2px; }
.q-q { color: var(--text-secondary); }
.q-a { color: var(--text-primary); }
.q-q b, .q-a b { display: inline-block; width: 11px; color: var(--text-muted); font-weight: 700; }
.q-a b { color: var(--profit); }

/* live execution line at the top of the queue — from the runs index, not the ledger */
.q-live-now { border-left: 2px solid var(--profit, #22c55e); background: rgba(34,197,94,0.06); }