/* ═══════════════════════════════════════════════════════════════
   TRADING COCKPIT — Phase 5 visual pass.
   Extends the platform's existing holographic language (--cyan glass
   panels, Orbitron/Rajdhani/Share Tech Mono type, --border glow) rather
   than introducing a separate look. Trading-specific states (gain/loss/
   caution) are defined as tokens in hud.css so they stay in-family with
   the near-black cyan identity instead of stock app-UI green/red.
   ═══════════════════════════════════════════════════════════════ */

#cockpit-overlay .history-panel { width: min(1100px, 94vw); max-height: 92vh; }

.cockpit-body { overflow-y: auto; max-height: 80vh; padding: 2px 2px 4px; }

/* ── Top bar: account vitals ─────────────────────────────────────── */
.cockpit-topbar {
    display: flex; gap: 0; flex-wrap: wrap;
    padding: 14px 16px; margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
}
.cockpit-stat {
    flex: 1 1 120px; padding: 0 20px 0 0;
    border-right: 1px solid var(--border);
}
.cockpit-stat:last-child { border-right: none; }
.cockpit-stat-label {
    display: block; font-family: var(--font-display); font-size: 0.45rem;
    letter-spacing: 2.5px; color: var(--text-dim); margin-bottom: 6px;
}
.cockpit-stat-value {
    font-family: var(--font-mono); font-size: 1.15rem; color: var(--text);
    letter-spacing: 0.5px;
}
.cockpit-stat-value.gain { color: var(--gain); text-shadow: 0 0 12px var(--gain-glow); }
.cockpit-stat-value.loss { color: var(--loss); text-shadow: 0 0 12px var(--loss-glow); }
.cockpit-unreachable { padding: 16px; color: var(--text-dim); font-family: var(--font-body); font-size: 0.9rem; }

/* ── Controls row + chart ────────────────────────────────────────── */
.cockpit-controls {
    display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
    padding: 12px 16px 10px;
}
.cockpit-select, .cockpit-input {
    background: var(--glass); color: var(--text);
    border: 1px solid var(--border); border-radius: 4px;
    font-family: var(--font-body); font-size: 0.9rem;
    padding: 6px 10px; outline: none; transition: border-color 0.2s;
}
.cockpit-select:focus, .cockpit-input:focus { border-color: var(--cyan-dim); }
.cockpit-quote-line {
    font-family: var(--font-mono); font-size: 0.8rem; color: var(--text-dim);
    letter-spacing: 0.5px;
}
.cockpit-chart {
    height: 280px; margin: 0 16px 18px;
    border: 1px solid var(--border); border-radius: 8px;
    background: var(--bg-panel); overflow: hidden;
}

/* ── Two-column data section ─────────────────────────────────────── */
.cockpit-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
    padding: 0 16px;
}
@media (max-width: 640px) { .cockpit-grid { grid-template-columns: 1fr; } }

.cockpit-section { padding: 18px 16px 4px; }
.cockpit-section-title {
    font-family: var(--font-display); font-size: 0.5rem; letter-spacing: 3px;
    color: var(--cyan-dim); margin-bottom: 10px; text-transform: uppercase;
}
.cockpit-section-hint {
    font-family: var(--font-body); font-size: 0.78rem; color: var(--text-dim);
    margin: -4px 0 10px; line-height: 1.4;
}
.cockpit-list { font-size: 0.85rem; }
.cockpit-empty { color: var(--text-dim); padding: 6px 0; font-family: var(--font-body); }

.cockpit-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 7px 0; border-bottom: 1px solid var(--border);
    font-family: var(--font-body);
}
.cockpit-row:last-child { border-bottom: none; }
.cockpit-row-value { font-family: var(--font-mono); }
.cockpit-row-value.gain { color: var(--gain); }
.cockpit-row-value.loss { color: var(--loss); }
.cockpit-tag { opacity: 0.6; font-size: 0.9em; margin-left: 4px; }

.cockpit-signal { padding: 8px 0; border-bottom: 1px solid var(--border); }
.cockpit-signal:last-child { border-bottom: none; }
.cockpit-signal-head { font-family: var(--font-body); margin-bottom: 3px; }
.cockpit-signal-mark { font-family: var(--font-mono); }
.cockpit-signal-mark.ok { color: var(--gain); }
.cockpit-signal-mark.rejected { color: var(--caution); }
.cockpit-signal-body {
    color: var(--text-dim); font-size: 0.85rem; line-height: 1.4;
    font-family: var(--font-body);
}

.cockpit-news-row { padding: 6px 0; border-bottom: 1px solid var(--border); font-family: var(--font-body); }
.cockpit-news-row:last-child { border-bottom: none; }
.cockpit-news-row a { color: var(--text); text-decoration: none; transition: color 0.15s; }
.cockpit-news-row a:hover { color: var(--accent); }
.cockpit-news-source { color: var(--text-dim); font-size: 0.85em; }

/* ── Action panels: Research Lab + Place Trade ──────────────────── */
.cockpit-panel {
    margin: 18px 16px 0; padding: 16px;
    border-top: 1px solid var(--border);
}
.cockpit-panel-title {
    font-family: var(--font-display); font-size: 0.5rem; letter-spacing: 3px;
    color: var(--cyan-dim); margin-bottom: 4px; text-transform: uppercase;
}
.cockpit-panel-hint {
    font-family: var(--font-body); font-size: 0.78rem; color: var(--text-dim);
    margin-bottom: 12px; line-height: 1.4; max-width: 640px;
}
.cockpit-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.cockpit-btn {
    padding: 7px 16px; font-family: var(--font-display); font-size: 0.45rem;
    letter-spacing: 2px; background: var(--cyan-deep); color: var(--cyan);
    border: 1px solid var(--cyan-dim); border-radius: 4px;
    cursor: pointer; transition: all 0.2s;
}
.cockpit-btn:hover:not(:disabled) { border-color: var(--cyan); box-shadow: 0 0 14px var(--cyan-glow); }
.cockpit-btn:disabled { opacity: 0.5; cursor: default; }
.cockpit-status-line {
    font-family: var(--font-mono); font-size: 0.82rem; margin-top: 10px;
    color: var(--text); white-space: pre-line; line-height: 1.5;
}
.cockpit-status-line.gain { color: var(--gain); }
.cockpit-status-line.caution { color: var(--caution); }
.cockpit-status-line.loss { color: var(--loss); }
.cockpit-history { font-size: 0.8rem; margin-top: 10px; max-height: 150px; overflow-y: auto; }
.cockpit-history-row { padding: 5px 0; border-bottom: 1px solid var(--border); font-family: var(--font-body); }
.cockpit-history-row:last-child { border-bottom: none; }
.cockpit-history-dot { font-family: var(--font-mono); }
.cockpit-history-dot.done { color: var(--gain); }
.cockpit-history-dot.failed { color: var(--loss); }
.cockpit-history-dot.running,
.cockpit-history-dot.queued { color: var(--caution); }
.cockpit-history-detail { color: var(--text-dim); font-size: 0.9em; margin-top: 2px; font-family: var(--font-body); }