/* LAYOUT FIX - REMOVE WHITE SPACE - PERSISTENT */

/* Reset all margins and padding on root elements */
* {
    box-sizing: border-box;
}

/* Force page layout ALWAYS */
.page {
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 100vh !important;
}

/* Dark mode override for page */
body.dark-mode .page,
html.dark-mode .page {
    background: #1a1a1a !important;
}

/* Ensure sidebar is ALWAYS exactly 250px */
.sidebar,
div.sidebar,
.page .sidebar {
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
    transform: translateX(0) !important;
    transition: none !important;
}

/* Force main content to ALWAYS start at 250px */
main,
.page main,
div main {
    margin-left: 250px !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: calc(100% - 250px) !important;
    background: white;
    min-height: 100vh !important;
    position: relative !important;
    left: 0 !important;
    border-left: none !important;
}

/* Dark mode override for main */
body.dark-mode main,
body.dark-mode .page main,
body.dark-mode div main,
html.dark-mode main,
html.dark-mode .page main,
html.dark-mode div main {
    background: #1a1a1a !important;
}

/* Remove any potential padding/margin from body and html */
html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: white;
    overflow-x: hidden !important;
    width: 100% !important;
}

/* Dark mode override for html and body */
html.dark-mode,
body.dark-mode {
    background: #1a1a1a !important;
}

/* Ensure content areas don't have extra margins */
.content, 
article,
main .content,
main article {
    margin-left: 0 !important;
    background: white;
    padding-left: 2rem !important;
    width: 100% !important;
}

/* Dark mode override for content areas */
body.dark-mode .content,
body.dark-mode article,
html.dark-mode .content,
html.dark-mode article {
    background: #1a1a1a !important;
}

/* Top row should not add extra margins */
.top-row,
main .top-row {
    margin-left: 0 !important;
    width: 100% !important;
    background-color: #f7f7f7 !important;
    padding-left: 2rem !important;
    position: relative !important;
}

/* Override ANY potential conflicting Bootstrap or component styles */
@media (min-width: 1px) {
    .page {
        flex-direction: row !important;
    }
    
    .sidebar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    main {
        margin-left: 250px !important;
    }
}

/* Force layout on component refresh/navigation */
.page * {
    box-sizing: border-box !important;
}

/* Mobile-specific layout adjustments */
@media (max-width: 1023px) {
    /* Mobile menu toggle button */
    .mobile-menu-toggle {
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: white;
        border-radius: 4px;
        font-size: 1.25rem;
        color: #333;
        cursor: pointer;
        transition: background 0.2s;
        min-height: 44px;
        min-width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Dark mode override for mobile menu toggle */
    body.dark-mode .mobile-menu-toggle,
    html.dark-mode .mobile-menu-toggle {
        background: #353535 !important;
        border-color: #505050 !important;
        color: #e0e0e0 !important;
    }

    .mobile-menu-toggle:hover,
    .mobile-menu-toggle:focus {
        background: #f8f9fa;
        border-color: #007bff;
        outline: 2px solid #007bff;
        outline-offset: 2px;
    }

    .mobile-menu-toggle:active {
        background: #e9ecef;
    }

    /* Hide sidebar on mobile by default */
    .sidebar,
    div.sidebar,
    .page .sidebar {
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease-in-out !important;
    }

    /* Show sidebar when toggled */
    .sidebar.show,
    div.sidebar.show,
    .page .sidebar.show {
        transform: translateX(0) !important;
    }

    /* Full width main content on mobile */
    main,
    .page main,
    div main {
        margin-left: 0 !important;
        width: 100% !important;
        padding-top: 60px !important; /* Room for mobile header */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Adjust content padding */
    .content, 
    article,
    main .content,
    main article {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .top-row,
    main .top-row {
        padding-left: 15px !important;
        padding-right: 15px !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;
    }

    /* Overlay when sidebar is open */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        display: none;
        opacity: 0;
        transition: opacity 0.3s ease-in-out;
    }

    .sidebar-overlay.show {
        display: block;
        opacity: 1;
    }
}

@media (min-width: 1024px) {
    /* Ensure desktop layout is enforced */
    .sidebar {
        transform: translateX(0) !important;
    }
    
    main {
        margin-left: 250px !important;
        padding-top: 20px !important;
    }
    
    /* Hide mobile menu toggle on desktop */
    .mobile-menu-toggle {
        display: none !important;
    }
    
    /* Ensure overlay is never shown on desktop */
    .sidebar-overlay {
        display: none !important;
    }
}