/* CAW - Coding Assignments Weimer
 * Design System - Dark theme, professional, minimalistic
 * Based on Flowchart and Markdown Styler patterns
 */

:root {
    --bg-dark: #1a1a1a;
    --bg-panel: #252525;
    --bg-input: #2d2d2d;
    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --text: #e5e5e5;
    --text-muted: #888;
    --border: #404040;
    --success: #22c55e;
    --warning: #f59e0b;
    --error: #ef4444;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--bg-dark);
    color: var(--text);
    height: 100%;
    overflow: hidden;
}

/* Header */
header {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.header-center {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.02em;
}

.logo-accent {
    color: var(--accent);
}

/* Buttons */
button {
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text);
    transition: all 0.15s ease;
}

.btn:hover {
    border-color: var(--accent);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn:disabled:hover {
    border-color: var(--border);
}

.btn-primary {
    border-color: var(--accent);
    background: var(--accent);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}

.btn-stop {
    border-color: var(--error);
    background: var(--error);
    color: white;
}

.btn-stop:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.btn-warning {
    border-color: var(--warning);
    background: var(--warning);
    color: #1a1a1a;
}

.btn-warning:hover {
    background: #eab308;
    border-color: #eab308;
}

.btn-success {
    border-color: var(--success);
    background: var(--success);
    color: white;
}

.btn-success:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.btn svg {
    width: 16px;
    height: 16px;
}

/* Icon Buttons */
.icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.icon-btn:hover {
    color: var(--text);
    border-color: var(--accent);
}

.icon-btn svg {
    width: 20px;
    height: 20px;
}

/* Dropdown */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.dropdown-toggle:hover {
    border-color: var(--accent);
}

.dropdown-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.15s ease;
}

.dropdown.open .dropdown-toggle svg {
    transform: rotate(180deg);
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.25rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    z-index: 100;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
}

.dropdown.open .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: none;
    background: transparent;
    color: var(--text);
    text-align: left;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dropdown-item:hover {
    background: var(--bg-input);
}

.dropdown-item.active {
    background: var(--accent);
    color: white;
}

.dropdown-divider {
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

/* Assessment badge in dropdown */
.dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.assessment-badge {
    background: var(--warning);
    color: #000;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.5rem;
}

/* Status Indicators */
.status-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--text-muted);
}

.status-dot.online {
    background: var(--success);
}

.status-dot.warning {
    background: var(--warning);
}

.status-dot.error {
    background: var(--error);
}

/* User Info */
.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.4rem 0.75rem;
    border-radius: 6px;
    background: var(--bg-input);
}

.user-name {
    font-size: 0.85rem;
    color: var(--text);
}

/* Main Content */
main {
    height: calc(100% - 56px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Split Pane Layout */
.split-pane {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pane-left {
    flex: 0 0 40%;
    min-width: 300px;
    border-right: 1px solid var(--border);
}

.pane-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.resizer {
    width: 6px;
    background: var(--border);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.resizer:hover {
    background: var(--accent);
}

.resizer.resizing {
    background: var(--accent);
}

/* Layout Toggle Button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--border);
    background: var(--bg-input);
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.btn-icon:hover {
    border-color: var(--accent);
    color: var(--text);
}

.btn-icon.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Alternate Layout Mode */
.split-pane.layout-alternate {
    /* Container uses same flex layout but content is swapped via JavaScript */
}

.split-pane.layout-alternate .pane-left {
    /* In alternate mode, left pane contains code editor */
    border-right: 1px solid var(--border);
}

.split-pane.layout-alternate .pane-left .editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.split-pane.layout-alternate .pane-left .code-editor {
    flex: 1;
    overflow: hidden;
}

.split-pane.layout-alternate .pane-right {
    /* In alternate mode, right pane contains output (top) and instructions (bottom) */
}

/* Instructions container when in right pane */
.instructions-container.in-right-pane {
    flex: 1;
    min-height: 100px;
    display: flex;
    flex-direction: column;
}

.instructions-container.in-right-pane .instructions-alt-header {
    display: flex !important;
}

.instructions-container.in-right-pane .instructions-frame {
    flex: 1;
}

/* Pane Headers */
.pane-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    min-height: 48px;
    flex-shrink: 0;
}

.pane-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Instructions Pane */
.instructions-container {
    flex: 1;
    overflow: hidden;
    background: var(--bg-dark);
}

.instructions-frame {
    width: 100%;
    height: 100%;
    border: none;
    background: white;
}

/* Responses Section */
.responses-section {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
    max-height: 40%;
    overflow-y: auto;
}

.responses-header {
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%);
    border-bottom: 1px solid #0891b2;
    position: sticky;
    top: 0;
    z-index: 1;
}

.responses-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: #0e7490;
}

.responses-container {
    padding: 1rem;
}

.response-item {
    margin-bottom: 1rem;
}

.response-item:last-child {
    margin-bottom: 0;
}

.response-label {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.response-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s;
}

.response-textarea:focus {
    outline: none;
    border-color: #0891b2;
}

.response-textarea::placeholder {
    color: var(--text-muted);
}

/* Feedback Panel */
.feedback-panel {
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    padding: 0.75rem 1rem;
}

.feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feedback-title {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.feedback-grade {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--accent);
}

.feedback-text {
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Code Editor Container */
.editor-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.code-editor {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.code-editor .CodeMirror {
    height: 100%;
    font-size: 14px;
    line-height: 1.5;
}

/* Editor file tab bar (multi-file challenges) */
.editor-tab-bar {
    display: flex;
    gap: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    padding: 0 0.25rem;
    flex-shrink: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.editor-tab-bar::-webkit-scrollbar {
    height: 4px;
}

.editor-tab-bar::-webkit-scrollbar-track {
    background: transparent;
}

.editor-tab-bar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.editor-tab {
    padding: 0.35rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.editor-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.editor-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Admin file tab bar (challenge editor) */
.admin-file-tab-bar {
    display: flex;
    gap: 0;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 0 0.25rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.admin-file-tab-bar::-webkit-scrollbar {
    height: 4px;
}

.admin-file-tab-bar::-webkit-scrollbar-track {
    background: transparent;
}

.admin-file-tab-bar::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.admin-file-tab {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-file-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.admin-file-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.admin-file-tab .tab-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.admin-file-tab:hover .tab-remove {
    opacity: 1;
}

.admin-file-tab .tab-remove:hover {
    color: var(--error);
    background: rgba(255, 255, 255, 0.1);
}

.admin-file-tab-add {
    padding: 0.35rem 0.5rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: color 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.admin-file-tab-add:hover {
    color: var(--accent);
}

/* Feedback file tabs (multi-file submissions) */
.feedback-file-tabs {
    display: flex;
    gap: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border);
    padding: 0 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.feedback-file-tabs::-webkit-scrollbar {
    height: 4px;
}

.feedback-file-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.feedback-file-tabs::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.feedback-file-tab {
    padding: 0.3rem 0.65rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.feedback-file-tab:hover {
    color: var(--text);
}

.feedback-file-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Preview file tabs (admin challenge preview) */
.preview-file-tabs {
    display: none;
    gap: 0;
    background: var(--bg-dark);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    padding: 0 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.preview-file-tabs::-webkit-scrollbar {
    height: 4px;
}

.preview-file-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.preview-file-tabs::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 2px;
}

.preview-file-tabs.has-files {
    display: flex;
}

.preview-file-tab {
    padding: 0.35rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.preview-file-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.preview-file-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* When file tabs are shown, editor should not have top border-radius */
.preview-file-tabs.has-files + #full-preview-editor-container .CodeMirror {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Read-only editor indicator */
.editor-readonly {
    opacity: 0.7;
}

.editor-readonly .CodeMirror-cursor {
    display: none !important;
}

/* Output/Canvas Container */
.output-container {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    min-height: 100px;
    overflow: hidden;
    position: relative; /* For Pyodide loading overlay */
}

.output-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: var(--bg-dark);
}

.output-error {
    color: var(--error);
}

/* Inline Input (for Python input() function) */
.inline-input-wrapper {
    display: inline;
}

.inline-input-prompt {
    color: var(--text);
}

.inline-input-field {
    background: var(--bg-input);
    border: 1px solid var(--accent);
    border-radius: 3px;
    color: var(--text);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: inherit;
    font-size: 13px;
    padding: 0.15rem 0.4rem;
    margin-left: 0.25rem;
    min-width: 150px;
    outline: none;
}

.inline-input-field:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.inline-input-value {
    color: #6ee7b7;
    margin-left: 0.25rem;
}

/* Canvas Container (for Turtle) */
.canvas-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    overflow: hidden;
}

.turtle-canvas {
    background: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative; /* Required for Skulpt's layered canvases */
}

/* Pyodide Loading Overlay */
.pyodide-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(26, 26, 26, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    z-index: 10;
}

.pyodide-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: pyodide-spin 1s linear infinite;
}

@keyframes pyodide-spin {
    to { transform: rotate(360deg); }
}

.pyodide-loading-text {
    color: var(--text);
    font-size: 1rem;
    font-weight: 500;
}

.pyodide-loading-subtext {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Editor-Output Resizer (vertical, between code editor and output) */
.editor-output-resizer {
    height: 6px;
    background: var(--bg-panel);
    cursor: ns-resize;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.editor-output-resizer:hover,
.editor-output-resizer.dragging {
    background: var(--accent);
}

.editor-output-resizer .resizer-handle {
    width: 30px;
    height: 3px;
    background: var(--border);
    border-radius: 2px;
}

.editor-output-resizer:hover .resizer-handle,
.editor-output-resizer.dragging .resizer-handle {
    background: white;
}

/* Expanded Canvas Overlay */
.canvas-expanded-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.canvas-expanded-overlay .expanded-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 800px;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.canvas-expanded-overlay .expanded-title {
    color: var(--text);
    font-weight: 500;
}

.canvas-expanded-overlay .expanded-canvas-container {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.canvas-expanded-overlay .expanded-canvas-container canvas {
    display: block;
}

/* Action Buttons */
.action-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
}

.action-bar-spacer {
    flex: 1;
}

/* Modals */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.modal-overlay.active {
    display: flex;
}

.modal {
    background: var(--bg-panel);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 1.5rem;
    width: 100%;
    max-width: 400px;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-large {
    max-width: 800px;
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    transition: all 0.15s ease;
}

.modal-close:hover {
    background: var(--bg-input);
    color: var(--text);
}

.modal-body {
    margin-bottom: 1.5rem;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

/* Form Elements */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent);
}

.form-input::placeholder {
    color: var(--text-muted);
}

.form-error {
    color: var(--error);
    font-size: 0.8rem;
    margin-top: 0.35rem;
}

/* Toast Notifications */
.toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--bg-panel);
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: 6px;
    border: 1px solid var(--border);
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1001;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.toast.success {
    border-color: var(--success);
}

.toast.error {
    border-color: var(--error);
}

.toast.warning {
    border-color: var(--warning);
}

/* Login Screen */
.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: var(--bg-dark);
}

.login-card {
    background: var(--bg-panel);
    border-radius: 12px;
    border: 1px solid var(--border);
    padding: 2rem;
    width: 100%;
    max-width: 360px;
}

.login-header {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.login-subtitle {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.login-form .form-group {
    margin-bottom: 1.25rem;
}

.login-form .btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem;
}

/* Stats Display */
.stats-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.stat-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.stat-value {
    color: var(--text);
    font-weight: 500;
}

.stat-icon {
    width: 16px;
    height: 16px;
}

/* Timer */
.timer {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
}

.timer.warning {
    color: var(--warning);
}

.timer.danger {
    color: var(--error);
}

/* Three-Column Layout (Instructor View) */
.three-column {
    display: grid;
    grid-template-columns: 280px 1fr 1fr;
    height: calc(100% - 56px);
}

.sidebar {
    background: var(--bg-panel);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.sidebar-header {
    padding: 1rem;
    border-bottom: 1px solid var(--border);
}

.sidebar-search {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-size: 0.85rem;
}

.sidebar-search:focus {
    outline: none;
    border-color: var(--accent);
}

.sidebar-list {
    flex: 1;
    overflow-y: auto;
}

.sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}

.sidebar-item:hover {
    background: var(--bg-input);
}

.sidebar-item.active {
    background: var(--accent);
}

.sidebar-item.active .sidebar-item-meta {
    color: rgba(255, 255, 255, 0.7);
}

.sidebar-item-info {
    flex: 1;
    min-width: 0;
}

.sidebar-item-name {
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-item-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* Grading Panel */
.grading-panel {
    padding: 1rem;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
}

.grade-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.grade-input {
    width: 80px;
    text-align: center;
}

.grade-max {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.feedback-textarea {
    width: 100%;
    min-height: 80px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    resize: vertical;
}

.feedback-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Session History Rows */
.session-row {
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.15s ease;
}

.session-row:hover {
    background: var(--bg-input);
}

.session-row.legacy {
    opacity: 0.7;
}

/* Admin Tabs */
.admin-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0 1rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
}

.admin-tab {
    padding: 0.75rem 1rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.15s ease;
}

.admin-tab:hover {
    color: var(--text);
}

.admin-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Admin Content */
.admin-content {
    padding: 1.5rem;
    overflow-y: auto;
    height: calc(100% - 56px - 49px);
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1.25rem;
}

.stat-card-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.stat-card-value {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text);
}

/* Data Table */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.data-table th,
.data-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.data-table th {
    background: var(--bg-input);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.data-table tr:last-child td {
    border-bottom: none;
}

.data-table tr:hover td {
    background: var(--bg-input);
}

.table-actions {
    display: flex;
    gap: 0.5rem;
}

/* Badge */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.badge-primary {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent);
}

.badge-warning {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.badge-error {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.badge-muted {
    background: var(--bg-input);
    color: var(--text-muted);
}

.badge-info {
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary);
}

/* Difficulty Stars */
.difficulty {
    color: var(--warning);
    letter-spacing: 1px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem;
    color: var(--text-muted);
}

.empty-state-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.5rem;
}

/* ==================== FEEDBACK VIEW STYLES ==================== */

.feedback-view {
    height: calc(100% - 56px);
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
}

.pending-view {
    height: calc(100% - 56px);
    overflow-y: auto;
    background: var(--bg-dark);
    padding: 2rem;
}

.pending-view-container {
    max-width: 800px;
    margin: 0 auto;
}

.feedback-view-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.feedback-view-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    flex: 1;
}

.feedback-view-grade-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
}

.feedback-view-grade-badge .grade-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
}

.feedback-view-grade-badge .grade-value {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Split Pane Layout */
.feedback-split-pane {
    display: flex;
    flex: 1;
    overflow: hidden;
}

.feedback-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feedback-pane-left {
    width: 45%;
    min-width: 300px;
    border-right: 1px solid var(--border);
}

.feedback-pane-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feedback-pane-left .instructions-container {
    flex: 1;
    overflow: hidden;
}

.feedback-pane-left .instructions-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.feedback-resizer {
    width: 6px;
    background: var(--bg-panel);
    cursor: col-resize;
    flex-shrink: 0;
    transition: background 0.15s ease;
}

.feedback-resizer:hover {
    background: var(--accent);
}

/* General Feedback Panel */
.feedback-general-panel {
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
}

.feedback-general-content {
    padding: 1rem;
    color: var(--text);
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre-wrap;
    max-height: 120px;
    overflow-y: auto;
    background: var(--bg-panel);
}

.feedback-general-content.empty::after {
    content: 'No general feedback provided.';
    color: var(--text-muted);
    font-style: italic;
}

/* Code Review Panel */
.feedback-code-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 200px;
}

.feedback-code-panel .pane-header {
    justify-content: space-between;
}

.feedback-code-content {
    flex: 1;
    overflow: auto;
    background: #1e1e1e;
}

/* Actions Panel */
.feedback-actions-panel {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-panel);
    border-top: 1px solid var(--border);
}

/* Shared styles */
.grade-label {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.grade-value {
    font-size: 2rem;
    font-weight: 700;
}

.grade-value.grade-A { color: var(--success); }
.grade-value.grade-B { color: #4ade80; }
.grade-value.grade-C { color: var(--warning); }
.grade-value.grade-D { color: #f97316; }
.grade-value.grade-F { color: var(--error); }

.code-tabs {
    display: flex;
    gap: 0.5rem;
}

.code-tab {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.code-tab:hover {
    color: var(--text);
    border-color: var(--accent);
}

.code-tab.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.code-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.code-display {
    margin: 0;
    padding: 1rem 1.5rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text);
    white-space: pre-wrap;
    word-wrap: break-word;
    background: transparent;
}

/* Syntax highlighted code in feedback view */
.code-display code {
    font-family: inherit;
    background: transparent;
}

.no-resubmit-message {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.no-resubmit-message svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--warning);
}

#edit-resubmit-btn {
    padding: 0.75rem 2rem;
    font-size: 1rem;
}

/* Pending View */
.pending-view-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 2rem;
}

.pending-view-container > .btn {
    align-self: flex-start;
    margin-bottom: 3rem;
}

.pending-content {
    text-align: center;
    max-width: 400px;
}

.pending-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-icon svg {
    width: 40px;
    height: 40px;
    color: var(--accent);
}

.pending-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 1rem 0;
}

.pending-message {
    font-size: 1.1rem;
    color: var(--text);
    margin: 0 0 0.5rem 0;
}

.pending-submessage {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 1.5rem 0;
}

.pending-info {
    padding: 1rem;
    background: var(--bg-panel);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.pending-info strong {
    color: var(--text);
}

/* ==================== DASHBOARD STYLES ==================== */

/* Dashboard View */
.dashboard-view {
    height: calc(100% - 56px);
    overflow-y: auto;
    background: var(--bg-dark);
    padding: 1.5rem;
}

.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
}

/* Dashboard Sections */
.dashboard-section {
    margin-bottom: 2rem;
}

.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.section-header.collapsible {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.section-header.collapsible:hover {
    opacity: 0.8;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.collapse-icon {
    width: 18px;
    height: 18px;
    transition: transform 0.2s ease;
}

.practice-section.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.practice-section.collapsed .challenge-grid {
    display: none;
}

.section-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.section-stats {
    display: flex;
    gap: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.section-stats strong {
    color: var(--text);
}

.hide-completed-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.hide-completed-toggle:hover {
    color: var(--text);
}

.hide-completed-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--accent);
}

/* Challenge Grid */
.challenge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.challenge-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Challenge Cards */
.challenge-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.challenge-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}

.card-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
}

.card-status-icon svg {
    width: 16px;
    height: 16px;
}

.card-status-icon.available {
    background: var(--bg-input);
    color: var(--text-muted);
}

.card-status-icon.in-progress {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.card-status-icon.submitted {
    background: rgba(59, 130, 246, 0.2);
    color: var(--accent);
}

.card-status-icon.graded {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    flex: 1;
}

.card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.card-meta svg {
    width: 14px;
    height: 14px;
}

.card-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.card-type-badge.turtle {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.card-type-badge.python {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    margin-top: auto;
}

.card-grade {
    font-size: 1.1rem;
    font-weight: 700;
}

.card-grade.grade-A {
    color: var(--success);
}

.card-grade.grade-B {
    color: #4ade80;
}

.card-grade.grade-C {
    color: var(--warning);
}

.card-grade.grade-D {
    color: #f97316;
}

.card-grade.grade-F {
    color: var(--error);
}

.card-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Revised/Resubmitted indicator */
.card-revised-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: rgba(139, 92, 246, 0.2);
    color: #a78bfa;
}

.card-revised-badge svg {
    width: 10px;
    height: 10px;
}

/* Assessment section styling */
.assessments-section {
    border-left: 3px solid var(--warning);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.card-status-text {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Courses Section */
.courses-section {
    border-left: 3px solid var(--accent);
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

/* Course Cards */
.course-card {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.course-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.course-card-header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.course-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    line-height: 1.3;
}

.course-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.course-card-badge {
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
}

.course-card-badge.sequential {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.course-card-badge.assessment {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.course-card-badge.awaiting-grade {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
}

.course-card-badge.graded {
    background: rgba(34, 197, 94, 0.2);
    color: var(--success);
}

.course-card-badge.grading-partial {
    background: rgba(59, 130, 246, 0.2);
    color: var(--primary);
}

.course-card-badge.in-progress-badge {
    background: rgba(107, 114, 128, 0.2);
    color: var(--text-muted);
}

/* Overdue course card states */
.course-card.overdue-yellow {
    border-color: var(--warning);
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.08) 0%, var(--bg-panel) 100%);
}

.course-card.overdue-yellow:hover {
    border-color: var(--warning);
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.2);
}

.course-card.overdue-orange {
    border-color: #f97316;
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, var(--bg-panel) 100%);
}

.course-card.overdue-orange:hover {
    border-color: #f97316;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25);
}

.course-card.overdue-red {
    border-color: var(--error);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.12) 0%, var(--bg-panel) 100%);
}

.course-card.overdue-red:hover {
    border-color: var(--error);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* Course card due date */
.course-card-due-date {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: -0.25rem;
}

.course-card-due-date svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.course-card-due-date.overdue {
    color: var(--error);
}

.course-card-due-date.due-soon {
    color: var(--warning);
}

.course-card-description {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-card-progress {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.course-card-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.75rem;
}

.course-card-progress-text {
    color: var(--text-muted);
}

.course-card-progress-percent {
    font-weight: 600;
    color: var(--accent);
}

.course-card-progress-bar {
    height: 6px;
    background: var(--bg-input);
    border-radius: 3px;
    overflow: hidden;
}

.course-card-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.course-card-progress-fill.complete {
    background: var(--success);
}

.course-card-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.course-card-dots {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.course-card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 1px solid var(--border);
}

.course-card-dot.completed {
    background: var(--success);
    border-color: var(--success);
}

.course-card-dot.in-progress {
    background: var(--warning);
    border-color: var(--warning);
}

.course-card-dot.submitted {
    background: var(--accent);
    border-color: var(--accent);
}

/* Course challenges expansion (instructor view) */
.course-challenges-list {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.course-challenges-list .challenge-card {
    margin: 0;
    background: var(--bg-dark);
}

/* Course Detail View */
.course-detail-view {
    height: calc(100% - 56px);
    overflow-y: auto;
    padding: 1.5rem;
    background: var(--bg-dark);
}

.course-detail-container {
    max-width: 800px;
    margin: 0 auto;
}

.course-detail-header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.course-detail-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
}

.course-detail-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.course-progress-section {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
}

.course-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.course-progress-text {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.course-progress-percent {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent);
}

.course-progress-bar {
    height: 10px;
    background: var(--bg-input);
    border-radius: 5px;
    overflow: hidden;
}

.course-progress-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 5px;
    transition: width 0.3s ease;
}

.course-detail-description {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.course-detail-due-date {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    background: var(--bg-input);
    border-radius: 8px;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.course-detail-due-date svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.course-detail-due-date.overdue {
    background: rgba(239, 68, 68, 0.15);
    color: var(--error);
}

.course-detail-due-date.due-soon {
    background: rgba(250, 204, 21, 0.15);
    color: var(--warning);
}

.course-challenges-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Course Challenge Items */
.course-challenge-item {
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.course-challenge-item:hover:not(.locked) {
    border-color: var(--accent);
    background: var(--bg-input);
}

.course-challenge-item.locked {
    opacity: 0.6;
    cursor: not-allowed;
}

.course-challenge-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-input);
    border: 2px solid var(--border);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.course-challenge-number.completed {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.course-challenge-number.in-progress {
    border-color: var(--warning);
    color: var(--warning);
}

.course-challenge-number.submitted {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

.course-challenge-content {
    flex: 1;
    min-width: 0;
}

.course-challenge-title {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.25rem;
}

.course-challenge-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.course-challenge-type {
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
}

.course-challenge-type.python {
    background: rgba(59, 130, 246, 0.15);
    color: var(--accent);
}

.course-challenge-type.turtle {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success);
}

.course-challenge-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.course-challenge-grade {
    font-weight: 700;
    font-size: 1rem;
}

.course-challenge-grade.grade-A { color: var(--success); }
.course-challenge-grade.grade-B { color: #4ade80; }
.course-challenge-grade.grade-C { color: var(--warning); }
.course-challenge-grade.grade-D { color: #f97316; }
.course-challenge-grade.grade-F { color: var(--error); }

.course-challenge-points {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.course-challenge-icon {
    width: 24px;
    height: 24px;
    color: var(--text-muted);
}

.course-challenge-icon.completed {
    color: var(--success);
}

.course-challenge-icon.locked {
    color: var(--text-muted);
}

/* Code Comparison (for feedback panel) */
.code-comparison {
    margin-top: 0.75rem;
}

.comparison-tabs {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.comparison-tab {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.comparison-tab:hover {
    color: var(--text);
}

.comparison-tab.active {
    background: var(--bg-input);
    color: var(--text);
    border-bottom-color: var(--bg-input);
}

.comparison-content {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 0 6px 6px 6px;
    padding: 0.75rem;
    max-height: 200px;
    overflow-y: auto;
}

.comparison-code {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--text);
}

/* Resubmit Warning */
.resubmit-warning {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    border-radius: 6px;
    color: var(--error);
    font-size: 0.85rem;
    margin-top: 0.5rem;
}

.resubmit-warning svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Course Navigation Bar (student view for multi-challenge courses) */
.course-navigation {
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.course-nav-title {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--accent);
    white-space: nowrap;
}

.course-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1;
}

.course-nav-back {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    margin-left: auto;
}

.course-nav-back:hover {
    color: var(--text);
    background: var(--bg-dark);
    border-color: var(--text-muted);
}

.course-nav-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.4rem;
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.7rem;
    transition: border-color 0.15s, background 0.15s;
}

.course-nav-item:hover {
    border-color: var(--accent);
    background: var(--bg-dark);
}

.course-nav-item.current {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.15);
}

.course-nav-item.submitted {
    border-color: var(--success);
}

.course-nav-item.submitted .course-nav-status {
    color: var(--success);
}

.course-nav-item.locked {
    opacity: 0.5;
    cursor: not-allowed;
    border-color: var(--border);
}

.course-nav-item.locked:hover {
    border-color: var(--border);
    background: var(--bg-input);
}

.course-nav-item.locked .course-nav-status {
    color: var(--text-muted);
}

.course-nav-number {
    background: var(--bg-panel);
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 600;
    flex-shrink: 0;
}

.course-nav-name {
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-nav-status {
    font-size: 0.65rem;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1024px) {
    .three-column {
        grid-template-columns: 240px 1fr;
    }
}

@media (max-width: 768px) {
    .pane-left {
        flex: 0 0 100%;
    }

    .split-pane {
        flex-direction: column;
    }

    .three-column {
        grid-template-columns: 1fr;
    }

    .header-center {
        display: none;
    }

    /* Dashboard responsive */
    .dashboard-view {
        padding: 1rem;
    }

    .challenge-grid {
        grid-template-columns: 1fr;
    }

    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }

    .section-stats {
        flex-wrap: wrap;
        gap: 0.75rem;
    }
}

/* ============ Students Toolbar ============ */
.students-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg-input);
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toolbar-select {
    width: auto;
    min-width: 150px;
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

.students-count {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
}

.checkbox-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.bulk-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 6px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.selected-count {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--accent);
    margin-right: 0.5rem;
}

.btn-sm {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
}

.btn-danger {
    border-color: var(--error);
    color: var(--error);
}

.btn-danger:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error);
}

/* Student row with checkbox */
.list-item-selectable {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
}

.list-item-selectable:last-child {
    border-bottom: none;
}

.list-item-selectable .student-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    cursor: pointer;
    flex-shrink: 0;
}

.list-item-selectable .list-item {
    flex: 1;
    margin: 0;
    padding: 0;
    border: none;
}

.list-item-selectable .list-item:hover {
    background: transparent;
}

.list-item-selectable:hover {
    background: var(--bg-input);
}

/* Bulk Change Class Modal */
#bulk-class-modal .class-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

#bulk-class-modal .class-option:hover {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.05);
}

#bulk-class-modal .class-option.selected {
    border-color: var(--accent);
    background: rgba(59, 130, 246, 0.1);
}

#bulk-class-modal .class-option input[type="radio"] {
    margin-right: 0.75rem;
    accent-color: var(--accent);
}

@media (max-width: 768px) {
    .students-toolbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .toolbar-left {
        flex-wrap: wrap;
    }

    .bulk-actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

/* Class Assignment Rows - Challenge Modal */
.class-assignment-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.class-assignment-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

.class-assignment-row label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    cursor: pointer;
}

.assignment-type-select {
    width: 100px;
    padding: 0.35rem 0.5rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text);
    cursor: pointer;
}

.assignment-type-select:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.assignment-type-select:focus {
    outline: none;
    border-color: var(--accent);
}

/* ==================== PLAYGROUND STYLES ==================== */

/* Playground Section on Dashboard */
.playground-section {
    border-left: 3px solid #8b5cf6;
    padding-left: 0.5rem;
    margin-left: -0.5rem;
}

.playground-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.playground-card:hover {
    border-color: #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15);
}

.playground-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
    color: white;
    flex-shrink: 0;
}

.playground-card-icon svg {
    width: 24px;
    height: 24px;
}

.playground-card-content {
    flex: 1;
    min-width: 0;
}

.playground-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.25rem 0;
}

.playground-card-description {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.playground-card-meta {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

/* Playground View */
.playground-view {
    height: calc(100% - 56px);
    display: flex;
    flex-direction: column;
    background: var(--bg-dark);
}

.playground-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-panel);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.playground-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
    flex: 1;
}

.playground-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.playground-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

.playground-editor-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    overflow: hidden;
}

.playground-editor-pane .code-editor {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.playground-editor-pane .code-editor .CodeMirror {
    height: 100%;
    font-size: 14px;
    line-height: 1.5;
}

.playground-output-pane {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    min-height: 100px;
    overflow: hidden;
}

.playground-output-pane .output-content {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    background: var(--bg-dark);
}

.playground-output-pane .canvas-container {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-dark);
    overflow: hidden;
}

/* Vertical (side-by-side) layout for playground */
.playground-content.vertical {
    flex-direction: row;
}

.playground-content.vertical .playground-editor-pane {
    flex: 1;
    min-width: 300px;
    min-height: 0;
    border-right: 1px solid var(--border);
}

.playground-content.vertical .playground-output-pane {
    flex: 0 0 40%;
    min-width: 200px;
    min-height: 0;
    border-top: none;
}

.playground-content.vertical .editor-output-resizer {
    width: 12px;
    height: auto;
    cursor: col-resize;
    flex-direction: column;
}

.playground-content.vertical .editor-output-resizer .resizer-handle {
    width: 3px;
    height: 30px;
}

/* Playground file tabs (for multi-file) */
.playground-view .editor-tab-bar {
    flex-shrink: 0;
}

.playground-file-tab {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.75rem;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.playground-file-tab:hover {
    color: var(--text);
    background: rgba(255, 255, 255, 0.04);
}

.playground-file-tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.playground-file-tab .tab-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.7rem;
    line-height: 1;
    color: var(--text-muted);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.playground-file-tab:hover .tab-remove {
    opacity: 1;
}

.playground-file-tab .tab-remove:hover {
    color: var(--error);
    background: rgba(255, 255, 255, 0.1);
}

.btn-danger {
    border-color: var(--error);
    background: var(--error);
    color: white;
}

.btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

/* ==================== VERDICT BADGES (for test case challenges) ==================== */
.verdict-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.875rem;
}

.verdict-accepted {
    background: #22c55e;
    color: white;
}

.verdict-wrong {
    background: #ef4444;
    color: white;
}

.verdict-error {
    background: #f97316;
    color: white;
}

.verdict-tle {
    background: #a855f7;
    color: white;
}

.verdict-restriction {
    background: #ec4899;
    color: white;
}

.verdict-pending {
    background: #6b7280;
    color: white;
}

/* Test Results Display (matches code-comp format exactly) */
.output-content.test-results {
    padding: 1rem;
    white-space: normal;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.verdict-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.verdict-score,
.verdict-tests {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.test-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.test-result {
    background: var(--bg-input);
    border-radius: 6px;
    overflow: hidden;
}

.test-result .test-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-dark);
}

.test-result.test-passed .test-status {
    color: #22c55e;
}

.test-result.test-failed .test-status {
    color: #ef4444;
}

.test-name {
    flex: 1;
    font-size: 0.875rem;
}

.test-points {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.test-hidden-badge {
    font-size: 0.65rem;
    padding: 0.125rem 0.375rem;
    background: var(--bg-panel);
    color: var(--text-muted);
    border-radius: 3px;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.test-body {
    padding: 0.75rem;
}

.test-body-compact {
    padding: 0.5rem 0.75rem;
}

.test-result.test-hidden {
    opacity: 0.85;
}

.test-hidden-msg {
    color: var(--text-muted);
    font-style: italic;
    margin: 0;
}

.test-io {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.test-io h5 {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0 0 0.25rem 0;
    text-transform: uppercase;
    font-weight: 500;
}

.test-io pre {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.75rem;
    background: var(--bg-dark);
    padding: 0.5rem;
    border-radius: 4px;
    white-space: pre-wrap;
    max-height: 100px;
    overflow-y: auto;
    margin: 0;
}

.test-function {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.test-function h5 {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

.test-function pre {
    margin: 0;
    padding: 0.5rem;
    background: var(--bg-dark);
    border-radius: 4px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-all;
}

.test-error {
    color: #ef4444;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Legacy test result styles (for backwards compatibility) */
.test-results-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
}

.test-result-item {
    background: var(--bg-input);
    border-radius: 6px;
    padding: 0.75rem;
    border: 1px solid var(--border);
}

.test-result-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.test-result-status {
    font-size: 1rem;
}

.test-result-name {
    font-weight: 500;
    flex: 1;
}

.test-result-points {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.test-result-body {
    font-size: 0.85rem;
}

.test-io-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.test-io-section h5 {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.test-io-section pre {
    background: var(--bg-dark);
    padding: 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    max-height: 100px;
    overflow: auto;
    white-space: pre-wrap;
    margin: 0;
}

/* Test Cases List (Admin) */
.test-cases-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
}

.test-case-item {
    background: var(--bg-input);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
}

.test-case-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.test-case-title {
    font-weight: 500;
    font-size: 0.9rem;
}

.test-case-actions {
    display: flex;
    gap: 0.25rem;
}

.test-case-actions button {
    padding: 0.2rem 0.4rem;
    font-size: 0.7rem;
}

.test-case-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.test-case-body label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
    display: block;
}

.test-case-body textarea {
    width: 100%;
    min-height: 60px;
    resize: vertical;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.8rem;
    background: var(--bg-dark);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0.5rem;
}

.test-case-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.test-case-options label {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Test Summary */
.test-summary {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: var(--bg-input);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}

.test-summary-score {
    font-size: 1.25rem;
    font-weight: 600;
}

.test-summary-details {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* ==================== CHAT ==================== */
.btn-chat {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.chat-notification-dot {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 10px;
    height: 10px;
    background: var(--error);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

/* Draggable Chat Modal (shared between student and instructor) */
.draggable-chat-modal {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 340px;
    height: 420px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.draggable-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--bg-input);
    border-bottom: 1px solid var(--border);
    cursor: move;
    user-select: none;
}

.draggable-chat-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 0.9rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--bg-dark);
}

.chat-message {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-size: 0.85rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-message.sent {
    align-self: flex-end;
    background: var(--accent);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-message.received {
    align-self: flex-start;
    background: var(--bg-input);
    color: var(--text);
    border-bottom-left-radius: 4px;
}

.chat-message-time {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-top: 0.2rem;
}

.chat-message.sent .chat-message-time {
    text-align: right;
}

.chat-input-container {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid var(--border);
    background: var(--bg-panel);
    flex-shrink: 0;
}

.chat-input-container .form-input {
    flex: 1;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
}

.chat-input-container .btn {
    flex-shrink: 0;
    padding: 0.5rem;
}

.chat-empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    font-size: 0.85rem;
}

.draggable-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.draggable-modal-close:hover {
    background: var(--bg-panel);
    color: var(--text);
}

.chat-online-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--success);
    background: rgba(34, 197, 94, 0.15);
    padding: 0.15rem 0.4rem;
    border-radius: 10px;
}

.chat-online-badge.offline {
    color: var(--text-muted);
    background: var(--bg-input);
}

.chat-online-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--success);
    animation: pulse 2s infinite;
}

.chat-online-badge.offline .chat-online-dot {
    background: var(--text-muted);
    animation: none;
}

/* CodeMirror Autocomplete Hints */
.CodeMirror-hints {
    position: absolute;
    z-index: 10;
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 2px;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
    max-height: 200px;
    overflow-y: auto;
}

.CodeMirror-hint {
    margin: 0;
    padding: 4px 8px;
    white-space: pre;
    color: var(--text);
    cursor: pointer;
}

.CodeMirror-hint-active {
    background: var(--accent);
    color: white;
}

/* ==================== CODE SETTINGS DROPDOWN ==================== */
.code-settings-dropdown {
    position: relative;
}

.icon-btn-sm {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-input);
    color: var(--text-muted);
    transition: all 0.15s ease;
}

.icon-btn-sm:hover {
    color: var(--text);
    border-color: var(--accent);
}

.settings-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: var(--bg-panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 100;
    min-width: 180px;
    padding: 0.75rem;
}

.settings-menu.open {
    display: block;
}

.settings-section {
    margin-bottom: 0.75rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.settings-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.settings-slider {
    padding: 0.25rem 0;
}

.settings-slider input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: var(--bg-input);
    outline: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.settings-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-panel);
}

.settings-slider input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 2px solid var(--bg-panel);
}

.settings-option {
    padding: 0.35rem 0.6rem;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-input);
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s ease;
}

.settings-option:hover {
    color: var(--text);
    border-color: var(--accent);
}

.settings-option.active {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}