/* === TWO-PANEL TEST INTERFACE STYLES (Add/Ensure these are in style_modern.css) === */

body.test-active-body {
    /* Styles already defined in previous complete style_modern.css */
}

.test-main-header { /* ID in index.php is testGlobalHeader */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 25px;
    background-color: var(--secondary-color); /* Dark blue like example */
    color: var(--light-text);
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-md);
}
.test-main-header h1 {
    margin: 0;
    font-size: 1.4em;
    color: var(--light-text);
    text-align: left;
}
.test-main-header .timer { /* ID in index.php is mainTimerDisplay */
    font-size: 1.15em;
    font-weight: bold;
    background-color: var(--error-color); /* Red timer background */
    color: white;
    padding: 6px 15px;
    border-radius: 20px;
}

.container.test-page-container { /* Class for the main page area below header */
    max-width: 100%; 
    width: 95%; /* Or 100% if you want edge-to-edge */
    margin: 15px auto; /* Centering and space from header */
    padding: 0; /* Let inner panels handle padding */
    background-color: transparent; /* Page background will show */
    box-shadow: none;
    border-radius: 0;
    display: flex; /* Added to help form take full height */
    flex-grow: 1;
}

#testForm { /* Ensure form takes up space for flex children */
    display: flex;
    flex-grow: 1;
}

.test-interface-two-panel { /* ID in index.php is testInterfaceTwoPanel */
    display: flex;
    flex-grow: 1; /* Takes available space within form/container */
    gap: 20px;
    width: 100%;
    /* min-height: calc(100vh - 150px); /* Example: Adjust based on header/footer */
    overflow: hidden; /* Important if children scroll */
}

.question-panel-two-panel { /* ID in index.php is questionPanel */
    flex: 3; 
    background-color: var(--white-bg);
    padding: 20px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
#questionMetaArea {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px; font-size: 0.9em; padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}
.question-num-main { font-weight: 600; }
.syllabus-tag-main { background-color: var(--neutral-bg); padding: 3px 8px; border-radius: var(--border-radius-sm); }

#progressBarContainer {
    width: 100%; height: 12px; background-color: #e9ecef;
    border-radius: 50px; margin-bottom: 15px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.progress-bar-main {
    height: 100%; background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    border-radius: 50px; transition: width 0.4s ease-in-out;
    text-align: center; line-height: 12px; font-size: 9px; color: white; font-weight:bold;
}

#questionTextPlaceholder { /* The H3 for question text */
    font-size: 1.15em; line-height: 1.6; margin-bottom: 15px;
    font-weight: 500; color: var(--dark-text); text-align: left;
    min-height: 50px; /* Ensure some space */
}
#optionsArea { margin-bottom: 20px; flex-grow: 1; }
.option-label-main { /* Individual option label */
    display: flex; align-items: flex-start; padding: 10px 12px; margin: 8px 0;
    border: 1px solid var(--border-color); border-radius: var(--border-radius-md);
    cursor: pointer; transition: all 0.2s ease; background: var(--white-bg);
}
.option-label-main:hover { border-color: var(--primary-color); background: #eef6ff; }
.option-label-main.selected { border-color: var(--accent-color); background-color: #e0f7ff; }
.option-label-main.selected span { font-weight: 600; color: var(--primary-color); }
.option-label-main input[type="radio"] { margin-right: 10px; margin-top: 4px; accent-color: var(--primary-color); }

#questionActionButtonsArea { /* Container for Clear, Mark, Prev, Next */
    margin-top: auto; padding-top:15px;
    border-top: 1px solid var(--border-color);
    display: flex; gap: 10px; flex-wrap: wrap; justify-content: space-between;
}
#questionActionButtonsArea .q-action-btn {
    padding: 8px 15px; border: none; border-radius: var(--border-radius-sm);
    cursor: pointer; font-size: 0.9em; font-weight: 600;
    transition: all 0.2s ease; min-width: 100px; text-transform: uppercase;
    flex-grow: 1; /* Allow buttons to grow if space */
}
#questionActionButtonsArea .mark { background-color: var(--warning-color); color: var(--dark-text); }
#questionActionButtonsArea .mark:hover { background-color: #e9ab00; }
#questionActionButtonsArea .mark.marked-active { background-color: #ffb300; }
#questionActionButtonsArea .clear { background-color: var(--muted-text); color: white; }
#questionActionButtonsArea .clear:hover { background-color: #5a6268; }
#questionActionButtonsArea .prev { background-color: var(--muted-text); color: white; }
#questionActionButtonsArea .prev:hover:not(:disabled) { background-color: #5a6268; }
#questionActionButtonsArea .prev:disabled { opacity:0.6; cursor:not-allowed; }
#questionActionButtonsArea .next { background-color: var(--primary-color); color: white; }
#questionActionButtonsArea .next:hover { background-color: #0041a8; }


.navigation-panel-two-panel { /* ID in index.php is navPanel */
    flex: 1; 
    background-color: var(--neutral-bg); /* Lighter grey for nav */
    padding: 15px;
    border-radius: var(--border-radius-lg);
    box-shadow: var(--shadow-md);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.navigation-panel-two-panel h4 {
    margin: 0 0 10px; color: var(--secondary-color); font-size: 1.05em; text-align:left;
}
.nav-status-legend { margin-bottom: 15px; font-size: 0.85em; } /* ID in index.php is navStatusLegend */
.nav-status-legend .nav-status-item { display: flex; align-items: center; margin-bottom: 5px; }
.nav-status-legend .legend-dot { /* Class for the color span in legend */
    width: 14px; height: 14px; border-radius: 50%; margin-right: 8px; 
    display: inline-block; border: 1px solid rgba(0,0,0,0.1);
}
/* Specific colors for legend dots are set by JS inline style for now, or you can define classes */

.question-nav-grid { /* ID in index.php is questionNavGrid */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); /* Adjust minmax for button size */
    gap: 6px; /* Space between nav buttons */
    margin-bottom: 15px; 
}
.question-nav-btn { /* Class for individual nav buttons */
    width: 100%; aspect-ratio: 1; border: 1px solid #ccc; 
    border-radius: 50%; /* Circular buttons */
    color: var(--dark-text); cursor: pointer; transition: all 0.2s; 
    font-size: 0.9em; font-weight: bold;
    display: flex; align-items: center; justify-content: center;
}
.question-nav-btn:hover { transform: scale(1.05); border-color: var(--test-q-current-border, #3498db); }
.question-nav-btn.current { 
    border: 2px solid var(--test-q-current-border, #3498db); 
    background-color: var(--test-q-current-border, #3498db) !important; 
    color: white !important; transform: scale(1.1);
}
.question-nav-btn.answered { background-color: var(--test-q-answered, #2ecc71); color:white; border-color: var(--test-q-answered, #27ae60); }
.question-nav-btn.not-answered-viewed { background-color: var(--test-q-not-answered, #e67e22); color:white; border-color: var(--test-q-not-answered, #d35400); }
.question-nav-btn.marked { background-color: var(--test-q-marked, #e74c3c); color:white; border-color: var(--test-q-marked, #c0392b); }
.question-nav-btn.not-visited { background-color: var(--test-q-not-visited, #bdc3c7); color: #788085; border-color: #adb5bd;}
.question-nav-btn.answered-marked { background-color: var(--test-q-answered, #2ecc71); border: 2px dashed var(--test-q-marked, #e74c3c); color:white;}


.main-submit-button-style { /* Class for #finalSubmitButtonTwoPanel */
    padding: 10px 30px; font-size: 1.05em; width: 100%; display: block; margin-top: auto; /* Pushes to bottom of nav panel */
    background-color: var(--test-button-submit-bg, #27ae60); color:white;
    border:none; border-radius: var(--border-radius-md);
}
.main-submit-button-style.hidden { display: none !important; }

.logout-early-btn { /* Button below the test interface */
    background: var(--error-color); color: white; padding: 8px 15px;
    border: none; border-radius: var(--border-radius-md); cursor: pointer;
    font-size: 0.9em; font-weight: 500; text-transform: uppercase;
}
.logout-early-btn:hover { background-color: #c82333; }


/* Responsive for Two-Panel */
@media (max-width: 992px) { /* Tablet */
    .test-interface-two-panel { flex-direction: column; }
    .navigation-panel-two-panel { order: -1; margin-bottom: 15px; max-height: 220px; }
    .question-nav-grid { grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)); }
}
@media (max-width: 768px) { /* Mobile */
    .test-main-header { flex-direction: column; gap: 5px; padding: 8px 15px;}
    .test-main-header h1 { font-size: 1.2em; }
    .test-main-header .timer { font-size: 1em; padding: 4px 10px; }
    .container.test-page-container { width: 100%; margin-top:5px; padding:10px;}
    
    .question-panel-two-panel { padding: 15px; }
    #questionTextPlaceholder { font-size: 1em; }
    .option-label-main { font-size: 0.9em; padding: 8px 10px;}
    #questionActionButtonsArea .q-action-btn { font-size: 0.85em; min-width: auto; flex-basis: 48%; padding: 8px;}
    .navigation-panel-two-panel { padding:10px; }
}

/* Ensure general .container for instruction page is not overly affected */
.container.general-info-screen {
    max-width: 800px; /* Or your preferred default */
    margin: 20px auto;
    padding: 25px 35px;
}