@charset "UTF-8";
/* ──────────────────────────────────────────────────────────────────
   modify-redesign.css
   Layered on top of:
     - Bootstrap 4 (light default — visually close to original)
     - theme.css (dark mode tokens under [data-theme="dark"])

   No hardcoded colors except inside [data-theme="dark"] blocks where
   the tokens already cover it; otherwise everything routes through
   var(--token) with a Bootstrap-ish fallback.
   ────────────────────────────────────────────────────────────────── */

/* ---- Modal shell ------------------------------------------------- */
/* 680, not the Bootstrap default: this modal now carries a per-order selection
   summary (§14.0), and at 560 even a plain equity row could not hold its own
   numbers on one line. 680 fits them comfortably; the two-line row shape in
   sd-selection-summary.css handles the long F&O symbols that no sane modal
   width could fit. Still narrow enough to sit on a 1366px laptop screen. */
#modifyOrderScreen .modal-dialog {
  max-width: 680px;
}
#modifyOrderScreen .modal-content {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
#modifyOrderScreen .modal-header {
  padding: 12px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
  gap: 8px 14px;
}
#modifyOrderScreen .modal-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0;
}
#modifyOrderScreen .modal-body {
  padding: 18px 20px 16px;
}

/* ---- Inline header info (LTP · symbol · exchange) ---------------- */
/* flex: 1 1 0% — take only what is left after the title and the close button,
   never the space the close button needs.
   Sized from content, this row could grow until it JUST fit, leaving under 46px
   on the line, and the header (flex-wrap: wrap) would drop the ✕ onto a second
   line where it sat under the title on the LEFT. That looked broken, and it also
   ate the drag area: sd-modal-drag.js refuses to start a drag from a button, so
   the modal silently stopped being movable from that spot. It surfaced when the
   modal widened to 680px, but it was only ever a near-miss at 560 too — the fix
   is to stop the row competing for that space at any width, not to pick a width
   where it happens not to. Text still wraps inside this box as before. */
.modify-header-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 0%;
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 0;
}
.modify-header-info__label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b7280;
  text-transform: uppercase;
  flex-shrink: 0;
}
.modify-header-info__price {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}
.modify-header-info__multi {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
  line-height: 1.4;
}
#modifyLivePrice {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
}
#modifyExchangeBadge {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: rgba(99, 102, 241, 0.12);
  color: #4f46e5;
}
#modifyExchangeBadge[data-exchange="BSE"] {
  background: rgba(167, 139, 250, 0.15);
  color: #7c3aed;
}
#modifyExchangeBadge[data-exchange="MCX"] {
  background: rgba(251, 133, 0, 0.15);
  color: #c2410c;
}
#modifySymbol {
  /* Sans, not mono: the symbol carries the strike and expiry year the user is
     confirming before they modify an order (…_2026_CE_58300). A coding font
     marks those zeros — dotted in Cascadia, slashed in Consolas — and the mark
     reads as an 8. See table-skin.css. */
  font-family: var(--tbl-f-sans, Verdana, Geneva, "DejaVu Sans", sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
}

/* ---- Input grid (2×2) -------------------------------------------- */
.modify-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  margin-bottom: 16px;
}
.modify-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.modify-field__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
  margin: 0;
}
.modify-field .form-control {
  height: 38px;
  font-size: 14px;
  border-radius: 6px;
  padding: 6px 10px;
  font-variant-numeric: tabular-nums;
}
.modify-field .form-control:focus {
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.18);
}
.modify-field .form-control:disabled {
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Disclosed-qty row spans both columns of the 2x2 input grid. */
.modify-field--full {
  grid-column: 1 / -1;
}
.modify-field__label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.modify-field__suffix {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  letter-spacing: 0.04em;
}
.modify-row__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: transparent;
  color: #9ca3af;
  border: none;
  padding: 0;
  border-radius: 50%;
}
.modify-row__help:hover,
.modify-row__help:focus {
  color: #4f46e5;
  outline: none;
}
.modify-row__help svg {
  width: 14px;
  height: 14px;
}
.modify-disclosed-hint {
  font-size: 11px;
  color: #6b7280;
  line-height: 1.4;
  min-height: 14px;
}
.modify-disclosed-hint.is-warn {
  color: #b45309;
}

/* The NO_CHANGE default: muted + italic so it doesn't read as a real order type. */
#modifyOrderType.is-default {
  color: #6b7280;
  font-style: italic;
}
/* Fallback for browsers that don't support :has — JS sets .is-default; this also catches the initial render. */
#modifyOrderType option[value=""] {
  color: #6b7280;
  font-style: italic;
}
#modifyOrderType option:not([value=""]) {
  color: #0f172a;
  font-style: normal;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 13px;
  letter-spacing: 0.04em;
}

/* ---- Selection summary ------------------------------------------- */
/* The box itself is the shared .sd-sel component (sd-selection-summary.css);
   only its spacing inside this modal belongs here. */
.modify-selection {
  margin-bottom: 12px;
}

/* ---- Info panel: hint + shortcut --------------------------------- */
.modify-info-panel {
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  overflow: hidden;
}
.modify-info-panel__body {
  padding: 10px 12px;
  background: #fbfcfd;
}
.modify-info-panel__hint {
  font-size: 13px;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
}
.modify-kbd {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-bottom-width: 2px;
  background: #ffffff;
  color: #374151;
  border-radius: 3px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}
/* When a kbd sits inside Cancel / Modify, tighten the badge so it reads
   as part of the button without dominating the label. */
.modify-kbd--inline {
  font-size: 9.5px;
  padding: 0 5px;
  border-bottom-width: 1px;
  letter-spacing: 0.06em;
  line-height: 1.45;
}

/* ---- Footer ------------------------------------------------------ */
#modifyOrderScreen .modal-footer {
  padding: 12px 16px;
  background: #f7f9fc;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
#modifyOrderScreen .modify-btn-cancel {
  color: #4b5563;
  background: transparent;
  border: 1px solid transparent;
  padding: 7px 16px;
  font-weight: 500;
  font-size: 14px;
  border-radius: 6px;
  text-decoration: none;
}
#modifyOrderScreen .modify-btn-cancel:hover {
  color: #111827;
  background: rgba(0, 0, 0, 0.04);
}
#modifyOrderScreen .modify-btn-submit {
  padding: 7px 22px;
  font-weight: 600;
  font-size: 14px;
  border-radius: 6px;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #d29922;
  border-color: #d29922;
  color: #ffffff;
}
#modifyOrderScreen .modify-btn-submit:hover {
  background-color: #b78420;
  border-color: #b78420;
}
#modifyOrderScreen .modify-btn-submit:focus {
  box-shadow: 0 0 0 3px rgba(210, 153, 34, 0.3);
}
/* Cancel button: align its kbd badge nicely with the label. */
#modifyOrderScreen .modify-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* On the warning-toned Modify button, give the white kbd a touch of contrast
   so it reads cleanly against the gold background. */
#modifyOrderScreen .modify-btn-submit .modify-kbd--inline {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.2);
  color: #5a4310;
}

/* ──────────────────────────────────────────────────────────────────
   DARK MODE OVERRIDES — all colors via tokens from theme.css
   ────────────────────────────────────────────────────────────────── */
[data-theme="dark"] #modifyOrderScreen .modal-content {
  background: var(--bg-card);
  border-color: var(--border-subtle);
  box-shadow: var(--card-shadow);
}
[data-theme="dark"] #modifyOrderScreen .modal-header {
  background: var(--bg-elevated);
  border-bottom-color: var(--border-subtle);
}
[data-theme="dark"] #modifyOrderScreen .modal-title {
  color: var(--text-primary);
}
[data-theme="dark"] #modifyOrderScreen .close,
[data-theme="dark"] #modifyOrderScreen .close:hover {
  color: var(--text-secondary);
  text-shadow: none;
  opacity: 0.85;
}

[data-theme="dark"] .modify-header-info__label {
  color: var(--text-muted);
}
[data-theme="dark"] #modifyLivePrice {
  color: var(--text-primary);
}
[data-theme="dark"] .modify-header-info__multi {
  color: var(--text-secondary);
}
[data-theme="dark"] #modifySymbol {
  color: var(--text-muted);
}
[data-theme="dark"] #modifyExchangeBadge {
  background: color-mix(in srgb, var(--exchange-nse) 22%, transparent);
  color: var(--exchange-nse);
}
[data-theme="dark"] #modifyExchangeBadge[data-exchange="BSE"] {
  background: color-mix(in srgb, var(--exchange-bse) 22%, transparent);
  color: var(--exchange-bse);
}
[data-theme="dark"] #modifyExchangeBadge[data-exchange="MCX"] {
  background: color-mix(in srgb, var(--exchange-mcx) 22%, transparent);
  color: var(--exchange-mcx);
}

[data-theme="dark"] .modify-field__label {
  color: var(--text-muted);
}
[data-theme="dark"] .modify-field__suffix { color: var(--text-muted); }
[data-theme="dark"] .modify-row__help { color: var(--text-muted); }
[data-theme="dark"] .modify-row__help:hover,
[data-theme="dark"] .modify-row__help:focus { color: var(--accent-primary); }
[data-theme="dark"] .modify-disclosed-hint { color: var(--text-muted); }
[data-theme="dark"] .modify-disclosed-hint.is-warn { color: var(--accent-warning); }
[data-theme="dark"] .modify-field .form-control {
  background: var(--bg-base);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}
[data-theme="dark"] .modify-field .form-control::placeholder {
  color: var(--text-muted);
}
[data-theme="dark"] .modify-field .form-control:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 25%, transparent);
  background: var(--bg-base);
  color: var(--text-primary);
}

[data-theme="dark"] #modifyOrderType.is-default,
[data-theme="dark"] #modifyOrderType option[value=""] {
  color: var(--text-muted);
}
[data-theme="dark"] #modifyOrderType option:not([value=""]) {
  color: var(--text-primary);
  background: var(--bg-elevated);
}

[data-theme="dark"] .modify-info-panel {
  border-color: var(--border-subtle);
}
[data-theme="dark"] .modify-info-panel__body {
  background: var(--bg-elevated);
}
[data-theme="dark"] .modify-info-panel__hint {
  color: var(--text-primary);
}
[data-theme="dark"] .modify-kbd {
  background: var(--bg-base);
  border-color: var(--border-strong);
  color: var(--text-secondary);
}
[data-theme="dark"] #modifyOrderScreen .modify-btn-submit .modify-kbd--inline {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(0, 0, 0, 0.25);
  color: #4a360c;
}

[data-theme="dark"] #modifyOrderScreen .modal-footer {
  background: var(--bg-elevated);
  border-top-color: var(--border-subtle);
}
[data-theme="dark"] #modifyOrderScreen .modify-btn-cancel {
  color: var(--text-secondary);
}
[data-theme="dark"] #modifyOrderScreen .modify-btn-cancel:hover {
  color: var(--text-primary);
  background: var(--row-hover);
}
[data-theme="dark"] #modifyOrderScreen .modify-btn-submit {
  background-color: var(--accent-warning);
  border-color: var(--accent-warning);
  color: var(--text-inverse);
}
[data-theme="dark"] #modifyOrderScreen .modify-btn-submit:hover {
  filter: brightness(1.08);
}

/* ──────────────────────────────────────────────────────────────────
   RESPONSIVE — phones (<576px) and very small phones (<380px)
   Bootstrap 4 already makes .modal-dialog edge-to-edge under 576px;
   these rules tighten the internal density so nothing has to scroll
   horizontally on a 360px viewport.
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  #modifyOrderScreen .modal-dialog {
    max-width: none;
    margin: 8px;
  }
  #modifyOrderScreen .modal-header {
    padding: 12px 14px;
  }
  #modifyOrderScreen .modal-title {
    font-size: 15px;
  }
  #modifyOrderScreen .modal-body {
    padding: 14px 14px 12px;
  }

  /* Header info wraps under the title on narrow viewports so neither row crams. */
  .modify-header-info {
    flex-basis: 100%;
    margin-left: 0;
    justify-content: flex-start;
    gap: 6px 10px;
  }
  #modifyLivePrice {
    font-size: 15px;
  }

  /* 2x2 grid → single column; labels still uppercase, inputs full-width. */
  .modify-inputs {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 14px;
  }
  .modify-field .form-control {
    height: 40px; /* slightly taller for touch */
  }

  /* Info panel: same content, tighter padding. */
  .modify-info-panel__body {
    padding: 9px 12px;
  }

  /* Footer: same flex-end alignment; bigger touch targets. */
  #modifyOrderScreen .modal-footer {
    padding: 10px 12px;
    gap: 6px;
  }
  #modifyOrderScreen .modify-btn-cancel {
    padding: 9px 14px;
  }
  #modifyOrderScreen .modify-btn-submit {
    padding: 9px 18px;
  }
}

@media (max-width: 379.98px) {
  /* Tiny phones (iPhone SE 1st-gen, etc.) — drop a hair more weight. */
  #modifyOrderScreen .modal-body {
    padding: 12px 12px 10px;
  }
  #modifyLivePrice {
    font-size: 14px;
  }
  .modify-header-info__label {
    font-size: 10px;
  }
  .modify-field__label {
    font-size: 10.5px;
  }
}