/**
 * Help Page Styles - Admin Documentation
 * T018: Doc-tree styles
 * T024: Split view and doc-viewer styles
 * T026: Mobile responsive layout
 */

/* ==================== Help Page Layout ==================== */

.help-page {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
}

.help-page__header {
    margin-bottom: 2rem;
    text-align: center;
}

.help-page__header h1 {
    color: #2d7a3e;
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.help-page__subtitle {
    color: #666;
    font-size: 1rem;
}

/* T023: Split view layout */
.help-page__content {
    display: flex;
    gap: 2rem;
    min-height: 600px;
}

.help-page__sidebar {
    flex: 0 0 350px;
    min-width: 0;
}

.help-page__viewer {
    flex: 1;
    min-width: 0;
}

/* Loading and error states */
.help-page__loading,
.help-page__error {
    text-align: center;
    padding: 3rem;
}

.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #2d7a3e;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.btn-retry {
    background-color: #2d7a3e;
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    margin-top: 1rem;
}

.btn-retry:hover {
    background-color: #236030;
}

/* ==================== T018: Doc Tree Styles ==================== */

.doc-tree {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
    overflow-y: auto;
}

.doc-tree__header {
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
}

.doc-tree__header h3 {
    color: #2d7a3e;
    font-size: 1.25rem;
    margin: 0;
}

.doc-tree__empty {
    text-align: center;
    color: #666;
    padding: 2rem;
}

/* Category styles */
.doc-tree__category {
    margin-bottom: 1rem;
}

.doc-tree__category-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.doc-tree__category-header:hover {
    background: #e9ecef;
    border-color: #2d7a3e;
}

.doc-tree__expand-icon {
    font-size: 0.75rem;
    color: #666;
    min-width: 16px;
    transition: transform 0.2s;
}

.doc-tree__category.expanded .doc-tree__expand-icon {
    transform: rotate(0deg);
}

.doc-tree__category-icon {
    font-size: 1.25rem;
}

.doc-tree__category-name {
    flex: 1;
    font-weight: 600;
    color: #333;
}

.doc-tree__category-count {
    color: #666;
    font-size: 0.875rem;
}

/* Document list */
.doc-tree__documents {
    margin-top: 0.5rem;
    margin-left: 1rem;
}

.doc-tree__no-docs {
    color: #999;
    font-style: italic;
    padding: 0.5rem;
}

.doc-tree__document {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.25rem;
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.doc-tree__document:hover {
    background: #f0f7f1;
    border-color: #2d7a3e;
}

.doc-tree__document.selected {
    background: #2d7a3e;
    color: white;
    border-color: #2d7a3e;
}

.doc-tree__document.selected .doc-tree__document-icon {
    filter: brightness(0) invert(1);
}

.doc-tree__document-icon {
    font-size: 1rem;
}

.doc-tree__document-title {
    flex: 1;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ==================== T024: Doc Viewer Styles ==================== */

.doc-viewer {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    height: 100%;
    overflow-y: auto;
    padding: 2rem;
}

.doc-viewer__loading,
.doc-viewer__error,
.doc-viewer__empty {
    text-align: center;
    padding: 3rem;
    color: #666;
}

.doc-viewer__header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #dee2e6;
}

.doc-viewer__title {
    color: #2d7a3e;
    font-size: 1.75rem;
    margin: 0 0 0.5rem 0;
}

.doc-viewer__path {
    color: #666;
    font-size: 0.875rem;
    font-family: 'Courier New', monospace;
}

.doc-viewer__content {
    line-height: 1.6;
    color: #333;
}

/* Markdown content styling */
.doc-viewer__content h1 {
    color: #2d7a3e;
    font-size: 2rem;
    margin: 2rem 0 1rem;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 0.5rem;
}

.doc-viewer__content h2 {
    color: #2d7a3e;
    font-size: 1.5rem;
    margin: 1.5rem 0 1rem;
}

.doc-viewer__content h3 {
    color: #333;
    font-size: 1.25rem;
    margin: 1.25rem 0 0.75rem;
}

.doc-viewer__content p {
    margin: 1rem 0;
}

.doc-viewer__content a {
    color: #2d7a3e;
    text-decoration: underline;
}

.doc-viewer__content a:hover {
    color: #236030;
}

.doc-viewer__content a[data-internal-link="true"] {
    font-weight: 500;
}

.doc-viewer__content ul,
.doc-viewer__content ol {
    margin: 1rem 0;
    padding-left: 2rem;
}

.doc-viewer__content li {
    margin: 0.5rem 0;
}

.doc-viewer__content code {
    background: #f8f9fa;
    padding: 0.2rem 0.4rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.doc-viewer__content pre {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    overflow-x: auto;
    margin: 1rem 0;
}

.doc-viewer__content pre code {
    background: none;
    padding: 0;
    font-size: 0.875rem;
}

.doc-viewer__content table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
}

.doc-viewer__content th,
.doc-viewer__content td {
    border: 1px solid #dee2e6;
    padding: 0.75rem;
    text-align: left;
}

.doc-viewer__content th {
    background: #f8f9fa;
    font-weight: 600;
}

.doc-viewer__content blockquote {
    border-left: 4px solid #2d7a3e;
    padding-left: 1rem;
    margin: 1rem 0;
    color: #666;
    font-style: italic;
}

/* Syntax highlighting (Pygments) */
.doc-viewer__content .highlight {
    background: #f8f9fa;
    border-radius: 6px;
    margin: 1rem 0;
}

/* ==================== T026: Mobile Responsive Layout ==================== */

@media (max-width: 768px) {
    .help-page {
        padding: 1rem;
    }

    .help-page__header h1 {
        font-size: 1.5rem;
    }

    /* Stack layout on mobile */
    .help-page__content {
        flex-direction: column;
        gap: 1rem;
    }

    .help-page__sidebar {
        flex: none;
        width: 100%;
    }

    .doc-tree {
        max-height: 400px;
    }

    .doc-viewer {
        padding: 1rem;
    }

    .doc-viewer__title {
        font-size: 1.5rem;
    }

    .doc-viewer__content h1 {
        font-size: 1.5rem;
    }

    .doc-viewer__content h2 {
        font-size: 1.25rem;
    }

    .doc-viewer__content h3 {
        font-size: 1.1rem;
    }

    /* Make tables scrollable on mobile */
    .doc-viewer__content table {
        display: block;
        overflow-x: auto;
    }
}

@media (max-width: 480px) {
    .help-page {
        padding: 0.5rem;
    }

    .doc-tree {
        padding: 0.75rem;
    }

    .doc-viewer {
        padding: 0.75rem;
    }

    .doc-tree__category-header {
        padding: 0.5rem;
        font-size: 0.9rem;
    }

    .doc-tree__document {
        padding: 0.5rem;
        font-size: 0.85rem;
    }
}

/* Print styles */
@media print {
    .help-page__sidebar {
        display: none;
    }

    .help-page__viewer {
        flex: none;
        width: 100%;
    }

    .doc-viewer {
        border: none;
        box-shadow: none;
    }
}