/* Test Execution Page Styles */

/* SQL Editor improvements */
#sql-input {
    font-family: 'Consolas', 'Courier New', monospace !important;
    line-height: 1.5;
    tab-size: 4;
}

#sql-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Progress bar styling */
.progress {
    font-size: var(--font-size-body-lg);
    font-weight: bold;
}

/* Question display */
.lead {
    font-size: var(--font-size-section-title);
    line-height: 1.6;
}

/* Button improvements */
.btn-sm {
    font-size: 0.875rem;
}

/* Compact buttons for test executor (same size as navbar links) */
.test-executor-page .btn-lg,
#real-execute,
#real-start-test,
#sql-execute-btn,
#sql-check-btn,
#result-check-btn {
    font-size: 0.875rem !important;
    padding: 0.3rem 1rem !important;
    font-weight: 500 !important;
    min-height: auto;
    white-space: nowrap !important;
}

.test-executor-page #real-execute {
    min-width: 120px;
}

/* Results table styling */
.dash-table-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Timer and status */
.bi-clock {
    font-size: var(--font-size-body-lg);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    #sql-input {
        height: 150px !important;
        font-size: var(--font-size-secondary) !important;
    }
    
    .btn {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
    
    .lead {
        font-size: 1rem;
    }
}

/* Keyboard shortcut hint */
.text-muted {
    font-size: 0.875rem;
}

/* Question selector */
#question-selector {
    max-width: 150px;
}

/* Alert improvements */
.alert pre {
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 200px;
    overflow-y: auto;
}

/* Score display on results page (large stats: Score %, Correct, Time) */
.stat-display {
    font-size: var(--font-size-display);
    font-weight: 700;
}

/* ========================================
   TEST EXECUTOR PAGE
   ======================================== */

.test-executor-page {
    padding: 2px !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ========================================
   PROTOTYPE 2-PANEL STRUCTURE
   ======================================== */

.main-container-proto {
    display: flex;
    height: calc(100vh - 140px);
    min-height: 500px;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

.left-panel {
    width: 30%;
    background: white;
    border-right: 1px solid #e9ecef;
    display: flex;
    flex-direction: row; /* Change to row to place button next to panel-content */
    min-width: 300px;
    position: relative;
}

.panel-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.collapse-btn-wrapper-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    flex-shrink: 0;
    z-index: 10;
}

.center-panel {
    width: 70%;
    background: white;
    display: flex;
    flex-direction: column;
}

.panel-header {
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
    font-weight: 600;
    background: #f8f9fa;
    font-size: var(--font-size-body-lg);
}

.panel-content {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
}

.finish-test-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e9ecef;
    position: relative;
}

.left-panel.collapsed .finish-test-section {
    padding-right: 0; /* No need for space when collapsed */
}

.finish-test-section .btn {
    font-size: 0.875rem !important;
    padding: 0.3rem 1rem !important;
    font-weight: 500 !important;
    min-height: auto;
    white-space: nowrap !important;
}

.questions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* Prevent clicks on empty space between questions */
    pointer-events: none;
}

.questions-list > * {
    /* Re-enable pointer events for child elements */
    pointer-events: auto;
}

.question-item {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 6px;
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
}

.question-item:hover {
    background: #f8f9fa;
    border-color: #007bff;
}

.question-item.current {
    background: #e3f2fd;
    border: 3px solid #1976d2;
}

.question-item.answered {
    background: #e8f5e9;
    border-left: 3px solid #4caf50;
}

.question-item.answered.correct {
    background: #d4edda;
    border-left: 3px solid #28a745;
}

.question-item.answered.incorrect {
    background: #f8d7da;
    border-left: 3px solid #dc3545;
}

.question-item-number {
    background: #007bff;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: var(--font-size-secondary);
    font-weight: 600;
    min-width: 35px;
    text-align: center;
}

.question-item.answered .question-item-number {
    background: #4caf50;
}

.question-item.current .question-item-number {
    background: #1976d2;
}

.question-item-text {
    flex: 1;
    font-size: var(--font-size-secondary);
    line-height: 1.4;
    overflow: hidden;
    word-wrap: break-word;
}

.question-item-status {
    display: flex;
    align-items: center;
    font-size: 16px;
}

/* Question Card */
.question-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 15px;
}

.question-header {
    margin-bottom: 15px;
}

.question-number-badge {
    background: #1446A0;
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--font-size-secondary);
    font-weight: 600;
}

.question-type-badge {
    background: #e3f2fd;
    color: #1976d2;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: var(--font-size-secondary);
    font-weight: 600;
}

.question-text {
    font-size: var(--font-size-body-lg);
    margin-bottom: 15px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 1024px) {
    .main-container-proto {
        flex-direction: column;
        height: auto;
    }
    
    .left-panel, .center-panel {
        width: 100%;
    }
    
    .left-panel {
        max-height: 30vh;
    }
}

/* ========================================
   COLLAPSED LEFT PANEL STYLES
   ======================================== */

.left-panel.collapsed {
    width: 100px; /* 80px for content + 20px for button */
    min-width: 100px;
    transition: width 0.3s ease;
}

.left-panel.collapsed .panel-content {
    padding: 10px 5px;
}

.left-panel.collapsed .questions-list {
    gap: 4px;
}

.question-item-collapsed {
    flex-direction: column;
    padding: 8px 4px;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.question-item-collapsed .question-item-number {
    margin: 0 auto;
    min-width: 30px;
    font-size: var(--font-size-label);
    padding: 3px 8px;
}

.question-item-collapsed .question-item-status {
    font-size: var(--font-size-body-lg);
    margin-top: 2px;
}

/* Hide question text when panel is collapsed */
.left-panel.collapsed .question-item-text {
    display: none !important;
}

/* Adjust question items layout when collapsed */
.left-panel.collapsed .question-item {
    flex-direction: column;
    padding: 8px 4px;
    gap: 4px;
    justify-content: center;
    align-items: center;
}

.left-panel.collapsed .question-item .question-item-number {
    margin: 0 auto;
    min-width: 30px;
    font-size: var(--font-size-label);
    padding: 3px 8px;
}

.left-panel.collapsed .question-item .question-item-status {
    font-size: var(--font-size-body-lg);
    margin-top: 2px;
}

/* Hide "Попыток выполнения SQL:" text label when collapsed (keep icon and number) */
.left-panel.collapsed #total-sql-attempts-container > span.text-muted:not(.fw-bold) {
    display: none !important;
}

/* Hide expanded timer (with seconds) when collapsed */
.left-panel.collapsed #timer-container {
    display: none !important;
}

/* Show collapsed timer (without seconds) when collapsed */
.left-panel.collapsed #timer-container-collapsed {
    display: flex !important;
}

/* Hide collapsed timer when expanded */
.left-panel:not(.collapsed) #timer-container-collapsed {
    display: none !important;
}

.finish-test-section-collapsed {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e9ecef;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.finish-test-section-collapsed #timer-container-collapsed {
    width: 100%;
    justify-content: center;
}

.finish-test-section-collapsed #elapsed-time-display-collapsed {
    min-width: 30px;
    text-align: center;
}

/* Collapse button - vertical, thin, positioned on the right side of scrollbar */
.collapse-btn-wrapper-vertical {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    flex-shrink: 0;
    z-index: 10;
}

.collapse-btn-vertical {
    pointer-events: auto; /* Re-enable clicks on button */
    width: 14px;
    height: 50px;
    padding: 3px 1px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    min-width: auto;
}

.collapse-btn-vertical .bi {
    font-size: var(--font-size-body-lg);
}

/* Ensure questions list is visible and clickable */
.questions-list {
    position: relative;
    z-index: 1;
}

/* Ensure timer has enough space */
.finish-test-section {
    position: relative;
}

.left-panel.collapsed .finish-test-section {
    padding-right: 0; /* No need for space when collapsed */
}

/* Timer display styling */
#elapsed-time-display,
#elapsed-time-display-collapsed {
    font-family: monospace !important;
    white-space: nowrap;
    display: inline-block;
}

/* Editor and result container - default is block, flex when collapsed */
.editor-result-container {
    display: block;
}

/* When left panel is collapsed, change to flex layout */
.left-panel.collapsed ~ .center-panel .editor-result-container {
    display: flex !important;
    gap: 15px;
    align-items: flex-start;
}

.editor-column {
    flex: 1;
    min-width: 0;
}

/* Result column styling */
.result-column-collapsed {
    display: none; /* Hidden by default */
    flex: 1;
    min-width: 300px;
    max-width: 50%;
}

.result-column-collapsed .result-card {
    width: 100%;
    max-width: 100%;
}

/* Center panel adjustments when left panel is collapsed */
.left-panel.collapsed ~ .center-panel {
    width: calc(100% - 100px);
}

/* Show collapsed result display when left panel is collapsed */
.left-panel.collapsed ~ .center-panel .result-column-collapsed {
    display: block !important;
}

/* Hide normal result display when left panel is collapsed (for sql_text questions) */
.left-panel.collapsed ~ .center-panel #real-result-display {
    display: none !important;
}

/* Show normal result display when left panel is expanded */
.left-panel:not(.collapsed) ~ .center-panel #real-result-display {
    display: block;
}

/* Hide collapsed result display when left panel is expanded */
.left-panel:not(.collapsed) ~ .center-panel .result-column-collapsed {
    display: none !important;
}