/* 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: 12px !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.7) !important;
    max-width: 1000px !important;
    width: 100% !important;
}

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

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

.trading-settings-dialog .mud-dialog-actions {
    background-color: #0D1215 !important;
    border-top: 1px solid rgba(102, 102, 102, 0.2) !important;
    padding: 16px 24px 20px 24px !important;
    margin: 0 !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;
}


/* Compact Status List */

.status-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0b0d0f 0%, #0f1214 100%);
    border-radius: 8px;
    border: 1px solid rgba(184, 248, 78, 0.08);
}

.status-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.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;
}


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

.custom-input-label {
    color: #565E63;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    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: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
}


/* Close button styling */

.trading-settings-dialog .mud-dialog-actions .mud-button {
    height: 36px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-radius: 6px !important;
    padding: 0 20px !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;
}