<div class="right-workspace">
    <div class="toolbar" id="toolbar">
        <button class="btn btn-sm btn-outline-secondary d-md-none me-1" id="btnToggleTableList" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Show or hide the Tables sidebar on smaller screens.">
            <i class="bi bi-list"></i> Tables
        </button>

        <button class="btn btn-sm btn-primary" id="btnCreateTable2" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create a new physical database table and save its normalized schema metadata."><i class="bi bi-plus-lg me-1"></i> Create Table</button>
        <button class="btn btn-sm btn-outline-secondary" id="btnCustomView" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create or update a SELECT-based view using the active database adapter, then save its SQL to project JSON."><i class="bi bi-eye me-1"></i> Create Custom View</button>
        <button class="btn btn-sm btn-outline-secondary" id="btnSqlView" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Create a new SQL view from a validated SELECT or WITH statement."><i class="bi bi-file-code me-1"></i> Create SQL View</button>
        <button class="btn btn-sm btn-outline-primary" id="btnSqlEditor" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Open the SQL Editor — paste and run any SQL (schema + seed) directly against this project's database."><i class="bi bi-terminal me-1"></i> SQL Editor</button>
        <button class="btn btn-sm btn-outline-secondary" id="btnCreateCalendar" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Turn a table with a date column into a month/week/day calendar in the generated app."><i class="bi bi-calendar3 me-1"></i> Create Calendar</button>
        <button class="btn btn-sm btn-outline-secondary" id="btnSync" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Refresh the table list from the database and remove missing tables from the saved workspace state."><i class="bi bi-arrow-repeat me-1"></i> Sync Database</button>
        <button class="btn btn-sm btn-outline-info" id="btnLinkMode" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Turn on link mode to connect a master field to a detail field and create a relationship."><i class="bi bi-link-45deg me-1"></i> Link Tables</button>
        <a href="<?= htmlspecialchars(rtrim((string) ($baseUrl ?? ''), '/') . '/project/' . rawurlencode((string) ($project['slug'] ?? '')) . '/style#menu-editor') ?>" class="btn btn-sm btn-outline-secondary ms-auto" id="btnMenuEditor" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Design the app navigation in the Menu Editor. Edits sync with the Style module."><i class="bi bi-list-nested me-1"></i> Menu Editor</a>
        <button class="btn btn-sm btn-success" id="btnSave" data-bs-toggle="tooltip" data-bs-placement="bottom" title="Save selected tables, card positions, expanded cards, and sidebar filter state."><i class="bi bi-check-lg me-1"></i> Save</button>
    </div>
    <div class="workspace-content" id="workspaceContent">
        <div id="selectedTablesContainer" class="position-relative" style="height: calc(100vh - 120px);">
            <svg id="relationsSvg" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:1;"></svg>
            <div id="relationHint" class="relation-hint d-none"><i class="bi bi-mouse2"></i> Double-click a relation line to edit or delete it.</div>
            <div id="emptySelection" class="text-center py-5 text-muted">
                <i class="bi bi-hand-index display-1 d-block mb-3"></i>
                <h5>Select tables from the left panel</h5>
                <p>Check the tables you want to work with.</p>
            </div>
        </div>
    </div>
</div>
