﻿.SIMple-Page-TopBar {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 2;
}

.SIMple-Pane-Container {
    display: flex;
    flex-direction: column;
    width: 100vw;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--topbar-height, 0px));
    margin-top: var(--topbar-height, 0px);
}

.SIMple-Pane {
    background: var(--bs-body-bg);
    margin: 0;
    padding: 32px 24px;
    box-sizing: border-box;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* Pane width utility classes */
.SIMple-Pane.pane-20 { width: 20% !important; }
.SIMple-Pane.pane-40 { width: 40% !important; }
.SIMple-Pane.pane-60 { width: 60% !important; }
.SIMple-Pane.pane-80 { width: 80% !important; }

@media (min-width: 1920px) {
    .SIMple-Pane-Container {
        flex-direction: row;
        gap: 0;
        height: calc(100vh - var(--topbar-height, 0px));
        overflow: hidden;
    }

    .SIMple-Pane {
        height: 100%;
        padding: 32px 24px;
        overflow-y: scroll;
        -ms-overflow-style: none; /* IE and Edge */
    }

    .SIMple-Pane.left {
        width: 40%;
        overflow-y: scroll;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }

    .SIMple-Pane.left::-webkit-scrollbar {
        display: none; /* Chrome, Safari, Opera */
    }

    .SIMple-Pane.right {
        width: 60%;
        overflow-y: scroll;
        /* Show scrollbar as normal */
    }
}

@media (max-width: 1919px) {
    .SIMple-Pane-Container {
        flex-direction: column;
        height: calc(100vh - var(--topbar-height, 0px));
        overflow: auto;
    }

    .SIMple-Pane {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .SIMple-Pane.pane-20,
    .SIMple-Pane.pane-40,
    .SIMple-Pane.pane-60,
    .SIMple-Pane.pane-80 {
        width: 100% !important;
    }

        .SIMple-Pane.left {
            padding-bottom: 0px;
        }

        .SIMple-Pane.left::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        .SIMple-Pane.right {
            padding-top: 0px;
        }
}
