/* Mobile and Tablet Responsive Styles */

/* Responsive adjustments */
@media (max-width: 1400px) {
    .video-sidebar {
        width: 250px;
    }
}

@media (max-width: 1200px) {
    .video-sidebar {
        width: 150px;
    }
    
    .video-thumbnail {
        display: none;
    }
}

@media (max-width: 1000px) {
    .video-container {
        flex-direction: column;
        padding: 20px;
    }

    .video-sidebar {
        display: none;
    }

    .video-wrapper {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .content-grid {
        gap: 20px;
    }
    
    .section {
        min-width: 280px;
    }

    .page-wrapper {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .sidenav {
        margin-left: 0;
        order: -1;
    }

    #sidebar {
        width: 100%;
        min-width: unset;
        height: auto;
        padding: 20px;
        padding-left: 20px;
    }

    .main-content {
        order: 1;
    }

    .content-grid {
        flex-direction: column;
    }

    .simulator-section {
        padding: 20px;
    }

    .section {
        padding: 20px;
        margin-bottom: 20px;
    }
}

/* -------------------------------------------------------------
 * 3. DESKTOP STYLES (min-width: 993px)
 * ------------------------------------------------------------- */
@media (min-width: 993px) {
    #sidebar {
        display: block !important; /* Always show on desktop */
    }
    
    .hamburger-menu {
        display: none !important; /* Always hide hamburger on desktop */
    }
}

/* -------------------------------------------------------------
 * 4. TABLET/MOBILE STYLES (max-width: 992px to min-width: 301px)
 * ------------------------------------------------------------- */
@media (max-width: 992px) and (min-width: 301px) {
    html, body {
        overflow-x: hidden;
    }
    /* Reverse layout: hamburger on left, logos on right */
    .hamburger-menu {
        display: flex;
        position: absolute;
        top: 50%; /* Position at 50% from top */
        transform: translateY(-50%); /* Shift up by half its height */
        left: 20px;
        right: auto;
    }
    
    .logo-container {
        flex-direction: row;
        justify-content: center;
        align-items: center;
        width: 100%;
        position: relative;
        padding-bottom: 10px;
        flex-wrap: wrap;
        min-height: 60px; /* Ensure consistent height for vertical centering */
    }

     #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;
    }
    
    #logo {
        max-width: 100%;
        height: auto;
        max-height: 70px;
        margin-right: 0;
        margin-left: 0;
    }
    
    /* Logo links in container on right */
    .logos-right-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center; /* Center vertically */
        margin-right: 20px;
        height: 100%; /* Take full height of container */
    }
    
    /* Collapse the sidebar by default at this breakpoint */
    #sidebar {
        display: none;
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
        width: 100%;
        position: relative;
    }
    
    #sidebar.active {
        display: block;
    }
    
    #sidebar-content ul {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Create a visual connection between hamburger and sidebar */
    #sidebar.active:before {
        content: '';
        position: absolute;
        top: -10px;
        left: 25px;
        width: 0;
        height: 0;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 10px solid #eee;
    }
    
    /* Sidebar content styling */
    #sidebar-content {
        text-align: left;
    }
    
    #sidebar-content > ul > li {
        margin-bottom: 15px;
        list-style-type: none;
        font-weight: bold;
        text-align: left;
    }
    
    #sidebar-content > ul > li > ul > li {
        list-style-type: none;
        text-align: left;
        padding: 8px 0;
        margin: 5px 0;
    }
    
    #sidebar-content > ul > li > ul > li a {
        display: block;
        padding: 2px 0;
        text-decoration: none;
        transition: color 0.2s ease;
    }
    
    #sidebar-content > ul > li > ul > li:hover a {
        color: #d31e47;
    }
    
    #sidebar h4 {
        text-align: left;
    }
}

/* -------------------------------------------------------------
 * 5. SMALL MOBILE STYLES (max-width: 768px to min-width: 301px)
 * ------------------------------------------------------------- */
@media (max-width: 768px) and (min-width: 301px) {
    body {
        padding: 10px !important;
        width: 100% !important;
    }
    
    #side-nav-cell, #main-content-cell {
        padding: 10px;
        width: 100% !important;
        max-width: 100% !important;
    }
    #main-content-cell *, #side-nav-cell * {
        min-width: 0 !important;
    }

    /* Finer adjustments for smaller screens */
    .hamburger-menu {
        top: 20px;
    }
    
    #logo {
        max-height: 50px;
    }
    
    /* Adjust sidebar alignment */
    #sidebar h4 {
        padding-left: 15px;
    }
}

/* -------------------------------------------------------------
 * 6. SMALLER MOBILE STYLES (max-width: 480px to min-width: 301px)
 * ------------------------------------------------------------- */
@media (max-width: 480px) and (min-width: 301px) {
    body {
        padding: 5px !important;
        width: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }
    
    #side-nav-cell, #main-content-cell {
        padding: 5px;
        width: 100% !important;
        display: block !important;
    }
    .hamburger-menu {
        top: 15px;
        left: 15px;
    }
    
    #logo {
        max-height: 40px;
    }
    
    .logos-right-container {
        margin-right: 15px;
    }
    
    #sidebar-content {
        font-size: 14px;
    }
    
    #sidebar-content ul {
        padding-left: 10px;
    }
    
    #sidebar h4 {
        font-size: 16px;
        padding-left: 15px;
    }
}

@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;
    }
}

/* -------------------------------------------------------------
 * 7. EXTRA SMALL MOBILE STYLES (max-width: 300px)
 * ------------------------------------------------------------- */
@media (max-width: 300px) {
    /* Layout for very small screens - logos centered above hamburger */
    .logo-container {
        flex-direction: column;
        align-items: center; /* Center content horizontally */
        justify-content: center; /* Center content vertically */
        text-align: center;
        padding-bottom: 0;
        width: 100%;
        min-height: 50px; /* Ensure minimum height for vertical alignment */
    }
    
    .logos-right-container {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center logos horizontally */
        justify-content: center; /* Center logos vertically */
        margin-right: 0;
        width: 100%;
    }
    
    #logo {
        max-height: 35px;
        width: auto;
        padding: 0;
        margin-left: 0;
    }
    
    /* Hamburger menu - centered below logos */
    .hamburger-menu {
        display: flex !important; /* Force display to ensure visibility */
        position: relative;
        transform: translateX(-50%); /* Center horizontally */
        margin-top: 15px; /* Space between logos and hamburger */
        margin-bottom: 10px;
    }
    
    /* Sidebar adjustments */
    #sidebar {
        display: none; /* Hide by default, will be toggled by JS */
        margin-top: 15px;
        border-top: 1px solid #eee;
        padding-top: 15px;
        width: 100%;
    }
    
    #sidebar.active {
        display: block; /* Show when active */
    }
    
    #sidebar-content {
        font-size: 13px;
        text-align: left;
    }
    
    #sidebar-content ul {
        padding-left: 8px;
    }
    
    #sidebar-content > ul > li {
        margin-bottom: 15px;
        list-style-type: none;
        font-weight: bold;
        text-align: left;
    }
    
    #sidebar-content > ul > li > ul > li {
        list-style-type: none;
        text-align: left;
        padding: 8px 0;
        margin: 5px 0;
    }
    
    #sidebar h4 {
        font-size: 15px;
        text-align: left;
    }
}