/* Parameter popup: risk/margin settings for the trade calculation - also
   reused for the Settings window's fields (partials/settings.html). */
.params-popup {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    padding: 0.6em 0.8em;
    background: var(--color-raised);
    border: none;
    box-shadow: var(--shadow-raised);
    border-radius: 0.5em;
    font-size: clamp(12px, 1vw, 15px);
}

.params-popup label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5em;
    color: #d1d4dc;
}

.params-popup input {
    width: 6em;
    background: #1e222d;
    color: #fff;
    border: 1px solid #363a45;
    border-radius: 6px;
    padding: 0.3em 0.5em;
    text-align: right;
    outline: none;
}

.params-popup input:focus {
    border-color: #2962FF;
}

/* Risk/Max margin (Trade tab, always visible - see index.html) side by
   side instead of .params-popup's own default stacked column, since
   there's only ever these two here and a whole tab's width to spare -
   slightly smaller than elsewhere so both labels + inputs comfortably
   fit their own half without wrapping on a narrow phone. cqw (container
   query width, not vw) - relative to .chart-controls' own actual width
   (its container-type: inline-size above), which on desktop is a
   comparatively narrow floating panel (clamp(320px, 26vw, 560px)) totally
   unrelated to the browser viewport width vw measures - a wide desktop
   monitor was pushing this to its 14px max regardless of how little room
   the actual (still narrow) panel had, wrapping the label text onto two
   lines there despite fitting fine on a mobile, viewport-width panel. */
.trade-risk-inline {
    flex-direction: row;
    flex-wrap: wrap;
    font-size: clamp(10px, 3cqw, 13px);
}

/* white-space: nowrap (not min-width: 0, which used to be here) is what
   actually keeps each label's own text on one line: a flex item's default
   min-width is "auto", which for nowrap text resolves to that text's full
   unbroken width - so the item refuses to shrink smaller than that,
   forcing .trade-risk-inline's own flex-wrap: wrap (above) to stack the
   two labels onto separate rows instead, rather than letting this label
   shrink arbitrarily and wrap ITS OWN text internally onto two lines (the
   min-width: 0 this replaced allowed exactly that shrinking, which is what
   caused "Risk (with fees)" to still wrap on a sufficiently wide desktop
   monitor even after the cqw fix above). */
.trade-risk-inline label {
    flex: 1 1 auto;
    white-space: nowrap;
    gap: 0.35em;
}

.trade-risk-inline input {
    /* Wider than the original 4.5em - large risk/margin figures (e.g.
       6-digit dollar amounts) were getting clipped/hard to read at that
       width. Still narrower than .params-popup input's own base 6em
       (above) would give by default; .trade-risk-inline's own flex-wrap:
       wrap already handles the case where both labels+inputs together
       don't fit a narrow panel's width by stacking them onto two rows
       instead, so this doesn't need to stay as tight as before. */
    width: 6.5em;
    min-width: 0;
    padding: 0.25em 0.4em;
}

/* Max margin as a 5-30% scale of the account balance (see tradePanel.js's
   updateMaxMarginDisplay) - --max-margin-color (yellow / neutral / orange
   to red) tints the slider and its readout. */
.max-margin-field {
    --max-margin-color: #d1d4dc;
    flex-wrap: wrap;
}
.trade-risk-inline .max-margin-field input[type="range"] {
    width: 7em;
    padding: 0;
    border: none;
    background: transparent;
    accent-color: var(--max-margin-color);
}
.max-margin-readout {
    color: var(--max-margin-color);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
/* Full row under Risk/Max margin - see tradePanel.js's updateMarginWarning. */
.margin-warning {
    flex: 1 1 100%;
    color: #ef5350;
    font-weight: 700;
    white-space: normal;
    line-height: 1.3;
}

/* Leverage forced down to Max leverage - informational, same placement
   family as .leverage-warning-toast but neutral blue, and a bit wider for
   the longer text (see leverageCapToast.js). */
.leverage-cap-toast {
    position: fixed;
    z-index: 900;
    left: 50%;
    top: 12%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(92vw, 420px);
    padding: 0.7em 1.1em;
    background: #131a2b;
    border: 1px solid rgba(41, 98, 255, 0.6);
    border-radius: 0.6em;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #d1d4dc;
    font-weight: 600;
    font-size: clamp(12px, 2vw, 14px);
    text-align: center;
    pointer-events: none;
}

/* Below the leverage-cap toast, so both can show at once (infoToast.js). */
.info-toast {
    top: 20%;
}

/* Risk and Max margin directly determine how much money is actually on the
   line for this trade - set apart from the rest of this popup's more
   cosmetic/behavioral options (TP mode, language, fib format, ...) with the
   same amber "pay attention" accent already used elsewhere in this app for
   safety-relevant controls (e.g. the SL-to-BE popup button). */
.params-popup label.param-critical {
    color: #ffd54f;
    font-weight: 700;
}

.params-popup label.param-critical input {
    border-color: rgba(255, 193, 7, 0.5);
}

.params-popup label.param-critical input:focus {
    border-color: #ffd54f;
}

.params-popup select {
    background: #1e222d;
    color: #fff;
    border: 1px solid #363a45;
    border-radius: 6px;
    padding: 0.3em 0.5em;
    outline: none;
}

/* Base.css's color-scheme:dark already darkens the popup list itself in
   most browsers; this covers the ones (e.g. Firefox) that also respect
   per-option colors, so the dropdown text/background stays consistent
   everywhere instead of just falling back to whatever that browser does. */
.params-popup select option {
    background: #1e222d;
    color: #fff;
}

.params-popup select:focus {
    border-color: #2962FF;
}

.params-popup button {
    width: 8em;
    min-height: 0;
    padding: 0.3em 0.5em;
}

/* Last row of #params-popup - opens the Settings window's Advanced
   Trading Settings tab (settingsOverlay.js); full width, not 8em. */
.params-popup .params-advanced-btn {
    width: auto;
    margin-top: 0.2em;
}

/* Post-only active: guarantees a maker order instead of a plain limit */
#param-post-only-btn.active {
    background-color: #2962FF !important;
    border-color: #1976D2 !important;
    color: #fff !important;
}

#param-post-only-btn.active:hover {
    background-color: #1e88e5 !important;
}

/* Sits in .trade-risk-inline's own compact row (Max margin's slot - see
   index.html/tradePanel.js) - narrower than .params-popup button's own 8em
   default so "Perp 1x" fits without pushing Risk's own label onto a second
   line. .active (currently on the Perpetual side, see tradePanel.js) reuses
   the same blue "this option is picked" accent as #param-post-only-btn
   above, not a new color. */
#spot-perp-toggle-btn {
    width: 6.5em;
    min-height: 0;
    padding: 0.25em 0.4em;
}

#spot-perp-toggle-btn.active {
    background-color: #2962FF !important;
    border-color: #1976D2 !important;
    color: #fff !important;
}

#spot-perp-toggle-btn.active:hover {
    background-color: #1e88e5 !important;
}

.save-trade-btn {
    background-color: rgba(38, 166, 154, 0.2) !important;
    border-color: rgba(38, 166, 154, 0.5) !important;
    color: #a5e8a8 !important;
}

.save-trade-btn:hover {
    background-color: rgba(38, 166, 154, 0.35) !important;
}

/* Sends a real (testnet) order - deliberately styled to stand out from the
   flat grey buttons, so it doesn't get confused with harmless local actions.
   No margin-top of its own - it shares a row with connect/disconnect-
   account-btn now (see .trade-action-row below), and a per-button margin
   here would misalign it against those. */
.place-order-btn {
    padding: 0.8em 1em !important;
    background: linear-gradient(135deg, #ff8a00, #e52e71) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 700;
    font-size: clamp(14px, 1.3vw, 18px);
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(229, 46, 113, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.place-order-btn:hover {
    background: linear-gradient(135deg, #ff9d2e, #ef4a86) !important;
    box-shadow: 0 6px 20px rgba(229, 46, 113, 0.55);
    transform: translateY(-1px);
}

.place-order-btn:active {
    transform: translateY(0);
}

.place-order-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Cancels every open order + closes any open position - as destructive as
   the trash bin, styled the same red, so it doesn't get mistaken for
   "delete drawn lines" (that's local/harmless; this reaches the exchange).
   No margin-top of its own - see .place-order-btn above, same reason. */
.flatten-btn {
    padding: 0.7em 1em !important;
    background-color: rgba(239, 83, 80, 0.18) !important;
    border-color: rgba(239, 83, 80, 0.5) !important;
    color: #ff8a80 !important;
    font-weight: 600;
    font-size: clamp(13px, 1.2vw, 16px);
}

.flatten-btn:hover {
    background-color: rgba(239, 83, 80, 0.32) !important;
}

/* Next to "Change Order" - throws the collected TP changes away. */
.tool-row .discard-changes-btn {
    flex: 0 0 auto;
    padding: 0.7em 0.8em;
    color: #aaa;
}

.flatten-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Binance/Bybit: trading not wired up for visitors yet (accountConnect.js) -
   visible but dimmed, with a small badge under the label. Dimmed by a dark
   ::before layer rather than opacity, which would fade the badge too. */
.tool-row .place-order-btn.coming-soon,
.tool-row .flatten-btn.coming-soon {
    position: relative;
    overflow: hidden;
    max-height: none;
    /* These buttons are flex rows - stack the badge under the label. */
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Its red border sits outside the ::before layer - fade it separately. */
.tool-row .flatten-btn.coming-soon {
    border-color: rgba(239, 83, 80, 0.2) !important;
}

.place-order-btn.coming-soon::before,
.flatten-btn.coming-soon::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(19, 23, 34, 0.65);
}

.place-order-btn.coming-soon::after,
.flatten-btn.coming-soon::after {
    content: "Coming soon";
    position: relative;
    display: block;
    margin: 0.3em auto 0;
    width: fit-content;
    padding: 0.15em 0.7em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #131722;
    font-size: 0.6em;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}