/* ============================================================
   TradeX design tokens.
   Light is the base; dark comes from the OS preference, and an
   explicit [data-theme] on <html> beats both so the header
   toggle wins in either direction.
   Legacy names (--bg/--panel/--border/--text/--accent) are
   aliased onto the new tokens so existing rules theme for free.
   ============================================================ */
:root{
  color-scheme:light;
  --plane:#f1f4f6; --surface:#fcfdfd; --surface-2:#f7f9fa;
  --ink:#0d1114; --ink-2:#4c545b; --muted:#7d868e;
  --grid:#e2e6ea; --axis:#c5ccd2; --hair:rgba(13,17,20,.10);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
  --good:#0ca30c; --warn:#fab219; --crit:#d03b3b;
  --band:rgba(208,59,59,.075);
  --sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;

  /* legacy aliases -- every pre-existing rule inherits the theme */
  --bg:var(--plane); --panel:var(--surface); --sidebar:var(--surface-2);
  --border:var(--hair); --text:var(--ink); --accent:var(--s1);
  --card-bg:var(--surface);
}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){
  color-scheme:dark;
  --plane:#0b0e10; --surface:#171b1e; --surface-2:#1d2225;
  --ink:#f2f5f7; --ink-2:#b3bbc2; --muted:#7d868e;
  --grid:#262b2f; --axis:#363d42; --hair:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --good:#3ddc6b; --warn:#fbbf24; --crit:#e66767;
  --band:rgba(230,103,103,.10);
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --plane:#0b0e10; --surface:#171b1e; --surface-2:#1d2225;
  --ink:#f2f5f7; --ink-2:#b3bbc2; --muted:#7d868e;
  --grid:#262b2f; --axis:#363d42; --hair:rgba(255,255,255,.10);
  --s1:#3987e5; --s2:#d95926; --s3:#199e70;
  --good:#3ddc6b; --warn:#fbbf24; --crit:#e66767;
  --band:rgba(230,103,103,.10);
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--plane); color:var(--ink);
  font-family:var(--sans); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
/* every number in the app is monospaced + tabular so columns line up */
.tile-value,.num,#clock,td,th,input,select,code,.pnl-pct,.mono{
  font-variant-numeric:tabular-nums;
}
.tile-value,#clock,.code-block,code,.mono{font-family:var(--mono)}

/* --- layout --- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 240px; flex-shrink: 0;
  background: var(--surface-2);
  border-right: 1px solid var(--hair);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .brand {
  padding: 20px 20px 16px; font-size: 19px; font-weight: 700;
  letter-spacing:-.01em; border-bottom: 1px solid var(--hair);
}
.sidebar .brand .logo { color: var(--s1); }
nav { padding: 12px 10px; flex: 1; }
.nav-link {
  display: block; padding: 10px 13px; margin: 2px 0;
  border-radius: 5px; color: var(--ink-2); cursor: pointer;
  font-size: 14.5px; user-select: none; text-decoration: none;
}
.nav-link:hover { background: color-mix(in srgb, var(--s1) 9%, transparent); color: var(--ink); }
.nav-link.active {
  background: color-mix(in srgb, var(--s1) 15%, transparent);
  color: var(--s1); font-weight: 600;
}
.sidebar-foot { padding: 16px; border-top: 1px solid var(--hair); }
.sidebar-foot .danger { width: 100%; padding: 11px; }

.content { flex: 1; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 14px 28px; border-bottom: 2px solid var(--ink);
  background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.topbar h1 { margin: 0; font-size: 20px; font-weight:650; letter-spacing:-.01em; }
.engine { color: var(--ink-2); font-size: 13.5px; display:flex; align-items:center; gap:10px; }
#clock { font-variant-numeric: tabular-nums; }
main { padding: 22px 28px; }   /* full content width (no max-width cap) */

/* theme toggle -- mirrors the .chip look from the reference sheet */
#theme-toggle{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 10px; border:1px solid var(--hair); border-radius:3px;
  color:var(--ink-2); background:var(--surface-2); font-weight:500; cursor:pointer;
}
#theme-toggle:hover{ border-color:var(--axis); color:var(--ink); filter:none; }

/* --- views --- */
.view { display: none; }
.view.active { display: block; }

/* --- tiles --- */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2px; margin-bottom: 20px;
  background: var(--hair); border: 1px solid var(--hair);
  border-radius: 5px; overflow: hidden;
}
.tile { background: var(--surface); padding: 15px 18px 14px; border-left:3px solid transparent; }
.tile.is-crit{ border-left-color:var(--crit) }
.tile.is-warn{ border-left-color:var(--warn) }
.tile.is-good{ border-left-color:var(--good) }
.tile-label {
  font-family:var(--mono); color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .08em;
}
.tile-value { font-size: 28px; font-weight: 600; letter-spacing:-.02em; line-height:1.1; margin-top: 4px; }
.tile-sub { color: var(--ink-2); font-size: 12.5px; margin-top: 4px; }

/* --- cards & tables --- */
.card {
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: 5px; padding: 18px 20px 14px; margin-bottom: 18px;
}
.card h2 { margin: 0 0 10px; font-size: 16.5px; font-weight:650; letter-spacing:-.01em; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.row-gap { display: flex; gap: 8px; align-items: center; }
.alloc-wrap { margin-top: 8px; }
.alloc-grid { border-collapse: collapse; margin-top: 4px; font-size: 13px; }
.alloc-grid th, .alloc-grid td { border: 1px solid var(--hair); padding: 2px 6px; text-align: center; }
.alloc-grid input.alloc-in, .alloc-grid input.sub-eq { width: 74px; }
.sub-add-row { margin-top: 6px; display: flex; gap: 6px; align-items: center; }

/* Admin DB browser: one clear card per table */
#db-tables-view { display: flex; flex-direction: column; gap: 18px; margin-top: 12px; }
.db-card { border: 1px solid var(--hair); border-radius: 5px; overflow: hidden; background: var(--surface); }
.db-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
                padding: 10px 14px; border-bottom: 1px solid var(--hair);
                background: var(--surface-2); }
.db-card-head h3 { margin: 0; font-size: 15px; font-weight:650; }
.db-scroll { overflow-x: auto; max-height: 340px; overflow-y: auto; }
.db-card table.db-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; font-family:var(--mono); }
.db-card table.db-grid th, .db-card table.db-grid td {
    border-bottom: 1px solid var(--grid); padding: 6px 10px; text-align: left; white-space: nowrap; }
.db-card table.db-grid thead th { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.db-card table.db-grid tbody tr:hover { background: color-mix(in srgb, var(--s1) 7%, transparent); }
.db-addform { padding: 10px 14px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.db-msg { padding: 0 14px 10px; }
.head-actions { display: flex; align-items: center; gap: 12px; }
.chk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.chk input { cursor: pointer; }
tr.closed-pos td { opacity: 0.6; }
.cap-cell { display: flex; align-items: center; gap: 6px; }
.cap-input { width: 90px; }
.mp-bar-wrap { position: relative; height: 22px; background: var(--surface-2); border-radius: 4px;
  overflow: hidden; margin: 10px 0; border:1px solid var(--hair); }
.mp-bar { height: 100%; width: 0; background: var(--good); transition: width .3s; }
.mp-bar.warn { background: var(--warn); }
.mp-bar.over { background: var(--crit); }
.mp-target { position: absolute; top: 0; left: 85%; width: 2px; height: 100%; background: var(--ink); opacity: .55; }
#perf-table tfoot .perf-summary td { border-top: 2px solid var(--axis); font-weight: 600; }
.perf-period.active { background: var(--s1); color: #fff; }
.perf-foot { display: flex; align-items: center; gap: 14px; margin-top: 10px; flex-wrap: wrap; }
.perf-pager { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.perf-pager .perf-pg.active { background: var(--s1); color: #fff; }
.perf-pager .perf-pg[disabled] { opacity: .4; cursor: default; }
#perf-pagesize { width: auto; }
tr.col-filter th { padding: 2px 4px; }
.col-search { width: 100%; box-sizing: border-box; font-size: 12px; padding: 2px 4px; font-weight: normal; }
.muted { color: var(--muted); font-size: 13px; font-weight: normal; }
table { width: 100%; border-collapse: collapse; font-size: 13px; font-family:var(--mono); }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--grid); text-align: left; }
th { background:var(--surface-2); color: var(--muted); font-weight: 500; font-size: 10.5px;
     text-transform: uppercase; letter-spacing: .06em; }
tbody tr:hover { background: color-mix(in srgb, var(--s1) 6%, transparent); }
.num, td.num, th.num { text-align:right; }

/* --- pills & states --- */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px;
        font-family:var(--mono); font-size: 11px; font-weight: 600; letter-spacing:.03em; }
.pill.connected, .pill.complete { background: color-mix(in srgb,var(--good) 16%,transparent); color: var(--good); }
.pill.paper     { background: color-mix(in srgb,var(--s1)   16%,transparent); color: var(--s1); }
.pill.needs_auth, .pill.queued, .pill.sent { background: color-mix(in srgb,var(--warn) 18%,transparent); color: var(--warn); }
.pill.error, .pill.rejected { background: color-mix(in srgb,var(--crit) 16%,transparent); color: var(--crit); }
.pill.live      { background: color-mix(in srgb,var(--s2)   18%,transparent); color: var(--s2); }
.side-BUY { color: var(--good); font-weight: 700; }
.side-SELL { color: var(--crit); font-weight: 700; }
.pnl-pos { color: var(--good); }
.pnl-neg { color: var(--crit); }
/* % of base_capital shown beside a strategy's rupee P&L; inherits the +/- colour */
.pnl-pct { font-size: 12px; opacity: 0.8; }
.state-badge { font-weight: 700; }
.state-live { color: var(--s2); }
.state-paper { color: var(--s1); }
.state-stopped { color: var(--crit); }
.state-waiting { color: var(--s2); }
.state-in-trade { color: var(--s1); }
/* finished for the day: readable but plainly not working */
.state-done { color: var(--muted); }

/* --- forms & buttons --- */
.form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.form-row input, .form-row select, input, select {
  background: var(--surface-2); border: 1px solid var(--axis); color: var(--ink);
  padding: 8px 10px; border-radius: 4px; font-size: 13.5px; font-family:var(--sans);
}
input:focus, select:focus { outline:2px solid var(--s1); outline-offset:1px; border-color:transparent; }
.form-row input[name="accounts"] { flex: 1; min-width: 220px; }
button {
  background: var(--s1); border: none; padding: 8px 16px;
  border-radius: 4px; cursor: pointer; color: #fff; font-weight: 650; font-size:13.5px;
  font-family:var(--sans);
}
button:hover { filter: brightness(1.08); }
button.danger { background: var(--crit); color: #fff; }
button.small { padding: 5px 12px; font-size: 12.5px; }

.ctrl { display: inline-flex; gap: 6px; }
.ctrl button {
  padding: 4px 10px; font-size: 11.5px; font-weight: 600; border-radius: 3px;
  font-family:var(--mono); letter-spacing:.04em;
  background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--hair);
}
.ctrl button:hover { border-color:var(--axis); color:var(--ink); filter:none; }
.ctrl button.active.live    { background: color-mix(in srgb,var(--s2) 18%,transparent); color: var(--s2); border-color: var(--s2); }
.ctrl button.active.paper   { background: color-mix(in srgb,var(--s1) 16%,transparent); color: var(--s1); border-color: var(--s1); }
.ctrl button.active.stopped { background: color-mix(in srgb,var(--crit) 16%,transparent); color: var(--crit); border-color: var(--crit); }

.stop-cell { display: flex; gap: 6px; align-items: center; }
.stop-cell input { width: 78px; padding: 5px 7px; font-size: 12.5px; }
.stop-set { color: var(--warn); font-weight: 600; }

details.creds { margin-top: 14px; }
details.creds summary { cursor: pointer; color: var(--s1); font-size: 14px; }
details.creds code {
  background: var(--surface-2); border: 1px solid var(--hair);
  padding: 1px 5px; border-radius: 3px; font-size: 12px;
}

#dispatch-result, #pos-result, #admin-result { margin-top: 10px; }
.code-block { background: var(--surface-2); border: 1px solid var(--hair); border-radius: 4px;
  padding: 10px 12px; font-size: 12.5px; overflow-x: auto; color: var(--ink-2); }
#wh-url { word-break: break-all; }
.health-row { display: flex; flex-wrap: wrap; gap: 22px; font-size: 14.5px; }
.health-ok { color: var(--good); } .health-bad { color: var(--crit); } .health-warn { color: var(--warn); }
.md-source-row { margin: 4px 0 14px; }
tr.edit-row td, tr.strat-edit-row td { background: color-mix(in srgb, var(--s1) 7%, transparent); }
tr.edit-row input, tr.strat-edit-row input { min-width: 120px; }
.param-lbl { display: inline-flex; align-items: center; gap: 4px; }
.param-lbl input { min-width: 64px; width: 84px; }
.params-inline { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding-left: 8px; border-left: 1px solid var(--hair); }
.empty { color: var(--muted); font-style: italic; }

/* --- responsive --- */
@media (max-width: 720px) {
  .app { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; flex-direction: column; }
  nav { display: flex; flex-wrap: wrap; }
  .nav-link { flex: 1 1 auto; text-align: center; }
  main { padding: 16px 14px; }
  .topbar { padding: 12px 14px; }
}

/* --- Tearsheet --- */
.ts-banner { background: var(--surface-2); border: 1px solid var(--hair);
             border-radius: 4px; padding: 8px 14px; text-align: center; margin: 6px 0 2px; }
.ts-sub { text-align: center; font-style: italic; margin: 4px 0 10px; }
.ts-h { margin: 16px 0 2px; text-align: center; font-size:13px; font-weight:650;
        font-family:var(--mono); text-transform:uppercase; letter-spacing:.07em; color:var(--muted); }
.ts-chart { width: 100%; height: 230px; }
.ts-chart.ts-short { height: 150px; }
.ts-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 14px; }
.ts-metrics table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ts-metrics th, .ts-metrics td { border-bottom: 1px solid var(--grid); padding: 5px 10px; }
.ts-metrics .num, .ts-metrics td:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ts-months { display: grid; grid-template-columns: repeat(14, 1fr); gap: 6px; margin-top: 8px; }
.ts-mo { border-radius: 4px; padding: 5px 2px; text-align: center; font-size: 11.5px;
         font-family:var(--mono); background: var(--surface-2); }
.ts-mo b { display: block; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.ts-mo.pos   { background: color-mix(in srgb,var(--good) 24%,transparent); }
.ts-mo.pos-s { background: color-mix(in srgb,var(--good) 11%,transparent); }
.ts-mo.neg   { background: color-mix(in srgb,var(--crit) 24%,transparent); }
.ts-mo.neg-s { background: color-mix(in srgb,var(--crit) 11%,transparent); }
.ts-strat { border: 1px solid var(--hair); border-radius: 5px; margin-top: 12px; overflow: hidden; }
.ts-strat-head { display: flex; justify-content: space-between; align-items: center;
                 padding: 7px 12px; background: var(--surface-2); font-size: 12.5px; }
.ts-strat .ts-chart { height: 150px; }
@media (max-width: 1100px) { .ts-metrics { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion:reduce){ *{transition:none!important;animation:none!important} }

/* Totals row on the DB grid. Sticky so it stays visible while scrolling a long
   table -- a footer you have to scroll to find gets missed. */
.db-grid tfoot td { position: sticky; bottom: 0; background: var(--surface-2);
  border-top: 2px solid var(--border); font-weight: 600; white-space: nowrap; }
.db-grid tfoot .muted { font-weight: 400; }
/* same treatment for the live positions/orders tables */
#positions-table tfoot td, #orders-table tfoot td {
  position: sticky; bottom: 0; background: var(--surface-2);
  border-top: 2px solid var(--border); font-weight: 600; white-space: nowrap; }
#positions-table tfoot .muted, #orders-table tfoot .muted { font-weight: 400; }

/* ---- payoff at expiry ---- */
.pf-block { margin: 14px 0 4px; }
.pf-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; }
.pf-metrics { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; }
.pf-metric {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2, transparent); min-width: 130px;
}
.pf-k { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); }
.pf-v { font-family: var(--mono); font-size: 15px; font-variant-numeric: tabular-nums; }
.pf-v.pos { color: var(--pos); }
.pf-v.neg { color: var(--neg); }
.pf-pct { color: var(--ink-2); font-size: 12px; }

/* ---- account credential editor ----
   A labelled grid, not a line of bare placeholders: a stored secret never comes
   back to the page, so each field has to SAY whether one exists and that blank
   keeps it. */
.cred-editor { padding: 10px 4px 4px; }
.cred-head { font-size: 13.5px; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.cred-grid { display: grid; gap: 10px 14px; margin-bottom: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.cred-field { display: flex; flex-direction: column; gap: 3px; }
.cred-field input { width: 100%; }
.cred-label { font-size: 11.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.cred-set { color: var(--good); font-size: 10.5px; }
.cred-unset { color: var(--muted); font-size: 10.5px; }

/* ---- single-account page ----
   Grouped the way the credentials are, with a label and an explanation beside
   every field: these are typed once and then forgotten, so the page has to say
   what each one is and whether a value is already stored. */
body.acct-page { background: var(--plane); color: var(--ink); font-family: var(--sans);
  margin: 0; padding: 0 0 48px; }
.acct-top { background: var(--surface-2); border-bottom: 1px solid var(--hair);
  padding: 10px 22px; display: flex; gap: 10px; align-items: center; font-size: 13px; }
.acct-top a { color: var(--s1); text-decoration: none; }
.acct-top .sep { color: var(--muted); }
.acct-wrap { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.acct-wrap h1 { font-size: 23px; margin: 24px 0 4px; }
.acct-note { margin: 0 0 18px; font-size: 13px; }
.acct-card { background: var(--surface); border: 1px solid var(--hair); border-radius: 6px;
  margin-bottom: 18px; overflow: hidden; }
.acct-card h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  margin: 0; padding: 10px 16px; background: var(--surface-2);
  border-bottom: 1px solid var(--hair); color: var(--ink-2); }
.acct-row { display: grid; grid-template-columns: 190px 1fr; gap: 18px;
  padding: 14px 16px; border-bottom: 1px solid var(--grid); align-items: start; }
.acct-row:last-child { border-bottom: 0; }
.acct-row > label { font-size: 13px; color: var(--ink-2); padding-top: 7px; }
.acct-row input[type="text"], .acct-row input[type="password"], .acct-row input[type="number"],
.acct-row input:not([type]), .acct-row select { width: 100%; max-width: 520px; }
.acct-row input[readonly] { background: var(--surface-2); color: var(--muted); }
.acct-row .help { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); line-height: 1.5;
  max-width: 560px; }
.acct-actions { display: flex; gap: 12px; align-items: center; margin: 22px 0 0; }
.acct-actions .primary { padding: 8px 20px; font-size: 14px; }
.acct-actions .btn-link { color: var(--muted); text-decoration: none; font-size: 13px; }
.acct-result { padding: 10px 14px; border-radius: 5px; margin-bottom: 16px; font-size: 13px; }
.acct-result.good { background: rgba(12,163,12,.12); border: 1px solid var(--good); }
.acct-result.bad { background: rgba(208,59,59,.12); border: 1px solid var(--crit); }
@media (max-width: 640px) {
  .acct-row { grid-template-columns: 1fr; gap: 6px; }
  .acct-row > label { padding-top: 0; font-weight: 600; }
}
/* the Open link sits in a row of buttons, so it has to look like one */
a.btn-open { display: inline-block; text-decoration: none; text-align: center;
  padding: 3px 10px; border: 1px solid var(--hair); border-radius: 4px;
  background: var(--surface-2); color: var(--ink-2); font-size: 11.5px; }
a.btn-open:hover { color: var(--ink); border-color: var(--axis); }