/* Order-error toast (see orderErrorToast.js) - dismissible, auto-hides
   itself, and deliberately NOT a full-screen blocking overlay like the
   confirmation gates above: an error shouldn't stop you from immediately
   drawing/trying the next order. */
.order-error-toast {
    position: fixed;
    z-index: 900;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 0.8em;
    width: min(92vw, 480px);
    padding: 0.8em 1em;
    background: #2a1414;
    border: 1px solid rgba(239, 83, 80, 0.5);
    border-radius: 0.6em;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #ffb4ab;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.45;
}

#order-error-toast-message {
    flex: 1;
    /* Built with newlines - one bullet per failed order in a multi-tranche
       result - which plain text otherwise collapses. */
    white-space: pre-line;
}

.order-error-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    user-select: none;
    -webkit-user-select: none;
}

.order-error-toast-close:hover {
    opacity: 1;
}

/* Positive counterpart to the error toast above (see orderFillToast.js) -
   same layout/behavior, green instead of red so it reads as good news, not
   a repeat of the error toast. Positioned higher (bottom: 90px vs. 24px) so
   the two can't visually overlap if both happen to show at once. */
.order-fill-toast {
    position: fixed;
    z-index: 900;
    left: 50%;
    bottom: 90px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-start;
    gap: 0.8em;
    width: min(92vw, 480px);
    padding: 0.8em 1em;
    background: #142a18;
    border: 1px solid rgba(38, 166, 154, 0.5);
    border-radius: 0.6em;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #a3e9a4;
    font-size: clamp(13px, 1.5vw, 15px);
    line-height: 1.45;
}

.order-fill-toast-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
}

#order-fill-toast-message {
    white-space: pre-line;
}

.order-fill-toast-badge {
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.02em;
    opacity: 0.9;
}

/* The exchange's own fill record (orderFillToast.js's setProof) - figures
   in tabular digits, the link to it on the exchange underneath. */
.order-fill-toast-proof {
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
    color: #d6f5d6;
    opacity: 0.9;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.order-fill-toast-proof a {
    color: inherit;
    text-decoration: underline;
}

/* Any other news of an action done (an SL moved, leftovers cancelled, ...)
   - neutral, so green stays reserved for a fill the exchange reported. */
.order-fill-toast.is-notice {
    background: #1c2230;
    border-color: rgba(120, 144, 180, 0.45);
    color: #d5dbe6;
}

.order-fill-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 1.1em;
    line-height: 1;
    cursor: pointer;
    opacity: 0.7;
    user-select: none;
    -webkit-user-select: none;
}

.order-fill-toast-close:hover {
    opacity: 1;
}

/* Playful nudge when Max Leverage is set above a sane threshold (see
   tradePanel.js/leverageWarningToast.js) - its own gold/joking style, not
   the red error or green fill toasts, and centered higher up near the
   params popup rather than at the bottom, since that's where the input
   that triggered it actually is. No close button - it auto-dismisses
   quickly on its own (this is a joke, not information worth keeping). */
.leverage-warning-toast {
    position: fixed;
    z-index: 900;
    left: 50%;
    top: 20%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(92vw, 320px);
    padding: 0.7em 1.1em;
    background: #2a2410;
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 0.6em;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #ffd54f;
    font-weight: 700;
    font-size: clamp(13px, 2.2vw, 16px);
    text-align: center;
    pointer-events: none;
}

/* Same joke-toast pattern as .leverage-warning-toast above, own trigger
   (see orderService.js/noSlGambleToast.js) - offset lower so the rare case
   of both firing close together doesn't stack them on top of each other. */
.no-sl-gamble-toast {
    position: fixed;
    z-index: 900;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(92vw, 320px);
    padding: 0.7em 1.1em;
    background: #2a2410;
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 0.6em;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #ffd54f;
    font-weight: 700;
    font-size: clamp(13px, 2.2vw, 16px);
    text-align: center;
    pointer-events: none;
}

/* Same joke-toast pattern again, this time for Risk set to a large share
   of Max margin (see tradePanel.js/riskWarningToast.js) - own offset,
   between the other two, so the rare case of more than one firing close
   together doesn't stack them on top of each other. */
.risk-warning-toast {
    position: fixed;
    z-index: 900;
    left: 50%;
    top: 25%;
    transform: translateX(-50%);
    width: max-content;
    max-width: min(92vw, 320px);
    padding: 0.7em 1.1em;
    background: #2a2410;
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-radius: 0.6em;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
    color: #ffd54f;
    font-weight: 700;
    font-size: clamp(13px, 2.2vw, 16px);
    text-align: center;
    pointer-events: none;
}

.mainnet-confirm-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
}

.mainnet-confirm-buttons .btn {
    flex: 1 1 auto;
    min-width: 8em;
}

.mainnet-confirm-no {
    padding: 0.7em 1em;
    background-color: rgba(239, 83, 80, 0.2) !important;
    border-color: rgba(239, 83, 80, 0.5) !important;
    color: #ff8a80 !important;
    font-weight: 600;
    font-size: clamp(14px, 1.8vw, 17px);
}

.mainnet-confirm-no:hover {
    background-color: rgba(239, 83, 80, 0.35) !important;
}

/* Tranche-mode dialog's "Verschmelzen" - an equally valid choice, not a
   cancel, so neutral blue instead of .mainnet-confirm-no's red. */
.position-mode-merged-btn {
    padding: 0.7em 1em;
    background-color: rgba(41, 98, 255, 0.2) !important;
    border-color: rgba(41, 98, 255, 0.55) !important;
    color: #9db4ff !important;
    font-weight: 600;
    font-size: clamp(14px, 1.8vw, 17px);
}

.position-mode-merged-btn:hover {
    background-color: rgba(41, 98, 255, 0.35) !important;
}