<div class="left-panel">
    <div class="panel-header d-flex justify-content-between align-items-center">
        <span class="d-inline-flex align-items-center gap-2">
            Tables
            <button class="btn btn-sm btn-outline-primary tables-guide-header-btn pp-guide-trigger" id="btnTablesGuide" data-tables-help-open data-bs-toggle="tooltip" data-bs-placement="bottom" title="Open the complete Tables guide with schema, views, relations, and JSON persistence documentation." aria-label="Open Tables guide">
                <i class="bi bi-question-circle-fill" aria-hidden="true"></i><span>Guide</span>
            </button>
        </span>
        <div>
            <button class="btn btn-sm btn-outline-primary me-1" id="btnSelectAll" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Select all Project tables and views. System-generated tables stay protected."><i class="bi bi-check-all"></i></button>
            <button class="btn btn-sm btn-outline-secondary" id="btnDeselectAll" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Clear the current workspace selection without deleting tables from the database."><i class="bi bi-x-circle"></i></button>
        </div>
    </div>
    <div class="table-filter">
        <i class="bi bi-search"></i>
        <input type="search" id="tableFilter" placeholder="Search tables..." autocomplete="off">
        <span id="tableListStats" class="table-list-stats">0 selected</span>
    </div>
    <ul class="table-list" id="tableList">
        <!-- Populated by JS -->
    </ul>
</div>
