@charset "UTF-8";
/* Portfolio utility classes — replaces color/background inline styles
   in portfolio fragments so dark mode can theme them without per-element
   !important overrides (see Gotcha #14 in the plan).

   Light mode: preserves original inline colors verbatim (no visual change).
   Dark mode: maps to design tokens for readability against the dark surface. */

/* LTP labels next to price input (Trade tab + Modify modal) and the
   live-ticking Ltp column cells in Positions/Orders tables. The shared
   blue signals "this number updates from live ticks" — distinguishing it
   from static price columns (limit price, trigger price, avg price). */
.ltp-label,
.modify-ltp-label,
td.live-ltp {
  color: blue;
}

/* Lot-size hint (Trade tab) and footer quantity readout. */
#lotSizeLabel,
#footerQtyLabel {
  color: orangered;
}

/* Cost preview span in the Trade-tab footer. The `font-weight: normal`
   counters the bold inherited from .j-label. */
#costPreview {
  color: #2e7d32;
  font-weight: normal;
}

/* Update-time card-block background (Positions Net/Day, Orders, Margins).
   The pink #fff0f5 was inline; lifting to this class lets the dark-mode
   override below work without !important. */
.bg-update-time {
  background-color: #fff0f5;
}

/* ---------- Dark mode overrides ---------- */
[data-theme="dark"] .ltp-label,
[data-theme="dark"] .modify-ltp-label,
[data-theme="dark"] td.live-ltp {
  color: var(--accent-primary);
}

[data-theme="dark"] #lotSizeLabel,
[data-theme="dark"] #footerQtyLabel {
  color: var(--accent-warning);
}

[data-theme="dark"] #costPreview {
  color: var(--accent-success);
}

[data-theme="dark"] .bg-update-time {
  background-color: var(--bg-update-time);
  color: var(--text-update-time);
}
[data-theme="dark"] .bg-update-time .text-muted,
[data-theme="dark"] .bg-update-time a {
  color: var(--text-update-time);
}

/* ---------- Exchange badges (NSE / BSE / MCX / CDS) ----------
   Shared visual for the Trade-tab #placeExchangeBadge plus the Positions,
   Orders, Holdings DataTable columns and the Modify modal. Solid pill
   with strong-contrast text in both themes.

   Light mode: darker shades + white text (matches the BSE gold / MCX orange
   tradition without sacrificing AA contrast).
   Dark mode: bright tokens from theme.css + dark text (best contrast). */
.exchange-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.3px;
  line-height: 1.4;
  white-space: nowrap;
}
.exchange-badge-nse { background-color: #1d4ed8; }
.exchange-badge-bse { background-color: #7c4dab; }
.exchange-badge-mcx { background-color: #c66a00; }
.exchange-badge-unknown { background-color: #6c757d; }

[data-theme="dark"] .exchange-badge {
  color: var(--text-inverse);
}
[data-theme="dark"] .exchange-badge-nse { background-color: var(--exchange-nse); }
[data-theme="dark"] .exchange-badge-bse { background-color: var(--exchange-bse); }
[data-theme="dark"] .exchange-badge-mcx { background-color: var(--exchange-mcx); color: #fff; }
[data-theme="dark"] .exchange-badge-unknown { background-color: var(--border-strong); color: var(--text-primary); }

/* ---------- Trade-form mode tint (`.j-pro.form-mode-squareoff`) ----------
   Previously set via `$('#placeOrderForm').css('background-color', '#FFFFF0')`
   inline from portfolio-positions.js — that inline `style` had specificity
   1,0,0,0 and beat the `[data-theme="dark"] .j-pro` override, so the form
   refused to go dark. We now toggle a class instead. Light mode keeps the
   original cream warning; dark mode gets the equivalent warning-toned bg
   (matches `color-highlight` from theme-colors.css). */
.j-pro.form-mode-squareoff {
  background-color: #FFFFF0;
}
[data-theme="dark"] .j-pro.form-mode-squareoff {
  background-color: #2e2a1a;
}

/* Increase (add-to-position) mode tint — green, distinct from the square-off
   amber above so the two Trade-tab hijack modes read differently at a glance
   (increase = BUY-a-long / SELL-a-short vs square-off = the opposite).
   Light mode uses original CSS unchanged (no light token layer — see
   theme.css header), so the light value is a literal; dark routes through the
   --bg-form-mode-increase token per at-web/CLAUDE.md. */
.j-pro.form-mode-increase {
  background-color: #f0fff4;
}
[data-theme="dark"] .j-pro.form-mode-increase {
  background-color: var(--bg-form-mode-increase);
}

/* ---------- P3.1b — Single-column emphasis ----------
   Replaces saturated Bootstrap `bg-success` / `bg-info` column backgrounds
   on Margins → Available and Holdings → Symbol / NSE-Symbol / BSE-Symbol
   with token-driven text-color emphasis. Consistent with P3.1: no per-cell
   backgrounds, no chrome competing with the data. */

/* Margins → Available — bold accent-success text. The "free capital"
   number is the most-glanced cell on the page during a session, so it
   deserves a quiet but distinct accent.
   Selector specificity must beat theme-tables.css's
   `[data-theme="dark"] table.dataTable tbody td { color: ... }`
   (0,1,1,3), so the dark rule uses `table.dataTable td.col-available`
   (0,1,2,2). */
.col-available {
  color: #16a34a;
}
[data-theme="dark"] table.dataTable td.col-available {
  color: var(--accent-success);
}
/* Negative available funds (margin shortfall / debit balance) must read as
   a warning, not "free capital". The extra `.col-available--neg` class lifts
   specificity above the green rules above so it wins irrespective of source
   order. Toggled per-cell by createdCell in portfolio-margins.js. */
td.col-available.col-available--neg {
  color: #dc2626;
}
[data-theme="dark"] table.dataTable td.col-available.col-available--neg {
  color: var(--accent-danger);
}

/* Holdings → NSE-Symbol / BSE-Symbol — exchange-specific identifiers the
   user actively scans. Treat as a distinct semantic class (identifier
   blue), not P&L green/red, so it stands out without competing for the
   profit/loss palette. Same specificity boost as `.col-available` to
   outweigh the base tbody td color rule in dark mode. */
.col-symbol-alt {
  color: #2563eb;
}
[data-theme="dark"] table.dataTable td.col-symbol-alt {
  color: var(--accent-primary);
}

/* ---------- Unibox (instrument search on #placeSymbol) ----------
   Unibox ships unibox.css with hardcoded #fff suggestion-box background,
   #333 text, royalblue heading and #1C5D7D link/hover accent. Override
   the dropdown and the selected-item highlight for dark mode. */
[data-theme="dark"] #unibox-suggest-box,
[data-theme="dark"] #unibox-suggest-box-special {
  background-color: var(--bg-card);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}
[data-theme="dark"] #unibox-suggest-box a,
[data-theme="dark"] #unibox-suggest-box-special a {
  color: var(--accent-primary);
}
[data-theme="dark"] #unibox-suggest-box .unibox-suggest-heading,
[data-theme="dark"] #unibox-suggest-box-special .unibox-suggest-heading {
  color: var(--text-secondary-accent);
}
[data-theme="dark"] .unibox-selectable.active,
[data-theme="dark"] .unibox-selectable:hover {
  background-color: var(--accent-primary);
  color: var(--text-inverse);
}
[data-theme="dark"] .unibox-selectable.active a,
[data-theme="dark"] .unibox-selectable.active span,
[data-theme="dark"] .unibox-selectable.active .unibox-extra,
[data-theme="dark"] .unibox-selectable:hover a,
[data-theme="dark"] .unibox-selectable:hover span,
[data-theme="dark"] .unibox-selectable:hover .unibox-extra {
  color: var(--text-inverse);
}
[data-theme="dark"] .unibox-selectable.unibox-show-all,
[data-theme="dark"] .unibox-selectable.unibox-show-all span {
  color: var(--accent-primary);
}
/* Mobile/fullscreen unibox layer */
[data-theme="dark"] #unibox-special .input-container {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}
[data-theme="dark"] #unibox-special .unibox-special-searchbox {
  background-color: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-primary);
}

/* P4.2 — BUY/SELL trading-intent buttons (light mode).
   Re-tint the same three sites covered by the dark-mode rule in
   theme-forms.css. Light-tuned greens/reds (Material 800/900) for
   readability on light backgrounds; matches the bright form glow
   (.shadow-buy / .shadow-sell) intent. Bootstrap-default
   .btn-success/.btn-danger elsewhere (Save/Delete/Approve/etc.) are
   left untouched. */
#placeOrderButton.btn-success,
#buyHoldingsSubmit.btn-success,
.mw2-actions .btn.btn-success[data-action="BUY"] {
  background-color: #2e7d32;
  border-color: #2e7d32;
  color: #ffffff;
}
#placeOrderButton.btn-success:hover,
#placeOrderButton.btn-success:focus,
#placeOrderButton.btn-success:not(:disabled):not(.disabled):active,
#buyHoldingsSubmit.btn-success:hover,
#buyHoldingsSubmit.btn-success:focus,
#buyHoldingsSubmit.btn-success:not(:disabled):not(.disabled):active,
.mw2-actions .btn.btn-success[data-action="BUY"]:hover,
.mw2-actions .btn.btn-success[data-action="BUY"]:focus,
.mw2-actions .btn.btn-success[data-action="BUY"]:not(:disabled):not(.disabled):active {
  background-color: #1b5e20;
  border-color: #1b5e20;
  color: #ffffff;
}
#placeOrderButton.btn-danger,
#sellHoldingsSubmit.btn-danger,
.mw2-actions .btn.btn-danger[data-action="SELL"] {
  background-color: #c62828;
  border-color: #c62828;
  color: #ffffff;
}
#placeOrderButton.btn-danger:hover,
#placeOrderButton.btn-danger:focus,
#placeOrderButton.btn-danger:not(:disabled):not(.disabled):active,
#sellHoldingsSubmit.btn-danger:hover,
#sellHoldingsSubmit.btn-danger:focus,
#sellHoldingsSubmit.btn-danger:not(:disabled):not(.disabled):active,
.mw2-actions .btn.btn-danger[data-action="SELL"]:hover,
.mw2-actions .btn.btn-danger[data-action="SELL"]:focus,
.mw2-actions .btn.btn-danger[data-action="SELL"]:not(:disabled):not(.disabled):active {
  background-color: #b71c1c;
  border-color: #b71c1c;
  color: #ffffff;
}

/* P2.3 — Order-status pills. Rendered by portfolio-orders.js for the
   Status column of the Orders DataTable (OPEN / COMPLETE / REJECTED /
   CANCELLED / TRIGGER_PENDING / UNKNOWN). The pill combines two classes:
   `.status-pill` for geometry, `.color-order-status-*` (already present
   in app.css / theme-colors.css) for the per-status color.

   Note: .color-order-status-* is ALSO used as plain colored text in
   tab-summary.html ("Open: 3 + 2 = 5"). Pills are opt-in via the
   .status-pill class, so summary labels are unaffected. */
.status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.5;
  color: #ffffff !important;
  white-space: nowrap;
}
.status-pill.color-order-status-open            { background-color: #8A2BE2; }
.status-pill.color-order-status-complete        { background-color: #005500; }
.status-pill.color-order-status-cancelled       { background-color: #4B6A88; }
.status-pill.color-order-status-rejected        { background-color: #AA2E00; }
.status-pill.color-order-status-trigger-pending { background-color: #8A2BE2; }
.status-pill.color-order-status-unknown         { background-color: #554800; }

/* Dark mode pills — lighter accent backgrounds with dark text for
   readable contrast against the brighter dark-mode status tokens. */
[data-theme="dark"] .status-pill {
  color: #0e1116 !important;
}
[data-theme="dark"] .status-pill.color-order-status-open            { background-color: var(--status-open); }
[data-theme="dark"] .status-pill.color-order-status-complete        { background-color: var(--status-complete); }
[data-theme="dark"] .status-pill.color-order-status-cancelled       { background-color: var(--status-cancelled); }
[data-theme="dark"] .status-pill.color-order-status-rejected        { background-color: var(--status-rejected); }
[data-theme="dark"] .status-pill.color-order-status-trigger-pending { background-color: var(--status-trigpend); }
[data-theme="dark"] .status-pill.color-order-status-unknown         { background-color: #d4c87a; }

/* ─────────────────────────────────────────────────────────────────────
   P2.5 finish — Layout/padding inline-style strips
   ─────────────────────────────────────────────────────────────────────
   Lifts the last remaining `style="..."` attributes from portfolio
   fragments (trade.html, modify/square-off/adjust-holdings modals) so
   nothing competes with theme rules at 1,0,0,0 specificity. Color
   subset was done earlier; this block handles layout/padding/width. */

/* Trade tab — exchange badge inside the j-pro input row.
   The badge needs to fill the parent row's height and center its label,
   which requires the parent .j-input to be height:100% so the badge's
   align-self: stretch resolves to a non-zero size. */
.j-input-exchange-row {
  height: 100%;
}
#placeExchangeBadge {
  font-size: 14px;
  padding: 0 12px;
  align-self: stretch;
  display: inline-block;
  text-align: center;
  line-height: var(--j-input-height);
}

/* Trade-form qty / price inputs sit in input-group-button rows next to
   +/- or fill-LTP buttons. The legacy markup hard-sized them as a
   percentage of the input-group. Keep the same widths via classes. */
#placeQuantity { width: 35%; }
#placePrice    { width: 75%; }

/* j-pro form footer on the Trade tab — tighter padding than j-pro's
   default. Scoped to #placeOrderForm so other j-pro forms (admin,
   adjust-holdings, security, etc.) keep their default footer padding. */
#placeOrderForm .j-footer {
  padding: 10px;
}

/* Portfolio modal bodies (modify / square-off / adjust-holdings) wrap
   a .card-block inside .modal-body. Without padding overrides the user
   sees 1rem (modal-body) + 1.25rem (card-block) = 2.25rem combined
   top padding, which crowds the modal. This class zeros both. */
.modal-body-flush {
  padding: 0;
}
.modal-body-flush > .card-block {
  padding-top: 0;
  padding-bottom: 0;
}

/* Adjust-Holdings modal's exchange-help alert — compact, tight to the
   surrounding form field. */
#holdingsExchangeHelp {
  margin-bottom: 0;
  font-size: 12px;
}

/* ─────────────────────────────────────────────────────────────────────
   P4.3 — Quantity stepper polish (Trade tab)
   ─────────────────────────────────────────────────────────────────────
   The +/- buttons around #placeQuantity were btn-primary blue, which
   competed visually with the BUY/SELL submit button. The lot-size hint
   sat awkwardly above the input next to the "Quantity" label. This
   quiets the buttons, adds a focus ring on the whole input-group, and
   repositions the lot-size hint as a small caption below the input. */

.qty-stepper-btn {
  background-color: transparent;
  border: 1px solid #ced4da;
  color: #495057;
  padding: 0.25rem;
  font-size: 14px;
  line-height: 1;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.qty-stepper-btn:hover,
.qty-stepper-btn:focus {
  background-color: #f1f3f5;
  border-color: #adb5bd;
  color: #212529;
}
.qty-stepper-btn:not(:disabled):not(.disabled):active {
  background-color: #e9ecef;
  border-color: #6c757d;
  color: #212529;
}

/* Focus ring around the whole input-group when the qty input is
   focused — visible accent without disturbing the input-group layout. */
#placeQuantityGroup:focus-within {
  outline: 2px solid var(--accent-primary, #1f56e6);
  outline-offset: 1px;
  border-radius: 4px;
}

/* Lot-size hint — shares the Qty label row (see #placeQuantityLabel in
   trade.html), right-aligned like .ltp-label beside the Price label. */
.qty-lot-size-hint {
  font-size: 11px;
  color: #6c757d;
}

/* Dark mode */
[data-theme="dark"] .qty-stepper-btn {
  background-color: transparent;
  border-color: var(--border-subtle);
  color: var(--text-secondary);
}
[data-theme="dark"] .qty-stepper-btn:hover,
[data-theme="dark"] .qty-stepper-btn:focus {
  background-color: var(--bg-elevated);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="dark"] .qty-stepper-btn:not(:disabled):not(.disabled):active {
  background-color: var(--bg-card);
  border-color: var(--border-strong);
  color: var(--text-primary);
}
[data-theme="dark"] .qty-lot-size-hint {
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────────
   MW Classic Phase 1 — utility classes
   ─────────────────────────────────────────────────────────────────────*/

/* P1 — Tabular-nums on tick-driven numeric columns so digits don't shift
   width on every update, eliminating column-edge jitter during tick floods. */
.mw-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* E — %Chg colored pill for MW Classic (do not reuse on other tables). */
.pct-pill {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.pct-pill-pos {
  background-color: #d4edda;
  color: #155724;
}
.pct-pill-neg {
  background-color: #f8d7da;
  color: #721c24;
}
[data-theme="dark"] .pct-pill-pos {
  background-color: rgba(63, 185, 80, 0.18);
  color: var(--accent-pnl-pos);
}
[data-theme="dark"] .pct-pill-neg {
  background-color: rgba(248, 81, 73, 0.18);
  color: var(--accent-pnl-neg);
}

/* F — Tick-freshness dot appended to the Time cell by formatTickTime.
   6px circle; color encodes data age (fresh < 5s, recent < 30s, stale). */
.tick-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
}
.tick-dot-fresh  { background-color: var(--accent-pnl-pos, #16a34a); }
.tick-dot-recent { background-color: #d29922; }
.tick-dot-stale  { background-color: var(--text-muted, #9e9e9e); }

/* G — Ghost-icon Delete button for MW Classic. Transparent bg, muted
   icon; hover lifts with row-hover bg; focus/active tints accent-sell. */
.btn-ghost-icon {
  background: transparent;
  border: none;
  color: var(--text-muted, #9e9e9e);
  padding: 4px 6px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-ghost-icon:hover,
.btn-ghost-icon:focus {
  background-color: var(--row-hover, #f7f7f7);
  color: var(--accent-sell, #c62828);
  outline: none;
}
.btn-ghost-icon:not(:disabled):not(.disabled):active {
  background-color: var(--row-hover, #f0f0f0);
  color: var(--accent-sell, #b71c1c);
}
[data-theme="dark"] .btn-ghost-icon:hover,
[data-theme="dark"] .btn-ghost-icon:focus {
  background-color: var(--bg-elevated);
}

/* P2 — Empty-state for MW Classic when no symbols are added yet. */
.mw-empty-state {
  text-align: center;
  color: var(--text-muted, #9e9e9e);
  padding: 48px 16px;
}
.mw-empty-state .mw-empty-icon {
  opacity: 0.4;
  margin-bottom: 12px;
}

/* ─────────────────────────────────────────────────────────────────────
   MW Classic Phase 2 — utility classes
   ─────────────────────────────────────────────────────────────────────*/

/* H — spacing between symbol text and exchange badge in col-symbol */
.mw-symbol-name {
  margin-right: 6px;
}

/* J — MW Classic toolbar: search-add select + quick-filter side by side */
.mw-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mw-toolbar-search {
  flex: 1;
  min-width: 200px;
}

/* Space between the toolbar row and the DataTables buttons (Column Order) */
#marketwatchTable_wrapper .dt-buttons {
  margin-top: 8px;
}

/* Height match: lift select2 trigger to Bootstrap form-control height (38px),
   pill corners, and filled-bg to match the quick-filter style. */
.mw-toolbar-search .select2-container--default .select2-selection--single {
  height: 38px;
  border-radius: 20px;
  background-color: #f0f2f5;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.mw-toolbar-search .select2-container--default .select2-selection--single .select2-selection__rendered {
  /* Override style.css: background-color:#1f56e6 and padding:8px 30px 8px 20px */
  background-color: transparent;
  padding: 0 36px 0 16px;
  line-height: 36px;
  color: #495057;
}
.mw-toolbar-search .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: #6c757d;
}
.mw-toolbar-search .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 36px;
  top: 1px;
  right: 10px;
}
.mw-toolbar-search .select2-container--focus .select2-selection--single,
.mw-toolbar-search .select2-container--open .select2-selection--single {
  border-color: var(--accent-primary, #1f56e6);
  box-shadow: 0 0 0 2px rgba(31, 86, 230, 0.2);
  background-color: #fff;
  outline: none;
}

/* Quick-filter wrapper: holds icon, input, and shortcut badge */
.mw-filter-wrap {
  position: relative;
  width: 180px;
  flex-shrink: 0;
}
.mw-filter-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #6c757d;
  pointer-events: none;
  z-index: 1;
}
.mw-quick-filter {
  width: 100%;
  padding-left: 32px;
  padding-right: 32px;
  border-radius: 20px;
  background-color: #f0f2f5;
  border: 1px solid transparent;
  font-size: 0.875rem;
  transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.mw-quick-filter::-webkit-search-cancel-button { display: none; }
.mw-quick-filter:hover {
  border-color: #ced4da;
  background-color: #fff;
}
.mw-quick-filter:focus {
  background-color: #fff;
  border-color: var(--accent-primary, #1f56e6);
  box-shadow: 0 0 0 2px rgba(31, 86, 230, 0.2);
  outline: none;
}

/* Keyboard shortcut badge — hidden when focused or when the field has a value */
.mw-filter-shortcut {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-family: monospace;
  color: #9e9e9e;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 1px 5px;
  line-height: 1.4;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.mw-quick-filter:focus ~ .mw-filter-shortcut,
.mw-quick-filter:not(:placeholder-shown) ~ .mw-filter-shortcut {
  opacity: 0;
}

/* ── Dark mode ── */
[data-theme="dark"] .mw-toolbar-search .select2-container--default .select2-selection--single {
  background-color: var(--bg-elevated);
  border-color: transparent;
}
[data-theme="dark"] .mw-toolbar-search .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary);
}
[data-theme="dark"] .mw-toolbar-search .select2-container--default .select2-selection__placeholder {
  color: var(--text-muted);
}
[data-theme="dark"] .mw-toolbar-search .select2-container--focus .select2-selection--single,
[data-theme="dark"] .mw-toolbar-search .select2-container--open .select2-selection--single {
  border-color: var(--accent-primary);
  background-color: var(--bg-card);
}
[data-theme="dark"] .mw-filter-icon {
  color: var(--text-muted);
}
[data-theme="dark"] .mw-quick-filter {
  background-color: var(--bg-elevated);
  border-color: transparent;
  color: var(--text-primary);
}
[data-theme="dark"] .mw-quick-filter::placeholder {
  color: var(--text-muted);
}
[data-theme="dark"] .mw-quick-filter:hover {
  border-color: var(--border-subtle);
  background-color: var(--bg-elevated);
}
[data-theme="dark"] .mw-quick-filter:focus {
  background-color: var(--bg-card);
  border-color: var(--accent-primary);
}
[data-theme="dark"] .mw-filter-shortcut {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

/* ── MarketWatch sub-tabs (Classic / Modern segmented control) ──
   A compact pill toggle nested inside the MarketWatch tab. Deliberately NOT
   styled like the outer `.nav-tabs` (no underline) so it reads as a sub-control
   rather than a second row of tabs. */
.mw-subnav {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin: 0 0 14px;
  background: #f0f2f5;
  border: 1px solid transparent;
  border-radius: 10px;
}
.mw-subnav .nav-item { margin: 0; }
.mw-subnav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 18px;
  border: 0;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #6c757d;
  background: transparent;
  cursor: pointer;
  transition: color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}
.mw-subnav .nav-link i { font-size: 14px; }
.mw-subnav .nav-link:hover { color: #212529; }
.mw-subnav .nav-link.active {
  color: var(--accent-primary, #1f56e6);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
[data-theme="dark"] .mw-subnav {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}
[data-theme="dark"] .mw-subnav .nav-link { color: var(--text-secondary); }
[data-theme="dark"] .mw-subnav .nav-link:hover { color: var(--text-primary); }
[data-theme="dark"] .mw-subnav .nav-link.active {
  color: var(--accent-primary);
  background: var(--bg-card);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* I — Buy/Sell pressure split-bar */
.bs-bar {
  display: flex;
  width: 60px;
  height: 8px;
  border-radius: 2px;
  overflow: hidden;
}
.bs-bar-buy  { background-color: var(--accent-buy, #2e7d32); }
.bs-bar-sell { background-color: var(--accent-sell, #c62828); }

/* ---------- "Place Similar" row icon (Orders tab) ----------
   Feather icon-copy rendered inline in the Symbol cell. Clicking opens the
   Trade tab pre-filled with the source order. Lives in the sticky first
   column so it's always visible regardless of horizontal scroll across
   the ~34-column Orders table. */
.place-similar-icon {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  font-size: 0.9em;
  color: #1d4ed8;
  cursor: pointer;
  transition: color 0.12s ease;
}
.place-similar-icon:hover,
.place-similar-icon:focus {
  color: #4338ca;
  outline: none;
}
[data-theme="dark"] .place-similar-icon {
  color: var(--accent-primary);
}
[data-theme="dark"] .place-similar-icon:hover,
[data-theme="dark"] .place-similar-icon:focus {
  color: var(--accent-info);
}

/* ---------- Usage-based "suggested action" highlight (Req 4b) ----------
   Small accent cue on the toolbar button (Modify/Cancel/Sq-off/etc.) the user
   uses most on this tab, applied via applySuggestedActionHighlights() in
   portfolio-utils.js from window.PORTFOLIO_SUGGESTED_ACTIONS (server-computed
   from PORTFOLIO_ACTION_USED history). Deliberately NOT green/red — that would
   misread as a BUY/SELL state signal — a slim accent-colored left border + a
   small corner dot instead. Reuses the violet already paired with BSE/"open"
   status elsewhere in this theme, since it isn't otherwise used on buttons.
   Passive only: never disables, reorders, or auto-triggers the button. */
.usage-suggested-action {
  position: relative;
  box-shadow: inset 3px 0 0 0 #7c4dab;
}
.usage-suggested-action::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: #7c4dab;
  border: 1.5px solid #fff;
}
[data-theme="dark"] .usage-suggested-action {
  box-shadow: inset 3px 0 0 0 var(--exchange-bse);
}
[data-theme="dark"] .usage-suggested-action::after {
  background-color: var(--exchange-bse);
  border-color: var(--bg-card);
}

/* ---------- "Copy Log" row link (Orders tab, master accounts only) ----------
   Small teal text link rendered inline in the Symbol cell, only on orders that
   belong to a copy-trading master account. Opens the order's copy trace (how it
   was copied to child accounts) — same destination as the far-right Copy Log
   column. Deliberately a worded link, not a third icon, so it can't be mistaken
   for the blue Place Similar copy icon beside it. Lives in the sticky first
   column so it's reachable without scrolling the wide Orders table. */
.copy-log-link {
  margin-left: 8px;
  font-size: 0.82em;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
  color: #0f766e;
  text-decoration: none;
  cursor: pointer;
}
.copy-log-link:hover,
.copy-log-link:focus {
  color: #115e59;
  text-decoration: underline;
  outline: none;
}
[data-theme="dark"] .copy-log-link {
  color: var(--accent-success, #2dd4bf);
}
[data-theme="dark"] .copy-log-link:hover,
[data-theme="dark"] .copy-log-link:focus {
  color: var(--accent-info);
}

/* ---------- AutoTrader bracket & cover orders (AT_BO / AT_CO) — Trade tab ----------
   Plan .claude/plans/autotrader-bo-co.md §9.2. Three small pieces of chrome:
   the labelled variety rows, the per-variety note strip, and the resolved-level
   preview under each points field.

   All neutral. Deliberately NOT warning-coloured: none of these states is an
   error — the broker pair carries a genuine caveat, the AutoTrader pair carries
   reassurance plus one caveat. Colouring either as a warning trains people to
   ignore the strip, and the strip is what does the teaching. */

/* The "Broker" / "AutoTrader" label that names each engine group. The two groups sit on ONE
   line, so the label is sized to its own text — it used to be pinned to 104px to keep two
   stacked rows aligned under one another, and that gutter now buys nothing but indent. */
.variety-row {
  align-items: center;
}
.variety-row-label {
  display: inline-block;
  flex: 0 0 auto;
  padding-right: 10px;
  /* It must still not wrap: "AUTOTRA / DER" would set its segments below the Broker group's
     and break the single line this layout exists to be. */
  white-space: nowrap;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c757d;
  cursor: help;
}
/* Label + segments for the AutoTrader engine, kept in one element so initBracketUi() can show
   or hide the whole group with a single class — a bare label left behind would name nothing. */
.variety-at-group {
  display: inline-flex;
  align-items: center;
  margin-left: 22px;
}
[data-theme="dark"] .variety-row-label {
  color: var(--text-muted);
}

/* One-line explanation of which engine runs the selected variety.
   0.74rem matches .bracket-preview in the same panel (D34) — the strip teaches, it does
   not announce, and at this size the BOLD is doing more of that work rather than less. */
.variety-note {
  position: relative;
  padding: 6px 26px 6px 10px;
  border-radius: 4px;
  font-size: 0.74rem;
  line-height: 1.5;
  background-color: #f1f3f5;
  border-left: 3px solid #adb5bd;
  color: #495057;
}
/* Closing it is a real preference, saved against the user — so the control is small and
   quiet rather than inviting. Nobody should close this by accident. */
.variety-note-close {
  position: absolute;
  top: 2px;
  right: 4px;
  padding: 0 4px;
  border: none;
  background: transparent;
  color: #adb5bd;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
}
.variety-note-close:hover { color: #495057; }
[data-theme="dark"] .variety-note-close { color: var(--text-muted); }
[data-theme="dark"] .variety-note-close:hover { color: var(--text-primary); }
.variety-note strong {
  font-weight: 600;
  color: #212529;
}
[data-theme="dark"] .variety-note {
  background-color: var(--bg-elevated);
  border-left-color: var(--border-strong);
  color: var(--text-secondary);
}
[data-theme="dark"] .variety-note strong {
  color: var(--text-primary);
}

/* Resolved-level preview under each points field: "Exit at 1,254.50". A points
   distance is uncheckable; an absolute price can be checked against a chart. */
.bracket-preview {
  display: block;
  margin-top: 3px;
  font-size: 0.74rem;
  line-height: 1.3;
  color: #6c757d;
}
[data-theme="dark"] .bracket-preview {
  color: var(--text-muted);
}

/* Where the stop-loss lives, on the AutoTrader varieties. Laid out like the variety
   rows above it — a gutter label, then the choices — because it is the same kind of
   question ("which engine runs this?") and reading as a sibling of that row is what
   stops it looking like just another numeric field. */
.exit-mode {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding-left: 15px;
}
.exit-mode-label {
  display: inline-block;
  width: 104px;
  flex: 0 0 104px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #6c757d;
}
[data-theme="dark"] .exit-mode-label {
  color: var(--text-muted);
}
/* A choice that is currently impossible is shown, not hidden: the reason it is
   unavailable is the point (a broker-held stop cannot trail), and a control that
   vanishes teaches nobody anything. */
.exit-mode .radio.radio-inline > label.exit-mode-blocked {
  opacity: 0.45;
  cursor: not-allowed;
}

.bracket-squareoff {
  padding-top: 6px;
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: #495057;
}
[data-theme="dark"] .bracket-squareoff {
  color: var(--text-primary);
}

/* Consent states A + B. Replaces the level fields, so it occupies their space
   rather than adding a banner above them. */
.bracket-consent {
  padding: 12px 14px;
  border-radius: 4px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}
.bracket-consent-title {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: #212529;
}
.bracket-consent-body {
  font-size: 0.82rem;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #495057;
}
[data-theme="dark"] .bracket-consent {
  background-color: var(--bg-elevated);
  border-color: var(--border-subtle);
}
[data-theme="dark"] .bracket-consent-title {
  color: var(--text-primary);
}
[data-theme="dark"] .bracket-consent-body {
  color: var(--text-secondary);
}

/* Consent state C — muted, because it matters on the day it is questioned and
   never again, but it is a legal agreement so it has to stay findable. */
.bracket-agreed {
  display: block;
  font-size: 0.74rem;
  color: #868e96;
}
.bracket-agreed a {
  color: #6c757d;
  text-decoration: underline;
}
[data-theme="dark"] .bracket-agreed {
  color: var(--text-muted);
}
[data-theme="dark"] .bracket-agreed a {
  color: var(--text-secondary);
}

/* ---------- AutoTrader bracket pill + child row (Positions / Orders) ----------
   Slice 8b, plan §9.2. The pill lives INSIDE the sticky Symbol cell — never a
   new column, which would scroll out of view and corrupt persisted DataTable
   state (§22 #7). Same slot as Place Similar.

   Two states and no legend, because the child row spells both out in words:
     solid = armed and watching
     muted = entry not filled yet, so nothing is protected. */
.bracket-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.bracket-pill-armed {
  background-color: #0f766e;
  color: #ffffff;
  border: 1px solid #0f766e;
}
.bracket-pill-pending {
  background-color: transparent;
  color: #6c757d;
  border: 1px dashed #adb5bd;
}
.bracket-pill:hover {
  filter: brightness(1.08);
}
[data-theme="dark"] .bracket-pill-armed {
  background-color: var(--accent-success);
  border-color: var(--accent-success);
  color: #0e1116;
}
[data-theme="dark"] .bracket-pill-pending {
  color: var(--text-muted);
  border-color: var(--border-strong);
}

/* The disclosure caret — the only mark on the pill that says it opens something. It flips when the
   child row is showing, so the pill also reports the state it is in rather than just inviting a
   click. */
.bracket-pill-caret {
  display: inline-block;
  margin-left: 4px;
  font-size: 0.6rem;
  opacity: 0.8;
  transition: transform 0.12s ease-in-out;
}
tr.bracket-expanded .bracket-pill-caret {
  transform: rotate(180deg);
}
@media (prefers-reduced-motion: reduce) {
  .bracket-pill-caret { transition: none; }
}

/* The stop-loss, inline beside the pill. Deliberately NEUTRAL and not amber: this is a reference
   number, not a warning, and the row already spends its colour budget on P&L. The pill carries the
   "you are protected" signal; this just says where. */
.bracket-sl-inline {
  display: inline-block;
  margin-left: 5px;
  font-size: 0.68rem;
  font-weight: 600;
  color: #495057;
  white-space: nowrap;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .bracket-sl-inline {
  color: var(--text-muted);
}

/* The expandable child row. DataTables owns the <tr>; this styles its contents. */
tr.bracket-child-row > td {
  padding: 0 !important;
}
.bracket-child {
  /* Pinned to the left edge as the table scrolls sideways. The child <td> spans a 32-column table
     roughly 2,500px wide, so without this the levels and the three buttons slide out of view the
     moment someone scrolls right to read another column — and they would have opened the child row
     from the pill in the STICKY first cell, which never moves. Same reasoning, applied to the panel
     the pill opens. */
  position: sticky;
  left: 0;
  width: max-content;
  min-width: 340px;
  max-width: 640px;
  padding: 10px 14px;
  border-left: 3px solid #0f766e;
  background-color: #f8f9fa;
}
.bracket-child-line {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 1px 0;
  font-size: 0.8rem;
}
.bracket-child-label {
  flex: 0 0 92px;
  font-weight: 600;
  color: #6c757d;
}
.bracket-child-value {
  color: #212529;
  font-variant-numeric: tabular-nums;
}
.bracket-child-note {
  color: #6c757d;
  font-style: italic;
}
/* Used for exactly one thing: a stop-loss the trader asked to be held at their broker
   that is now being watched by us instead. The position is still protected, so this is
   deliberately an attention colour rather than a danger one — but it must not read as
   ordinary text, because it is the line that corrects a belief. */
.bracket-child-value.bracket-child-warn {
  color: #b26a00;
  font-weight: 600;
}
[data-theme="dark"] .bracket-child-value.bracket-child-warn {
  color: var(--accent-warning, #e0a030);
}
.bracket-child-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
[data-theme="dark"] .bracket-child {
  background-color: var(--bg-elevated);
  border-left-color: var(--accent-success);
}
[data-theme="dark"] .bracket-child-label {
  color: var(--text-muted);
}
[data-theme="dark"] .bracket-child-value {
  color: var(--text-primary);
}
[data-theme="dark"] .bracket-child-note {
  color: var(--text-secondary);
}

/* ---------- Closed bracket pill + panel (design .claude/plans/bracket-outcome-on-closed-positions.md)
   The live pill claims "you are protected right now"; this one claims "this is what happened" —
   a different claim, so it must never share the live pill's colours. Flat neutral grey throughout,
   never the armed green or the pending dashed-muted look, on purpose: at a glance this must read
   as "history", not as a quieter version of "protected". This is the single most important CSS
   decision in the feature — see the design note in portfolio-brackets.js. */
.bracket-pill-closed {
  background-color: #e9ecef;
  color: #495057;
  border: 1px solid #ced4da;
}
[data-theme="dark"] .bracket-pill-closed {
  background-color: var(--bg-elevated);
  color: var(--text-secondary);
  border-color: var(--border-strong);
}

/* The outcome, inline beside the pill — "Target hit — exited at 1227.70" / "Squared off at 15:00".
   Italic, not the SL-inline's plain tabular-nums style: this is a sentence about the past, not a
   live reference number, and should not visually compete with the live inline stop-loss it sits
   next to on other rows. */
.bracket-closed-inline {
  display: inline-block;
  margin-left: 5px;
  font-size: 0.68rem;
  font-style: italic;
  color: #6c757d;
  white-space: nowrap;
  vertical-align: middle;
}
[data-theme="dark"] .bracket-closed-inline {
  color: var(--text-muted);
}

/* The closed panel reuses .bracket-child's layout but overrides its accent border to the same
   neutral grey as the pill — the live green border must never leak into a closed panel, even
   though the two share every other rule (padding, sticky positioning, line layout). */
.bracket-child-closed {
  border-left-color: #adb5bd;
}
[data-theme="dark"] .bracket-child-closed {
  border-left-color: var(--border-strong);
}

/* Modify / Remove dialog bodies (inside SweetAlert). */
.bracket-form {
  text-align: left;
}
.bracket-form-help {
  font-size: 0.85rem;
  line-height: 1.5;
  margin-bottom: 12px;
  color: #495057;
}
.bracket-form-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.bracket-form-row label {
  flex: 0 0 120px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
}
[data-theme="dark"] .bracket-form-help {
  color: var(--text-secondary);
}

/* The unit under each bracket level field. These three inputs take POINTS — a distance from your
   fill — not a price, and the form said nothing either way until now. That silence is exactly what
   made the question "are these prices?" reasonable to ask: the fields sit beside Price and Trigger
   Price, which ARE prices, and the same numbers are shown as prices once the bracket is live.
   Applies to the broker's own BO as well, where the units are identical. */
.bracket-unit {
  display: block;
  margin-top: 3px;
  font-size: 0.7rem;
  line-height: 1.3;
  color: #868e96;
}
[data-theme="dark"] .bracket-unit {
  color: var(--text-muted);
}

/* The live distance-from-entry beside each price box in the Modify dialog. Modify speaks in
   PRICES while placement speaks in POINTS; rather than hide that, the dialog shows both, so the
   two vocabularies are reconciled on screen instead of in the trader's head. */
.bracket-form-hint {
  flex: 0 0 auto;
  min-width: 120px;
  font-size: 0.74rem;
  color: #868e96;
  white-space: nowrap;
}
[data-theme="dark"] .bracket-form-hint {
  color: var(--text-muted);
}