/*
 * sd-selection-summary.css — "what exactly did I select?" list inside a modal.
 *
 * Round 2 of the movable-modals work (2026-08-15). Round 1 let the trader drag
 * the pop-up off the rows it was covering; this is the part that means they no
 * longer have to look at those rows at all. Adjust Holdings, for example, used
 * to say only "3 holdings selected for increase." — no symbol, no quantity, no
 * average price, no LTP — so the row behind genuinely WAS the only place that
 * detail existed. `body.modal-open` sets `overflow:hidden`, so the page behind
 * cannot even be scrolled while a modal is open; moving the modal lets you SEE
 * the rows, not use them. Putting the detail in here is the real fix.
 *
 * Deliberately generic and modal-agnostic: the markup convention below is
 * shared by the Adjust-Holdings, Modify-Order and GTT-Modify summaries, so a
 * fourth caller writes rows, not styles. Every value is theme-tokenised, so
 * dark mode needs no per-modal overrides.
 *
 *   <div class="sd-sel">
 *     <div class="sd-sel__head">3 holdings selected for square-off</div>
 *     <div class="sd-sel__list">
 *       <div class="sd-sel__row">
 *         <span class="sd-sel__side sd-sel__side--sell">SELL</span>
 *         <span class="sd-sel__sym">RELIANCE</span>
 *         <span class="sd-sel__fact"><i>Qty</i><b>120</b></span>
 *         <span class="sd-sel__acc">myzerodha</span>
 *       </div>
 *     </div>
 *   </div>
 */

.sd-sel {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #f7f9fc;
  overflow: hidden;
}

/* ---- Count line ---------------------------------------------------- */
.sd-sel__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-weight: 700;
  color: #1f2937;
  background: rgba(79, 70, 229, 0.07);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  line-height: 1.35;
}
.sd-sel__head::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f46e5;
  flex-shrink: 0;
}

/* A qualifier the trader must read to trust the count above it — e.g. the
   Positions tab is only loaded for one of the accounts being squared off.
   Amber rather than grey: it changes what the number means. */
.sd-sel__note {
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #b45309;
  background: rgba(180, 83, 9, 0.08);
  border-bottom: 1px solid rgba(180, 83, 9, 0.18);
}
.sd-sel__note:empty { display: none; }

/* ---- The rows ------------------------------------------------------ */
/* ~6 rows then scroll. A bulk modify can carry dozens of orders and the modal
   must not grow past the viewport — sd-modal-drag.js can only pin an oversized
   card's top edge, it cannot shrink it. */
.sd-sel__list {
  max-height: 186px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Stacked rows are ~1.5x the height of a single-line one, so the same cap would
   slice the fourth row through its numbers. Sized to show four in full — the
   common selection size — and to cut the fifth cleanly enough to read as
   "there is more below" rather than as a rendering fault.
   Set on the list in the fragment, NOT derived with :has() — an older engine
   would silently ignore that and land back on the height this fixes. */
.sd-sel__list--stacked { max-height: 232px; }

.sd-sel__row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.sd-sel__row:last-child { border-bottom: 0; }

/* Two-line variant, for summaries carrying enough facts that one line cannot
   hold them at any sane modal width. Measured 2026-08-15: a Modify row for
   BANKNIFTY_25-JUN-2026_PE_52000 on a stop order needs 1077px of list width —
   a ~1120px modal. So the wrap is DESIGNED rather than left to chance: identity
   (side, symbol, account) on top, the numbers on their own line under it.
   Ragged mid-row wrapping is what made it look cramped, not the width alone. */
.sd-sel__row--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding-top: 7px;
  padding-bottom: 7px;
}
.sd-sel__line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  min-width: 0;
}
/* The numbers line: a little more air between facts than between words, so the
   eye separates "QTY 100" from "TYPE LIMIT" without a divider. */
.sd-sel__line--facts { column-gap: 14px; }

/* BUY / SELL / LONG / SHORT tag. Colour carries the direction, so it is also
   spelled out — never colour alone. */
.sd-sel__side {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.sd-sel__side--buy {
  color: #1b5e20;
  background: rgba(46, 125, 50, 0.14);
}
.sd-sel__side--sell {
  color: #b71c1c;
  background: rgba(198, 40, 40, 0.14);
}
.sd-sel__side--neutral {
  color: #374151;
  background: rgba(0, 0, 0, 0.07);
}

.sd-sel__sym {
  font-weight: 700;
  color: #1f2937;
  word-break: break-all;
}
/* The instrument cannot be traded under the current choice — e.g. Exchange is
   pinned to NSE and this holding only exists on BSE. The broker would reject
   it, so say so here rather than in the result modal afterwards. */
.sd-sel__sym--missing {
  color: #b71c1c;
  font-style: italic;
  font-weight: 600;
}

/* One `label value` pair. Tabular figures so prices line up down the list. */
.sd-sel__fact {
  color: #1f2937;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sd-sel__fact > i {
  font-style: normal;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #6b7280;
  margin-right: 3px;
}
.sd-sel__fact > b { font-weight: 600; }
/* Parenthetical inside a fact — T1 quantity, filled quantity, % from LTP. */
.sd-sel__fact > em {
  font-style: normal;
  color: #6b7280;
  margin-left: 3px;
}

/* Values that move on every tick. Marked so the render pass can rewrite just
   these nodes instead of rebuilding the list (which would kill scroll position
   and text selection). */
.sd-sel__fact--live > b { font-weight: 700; }

.sd-sel__acc {
  margin-left: auto;
  flex-shrink: 0;
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 600;
  color: #4b5563;
  background: rgba(0, 0, 0, 0.06);
}

/* A counted quantity stated in words — "2 Open Positions" — rather than a bare
   label+number pair. Right-aligned so the counts line up down a list of
   accounts instead of ragging off each name's length. */
.sd-sel__count {
  margin-left: auto;
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #3730a3;
  background: rgba(79, 70, 229, 0.10);
  font-variant-numeric: tabular-nums;
}

/* "and 12 more" — a capped list must SAY it is capped. */
.sd-sel__more {
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  background: rgba(0, 0, 0, 0.03);
}

.sd-sel__empty {
  padding: 10px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

/* ---- Dark theme ---------------------------------------------------- */
[data-theme="dark"] .sd-sel {
  background: var(--bg-elevated);
  border-color: var(--border-subtle);
}
[data-theme="dark"] .sd-sel__head {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
  border-bottom-color: var(--border-subtle);
}
[data-theme="dark"] .sd-sel__head::before { background: var(--accent-primary); }
[data-theme="dark"] .sd-sel__note {
  color: var(--accent-warning);
  background: color-mix(in srgb, var(--accent-warning) 14%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent-warning) 28%, transparent);
}
[data-theme="dark"] .sd-sel__row { border-bottom-color: var(--border-subtle); }
[data-theme="dark"] .sd-sel__side--buy {
  color: var(--accent-pnl-pos);
  background: color-mix(in srgb, var(--accent-pnl-pos) 16%, transparent);
}
[data-theme="dark"] .sd-sel__side--sell {
  color: var(--accent-pnl-neg);
  background: color-mix(in srgb, var(--accent-pnl-neg) 16%, transparent);
}
[data-theme="dark"] .sd-sel__side--neutral {
  color: var(--text-secondary);
  background: var(--bg-base);
}
[data-theme="dark"] .sd-sel__sym { color: var(--text-primary); }
[data-theme="dark"] .sd-sel__sym--missing { color: var(--accent-pnl-neg); }
[data-theme="dark"] .sd-sel__fact { color: var(--text-primary); }
[data-theme="dark"] .sd-sel__fact > i { color: var(--text-muted); }
[data-theme="dark"] .sd-sel__fact > em { color: var(--text-muted); }
[data-theme="dark"] .sd-sel__acc {
  color: var(--text-secondary);
  background: var(--bg-base);
}
[data-theme="dark"] .sd-sel__count {
  color: var(--accent-primary);
  background: color-mix(in srgb, var(--accent-primary) 16%, transparent);
}
[data-theme="dark"] .sd-sel__more {
  color: var(--text-muted);
  background: var(--bg-base);
}
[data-theme="dark"] .sd-sel__empty { color: var(--text-muted); }

/* ---- Narrow viewports ---------------------------------------------- */
/* Below the drag cut-off the modal is near full-width and the account chip has
   nowhere to sit on the same line — let it wrap under instead of squeezing the
   facts into an unreadable column. */
@media (max-width: 991.98px) {
  .sd-sel__acc { margin-left: 0; }
  .sd-sel__list { max-height: 150px; }
}