/* Settings Panel Fix - Resolves scrollbar and background issues */

/* Fix the main panel when settings are active */
#main-panel.settings-active {
    overflow-y: hidden !important; /* Disable main panel scroll when settings are open */
}

/* Settings section should handle its own scrolling */
#settings-section {
    position: relative;
    height: 100%;
    flex-direction: column;
    background-color: var(--bg-tertiary) !important; /* Match central content background */
    display: none; /* Hidden by default like all sections */
}

/* Settings panel container */
#settings-section .settings-panel {
    flex: 1;
    overflow-y: auto; /* Only ONE scrollbar here */
    overflow-x: hidden;
    padding: 20px;
    background-color: var(--bg-tertiary); /* Match main content area background */
    
    /* Smooth scrolling */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Fix settings content area background */
#settings-section .settings-content {
    background-color: var(--bg-tertiary) !important;
    min-height: 100%;
}

/* Settings groups should have proper contrast */
.settings-group {
    background-color: var(--bg-secondary) !important; /* Slightly lighter for contrast - matches left menu */
    border: 2px solid var(--border-primary);
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 25px;
}

/* Ensure the tab content areas have proper background */
.settings-tab-content {
    background-color: transparent; /* Use parent background */
    padding: 20px 0;
}

/* Fix for the settings tabs container */
.settings-tabs {
    background-color: var(--bg-secondary);
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
}

/* When settings section is active - ONLY show when it has active class */
#settings-section.section-content.active {
    display: flex !important;
    flex-direction: column;
    height: 100%; /* Take full height of parent container */
    overflow: hidden; /* Let child handle scrolling */
}

/* Remove any max-width constraints that might cause issues */
#settings-section .settings-panel {
    max-width: none;
    width: 100%;
    max-width: 1200px; /* Reasonable max width */
    margin: 0 auto;
}

/* Fix nested scrollbar issues */
.settings-group > div {
    overflow: visible !important; /* Prevent nested scrollbars */
}

/* Ensure proper height for content */
.settings-tab-content {
    min-height: auto;
    overflow: visible;
}

/* Mobile responsive fixes */
@media (max-width: 768px) {
    #settings-section .settings-panel {
        padding: 10px;
    }
    
    .settings-group {
        padding: 15px;
        margin-bottom: 15px;
    }
    
    #settings-section.section-content.active {
        height: calc(100vh - 60px); /* Adjust for mobile header */
    }
}

/* Smooth transitions */
#settings-section,
#settings-section .settings-panel,
.settings-group {
    transition: background-color 0.3s ease;
}

/* Custom scrollbar for settings panel */
#settings-section .settings-panel::-webkit-scrollbar {
    width: 10px;
}

#settings-section .settings-panel::-webkit-scrollbar-track {
    background: var(--bg-secondary);
    border-radius: 5px;
}

#settings-section .settings-panel::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 5px;
}

#settings-section .settings-panel::-webkit-scrollbar-thumb:hover {
    background: var(--accent-secondary);
}