/* 
 * editor-styles.css - Core styles for the editor framework 
 * Contains general layout, controls, tabs, hierarchical editor components, and shared editor component classes
 * Updated with consolidation improvements and enhanced CSS conformance
 * 
 * PHASE 1 CONSOLIDATION: Pattern Equivalency Mapping
 * This file leverages existing mystyle.css classes to eliminate duplication:
 * 
 * PATTERN EQUIVALENCIES - Use existing mystyle.css classes:
 * .editor-section-base → .form-section (mystyle.css)
 * .editor-input-base → .input-search (mystyle.css) 
 * .editor-toolbar-base → .form-row (mystyle.css)
 * .editor-button-base → .btn .btn-secondary (mystyle.css)
 * .change-report → .modal-system-container (mystyle.css)
 * .test-page-header → .form-section (mystyle.css)
 * .category-section → .form-section (mystyle.css)
 */

/* ===== SHARED EDITOR COMPONENT CLASSES ===== */
/* Base classes for consistent styling across all editor files */

/* PHASE 6: .editor-input-base removed - functionality provided by .input-search from mystyle.css */
/* All input styling now leverages mystyle.css standard input patterns */

/* PHASE 6: .editor-button-base removed - functionality provided by .btn .btn-secondary from mystyle.css */
/* All editor buttons now use mystyle.css standardized button classes */

/* Enhanced with .modal-system-content pattern + editor-specific additions */
/* CONSOLIDATION: Base functionality now provided by .form-section from mystyle.css */
.editor-section-base {
    /* Base styling similar to .modal-system-content */
    background: var(--light-bg);
    border: 1px solid var(--light-border);
    padding: var(--spacing-md);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    /* Leverages modal-system patterns without direct inheritance */
}

.editor-section-base h3 {
    margin-top: 0;
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-lg);
    color: var(--text-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-inline: calc(-1 * var(--spacing-sm));
    border-radius: var(--border-radius);
}

.editor-section-base h3:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.editor-section-base h3:hover .section-toggle-caret {
    color: var(--button-primary);
    transform: scale(1.1);
}

/* Section toggle caret for collapsible sections */
.section-toggle-caret {
    cursor: pointer;
    user-select: none;
    font-size: 14px;
    color: var(--color-neutral);
    transition: transform 0.2s ease, color 0.2s ease;
    padding: var(--spacing-xs) 8px;
}

/* Collapsed state for editor sections */
/* Removed .editor-section-base.collapsed .controls-section { display: none; } */
/* Section content visibility is now controlled via data-display attribute in JavaScript */

.editor-section-base.collapsed h3 {
    margin-bottom: 0;
}

/* PHASE 6: .editor-toolbar-base removed - functionality provided by .form-row from mystyle.css */
/* All editor toolbar layouts now use mystyle.css standardized flex patterns */

/* ===== MIXED CONTENT ACTIVITY SELECTION MODAL ===== */
/* Styles for the enhanced activity selector modal that supports both private and public activities */

.activity-selection-modal {
    max-width: 600px;
    width: 100%;
}

.modal-context {
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--light-border);
}

.context-text {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

/* PHASE 5 CONSOLIDATION: Combined selection tabs (activity, lesson, page) */
.activity-selection-tabs,
.lesson-selection-tabs,
/* PHASE 5: .page-selection-tabs consolidated above with .activity-selection-tabs */

.activity-tab-btn {
    /* Leverages mystyle.css button patterns */
    padding: var(--spacing-sm) var(--spacing-md);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}

.activity-tab-btn:hover {
    background: var(--light-bg);
}

.activity-tab-btn.active {
    border-bottom-color: var(--button-primary);
    color: var(--button-primary);
    font-weight: 500;
}

.selection-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.search-box {
    flex: 1;
    min-width: 200px;
}

.search-input {
    /* Leverages mystyle.css input patterns */
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.selection-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.activity-list-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
}

.activity-list {
    padding: var(--spacing-sm);
}

.activity-item {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    transition: background-color 0.2s ease;
}

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

.activity-item:hover {
    background: var(--light-bg);
}

.activity-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    width: 100%;
}

.activity-label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

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

.activity-title {
    font-weight: 500;
    color: var(--text-color, #333333);
    margin-bottom: var(--spacing-xs, 4px);
    word-wrap: break-word;
}

.activity-meta {
    display: flex;
    gap: var(--spacing-md, 16px);
    font-size: var(--font-size-sm, 12px);
    color: var(--text-muted, #666666);
    flex-wrap: wrap;
}

.activity-id {
    font-family: monospace;
    background: var(--light-bg, #f5f5f5);
    padding: 2px var(--spacing-xs, 4px);
    border-radius: 2px;
}

.activity-context {
    font-weight: 500;
    padding: 2px var(--spacing-xs, 4px);
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 10px;
}

.activity-context.private {
    background: var(--color-info-light);
    color: var(--color-info);
}

.activity-context.public {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.selection-summary {
    padding: var(--spacing-sm, 8px);
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    text-align: center;
    font-size: var(--font-size-sm, 12px);
    color: var(--text-muted, #666666);
}

.empty-state {
    padding: var(--spacing-lg, 24px);
    text-align: center;
    color: var(--text-muted, #666666);
    font-style: italic;
}

/* Enhanced activity selector dropdown styles */
.activity-selector.mixed-content optgroup {
    font-weight: 500;
    font-style: normal;
    color: var(--text-color, #333333);
}

.activity-selector.mixed-content optgroup[label*="Private"] {
    background: var(--color-info-light);
}

.activity-selector.mixed-content optgroup[label*="Public"] {
    background: var(--color-primary-light);
}

/* Activity actions container for lesson editor */
.activity-actions {
    display: flex;
    gap: var(--spacing-sm, 8px);
    margin-top: var(--spacing-md, 16px);
    align-items: center;
    flex-wrap: wrap;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .selection-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-meta {
        flex-direction: column;
        gap: var(--spacing-xs, 4px);
    }

    .activity-selection-tabs {
        flex-wrap: wrap;
    }

    .activity-actions {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ===== LESSON SELECTION MODAL STYLES ===== */
/* Styles for the lesson selector modal that supports both private and public lessons */
/* Extends activity selection modal patterns for consistency */
.lesson-selection-modal {
    max-width: 600px;
    width: 100%;
}

/* PHASE 5: .lesson-selection-tabs consolidated above with .activity-selection-tabs */

.lesson-tab-btn {
    /* Leverages mystyle.css button patterns - same as activity-tab-btn */
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
}

.lesson-tab-btn:hover {
    background: var(--light-bg, #f5f5f5);
}

.lesson-tab-btn.active {
    border-bottom-color: var(--primary-color, #007bff);
    color: var(--primary-color, #007bff);
    font-weight: 500;
}

/* PHASE 5: .lesson-selection-content removed - empty unused ruleset */

.lesson-list-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    margin-bottom: var(--spacing-md, 16px);
}

.lesson-list {
    padding: var(--spacing-sm, 8px);
}

.lesson-item {
    padding: var(--spacing-sm, 8px);
    border-bottom: 1px solid var(--light-border, #ddd);
    transition: background-color 0.2s ease;
    /* Uses visibility control via data attributes - see CSS conformance rule 5 */
}

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

.lesson-item:hover {
    background: var(--light-bg, #f5f5f5);
}

.lesson-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 8px);
    cursor: pointer;
    width: 100%;
}

.lesson-label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
}

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

.lesson-title {
    font-weight: 500;
    color: var(--text-color, #333333);
    margin-bottom: var(--spacing-xs, 4px);
    word-wrap: break-word;
}

.lesson-meta {
    display: flex;
    gap: var(--spacing-md, 16px);
    font-size: var(--font-size-sm, 12px);
    color: var(--text-muted, #666666);
    flex-wrap: wrap;
}

.lesson-id {
    font-family: monospace;
    background: var(--light-bg, #f5f5f5);
    padding: 2px var(--spacing-xs, 4px);
    border-radius: 2px;
}

.lesson-context {
    font-weight: 500;
    padding: 2px var(--spacing-xs, 4px);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-xs, 11px);
    text-transform: capitalize;
}

.lesson-context.private {
    background: var(--color-info-light);
    color: var(--color-info);
}

.lesson-context.public {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.lesson-description {
    font-size: var(--font-size-xs, 12px);
    color: var(--text-color-muted, #666);
    margin-top: var(--spacing-xs, 4px);
    line-height: 1.4;
    word-wrap: break-word;
}

/* Mobile responsiveness for lesson selection */
@media (max-width: 600px) {
    .lesson-selection-tabs {
        flex-wrap: wrap;
    }

    .lesson-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs, 4px);
    }
}

/* ===== PAGE SELECTION MODAL STYLES ===== */
/* Styles for the page selector modal that supports both private and public pages */
/* Extends activity and lesson selection modal patterns for consistency */
.page-selection-modal {
    max-width: 700px;
    width: 100%;
}

.lesson-selection-section {
    margin-bottom: var(--spacing-lg, 24px);
    padding: var(--spacing-md, 16px);
    background: var(--light-bg, #f9f9f9);
    border-radius: var(--border-radius, 4px);
    border: 1px solid var(--light-border, #e0e0e0);
}

.lesson-select-label {
    display: block;
    font-weight: 500;
    color: var(--text-color, #333333);
    margin-bottom: var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 14px);
}

.lesson-select {
    width: 100%;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-sm, 14px);
    background: var(--bg-color, #ffffff);
    color: var(--text-color, #333333);
    min-height: 44px;
    box-sizing: border-box;
}

.lesson-select:focus {
    outline: none;
    border-color: var(--primary-color, #007bff);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.lesson-prompt {
    text-align: center;
    padding: var(--spacing-xl, 32px);
    color: var(--text-muted, #666666);
    font-style: italic;
}

.loading-lesson {
    text-align: center;
    padding: var(--spacing-xl, 32px);
    color: var(--text-muted, #666666);
}

.error-message {
    text-align: center;
    padding: var(--spacing-xl, 32px);
    color: var(--color-error, #dc3545);
    background: var(--error-bg, #f8d7da);
    border-radius: var(--border-radius, 4px);
    margin: var(--spacing-md, 16px);
}

/* PHASE 5: .page-selection-tabs consolidated above with .activity-selection-tabs */

.page-tab-btn {
    /* Leverages mystyle.css button patterns - same as activity-tab-btn and lesson-tab-btn */
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-color, #333333);
    transition: all 0.2s ease;
}

.page-tab-btn:hover {
    background: var(--light-bg, #f5f5f5);
}

.page-tab-btn.active {
    border-bottom-color: var(--primary-color, #007bff);
    color: var(--primary-color, #007bff);
    font-weight: 500;
}

/* PHASE 5: .page-selection-content removed - empty unused ruleset */

.search-section {
    display: flex;
    gap: var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-md, 16px);
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-sm, 14px);
    /* Mobile-first design: use min-height instead of fixed height */
    min-height: 44px;
    box-sizing: border-box;
}

.filter-select {
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-sm, 14px);
    background: var(--bg-color, #ffffff);
    color: var(--text-color, #333333);
    min-height: 44px;
    box-sizing: border-box;
}

.page-list-container {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    margin-bottom: var(--spacing-md, 16px);
}

.page-list {
    /* Uses data-attribute approach for visibility control - see CSS conformance rule 5 */
    padding: var(--spacing-sm, 8px);
}

.page-list:not(.active) {
    /* Hidden state managed by data-display attribute */
}

.page-item {
    padding: var(--spacing-sm, 8px);
    border-bottom: 1px solid var(--light-border, #ddd);
    transition: background-color 0.2s ease;
    /* Uses visibility control via data attributes - see CSS conformance rule 5 */
}

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

.page-item:hover {
    background: var(--light-bg, #f5f5f5);
}

.page-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm, 8px);
    cursor: pointer;
    width: 100%;
}

.page-label input[type="checkbox"] {
    margin: 0;
    flex-shrink: 0;
    /* Ensure touch-friendly size */
    min-height: 44px;
    min-width: 44px;
}

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

.page-title {
    font-weight: 500;
    color: var(--text-color, #333333);
    margin-bottom: var(--spacing-xs, 4px);
    word-wrap: break-word;
}

.page-meta {
    display: flex;
    gap: var(--spacing-md, 16px);
    font-size: var(--font-size-sm, 12px);
    color: var(--text-muted, #666666);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xs, 4px);
}

.page-id {
    font-family: monospace;
    background: var(--light-bg, #f5f5f5);
    padding: 2px var(--spacing-xs, 4px);
    border-radius: 2px;
}

.page-source {
    font-style: italic;
    color: var(--text-muted, #666666);
}

.page-context {
    font-weight: 500;
    padding: 2px var(--spacing-xs, 4px);
    border-radius: var(--border-radius-lg);
    font-size: var(--font-size-xs, 11px);
    text-transform: capitalize;
}

.page-context.private {
    background: var(--color-info-light);
    color: var(--color-info);
}

.page-context.public {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.page-source-context {
    background: var(--light-bg, #f5f5f5);
    padding: 2px var(--spacing-xs, 4px);
    border-radius: 2px;
    text-transform: uppercase;
    font-size: 10px;
}

.page-preview {
    font-size: var(--font-size-xs, 12px);
    color: var(--text-color-muted, #666);
    margin-top: var(--spacing-xs, 4px);
    line-height: 1.4;
    word-wrap: break-word;
    font-style: italic;
}

.warning-text {
    color: var(--color-warning, #ff9800);
    font-size: var(--font-size-sm, 14px);
    margin-top: var(--spacing-xs, 4px);
}

/* Mobile responsiveness for page selection */
@media (max-width: 600px) {
    .page-selection-tabs {
        flex-wrap: wrap;
    }

    .search-section {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input,
    .filter-select {
        width: 100%;
        min-width: unset;
    }

    .page-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs, 4px);
    }

    .page-label input[type="checkbox"] {
        /* Maintain touch target on mobile */
        min-height: 44px;
        min-width: 44px;
    }
}

/* ===== YOUTUBE FIX ACTIONS STYLES ===== */
/* Styles for YouTube video fix action buttons and feedback */

.video-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs, 4px);
    margin-top: var(--spacing-sm, 8px);
}

.video-action-btn {
    /* Extends .btn and .btn-small from mystyle.css with video-specific styling */
    white-space: nowrap;
    margin: 0; /* Reset any default margins */
}

/* Priority-based color overrides for video action buttons */
.btn.video-action-btn.priority-high {
    background-color: var(--button-primary, #4D90FE);
    color: white;
    border-color: var(--button-primary, #4D90FE);
}

.btn.video-action-btn.priority-medium {
    background-color: var(--color-warning, #ff9800);
    color: white;
    border-color: var(--color-warning, #ff9800);
}

.btn.video-action-btn.priority-low {
    background-color: var(--light-bg, #f5f5f5);
    color: var(--text-color, #333333);
    border-color: var(--light-border, #ddd);
}

/* Hover states for priority colors */
.btn.video-action-btn.priority-high:hover {
    background-color: var(--button-primary-hover, #357abd);
    border-color: var(--button-primary-hover, #357abd);
}

.btn.video-action-btn.priority-medium:hover {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.btn.video-action-btn.priority-low:hover {
    background-color: var(--light-border, #ddd);
    border-color: var(--border-color, #ccc);
}

.video-action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.video-action-btn.loading {
    position: relative;
}

.video-action-btn.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -var(--spacing-sm) 0 0 -6px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.action-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 4px);
    margin-top: var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 12px);
    color: var(--color-neutral);
    font-style: italic;
}

.action-progress .loading-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid var(--light-border, #ddd);
    border-top-color: var(--button-primary, #4D90FE);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.action-message {
    margin-top: var(--spacing-xs, 4px);
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-xs, 12px);
    font-weight: 500;
}

.action-message.action-success {
    background-color: var(--color-success-bg, #d4edda);
    color: var(--color-success-text, #155724);
    border: 1px solid var(--color-success, #4CAF50);
}

.action-message.action-error {
    background-color: var(--color-danger-bg, #f8d7da);
    color: var(--color-danger-text, #721c24);
    border: 1px solid var(--color-danger, #F44336);
}

.editor-form-row {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 10px));
    margin-bottom: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 10px));
}

@media (max-width: 768px) {
    .editor-form-row {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Touch device optimizations now handled by .btn in mystyle.css */
/* Remove this block - functionality provided by .btn touch optimizations */

/* ===== General Editor Layout ===== */
/* Enhanced with #outer-container functionality + editor-specific additions */
#test-app-wrapper {
    /* Base layout patterns similar to #outer-container */
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* Leverages outer-container patterns without direct inheritance */
}

/* Enhanced with #content-container functionality + editor-specific additions */
#test-app-container {
    /* Base container patterns similar to #content-container */
    width: 100%;
    max-width: min(100%, 1000px);
    margin: 0 auto;
    padding: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-md, 16px));
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    /* Leverages content-container patterns without direct inheritance */
}

/* ===== Header Styles ===== */
.test-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    background-color: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 16px));
    border: 1px solid var(--light-border, #ddd);
    flex-shrink: 0;
}

/* Enhanced with mystyle.css typography standards */
/* CONSOLIDATION: Uses standardized typography from mystyle.css */
.test-page-title {
    font-size: var(--font-size-xl); /* Standardized to mystyle.css variable */
    margin: 0;
    font-weight: 600;
    color: var(--text-color);
    transition: color 0.3s ease;
}

/* ===== Controls Section ===== */
.test-controls-section {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    margin-bottom: var(--spacing-sm, 10px);
}

.test-controls-row {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 16px));
    width: 100%;
}

.test-controls {
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    border-radius: var(--border-radius, 4px);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    align-items: center;
    background: var(--light-bg, #f5f5f5);
    border: 1px solid var(--light-border, #ddd);
    flex: 1;
}

.test-page-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    align-items: center;
}

.test-controls input {
    font-size: var(--font-size-sm);
    padding: clamp(var(--spacing-xs, 4px), 1vw, calc(var(--spacing-xs, 5px) + 2px)) clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 16px));
    border-radius: var(--border-radius, 4px);
    transition: all var(--transition-speed, 0.2s) ease;
}

/* .test-controls input now uses standard input styling from mystyle.css */
.test-controls input {
    flex: 1;
    min-width: 0;
    /* Other styling inherited from mystyle.css input defaults */
}

/* ===== Message Styles ===== */
.test-message {
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    border-radius: var(--border-radius, 4px);
    margin: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px)) 0;
    /* Visibility controlled by JavaScript via data attributes only */
    animation: fadeIn var(--transition-speed, 0.2s) ease;
    flex-shrink: 0;
}

.test-error-message {
    color: var(--error-text, #721c24);
    background-color: var(--error-bg, #f8d7da);
    border: 1px solid var(--error-border, #f5c6cb);
}

.test-loading-message {
    color: var(--info-text, #004085);
    background-color: var(--info-bg, #cce5ff);
    border: 1px solid var(--info-border, #b8daff);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ===== Loading Spinner ===== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--button-disabled);
    border-top-color: var(--primary-color, #333333);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-right: var(--spacing-sm, 10px);
    vertical-align: middle;
}

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

/* ===== Content Wrapper ===== */
/* Enhanced with #core-page-container functionality + editor-specific additions */
.test-content-wrapper {
    /* Base wrapper patterns similar to #core-page-container */
    flex: 1;
    min-height: 0;
    /* Important for Firefox */
    position: relative;
    overflow: hidden;
    /* Important: prevents outer scrolling */
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 16px));
    display: flex;
    flex-direction: column;
    /* Leverages core-page-container patterns without direct inheritance */
}

#content-container {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

/* ===== Fullscreen Mode ===== */
body.fullscreen-mode #test-app-container {
    padding: 0;
    max-width: 100%;
}

body.fullscreen-mode .test-page-header,
/* DEPRECATED: body.fullscreen-mode approach - use data attributes instead */
/* JavaScript should set data-display="false" on elements during fullscreen mode */
/* CSS conformance: avoid CSS-based visibility control */

body.fullscreen-mode #test-app-wrapper {
    overflow: hidden;
    height: 100vh;
}

body.fullscreen-mode #outer-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* ===== Top Controls Container ===== */
#test-top-controls-container {
    /* Visibility controlled by JavaScript via data attributes only */
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    z-index: 1001;
    background: var(--bg-color, #ffffff);
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border-block-end: 1px solid var(--light-border, #ddd);
    height: clamp(35px, 6vw, 40px);
}

body.fullscreen-mode #test-top-controls-container {
    display: flex;
    align-items: center;
}

body.fullscreen-mode #content-container {
    padding-block-start: clamp(35px, 6vw, 40px);
}

/* ===== Viewport Controls ===== */
#test-viewport-controls {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    flex: 1;
}

#test-fit-score {
    background-color: var(--light-bg, #f5f5f5);
    padding: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-xs, 5px)) clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    border-radius: var(--border-radius, 4px);
    font-weight: bold;
    font-size: var(--font-size-xs);
    display: flex;
    align-items: center;
    border: 1px solid var(--light-border, #ddd);
    white-space: nowrap;
}

#test-fit-score-value {
    color: var(--primary-color, #333333);
    margin-inline-start: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-xs, 5px));
    font-weight: bold;
}

/* ===== Viewport Fit Button ===== */
#test-viewport-fit-button svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* Viewport fit button active state - uses .btn with custom active styling */
#test-viewport-fit-button.active {
    background-color: var(--focus-color, #4D90FE);
    color: white;
}

/* ===== Theme Switch =====
 * Note: Main theme switch styles are in mystyle.css
 * Only editor-specific theme overrides here if needed
 */

/* ===== Tab System ===== */
.tab {
    overflow: hidden;
    border: 1px solid var(--light-border, #ddd);
    background-color: var(--light-bg, #f5f5f5);
    display: flex;
    flex-wrap: wrap;
}

/* PHASE 2 STANDARDIZATION: Use .btn .btn-secondary base classes from mystyle.css */
.tab button {
    /* Base button styling inherited from .btn .btn-secondary in mystyle.css */
    /* Only editor-specific tab styling here */
    background-color: inherit;
    border: none;
    outline: none;
    cursor: pointer;
    padding: clamp(var(--spacing-sm), 2vw, 14px) clamp(12px, 2.5vw, 16px);
    transition: all 0.3s ease;
    color: var(--text-color, #333333);
    font-weight: bold;
    margin: 0;
    font-size: var(--font-size-sm);
}

.tab button:hover {
    /* Enhanced hover with tab-specific styling */
    background-color: var(--light-border, #ddd);
}

.tab button.active,
.tab button[data-active="true"] {
    /* Active state styling - supports both class and data attribute patterns */
    background-color: var(--bg-color, #ffffff);
    border-bottom: 2px solid var(--primary-color, #333333);
}

/* PHASE 2 STANDARDIZATION: Support data attribute visibility only - CSS conformance fix */
.tabcontent,
[data-tab-content] {
    /* Visibility controlled by JavaScript via data attributes only */
    /* Elements use natural display values when data-display attribute is removed */
    padding: clamp(var(--spacing-xs), 1vw, 6px) clamp(8px, 1.5vw, 12px);
    border: 1px solid var(--light-border, #ddd);
    border-block-start: none;
    min-height: clamp(250px, 40vh, 300px);
}

/* Tab content now uses natural display values via data attributes */

/* ===== Headers Modal ===== */
#headersList>div {
    display: flex;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    margin-bottom: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    align-items: center;
}

#headersList input {
    flex: 1;
}

/* ===== Content Select Dropdown ===== */
.content-select-dropdown {
    flex: 1;
    padding: calc(var(--spacing-xs, 5px) + 2px) var(--spacing-md, 16px);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    background-color: var(--bg-color, #ffffff);
    color: var(--text-color, #333333);
}

/* ===== Dry Run Checkbox ===== */
.dry-run-label {
    display: inline-flex;
    align-items: center;
    margin: 0 clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    cursor: pointer;
    font-weight: bold;
    color: var(--color-warning);
}

.dry-run-label input[type="checkbox"] {
    cursor: pointer;
    width: auto;
    margin: 0 clamp(var(--spacing-xs, 4px), 1vw, 4px) 0 0;
}

/* ===== Change Report ===== */
/* Enhanced with .modal-system-container pattern - positioned variant */
/* CONSOLIDATION: Base modal functionality now leverages .modal-system-container patterns */
.change-report {
    /* Base modal functionality now leverages .modal-system-container patterns */
    background: var(--bg-color);
    border-radius: var(--modal-border-radius);
    box-shadow: var(--modal-shadow);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transform: scale(0.9);
    transition: transform var(--modal-animation-duration) ease,
                background-color 0.3s ease,
                border-color 0.3s ease;
    pointer-events: auto;
    /* Change report specific positioning and sizing */
    position: fixed;
    inset-block-end: clamp(0.5rem, 2vw, 1rem);
    inset-inline-end: clamp(0.5rem, 2vw, 1rem);
    max-width: clamp(20rem, 50vw, 32rem);
    width: 100%;
    max-height: 80vh;
    border: 1px solid var(--light-border, #ddd);
    z-index: var(--modal-z-index);
}

/* Change report visible state now handled via data attributes */

/* Enhanced fade-out with modal system patterns */
.change-report.fade-out {
    transform: scale(0.9);
    opacity: 0;
    transition: transform var(--modal-animation-duration) ease,
                opacity var(--modal-animation-duration) ease;
}

.change-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(0.75rem, 2vw, 1rem);
    border-block-end: 1px solid var(--light-border, #ddd);
    position: sticky;
    inset-block-start: 0;
    background: var(--bg-color, #ffffff);
    z-index: 1;
}

.change-report-title {
    margin: 0;
    font-size: clamp(1rem, 2.5vw, 1.125rem);
    font-weight: 600;
}

.change-report-title.success {
    color: var(--success-text, #155724);
}

.change-report-title.error {
    color: var(--error-text, #721c24);
}

.change-report-status {
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
    border-block-end: 1px solid var(--light-border, #ddd);
    position: sticky;
    inset-block-start: clamp(45px, 8vw, 50px);
    z-index: 1;
    background: var(--bg-color, #ffffff);
}

.change-report-status.success {
    background-color: var(--success-bg, #d4edda);
    color: var(--success-text, #155724);
}

.change-report-status.error {
    background-color: var(--error-bg, #f8d7da);
    color: var(--error-text, #721c24);
}

.change-report-content {
    padding: clamp(0.75rem, 2vw, 1rem);
    overflow-y: auto;
    flex-grow: 1;
}

.change-item {
    margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    background-color: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    border: 1px solid var(--light-border, #ddd);
}

.change-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(0.375rem, 1vw, 0.5rem);
}

.change-item-title {
    font-weight: 500;
}

.change-item-badge {
    font-size: clamp(0.625rem, 1.5vw, 0.75rem);
    padding: clamp(0.125rem, 0.5vw, 0.25rem) clamp(0.25rem, 1vw, 0.5rem);
    border-radius: clamp(0.125rem, 0.5vw, 0.25rem);
    background-color: var(--info-bg, #cce5ff);
    color: var(--info-text, #004085);
}

.change-item-badge.error {
    background-color: var(--error-bg, #f8d7da);
    color: var(--error-text, #721c24);
}

.property-row {
    margin-bottom: clamp(0.375rem, 1vw, 0.5rem);
}

/* Property row with breadcrumb - enhanced layout */
.property-row-breadcrumb {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.property-row-breadcrumb label {
    font-weight: 500;
}

/* Breadcrumb container in property row */
#category-parent-breadcrumb-container {
    min-height: clamp(2rem, 4vw, 2.5rem);
    display: flex;
    align-items: center;
}

.property-name {
    font-weight: 500;
}

.property-value {
    background-color: var(--light-bg, #f5f5f5);
    padding: clamp(0.375rem, 1vw, 0.5rem);
    border-radius: clamp(0.125rem, 0.5vw, 0.25rem);
    border: 1px solid var(--light-border, #ddd);
    margin-block-start: clamp(0.125rem, 0.5vw, 0.25rem);
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.validation-reason {
    margin-block-start: clamp(0.375rem, 1vw, 0.5rem);
    padding: clamp(0.375rem, 1vw, 0.5rem);
    background-color: var(--error-bg, #f8d7da);
    border: 1px solid var(--error-border, #f5c6cb);
    border-radius: clamp(0.125rem, 0.5vw, 0.25rem);
    color: var(--error-text, #721c24);
}

.change-report-footer {
    padding: clamp(0.5rem, 1.5vw, 0.75rem) clamp(0.75rem, 2vw, 1rem);
    font-size: clamp(0.75rem, 1.5vw, 0.875rem);
    color: var(--text-color, #333333);
    border-block-start: 1px solid var(--light-border, #ddd);
    position: sticky;
    inset-block-end: 0;
    background: var(--bg-color, #ffffff);
    z-index: 1;
}

/* ===== Editor Sections ===== */
/* CONSOLIDATION: These sections now leverage .form-section patterns from mystyle.css */
.category-section {
    background: var(--light-bg, #f5f5f5);
    border: 1px solid var(--light-border, #ddd);
    padding: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    border-radius: var(--border-radius, 4px);
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

.category-section h3 {
    margin-block-start: 0;
    margin-block-end: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    font-size: var(--font-size-lg);
}

/* ===== Navigation Components ===== */
.navigation-controls {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.category-navigation,
.lesson-navigation,
.activity-navigation {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.nav-label {
    padding: clamp(var(--spacing-xs, 4px), 1vw, 5px) clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    border: 1px solid var(--light-border, #ddd);
    flex: 1;
    text-align: center;
    white-space: nowrap;
    font-size: var(--font-size-sm);
}

/* ===== Change Highlight Animation ===== */
/* CONSOLIDATION: Uses standardized color tokens from mystyle.css */
.change-highlight {
    animation: highlight-fade 2s ease-in-out;
}

@keyframes highlight-fade {
    0% {
        background-color: color-mix(in srgb, var(--focus-color) 20%, transparent);
    }

    100% {
        background-color: transparent;
    }
}

/* ===== Metadata Bar ===== */
.metadata-bar {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    padding: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    border: 1px solid var(--light-border, #ddd);
    margin-block-start: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.metadata-item {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, 5px);
}

.metadata-item .label {
    font-weight: bold;
}

.metadata-item .value {
    padding: clamp(1px, 0.5vw, 2px) clamp(var(--spacing-xs), 1vw, 6px);
    background: var(--bg-color, #ffffff);
    border-radius: clamp(2px, 0.5vw, 3px);
    border: 1px solid var(--light-border, #ddd);
    font-size: var(--font-size-xs);
}

.metadata-item .value.modified {
    background-color: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
}

/* ===== Toolbar ===== */
.toolbar {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    padding: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    background-color: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    border: 1px solid var(--light-border, #ddd);
}

/* Combined toolbar row for actions and indicators */
.combined-toolbar-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.toolbar-left {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    flex-wrap: wrap;
}

.toolbar-right {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

/* Navigation label styling */
.nav-label {
    padding: 5px var(--spacing-sm);
    background: var(--bg-color, #ffffff);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--light-border, #ddd);
    font-size: 0.9em;
    white-space: nowrap;
    margin: 0 var(--spacing-xs);
}

/* Modified indicator styling */
.modified-indicator {
    padding: var(--spacing-xs) 8px;
    border-radius: var(--border-radius-sm);
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
}

.modified-indicator.modified {
    background-color: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
    border: 1px solid var(--warning-border, #ffeaa7);
}

.modified-indicator:not(.modified) {
    background-color: var(--light-bg, #f5f5f5);
    color: var(--text-color, #666);
    border: 1px solid var(--light-border, #ddd);
}

.toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding-top: var(--spacing-xs);
    border-top: 1px solid var(--light-border, #ddd);
}

/* ===== Breadcrumbs ===== */
.breadcrumbs {
    padding: clamp(var(--spacing-xs, 4px), 1vw, 5px) clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    background: var(--bg-color, #ffffff);
    border-radius: var(--border-radius, 4px);
    border: 1px solid var(--light-border, #ddd);
    margin-bottom: clamp(var(--spacing-xs, 4px), 1vw, 5px);
}

.breadcrumb-trail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

/* Breadcrumb styling removed - uses mystyle.css component styles */
/* .breadcrumb-link class provides interactive styling for clickable items */
/* .breadcrumb-current class provides non-interactive styling for current items */

/* ===== Lists ===== */
.activities-list,
.lessons-list {
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

/* ===== Item Containers ===== */
.activity-item,
.lesson-item {
    background: var(--bg-color, #ffffff);
    border: 1px solid var(--light-border, #ddd);
    margin-bottom: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    border-radius: var(--border-radius, 4px);
}

.activity-header,
.lesson-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.activity-controls,
.lesson-controls {
    display: flex;
    gap: clamp(var(--spacing-xs, 4px), 1vw, 5px);
}

/* ===== Lesson Context Indicators ===== */
/* Visual indicators for public vs private lesson references in category lists */

.lesson-item.public-lesson {
    border-left: 4px solid #7b1fa2; /* Purple accent for public lessons */
}

.lesson-item.private-lesson {
    border-left: 4px solid #1976d2; /* Blue accent for private lessons */
    background: var(--bg-color, #ffffff);
}

.lesson-context-indicator {
    display: inline-block;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 12px);
    font-weight: 500;
    border-radius: var(--border-radius-lg);
    background: var(--color-primary-light);
    color: var(--color-primary);
    border: 1px solid #e1bee7;
}

.lesson-context-indicator::before {
    content: "🔗 ";
    margin-right: var(--spacing-xs, 4px);
}

/* Enhanced hover states for public lesson references */
.lesson-item.public-lesson:hover {
    background: linear-gradient(90deg, #f3e5f5 0%, var(--light-bg, #f5f5f5) 20%);
    border-left-color: var(--color-primary);
}

.lesson-item.private-lesson:hover {
    background: var(--light-bg, #f5f5f5);
    border-left-color: var(--color-info);
}

/* Public lesson reference styling in lesson titles */
.lesson-item.public-lesson .lesson-header h4 {
    position: relative;
}

.lesson-item.public-lesson .lesson-header h4::after {
    content: "Public";
    display: inline-block;
    margin-left: var(--spacing-sm, 8px);
    padding: 2px var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 11px);
    font-weight: 500;
    background: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: var(--border-radius-lg);
    border: 1px solid #e1bee7;
    vertical-align: middle;
}

/* Drag and Drop Support for Lesson Reordering */
.lesson-drag-handle {
    display: flex;
    align-items: center;
    padding: var(--spacing-xs, 4px);
    color: var(--text-muted, #666666);
    cursor: grab;
    font-size: var(--font-size-lg, 16px);
    line-height: 1;
    margin-right: var(--spacing-sm, 8px);
    user-select: none;
    opacity: 0.6;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.lesson-drag-handle:hover {
    opacity: 1;
    color: var(--text-color, #333333);
}

.lesson-drag-handle:active {
    cursor: grabbing;
}

.lesson-item[draggable="true"] {
    cursor: grab;
    transition: all 0.2s ease;
}

.lesson-item[draggable="true"]:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.lesson-item.dragging {
    opacity: 0.5;
    transform: scale(0.95);
    cursor: grabbing;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.lesson-item.drag-over {
    border-top: 3px solid var(--primary-color, #007bff);
    background: linear-gradient(180deg, rgba(0, 123, 255, 0.1) 0%, transparent 20%);
}

.lesson-item.drag-over.public-lesson {
    border-top-color: var(--color-primary);
    background: linear-gradient(180deg, rgba(123, 31, 162, 0.1) 0%, transparent 20%);
}

.lessons-list.drag-active {
    border: 2px dashed var(--primary-color, #007bff);
    border-radius: var(--border-radius, 4px);
    background: rgba(0, 123, 255, 0.05);
}

/* Enhanced lesson header layout for drag handle */
.lesson-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.lesson-header h4 {
    flex: 1;
    margin: 0;
    min-width: 0;
    word-wrap: break-word;
}

/* Help Link Component Integration */
.help-link-lessons {
    margin-left: var(--spacing-sm, 8px);
    font-size: var(--font-size-sm, 13px);
}

/* Help content styling for modal display */
.lesson-help-content {
    line-height: 1.6;
}

.lesson-help-content p {
    margin: 0 0 var(--spacing-md, 16px) 0;
}

.lesson-help-content ul {
    margin: 0 0 var(--spacing-md, 16px) 0;
    padding-left: var(--spacing-lg, 20px);
}

.lesson-help-content li {
    margin-bottom: var(--spacing-xs, 4px);
}

.lesson-help-content strong {
    color: var(--primary-color-dark, #0056b3);
}

/* Custom tooltip styling enhancement */
.lesson-item [title],
.lesson-controls [title],
.lesson-drag-handle[title] {
    cursor: pointer;
}

.lesson-context-indicator[title] {
    border-bottom: 1px dotted #7b1fa2;
}

/* Performance Optimizations for Large Lesson Collections */

/* Virtual scrolling container */
.lesson-list-virtual-container {
    position: relative;
    overflow-y: auto;
    max-height: 400px;
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
}

.lesson-list-virtual-content {
    position: relative;
}

.lesson-list-virtual-viewport {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    will-change: transform;
}

/* Loading states for performance feedback */
.lesson-list-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg, 20px);
    color: var(--text-muted, #666666);
    font-style: italic;
}

.lesson-list-loading::before {
    content: "⟳ ";
    animation: spin 1s linear infinite;
    margin-right: var(--spacing-xs, 4px);
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Performance indicator for large datasets */
.lesson-performance-indicator {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted, #666666);
    margin-bottom: var(--spacing-sm, 8px);
}

.lesson-performance-indicator.large-dataset {
    background: linear-gradient(90deg, var(--color-warning-light) 0%, #f5f5f5 100%);
    border-left: 3px solid #ffc107;
}

.lesson-performance-indicator .count {
    font-weight: 500;
    color: var(--text-color, #333333);
}

/* Search optimization feedback */
.lesson-search-feedback {
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted, #666666);
    border-bottom: 1px solid var(--light-border, #ddd);
}

.lesson-search-feedback.no-results {
    color: var(--text-muted, #666666);
    text-align: center;
    padding: var(--spacing-lg, 20px);
}

.lesson-search-feedback .search-stats {
    font-weight: 500;
}

/* Optimized lesson item rendering for large lists */
.lesson-item.virtual-item {
    min-height: 60px; /* Fixed height for virtual scrolling */
    contain: layout style paint; /* CSS containment for performance */
}

/* Cache status indicator (for debugging/monitoring) */
.lesson-cache-indicator {
    position: absolute;
    top: var(--spacing-xs, 4px);
    right: var(--spacing-xs, 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-success); /* Green for cached */
    opacity: 0.7;
    z-index: 10;
}

.lesson-cache-indicator.cache-miss {
    background: var(--color-warning); /* Yellow for cache miss */
}

.lesson-cache-indicator.loading {
    background: var(--button-primary); /* Blue for loading */
    animation: pulse 1s ease-in-out infinite alternate;
}

@keyframes pulse {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* Mobile responsiveness for lesson context indicators */
@media (max-width: 600px) {
    .lesson-item.public-lesson,
    .lesson-item.private-lesson {
        border-left-width: 3px;
    }

    .lesson-context-indicator {
        font-size: var(--font-size-xs, 11px);
        padding: 2px var(--spacing-xs, 4px);
    }

    .lesson-item.public-lesson .lesson-header h4::after {
        display: block;
        margin: var(--spacing-xs, 4px) 0 0 0;
    }

    .lesson-drag-handle {
        font-size: var(--font-size-md, 14px);
        margin-right: var(--spacing-xs, 4px);
    }

    .lesson-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm, 8px);
    }

    .lesson-controls {
        width: 100%;
        justify-content: space-between;
    }
}

/* ===== Empty States ===== */
.empty-state {
    padding: var(--spacing-lg);
    text-align: center;
    background-color: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius-sm);
    border: 1px dashed var(--light-border, #ddd);
}

/* Parent Selection Modal Styles */
.parent-selection-container {
    max-width: 500px;
}

.parent-option {
    margin: var(--spacing-md) 0;
    padding: var(--spacing-lg); /* Increased padding for better touch targets */
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color var(--transition-speed) ease;
    min-height: 44px; /* Ensure minimum touch target height */
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    background-color: transparent;
}

.parent-option:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .parent-option:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.parent-option input[type="radio"] {
    margin-top: 2px; /* Align with first line of text */
    flex-shrink: 0;
}

.parent-option label {
    cursor: pointer;
    display: block;
    margin: 0;
    flex: 1;
}

.parent-description {
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
    margin-top: var(--spacing-xs);
}

/* ===== CodeMirror Adjustments ===== */
.CodeMirror {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    height: clamp(400px, 60vh, 600px);
    border-radius: var(--border-radius, 4px);
}

/* Fix for tab containers to ensure proper layout */
.tab {
    display: flex;
    overflow-x: auto;
}

.tab button {
    /* Layout-specific tab button properties */
    white-space: nowrap;
    flex-shrink: 0;
}

/* Responsive active tab styling - uses .btn base with enhanced active state */
.tab button.active {
    background-color: var(--bg-color, #ffffff);
    border-bottom: 3px solid var(--primary-color, #333333);
    font-weight: bold;
}

/* Tab content should fill available space */
.tabcontent {
    flex: 1;
    overflow: auto;
    min-height: clamp(250px, 40vh, 400px);
        transition: opacity 0.3s ease;
}

/* Make sure overlays don't break tab visibility */
.modal-overlay {
    z-index: 9999;
}

/* .view-json-btn - Modifier for JSON view buttons */
/* Used with: .btn */
.view-json-btn {
    background-color: var(--color-info, #0069d9);
    border-color: var(--color-info-dark, #0062cc);
}

.view-json-btn:hover {
    background-color: var(--color-info-dark, #0056b3);
    border-color: var(--color-info-darker, #004085);
}

/* Make sure JSON editor tab is always visible and properly styled */
.tablinks[data-tab="jsonEditor"] {
    position: relative;
}

/* Make sure tab is always visible */
.tabcontent#jsonEditor {
    position: relative;
}

/* ===== CONSOLIDATED DARK MODE THEME ===== */
/* Shared dark mode styles for all editor components */
/* Shared dark mode component styles */
/* PHASE 6: Dark mode rules updated - removed references to deleted classes */
/* Accessibility: Focus indicators for keyboard navigation */
.editor-section-base h3:focus-visible,
.local-walls-section h3:focus-visible,
.private-walls-section h3:focus-visible,
.public-content-section h3:focus-visible {
    outline: 2px solid var(--focus-color, #4D90FE);
    outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .editor-section-base h3,
    .local-walls-section h3,
    .private-walls-section h3,
    .public-content-section h3,
    .local-content-header,
    .ubercat-header,
    .metacat-header,
    .wall-item,
    .section-toggle-caret {
        transition: none;
    }

    .editor-section-base h3:hover .section-toggle-caret,
    .local-walls-section h3:hover .section-toggle-caret,
    .private-walls-section h3:hover .section-toggle-caret,
    .public-content-section h3:hover .section-toggle-caret,
    .local-content-header:hover .section-toggle-caret,
    .ubercat-header:hover .section-toggle-caret,
    .metacat-header:hover .section-toggle-caret {
        transform: none;
    }
}

/* PHASE 6: .editor-input-base:disabled removed - functionality provided by mystyle.css */

/* Dark mode input styles */
/* Add focus styling */
/* Placeholder text color */
/* Style select dropdowns */
/* Hover effects */
/* Disabled input styling */
/* File inputs - using mystyle.css styles */

/* Checkbox and radio styles */
/* Dark mode adjustments for CodeMirror */
/* ===== Mobile Adjustments ===== */
@media (max-width: 768px) {
    .test-controls-row {
        flex-direction: column;
    }

    .test-controls,
    .test-page-actions {
        width: 100%;
    }

    .test-page-actions {
        justify-content: space-between;
    }

    .change-report {
        max-width: calc(100% - 2rem);
    }

    .toolbar-actions {
        justify-content: center;
    }

    .metadata-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .activity-header,
    .lesson-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }

    .activity-controls,
    .lesson-controls {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 480px) {
    :root {
        --spacing-md: clamp(6px, 1.5vw, 10px);
        --spacing-sm: clamp(4px, 1vw, 6px);
        --spacing-xs: clamp(2px, 0.5vw, 4px);
    }

    #test-app-container {
        padding: clamp(var(--spacing-xs, 2px), 1vw, calc(var(--spacing-md) / 2));
    }

    #test-viewport-fit-button svg {
        display: none;
    }

    #test-top-controls-container {
        padding: clamp(var(--spacing-xs, 2px), 1vw, var(--spacing-xs, 5px));
        height: clamp(30px, 5vw, 35px);
    }

    #test-viewport-controls {
        gap: clamp(var(--spacing-xs, 2px), 1vw, var(--spacing-xs, 5px));
    }

    #test-fit-score,
    #test-viewport-fit-button,
    #test-normal-mode-button {
        font-size: clamp(8px, 1.5vw, 10px);
        padding: clamp(var(--spacing-xs, 2px), 1vw, var(--spacing-xs, 5px)) clamp(calc(var(--spacing-xs, 2px) + 1px), 1.2vw, calc(var(--spacing-xs, 5px) + 2px));
    }

    body.fullscreen-mode #content-container {
        padding-block-start: clamp(30px, 5vw, 35px);
    }

    .editor-button-base {
        min-height: clamp(44px, 8vw, 48px);
        min-width: clamp(44px, 8vw, 48px);
        font-size: clamp(11px, 2vw, 13px);
    }

    .editor-input-base {
        font-size: clamp(11px, 2vw, 13px);
        padding: clamp(var(--spacing-xs, 2px), 1vw, var(--spacing-xs, 4px)) clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 8px));
    }
}

@media (max-width: 480px) {
    .tab {
        flex-wrap: nowrap;
        overflow-x: auto;
    }
}

/* Fix for very small heights */
@media (max-height: 400px) {
    #test-app-container {
        padding: calc(var(--spacing-md) / 2);
    }
}

/* ===== Enhanced Breadcrumbs for Hierarchy Management ===== */
/* CONSOLIDATION: Enhanced breadcrumbs leverage mystyle.css button patterns */
.enhanced-breadcrumbs {
    padding: var(--spacing-xs) 12px;
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius-md);
    border: 1px solid var(--light-border, #ddd);
    margin-bottom: var(--spacing-xs);
}

.enhanced-breadcrumbs .breadcrumb-trail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    align-items: center;
}

.enhanced-breadcrumbs .breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 8px;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-speed, 0.2s);
    color: var(--primary-color, #007bff);
    text-decoration: underline;
    border: 1px solid transparent;
}

.enhanced-breadcrumbs .breadcrumb-item:hover:not(.current) {
    background-color: var(--button-secondary-hover, #e2e6ea);
    border-color: var(--light-border, #ddd);
}

.enhanced-breadcrumbs .breadcrumb-item.missing {
    font-style: italic;
    opacity: 0.8;
    color: var(--primary-color, #007bff);
    text-decoration: underline;
    border: 1px dashed var(--light-border, #ddd);
    cursor: pointer;
}

.enhanced-breadcrumbs .breadcrumb-item.missing:hover {
    background-color: var(--color-success-light, #d4edda);
    border-color: var(--color-success, #28a745);
    opacity: 1;
}

.enhanced-breadcrumbs .breadcrumb-item.current {
    color: white;
    cursor: default;
    font-weight: bold;
    text-decoration: none;
}

.enhanced-breadcrumbs .breadcrumb-item.hidden {
    opacity: 0.6;
    font-style: italic;
    background-color: var(--color-warning-light, #fff3cd);
    border: 1px dashed var(--color-warning, #ffc107);
}

.enhanced-breadcrumbs .breadcrumb-item.hidden:hover {
    background-color: var(--color-warning, #ffc107);
    opacity: 0.8;
}

.enhanced-breadcrumbs .breadcrumb-icon {
    font-size: var(--font-size-sm);
    line-height: 1;
}

.enhanced-breadcrumbs .breadcrumb-text {
    font-size: var(--font-size-sm, 14px);
    white-space: nowrap;
}

.enhanced-breadcrumbs .breadcrumb-separator {
    color: var(--text-color, #333333);
    opacity: 0.5;
    font-size: var(--font-size-xs);
    margin: 0 2px;
}

/* ===== Breadcrumb Context Menu ===== */
.breadcrumb-context-menu,
.context-menu {
    background: var(--bg-color, #ffffff);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    min-width: 200px;
    z-index: 10000;
}

.context-menu-content {
    padding: var(--spacing-xs) 0;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) 12px;
    cursor: pointer;
    transition: background-color var(--transition-speed, 0.2s);
    color: var(--text-color, #333333);
    font-size: var(--font-size-sm, 14px);
}

.context-menu-item:hover {
    background-color: var(--button-secondary-hover, #e2e6ea);
}

.context-menu-item.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.context-menu-item.disabled:hover {
    background-color: transparent;
}

.menu-icon {
    font-size: var(--font-size-sm);
    width: 16px;
    text-align: center;
}

.menu-text {
    flex: 1;
}

/* ===== Metacat Management Modal ===== */
.metacat-management-modal {
    max-width: 500px;
    width: 90%;
}

/* ===== Modal System =====
 * Note: Main modal system styles are in mystyle.css
 * Only editor-specific modal overrides here if needed
 */

.option-section {
    margin-bottom: var(--spacing-md);
}

.option-radio {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
    cursor: pointer;
    font-weight: 500;
}

.option-radio input[type="radio"] {
    margin: 0;
}

.option-radio input[type="radio"]:disabled + .option-label {
    color: var(--color-neutral);
    cursor: not-allowed;
}

.option-content {
    margin-left: var(--spacing-lg);
    padding: var(--spacing-xs);
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius-sm);
}

.form-control {
    width: 100%;
    padding: var(--spacing-xs) 12px;
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-sm, 14px);
    background: var(--bg-color, #ffffff);
    color: var(--text-color, #333333);
}

.form-control:focus {
    outline: none;
    border-color: var(--focus-color, #4D90FE);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 20%, transparent);
}

.form-hint {
    display: block;
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-color, #333333);
    opacity: 0.7;
}

.current-assignment {
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs);
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius-sm);
}

.warning-box {
    padding: var(--spacing-sm);
    background: var(--color-warning-light);
    border: 1px solid var(--warning-border, #ffeaa7);
    border-radius: var(--border-radius-sm);
    color: var(--color-warning);
    margin-top: var(--spacing-sm);
}

/* ===== Button Styles =====
 * Note: Main button system styles are in mystyle.css
 * Only editor-specific button overrides here if needed
 */


/* ===== Workflow Tabs (Content Editor Integration) ===== */
.main-workflow-tabs {
    margin: var(--spacing-md) 0;
    border-bottom: 1px solid var(--light-border, #ddd);
}

/* Override standard tab styling for workflow tabs */
.main-workflow-tabs .tab {
    display: flex;
    background-color: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
    overflow: hidden;
    border: 1px solid var(--light-border, #ddd);
    border-bottom: none;
}

.main-workflow-tabs .tab-button {
    background: none;
    border: none;
    padding: var(--spacing-md) 25px;
    cursor: pointer;
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color, #666);
    transition: all 0.3s ease;
    position: relative;
    flex: 1;
    text-align: center;
}

.main-workflow-tabs .tab-button:hover {
    background-color: var(--bg-color, #ffffff);
    color: var(--primary-color, #333);
}

.main-workflow-tabs .tab-button.active {
    background-color: var(--bg-color, #ffffff);
    color: var(--primary-color, #333);
    border-bottom: 3px solid var(--primary-color, #333);
    font-weight: bold;
}

/* Workflow tab content styling - CSS conformance fix */
.main-workflow-tabs .tabcontent {
    /* Visibility controlled by JavaScript via data attributes only */
    animation: fadeIn 0.3s ease;
}

/* DEPRECATED: .workflow-tab-content.active class - use data attributes instead */
/* Elements now use natural display values when data-display attribute is removed */

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Content Management Sections ===== */
.local-content-section {
    margin: var(--spacing-lg) 0;
}

.create-wall-section {
    margin-bottom: 30px;
    padding: var(--spacing-lg);
    border: 2px dashed var(--light-border, #ddd);
    border-radius: var(--border-radius-lg);
    background: var(--light-bg, #f9f9f9);
    text-align: center;
}

.create-wall-section h3 {
    margin-top: 0;
    color: var(--text-color, #333);
}

.create-wall-controls {
    margin-top: var(--spacing-md);
}

.local-walls-section,
.private-walls-section,
.public-content-section {
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-lg);
    background: var(--light-bg, #f5f5f5);
}

.local-walls-section h3,
.private-walls-section h3,
.public-content-section h3 {
    margin-top: 0;
    color: var(--text-color, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: var(--spacing-xs, 4px) var(--spacing-sm, 8px);
    margin-inline: calc(-1 * var(--spacing-sm, 8px));
    border-radius: var(--border-radius, 4px);
}

.local-walls-section h3:hover,
.private-walls-section h3:hover,
.public-content-section h3:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.local-walls-section h3:hover .section-toggle-caret,
.private-walls-section h3:hover .section-toggle-caret,
.public-content-section h3:hover .section-toggle-caret {
    color: var(--primary-color, #007bff);
    transform: scale(1.1);
}

.private-walls-section.collapsed h3,
.local-walls-section.collapsed h3,
.public-content-section.collapsed h3 {
    margin-bottom: 0;
}

/* Organize link in section headers */
.section-organize-link {
    margin-inline-start: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.local-controls,
.private-controls {
    margin-top: var(--spacing-md);
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ===== Auto-save Controls ===== */
.auto-save-controls {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    background: var(--bg-color, #ffffff);
    border: 1px solid var(--light-border, #e0e0e0);
    border-radius: var(--border-radius-md);
    font-size: var(--font-size-sm);
}

.auto-save-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-xs);
}

.auto-save-indicator {
    color: var(--color-success);
    font-weight: 500;
}

.auto-save-indicator.saving {
    color: var(--color-warning);
}

.last-save-time {
    color: var(--color-neutral);
    font-size: var(--font-size-xs);
}

.revert-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.initial-state-time {
    color: var(--color-neutral);
    font-size: var(--font-size-xs);
}

#revertChangesBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Message System ===== 
 * Note: Main message system styles are in mystyle.css 
 * Only editor-specific overrides here if needed
 */

/* ===== File Input Styling =====
 * Note: Main file input styles are in mystyle.css via the button system
 * Only editor-specific file input overrides here if needed
 */

/* ===== Viewport Message System ===== */
#viewport-message-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    max-width: 90%;
    width: auto;
    pointer-events: none;
}

.viewport-message {
    padding: var(--spacing-sm) 20px;
    margin: var(--spacing-xs) auto;
    border-radius: var(--border-radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: var(--font-size-sm);
    line-height: 1.4;
    max-width: 600px;
    word-wrap: break-word;
    pointer-events: auto;
    cursor: pointer;
    animation: slideDown 0.3s ease-out;
}

.viewport-message-success {
    background: var(--color-success-light);
    color: var(--color-success);
    border: 1px solid #c3e6cb;
}

.viewport-message-error {
    background: var(--color-danger-light);
    color: var(--color-danger);
    border: 1px solid #f5c6cb;
}

.viewport-message-warning {
    background: var(--color-warning-light);
    color: var(--color-warning);
    border: 1px solid var(--warning-border, #ffeaa7);
}

.viewport-message-info {
    background: var(--color-info-light);
    color: var(--color-info);
    border: 1px solid #bee5eb;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== IN-CONTEXT JSON EDITING OVERLAY ===== */
/*
 * Modal overlay for JSON editing with CodeMirror integration
 * - Full-screen modal with backdrop
 * - Professional styling consistent with design system
 * - Proper z-index layering and animations
 */

.editing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-dropdown) + 10);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Visibility controlled by JavaScript via data attributes only */
    transition: all var(--transition-speed) ease;
}

/* DEPRECATED: .editing-overlay-visible class - use data attributes instead */
/* Use data-visible="false" or data-display="false" for visibility control */

.editing-overlay-content {
    background: var(--bg-color);
    border-radius: var(--border-radius);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 90vw;
    max-height: 90vh;
    width: 1000px;
    height: 700px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform var(--transition-speed) ease;
}

.editing-overlay.editing-overlay-visible .editing-overlay-content {
    transform: scale(1);
}

.editing-overlay-header {
    background: var(--header-bg);
    color: white;
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--light-border);
}

.editing-overlay-title {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: 600;
}

.editing-overlay-body {
    flex: 1;
    padding: var(--spacing-md);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.json-editor-info {
    background: var(--color-info-light, #e3f2fd);
    border: 1px solid var(--color-info, #2196f3);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
}

.json-editor-warning {
    font-weight: 600;
    color: var(--color-warning, #f57c00);
    margin-bottom: var(--spacing-xs);
}

.json-editor-page-summary {
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.json-editor-container {
    flex: 1;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 300px;
}

/* CodeMirror integration styling within JSON editor overlay */
.json-editor-container .CodeMirror {
    height: 100%;
    min-height: 300px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: var(--font-size-sm);
    border: none;
    border-radius: var(--border-radius);
}

.json-editor-container .CodeMirror-scroll {
    min-height: 300px;
}

.json-editor-container .CodeMirror-lines {
    padding: var(--spacing-sm);
}

/* Main container styling for JsonEditor within modal */
.json-editor-container #main-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

.json-editor-container #main-container h3 {
    margin: 0 0 var(--spacing-sm) 0;
    padding: var(--spacing-sm);
    background: var(--light-bg);
    border-bottom: 1px solid var(--light-border);
    font-size: var(--font-size-md);
    font-weight: 600;
}

/* Canonical format checkbox controls */
.json-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.json-editor-header h3 {
    margin: 0;
    flex: 0 0 auto;
}

.json-editor-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    flex: 0 0 auto;
}

.canonical-format-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: normal;
    cursor: pointer;
    user-select: none;
    /* Ensure minimum touch target size for mobile (44px) */
    min-height: 44px;
    padding: var(--spacing-xs) 0;
}

.canonical-format-toggle input[type="checkbox"] {
    cursor: pointer;
    /* Ensure checkbox is large enough for mobile interaction */
    min-width: 20px;
    min-height: 20px;
}

.canonical-format-toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.canonical-format-toggle span {
    line-height: 1.4;
}

/* Read-only mode indicator for canonical format */
.CodeMirror[data-mode="canonical"] {
    background-color: var(--bg-secondary, #f5f5f5);
}

/* Dark theme support for canonical format read-only mode */
[data-theme="dark"] .CodeMirror[data-mode="canonical"] {
    background-color: rgba(255, 255, 255, 0.03);
}

.json-validation-section {
    background: var(--light-bg);
    border-top: 1px solid var(--light-border);
    padding: var(--spacing-sm);
    min-height: 60px;
    max-height: 300px;
    overflow-y: auto;
}

.editing-overlay-footer {
    background: var(--light-bg);
    border-top: 1px solid var(--light-border);
    padding: var(--spacing-md);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
}

.overlay-status-message {
    flex: 1;
    font-size: var(--font-size-sm);
    color: var(--color-secondary);
}

.overlay-footer-buttons {
    display: flex;
    gap: var(--spacing-sm);
    align-items: center;
}

/* ===== QUESTION EDITING MODAL STYLES ===== */
/* Styles for the question editing modal used in in-context quiz question editing */

.question-editing-modal-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    height: 100%;
}

.modal-header-controls {
    display: flex;
    justify-content: flex-end;
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
}

.editing-modal-editing-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-xs) 0;
}

.editing-modal-section {
    background: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.editing-modal-section-label {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color);
}

.editing-modal-footer {
    background: var(--light-bg);
    border-top: 1px solid var(--light-border);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

/* Question Text Editor Component Styles */

.question-text-editor-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.question-text-editor-container.focused {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--border-radius);
}

.question-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xs);
}

.question-editor-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
}

.question-editor-char-count {
    font-size: var(--font-size-sm);
    color: var(--color-neutral);
}

.question-editor-char-count.warning {
    color: var(--color-warning);
    font-weight: 600;
}

.question-text-editor {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    min-height: 80px;
}

.question-text-editor:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.question-text-editor-minimal {
    width: 100%;
    min-height: 44px;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: var(--font-size-md);
    font-weight: 600;
}

.question-text-editor-minimal:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

/* Answer Array Editor Component Styles */

.answer-array-editor-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.answer-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.answer-editor-label {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--text-color);
}

.answer-add-button {
    white-space: nowrap;
}

.answers-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.answer-option-editor {
    display: flex;
    gap: var(--spacing-sm);
    background: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-sm);
}

.answer-drag-handle {
    cursor: grab;
    user-select: none;
    color: var(--color-neutral);
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    font-size: var(--font-size-lg);
    line-height: 1;
}

.answer-drag-handle:active {
    cursor: grabbing;
}

.answer-content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.answer-text-section,
.response-text-section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.answer-field-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color);
}

.answer-text-input {
    width: 100%;
    min-height: 44px;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-family: inherit;
    /* font-size inherited from global input rule (16px) to prevent iOS zoom */
}

.answer-text-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.response-text-input {
    width: 100%;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 16px;
    resize: vertical;
    min-height: 60px;
}

.response-text-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.answer-controls-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--spacing-xs);
}

.correct-answer-label {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.correct-answer-label input[type="radio"] {
    cursor: pointer;
}

.correct-answer-label label {
    cursor: pointer;
    user-select: none;
}

.answer-delete-button {
    white-space: nowrap;
}

.answer-validation-messages {
    padding: var(--spacing-sm);
    background: var(--color-error-light, #ffebee);
    border: 1px solid var(--color-error, #f44336);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    color: var(--color-error-dark, #c62828);
    display: none;
}

.answer-validation-messages.has-errors {
    display: block;
}

/* Question Preview Component Styles */

.question-preview-container {
    background: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.question-preview-component {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.question-preview-header {
    border-bottom: 1px solid var(--light-border);
    padding-bottom: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.question-preview-title {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-neutral);
}

.question-preview-content {
    /* Preview content uses the actual question component styles */
}

/* Container-specific styles */

.title-editor-container,
.task-editor-container,
.question-editor-container,
.answer-editor-container,
.image-editor-container {
    /* Containers primarily serve as mounting points for components */
    /* Component-specific styling handled by component CSS above */
}

/* Dark mode support */
/* ===== ADMIN PAGE STYLES MOVED TO admin.css ===== */
/* 
 * Admin-specific styles have been moved to mgl/prod/css/admin.css 
 * for proper role-based CSS loading per CSS conformance rule #23.
 * Admin styles are now loaded only for users with admin role.
 */

/* YouTube Checker Specific Styles */

.input-label {
    color: var(--text-color);
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.youtube-results-section {
    min-height: 50px;
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    transition: background-color var(--transition-speed) ease;
}

.youtube-results-loading {
    background-color: var(--color-info-light);
    border-color: var(--color-info);
}

.youtube-results-success {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
}

.youtube-results-error {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger);
}

.youtube-loading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-info);
    font-size: var(--font-size-sm);
}

.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(77, 144, 254, 0.2);
    border-top: 2px solid var(--color-info);
    border-radius: var(--border-radius-full);
    animation: spin 1s linear infinite;
}

.youtube-result-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.youtube-video-id,
.youtube-status,
.youtube-details {
    color: var(--text-color);
    line-height: 1.4;
}

.youtube-status-badge {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-valid,
.status-embeddable {
    background-color: var(--color-success-light);
    color: var(--color-success);
}

.status-notembeddable {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
}

.status-404,
.status-error {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
}

.status-not-analyzed {
    background-color: var(--color-secondary-light);
    color: var(--color-secondary);
}

.youtube-details-list {
    margin: var(--spacing-xs) 0 0 0;
    padding-left: var(--spacing-md);
    color: var(--text-color);
}

.youtube-details-list li {
    margin: var(--spacing-xs) 0;
}

.youtube-link {
    margin-top: var(--spacing-xs);
}

.youtube-external-link {
    color: var(--focus-color);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--font-size-sm);
}

.youtube-external-link:hover {
    text-decoration: underline;
}

.youtube-error {
    color: var(--color-danger);
    font-weight: 500;
    padding: var(--spacing-xs) 0;
}

/* Content Scanner Styles */
.content-scanner-card {
    margin-top: var(--spacing-md);
}


.video-limit-input,
.video-start-input {
    width: 120px;
    /* All other styling inherited from base input {} rule */
}

.input-help {
    color: var(--text-color);
    font-size: var(--font-size-xs);
    opacity: 0.7;
    line-height: 1.3;
}

.limited-badge {
    display: inline-block;
    padding: 2px var(--spacing-sm);
    background-color: var(--color-warning);
    color: white;
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: var(--spacing-sm);
}


.scanner-progress-section {
    background-color: var(--color-info-light);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.scanner-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-info);
    font-size: var(--font-size-sm);
}

.scanner-results-section {
    min-height: 50px;
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
}

.scanner-results-error {
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.scanner-error {
    color: var(--color-danger);
    font-weight: 500;
}

.scanner-report-container {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

/* Report sections */
.report-summary,
.recommendations-section,
.details-section {
    background-color: var(--bg-color);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.report-summary h3,
.recommendations-section h3,
.details-section h3 {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.health-score {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-md);
}

.score-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    font-size: var(--font-size-md);
    color: white;
    margin-left: var(--spacing-xs);
}

.score-excellent { background-color: var(--color-success); }
.score-good { background-color: var(--color-info); }
.score-fair { background-color: var(--color-warning); }
.score-poor { background-color: var(--color-danger); }

.scan-statistics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.stat-item {
    color: var(--text-color);
    line-height: 1.4;
}

/* Recommendations */
.recommendation-item {
    border-left: 4px solid transparent;
    padding: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
}

.priority-high {
    border-left-color: var(--color-danger);
    background-color: var(--color-danger-light);
}

.priority-medium {
    border-left-color: var(--color-warning);
    background-color: var(--color-warning-light);
}

.priority-low {
    border-left-color: var(--color-info);
    background-color: var(--color-info-light);
}

.priority-info {
    border-left-color: var(--color-secondary);
    background-color: var(--color-secondary-light);
}

.recommendation-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    font-weight: 600;
    color: var(--text-color);
}

.priority-badge {
    display: inline-block;
    padding: 2px var(--spacing-xs);
    border-radius: var(--border-radius-pill);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: white;
}

.priority-badge.priority-high { background-color: var(--color-danger); }
.priority-badge.priority-medium { background-color: var(--color-warning); }
.priority-badge.priority-low { background-color: var(--color-info); }
.priority-badge.priority-info { background-color: var(--color-secondary); }

.recommendation-action {
    color: var(--text-color);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* Category sections */
.category-section {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-sm);
    overflow: hidden;
}

.section-danger { border-color: var(--color-danger); }
.section-warning { border-color: var(--color-warning); }
.section-success { border-color: var(--color-success); }

.category-header {
    background-color: var(--light-bg);
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
    transition: background-color var(--transition-speed) ease;
}

.category-header:hover {
    background-color: var(--light-border);
}

.category-header h4 {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.toggle-indicator {
    color: var(--text-color);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-speed) ease;
}

.category-content {
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    max-height: 400px;
    overflow-y: auto;
}

.video-item {
    padding: var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

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

.video-id {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    color: var(--text-color);
    font-weight: 500;
}

.video-path {
    color: var(--text-color);
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
}

.additional-paths {
    color: var(--text-color);
    font-size: var(--font-size-xs);
    margin-bottom: var(--spacing-xs);
    opacity: 0.7;
}

.video-link a {
    font-size: var(--font-size-xs);
    font-weight: 500;
}

.unavailable-info {
    color: var(--text-color);
    opacity: 0.6;
    font-style: italic;
    font-size: var(--font-size-xs);
}

.view-all-videos-link {
    font-size: var(--font-size-xs);
    margin-left: var(--spacing-xs);
    font-weight: 500;
}

/* Admin dark mode styles moved to admin.css */

/* Admin responsive styles moved to admin.css */
@media (max-width: 600px) {
    /* Admin-specific responsive rules moved to admin.css */
    
    .scan-statistics {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .recommendation-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .video-id {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm);
    }
}

/* ===== YOUTUBE FIX ACTIONS PHASE 2 MODAL STYLES ===== */
/* Enhanced modal styles for YouTube fix action selection and confirmation */

/* Video Action Selection Modal */
.video-action-selection {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 100%;
}

.video-action-info {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.video-action-video-id,
.video-action-status,
.video-action-title,
.video-action-prefix {
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.video-action-instructions {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
    margin-bottom: var(--spacing-xs);
}

.video-actions-list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.video-action-item {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    cursor: pointer;
    transition: all var(--transition-speed) ease;
    background-color: var(--bg-color);
}

.video-action-item:hover {
    background-color: var(--light-bg);
    border-color: var(--focus-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-action-item.priority-high:hover {
    border-color: var(--button-primary);
    box-shadow: 0 2px 8px rgba(77, 144, 254, 0.2);
}

.video-action-item.priority-medium:hover {
    border-color: var(--color-warning);
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.2);
}

.video-action-item.priority-low:hover {
    border-color: var(--color-secondary);
    box-shadow: 0 2px 8px rgba(108, 117, 125, 0.2);
}

.video-action-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.video-action-item-header strong {
    font-size: var(--font-size-md);
    color: var(--text-color);
}

.video-action-priority {
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px var(--spacing-xs);
    border-radius: var(--border-radius-pill);
    color: white;
}

.video-action-item.priority-high .video-action-priority {
    background-color: var(--button-primary);
}

.video-action-item.priority-medium .video-action-priority {
    background-color: var(--color-warning);
}

.video-action-item.priority-low .video-action-priority {
    background-color: var(--color-secondary);
}

.video-action-item-description {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    opacity: 0.8;
    line-height: 1.4;
}

/* Video Replace Dialog */
.video-replace-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 100%;
}

.replace-current-video {
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
}

.replace-current-video h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.replace-current-video .video-info {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-color);
}

.replace-input-section h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.input-group label {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-color);
}

.input-group input {
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: border-color var(--transition-speed) ease,
                box-shadow var(--transition-speed) ease;
}

.input-group input:focus {
    outline: none;
    border-color: var(--focus-color);
    box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.25);
}

.input-help {
    font-size: var(--font-size-xs);
    color: var(--text-color);
    opacity: 0.7;
}

/* Validation Result Styles */
.validation-result {
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin-top: var(--spacing-sm);
}

.validation-result.validation-success {
    background-color: var(--color-success-light);
    border-color: var(--color-success);
}

.validation-result.validation-error {
    background-color: var(--color-danger-light);
    border-color: var(--color-danger);
}

.validation-header {
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
}

.validation-result.validation-success .validation-header {
    color: var(--color-success);
}

.validation-result.validation-error .validation-header {
    color: var(--color-danger);
}

.validation-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.validation-result.validation-success .validation-details {
    color: var(--color-success);
}

.validation-error-message {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* Dark Mode Support for New Modal Styles */
/* Responsive adjustments for modal content */
@media (max-width: 600px) {
    .video-action-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
    
    .video-action-priority {
        align-self: flex-start;
    }
    
    .input-group input {
        font-size: var(--font-size-md); /* Prevent zoom on iOS */
    }
}

/* ===== Batch Operations Styles (Phase 3) ===== */
.batch-operations-section {
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
}

.batch-operations-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md);
    cursor: pointer;
    background-color: var(--light-bg);
    border-bottom: 1px solid var(--light-border);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.batch-operations-header:hover {
    background-color: var(--hover-bg);
}

.batch-operations-header h4 {
    margin: 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.batch-operations-content {
    padding: var(--spacing-md);
}

.batch-description {
    margin: 0 0 var(--spacing-md) 0;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
}

.batch-suggestion {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--light-bg);
}

.batch-suggestion:last-child {
    margin-bottom: 0;
}

.batch-suggestion-header {
    display: flex;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    flex-wrap: wrap;
}

.batch-suggestion-description {
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
}

.batch-action-btn {
    font-size: var(--font-size-sm);
}

.batch-action-btn.priority-high {
    background-color: var(--color-danger);
    color: white;
    border-color: var(--color-danger);
}

.batch-action-btn.priority-medium {
    background-color: var(--color-warning);
    color: white;
    border-color: var(--color-warning);
}

.batch-action-btn.priority-low {
    background-color: var(--color-info);
    color: white;
    border-color: var(--color-info);
}

.batch-preview-btn {
    font-size: var(--font-size-sm);
}

.no-batch-message {
    margin: 0;
    color: var(--color-neutral);
    font-style: italic;
    text-align: center;
    padding: var(--spacing-md);
}

/* Batch Progress Styles */
.batch-progress {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    min-width: 300px;
}

.progress-description {
    font-size: var(--font-size-md);
    font-weight: 500;
    color: var(--text-color);
}

/* Progress bar elements use base classes from mystyle.css:
   - .progress-bar-container for layout
   - .progress-bar for the bar container
   - .progress-bar-fill for the fill element (renamed from .progress-fill)
   - .progress-text for percentage display
*/

.progress-details {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    min-height: 1.2em;
    font-family: monospace;
}

/* Batch Preview Styles */
.batch-preview {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 600px;
}

.preview-header h4 {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--text-color);
    font-size: var(--font-size-lg);
}

.preview-header p {
    margin: 0;
    color: var(--color-neutral);
    font-size: var(--font-size-sm);
}

.preview-videos h5 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--text-color);
    font-size: var(--font-size-md);
}

.preview-video-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--light-bg);
}

.preview-video-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-bottom: 1px solid var(--light-border);
    font-size: var(--font-size-sm);
}

.preview-video-item:last-child {
    border-bottom: none;
}

.preview-video-item .video-id {
    font-family: monospace;
    color: var(--text-color);
}

.preview-video-item .video-status {
    font-size: var(--font-size-xs);
    padding: 2px var(--spacing-sm);
    border-radius: var(--border-radius);
    background-color: var(--color-secondary);
    color: white;
}

.preview-warning {
    padding: var(--spacing-sm);
    background-color: var(--color-warning-light, #fef3cd);
    border: 1px solid var(--color-warning);
    border-radius: var(--border-radius);
    color: var(--color-warning-dark, #856404);
    font-size: var(--font-size-sm);
}

.preview-warning strong {
    color: var(--color-warning-dark, #856404);
}

/* Responsive adjustments for batch operations */
@media (max-width: 600px) {
    .batch-suggestion-header {
        flex-direction: column;
    }
    
    .batch-action-btn,
    .batch-preview-btn {
        width: 100%;
    }
    
    .preview-video-item {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-xs);
    }
}

/* ===== ADMIN COMPREHENSIVE SEARCH PHASE 2 STYLES ===== */
/* Checkbox and status styles for enhanced content search */

/* Admin checkbox styles moved to admin.css */

.checkbox-container.sub-checkbox {
    font-size: var(--font-size-sm);
    color: var(--text-secondary, #666);
    margin-bottom: var(--spacing-xs);
}

/* Dark mode text visibility fix for sub-checkboxes */
.checkbox-container.sub-checkbox input[type="checkbox"] {
    margin-right: var(--spacing-sm);
}

.checkbox-container.sub-checkbox span {
    font-weight: 400;
}

/* Hover effects for admin sub-checkboxes */
.checkbox-container.sub-checkbox:hover {
    color: var(--text-color);
}

.checkbox-container.sub-checkbox:hover input[type="checkbox"] {
    border-color: var(--button-primary, #4D90FE);
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
    margin: 0;
}

.search-status-container {
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm);
    border-radius: var(--border-radius);
    font-size: var(--font-size-sm);
}

.search-status-info {
    background-color: var(--color-info-light);
    color: var(--color-info);
    border-left: 4px solid var(--color-info);
}

.search-status-success {
    background-color: var(--color-success-light);
    color: var(--color-success);
    border-left: 4px solid var(--color-success);
}

.search-status-warning {
    background-color: var(--color-warning-light);
    color: var(--color-warning);
    border-left: 4px solid var(--color-warning);
}

.search-status-error {
    background-color: var(--color-danger-light);
    color: var(--color-danger);
    border-left: 4px solid var(--color-danger);
}

/* ===== ADMIN TAB SYSTEM MOVED TO admin.css ===== */
/* Admin tab interface styles moved to admin.css for proper role-based loading */

/* ===== CONTENT CHANGE REPORT STYLES ===== */
/* Admin-specific styles for the content change report feature */
/* Following CSS Conformance Checklist standards - Phase 3 Implementation */

/**
 * Content Change Report Section Container
 * Leverages existing container patterns for consistency
 */
.change-report-section {
    /* Inherit from container patterns in mystyle.css */
    background-color: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-lg);
    margin: var(--spacing-md) 0;
    overflow: hidden;
    transition: box-shadow var(--transition-speed) ease,
                background-color var(--transition-speed) ease,
                border-color var(--transition-speed) ease;
}

.change-report-section:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/**
 * Form Container - follows mystyle.css container patterns
 */
.change-report-form-container {
    padding: var(--spacing-md);
    background-color: var(--bg-color);
    border-bottom: 1px solid var(--light-border);
}

/**
 * Parameter Form Layout - conservative grid to prevent overflow
 * Uses a more predictable column structure to avoid alignment issues
 */
.change-report-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    max-width: 100%;
}

/**
 * Date Range Section - grouped form controls with overflow protection
 */
.change-report-date-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-sm);
    max-width: 100%;
}

/**
 * Filters Section - conservative filter layout to prevent overflow
 */
.change-report-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-sm);
    max-width: 100%;
}

/**
 * Pagination Settings - inline form controls with wrap protection
 */
.change-report-pagination-settings {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    max-width: 100%;
}

/**
 * Actions Section - button group with wrap protection
 */
.change-report-actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
    max-width: 100%;
}

/**
 * Loading Indicator - consistent with existing admin loading states
 */
.change-report-loading {
    padding: var(--spacing-md);
    text-align: center;
    color: var(--text-color);
    font-style: italic;
}

/**
 * Results Container - table wrapper following .modal-system-content patterns
 */
.change-report-results-container {
    background-color: var(--bg-color);
    padding: var(--spacing-md);
}

/**
 * Results Summary - information display
 */
.change-report-summary {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

/**
 * Results Table Wrapper - uses existing .data-table base with enhancements
 */
.change-report-results {
    overflow-x: auto;
    margin-bottom: var(--spacing-md);
}

.change-report-results .data-table {
    width: 100%;
    font-size: var(--font-size-sm);
}

/**
 * Pagination Controls - follows existing navigation button patterns with overflow protection
 * Uses standardized .btn and .btn-secondary classes
 */
.change-report-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--light-border);
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    max-width: 100%;
}

.pagination-info {
    color: var(--text-color);
    font-size: var(--font-size-sm);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
    max-width: 100%;
}

.page-indicator {
    color: var(--text-color);
    font-size: var(--font-size-sm);
    margin: 0 var(--spacing-sm);
}

/**
 * Error Message Display - consistent with existing error patterns
 */
.change-report-section .error-message {
    padding: var(--spacing-md);
    background-color: var(--error-bg, #fee);
    border: 1px solid var(--error-border, #fcc);
    border-radius: var(--border-radius-sm);
    color: var(--error-text, #c33);
    margin: var(--spacing-md) 0;
}

/**
 * Responsive Design - mobile optimization using container queries
 */
@container (max-width: 768px) {
    .change-report-date-range {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .change-report-filters {
        grid-template-columns: 1fr;
        gap: var(--spacing-xs);
    }
    
    .change-report-pagination {
        flex-direction: column;
        gap: var(--spacing-sm);
        align-items: stretch;
        justify-content: center;
    }
    
    .pagination-controls {
        justify-content: center;
    }
    
    .change-report-results {
        font-size: var(--font-size-xs);
    }
    
    .change-report-pagination-settings {
        justify-content: center;
    }
}

@container (max-width: 480px) {
    .change-report-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .change-report-pagination-settings {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
    }
    
    .change-report-pagination {
        text-align: center;
    }
    
    .pagination-info {
        text-align: center;
        margin-bottom: var(--spacing-xs);
    }
}

/**
 * Dark Theme Support - follows existing dark mode patterns
 */
/* ===== Image Upload Loading States =====
 * Loading indicators for S3 image upload operations
 * Used in image insertion modal and in-context image editor
 */

/* Upload loading state for modal image insertion */
.drop-zone-uploading {
    color: var(--accent-color, #007cba);
    font-weight: 600;
    margin: var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: center;
}

.drop-zone-uploading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-color, #007cba);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinner-rotation 0.8s linear infinite;
}

/* Spinner animation keyframes */
@keyframes spinner-rotation {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Hide uploading state when not needed */
.drop-zone-uploading[data-display="false"] {
    display: none;
}

/* Disable drop zone during upload */
.drop-zone.uploading {
    pointer-events: none;
    opacity: 0.6;
}

/* Upload loading state for in-context image editor */
.image-editor-uploading {
    color: var(--accent-color, #007cba);
    font-weight: 600;
    margin: var(--spacing-md) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    justify-content: center;
}

.image-editor-uploading::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--accent-color, #007cba);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spinner-rotation 0.8s linear infinite;
}

/* Hide uploading state when not needed */
.image-editor-uploading[data-display="false"] {
    display: none;
}

/* Dark theme support for upload loading states */
/* ===== REPORT COMPONENT STYLES =====
 * Standardized report display component for server responses and validation errors
 * Used in manage-content, HTML editor, and JSON editor contexts
 * Supports both dry run and actual save reports
 * Phase 2: Full CSS styling with theme support and accessibility features
 * Conforms to CSS conformance checklist and module standards
 */

/* Report Container Base Styles */
.report-container {
    position: relative;
    background: var(--bg-color, #ffffff);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    padding: clamp(var(--spacing-md, 12px), 2vw, var(--spacing-lg, 20px));
    margin: clamp(var(--spacing-md, 12px), 2vw, var(--spacing-lg, 20px)) 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Server Report Variant (Success/Dry Run) */
.report-container.server-report {
    border-left: 4px solid var(--success-color, #28a745);
    background: var(--success-bg, #f0f9f4);
}

/* Validation Report Variant (Errors) */
.report-container.validation-report {
    border-left: 4px solid var(--error-color, #dc3545);
    background: var(--error-bg, #fff5f5);
}

/* Simple Report Variant (General Messages) */
.report-container.simple-report {
    border-left: 4px solid var(--accent-color, #007cba);
    background: var(--info-bg, #f0f8ff);
}

/* Error Report Variant (Internal Errors) */
.report-container.error-report {
    border-left: 4px solid var(--warning-color, #ffc107);
    background: var(--warning-bg, #fffbf0);
}

/* Report Close Button */
.report-close-btn {
    position: absolute;
    top: clamp(8px, 1vw, 12px);
    right: clamp(8px, 1vw, 12px);
    background: transparent;
    border: none;
    font-size: var(--font-size-lg);
    line-height: 1;
    color: var(--text-color, #333);
    cursor: pointer;
    padding: var(--spacing-xs, 4px);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius, 4px);
    transition: all 0.2s ease;
    opacity: 0.6;
}

.report-close-btn:hover {
    opacity: 1;
    background: var(--light-bg, #f5f5f5);
}

.report-close-btn:focus {
    outline: 2px solid var(--focus-color, #007cba);
    outline-offset: 2px;
    opacity: 1;
}

.report-close-btn:active {
    transform: scale(0.95);
}

/* Report Title */
.report-title {
    margin: 0 0 var(--spacing-md, 12px) 0;
    padding-right: clamp(var(--spacing-xl), 5vw, 48px); /* Space for close button */
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--text-color, #333);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 8px);
}

/* Report Summary Section */
.report-summary {
    margin-bottom: var(--spacing-md, 12px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
    background: var(--bg-color, #ffffff);
    border-radius: var(--border-radius, 4px);
    border: 1px solid var(--light-border, #ddd);
}

.report-summary p {
    margin: 0;
    font-size: var(--font-size-sm, 14px);
    color: var(--text-color, #333);
    line-height: 1.5;
}

.report-summary strong {
    font-weight: 600;
    color: var(--text-color, #333);
}

/* Report Metadata Section */
.report-metadata {
    margin-bottom: var(--spacing-md, 12px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
    background: var(--bg-color, #ffffff);
    border-radius: var(--border-radius, 4px);
    border: 1px solid var(--light-border, #ddd);
}

.report-metadata p {
    margin: var(--spacing-xs, 4px) 0;
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted, #666);
    line-height: 1.4;
}

/* Report Details Section Container */
.report-details-section {
    margin-top: var(--spacing-md, 12px);
}

/* Report Details Content */
.report-details-content {
    margin-top: var(--spacing-md, 12px);
    padding: var(--spacing-md, 12px);
    background: var(--bg-color, #ffffff);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    max-height: 60vh;
    overflow-y: auto;
}

/* Hide details when collapsed */
.report-details-content[data-display="false"] {
    display: none;
}

/* Report Group Section */
.report-group {
    margin-bottom: var(--spacing-lg, 16px);
}

.report-group:last-child {
    margin-bottom: 0;
}

.report-group-title {
    font-size: var(--font-size-md, 15px);
    font-weight: 600;
    color: var(--text-color, #333);
    margin: 0 0 var(--spacing-sm, 8px) 0;
    padding-bottom: var(--spacing-xs, 4px);
    border-bottom: 2px solid var(--light-border, #ddd);
}

/* Report Item (Individual Change or Error) */
.report-item {
    padding: var(--spacing-sm, 8px);
    margin-bottom: var(--spacing-sm, 8px);
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius, 4px);
    border-left: 3px solid var(--accent-color, #007cba);
}

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

/* Report Item Title */
.report-item-title {
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    color: var(--text-color, #333);
    margin: 0 0 var(--spacing-xs, 4px) 0;
}

/* Report Item Description */
.report-item-description {
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted, #666);
    margin: 0 0 var(--spacing-xs, 4px) 0;
    line-height: 1.4;
}

/* Report Item Change Details */
.report-item-change {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs, 4px);
    font-size: var(--font-size-xs, 12px);
    font-family: 'Courier New', Courier, monospace;
    margin-top: var(--spacing-xs, 4px);
}

.report-item-change-row {
    display: flex;
    gap: var(--spacing-sm, 8px);
    align-items: flex-start;
}

.report-item-change-label {
    font-weight: 600;
    color: var(--text-muted, #666);
    min-width: 60px;
}

.report-item-change-value {
    flex: 1;
    word-break: break-word;
    color: var(--text-color, #333);
}

/* Validation Error Styles */
.report-item.validation-error {
    border-left-color: var(--error-color, #dc3545);
    background: var(--error-bg-light, #fff5f5);
}

.report-item.validation-error .report-item-title {
    color: var(--error-color, #dc3545);
}

/* Report Footer Note */
.report-footer-note {
    margin: var(--spacing-md, 12px) 0 0 0;
    padding-top: var(--spacing-md, 12px);
    border-top: 1px solid var(--light-border, #ddd);
    font-size: var(--font-size-xs, 12px);
    color: var(--text-muted, #666);
    text-align: center;
    font-style: italic;
}

/* Empty State Message */
.report-empty-state {
    text-align: center;
    padding: clamp(var(--spacing-lg, 16px), 4vw, var(--spacing-xl, 24px));
    color: var(--text-muted, #666);
    font-size: var(--font-size-sm, 14px);
    font-style: italic;
}

/* Report Group Toggle Button (for collapsible groups with >10 items) */
.report-group-toggle {
    width: 100%;
    padding: clamp(var(--spacing-xs), 2vw, 10px);
    background: var(--light-bg, #f5f5f5);
    color: var(--text-color, #333);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-sm, 14px);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-xs, 4px);
    min-height: 44px;
    text-align: left;
    margin-bottom: var(--spacing-sm, 8px);
}

.report-group-toggle:hover {
    background: var(--bg-color, #ffffff);
    border-color: var(--accent-color, #007cba);
}

.report-group-toggle:focus {
    outline: 2px solid var(--focus-color, #007cba);
    outline-offset: 2px;
}

.report-group-toggle:active {
    transform: scale(0.98);
}

/* Report Group Items Container (collapsible) */
.report-group-items {
    margin-top: var(--spacing-sm, 8px);
    padding-left: var(--spacing-md, 12px);
    border-left: 2px solid var(--light-border, #ddd);
}

.report-group-items[data-display="false"] {
    display: none;
}

/* Report Export Buttons Container */
.report-export-buttons {
    display: inline-flex;
    gap: var(--spacing-xs, 4px);
    margin-left: var(--spacing-sm, 8px);
}

.report-export-btn {
    padding: clamp(var(--spacing-sm), 1.5vw, 8px) clamp(10px, 2vw, 12px);
    font-size: var(--font-size-xs, 12px);
    min-width: auto;
    white-space: nowrap;
}

/* Responsive Adjustments */
@media (max-width: 600px) {
    .report-container {
        padding: var(--spacing-md, 12px);
        margin: var(--spacing-sm, 8px) 0;
    }

    .report-title {
        font-size: 16px;
        padding-right: 36px;
    }

    .report-close-btn {
        font-size: 20px;
        min-width: 40px;
        min-height: 40px;
    }

    .report-details-content {
        max-height: 50vh;
    }

    .report-item-change-row {
        flex-direction: column;
        gap: var(--spacing-xs, 4px);
    }

    .report-item-change-label {
        min-width: auto;
    }
}

/* ===== DARK THEME SUPPORT ===== */

/* ===== PAGE EDITOR STYLES (MERGED FROM editor-page-styles.css - Phase 3) ===== */
/* Page editing interfaces: PageEditor, PageEditorUI, PageImages, RichTextEditor, QuestionModeEditor */
/* Leverages existing mystyle.css classes and Phase 1-2 consolidations */

/* ===== Standard Editor Styling ===== */
.editor-markdown-standard,
.editor-html-standard {
    width: 100%;
    height: 450px;
    min-height: 450px;
    box-sizing: border-box;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    padding: var(--spacing-sm);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius);
    background-color: var(--bg-color);
    color: var(--text-color);
    resize: vertical;
}

.editor-split-view {
    flex: 1;
}

.preview-active {
    background-color: var(--color-accent) !important;
    color: white !important;
}

/* ===== Page Section Styles ===== */
/* Using .form-section base class from mystyle.css */

.form-section h3 {
    margin-block-start: 0;
    margin-block-end: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    font-size: var(--font-size-lg);
    color: var(--text-color);
}

/* ===== Navigation Components ===== */
.page-navigation {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

/* ===== Page Item Containers ===== */
.page-item {
    margin-bottom: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.page-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.page-controls {
    display: flex;
    gap: clamp(var(--spacing-xs, 4px), 1vw, 5px);
}

/* ===== Page Lists ===== */
.pages-list {
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

/* ===== Inputs and Tables ===== */
.form-section table {
    width: 100%;
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

.form-section td:first-child {
    width: clamp(120px, 20vw, 150px);
    font-weight: bold;
    font-size: var(--font-size-sm);
}

/* ===== Rich Text Editor ===== */
.rich-editor-container {
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    background-color: var(--bg-color, #ffffff);
}

/* Legacy class names (consolidated in Phase 2) */
.rich-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    padding: clamp(var(--spacing-xs, 4px), 1vw, 5px);
    gap: clamp(2px, 0.5vw, 3px);
    border-block-end: 1px solid var(--light-border, #ddd);
    background-color: var(--light-bg, #f5f5f5);
}

.rich-editor-toolbar .separator {
    width: 1px;
    height: clamp(25px, 5vw, 30px);
    background-color: var(--light-border, #ddd);
    margin: 0 clamp(var(--spacing-xs, 4px), 1vw, 5px);
}

.rich-editor-content {
    min-height: clamp(80px, 15vh, 100px);
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    overflow-y: auto;
    outline: none;
    color: var(--text-color);
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

/* ===== Image Management ===== */
.image-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

.image-inputs .input-group {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: clamp(150px, 30vw, 200px);
}

.image-inputs .input-group label {
    margin-bottom: clamp(var(--spacing-xs, 4px), 1vw, 5px);
    font-weight: bold;
    font-size: var(--font-size-sm);
}

.image-preview {
    margin-block-start: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

.image-preview img {
    display: block;
    max-width: 100%;
    max-height: clamp(200px, 40vh, 300px);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    margin-block-end: var(--spacing-sm);
}

.image-error-message {
    padding: var(--spacing-sm);
    background-color: var(--error-bg, #fee);
    color: var(--error-text, #c00);
    border: 1px solid var(--error-border, #fcc);
    border-radius: var(--border-radius, 4px);
    margin-block-end: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

/* ===== Question Mode Editor ===== */
.question-editor {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

.question-text-section {
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
}

.question-text-section .rich-editor-container {
    display: block !important;
}

.question-text-section .rich-editor-toolbar {
    display: flex !important;
}

#questionText {
    border-block-start: 1px solid var(--light-border, #ddd);
    min-height: clamp(120px, 20vh, 150px);
}

.answers-section {
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
}

.answer-item {
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    padding: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    background-color: var(--bg-color, #ffffff);
}

.answer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.answer-controls {
    display: flex;
    gap: clamp(var(--spacing-xs, 4px), 1vw, 5px);
}

.answer-inputs {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
}

.answer-row {
    display: flex;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    align-items: center;
}

.answer-text {
    flex: 1;
}

.points-input {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, 5px);
    white-space: nowrap;
}

.points-field {
    width: clamp(50px, 10vw, 60px);
    min-width: clamp(40px, 8vw, 44px);
    max-width: clamp(70px, 12vw, 80px);
}

.response-text {
    width: 100%;
    min-height: clamp(60px, 12vh, 80px);
    resize: vertical;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    padding: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    border-radius: var(--border-radius, 4px);
}

/* ===== Question Preview Mode ===== */
.question-preview {
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    padding: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    background-color: var(--bg-color, #ffffff);
}

.preview-metadata {
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
}

.preview-metadata h3 {
    margin-block-start: 0;
    margin-block-end: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    font-size: var(--font-size-lg);
}

.task {
    font-style: italic;
    color: var(--text-muted, #666);
    font-size: var(--font-size-sm);
}

.question-image {
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    text-align: center;
}

.question-image img {
    max-width: 100%;
    max-height: clamp(200px, 40vh, 300px);
    border-radius: var(--border-radius, 4px);
}

.question-text {
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    font-size: var(--font-size-sm);
    line-height: 1.6;
}

.answer-options {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
}

.answer-option {
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px)) clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    cursor: pointer;
    background-color: var(--light-bg, #f5f5f5);
    transition: all 0.2s ease;
    font-size: var(--font-size-sm);
}

.answer-option:hover {
    background-color: var(--hover-bg, #e9e9e9);
}

.answer-option.selected {
    border-color: var(--primary-color, #4D90FE);
    background-color: color-mix(in srgb, var(--focus-color) 10%, transparent);
}

.answer-option label {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    cursor: pointer;
    width: 100%;
    font-size: var(--font-size-sm);
}

.answer-option input[type="radio"] {
    margin: 0;
}

.answer-feedback {
    padding: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
    border-radius: var(--border-radius, 4px);
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.answer-feedback.correct {
    background-color: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.answer-feedback.incorrect {
    background-color: var(--error-bg);
    color: var(--error-text);
    border: 1px solid var(--error-border);
}

/* ===== Editor Toolbar ===== */
.editor-toolbar {
    display: flex;
    justify-content: space-between;
    padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    background-color: var(--light-bg, #f5f5f5);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 4px);
    margin-bottom: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 15px));
}

/* Table inputs */
.equal-width-inputs td:nth-child(2) input,
.equal-width-inputs td:nth-child(2) select {
    width: 100%;
}

.form-section table.equal-width-inputs {
    width: 100%;
}

.form-section table.equal-width-inputs td:first-child {
    width: clamp(70px, 12vw, 80px);
    font-size: var(--font-size-sm);
}

.form-section table.equal-width-inputs input,
.form-section table.equal-width-inputs select {
    max-width: 500px;
}

.form-section table.equal-width-inputs input[type="checkbox"] {
    width: auto;
}

.form-section table.equal-width-inputs .label-standard {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin: 0;
}

.form-section table.equal-width-inputs .property-help-row {
    background-color: transparent;
}

/* ===== Multi-Mode Editor Styles ===== */

.file-drop-area {
    border: 2px dashed var(--light-border, #ccc);
    border-radius: var(--border-radius-lg);
    padding: 40px var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-md);
    background: var(--bg-color, #fafafa);
    transition: all 0.3s ease;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    min-width: 300px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.file-drop-area.drag-over {
    border-color: var(--accent-color, #007cba);
    background: var(--accent-light, #e6f3ff);
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 8px 30px rgba(0, 124, 186, 0.3);
}

.drop-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-color, #666);
}

.drop-icon {
    font-size: 2.5em;
    transition: transform 0.3s ease;
}

.file-drop-area.drag-over .drop-icon {
    transform: scale(1.2);
}

.drop-text {
    font-size: var(--font-size-md);
    font-weight: 500;
}

.drop-subtext {
    font-size: var(--font-size-xs);
    color: var(--muted-text, #888);
    margin-top: var(--spacing-xs);
}

.drag-target {
    outline: 2px dashed var(--accent-color, #007cba) !important;
    outline-offset: 2px;
    background: var(--accent-light, #e6f3ff) !important;
    transition: all 0.2s ease;
}

.drag-target.markdown-editor,
.drag-target.html-source-editor {
    box-shadow: inset 0 0 0 2px var(--accent-color, #007cba);
}

.drag-target.rich-editor-content {
    box-shadow: inset 0 0 0 2px var(--accent-color, #007cba);
    background: var(--accent-light, #e6f3ff) !important;
}

body.drag-active {
    cursor: copy !important;
}

body.drag-active * {
    pointer-events: none;
}

body.drag-active .file-drop-area,
body.drag-active .drag-target {
    pointer-events: all;
}

@keyframes dropSuccess {
    0% {
        transform: translate(-50%, -50%) scale(1.05);
        background: var(--success-light, #d4edda);
        border-color: var(--success-color, #28a745);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.1);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0;
    }
}

.file-drop-area.drop-success {
    animation: dropSuccess 0.5s ease-out forwards;
}

.editor-pane {
    border: 1px solid var(--light-border, #ddd);
    border-top: none;
    border-radius: 0 0 4px 4px;
    background: var(--bg-color, #fff);
}

/* Markdown Editor */
.markdown-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm);
    background: var(--light-bg, #f8f9fa);
    border-bottom: 1px solid var(--light-border, #ddd);
    align-items: center;
}

.md-btn:hover {
    background: var(--accent-light, #e6f3ff);
    border-color: var(--accent-color, #007cba);
}

.md-btn:active {
    background: var(--accent-color, #007cba);
    color: white;
}

.markdown-editor-container {
    display: flex;
    height: 500px;
    min-height: 500px;
}

.markdown-editor {
    flex: 1;
    border: none;
    padding: var(--spacing-md);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    resize: vertical;
    outline: none;
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
    width: 100%;
    min-height: 450px;
    box-sizing: border-box;
}

.markdown-preview {
    flex: 1;
    padding: var(--spacing-md);
    border-left: 1px solid var(--light-border, #ddd);
    overflow-y: auto;
    background: var(--bg-color, #fff);
}

.markdown-preview.split-view {
    display: block;
}

.markdown-editor {
    width: 100% !important;
    max-width: 100%;
    height: 450px !important;
    min-height: 450px !important;
    display: block !important;
    box-sizing: border-box !important;
}

.markdown-editor-container {
    width: 100% !important;
    display: flex !important;
    box-sizing: border-box !important;
}

.editor-pane {
    width: 100% !important;
    box-sizing: border-box !important;
}

#mainSection {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* HTML Source Editor */
.html-editor-toolbar {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    background: var(--light-bg, #f8f9fa);
    border-bottom: 1px solid var(--light-border, #ddd);
    align-items: center;
}

.html-btn {
    padding: var(--spacing-sm) 12px;
}

.html-btn:hover {
    background: var(--accent-light, #e6f3ff);
    border-color: var(--accent-color, #007cba);
}

.editor-info {
    color: var(--text-muted, #666);
    font-size: var(--font-size-xs);
    margin-left: auto;
}

.html-source-editor {
    width: 100% !important;
    height: 450px !important;
    min-height: 450px !important;
    border: none;
    padding: var(--spacing-md);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-sm);
    line-height: 1.5;
    resize: vertical;
    outline: none;
    background: var(--bg-color, #fff);
    color: var(--text-color, #333);
    box-sizing: border-box !important;
    display: block !important;
}

/* Markdown Content Styling */
.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    color: var(--text-color, #333);
}

.markdown-preview h1 { font-size: 1.8em; }
.markdown-preview h2 { font-size: 1.5em; }
.markdown-preview h3 { font-size: 1.3em; }
.markdown-preview h4 { font-size: 1.1em; }

.markdown-preview p {
    margin-bottom: 1em;
    line-height: 1.6;
}

.markdown-preview pre {
    background: var(--light-bg, #f8f9fa);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius-sm);
    padding: var(--spacing-md);
    overflow-x: auto;
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
}

.markdown-preview code {
    background: var(--light-bg, #f8f9fa);
    padding: 2px var(--spacing-xs);
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
}

.markdown-preview pre code {
    background: none;
    padding: 0;
}

.chord {
    background: var(--accent-light, #e6f3ff);
    color: var(--accent-color, #007cba);
    padding: 2px var(--spacing-sm);
    border-radius: 3px;
    font-weight: bold;
    font-size: 0.9em;
    border: 1px solid var(--accent-color, #007cba);
}

.guitar-tab {
    background: var(--light-bg, #f0f8ff);
    border: 1px solid var(--accent-color, #007cba);
    border-radius: var(--border-radius-sm);
    font-family: 'Courier New', monospace;
    font-size: var(--font-size-xs);
    line-height: 1.2;
}

.guitar-tab code {
    background: none;
    font-family: 'Courier New', monospace;
    color: var(--text-color, #333);
}

/* ===== Private Walls Management ===== */
.walls-list {
    margin-bottom: var(--spacing-md);
}

.wall-management-item {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: var(--spacing-sm);
    margin: var(--spacing-xs) 0;
    border: 1px solid var(--light-border, #e0e0e0);
    border-radius: var(--border-radius-md);
    background: var(--bg-color, white);
    gap: var(--spacing-sm);
}

.wall-management-item.local-wall {
    border-left: 4px solid var(--primary-color, #2196F3);
}

.wall-management-item.private-wall {
    border-left: 4px solid var(--warning-color, #ff6b6b);
}

.wall-info {
    flex: 1;
    min-width: 300px;
}

.wall-info-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wall-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
    flex-wrap: wrap;
    align-self: flex-start;
}

.wall-details {
    flex: 1;
}

.wall-info .enhanced-breadcrumbs {
    margin-bottom: var(--spacing-xs);
    padding: var(--spacing-xs) 8px;
    font-size: var(--font-size-xs);
    background: rgba(0, 0, 0, 0.05);
    border-radius: var(--border-radius-sm);
    width: 100%;
}

.wall-info .enhanced-breadcrumbs .breadcrumb-trail {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
}

.wall-info .enhanced-breadcrumbs .breadcrumb-separator {
    display: none;
}

.wall-info .enhanced-breadcrumbs .breadcrumb-item {
    font-size: var(--font-size-xs);
    padding: 2px var(--spacing-xs);
    white-space: nowrap;
    flex-shrink: 0;
}

.wall-info .enhanced-breadcrumbs .breadcrumb-text {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wall-title {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
    font-weight: bold;
    color: var(--text-color, #333);
}

.wall-status {
    display: inline-block;
    padding: 2px var(--spacing-sm);
    border-radius: 3px;
    font-size: calc(var(--font-size-xs) - 1px);
    font-weight: bold;
    text-transform: uppercase;
}

.wall-status.local {
    background: #2196F3;
    color: white;
}

.wall-status.private {
    background: var(--warning-color, #ff6b6b);
    color: white;
}

.wall-stats {
    margin-top: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-color, #666);
    background: transparent;
}

.wall-stats span {
    margin-right: var(--spacing-sm);
}

/* ===== Hierarchical My Content Section Styles ===== */
/* Styles for hierarchical content organization in Manage Content page */
/* Structure: Local Content → Ubercats (PRIVATE) → Metacats → Categories */
/* Badge System: "LOCAL ONLY" for local walls, "PRIVATE" for ubercat sections */

/* Individual wall item - simple display for hierarchical view */
.wall-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
    margin: var(--spacing-xs) 0;
    border: 1px solid var(--light-border, #e0e0e0);
    border-radius: var(--border-radius-sm);
    background: var(--bg-color, white);
    transition: background-color 0.2s ease;
}

.wall-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.wall-item .wall-title {
    flex: 1;
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 500;
    color: var(--link-color, #007bff);
    text-decoration: none;
    min-width: 0; /* Allow text truncation */
}

.wall-item .wall-title:hover {
    text-decoration: underline;
}

.wall-item .wall-id {
    font-size: var(--font-size-xs);
    color: var(--text-muted, #666);
    font-family: monospace;
    flex-shrink: 0;
}

/* Badge system for wall types */
.wall-badge {
    display: inline-block;
    padding: calc(var(--spacing-xs) / 2) var(--spacing-xs);
    border-radius: var(--border-radius-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.wall-badge-local {
    background-color: var(--warning-bg, #fff3cd);
    color: var(--warning-text, #856404);
}

.wall-badge-private {
    background-color: var(--info-bg, #cfe2ff);
    color: var(--info-text, #084298);
    margin-left: var(--spacing-xs);
}

/* Local Content Section */
.local-content-section {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius);
    background: var(--light-bg, #f9f9f9);
}

.local-content-header {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-inline: calc(-1 * var(--spacing-sm));
    border-radius: var(--border-radius-sm);
    /* Minimum touch target: 44px height */
    min-height: 44px;
}

.local-content-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.local-content-header:hover .section-toggle-caret {
    color: var(--primary-color, #007bff);
    transform: scale(1.1);
}

.local-content-header:focus-visible {
    outline: 2px solid var(--focus-color, #4D90FE);
    outline-offset: 2px;
}

.local-content-container {
    margin-top: var(--spacing-sm);
}

/* Visibility controlled by data-display attribute via JavaScript */
/* Uses global [data-display="false"] { display: none !important; } from mystyle.css */

/* Ubercat Section (top-level private content grouping) */
.ubercat-section {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius);
    background: var(--light-bg, #f9f9f9);
}

.ubercat-header {
    margin: 0 0 var(--spacing-sm) 0;
    font-size: var(--font-size-lg);
    color: var(--text-color, #333);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-inline: calc(-1 * var(--spacing-sm));
    border-radius: var(--border-radius-sm);
    /* Minimum touch target: 44px height */
    min-height: 44px;
}

.ubercat-header:hover {
    background-color: rgba(0, 0, 0, 0.03);
}

.ubercat-header:hover .section-toggle-caret {
    color: var(--primary-color, #007bff);
    transform: scale(1.1);
}

.ubercat-header:focus-visible {
    outline: 2px solid var(--focus-color, #4D90FE);
    outline-offset: 2px;
}

.ubercat-content-container {
    margin-top: var(--spacing-sm);
}

/* Metacat Subsection (nested within ubercats) */
.metacat-subsection {
    margin-bottom: var(--spacing-sm);
    margin-left: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-left: 3px solid var(--light-border, #ddd);
    background: var(--bg-color, white);
    border-radius: var(--border-radius-sm);
}

.metacat-header {
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-md);
    color: var(--text-color, #555);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin-inline: calc(-1 * var(--spacing-sm));
    border-radius: var(--border-radius-sm);
    /* Minimum touch target: 44px height */
    min-height: 44px;
}

.metacat-header:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.metacat-header:hover .section-toggle-caret {
    color: var(--primary-color, #007bff);
    transform: scale(1.1);
}

.metacat-header:focus-visible {
    outline: 2px solid var(--focus-color, #4D90FE);
    outline-offset: 2px;
}

.metacat-content-container {
    margin-top: var(--spacing-xs);
}

/* Direct category children (categories without metacat parent) rendered directly in ubercat */
.ubercat-content-container > .wall-item {
    margin-left: var(--spacing-md);
}

.wall-actions {
    display: flex;
    gap: var(--spacing-xs);
    align-items: center;
}

.no-walls-message,
.no-access-message,
.error-message {
    padding: var(--spacing-sm);
    text-align: center;
    font-style: italic;
    color: var(--text-color, #666);
    background: var(--light-bg, #f5f5f5);
    border-radius: var(--border-radius-sm);
}

.error-message {
    color: var(--error-text, #f44336);
    background: var(--error-bg, #ffebee);
}

/* ===== EDITING OVERLAY INTERFACE ===== */

.editing-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1001;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.editing-overlay-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    z-index: 1;
}

.editing-overlay-content {
    max-width: clamp(320px, 90vw, 900px);
    max-height: clamp(400px, 90vh, 700px);
    display: flex;
    flex-direction: column;
}

.editing-overlay-header {
    justify-content: space-between;
}

.editing-overlay-title {
    margin: 0;
    font-size: var(--font-size-lg, 20px);
    font-weight: 600;
    color: var(--text-color, #333);
}

.editing-overlay-subtitle {
    font-size: var(--font-size-sm, 14px);
    color: var(--color-secondary, #666);
    margin-top: var(--spacing-xs, 4px);
}

.editing-overlay-editing-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg, 20px);
}

.editing-overlay-header-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm, 10px);
}

.editing-overlay-section {
    margin-bottom: var(--spacing-xl, 32px);
    padding: var(--spacing-lg);
    background: var(--light-bg);
    border: 1px solid var(--light-border);
    border-radius: var(--border-radius-md);
}

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

.editing-overlay-section-label {
    margin: 0 0 var(--spacing-md, 16px) 0;
    font-size: var(--font-size-md, 16px);
    font-weight: 600;
    color: var(--text-color, #333);
    border-bottom: 2px solid var(--color-primary, #007bff);
    padding-bottom: var(--spacing-xs, 6px);
}

.editing-overlay-no-content {
    text-align: center;
    padding: var(--spacing-xxl, 40px);
    color: var(--color-secondary, #666);
    font-style: italic;
}

.editing-overlay-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm, 12px);
}

.editing-overlay-status {
    font-size: var(--font-size-sm, 14px);
    font-weight: 500;
}

.editing-overlay-status.editing-overlay-status-info {
    color: var(--color-info, #007bff);
}

.editing-overlay-status.editing-overlay-status-success {
    color: var(--color-success, #28a745);
}

.editing-overlay-status.editing-overlay-status-error {
    color: var(--color-danger, #dc3545);
}

.save-controls-row {
    display: flex;
    gap: var(--spacing-sm, 12px);
    align-items: center;
    justify-content: flex-start;
}

.save-controls-status {
    font-size: var(--font-size-sm, 0.875rem);
    padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
    border-radius: var(--border-radius, 4px);
    margin-bottom: var(--spacing-sm, 12px);
    text-align: center;
}

.save-controls-status.status-info {
    background-color: var(--light-bg, #f8f9fa);
    color: var(--text-color, #333);
    border: 1px solid var(--light-border, #dee2e6);
}

.save-controls-status.status-success {
    background-color: rgba(76, 175, 80, 0.1);
    color: var(--color-success, #4CAF50);
    border: 1px solid var(--color-success, #4CAF50);
}

.save-controls-status.status-error {
    background-color: rgba(220, 53, 69, 0.1);
    color: var(--color-danger, #dc3545);
    border: 1px solid var(--color-danger, #dc3545);
}

.editing-overlay-dry-run-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 8px);
    margin-right: auto;
}

.editing-overlay-dry-run-checkbox {
    width: 1rem;
    height: 1rem;
    accent-color: var(--primary-color, #007bff);
    cursor: pointer;
}

.editing-overlay-dry-run-label {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-neutral);
    cursor: pointer;
    user-select: none;
    margin: 0;
}

.editing-overlay-cancel {
    min-width: 100px;
}

.editing-overlay-save {
    background: var(--color-success, #28a745);
    color: white;
    border: none;
    min-width: 120px;
}

.editing-overlay-save:hover {
    background: var(--color-success-dark, #218838);
}

.editing-overlay-save:disabled {
    background: var(--button-disabled, #ccc);
    cursor: not-allowed;
}

/* ===== TEXT EDITOR COMPONENT STYLES ===== */

.text-editor-container {
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 8px);
    background: var(--bg-color, #ffffff);
    overflow: hidden;
}

.text-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    padding: var(--spacing-sm, 8px);
    gap: var(--spacing-xs, 4px);
    background: var(--light-bg, #f5f5f5);
    border-bottom: 1px solid var(--light-border, #ddd);
}

.text-editor-toolbar-btn {
    min-width: 32px;
    height: 32px;
    font-weight: 600;
}

.text-editor-toolbar-btn:active,
.text-editor-toolbar-btn.text-editor-btn-active {
    background: var(--color-primary, #007bff);
    color: white;
    transform: scale(0.95);
}

.text-editor-content {
    min-height: clamp(120px, 20vh, 200px);
    padding: var(--spacing-md, 16px);
    outline: none;
    font-size: var(--font-size-md, 16px);
    line-height: 1.6;
    color: var(--text-color, #333);
    background: var(--bg-color, #ffffff);
    overflow-y: auto;
}

.text-editor-content[contenteditable="true"]:focus {
    background: var(--bg-color, #ffffff);
    box-shadow: inset 0 0 0 2px var(--focus-color, #4D90FE);
}

.text-editor-content.text-editor-empty::before {
    content: attr(data-placeholder);
    color: var(--color-secondary, #999);
    font-style: italic;
    pointer-events: none;
}

.text-editor-content.text-editor-empty:focus::before {
    display: none;
}

/* ===== IMAGE EDITOR COMPONENT STYLES ===== */

.image-editor-container {
    border: 1px solid var(--light-border, #ddd);
    border-radius: var(--border-radius, 8px);
    background: var(--bg-color, #ffffff);
    overflow: hidden;
}

.image-editor-preview-section {
    padding: var(--spacing-md, 16px);
    border-bottom: 1px solid var(--light-border, #ddd);
}

.image-editor-label {
    font-weight: 600;
    font-size: var(--font-size-sm, 14px);
    margin-bottom: var(--spacing-sm, 8px);
    color: var(--text-color, #333);
}

.image-editor-preview-container {
    border: 2px dashed var(--light-border, #ddd);
    border-radius: var(--border-radius, 8px);
    padding: var(--spacing-md, 16px);
    text-align: center;
    background: var(--light-bg, #f9f9f9);
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-editor-preview {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.image-editor-placeholder {
    color: var(--color-secondary, #666);
    font-style: italic;
    font-size: var(--font-size-sm, 14px);
}

.image-editor-error {
    color: var(--color-danger, #dc3545);
    font-size: var(--font-size-sm, 14px);
}

.image-editor-upload-section {
    padding: var(--spacing-md, 16px);
    border-bottom: 1px solid var(--light-border, #ddd);
}

.image-editor-upload-area {
    border: 2px dashed var(--light-border, #ddd);
    border-radius: var(--border-radius, 8px);
    padding: var(--spacing-lg, 24px);
    text-align: center;
    background: var(--light-bg, #f9f9f9);
    transition: all var(--transition-speed, 0.2s) ease;
    cursor: pointer;
}

.image-editor-upload-area:hover,
.image-editor-upload-area.image-editor-drag-over {
    border-color: var(--color-primary, #007bff);
    background: var(--color-primary-light, #e3f2fd);
    transform: scale(1.02);
}

.image-editor-upload-info {
    margin-top: var(--spacing-sm, 12px);
}

.image-editor-upload-info > div:first-child {
    font-size: var(--font-size-sm, 14px);
    color: var(--text-color, #333);
    margin-bottom: var(--spacing-xs, 6px);
}

.image-editor-upload-limits {
    font-size: var(--font-size-xs, 12px);
    color: var(--color-secondary, #666);
}

.image-editor-file-input {
    display: none;
}

.image-editor-url-section {
    padding: var(--spacing-md, 16px);
}

.image-editor-url-container {
    display: flex;
    gap: var(--spacing-sm, 8px);
    align-items: center;
}

.image-editor-url-input {
    flex: 1;
}

/* ===== QUIZ CONTEXT EDIT LINKS ===== */

.quiz-edit-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-xs);
    font-size: var(--font-size-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--color-background-secondary);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--border-radius-sm);
    color: var(--color-text-secondary);
    transition: all 0.2s ease;
}

.quiz-edit-link:hover {
    background-color: var(--color-background-tertiary);
    border-color: var(--color-border-primary);
    color: var(--color-text-primary);
    transform: translateY(-1px);
}

.quiz-breadcrumb .quiz-edit-link {
    align-self: center;
    margin-top: 0;
    margin-bottom: 0;
}

.assessment-container .quiz-edit-link {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent);
}

.assessment-container .quiz-edit-link:hover {
    background-color: var(--color-accent);
    color: var(--color-text-inverse);
}

.quiz-edit-button {
    min-height: auto;
}

.quiz-edit-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.quiz-edit-icon svg {
    width: 100%;
    height: 100%;
}

.quiz-edit-dropdown {
    position: relative;
    display: inline-block;
}

.quiz-edit-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--color-background-primary);
    border: 1px solid var(--color-border-primary);
    border-radius: var(--border-radius-sm);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all 0.2s ease;
}

.quiz-edit-dropdown-menu.edit-dropdown-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.quiz-edit-dropdown-item {
    display: block;
    width: 100%;
    padding: var(--spacing-sm);
    border: none;
    background: none;
    text-align: left;
    color: var(--color-text-primary);
    transition: background-color 0.2s ease;
}

.quiz-edit-dropdown-item:hover {
    background-color: var(--color-background-secondary);
}

.quiz-edit-dropdown-item .edit-mode-label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
}

.quiz-edit-dropdown-item .edit-mode-description {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.quiz-button-container .quiz-edit-link {
    margin-left: var(--spacing-sm);
    order: -1;
}

.quiz-edit-link {
    pointer-events: auto;
    z-index: 10;
}

.quiz-container.transitioning .quiz-edit-link {
    opacity: 0.5;
    pointer-events: none;
}

.json-editor-container {
    flex: 1;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

/* ===== Server Report Styles (Dry Run & Save Reports) ===== */

.dry-run-report {
    position: relative;
    background: var(--bg-color);
    border: 1px solid var(--color-success);
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
}

.dry-run-report h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-success);
}

.dry-run-report p {
    margin: clamp(3px, 1vw, var(--spacing-xs)) 0;
    color: var(--text-color);
}

.dry-run-report strong {
    color: var(--text-color);
}

.close-report-btn {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background: none;
    border: none;
    font-size: var(--font-size-lg);
    cursor: pointer;
    color: var(--color-neutral);
    font-weight: bold;
}

.close-report-btn:hover {
    color: var(--color-neutral-dark);
}

.toggle-details-btn {
    cursor: pointer;
    font-weight: bold;
    color: var(--text-color);
    background: none;
    border: none;
    text-decoration: underline;
    padding: 0;
}

.toggle-details-btn:hover {
    opacity: 0.8;
}

.details-content {
    margin-top: var(--spacing-sm);
    max-height: 300px;
    overflow-y: auto;
}

.report-type-group {
    margin: var(--spacing-sm) 0;
    padding: var(--spacing-xs);
    background: var(--bg-color);
    border-left: 4px solid;
    border-radius: var(--border-radius);
}

.report-type-group h5 {
    margin: 0 0 var(--spacing-xs) 0;
    text-transform: capitalize;
}

.report-item {
    margin: clamp(3px, 1vw, var(--spacing-xs)) 0;
    padding: var(--spacing-xs);
    background: var(--bg-color);
    border-radius: 3px;
    border-left: 3px solid;
    font-size: var(--font-size-sm);
}

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

.report-item-header strong {
    color: var(--text-color);
}

.report-item-details {
    margin-top: var(--spacing-xs);
}

.report-item-meta {
    font-size: var(--font-size-xs);
}

.server-metadata {
    margin: clamp(3px, 1vw, var(--spacing-xs)) 0;
    font-size: var(--font-size-xs);
}

.report-footer-note {
    margin: var(--spacing-sm) 0 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-secondary);
    font-style: italic;
}

.validation-report {
    position: relative;
    background: var(--bg-color);
    border: 1px solid #f44336;
    border-radius: var(--border-radius);
    padding: var(--spacing-md);
    margin: var(--spacing-sm) 0;
}

.validation-report h4 {
    margin: 0 0 var(--spacing-sm) 0;
    color: var(--color-danger);
}

.validation-report p {
    margin: clamp(3px, 1vw, var(--spacing-xs)) 0;
    color: var(--text-color);
}

.validation-report strong {
    color: var(--text-color);
}

.report-type-category { border-color: var(--color-success); }
.report-type-lesson { border-color: var(--color-info); }
.report-type-activity { border-color: var(--color-warning); }
.report-type-page { border-color: var(--color-primary); }
.report-type-metacat { border-color: var(--color-secondary); }

.report-action-create { border-color: var(--color-success); }
.report-action-update { border-color: var(--button-primary); }
.report-action-unknown { border-color: var(--color-secondary); }

.report-type-category h5 { color: var(--color-success); }
.report-type-lesson h5 { color: var(--color-info); }
.report-type-activity h5 { color: var(--color-warning); }
.report-type-page h5 { color: var(--color-primary); }
.report-type-metacat h5 { color: var(--color-secondary); }

.report-action-create .action-badge { color: var(--color-success); }
.report-action-update .action-badge { color: var(--button-primary); }
.report-action-unknown .action-badge { color: var(--color-secondary); }

.action-badge {
    font-weight: bold;
    font-size: var(--font-size-xs);
}

.summary-type-category { color: var(--color-success); font-weight: bold; }
.summary-type-lesson { color: var(--color-info); font-weight: bold; }
.summary-type-activity { color: var(--color-warning); font-weight: bold; }
.summary-type-page { color: var(--color-primary); font-weight: bold; }
.summary-type-metacat { color: var(--color-secondary); font-weight: bold; }

.report-additional-info {
    color: var(--color-secondary);
    font-size: var(--font-size-xs);
}

/* ===== PAGE EDITOR DARK MODE ===== */

/* ===== QUIZ WORKFLOW STYLES (MERGED FROM editor-quiz-styles.css - Phase 3) ===== */
/* Quiz editing workflows extending shared editor component classes */

.quiz-workflow-toggle {
    margin-inline-start: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    padding: clamp(var(--spacing-sm), 1.5vw, 8px) clamp(12px, 2.5vw, 16px);
    background-color: var(--light-bg, #f0f8ff);
    border: 1px solid var(--primary-color, #4D90FE);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-sm);
}

.quiz-workflow-toggle label {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    color: var(--primary-color, #4D90FE);
    font-size: var(--font-size-sm);
}

.quiz-workflow-toggle input[type="checkbox"] {
    margin: 0;
    transform: scale(1.1);
}

.quiz-workflow-section {
    background: linear-gradient(135deg, var(--light-bg, #f8f9fa), var(--bg-color, #ffffff));
    border: 2px solid var(--primary-color, #4D90FE);
    border-radius: clamp(6px, 1vw, 8px);
    padding: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    margin-bottom: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    box-shadow: 0 2px 8px color-mix(in srgb, var(--focus-color) 10%, transparent);
}

.quiz-workflow-section h4 {
    margin-block-start: 0;
    margin-block-end: clamp(var(--spacing-sm, 8px), 2.5vw, var(--spacing-md, 16px));
    color: var(--primary-color, #4D90FE);
    font-size: var(--font-size-lg);
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
}

.quiz-workflow-section h4::before {
    content: "🚀";
    font-size: var(--font-size-lg);
}

.quiz-workflow-section h5 {
    margin-block-start: clamp(var(--spacing-sm, 8px), 2.5vw, var(--spacing-md, 16px));
    margin-block-end: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 12px));
    color: var(--text-color, #333333);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.parent-activity-section {
}

.activity-input-group {
    display: flex;
    flex-direction: column;
    gap: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 12px));
    margin-bottom: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 12px));
}

.activity-input-divider {
    text-align: center;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-color, #666666);
    padding: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px)) 0;
    position: relative;
}

.activity-input-divider::before,
.activity-input-divider::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    width: 40%;
    height: 1px;
    background-color: var(--light-border, #ddd);
}

.activity-input-divider::before {
    inset-inline-start: 0;
}

.activity-input-divider::after {
    inset-inline-end: 0;
}

.parent-activity-section select,
.activity-id-input {
    width: 100%;
    font-size: var(--font-size-sm);
}

.activity-id-input::placeholder {
    color: var(--text-muted, #999999);
    font-style: italic;
}

.parent-activity-section label {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--text-color, #333333);
}

.parent-activity-section input[type="checkbox"] {
    margin: 0;
    transform: scale(1.1);
}

.deployment-section {
}

.deployment-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(150px, 30vw, 200px), 1fr));
    gap: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 12px));
    margin-block-start: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 12px));
}

.deployment-options label {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    cursor: pointer;
    padding: clamp(var(--spacing-sm), 1.5vw, 8px) clamp(8px, 2vw, 12px);
    background-color: var(--light-bg, #f8f9fa);
    border: 1px solid var(--light-border, #e9ecef);
    border-radius: var(--border-radius, 4px);
    font-size: var(--font-size-sm);
    transition: all 0.2s ease;
    min-height: clamp(40px, 8vw, 44px);
}

.deployment-options label:hover {
    background-color: var(--hover-bg, #e9ecef);
    border-color: var(--primary-color, #4D90FE);
}

.deployment-options input[type="checkbox"] {
    margin: 0;
    transform: scale(1.1);
    accent-color: var(--primary-color, #4D90FE);
}

.deployment-options input[type="checkbox"]:checked+* {
    color: var(--primary-color, #4D90FE);
    font-weight: 500;
}

.quiz-actions-section {
    background: linear-gradient(135deg, var(--success-bg, #d4edda), var(--bg-color, #ffffff));
    border: 2px solid var(--success-border, #c3e6cb);
    border-radius: clamp(6px, 1vw, 8px);
    padding: clamp(var(--spacing-md, 12px), 3vw, var(--spacing-lg, 20px));
    margin-block-start: clamp(var(--spacing-lg, 16px), 4vw, var(--spacing-xl, 24px));
    text-align: center;
}

.quiz-actions-section button {
    margin: 0 clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    font-size: var(--font-size-sm);
    font-weight: 600;
    min-width: clamp(120px, 25vw, 160px);
}

.quiz-actions-section .primary {
    background: linear-gradient(135deg, var(--primary-color, #4D90FE), #357AE8);
    color: white;
    border: none;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--focus-color) 30%, transparent);
}

.quiz-actions-section .primary:hover {
    background: linear-gradient(135deg, var(--button-primary), #2563eb);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--focus-color) 40%, transparent);
}

.quiz-actions-section .action-button:not(.primary) {
    background-color: var(--bg-color, #ffffff);
    color: var(--primary-color, #4D90FE);
    border: 2px solid var(--primary-color, #4D90FE);
}

.quiz-actions-section .action-button:not(.primary):hover {
    background-color: var(--primary-color, #4D90FE);
    color: white;
    transform: translateY(-1px);
}

.quiz-report {
    border-left: 4px solid var(--primary-color, #4D90FE);
}

.quiz-results-section {
    background-color: var(--light-bg, #f8f9fa);
    border: 1px solid var(--light-border, #e9ecef);
    border-radius: clamp(4px, 0.8vw, 6px);
    padding: clamp(var(--spacing-sm, 8px), 2.5vw, var(--spacing-md, 16px));
    margin-bottom: clamp(var(--spacing-sm, 8px), 2.5vw, var(--spacing-md, 16px));
}

.quiz-results-section h4 {
    margin-block-start: 0;
    margin-block-end: clamp(var(--spacing-xs, 4px), 2vw, var(--spacing-sm, 12px));
    color: var(--primary-color, #4D90FE);
    font-size: var(--font-size-sm);
    border-block-end: 1px solid var(--light-border, #e9ecef);
    padding-block-end: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
}

.result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: clamp(var(--spacing-xs), 1vw, 6px) 0;
    border-block-end: 1px solid var(--light-border, #f0f0f0);
}

.result-item:last-child {
    border-block-end: none;
}

.result-label {
    font-weight: 600;
    color: var(--text-color, #333333);
    font-size: var(--font-size-sm);
}

.result-value {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    background-color: var(--bg-color, #ffffff);
    padding: clamp(1px, 0.5vw, 2px) clamp(var(--spacing-xs), 1vw, 6px);
    border-radius: clamp(2px, 0.5vw, 3px);
    border: 1px solid var(--light-border, #ddd);
    font-size: var(--font-size-xs);
}

.result-value.success {
    color: var(--success-text, #155724);
    background-color: var(--success-bg, #d4edda);
    border-color: var(--success-border, #c3e6cb);
}

.deployment-result {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    padding: clamp(var(--spacing-sm), 1.5vw, 8px) clamp(8px, 2vw, 12px);
    background-color: var(--bg-color, #ffffff);
    border: 1px solid var(--light-border, #e9ecef);
    border-radius: var(--border-radius, 4px);
    margin-bottom: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    font-size: var(--font-size-sm);
}

.deployment-result:last-child {
    margin-bottom: 0;
}

.error-list {
    background-color: var(--error-bg, #f8d7da);
    border: 1px solid var(--error-border, #f5c6cb);
    border-radius: clamp(4px, 0.8vw, 6px);
    padding: clamp(var(--spacing-sm, 8px), 2.5vw, var(--spacing-md, 16px));
}

.error-item {
    display: flex;
    align-items: center;
    gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    padding: clamp(var(--spacing-xs), 1vw, 6px) 0;
    color: var(--error-text, #721c24);
}

.error-icon {
    font-size: var(--font-size-sm);
    flex-shrink: 0;
}

.error-text {
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.quiz-edit-link-button-row {
    margin-right: var(--spacing-sm, 12px);
    order: -1;
}

.quiz-edit-link-button-row .edit-page-link {
    font-size: var(--font-size-sm, 14px);
    padding: var(--spacing-xs, 8px) var(--spacing-sm, 12px);
    border-radius: var(--border-radius, 6px);
    background-color: var(--color-background-tertiary, #f8f9fa);
    border: 1px solid var(--color-border-subtle, #dee2e6);
    color: var(--color-text-secondary, #6c757d);
    transition: all 0.2s ease;
}

.quiz-edit-link-button-row .edit-page-link:hover {
    background-color: var(--color-background-secondary, #e9ecef);
    border-color: var(--color-border-primary, #ced4da);
    color: var(--color-text-primary, #212529);
    transform: translateY(-1px);
}

.quiz-edit-link-button-row .edit-dropdown-menu {
    z-index: 1000;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--spacing-xs, 4px);
    min-width: 200px;
    max-width: 300px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border-primary, #ced4da);
    background-color: var(--color-background, #ffffff);
    border-radius: var(--border-radius, 6px);
}

.quiz-edit-link-button-row .edit-dropdown-menu.edit-dropdown-open {
    display: block;
    z-index: 1001;
}

.button-row .quiz-edit-link-button-row {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* ===== QUIZ EDITOR DARK MODE ===== */


/* ============================================================================== */
/* DARK MODE OVERRIDES (CONSOLIDATED - Phase 4)                                */
/* All dark mode theme overrides consolidated in this section                  */
/* ============================================================================== */

/* ----- Editor Base Classes ----- */

[data-theme="dark"] .editor-input-base,

[data-theme="dark"] .editor-button-base {
    background-color: var(--bg-color);
    border-color: var(--light-border);
    color: var(--text-color);
}

[data-theme="dark"] .editor-input-base:hover:not(:disabled):not(:focus),

[data-theme="dark"] .editor-button-base:hover {
    border-color: var(--primary-color);
    background-color: var(--light-bg);
}

[data-theme="dark"] .editor-input-base:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 10%, transparent);
}

[data-theme="dark"] .editor-section-base {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .editor-section-base h3:hover,

/* ----- Tabs and Navigation ----- */

[data-theme="dark"] .tab {
    background-color: var(--color-neutral-dark);
    border-color: var(--header-bg);
}

[data-theme="dark"] .tab button {
    color: var(--text-color);
}

[data-theme="dark"] .tab button:hover {
    background-color: var(--header-bg);
}

[data-theme="dark"] .tab button.active {
    background-color: var(--bg-color);
    border-bottom-color: var(--primary-color);
}

[data-theme="dark"] .test-page-header {
    background-color: var(--light-bg, #333333);
    border-color: var(--light-border, #444444);
}

[data-theme="dark"] .test-controls,

[data-theme="dark"] .test-fit-score {
    background-color: var(--light-bg, #333333);
    border-color: var(--light-border, #444444);
}

[data-theme="dark"] #test-viewport-fit-button.active {
    background-color: var(--primary-color);
    color: white;
}

/* ----- Form Inputs and Controls ----- */

[data-theme="dark"] input,

[data-theme="dark"] select,

[data-theme="dark"] textarea {
    background-color: var(--color-neutral-dark);
    color: var(--text-color);
    border-color: var(--toggle-bg);
}

[data-theme="dark"] input:focus,

[data-theme="dark"] select:focus,

[data-theme="dark"] textarea:focus {
    border-color: var(--focus-color);
    outline-color: var(--focus-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--focus-color) 30%, transparent);
}

[data-theme="dark"] input::placeholder,

[data-theme="dark"] textarea::placeholder {
    color: var(--color-neutral);
}

[data-theme="dark"] select {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5em center;
    background-size: 1.5em;
    padding-right: 2em;
    appearance: none;
}

[data-theme="dark"] input:hover:not(:disabled):not(:focus),

[data-theme="dark"] select:hover:not(:disabled):not(:focus),

[data-theme="dark"] textarea:hover:not(:disabled):not(:focus) {
    border-color: var(--color-neutral);
}

[data-theme="dark"] input:disabled,

[data-theme="dark"] select:disabled,

[data-theme="dark"] textarea:disabled {
    background-color: var(--light-bg);
    color: var(--color-neutral);
    border-color: var(--header-bg);
    opacity: 0.7;
}

[data-theme="dark"] input[type="checkbox"],

[data-theme="dark"] input[type="radio"] {
    accent-color: var(--focus-color);
}

[data-theme="dark"] .CodeMirror-selected {
    background-color: color-mix(in srgb, var(--focus-color) 30%, transparent);
}

[data-theme="dark"] .video-action-selection,

[data-theme="dark"] .checkbox-container.sub-checkbox {
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] .answer-option {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .answer-option:hover {
    background-color: var(--hover-bg);
}

[data-theme="dark"] .answer-option.selected {
    border-color: var(--primary-color);
    background-color: color-mix(in srgb, var(--focus-color) 10%, transparent);
}

[data-theme="dark"] .image-editor-url-input {
    background: var(--bg-color, #1a1a1a);
    border-color: var(--light-border, #444);
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] .image-editor-url-input:focus {
    border-color: var(--focus-color, #4a90e2);
    box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

[data-theme="dark"] .parent-activity-section select,

[data-theme="dark"] .activity-id-input {
    background-color: var(--bg-color);
    border-color: var(--light-border);
    color: var(--text-color);
}

[data-theme="dark"] .activity-id-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus-color) 10%, transparent);
}

[data-theme="dark"] .activity-id-input::placeholder {
    color: var(--text-muted);
}

[data-theme="dark"] .activity-input-divider {
    color: var(--text-color);
}

[data-theme="dark"] .activity-input-divider::before,

[data-theme="dark"] .activity-input-divider::after {
    background-color: var(--light-border);
}

/* ----- Buttons and Action Controls ----- */

[data-theme="dark"] .spinner {
    border-color: var(--toggle-bg);
    border-top-color: var(--text-color);
}

[data-theme="dark"] .report-close-btn {
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .report-close-btn:hover {
    background: var(--light-bg-dark, #2a2a2a);
}

[data-theme="dark"] .md-btn,

[data-theme="dark"] .html-btn {
    background: var(--dark-bg, #1a202c);
    border-color: var(--dark-border, #4a5568);
    color: var(--dark-text, #e2e8f0);
}

[data-theme="dark"] .md-btn:hover,

[data-theme="dark"] .html-btn:hover {
    background: var(--dark-accent-light, #2d5a87);
    border-color: var(--dark-accent, #4a90e2);
}

[data-theme="dark"] .close-report-btn {
    color: var(--color-neutral-light);
}

[data-theme="dark"] .close-report-btn:hover {
    color: var(--button-disabled);
}

[data-theme="dark"] .quiz-actions-section .action-button:not(.primary) {
    background-color: var(--bg-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

[data-theme="dark"] .quiz-edit-link-button-row .edit-page-link {
    background-color: var(--color-dark-background-tertiary, #495057);
    border-color: var(--color-dark-border-subtle, #6c757d);
    color: var(--color-dark-text-secondary, #adb5bd);
}

[data-theme="dark"] .quiz-edit-link-button-row .edit-page-link:hover {
    background-color: var(--color-dark-background-secondary, #6c757d);
    border-color: var(--color-dark-border-primary, #adb5bd);
    color: var(--color-dark-text-primary, #f8f9fa);
}

[data-theme="dark"] .quiz-edit-link-button-row .edit-dropdown-menu {
    background-color: var(--color-dark-background, #212529);
    border-color: var(--color-dark-border-primary, #495057);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ----- Toolbars and Editor Controls ----- */

[data-theme="dark"] .rich-editor-toolbar {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .rich-editor-toolbar .separator {
    background-color: var(--light-border);
}

[data-theme="dark"] .editor-toolbar {
    background-color: var(--light-bg);
    border-color: var(--light-border);
    color: var(--text-color);
}

[data-theme="dark"] .markdown-toolbar,

[data-theme="dark"] .html-editor-toolbar {
    background: var(--dark-bg-secondary, #2d3748);
    border-color: var(--dark-border, #4a5568);
}

[data-theme="dark"] .text-editor-toolbar {
    background: var(--light-bg, #2d2d2d);
    border-color: var(--light-border, #444);
}

/* ----- CodeMirror Editor ----- */

[data-theme="dark"] .CodeMirror {
    background-color: var(--color-neutral-dark);
    color: var(--text-color);
    border: 1px solid #555;
}

[data-theme="dark"] .CodeMirror-gutters {
    background-color: var(--light-bg);
    border-right: 1px solid #444;
}

[data-theme="dark"] .CodeMirror-linenumber {
    color: var(--color-neutral);
}

[data-theme="dark"] .CodeMirror-cursor {
    border-left: 1px solid #e0e0e0;
}

/* ----- Overlays and Modals ----- */

[data-theme="dark"] .editing-overlay-content {
    background: var(--color-neutral-dark);
}

[data-theme="dark"] .editing-overlay-footer {
    background: var(--header-bg);
    border-color: var(--color-neutral);
}

[data-theme="dark"] .editing-overlay-header,

[data-theme="dark"] .editing-overlay-title {
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] .editing-overlay-subtitle {
    color: var(--color-secondary, #aaa);
}

[data-theme="dark"] .editing-overlay-section-label {
    color: var(--text-color, #e0e0e0);
    border-bottom-color: var(--color-primary, #4a90e2);
}

[data-theme="dark"] .editing-overlay-section {
    background: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .editing-overlay-no-content {
    color: var(--color-secondary, #aaa);
}

[data-theme="dark"] .editing-overlay-dry-run-label {
    color: var(--color-secondary, #aaa);
}

/* ----- Reports and Validation ----- */

[data-theme="dark"] .json-validation-section {
    background: var(--header-bg);
    border-color: var(--color-neutral);
}

[data-theme="dark"] .validation-result.validation-success {
    background-color: rgba(40, 167, 69, 0.15);
}

[data-theme="dark"] .validation-result.validation-error {
    background-color: rgba(220, 53, 69, 0.15);
}

[data-theme="dark"] .change-report-section {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .change-report-form-container,

[data-theme="dark"] .change-report-results-container {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .change-report-summary {
    background-color: var(--light-bg);
    color: var(--text-color);
}

[data-theme="dark"] .change-report-pagination {
    border-color: var(--light-border);
}

[data-theme="dark"] .change-report-section .error-message {
    background-color: var(--error-bg, #422);
    border-color: var(--error-border, #633);
    color: var(--error-text, #faa);
}

[data-theme="dark"] .report-container {
    background: var(--bg-dark, #1e1e1e);
    border-color: var(--border-dark, #444);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .report-container.server-report {
    border-left-color: var(--success-color-dark, #4caf50);
    background: var(--success-bg-dark, #1a2e1f);
}

[data-theme="dark"] .report-container.validation-report {
    border-left-color: var(--error-color-dark, #f44336);
    background: var(--error-bg-dark, #2e1a1a);
}

[data-theme="dark"] .report-container.simple-report {
    border-left-color: var(--accent-color-dark, #4a9eff);
    background: var(--info-bg-dark, #1a2330);
}

[data-theme="dark"] .report-container.error-report {
    border-left-color: var(--warning-color-dark, #ffa726);
    background: var(--warning-bg-dark, #2e2a1a);
}

[data-theme="dark"] .report-title {
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .report-summary {
    background: var(--bg-dark-secondary, #2a2a2a);
    border-color: var(--border-dark, #444);
}

[data-theme="dark"] .report-summary p,

[data-theme="dark"] .report-summary strong {
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .report-metadata {
    background: var(--bg-dark-secondary, #2a2a2a);
    border-color: var(--border-dark, #444);
}

[data-theme="dark"] .report-metadata p {
    color: var(--text-muted-dark, #999);
}

[data-theme="dark"] .report-details-content {
    background: var(--bg-dark-secondary, #2a2a2a);
    border-color: var(--border-dark, #444);
}

[data-theme="dark"] .report-group-title {
    color: var(--text-dark, #e0e0e0);
    border-bottom-color: var(--border-dark, #444);
}

[data-theme="dark"] .report-item {
    background: var(--bg-dark, #1e1e1e);
    border-left-color: var(--accent-color-dark, #4a9eff);
}

[data-theme="dark"] .report-item-title {
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .report-item-description {
    color: var(--text-muted-dark, #999);
}

[data-theme="dark"] .report-item-change-label {
    color: var(--text-muted-dark, #999);
}

[data-theme="dark"] .report-item-change-value {
    color: var(--text-dark, #e0e0e0);
}

[data-theme="dark"] .report-item.validation-error {
    border-left-color: var(--error-color-dark, #f44336);
    background: var(--error-bg-dark-light, #2e1a1a);
}

[data-theme="dark"] .report-item.validation-error .report-item-title {
    color: var(--error-color-dark, #f44336);
}

[data-theme="dark"] .report-footer-note {
    border-top-color: var(--border-dark, #444);
    color: var(--text-muted-dark, #999);
}

[data-theme="dark"] .report-empty-state {
    color: var(--text-muted-dark, #999);
}

[data-theme="dark"] .report-group-toggle {
    background: var(--bg-dark-secondary, #2a2a2a);
    color: var(--text-dark, #e0e0e0);
    border-color: var(--border-dark, #444);
}

[data-theme="dark"] .report-group-toggle:hover {
    background: var(--bg-dark, #1e1e1e);
    border-color: var(--accent-color-dark, #4a9eff);
}

[data-theme="dark"] .report-group-items {
    border-left-color: var(--border-dark, #444);
}

[data-theme="dark"] .dry-run-report {
    background: var(--bg-color);
    border-color: var(--color-success);
}

[data-theme="dark"] .dry-run-report h4 {
    color: var(--color-success);
}

[data-theme="dark"] .validation-report {
    background: var(--bg-color);
    border-color: var(--color-danger);
}

[data-theme="dark"] .validation-report h4 {
    color: var(--color-danger);
}

[data-theme="dark"] .report-type-group {
    background: var(--light-bg);
}

[data-theme="dark"] .report-type-category,

[data-theme="dark"] .report-type-category h5,

[data-theme="dark"] .report-type-lesson,

[data-theme="dark"] .report-type-lesson h5,

[data-theme="dark"] .report-type-activity,

[data-theme="dark"] .report-type-activity h5,

[data-theme="dark"] .report-type-page,

[data-theme="dark"] .report-type-page h5,

[data-theme="dark"] .report-type-metacat,

[data-theme="dark"] .report-type-metacat h5,

[data-theme="dark"] .report-action-create,

[data-theme="dark"] .report-action-create .action-badge { color: var(--color-success); border-color: var(--color-success); }

[data-theme="dark"] .report-action-update,

[data-theme="dark"] .report-action-update .action-badge { color: var(--color-info); border-color: var(--color-info); }

[data-theme="dark"] .report-action-unknown,

[data-theme="dark"] .report-action-unknown .action-badge { color: var(--color-neutral-light); border-color: var(--color-neutral-light); }

[data-theme="dark"] .report-additional-info {
    color: var(--color-neutral-light);
}

/* ----- Page Editor Components ----- */

[data-theme="dark"] .image-editor-uploading {
    color: var(--accent-color, #4a9eff);
}

[data-theme="dark"] .image-editor-uploading::before {
    border-color: var(--accent-color, #4a9eff);
    border-top-color: transparent;
}

[data-theme="dark"] .rich-editor-container,

[data-theme="dark"] .rich-editor-content {
    background-color: var(--light-bg);
    color: var(--text-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .markdown-editor,

[data-theme="dark"] .markdown-preview {
    background: var(--dark-bg, #1a202c);
    border-color: var(--dark-border, #4a5568);
}

[data-theme="dark"] .text-editor-container,

[data-theme="dark"] .image-editor-container {
    background: var(--bg-color, #1a1a1a);
    border-color: var(--light-border, #444);
}

[data-theme="dark"] .text-editor-content {
    background: var(--bg-color, #1a1a1a);
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] .text-editor-content[contenteditable="true"]:focus {
    background: var(--bg-color, #1a1a1a);
    box-shadow: inset 0 0 0 2px var(--focus-color, #4a90e2);
}

[data-theme="dark"] .text-editor-content.text-editor-empty::before {
    color: var(--color-secondary, #666);
}

[data-theme="dark"] .image-editor-label {
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] .image-editor-preview-container,

[data-theme="dark"] .image-editor-upload-area {
    background: var(--light-bg, #2d2d2d);
    border-color: var(--light-border, #444);
}

[data-theme="dark"] .image-editor-upload-area:hover,

[data-theme="dark"] .image-editor-upload-area.image-editor-drag-over {
    border-color: var(--color-primary, #4a90e2);
    background: rgba(74, 144, 226, 0.1);
}

[data-theme="dark"] .image-editor-placeholder {
    color: var(--color-secondary, #aaa);
}

[data-theme="dark"] .image-editor-upload-info > div:first-child {
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] .image-editor-upload-limits {
    color: var(--color-secondary, #888);
}

/* ----- Quiz Workflow and Editing ----- */

[data-theme="dark"] .quiz-edit-link {
    background-color: var(--color-dark-background-secondary);
    border-color: var(--color-dark-border-subtle);
    color: var(--color-dark-text-secondary);
}

[data-theme="dark"] .quiz-edit-link:hover {
    background-color: var(--color-dark-background-tertiary);
    border-color: var(--color-dark-border-primary);
    color: var(--color-dark-text-primary);
}

[data-theme="dark"] .quiz-edit-dropdown-menu {
    background: var(--color-dark-background-primary);
    border-color: var(--color-dark-border-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .quiz-edit-dropdown-item {
    color: var(--color-dark-text-primary);
}

[data-theme="dark"] .quiz-edit-dropdown-item:hover {
    background-color: var(--color-dark-background-secondary);
}

[data-theme="dark"] .quiz-edit-dropdown-item .edit-mode-description {
    color: var(--color-dark-text-secondary);
}

[data-theme="dark"] .quiz-workflow-toggle {
    background-color: color-mix(in srgb, var(--focus-color) 10%, transparent);
    border-color: var(--primary-color);
}

[data-theme="dark"] .quiz-workflow-toggle label {
    color: var(--primary-color);
}

[data-theme="dark"] .quiz-workflow-section {
    background: linear-gradient(135deg, var(--light-bg), var(--bg-color));
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--focus-color) 20%, transparent);
}

[data-theme="dark"] .quiz-workflow-section h4 {
    color: var(--primary-color);
}

[data-theme="dark"] .deployment-section,

[data-theme="dark"] .deployment-options label {
    background-color: var(--light-bg);
    border-color: var(--light-border);
    color: var(--text-color);
}

[data-theme="dark"] .deployment-options label:hover {
    background-color: var(--hover-bg);
    border-color: var(--primary-color);
}

[data-theme="dark"] .quiz-actions-section {
    background: linear-gradient(135deg, color-mix(in srgb, var(--focus-color) 10%, transparent), var(--bg-color));
    border-color: var(--primary-color);
}

[data-theme="dark"] .quiz-actions-section .primary {
    background: linear-gradient(135deg, var(--primary-color), #357AE8);
}

[data-theme="dark"] .deployment-result {
    background-color: var(--bg-color);
    border-color: var(--light-border);
    color: var(--text-color);
}

/* ----- Walls and Content Management ----- */

[data-theme="dark"] .local-walls-section h3:hover,

[data-theme="dark"] .private-walls-section h3:hover,

[data-theme="dark"] .wall-management-item {
    border-color: var(--light-border, #444444);
}

[data-theme="dark"] .wall-title {
    color: var(--text-color);
}

[data-theme="dark"] .wall-stats {
    color: var(--text-color, #cccccc) !important;
    background: var(--bg-color) !important;
}

/* Dark theme - Hierarchical My Content sections */
[data-theme="dark"] .wall-item {
    border-color: var(--light-border, #444);
    background: var(--bg-color, #2a2a2a);
}

[data-theme="dark"] .wall-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .wall-item .wall-title {
    color: var(--link-color, #4d9fff);
}

[data-theme="dark"] .wall-item .wall-id {
    color: var(--text-muted, #999);
}

[data-theme="dark"] .wall-badge-local {
    background-color: var(--dark-warning-bg, #3a3a2a);
    color: var(--dark-warning-text, #ffc107);
}

[data-theme="dark"] .wall-badge-private {
    background-color: var(--dark-info-bg, #1a2a3a);
    color: var(--dark-info-text, #66b2ff);
}

[data-theme="dark"] .local-content-section,
[data-theme="dark"] .ubercat-section {
    border-color: var(--light-border, #444);
    background: var(--light-bg, #2a2a2a);
}

[data-theme="dark"] .local-content-header,
[data-theme="dark"] .ubercat-header {
    color: var(--text-color, #e0e0e0);
}

[data-theme="dark"] .local-content-header:hover,
[data-theme="dark"] .ubercat-header:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .metacat-subsection {
    border-color: var(--light-border, #555);
    background: var(--bg-color, #333);
}

[data-theme="dark"] .metacat-header {
    color: var(--text-color, #ccc);
}

[data-theme="dark"] .metacat-header:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] .wall-info .enhanced-breadcrumbs {
    background: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .wall-info .enhanced-breadcrumbs .breadcrumb-item {
    color: var(--text-color-light, #aaa);
}

[data-theme="dark"] .no-walls-message,

/* ----- Images and Media ----- */

[data-theme="dark"] .video-replace-dialog {
    color: var(--text-color);
}

[data-theme="dark"] .video-action-item {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .video-action-item:hover {
    background-color: var(--light-bg);
}

[data-theme="dark"] .replace-current-video,

[data-theme="dark"] .video-action-info {
    background-color: var(--light-bg);
    border-color: var(--light-border);
}

[data-theme="dark"] .drop-zone-uploading,

[data-theme="dark"] .drop-zone-uploading::before,

[data-theme="dark"] .image-preview img {
    filter: none !important;
    border-color: var(--light-border);
    background-color: var(--light-bg);
}

[data-theme="dark"] .image-error-message {
    background-color: var(--error-bg-dark, #4a1a1a);
    color: var(--error-text-dark, #ff8888);
    border-color: var(--error-border-dark, #6a2a2a);
}

/* ----- Miscellaneous ----- */

[data-theme="dark"] .public-content-section h3:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

[data-theme="dark"] .metadata-item .value.modified {
    background-color: var(--color-warning);
    color: var(--color-warning-light);
}

[data-theme="dark"] .json-editor-info {
    background: rgba(33, 150, 243, 0.1);
    border-color: var(--color-info);
}

[data-theme="dark"] .limited-badge {
    background-color: var(--color-accent);
    color: var(--color-neutral-dark);
}

[data-theme="dark"] .form-section,

[data-theme="dark"] .answer-item,

[data-theme="dark"] .question-preview {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .answer-feedback.correct {
    background-color: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

[data-theme="dark"] .answer-feedback.incorrect {
    background-color: var(--error-bg);
    color: var(--error-text);
    border-color: var(--error-border);
}

[data-theme="dark"] .file-drop-area {
    background: var(--dark-bg-secondary, #2d3748);
    border-color: var(--dark-border, #4a5568);
}

[data-theme="dark"] .file-drop-area.drag-over {
    background: var(--dark-accent-light, #2d5a87);
    border-color: var(--dark-accent, #4a90e2);
}

[data-theme="dark"] .html-source-editor {
    background: var(--dark-bg, #1a202c);
    color: var(--dark-text, #e2e8f0);
}

[data-theme="dark"] .chord {
    background: var(--dark-accent-light, #2d5a87);
    color: var(--dark-accent, #4a90e2);
    border-color: var(--dark-accent, #4a90e2);
}

[data-theme="dark"] .guitar-tab {
    background: var(--dark-bg-secondary, #2d3748);
    border-color: var(--dark-accent, #4a90e2);
}

[data-theme="dark"] .no-access-message {
    background: var(--light-bg);
    color: var(--text-color);
}

[data-theme="dark"] .server-metadata {
    color: var(--color-neutral-light);
}

[data-theme="dark"] .summary-type-category { color: var(--color-success); border-color: var(--color-success); }

[data-theme="dark"] .summary-type-lesson { color: var(--color-info); border-color: var(--color-info); }

[data-theme="dark"] .summary-type-activity { color: var(--color-warning); border-color: var(--color-warning); }

[data-theme="dark"] .summary-type-page { color: var(--color-primary); border-color: var(--color-primary); }

[data-theme="dark"] .summary-type-metacat { color: var(--color-secondary); border-color: var(--color-secondary); }

[data-theme="dark"] .parent-activity-section,

[data-theme="dark"] .quiz-results-section {
    background-color: var(--bg-color);
    border-color: var(--light-border);
}

[data-theme="dark"] .result-value,

/* ===== RESPONSIVE ADJUSTMENTS (PAGE + QUIZ EDITORS) ===== */

@media (max-width: 768px) {
    .image-inputs {
        flex-direction: column;
    }

    .answer-row {
        flex-direction: column;
        align-items: stretch;
        gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    }

    .points-input {
        margin-block-start: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    }

    .page-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    }

    .page-controls {
        width: 100%;
        justify-content: space-between;
    }

    .editor-toolbar {
        flex-direction: column;
        gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    }

    .editor-tabs {
        flex-wrap: wrap;
    }

    .editor-tab {
        font-size: var(--font-size-xs);
        padding: var(--spacing-sm) 15px;
    }

    .markdown-editor-container {
        flex-direction: column;
        height: auto;
    }

    .markdown-editor,
    .html-source-editor {
        height: 400px;
        min-height: 400px;
    }

    .markdown-preview {
        border-left: none;
        border-top: 1px solid var(--light-border, #ddd);
        min-height: 200px;
    }

    .editing-overlay-content {
        max-width: 95vw;
        max-height: 95vh;
        margin: var(--spacing-sm, 8px);
    }

    .editing-overlay-header,
    .editing-overlay-footer {
        padding: var(--spacing-md, 16px);
    }

    .editing-overlay-editing-content {
        padding: var(--spacing-md, 16px);
    }

    .editing-overlay-title {
        font-size: var(--font-size-md, 18px);
    }

    .editing-overlay-buttons {
        flex-direction: column;
        gap: var(--spacing-sm, 8px);
        width: 100%;
    }

    .editing-overlay-cancel,
    .editing-overlay-save {
        width: 100%;
        justify-content: center;
    }

    .text-editor-toolbar {
        gap: var(--spacing-xs, 2px);
    }

    .text-editor-toolbar-btn {
        min-width: 28px;
        height: 28px;
        font-size: var(--font-size-xs, 12px);
    }

    .image-editor-url-container {
        flex-direction: column;
        align-items: stretch;
    }

    .quiz-workflow-toggle {
        margin-inline-start: 0;
        margin-block-start: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
        width: 100%;
        text-align: center;
    }

    .activity-input-group {
        gap: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px));
    }

    .deployment-options {
        grid-template-columns: 1fr;
    }

    .quiz-actions-section {
        padding: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 16px));
    }

    .quiz-actions-section button {
        display: block;
        width: 100%;
        margin: clamp(var(--spacing-xs, 4px), 1vw, var(--spacing-sm, 8px)) 0;
        min-width: auto;
    }

    .result-item {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(2px, 0.5vw, var(--spacing-xs));
    }

    .deployment-result {
        flex-direction: column;
        align-items: flex-start;
        gap: clamp(2px, 0.5vw, var(--spacing-xs));
    }

    .quiz-workflow-section,
    .parent-activity-section,
    .deployment-section {
        padding: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 12px));
    }

    .quiz-edit-link .edit-link-text {
        display: none;
    }

    .quiz-edit-icon {
        width: 12px;
        height: 12px;
    }

    .quiz-edit-dropdown-menu {
        right: 0;
        left: auto;
        min-width: 160px;
    }

    .quiz-edit-link-button-row .edit-page-text {
        display: none;
    }

    .quiz-edit-link-button-row .edit-page-link {
        padding: var(--spacing-xs, 6px);
        min-width: auto;
    }

    .quiz-edit-link-button-row .edit-dropdown-menu {
        min-width: 180px;
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
}

@media (max-width: 480px) {
    .rich-editor-toolbar {
        flex-wrap: wrap;
        gap: clamp(1px, 0.3vw, 2px);
    }

    .rich-editor-toolbar button {
        min-width: clamp(40px, 8vw, 44px);
        height: clamp(40px, 8vw, 44px);
        font-size: clamp(11px, 2vw, 14px);
        padding: clamp(var(--spacing-xs), 1.5vw, 10px);
    }

    .rich-editor-content {
        min-height: clamp(60px, 12vh, 80px);
    }

    .answer-feedback {
        padding: clamp(var(--spacing-xs, 4px), 1.5vw, var(--spacing-sm, 10px));
    }

    .task {
        font-size: var(--font-size-sm);
    }

    .question-preview {
        padding: clamp(var(--spacing-sm, 8px), 2vw, var(--spacing-md, 12px));
    }

    .image-inputs .input-group {
        min-width: 100%;
    }

    .editing-overlay-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-sm, 8px);
    }

    .text-editor-content {
        min-height: clamp(100px, 15vh, 150px);
    }

    .image-editor-preview-container {
        min-height: 80px;
        padding: var(--spacing-sm, 8px);
    }

    .image-editor-upload-area {
        padding: var(--spacing-md, 16px);
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */

.editing-overlay-save:focus,
.editing-overlay-cancel:focus {
    outline: 2px solid var(--focus-color, #4D90FE);
    outline-offset: 2px;
}

.quiz-edit-link:focus,
.quiz-edit-dropdown-item:focus {
    outline: 2px solid var(--focus-color, #4D90FE);
    outline-offset: 2px;
}

@media (prefers-contrast: high) {
    .editing-overlay-content {
        border: 2px solid var(--text-color, #333);
    }

    .text-editor-toolbar,
    .editing-overlay-header,
    .editing-overlay-footer {
        border-color: var(--text-color, #333);
    }

    .quiz-edit-link {
        border-width: 2px;
        border-color: var(--text-color, #333);
    }

    .quiz-edit-dropdown-menu {
        border-width: 2px;
        border-color: var(--text-color, #333);
    }
}

@media (prefers-reduced-motion: reduce) {
    .editing-overlay,
    .text-editor-toolbar-btn,
    .image-editor-upload-area {
        transition: none;
    }

    .image-editor-upload-area:hover,
    .image-editor-upload-area.image-editor-drag-over {
        transform: none;
    }

    .quiz-edit-link,
    .quiz-edit-dropdown-menu {
        transition: none;
    }

    .quiz-edit-link:hover {
        transform: none;
    }
}

/* ==========================================================================
   Canonical JSON Conversion Indicators and Validation Errors
   ========================================================================== */

/* Canonical Conversion Indicator */
.canonical-conversion-indicator {
    padding: 8px 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    font-size: 14px;
    display: none;
}

.canonical-conversion-info {
    background-color: #e3f2fd;
    color: #1976d2;
    border-left: 4px solid #1976d2;
}

.canonical-conversion-success {
    background-color: #e8f5e9;
    color: #388e3c;
    border-left: 4px solid #388e3c;
}

.canonical-conversion-error {
    background-color: #ffebee;
    color: #d32f2f;
    border-left: 4px solid #d32f2f;
}

/* Dark mode support */
[data-theme="dark"] .canonical-conversion-info {
    background-color: #0d47a1;
    color: #90caf9;
}

[data-theme="dark"] .canonical-conversion-success {
    background-color: #1b5e20;
    color: #a5d6a7;
}

[data-theme="dark"] .canonical-conversion-error {
    background-color: #b71c1c;
    color: #ef9a9a;
}

/* Canonical Validation Errors */
.canonical-validation-errors {
    margin-top: 12px;
    padding: 12px;
    background-color: #ffebee;
    border: 1px solid #ef5350;
    border-radius: 4px;
    display: none;
}

.validation-error-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #ef5350;
}

.error-icon {
    font-size: 18px;
    color: #d32f2f;
}

.error-count {
    flex: 1;
    font-weight: bold;
    color: #d32f2f;
}

.dismiss-errors-btn {
    padding: 4px 8px;
    font-size: 12px;
}

.validation-error-content {
    max-height: 300px;
    overflow-y: auto;
}

.validation-error-content pre {
    margin: 0;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Dark mode support */
[data-theme="dark"] .canonical-validation-errors {
    background-color: #b71c1c;
    border-color: #e57373;
}

[data-theme="dark"] .validation-error-header {
    border-bottom-color: #e57373;
}

[data-theme="dark"] .error-icon,
[data-theme="dark"] .error-count {
    color: #ffcdd2;
}

[data-theme="dark"] .validation-error-content pre {
    color: #ffebee;
}