{% extends "base.html" %}

{% block title %}Bibliothek - {{ APP_VERSION }}{% endblock %}

{% block content %}
<div class="content-container">
    <!-- Header Section -->
    <div class="header-section">
        <div class="header-title-group">
            <h1>📚 Bibliothek</h1>
            <p class="subtitle">Bücher, CDs und weitere Medien</p>
        </div>
    </div>

    <!-- Search & Filter Section -->
    <div class="search-filter-section">
        <input type="text" id="searchInput" placeholder="Nach Titel, Autor, ISBN suchen..." class="search-input">
        
        <div class="filter-group" id="filterGroup">
            <button class="filter-btn" id="filterBtn" aria-expanded="false" aria-label="Filter öffnen">
                🔍 Filter <span class="filter-arrow">▼</span>
            </button>
            <div class="filter-dropdown" id="filterDropdown" style="display: none;">
                <div class="filter-section">
                    <h4>Medientyp</h4>
                    <div class="filter-options">
                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="book"> Buch</label>
                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="cd"> CD/DVD</label>
                        <label><input type="checkbox" class="filter-checkbox" data-filter="type" value="other"> Sonstige</label>
                    </div>
                </div>
                <div class="filter-section">
                    <h4>Status</h4>
                    <div class="filter-options">
                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="available"> Verfügbar</label>
                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="borrowed"> Ausgeliehen</label>
                        <label><input type="checkbox" class="filter-checkbox" data-filter="status" value="reserved"> Reserviert</label>
                    </div>
                </div>
                <button id="clearFiltersBtn" class="button">Filter zurücksetzen</button>
            </div>
        </div>

        <!-- Barcode Scanner -->
        <button id="scannerBtn" class="scan-button" aria-expanded="false" aria-label="Scanner öffnen">
            📱 Scanner <span class="scanner-arrow">▼</span>
        </button>
    </div>

    <!-- Scanner Panel -->
    <div id="qrContainer" class="qr-container" style="display: none;">
        <div id="qr-reader" style="width: auto; height: 300px;"></div>
        <span id="qr-result" style="display: none;"></span>
    </div>

    <!-- Table Header (only in table mode) -->
    <div class="library-table-wrapper">
    <div class="table-header" id="tableHeader" style="display: none;">
        <div class="table-row">
            <div class="table-cell title-cell">Titel</div>
            <div class="table-cell author-cell">Autor/Künstler</div>
            <div class="table-cell isbn-cell">ISBN/Code</div>
            <div class="table-cell type-cell">Typ</div>
            <div class="table-cell status-cell">Status</div>
            <div class="table-cell actions-cell">Aktionen</div>
        </div>
    </div>

    <!-- Items Container -->
    <div id="itemsContainer" class="items-container">
        {% if library_items %}
            {% for item in library_items %}
                <div class="item-card library-item" data-item-id="{{ item._id }}" data-type="{{ item.get('ItemType', 'book') }}" data-status="{{ 'borrowed' if item.get('Verfuegbar') == False else 'available' }}">
                    <!-- Card Mode View -->
                    <div class="item-content card-mode">
                        <div class="item-image-wrapper">
                            {% if item.get('Image') %}
                                <img src="/uploads/{{ item.Image }}" alt="{{ item.Name }}" class="item-image">
                            {% else %}
                                <div class="placeholder-image">📚</div>
                            {% endif %}
                        </div>
                        
                        <div class="item-details">
                            <h3 class="item-name">{{ item.Name }}</h3>
                            
                            {% if item.get('Author') %}
                                <p class="item-author">Von: {{ item.Author }}</p>
                            {% endif %}
                            
                            {% if item.get('ISBN') %}
                                <p class="item-isbn">ISBN: {{ item.ISBN }}</p>
                            {% endif %}
                            
                            <div class="item-meta">
                                <span class="item-type">{{ item.get('ItemType', 'Medium') }}</span>
                                <span class="item-status {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
                                    {% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
                                </span>
                            </div>
                        </div>
                    </div>

                    <!-- Table Mode View -->
                    <div class="item-content table-mode" style="display: none;">
                        <div class="table-row">
                            <div class="table-cell title-cell">
                                <span class="descriptor">Titel:</span>
                                <span class="value">{{ item.Name }}</span>
                            </div>
                            <div class="table-cell author-cell">
                                <span class="descriptor">Autor:</span>
                                <span class="value">{{ item.get('Author', '—') }}</span>
                            </div>
                            <div class="table-cell isbn-cell">
                                <span class="descriptor">ISBN:</span>
                                <span class="value">{{ item.get('ISBN', '—') }}</span>
                            </div>
                            <div class="table-cell type-cell">
                                <span class="descriptor">Typ:</span>
                                <span class="value">{{ item.get('ItemType', 'Medium') }}</span>
                            </div>
                            <div class="table-cell status-cell">
                                <span class="descriptor">Status:</span>
                                <span class="value {% if item.get('Verfuegbar') == False %}borrowed{% else %}available{% endif %}">
                                    {% if item.get('Verfuegbar') == False %}Ausgeliehen{% else %}Verfügbar{% endif %}
                                </span>
                            </div>
                            <div class="table-cell actions-cell">
                                <button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
                            </div>
                        </div>
                    </div>

                    <!-- Action Buttons (Card Mode) -->
                    <div class="item-actions card-mode" style="display: flex;">
                        <button class="action-button details-btn" data-item-id="{{ item._id }}">Details</button>
                        {% if item.get('Verfuegbar') == True %}
                            <button class="action-button borrow-btn" data-item-id="{{ item._id }}">Ausleihen</button>
                        {% else %}
                            <button class="action-button return-btn" data-item-id="{{ item._id }}" disabled>Ausgeliehen</button>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <div class="empty-state">
                <p>Keine Bibliotheks-Medien gefunden</p>
            </div>
        {% endif %}
    </div>
    </div>
</div>

<!-- Detail Modal -->
<div id="detailModal" class="modal" style="display: none;">
    <div class="modal-content">
        <button class="modal-close" aria-label="Schließen">✕</button>
        
        <div class="modal-body" id="modalBody">
            <!-- Filled by JavaScript -->
        </div>
    </div>
</div>

<!-- Borrow Modal -->
<div id="borrowModal" class="modal" style="display: none;">
    <div class="modal-content">
        <h2>Ausleihen</h2>
        <form id="borrowForm">
            <input type="hidden" id="borrowItemId" name="item_id">
            
            <div class="form-group">
                <label for="studentIdInput">Schülerausweis-ID (optional):</label>
                <input type="text" id="studentIdInput" name="student_id" placeholder="Ausweis scannen oder eingeben" class="form-input">
            </div>
            
            <div class="form-group">
                <label for="borrowDaysInput">Ausleih-Dauer (Tage):</label>
                <input type="number" id="borrowDaysInput" name="borrow_days" min="1" max="365" class="form-input" value="14">
            </div>
            
            <div class="form-actions">
                <button type="submit" class="button primary-button">Ausleihen</button>
                <button type="button" class="button cancel-button" onclick="document.getElementById('borrowModal').style.display='none'">Abbrechen</button>
            </div>
        </form>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@ericblade/quagga2/dist/quagga.js"></script>
<script>
// View mode persistence
const LIBRARY_VIEW_MODE_KEY = 'inventarLibraryViewMode';
const MOBILE_LIBRARY_MAX_WIDTH = 900;
const MOBILE_LIBRARY_MIN_ITEMS = 24;

function isMobileViewport() {
    return window.matchMedia(`(max-width: ${MOBILE_LIBRARY_MAX_WIDTH}px)`).matches;
}

function setViewMode(mode) {
    localStorage.setItem(LIBRARY_VIEW_MODE_KEY, mode);
    const container = document.getElementById('itemsContainer');
    const tableHeader = document.getElementById('tableHeader');
    const renderedItems = Array.from(container.querySelectorAll('.item-card'));
    const virtualizationState = window.mobileLibraryVirtualizationState || null;
    const detachedItems = virtualizationState && virtualizationState.active && Array.isArray(virtualizationState.items)
        ? virtualizationState.items.filter(item => !container.contains(item))
        : [];
    const items = [...renderedItems, ...detachedItems.filter(item => !container.contains(item))];
    
    items.forEach(item => {
        const cardContent = item.querySelector('.item-content.card-mode');
        const cardActions = item.querySelector('.item-actions.card-mode');
        const tableContent = item.querySelector('.item-content.table-mode');
        
        if (mode === 'table') {
            if (cardContent) cardContent.style.display = 'none';
            if (cardActions) cardActions.style.display = 'none';
            if (tableContent) tableContent.style.display = 'block';
        } else {
            if (cardContent) cardContent.style.display = 'flex';
            if (cardActions) cardActions.style.display = 'flex';
            if (tableContent) tableContent.style.display = 'none';
        }
    });
    
    tableHeader.style.display = mode === 'table' ? 'block' : 'none';
    
    document.getElementById('viewModeToggle').classList.toggle('open', mode === 'table');
}

function initMobileWindowedLibraryLoading() {
    const container = document.getElementById('itemsContainer');
    if (!container) {
        return;
    }

    if (!window.mobileLibraryVirtualizationState) {
        window.mobileLibraryVirtualizationState = {
            active: false,
            items: [],
            topSpacer: null,
            bottomSpacer: null,
            averageItemHeight: Math.max(Math.round(window.innerHeight * 0.35), 230),
            lastStart: -1,
            lastEnd: -1,
            framePending: false,
            scrollListener: null,
            resizeListener: null,
            initialized: false
        };
    }
    const state = window.mobileLibraryVirtualizationState;

    function restoreAllImages() {
        state.items.forEach(item => {
            const image = item.querySelector('img.item-image');
            if (!image) {
                return;
            }

            const originalSrc = image.dataset.mobileSrc || '';
            if (!image.getAttribute('src') && originalSrc) {
                image.setAttribute('src', originalSrc);
            }
        });
    }

    function updateImageMemory(startIndex, endIndex) {
        const imageBuffer = 4;
        state.items.forEach((item, index) => {
            const image = item.querySelector('img.item-image');
            if (!image) {
                return;
            }

            if (!image.dataset.mobileSrc) {
                image.dataset.mobileSrc = image.getAttribute('src') || '';
            }
            image.loading = 'lazy';
            image.decoding = 'async';

            const shouldKeepLoaded = index >= startIndex - imageBuffer && index < endIndex + imageBuffer;
            if (shouldKeepLoaded) {
                if (!image.getAttribute('src') && image.dataset.mobileSrc) {
                    image.setAttribute('src', image.dataset.mobileSrc);
                }
                return;
            }

            if (image.getAttribute('src')) {
                image.removeAttribute('src');
            }
        });
    }

    function renderVisibleWindow() {
        if (!state.active || !state.topSpacer || !state.bottomSpacer) {
            return;
        }

        const viewportHeight = window.innerHeight || 800;
        const scrollTop = window.scrollY || window.pageYOffset || 0;
        const renderBuffer = viewportHeight * 1.5;

        let startIndex = Math.max(0, Math.floor((scrollTop - renderBuffer) / state.averageItemHeight));
        let endIndex = Math.min(state.items.length, Math.ceil((scrollTop + viewportHeight + renderBuffer) / state.averageItemHeight));

        if (endIndex - startIndex < 14) {
            endIndex = Math.min(state.items.length, startIndex + 14);
        }

        if (startIndex === state.lastStart && endIndex === state.lastEnd) {
            return;
        }

        state.lastStart = startIndex;
        state.lastEnd = endIndex;

        while (state.topSpacer.nextSibling && state.topSpacer.nextSibling !== state.bottomSpacer) {
            state.topSpacer.nextSibling.remove();
        }

        const fragment = document.createDocumentFragment();
        for (let index = startIndex; index < endIndex; index += 1) {
            fragment.appendChild(state.items[index]);
        }
        container.insertBefore(fragment, state.bottomSpacer);

        let measuredHeightSum = 0;
        let measuredCount = 0;
        for (let index = startIndex; index < endIndex; index += 1) {
            const height = state.items[index].getBoundingClientRect().height;
            if (height > 0) {
                measuredHeightSum += height;
                measuredCount += 1;
            }
        }

        if (measuredCount > 0) {
            const measuredAverage = measuredHeightSum / measuredCount;
            state.averageItemHeight = Math.round((state.averageItemHeight * 3 + measuredAverage) / 4);
        }

        state.topSpacer.style.height = `${Math.max(0, startIndex * state.averageItemHeight)}px`;
        state.bottomSpacer.style.height = `${Math.max(0, (state.items.length - endIndex) * state.averageItemHeight)}px`;
        updateImageMemory(startIndex, endIndex);
    }

    function scheduleWindowRender() {
        if (!state.active || state.framePending) {
            return;
        }
        state.framePending = true;
        requestAnimationFrame(() => {
            state.framePending = false;
            renderVisibleWindow();
        });
    }

    function activateVirtualization() {
        if (state.active) {
            return;
        }

        if (!Array.isArray(state.items) || state.items.length === 0) {
            state.items = Array.from(container.querySelectorAll('.library-item'));
        }
        if (state.items.length <= MOBILE_LIBRARY_MIN_ITEMS) {
            return;
        }

        state.topSpacer = document.createElement('div');
        state.topSpacer.className = 'mobile-window-spacer top';
        state.bottomSpacer = document.createElement('div');
        state.bottomSpacer.className = 'mobile-window-spacer bottom';

        state.items.forEach(item => item.remove());
        container.appendChild(state.topSpacer);
        container.appendChild(state.bottomSpacer);

        state.lastStart = -1;
        state.lastEnd = -1;
        state.framePending = false;
        state.active = true;

        if (!state.scrollListener) {
            state.scrollListener = () => scheduleWindowRender();
            window.addEventListener('scroll', state.scrollListener, { passive: true });
        }

        scheduleWindowRender();
    }

    function deactivateVirtualization() {
        if (!state.active) {
            if (!Array.isArray(state.items) || state.items.length === 0) {
                state.items = Array.from(container.querySelectorAll('.library-item'));
            }
            return;
        }

        if (state.scrollListener) {
            window.removeEventListener('scroll', state.scrollListener);
            state.scrollListener = null;
        }

        if (state.topSpacer && state.topSpacer.parentNode === container) {
            state.topSpacer.remove();
        }
        if (state.bottomSpacer && state.bottomSpacer.parentNode === container) {
            state.bottomSpacer.remove();
        }

        const fragment = document.createDocumentFragment();
        state.items.forEach(item => fragment.appendChild(item));
        container.appendChild(fragment);

        restoreAllImages();

        state.topSpacer = null;
        state.bottomSpacer = null;
        state.lastStart = -1;
        state.lastEnd = -1;
        state.framePending = false;
        state.active = false;

        const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
        setViewMode(currentMode);
    }

    function syncVirtualizationWithViewport() {
        if (!Array.isArray(state.items) || state.items.length === 0) {
            state.items = Array.from(container.querySelectorAll('.library-item'));
        }

        const shouldVirtualize = isMobileViewport() && state.items.length > MOBILE_LIBRARY_MIN_ITEMS;
        if (shouldVirtualize) {
            activateVirtualization();
            scheduleWindowRender();
        } else {
            deactivateVirtualization();
        }
    }

    if (!state.initialized) {
        state.resizeListener = () => syncVirtualizationWithViewport();
        window.addEventListener('resize', state.resizeListener, { passive: true });
        state.initialized = true;
    }

    syncVirtualizationWithViewport();
}

// Initialize view mode
document.addEventListener('DOMContentLoaded', function() {
    const savedMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
    setViewMode(savedMode);
    
    document.getElementById('viewModeToggle').addEventListener('click', function() {
        const currentMode = localStorage.getItem(LIBRARY_VIEW_MODE_KEY) || 'card';
        const newMode = currentMode === 'card' ? 'table' : 'card';
        setViewMode(newMode);
    });
    
    // Details button handlers
    document.querySelectorAll('.details-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.preventDefault();
            const itemId = this.dataset.itemId;
            fetch(`/get_item_details/${itemId}`)
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        displayLibraryItemDetail(data.item);
                        document.getElementById('detailModal').style.display = 'flex';
                    }
                });
        });
    });
    
    // Borrow button handlers
    document.querySelectorAll('.borrow-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            document.getElementById('borrowItemId').value = this.dataset.itemId;
            document.getElementById('borrowModal').style.display = 'flex';
        });
    });
    
    // Borrow form submit
    document.getElementById('borrowForm').addEventListener('submit', function(e) {
        e.preventDefault();
        const itemId = document.getElementById('borrowItemId').value;
        const studentId = document.getElementById('studentIdInput').value || null;
        const borrowDays = document.getElementById('borrowDaysInput').value || 14;
        
        fetch('/borrow_item', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                item_id: itemId,
                student_id: studentId,
                borrow_days: borrowDays
            })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('Erfolgreich ausgeliehen!');
                location.reload();
            } else {
                alert('Fehler: ' + data.message);
            }
        });
    });
    
    // Modal close handlers
    document.querySelectorAll('.modal-close').forEach(btn => {
        btn.addEventListener('click', function() {
            this.closest('.modal').style.display = 'none';
        });
    });
    
    // Close modals on outside click
    document.querySelectorAll('.modal').forEach(modal => {
        modal.addEventListener('click', function(e) {
            if (e.target === this) this.style.display = 'none';
        });
    });

    initMobileWindowedLibraryLoading();
});

function displayLibraryItemDetail(item) {
    const modalBody = document.getElementById('modalBody');
    const returnBtn = item.Verfuegbar === false ? `<button class="action-button return-btn" onclick="returnItem('${item._id}')">Zurückgeben</button>` : '';
    const borrowBtn = item.Verfuegbar === true ? `<button class="action-button borrow-btn" onclick="openBorrowModal('${item._id}')">Ausleihen</button>` : '';
    
    modalBody.innerHTML = `
        <h2>${item.Name}</h2>
        <div class="detail-content">
            ${item.Image ? `<img src="/uploads/${item.Image}" alt="${item.Name}" style="max-width: 200px; margin-bottom: 20px;">` : ''}
            <p><strong>Autor:</strong> ${item.Author || '—'}</p>
            <p><strong>ISBN:</strong> ${item.ISBN || '—'}</p>
            <p><strong>Typ:</strong> ${item.ItemType || 'Medium'}</p>
            <p><strong>Status:</strong> ${item.Verfuegbar === false ? 'Ausgeliehen' : 'Verfügbar'}</p>
            ${item.User ? `<p><strong>Ausgeliehen von:</strong> ${item.User}</p>` : ''}
            ${item.Beschreibung ? `<p><strong>Beschreibung:</strong> ${item.Beschreibung}</p>` : ''}
            <div class="modal-actions">
                ${borrowBtn}
                ${returnBtn}
            </div>
        </div>
    `;
}

function openBorrowModal(itemId) {
    document.getElementById('borrowItemId').value = itemId;
    document.getElementById('borrowModal').style.display = 'flex';
    document.getElementById('detailModal').style.display = 'none';
}

function returnItem(itemId) {
    if (confirm('Wirklich zurückgeben?')) {
        fetch('/return_item', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({item_id: itemId})
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('Erfolgreich zurückgegeben!');
                location.reload();
            }
        });
    }
}

// Filter dropdown toggle with auto-close
function closeAllFilters() {
    document.querySelectorAll('.filter-dropdown').forEach(d => d.style.display = 'none');
    document.getElementById('filterBtn').setAttribute('aria-expanded', 'false');
    document.getElementById('filterBtn').classList.remove('open');
}

document.getElementById('filterBtn').addEventListener('click', function(e) {
    e.stopPropagation();
    const dropdown = document.getElementById('filterDropdown');
    const isOpen = dropdown.style.display !== 'none';
    closeAllFilters();
    if (!isOpen) {
        dropdown.style.display = 'block';
        this.setAttribute('aria-expanded', 'true');
        this.classList.add('open');
    }
});

document.addEventListener('click', closeAllFilters);
document.getElementById('filterDropdown').addEventListener('click', e => e.stopPropagation());

// Clear filters
document.getElementById('clearFiltersBtn').addEventListener('click', function() {
    document.querySelectorAll('.filter-checkbox').forEach(c => c.checked = false);
    closeAllFilters();
});

// Scanner toggle
// Scanner state tracking
let isScanning = false; 

document.getElementById('scannerBtn').addEventListener('click', function(e) {
    e.stopPropagation();
    const container = document.getElementById('qrContainer');
    const isOpen = container.style.display !== 'none';
    const btn = this;
    
    if (isOpen) {
        // Close the scanner
        container.style.display = 'none';
        Quagga.stop();
        isScanning = false;
        
        btn.classList.remove('open');
        btn.setAttribute('aria-expanded', 'false');
    } else {
        // Open the scanner
        container.style.display = 'block';
        btn.classList.add('open');
        btn.setAttribute('aria-expanded', 'true');
        
        Quagga.init({
            inputStream: {
                name: "Live",
                type: "LiveStream",
                // Targets the element where the video stream will inject
                target: document.querySelector('#qr-reader'), 
                constraints: {
                    width: 640,
                    height: 480,
                    facingMode: "environment" // Forces back camera
                },
            },
            decoder: {
                // Optimized for 1D barcodes (e.g., student IDs, member cards)
                readers: ["code_128_reader", "ean_reader", "code_39_reader", "upc_reader"]
            } 
        }, function(err) {
            if (err) {
                console.error("Initialization error:", err);
                alert("Kamera konnte nicht gestartet werden.");
                return;
            }
            Quagga.start();
            isScanning = true;
        });
    }
});

// Single Quagga event listener for successful scans
Quagga.onDetected(function(data) {
    const decodedText = data.codeResult.code;
    const studentId = String(decodedText || '').trim();
    
    // Stop scanning immediately to prevent multiple triggers
    Quagga.stop();
    isScanning = false;
    
    // Reset UI states to closed
    const container = document.getElementById('qrContainer');
    const btn = document.getElementById('scannerBtn');
    if (container) container.style.display = 'none';
    if (btn) {
        btn.classList.remove('open');
        btn.setAttribute('aria-expanded', 'false');
    }
    
    // Route the scanned data to your input
    document.getElementById('studentIdInput').value = studentId;
    alert('Ausweis gescannt: ' + studentId);
});
</script>

<style>
.library-item .item-image-wrapper {
    width: 120px;
    height: 160px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.library-item .placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: white;
}

.library-item .item-author {
    font-size: 0.9rem;
    color: #666;
    margin: 4px 0;
}

.library-item .item-isbn {
    font-size: 0.85rem;
    color: #999;
    font-family: monospace;
    margin: 4px 0;
}

.library-item .item-type {
    display: inline-block;
    background: #e8f0fe;
    color: #1967d2;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.library-item .item-status.available {
    background: #e6f4ea;
    color: #137333;
}

.library-item .item-status.borrowed {
    background: #fce8e6;
    color: #b3261e;
}

/* Mobile: allow horizontal scrolling for table-mode views */
@media (max-width: 900px) {
    .library-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        width: 100%;
    }
    .library-table-wrapper .table-row {
        min-width: 720px; /* allow table to have intrinsic width and be scrolled */
    }
    .table-header, .item-content.table-mode {
        display: block; /* keep rows stacked but allow horizontal scroll */
    }
}
</style>
{% endblock %}