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

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