/* Backtest chart dialog (BacktestLiveChart): replay, live run and live-rule activity.
   Global rather than scoped because MudBlazor renders the dialog outside the component's
   scope; dialog selectors use the `.mud-dialog.backtest-live-dialog` form (no space). */

/* ------------------------------------------------------------------ dialog shell */

.mud-dialog.backtest-live-dialog {
    background-color: var(--degen-bg-secondary);
    min-width: 960px;
}

.mud-dialog.backtest-live-dialog .mud-dialog-title {
    padding: 10px 18px;
    border-bottom: 1px solid var(--degen-border-default);
}

.mud-dialog.backtest-live-dialog .mud-dialog-content {
    padding: 12px 18px;
    overflow: hidden;
}

/* ------------------------------------------------------------------ shared atoms */

.bt-lbl {
    font-size: 10px;
    color: var(--degen-text-tertiary);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.bt-mono {
    font-family: var(--degen-font-mono);
    color: var(--degen-text-primary);
}

.bt-pos { color: var(--degen-pnl-positive); }
.bt-neg { color: var(--degen-pnl-negative); }

.bt-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bt-link {
    font-size: 11px;
    color: var(--degen-color-primary);
    cursor: pointer;
}

.bt-link:hover { text-decoration: underline; }

.bt-reason {
    font-size: 12px;
    line-height: 1.5;
    color: var(--degen-text-secondary);
    word-break: break-word;
}

.bt-empty {
    padding: 10px;
    font-size: 11px;
    color: var(--degen-text-tertiary);
}

/* ------------------------------------------------------------------ title row */

.bt-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
}

.bt-title-mode {
    font-family: var(--degen-font-sans);
    font-size: 17px;
    font-weight: 500;
    color: var(--degen-text-secondary);
    margin-right: -4px;
}

.bt-title-asset {
    font-family: var(--degen-font-sans);
    font-size: 17px;
    font-weight: 600;
    color: var(--degen-text-primary);
}

.bt-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--degen-border-default);
    border-radius: 4px;
    font-size: 12px;
}

.bt-meta .bt-lbl { font-size: 9px; }

.bt-rule-pill,
.bt-status-chip {
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--degen-color-primary-muted);
    color: var(--degen-color-primary);
    font-family: var(--degen-font-mono);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.bt-rule-pill {
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: help;
}

.bt-status-chip {
    background: var(--degen-bg-surface);
    color: var(--degen-text-secondary);
    font-size: 10px;
}

/* ------------------------------------------------------------------ KPI strip */

.bt-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 1px;
    background: var(--degen-border-default);
    border-bottom: 1px solid var(--degen-border-default);
    /* Full dialog width: cancel the content padding above and at the sides. */
    margin: -12px -18px 12px;
}

.bt-kpi {
    background: var(--degen-bg-secondary);
    padding: 8px 14px;
    min-width: 0;
}

.bt-kpi-v {
    font-family: var(--degen-font-mono);
    font-size: 16px;
    font-weight: 600;
    margin-top: 2px;
    color: var(--degen-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bt-kpi-v.bt-pos { color: var(--degen-pnl-positive); }
.bt-kpi-v.bt-neg { color: var(--degen-pnl-negative); }

.bt-kpi-hero .bt-kpi-v { font-size: 22px; }

.bt-kpi-v-sm { font-size: 12px; }

.bt-kpi-s {
    font-family: var(--degen-font-mono);
    font-size: 10px;
    color: var(--degen-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bt-kpi-live {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bt-kpi-progress { margin-top: 4px; height: 3px; }

.bt-kpi-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.bt-run-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.bt-days-select { width: 110px; font-size: 12px; }

.bt-grade-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-family: var(--degen-font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    vertical-align: middle;
}

.bt-grade-good { background: var(--degen-color-primary-muted); color: var(--degen-color-primary); }
.bt-grade-fair { background: var(--degen-color-warning-muted); color: var(--degen-color-warning); }
.bt-grade-poor { background: var(--degen-color-sell-muted); color: var(--degen-color-error); }
.bt-grade-rejected {
    background: var(--degen-color-sell-muted);
    color: var(--degen-color-error);
    box-shadow: inset 0 0 0 1px var(--degen-color-error);
}
.bt-grade-none { background: var(--degen-bg-surface); color: var(--degen-text-secondary); }

/* ------------------------------------------------------------------ chart + timeline */

.chart-layout {
    display: flex;
    gap: 12px;
    /* Equity-lane toggle adds vertical room. The JS timeline owns the value
       via --bt-equity-lane-extra (set in syncEquityLayoutProperty) so the
       CSS never duplicates the lane height -- single source of truth. */
    height: calc(600px + var(--bt-equity-lane-extra, 0px));
}

.backtest-chart-column {
    /* Label gutter shared by the timeline (read by backtest-timeline.js) and the chart
       inset below, so a candle's x matches its timeline dot's x. */
    --bt-lane-gutter: 84px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 0;
}

.backtest-chart-area {
    flex: 1;
    position: relative;
    min-width: 0;
    min-height: 0;
    margin-left: var(--bt-lane-gutter);
}

.backtest-timeline-host {
    flex: 0 0 auto;
}

.chart-setup-strip {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--degen-color-primary-muted);
    background: var(--degen-bg-surface);
}

.chart-load-notice {
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 6px 4px 10px;
    border-radius: 4px;
    border: 1px solid var(--degen-color-warning);
    background: var(--degen-bg-surface);
}

/* ------------------------------------------------------------------ sidebar */

.chart-sidebar {
    /* Trades and decisions sit LEFT of the chart on desktop. The markup keeps the chart first
       so the phone layout, which resets this order, stacks chart above sidebar. */
    order: -1;
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
}

.sidebar-card {
    background: var(--degen-bg-surface);
    border-radius: 4px;
    padding: 8px 10px;
}

.bt-card-title { margin-bottom: 6px; }

.bt-trades-card { padding: 0; }

.bt-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
}

.bt-seg {
    display: inline-flex;
    border: 1px solid var(--degen-border-default);
    border-radius: 4px;
    overflow: hidden;
}

.bt-seg span {
    padding: 4px 9px;
    font-size: 11px;
    color: var(--degen-text-tertiary);
    font-family: var(--degen-font-mono);
    cursor: pointer;
    user-select: none;
}

.bt-seg span:hover { background: var(--degen-hover-overlay); }

.bt-seg span.on {
    background: var(--degen-color-primary-muted);
    color: var(--degen-color-primary);
}

.bt-trades-scroll {
    max-height: 240px;
    overflow-y: auto;
}

.bt-trades-table {
    border-collapse: collapse;
    width: 100%;
    font-family: var(--degen-font-mono);
    font-size: 11px;
}

.bt-trades-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--degen-bg-surface);
    text-align: left;
    font-weight: 500;
    color: var(--degen-text-tertiary);
    font-size: 10px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--degen-border-default);
    text-transform: uppercase;
}

.bt-trades-table td {
    padding: 6px;
    border-bottom: 1px solid var(--degen-border-subtle);
    color: var(--degen-text-secondary);
    white-space: nowrap;
}

.bt-trades-table tbody tr { cursor: pointer; }

.bt-trades-table tbody tr:hover td { background: var(--degen-hover-overlay); }

.bt-trades-table tr.sel td {
    background: var(--degen-color-primary-faint);
    color: var(--degen-color-primary);
}

.bt-trades-table tr.sel td:first-child { box-shadow: inset 2px 0 0 var(--degen-color-primary); }

.bt-trades-table .bt-num { text-align: right; }

.bt-trades-table td.bt-pos { color: var(--degen-pnl-positive); }
.bt-trades-table td.bt-neg { color: var(--degen-pnl-negative); }

.bt-side-l { color: var(--degen-color-long); font-weight: 600; }
.bt-trades-table td.bt-side-l { color: var(--degen-color-long); }
.bt-side-s { color: var(--degen-color-short); font-weight: 600; }
.bt-trades-table td.bt-side-s { color: var(--degen-color-short); }

.bt-trades-table td.bt-open { color: var(--degen-color-warning); }

.bt-closing-decision {
    padding: 8px 10px;
    border-top: 1px solid var(--degen-border-subtle);
    cursor: pointer;
}

.bt-closing-decision:hover { background: var(--degen-hover-overlay); }

.bt-closing-decision .bt-reason { margin-top: 3px; }

.bt-pnl-row {
    display: grid;
    grid-template-columns: 18px 1fr 64px;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    font-family: var(--degen-font-mono);
    font-size: 11px;
    cursor: pointer;
}

.bt-pnl-row:hover { background: var(--degen-hover-overlay); }

.bt-pnl-row.sel .bt-pnl-n { color: var(--degen-color-primary); }

.bt-pnl-n { color: var(--degen-text-tertiary); }

.bt-pnl-v { text-align: right; color: var(--degen-text-secondary); }

.bt-bar {
    height: 6px;
    border-radius: 4px;
    background: var(--degen-bg-elevated);
    overflow: hidden;
}

.bt-bar i { display: block; height: 100%; }

.bt-bar-pos { background: var(--degen-pnl-positive); }
.bt-bar-neg { background: var(--degen-pnl-negative); }

.bt-rule-text {
    font-size: 12px;
    line-height: 1.5;
    color: var(--degen-text-secondary);
    word-break: break-word;
}

.bt-rule-text p { margin: 0; display: inline; }

.bt-rule-text p + p::before { content: " "; }

.bt-rule-text strong { color: var(--degen-text-primary); font-weight: 600; }

.bt-rule-indicators { margin-top: 6px; }

.bt-ind-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.5;
}

.bt-ind-tf {
    color: var(--degen-color-primary);
    font-size: 10px;
    font-family: var(--degen-font-mono);
    font-weight: 600;
    flex-shrink: 0;
}

.bt-ind-names {
    color: var(--degen-text-primary);
    font-size: 11px;
    font-family: var(--degen-font-mono);
    word-break: break-word;
}

.bt-highlight-toggle {
    padding: 0 4px;
    color: var(--degen-text-secondary);
    font-size: 11px;
}

.pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--degen-color-primary);
    flex-shrink: 0;
    animation: pulse-backtest 1.5s ease-in-out infinite;
}

@keyframes pulse-backtest {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.7); }
}

/* ------------------------------------------------------------------ tablet */

@media (max-width: 960px) {
    .mud-dialog.backtest-live-dialog {
        min-width: unset;
        width: 100%;
    }

    .bt-kpis { grid-template-columns: repeat(4, 1fr); }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 768px) {
    .mud-dialog.backtest-live-dialog {
        max-height: 90vh;
        max-height: 90dvh;
    }

    .mud-dialog.backtest-live-dialog .mud-dialog-title { padding: 8px 12px; }

    .mud-dialog.backtest-live-dialog .mud-dialog-content {
        padding: 12px;
        overflow-y: auto;
    }

    .bt-title { gap: 6px; }
    .bt-title-mode,
    .bt-title-asset { font-size: 15px; }
    .bt-rule-pill { max-width: 100%; }

    .bt-kpis {
        grid-template-columns: repeat(3, 1fr);
        margin: -12px -12px 12px;
    }

    .bt-kpi { padding: 6px 10px; }
    .bt-kpi-v { font-size: 14px; }

    /* Net PnL (or the live eval readout) and the run controls span the full row. */
    .bt-kpi-hero,
    .bt-kpi-controls { grid-column: 1 / -1; }

    .bt-kpi-controls { justify-content: flex-start; }

    .chart-layout {
        flex-direction: column;
        height: auto;
    }

    .backtest-chart-column {
        flex: none;
    }

    .backtest-chart-area {
        height: 350px;
        flex: none;
        touch-action: none;
    }

    .chart-sidebar {
        order: 0;
        width: 100%;
        overflow-y: visible;
    }
}

/* ------------------------------------------------------------------ small phone */

@media (max-width: 480px) {
    .backtest-chart-column { --bt-lane-gutter: 60px; }

    .backtest-chart-area {
        height: 260px;
    }

    .bt-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------- reasoning dialog frame
   MudBlazor renders the dialog and its action buttons outside CandleReasoningDialog's CSS
   scope, so these cannot live in CandleReasoningDialog.razor.css. */

.mud-dialog.candle-reasoning-dialog .jump-btn {
    color: var(--degen-text-secondary);
    border-color: var(--degen-border-default);
    border-radius: 4px;
    font-size: 12px;
}

.mud-dialog.candle-reasoning-dialog .close-btn-primary {
    border-radius: 4px;
    font-size: 12px;
    font-weight: 700;
}

@media (max-width: 600px) {
    .mud-dialog.candle-reasoning-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }

    .mud-dialog.candle-reasoning-dialog .mud-dialog-content {
        max-height: calc(100vh - 128px);
        overflow-y: auto;
    }
}