/* ==========================================================================
   Global Markets — Trading Bots page
   Speaks the same language as the dashboard: opaque dark surfaces, hairline
   borders, 10–14px radii, monochrome line icons. Emerald is reserved for the
   primary CTA, the active RUNNING state and the headline session P&L; every
   other number uses the quiet green / quiet red.

   The --bot-* custom properties keep their old names but are now thin aliases
   onto the shared theme tokens, so any rule (or stray inline var()) that still
   references them resolves to the platform palette instead of the old blue.
   ========================================================================== */
:root{
  --bot-cyan:        var(--green-quiet);
  --bot-cyan-soft:   var(--green-soft);
  --bot-card-bg:     var(--surface);
  --bot-card-border: var(--border);
  --bot-text:        var(--text);
  --bot-text-dim:    var(--text-dim);
  --bot-input-bg:    var(--surface-sunk);
  --bot-input-hover: var(--surface-3);
  --bot-stop-bg:     var(--red-soft);
  --bot-stop-border: rgba(232,93,104,0.30);
  --bot-stop-text:   var(--red);
}

/* Same canvas width as the rest of the app. */
.bot-page{max-width:1200px;margin:0 auto}

/* ==========================================================================
   Page header (locked state)
   ========================================================================== */
.bot-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 18px;
}
.bot-head h1{margin:0;font-size:24px;font-weight:620;letter-spacing:-0.026em}
.bot-head .sub{margin:5px 0 0;color:var(--text-dim);font-size:13.5px}

/* ==========================================================================
   Cards — identical geometry to the dashboard card
   ========================================================================== */
.bot-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--r-card);
  padding:18px;
  margin-bottom:14px;
  transition:border-color var(--t);
}
.bot-card:hover{border-color:var(--border-2)}
.bot-card h3{margin:0;color:var(--text);font-size:14px;font-weight:600;letter-spacing:-0.008em}

/* Flush variant: the head keeps its padding, the table bleeds to the edges. */
.bot-card.bot-card-flush{padding:0}
.bot-card.bot-card-flush .bot-card-head{padding:18px 18px 14px;margin-bottom:0}

.bot-card-head{display:flex;align-items:flex-start;gap:11px;margin-bottom:14px}
.bot-card-head .ct{flex:1;min-width:0}
.bot-card-sub{margin:3px 0 0;color:var(--text-mute);font-size:12.5px;font-weight:400}
.bot-count{color:var(--text-mute);font-weight:540;font-variant-numeric:tabular-nums}

/* Small square line-icon chip used in every card head. */
.bot-ico{
  width:32px;height:32px;border-radius:var(--r-xs);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-3);border:1px solid var(--border);
  color:var(--text-dim);
}
.bot-ico.lg{width:38px;height:38px;border-radius:var(--r-sm)}
.bot-ico.accent{color:var(--green-quiet)}
/* Gold is used exactly once per screen, as an icon tint on a hairline chip. */
.bot-ico.gold{color:var(--gold);border-color:var(--gold-line);background:var(--gold-soft)}
.bot-ico.danger{color:var(--red-quiet);border-color:rgba(232,93,104,0.26);background:var(--red-soft)}

/* Two-up grid: upload vs. passkey. Stacks on narrow screens. */
.bot-two-up{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;align-items:stretch}
.bot-two-up > .bot-card{margin-bottom:0;display:flex;flex-direction:column}
@media (max-width:900px){.bot-two-up{grid-template-columns:1fr}}

/* Revoked notice. */
.bot-card.bot-alert{display:flex;align-items:flex-start;gap:12px;border-color:rgba(232,93,104,0.26)}
.bot-alert .ct{flex:1;min-width:0}
.bot-alert h3{color:var(--red)}
.bot-alert p{margin:4px 0 0;color:var(--text-dim);font-size:13px;line-height:1.55}

/* ==========================================================================
   Dropzone — compact override of the shared .dropzone
   ========================================================================== */
.bot-page .dropzone{padding:22px 16px;text-align:center}
.bot-page .dropzone .ico{width:34px;height:34px;margin:0 auto 10px}
.bot-page .dropzone .ico.err{
  color:var(--red-quiet);border-color:rgba(232,93,104,0.30);background:var(--red-soft);
}
.bot-page .dropzone[data-state="error"]{border-color:rgba(232,93,104,0.34)}
.bot-page .dropzone .dz-title{margin:4px 0;color:var(--text);font-weight:560;font-size:13.5px}
.bot-page .dropzone .dz-title.err{color:var(--red-quiet);word-break:break-all}
.bot-page .dropzone .dz-alt{margin:2px 0;color:var(--text-dim);font-size:12.5px}
.bot-page .dropzone .dz-alt.tnum{font-variant-numeric:tabular-nums}
.bot-page .dropzone .formats{margin-top:8px;color:var(--text-mute);font-size:11.5px}
.bot-page .dropzone .dz-invalid{
  display:inline-flex;align-items:center;gap:6px;margin:9px 0 0;
  color:var(--red-quiet);font-size:12.5px;font-weight:540;
}
/* The submit button sits directly under the dropzone. */
.bot-page .dropzone + .btn{margin-top:12px}

/* ==========================================================================
   Inputs
   ========================================================================== */
.bot-input-icon{position:relative;display:block}
.bot-input-icon > svg{
  position:absolute;left:12px;top:50%;transform:translateY(-50%);
  color:var(--text-mute);pointer-events:none;
}
.bot-input-icon input{padding-left:34px}
.bot-page #pk{
  font-family:var(--font-mono);letter-spacing:0.16em;
  text-transform:uppercase;font-size:13.5px;
}

/* Small line-icon note under a card. */
.bot-note{
  display:flex;align-items:flex-start;gap:7px;
  margin:12px 0 0;color:var(--text-mute);font-size:11.5px;line-height:1.5;
}
.bot-note svg{flex-shrink:0;margin-top:1px}
.bot-two-up .bot-note{margin-top:auto;padding-top:14px}

/* ==========================================================================
   Bot settings grid
   ========================================================================== */
.bot-settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.bot-settings-grid .field{margin-bottom:0}
@media (max-width:900px){.bot-settings-grid{grid-template-columns:1fr}}

/* Live market dot rendered next to the currently selected pair. */
.bot-select-wrap{position:relative;display:block}
.bot-select-wrap select{padding-left:32px}
.bot-select-wrap .status-dot{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  z-index:1;pointer-events:none;
}
.bot-page .status-dot.closed{background:var(--red-quiet);box-shadow:none}

/* ==========================================================================
   My bots table + empty state
   ========================================================================== */
.bot-table-wrap{overflow-x:auto;padding:0 4px;border-top:1px solid var(--border)}
.bot-empty{padding:32px 18px;text-align:center}
.bot-empty svg{color:var(--text-mute);margin-bottom:10px}
.bot-empty .t{margin:0;color:var(--text-dim);font-size:13.5px;font-weight:540}
.bot-empty .s{margin:5px 0 0;color:var(--text-mute);font-size:12.5px}

/* ==========================================================================
   Detail view header (unlocked state)
   ========================================================================== */
.bot-detail-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin:0 0 16px;
}
.bot-detail-head .bd-left{display:flex;align-items:center;gap:12px;min-width:0}
.bot-detail-head .bd-name{
  margin:0;font-size:20px;font-weight:620;letter-spacing:-0.022em;
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
}
.bot-detail-head .bd-ver{
  font-size:10px;font-weight:560;letter-spacing:0.08em;color:var(--text-mute);
  border:1px solid var(--border-2);border-radius:var(--r-pill);padding:2px 8px;
}
.bot-detail-head .bd-sub{margin:3px 0 0;color:var(--text-mute);font-size:12.5px}
.bot-detail-head .bd-right{display:flex;align-items:center;gap:9px;flex-wrap:wrap}

/* Status pill — the one place the loud green marks "live". */
.bot-status-row{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px;border-radius:var(--r-pill);
  background:var(--surface-3);border:1px solid var(--border);color:var(--text-dim);
  font-size:11px;font-weight:560;letter-spacing:0.02em;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.bot-status-row .dot{width:6px;height:6px;border-radius:50%;background:var(--text-mute);flex-shrink:0}
.bot-status-row.running{background:var(--green-soft);border-color:rgba(32,216,137,0.20);color:var(--green)}
.bot-status-row.running .dot{background:var(--green);box-shadow:0 0 0 3px var(--green-glow)}

/* Start / Stop controls (kept as .bot-start / .bot-stop for the scripts). */
.bot-start{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border:1px solid transparent;border-radius:var(--r-btn);
  background:var(--green);color:#04150C;font-family:inherit;
  font-weight:620;font-size:13.5px;letter-spacing:-0.005em;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),box-shadow var(--t-fast),transform var(--t-fast);
}
.bot-start:hover{background:#33E296;box-shadow:0 0 0 3px var(--green-glow)}
.bot-start:active{transform:scale(0.985)}
.bot-start:disabled{opacity:0.45;cursor:not-allowed;transform:none;box-shadow:none}
.bot-stop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 16px;border:1px solid var(--bot-stop-border);border-radius:var(--r-btn);
  background:transparent;color:var(--red-quiet);font-family:inherit;
  font-weight:560;font-size:13.5px;cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast);
}
.bot-stop:hover{background:var(--bot-stop-bg);border-color:rgba(232,93,104,0.46);color:var(--red)}
.bot-stop:active{transform:scale(0.985)}
.bot-stop:disabled{opacity:0.45;cursor:not-allowed;transform:none}

/* ==========================================================================
   Overview — label / value rows
   ========================================================================== */
.bot-kv{display:flex;flex-direction:column}
.bot-kv .kv{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 0;border-bottom:1px solid var(--border);min-height:44px;
}
.bot-kv .kv:last-child{border-bottom:none}
.bot-kv .k{color:var(--text-mute);font-size:12.5px;flex-shrink:0}
.bot-kv .v{
  font-size:13px;font-weight:540;text-align:right;
  font-variant-numeric:tabular-nums;
}
.bot-kv .v.mono{font-family:var(--font-mono)}
.bot-kv .v.on{color:var(--green-quiet)}
.bot-kv .v.off{color:var(--text-mute)}
.bot-kv .kv-ctl{width:100%;max-width:264px;min-width:0}
.bot-kv .kv-ctl input,
.bot-kv .kv-ctl select{
  width:100%;background:var(--surface-sunk);border:1px solid var(--border-2);
  color:var(--text);padding:8px 12px;border-radius:var(--r-xs);
  font-size:13px;font-family:inherit;font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.bot-kv .kv-ctl input:hover,
.bot-kv .kv-ctl select:hover{border-color:var(--border-3)}
.bot-kv .kv-ctl input:focus,
.bot-kv .kv-ctl select:focus{
  outline:none;border-color:rgba(32,216,137,0.5);
  box-shadow:0 0 0 3px var(--green-glow);background:var(--surface-2);
}
.bot-kv .kv-ctl input:disabled,
.bot-kv .kv-ctl select:disabled{opacity:0.5;cursor:not-allowed}

/* Per-pair market-hours note, injected by the page script. */
.bot-pair-note{display:flex;align-items:center;gap:7px;margin-top:8px;font-size:11.5px;line-height:1.45}
.bot-pair-note:empty{display:none}
.bot-pair-note .psn-txt{color:var(--text-dim)}
.bot-pair-note .psn-open{color:var(--green-quiet);font-weight:560}
.bot-pair-note .psn-closed{color:var(--red-quiet);font-weight:560}

/* ==========================================================================
   Performance — headline P&L, timeframe pills, active trade
   ========================================================================== */
.bot-session{padding:0}
.bot-session .lbl{
  color:var(--text-mute);font-size:11px;font-weight:540;
  letter-spacing:0.09em;text-transform:uppercase;
}
.bot-session .val{
  color:var(--green);font-size:34px;font-weight:640;line-height:1.05;
  margin:8px 0 0;letter-spacing:-0.032em;font-variant-numeric:tabular-nums;
}
.bot-session .val.neg{color:var(--red)}
.bot-session .meta{
  margin-top:6px;color:var(--text-mute);font-size:12px;
  font-family:var(--font-mono);
}

.bot-tf-block{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.bot-tf-meta{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:6px;margin-bottom:10px;
}
.bot-tf-meta .tf-lbl{color:var(--text-dim);font-size:11.5px;font-weight:560;letter-spacing:0.03em}
.bot-tf-meta .meta{color:var(--text-mute);font-size:11.5px}

/* Quiet pills — never a second brand colour, just a brighter surface. */
.bot-tf-row{display:flex;flex-wrap:wrap;gap:6px}
.bot-tf-row button{
  background:var(--surface-sunk);border:1px solid var(--border);
  color:var(--text-mute);font-family:inherit;font-size:12px;font-weight:540;
  padding:6px 13px;border-radius:var(--r-pill);cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
.bot-tf-row button:hover{color:var(--text-dim);border-color:var(--border-2)}
.bot-tf-row button.active{background:var(--surface-3);color:var(--text);border-color:var(--border-3)}
.bot-tf-row button:disabled{opacity:0.45;cursor:not-allowed}

.bot-active{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.bot-active .top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.bot-active .top .l{
  display:flex;align-items:center;gap:7px;color:var(--green);
  font-size:10.5px;font-weight:560;letter-spacing:0.07em;text-transform:uppercase;
}
.bot-active .top .l svg{color:var(--green)}
.bot-active .countdown{
  color:var(--text);font-size:24px;font-weight:620;letter-spacing:-0.024em;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
.bot-active .countdown .u{font-size:14px;color:var(--text-mute);margin-left:2px}
.bot-active .info{
  display:flex;flex-wrap:wrap;gap:20px;margin:12px 0;
  color:var(--text-mute);font-size:12px;
}
.bot-active .info .v{
  color:var(--text-dim);margin-left:5px;
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;
}
.bot-active .progress{
  height:4px;background:var(--surface-sunk);border:1px solid var(--border);
  border-radius:var(--r-pill);overflow:hidden;
}
.bot-active .progress .fill{height:100%;background:var(--green-quiet);transition:width 1s linear}

/* ==========================================================================
   Logs
   ========================================================================== */
.bot-logs-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bot-logs-head .bot-card-head{margin-bottom:0}
.bot-logs-head .count{color:var(--text-mute);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.bot-logs{
  max-height:240px;overflow-y:auto;border-top:1px solid var(--border);
  font-family:var(--font-mono);font-size:12px;line-height:1.6;color:var(--text-dim);
}
.bot-logs .row{
  display:flex;gap:10px;align-items:flex-start;
  padding:7px 0;border-bottom:1px solid var(--border);
}
.bot-logs .row:last-child{border-bottom:none}
.bot-logs .ts{color:var(--text-mute);flex-shrink:0;font-size:11.5px;font-variant-numeric:tabular-nums}
.bot-logs .ico{
  color:var(--green-quiet);flex-shrink:0;width:14px;margin-top:2px;
  display:inline-flex;align-items:center;justify-content:center;
}
.bot-logs .ico.err{color:var(--red-quiet)}
.bot-logs .msg{min-width:0;word-break:break-word}
.bot-logs .msg.success{color:var(--green-quiet)}
.bot-logs .msg.error{color:var(--red-quiet)}
.bot-logs .empty{
  color:var(--text-mute);text-align:center;padding:20px 0;border-bottom:none;
  font-family:var(--font);font-size:12.5px;
}

/* ==========================================================================
   Live trade log
   ========================================================================== */
.bot-trades-rows{border-top:1px solid var(--border)}
.bot-trades-rows .row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;
}
.bot-trades-rows .row:last-child{border-bottom:none}
.bot-trades-rows .left{display:flex;align-items:center;gap:10px}
.bot-trades-rows .badge{
  display:inline-flex;align-items:center;
  background:var(--green-soft);color:var(--green-quiet);
  border:1px solid rgba(32,216,137,0.18);
  font-size:10px;font-weight:560;letter-spacing:0.06em;
  padding:2px 7px;border-radius:var(--r-xs);
}
.bot-trades-rows .badge.sl{
  background:var(--red-soft);color:var(--red-quiet);border-color:rgba(232,93,104,0.18);
}
.bot-trades-rows .pair{color:var(--text);font-weight:540;font-size:12.5px}
.bot-trades-rows .right{
  display:flex;gap:14px;align-items:baseline;color:var(--text-mute);
  font-family:var(--font-mono);font-size:12.5px;font-variant-numeric:tabular-nums;
}
.bot-trades-rows .right .amount{font-weight:560}
.bot-trades-rows .right .amount.pos{color:var(--green-quiet)}
.bot-trades-rows .right .amount.neg{color:var(--red-quiet)}
.bot-trades-empty{color:var(--text-mute);text-align:center;padding:22px 0;font-size:12.5px}

/* ==========================================================================
   Legacy shells — kept so older markup and responsive.css hooks still resolve
   ========================================================================== */
.bot-hero{padding:0 0 16px}
.bot-hero .h-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.bot-hero h1{margin:0;color:var(--text);font-size:24px;font-weight:620;letter-spacing:-0.026em}
.bot-hero p.sub{margin:5px 0 0;color:var(--text-dim);font-size:13.5px}
.bot-hero .ver-pill{
  background:var(--surface-3);border:1px solid var(--border-2);color:var(--text-mute);
  font-size:10px;font-weight:560;padding:2px 8px;border-radius:var(--r-pill);letter-spacing:0.08em;
}

.bot-field{margin-bottom:14px}
.bot-field label{
  display:block;margin-bottom:7px;color:var(--text-dim);
  font-size:11.5px;font-weight:560;letter-spacing:0.03em;
}
.bot-field input,.bot-field select{
  width:100%;background:var(--surface-sunk);border:1px solid var(--border-2);
  color:var(--text);padding:10px 13px;border-radius:var(--r-btn);
  font-size:14px;font-family:inherit;
  transition:border-color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
.bot-field input:focus,.bot-field select:focus{
  outline:none;border-color:rgba(32,216,137,0.5);
  box-shadow:0 0 0 3px var(--green-glow);background:var(--surface-2);
}
.bot-field input:disabled,.bot-field select:disabled{opacity:0.5;cursor:not-allowed}

/* ==========================================================================
   Narrow screens
   ========================================================================== */
@media (max-width:640px){
  .bot-head h1{font-size:21px}
  .bot-detail-head{align-items:flex-start}
  .bot-detail-head .bd-right{width:100%}
  .bot-detail-head .bd-right .bot-start,
  .bot-detail-head .bd-right .bot-stop{flex:1 1 auto}
  .bot-kv .kv{flex-direction:column;align-items:flex-start;gap:7px}
  .bot-kv .v{text-align:left}
  .bot-kv .kv-ctl{max-width:none}
  .bot-session .val{font-size:28px}
}