/* =========================================================
   DNA Capital — Trading Desk styles
   ---------------------------------------------------------
   Scoped under .desk-mode (the bot-grid slot when desk is
   active). Uses the global pure-dark theme tokens from
   shared/style.css; falls back to neutral blacks if loaded
   standalone. Mobile reflows to single column under 800px.
   ========================================================= */

.desk-mode { display: block; padding: 0; margin: 0; gap: 0; }
.desk-mode > .desk-root { display: block; }

/* ---------- Fullbleed: kill the .app-shell side padding for the desk
   so the chart + rail go edge-to-edge. Other tabs keep their padding. */
body[data-mode="desk"] .app-shell {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  gap: 12px;
}
body[data-mode="desk"] .app-header { padding-left: 24px; padding-right: 24px; }
body[data-mode="desk"] .desk-disclaimer { margin-left: 18px; margin-right: 18px; }
body[data-mode="desk"] .desk-controls { padding-left: 18px; padding-right: 18px; }
body[data-mode="desk"] .desk-quickrow { padding-left: 18px; padding-right: 18px; }
body[data-mode="desk"] .desk-hero { padding: 0 12px; gap: 12px; }
body[data-mode="desk"] .desk-drawer { margin-left: 18px; margin-right: 18px; }

/* ---------- Disclaimer ---------- */
.desk-disclaimer {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin: 0 0 14px;
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 12px; color: var(--text-soft); font-size: 12.5px;
}
.desk-disclaimer b { color: var(--hacker-fg); font-family: var(--font-mono, ui-monospace, monospace); letter-spacing: 0.12em; }
.desk-disclaimer-x { margin-left: auto; background: transparent; color: var(--text-dim); border: none; font-size: 18px; cursor: pointer; line-height: 1; padding: 0 4px; }
.desk-disclaimer-x:hover { color: var(--text); }

/* ---------- Controls strip ---------- */
.desk-controls {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; padding: 6px 0 14px;
}
.desk-super {
  justify-self: center; display: inline-flex;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 14px; padding: 4px;
}
.desk-super button {
  padding: 10px 28px; border-radius: 10px; border: none;
  color: var(--text-soft); font-weight: 700; font-size: 13px;
  cursor: pointer; font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.1em; background: transparent;
}
.desk-super button.active {
  background: var(--hacker-fg); color: var(--bg);
}
.desk-sub {
  justify-self: end; display: inline-flex;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 999px; padding: 3px;
}
.desk-sub button {
  padding: 7px 18px; border-radius: 999px; border: none;
  background: transparent; color: var(--text-soft);
  font-weight: 600; font-size: 12.5px; cursor: pointer;
}
.desk-sub button.active {
  background: var(--bg-elev-2); color: var(--text);
}

/* ---------- Quick row ---------- */
.desk-quickrow {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 14px; flex-wrap: wrap;
}
.desk-quickrow .label {
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-dim); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.desk-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.desk-pill {
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--border);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px; cursor: pointer; color: var(--text-soft);
}
.desk-pill.active {
  border-color: var(--hacker-fg);
  background: color-mix(in srgb, var(--hacker-fg) 14%, var(--bg-elev));
  color: var(--hacker-fg);
}
.desk-pill:hover:not(.active) { color: var(--text); }

/* ---------- Symbol search dropdown ---------- */
.desk-search-wrap { margin-left: auto; position: relative; }
.desk-dd { position: relative; }
.desk-dd-input {
  width: 280px; padding: 9px 14px;
  background: var(--bg-elev); border: 1px solid var(--border-strong);
  border-radius: 999px; color: var(--text);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px;
}
.desk-dd-input:focus { outline: none; border-color: var(--accent); }
.desk-dd-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  width: 280px; max-height: 360px; overflow-y: auto;
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  border-radius: 12px; padding: 6px; box-shadow: var(--depth-2);
}
.desk-dd-row {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border-radius: 8px; border: none;
  background: transparent; color: var(--text-soft);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12.5px; cursor: pointer;
}
.desk-dd-row:hover { background: var(--bg-elev); color: var(--text); }
.desk-dd-row.active { background: color-mix(in srgb, var(--hacker-fg) 16%, var(--bg-elev)); color: var(--hacker-fg); }
.desk-dd-empty { padding: 12px; color: var(--text-dim); font-size: 12px; text-align: center; }

/* ---------- Hero: chart left, rail right ----------
   align-items: stretch makes the rail's height match the chart card,
   so the fills river underneath the order entry can never exceed the
   chart's bottom edge. */
.desk-hero {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 18px; align-items: stretch; margin-bottom: 18px;
}
.desk-chart-card {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 16px; padding: 16px; box-shadow: var(--depth-1);
}
.desk-chart-head {
  display: flex; align-items: baseline; gap: 22px; margin-bottom: 12px; flex-wrap: wrap;
}
.desk-chart-symbol {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 18px; font-weight: 700; letter-spacing: 0.04em;
}
.desk-chart-price {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 26px; font-weight: 700; color: var(--hacker-fg);
}
.desk-chart-stats { display: flex; gap: 22px; margin-left: auto; }
.desk-chart-stats .s { display: flex; flex-direction: column; }
.desk-chart-stats .s .l {
  font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.12em;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.desk-chart-stats .s .v {
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px;
}
.desk-chart {
  height: 65vh; min-height: 460px; width: 100%;
  border-radius: 10px; overflow: hidden;
}

/* ---------- Right rail ----------
   Flex column that stretches to the chart-card height (set on .desk-hero
   via align-items: stretch). The entry box takes its intrinsic height;
   the fills river fills the remaining space and never overflows past
   the bottom of the chart. */
.desk-rail {
  display: flex; flex-direction: column; gap: 12px;
  height: 100%; min-height: 0;
}
.desk-entry-wrap, .desk-river {
  background: var(--bg-soft); border: 1px solid var(--border-strong);
  border-radius: 16px; box-shadow: var(--depth-1);
}
.desk-entry-wrap { padding: 18px; flex-shrink: 0; }

/* When the user is on STOCKS, hide the Coinbase fills river entirely
   (it's crypto-only data) and let the entry panel fill the full rail
   vertical. */
.desk-root[data-super="stocks"] .desk-river { display: none; }
.desk-root[data-super="stocks"] .desk-entry-wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.desk-root[data-super="stocks"] .desk-entry-wrap .desk-entry { flex: 1; display: flex; flex-direction: column; }
.desk-root[data-super="stocks"] .desk-entry-wrap .desk-bots-list { flex: 1; overflow-y: auto; }
.desk-entry h4 {
  margin: 0 0 14px; font-size: 11.5px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600;
  font-family: var(--font-mono, ui-monospace, monospace);
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
}
.desk-entry h4 .badge { color: var(--text-medium); font-size: 10.5px; letter-spacing: 0.1em; }
.desk-entry h4 .badge b { color: var(--hacker-fg); }
.desk-entry-types {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-bottom: 14px; background: var(--bg-elev);
  border-radius: 10px; padding: 4px;
}
.desk-entry-types button {
  padding: 8px; border-radius: 7px; border: none;
  background: transparent; color: var(--text-soft);
  font-weight: 600; font-size: 13px; cursor: pointer;
}
.desk-entry-types button.active {
  background: var(--bg-elev-2); color: var(--text); box-shadow: var(--depth-1);
}
.desk-field { margin-bottom: 12px; }
.desk-field label {
  display: block; font-size: 10.5px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 4px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.desk-field input {
  width: 100%; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: 10px; color: var(--text);
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 14px;
}
.desk-field input:focus { outline: none; border-color: var(--accent); }
.desk-lev-row { display: flex; align-items: center; gap: 10px; }
.desk-lev-row input[type=range] { flex: 1; accent-color: var(--accent-2); }
.desk-lev-row .val {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 14px; color: var(--text); width: 40px; text-align: right; font-weight: 700;
}
.desk-lev-cap {
  font-size: 10.5px; color: var(--text-dim);
  font-family: var(--font-mono, ui-monospace, monospace); margin-top: 4px;
}
.desk-lev-cap b { color: var(--hacker-fg); }
.desk-summary {
  padding: 10px 12px; background: var(--bg-elev);
  border-radius: 10px; margin: 10px 0 14px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
}
.desk-summary div {
  display: flex; justify-content: space-between;
  padding: 3px 0; color: var(--text-soft);
}
.desk-summary div b { color: var(--text); }
.desk-buys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.desk-buy-btn, .desk-sell-btn {
  padding: 14px; border: none; border-radius: 12px;
  font-weight: 700; font-size: 14px; cursor: pointer;
  font-family: var(--font-mono, ui-monospace, monospace);
  letter-spacing: 0.1em;
}
.desk-buy-btn { background: #00d96b; color: var(--bg); box-shadow: 0 8px 20px -10px rgba(0, 217, 107, 0.7); }
.desk-sell-btn { background: #ff3355; color: var(--bg); box-shadow: 0 8px 20px -10px rgba(255, 51, 85, 0.7); }
.desk-buy-btn:hover, .desk-sell-btn:hover { transform: translateY(-1px); }
.desk-status {
  margin-top: 10px; font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px; min-height: 16px;
}
.desk-status[data-tone="ok"] { color: var(--hacker-fg); }
.desk-status[data-tone="err"] { color: #ff3355; }

/* Bots panel inside the entry slot */
.desk-bots-blurb {
  margin: 0 0 12px; color: var(--text-soft); font-size: 13px;
  line-height: 1.55;
}
.desk-bots-list { display: flex; flex-direction: column; gap: 8px; }
.desk-bot-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; background: var(--bg-elev);
  border: 1px solid var(--border); border-radius: 12px;
  border-left-width: 3px;
}
.desk-bot-name { font-weight: 600; font-size: 14px; color: var(--text); }
.desk-bot-mode {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 700;
  /* Default — overridden per data-mode below */
  color: var(--text-medium);
}
/* Match the bot library's mode colors so the rows read at a glance. */
.desk-bot-row[data-mode="aggressive"] { border-left-color: var(--aggressive); }
.desk-bot-row[data-mode="aggressive"] .desk-bot-mode { color: var(--aggressive); }
.desk-bot-row[data-mode="aggressive"] .desk-bot-name { color: var(--aggressive); }

.desk-bot-row[data-mode="balanced"] { border-left-color: var(--balanced); }
.desk-bot-row[data-mode="balanced"] .desk-bot-mode { color: var(--balanced); }
.desk-bot-row[data-mode="balanced"] .desk-bot-name { color: var(--balanced); }

.desk-bot-row[data-mode="conservative"] { border-left-color: var(--conservative); }
.desk-bot-row[data-mode="conservative"] .desk-bot-mode { color: var(--conservative); }
.desk-bot-row[data-mode="conservative"] .desk-bot-name { color: var(--conservative); }
.desk-activate-btn {
  padding: 8px 14px; border: none;
  /* Flat solid teal — matches the rest of the BitMEX-style flat dark theme. */
  background: var(--hacker-fg);
  color: var(--bg); border-radius: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; font-weight: 700; cursor: pointer;
  letter-spacing: 0.06em;
}
.desk-activate-btn:hover { background: color-mix(in srgb, var(--hacker-fg) 85%, white); }
.desk-activate-btn[disabled] { opacity: 0.7; cursor: wait; }

/* ---------- Fills river ----------
   flex:1 + min-height:0 so the river fills whatever remains after the
   entry panel, never overflowing the chart card's bottom edge. */
.desk-river {
  padding: 14px 0 0;
  display: flex; flex-direction: column;
  flex: 1; min-height: 0;
}
.desk-river-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 16px 10px; border-bottom: 1px solid var(--border);
}
.desk-river-head h4 {
  margin: 0; font-size: 11.5px;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 600;
}
.desk-river-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px; color: var(--hacker-fg); letter-spacing: 0.14em;
}
.desk-river-live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--hacker-fg); box-shadow: 0 0 8px var(--hacker-fg);
  animation: desk-pulse 1.6s ease-in-out infinite;
  display: inline-block;
}
@keyframes desk-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.desk-river-list {
  flex: 1; overflow-y: auto; padding: 4px 6px 10px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
}
.desk-river-row {
  display: grid; grid-template-columns: 60px 70px 38px 1fr auto;
  align-items: center; gap: 8px;
  padding: 6px 10px; border-bottom: 1px dashed var(--border);
  animation: desk-slide 0.35s ease;
}
.desk-river-row:last-child { border-bottom: none; }
@keyframes desk-slide {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.desk-river-row .t { color: var(--text-dim); font-size: 11px; }
.desk-river-row .sym { color: var(--text); font-weight: 600; }
.desk-river-row .side {
  font-weight: 700; font-size: 10.5px; letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 3px; text-align: center;
}
.desk-river-row .side.buy {
  background: color-mix(in srgb, #00d96b 25%, transparent); color: #00d96b;
}
.desk-river-row .side.sell {
  background: color-mix(in srgb, #ff3355 25%, transparent); color: #ff3355;
}
.desk-river-row .px { color: var(--text-soft); font-size: 11.5px; text-align: right; }
.desk-river-row .sz { color: var(--text-medium); font-size: 11px; text-align: right; }
.desk-river-empty {
  padding: 24px 16px; color: var(--text-dim);
  font-size: 12.5px; text-align: center;
}

/* ---------- Drawer (positions / depth) ---------- */
.desk-drawer {
  background: var(--bg-soft); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--depth-1);
  overflow: hidden; margin-bottom: 24px;
}
.desk-drawer-tabs {
  display: flex; border-bottom: 1px solid var(--border);
  background: var(--bg-elev); padding: 0 8px;
}
.desk-drawer-tab {
  padding: 14px 22px; cursor: pointer; color: var(--text-dim);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  border-bottom: 2px solid transparent;
}
.desk-drawer-tab.active {
  color: var(--hacker-fg); border-bottom-color: var(--hacker-fg);
}
.desk-drawer-body { padding: 16px 18px; }
.desk-pane[hidden] { display: none; }

/* Positions table */
.desk-tbl {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px;
}
.desk-tbl th {
  color: var(--text-dim); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 8px 6px; text-align: left;
  border-bottom: 1px solid var(--border); font-size: 10.5px;
}
.desk-tbl td {
  padding: 11px 6px; border-bottom: 1px dashed var(--border);
  color: var(--text-soft);
}
.desk-tbl tr:last-child td { border-bottom: none; }
.desk-empty {
  text-align: center; color: var(--text-dim); font-size: 12.5px;
  padding: 24px 8px;
}
.desk-tbl .side-tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
}
.desk-tbl .side-tag.long { background: color-mix(in srgb, #00d96b 25%, transparent); color: #00d96b; }
.desk-tbl .side-tag.short { background: color-mix(in srgb, #ff3355 25%, transparent); color: #ff3355; }
.desk-tbl .pnl .usd { font-weight: 700; display: block; }
.desk-tbl .pnl .pct { display: block; font-size: 10.5px; opacity: 0.85; }
.desk-tbl .pnl.pos { color: #00d96b; }
.desk-tbl .pnl.neg { color: #ff3355; }
.desk-close-btn {
  padding: 6px 12px; border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text);
  border-radius: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; cursor: pointer;
}
.desk-close-btn:hover { border-color: var(--accent); }

/* Depth pane */
.desk-depth-empty {
  padding: 32px 12px; text-align: center;
  color: var(--text-dim); font-size: 12.5px;
}
.desk-depth-head {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px; color: var(--text-dim); margin-bottom: 8px;
  padding: 0 8px;
}
.desk-depth-head b { color: var(--hacker-fg); }
.desk-depth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.desk-depth-side { display: flex; flex-direction: column; gap: 3px; }
.desk-depth-row {
  display: grid; grid-template-columns: 80px 1fr;
  align-items: center; gap: 10px; padding: 4px 8px;
  font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px;
}
.desk-depth-row .bar { height: 14px; border-radius: 3px; }
.desk-depth-side.bids .desk-depth-row { direction: rtl; }
.desk-depth-side.bids .desk-depth-row > * { direction: ltr; }
.desk-depth-side.bids .bar { background: color-mix(in srgb, #00d96b 35%, transparent); margin-left: auto; }
.desk-depth-side.asks .bar { background: color-mix(in srgb, #ff3355 35%, transparent); }
.desk-depth-side.bids .p { color: #00d96b; text-align: right; }
.desk-depth-side.asks .p { color: #ff3355; }

/* ---------- Mobile reflow ---------- */
@media (max-width: 800px) {
  .desk-hero { grid-template-columns: 1fr; }
  .desk-rail { position: static; }
  .desk-chart { height: 50vh; min-height: 320px; }
  .desk-controls { grid-template-columns: 1fr; gap: 8px; }
  .desk-super { justify-self: center; }
  .desk-sub { justify-self: center; }
  .desk-quickrow { gap: 8px; }
  .desk-search-wrap { width: 100%; margin-left: 0; }
  .desk-dd-input, .desk-dd-list { width: 100%; }
  .desk-river { max-height: 320px; }
  .desk-tbl { font-size: 11.5px; }
  .desk-tbl th, .desk-tbl td { padding: 8px 4px; }
}