/* Theme styles */

/* Light theme variables */
body.light-theme {
    /* Main color palette for light theme */
    --background-dark: #F5F5F7;
    --background-medium: #FFFFFF;
    --background-light: #EAEAEC;
    --text-primary: #1A1625;
    --text-secondary: #4A4958;
    --text-tertiary: #6C6A7A;
    --border-color: rgba(0, 0, 0, 0.1);
}

/* Make Solana logo text black in light theme */
body.light-theme .logo span {
    color: #000000;
    text-shadow: none;
}

/* Theme toggle button styles */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: var(--spacing-md);
    position: relative;
    width: 24px;
    height: 24px;
}

/* Ensure theme toggle works in both header types */
.user-profile .theme-toggle,
.user-menu .theme-toggle {
    display: flex;
    margin-right: var(--spacing-md);
}

/* New header layout styles */
.content-header,
.main-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.header-left {
    display: flex;
    align-items: center;
}

.header-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: var(--spacing-lg);
}

/* Special positioning for main page */
.main-header .header-right {
    margin-left: 0;
    margin-right: 0;
    order: 4; /* Move to the end */
}

.content-header .search-bar,
.main-header .search-bar {
    width: auto;
    margin-top: 0;
    order: 2;
    margin-left: auto;
    margin-right: var(--spacing-md);
    flex: 1;
    max-width: 300px;
}

/* Theme toggle and notifications in header */
.header-right .theme-toggle,
.header-right .notifications {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header-right .theme-toggle {
    margin-right: var(--spacing-md);
}

.header-right .notifications {
    position: relative;
    z-index: 1101; /* Ensure dropdown appears above other elements */
}

/* Fix for notifications dropdown on all pages */
.header-right .notifications .notifications-dropdown,
.main-header .notifications .notifications-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 10px;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1200; /* Ensure it's above all other elements */
}

/* User profile styling */
.main-header .user-profile {
    order: 3;
    margin-top: 0;
    display: flex;
    justify-content: flex-end;
    margin-left: auto;
    margin-right: var(--spacing-md);
}

/* Ensure consistent spacing and alignment */
.theme-toggle + .notifications {
    margin-left: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .main-header {
        flex-wrap: wrap;
    }
    
    .main-header .header-left {
        width: 100%;
        order: 1;
        margin-bottom: var(--spacing-md);
    }
    
    .main-header .search-bar {
        width: 100%;
        max-width: none;
        order: 2;
        margin-right: 0;
        margin-bottom: var(--spacing-md);
    }
    
    .main-header .user-profile {
        order: 3;
        margin-right: 0;
        margin-bottom: var(--spacing-md);
    }
    
    .main-header .header-right {
        order: 4;
        margin-left: auto;
        margin-right: 0;
    }
}

@media (min-width: 768px) {
    .content-header,
    .main-header {
        flex-wrap: nowrap;
    }
    
    .content-header .search-bar {
        width: auto;
        margin-top: 0;
        order: unset;
        margin-left: auto;
    }
    
    .content-header .header-right {
        margin-left: var(--spacing-lg);
        margin-right: 0;
    }
}

.theme-toggle svg {
    width: 24px;
    height: 24px;
    color: var(--text-secondary);
    transition: color var(--transition-speed) ease;
}

.theme-toggle:hover svg {
    color: var(--text-primary);
}

/* Specific element overrides for light theme */
body.light-theme .sidebar {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

body.light-theme .card {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body.light-theme .nav-item.active {
    background: linear-gradient(90deg, var(--primary-light) 0%, rgba(157, 141, 241, 0) 100%);
}

/* Transition effects for smooth theme switching */
body, .card, .sidebar, .main-content, .main-header, 
.search-bar, .notifications, .profile-info, .nav-item,
.chart-card, .stat-card, input, button, a, svg {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}