/* 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 - Exact Design Match */

.mud-message-box {
    position: absolute !important;
    width: 381px !important;
    height: 223px !important;
    left: calc(50% - 381px/2 - 0.5px) !important;
    top: calc(50% - 223px/2 + 0.5px) !important;
    background: #131B1F !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 !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: #A2A2A2 !important;
    transform: rotate(-0.1deg) !important;
    margin-top: 2px !important;
}


/* Actions styling */

.mud-message-box .mud-dialog-actions {
    background-color: transparent !important;
    padding: 0 24px !important;
    border: none !important;
    justify-content: flex-end !important;
    gap: 16px !important;
    /* Increased gap from 8px to 16px */
    position: absolute !important;
    width: 150px !important;
    /* Increased width to accommodate larger gap */
    height: 32px !important;
    right: 24px !important;
    top: 167px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}


/* Force horizontal layout for all child elements */

.mud-message-box .mud-dialog-actions>* {
    display: inline-block !important;
    float: left !important;
    flex-shrink: 0 !important;
}


/* Override any MudBlazor flex settings */

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


/* Cancel button styling - Target actual MudBlazor classes */

.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-default,
.mud-message-box .mud-dialog-actions .mud-message-box__cancel-button {
    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;
    box-shadow: none !important;
    /* Removed shadow */
    filter: none !important;
    /* Removed filter */
    border-radius: 4px !important;
    background: transparent !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;
    transition: all 0.2s ease !important;
    /* Added smooth transition */
}

.mud-message-box .mud-message-box__cancel-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #E9E9E9 !important;
    transform: translateY(-1px) !important;
    /* Subtle lift effect */
}


/* Reset button styling - Target actual MudBlazor classes */

.mud-message-box .mud-dialog-actions .mud-button-root.mud-button-text-primary,
.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: 4px 8px !important;
    gap: 10px !important;
    width: 56px !important;
    height: 32px !important;
    background: #D65858 !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;
    box-shadow: none !important;
    flex-shrink: 0 !important;
}

.mud-message-box .mud-message-box__yes-button {
    transition: all 0.2s ease !important;
    /* Added smooth transition */
}

.mud-message-box .mud-message-box__yes-button:hover {
    background: #E65858 !important;
    color: #000000 !important;
    transform: translateY(-1px) !important;
    /* Subtle lift effect */
    box-shadow: 0 2px 8px rgba(214, 88, 88, 0.3) !important;
    /* Subtle glow effect */
}


/* 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: Hide snackbars entirely
   ======================================== */

@media (max-width: 600px) {
    .mud-snackbar-provider,
    .mud-snackbar {
        display: none !important;
        visibility: hidden !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: #A2A2A2;
    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: 2px;
    background-color: rgba(162, 162, 162, 0.15);
    color: #A2A2A2;
}


/* DEX Badge - Green accent (matches app theme) */

.asset-dex-badge {
    font-size: 9px;
    font-weight: 500;
    padding: 0px 4px;
    border-radius: 2px;
    background-color: rgba(184, 248, 78, 0.15);
    color: #B8F84E;
}


/* 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: #B8F84E;
}

.asset-browser-list .mud-list-item:hover .asset-leverage-badge,
.asset-browser-list .mud-list-item.mud-selected-item .asset-leverage-badge {
    background-color: rgba(184, 248, 78, 0.1);
    color: #B8F84E;
}


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