/**
 * PinkCode LearnDash Beautifier - Sidebar Compact Mode
 * 
 * Makes course content fit beautifully within Divi's default 21% sidebar
 * WITHOUT increasing sidebar width - compresses content instead
 * 
 * @package PinkCodeLearnDashBeautifier
 * @since 1.3.0
 * @author Pink Code Queen - Nariman Jafari
 * @link https://pinkcodequeen.com
 */

/* ============================================
   COMPACT MODE FOR 21% SIDEBAR
   ============================================ */

/**
 * Keep sidebar at default 21% but make content fit beautifully
 * This mode compresses course items to look clean in narrow space
 */

/* ============================================
   COURSE NAVIGATION COMPRESSION
   ============================================ */

/**
 * Make course items more compact - REMOVE PADDING, EXPAND CARD WIDTH
 */
#sidebar .ld-course-navigation .ld-lesson-item,
#sidebar .ld-course-navigation .ld-topic-item,
#sidebar .ld-item-list-item {
    padding: 3px 4px !important;
    margin-bottom: 2px !important;
    min-height: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#sidebar .ld-item-list-item-preview {
    padding: 2px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/**
 * Reduce heading sizes - MUCH SMALLER FONT
 */
#sidebar .ld-item-list-item-preview .ld-item-name,
#sidebar .ld-lesson-item-preview-heading,
#sidebar .ld-topic-item-preview-heading {
    font-size: 9px !important;
    line-height: 1.1 !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/**
 * Remove extra padding from lesson/topic wrappers
 */
#sidebar .ld-lesson-item-preview,
#sidebar .ld-topic-item-preview {
    padding: 0 !important;
    width: 100% !important;
}

/**
 * Compress status icons and badges - SMALLER
 */
#sidebar .ld-status-icon,
#sidebar .ld-item-list-item-preview .ld-status {
    width: 12px !important;
    height: 12px !important;
    min-width: 12px !important;
    font-size: 8px !important;
    margin-right: 3px !important;
    flex-shrink: 0 !important;
}

/**
 * Make progress indicators smaller
 */
#sidebar .ld-progress-bar {
    height: 3px !important;
    margin: 4px 0 !important;
}

#sidebar .ld-progress-percentage {
    font-size: 10px !important;
}

/**
 * Compact expandable sections
 */
#sidebar .ld-item-list-item-expanded {
    padding: 3px 6px !important;
}

/**
 * Reduce spacing in nested items
 */
#sidebar .ld-topic-list .ld-table-list-items {
    padding-left: 10px !important;
}

/* ============================================
   TEXT & TYPOGRAPHY OPTIMIZATION
   ============================================ */

/**
 * Optimize text wrapping and overflow - PREVENT WRAPPING, SMALLER FONT
 */
#sidebar .ld-item-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 9px !important;
    padding: 0 !important;
    flex: 1 !important;
    min-width: 0 !important;
}

/**
 * Smaller meta information
 */
#sidebar .ld-item-list-item-preview .ld-item-components,
#sidebar .ld-lesson-item-preview .ld-lesson-item-preview-content {
    font-size: 8px !important;
    line-height: 1.1 !important;
    padding: 0 !important;
}

/**
 * Compact timestamps and counts
 */
#sidebar .ld-item-list .ld-item-components span {
    font-size: 7px !important;
    padding: 1px 3px !important;
}

/* ============================================
   SPACING & LAYOUT OPTIMIZATION
   ============================================ */

/**
 * Reduce overall padding - MINIMAL PADDING
 */
#sidebar .ld-course-navigation,
#sidebar .learndash-wrapper {
    padding: 3px !important;
}

/**
 * Tighter spacing between sections
 */
#sidebar .ld-lesson-section-heading {
    margin: 4px 0 2px !important;
    padding: 3px 4px !important;
    font-size: 10px !important;
}

/**
 * Compact list items
 */
#sidebar .ld-item-list .ld-item-list-item {
    margin-bottom: 1px !important;
}

/**
 * Reduce expand/collapse button size
 */
#sidebar .ld-item-list-item-expand,
#sidebar .ld-expand-button {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    font-size: 10px !important;
    flex-shrink: 0 !important;
}

/* ============================================
   BUTTONS & INTERACTIVE ELEMENTS
   ============================================ */

/**
 * Make buttons more compact
 */
#sidebar .ld-button,
#sidebar .ld-btn,
#sidebar .learndash_mark_complete_button {
    padding: 4px 8px !important;
    font-size: 10px !important;
    min-height: 0 !important;
}

/**
 * Smaller quiz/assignment buttons
 */
#sidebar .ld-start-quiz-button,
#sidebar .ld-upload-assignment-button {
    padding: 4px 6px !important;
    font-size: 9px !important;
}

/* ============================================
   ICONS & VISUAL ELEMENTS
   ============================================ */

/**
 * Compact lesson/topic icons
 */
#sidebar .ld-icon,
#sidebar .ld-item-icon {
    width: 12px !important;
    height: 12px !important;
    font-size: 8px !important;
    margin-right: 3px !important;
    flex-shrink: 0 !important;
}

/**
 * Smaller checkmarks and status indicators
 */
#sidebar .ld-status-complete,
#sidebar .ld-status-incomplete {
    width: 12px !important;
    height: 12px !important;
}

/**
 * Compact lock icons
 */
#sidebar .ld-status-locked {
    font-size: 10px !important;
}

/* ============================================
   COURSE CONTENT SPECIFIC
   ============================================ */

/**
 * Optimize LearnDash course widget
 */
#sidebar .widget_ldcoursenavigation {
    padding: 6px !important;
}

#sidebar .widget_ldcoursenavigation .ld-lesson-item {
    padding: 4px 6px !important;
    margin-bottom: 2px !important;
}

/**
 * Compact course progress widget
 */
#sidebar .widget_ldcourseprogress {
    padding: 6px !important;
}

#sidebar .widget_ldcourseprogress .ld-progress {
    font-size: 10px !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/**
 * Even more compact on smaller screens
 */
@media (max-width: 980px) {
    #sidebar .ld-item-list-item-preview .ld-item-name {
        font-size: 9px !important;
    }
    
    #sidebar .ld-lesson-item,
    #sidebar .ld-topic-item {
        padding: 3px 5px !important;
    }
}

/**
 * Mobile - normal spacing restored
 */
@media (max-width: 768px) {
    #sidebar .ld-lesson-item,
    #sidebar .ld-topic-item,
    #sidebar .ld-item-list-item {
        padding: 12px 15px !important;
    }
    
    #sidebar .ld-item-name {
        font-size: 14px !important;
    }
}

/* ============================================
   VISUAL POLISH
   ============================================ */

/**
 * Ensure everything still looks beautiful despite being compact
 */
#sidebar .ld-item-list-item {
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

#sidebar .ld-item-list-item:hover {
    transform: translateX(2px) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
}

/**
 * Keep active states visible
 */
#sidebar .ld-item-list-item.ld-is-current-lesson {
    border-left: 3px solid #06b6d4 !important;
    background: rgba(6, 182, 212, 0.05) !important;
}

/**
 * Maintain completion indicators
 */
#sidebar .ld-status-complete {
    color: #10b981 !important;
}

#sidebar .ld-status-incomplete {
    color: #94a3b8 !important;
}

/**
 * Professional typography even when small
 */
#sidebar .ld-item-name,
#sidebar .ld-lesson-item-preview-heading {
    font-weight: 500 !important;
    color: #1e293b !important;
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

/**
 * Custom scrollbar for compact content - NO MAX HEIGHT
 */
#sidebar .ld-item-list,
#sidebar .ld-course-navigation {
    overflow-y: visible !important;
    max-height: none !important;
}

#sidebar .ld-item-list::-webkit-scrollbar {
    width: 6px !important;
}

#sidebar .ld-item-list::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 3px !important;
}

#sidebar .ld-item-list::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 3px !important;
}

#sidebar .ld-item-list::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}