/* =========================================
   Course Editor & Management
   ========================================= */

/* --- 1. Course Cards (Dashboard/My Courses) --- */
.lms-course-card {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--lms-bg-surface);
    border: 1px solid var(--lms-border-color);
    border-radius: 0.5rem;
    box-shadow: var(--lms-shadow-sm);
}
.lms-course-card .lms-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.lms-course-card h4 { margin: 0 0 12px; font-size: 1.1rem; font-weight: 600; flex-grow: 1; color: var(--lms-text-primary); }
.lms-course-progress-wrapper { margin-bottom: 15px; }
.lms-progress-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: var(--lms-text-secondary); margin-bottom: 5px; }
.lms-progress-bar { height: 6px; background: var(--lms-bg-hover); border-radius: 3px; overflow: hidden; }
.lms-progress-fill { height: 100%; background: var(--lms-primary); transition: width 0.3s ease; }
.lms-course-card-btn { display: block; text-align: center; margin-top: auto; }
.lms-course-card-link { text-decoration: none; color: inherit; display: block; }
.lms-card-img { height: 160px; background-size: cover; background-position: center; background-color: var(--lms-bg-hover); border-bottom: 1px solid var(--lms-border-color); }

/* --- 2. Video Preview & Modal --- */
#lms-video-preview-wrapper { margin-top: 10px; display: none; }
#lms-video-thumbnail {
    position: relative; cursor: pointer; width: 340px; max-width: 100%; height: 190px;
    background-color: #000; background-size: cover; background-position: center;
    border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
#lms-video-thumbnail .dashicons-controls-play { font-size: 40px; color: #fff; text-shadow: 0 0 10px rgba(0,0,0,0.5); }
.lms-video-modal-content { background: #000; padding: 0; border: none; }
.lms-video-modal-content .lms-modal-close { position: absolute; top: -40px; right: 0; color: #fff; font-size: 30px; }

/* --- 3. Course Editor Layout Structure --- */

/* The Outer Wrapper (Header + Content) */
.lms-editor-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 20px;
}

/* Header Styling (Transparent to blend with App BG) */
.lms-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;    
    gap: 15px;    
    min-height: 60px; /* Reduced height slightly to fit buttons better */
    background: var(--lms-bg-surface);
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    margin-bottom: 10px;
}

.lms-editor-header .lms-header-title-group {
    display: flex; 
    align-items: center; 
    gap: 15px;
    font-size: 20px;
    font-weight: 600;
    color: var(--lms-text-primary);
}

.lms-editor-header .lms-header-actions {
    margin-left: auto;
    display: flex;
    gap: 10px;
}

/* The Grid Wrapper (Main + Sidebar) */
.lms-editor-grid {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

/* Main Content Column (Added Card Styling Here) */
.lms-editor-main {
    flex: 1;
    min-width: 0;
    background: var(--lms-bg-surface);
    border: 1px solid var(--lms-border-color);
    border-radius: 8px;
    padding: 24px;
    box-shadow: var(--lms-shadow-sm); /* Added Shadow */
}

/* Sidebar Column */
.lms-editor-sidebar {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* --- 4. Meta Boxes (Sidebar Cards) --- */
.lms-meta-box {
    background: var(--lms-bg-surface);
    border: 1px solid var(--lms-border-color);
    border-radius: 8px;
    box-shadow: var(--lms-shadow-sm);
    overflow: hidden;
}

.lms-meta-box-header {
    padding: 12px 20px;
    background-color: var(--lms-bg-hover);
    border-bottom: 1px solid var(--lms-border-color);
}
.lms-meta-box-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--lms-text-primary);
}
.lms-meta-box-content {
    padding: 20px;
}

/* Settings Grids */
.lms-settings-grid, 
.lms-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.lms-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.lms-col-span-2 { grid-column: span 2; }
.lms-form-group.lms-col-span-2 { grid-column: span 2; }

/* --- 5. Course Editor Tabs (Inside Header) --- */
.lms-editor-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 20px;
}

.lms-editor-tab, .lms-tab-btn {
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--lms-text-secondary) !important;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.2s;
}
.lms-editor-tab:hover, .lms-tab-btn:hover { 
    color: var(--lms-text-primary) !important; 
    background-color: var(--lms-bg-hover);
}
.lms-editor-tab.active, .lms-tab-btn.active {
    color: var(--lms-primary-text) !important;
    background-color: var(--lms-primary);
    font-weight: 600;
}

/* --- 5a. Curriculum Builder Layout (Modern Overhaul) --- */
/* --- 5a. Curriculum Builder Layout (TutorLMS Style Overhaul) --- */
.lms-curriculum-builder {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Section Card */
.lms-section-item {
    background: var(--lms-bg-surface);
    border: 1px solid var(--lms-border-color);
    border-radius: 8px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: var(--lms-shadow-sm);
}

.lms-section-header {
    background: var(--lms-bg-hover);
    border-bottom: 1px solid var(--lms-border-color);
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: move;
}
/* Fix alignment of title/icon inside section header */
.lms-section-header strong {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-grow: 1;
}

.lms-section-title-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
}

.lms-section-title {
    font-weight: 600;
    color: var(--lms-text-primary);
}

.lms-section-actions {
    display: flex;
    gap: 8px;
}

/* Lesson List Container */
.lms-lesson-list {
    padding: 16px;
    background: var(--lms-bg-surface);
    min-height: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Lesson Item (Wrapper for header and topic list) */
.lms-lesson-item {
    background: #fff;
    border: 1px solid var(--lms-border-color);
    border-radius: 6px;
    transition: box-shadow 0.2s;
}
.lms-lesson-item:hover {
    box-shadow: var(--lms-shadow-md);
    border-color: #d1d5db;
}

/* Lesson Header (The visible row) */
.lms-item-header { 
    display: flex;
    align-items: center;
    padding: 10px 12px;
    justify-content: space-between;
    gap: 10px;
    width: 100%; /* Ensures it fills the container */
}

/* Topic List (Nested) */
.lms-topic-list {
    margin: 0 12px 12px 48px;
    padding-top: 12px;
    border-top: 1px dashed var(--lms-border-color);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 10px;
}

/* Topic Item */
.lms-topic-item {
    background: var(--lms-bg-hover);
    border: 1px solid var(--lms-border-color);
    border-radius: 4px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 10px;
}

/* --- Common Item Styles & Alignment --- */
.lms-drag-handle {
    color: var(--lms-text-muted);
    cursor: move;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    line-height: 1;
}
.lms-drag-handle:hover { color: var(--lms-text-primary); }

/* Fix for "Duplicate Drag Handler" / Type Icons */
/* This targets the type icon (e.g. dashicons-text) inside the title, excluding the drag handle */
.lms-item-title .dashicons:not(.lms-drag-handle) {
    display: none;
}

/* Title Wrapper */
.lms-item-title-wrapper,
.lms-item-title {
    display: flex;             /* CRITICAL FIX: Aligns handle and text horizontally */
    align-items: center;       /* Vertically centers them */
    gap: 8px;                  /* Spacing between handle/icon/text */
    flex-grow: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--lms-text-primary);
    cursor: pointer;
}

/* Actions Container */
.lms-item-actions,
.lms-actions-mini {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 1;
}

/* Show actions on hover */
.lms-lesson-item:hover .lms-item-actions,
.lms-topic-item:hover .lms-item-actions,
.lms-topic-item:hover .lms-actions-mini {
    opacity: 1;
}

/* Action Buttons */
.lms-item-actions .lms-btn,
.lms-actions-mini .lms-btn {
    background: transparent;
    border: none;
    color: var(--lms-text-secondary);
    cursor: pointer;
    padding: 0 6px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    height: 28px;
    min-width: 28px;
    width: auto;
    white-space: nowrap;
}

.lms-item-actions .lms-btn:hover,
.lms-actions-mini .lms-btn:hover {
    background: var(--lms-bg-hover);
    color: var(--lms-text-primary);
}

.lms-item-actions .lms-btn.lms-delete-item-btn:hover,
.lms-actions-mini .lms-btn.lms-delete-item-btn:hover {
    background: #fee2e2;
    color: #ef4444;
}

.lms-item-actions .lms-btn .dashicons,
.lms-actions-mini .lms-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* Sortable Placeholder */
.ui-sortable-placeholder {
    border: 2px dashed var(--lms-primary);
    background: rgba(4, 107, 210, 0.05);
    visibility: visible !important;
    height: 50px;
    margin-bottom: 10px;
    border-radius: 6px;
}

/* Sortable Helper (Item being dragged) */
.ui-sortable-helper {
    background: var(--lms-bg-surface);
    box-shadow: var(--lms-shadow-md);
    z-index: 9999;
}

/* --- 6. WordPress Editor Fixes (CRITICAL FIXES) --- */
/* Fix: Hide screen reader text (Preventing 'Visual'/'Text' duplicates) */
.wp-editor-tools .screen-reader-text,
.wp-editor-tabs .screen-reader-text {
    display: none !important;
}

/* Editor Tabs Styling */
.wp-editor-tools:after {
    content: "";
    display: table;
    clear: both;
}
.wp-editor-tabs {
    float: right;
}
.wp-editor-tabs .wp-switch-editor {
    float: left;
    box-sizing: content-box;
    position: relative;
    top: 1px;
    background: var(--lms-bg-hover);
    color: var(--lms-text-secondary);
    cursor: pointer;
    font-size: 13px;
    line-height: 19px;
    height: 20px;
    margin: 5px 0 0 5px;
    padding: 3px 8px 4px;
    border: 1px solid var(--lms-border-color);
    border-bottom: none;
    text-decoration: none;
}
.wp-editor-tabs .wp-switch-editor.active {
    background: var(--lms-bg-surface);
    border-bottom: 1px solid var(--lms-bg-surface);
    color: var(--lms-text-primary);
}

/* Fix: WordPress Editor Container Styling */
.wp-editor-wrap {
    border: 1px solid var(--lms-input-border);
    border-radius: 6px;
    overflow: visible; /* Changed to visible to allow Font/Size dropdowns to appear */
    background: var(--lms-bg-surface);
}

/*
 * ROOT CAUSE FIX for Duplicate Editor Toolbars:
 * WordPress uses these classes on the .wp-editor-wrap to toggle which toolbars are visible.
 * These rules replicate the core WP admin CSS logic to fix the issue in our frontend SPA.
 */
.wp-editor-wrap.tmce-active .quicktags-toolbar {
    display: none; /* Hide Quicktags toolbar when in Visual mode */
}
.wp-editor-wrap.html-active .mce-container {
    display: none; /* Hide the entire TinyMCE container (toolbars) when in Text/Code mode */
}

/* Remove default double border from WP core */
.wp-editor-container {
    border: none !important; 
}

/* Fix: Media Buttons (Add Media) */
.wp-media-buttons {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
}
.wp-media-buttons .button {
    font-size: 0.85rem;
    padding: 6px 12px;
    background: var(--lms-bg-surface);
    border: 1px solid var(--lms-border-color);
    border-radius: 4px;
    cursor: pointer;
    color: var(--lms-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.wp-media-buttons .button:hover {
    background: var(--lms-bg-hover);
    border-color: var(--lms-text-secondary);
}
.wp-media-buttons .dashicons {
    color: var(--lms-text-secondary);
}

/* Editor Toolbar Styling */
div.mce-toolbar-grp {
    background-color: var(--lms-bg-hover) !important;
    border-bottom: 1px solid var(--lms-border-color) !important;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

/* TinyMCE Toolbar Button & Dropdown Overrides (Remove Blue Hover) */
.mce-container .mce-btn:hover,
.mce-container .mce-btn.mce-active,
.mce-container .mce-btn.mce-active:hover,
.mce-container .mce-listbox:hover,
.mce-container .mce-listbox.mce-active,
.mce-container .mce-listbox.mce-active:hover,
.mce-container .mce-splitbtn:hover .mce-open,
.mce-container .mce-splitbtn.mce-active .mce-open {
    background: none !important;
    background-color: transparent !important;
    border-color: var(--lms-border-color) !important;
    color: var(--lms-text-primary) !important;
    box-shadow: none !important;
}

/* Ensure icons and text inside buttons/dropdowns inherit the correct color on hover */
.mce-container .mce-btn:hover i,
.mce-container .mce-btn.mce-active i,
.mce-container .mce-listbox:hover .mce-txt,
.mce-container .mce-listbox.mce-active .mce-txt {
    color: var(--lms-text-primary) !important;
}

/* Dropdown Menu Items (The list that appears) - Neutral Hover */
.mce-container .mce-menu-item:hover,
.mce-container .mce-menu-item.mce-selected,
.mce-container .mce-menu-item:focus {
    background-color: var(--lms-bg-hover) !important;
    color: var(--lms-text-primary) !important;
}

/* Editor Content Area */
.wp-editor-area {
    border: none !important;
    box-shadow: none !important;
}

/* --- 7. Image Uploader --- */
.lms-image-uploader-placeholder {
    width: 100%;
    height: 180px;
    background-color: var(--lms-bg-hover);    
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: border-color 0.2s;
}
.lms-image-uploader-placeholder:hover { border-color: var(--lms-primary); }
.lms-image-uploader-placeholder .dashicons { font-size: 40px; color: var(--lms-text-muted); width: 40px; height: 40px; }
.lms-remove-image-btn {
    position: absolute; top: 5px; right: 5px;
    background: rgba(0,0,0,0.5); color: #fff;
    border: none; border-radius: 50%;
    width: 24px; height: 24px;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lms-remove-image-btn:hover { background: red; }


/* --- 8. Mobile Responsiveness --- */
@media (max-width: 900px) {
    /* Collapse the Main+Sidebar Layout */
    .lms-editor-grid {
        flex-direction: column;
    }
    .lms-editor-sidebar {
        width: 100%;
    }
    
    /* Collapse 2-column settings grids */
    .lms-settings-grid, 
    .lms-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* --- 9. Rich Text & Column Utilities --- */
/* Column classes for use within Course Overview/Description via Text Mode */
.lms-row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 1em; }
.lms-col-half { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); }
.lms-col-third { flex: 0 0 calc(33.33% - 13.33px); max-width: calc(33.33% - 13.33px); }
.lms-col-quarter { flex: 0 0 calc(25% - 15px); max-width: calc(25% - 15px); }
.lms-text-highlight { background-color: var(--lms-bg-hover); padding: 2px 5px; border-radius: 3px; }

/* Checkbox Row Alignment (Settings/Monetization) */
.lms-checkbox-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
.lms-checkbox-row > label:not(.lms-switch) {
    order: 1;
    flex: 1;
    margin-right: 10px;
    margin-bottom: 0;
}
.lms-checkbox-row .lms-switch {
    order: 2;
    margin-bottom: 0;
}
.lms-checkbox-row .lms-form-description {
    width: 100%;
    order: 3;
    margin-top: 5px;
    flex-basis: 100%;
    font-size: 0.9em;
    color: var(--lms-text-secondary);
}

/* Select2 Thumbnail */
.lms-select2-thumb {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

/* Retake Rules Table */
.lms-retake-rule-row .lms-input {
    margin-bottom: 0;
}