/* ---------------------- MAIN ----------------------------------------- */

main {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex: 1;
    user-select: none;  
}

#left_side, #right_side {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 2.5em);
    overflow: hidden; /* Prevent accidental growth */
}

.bay {
    width: 715px;
    min-height: min-content; 
    height: 100%;
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end !important;

    background: repeating-linear-gradient(
        to top, /* Change the direction to go upwards */
        rgb(236, 233, 216), /* Start with the gap color */
        rgb(236, 233, 216) 104px, /* End of the gap */
        lightgray 104px, /* Start of the line */
        lightgray 106px /* Line height */
    );
    background-position: bottom; /* Align the pattern to the bottom */
}

.bay_wrapper {
    height: 100%; /* Matches the parent's height */
    box-sizing: border-box; /* Ensures padding doesn't break dimensions */
}

.bay_wrapper {
    border: 2px solid gray;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.sortable_wrapper {
    flex: 1; /* Ensures it takes available space */
    overflow-y: scroll; /* Enables vertical scrolling */
    /* overflow-x: hidden;  Hides the horizontal scrollbar */
    max-height: 100%; /* Prevents overflow beyond parent */
    box-sizing: border-box;
}



.bay_header {
    background-color: rgb(0, 46, 114);
    color: rgb(240, 240, 240);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    padding: 0.2em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 25px;
}

.bay_header button {
    padding: 0.1em;
}

.bay_header button:hover {
    cursor: pointer;
}

.bay_header p {
    width: 100%;
}

.resizeable {
    cursor: row-resize;
}