/* ──────────────────────────────────────────────────────────────────
   sd-modal-drag.css — movable modals + the bottom-centre resting place.
   Companion to assets/js/sd-modal-drag.js; read that file's header for the
   design rules. Everything here is gated on `data-sd-draggable` /
   `data-sd-anchor`, so no modal is affected unless it opts in.
   ────────────────────────────────────────────────────────────────── */

/* ---- Bottom-centre anchor ----------------------------------------
   For DATA-ENTRY modals. Bootstrap centres a modal vertically, which on the
   Portfolio page puts it squarely over the table rows the trader is reading;
   the two gaps it leaves (~100px above and below on a 1080p screen) are too
   thin to be useful. Anchoring to the bottom instead pools that space into one
   contiguous band at the TOP, which is where the column headers, the filter row
   and the first rows sit.

   Confirmation dialogs must stay centred and so must NOT carry this attribute —
   SweetAlert is untouched by all of this.

   Structurally this is Bootstrap's own `.modal-dialog-centered` with
   `align-items: flex-end`. The two fragments that used to carry
   `.modal-dialog-centered` had it removed — this replaces it rather than
   fighting it in the cascade. ------------------------------------------------ */
[data-sd-anchor="bottom"] .modal-dialog {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: end;
	align-items: flex-end;
	/* 12px top + 12px bottom — the gap Pritesh picked. Flush against the
	   viewport edge reads as "the browser has clipped this", because these
	   cards have a radius and a drop shadow. */
	min-height: calc(100% - 24px);
	margin: 12px auto;
}

/* Bootstrap's Safari min-height-on-flex-container workaround, kept for parity
   with `.modal-dialog-centered::before`. Zero-width flex item; layout-inert. */
[data-sd-anchor="bottom"] .modal-dialog::before {
	display: block;
	height: calc(100vh - 24px);
	height: -webkit-min-content;
	height: -moz-min-content;
	height: min-content;
	content: "";
}

/* ---- Bottom anchor + scrollable body -----------------------------
   The anchor above lets a dialog grow to whatever height its form needs. That
   is fine until the form outgrows the WINDOW, and then it strands the trader:
   the whole dialog becomes one page-length scroller, and because focus sits on
   a control near the TOP of the form, every re-focus (select2 re-focuses after
   a chip is removed, Tab, Bootstrap's own modal focus-enforcement) makes the
   browser scroll that control back into view — straight back to the top. The
   Square-off Portfolio form did exactly this at ~1370px tall on an 830px
   viewport with 17 accounts selected (bug report 2026-09-04): the trader could
   not stay scrolled down, so Category, the cancel-open-orders switch, the
   summary and the Square-off button were unreachable.

   Add `.modal-dialog-scrollable` to such a dialog and these rules cap it at the
   viewport and hand the scrolling to `.modal-body`, leaving the header and the
   footer pinned. All four Portfolio data-entry modals now carry it — Square-off
   was the one reported, but the other three share this contract and could
   strand a trader the same way. `.modal-body` must be a DIRECT child of
   `.modal-content` for it to work: behind a wrapper (Modify Order had its
   `<form>` around the body) it has no bounded height, so it grows instead of
   scrolling and shoves the footer out of the clipped card.

   The rules themselves are Bootstrap's own `.modal-dialog-centered
   .modal-dialog-scrollable` combination with `justify-content: flex-end`
   instead of `center` — same column flex box, same `::before` removal, same
   uncapped `.modal-content`; only the resting edge differs. Sizes stay in step
   with the 12px margin the anchor above sets, not Bootstrap's 0.5rem.

   It also retires a latent trap in the drag module: with a card taller than the
   viewport, `clamp()` in sd-modal-drag.js takes its "pin the top edge" branch
   and translates the card by a value derived from a scrolled rect, so the next
   re-clamp cancels the user's scroll. A card that can never exceed the viewport
   never reaches that branch. -------------------------------------------------- */
[data-sd-anchor="bottom"] .modal-dialog.modal-dialog-scrollable {
	-ms-flex-direction: column;
	flex-direction: column;
	-ms-flex-pack: end;
	justify-content: flex-end;
	/* align-items: flex-end above is a CROSS-axis rule once this is a column,
	   which would shrink the card against the right edge. */
	-ms-flex-align: stretch;
	align-items: stretch;
	height: calc(100% - 24px);
	min-height: 0;
	max-height: calc(100% - 24px);
}

/* The column above already caps the card; Bootstrap's own viewport-based cap
   would double up and is 8px out of step with the 12px margin. */
[data-sd-anchor="bottom"] .modal-dialog.modal-dialog-scrollable .modal-content {
	max-height: 100%;
}

/* The Safari min-height shim is for a min-height box, not a fixed-height one —
   here it would force a second scrollbar. Bootstrap drops it in the same case. */
[data-sd-anchor="bottom"] .modal-dialog.modal-dialog-scrollable::before {
	content: none;
}

/* ---- Square-off: the accounts box gets its own scroll ------------
   17 selected accounts stack 17 chips one per line — a 630px control on its
   own, which is most of what pushed the form past the window above. Capping it
   keeps the whole form within a laptop screen, so the body above barely has to
   scroll at all. Nothing is hidden by this: the selection summary lower down
   already names every selected account with its open-position count.
   Scoped to this one modal deliberately — the Trade tab's account picker has
   the room and was not reported. ---------------------------------------------- */
#squareOffScreen .select2-container--default .select2-selection--multiple {
	max-height: 16rem;
	overflow-y: auto;
}

/* ---- Drag handle -------------------------------------------------
   The whole header is the grab area, minus its own controls (the JS excludes
   buttons/links/inputs). Desktop only — see MIN_WIDTH in the JS. ------------- */
@media (min-width: 992px) {
	[data-sd-draggable] .modal-header {
		cursor: move;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
}

/* While dragging, and whenever an offset is applied, Bootstrap's 0.3s transform
   transition would lag the pointer (and animate the restore on open). The
   backdrop fade is untouched — only the dialog's transform stops animating. */
[data-sd-draggable].sd-modal-moved .modal-dialog,
[data-sd-draggable].sd-modal-dragging .modal-dialog {
	transition: none;
}

/* Kill the text cursor / selection flicker mid-drag anywhere in the dialog. */
[data-sd-draggable].sd-modal-dragging .modal-content {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* ---- "Put it back" button ----------------------------------------
   Injected by the JS into `.modal-header`, so switching a new modal on stays a
   one-attribute change. Hidden until the pop-up has actually been moved: a
   control that does nothing is just clutter in a header this dense. --------- */
.sd-modal-reset {
	display: none;
	background: transparent;
	border: 0;
	padding: 0 6px;
	margin-left: auto;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.45;
	color: inherit;
	transition: opacity 0.15s ease;
}

.sd-modal-reset:hover,
.sd-modal-reset:focus {
	opacity: 0.9;
	outline: 0;
}

/* `margin-left: auto` above would push the close [x] away in headers that have
   one, so only claim the free space when this button is on its own. */
.modal-header .sd-modal-reset + .close {
	margin-left: 4px;
}

@media (min-width: 992px) {
	[data-sd-draggable].sd-modal-moved .sd-modal-reset {
		display: inline-flex;
		-ms-flex-align: center;
		align-items: center;
	}
}

[data-theme="dark"] .sd-modal-reset {
	color: var(--text-secondary, #adb5bd);
}