/* Base styles for main content layout */
body {
    padding: 20px !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

table,th,td{
    border: 0;
    box-sizing: border-box;
    width: 100%;
}

#main-content-table {
    width: 100%;
    height: 98%;
    table-layout: fixed; /* Control table layout more precisely */
    border-collapse: collapse; /* Remove cell spacing */
    border-spacing: 0;
}

#main-content-table tbody {
    width: 100%;
}

#main-content-table tr {
    width: 100%;
}

#side-nav-cell {
    vertical-align: top;
    padding: 20px;
    width: 250px; /* Fixed width for navigation */
}

#main-content-cell {
    vertical-align: top;
    text-align: center;
    padding: 50px;
    width: auto; /* Let this cell take remaining space */
}

#main_content {
    width: 80%;
    vertical-align: top;
    box-sizing: border-box;
    /* padding-left: 50px;
    padding-right: 50px; */
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
}

#test_display {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

#footer-cell {
    padding: 20px; 
    text-align: center; 
    font-size: 16px; 
    font-weight: bold;
}



/* Global fixes for responsive layouts - apply to all screen sizes */
@media screen {
    /* Ensure all content respects container boundaries */
    #main_content > *,
    #test_display > *,
    #main-content-cell > * {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Fix common responsive issues */
    img, svg, video, canvas, object {
        max-width: 100%;
        height: auto;
        width: auto;
    }
    
    /* Fix for nested content containers */
    .main-container, 
    .epic-search-wrapper,
    #searchcontainer,
    .content-wrapper {
        box-sizing: border-box;
    }

    #table td:first-child {
        width: 25%;
        vertical-align: top;
    }
}

@media (max-width: 1350px) {
    #main_content {
        width: 100%;
    }
}

/* Responsive styles */
@media (max-width: 992px) {
    #main-content-table {
        display: block; /* Change to block instead of flex */
        width: 100%;
    }

    #main-content {
        padding-left: 0px;
        padding-right: 0px;
    }
    
    #main-content-table > tbody, 
    #main-content-table > tbody > tr {
        display: block;
        width: 100%;
    }
    
    #side-nav-cell, #main-content-cell {
        width: 100% !important; /* Force full width */
        display: block;
        padding: 20px;
        box-sizing: border-box;
        float: none; /* Prevent floating */
    }
    
    #test_display {
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
    
    /* Ensure logo container is centered on mobile */
    #side-nav-cell .logo-container {
        display: flex;
        width: 100%;
        margin-bottom: 15px;
    }
    
    /* Fix for nested content */
    #main_content, #test_display, 
    #main-content-cell > div,
    #side-nav-cell > div {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }
    
    /* Target potential nested tables */
    #main-content-cell table,
    #main-content-cell tbody,
    #main-content-cell tr,
    #main-content-cell td {
        width: 100% !important;
        display: block;
        box-sizing: border-box;
    }

}

@media (max-width: 768px) {
    body {
        padding: 10px !important;
        width: 100% !important;
    }
    
    #main-content-table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }
    
    #side-nav-cell, #main-content-cell {
        padding: 10px;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    #main_content {
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
        text-align: center;
    }
    
    #test_display {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Reset any min-width that might be causing overflow */
    #main-content-cell *, #side-nav-cell * {
        min-width: 0 !important;
    }
    
    /* Target homepage container specifically */
    .main-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }
    
    #footer-cell {
        padding: 15px;
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    body {
        padding: 5px !important;
        width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    #main-content-table {
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    #side-nav-cell, #main-content-cell {
        padding: 5px;
        width: 100% !important;
        display: block !important;
    }
    
    /* Ensure test display is full width */
    #test_display {
        width: 100% !important;
        overflow-x: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Extra small devices */
@media (max-width: 400px) {
    body {
        padding: 2px !important;
    }
    
    #main-content-table, 
    #side-nav-cell, 
    #main-content_cell,
    #main_content,
    #test_display {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 3px !important;
        margin: 0 !important;
    }
    
    /* Force any child elements to respect container width */
    * {
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
}