/* Theme fixes for better visibility and theme adaptation */

/* Make verbose button more visible in light mode */
#run-tests-verbose-btn {
    background-color: #8b5cf6 !important; /* purple-500 */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#run-tests-verbose-btn:hover {
    background-color: #7c3aed !important; /* purple-600 */
}

.dark #run-tests-verbose-btn {
    background-color: #6d28d9 !important; /* purple-700 */
}

.dark #run-tests-verbose-btn:hover {
    background-color: #7c3aed !important; /* purple-600 */
}

/* Consistent shadow for all buttons */
#run-tests-btn, #submit-btn, .load-submission {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

/* Make green button more visible */
#submit-btn {
    background-color: #10b981 !important; /* green-500 */
}

#submit-btn:hover {
    background-color: #059669 !important; /* green-600 */
}

.dark #submit-btn {
    background-color: #047857 !important; /* green-700 */
}

.dark #submit-btn:hover {
    background-color: #059669 !important; /* green-600 */
}

/* Better hover effects for resize handles */
#description-resize-handle:hover, #output-resize-handle:hover {
    background-color: rgba(79, 70, 229, 0.3) !important; /* primary-500/30 */
}

/* Better text color for console output placeholder */
#console-output .italic {
    color: #6b7280 !important; /* gray-500 */
}

.dark #console-output .italic {
    color: #9ca3af !important; /* gray-400 */
}

/* Timer container enhancement */
.timer-container {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid rgba(229, 231, 235, 0.5) !important; /* gray-200 with transparency */
}

.dark .timer-container {
    border: 1px solid rgba(75, 85, 99, 0.5) !important; /* gray-600 with transparency */
}

.timer-display {
    font-weight: 500 !important;
}

/* Fix description and terminal headers */
#description-panel > div:first-child {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    border-bottom: 1px solid #e5e7eb !important; /* border-gray-200 */
}

#output-panel > div:first-child {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    border-bottom: 1px solid #e5e7eb !important; /* border-gray-200 */
}

.dark #description-panel > div:first-child {
    background-color: #1f2937 !important; /* bg-gray-800 */
    border-bottom: 1px solid #374151 !important; /* border-gray-700 */
}

.dark #output-panel > div:first-child {
    background-color: #1f2937 !important; /* bg-gray-800 */
    border-bottom: 1px solid #374151 !important; /* border-gray-700 */
}

/* Header text styling */
#description-panel h3 {
    color: #374151 !important; /* text-gray-700 */
    font-weight: 500 !important;
}

#output-panel h3 {
    color: #374151 !important; /* text-gray-700 */
    font-weight: 500 !important;
}

.dark #description-panel h3 {
    color: #e5e7eb !important; /* text-gray-200 */
}

.dark #output-panel h3 {
    color: #e5e7eb !important; /* text-gray-200 */
}

/* Description panel body styling */
#description-panel {
    background-color: #ffffff !important; /* bg-white */
    border-right: 1px solid #e5e7eb !important; /* border-gray-200 */
}

.dark #description-panel {
    background-color: #1f2937 !important; /* bg-gray-800 */
    border-right: 1px solid #374151 !important; /* border-gray-700 */
}

/* Output panel body styling */
#output-panel {
    background-color: #ffffff !important; /* bg-white */
    border-top: 1px solid #e5e7eb !important; /* border-gray-200 */
}

.dark #output-panel {
    background-color: #1f2937 !important; /* bg-gray-800 */
    border-top: 1px solid #374151 !important; /* border-gray-700 */
}

/* Output label styling */
#output-panel span.px-2 {
    background-color: #e5e7eb !important; /* bg-gray-200 */
    color: #374151 !important; /* text-gray-700 */
}

.dark #output-panel span.px-2 {
    background-color: #4b5563 !important; /* bg-gray-600 */
    color: #d1d5db !important; /* text-gray-300 */
}

/* Console output area styling */
#console-output {
    background-color: #f9fafb !important; /* bg-gray-50 */
    color: #374151 !important; /* text-gray-700 */
    border: 1px solid #f3f4f6 !important; /* border-gray-100 */
}

.dark #console-output {
    background-color: #111827 !important; /* bg-gray-900 */
    color: #d1d5db !important; /* text-gray-300 */
    border: 1px solid #1f2937 !important; /* border-gray-800 */
}