/* Trading Settings Dialog - Global Styles */


/* This file contains styles for the trading settings dialog that are applied globally */

.trading-settings-dialog .mud-dialog-container {
    background-color: #0D1215 !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    max-width: 500px !important;
    width: 100% !important;
}

.trading-settings-dialog .mud-dialog-title {
    background-color: #0D1215 !important;
    border-bottom: 1px solid rgba(102, 102, 102, 0.15) !important;
    padding: 14px 16px 12px 16px !important;
    margin: 0 !important;
}

.trading-settings-dialog .mud-dialog-content {
    background-color: #0D1215 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.trading-settings-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(102, 102, 102, 0.15) !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    gap: 8px !important;
}

.trading-settings-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 16px;
}


/* Compact Modern Layout */

.compact-settings-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 0 16px 0;
}

.settings-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.settings-section .mud-typography-subtitle2 {
    color: #B8F84E !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.status-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.status-item,
.wallet-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px !important;
    background-color: #0b0d0f !important;
    border-radius: 6px !important;
    border: 1px solid rgba(102, 102, 102, 0.15) !important;
    transition: all 0.2s ease !important;
}

.status-item:hover,
.wallet-item:hover {
    border-color: rgba(184, 248, 78, 0.2) !important;
    background-color: #0f1214 !important;
}

.status-item .mud-typography,
.wallet-item .mud-typography {
    margin: 0 !important;
}

.status-item .mud-typography:first-child,
.wallet-item .mud-typography:first-child {
    color: #565E63 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    min-width: 80px !important;
}

.status-item .mud-typography:last-child,
.wallet-item .mud-typography:last-child {
    color: #A2A2A2 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}


/* Wallet Input Item Styling */

.wallet-input-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px !important;
    background-color: #0b0d0f !important;
    border-radius: 6px !important;
    border: 1px solid rgba(102, 102, 102, 0.15) !important;
    transition: all 0.2s ease !important;
}

.wallet-input-item:hover {
    border-color: rgba(184, 248, 78, 0.2) !important;
    background-color: #0f1214 !important;
}

.wallet-input-item .mud-typography {
    margin: 0 !important;
    color: #565E63 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.wallet-input-item .mud-text-field {
    margin: 0 !important;
}

.wallet-input-item .mud-input-control {
    background-color: #131B1F !important;
    border: 1px solid rgba(184, 248, 78, 0.23) !important;
    border-radius: 4px !important;
}

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

.wallet-input-item .mud-input-control:focus-within {
    border-color: #B8F84E !important;
    border-width: 2px !important;
}

.wallet-input-item .mud-input-root {
    color: #E9E9E9 !important;
    font-family: 'Source Code Pro', monospace !important;
    font-size: 12px !important;
}

.wallet-input-item .mud-input-root::placeholder {
    color: #666 !important;
    opacity: 0.7 !important;
}


/* Status indicator. The account-level status LIST that used to wrap these is gone -- each venue
   card states its own connection now -- but the indicator itself is still rendered by panels
   inside the dialog, so it stays. .status-label is kept because other pages render it too. */

.status-label {
    color: #565E63;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    min-width: 80px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 16px;
    transition: all 0.2s ease;
}

.status-indicator.enabled {
    background-color: rgba(184, 248, 78, 0.12);
    border: 1px solid rgba(184, 248, 78, 0.3);
}

.status-indicator.disabled {
    background-color: rgba(102, 102, 102, 0.08);
    border: 1px solid rgba(102, 102, 102, 0.2);
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    transition: none;
}

.status-indicator.enabled .status-dot {
    background-color: #B8F84E;
}

.status-indicator.disabled .status-dot {
    background-color: #666;
}

.status-text {
    color: #E9E9E9;
    font-size: 12px;
    font-weight: 500;
}

.status-indicator-button {
    appearance: none;
    border: 0;
    color: inherit;
    font: inherit;
    background: transparent;
    cursor: pointer;
    /* No padding reset: .status-indicator already sets padding 6px 12px and we
       want the button to inherit that pill shape. .enabled / .disabled variants
       (specificity 0,2,0) override border/background, so the reset only matters
       in the (unreachable) state where neither class is applied. */
}

.status-indicator-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.status-indicator-button.enabled:hover:not(:disabled) {
    background-color: rgba(184, 248, 78, 0.18);
}

.status-indicator-button.disabled:hover:not(:disabled) {
    background-color: rgba(102, 102, 102, 0.14);
}


/* Deposit is teal, not lime — funding a venue is deliberately a different class of action from
   connecting or trading, so it reads as its own affordance in a row full of green. */
.venue-deposit-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background-color: transparent;
    border: 1px solid var(--degen-color-deposit-border);
    border-radius: 4px;
    color: var(--degen-color-deposit);
    font-family: var(--degen-font-sans);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.venue-deposit-btn:hover {
    background-color: var(--degen-color-deposit-muted);
    border-color: var(--degen-color-deposit);
}

/* Deposit dialog chrome — lives here (not in scoped CSS) because MudDialog's own root element is
   outside the dialog component's isolation scope. */
.mud-dialog.venue-deposit-dialog {
    background-color: var(--degen-bg-secondary);
    border: 1px solid var(--degen-border-accent-strong);
    border-radius: 4px;
}

.venue-deposit-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

/* Venue toggle. Text-only by design — the venue names are short and a row of exchange logos reads as
   branding rather than as a control. */
.venue-deposit-tabs {
    display: flex;
    gap: 4px;
    padding: 3px;
    background-color: var(--degen-bg-primary);
    border-radius: 4px;
}

.venue-deposit-tab {
    flex: 1;
    padding: 7px 10px;
    background: none;
    border: none;
    border-radius: 4px;
    color: var(--degen-text-secondary);
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.venue-deposit-tab:hover {
    color: var(--degen-text-primary);
    background-color: var(--degen-bg-surface);
}

.venue-deposit-tab.active {
    color: var(--degen-color-deposit);
    background-color: var(--degen-color-deposit-muted);
}

.venue-deposit-dialog-center {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.venue-deposit-dialog-note {
    font-size: 12px;
    line-height: 1.5;
    color: var(--degen-text-secondary);
    text-align: center;
}

.mud-dialog.venue-deposit-dialog .venue-deposit-dialog-close {
    color: var(--degen-text-secondary);
}

/* Guided-onboarding dialog chrome. Same reason as the deposit dialog above: MudDialog's root sits
   outside the component's isolation scope, so it cannot be styled from a .razor.css. */
.mud-dialog.venue-onboard-dialog {
    background-color: var(--degen-bg-secondary);
    border: 1px solid var(--degen-border-accent-strong);
    border-radius: 4px;
}

.venue-onboard-dialog-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 4px 0;
}

.mud-dialog.venue-onboard-dialog .venue-onboard-dialog-close {
    color: var(--degen-text-secondary);
}


/* Lighter onboarding section (standalone teaser + embedded in the venue panel) */

.lighter-onboarding-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lighter-onboarding-section.coming-soon {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--degen-border-accent);
}

.lighter-onboarding-section .section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lighter-onboarding-section .section-title {
    color: var(--degen-text-primary);
    font-size: 13px;
    font-weight: 500;
}

.lighter-onboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.lighter-field-label {
    color: var(--degen-text-hint);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.lighter-onboarding-section .lighter-account-input {
    max-width: 140px;
}

.lighter-hint {
    color: var(--degen-text-tertiary);
    font-size: 11px;
    line-height: 1.4;
}


/* Compact Wallet Input */

.wallet-input-row {
    padding: 0 4px;
}

.compact-wallet-input .mud-input-control {
    background-color: #0b0d0f !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.compact-wallet-input .mud-input-control:hover {
    border-color: rgba(184, 248, 78, 0.3) !important;
    background-color: #0f1214 !important;
}

.compact-wallet-input .mud-input-control:focus-within {
    border-color: #B8F84E !important;
}

.compact-wallet-input .mud-input-root {
    color: #E9E9E9 !important;
    font-family: 'Source Code Pro', monospace !important;
    font-size: 13px !important;
    padding: 12px 16px !important;
}

.compact-wallet-input .mud-input-root::placeholder {
    color: #666 !important;
    opacity: 0.7 !important;
}


/* Additional overrides to ensure proper styling - NUCLEAR OPTION */


/* Target every possible MudBlazor input control variation */

.trading-settings-dialog .compact-wallet-input .mud-input-control,
.trading-settings-dialog .compact-wallet-input .mud-input-control .mud-input-control-input-container,
.trading-settings-dialog .compact-wallet-input .mud-text-field .mud-input-control,
.trading-settings-dialog .wallet-input-row .mud-text-field .mud-input-control,
.trading-settings-dialog .wallet-input-row .mud-input-control,
.trading-settings-dialog .wallet-input-row .mud-text-field,
.trading-settings-dialog .compact-wallet-input,
.trading-settings-dialog [class*="mud-input-control"],
.trading-settings-dialog [class*="mud-text-field"],
.trading-settings-dialog .mud-input-text,
.trading-settings-dialog .mud-input-outlined {
    background-color: #0b0d0f !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
    border-radius: 6px !important;
}


/* Override any specific MudBlazor background styles */

.trading-settings-dialog .wallet-input-row *[style*="background-color"] {
    background-color: #0b0d0f !important;
}

.trading-settings-dialog .compact-wallet-input *[style*="background-color"] {
    background-color: #0b0d0f !important;
}


/* Target the specific InputClass */

.trading-settings-dialog .wallet-address-input,
.trading-settings-dialog .wallet-address-input *,
.trading-settings-dialog [class*="wallet-address-input"],
.trading-settings-dialog [class*="wallet-address-input"] * {
    background-color: #0b0d0f !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
}


/* Remove background from wallet address label */

.trading-settings-dialog .compact-wallet-input .mud-input-label,
.trading-settings-dialog .wallet-input-row .mud-input-label,
.trading-settings-dialog .mud-input-label {
    background-color: #0f1214 !important;
}


/* Remove thick green outline from input */

.trading-settings-dialog .mud-input-root-outlined,
.trading-settings-dialog .mud-input-root-outlined:focus,
.trading-settings-dialog .mud-input-root-outlined:focus-within,
.trading-settings-dialog .wallet-address-input,
.trading-settings-dialog .wallet-address-input:focus,
.trading-settings-dialog .wallet-address-input:focus-within {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
}


/* Remove any MudBlazor default focus styles */

.trading-settings-dialog .mud-input-control:focus-within,
.trading-settings-dialog .mud-input-control:focus {
    outline: none !important;
    box-shadow: none !important;
}


/* Target the specific input element from your HTML */

.trading-settings-dialog input[class*="mud-input-root"],
.trading-settings-dialog input[class*="mud-input-slot"],
.trading-settings-dialog input[class*="wallet-address-input"] {
    outline: none !important;
    box-shadow: none !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
}


/* Override any MudBlazor CSS variables that might be causing the outline */

.trading-settings-dialog .mud-input-control {
    --mud-palette-primary: #B8F84E !important;
    --mud-palette-primary-hover: #B8F84E !important;
    --mud-palette-primary-text: #B8F84E !important;
}


/* Force clean styling for Filled variant */

.trading-settings-dialog .compact-wallet-input .mud-input-filled,
.trading-settings-dialog .wallet-input-row .mud-input-filled,
.trading-settings-dialog .mud-input-filled {
    background-color: #0b0d0f !important;
    border: 1px solid rgba(184, 248, 78, 0.15) !important;
    border-radius: 6px !important;
    outline: none !important;
    box-shadow: none !important;
}

.trading-settings-dialog .compact-wallet-input .mud-input-filled:hover,
.trading-settings-dialog .wallet-input-row .mud-input-filled:hover,
.trading-settings-dialog .mud-input-filled:hover {
    border-color: rgba(184, 248, 78, 0.3) !important;
    background-color: #0f1214 !important;
    outline: none !important;
    box-shadow: none !important;
}

.trading-settings-dialog .compact-wallet-input .mud-input-filled:focus-within,
.trading-settings-dialog .wallet-input-row .mud-input-filled:focus-within,
.trading-settings-dialog .mud-input-filled:focus-within {
    border-color: #B8F84E !important;
    background-color: #0f1214 !important;
    outline: none !important;
    box-shadow: none !important;
}


/* Custom wallet input - completely bypass MudBlazor */

.custom-wallet-input-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background-color: #0b0d0f;
    border-radius: 6px;
    border: 1px solid rgba(184, 248, 78, 0.15);
    transition: all 0.2s ease;
}

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

/* Single source of truth for every field label in the trading settings dialog (wallet
   address, builder fee address, builder fee rate, sign builder fee, backtest cost cap).
   These values used to live here in a dimmer form that nothing ever saw: the dialog's own
   scoped stylesheet re-declared the label at higher specificity and won every time. When
   the dialog was split into per-venue panels the scoped override travelled with four of
   the five labels and the fifth silently fell back to the dim version. Folding the winning
   values in here keeps all five identical no matter which component renders them. */
.custom-input-label {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.custom-wallet-input {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    color: #E9E9E9;
    font-family: 'Source Code Pro', monospace;
    font-size: 13px;
    padding: 8px 0;
    width: 100%;
    min-width: 400px;
}

.custom-wallet-input::placeholder {
    color: #666;
    opacity: 0.7;
}

.custom-wallet-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.custom-wallet-input-container:focus-within {
    border-color: #B8F84E;
    background-color: #0f1214;
}

.trading-settings-dialog .compact-wallet-input .mud-input-control:hover,
.trading-settings-dialog .compact-wallet-input .mud-text-field .mud-input-control:hover,
.trading-settings-dialog .wallet-input-row .mud-text-field .mud-input-control:hover {
    border-color: rgba(184, 248, 78, 0.3) !important;
    background-color: #0f1214 !important;
}

.trading-settings-dialog .compact-wallet-input .mud-input-control:focus-within,
.trading-settings-dialog .compact-wallet-input .mud-text-field .mud-input-control:focus-within,
.trading-settings-dialog .wallet-input-row .mud-text-field .mud-input-control:focus-within {
    border-color: #B8F84E !important;
    background-color: #0f1214 !important;
}

.trading-settings-dialog .compact-wallet-input .mud-input-root,
.trading-settings-dialog .compact-wallet-input .mud-text-field .mud-input-root,
.trading-settings-dialog .wallet-input-row .mud-text-field .mud-input-root {
    background-color: transparent !important;
    color: #E9E9E9 !important;
    font-family: 'Source Code Pro', monospace !important;
    font-size: 12px !important;
    padding: 14px 18px !important;
    min-width: 330px !important;
    width: 100% !important;
}


/* Wallet input specific width overrides */

.trading-settings-dialog .wallet-input-row {
    padding: 0 !important;
}

.trading-settings-dialog .wallet-input-row .mud-text-field {
    width: 100% !important;
    min-width: 500px !important;
}


/* Compact Actions */

.actions-row {
    display: flex;
    justify-content: center;
    padding: 8px 0 0 0;
}

.disconnect-btn {
    color: #FF6B6B !important;
    background-color: rgba(255, 107, 107, 0.08) !important;
    border: 1px solid rgba(255, 107, 107, 0.2) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
}

.disconnect-btn:hover {
    background-color: rgba(255, 107, 107, 0.12) !important;
    border-color: rgba(255, 107, 107, 0.4) !important;
    transform: translateY(-1px) !important;
}

.disconnect-btn:active {
    transform: translateY(0) !important;
}

.disconnect-btn span {
    font-size: 12px !important;
}


/* Save button styling - matching ENABLE TRADING button */

.save-btn,
.trading-settings-dialog .save-btn,
.trading-settings-dialog .mud-dialog-actions .save-btn,
.trading-settings-dialog .mud-button.save-btn {
    background-color: #B8F84E !important;
    background: #B8F84E !important;
    color: #000000 !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    gap: 6px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.save-btn:hover,
.trading-settings-dialog .save-btn:hover,
.trading-settings-dialog .mud-dialog-actions .save-btn:hover,
.trading-settings-dialog .mud-button.save-btn:hover {
    background-color: #A8E83E !important;
    background: #A8E83E !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

.save-btn:active,
.trading-settings-dialog .save-btn:active,
.trading-settings-dialog .mud-dialog-actions .save-btn:active,
.trading-settings-dialog .mud-button.save-btn:active {
    background-color: #B8F84E !important;
    background: #B8F84E !important;
    transform: translateY(0) !important;
    box-shadow: none !important;
}

.save-btn span,
.trading-settings-dialog .save-btn span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #000000 !important;
}

.save-btn .mud-icon-root,
.trading-settings-dialog .save-btn .mud-icon-root {
    color: #000000 !important;
}

.status-item .mud-chip {
    margin: 0 !important;
}

.actions-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.actions-grid .mud-button {
    height: 40px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    border: none !important;
    background: #D65858 !important;
    color: #000000 !important;
    box-shadow: none !important;
}

.actions-grid .mud-button:hover {
    background: #E65858 !important;
    color: #000000 !important;
}

.future-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.feature-item {
    display: flex;
    align-items: center;
    padding: 12px 16px !important;
    background-color: #0b0d0f !important;
    border-radius: 6px !important;
    border: 1px solid rgba(102, 102, 102, 0.1) !important;
    gap: 12px !important;
    transition: all 0.2s ease !important;
}

.feature-item:hover {
    border-color: rgba(102, 102, 102, 0.2) !important;
    background-color: #0f1214 !important;
}

.feature-item .mud-icon {
    color: #666 !important;
    font-size: 18px !important;
    min-width: 18px !important;
}

.feature-item .mud-typography {
    color: #666 !important;
    font-size: 12px !important;
    margin: 0 !important;
    flex: 1 !important;
}

.feature-item .mud-chip {
    margin: 0 !important;
    font-size: 10px !important;
    height: 20px !important;
    padding: 0 8px !important;
}


/* Dialog title styling */

.trading-settings-dialog .mud-dialog-title .mud-typography {
    color: #E9E9E9 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}


/* Close button styling */

.trading-settings-dialog .mud-dialog-actions .mud-button {
    height: 32px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 4px !important;
    padding: 0 16px !important;
    border: none !important;
    background: transparent !important;
    color: #A2A2A2 !important;
    transition: all 0.2s ease !important;
}

.trading-settings-dialog .mud-dialog-actions .mud-button:hover {
    background: rgba(162, 162, 162, 0.1) !important;
    color: #E9E9E9 !important;
}


/* MudChip overrides */

.trading-settings-dialog .mud-chip {
    border-radius: 4px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}


/* Success chip (Enabled status) */

.trading-settings-dialog .mud-chip.mud-chip-color-success {
    background-color: rgba(184, 248, 78, 0.15) !important;
    color: #B8F84E !important;
    border: 1px solid rgba(184, 248, 78, 0.3) !important;
}


/* Default chip (Coming Soon) */

.trading-settings-dialog .mud-chip.mud-chip-color-default {
    background-color: rgba(102, 102, 102, 0.15) !important;
    color: #666 !important;
    border: 1px solid rgba(102, 102, 102, 0.3) !important;
}


/* DEX Transfer Input Styling - Dark background with single green outline */


/* Container with green outline (like the reference design) */

.trading-settings-dialog .dex-transfer-row-container {
    background-color: #0b0d0f !important;
    border: 1px solid rgba(184, 248, 78, 0.23) !important;
    border-radius: 4px;
    padding: 12px;
    transition: all 0.2s ease;
}

.trading-settings-dialog .dex-transfer-row-container:hover {
    border-color: rgba(184, 248, 78, 0.35) !important;
}

.trading-settings-dialog .dex-transfer-row-container:focus-within {
    border-color: rgba(184, 248, 78, 0.5) !important;
}


/* Remove ALL borders from MudSelect fields inside container */

.trading-settings-dialog .dex-transfer-row-container .mud-select,
.trading-settings-dialog .dex-transfer-row-container .mud-select *,
.trading-settings-dialog .dex-transfer-row-container .mud-select .mud-input-control,
.trading-settings-dialog .dex-transfer-row-container .mud-input-control,
.trading-settings-dialog .dex-select-container .mud-select,
.trading-settings-dialog .dex-select-container .mud-input-control {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
}


/* Remove all internal borders */

.trading-settings-dialog .mud-select input,
.trading-settings-dialog .mud-select .mud-input-root,
.trading-settings-dialog .mud-select .mud-input-slot,
.trading-settings-dialog .mud-select .mud-input-outlined,
.trading-settings-dialog .dex-select-container input {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
}


/* Hide MudBlazor's outlined border component */

.trading-settings-dialog .mud-select .mud-input-outlined-border,
.trading-settings-dialog .dex-select-container .mud-input-outlined-border {
    display: none !important;
    border: none !important;
}


/* Amount input container styling */

.trading-settings-dialog .dex-amount-container {
    background-color: #0b0d0f !important;
    border: 1px solid rgba(184, 248, 78, 0.23) !important;
    border-radius: 4px;
    padding: 12px;
    transition: all 0.2s ease;
}

.trading-settings-dialog .dex-amount-container:hover {
    border-color: rgba(184, 248, 78, 0.35) !important;
}

.trading-settings-dialog .dex-amount-container:focus-within {
    border-color: rgba(184, 248, 78, 0.5) !important;
}

.trading-settings-dialog .dex-amount-container input {
    background-color: transparent !important;
    border: none !important;
    outline: none !important;
}


/* MAX button styling */

.trading-settings-dialog .dex-amount-container button[type="button"]:hover {
    border-color: rgba(184, 248, 78, 0.4) !important;
    color: #B8F84E !important;
}

.trading-settings-dialog .dex-amount-container button[type="button"]:active {
    transform: scale(0.95);
}


/* Remove spinner arrows from number inputs */

.trading-settings-dialog .dex-amount-container input[type="number"]::-webkit-inner-spin-button,
.trading-settings-dialog .dex-amount-container input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.trading-settings-dialog .dex-amount-container input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}


/* Override MudBlazor primary color variables */

.trading-settings-dialog .mud-select,
.trading-settings-dialog .dex-select-container {
    --mud-palette-primary: transparent !important;
    --mud-palette-primary-hover: transparent !important;
}


/* Compact DEX select styling */

.trading-settings-dialog .dex-select-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.trading-settings-dialog .dex-select-label {
    color: #666;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

.trading-settings-dialog .dex-select-container .mud-input-root {
    padding: 10px 12px !important;
    font-size: 12px !important;
}


/* Amount input hover styling */

.trading-settings-dialog .dex-select-container input[type="number"]:hover {
    border-color: rgba(184, 248, 78, 0.25) !important;
}

.trading-settings-dialog .dex-select-container input[type="number"]:focus {
    border-color: rgba(184, 248, 78, 0.4) !important;
    outline: none !important;
}


/* Swap arrow button styling - Subtle gray hover */

.trading-settings-dialog .dex-transfer-row-container .mud-icon-button {
    transition: all 0.2s ease !important;
}

.trading-settings-dialog .dex-transfer-row-container .mud-icon-button:hover {
    color: #A2A2A2 !important;
    background: transparent !important;
}