/* ============================================================================
   TOC SIDEBAR COMPONENT
   ============================================================================
   
   Fixed-position table of contents sidebar for document navigation.
   Features expand/collapse functionality for hierarchical content structure.
   
   Features:
   - Fixed position on right side
   - Collapsible to minimize screen space
   - Hierarchical content structure (div1, div2, div3, etc.)
   - Expand/collapse toggle buttons for nested items
   - Current page highlighting
   - Visual hierarchy with indentation and borders
   - Smooth animations
   - Mobile responsive
   - Print-friendly (all expanded)
   
   ============================================================================ */

/* ============================================================================
   MAIN SIDEBAR CONTAINER
   ============================================================================ */

.toc-sidebar {
    position: fixed;
    inset-inline-start: 0;
    top: 100px;  /* Below fixed header */
    bottom: 70px;  /* Above fixed footer */
    width: var(--sidebar-width);
    background: var(--color-white);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    padding: 20px;
    box-shadow: var(--shadow-sidebar);
    overflow-y: auto;
    z-index: var(--z-sidebar);
    transition: width 0.3s ease;
}


/* ============================================================================
   COLLAPSED STATE
   ============================================================================ */

.toc-sidebar.collapsed {
    width: var(--sidebar-collapsed);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Adjust main content when sidebar is collapsed */
.document-viewer:has(.toc-sidebar.collapsed) .viewer-main {
    margin-inline-start: 60px;
}


/* ============================================================================
   EXPAND BUTTON (When Collapsed)
   ============================================================================ */

.toc-expand-button {
    width: 100%;
    height: 100px;
    background: var(--color-primary);
    border: none;
    color: var(--color-white);
    font-size: 1.125rem;
    cursor: pointer;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transition: var(--transition-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.toc-expand-button:hover {
    background: var(--color-primary-dark);
}


/* ============================================================================
   TOC HEADER
   ============================================================================ */

.toc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    direction: rtl;
}

.toc-header h3 {
    font-size: 1.25rem;
    font-family: var(--font-primary);
    color: var(--color-text-primary);
}

.toggle-button {
    background: var(--color-gray-light);
    border: none;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: var(--transition-bg);
}

.toggle-button:hover {
    background: var(--color-gray-medium);
}


/* ============================================================================
   TOC LIST STRUCTURE
   ============================================================================ */

.toc-list {
    list-style: none;
    padding: 0;
}

.toc-item {
    margin-bottom: 8px;
}


/* ============================================================================
   TOC ENTRY (Link)
   ============================================================================ */

.toc-entry {
    display: flex;
    justify-content: space-between;
    padding: 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-primary);
    transition: var(--transition-bg);
    font-family: var(--font-primary);
}

.toc-entry:hover {
    background: var(--color-gray-light);
}

.toc-entry.current {
    background: var(--color-primary);
    color: var(--color-white);
}

.toc-title {
    flex: 1;
}

.toc-page-num {
    color: var(--color-text-secondary);
    font-size: 0.6em;
}

.toc-entry.current .toc-page-num {
    color: rgba(255, 255, 255, 0.9);
}


/* ============================================================================
   TOC CHILDREN (Nested Items)
   ============================================================================ */

.toc-children {
    list-style: none;
    overflow: hidden;
    transition: max-height 0.3s ease-out, opacity 0.2s ease-out, margin 0.3s ease-out;
    margin-inline-start: 15px;
    opacity: 1;
}


/* ============================================================================
   EXPAND/COLLAPSE FUNCTIONALITY
   ============================================================================ */

/* Entry row container - holds toggle button and entry link */
.toc-entry-row {
    display: flex;
    align-items: center;
    direction: rtl;  /* RTL layout */
    gap: 4px;
    margin-bottom: 4px;
}

/* Toggle button for expand/collapse */
.toc-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    color: var(--color-text-secondary);
    font-size: 1rem;
    transition: transform 0.2s ease, color 0.2s ease;
    flex-shrink: 0;  /* Don't compress the icon */
    min-width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.toc-toggle:hover {
    color: var(--color-primary);
    background: rgba(139, 69, 19, 0.1);
}

.toc-toggle:active {
    transform: scale(0.95);
}

/* Expanded state - rotate the chevron */
.toc-toggle.expanded {
    transform: rotate(90deg);
}

.toc-toggle.expanded:hover {
    transform: rotate(90deg) scale(1.1);
}

/* Entry link - flex to take remaining space */
.toc-entry-row .toc-entry {
    flex: 1;
    min-width: 0;  /* Allow text truncation if needed */
}

/* Visual spacing for entries without children (to align with entries that have toggles) */
.toc-entry-row:not(:has(.toc-toggle)) .toc-entry {
    margin-inline-start: 28px;  /* Same width as toggle button + gap */
}

/* CRITICAL: When collapsed, children should be hidden smoothly */
.toc-item:not(:has(.toc-toggle.expanded)) > .toc-children {
    max-height: 0;
    opacity: 0;
    margin: 0;
}

/* Make sure the entry row is clickable but distinct from toggle */
.toc-entry-row .toc-entry:hover {
    background: var(--color-gray-light);
}

.toc-entry-row .toc-entry.current {
    background: var(--color-primary);
    color: var(--color-white);
}

.toc-entry-row .toc-entry.current .toc-page-num {
    color: rgba(255, 255, 255, 0.9);
}

/* Highlight current page entry's toggle button */
.toc-entry-row:has(.toc-entry.current) .toc-toggle {
    color: var(--color-primary);
    font-weight: var(--font-weight-bold);
}


/* ============================================================================
   VISUAL HIERARCHY (Nested Levels)
   ============================================================================ */

/* Improve visual hierarchy - subtle borders for nested items */
.toc-item.level-2 .toc-children {
    border-inline-start: 1px solid var(--color-gray-light);
    padding-inline-start: 8px;
}

.toc-item.level-3 .toc-children {
    border-inline-start: 1px solid #f8f9fa;
    padding-inline-start: 8px;
}

/* Better hover state for the whole row */
.toc-entry-row:hover .toc-toggle {
    color: var(--color-text-primary);
}


/* ============================================================================
   ANIMATIONS
   ============================================================================ */

/* Smooth transition on children appearing/disappearing */
/* Note: slideDown animation is defined in animations.css */
.toc-toggle.expanded + .toc-entry + .toc-children {
    animation: slideDown 0.2s ease-out;
}


/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* Focus styles for keyboard navigation */
.toc-toggle:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}


/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

@media (max-width: 768px) {
    .toc-sidebar {
        width: 100%;
        max-height: 300px;
        position: relative;
        top: auto;
        bottom: auto;
        border-radius: var(--radius-lg);
        margin-bottom: 20px;
    }
    
    .toc-sidebar.collapsed {
        max-height: 60px;
    }
    
    .toc-toggle {
        padding: 6px 10px;
        font-size: 1.125rem;
        min-width: 30px;
    }
    
    .toc-entry-row:not(:has(.toc-toggle)) .toc-entry {
        margin-inline-start: 34px;
    }

    .toc-children {
        margin-inline-start: 10px;
    }

    .viewer-main {
        margin-inline-start: 0 !important;
    }
}


/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .toc-sidebar {
        position: static;
        width: auto;
        box-shadow: none;
        border: 1px solid #ddd;
        page-break-inside: avoid;
    }
    
    .toc-toggle {
        display: none;
    }
    
    .toc-children {
        max-height: none !important;
        opacity: 1 !important;
        margin: inherit !important;
    }
    
    .toc-expand-button {
        display: none;
    }
}