/* 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 — secondary reference codes the
   user looks up occasionally, not the primary identifier (Symbol). Mute
   them so Symbol reads as primary by default contrast. Same specificity
   boost as `.col-available` to outweigh the base tbody td color rule. */
.col-symbol-alt {
  color: #6c757d;
}
[data-theme="dark"] table.dataTable td.col-symbol-alt {
  color: var(--text-secondary);
}

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

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