/**
 * Dashboard cockpit styles.
 *
 * Extracted from app/static/js/pages/dashboard-page.js _injectStyles()
 * so the rules are cacheable by the browser, visible to dev tools, and
 * stop bloating the JS bundle. Loaded once via <link> in index.html.
 */

.dashboard-cockpit .sys-banner {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px; padding:14px 16px; font-size:11px;
}
.dashboard-cockpit .sys-tag {
  display:flex; align-items:center; gap:6px; padding:5px 10px;
  border-radius:8px; background:var(--surface2); border:1px solid var(--border);
}
.dashboard-cockpit .sys-tag .sys-label { color:var(--muted); font-weight:500; }
.dashboard-cockpit .sys-tag .sys-val { font-weight:700; font-family:var(--font-mono); }

.dashboard-cockpit .onboard {
  padding:14px 18px;
  background:linear-gradient(135deg, rgba(99,102,241,.06), rgba(139,92,246,.06));
  border:1px solid var(--border); border-radius:14px;
  margin-bottom:16px; display:flex; gap:14px; align-items:flex-start;
}
.dashboard-cockpit .onboard-ico { font-size:28px; flex-shrink:0; }
.dashboard-cockpit .onboard h3 { font-size:14px; font-weight:600; margin-bottom:4px; color:var(--accent); }
.dashboard-cockpit .onboard p { font-size:12px; color:var(--muted); line-height:1.5; margin:0; }
.dashboard-cockpit .close-onboard {
  background:none; border:none; color:var(--muted); cursor:pointer; font-size:16px;
  margin-left:auto; flex-shrink:0;
}

.dashboard-main {
  display:grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap:var(--spacing-md);
  align-items:stretch;   /* both columns grow to the same (tallest) height */
}
@media (max-width: 1100px) {
  .dashboard-main { grid-template-columns: 1fr; }
}
/* Feed column: flex-column so the inner card + feed stretch to match
   the aside's intrinsic height (sum of aside cards). The feed list
   itself scrolls internally when there are too many events. */
.dashboard-feed { min-width: 0; display:flex; flex-direction:column; }
.dashboard-feed > .card { flex:1; display:flex; flex-direction:column; min-height:0; }
.dashboard-aside { display:flex; flex-direction:column; gap:var(--spacing-md); }

/* Scan progress */
.dashboard-cockpit .scan-bar {
  display:none;
  padding:10px 16px;
  background:linear-gradient(90deg, rgba(99,102,241,.05), rgba(139,92,246,.05));
  border-bottom:1px solid var(--border);
}
.dashboard-cockpit .scan-bar.on { display:block; }
.dashboard-cockpit .scan-track {
  height:4px; border-radius:2px; background:rgba(99,102,241,.12);
  overflow:hidden; margin-top:6px;
}
.dashboard-cockpit .scan-fill {
  height:100%; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent2));
  transition:width .5s; width:0%;
}

/* Filter bar */
.dashboard-cockpit .fbar {
  display:flex; gap:5px; flex-wrap:wrap;
  padding:8px 16px; border-bottom:1px solid var(--border);
}
.dashboard-cockpit .fbtn {
  padding:3px 11px; border-radius:99px; font-size:11px; font-weight:500;
  border:1px solid var(--border); background:transparent; color:var(--muted);
  cursor:pointer; transition:all var(--transition-fast);
}
.dashboard-cockpit .fbtn.on, .dashboard-cockpit .fbtn:hover {
  background:rgba(99,102,241,.12); color:var(--accent); border-color:rgba(99,102,241,.3);
}

/* Event cards — grow to fill the remaining card height (which itself
   stretches to match the aside column height), and scroll internally
   when the list overflows. A safety min-height keeps the panel usable
   even on tiny screens. */
.dashboard-cockpit .feed {
  padding:var(--spacing-sm);
  flex:1; min-height:300px; max-height:460px;
  overflow-y:auto;
}
.dashboard-cockpit .ec {
  border:1px solid var(--border); border-radius:10px;
  margin-bottom:8px; overflow:hidden;
}
.dashboard-cockpit .ec-hdr {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px; background:rgba(0,0,0,.1);
}
body.light-mode .dashboard-cockpit .ec-hdr { background:rgba(0,0,0,.03); }
.dashboard-cockpit .ec-ico {
  width:28px; height:28px; border-radius:6px;
  display:flex; align-items:center; justify-content:center; font-size:14px;
}
.dashboard-cockpit .ec-title { font-size:13px; font-weight:600; }
.dashboard-cockpit .ec-ts { font-size:10px; color:var(--muted); font-family:var(--font-mono); }
.dashboard-cockpit .ec-body { padding:10px 12px; font-size:12px; }
.dashboard-cockpit .ec-grid {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px;
}
.dashboard-cockpit .ec-k { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.dashboard-cockpit .ec-v { font-weight:600; font-size:12px; font-family:var(--font-mono); }
.dashboard-cockpit .ec-thesis {
  margin-top:8px; padding:8px 10px;
  background:rgba(99,102,241,.05); border-left:2px solid var(--accent);
  font-size:11px; line-height:1.5; color:var(--muted); border-radius:4px;
}
.dashboard-cockpit .ec-badge {
  display:inline-block; background:rgba(139,92,246,.12); color:var(--accent2);
  padding:1px 8px; border-radius:10px; font-size:10px; font-weight:700;
}
.dashboard-cockpit .sym-tag {
  display:inline-block; background:rgba(99,102,241,.1); color:var(--accent);
  padding:1px 7px; border-radius:4px; margin:2px 3px 2px 0;
  font-weight:600; font-size:10px;
}

/* Side badges */
.dashboard-cockpit .side-buy { color:var(--green); }
.dashboard-cockpit .side-sell { color:var(--red); }
.dashboard-cockpit .side-hold { color:var(--muted); }

/* Event type tints */
.dashboard-cockpit .ec.scan_started, .dashboard-cockpit .ec.scan_completed { background:rgba(99,102,241,.04); }
.dashboard-cockpit .ec.scan_failed { background:rgba(239,68,68,.04); }
.dashboard-cockpit .ec.deliberation_started { background:rgba(6,182,212,.04); }
.dashboard-cockpit .ec.proposal_generated { background:rgba(99,102,241,.05); }
.dashboard-cockpit .ec.proposal_submitted { background:rgba(139,92,246,.04); }
.dashboard-cockpit .ec.symbol_skipped { background:rgba(100,116,139,.04); }
.dashboard-cockpit .ec.trade_executed { background:rgba(16,185,129,.05); }
.dashboard-cockpit .ec.approval_requested { background:rgba(245,158,11,.05); }
.dashboard-cockpit .ec.approval_decided { background:rgba(59,130,246,.04); }
.dashboard-cockpit .ec.kill_switch { background:rgba(239,68,68,.06); }
.dashboard-cockpit .ec.portfolio_updated { background:rgba(59,130,246,.03); }
.dashboard-cockpit .ec.risk_blocked { background:rgba(245,158,11,.04); }

/* Risk help */
.dashboard-cockpit .risk-help {
  margin-top:4px; padding:6px 10px;
  background:rgba(245,158,11,.06); border-radius:6px;
  font-size:11px; color:var(--yellow); line-height:1.4;
  border-left:2px solid var(--yellow);
}

/* Confidence bar */
.dashboard-cockpit .conf-bar { display:flex; align-items:center; gap:6px; }
.dashboard-cockpit .conf-track {
  flex:1; height:5px; border-radius:3px;
  background:var(--surface2); overflow:hidden;
}
.dashboard-cockpit .conf-fill { height:100%; border-radius:3px; transition:width .3s; }
.dashboard-cockpit .conf-lbl { font-size:10px; font-weight:700; font-family:var(--font-mono); min-width:32px; text-align:right; }

/* Aside: health mini */
.dashboard-cockpit .health-dots { display:flex; flex-direction:column; gap:6px; font-size:12px; }
.dashboard-cockpit .hd-row { display:flex; align-items:center; gap:8px; }
.dashboard-cockpit .health-dot {
  width:10px; height:10px; border-radius:50%;
  background:var(--muted); flex-shrink:0;
}
.dashboard-cockpit .health-dot.ok { background:var(--green); box-shadow:0 0 6px rgba(16,185,129,.5); }
.dashboard-cockpit .health-dot.ko { background:var(--red); box-shadow:0 0 6px rgba(239,68,68,.5); }

/* Aside: positions / proposals */
.dashboard-cockpit .pos-row {
  display:grid; grid-template-columns:auto 1fr auto auto;
  gap:8px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:12px;
}
.dashboard-cockpit .prop-row {
  display:flex; align-items:center; gap:8px; padding:6px 0;
  border-bottom:1px solid var(--border); font-size:12px; flex-wrap:nowrap;
}
.dashboard-cockpit .pos-row:last-child, .dashboard-cockpit .prop-row:last-child { border-bottom:none; }
.dashboard-cockpit .pos-dir {
  font-size:10px; font-weight:700; padding:2px 6px;
  border-radius:4px;
}
.dashboard-cockpit .pos-dir.long { background:rgba(16,185,129,.15); color:var(--green); }
.dashboard-cockpit .pos-dir.short { background:rgba(239,68,68,.15); color:var(--red); }
.dashboard-cockpit .pos-sym, .dashboard-cockpit .prop-sym { font-weight:600; font-family:var(--font-mono); }
.dashboard-cockpit .pos-qty, .dashboard-cockpit .pos-notional { font-family:var(--font-mono); font-size:11px; }
.dashboard-cockpit .prop-side { font-weight:700; font-size:11px; }
.dashboard-cockpit .prop-status { font-size:10px; text-transform:uppercase; }
.dashboard-cockpit .prop-conf { font-family:var(--font-mono); font-size:11px; color:var(--accent); }

/* Aside: multi-model */
.dashboard-cockpit .mm-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:6px;
}
.dashboard-cockpit .mm-card {
  padding:6px 8px; border-radius:6px;
  background:var(--surface2); border-left:3px solid var(--muted);
  font-size:11px;
}
.dashboard-cockpit .mm-card.ok { border-left-color:var(--green); }
.dashboard-cockpit .mm-card.ko { border-left-color:var(--red); }
.dashboard-cockpit .mm-name { font-weight:600; font-family:var(--font-mono); font-size:11px; }
.dashboard-cockpit .mm-lat { font-size:10px; color:var(--muted); margin-top:2px; }

/* Summary */
.dashboard-cockpit .summary-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:6px; font-size:11px;
}
.dashboard-cockpit .summary-grid .s-k {
  color:var(--muted); font-size:10px; text-transform:uppercase; letter-spacing:.5px;
}
.dashboard-cockpit .summary-grid .s-v { font-weight:700; font-family:var(--font-mono); font-size:16px; }

/* Action buttons busy state */
.dashboard-cockpit .btn.busy { opacity:.7; pointer-events:none; }

/* ── Help affordances (tooltips + info icons) ───────────────────── */
/* Small "ⓘ" icon next to a label, hints that a tooltip is available.
   Hover changes the opacity to pull the user's eye. */
.dashboard-cockpit .help-icon {
  display:inline-block; margin-left:5px; font-size:10px;
  color:var(--muted); opacity:.55; cursor:help; font-weight:400;
  transition:opacity .15s, color .15s;
}
.dashboard-cockpit .help-icon:hover { opacity:1; color:var(--accent); }
/* Any element with a native title attribute should hint at help. */
.dashboard-cockpit [title] { cursor:help; }
/* …but not for interactive elements — their cursor must stay usable. */
.dashboard-cockpit button[title],
.dashboard-cockpit a[title],
.dashboard-cockpit [data-internal-link][title] { cursor:pointer; }

/* ── Historique des Trades & P&L ─────────────────────────────────── */
.dashboard-cockpit .hist-pnl-row {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr));
  gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);
}
.dashboard-cockpit .hist-pnl-box {
  background:var(--surface2); border-radius:8px; padding:10px 14px;
  border:1px solid var(--border);
}
.dashboard-cockpit .hist-pnl-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); margin-bottom:4px;
}
.dashboard-cockpit .hist-pnl-val { font-size:18px; font-family:var(--font-mono); }
.dashboard-cockpit .hist-section-title {
  font-size:11px; font-weight:700; text-transform:uppercase;
  color:var(--muted); letter-spacing:.5px;
  padding:10px 14px 6px; border-top:1px solid var(--border);
  margin-top:4px;
}
.dashboard-cockpit #hist-positions,
.dashboard-cockpit #hist-trades-table { padding:0 4px 8px; overflow-x:auto; overflow-y:auto; max-height:340px; }
.dashboard-cockpit .hist-table {
  width:100%; border-collapse:collapse; font-size:12px;
}
.dashboard-cockpit .hist-table th {
  position:sticky; top:0; z-index:1;
  background:var(--surface2);
  text-align:left; padding:6px 10px;
  font-size:10px; font-weight:700; text-transform:uppercase;
  color:var(--muted); border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.dashboard-cockpit .hist-table td {
  padding:7px 10px; border-bottom:1px solid rgba(255,255,255,.04);
  font-family:var(--font-mono); font-size:12px;
}
.dashboard-cockpit .hist-table tbody tr:hover { background:rgba(255,255,255,.03); }
.dashboard-cockpit .hist-table td.fw { font-weight:700; font-family:var(--font-mono); }
.dashboard-cockpit .hist-table .badge { font-size:10px; padding:2px 8px; border-radius:99px; }
.dashboard-cockpit .hist-table .badge.success { background:rgba(16,185,129,.15); color:var(--green); }
.dashboard-cockpit .hist-table .badge.danger  { background:rgba(239,68,68,.15);  color:var(--red);   }
.dashboard-cockpit .hist-table .badge.warning { background:rgba(234,179,8,.15);  color:var(--yellow);}
.dashboard-cockpit .hist-table .badge.info    { background:rgba(99,102,241,.15); color:var(--accent);}

/* ── PnL "Gain / Perte / Neutre" badge (headline clarity) ───────── */
.dashboard-cockpit .pnl-badge {
  display:inline-block; padding:1px 8px; border-radius:99px;
  font-size:10px; font-weight:700; letter-spacing:.3px;
  margin-left:4px; vertical-align:middle;
}
.dashboard-cockpit .pnl-badge.win {
  background:rgba(16,185,129,.15); color:var(--green);
  border:1px solid rgba(16,185,129,.3);
}
.dashboard-cockpit .pnl-badge.loss {
  background:rgba(239,68,68,.15); color:var(--red);
  border:1px solid rgba(239,68,68,.3);
}
.dashboard-cockpit .pnl-badge.neutral {
  background:rgba(100,116,139,.12); color:var(--muted);
  border:1px solid var(--border);
}

/* ── Auto-Learning panel ────────────────────────────────────────── */
.dashboard-cockpit #auto-learning-card .al-row {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px; padding:12px 14px; border-bottom:1px solid var(--border);
}
.dashboard-cockpit #auto-learning-card .al-box {
  background:var(--surface2); border-radius:8px; padding:8px 12px;
  border:1px solid var(--border);
}
.dashboard-cockpit #auto-learning-card .al-label {
  font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.5px; color:var(--muted); margin-bottom:4px;
}
.dashboard-cockpit #auto-learning-card .al-val {
  font-size:16px; font-family:var(--font-mono); font-weight:700;
}
.dashboard-cockpit #auto-learning-card .al-cycle { padding:0 14px 6px; }
.dashboard-cockpit #auto-learning-card .al-last {
  padding:8px 0 4px; font-size:12px;
}
.dashboard-cockpit #auto-learning-card .al-actions {
  display:flex; gap:8px; padding:10px 14px 14px;
  border-top:1px solid var(--border);
}
.dashboard-cockpit #auto-learning-card .al-actions .btn {
  flex:1; font-size:12px;
}
.dashboard-cockpit .al-badge {
  font-size:11px; font-weight:600; padding:3px 8px; border-radius:10px;
}
.dashboard-cockpit .al-badge.al-on {
  background:rgba(16,185,129,.15); color:var(--green);
  border:1px solid rgba(16,185,129,.3);
}
.dashboard-cockpit .al-badge.al-off {
  background:rgba(100,116,139,.12); color:var(--muted);
  border:1px solid var(--border);
}

/* ── Symbol Ranking card ─────────────────────────────────────────────── */
.dashboard-cockpit #symbol-ranking-card .sym-rank-empty {
  padding: 18px 16px; color: var(--muted); font-size: 13px; text-align: center;
}
.dashboard-cockpit .sym-rank-table {
  width: 100%; border-collapse: collapse; font-size: 12px;
}
.dashboard-cockpit .sym-rank-table th {
  padding: 7px 10px; text-align: right; font-weight: 600; font-size: 11px;
  color: var(--muted); border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.dashboard-cockpit .sym-rank-table th:first-child,
.dashboard-cockpit .sym-rank-table th:nth-child(2) { text-align: left; }
.dashboard-cockpit .sym-rank-table td {
  padding: 6px 10px; text-align: right;
  border-bottom: 1px solid rgba(100,116,139,.1);
}
.dashboard-cockpit .sym-rank-table td:first-child,
.dashboard-cockpit .sym-rank-table td:nth-child(2) { text-align: left; }
.dashboard-cockpit .sym-rank-table tbody tr:hover {
  background: rgba(99,102,241,.06);
}
.dashboard-cockpit .sym-rank-medal { font-size: 14px; }
.dashboard-cockpit .sym-rank-symbol { font-weight: 700; letter-spacing: .5px; }
.dashboard-cockpit .sym-rank-score {
  font-weight: 700; color: var(--accent);
}
.dashboard-cockpit .sym-rank-pos { color: var(--green); }
.dashboard-cockpit .sym-rank-neg { color: var(--red); }
.dashboard-cockpit .sym-rank-footer {
  padding: 8px 12px 10px; font-size: 11px; color: var(--muted); text-align: right;
  border-top: 1px solid var(--border);
}