.problem-container {
    max-width: 100%;  /* Reduce overall width by 6rem (3rem left + 3rem right) */
    max-height: 100%;  /* Reduce overall width by 6rem (3rem left + 3rem right) */
    width: 99.5%; /* Ensure full width */
    overflow-x: hidden; /* Prevent horizontal scroll */
}


/* Problem status colors */
.text-pending {
    color: #000000;
}

.text-processing {
    color: #63686d;
}

.text-fully_rejected {
    color: #ad2230;
}

.text-partially_rejected {
    color: #a3a51e;
}

.text-accepted {
    color: #218338;
}


/* Problem difficulty colors */
.text-easy {
    color: #2b6d3a;
}

.text-medium {
    color: #2163af;
}

.text-hard {
    color: #85212b;
}

.text-very_hard {
    color: #909228;
}

.problem-completed-row > td {
    background-color: var(--bg-color) !important;
}


/* DEPRECATED: Thin vertical sidebar*/
.sidebar-toggle-btn {
    position: fixed;
    writing-mode: horizontal-tb; /* Ensures normal text flow */
    transform: rotate(0deg); /* Ensures it stays upright */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(228, 228, 228, 0.8); /* Light gray with transparency */
    color: rgba(0, 0, 0, 0.5);
    border: none;
    width: 15px;  /* Thinner */
    height: 100px; /* Tall button */
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px; /* Adjusted for better fit */
    font-weight: bold;
    z-index: 1050;
    transition: background-color 0.3s;
}

.sidebar-toggle-btn:hover {
    background-color: rgba(169, 169, 169, 0.8);
}

.sidebar-toggle-btn .arrow {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
    transform-origin: center; /* Ensures rotation happens around its center */
    opacity: 0.7; /* Optional transparency */
}



/* Screen split for coding problems */
.split {
    display: flex;
    height: 94vh; /* Make it span full viewport height */
    overflow: hidden; /* Prevent content from forcing scrolling */
}
.left {
    flex-grow: 1; /* Take up available space */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ensures no internal scrolling */
}
.right {
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it takes full height */
}
.gutter.gutter-horizontal {
    background: #f0f0f0;
    cursor: col-resize; /* Show resize cursor */
}
.gutter.gutter-horizontal:hover {
    background: var(--corporate-color-light);
    cursor: col-resize; /* Show resize cursor */
}
.gutter.gutter-vertical {
    background: #f0f0f0;
    cursor: row-resize; /* Show resize cursor */
}
.gutter.gutter-vertical:hover {
    background: var(--corporate-color-light);
    cursor: row-resize; /* Show resize cursor */
}

.left .card,
.right .card {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure it fills the parent */
    overflow: auto; /* Allow scrolling only inside the card */
}

/* Horizontal split inside .right */
.split-horizontal {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.top, .bottom {
    flex: none; /* Disable flex growing/shrinking */
    overflow: hidden; /* Prevent content overflow */
}




/* Coding screen for coding problems */
.CodeMirror {
    border: none;
    flex: 1; /* Take up all available space */
    width: 100%;
    height: 100%;
}


/* Terminal-like */
.terminal {
    background-color: white;
    color: black;
    font-family: monospace;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

#text-terminal {
    white-space: pre-wrap; /* Ensures text wraps correctly */
    word-wrap: break-word; /* Breaks long words if needed */
    margin-bottom: 10px; /* Adds space at the bottom of the text area */
}