/* TWS-inspired dark theme: dense grids, blue BUY / red SELL, ITM shading. */
:root {
  --bg: #17191d; --panel: #1e2126; --panel2: #23272d; --border: #33383f;
  --text: #d7dade; --muted: #8a9099; --head: #9aa0a8;
  --green: #26a65b; --red: #e04848; --amber: #d29922;
  --buy: #1f6fd6; --buy-dk: #16569f; --sell: #d64545; --sell-dk: #a33030;
  --accent: #4fa3e3; --itm: #232d3d; --atm: #2c3b52;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
body {
  background: var(--bg); color: var(--text); height: 100%;
  font: 12px/1.4 "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}
header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px; background: linear-gradient(#262a30, #1d2025);
  border-bottom: 1px solid #000; position: sticky; top: 0; z-index: 5;
}
.hdr-left, .hdr-right { display: flex; align-items: center; gap: 10px; }
.brand { font-size: 14px; font-weight: 700; letter-spacing: .02em; color: #fff; }
.hdr-center { display: flex; align-items: baseline; gap: 8px; }
.idx-label { color: var(--muted); font-weight: 600; }
.idx-price { font-size: 19px; font-weight: 700; }
.idx-price.up { color: var(--green); } .idx-price.down { color: var(--red); }
.idx-chg { font-size: 12px; color: var(--muted); }
.stat label { color: var(--muted); margin-right: 6px; font-size: 11px; }
.stat span { font-size: 14px; font-weight: 700; }
.badge {
  padding: 1px 8px; border-radius: 3px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; border: 1px solid var(--border); color: var(--muted);
}
.badge.ok { color: #7ee2a8; border-color: #2c6e49; background: #16281e; }
.badge.warn { color: #ffd479; border-color: #8a6d1f; background: #2b2410; }
.badge.err { color: #ff9c9c; border-color: #8a2f2f; background: #2b1414; }
.badge.live { color: #fff; border-color: var(--sell); background: var(--sell); font-weight: 700; }

main { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
@media (max-width: 1100px) { .columns { grid-template-columns: 1fr; } }
.panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px; padding: 8px 10px; overflow: auto;
}
.panel-title {
  display: flex; align-items: center; gap: 10px; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--head);
}
.spacer { flex: 1; }
.hint { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 11px; color: var(--muted); }

/* grids */
table.grid { width: 100%; border-collapse: collapse; }
.grid th, .grid td { padding: 3px 8px; text-align: left; white-space: nowrap; height: 22px; }
.grid th {
  color: var(--head); font-weight: 600; font-size: 11px;
  background: var(--panel2); border-bottom: 1px solid var(--border);
  position: sticky; top: 0;
}
.grid td { border-bottom: 1px solid #24282e; }
.grid tbody tr:hover td { background: #262b33; }
.num { text-align: right; }
.pos { color: var(--green); } .neg { color: var(--red); }
tfoot td { border-top: 1px solid var(--border); font-weight: 700; background: var(--panel2); }

#accounts-table tbody tr { cursor: pointer; }
#accounts-table tbody tr.selected td { background: #2a3646; }
.dep { min-width: 130px; }
.depbar { display: inline-block; vertical-align: middle; width: 70px; height: 7px; background: #14161a; border: 1px solid var(--border); border-radius: 3px; margin-right: 6px; overflow: hidden; }
.depbar i { display: block; height: 100%; background: var(--green); }
.depbar i.hot { background: var(--amber); }
.depbar i.full { background: var(--red); }

/* chain */
.sel-strong { font-weight: 700; color: #fff; }
.chain-head {
  display: flex; justify-content: space-between; padding: 2px 8px;
  font-size: 10px; letter-spacing: .1em; color: var(--muted);
}
.calls-label, .puts-label { font-weight: 700; }
.panel-title { flex-wrap: wrap; row-gap: 4px; }
.chain-scroll { max-height: 400px; overflow-y: auto; position: relative; }
#chain-table td.strike, #chain-table th.strike {
  text-align: center; font-weight: 700; background: var(--panel2);
  color: var(--accent); border-left: 1px solid var(--border); border-right: 1px solid var(--border);
}
#chain-table tr.atm td { background: var(--atm); }
#chain-table td.itm { background: var(--itm); }
#chain-table tr.atm td.itm { background: var(--atm); }
.q { cursor: pointer; }
.q:hover { outline: 1px solid var(--accent); outline-offset: -1px; border-radius: 2px; }
.q.inleg { box-shadow: inset 0 0 0 1px var(--accent); }
@keyframes flashUp { from { background-color: rgba(38,166,91,.22); } }
@keyframes flashDn { from { background-color: rgba(224,72,72,.22); } }
td.fl-up { animation: flashUp 0.5s ease-out; }
td.fl-dn { animation: flashDn 0.5s ease-out; }
details#picker { margin-top: 6px; }
details#picker summary { color: var(--accent); cursor: pointer; font-size: 11px; }
.picker-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.picker-row input { width: 64px; }

/* buttons & inputs */
button {
  background: #2a2f36; color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 4px 10px; font: inherit; cursor: pointer;
}
button:hover { border-color: var(--muted); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.mini { padding: 1px 7px; font-size: 11px; }
button.danger { background: #33191b; border-color: #6e2a2a; color: #ff9c9c; }
button.danger.armed { background: var(--sell); color: #fff; border-color: var(--sell); }
button.transmit {
  background: var(--buy); border-color: var(--buy-dk); color: #fff;
  font-weight: 700; padding: 6px 18px; font-size: 13px;
}
button.transmit:hover { background: #2b7de0; }
input, select {
  background: #14161a; color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 4px 7px; font: inherit;
}
input[type="number"] { width: 84px; text-align: right; }
.seg button { border-radius: 0; padding: 1px 8px; font-size: 11px; }
.seg button:first-child { border-radius: 3px 0 0 3px; }
.seg button:last-child { border-radius: 0 3px 3px 0; }
.seg button.on { background: var(--buy); border-color: var(--buy-dk); color: #fff; }
.row-inline { display: flex; gap: 6px; align-items: center; }

/* ticket */
.legs { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; min-height: 34px; }
.legs .empty {
  color: var(--muted); padding: 8px; border: 1px dashed var(--border);
  border-radius: 4px; text-align: center;
}
.leg {
  display: flex; align-items: center; gap: 8px; padding: 3px 8px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
}
.leg .qty { display: flex; align-items: center; gap: 2px; }
.leg .qty input { width: 52px; font-weight: 700; padding: 2px 4px; }
.leg .qty input.long { color: #6db3f2; border-color: var(--buy-dk); }
.leg .qty input.short { color: #f28b8b; border-color: var(--sell-dk); }
.leg .qty button { padding: 2px 7px; }
.side-tag { font-weight: 700; padding: 1px 8px; border-radius: 3px; color: #fff; min-width: 48px; text-align: center; font-size: 11px; border: 1px solid transparent; cursor: pointer; }
.side-tag:hover { filter: brightness(1.15); border-color: #fff; }
.side-tag.buy { background: var(--buy); } .side-tag.sell { background: var(--sell); }
.leg .desc { font-weight: 600; }
.leg .lq { color: var(--muted); }
.leg .x { margin-left: auto; }
.ticket-grid {
  display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; align-items: center; margin: 6px 0;
}
.ticket-grid > label { color: var(--muted); font-size: 11px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper button { padding: 4px 9px; }
.pct-sign { color: var(--muted); margin-right: 6px; }
#pct { width: 64px; }
table.alloc { margin: 6px 0; }
table.alloc input { width: 58px; padding: 2px 5px; }
table.alloc input.pct-in { width: 50px; }
table.alloc tr.zero td { color: var(--muted); }
table.alloc input.override { border-color: var(--amber); color: #ffd479; }
.warnings { display: flex; flex-direction: column; gap: 3px; }
.warnings div { color: #ffd479; background: #2b2410; border: 1px solid #8a6d1f; border-radius: 3px; padding: 3px 8px; font-size: 11px; }
.transmit-row { display: flex; gap: 10px; margin-top: 8px; align-items: center; }
.msg { min-height: 16px; font-size: 12px; margin-top: 4px; }
.msg.err { color: var(--red); } .msg.ok { color: var(--green); }
.hidden { display: none !important; }
.modal.stepup { width: 360px; }
.modal.stepup p { font-size: 12px; line-height: 1.5; margin: 6px 0; }
.modal.stepup input.code { width: 100%; padding: 8px 10px; margin-top: 8px; font-size: 22px; letter-spacing: 6px; text-align: center; }

/* bottom tabs */
.tabbar {
  display: flex; align-items: center; gap: 2px; margin-bottom: 6px;
  border-bottom: 1px solid var(--border); padding-bottom: 0;
}
.tab {
  background: transparent; border: none; border-bottom: 2px solid transparent;
  border-radius: 0; color: var(--muted); padding: 5px 12px; font-weight: 600;
}
.tab.on { color: #fff; border-bottom-color: var(--accent); }
.chip {
  background: #2a3646; border: 1px solid var(--accent); color: var(--accent);
  border-radius: 10px; padding: 1px 10px; font-size: 11px; margin-left: 10px; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-weight: 600;
}
.chip.close { border-color: var(--sell); color: #f28b8b; background: #2b1414; }
.chip.hedge { border-color: var(--amber); color: #ffd479; background: #2b2410; }
#tab-body { max-height: 300px; overflow-y: auto; }
.expander { cursor: pointer; color: var(--accent); width: 20px; display: inline-block; }
tr.child td { background: #1a1d22; color: var(--muted); }
tr.child td:first-child { padding-left: 26px; }
.status-Working { color: var(--amber); }
.status-Armed { color: #c9a0ff; }
.status-Filled { color: var(--green); }
.status-Partial { color: var(--amber); }
.status-Cancelled, .status-Rejected { color: var(--muted); }
.progress { display: inline-block; vertical-align: middle; width: 54px; height: 6px; background: #14161a; border: 1px solid var(--border); border-radius: 3px; margin-right: 6px; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--green); }
.lg-long { color: #6db3f2; } .lg-short { color: #f28b8b; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 20; }
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
  padding: 16px 18px; min-width: 480px; max-width: 680px; box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.modal h3 { margin-bottom: 10px; font-size: 14px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 12px; }
.confirm-summary { background: var(--panel2); border-radius: 4px; padding: 8px 10px; margin-bottom: 8px; line-height: 1.6; }
.confirm-summary .buy { color: #6db3f2; font-weight: 700; }
.confirm-summary .sell { color: #f28b8b; font-weight: 700; }

/* many accounts: pinned firm total, scrollable rows, collapsible per-account sizing */
.acct-scroll { max-height: 200px; overflow-y: auto; }
.acct-scroll.expanded { max-height: none; }
/* whole header block (column names + firm total) sticks as one unit */
.acct-scroll thead { position: sticky; top: 0; z-index: 2; background: var(--panel2); }
.acct-scroll thead th { position: static; }
#accounts-table tr.firm td { background: var(--panel2); font-weight: 700; border-bottom: 2px solid var(--border); cursor: default; }
#accounts-table thead th[data-sort] { cursor: pointer; user-select: none; }
#accounts-table thead th[data-sort]:hover { color: #fff; }
#accounts-table thead th.sorted { color: var(--accent); }
#accounts-table thead th .arrow { font-size: 9px; }
.alloc-scroll { max-height: 240px; overflow-y: auto; margin: 4px 0; }
.alloc-scroll table.alloc { margin: 0; }
.alloc-scroll thead th, .acct-scroll thead th { position: sticky; top: 0; }
#alloc-toggle { margin-top: 6px; }
.confirm-scroll { max-height: 260px; overflow-y: auto; }
.strike-search { width: 80px; padding: 2px 6px; font-size: 11px; text-transform: none; letter-spacing: 0; }
#chain-table tr.found td { outline: 1px solid var(--amber); outline-offset: -1px; }
#chain-table tr.found td.strike { color: var(--amber); }

/* market clock, risk line, inline price editor */
.clock { font-size: 11px; color: var(--muted); margin-left: 14px; }
.risk { font-size: 11px; color: var(--text); background: var(--panel2); border: 1px solid var(--border); border-radius: 4px; padding: 4px 8px; margin-bottom: 8px; }
.risk b { color: #fff; }
input.px-edit { width: 66px; padding: 1px 4px; font-size: 11px; text-align: right; }

/* sign-in + roles */
.whoami { display: flex; align-items: center; gap: 6px; margin-left: 6px; font-size: 11px; }
.whoami .who { color: #fff; font-weight: 600; }
.role { padding: 1px 7px; border-radius: 9px; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; border: 1px solid var(--border); color: var(--muted); }
.role.trader { color: #6db3f2; border-color: var(--buy-dk); }
.role.viewer { color: #ffd479; border-color: #8a6d1f; }
body.viewer .trader-only { display: none !important; }
body.viewer .q { cursor: default; }
body.viewer .q:hover { outline: none; }
body.viewer #legs-list, body.viewer .ticket-grid, body.viewer #alloc-toggle, body.viewer #risk-line, body.viewer #alloc-scroll { display: none !important; }
.viewer-note { color: #ffd479; background: #2b2410; border: 1px solid #8a6d1f; border-radius: 4px; padding: 8px 10px; font-size: 12px; }

#sound-btn.on { color: #7ee2a8; border-color: #2c6e49; background: #16281e; }