/* ============================================================
   desk-page.css — "My Desk" personal console (Phase 1: watchlist-driven).
   Dark terminal aesthetic, native to the shell. Panels map the Gaming-Arena
   Console layout onto the user's watchlist: KPI strip, ticker tile grid,
   ticker x timeframe heatmap, Pro setup-triggers, performance chart, day table.
   ============================================================ */

.desk {
  --d-card:#131722; --d-card2:#0f1420; --d-border:#1f2937; --d-border2:#2b3648;
  --d-fg:#e6edf6; --d-fg2:#9CA3AF; --d-fg3:#6b7280;
  --d-blue:#3b82f6; --d-green:#22C55E; --d-red:#EF4444; --d-amber:#f59e0b;
  --d-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;
  width:100%;
}
.desk .up { color:var(--d-green); }
.desk .down { color:var(--d-red); }
.desk .flat { color:var(--d-fg2); }
.desk .mono { font-family:var(--d-mono); font-variant-numeric:tabular-nums; }

/* Header + source toggle */
.desk-head { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:4px 0 18px; }
.desk-head h1 { font-size:22px; font-weight:700; letter-spacing:-0.01em; margin:0; }
.desk-head__sub { font-size:12px; color:var(--d-fg3); margin-top:2px; }
.desk-srcwrap { display:flex; align-items:center; gap:10px; }
.desk-src { background:var(--d-card); border:1px solid var(--d-border2); color:var(--d-fg); border-radius:8px; padding:7px 12px; font-size:13px; font-family:inherit; cursor:pointer; }
.desk-src:disabled { opacity:.6; }
.desk-updated { font-size:11px; color:var(--d-fg3); }

/* KPI strip */
.desk-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:18px; }
.desk-kpi { background:var(--d-card); border:1px solid var(--d-border); border-radius:10px; padding:14px 16px; }
.desk-kpi__label { font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--d-fg3); font-weight:600; }
.desk-kpi__val { font-family:var(--d-mono); font-variant-numeric:tabular-nums; font-size:24px; font-weight:600; letter-spacing:-0.01em; margin-top:6px; color:var(--d-fg); }
.desk-kpi__sub { font-size:11px; color:var(--d-fg2); margin-top:3px; }

/* Mid grid: left (tiles + chart), right (heatmap + triggers) */
.desk-mid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:14px; align-items:start; }
@media (max-width:980px){ .desk-mid { grid-template-columns:1fr; } }

.desk-panel { background:var(--d-card); border:1px solid var(--d-border); border-radius:12px; padding:16px 18px; margin-bottom:14px; }
.desk-panel__hd { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.desk-panel__hd h2 { font-size:11px; text-transform:uppercase; letter-spacing:0.06em; color:var(--d-fg2); font-weight:600; margin:0; }
.desk-panel__hd .tag { font-size:10px; color:var(--d-fg3); font-family:var(--d-mono); }

/* Watchlist tile grid (floor state) */
.desk-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px; }
.desk-tile { position:relative; background:var(--d-card2); border:1px solid var(--d-border2); border-left-width:3px; border-radius:8px; padding:9px 10px; text-decoration:none; color:var(--d-fg); display:block; transition:background .12s, transform .12s; }
.desk-tile:hover { background:#172033; transform:translateY(-1px); }
.desk-tile__sym { font-family:var(--d-mono); font-weight:700; font-size:13px; }
.desk-tile__px { font-family:var(--d-mono); font-size:12px; color:var(--d-fg2); margin-top:3px; }
.desk-tile__pct { font-family:var(--d-mono); font-size:12px; font-weight:600; margin-top:1px; }

/* Heatmap (ticker x timeframe) */
.desk-heatmap { width:100%; border-collapse:collapse; font-size:12px; }
.desk-heatmap th { font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:var(--d-fg3); font-weight:600; text-align:right; padding:5px 8px; }
.desk-heatmap th:first-child { text-align:left; }
.desk-heatmap td { padding:3px 4px; }
.desk-heatmap td.sym { font-family:var(--d-mono); font-weight:600; color:var(--d-fg); padding-left:2px; }
.hm-cell { font-family:var(--d-mono); font-variant-numeric:tabular-nums; font-size:11.5px; text-align:center; border-radius:5px; padding:6px 4px; color:#0b0f19; font-weight:600; }

/* Triggers (Pro) */
.desk-trig { display:flex; flex-direction:column; gap:8px; }
.desk-trig__row { display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--d-card2); border:1px solid var(--d-border2); border-radius:8px; padding:9px 11px; text-decoration:none; color:var(--d-fg); }
.desk-trig__row:hover { background:#172033; }
.desk-trig__l { display:flex; flex-direction:column; }
.desk-trig__sym { font-family:var(--d-mono); font-weight:700; font-size:13px; }
.desk-trig__type { font-size:11px; color:var(--d-fg2); margin-top:1px; }
.desk-trig__score { font-family:var(--d-mono); font-size:13px; font-weight:600; color:var(--d-blue); }
.desk-empty { font-size:12px; color:var(--d-fg3); padding:8px 2px; }

/* Locked / CTA states */
.desk-locked, .desk-cta { background:var(--d-card); border:1px solid var(--d-border); border-radius:12px; padding:26px 22px; text-align:center; }
.desk-locked__t, .desk-cta__t { font-size:15px; font-weight:700; color:var(--d-fg); margin-bottom:6px; }
.desk-locked__m, .desk-cta__m { font-size:13px; color:var(--d-fg2); line-height:1.55; max-width:460px; margin:0 auto 14px; }
.desk-btn { display:inline-block; background:var(--d-blue); color:#fff; border:0; border-radius:8px; padding:10px 16px; font-weight:600; font-size:13px; cursor:pointer; text-decoration:none; }
.desk-btn.ghost { background:transparent; border:1px solid var(--d-border2); color:var(--d-fg); margin-left:8px; }

/* Performance chart */
.desk-chart { width:100%; height:300px; overflow:hidden; }
.desk-legend { display:flex; gap:16px; font-size:11px; color:var(--d-fg2); margin-top:8px; }
.desk-legend i { display:inline-block; width:10px; height:2px; vertical-align:middle; margin-right:5px; }

/* Day table (operating log) */
.desk-tablewrap { overflow-x:auto; }
.desk-tbl { width:100%; border-collapse:collapse; font-size:13px; }
.desk-tbl th { text-align:right; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--d-fg3); font-weight:600; padding:9px 12px; border-bottom:1px solid var(--d-border); cursor:pointer; white-space:nowrap; }
.desk-tbl th:first-child { text-align:left; }
.desk-tbl td { padding:9px 12px; border-bottom:1px solid var(--d-border); text-align:right; font-family:var(--d-mono); font-variant-numeric:tabular-nums; white-space:nowrap; }
.desk-tbl td:first-child { text-align:left; }
.desk-tbl tr:hover td { background:#161c2b; }
.desk-tbl a.sym { color:var(--d-fg); font-weight:700; text-decoration:none; }
.desk-tbl a.sym:hover { color:var(--d-blue); }
.desk-skel { color:var(--d-fg3); font-size:12px; padding:14px 2px; }

/* Holdings editor (portfolio mode) */
.desk-editor { background:var(--d-card); border:1px solid var(--d-border); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.ed-head { display:grid; grid-template-columns:1fr 90px 110px auto auto; gap:8px; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--d-fg3); font-weight:600; padding:0 2px 6px; }
.ed-row { display:grid; grid-template-columns:1fr 90px 110px auto auto; gap:8px; align-items:center; padding:5px 0; }
.ed-row.ed-add { grid-template-columns:1fr 90px 110px auto auto; border-top:1px solid var(--d-border); margin-top:6px; padding-top:11px; }
.ed-sym { font-family:var(--d-mono); font-weight:700; font-size:13px; color:var(--d-fg); }
.ed-sym-in, .ed-sh, .ed-ac { background:var(--d-card2); border:1px solid var(--d-border2); border-radius:7px; padding:7px 9px; color:var(--d-fg); font-family:var(--d-mono); font-size:12.5px; outline:none; width:100%; box-sizing:border-box; }
.ed-sym-in { text-transform:uppercase; }
.ed-sym-in:focus, .ed-sh:focus, .ed-ac:focus { border-color:var(--d-blue); }
.desk-editor .desk-btn { padding:7px 12px; font-size:12px; }
.ed-note { font-size:11px; color:var(--d-fg3); margin-top:10px; }
@media (max-width:620px){ .ed-head { display:none; } .ed-row, .ed-row.ed-add { grid-template-columns:1fr 1fr; } .ed-sym { grid-column:1 / -1; } }