html,
body {
    height: 100%;

    .custom-navbar {
        background-color: #017ea9 !important;
    }

    /* Mobile Menu Styles */
    @media (max-width: 991.98px) {
        .navbar-collapse {
            background-color: #017ea9;
            /* Match navbar color */
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            z-index: 1100;
            padding: 1rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            height: auto !important;
            /* Override any h-100 if present */
            max-height: calc(100vh - 60px);
            overflow-y: auto;
        }

        .navbar-nav .nav-link {
            color: white !important;
            padding: 0.5rem 0;
        }
    }

    .sidebar {
        height: calc(100vh - 60px);
        /* Navbar is 60px */
        width: 100%;
        /* Mobile default */
    }

    /* Tree Styles */
    .tree-item {
        cursor: pointer;
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #e9ecef;
    }

    .tree-item:hover {
        background-color: #f8f9fa;
    }

    .tree-item.active {
        background-color: #e9ecef;
        font-weight: bold;
    }

    .tree-children {
        padding-left: 1.5rem;
        display: none;
    }

    .tree-children.show {
        display: block;
    }

    .tree-toggle {
        margin-right: 0.5rem;
        transition: transform 0.2s;
    }

    .tree-toggle.expanded {
        transform: rotate(90deg);
    }

    /* Thumbnail Styles */
    .thumb-card {
        cursor: pointer;
        transition: transform 0.2s;
    }

    .thumb-card:hover {
        transform: scale(1.05);
        z-index: 1;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .thumb-img {
        width: 100%;
        height: auto;
        object-fit: contain;
        aspect-ratio: 174/256;
        background-color: #f8f9fa;
    }

    /* Viewer Styles */
    /* Viewer Styles */
    #viewer-view {
        /* Removed absolute positioning to respect sidebar */
        /* position: absolute; */
        /* top: 56px; */
        /* left: 0; */
        /* right: 0; */
        z-index: 1000;
        background: white;
        height: 100%;
    }

    /* Desktop Styles */
    @media (min-width: 768px) {
        .sidebar {
            width: 230px;
            min-width: 230px;
            position: sticky;
            top: 60px;
            height: calc(100vh - 60px);
            overflow-y: auto;
        }

        #main-view {
            /* Flex grow handles the rest */
        }
    }

    /* Mobile Styles */
    @media (max-width: 767.98px) {
        #main-view {
            position: fixed;
            top: 60px;
            /* Below navbar */
            left: 0;
            width: 100%;
            height: calc(100vh - 60px);
            z-index: 1050;
            transform: translateX(100%);
            /* Hidden by default */
            transition: transform 0.3s ease-in-out;
            padding: 0;
        }

        #main-view.show-mobile {
            transform: translateX(0);
            /* Slide in */
        }
    }

    @media (min-width: 992px) {
        #main-view {
            margin-left: 8.333333%;
            /* Match col-lg-1 */
        }
    }