/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 120%; }   /* ~19.2px base — matches multileg_lite */

body {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  background: #0d1117;
  color: #c9d1d9;
  line-height: 1.4;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
header {
  background: #161b22;
  padding: 0 16px;
  border-bottom: 1px solid #30363d;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}
.header-controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  height: 46px;
}
.header-controls label { display: flex; align-items: center; gap: 4px; font-size: 0.78rem; color: #8b949e; }

/* Underlying dropdown with LTP */
.underlying-dropdown-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.underlying-dropdown-wrap select {
  font-size: 0.84rem;
  font-weight: 500;
  padding: 4px 8px;
  height: 28px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 6px;
}
.underlying-dropdown-wrap select:focus { border-color: #58a6ff; outline: none; }

/* Expiry chip bar */
#expiry-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 16px;
  border-top: 1px solid #21262d;
  overflow-x: auto;
  flex-shrink: 0;
}
#expiry-bar::-webkit-scrollbar { height: 3px; }
.expiry-chip {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 3px 12px;
  border-radius: 12px;
  font-size: 0.78rem;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.expiry-chip:hover { border-color: #58a6ff; color: #c9d1d9; }
.expiry-chip.active { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.08); }

#underlying-btns { display: flex; gap: 6px; }

.underlying-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 0.15s, color 0.15s;
}
.underlying-btn:hover { border-color: #58a6ff; color: #c9d1d9; }
.underlying-btn.active { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.08); }

.btn-ltp {
  color: #d29922;
  font-weight: 600;
  font-size: 0.82rem;
  display: inline-block;
  min-width: 10ch;
  text-align: right;
}

/* ── Tab bar ───────────────────────────────────────────────────────────────── */
.tab-bar {
  display: flex;
  align-items: stretch;
  background: #161b22;
  border-bottom: 1px solid #30363d;
  height: 38px;
  flex-shrink: 0;
}
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 18px;
  color: #8b949e;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  white-space: nowrap;
  transition: color 0.15s;
}
.tab-btn:hover { color: #c9d1d9; background: transparent; }
.tab-btn.active { color: #58a6ff; border-bottom-color: #58a6ff; }

/* ── Nav OMS hover wrapper + dropdown ────────────────────────────────────────── */
.nav-oms-wrap {
  position: relative;
  display: flex;
  align-items: stretch;
}
.nav-oms-wrap:hover .tab-btn { color: #c9d1d9; }

.nav-links-popup {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 160px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  z-index: 1000;
  overflow: hidden;
}
.nav-oms-wrap:hover .nav-links-popup { display: block; }

.nav-link-item {
  display: block;
  padding: 7px 14px;
  border-bottom: 1px solid #21262d;
  text-decoration: none;
  color: #c9d1d9;
  font-size: 0.82rem;
}
.nav-link-item:last-child { border-bottom: none; }
.nav-link-item:hover { background: #21262d; }
.nav-link-empty { padding: 10px 14px; color: #6e7681; font-size: 0.80rem; }

/* ── Page containers ───────────────────────────────────────────────────────── */
.page { display: none; }
.page.active { display: block; }

#page-chain { height: calc(100vh - 46px - 38px); display: none; flex-direction: column; overflow: hidden; }
#page-chain.active { display: flex; }

#page-signals, #page-active {
  height: calc(100vh - 46px - 38px);
  overflow-y: auto;
}

/* ── Main split layout (chain left + form right sidebar) ───────────────────── */
main { display: flex; flex-direction: row; flex: 1; overflow: hidden; }

#chain-section { padding: 8px; overflow-y: auto; width: 40%; min-width: 200px; flex-shrink: 0; }

#resize-handle {
  width: 5px;
  background: #21262d;
  border-left: 1px solid #30363d;
  border-right: 1px solid #30363d;
  cursor: col-resize;
  flex-shrink: 0;
  transition: background 0.15s;
}
#resize-handle:hover, #resize-handle.dragging { background: #1f6feb; }

#form-section {
  flex: 1;
  min-width: 300px;
  padding: 12px 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #0d1117;
  border-left: 1px solid #21262d;
  font-size: 0.90rem;
}

/* ── Option chain table ────────────────────────────────────────────────────── */
#chain-table-wrap { overflow-x: auto; }
#chain-table-wrap table { width: 100%; min-width: 420px; }

table { width: 100%; border-collapse: collapse; font-size: 0.80rem; }
th {
  padding: 6px 8px;
  text-align: right;
  color: #8b949e;
  border-bottom: 1px solid #21262d;
  background: #161b22;
  font-weight: 500;
  white-space: nowrap;
}
td {
  padding: 5px 8px;
  text-align: right;
  border-bottom: 1px solid #161b22;
  white-space: nowrap;
}
tr:hover td { background: #161b22; }

.strike-col { text-align: center; font-weight: 600; color: #c9d1d9; background: #0d1117; }
tr:hover .strike-col { background: #161b22; }

/* ATM row */
tr.atm-row td { background: #0d2b1a; border-top: 1px solid #238636; border-bottom: 1px solid #238636; }
tr.atm-row .strike-col { background: #0d2b1a; color: #3fb950; }

/* ITM highlighting */
tr.ce-itm td:nth-child(-n+2) { background: rgba(31, 111, 235, 0.08); }
tr.pe-itm td:nth-child(n+4) { background: rgba(218, 54, 51, 0.08); }
/* column 3 (strike) never gets ITM tint */
tr.ce-itm td:nth-child(3), tr.pe-itm td:nth-child(3) { background: unset; }

/* ── Buy / Sell buttons in chain ───────────────────────────────────────────── */
.btn-cell { width: 1px; white-space: nowrap; text-align: center; padding: 2px 6px; }
.btn-group { display: inline-flex; gap: 2px; }

/* Buy/Sell buttons hidden until row hover */
.chain-btns .btn-group { opacity: 0; transition: opacity 0.1s; }
#chain-table tbody tr:hover .chain-btns .btn-group { opacity: 1; }

/* CE LTP right-aligned (toward strike), PE LTP left-aligned (toward strike) */
tr td:nth-child(2) { text-align: right; }
tr td:nth-child(4) { text-align: left; }

/* ── Buttons (global) ──────────────────────────────────────────────────────── */
button {
  background: #21262d;
  color: #c9d1d9;
  border: 1px solid #30363d;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  transition: background 0.15s;
}
button:hover { background: #30363d; }

button.buy-btn {
  background: transparent;
  border-color: #30363d;
  color: #6e9fd4;
  padding: 2px 8px;
  font-size: 0.78rem;
}
button.buy-btn:hover { background: #0d419d; border-color: #1f6feb; color: #79c0ff; }

button.sell-btn {
  background: transparent;
  border-color: #30363d;
  color: #a0524f;
  padding: 2px 8px;
  font-size: 0.78rem;
}
button.sell-btn:hover { background: #6e040e; border-color: #6e2b2b; color: #ffa198; }

button.subscribe-btn {
  background: transparent;
  border-color: #30363d;
  color: #6e7681;
  font-size: 0.75rem;
  padding: 2px 6px;
}
button.subscribe-btn:hover { background: #2d1f5f; border-color: #6e40c9; color: #c9a0ff; }

button.exit-btn {
  background: #3d1c1c;
  border-color: #6e2b2b;
  color: #f85149;
  font-size: 0.78rem;
  padding: 4px 10px;
}
button.exit-btn:hover { background: #6e2b2b; }

button.save-btn {
  background: #1c2a1c;
  border-color: #2b5e2b;
  color: #3fb950;
  font-size: 0.72rem;
  padding: 2px 6px;
}
button.save-btn:hover { background: #2b5e2b; }

/* Preview button */
#preview-btn {
  background: transparent;
  border-color: #30363d;
  color: #8b949e;
  padding: 6px 14px;
}
#preview-btn:hover { border-color: #8b949e; color: #c9d1d9; }

/* ── Algo Mapping Preview Modal ─────────────────────────────────────────────── */
#preview-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-modal {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  width: 540px;
  max-height: 65vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  overflow: hidden;
}

.preview-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid #21262d;
  font-size: 0.85rem;
  font-weight: 500;
  color: #c9d1d9;
  flex-shrink: 0;
}

.preview-modal-body {
  overflow-y: auto;
  flex: 1;
  padding: 0;
}

.preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.preview-table th {
  text-align: left;
  padding: 8px 14px;
  color: #6e7681;
  font-weight: 500;
  border-bottom: 1px solid #21262d;
  position: sticky;
  top: 0;
  background: #161b22;
  text-transform: capitalize;
}
.preview-table td,
.preview-table td:nth-child(2) {
  padding: 7px 14px;
  color: #c9d1d9;
  border-bottom: 1px solid #21262d;
  text-align: left;
}
.preview-table tr:last-child td { border-bottom: none; }
.preview-table tbody tr:hover td { background: #1c2128; }

/* ── Execute button — prominent, full-width at bottom of form ────────────────── */
.form-execute-wrap {
  padding-top: 10px;
  border-top: 1px solid #21262d;
  margin-top: 4px;
  flex-shrink: 0;
}

#place-order-btn {
  width: auto;
  min-width: 120px;
  background: #1a3a5c;
  border: 1px solid #1f4a7a;
  color: #8ab4d4;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 6px 0;
  border-radius: 6px;
  letter-spacing: 0.3px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
#place-order-btn:hover  { background: #1f4a7a; border-color: #2d6aad; color: #c9d1d9; }
#place-order-btn:disabled { background: #21262d; border-color: #30363d; color: #6e7681; cursor: default; }

/* Hide number spinners globally on leg price inputs */
#form-section input[type="number"]::-webkit-inner-spin-button,
#form-section input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#form-section input[type="number"] { -moz-appearance: textfield; }

/* ── Inputs & selects ──────────────────────────────────────────────────────── */
input, select {
  background: #0d1117;
  border: 1px solid #30363d;
  color: #c9d1d9;
  padding: 5px 8px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
}
input:focus, select:focus { outline: none; border-color: #1f6feb; }
input::placeholder { color: #8b949e; }

/* ── Order form top bar ────────────────────────────────────────────────────── */
.form-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
#tag-input { width: 120px; }

/* ── Algo select dropdown ────────────────────────────────────────────────────── */
.algo-select-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

#algo-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  cursor: pointer;
  min-width: 150px;
  white-space: nowrap;
}
#algo-dropdown-btn:hover { border-color: #8b949e; }
#algo-dropdown-btn.open { border-color: #58a6ff; }
#algo-dropdown-btn.has-value { color: #c9d1d9; }
#algo-dropdown-label { flex: 1; text-align: left; }
.algo-dropdown-caret { font-size: 0.70rem; color: #484f58; }

.algo-manage-btn {
  background: transparent;
  border: none;
  color: #484f58;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px 5px;
  border-radius: 3px;
  line-height: 1;
}
.algo-manage-btn:hover, .algo-manage-btn.active { color: #8b949e; }

/* Shared popup base — fixed so overflow:auto ancestors don't clip them */
#algo-dropdown,
#algo-manage-popup {
  position: fixed;
  min-width: 200px;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  z-index: 1000;
  overflow: hidden;
}
#algo-manage-popup { min-width: 240px; }

/* Select dropdown items */
.algo-dropdown-item {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #21262d;
  color: #c9d1d9;
  padding: 7px 14px;
  font-size: 0.82rem;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}
.algo-dropdown-item:last-child { border-bottom: none; }
.algo-dropdown-item:hover { background: #21262d; }
.algo-dropdown-item.active { color: #58a6ff; background: rgba(56,139,253,0.08); }
.algo-dropdown-empty {
  padding: 10px 14px;
  color: #6e7681;
  font-size: 0.80rem;
}

/* Manage popup rows */
.algo-manage-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid #21262d;
  font-size: 0.82rem;
}
.algo-manage-row:last-child { border-bottom: none; }
.algo-manage-row span { color: #c9d1d9; flex: 1; }
.algo-manage-empty {
  padding: 12px;
  color: #6e7681;
  font-size: 0.82rem;
  text-align: center;
}
.algo-remove-btn {
  background: transparent;
  border: none;
  color: #484f58;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 3px;
}
.algo-remove-btn:hover { color: #f85149; }
.algo-manage-add {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid #21262d;
}
.algo-manage-add input {
  flex: 1;
  font-size: 0.80rem;
  padding: 4px 8px;
  min-width: 0;
}
.algo-manage-add button {
  background: #1f6feb;
  border: none;
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.80rem;
  flex-shrink: 0;
}
.algo-manage-add button:hover { background: #388bfd; }

/* ── Shortlist nav dropdown ────────────────────────────────────────────────── */
.shortlist-nav-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

#shortlist-nav-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 3px 12px;
  border-radius: 6px;
  font-size: 0.80rem;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
#shortlist-nav-btn:hover,
#shortlist-nav-btn.active { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.08); }

#shortlist-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 380px;
  max-height: 60vh;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#shortlist-panel-items {
  overflow-y: auto;
  flex: 1;
}

.sl-empty {
  padding: 16px;
  color: #6e7681;
  font-size: 0.82rem;
  text-align: center;
}

.sl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #21262d;
  font-size: 0.82rem;
}
.sl-row:last-child { border-bottom: none; }

.sl-desc { flex: 1; color: #c9d1d9; }
.sl-ltp  { color: #8b949e; font-size: 0.78rem; white-space: nowrap; min-width: 52px; text-align: right; }

.sl-add-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #79c0ff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  white-space: nowrap;
}
.sl-add-btn:hover { border-color: #58a6ff; background: rgba(88,166,255,0.08); }

.sl-remove-btn {
  background: transparent;
  border: none;
  color: #484f58;
  font-size: 0.80rem;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  flex-shrink: 0;
}
.sl-remove-btn:hover { color: #f85149; }

.shortlist-panel-footer {
  padding: 8px 12px;
  border-top: 1px solid #21262d;
  display: flex;
  justify-content: center;
}
.shortlist-panel-footer button {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 4px 16px;
  border-radius: 6px;
  font-size: 0.80rem;
  cursor: pointer;
  width: 100%;
}
.shortlist-panel-footer button:hover { border-color: #58a6ff; color: #58a6ff; }

/* ── Shortlist popup (anchored to button in form-top) ──────────────────────── */
.shortlist-btn-wrap {
  position: relative;
}

#shortlist-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.80rem;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
#shortlist-btn:hover { border-color: #58a6ff; color: #58a6ff; }
#shortlist-btn.active { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.08); }

#shortlist-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 360px;
  max-height: 55vh;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  z-index: 500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shortlist-popup-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-bottom: 1px solid #21262d;
  font-size: 0.82rem;
  font-weight: 500;
  color: #c9d1d9;
  flex-shrink: 0;
}
.shortlist-popup-header span { flex: 1; }

.shortlist-add-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.shortlist-add-btn:hover { border-color: #58a6ff; color: #58a6ff; }

.sl-close-btn {
  background: transparent;
  border: none;
  color: #484f58;
  font-size: 0.85rem;
  padding: 2px 4px;
  cursor: pointer;
  line-height: 1;
}
.sl-close-btn:hover { color: #f85149; }

#shortlist-panel-items { overflow-y: auto; flex: 1; }

/* ── Leg card ──────────────────────────────────────────────────────────────── */
.leg-card {
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 6px 10px;
  margin-bottom: 4px;
  background: #161b22;
}
.leg-inline {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.leg-search-wrap { position: relative; flex: 1; min-width: 0; }
.leg-search-wrap input { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.86rem; padding: 5px 8px; }

.leg-side-btns { display: inline-flex; flex-shrink: 0; }
.leg-side-btn {
  padding: 5px 14px;
  font-size: 0.86rem;
  border-radius: 0;
  background: transparent;
  border: 1px solid #30363d;
  min-width: 52px;
}
.leg-side-btn:first-child { border-radius: 4px 0 0 4px; }
.leg-side-btn:last-child  { border-radius: 0 4px 4px 0; border-left: none; }
.leg-side-btn.buy-btn.active  { background: #0d419d; border-color: #1f6feb; color: #79c0ff; }
.leg-side-btn.sell-btn.active { background: #6e040e; border-color: #da3633; color: #ffa198; }
.leg-side-btn:not(.active) { color: #6e7681; }
.leg-prices { display: flex; gap: 12px; align-items: center; }
.leg-prices input {
  flex: 1;
  min-width: 90px;
  padding: 5px 8px;
  text-align: center;
  font-size: 0.86rem;
}
.leg-prices input::-webkit-inner-spin-button,
.leg-prices input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.leg-prices input { -moz-appearance: textfield; }

.leg-price-sl { border-color: #30363d; }
.leg-price-sl::placeholder { color: #a0524f; }
.leg-price-sl:not(:placeholder-shown) { color: #f85149; }
.leg-price-sl:focus { border-color: #f85149; }

.leg-price-target { border-color: #30363d; }
.leg-price-target::placeholder { color: #3a7d3a; }
.leg-price-target:not(:placeholder-shown) { color: #3fb950; }
.leg-price-target:focus { border-color: #3fb950; }

.leg-price-trigger { border-color: #30363d; }
.leg-price-trigger::placeholder { color: #3a6a9e; }
.leg-price-trigger:not(:placeholder-shown) { color: #58a6ff; }
.leg-price-trigger:focus { border-color: #58a6ff; }

/* ── Search dropdown ───────────────────────────────────────────────────────── */
.search-dropdown {
  position: absolute;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  z-index: 100;
  max-height: 220px;
  overflow-y: auto;
  width: 420px;
  top: calc(100% + 2px);
  left: 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.search-dropdown .sd-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 0.82rem;
  border-bottom: 1px solid #21262d;
  color: #c9d1d9;
}
.search-dropdown .sd-row:last-child { border-bottom: none; }
.search-dropdown .sd-row:hover { background: #21262d; color: #58a6ff; }
.search-dropdown .sd-row .sd-star { color: #d29922; padding: 0 4px; flex-shrink: 0; }
.search-dropdown .sd-row .sd-star:hover { color: #f1c40f; }
.search-dropdown .sd-row .sd-star-add { color: #6e7681; padding: 0 4px; flex-shrink: 0; }
.search-dropdown .sd-row .sd-star-add:hover { color: #d29922; }

/* ── Signal / Active signals sections ─────────────────────────────────────── */
#log-section, #active-section { padding: 12px 14px; overflow-x: auto; }

#form-section h2, #log-section h2, #active-section h2 {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #8b949e;
  margin-bottom: 8px;
}

/* ── Status colours ────────────────────────────────────────────────────────── */
.status-ACTIVE   { color: #3fb950; }
.status-MANUALLY_EXITED { color: #6e7681; }
.status-PUSHED   { color: #8b949e; }
.status-SL       { color: #f85149; }
.status-TGT      { color: #58a6ff; }
.status-PENDING  { color: #d29922; }
.status-DISMISSED { color: #484f58; }
.status-REJECTED  { color: #f85149; }

/* ── Signal log layout ───────────────────────────────────────────────────────── */
.signal-log-wrap {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 38px);   /* subtract tab-bar height */
  overflow: hidden;
}

.signal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 6px;
  flex-shrink: 0;
}
.signal-toolbar-left,
.signal-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.signal-sel-count {
  color: #8b949e;
  font-size: 0.78rem;
  min-width: 80px;
}
.signal-date-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.80rem;
  color: #8b949e;
}
.signal-date-label input[type=date] {
  font-size: 0.80rem;
  padding: 3px 6px;
  background: #0d1117;
  border: 1px solid #30363d;
  color: #c9d1d9;
  border-radius: 4px;
}

.signal-table-wrap {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  padding: 0 16px;
}
#signal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.80rem;
}
#signal-table th,
#signal-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #21262d;
  text-align: left;
  white-space: nowrap;
}
#signal-table th { color: #8b949e; font-weight: 500; position: sticky; top: 0; background: #0d1117; z-index: 1; }
#signal-table tbody tr:hover { background: #161b22; }
.signal-dismissed td { opacity: 0.45; }
.signal-dismissed td:last-child { opacity: 1; }  /* keep status readable */

.signal-pagination {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  padding: 8px 16px;
  border-top: 1px solid #21262d;
  background: #0d1117;
  flex-shrink: 0;
  font-size: 0.80rem;
  color: #8b949e;
}
.signal-pagination button {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 3px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.80rem;
}
.signal-pagination button:hover:not(:disabled) { border-color: #58a6ff; color: #58a6ff; }
.signal-pagination button:disabled { opacity: 0.35; cursor: default; }

/* ── Misc ──────────────────────────────────────────────────────────────────── */
.ltp-cell { min-width: 60px; text-align: center; }
.null-ltp { color: #6e7681; }
.editable-price { display: flex; align-items: center; gap: 4px; }
.editable-price input { width: 72px; }

#order-result { margin-top: 6px; color: #58a6ff; font-size: 0.78rem; }

.spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Instrument Search Modal ───────────────────────────────────────────────── */
#search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-modal {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 10px;
  width: 520px;
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  overflow: hidden;
}

.search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid #21262d;
  flex-shrink: 0;
}

.search-type-btns { display: flex; gap: 4px; }

.search-type-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  padding: 4px 14px;
  border-radius: 6px;
  font-size: 0.80rem;
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s;
}
.search-type-btn:hover { border-color: #58a6ff; color: #c9d1d9; background: transparent; }
.search-type-btn.active { border-color: #58a6ff; color: #58a6ff; background: rgba(88,166,255,0.08); }

.search-modal-close {
  background: transparent;
  border: none;
  color: #6e7681;
  font-size: 1rem;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 4px;
}
.search-modal-close:hover { background: #21262d; color: #c9d1d9; }

.search-modal-inputs {
  padding: 10px 14px;
  border-bottom: 1px solid #21262d;
  flex-shrink: 0;
}
.search-modal-inputs input { width: 100%; }

.search-modal-results {
  overflow-y: auto;
  flex: 1;
}

.modal-result-row {
  display: flex;
  align-items: center;
  padding: 7px 14px;
  cursor: pointer;
  border-bottom: 1px solid #21262d;
  gap: 8px;
  font-size: 0.82rem;
  color: #c9d1d9;
}
.modal-result-row:last-child { border-bottom: none; }
.modal-result-row:hover { background: #21262d; color: #58a6ff; }
.modal-result-row:hover .modal-result-ltp { color: #58a6ff; }

.modal-result-name { flex: 1; }
.modal-result-ltp { color: #8b949e; font-size: 0.78rem; white-space: nowrap; }
.modal-result-row .sd-star     { color: #d29922; padding: 0 2px; flex-shrink: 0; }
.modal-result-row .sd-star:hover { color: #f1c40f; }
.modal-result-row .sd-star-add { color: #484f58; padding: 0 2px; flex-shrink: 0; }
.modal-result-row .sd-star-add:hover { color: #d29922; }

.modal-no-results { padding: 16px 14px; color: #6e7681; font-size: 0.82rem; }

/* ── Risk Triggers + Signal Log tables — all cells left-aligned ────────────── */
#active-table th, #active-table td, #active-table td:nth-child(2),
#signal-table th, #signal-table td, #signal-table td:nth-child(2) { text-align: left; }

/* Override global td:nth-child(4) left-align so it applies everywhere consistently */
#active-table td:nth-child(4), #signal-table td:nth-child(4) { text-align: left; }

/* Checkbox column */
.col-check { width: 32px; padding: 5px 6px; }
.col-action { width: 36px; text-align: center !important; padding: 3px 4px; }

/* ─── ✕ remove button ──────────────────────────────────────────────────────── */
.remove-x-btn {
  background: transparent;
  border: none;
  color: #484f58;
  font-size: 0.85rem;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
  line-height: 1;
}
.remove-x-btn:hover { color: #f85149; background: rgba(248,81,73,0.08); }

/* ─── Triggers toolbar ─────────────────────────────────────────────────────── */
.triggers-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.triggers-toolbar select,
.triggers-toolbar input[type="text"] {
  font-size: 0.80rem;
  padding: 4px 8px;
  height: 28px;
}
.toolbar-select-all {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8b949e;
  font-size: 0.80rem;
  cursor: pointer;
  user-select: none;
}
.sel-count {
  font-size: 0.78rem;
  color: #8b949e;
  min-width: 72px;
}
.toolbar-btn {
  background: transparent;
  border: 1px solid #30363d;
  color: #8b949e;
  font-size: 0.78rem;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.toolbar-btn:hover { border-color: #8b949e; color: #c9d1d9; }
.toolbar-btn:disabled { opacity: 0.35; cursor: default; }
.toolbar-btn.danger-btn { border-color: #6e2b2b; color: #a0524f; }
.toolbar-btn.danger-btn:hover { border-color: #f85149; color: #f85149; background: rgba(248,81,73,0.06); }
.toolbar-btn.danger-btn:disabled { opacity: 0.35; cursor: default; }

/* ── Leg enable/disable toggle ─────────────────────────────────────────────── */
.leg-enable-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  cursor: pointer;
}
.leg-enable-wrap input[type=checkbox] {
  width: 14px;
  height: 14px;
  accent-color: #58a6ff;
  cursor: pointer;
  padding: 0;
}
.leg-disabled {
  opacity: 0.35;
  pointer-events: none;   /* prevent interaction with inner fields */
}
/* re-enable the checkbox itself so the user can re-enable the leg */
.leg-disabled .leg-enable-wrap {
  pointer-events: auto;
  opacity: 1;
}

/* ─── Fill cell ────────────────────────────────────────────────────────────── */
.fill-cell { white-space: nowrap; }
.fill-fraction { font-size: 0.82rem; font-variant-numeric: tabular-nums; margin-right: 4px; }

.recheck-btn {
  background: transparent;
  border: none;
  color: #484f58;
  font-size: 0.85rem;
  padding: 0 3px;
  cursor: pointer;
  line-height: 1;
  vertical-align: middle;
  border-radius: 3px;
  transition: color 0.12s;
}
.recheck-btn:hover { color: #58a6ff; }
.recheck-btn:disabled { opacity: 0.4; cursor: default; }
.recheck-btn.spinning { animation: spin 1s linear infinite; color: #58a6ff; }

/* Tab + underlying links */
a.tab-btn, a.underlying-btn { text-decoration: none; color: inherit; }

/* ── Scrollbars (subtle dark style) ───────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0d1117; }
::-webkit-scrollbar-thumb { background: #30363d; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #484f58; }

/* ── Firewall page ────────────────────────────────────────────────────────── */
.firewall-wrap { padding: 16px; max-width: 820px; }
.firewall-section {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 16px;
}
.firewall-section h2 {
  font-size: 0.82rem;
  color: #8b949e;
  margin-bottom: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.firewall-global-row {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}
.firewall-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.firewall-field label { font-size: 0.75rem; color: #6e7681; }
.firewall-field input { width: 120px; }
.firewall-override-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.firewall-override-header h2 { margin-bottom: 0; }
#firewall-override-table { width: 100%; border-collapse: collapse; font-size: 0.80rem; }
#firewall-override-table th {
  padding: 5px 8px;
  text-align: left;
  color: #8b949e;
  border-bottom: 1px solid #21262d;
  font-weight: 500;
  white-space: nowrap;
}
#firewall-override-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #161b22;
  white-space: nowrap;
}
#firewall-override-table tr:hover td { background: #0d1117; }
#firewall-override-table input[type="number"] {
  width: 100px;
  font-size: 0.80rem;
  padding: 3px 6px;
}
.fw-algo-name { color: #c9d1d9; font-weight: 500; }

/* ── Fill hover tooltip ───────────────────────────────────────────────────── */
.fill-hoverable { cursor: default; }
.fill-tooltip {
  display: none;
  position: fixed;
  z-index: 2000;
  background: #1c2128;
  border: 1px solid #30363d;
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
}
.fill-tooltip-table { border-collapse: collapse; }
.fill-tooltip-table th {
  padding: 5px 12px;
  color: #6e7681;
  font-weight: 500;
  border-bottom: 1px solid #30363d;
  text-align: left;
}
.fill-tooltip-table td {
  padding: 4px 12px;
  color: #c9d1d9;
  border-bottom: 1px solid #21262d;
}
.fill-tooltip-table tbody tr:last-child td { border-bottom: none; }