/**
 * trader.css — The Trader CEO Panel Tab styles (BUILD-6)
 * =======================================================
 * Designed by: Johnny Black | KAAI v1.0
 *
 * Follows the same CSS variable system as main.css
 * Dark theme first, scoped under .trader-panel
 */

/* ── Panel shell ──────────────────────────────────────────────────────────── */

/*
 * #panel-trader override — makes the trader panel fill the full main area
 * without being clipped by .main's padding (var(--spacing-xl) = 2rem = 32px).
 * Negative margin on all 4 sides cancels the parent padding; explicit height
 * fills the remaining viewport (100vh - 60px header).
 * .trader-panel { height:100%; overflow:hidden } then works correctly so that
 * only .trader-content (flex:1; overflow-y:auto) scrolls, not the whole tab.
 */
#panel-trader {
    margin: calc(-1 * var(--spacing-xl, 2rem));
    height: calc(100vh - 60px);   /* 60px = .header height */
    overflow: hidden;
}

.trader-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--bg-primary, #0d0d0d);
    color: var(--text-primary, #e0e0e0);
}

/* ── Top bar ──────────────────────────────────────────────────────────────── */
.trader-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}

.trader-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.trader-status-badge.ok     { background: rgba(74,222,128,.15); color: #4ade80; }
.trader-status-badge.paused { background: rgba(251,191,36,.15);  color: #fbbf24; }
.trader-status-badge.down   { background: rgba(248,113,113,.15); color: #f87171; }

.trader-phase-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .5px;
}
.trader-phase-badge.paper { background: rgba(59,130,246,.2); color: #93c5fd; }
.trader-phase-badge.real  { background: rgba(234,179,8,.2);  color: #fde047; }

.trader-actions-bar {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.trader-tabs {
    display: flex;
    gap: 2px;
    padding: 8px 16px 0;
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    flex-shrink: 0;
}

.trader-tab {
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--text-secondary, #aaa);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
}
.trader-tab:hover   { color: var(--text-primary, #e0e0e0); }
.trader-tab.active  {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
    font-weight: 600;
}

/* ── Tab content ──────────────────────────────────────────────────────────── */
.trader-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* ── Cards ────────────────────────────────────────────────────────────────── */
.trader-card {
    background: var(--bg-secondary, #161616);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.trader-card-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-secondary, #888);
    margin: 0 0 12px;
}

/* ── Wallet card ──────────────────────────────────────────────────────────── */
.wallet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.wallet-metric {
    background: var(--bg-tertiary, #111);
    border-radius: 6px;
    padding: 10px 12px;
}

.wallet-metric-label {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.wallet-metric-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #e0e0e0);
    line-height: 1.2;
}

.wallet-metric-value.positive { color: #4ade80; }
.wallet-metric-value.negative { color: #f87171; }
.wallet-metric-value.neutral  { color: #94a3b8; }

/* ── Proposals queue ──────────────────────────────────────────────────────── */
.proposals-empty {
    color: var(--text-muted, #555);
    font-style: italic;
    text-align: center;
    padding: 20px;
    font-size: 13px;
}

.proposal-row {
    background: var(--bg-tertiary, #111);
    border: 1px solid var(--border-color, #2a2a2a);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.proposal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.proposal-title {
    font-size: 14px;
    font-weight: 700;
}

.proposal-title .buy  { color: #4ade80; }
.proposal-title .sell { color: #f87171; }

.proposal-meta {
    font-size: 12px;
    color: var(--text-secondary, #aaa);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.proposal-pnl-row {
    display: flex;
    gap: 12px;
    font-size: 12px;
    flex-wrap: wrap;
}

.proposal-pnl-item {
    background: rgba(255,255,255,.04);
    border-radius: 4px;
    padding: 3px 8px;
}

.proposal-actions {
    display: flex;
    gap: 8px;
}

.btn-approve { background: rgba(74,222,128,.15); color: #4ade80; border: 1px solid #4ade8044; }
.btn-approve:hover { background: rgba(74,222,128,.25); }
.btn-reject  { background: rgba(248,113,113,.15); color: #f87171; border: 1px solid #f8717144; }
.btn-reject:hover  { background: rgba(248,113,113,.25); }
.btn-hold    { background: rgba(251,191,36,.15);  color: #fbbf24; border: 1px solid #fbbf2444; }
.btn-hold:hover    { background: rgba(251,191,36,.25); }

/* ── Tables ───────────────────────────────────────────────────────────────── */
.trader-table-wrap {
    overflow-x: auto;
}

.trader-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.trader-table th {
    text-align: left;
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-secondary, #888);
    border-bottom: 1px solid var(--border-color, #2a2a2a);
    white-space: nowrap;
}

.trader-table td {
    padding: 9px 10px;
    border-bottom: 1px solid var(--border-color-subtle, #1e1e1e);
    vertical-align: middle;
}

.trader-table tr:last-child td { border-bottom: none; }
.trader-table tr:hover td { background: rgba(255,255,255,.03); }

/* ── Track status badges ──────────────────────────────────────────────────── */
.track-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.track-badge.active    { background: rgba(74,222,128,.15);  color: #4ade80; }
.track-badge.suspended { background: rgba(248,113,113,.15); color: #f87171; }
.track-badge.concluded { background: rgba(148,163,184,.15); color: #94a3b8; }
.track-badge.promoted  { background: rgba(251,191,36,.15);  color: #fbbf24; }
.track-badge.best      { background: rgba(251,191,36,.2);   color: #fbbf24; }
.track-badge.watch     { background: rgba(248,113,113,.15); color: #f87171; }

/* ── Market recommendation badges ────────────────────────────────────────── */
.rec-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
}

.rec-badge.proceed { background: rgba(74,222,128,.15);  color: #4ade80; }
.rec-badge.caution { background: rgba(251,191,36,.15);  color: #fbbf24; }
.rec-badge.avoid   { background: rgba(248,113,113,.15); color: #f87171; }
.rec-badge.pending { background: rgba(148,163,184,.1);  color: #94a3b8; }

/* ── Graduation scorecard ─────────────────────────────────────────────────── */
.grad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.grad-item {
    background: var(--bg-tertiary, #111);
    border-radius: 6px;
    padding: 10px 12px;
    border-left: 3px solid transparent;
}

.grad-item.pass { border-left-color: #4ade80; }
.grad-item.fail { border-left-color: #f87171; }

.grad-item-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--text-muted, #666);
    margin-bottom: 4px;
}

.grad-item-status {
    font-size: 14px;
    font-weight: 700;
}

.grad-item-status.pass { color: #4ade80; }
.grad-item-status.fail { color: #f87171; }

.grad-item-detail {
    font-size: 11px;
    color: var(--text-secondary, #aaa);
    margin-top: 3px;
}

.grad-ready-banner {
    background: rgba(74,222,128,.12);
    border: 1px solid #4ade8033;
    border-radius: 6px;
    padding: 12px 16px;
    text-align: center;
    margin-bottom: 16px;
    font-size: 15px;
    font-weight: 700;
    color: #4ade80;
}

.grad-failing-list {
    background: rgba(248,113,113,.06);
    border: 1px solid #f8717122;
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
}

.grad-failing-list h4 {
    margin: 0 0 8px;
    font-size: 12px;
    color: #f87171;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.grad-failing-list ul {
    margin: 0;
    padding: 0 0 0 16px;
    font-size: 12px;
    color: var(--text-secondary, #aaa);
}

.grad-failing-list li { margin-bottom: 3px; }

/* ── P&L Sparkline ────────────────────────────────────────────────────────── */
.sparkline-wrap {
    background: var(--bg-tertiary, #111);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 16px;
}

.sparkline-wrap svg {
    display: block;
    width: 100%;
    height: 80px;
}

.sparkline-label {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-bottom: 6px;
    display: flex;
    justify-content: space-between;
}

/* ── Fee & Tax widget ─────────────────────────────────────────────────────── */
.fee-tax-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}

.fee-tax-item {
    background: var(--bg-tertiary, #111);
    border-radius: 6px;
    padding: 10px 12px;
}

.fee-tax-item-label {
    font-size: 11px;
    color: var(--text-muted, #666);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.fee-tax-item-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #e0e0e0);
}

/* ── Gas monitor widget ───────────────────────────────────────────────────── */
.gas-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.gas-item {
    background: var(--bg-tertiary, #111);
    border-radius: 6px;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 130px;
}

.gas-asset { font-size: 12px; font-weight: 700; color: var(--text-secondary, #aaa); }
.gas-value { font-size: 18px; font-weight: 700; }
.gas-usd   { font-size: 11px; color: var(--text-muted, #666); }

.gas-level-low     { color: #4ade80; }
.gas-level-medium  { color: #94a3b8; }
.gas-level-high    { color: #fbbf24; }
.gas-level-extreme { color: #f87171; }

.gas-hold-banner {
    background: rgba(248,113,113,.1);
    border: 1px solid #f8717133;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #f87171;
    margin-bottom: 12px;
}

/* ── Analyst accuracy table ───────────────────────────────────────────────── */
.acc-table th { color: var(--text-secondary, #888); }
.acc-grade {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 4px;
    font-weight: 700;
    font-size: 12px;
}
.acc-grade.A { background: rgba(74,222,128,.2);  color: #4ade80; }
.acc-grade.B { background: rgba(59,130,246,.2);  color: #93c5fd; }
.acc-grade.C { background: rgba(251,191,36,.2);  color: #fbbf24; }
.acc-grade.D { background: rgba(251,146,60,.2);  color: #fb923c; }
.acc-grade.F { background: rgba(248,113,113,.2); color: #f87171; }

/* ── Section dividers ─────────────────────────────────────────────────────── */
.trader-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--text-secondary, #888);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Loading / empty states ───────────────────────────────────────────────── */
.trader-loading {
    color: var(--text-muted, #555);
    font-style: italic;
    padding: 20px;
    text-align: center;
    font-size: 13px;
}

.trader-empty {
    color: var(--text-muted, #555);
    font-style: italic;
    font-size: 13px;
}

/* ── Positions ────────────────────────────────────────────────────────────── */
.pos-pnl.positive { color: #4ade80; font-weight: 600; }
.pos-pnl.negative { color: #f87171; font-weight: 600; }

/* ── Promote button ───────────────────────────────────────────────────────── */
.btn-promote {
    background: rgba(251,191,36,.15);
    color: #fbbf24;
    border: 1px solid #fbbf2444;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}
.btn-promote:hover { background: rgba(251,191,36,.3); }

/* ── Small utility buttons ────────────────────────────────────────────────── */
.btn-xs {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
    border: 1px solid var(--border-color, #2a2a2a);
    background: var(--bg-tertiary, #111);
    color: var(--text-secondary, #aaa);
}
.btn-xs:hover { background: var(--bg-secondary, #161616); color: var(--text-primary, #e0e0e0); }

/* ── Overview two-column layout (desktop) ────────────────────────────────── */
@media (min-width: 900px) {
    .trader-overview-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        align-items: start;
    }
    .trader-overview-full { grid-column: 1 / -1; }
}

/* ── Auto / Manual mode toggle button ────────────────────────────────────── */
.trader-mode-btn {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     4px 10px;
    border-radius: 5px;
    font-size:   12px;
    font-weight: 700;
    cursor:      pointer;
    letter-spacing: .3px;
    transition:  background 0.18s, color 0.18s, border-color 0.18s;
    white-space: nowrap;
}
/* MANUAL state — subtle grey */
.trader-mode-manual {
    background:  rgba(120,120,120,.12);
    color:       var(--text-secondary, #aaa);
    border:      1px solid rgba(255,255,255,.08);
}
.trader-mode-manual:hover {
    background:  rgba(74,222,128,.1);
    color:       #4ade80;
    border-color:#4ade8033;
}
/* AUTO state — vivid green */
.trader-mode-auto {
    background:  rgba(74,222,128,.14);
    color:       #4ade80;
    border:      1px solid #4ade8044;
    box-shadow:  0 0 8px rgba(74,222,128,.15);
}
.trader-mode-auto:hover {
    background:  rgba(248,113,113,.12);
    color:       #f87171;
    border-color:#f8717133;
    box-shadow:  none;
}
.trader-mode-icon  { font-size: 14px; line-height: 1; }
.trader-mode-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.trader-mode-threshold {
    font-size:   10px;
    font-weight: 600;
    opacity:     0.75;
    background:  rgba(74,222,128,.18);
    padding:     1px 5px;
    border-radius: 9999px;
}
/* Sleep-rule indicator badge on mode toggle button */
.trader-mode-sleep {
    font-size:   10px;
    font-weight: 600;
    opacity:     0.80;
    background:  rgba(147,197,253,.15);
    color:       #93c5fd;
    padding:     1px 5px;
    border-radius: 9999px;
    margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   SLEEP BUTTON (topbar)
   ═══════════════════════════════════════════════════════════════════════ */
.trader-sleep-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       4px 10px;
    border-radius: 5px;
    font-size:     12px;
    font-weight:   700;
    cursor:        pointer;
    letter-spacing:.3px;
    transition:    background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
    white-space:   nowrap;
}
/* AWAKE state — dim/neutral */
.trader-sleep-awake {
    background:  rgba(120,120,120,.10);
    color:       var(--text-muted, #666);
    border:      1px solid rgba(255,255,255,.06);
}
.trader-sleep-awake:hover {
    background:  rgba(147,197,253,.10);
    color:       #93c5fd;
    border-color:#93c5fd33;
}
/* SLEEPING state — pulsing blue glow */
.trader-sleep-on {
    background:  rgba(147,197,253,.15);
    color:       #93c5fd;
    border:      1px solid #93c5fd44;
    box-shadow:  0 0 10px rgba(147,197,253,.2), 0 0 20px rgba(147,197,253,.08);
    animation:   sleepPulse 2.5s ease-in-out infinite;
}
.trader-sleep-on:hover {
    background:  rgba(74,222,128,.10);
    color:       #4ade80;
    border-color:#4ade8033;
    box-shadow:  none;
    animation:   none;
}
@keyframes sleepPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(147,197,253,.20), 0 0 16px rgba(147,197,253,.06); }
    50%       { box-shadow: 0 0 16px rgba(147,197,253,.40), 0 0 28px rgba(147,197,253,.15); }
}
.trader-sleep-icon  { font-size: 14px; line-height: 1; }
.trader-sleep-label { font-size: 11px; font-weight: 800; letter-spacing: .5px; }
.trader-sleep-thr {
    font-size:    10px;
    font-weight:  600;
    opacity:      0.80;
    background:   rgba(147,197,253,.18);
    padding:      1px 5px;
    border-radius:9999px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONFIG TAB
   ═══════════════════════════════════════════════════════════════════════ */
.trader-config-view {
    padding:    4px 0 32px;
    max-width:  760px;
}
/* Sleep status banner */
.config-sleep-banner {
    display:       flex;
    align-items:   center;
    gap:           14px;
    border-radius: 8px;
    padding:       14px 18px;
    margin-bottom: 20px;
    flex-wrap:     wrap;
}
.config-sleep-active {
    background: rgba(147,197,253,.10);
    border:     1px solid #93c5fd44;
    color:      #93c5fd;
    animation:  sleepPulse 3s ease-in-out infinite;
}
.config-sleep-inactive {
    background: rgba(120,120,120,.07);
    border:     1px solid rgba(255,255,255,.06);
    color:      var(--text-secondary, #aaa);
}
.config-sleep-banner > div { flex: 1; min-width: 160px; }
/* Wake Up / Go to Sleep buttons inside banner */
.config-sleep-wake-btn {
    padding:      6px 16px;
    border-radius:5px;
    font-size:    12px;
    font-weight:  700;
    cursor:       pointer;
    white-space:  nowrap;
    background:   rgba(74,222,128,.12);
    color:        #4ade80;
    border:       1px solid #4ade8033;
    transition:   background .15s, color .15s;
}
.config-sleep-wake-btn:hover {
    background: rgba(74,222,128,.22);
    color:      #4ade80;
}
.config-sleep-btn {
    padding:      6px 16px;
    border-radius:5px;
    font-size:    12px;
    font-weight:  700;
    cursor:       pointer;
    white-space:  nowrap;
    background:   rgba(147,197,253,.12);
    color:        #93c5fd;
    border:       1px solid #93c5fd33;
    transition:   background .15s;
}
.config-sleep-btn:hover {
    background: rgba(147,197,253,.22);
}
/* Config sections */
.config-section {
    background:    var(--bg-secondary, #161616);
    border:        1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    padding:       16px 18px;
    margin-bottom: 14px;
}
.config-section-ref {
    background: var(--bg-tertiary, #111);
}
.config-section-title {
    font-size:   14px;
    font-weight: 700;
    margin-bottom:8px;
}
.config-section-desc {
    font-size:    12px;
    color:        var(--text-secondary, #aaa);
    margin-bottom:14px;
    line-height:  1.6;
}
.config-row {
    display:     flex;
    align-items: flex-start;
    gap:         14px;
    padding:     10px 0;
    border-top:  1px solid var(--border-color-subtle, #1e1e1e);
    flex-wrap:   wrap;
}
.config-row-action {
    align-items: center;
}
.config-label {
    flex:        1;
    font-size:   13px;
    font-weight: 600;
    min-width:   180px;
    display:     flex;
    flex-direction: column;
    gap:         3px;
    cursor:      default;
}
.config-hint {
    font-size:  11px;
    font-weight:400;
    color:      var(--text-muted, #555);
    line-height:1.4;
}
.config-input-group {
    display:    flex;
    align-items:center;
    gap:        6px;
}
.config-input {
    width:       72px;
    padding:     6px 10px;
    border-radius:5px;
    border:      1px solid var(--border-color, #2a2a2a);
    background:  var(--bg-tertiary, #111);
    color:       var(--text-primary, #fff);
    font-size:   14px;
    font-weight: 700;
    text-align:  center;
}
.config-input:focus {
    outline:     none;
    border-color:#60a5fa;
    box-shadow:  0 0 0 2px rgba(96,165,250,.15);
}
.config-unit {
    font-size: 12px;
    color:     var(--text-muted, #555);
}
.config-save-btn {
    padding:      6px 14px;
    border-radius:5px;
    font-size:    12px;
    font-weight:  700;
    cursor:       pointer;
    white-space:  nowrap;
    background:   rgba(96,165,250,.12);
    color:        #60a5fa;
    border:       1px solid #60a5fa33;
    transition:   background .15s;
    margin-left:  auto;
}
.config-save-btn:hover { background: rgba(96,165,250,.22); }
/* Effective rules table */
.config-rules-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       12px;
    margin-top:      8px;
}
.config-rules-table th {
    text-align:   left;
    padding:      6px 10px;
    font-size:    11px;
    text-transform:uppercase;
    color:        var(--text-muted, #555);
    border-bottom:1px solid var(--border-color, #2a2a2a);
}
.config-rules-table td {
    padding:      8px 10px;
    border-bottom:1px solid var(--border-color-subtle, #1e1e1e);
    color:        var(--text-secondary, #aaa);
    vertical-align:middle;
}
.rule-fires   { color: #4ade80; font-weight: 700; }
.rule-dormant { color: var(--text-muted, #555); }
.rule-manual  { color: #fbbf24; font-weight: 600; }
/* ═══════════════════════════════════════════════════════════════════════
   ML LEARNING ENGINE TAB (BUILD-8)
   ═══════════════════════════════════════════════════════════════════════ */
/* Status badges */
.ml-status-badge {
    display:       inline-flex;
    align-items:   center;
    padding:       4px 10px;
    border-radius: 9999px;
    font-size:     12px;
    font-weight:   700;
}
.ml-status-badge.collecting { background: rgba(96,165,250,.15);  color: #60a5fa; border: 1px solid #60a5fa44; }
.ml-status-badge.trained    { background: rgba(74,222,128,.15);  color: #4ade80; border: 1px solid #4ade8044; }
.ml-status-badge.idle       { background: rgba(148,163,184,.10); color: #94a3b8; border: 1px solid #94a3b844; }
/* Card layout */
.ml-card {
    background:    var(--bg-secondary, #161616);
    border:        1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    padding:       14px 16px;
    margin-bottom: 12px;
}
.ml-card-title {
    font-size:   13px;
    font-weight: 700;
    color:       var(--text-primary, #f1f5f9);
    margin-bottom: 4px;
}
/* Two-column grid for calibration + per-asset */
.ml-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         12px;
}
@media (max-width: 800px) {
    .ml-grid { grid-template-columns: 1fr; }
}
/* Metrics row */
.ml-metric-row {
    display:   flex;
    gap:       16px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.ml-metric { min-width: 90px; }
.ml-metric-label { font-size: 11px; color: var(--text-muted, #555); text-transform: uppercase; letter-spacing: .4px; }
.ml-metric-value { font-size: 18px; font-weight: 700; margin-top: 2px; }
/* Knowledge bullets */
.ml-knowledge-list {
    list-style:   none;
    margin:       0;
    padding:      0;
}
.ml-knowledge-list li {
    display:       flex;
    align-items:   flex-start;
    gap:           8px;
    padding:       7px 0;
    border-bottom: 1px solid var(--border-color-subtle, #1e1e1e);
    font-size:     13px;
    color:         var(--text-secondary, #aaa);
    line-height:   1.5;
}
.ml-knowledge-list li:last-child { border-bottom: none; }
.ml-knowledge-list li::before {
    content:    "💡";
    flex-shrink: 0;
    margin-top:  1px;
}
.ml-knowledge-tag {
    flex-shrink:   0;
    margin-left:   auto;
    font-size:     10px;
    font-weight:   700;
    padding:       2px 6px;
    border-radius: 4px;
    background:    rgba(96,165,250,.12);
    color:         #60a5fa;
}

/* ═══════════════════════════════════════════════════════════════════════
   JOURNAL TAB  📓
   ═══════════════════════════════════════════════════════════════════════ */
.jnl-panel {
    padding-bottom: 32px;
}

/* Stats bar — horizontal row of KPI tiles */
.jnl-stats-bar {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap:                   8px;
    margin-bottom:         14px;
}

.jnl-stat {
    background:    var(--bg-secondary, #161616);
    border:        1px solid var(--border-color, #2a2a2a);
    border-radius: 8px;
    padding:       10px 12px;
    text-align:    center;
}

.jnl-stat-label {
    font-size:      10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color:          var(--text-muted, #555);
    margin-bottom:  4px;
}

.jnl-stat-value {
    font-size:   16px;
    font-weight: 800;
    font-family: monospace;
    line-height: 1.2;
}

/* Asset breakdown pills */
.jnl-asset-pill {
    display:       inline-flex;
    align-items:   center;
    gap:           5px;
    padding:       3px 10px;
    border-radius: 9999px;
    font-size:     12px;
    font-weight:   600;
    border:        1px solid var(--border-color, #2a2a2a);
    background:    rgba(255,255,255,.03);
    font-family:   monospace;
}

/* Filter bar */
.jnl-filter-bar {
    display:       flex;
    align-items:   center;
    gap:           8px;
    margin-bottom: 14px;
    flex-wrap:     wrap;
}

.jnl-filter-input {
    background:    var(--bg-tertiary, #111);
    border:        1px solid var(--border-color, #2a2a2a);
    border-radius: 4px;
    color:         var(--text-primary, #e0e0e0);
    font-size:     12px;
    padding:       5px 10px;
    outline:       none;
    min-width:     110px;
    transition:    border-color .15s;
}
.jnl-filter-input:focus {
    border-color: #60a5fa;
}

/* Journal table — inherits .trader-table but with compact rows */
.jnl-table td {
    padding: 7px 8px;
}

.jnl-row:hover td {
    background: rgba(255,255,255,.025);
}

/* Note cell */
.jnl-note-cell {
    min-width:  120px;
    max-width:  240px;
}

.jnl-note-text {
    font-size:   11px;
    color:       var(--text-secondary, #aaa);
    line-height: 1.4;
    margin-bottom: 3px;
    max-height:  56px;
    overflow:    hidden;
    text-overflow: ellipsis;
    display:     -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.jnl-note-btn {
    font-size:     11px;
    padding:       2px 8px;
    border-radius: 4px;
    cursor:        pointer;
    border:        1px solid rgba(96,165,250,.25);
    background:    rgba(96,165,250,.07);
    color:         #60a5fa;
    white-space:   nowrap;
    transition:    background .15s;
}
.jnl-note-btn:hover {
    background: rgba(96,165,250,.18);
}

@media (max-width: 800px) {
    .jnl-stats-bar { grid-template-columns: repeat(3, 1fr); }
}

/* ── Portfolio Sleeves Tab ──────────────────────────────────────────────── */
.pf-view {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    padding-bottom: 32px;
    max-width:      960px;
}
.pf-summary-bar {
    display:       flex;
    align-items:   center;
    gap:           20px;
    background:    rgba(255,255,255,.04);
    border:        1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    padding:       14px 18px;
}
.pf-summary-metric { display:flex; flex-direction:column; gap:2px; }
.pf-summary-label  { font-size:10px; color:var(--text-muted,#555); text-transform:uppercase; letter-spacing:.5px; }
.pf-summary-value  { font-size:16px; font-weight:700; color:var(--text-primary,#e8e8e8); }
.pf-routing-diagram {
    background:    rgba(255,255,255,.02);
    border:        1px solid rgba(255,255,255,.06);
    border-radius: 8px;
    padding:       12px 16px;
}
.pf-routing-label  { font-size:10px; color:var(--text-muted,#555); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }
.pf-routing-flow   { display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; }
.pf-routing-source { font-size:12px; font-weight:600; color:var(--text-primary,#e8e8e8); background:rgba(255,255,255,.06); padding:3px 8px; border-radius:4px; }
.pf-routing-arrow  { color:var(--text-muted,#555); font-size:13px; }
.pf-routing-rule   { font-size:11px; }
.pf-routing-plus   { color:var(--text-muted,#555); font-size:14px; font-weight:300; }
.pf-routing-note   { font-size:10px; color:var(--text-muted,#555); margin-top:6px; }
.pf-primary-card {
    background:    rgba(255,255,255,.03);
    border:        1px solid rgba(255,255,255,.09);
    border-radius: 8px;
    padding:       16px;
}
.pf-sleeves-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   14px;
}
.pf-sleeve-card {
    background:     rgba(255,255,255,.03);
    border:         1px solid rgba(255,255,255,.09);
    border-radius:  8px;
    padding:        14px;
    display:        flex;
    flex-direction: column;
    gap:            12px;
    transition:     border-color .2s, opacity .2s;
}
.pf-sleeve-card:hover  { border-color:rgba(255,255,255,.18); }
.pf-sleeve-disabled    { opacity:.5; }
.pf-sleeve-header      { display:flex; align-items:flex-start; gap:10px; }
.pf-sleeve-icon        { font-size:22px; line-height:1; flex-shrink:0; }
.pf-sleeve-title       { flex:1; }
.pf-sleeve-name        { font-size:13px; font-weight:700; color:var(--text-primary,#e8e8e8); }
.pf-sleeve-desc        { font-size:10px; color:var(--text-muted,#555); margin-top:2px; line-height:1.4; }
.pf-sleeve-toggle-wrap { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.pf-sleeve-status-label{ font-size:9px; letter-spacing:.4px; text-transform:uppercase; }
.pf-sleeve-metrics     { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.pf-metric-box         { background:rgba(255,255,255,.04); border-radius:5px; padding:6px 8px; }
.pf-metric-label       { font-size:9px; color:var(--text-muted,#555); text-transform:uppercase; letter-spacing:.4px; }
.pf-metric-value       { font-size:13px; font-weight:600; color:var(--text-primary,#e8e8e8); margin-top:2px; }
.pf-sleeve-footer      { display:flex; flex-direction:column; gap:6px; }
.pf-alloc-bar-wrap     { display:flex; flex-direction:column; gap:4px; }
.pf-alloc-label        { font-size:10px; color:var(--text-muted,#555); }
.pf-alloc-bar-bg       { height:4px; background:rgba(255,255,255,.08); border-radius:2px; overflow:hidden; }
.pf-alloc-bar-fill     { height:100%; border-radius:2px; transition:width .4s; }
.pf-route-rule         { font-size:10px; color:var(--text-muted,#555); }
.pf-toggle             { position:relative; display:inline-block; width:32px; height:18px; }
.pf-toggle input       { opacity:0; width:0; height:0; }
.pf-toggle-slider {
    position:     absolute; inset:0;
    background:   rgba(255,255,255,.12);
    border-radius:18px;
    cursor:       pointer;
    transition:   background .2s;
}
.pf-toggle-slider::before {
    content:''; position:absolute;
    width:12px; height:12px; left:3px; bottom:3px;
    background:#fff; border-radius:50%;
    transition:transform .2s;
}
.pf-toggle input:checked + .pf-toggle-slider            { background:#4ade80; }
.pf-toggle input:checked + .pf-toggle-slider::before    { transform:translateX(14px); }
@media (max-width:800px) {
    .pf-sleeves-grid { grid-template-columns:1fr; }
    .pf-summary-bar  { flex-wrap:wrap; gap:12px; }
}

/* Portfolio sub-tabs */
.pf-subtabs      { display:flex; gap:4px; border-bottom:1px solid rgba(255,255,255,.08); padding-bottom:8px; margin-bottom:4px; }
.pf-subtab       { background:none; border:none; padding:5px 14px; font-size:12px; font-weight:500; color:var(--text-muted,#555); cursor:pointer; border-radius:4px; transition:background .15s,color .15s; }
.pf-subtab:hover { background:rgba(255,255,255,.06); color:var(--text-secondary,#aaa); }
.pf-subtab-active{ color:#60a5fa !important; background:rgba(96,165,250,.10) !important; }

/* Review table */
.rv-table th { font-size:10px; color:var(--text-muted,#555); text-transform:uppercase; letter-spacing:.4px; font-weight:500; padding:8px 10px; }
.rv-table td { padding:8px 10px; font-size:12px; border-top:1px solid rgba(255,255,255,.04); }
.rv-asset    { font-weight:600; color:var(--text-primary,#e8e8e8); }
.rv-row:hover td { background:rgba(255,255,255,.03); }

/* Quality badges */
.rv-badge        { font-size:10px; padding:2px 7px; border-radius:3px; font-weight:600; white-space:nowrap; }
.rv-strong       { background:rgba(74,222,128,.15); color:#4ade80; }
.rv-good         { background:rgba(74,222,128,.10); color:#4ade80; }
.rv-weak         { background:rgba(251,191,36,.12);  color:#fbbf24; }
.rv-broken       { background:rgba(248,113,113,.13); color:#f87171; }
.rv-insuf        { background:rgba(148,163,184,.10); color:#94a3b8; }

/* Indicator index */
.ix-section       { margin-bottom:24px; }
.ix-section-title { font-size:11px; font-weight:600; color:var(--text-muted,#555); text-transform:uppercase; letter-spacing:.6px; padding:0 0 8px; border-bottom:1px solid rgba(255,255,255,.06); margin-bottom:4px; }
.ix-table         { display:flex; flex-direction:column; }
.ix-row           { display:grid; grid-template-columns:36px 160px 1fr; align-items:baseline; padding:7px 4px; border-bottom:1px solid rgba(255,255,255,.03); gap:8px; }
.ix-row:hover     { background:rgba(255,255,255,.025); border-radius:4px; }
.ix-emoji         { font-size:16px; text-align:center; }
.ix-label         { font-size:12px; font-weight:600; color:var(--text-primary,#e8e8e8); white-space:nowrap; }
.ix-desc          { font-size:12px; color:var(--text-secondary,#aaa); line-height:1.5; }


/* Simulation Farm — metadata strip with safe wrap (no orphaned | separators) */
.sim-meta-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, .02);
    border-radius: 6px;
    font-size: 11px;
    color: var(--text-muted, #888);
    row-gap: 6px;
}
.sim-meta-strip .sim-meta-item {
    padding: 0 14px;
    border-left: 1px solid rgba(255, 255, 255, .08);
    min-width: 0;
    word-break: break-word;
    line-height: 1.6;
}
.sim-meta-strip .sim-meta-item:first-child {
    padding-left: 0;
    border-left: none;
}
.sim-meta-strip .sim-meta-item strong {
    color: var(--text-secondary, #ddd);
}
.sim-meta-strip .sim-meta-item code {
    color: #60a5fa;
    font-size: 10px;
    background: rgba(96, 165, 250, .08);
    padding: 1px 4px;
    border-radius: 3px;
}
.sim-meta-strip .sim-meta-muted {
    color: var(--text-muted, #555);
    font-size: 10px;
}