/* Fix scrollbar styling and background colors */
html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
    height: 100%;
    width: 100%;
    background-color: #f0f4fc;
    /* Light blue-gray background */
}

body {
    position: relative;
    margin: 0;
    padding: 0;
    background-color: #f0f4fc;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    background-color: #f0f4fc;
}

::-webkit-scrollbar-thumb {
    background-color: #c1c9d9;
    border-radius: 8px;
    border: 2px solid #f0f4fc;
}

::-webkit-scrollbar-track {
    background-color: #f0f4fc;
    border-radius: 8px;
}

/* Prevent overflow issues */
#root {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    background-color: #f0f4fc;
}

/* Fix MUI container overflow */
.MuiContainer-root,
.MuiBox-root,
.MuiGrid-container,
.MuiGrid-item {
    overflow-x: visible !important;
}

/* Hide custom scrollbars in elements */
.MuiCard-root,
.MuiCardContent-root {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.MuiCard-root::-webkit-scrollbar,
.MuiCardContent-root::-webkit-scrollbar {
    display: none;
}

/* Ensure no white gaps in the interface */
html {
    background-color: #f0f4fc;
}

@media (min-width: 600px) {

    /* Desktop styles */
    html,
    body,
    #root {
        min-height: 100vh;
    }
}

@media (max-width: 599px) {

    /* Mobile styles */
    html,
    body,
    #root {
        min-height: -webkit-fill-available;
    }

    body {
        height: -webkit-fill-available;
    }
}