/* 
Breadcrumbs Component
================================================== 
*/
.breadcrumbs {
    display: flex;
    align-items: center;
    background-color: var(--breadcrumb-bg);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--breadcrumb-border);
    overflow: hidden;
    padding: var(--spacing-xs) 0;
    isolation: isolate; /* Create new stacking context */
    position: sticky;
    top: 0;
    z-index: 50; /* Lower than mobile sidebars (1100) but above content */
    transition: all 0.3s ease;
}

.breadcrumbs-list {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 5px calc(var(--spacing-md) + 20px); /* Extra padding to keep elements away from fade */
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;
    scrollbar-width: none;
    transition: all 0.3s ease;
}

.breadcrumbs-list::-webkit-scrollbar {
    display: none;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    color: var(--breadcrumb-text);
    transition: all 0.3s ease;
}

.breadcrumb-item:not(:last-child)::after {
    content: '';
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");
    width: 16px;
    height: 16px;
    margin: 0 var(--spacing-xs);
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.breadcrumb-item a {
    color: var(--breadcrumb-text);
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary-color);
}

.breadcrumb-item.active {
    color: var(--breadcrumb-text-active);
    font-weight: 400;
    font-style: italic;
}

/* Fade effects for scrollable breadcrumbs */
.breadcrumbs::before,
.breadcrumbs::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px; /* Increased width for much more prominent fade */
    z-index: 2;
    pointer-events: none;
}

.breadcrumbs::before {
    left: 0;
    background: linear-gradient(to right, 
        var(--breadcrumb-bg) 0%, 
        var(--breadcrumb-bg) 50%, 
        transparent 100%);
}

.breadcrumbs::after {
    right: 0;
    background: linear-gradient(to left, 
        var(--breadcrumb-bg) 0%, 
        var(--breadcrumb-bg) 50%, 
        transparent 100%);
}

/* 
Content Reveal Button (Reveals each node in the lesson)
================================================== 
*/

.content-reveal-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 20px;
    margin: 20px 0;
    position: relative;
    z-index: 10;
    padding: 12px 20px !important; 
    font-size: 0.95rem !important; 
    box-shadow: 0 0 15px rgba(var(--highlight-color), 0.3) !important;
    transition: all 0.3s ease !important;
    animation: pulse-glow 2s infinite alternate;
}

.content-reveal-btn:hover {
    box-shadow: 0 3px 20px rgba(var(--highlight-color), 0.4) !important;
}

.content-reveal-btn .circular-progress {
    position: relative;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* Circular progress indicator svg made of two strokes */
.content-reveal-btn .progress-ring {
    width: 100%;
    height: 100%;
}

/* Stroke 1 */
.content-reveal-btn .progress-ring-circle {
    stroke: var(--progress-ring-stroke);
    fill: transparent;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.3s ease;
    transform: rotate(-90deg);
    transform-origin: center;
}

/* Stroke 2 */
.content-reveal-btn .progress-ring-background {
    stroke: var(--progress-ring-bg);
    fill: transparent;
    stroke-width: 3;
}

@keyframes pulse-glow {
    from {
        box-shadow: 0 4px 12px rgba(var(--highlight-color), 0.2);
    }
    to {
        box-shadow: 0 4px 16px rgba(var(--highlight-color), 0.5);
    }
}

/* 
Marquee Text (Used for the course titles, module titles, and any long text)
================================================== 
*/
.marquee-container {
    overflow: hidden;
    width: 100%;
    padding: 0 1rem; /* breathing room from faded edges */
    position: relative; 
}

.marquee-container .marquee-text {
    white-space: nowrap;
    transition: transform var(--scroll-duration, 2s) ease-out;
    display: inline-block;
    width: 100%;
    transition: all 0.3s ease;
}

/* Fade edges for overflowing text */
.marquee-container.has-overflow::before,
.marquee-container.has-overflow::after {
    content: '';
    position: absolute;
    top: 0;
    width: 1rem; /* Increased width to match padding */
    height: 100%;
    z-index: 2;
    pointer-events: none;
    opacity: 0.9; /* Slightly more opaque for better effect */
    transition: all 0.3s ease;
}

.marquee-container.has-overflow::before {
    left: 0;
    background: linear-gradient(to right, var(--sidebar-bg), transparent);
    transition: all 0.3s ease;

}

.marquee-container.has-overflow::after {
    right: 0;
    background: linear-gradient(to left, var(--sidebar-bg), transparent);
    transition: all 0.3s ease;
}

/* Hover effect to trigger scrolling */
.marquee-container.has-overflow:hover .marquee-text {
    transform: translateX(calc(-1 * var(--scroll-distance, 0px)));
}

/* Dark theme adjustments for fade edges */
[data-theme="dark"] .marquee-container.has-overflow::before {
    background: linear-gradient(to right, var(--sidebar-bg), transparent);
}

[data-theme="dark"] .marquee-container.has-overflow::after {
    background: linear-gradient(to left, var(--sidebar-bg), transparent);
}


/* 
Lesson Meta Tags (Within the main lesson content)
================================================== 
*/
.lesson-meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0;
}

.lesson-meta-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    font-size: 0.8rem;
    font-weight: 400;
    border-radius: 6px;
    border: 1px solid;
    background: transparent;
    transition: all 0.3s ease;
    cursor: default;
}

.lesson-meta-badge svg {
    width: .9rem;
    height: .9rem;
    flex-shrink: 0;
}

/* Lesson Number Badge */
.lesson-meta-badge.lesson-number {
    color: var(--primary-color);
    border-color: rgba(0, 114, 255, 0.3);
    background: rgba(0, 114, 255, 0.05);
}

/* Duration Badge */
.lesson-meta-badge.lesson-duration {
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.3);
    background: rgba(139, 92, 246, 0.05);
}

/* Lesson Type Badge */
.lesson-meta-badge.lesson-type {
    color: #06b6d4;
    border-color: rgba(6, 182, 212, 0.3);
    background: rgba(6, 182, 212, 0.05);
}

/* Time Spent Badge */
.lesson-meta-badge.time-spent {
    color: #10b981;
    border-color: rgba(16, 185, 129, 0.3);
    background: rgba(16, 185, 129, 0.05);
}

/* Dark theme adjustments for lesson meta badges */
[data-theme="dark"] .lesson-meta-badge.lesson-number {
    color: #60a5fa;
    border-color: rgba(96, 165, 250, 0.4);
    background: rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .lesson-meta-badge.lesson-duration {
    color: #a78bfa;
    border-color: rgba(167, 139, 250, 0.4);
    background: rgba(167, 139, 250, 0.1);
}

[data-theme="dark"] .lesson-meta-badge.lesson-type {
    color: #22d3ee;
    border-color: rgba(34, 211, 238, 0.4);
    background: rgba(34, 211, 238, 0.1);
}

[data-theme="dark"] .lesson-meta-badge.time-spent {
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.1);
}

/* Completed lesson button styling */
.completed-lesson {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #059669 !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

[data-theme="dark"] .completed-lesson {
    background-color: rgba(34, 197, 94, 0.2) !important;
    color: #10b981 !important;
    border-color: rgba(34, 197, 94, 0.4) !important;
}

/* 
Lesson NODES. Each node is hidden by default and revealed one by one.
================================================== 
*/
.lesson-body .hidden-node {
    display: none !important;
}

.lesson-body .visible-node {
    display: block;
    animation: content-fade-in 0.6s ease-out forwards;
    opacity: 0;
}

/* Special display types for elements that shouldn't be block */
.lesson-body .visible-node.inline,
.lesson-body img.visible-node:not(.wp-block-image img),
.lesson-body span.visible-node,
.lesson-body a.visible-node,
.lesson-body code.visible-node:not(pre code),
.lesson-body em.visible-node,
.lesson-body strong.visible-node {
    display: inline;
}

.lesson-body table.visible-node {
    display: table;
}

.lesson-body tr.visible-node {
    display: table-row;
}

.lesson-body td.visible-node,
.lesson-body th.visible-node {
    display: table-cell;
}

.lesson-body li.visible-node {
    display: list-item;
}

/* HR elements need special handling */
.lesson-body hr.visible-node,
.lesson-body .wp-block-separator.visible-node {
    display: block;
    height: auto;
    border: none;
    border-top: 1px solid currentColor;
    margin: 1.5em auto;
    opacity: 0.3;
}
/*
COURSES LIST SCREEN
===================
Styles for the main courses listing page, displaying available courses in a grid or list layout.

Features:
- Modern course card design
- Responsive grid layout
- Visual progress indicators
- Status badges and course metadata
- Hover and focus effects
*/

/* Courses container */
.courses-container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.courses-header {
    text-align: center;
}

.courses-header h1 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: 0.5rem;
    color: var(--text-primary);
}

.courses-header p {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Courses grid layout */
.courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    gap: var(--spacing-md);
    margin-top: 3rem;
}

/* Course card */
.course-card {
    background-color: var(--sidebar-background);
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 400px;
    border: 1px solid var(--border-color);
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.course-thumbnail {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background-color: var(--border-color);
    background-image: linear-gradient(135deg, var(--sidebar-background) 25%, var(--border-color) 25%, var(--border-color) 50%, var(--sidebar-background) 50%, var(--sidebar-background) 75%, var(--border-color) 75%, var(--border-color) 100%);
    background-size: 20px 20px;
    position: relative;
}

.course-body {
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.course-title {
    font-size: var(--text-xl);
    line-height: 1.4;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
    font-weight: 600;
    font-family: 'Geist', sans-serif;
}

/* Course meta */
.course-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.course-meta-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.meta-icon {
    width: 16px;
    height: 16px;
    stroke-width: 2px;
    flex-shrink: 0;
    opacity: 0.8;
}

/* Remove unused styles for status badges and search */
.course-status,
.courses-controls,
.courses-search,
.courses-filters {
    display: none;
}

.course-description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
    flex-grow: 1;
}

.course-footer {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: auto;
}



/* Circular progress bar */
.circular-progress {
    position: relative;
    width: 1.1rem;
    height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circular-progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.circular-progress-bg {
    stroke: var(--progress-ring-bg);
    fill: none;
    stroke-width: 5;
}

.circular-progress-fill {
    stroke: var(--primary-color);
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}



.course-actions {
    display: flex;
    gap: var(--spacing-xs);
}

.course-actions .bttn {
    width: 100%;
}

/* Course card hover effect */
.course-card .course-hover-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.course-card:hover .course-hover-overlay {
    opacity: 1;
}

/* Enrollment status badge */
.course-enrollment-status {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    background-color: rgba(26, 240, 105, 0.15);
    color: rgb(26, 240, 105);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: capitalize;
    z-index: 2;
}

/* Course stats */
.course-stats {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.course-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.course-stat-value {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
}

.course-stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Empty state */
.courses-empty {
    padding: var(--spacing-lg);
    text-align: center;
    background-color: var(--sidebar-background);
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
}

.courses-empty h2 {
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.courses-empty p {
    margin-bottom: var(--spacing-md);
    color: var(--text-secondary);
}

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

.courses-search {
    position: relative;
    min-width: 240px;
    flex-grow: 1;
}

.courses-search input {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    border-radius: var(--border-radius);
    border: 1px solid var(--border-color);
    background-color: var(--background-color);
    color: var(--text-primary);
}

.courses-search i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.courses-filters {
    display: flex;
    gap: var(--spacing-sm);
}

.courses-sort-dropdown {
    position: relative;
    min-width: 200px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
    }
    
    .courses-header {
        text-align: left;
    }
    
    .courses-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .courses-search {
        width: 100%;
    }
    
    .courses-filters {
        width: 100%;
        justify-content: space-between;
    }
}

/* Dark mode specific adjustments */
[data-theme="dark"] .course-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .course-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .course-hover-overlay {
    background-color: rgba(255, 255, 255, 0.03);
}

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

[data-theme="dark"] .course-status.draft {
    color: rgba(255, 255, 255, 0.8);
}

/* Dark mode specific improvements */
[data-theme="dark"] .course-thumbnail {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 25%, rgba(255, 255, 255, 0.07) 25%, rgba(255, 255, 255, 0.07) 50%, rgba(255, 255, 255, 0.03) 50%, rgba(255, 255, 255, 0.03) 75%, rgba(255, 255, 255, 0.07) 75%, rgba(255, 255, 255, 0.07) 100%);
} 
/*
FONT SIZE CONTROL SYSTEM
=========================
This file provides different font size scales that affect the entire interface
by changing the base font size. Since the interface uses rem units throughout,
changing the base font size scales everything proportionally.

Usage:
- Applied via JavaScript FontSizeManager
- Controlled by font size toggle button
- User preference saved in localStorage
*/

/* Base font size scales - rem units are relative to root element */

/* Small font size */
:root.font-small {
    font-size: 14.5px; /* Smaller base */
}

/* Medium font size (default) */
:root.font-normal {
    font-size: 16px; /* Standard base */
}

/* Large font size */
:root.font-large {
    font-size: 17.5px; /* Larger base */
}

/* Extra large font size */
:root.font-larger {
    font-size: 19.5px; /* Largest base */
}

/* Smooth transitions when font size changes */
:root {
    transition: font-size 0.3s ease;
}

/* Ensure all elements that use rem scale proportionally */
* {
    transition: font-size 0.3s ease;
}

/* Fine-tune specific elements that might need adjustment at different scales */

/* Ensure skeleton loaders scale appropriately */
:root.font-small .skeleton {
    min-height: 8px;
}

:root.font-xl .skeleton {
    max-height: 32px;
}

/* Responsive adjustments for font scaling */
@media (max-width: 768px) {
    /* On mobile, use slightly smaller scaling to prevent UI from becoming too large */
    :root.font-large {
        font-size: 17px;
    }
    
    :root.font-xl {
        font-size: 19px;
    }
}

@media (max-width: 480px) {
    /* On very small screens, cap the font scaling even more */
    :root.font-large {
        font-size: 16px;
    }
    
    :root.font-xl {
        font-size: 18px;
    }
} 
/*
HEADER STYLES
=============
All header-related styles for the course view interface.

Includes:
- Course header layout and styling
- Header controls and buttons
- Progress indicators in header
- Theme toggle styling
- Responsive header behavior
*/

/* Header Styles */
#course-header {
    height: var(--header-height);
    background: var(--bg-color);
    border-bottom: 1px solid var(--input-border-color);
    padding: 0 var(--spacing-md);
    position: sticky;
    top: 0;
    z-index: 110;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 100%;
}

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

.control-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.control-buttons .bttn-icon {
    position: relative;
}

/* Ensure theme toggle icons are positioned correctly */
.control-buttons .theme-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: transform 300ms ease-in-out !important;
}

/* Override absolute positioning for theme icons in the control buttons */
.control-buttons #theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-buttons #theme-toggle .theme-icon {
    position: absolute;
    width: calc(var(--bttn-icon-size) * 1.4);
    height: calc(var(--bttn-icon-size) * 1.4);
}

/* Default state - show moon, hide sun */
.control-buttons #theme-toggle .theme-icon.sun {
    transform: translate(-50%, -50%) scale(0);
}

.control-buttons #theme-toggle .theme-icon.moon {
    transform: translate(-50%, -50%) scale(1);
}

/* Dark theme states - show sun, hide moon */
[data-theme="dark"] .control-buttons #theme-toggle .theme-icon.moon {
    transform: translate(-50%, -50%) rotate(360deg) scale(0);
}

[data-theme="dark"] .control-buttons #theme-toggle .theme-icon.sun {
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
}

#course-header #course-title {
    margin: 0;
    font-size: clamp(1.125rem, 2.5vw, 1.5rem);
    color: var(--text-primary);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 40vw;
}

#course-header .header-title-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: none;
}


/* Header Responsive Design */
@media (max-width: 1024px) {
    #course-title {
        max-width: 35vw;
    }
}

@media (max-width: 768px) {
    /* Fix header layout on mobile */
    .header-content {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--spacing-sm);
        padding: 0;
    }
    
    #course-header {
        height: var(--header-height);
        padding: 0 var(--spacing-sm);
    }
    
    .header-controls {
        gap: var(--spacing-sm);
        flex-shrink: 0;
    }
    
    #course-title {
        max-width: none;
        flex: 1;
        min-width: 0;
        font-size: 1rem;
    }
    
    .control-buttons {
        gap: 0.25rem;
        flex-shrink: 0;
    }
}

@media (max-width: 520px) {
    #course-header {
        padding: 0 var(--spacing-xs);
    }
    
    .header-controls {
        gap: var(--spacing-xs);
    }
    
    #course-title {
        font-size: 0.9rem;
    }
    
    .control-buttons {
        gap: 0.125rem;
    }
    
    .control-buttons .bttn-icon {
        width: 2rem !important;
        height: 2rem !important;
    }
} 
/*
Main Layout Styles
==================
Main CSS file for the course viewing interface.

Usage:
- Import this file first before skeleton-loaders.css and components.css
- Customize CSS variables for easy theming
- Use utility classes for consistent spacing
*/

/* Import modular CSS files */
@import 'header.css';
@import 'single-course-view.css';
@import 'module-view.css';

/* CSS Variables for Easy Theming */
:root {
    /* Aliased to global.css variables */
    --primary-color: var(--brand-color);
    --secondary-color: var(--text-secondary-color);
    --background-color: var(--bg-color);
    --bg-muted-color: #fbfbfb;
    --sidebar-bg: #f8fafc;
    --border-color: var(--input-border-color);
    --text-primary: var(--text-primary-color);
    --text-secondary: var(--text-secondary-color);
    --success-color: var(--active-green);
    --highlight-color: 0, 191, 255;
    --shadow-border: rgba(0, 0, 0, 0.1);


    /* Local variables */
    --header-height: 70px;
    --sidebar-width: 300px;
    --border-radius: 10px;
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --control-bar-height: 60px;

    /* Skeleton loader variables */
    --skeleton-base: #e4eaeb;
    --skeleton-highlight: #e9ecef;
    --skeleton-shimmer: #d3dbdb;
    --skeleton-overlay: rgba(240, 244, 246, 0.8);

    /* Content area specific variables */
    --content-bg: var(--bg-color);
    --control-bar-bg: var(--bg-color);

    /* Breadcrumb specific variables */
    --breadcrumb-bg: var(--sidebar-bg); 
    --breadcrumb-text: #64748b; /* Muted text color */
    --breadcrumb-text-active: #334155; /* Active breadcrumb color */
    --breadcrumb-border: var(--border-color);

    /* WordPress Block Callouts - Light Theme */
    --wp-problem-bg: #FFFBE6;
    --wp-problem-text: #B38600;
    --wp-problem-border: #FFECB3;
    --wp-formula-bg: #E6FAF8;
    --wp-formula-text: #003C38;
    --wp-formula-border: #B2E4DE;
    --wp-concept-bg: #f7f4ff;
    --wp-concept-text: #5400ff;
    --wp-concept-border: #d6c7ff;
    --wp-notice-bg: #F0F4FF;
    --wp-notice-text: #003B8E;
    --wp-notice-border: #C6D7FF;

    /* Colors for progress ring */
    --progress-ring-stroke: rgb(80, 80, 80);
    --progress-ring-bg: rgba(160, 160, 160, 0.5);
}

/* Dark theme overrides */
[data-theme="dark"] {
    /* Ensure proper dark theme backgrounds */
    --content-bg: var(--bg-color);
    --sidebar-bg: rgb(25, 25, 25);
    --bg-muted-color: #151515;
    --control-bar-bg: var(--bg-color);
    --highlight-color: 0, 191, 255;
    --shadow-border: rgba(255, 255, 255, 0.1);


    /* Dark theme specific navigation colors */
    --nav-hover-bg: rgba(255, 255, 255, 0.1);
    --nav-active-bg: rgba(0, 114, 255, 0.2);
    --nav-active-border: rgba(0, 114, 255, 0.4);

    /* Dark theme breadcrumb variables */
    --breadcrumb-bg: var(--sidebar-bg); /* Match sidebar background for consistency */
    --breadcrumb-text: #94a3b8; /* Lighter muted text for dark theme */
    --breadcrumb-text-active: #e2e8f0; /* Light active text for dark theme */
    --breadcrumb-border: #374151; /* Dark border */

    /* WordPress Block Callouts - Dark Theme (swapped) */
    --wp-problem-bg: #B38600;
    --wp-problem-text: #FFFBE6;
    --wp-problem-border: #B38600; /* Or a slightly lighter/darker shade if needed */
    --wp-formula-bg: #003C38;
    --wp-formula-text: #E6FAF8;
    --wp-formula-border: #003C38;
    --wp-concept-bg: #5400ff;
    --wp-concept-text: #f7f4ff;
    --wp-concept-border: #5400ff;
    --wp-notice-bg: #003B8E;
    --wp-notice-text: #F0F4FF;
    --wp-notice-border: #003B8E;

    /* Colors for progress ring */
    --progress-ring-stroke: #ffffff;
    --progress-ring-bg: rgba(255, 255, 255, 0.2);

    /* Skeleton loader dark theme variables */
    --skeleton-base: #2a2a2a;
    --skeleton-highlight: #404040;
    --skeleton-shimmer: #4a4a4a;
    --skeleton-overlay: rgba(255, 255, 255, 0.1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    background-color: var(--background-color);
}

/* Main Course View Container Contains header (in header.css) and #main-layout (in main.css)*/
#course-view-container {
    height: 100%;
    display: grid;
    grid-template-rows: var(--header-height) 1fr var(--control-bar-height, 60px);
    grid-template-areas:
        "header"
        "main"
        "controls";
}

/* Main Layout Grid */
#main-layout {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
    grid-template-areas: "left-sidebar content right-sidebar";
    height: calc(100vh - var(--header-height) - var(--control-bar-height, 60px));
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative; /* Create stacking context */
}

/* Layout State Classes - These override the default grid when added via JavaScript */
#main-layout.content-only {
    grid-template-columns: 1fr !important;
    grid-template-areas: "content" !important;
}

#main-layout.content-only #left-sidebar,
#main-layout.content-only #right-sidebar {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* Hide bottom control bar when in content-only mode */
body.content-only-layout #bottom-control-bar {
    display: none !important;
}

/* Adjust grid template when in content-only mode to remove control bar space */
body.content-only-layout #course-view-container {
    grid-template-rows: var(--header-height) 1fr;
    grid-template-areas:
        "header"
        "main";
}

/* Adjust main layout height when control bar is hidden */
body.content-only-layout #main-layout {
    height: calc(100vh - var(--header-height));
}

/* When sidebars are collapsed */
#main-layout.left-collapsed {
    grid-template-columns: 0 1fr var(--sidebar-width);
}

#main-layout.right-collapsed {
    grid-template-columns: var(--sidebar-width) 1fr 0;
}

#main-layout.left-collapsed.right-collapsed {
    grid-template-columns: 0 1fr 0;
}

/* Ensure collapsed sidebars take no space */
#left-sidebar.collapsed,
#right-sidebar.collapsed {
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    margin: 0;
    border: none;
}

/* Main Content */
#content-area {
    grid-area: content;
    overflow-y: auto;
    padding: 0;
    background-color: var(--content-bg);
    transition: all 0.3s ease;
    min-width: 0;
    min-height: 0;
    width: 100%;
    margin: 0;
    display: block; /* Ensure it's always displayed */
    position: relative; /* Establish positioning context */
    z-index: 1; /* Below sidebars when they're overlays */
}

#main-layout.content-only #content-area {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Adjust layout when sidebars are collapsed */
#main-layout.left-collapsed #content-area {
    margin-left: 0;
}

#main-layout.right-collapsed #content-area {
    margin-right: 0;
}

/* Add resizing visual feedback */
.resizing {
    user-select: none;
    pointer-events: none;
}

body.resizing {
    cursor: col-resize !important;
}

/* Hide resize handle when sidebar is collapsed */
.sidebar.collapsed .sidebar-resize-handle {
    display: none;
}

#lesson-content {
    padding: calc(var(--spacing-md) + 20px);
    max-width: 1000px;
    margin: 0 auto;
    min-height: 200px;
    width: 100%;
    box-sizing: border-box;
}

/*Written content div*/
.lesson-content {
    max-width: 700px;
}

.notes-placeholder {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
    padding: calc(var(--spacing-md) + 20px);
}

/* Utility Classes */
.loading {
    opacity: 0.6;
    pointer-events: none;
}

.fade-in {
    animation: fadeIn 0.3s ease-in;
}





[data-theme="dark"] .nav-lesson:hover {
    background: var(--nav-hover-bg);
}

[data-theme="dark"] .nav-lesson.current {
    background-color: var(--nav-active-bg);
    border: 1px solid var(--nav-active-border);
    color: var(--text-primary);
}

[data-theme="dark"] .module-lessons {
    border-color: rgba(255, 255, 255, 0.15);
}

[data-theme="dark"] .toggle-icon {
    color: var(--text-secondary);
}


/* Responsive Design */
@media (max-width: 1024px) {
    #main-layout {
        grid-template-columns: minmax(200px, 250px) 1fr minmax(200px, 250px);
    }

    #main-layout.left-collapsed {
        grid-template-columns: 0 1fr minmax(200px, 250px);
    }

    #main-layout.right-collapsed {
        grid-template-columns: minmax(200px, 250px) 1fr 0;
    }

    #main-layout.left-collapsed.right-collapsed {
        grid-template-columns: 0 1fr 0;
    }
    
    /* Prevent sidebar content from being cut off */
    #left-sidebar,
    #right-sidebar {
        min-width: 200px;
        overflow-x: hidden;
    }
}

@media (max-width: 900px) {
    #main-layout {
        grid-template-columns: minmax(200px, 250px) 1fr 0;
        grid-template-areas: "left-sidebar content right-sidebar";
    }

    #main-layout.left-collapsed {
        grid-template-columns: 0 1fr 0;
    }

    /* Ensure content area is always visible */
    #content-area {
        min-width: 0;
        width: 100%;
        grid-area: content;
    }

    #right-sidebar {
        position: fixed;
        top: var(--header-height);
        right: 0;
        height: calc(100vh - var(--header-height) - var(--control-bar-height));
        width: var(--sidebar-width);
        z-index: 1100; /* Above breadcrumbs which have z-index: 100 */
        transform: translateX(100%);
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    }

    #right-sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    #main-layout.content-only #right-sidebar {
        transform: none !important;
        position: static !important;
        box-shadow: none !important;
    }
}

@media (max-width: 768px) {
    #main-layout {
        grid-template-columns: 1fr;
        grid-template-areas: "content";
        height: calc(100vh - var(--header-height) - var(--control-bar-height));
    }

    #main-layout.left-collapsed,
    #main-layout.right-collapsed,
    #main-layout.left-collapsed.right-collapsed {
        grid-template-columns: 1fr;
        grid-template-areas: "content";
    }

    /* Force content area to take full space */
    #content-area {
        grid-area: content;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0;
        display: block !important; /* Force display in case it gets hidden */
    }

    #left-sidebar {
        position: fixed;
        top: var(--header-height);
        left: 0;
        height: calc(100vh - var(--header-height) - var(--control-bar-height));
        width: var(--sidebar-width);
        min-width: 250px; /* Minimum width for mobile */
        max-width: 85vw; /* Don't take more than 85% of viewport */
        z-index: 1100; /* Above breadcrumbs (z-index: 100) */
        transform: translateX(-100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        overflow-x: hidden;
    }

    #left-sidebar:not(.collapsed) {
        transform: translateX(0);
    }

    #right-sidebar {
        z-index: 1100; /* Match left sidebar z-index */
        min-width: 250px; /* Minimum width for mobile */
        max-width: 85vw; /* Don't take more than 85% of viewport */
    }

    #main-layout.content-only #left-sidebar {
        transform: none !important;
        position: static !important;
        box-shadow: none !important;
    }

    .control-bar-container {
        padding: 0 var(--spacing-sm);
    }

    .lesson-controls {
        gap: var(--spacing-xs);
    }
}

@media (max-width: 480px) {
    .control-bar-container {
        padding: 0 var(--spacing-xs);
    }

    .lesson-controls {
        gap: 0.25rem;
    }

    #complete-lesson-btn {
        padding: var(--spacing-xs);
        font-size: 0.875rem;
    }

    #complete-lesson-btn .btn-text {
        display: none;
    }

    #complete-lesson-btn::after {
        content: attr(aria-label);
        position: absolute;
        top: -2.5rem;
        left: 50%;
        transform: translateX(-50%);
        background: var(--text-primary);
        color: var(--background-color);
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
        font-size: 0.75rem;
        white-space: nowrap;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    #complete-lesson-btn:hover::after {
        opacity: 1;
    }
}

/* Ensure content is always visible at all screen sizes */
@media (max-width: 1200px) {
    #content-area {
        min-width: 0 !important;
        flex: 1;
    }
}

/* Additional safety for very small screens */
@media (max-width: 480px) {
    #content-area {
        width: 100vw !important;
        min-width: 100vw !important;
        max-width: 100vw !important;
    }

    #lesson-content {
        padding: var(--spacing-sm);
        max-width: none;
    }
}

/* Mobile-first failsafe rules - ensure content is always visible */
@media (max-width: 768px) {
    /* Override any JavaScript-applied styles that might hide content */
    #content-area {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        grid-area: content !important;
    }

    /* Ensure main layout takes full space on mobile */
    #main-layout {
        width: 100% !important;
        min-width: 100% !important;
        grid-template-columns: 1fr !important;
        grid-template-areas: "content" !important;
    }

    /* Force sidebars to be positioned properly on mobile */
    #left-sidebar,
    #right-sidebar {
        position: fixed !important;
        z-index: 100 !important;
    }

    /* Override content-only mode on mobile */
    #main-layout.content-only {
        grid-template-columns: 1fr !important;
        grid-template-areas: "content" !important;
    }

    #main-layout.content-only #content-area {
        display: block !important;
        width: 100% !important;
    }
}


@keyframes content-fade-in {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}