/* MudBlazor Component Overrides */


/* ──────────────────────────────────────────
   Global MudDialog Base Theme
   All dialogs inherit dark terminal styling.
   Per-dialog sections override only what's
   unique (dimensions, accent colors, etc.).
   MUST remain at the TOP of this file so
   per-dialog rules win by cascade order.
   ────────────────────────────────────────── */

.mud-dialog {
    background-color: var(--degen-bg-secondary) !important;
    border: 1px solid var(--degen-border-default) !important;
    border-radius: 4px !important;
    color: var(--degen-text-primary) !important;
}

.mud-dialog .mud-dialog-title {
    background-color: var(--degen-bg-secondary) !important;
    border-bottom: 1px solid var(--degen-border-subtle) !important;
    padding: 16px 20px !important;
    color: var(--degen-text-primary) !important;
    font-family: var(--degen-font-sans) !important;
}

.mud-dialog .mud-dialog-content {
    background-color: var(--degen-bg-secondary) !important;
    padding: 20px !important;
    color: var(--degen-text-primary) !important;
    font-family: var(--degen-font-sans) !important;
}

.mud-dialog .mud-dialog-actions {
    background-color: var(--degen-bg-secondary) !important;
    border-top: 1px solid var(--degen-border-subtle) !important;
    padding: 12px 20px !important;
}

/* --- Global dialog buttons --- */

.mud-dialog .mud-button-filled.mud-button-filled-primary {
    background-color: var(--degen-color-primary) !important;
    color: var(--degen-bg-primary) !important;
    text-transform: none !important;
    font-family: var(--degen-font-sans) !important;
    font-weight: 600 !important;
}

.mud-dialog .mud-button-filled.mud-button-filled-primary:hover {
    background-color: var(--degen-color-primary-hover) !important;
    box-shadow: var(--degen-btn-shadow-primary-hover) !important;
}

.mud-dialog .mud-button-filled.mud-button-filled-primary:disabled {
    opacity: 0.5 !important;
    box-shadow: none !important;
}

.mud-dialog .mud-button-text {
    color: var(--degen-text-tertiary) !important;
    text-transform: none !important;
    font-family: var(--degen-font-sans) !important;
}

.mud-dialog .mud-button-text:hover {
    color: var(--degen-text-secondary) !important;
    background: var(--degen-hover-overlay-light) !important;
}

.mud-dialog .mud-button-text.mud-button-text-primary {
    color: var(--degen-color-primary) !important;
}

.mud-dialog .mud-button-text.mud-button-text-primary:hover {
    color: var(--degen-color-primary) !important;
    background: var(--degen-color-primary-faint) !important;
}

.mud-dialog .mud-button-text.mud-button-text-error {
    color: var(--degen-color-error) !important;
}

.mud-dialog .mud-button-text.mud-button-text-error:hover {
    color: var(--degen-color-error) !important;
    background: rgba(255, 107, 107, 0.08) !important;
}

.mud-dialog .mud-button-outlined {
    border-color: rgba(184, 248, 78, 0.3) !important;
    color: var(--degen-color-primary) !important;
    text-transform: none !important;
    font-family: var(--degen-font-sans) !important;
}

.mud-dialog .mud-button-outlined:hover {
    border-color: rgba(184, 248, 78, 0.6) !important;
    background: var(--degen-color-primary-faint) !important;
}

/* --- Global dialog inputs --- */

.mud-dialog .mud-input.mud-input-outlined {
    background: var(--degen-bg-input) !important;
    border-radius: var(--degen-radius-md) !important;
}

.mud-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--degen-border-default) !important;
}

.mud-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(184, 248, 78, 0.4) !important;
}

.mud-dialog .mud-input.mud-input-focused .mud-input-outlined-border {
    border-color: var(--degen-color-primary) !important;
    border-width: 2px !important;
}

.mud-dialog .mud-input-slot,
.mud-dialog .mud-input-root,
.mud-dialog .mud-select-input {
    color: var(--degen-text-primary) !important;
    -webkit-text-fill-color: var(--degen-text-primary) !important;
    font-family: var(--degen-font-sans) !important;
}

.mud-dialog .mud-input-label {
    color: var(--degen-text-secondary) !important;
    font-family: var(--degen-font-sans) !important;
}

/* --- Global dialog adornments (numeric arrows, select icons) --- */

.mud-dialog .mud-input-adornment .mud-icon-root {
    color: var(--degen-text-tertiary) !important;
}

.mud-dialog .mud-input-control:hover .mud-input-adornment .mud-icon-root {
    color: var(--degen-text-secondary) !important;
}

/* --- Global dialog close button --- */

.mud-dialog .mud-dialog-title .mud-icon-button {
    color: var(--degen-text-tertiary) !important;
}

.mud-dialog .mud-dialog-title .mud-icon-button:hover {
    color: var(--degen-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}


/* MudMessageBox (Confirmation Dialog) Styling
   Sized to its own content. The original rules pinned every message box to a
   fixed 381x223 rectangle with an absolutely positioned button row, which meant
   any message longer than about two lines overflowed the panel and had the
   buttons painted on top of the text. MudBlazor's dialog container already
   flex-centres its child, so the box only needs a width and a viewport cap. */

.mud-message-box {
    position: relative !important;
    width: min(420px, calc(100vw - 32px)) !important;
    height: auto !important;
    /* vh first as the fallback: a browser without dvh support drops the second
       declaration, and without the first it would be left with no cap at all. */
    max-height: calc(100vh - 64px) !important;
    max-height: calc(100dvh - 64px) !important;
    left: auto !important;
    top: auto !important;
    background: var(--degen-bg-surface) !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
}


/* Close button (X) styling */

.mud-message-box .mud-dialog-title .mud-button-root {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    right: 16px !important;
    top: 16px !important;
    background: #FFFFFF !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
}

.mud-message-box .mud-dialog-title .mud-button-root .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
    background: #565E63 !important;
    transform: rotate(-45deg) !important;
    position: relative !important;
}

.mud-message-box .mud-dialog-title .mud-button-root .mud-icon-root::before,
.mud-message-box .mud-dialog-title .mud-button-root .mud-icon-root::after {
    content: '' !important;
    position: absolute !important;
    width: 14px !important;
    height: 2px !important;
    background: #D9D9D9 !important;
    left: 2.24px !important;
    top: 2.34px !important;
}

.mud-message-box .mud-dialog-title .mud-button-root .mud-icon-root::before {
    transform: rotate(-45deg) !important;
}

.mud-message-box .mud-dialog-title .mud-button-root .mud-icon-root::after {
    transform: rotate(45deg) !important;
}


/* Title styling */

.mud-message-box .mud-dialog-title {
    background-color: transparent !important;
    padding: 32px 24px 0 24px !important;
    border: none !important;
}

.mud-message-box .mud-dialog-title .mud-typography {
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 130% !important;
    letter-spacing: -0.03em !important;
    color: #E9E9E9 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* Content styling */

.mud-message-box .mud-dialog-content {
    background-color: transparent !important;
    padding: 0 24px 8px 24px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 19px !important;
    color: var(--degen-text-secondary) !important;
    margin-top: 2px !important;
    overflow-y: auto !important;
    overflow-wrap: anywhere !important;
}


/* Actions styling */

/* The button row sits in the normal flow, after the message, so it can never
   overlap the text no matter how long the message is. */

.mud-message-box .mud-dialog-actions {
    background-color: transparent !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    padding: 16px 24px 24px 24px !important;
    border: none !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

/* Catches a button passed in as custom content, which carries none of the role
   classes below. MudBlazor wraps the row in a focus trap, but that wrapper is
   display: contents, so the buttons are still the flex items of the row and a
   child-combinator rule on the row would land on the wrapper instead. */

.mud-message-box .mud-dialog-actions .mud-button-root {
    display: inline-flex !important;
    flex-shrink: 0 !important;
    flex-direction: row !important;
}


/* Buttons.
   Each button carries two independent hooks. MudBlazor derives one from the
   button's colour (.mud-button-text-default on cancel and no, -text-primary on
   the confirm button) and MudMessageBox stamps the other on by role
   (.mud-message-box__cancel-button / __no-button / __yes-button). Every rule
   here lists both, and so must every later rule that overrides one of them --
   the phone tap-target height, the hover states. A rule that names fewer classes
   than the one it means to override loses on specificity no matter that it comes
   later in the file, and !important does not change that. That is precisely how
   the phone tap targets and the hover colours previously ended up doing nothing.
   Keep every one of these selector lists the same shape and the question does
   not come up. */

.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-default,
.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-primary,
.mud-message-box .mud-dialog-actions .mud-message-box__cancel-button,
.mud-message-box .mud-dialog-actions .mud-message-box__no-button,
.mud-message-box .mud-dialog-actions .mud-message-box__yes-button {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 6px 14px !important;
    gap: 10px !important;
    width: auto !important;
    min-width: 64px !important;
    height: auto !important;
    min-height: 32px !important;
    border: none !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    filter: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 23px !important;
    letter-spacing: 0.371px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}


/* Cancel and No: the way out, so no fill. */

.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-default,
.mud-message-box .mud-dialog-actions .mud-message-box__cancel-button,
.mud-message-box .mud-dialog-actions .mud-message-box__no-button {
    background: transparent !important;
    color: var(--degen-text-secondary) !important;
}

.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-default:hover,
.mud-message-box .mud-dialog-actions .mud-message-box__cancel-button:hover,
.mud-message-box .mud-dialog-actions .mud-message-box__no-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--degen-text-primary) !important;
    transform: translateY(-1px) !important;
}


/* Confirm: this is the button that does the thing, so it carries the fill. */

.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-primary,
.mud-message-box .mud-dialog-actions .mud-message-box__yes-button {
    background: #D65858 !important;
    color: #000000 !important;
}

.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-primary:hover,
.mud-message-box .mud-dialog-actions .mud-message-box__yes-button:hover {
    background: #E65858 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 8px rgba(214, 88, 88, 0.3) !important;
}


/* Phone layout. A 24px title eats two full lines before the message starts on a
   ~400px screen. The 144px the cap gives up is 2 x (56px bottom nav + 16px gap):
   the dialog is vertically centred, so only half of it ends up below the box, and
   one nav height would leave the button row sitting on top of the nav. Written out
   rather than reading --mobile-nav-height, which is declared in a component-scoped
   stylesheet and so never actually resolves outside that component. The 599px here
   is the same breakpoint the nav itself uses, so the cap turns on exactly when the
   nav appears. The nav only renders on the terminal page, so on other phone pages
   this gives up height for a bar that is not there -- a shorter dialog, never a
   clipped one, which is the safe direction to be wrong in. */

@media (max-width: 599px) {
    .mud-message-box {
        width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 144px) !important;
        max-height: calc(100dvh - 144px) !important;
    }

    .mud-message-box .mud-dialog-title {
        padding: 20px 16px 0 16px !important;
    }

    .mud-message-box .mud-dialog-title .mud-typography {
        font-size: 18px !important;
    }

    .mud-message-box .mud-dialog-content {
        padding: 0 16px 8px 16px !important;
    }

    .mud-message-box .mud-dialog-actions {
        padding: 16px !important;
    }

    /* Repeats the full selector list from the button rules above -- see the note
       there. A plainer .mud-button-root selector here would lose to the variant
       class no matter that this rule comes later, which is how these tap targets
       previously stayed at 32px. */
    .mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-default,
    .mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-primary,
    .mud-message-box .mud-dialog-actions .mud-message-box__cancel-button,
    .mud-message-box .mud-dialog-actions .mud-message-box__no-button,
    .mud-message-box .mud-dialog-actions .mud-message-box__yes-button {
        min-height: 44px !important;
    }
}


/* Reset to Default Button Styling - Target actual MudBlazor classes */

.mud-button-root.mud-button-outlined.mud-button-outlined-warning {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 8px !important;
    gap: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 4px !important;
    border: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 23px !important;
    letter-spacing: 0.371px !important;
    text-transform: uppercase !important;
    color: #A2A2A2 !important;
    min-width: auto !important;
    text-decoration: none !important;
}

.mud-button-root.mud-button-outlined.mud-button-outlined-warning:hover {
    background: #182227 !important;
    color: #A2A2A2 !important;
}


/* ===== WALLET SETUP DIALOG STYLING ===== */


/* Main Dialog Container */

.mud-dialog.wallet-setup-dialog {
    position: relative !important;
    width: 613px !important;
    height: 252px !important;
    background: #131B1F !important;
    border-radius: 4px !important;
    border: none !important;
    box-shadow: none !important;
}


/* Close Button Container */

.wallet-setup-dialog .mud-dialog-title .mud-button-root {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    right: 16px !important;
    top: 16px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
}


/* Close Button Icon Background */

.wallet-setup-dialog .mud-dialog-title .mud-button-root .mud-icon-root {
    width: 14px !important;
    height: 14px !important;
    background: #565E63 !important;
    transform: rotate(-45deg) !important;
    position: relative !important;
}


/* Close Button Cross Lines */

.wallet-setup-dialog .mud-dialog-title .mud-button-root .mud-icon-root::before,
.wallet-setup-dialog .mud-dialog-title .mud-button-root .mud-icon-root::after {
    content: '' !important;
    position: absolute !important;
    width: 14px !important;
    height: 2px !important;
    background: #D9D9D9 !important;
    left: 2.24px !important;
    top: 2.34px !important;
}

.wallet-setup-dialog .mud-dialog-title .mud-button-root .mud-icon-root::before {
    transform: rotate(-45deg) !important;
}

.wallet-setup-dialog .mud-dialog-title .mud-button-root .mud-icon-root::after {
    transform: rotate(45deg) !important;
}


/* Dialog Title "Setup HyperLiquid Wallet" */

.wallet-setup-dialog .mud-dialog-title {
    background-color: transparent !important;
    padding: 32px 24px 0 24px !important;
    border: none !important;
}

.wallet-setup-dialog .mud-dialog-title .mud-typography {
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 24px !important;
    line-height: 130% !important;
    letter-spacing: -0.03em !important;
    color: #E9E9E9 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 277px !important;
    height: 31px !important;
}


/* Description Text */

.wallet-setup-dialog .mud-dialog-content .mud-typography {
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    line-height: 19px !important;
    color: #565E63 !important;
    transform: rotate(-0.1deg) !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 560px !important;
    height: 19px !important;
    position: absolute !important;
    left: 24px !important;
    top: 5px !important;
}


/* Dialog Content Container */

.wallet-setup-dialog .mud-dialog-content {
    background-color: transparent !important;
    padding: 0 !important;
    border: none !important;
    position: relative !important;
}


/* Input Field Container */

.wallet-setup-dialog .mud-input-control {
    position: absolute !important;
    width: 565px !important;
    left: 24px !important;
    right: 24px !important;
    top: 50px !important;
    bottom: 80px !important;
    background: transparent !important;
}


/* Input Field Background */

.wallet-setup-dialog .mud-input-outlined {
    position: absolute !important;
    height: 56px !important;
    left: 0px !important;
    right: 0px !important;
    top: 0px !important;
    background: transparent !important;
}


/* Input Field Container */

.wallet-setup-dialog .mud-input-outlined .mud-input-outlined-border {
    position: absolute !important;
    height: 56px !important;
    left: 0px !important;
    right: 0px !important;
    top: calc(50% - 56px/2) !important;
    border: 1px solid #2C373D !important;
    border-radius: 4px !important;
    background: transparent !important;
}


/* Input Text */

.wallet-setup-dialog .mud-input-outlined input {
    position: absolute !important;
    width: calc(100% - 28px) !important;
    height: 24px !important;
    left: 14px !important;
    top: 15.5px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #FFFFFF !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 0 !important;
}


/* Input Label */

.wallet-setup-dialog .mud-input-label {
    position: absolute !important;
    width: 88px !important;
    height: 14px !important;
    left: 3x !important;
    top: 2px !important;
    background: #131B1F !important;
    font-family: 'Roboto', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    letter-spacing: 0.1125px !important;
    color: #A2A2A2 !important;
    padding: 0 3px !important;
    margin: 0 !important;
}


/* Dialog Actions Container */

.wallet-setup-dialog .mud-dialog-actions {
    position: absolute !important;
    width: 122px !important;
    height: 32px !important;
    right: 24px !important;
    top: 196px !important;
    background-color: transparent !important;
    padding: 0px !important;
    border: none !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
}


/* Cancel Button */

.wallet-setup-dialog .mud-dialog-actions .mud-button-root.mud-button-text-default {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 8px !important;
    gap: 10px !important;
    width: 66px !important;
    height: 32px !important;
    background: #182227 !important;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px !important;
    border: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 23px !important;
    letter-spacing: 0.371px !important;
    text-transform: uppercase !important;
    color: #A2A2A2 !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
}

.wallet-setup-dialog .mud-dialog-actions .mud-button-root.mud-button-text-default:hover {
    background: #2A3237 !important;
    color: #A2A2A2 !important;
}


/* Save Button */

.wallet-setup-dialog .mud-dialog-actions .mud-button-root.mud-button-filled-primary {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 8px !important;
    gap: 10px !important;
    width: 48px !important;
    height: 32px !important;
    background: #B8F84E !important;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14), 0px 1px 5px rgba(0, 0, 0, 0.12) !important;
    border-radius: 4px !important;
    border: none !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    line-height: 23px !important;
    letter-spacing: 0.371px !important;
    text-transform: uppercase !important;
    color: #000000 !important;
    min-width: auto !important;
    flex-shrink: 0 !important;
}

.wallet-setup-dialog .mud-dialog-actions .mud-button-root.mud-button-filled-primary:hover {
    background: #C8F85E !important;
    color: #000000 !important;
}


/* Hide default MudBlazor elements */

.wallet-setup-dialog .mud-dialog-title .mud-button-root .mud-icon-root svg {
    display: none !important;
}


/* ===== INDICATOR CONFIGURATION DROPDOWN STYLING ===== */


/* Main dropdown container */

.indicator-config-drawer .mud-select {
    background: #0D1215 !important;
    border: 1px solid #2C373D !important;
    border-radius: 4px !important;
    height: 56px !important;
    position: relative !important;
}


/* Input control container */

.indicator-config-drawer .mud-select .mud-input-control {
    background: transparent !important;
    height: 56px !important;
    border: none !important;
}


/* Input container */

.indicator-config-drawer .mud-select .mud-input-control-input-container {
    height: 56px !important;
    background: transparent !important;
    border: none !important;
}


/* Main input field */

.indicator-config-drawer .mud-select .mud-input {
    height: 56px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}


/* Input slot with text */

.indicator-config-drawer .mud-select .mud-input-slot {
    height: 56px !important;
    background: transparent !important;
    border: none !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 24px !important;
    color: #FFFFFF !important;
    position: absolute !important;
    top: -22px !important;
    left: 2px !important;
}


/* Label styling */

.indicator-config-drawer .mud-select .mud-input-label {
    position: absolute !important;
    width: 91px !important;
    height: 14px !important;
    left: 0px !important;
    top: -6px !important;
    background: #0D1215 !important;
    font-family: 'Roboto', sans-serif !important;
    font-style: normal !important;
    font-weight: 400 !important;
    font-size: 12px !important;
    line-height: 14px !important;
    letter-spacing: 0.1125px !important;
    color: #B8F84E !important;
    padding: 0 3px !important;
    margin: 0 !important;
    text-align: center !important;
}


/* Dropdown arrow container */

.indicator-config-drawer .mud-select .mud-input-adornment {
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    right: 16px !important;
    top: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}


/* Dropdown arrow icon */

.indicator-config-drawer .mud-select .mud-input-adornment .mud-icon-root {
    width: 24px !important;
    height: 24px !important;
    color: #B8F84E !important;
    background: transparent !important;
}


/* Dropdown arrow SVG */

.indicator-config-drawer .mud-select .mud-input-adornment .mud-icon-root svg {
    width: 24px !important;
    height: 24px !important;
    fill: #B8F84E !important;
}


/* Remove default border */

.indicator-config-drawer .mud-select .mud-input-outlined-border {
    display: none !important;
}


/* Focus state */

.indicator-config-drawer .mud-select.mud-input-focused {
    border-color: #B8F84E !important;
    box-shadow: 0 0 0 2px rgba(184, 248, 78, 0.2) !important;
}


/* Hover state */

.indicator-config-drawer .mud-select:hover {
    border-color: #B8F84E !important;
}


/* Add spacing between dropdown and tabs */

.indicator-config-drawer .mud-tabs {
    margin-top: 24px !important;
}


/* Indicator Configuration title styling */

.indicator-config-drawer .mud-drawer-header .mud-typography {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #E9E9E9 !important;
}


/* ===== INDICATOR CONFIGURATION TABS STYLING ===== */


/* Tab container */

.indicator-config-drawer .mud-tabs {
    margin-top: 24px !important;
    background: transparent !important;
    border: none !important;
}


/* Tab headers container */

.indicator-config-drawer .mud-tabs .mud-tabs-toolbar {
    background: transparent !important;
    border: none !important;
    min-height: 48px !important;
    padding: 0 !important;
}


/* Target the actual tabbar content that contains the background */

.indicator-config-drawer .mud-tabs .mud-tabs-tabbar-content {
    background: #0D1215 !important;
    border-bottom: 1px solid #2C373D !important;
}

.indicator-config-drawer .mud-tabs .mud-tabs-tabbar-wrapper {
    background: #0D1215 !important;
}


/* Individual tab button */

.indicator-config-drawer .mud-tabs .mud-tab {
    background: #131B1F !important;
    border: 1px solid #2C373D !important;
    border-radius: 4px 4px 0px 0px !important;
    height: 48px !important;
    padding: 12px 24px !important;
    margin: 0 8px !important;
    min-width: auto !important;
    font-family: 'Roboto', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 24px !important;
    letter-spacing: 0.4px !important;
    text-transform: uppercase !important;
    color: #FFFFFF !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: none !important;
}


/* Active tab */

.indicator-config-drawer .mud-tabs .mud-tab.mud-tab-active {
    background: rgba(159, 212, 68, 0.2) !important;
    border: none !important;
    border-radius: 4px 4px 0px 0px !important;
    color: #B8F84E !important;
}


/* Hover state for inactive tabs */

.indicator-config-drawer .mud-tabs .mud-tab:hover:not(.mud-tab-active) {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #FFFFFF !important;
}


/* Hover state for active tab */

.indicator-config-drawer .mud-tabs .mud-tab.mud-tab-active:hover {
    background: rgba(159, 212, 68, 0.3) !important;
    color: #B8F84E !important;
}


/* Remove default MudBlazor tab styling */

.indicator-config-drawer .mud-tabs .mud-tabs-toolbar::before {
    display: none !important;
}

.indicator-config-drawer .mud-tabs .mud-tabs-toolbar::after {
    display: none !important;
}


/* SOLUTION: Disable the MudBlazor tab slider that creates the white line */

.indicator-config-drawer .mud-tab-slider.mud-tab-slider-horizontal {
    height: 0 !important;
}


/* Tab panel content */

.indicator-config-drawer .mud-tabs .mud-tab-panel {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}


/* WORKING SNACKBAR STYLING - Using selectors that actually work! */


/* Base snackbar container styling - matching design specs */

.mud-snackbar {
    width: 450px !important;
    min-height: 48px !important;
    background: #131B1F !important;
    border: 1px solid #2C373D !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: flex-start !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    position: relative !important;
}


/* Snackbar message text styling */

.mud-snackbar-content-message {
    font-family: 'Space Grotesk', sans-serif !important;
    font-style: normal !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    line-height: 23px !important;
    letter-spacing: 0.371px !important;
    text-transform: uppercase !important;
    flex: 1 !important;
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    padding-top: 2px !important;
}


/* Icon styling - custom + and - symbols */

.mud-snackbar-icon {
    margin-right: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    width: 16px !important;
    height: 16px !important;
    justify-content: center !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}


/* Hide default SVG icons */

.mud-snackbar-icon svg {
    display: none !important;
}


/* Default snackbar icon styling (no symbol by default) */

.mud-snackbar-icon::before {
    content: "" !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
    font-size: 16px !important;
}


/* Close button styling */

.mud-snackbar-content-action {
    margin-left: 12px !important;
    display: flex !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
}


/* Success snackbars - using your theme green */

.mud-alert-filled-success .mud-snackbar-content-message {
    color: #B8F84E !important;
}


/* Override success styling for removal messages (using JS-added classes) */

.snackbar-removal .mud-snackbar-content-message {
    color: #FD4F4F !important;
}

.snackbar-removal .mud-snackbar-icon::before {
    content: "−" !important;
    color: #FD4F4F !important;
}


/* Ensure addition messages are green with + symbol */

.snackbar-addition .mud-snackbar-content-message {
    color: #B8F84E !important;
}

.snackbar-addition .mud-snackbar-icon::before {
    content: "+" !important;
    color: #B8F84E !important;
}


/* Error snackbars - using design spec color */

.mud-alert-filled-error .mud-snackbar-content-message {
    color: #FD4F4F !important;
}


/* Warning snackbars */

.mud-alert-filled-warning .mud-snackbar-content-message {
    color: #FFC107 !important;
}


/* Info snackbars */

.mud-alert-filled-info .mud-snackbar-content-message {
    color: #2196F3 !important;
}


/* Normal/default snackbars */

.mud-snackbar-content-message {
    color: #B8F84E !important;
}


/* Removed unreliable CSS selectors - using JavaScript-based approach instead */


/* Close button styling */

.mud-snackbar-close-button {
    color: #565E63 !important;
    opacity: 0.7 !important;
}

.mud-snackbar-close-button:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* Snackbar Styling - Enhanced for programmatic theme compatibility */


/* Base snackbar styling with maximum specificity */

.mud-theme-dark .mud-snackbar-provider .mud-snackbar {
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 500 !important;
    border: 1px solid transparent !important;
}


/* Override MudBlazor's automatic coloring with our custom gradients */

.mud-theme-dark .mud-snackbar-provider .mud-snackbar.mud-alert-filled-success {
    background: linear-gradient(135deg, rgba(184, 248, 78, 0.15), rgba(184, 248, 78, 0.25)) !important;
    border-color: rgba(184, 248, 78, 0.3) !important;
    color: #B8F84E !important;
}

.mud-theme-dark .mud-snackbar-provider .mud-snackbar.mud-alert-filled-error {
    background: linear-gradient(135deg, rgba(255, 75, 75, 0.15), rgba(255, 75, 75, 0.25)) !important;
    border-color: rgba(255, 75, 75, 0.3) !important;
    color: #FF4B4B !important;
}

.mud-theme-dark .mud-snackbar-provider .mud-snackbar.mud-alert-filled-warning {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.15), rgba(255, 193, 7, 0.25)) !important;
    border-color: rgba(255, 193, 7, 0.3) !important;
    color: #FFC107 !important;
}

.mud-theme-dark .mud-snackbar-provider .mud-snackbar.mud-alert-filled-info {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15), rgba(33, 150, 243, 0.25)) !important;
    border-color: rgba(33, 150, 243, 0.3) !important;
    color: #2196F3 !important;
}


/* Normal severity (no icon) */

.mud-theme-dark .mud-snackbar-provider .mud-snackbar.mud-alert-filled-normal {
    background: linear-gradient(135deg, rgba(184, 248, 78, 0.1), rgba(184, 248, 78, 0.2)) !important;
    border-color: rgba(184, 248, 78, 0.2) !important;
    color: #B8F84E !important;
}


/* Close button styling */

.mud-theme-dark .mud-snackbar .mud-button.mud-button-close {
    color: inherit !important;
    opacity: 0.7 !important;
}

.mud-theme-dark .mud-snackbar .mud-button.mud-button-close:hover {
    opacity: 1 !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}


/* ========================================
   MOBILE: Responsive snackbars

   These were previously hidden outright on phones because the fixed 450px
   width above overflows a phone viewport. Hiding them also suppressed every
   order confirmation AND every order error on mobile, so the fix is to
   constrain the width rather than remove the feedback. Top-anchored (matching
   the global TopRight position) so it never collides with the fixed mobile
   bottom nav.
   ======================================== */

@media (max-width: 600px) {
    .mud-snackbar-provider {
        left: 8px !important;
        right: 8px !important;
        top: calc(8px + env(safe-area-inset-top)) !important;
        bottom: auto !important;
        width: auto !important;
        max-width: none !important;
        align-items: stretch !important;
    }

    .mud-snackbar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
}


/* Theme Colors */

.mud-theme-dark {
    --mud-palette-background: #0D1215 !important;
    --mud-palette-surface: #0D1215 !important;
    --mud-palette-drawer-background: #0D1215 !important;
    --mud-palette-appbar-background: #0D1215 !important;
    --mud-palette-text-primary: #B8F84E !important;
    --mud-palette-text-secondary: #B8F84E !important;
    --mud-palette-primary: #B8F84E !important;
    --mud-palette-secondary: #B8F84E !important;
    --mud-palette-action-default: #666 !important;
    --mud-palette-drawer-text: #B8F84E !important;
    --mud-palette-drawer-icon: #666 !important;
    --mud-palette-lines-default: rgba(184, 248, 78, 0.1) !important;
    --mud-palette-divider: rgba(184, 248, 78, 0.1) !important;
    --mud-palette-table-lines: rgba(184, 248, 78, 0.1) !important;
    --mud-palette-table-striped: rgba(184, 248, 78, 0.02) !important;
    --mud-palette-table-hover: rgba(184, 248, 78, 0.05) !important;
}


/* Toggle group outlined border color to match app divider */

.mud-theme-dark .mud-toggle-group .mud-toggle-item.mud-button-outlined-default,
.mud-theme-dark .mud-toggle-group .mud-button.mud-button-outlined.mud-button-outlined-default {
    border-color: var(--mud-palette-divider) !important;
}

.mud-theme-dark .mud-toggle-group .mud-toggle-item-delimiter {
    border-left-color: var(--mud-palette-divider) !important;
    border-right-color: var(--mud-palette-divider) !important;
    box-shadow: inset 1px 0 0 0 var(--mud-palette-divider), inset -1px 0 0 0 var(--mud-palette-divider) !important;
}

.mud-theme-dark .mud-toggle-group .mud-button-root {
    color: #A2A2A2 !important;
}


/* Input Fields */

.mud-input,
.mud-select,
.mud-autocomplete {
    background-color: var(--mud-palette-background) !important;
}


/* Exception for automation tab asset select - needs transparent background */


/* Use wildcard selector to catch all nested elements regardless of Blazor scoping */

.simple-input-container .custom-autocomplete,
.simple-input-container .custom-autocomplete *,
.simple-input-container [class*="automation-asset"],
.simple-input-container [class*="automation-asset"] *,
.simple-input-container .automation-asset-select,
.simple-input-container .automation-asset-select *,
.simple-input-container .automation-asset-select.mud-autocomplete,
.simple-input-container .automation-asset-select.mud-select,
.simple-input-container .automation-asset-select .mud-input,
.simple-input-container .automation-asset-select .mud-input-control,
.simple-input-container .automation-asset-select .mud-input-control-input-container,
.simple-input-container .automation-asset-select .mud-input-root,
.simple-input-container .automation-asset-select .mud-input-slot,
.simple-input-container .automation-asset-select .mud-input-text,
.simple-input-container .automation-asset-select .mud-select-input {
    background: transparent !important;
    background-color: transparent !important;
}

.mud-input-label {
    color: var(--mud-palette-text-primary) !important;
}

.mud-input-outlined-border {
    border-color: rgba(184, 248, 78, 0.23) !important;
}

.mud-input:hover .mud-input-outlined-border {
    border-color: rgba(184, 248, 78, 0.5) !important;
}

.mud-input.mud-input-focused .mud-input-outlined-border {
    border-color: var(--mud-palette-primary) !important;
    border-width: 2px !important;
}

.mud-input-root,
.mud-select-input {
    color: #666 !important;
}

.mud-select.mud-select--disabled .mud-input-root {
    color: rgba(102, 102, 102, 0.4) !important;
}


/* DEX Select in Trading Settings - remove ALL borders */


/* Target the exact MudBlazor class combination with high specificity */

.mud-input-control.mud-select.dex-select,
div.mud-input-control.mud-select.dex-select,
.mud-input-control.mud-select.dex-select,
.mud-select.dex-select {
    border: none !important;
    border-bottom: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
}


/* Hide corner elements and outlined border remnants */

.dex-select .mud-input-outlined-border,
.dex-select fieldset,
.dex-select legend,
.mud-input-control.mud-select.dex-select .mud-input-outlined-border,
.mud-input-control.mud-select.dex-select fieldset {
    display: none !important;
    border: none !important;
    background: transparent !important;
}

.mud-input-control.dex-select,
.mud-input-control.dex-select .mud-input,
.mud-input-control.dex-select .mud-input-control-input-container,
.dex-select,
.dex-select .mud-input,
.dex-select .mud-input-control-input-container,
.dex-select * {
    border: none !important;
    border-bottom: none !important;
    border-width: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}


/* Nuclear: target ALL pseudo-elements inside dex-select */

.dex-select *::before,
.dex-select *::after,
.mud-input-control.dex-select *::before,
.mud-input-control.dex-select *::after {
    display: none !important;
    border: none !important;
    border-bottom: none !important;
    height: 0 !important;
    width: 0 !important;
    content: "" !important;
    background: none !important;
}


/* Dropdown/Popover Styling */

.mud-popover.mud-popover-open {
    background-color: #131B1F !important;
    border: 1px solid var(--mud-palette-divider) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
}

.mud-popover-provider>div {
    overflow: hidden !important;
}


/* List Styling */

.mud-list {
    background-color: #131B1F !important;
    color: #A2A2A2 !important;
    padding: 4px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.mud-list-item {
    color: #A2A2A2 !important;
    border-radius: 4px !important;
    margin: 2px 0 !important;
    transition: all 0.2s ease !important;
}

.mud-list-item:hover,
.mud-list-item.mud-selected,
.mud-list-item.mud-selected-item,
.mud-list-item.mud-selected:hover,
.mud-list-item.mud-selected-item:hover {
    background-color: transparent !important;
    color: #B8F84E !important;
}

.mud-list-item-text {
    color: inherit !important;
}


/* Scrollbar Styling */

.mud-list::-webkit-scrollbar {
    width: 8px !important;
}

.mud-list::-webkit-scrollbar-track {
    background: #141C21 !important;
    border-radius: 4px !important;
}

.mud-list::-webkit-scrollbar-thumb {
    background: #2C373D !important;
    border-radius: 4px !important;
}

.mud-list::-webkit-scrollbar-thumb:hover {
    background: #374750 !important;
}


/* Icon Buttons */

.mud-icon-button {
    color: #666 !important;
}

.mud-icon-button:hover {
    background-color: rgba(184, 248, 78, 0.1) !important;
    color: #B8F84E !important;
}


/* Chart Controls */

.chart-controls .mud-icon-button {
    color: #666 !important;
}

.chart-controls .mud-icon-button:hover,
.chart-controls .mud-icon-button.active {
    color: #B8F84E !important;
    text-shadow: 0 0 8px rgba(184, 248, 78, 0.5) !important;
}


/* Ultra Aggressive Slider Overrides - Maximum Specificity Force */


/* MAXIMUM SPECIFICITY - Override MudBlazor's default styles completely */


/* Base slider container - force ultra thin height */

div.mud-slider-container,
.mud-slider-container,
.trading-form .mud-slider-container,
.trading-form div.mud-slider-container {
    height: 12px !important;
    margin: 16px 0 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    min-height: 12px !important;
    max-height: 12px !important;
}


/* The actual HTML range input - force ultra thin track */

input.mud-slider-input,
.mud-slider-input,
input[type="range"].mud-slider-input,
.trading-form input.mud-slider-input,
.trading-form .mud-slider-input,
.trading-form input[type="range"].mud-slider-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 2px !important;
    background: #2C373D !important;
    border-radius: 1px !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: none !important;
    background-color: #2C373D !important;
}


/* Webkit slider track - force thin gray */

input.mud-slider-input::-webkit-slider-track,
.mud-slider-input::-webkit-slider-track,
.trading-form input.mud-slider-input::-webkit-slider-track {
    height: 2px !important;
    background: #2C373D !important;
    border-radius: 1px !important;
    border: none !important;
    box-shadow: none !important;
}


/* Webkit slider thumb - force small neon green circle */

input.mud-slider-input::-webkit-slider-thumb,
.mud-slider-input::-webkit-slider-thumb,
.trading-form input.mud-slider-input::-webkit-slider-thumb,
.trading-form .mud-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #B8F84E !important;
    border: 1px solid #0D1215 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin-top: -4px !important;
    transition: all 0.2s ease !important;
}

input.mud-slider-input::-webkit-slider-thumb:hover,
.mud-slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 0 8px rgba(184, 248, 78, 0.3) !important;
}


/* Firefox slider track */

input.mud-slider-input::-moz-range-track,
.mud-slider-input::-moz-range-track {
    height: 2px !important;
    background: #2C373D !important;
    border-radius: 1px !important;
    border: none !important;
    box-shadow: none !important;
}


/* Firefox slider thumb */

input.mud-slider-input::-moz-range-thumb,
.mud-slider-input::-moz-range-thumb {
    width: 10px !important;
    height: 10px !important;
    background-color: #B8F84E !important;
    border: 1px solid #0D1215 !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: none !important;
    border-style: solid !important;
}


/* Value label - clean tooltip style */

div.mud-slider-value-label,
.mud-slider-value-label,
.trading-form div.mud-slider-value-label,
.trading-form .mud-slider-value-label {
    background-color: #131B1F !important;
    color: #B8F84E !important;
    border: 1px solid rgba(184, 248, 78, 0.23) !important;
    border-radius: 6px !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    position: absolute !important;
    top: -35px !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
    z-index: 1000 !important;
}


/* Dialog Styling Overrides */


/* Set the base background for the entire dialog container */

.example-editor-dialog {
    background-color: rgba(13, 18, 21, 255) !important;
}


/* Style the dialog title bar */

.example-editor-dialog .mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    color: var(--mud-palette-text-primary) !important;
    background-color: rgba(13, 18, 21, 255) !important;
}


/* Style the main content area of the dialog (including padding) */

.example-editor-dialog .mud-dialog-content {
    background-color: rgba(13, 18, 21, 255) !important;
}


/* Ensure the MudCard within the dialog also gets the correct background */

.example-editor-dialog .mud-card {
    background-color: rgba(13, 18, 21, 255) !important;
    border: 1px solid var(--mud-palette-divider) !important;
}


/* Also target the card content area specifically */

.example-editor-dialog .mud-card-content {
    background-color: rgba(13, 18, 21, 255) !important;
}


/* Style text fields (MudTextField) within the dialog */

.example-editor-dialog .mud-input.mud-input-outlined {
    background-color: rgba(19, 27, 31, 255) !important;
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
}


/* Style the inner input slot of the text fields */

.example-editor-dialog .mud-input.mud-input-outlined .mud-input-slot {
    background-color: transparent !important;
    color: #A2A2A2 !important;
    /* Use appropriate text color */
}


/* Style the label for text fields */

.example-editor-dialog .mud-input-label {
    color: var(--mud-palette-text-secondary) !important;
}


/* --- Style for TerminalDocsDialog --- */


/* 
   NOTE: Styling MudDialog backgrounds can be tricky due to specificity/isolation.
   Targeting the dialog directly via its component class (.mud-dialog) combined 
   with a custom assigned class (.terminal-docs-dialog) in global overrides 
   was necessary here when other methods (ContentClass, component CSS) failed. 
*/


/* Target the main dialog element directly */

.mud-dialog.terminal-docs-dialog {
    background-color: #141C21 !important;
    /* Use lighter card background for whole dialog */
}


/* Style the custom tutorial cards within this specific dialog */

.terminal-docs-dialog .tutorial-card {
    background-color: #141C21 !important;
    /* Use slightly lighter card background */
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: var(--mud-default-borderradius) !important;
    /* Ensure card contents inherit or are transparent if needed */
    /* The rules below might be redundant if the card bg covers everything */
}


/* Target the card header within the specific dialog and card class */


/* Ensures header matches the card background */

.terminal-docs-dialog .tutorial-card .mud-card-header {
    background-color: inherit !important;
    /* Inherit from .tutorial-card */
}


/* Target the card content within the specific dialog and card class */


/* Ensures content area matches the card background */

.terminal-docs-dialog .tutorial-card .mud-card-content {
    background-color: inherit !important;
    /* Inherit from .tutorial-card */
}


/* --- End Style --- */


/* --- Style for AutomationDetailDialog --- */

.mud-dialog.automation-detail-dialog,
.mud-dialog-container.automation-detail-dialog,
.mud-dialog-root .automation-detail-dialog {
    background-color: #0D1215 !important;
}

.automation-detail-dialog .mud-dialog-title,
.mud-dialog-container.automation-detail-dialog .mud-dialog-title,
.mud-dialog.automation-detail-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(184, 248, 78, 0.15) !important;
    padding: 16px 20px !important;
}

.automation-detail-dialog .mud-dialog-content,
.mud-dialog-container.automation-detail-dialog .mud-dialog-content,
.mud-dialog.automation-detail-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    padding: 20px !important;
}

.automation-detail-dialog .mud-dialog-actions,
.mud-dialog-container.automation-detail-dialog .mud-dialog-actions,
.mud-dialog.automation-detail-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(184, 248, 78, 0.12) !important;
    padding: 12px 20px !important;
}

.automation-detail-dialog .status-icon.active {
    color: #B8F84E !important;
}

.automation-detail-dialog .status-icon.paused {
    color: #FFA500 !important;
}

.automation-detail-dialog .status-icon.inactive {
    color: #FF6B6B !important;
}


/* Start button - theme green */

.automation-detail-dialog .start-btn {
    background-color: #B8F84E !important;
    color: #0D1215 !important;
    font-weight: 600;
}

.automation-detail-dialog .start-btn:hover {
    background-color: #a5e043 !important;
}


/* Stop button - outlined red */

.automation-detail-dialog .stop-btn {
    border-color: #FF6B6B !important;
    color: #FF6B6B !important;
}

.automation-detail-dialog .stop-btn:hover {
    background-color: rgba(255, 107, 107, 0.1) !important;
}


/* Delete button - muted red text */

.automation-detail-dialog .delete-btn {
    color: #FF6B6B !important;
    opacity: 0.7;
}

.automation-detail-dialog .delete-btn:hover {
    opacity: 1;
    background-color: rgba(255, 107, 107, 0.08) !important;
}


/* Reset button - muted orange text */

.automation-detail-dialog .reset-btn {
    color: #FFA500 !important;
    opacity: 0.7;
}

.automation-detail-dialog .reset-btn:hover {
    opacity: 1;
    background-color: rgba(255, 165, 0, 0.08) !important;
}


/* Close button - theme accent */

.automation-detail-dialog .close-btn {
    color: #B8F84E !important;
}

.automation-detail-dialog .close-btn:hover {
    background-color: rgba(184, 248, 78, 0.08) !important;
}


/* Processing spinner in status area */

.automation-detail-dialog .status-spinner {
    color: #B8F84E !important;
}

.automation-detail-dialog .status-spinner svg {
    color: #B8F84E !important;
}


/* --- AutomationDetailDialog Mobile Styles --- */

@media (max-width: 599px) {
    .automation-detail-dialog .mud-dialog-title {
        padding: 12px 14px !important;
    }
    .automation-detail-dialog .mud-dialog-content {
        padding: 14px !important;
    }
    .automation-detail-dialog .mud-dialog-actions {
        padding: 10px 14px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    /* Action buttons - compact on mobile */
    .automation-detail-dialog .mud-dialog-actions .mud-button {
        font-size: 12px !important;
        padding: 6px 12px !important;
        min-width: auto !important;
    }
    /* Start/Stop buttons should be more prominent */
    .automation-detail-dialog .start-btn,
    .automation-detail-dialog .stop-btn {
        flex: 0 0 auto !important;
    }
    /* Group secondary actions */
    .automation-detail-dialog .edit-btn,
    .automation-detail-dialog .reset-btn,
    .automation-detail-dialog .delete-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}


/* --- AutomationDetailDialog: Feedback Toggle & Button Overrides --- */


/* Toggle group — override ALL button states inside the dialog (covers every MudBlazor class combo) */

.automation-detail-dialog .mud-toggle-group .mud-button-root {
    border-color: rgba(184, 248, 78, 0.2) !important;
    color: #A2A2A2 !important;
    background-color: transparent !important;
}

.automation-detail-dialog .mud-toggle-group .mud-button-root:hover {
    background-color: rgba(184, 248, 78, 0.06) !important;
    color: #E0E0E0 !important;
    border-color: rgba(184, 248, 78, 0.35) !important;
}

/* Selected toggle item — filled variant (any color) */

.automation-detail-dialog .mud-toggle-group .mud-button-root.mud-button-filled,
.automation-detail-dialog .mud-toggle-group .mud-button-root[class*="mud-button-filled"] {
    background-color: rgba(184, 248, 78, 0.2) !important;
    color: #B8F84E !important;
    border-color: rgba(184, 248, 78, 0.4) !important;
}

/* Toggle group container border */

.automation-detail-dialog .mud-toggle-group {
    border-color: rgba(184, 248, 78, 0.2) !important;
}

/* Toggle delimiter between items */

.automation-detail-dialog .mud-toggle-item-delimiter {
    border-left-color: rgba(184, 248, 78, 0.15) !important;
    border-right-color: rgba(184, 248, 78, 0.15) !important;
    box-shadow: none !important;
}

/* Feedback "Submit details" button */

.automation-detail-dialog .mud-button-filled-primary {
    background-color: #B8F84E !important;
    color: #0D1215 !important;
    font-weight: 600 !important;
}

.automation-detail-dialog .mud-button-filled-primary:hover {
    background-color: #a5e043 !important;
}

/* Feedback outlined buttons (Works great / Something off / Not working) */

.automation-detail-dialog .mud-button-outlined-success {
    border-color: rgba(184, 248, 78, 0.4) !important;
    color: #B8F84E !important;
}

.automation-detail-dialog .mud-button-outlined-success:hover {
    background-color: rgba(184, 248, 78, 0.08) !important;
}

.automation-detail-dialog .mud-button-outlined-warning {
    border-color: rgba(255, 165, 0, 0.4) !important;
    color: #FFA500 !important;
}

.automation-detail-dialog .mud-button-outlined-warning:hover {
    background-color: rgba(255, 165, 0, 0.08) !important;
}

.automation-detail-dialog .mud-button-outlined-error {
    border-color: rgba(255, 107, 107, 0.4) !important;
    color: #FF6B6B !important;
}

.automation-detail-dialog .mud-button-outlined-error:hover {
    background-color: rgba(255, 107, 107, 0.08) !important;
}

/* Feedback MudTextField — force transparent on the entire input stack */

.automation-detail-dialog .feedback-comment,
.automation-detail-dialog .feedback-comment .mud-input-control,
.automation-detail-dialog .feedback-comment .mud-input-control-input-container,
.automation-detail-dialog .feedback-comment .mud-input,
.automation-detail-dialog .feedback-comment .mud-input-outlined,
.automation-detail-dialog .feedback-comment .mud-input-slot,
.automation-detail-dialog .feedback-comment .mud-input-root,
.automation-detail-dialog .feedback-comment textarea {
    background: transparent !important;
    background-color: transparent !important;
}

.automation-detail-dialog .feedback-comment .mud-input-root,
.automation-detail-dialog .feedback-comment .mud-input-slot,
.automation-detail-dialog .feedback-comment textarea {
    color: #E0E0E0 !important;
}

.automation-detail-dialog .feedback-comment .mud-input-outlined-border {
    border-color: rgba(184, 248, 78, 0.2) !important;
}

.automation-detail-dialog .feedback-comment .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(184, 248, 78, 0.4) !important;
}

.automation-detail-dialog .feedback-comment .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #B8F84E !important;
}

.automation-detail-dialog .feedback-comment textarea::placeholder {
    color: #666 !important;
}

.automation-detail-dialog .feedback-comment .mud-input-label {
    color: #888 !important;
}


/* --- End AutomationDetailDialog Style --- */


/* --- Backtest dialog (shell + buttons rendered by MudDialogProvider, outside component scope) --- */

.mud-dialog.backtest-dialog {
    background-color: var(--degen-bg-secondary) !important;
    border: 1px solid var(--degen-border-accent-strong) !important;
    border-radius: 4px !important;
    max-width: 520px !important;
    color: var(--degen-text-primary) !important;
}

.mud-dialog.backtest-dialog .mud-dialog-title {
    background-color: var(--degen-bg-secondary) !important;
    border-bottom: 1px solid var(--degen-color-primary-muted) !important;
    padding: 16px 20px !important;
}

.mud-dialog.backtest-dialog .mud-dialog-content {
    background-color: var(--degen-bg-secondary) !important;
    padding: 20px !important;
}

.mud-dialog.backtest-dialog .mud-dialog-actions {
    background-color: var(--degen-bg-secondary) !important;
    border-top: 1px solid var(--degen-border-accent) !important;
    padding: 12px 20px !important;
}

.mud-dialog.backtest-dialog .mud-button-filled.mud-button-filled-primary {
    background-color: var(--degen-color-primary) !important;
    color: var(--degen-bg-primary) !important;
}

.mud-dialog.backtest-dialog .mud-button-text.mud-button-text-default {
    color: var(--degen-text-secondary) !important;
}

.mud-dialog.backtest-dialog .mud-button-text.mud-button-text-default:hover {
    color: var(--degen-text-primary) !important;
    background-color: var(--degen-color-primary-faint) !important;
}

.mud-dialog.backtest-dialog .mud-button-text.mud-button-text-primary {
    color: var(--degen-color-primary) !important;
}

.mud-dialog.backtest-dialog .mud-button-text.mud-button-text-primary:hover {
    background-color: var(--degen-color-primary-subtle) !important;
}

.mud-dialog.backtest-dialog .mud-button-text.mud-button-text-error {
    color: var(--degen-color-error) !important;
}

.mud-dialog.backtest-dialog .mud-button-text.mud-button-text-error:hover {
    background-color: var(--degen-color-primary-faint) !important;
}

.mud-dialog.backtest-dialog .mud-dialog-title .mud-icon-button {
    color: var(--degen-text-tertiary) !important;
}

.mud-dialog.backtest-dialog .mud-dialog-title .mud-icon-button:hover {
    color: var(--degen-text-primary) !important;
    background-color: var(--degen-color-primary-faint) !important;
}

/* Progress bar — determinate + indeterminate states (compound selectors beat MudBlazor defaults) */
.mud-dialog.backtest-dialog .mud-progress-linear {
    background-color: var(--degen-color-primary-muted) !important;
}

.mud-dialog.backtest-dialog .mud-progress-linear-bar,
.mud-dialog.backtest-dialog .mud-progress-linear-bar.mud-color-primary,
.mud-dialog.backtest-dialog .mud-progress-linear-bar1,
.mud-dialog.backtest-dialog .mud-progress-linear-bar1.mud-color-primary,
.mud-dialog.backtest-dialog .mud-progress-linear-bar2,
.mud-dialog.backtest-dialog .mud-progress-linear-bar2.mud-color-primary {
    background-color: var(--degen-color-primary) !important;
}

.mud-dialog.backtest-dialog .mud-progress-linear-bar.mud-color-warning,
.mud-dialog.backtest-dialog .mud-progress-linear-bar1.mud-color-warning,
.mud-dialog.backtest-dialog .mud-progress-linear-bar2.mud-color-warning {
    background-color: var(--degen-color-warning) !important;
}

/* Popover (also outside dialog DOM) */

.backtest-select-popover {
    background-color: var(--degen-bg-surface) !important;
    border: 1px solid var(--degen-border-accent-strong) !important;
}

.backtest-select-popover .mud-list-item {
    color: var(--degen-text-primary) !important;
}

.backtest-select-popover .mud-list-item:hover {
    background-color: var(--degen-color-primary-faint) !important;
}

.backtest-select-popover .mud-list-item.mud-selected-item {
    background-color: var(--degen-color-primary-muted) !important;
    color: var(--degen-color-primary) !important;
}

/* --- End Backtest Dialog --- */


/* --- Style for AutomationResetDialog --- */

.mud-dialog.automation-reset-dialog,
.mud-dialog-container.automation-reset-dialog,
.mud-dialog-root .automation-reset-dialog {
    background-color: #0D1215 !important;
}

.automation-reset-dialog .mud-dialog-title,
.mud-dialog-container.automation-reset-dialog .mud-dialog-title,
.mud-dialog.automation-reset-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(255, 165, 0, 0.15) !important;
    padding: 16px 20px !important;
}

.automation-reset-dialog .mud-dialog-content,
.mud-dialog-container.automation-reset-dialog .mud-dialog-content,
.mud-dialog.automation-reset-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    padding: 20px !important;
}

.automation-reset-dialog .mud-dialog-actions,
.mud-dialog-container.automation-reset-dialog .mud-dialog-actions,
.mud-dialog.automation-reset-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(255, 165, 0, 0.12) !important;
    padding: 12px 20px !important;
}


/* --- End AutomationResetDialog Style --- */


/* --- Style for ShareAutomationDialog --- */

.mud-dialog.share-automation-dialog,
.mud-dialog-container.share-automation-dialog,
.mud-dialog-root .share-automation-dialog {
    background-color: #0D1215 !important;
    border: 1px solid rgba(184, 248, 78, 0.2) !important;
    border-radius: 4px !important;
    color: #E9E9E9 !important;
}

.share-automation-dialog .mud-dialog-title,
.mud-dialog.share-automation-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(184, 248, 78, 0.15) !important;
    padding: 16px 20px !important;
}

.share-automation-dialog .mud-dialog-content,
.mud-dialog.share-automation-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    padding: 20px !important;
}

.share-automation-dialog .mud-dialog-actions,
.mud-dialog.share-automation-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(184, 248, 78, 0.12) !important;
    padding: 12px 20px !important;
}

.mud-dialog.share-automation-dialog .mud-button-filled.mud-button-filled-primary {
    background-color: #B8F84E !important;
    color: #080809 !important;
}

/* --- End ShareAutomationDialog Style --- */


/* --- Style for OnboardingDialog --- */


/* Target the main dialog element directly */

.mud-dialog.onboarding-dialog {
    background-color: #0D1215 !important;
}


/* Title area styling */

.onboarding-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(184, 248, 78, 0.15) !important;
}


/* Content area styling */

.onboarding-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
}


/* --- End OnboardingDialog Style --- */


/* --- LinkDeviceDialog Style --- */

.mud-dialog.link-device-dialog {
    background-color: #0D1215 !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
    border-radius: 8px !important;
    max-width: 400px !important;
}

.link-device-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(102, 102, 102, 0.15) !important;
    padding: 16px 20px !important;
}

.link-device-dialog .dialog-title-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.link-device-dialog .title-icon {
    color: #B8F84E !important;
    font-size: 24px !important;
}

.link-device-dialog .mud-dialog-title .mud-typography-h6 {
    color: #fff !important;
    font-weight: 500 !important;
    font-size: 16px !important;
}

.link-device-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    padding: 0 !important;
}

.link-device-dialog .link-dialog-content {
    padding: 24px 20px;
}

.link-device-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(102, 102, 102, 0.15) !important;
    padding: 12px 20px !important;
    gap: 8px !important;
}


/* State containers (loading, success, error) */

.link-device-dialog .link-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 0;
    gap: 16px;
}

.link-device-dialog .state-icon {
    font-size: 48px !important;
}

.link-device-dialog .state-icon.success {
    color: #B8F84E !important;
}

.link-device-dialog .state-icon.error {
    color: #ff6b6b !important;
}

.link-device-dialog .state-title {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.link-device-dialog .state-title.success {
    color: #B8F84E !important;
}

.link-device-dialog .state-text {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
}

.link-device-dialog .state-text.error {
    color: #ff6b6b !important;
}

.link-device-dialog .retry-btn {
    margin-top: 8px !important;
    color: #B8F84E !important;
    border-color: rgba(184, 248, 78, 0.3) !important;
}

.link-device-dialog .retry-btn:hover {
    border-color: #B8F84E !important;
    background-color: rgba(184, 248, 78, 0.1) !important;
}


/* Instructions styling */

.link-device-dialog .link-instructions {
    text-align: center;
    margin-bottom: 16px;
}

.link-device-dialog .step-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.link-device-dialog .step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: #B8F84E;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    color: #000;
}

.link-device-dialog .step-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}


/* QR Code container */

.link-device-dialog .qr-container {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: #fff;
    border-radius: 8px;
    margin: 0 auto 20px auto;
    width: fit-content;
}

.link-device-dialog .qr-container svg {
    display: block;
}


/* PIN display */

.link-device-dialog .pin-display {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 16px 0;
}

.link-device-dialog .pin-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 52px;
    background: rgba(184, 248, 78, 0.08);
    border: 2px solid #B8F84E;
    border-radius: 6px;
    font-size: 24px;
    font-weight: 700;
    color: #B8F84E;
    font-family: 'Source Code Pro', monospace;
}


/* Expiry info */

.link-device-dialog .expiry-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 12px;
}

.link-device-dialog .expiry-icon {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 16px !important;
}

.link-device-dialog .expiry-text {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
}


/* Polling status */

.link-device-dialog .polling-status {
    text-align: center;
    margin-top: 20px;
}

.link-device-dialog .polling-bar {
    height: 2px !important;
    margin-bottom: 8px;
}

.link-device-dialog .polling-text {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 12px !important;
}


/* Dialog action buttons */

.link-device-dialog .cancel-btn {
    color: #666 !important;
    background: transparent !important;
    text-transform: none !important;
}

.link-device-dialog .cancel-btn:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

.link-device-dialog .new-code-btn {
    color: #B8F84E !important;
    background: transparent !important;
    border: 1px solid rgba(184, 248, 78, 0.3) !important;
    text-transform: none !important;
}

.link-device-dialog .new-code-btn:hover {
    background: rgba(184, 248, 78, 0.1) !important;
    border-color: #B8F84E !important;
}

.link-device-dialog .done-btn {
    color: #000 !important;
    background: #B8F84E !important;
    text-transform: none !important;
    font-weight: 500 !important;
}

.link-device-dialog .done-btn:hover {
    background: #a5e042 !important;
}


/* --- End LinkDeviceDialog Style --- */


/* --- OnboardingDialog Deposit Input Styling --- */


/* Compact deposit source container */

.onboarding-deposit-source {
    padding: 12px;
    background: rgba(184, 248, 78, 0.03);
    border-radius: 4px;
    margin-bottom: 12px;
    border: 1px solid rgba(184, 248, 78, 0.1);
    transition: all 0.2s ease;
}

.onboarding-deposit-source:hover {
    border-color: rgba(184, 248, 78, 0.2);
    background: rgba(184, 248, 78, 0.04);
}


/* Source label and available amount */

.deposit-source-label {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.deposit-available-amount {
    color: #B8F84E;
    font-size: 12px;
}


/* Compact input row layout */

.deposit-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}


/* Custom amount input container - matching TradingSettingsDialog pattern */

.deposit-amount-container {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: #0b0d0f;
    border: 1px solid rgba(184, 248, 78, 0.15);
    border-radius: 4px;
    padding: 0 8px;
    height: 36px;
    transition: all 0.2s ease;
}

.deposit-amount-container:hover {
    border-color: rgba(184, 248, 78, 0.3);
    background-color: #0f1214;
}

.deposit-amount-container:focus-within {
    border-color: #B8F84E;
    background-color: #0f1214;
}


/* Native HTML input - no MudBlazor overrides */

.deposit-amount-input {
    flex: 1;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #E9E9E9;
    font-family: 'Source Code Pro', monospace;
    font-size: 13px;
    padding: 0;
    min-width: 0;
}

.deposit-amount-input::placeholder {
    color: #666;
    opacity: 0.7;
}

.deposit-amount-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}


/* Remove number input spinners */

.deposit-amount-input::-webkit-inner-spin-button,
.deposit-amount-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.deposit-amount-input {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* MAX button styling */

.deposit-max-btn {
    background: transparent;
    border: none;
    color: #B8F84E;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    transition: all 0.2s ease;
    border-radius: 3px;
}

.deposit-max-btn:hover {
    background: rgba(184, 248, 78, 0.1);
    color: #B8F84E;
}

.deposit-max-btn:active {
    transform: scale(0.95);
}


/* Deposit action button consistent sizing */

.deposit-action-btn {
    height: 36px !important;
    min-width: 90px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}


/* --- End OnboardingDialog Input Styling --- */


/* =============================================================================
   Asset Browser - Compact List & Badge Styling
   ============================================================================= */


/* Asset Browser List - applied via ListClass on autocomplete */

.asset-browser-list {
    padding: 0 !important;
}

.asset-browser-list .mud-list-item {
    min-height: 20px !important;
    padding: 1px 8px !important;
    margin: 0 !important;
}


/* Asset Item Layout */

.asset-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}

.asset-symbol {
    font-weight: 500;
    color: var(--degen-badge-symbol-fg);
    min-width: 60px;
    font-size: 11px;
}


/* Leverage Badge - Subtle dark background */

.asset-leverage-badge {
    font-size: 9px;
    font-weight: 500;
    padding: 0px 4px;
    border-radius: var(--degen-radius-sm);
    background-color: var(--degen-badge-leverage-bg);
    color: var(--degen-badge-leverage-fg);
}


/* HIP-3 sub-market Badge - grey (consolidated; the color-coded pill is the venue badge) */

.asset-dex-badge {
    font-size: 9px;
    font-weight: 500;
    padding: 0px 4px;
    border-radius: var(--degen-radius-sm);
    background-color: var(--degen-badge-submarket-bg);
    color: var(--degen-badge-submarket-fg);
}


/* Venue Badge - color-coded pill, one hue per venue (only shown when >1 venue enabled) */

.asset-venue-badge {
    font-size: 9px;
    font-weight: 600;
    padding: 0px 4px;
    border-radius: var(--degen-radius-sm);
    letter-spacing: 0.02em;
}

.asset-venue-badge--hyperliquid {
    background-color: var(--degen-venue-hyperliquid-bg);
    color: var(--degen-venue-hyperliquid);
}

.asset-venue-badge--lighter {
    background-color: var(--degen-venue-lighter-bg);
    color: var(--degen-venue-lighter);
}

.asset-venue-badge--polymarket {
    background-color: var(--degen-venue-polymarket-bg);
    color: var(--degen-venue-polymarket);
}

.asset-venue-badge--default {
    background-color: var(--degen-venue-default-bg);
    color: var(--degen-venue-default);
}


/* Hover states for asset browser items */

.asset-browser-list .mud-list-item:hover .asset-symbol,
.asset-browser-list .mud-list-item.mud-selected-item .asset-symbol {
    color: var(--degen-color-primary);
}

.asset-browser-list .mud-list-item:hover .asset-leverage-badge,
.asset-browser-list .mud-list-item.mud-selected-item .asset-leverage-badge {
    background-color: var(--degen-color-primary-subtle);
    color: var(--degen-color-primary);
}


/* --- End Asset Browser Styling --- */


/* =============================================================================
   Trading order-type advanced menu (Stop / TWAP / Trailing Limit / Chase)
   Rendered at the page root via MudMenu popover, so it must be styled globally
   here (the TradingTab scoped CSS cannot reach it). Tucks the menu tight under
   the 80px order-type tab: shrink to content, smaller text, compact rows.
   ============================================================================= */

.type-menu-popover {
    min-width: 0 !important;
    width: max-content !important;
}

/* MudBlazor floors the menu list at min-width:112px (.mud-menu-list), which left
   dead space on the right since our items are far narrower. Drop the floor so the
   menu shrinks to its content. Covers both the ListClass element and the inner
   .mud-menu-list, depending on where MudBlazor lands the class. */
.type-menu-list,
.type-menu-popover .mud-menu-list {
    padding: 2px !important;
    min-width: 0 !important;
}

/* MudBlazor 8 renders menu items as .mud-menu-item / .mud-menu-item-text (the v6
   .mud-list-item class is gone), so the sizing must target these. The default
   .mud-menu-item is padding:8px 12px with the text span carrying margin:4px 0 and
   the body font-size -- which is what made the menu read oversized. */
.type-menu-list .mud-menu-item {
    min-height: 0 !important;
    padding: 3px 8px !important;
}

.type-menu-list .mud-menu-item .mud-menu-item-text,
.type-menu-list .mud-menu-item .mud-menu-item-text .mud-typography {
    font-size: 11px !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Mobile: keep the menu narrow/compact but restore a comfortable tap target
   (the order-type tab itself bumps to 44px at this breakpoint). */
@media (max-width: 599px) {
    .type-menu-list .mud-menu-item {
        min-height: 40px !important;
        padding: 8px 8px !important;
    }
}


/* =============================================================================
   Automation History Dialog
   ============================================================================= */


/* Main dialog background */

.mud-dialog.automation-history-dialog,
.mud-dialog-container.automation-history-dialog,
.mud-dialog-root .automation-history-dialog {
    background-color: #0D1215 !important;
}

.automation-history-dialog .mud-dialog-title,
.mud-dialog-container.automation-history-dialog .mud-dialog-title,
.mud-dialog.automation-history-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(184, 248, 78, 0.15) !important;
    padding: 16px 20px !important;
}

.automation-history-dialog .mud-dialog-content,
.mud-dialog-container.automation-history-dialog .mud-dialog-content,
.mud-dialog.automation-history-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    padding: 0 !important;
}

.automation-history-dialog .mud-dialog-actions,
.mud-dialog-container.automation-history-dialog .mud-dialog-actions,
.mud-dialog.automation-history-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(184, 248, 78, 0.12) !important;
    padding: 12px 16px !important;
}


/* Filter inputs styling - TextField and Select */


/* Use CSS custom properties for consistent theming */

.mud-dialog.automation-history-dialog .filters-row {
    --mud-palette-text-primary: #E0E0E0;
    --mud-palette-text-secondary: #888;
}


/* Remove backgrounds from input containers */

.mud-dialog.automation-history-dialog .mud-input-control,
.mud-dialog.automation-history-dialog .mud-input,
.mud-dialog.automation-history-dialog .mud-select {
    background-color: transparent !important;
}


/* Outlined border styling */

.mud-dialog.automation-history-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(184, 248, 78, 0.25) !important;
    background-color: transparent !important;
}

.mud-dialog.automation-history-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(184, 248, 78, 0.5) !important;
}

.mud-dialog.automation-history-dialog .mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: #B8F84E !important;
    border-width: 2px !important;
}


/* Input text - override global color: #666 rule */

.mud-dialog.automation-history-dialog .mud-input-root,
.mud-dialog.automation-history-dialog .mud-select-input,
.mud-dialog.automation-history-dialog .mud-input-slot,
.mud-dialog.automation-history-dialog input {
    color: #E0E0E0 !important;
    -webkit-text-fill-color: #E0E0E0 !important;
    background-color: transparent !important;
}


/* Placeholder text (search field and unselected dropdowns) */

.mud-dialog.automation-history-dialog input::placeholder {
    color: #888 !important;
    -webkit-text-fill-color: #888 !important;
    opacity: 1 !important;
}


/* MudSelect: placeholder when no value selected */

.mud-dialog.automation-history-dialog .mud-select:not(.mud-input-has-value) .mud-input-slot {
    color: #888 !important;
    -webkit-text-fill-color: #888 !important;
}


/* MudSelect: selected value text */

.mud-dialog.automation-history-dialog .mud-select.mud-input-has-value .mud-input-slot {
    color: #E0E0E0 !important;
    -webkit-text-fill-color: #E0E0E0 !important;
}


/* Input labels */

.mud-dialog.automation-history-dialog .mud-input-label {
    color: #888 !important;
}

.mud-dialog.automation-history-dialog .mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    background-color: #0D1215 !important;
    padding: 0 4px !important;
}

.mud-dialog.automation-history-dialog .mud-input-control.mud-input-focused .mud-input-label {
    color: #B8F84E !important;
}


/* Icons (search, dropdown arrow) */

.mud-dialog.automation-history-dialog .mud-input-adornment .mud-icon-root {
    color: #888 !important;
}

.mud-dialog.automation-history-dialog .mud-input-control:hover .mud-input-adornment .mud-icon-root,
.mud-dialog.automation-history-dialog .mud-input-control.mud-input-focused .mud-input-adornment .mud-icon-root {
    color: #B8F84E !important;
}


/* Pagination styling */

.automation-history-dialog .mud-pagination {
    justify-content: center;
}

.automation-history-dialog .mud-pagination-item {
    color: #A2A2A2;
}

.automation-history-dialog .mud-pagination-item.mud-pagination-item-selected {
    background-color: rgba(184, 248, 78, 0.15) !important;
    color: #B8F84E !important;
}


/* =============================================================================
   Automation Log Detail Dialog
   ============================================================================= */


/* Main dialog background */

.mud-dialog.automation-log-detail-dialog,
.mud-dialog-container.automation-log-detail-dialog,
.mud-dialog-root .automation-log-detail-dialog {
    background-color: #0D1215 !important;
}

.automation-log-detail-dialog .mud-dialog-title,
.mud-dialog-container.automation-log-detail-dialog .mud-dialog-title,
.mud-dialog.automation-log-detail-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(184, 248, 78, 0.15) !important;
    padding: 16px 20px !important;
}

.automation-log-detail-dialog .mud-dialog-content,
.mud-dialog-container.automation-log-detail-dialog .mud-dialog-content,
.mud-dialog.automation-log-detail-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    max-height: 70vh;
    overflow-y: auto;
}

.automation-log-detail-dialog .mud-dialog-actions,
.mud-dialog-container.automation-log-detail-dialog .mud-dialog-actions,
.mud-dialog.automation-log-detail-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(184, 248, 78, 0.12) !important;
    padding: 12px 16px !important;
}


/* Mobile overrides for history dialogs */

@media (max-width: 600px) {
    .automation-history-dialog .mud-dialog {
        margin: 8px;
    }
    .automation-history-dialog .mud-dialog-content {
        max-height: calc(100vh - 160px);
    }
    .automation-log-detail-dialog .mud-dialog-content {
        max-height: calc(100vh - 160px);
    }
}


/* --- End Automation History Dialog Styling --- */


/* =============================================================================
   Feedback Detail Dialog
   ============================================================================= */

.mud-dialog.feedback-detail-dialog,
.mud-dialog-container.feedback-detail-dialog {
    background-color: #131B1F !important;
    max-width: 320px !important;
}

.mud-dialog.feedback-detail-dialog .mud-dialog-title,
.feedback-detail-dialog .mud-dialog-title {
    background-color: #131B1F !important;
    border-bottom: 1px solid rgba(184, 248, 78, 0.1) !important;
    padding: 12px 16px !important;
    min-height: auto !important;
}

.feedback-detail-dialog .mud-dialog-title .mud-typography {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #A2A2A2 !important;
}


/* Close button styling */

.feedback-detail-dialog .mud-dialog-title .mud-button-close {
    color: #555 !important;
    width: 24px !important;
    height: 24px !important;
    padding: 4px !important;
}

.feedback-detail-dialog .mud-dialog-title .mud-button-close:hover {
    color: #888 !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.mud-dialog.feedback-detail-dialog .mud-dialog-content,
.feedback-detail-dialog .mud-dialog-content {
    background-color: #131B1F !important;
    padding: 12px 16px !important;
}

.mud-dialog.feedback-detail-dialog .mud-dialog-actions,
.feedback-detail-dialog .mud-dialog-actions {
    background-color: #131B1F !important;
    border-top: 1px solid rgba(184, 248, 78, 0.08) !important;
    padding: 10px 16px !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}


/* --- End Feedback Detail Dialog Styling --- */


/* =============================================================================
   Lightweight Charts Pane Separator Glow Override
   
   The lightweight-charts library renders pane separators with:
   - <tr style="height: 1px;"> - the row
   - <td> with background color - the 1px visible line  
   - <div style="height: 9px; top: -4px;"> - the 9px clickable hitbox
   
   Problem: On hover, the library applies the hover color to the hitbox div,
   making the glow appear 9px thick instead of proportional to the 1px line.
   
   Solution: Force the hitbox div to stay transparent, add a thin glow via
   box-shadow on the td element.
   ============================================================================= */


/* Force the 9px hitbox div to stay transparent - prevent thick glow */

.tv-lightweight-charts tr[style*="height: 1px"] td>div[style*="height: 9px"],
.tv-lightweight-charts tr[style*="height: 1px"] td>div[style*="cursor: row-resize"] {
    background: transparent !important;
}


/* Add thin glow effect via box-shadow on the 1px td line */

.tv-lightweight-charts tr[style*="height: 1px"] td {
    transition: box-shadow 150ms ease, background 150ms ease;
}

.tv-lightweight-charts tr[style*="height: 1px"]:hover td {
    background: rgba(184, 248, 78, 0.6) !important;
    box-shadow: 0 0 4px 1px rgba(184, 248, 78, 0.4);
}


/* --- End Lightweight Charts Pane Separator Glow Override --- */


/* Hide TradingView watermark/logo from Lightweight Charts.
   Primary method: attributionLogo: false in config.js
   This CSS is a fallback to ensure any TradingView attribution links are hidden.
   We display our own DegenAI watermark instead (see LightweightChart.razor). */

.tv-lightweight-charts a[href*="tradingview"],
.tv-lightweight-charts a[target="_blank"][href*="tradingview.com"] {
    display: none !important;
}


/* ============================================================= */


/* === Indicator Legend Styles === */


/* ============================================================= */


/* Legend container - positioned in top-left of chart pane */

.indicator-legend-container {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 4px;
    pointer-events: none;
    /* Allow chart interaction through gaps */
    max-width: calc(100% - 80px);
    /* Leave room for price scale */
}


/* Main price pane legend */

.indicator-legend-container.main-pane {
    /* Default positioning is fine for main pane */
}


/* Oscillator pane legends - will be positioned by JS based on pane index */

.indicator-legend-container.oscillator-pane {
    /* Position calculated dynamically */
}


/* Individual legend item */

.indicator-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    background: rgba(19, 27, 31, 0.85);
    border-radius: 4px;
    pointer-events: auto;
    /* Re-enable interaction for items */
    font-family: 'Source Code Pro', monospace;
    font-size: 11px;
    color: #A2A2A2;
    white-space: nowrap;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.indicator-legend-item:hover {
    background: rgba(26, 35, 40, 0.9);
    border-color: rgba(255, 255, 255, 0.1);
}


/* Hidden indicator styling */

.indicator-legend-item.hidden-indicator {
    opacity: 0.5;
}

.indicator-legend-item.hidden-indicator .legend-name {
    text-decoration: line-through;
    color: #666;
}


/* Color dots container */

.legend-color-dots {
    display: flex;
    align-items: center;
    gap: 3px;
}


/* Individual color dot */

.legend-color-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}


/* Indicator name (clickable) */

.legend-name {
    cursor: pointer;
    color: #DDD;
    font-weight: 500;
    transition: color 0.15s ease;
}

.legend-name:hover {
    color: #B8F84E;
}


/* Value display */

.legend-value {
    color: #A2A2A2;
    font-weight: 400;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Settings button */

.legend-settings-btn {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #666;
    font-size: 12px;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.indicator-legend-item:hover .legend-settings-btn {
    opacity: 1;
}

.legend-settings-btn:hover {
    color: #B8F84E;
}


/* Close/remove button */

.legend-close-btn {
    background: none;
    border: none;
    padding: 0 2px;
    cursor: pointer;
    color: #666;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
}

.indicator-legend-item:hover .legend-close-btn {
    opacity: 1;
}

.legend-close-btn:hover {
    color: #FD4F4F;
}


/* Mobile: Smaller legend items */

@media (max-width: 599px) {
    .indicator-legend-container {
        top: 4px;
        left: 4px;
        gap: 2px;
    }
    .indicator-legend-item {
        padding: 2px 6px;
        font-size: 10px;
        gap: 4px;
    }
    .legend-color-dot {
        width: 6px;
        height: 6px;
    }
    /* Always show buttons on mobile (no hover) */
    .legend-settings-btn,
    .legend-close-btn {
        opacity: 0.7;
    }
}


/* TerminalDocsDialog — MudBlazor internal overrides
   Scoped via .mud-dialog.terminal-docs-dialog (no space = same element).
   Dialog renders via MudDialogProvider, so scoped CSS can't reach these. */

.mud-dialog.terminal-docs-dialog .mud-dialog-title .mud-typography-h6 {
    color: var(--degen-color-primary) !important;
}

.mud-dialog.terminal-docs-dialog .mud-tabs-tabbar,
.mud-dialog.terminal-docs-dialog .mud-tabs-tabbar-inner,
.mud-dialog.terminal-docs-dialog .mud-tabs-tabbar-content,
.mud-dialog.terminal-docs-dialog .mud-tabs-tabbar-wrapper {
    background-color: transparent !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}

.mud-dialog.terminal-docs-dialog .mud-tabs-tabbar-inner {
    background-color: #1E252B !important;
    border-radius: var(--degen-radius-md) var(--degen-radius-md) 0 0;
}

.mud-dialog.terminal-docs-dialog .mud-tab {
    color: var(--degen-text-secondary) !important;
    font-family: var(--degen-font-sans);
    font-size: var(--degen-font-size-sm);
    letter-spacing: 0.3px;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    padding: 6px 14px !important;
    text-transform: none !important;
}

.mud-dialog.terminal-docs-dialog .mud-tab:hover {
    color: var(--degen-text-primary) !important;
    background: rgba(255, 255, 255, 0.04);
}

.mud-dialog.terminal-docs-dialog .mud-tab.mud-tab-active {
    background-color: rgba(159, 212, 68, 0.49) !important;
    color: #FFFFFF !important;
}

.mud-dialog.terminal-docs-dialog .mud-tab-slider {
    display: none !important;
}

.mud-dialog.terminal-docs-dialog .mud-tabs-panels {
    min-height: 320px;
}


/* Accessibility: Reduced Motion Support */

@media (prefers-reduced-motion: reduce) {
    .indicator-legend-item,
    .legend-name,
    .legend-settings-btn,
    .legend-close-btn {
        transition: none !important;
    }
}


/* === End Indicator Legend Styles === */


/* ──────────────────────────────────────────
   ShareAutomationDialog
   ────────────────────────────────────────── */

.mud-dialog.share-automation-dialog,
.mud-dialog-container.share-automation-dialog,
.mud-dialog-root .share-automation-dialog {
    background-color: #0D1215 !important;
}

.mud-dialog.share-automation-dialog {
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
}

.share-automation-dialog .mud-dialog-title,
.mud-dialog-container.share-automation-dialog .mud-dialog-title,
.mud-dialog.share-automation-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(184, 248, 78, 0.15) !important;
    padding: 16px 20px !important;
}

.share-automation-dialog .mud-dialog-content,
.mud-dialog-container.share-automation-dialog .mud-dialog-content,
.mud-dialog.share-automation-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    padding: 20px !important;
}

.share-automation-dialog .mud-dialog-actions,
.mud-dialog-container.share-automation-dialog .mud-dialog-actions,
.mud-dialog.share-automation-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(184, 248, 78, 0.12) !important;
    padding: 12px 20px !important;
}

.share-automation-dialog .mud-dialog-title .mud-icon-button {
    color: var(--degen-text-tertiary) !important;
}

.share-automation-dialog .mud-dialog-title .mud-icon-button:hover {
    color: var(--degen-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* ──────────────────────────────────────────
   Competition Dialogs
   ────────────────────────────────────────── */


/* --- CompetitionOnboardingDialog (step-by-step stepper) --- */

.mud-dialog.competition-onboarding-dialog,
.mud-dialog-container.competition-onboarding-dialog,
.mud-dialog-root .competition-onboarding-dialog {
    background-color: var(--degen-bg-secondary) !important;
    border: 1px solid var(--degen-border-default) !important;
    border-radius: 4px !important;
    color: var(--degen-text-primary) !important;
}

.competition-onboarding-dialog .mud-dialog-title,
.mud-dialog-container.competition-onboarding-dialog .mud-dialog-title,
.mud-dialog.competition-onboarding-dialog .mud-dialog-title {
    background-color: var(--degen-bg-secondary) !important;
    border-bottom: none !important;
    padding: 20px 24px 0 !important;
}

.competition-onboarding-dialog .mud-dialog-content,
.mud-dialog-container.competition-onboarding-dialog .mud-dialog-content,
.mud-dialog.competition-onboarding-dialog .mud-dialog-content {
    background-color: var(--degen-bg-secondary) !important;
    padding: 16px 24px 24px !important;
}

/* Close button (X) — color only, keep default MudBlazor SVG icon */
.mud-dialog.competition-onboarding-dialog .mud-dialog-title .mud-button-root {
    color: var(--degen-text-tertiary) !important;
}

.mud-dialog.competition-onboarding-dialog .mud-dialog-title .mud-button-root:hover {
    color: var(--degen-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* MudTextField / MudNumericField / MudCheckBox outlined borders */
.mud-dialog.competition-onboarding-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--degen-border-default) !important;
}

.mud-dialog.competition-onboarding-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--degen-color-primary) !important;
}

.mud-dialog.competition-onboarding-dialog .mud-input-slot,
.mud-dialog.competition-onboarding-dialog .mud-select-input {
    color: var(--degen-text-primary) !important;
    -webkit-text-fill-color: var(--degen-text-primary) !important;
}

.mud-dialog.competition-onboarding-dialog .mud-input-label {
    color: var(--degen-text-secondary) !important;
}

/* --- End CompetitionOnboardingDialog Style --- */


/* --- CompetitionDepositDialog --- */

.mud-dialog.competition-deposit-dialog,
.mud-dialog-container.competition-deposit-dialog,
.mud-dialog-root .competition-deposit-dialog {
    background-color: var(--degen-bg-secondary) !important;
    border: 1px solid var(--degen-border-default) !important;
    border-radius: 4px !important;
    color: var(--degen-text-primary) !important;
}

.competition-deposit-dialog .mud-dialog-title,
.mud-dialog-container.competition-deposit-dialog .mud-dialog-title,
.mud-dialog.competition-deposit-dialog .mud-dialog-title {
    background-color: var(--degen-bg-secondary) !important;
    border-bottom: 1px solid var(--degen-border-subtle) !important;
    padding: 16px 20px !important;
}

.competition-deposit-dialog .mud-dialog-content,
.mud-dialog-container.competition-deposit-dialog .mud-dialog-content,
.mud-dialog.competition-deposit-dialog .mud-dialog-content {
    background-color: var(--degen-bg-secondary) !important;
    padding: 20px !important;
}

.competition-deposit-dialog .mud-dialog-actions,
.mud-dialog-container.competition-deposit-dialog .mud-dialog-actions,
.mud-dialog.competition-deposit-dialog .mud-dialog-actions {
    background-color: var(--degen-bg-secondary) !important;
    border-top: 1px solid var(--degen-border-subtle) !important;
    padding: 12px 20px !important;
}

/* Close button */
.mud-dialog.competition-deposit-dialog .mud-dialog-title .mud-button-root {
    color: var(--degen-text-tertiary) !important;
}

.mud-dialog.competition-deposit-dialog .mud-dialog-title .mud-button-root:hover {
    color: var(--degen-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Input overrides */
.mud-dialog.competition-deposit-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--degen-border-default) !important;
}

.mud-dialog.competition-deposit-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--degen-color-primary) !important;
}

.mud-dialog.competition-deposit-dialog .mud-input-slot {
    color: var(--degen-text-primary) !important;
    -webkit-text-fill-color: var(--degen-text-primary) !important;
}

.mud-dialog.competition-deposit-dialog .mud-input-label {
    color: var(--degen-text-secondary) !important;
}

/* --- End CompetitionDepositDialog Style --- */


/* --- CompetitionWithdrawDialog --- */

.mud-dialog.competition-withdraw-dialog,
.mud-dialog-container.competition-withdraw-dialog,
.mud-dialog-root .competition-withdraw-dialog {
    background-color: var(--degen-bg-secondary) !important;
    border: 1px solid var(--degen-border-default) !important;
    border-radius: 4px !important;
    color: var(--degen-text-primary) !important;
}

.competition-withdraw-dialog .mud-dialog-title,
.mud-dialog-container.competition-withdraw-dialog .mud-dialog-title,
.mud-dialog.competition-withdraw-dialog .mud-dialog-title {
    background-color: var(--degen-bg-secondary) !important;
    border-bottom: 1px solid var(--degen-border-subtle) !important;
    padding: 16px 20px !important;
}

.competition-withdraw-dialog .mud-dialog-content,
.mud-dialog-container.competition-withdraw-dialog .mud-dialog-content,
.mud-dialog.competition-withdraw-dialog .mud-dialog-content {
    background-color: var(--degen-bg-secondary) !important;
    padding: 20px !important;
}

.competition-withdraw-dialog .mud-dialog-actions,
.mud-dialog-container.competition-withdraw-dialog .mud-dialog-actions,
.mud-dialog.competition-withdraw-dialog .mud-dialog-actions {
    background-color: var(--degen-bg-secondary) !important;
    border-top: 1px solid var(--degen-border-subtle) !important;
    padding: 12px 20px !important;
}

/* Close button */
.mud-dialog.competition-withdraw-dialog .mud-dialog-title .mud-button-root {
    color: var(--degen-text-tertiary) !important;
}

.mud-dialog.competition-withdraw-dialog .mud-dialog-title .mud-button-root:hover {
    color: var(--degen-text-primary) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

/* Input overrides */
.mud-dialog.competition-withdraw-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--degen-border-default) !important;
}

.mud-dialog.competition-withdraw-dialog .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--degen-color-primary) !important;
}

.mud-dialog.competition-withdraw-dialog .mud-input-slot {
    color: var(--degen-text-primary) !important;
    -webkit-text-fill-color: var(--degen-text-primary) !important;
}

.mud-dialog.competition-withdraw-dialog .mud-input-label {
    color: var(--degen-text-secondary) !important;
}

/* --- End CompetitionWithdrawDialog Style --- */


/* ──────────────────────────────────────────
   Global MudBlazor Component Overrides
   Brand-consistent lime-green spinner default.
   Wrapped in :where() so the rule has specificity 0 — any
   MudBlazor Color= parameter (Color.Error, Color.Success,
   Color.Primary, etc.) wins because its generated class
   selector has specificity (0,1,0). Inline Style="color:"
   wins via inline specificity. The default still applies
   to spinners with no color set.
   ────────────────────────────────────────── */

:where(.mud-progress-circular) {
    color: var(--degen-color-primary);
}

/* Spinner spacing inside any MudButton */
.mud-button .mud-progress-circular {
    margin-right: 8px;
}

/* ──────────────────────────────────────────
   Lime primary button pattern
   Targets MudButton instances styled inline with the brand lime
   (Style="background-color: #B8F84E"). Lives globally because
   inline-style attribute selectors cannot be expressed in
   component-scoped CSS. Previously duplicated across
   TradingSettingsDialog, OnboardingDialog, and TradingTab.
   Hex literal is anchored to the selector string, so using
   var(--degen-color-primary) in declarations would be a false
   abstraction — the selector itself pins the color.
   ────────────────────────────────────────── */

.mud-button[style*="background-color: #B8F84E"]:not(:disabled) {
    transition: all 0.2s ease;
}

.mud-button[style*="background-color: #B8F84E"]:not(:disabled):hover {
    background-color: rgba(184, 248, 78, 0.9) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(184, 248, 78, 0.2);
}

.mud-button[style*="background-color: #B8F84E"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Contrast on lime buttons — spinner and icons render black on lime */
.mud-button[style*="background-color: #B8F84E"] .mud-progress-circular,
.mud-button[style*="background-color: #B8F84E"] .mud-progress-circular .mud-progress-circular-svg {
    color: #000000;
}

.mud-button[style*="background-color: #B8F84E"] .mud-icon,
.mud-button[style*="background-color: #B8F84E"] .mud-icon svg {
    color: #000000;
    fill: #000000;
}

/* Dim the screen ONLY behind MODAL overlays (dialogs, drawers). Menus, selects,
   autocompletes and tooltips render a non-modal, transparent click-catcher
   .mud-overlay (z-index class .mud-overlay-popover) that must NOT dim the screen.
   The previous blanket `.mud-overlay { background: ... }` darkened those too, so
   every dropdown faded the whole screen. Scoping to the dialog/drawer context
   classes is correct by construction -- a menu is neither. */
.mud-overlay-dialog,
.mud-overlay-drawer {
    background-color: rgba(8, 8, 9, 0.5) !important;
}

.mud-overlay-dark {
    background-color: rgba(8, 8, 9, 0.6) !important;
}