/**
 * Ultimate Member Account Tab Styling Overrides
 * Makes the account section match the DaneTrades dashboard theme
 */

/* Main Account Container - Transparent background, keep layout */
.um-account-wrap,
.um-account,
.um-account-main {
    background: transparent !important;
    color: var(--text-primary) !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    padding: 2rem !important;
}

/* AGGRESSIVE TAB BUTTON FIXES - Target all possible Ultimate Member tab elements */
.um-account-nav,
.um .um-account-nav,
div.um-account-nav,
.um-account .um-account-nav {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-bottom: 2rem !important;
}

/* Target ALL possible tab button variations with maximum specificity */
.um-account-nav a,
.um-account-nav .um-account-tab,
.um-account-nav .um-tab,
.um-account .um-account-nav a,
.um-account .um-account-nav .um-account-tab,
.um .um-account-nav a,
div.um-account-nav a,
.um-account-nav>a,
.um-account-nav li a,
.um-account-nav .um-account-link,
.um-account .um-account-nav .um-account-link,
.um-account-nav .um-account-side-link {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #BDBDBD !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 12px 20px !important;
    margin: 4px 8px 4px 0 !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    font-size: 14px !important;
    display: inline-block !important;
    font-weight: normal !important;
}

/* Hover states */
.um-account-nav a:hover,
.um-account-nav .um-account-tab:hover,
.um-account-nav .um-tab:hover,
.um-account .um-account-nav a:hover,
.um .um-account-nav a:hover,
div.um-account-nav a:hover,
.um-account-nav>a:hover,
.um-account-nav li a:hover,
.um-account-nav .um-account-link:hover,
.um-account .um-account-nav .um-account-link:hover,
.um-account-nav .um-account-side-link:hover {
    background: rgba(28, 105, 229, 0.1) !important;
    color: #1C69E5 !important;
    border-color: #1C69E5 !important;
}

/* Active/Current states */
.um-account-nav a.current,
.um-account-nav a.active,
.um-account-nav .um-account-tab.current,
.um-account-nav .um-account-tab.active,
.um-account .um-account-nav a.current,
.um-account .um-account-nav a.active,
.um .um-account-nav a.current,
div.um-account-nav a.current,
.um-account-nav>a.current,
.um-account-nav li a.current,
.um-account-nav .um-account-link.current,
.um-account .um-account-nav .um-account-link.current,
.um-account-nav .um-account-side-link.current {
    background: #1D2E4E !important;
    color: #3b82f6 !important;
    border-color: #1D2E4E !important;
}

/* Account Content Areas */
.um-account-tab {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 1rem 0 !important;
}

/* Form Elements */
.um-account .um-form,
.um-account-tab .um-form {
    background: transparent !important;
}

.um-account .um-form .um-field {
    margin-bottom: 1.5rem !important;
}

.um-account .um-form .um-field-label {
    color: var(--text-primary) !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.um-account .um-form input[type="text"],
.um-account .um-form input[type="email"],
.um-account .um-form input[type="password"],
.um-account .um-form input[type="tel"],
.um-account .um-form input[type="url"],
.um-account .um-form textarea,
.um-account .um-form select {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.um-account .um-form input:focus,
.um-account .um-form textarea:focus,
.um-account .um-form select:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(28, 105, 229, 0.1) !important;
}

/* Buttons */
.um-account .um-button,
.um-account input[type="submit"],
.um-account button {
    background: var(--primary-color) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--border-radius) !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.um-account .um-button:hover,
.um-account input[type="submit"]:hover,
.um-account button:hover {
    background: var(--secondary-color) !important;
    transform: translateY(-1px) !important;
}

.um-account .um-button.um-alt {
    background: transparent !important;
    color: var(--text-secondary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.um-account .um-button.um-alt:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

/* Profile Photo/Avatar */
.um-account .um-profile-photo {
    text-align: center !important;
    margin-bottom: 2rem !important;
}

.um-account .um-profile-photo img {
    border: 3px solid var(--primary-color) !important;
    border-radius: 50% !important;
}

/* Account Meta/Info */
.um-account .um-account-meta,
.um-account .um-profile-meta {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

.um-account .um-account-meta .um-meta-text,
.um-account .um-profile-meta .um-meta-text {
    color: var(--text-secondary) !important;
}

/* Tables */
.um-account table {
    width: 100% !important;
    border-collapse: collapse !important;
    background: transparent !important;
    margin-bottom: 2rem !important;
}

.um-account table th {
    background: var(--primary-color) !important;
    color: white !important;
    padding: 12px 16px !important;
    text-align: left !important;
    font-weight: 600 !important;
    border: none !important;
}

.um-account table td {
    color: var(--text-primary) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.um-account table tr:hover td {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Messages/Notices */
.um-account .um-notice,
.um-account .um-message {
    background: rgba(28, 105, 229, 0.1) !important;
    color: var(--text-primary) !important;
    border-left: 4px solid var(--primary-color) !important;
    padding: 1rem !important;
    margin-bottom: 1rem !important;
    border-radius: 4px !important;
}

.um-account .um-notice.error,
.um-account .um-message.error {
    background: rgba(239, 68, 68, 0.1) !important;
    border-left-color: #ef4444 !important;
}

.um-account .um-notice.success,
.um-account .um-message.success {
    background: rgba(9, 147, 178, 0.1) !important;
    border-left-color: var(--secondary-color) !important;
}

/* Links */
.um-account a {
    color: var(--primary-color) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.um-account a:hover {
    color: var(--secondary-color) !important;
}

/* Privacy/Security Settings */
.um-account .um-privacy-settings,
.um-account .um-security-settings {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    padding: 1.5rem !important;
    margin-bottom: 2rem !important;
}

/* Checkboxes and Radio Buttons */
.um-account input[type="checkbox"],
.um-account input[type="radio"] {
    accent-color: var(--primary-color) !important;
}

/* File Upload */
.um-account .um-field-file {
    background: var(--bg-primary) !important;
    border: 2px dashed rgba(255, 255, 255, 0.2) !important;
    border-radius: var(--border-radius) !important;
    padding: 2rem !important;
    text-align: center !important;
    color: var(--text-secondary) !important;
    transition: all 0.3s ease !important;
}

.um-account .um-field-file:hover {
    border-color: var(--primary-color) !important;
    background: rgba(28, 105, 229, 0.05) !important;
}

/* Responsive Design */
@media (max-width: 768px) {

    .um-account-wrap,
    .um-account,
    .um-account-main {
        padding: 1rem !important;
    }

    .um-account-nav a {
        padding: 8px 12px !important;
        font-size: 12px !important;
        margin-right: 4px !important;
    }

    .um-account .um-form input[type="text"],
    .um-account .um-form input[type="email"],
    .um-account .um-form input[type="password"],
    .um-account .um-form textarea,
    .um-account .um-form select {
        padding: 10px 12px !important;
        font-size: 14px !important;
    }

    .um-account table {
        font-size: 12px !important;
    }

    .um-account table th,
    .um-account table td {
        padding: 8px 12px !important;
    }
}

/* Dark theme specific adjustments */
.um-account *::placeholder {
    color: rgba(189, 189, 189, 0.6) !important;
}

.um-account select option {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Remove any conflicting Ultimate Member default styles */
.um-account .um-form .um-field-area,
.um-account .um-form .um-field-block {
    background: transparent !important;
    border: none !important;
}

/* Ensure proper text color inheritance */
.um-account p,
.um-account span,
.um-account div,
.um-account label {
    color: var(--text-primary) !important;
}

.um-account .um-field-label label {
    color: var(--text-primary) !important;
}

/* Fix dropdown/select styling issues - Ultimate Member specific */
.um-account select,
.um-account .um-field-dropdown select,
.um-account .um-field-select select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDBDBD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px !important;
    padding-right: 40px !important;
}

.um-account select option,
.um-account .um-field-dropdown select option,
.um-account .um-field-select select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 8px 12px !important;
}

/* Ultimate Member specific dropdown classes */
.um-account .um-dropdown,
.um-account .um-field-dropdown,
.um-account .um-select,
.um-account .um-field-select {
    position: relative !important;
}

/* Fix the dropdown menu positioning and styling */
.um-account .um-dropdown-menu,
.um-account .um-field-dropdown .um-dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    z-index: 99999 !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

.um-account .um-dropdown-menu li,
.um-account .um-field-dropdown .um-dropdown-menu li {
    background: transparent !important;
    color: var(--text-primary) !important;
    padding: 10px 16px !important;
    cursor: pointer !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 14px !important;
}

.um-account .um-dropdown-menu li:last-child {
    border-bottom: none !important;
}

.um-account .um-dropdown-menu li:hover,
.um-account .um-field-dropdown .um-dropdown-menu li:hover {
    background: rgba(28, 105, 229, 0.1) !important;
    color: var(--primary-color) !important;
}

/* Fix Select2 if used */
.um-account .select2-container {
    z-index: 99999 !important;
}

.um-account .select2-dropdown {
    background: var(--bg-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    z-index: 99999 !important;
}

.um-account .select2-results__option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    padding: 10px 16px !important;
}

.um-account .select2-results__option--highlighted {
    background: rgba(28, 105, 229, 0.1) !important;
    color: var(--primary-color) !important;
}

.um-account .select2-selection {
    background: var(--bg-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    color: var(--text-primary) !important;
}

/* Fix any privacy dropdown specific issues */
.um-account .um-field-privacy select,
.um-account .um-privacy-field select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* Ensure dropdown container doesn't overflow */
.um-account .um-field,
.um-account .um-field-area {
    overflow: visible !important;
    position: relative !important;
}

/* Fix dropdown trigger button if exists */
.um-account .um-dropdown-trigger,
.um-account .um-field-dropdown .um-dropdown-trigger {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--border-radius) !important;
    padding: 12px 16px !important;
}

/* 
NUCLEAR OPTION - Override everything Ultimate Member with maximum specificity */
body .um-account-nav a,
body .um .um-account-nav a,
body div.um-account-nav a,
html body .um-account-nav a {
    background-color: rgba(255, 255, 255, 0.05) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    color: #BDBDBD !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

body .um-account-nav a:hover,
body .um .um-account-nav a:hover,
body div.um-account-nav a:hover,
html body .um-account-nav a:hover {
    background-color: rgba(28, 105, 229, 0.1) !important;
    background: rgba(28, 105, 229, 0.1) !important;
    color: #1C69E5 !important;
    border-color: #1C69E5 !important;
}

body .um-account-nav a.current,
body .um-account-nav a.active,
body .um .um-account-nav a.current,
body div.um-account-nav a.current,
html body .um-account-nav a.current {
    background-color: #1D2E4E !important;
    background: #1D2E4E !important;
    color: #3b82f6 !important;
    border-color: #1D2E4E !important;
}

/* Fix dropdown with nuclear approach */
body .um-account select,
body .um .um-account select,
html body .um-account select {
    background-color: #0a0a0a !important;
    background: #0a0a0a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body .um-account select option,
body .um .um-account select option,
html body .um-account select option {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
}

/* Force dropdown menu positioning */
body .um-dropdown-menu,
body .um-account .um-dropdown-menu,
html body .um-dropdown-menu {
    background-color: #1a1a1a !important;
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: absolute !important;
    z-index: 999999 !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-top: 2px !important;
}

body .um-dropdown-menu li,
body .um-account .um-dropdown-menu li,
html body .um-dropdown-menu li {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
    padding: 10px 16px !important;
}

body .um-dropdown-menu li:hover,
body .um-account .um-dropdown-menu li:hover,
html body .um-dropdown-menu li:hover {
    background-color: rgba(28, 105, 229, 0.1) !important;
    background: rgba(28, 105, 229, 0.1) !important;
    color: #1C69E5 !important;
}

/* ======================================================= */
/* ===     SIMPLE COLOR FIX FOR SIDEBAR TABS           === */
/* ======================================================= */

/* Only change colors, keep original layout */
.um-account-side li {
    background: var(--bg-primary) !important;
}

.um-account-side li a {
    background: var(--bg-primary) !important;
    color: var(--text-secondary) !important;
}

.um-account-side li a:hover {
    background: rgba(28, 105, 229, 0.1) !important;
    color: var(--primary-color) !important;
}

.um-account-side li a.current {
    background: #1D2E4E !important;
    color: #3b82f6 !important;
}

/* ======================================================= */
/* ===     SIMPLE DROPDOWN COLOR FIX                   === */
/* ======================================================= */

/* Target dropdown with very high specificity */
.um-account select,
.um-account .um-field select,
body .um-account select,
html body .um-account select {
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.um-account select option,
body .um-account select option {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* =
====================================================== */
/* ===     MATCH MAIN APP SIDEBAR COLORS               === */
/* ======================================================= */

/* Update sidebar colors to match main app sidebar */
.um-account-side li {
    background: #181920 !important;
    /* Match main sidebar background */
}

.um-account-side li a {
    background: #181920 !important;
    /* Match main sidebar background */
    color: var(--text-secondary) !important;
    /* Match main sidebar text color */
    border-bottom: 1px solid #2D2E33 !important;
    /* Match main sidebar border */
}

.um-account-side li a:hover {
    background: rgba(28, 105, 229, 0.1) !important;
    /* Match main sidebar hover */
    color: var(--primary-color) !important;
}

.um-account-side li a.current {
    background: #1D2E4E !important;
    /* Match main sidebar active */
    color: #3b82f6 !important;
}

/* ======================================================= */
/* ===     SIMPLE DROPDOWN FIX - TARGETED APPROACH    === */
/* ======================================================= */

/* Try targeting the dropdown with CSS custom properties */
.um-account {
    --select-bg: rgba(255, 255, 255, 0.05);
    --select-color: var(--text-primary);
    --select-border: rgba(255, 255, 255, 0.1);
}

/* Target Select2 dropdowns specifically in account area */
#account-content .select2-container .select2-choice,
.um-account-tab .select2-container .select2-choice {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#account-content .select2-drop,
.um-account-tab .select2-drop {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

#account-content .select2-results li,
.um-account-tab .select2-results li {
    background: transparent !important;
    color: var(--text-primary) !important;
}

#account-content .select2-results .select2-highlighted,
.um-account-tab .select2-results .select2-highlighted {
    background: rgba(28, 105, 229, 0.1) !important;
    color: var(--primary-color) !important;
}

/* Alternative approach - target by attribute */
.um-account select[data-placeholder],
.um-account .um-field select[data-placeholder] {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text-primary) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}