/* CLEAN LAYOUT SOLUTION - Fix the core issues */

/* 1. Prevent horizontal scrolling everywhere */
html {
    overflow-x: hidden !important;
}

body {
    overflow-x: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 2. Fix the desktop sidebar positioning and size */
.sidebar-compact {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 70px !important;
    height: 100vh !important;
    z-index: 1000 !important;
    background: linear-gradient(180deg, #1f2a40 0%, #151e2e 100%) !important;
}

/* 3. Adjust content wrapper to account for sidebar */
.content-wrapper {
    margin-left: 80px !important;
    padding-top: 20px !important;
    padding-left: 10px !important;
    width: calc(100vw - 90px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

/* 4. Ensure all containers fit within bounds */
.container-fluid {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.container, .row, .col {
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* 5. Fix tables to prevent overflow */
.table-responsive {
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
}

table {
    min-width: 100% !important;
}

/* 6. Fix charts and large elements */
canvas, .chart-container {
    max-width: 100% !important;
    height: auto !important;
}

.card {
    overflow: hidden !important;
    word-wrap: break-word !important;
}

/* 7. Mobile responsiveness */
@media (max-width: 767.98px) {
    .sidebar-compact {
        display: none !important;
    }
    
    .content-wrapper {
        margin-left: 0 !important;
        margin-top: 10px !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100vw !important;
    }
    
    .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin: 0 !important;
    }
    
    /* Hide desktop header on mobile */
    .header {
        display: none !important;
    }
}

/* 8. Prevent any element from causing horizontal scroll */
* {
    box-sizing: border-box !important;
}

*:not(.table-responsive):not(table):not(canvas) {
    max-width: 100% !important;
}