/* settings-repair.css */
/* 
   NUCLEAR OPTION LAYOUT FIX
   This file ignores normal flow and forces elements into position using absolute/fixed positioning.
   Use this when normal Flex/Grid layout is failing due to unknown context conflicts.
*/

:root {
    --sidebar-width: 260px;
    --header-height: 0px;
    /* Settings page has no top header currently */
}

/* 1. RESET BODY SCROLL */
body {
    overflow: hidden !important;
    /* Let content handle scroll */
    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
}

/* 2. LAYOUT CONTAINER (Wrapper) */
.settings-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: var(--bg-main, #0f172a);
    overflow: hidden;
}

/* 3. SIDEBAR - FIXED LEFT */
.settings-sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    width: var(--sidebar-width) !important;
    height: 100vh !important;
    background: var(--sidebar-bg, #1e293b);
    border-right: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    z-index: 9999;
    /* Always on top */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

/* 4. MAIN CONTENT - ABSOLUTE RIGHT */
.settings-content {
    position: absolute !important;
    top: 0;
    left: var(--sidebar-width) !important;
    right: 0;
    bottom: 0;
    width: auto !important;
    /* Reset width to fill remaining space */
    height: 100% !important;
    background: var(--bg-main, #0f172a);
    overflow-y: auto !important;
    /* Content scrolls independently */
    padding: 0;
    /* Reset padding, let children handle it */
    z-index: 1;
    display: block !important;
    /* Ensure it's not hidden */
    margin: 0 !important;
    /* Remove any margins pushing it down */
}

/* 5. CONTENT HEADER RESTORE */
.content-header {
    position: sticky;
    top: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px);
    z-index: 100;
    padding: 20px 40px;
    border-bottom: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
}

/* 6. PANEL VISIBILITY */
.settings-panel {
    display: none;
    padding: 40px;
    max-width: 1600px;
    margin: 0 auto;
    animation: fadeIn 0.3s ease-out;
}

.settings-panel.active {
    display: block;
}

/* 7. ENSURE MODALS ARE ON TOP */
.modal,
#loading-overlay,
#market-upload-modal,
#market-remix-modal {
    z-index: 100000 !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}