/* 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;
}

/* ---------- 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);
}

/* 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, #01a9ac);
  outline-offset: 1px;
  border-radius: 4px;
}

/* Lot-size hint — small muted caption beneath the input group.
   :empty hides it until JS populates a value (no awkward empty gap
   on initial render). */
.qty-lot-size-hint {
  display: block;
  font-size: 11px;
  color: #6c757d;
  margin-top: 4px;
  line-height: 1.3;
  text-align: right;
}
.qty-lot-size-hint:empty {
  display: none;
}

/* 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:#01a9ac 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, #01a9ac);
  box-shadow: 0 0 0 2px rgba(1, 169, 172, 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, #01a9ac);
  box-shadow: 0 0 0 2px rgba(1, 169, 172, 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, #01a9ac);
  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);
}

/* ---------- "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);
}