/* ============================================================================
   DOCUMENT SIDEBAR COMPONENT
   ============================================================================

   Tabbed sidebar with Table of Contents and Search functionality.
   Fixed tabs at top with scrollable content below.

   ============================================================================ */

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

.document-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);
    box-shadow: var(--shadow-sidebar);
    z-index: var(--z-sidebar);
    transition: width 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;  /* No padding on container */
    margin: 0;
}

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

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

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

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

.sidebar-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;
    transition: var(--transition-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* ============================================================================
   SIDEBAR TABS (Fixed at top)
   ============================================================================ */

.sidebar-tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #f8f9fa;
    border-bottom: 2px solid #e9ecef;
    flex-shrink: 0;
    padding: 0;
    margin: 0;
}

.sidebar-tab {
    flex: 1;
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.2s ease;
    margin-bottom: -2px;
    text-align: center;
}

.sidebar-tab:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.sidebar-tab:hover {
    color: #495057;
    background: rgba(0, 0, 0, 0.03);
}

.sidebar-tab.active {
    color: var(--color-primary);
    background: var(--color-white);
    border-bottom-color: var(--color-primary);
    font-weight: 600;
}

.sidebar-collapse-btn {
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-inline-end: 1px solid #e9ecef;
    cursor: pointer;
    color: #6c757d;
    font-size: 0.875rem;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #495057;
}

/* ============================================================================
   SIDEBAR CONTENT (Scrollable)
   ============================================================================ */

.sidebar-content {
    flex: 1;
    overflow: hidden;
    min-height: 0;
    padding: 0;
    margin: 0;
}

.sidebar-tab-content {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px;
}

.sidebar-tab-content.toc-tab {
    padding: 8px 12px;
}

/* ============================================================================
   TOC CONTENT STYLES
   ============================================================================ */

.document-sidebar .toc-loading,
.document-sidebar .toc-error,
.document-sidebar .toc-empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    direction: rtl;
}

.document-sidebar .toc-error {
    color: var(--color-error);
}

.document-sidebar .toc-content {
    direction: rtl;
}

/* ============================================================================
   DOCUMENT SEARCH COMPONENT
   ============================================================================ */

.document-search {
    display: flex;
    flex-direction: column;
    height: 100%;
    direction: rtl;
}

/* Search Input Area */
.doc-search-input-area {
    padding-bottom: 12px;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.doc-search-mode-toggle {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}

.doc-mode-btn {
    flex: 1;
    padding: 8px 14px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.2s ease;
}

.doc-mode-btn:hover:not(:disabled) {
    background: #e9ecef;
    border-color: #ced4da;
}

.doc-mode-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.doc-mode-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Search Row (Input + Button) */
.doc-search-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.doc-search-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.doc-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(139, 69, 19, 0.15);
}

.doc-search-input:disabled {
    background: #f8f9fa;
    cursor: not-allowed;
}

.doc-search-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-family: var(--font-primary);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.doc-search-btn:hover:not(:disabled) {
    background: var(--color-primary-dark);
}

.doc-search-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.doc-search-btn.loading {
    background: #adb5bd;
}

/* Options Row (root expansion + clear button) */
.doc-search-options-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
}

/* Match-strictness slider inside the narrow panel rail. The shared rules live
   in components/search-bar.css; the global bar caps the track at 320px and uses
   0.8rem labels, both of which overflow this sidebar. Scope the overrides to
   the sidebar so the library search bar is untouched. */
.doc-search-input-area .strictness-slider-row {
    gap: 0.4rem;
    margin: 0.1rem 0 0.2rem;
    padding: 0;
}

.doc-search-input-area .strictness-slider {
    max-width: none;
    min-width: 0;
}

.doc-search-input-area .strictness-edge-label {
    font-size: 0.7rem;
}

/* Sidebar morphology toggles while the feature is off (MORPHOLOGY_DISABLED) —
   same treatment as .option-label--unavailable in the global search bar. */
.doc-search-option--unavailable {
    opacity: 0.58;
    cursor: not-allowed;
}

.doc-search-option--unavailable input {
    cursor: not-allowed;
}

/* "View all results" handoff below a truncated result list: quiet, full-width,
   reads as a continuation of the list rather than a primary action. */
.doc-search-view-all {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 7px 10px;
    border: 1px dashed var(--color-border, #d5cbbd);
    border-radius: 6px;
    background: transparent;
    color: var(--color-primary, #8B7355);
    font-family: var(--font-primary, 'Amiri', serif);
    font-size: 0.8rem;
    cursor: pointer;
    text-align: center;
}

.doc-search-view-all:hover {
    background: var(--color-background-secondary, #f5f1ea);
    border-style: solid;
}

/* Root Expansion Option */
.doc-search-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #6c757d;
    cursor: pointer;
}

.doc-search-option input[type="checkbox"] {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.doc-search-option:hover {
    color: #495057;
}

/* Morphology options group (inflection + roots) — stacked so both fit the
   narrow sidebar without crowding the clear button. */
.doc-search-morph-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Clear Results Button */
.doc-search-clear-btn {
    padding: 4px 10px;
    background: transparent;
    border: 1px solid #dc3545;
    border-radius: 4px;
    color: #dc3545;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.doc-search-clear-btn:hover:not(:disabled) {
    background: #dc3545;
    color: #fff;
}

.doc-search-clear-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================================================
   SORT TOGGLE
   ============================================================================ */

.doc-search-sort-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e9ecef;
    flex-wrap: wrap;
}

.sort-label {
    font-size: 0.8125rem;
    color: #6c757d;
    flex-shrink: 0;
}

.doc-sort-buttons {
    display: flex;
    gap: 4px;
}

.doc-sort-btn {
    padding: 5px 10px;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.75rem;
    font-weight: 500;
    color: #6c757d;
    transition: all 0.2s ease;
}

.doc-sort-btn:hover:not(:disabled) {
    background: #e9ecef;
    border-color: #ced4da;
}

.doc-sort-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.doc-sort-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.sort-loading-indicator {
    font-size: 0.6875rem;
    color: #adb5bd;
    font-style: italic;
}

/* ============================================================================
   SEARCH RESULTS
   ============================================================================ */

.doc-search-results {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.doc-search-loading,
.doc-search-error,
.doc-search-empty {
    padding: 24px 16px;
    text-align: center;
    color: #6c757d;
    font-size: 0.875rem;
}

.doc-search-error {
    color: #dc3545;
}

.doc-search-count {
    padding: 8px 16px;
    font-size: 0.75rem;
    color: #6c757d;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
}

.doc-search-result-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.doc-search-result-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f3f4;
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}

.doc-search-result-item:hover {
    background: #f8f9fa;
}

.doc-search-result-item.current-page {
    background: rgba(139, 69, 19, 0.06);
    border-inline-start: 3px solid var(--color-primary);
}

.doc-search-result-item.current-page:hover {
    background: rgba(139, 69, 19, 0.12);
}

.doc-search-result-item.selected {
    background: rgba(184, 134, 11, 0.08);
    border-inline-start: 3px solid var(--color-goldenrod);
}

.doc-search-result-item.selected:hover {
    background: rgba(184, 134, 11, 0.15);
}

.doc-search-result-item.selected.current-page {
    background: rgba(184, 134, 11, 0.12);
    border-inline-start: 3px solid var(--color-goldenrod);
}

.doc-result-header {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.doc-result-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 4px;
    background: #e9ecef;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #6c757d;
}

.doc-search-result-item.current-page .doc-result-num {
    background: var(--color-primary);
    color: #fff;
}

.doc-result-page {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.doc-result-snippet {
    font-size: 0.8125rem;
    color: #6c757d;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Highlighted search terms in results */
.doc-result-snippet b,
.doc-result-snippet strong {
    color: #2c3e50;
    font-weight: 700;
    background-color: rgba(139, 69, 19, 0.15);
    padding: 0 2px;
    border-radius: 2px;
}

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

@media (max-width: 768px) {
    .document-sidebar {
        width: 100%;
        max-height: 350px;
        position: relative;
        top: auto;
        bottom: auto;
        border-radius: var(--radius-lg);
        margin-bottom: 20px;
    }

    .document-sidebar.collapsed {
        max-height: 50px;
        width: 100%;
    }

    .sidebar-tabs {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .sidebar-tab {
        padding: 10px 12px;
        font-size: 0.875rem;
    }

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

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

@media print {
    .document-sidebar {
        display: none;
    }
}