feat: Add advanced data table features to database page

- Add cell click-to-copy with visual feedback
- Add text filter to search across all columns
- Add column visibility toggle (click schema columns to show/hide)
- Add row selection with checkboxes
- Copy All respects visible columns and selected rows
- Auto-reset selections when changing table/page/query

frontend/src/pages/DatabasePage.vue

@@ -41,8 +41,67 @@ const queryLoading = ref(false)
 // Active tab
 const activeTab = ref<'tables' | 'query' | 'stats'>('tables')
 
+// Copy feedback
+const copiedCell = ref<string | null>(null)
+const copiedAll = ref(false)
+
+// Filters
+const tableFilter = ref('')
+const queryFilter = ref('')
+
+// Column visibility
+const hiddenColumns = ref<Set<string>>(new Set())
+const queryHiddenColumns = ref<Set<string>>(new Set())
+
+// Row selection
+const selectedRows = ref<Set<number>>(new Set())
+const querySelectedRows = ref<Set<number>>(new Set())
+
 const totalPages = computed(() => Math.ceil(totalRecords.value / pageSize.value))
 
+const filteredTableData = computed(() => {
+  if (!tableFilter.value.trim()) return tableData.value
+  const search = tableFilter.value.toLowerCase()
+  return tableData.value.filter(row =>
+    Object.values(row).some(val =>
+      String(val).toLowerCase().includes(search)
+    )
+  )
+})
+
+const filteredQueryResult = computed(() => {
+  if (!queryResult.value) return null
+  if (!queryFilter.value.trim()) return queryResult.value
+  const search = queryFilter.value.toLowerCase()
+  return queryResult.value.filter(row =>
+    Object.values(row).some(val =>
+      String(val).toLowerCase().includes(search)
+    )
+  )
+})
+
+// Visible columns (excluding hidden ones)
+const visibleTableColumns = computed(() => {
+  const allKeys = getColumnKeys(tableData.value)
+  return allKeys.filter(key => !hiddenColumns.value.has(key))
+})
+
+const visibleQueryColumns = computed(() => {
+  const allKeys = getColumnKeys(queryResult.value || [])
+  return allKeys.filter(key => !queryHiddenColumns.value.has(key))
+})
+
+// Check if all visible rows are selected
+const allTableRowsSelected = computed(() => {
+  if (filteredTableData.value.length === 0) return false
+  return filteredTableData.value.every((_, idx) => selectedRows.value.has(idx))
+})
+
+const allQueryRowsSelected = computed(() => {
+  if (!filteredQueryResult.value || filteredQueryResult.value.length === 0) return false
+  return filteredQueryResult.value.every((_, idx) => querySelectedRows.value.has(idx))
+})
+
 async function fetchTables() {
   loading.value = true
   error.value = null
@@ -70,6 +129,9 @@ async function fetchDbStats() {
 async function selectTable(tableName: string) {
   selectedTable.value = tableName
   currentPage.value = 1
+  tableFilter.value = ''
+  hiddenColumns.value.clear()
+  selectedRows.value.clear()
   await Promise.all([fetchTableSchema(tableName), fetchTableData(tableName)])
 }
 
@@ -106,6 +168,7 @@ async function fetchTableData(tableName: string) {
 function changePage(page: number) {
   if (page >= 1 && page <= totalPages.value && selectedTable.value) {
     currentPage.value = page
+    selectedRows.value.clear()
     fetchTableData(selectedTable.value)
   }
 }
@@ -116,6 +179,9 @@ async function executeQuery() {
   queryLoading.value = true
   queryError.value = null
   queryResult.value = null
+  queryFilter.value = ''
+  queryHiddenColumns.value.clear()
+  querySelectedRows.value.clear()
 
   try {
     const res = await fetch('http://localhost:4101/api/database/query', {
@@ -152,6 +218,83 @@ function getColumnKeys(data: any[]): string[] {
   return Object.keys(data[0])
 }
 
+async function copyCell(value: any, cellId: string) {
+  const textToCopy = value === null ? 'NULL' :
+    typeof value === 'object' ? JSON.stringify(value, null, 2) : String(value)
+
+  try {
+    await navigator.clipboard.writeText(textToCopy)
+    copiedCell.value = cellId
+    setTimeout(() => {
+      copiedCell.value = null
+    }, 1500)
+  } catch (e) {
+    console.error('Failed to copy:', e)
+  }
+}
+
+function toggleColumn(column: string, isQuery = false) {
+  const set = isQuery ? queryHiddenColumns.value : hiddenColumns.value
+  if (set.has(column)) {
+    set.delete(column)
+  } else {
+    set.add(column)
+  }
+}
+
+function toggleRowSelection(idx: number, isQuery = false) {
+  const set = isQuery ? querySelectedRows.value : selectedRows.value
+  if (set.has(idx)) {
+    set.delete(idx)
+  } else {
+    set.add(idx)
+  }
+}
+
+function toggleAllRows(isQuery = false) {
+  const set = isQuery ? querySelectedRows.value : selectedRows.value
+  const data = isQuery ? filteredQueryResult.value : filteredTableData.value
+  const allSelected = isQuery ? allQueryRowsSelected.value : allTableRowsSelected.value
+
+  if (allSelected) {
+    set.clear()
+  } else {
+    data?.forEach((_, idx) => set.add(idx))
+  }
+}
+
+function getDataToCopy(data: any[], visibleCols: string[], selectedSet: Set<number>): any[] {
+  // If rows are selected, only copy those; otherwise copy all
+  const rowsToUse = selectedSet.size > 0
+    ? data.filter((_, idx) => selectedSet.has(idx))
+    : data
+
+  // Filter to only visible columns
+  return rowsToUse.map(row => {
+    const filtered: Record<string, any> = {}
+    visibleCols.forEach(col => {
+      filtered[col] = row[col]
+    })
+    return filtered
+  })
+}
+
+async function copyAllFiltered(data: any[], visibleCols: string[], selectedSet: Set<number>) {
+  const dataToCopy = getDataToCopy(data, visibleCols, selectedSet)
+  if (dataToCopy.length === 0) return
+
+  try {
+    const jsonText = JSON.stringify(dataToCopy, null, 2)
+    await navigator.clipboard.writeText(jsonText)
+    copiedAll.value = true
+    setTimeout(() => {
+      copiedAll.value = false
+    }, 2000)
+  } catch (e) {
+    console.error('Failed to copy:', e)
+  }
+}
+
 onMounted(() => {
   fetchTables()
   fetchDbStats()
@@ -249,36 +392,127 @@ onMounted(() => {
         <div v-else class="table-view">
           <!-- Schema info -->
           <div class="schema-info">
+            <div class="schema-header">
               <h3>{{ selectedTable }}</h3>
+              <span class="schema-hint">Click columns to show/hide</span>
+            </div>
             <div class="schema-columns">
               <span
                 v-for="col in tableSchema"
                 :key="col.name"
-                class="schema-col"
-                :class="{ pk: col.pk }"
+                class="schema-col clickable"
+                :class="{ pk: col.pk, hidden: hiddenColumns.has(col.name) }"
+                @click="toggleColumn(col.name)"
+                :title="hiddenColumns.has(col.name) ? 'Click to show' : 'Click to hide'"
               >
+                <svg v-if="!hiddenColumns.has(col.name)" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                  <circle cx="12" cy="12" r="3"/>
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+                  <line x1="1" y1="1" x2="23" y2="23"/>
+                </svg>
                 {{ col.name }}
                 <small>{{ col.type }}</small>
               </span>
             </div>
           </div>
 
+          <!-- Filter bar -->
+          <div class="filter-bar">
+            <div class="filter-input-wrapper">
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="11" cy="11" r="8"/>
+                <path d="m21 21-4.35-4.35"/>
+              </svg>
+              <input
+                v-model="tableFilter"
+                type="text"
+                placeholder="Filter results..."
+                class="filter-input"
+              />
+              <button v-if="tableFilter" class="clear-filter" @click="tableFilter = ''">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+                </svg>
+              </button>
+            </div>
+            <div class="filter-actions">
+              <span class="filter-count">
+                <template v-if="selectedRows.size > 0">
+                  {{ selectedRows.size }} selected
+                </template>
+                <template v-else>
+                  {{ filteredTableData.length }} of {{ tableData.length }} rows
+                </template>
+                <template v-if="hiddenColumns.size > 0">
+                  ({{ visibleTableColumns.length }}/{{ getColumnKeys(tableData).length }} cols)
+                </template>
+              </span>
+              <button
+                class="btn-copy-all"
+                :class="{ copied: copiedAll }"
+                @click="copyAllFiltered(filteredTableData, visibleTableColumns, selectedRows)"
+                :disabled="filteredTableData.length === 0 || visibleTableColumns.length === 0"
+              >
+                <svg v-if="!copiedAll" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                </svg>
+                <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <polyline points="20 6 9 17 4 12"/>
+                </svg>
+                {{ copiedAll ? 'Copied!' : (selectedRows.size > 0 ? 'Copy Selected' : 'Copy All') }}
+              </button>
+            </div>
+          </div>
+
           <!-- Data table -->
           <div class="data-table-container">
-            <table v-if="tableData.length > 0" class="data-table">
+            <table v-if="filteredTableData.length > 0 && visibleTableColumns.length > 0" class="data-table">
               <thead>
                 <tr>
-                  <th v-for="key in getColumnKeys(tableData)" :key="key">{{ key }}</th>
+                  <th class="checkbox-col">
+                    <input
+                      type="checkbox"
+                      :checked="allTableRowsSelected"
+                      @change="toggleAllRows(false)"
+                      title="Select all"
+                    />
+                  </th>
+                  <th v-for="key in visibleTableColumns" :key="key">{{ key }}</th>
                 </tr>
               </thead>
               <tbody>
-                <tr v-for="(row, idx) in tableData" :key="idx">
-                  <td v-for="key in getColumnKeys(tableData)" :key="key">
-                    {{ formatValue(row[key]) }}
+                <tr
+                  v-for="(row, idx) in filteredTableData"
+                  :key="idx"
+                  :class="{ 'row-selected': selectedRows.has(idx) }"
+                >
+                  <td class="checkbox-col">
+                    <input
+                      type="checkbox"
+                      :checked="selectedRows.has(idx)"
+                      @change="toggleRowSelection(idx, false)"
+                    />
+                  </td>
+                  <td
+                    v-for="key in visibleTableColumns"
+                    :key="key"
+                    class="copyable"
+                    :class="{ copied: copiedCell === `data-${idx}-${key}` }"
+                    @click="copyCell(row[key], `data-${idx}-${key}`)"
+                    :title="'Click to copy'"
+                  >
+                    <span class="cell-content">{{ formatValue(row[key]) }}</span>
+                    <span v-if="copiedCell === `data-${idx}-${key}`" class="copied-badge">Copied!</span>
                   </td>
                 </tr>
               </tbody>
             </table>
+            <div v-else-if="visibleTableColumns.length === 0" class="no-data">All columns hidden</div>
+            <div v-else-if="tableData.length > 0" class="no-data">No matching records</div>
             <div v-else class="no-data">No records found</div>
           </div>
 
@@ -329,23 +563,127 @@ onMounted(() => {
           <div v-if="queryError" class="query-error">
             {{ queryError }}
           </div>
-          <div v-else-if="queryResult" class="data-table-container">
-            <table v-if="queryResult.length > 0" class="data-table">
+          <div v-else-if="queryResult" class="query-results-content">
+            <!-- Column toggles for query -->
+            <div v-if="queryResult.length > 0" class="query-columns-bar">
+              <span class="columns-label">Columns:</span>
+              <div class="query-columns-list">
+                <span
+                  v-for="col in getColumnKeys(queryResult)"
+                  :key="col"
+                  class="query-col-toggle"
+                  :class="{ hidden: queryHiddenColumns.has(col) }"
+                  @click="toggleColumn(col, true)"
+                  :title="queryHiddenColumns.has(col) ? 'Click to show' : 'Click to hide'"
+                >
+                  <svg v-if="!queryHiddenColumns.has(col)" xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
+                    <circle cx="12" cy="12" r="3"/>
+                  </svg>
+                  <svg v-else xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
+                    <line x1="1" y1="1" x2="23" y2="23"/>
+                  </svg>
+                  {{ col }}
+                </span>
+              </div>
+            </div>
+
+            <!-- Filter bar for query results -->
+            <div class="filter-bar">
+              <div class="filter-input-wrapper">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <circle cx="11" cy="11" r="8"/>
+                  <path d="m21 21-4.35-4.35"/>
+                </svg>
+                <input
+                  v-model="queryFilter"
+                  type="text"
+                  placeholder="Filter results..."
+                  class="filter-input"
+                />
+                <button v-if="queryFilter" class="clear-filter" @click="queryFilter = ''">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 6 6 18"/><path d="m6 6 12 12"/>
+                  </svg>
+                </button>
+              </div>
+              <div class="filter-actions">
+                <span class="filter-count">
+                  <template v-if="querySelectedRows.size > 0">
+                    {{ querySelectedRows.size }} selected
+                  </template>
+                  <template v-else>
+                    {{ filteredQueryResult?.length || 0 }} of {{ queryResult.length }} rows
+                  </template>
+                  <template v-if="queryHiddenColumns.size > 0">
+                    ({{ visibleQueryColumns.length }}/{{ getColumnKeys(queryResult).length }} cols)
+                  </template>
+                </span>
+                <button
+                  class="btn-copy-all"
+                  :class="{ copied: copiedAll }"
+                  @click="copyAllFiltered(filteredQueryResult || [], visibleQueryColumns, querySelectedRows)"
+                  :disabled="!filteredQueryResult || filteredQueryResult.length === 0 || visibleQueryColumns.length === 0"
+                >
+                  <svg v-if="!copiedAll" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"/>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+                  </svg>
+                  <svg v-else xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <polyline points="20 6 9 17 4 12"/>
+                  </svg>
+                  {{ copiedAll ? 'Copied!' : (querySelectedRows.size > 0 ? 'Copy Selected' : 'Copy All') }}
+                </button>
+              </div>
+            </div>
+
+            <div class="data-table-container">
+              <table v-if="filteredQueryResult && filteredQueryResult.length > 0 && visibleQueryColumns.length > 0" class="data-table">
                 <thead>
                   <tr>
-                  <th v-for="key in getColumnKeys(queryResult)" :key="key">{{ key }}</th>
+                    <th class="checkbox-col">
+                      <input
+                        type="checkbox"
+                        :checked="allQueryRowsSelected"
+                        @change="toggleAllRows(true)"
+                        title="Select all"
+                      />
+                    </th>
+                    <th v-for="key in visibleQueryColumns" :key="key">{{ key }}</th>
                   </tr>
                 </thead>
                 <tbody>
-                <tr v-for="(row, idx) in queryResult" :key="idx">
-                  <td v-for="key in getColumnKeys(queryResult)" :key="key">
-                    {{ formatValue(row[key]) }}
+                  <tr
+                    v-for="(row, idx) in filteredQueryResult"
+                    :key="idx"
+                    :class="{ 'row-selected': querySelectedRows.has(idx) }"
+                  >
+                    <td class="checkbox-col">
+                      <input
+                        type="checkbox"
+                        :checked="querySelectedRows.has(idx)"
+                        @change="toggleRowSelection(idx, true)"
+                      />
+                    </td>
+                    <td
+                      v-for="key in visibleQueryColumns"
+                      :key="key"
+                      class="copyable"
+                      :class="{ copied: copiedCell === `query-${idx}-${key}` }"
+                      @click="copyCell(row[key], `query-${idx}-${key}`)"
+                      :title="'Click to copy'"
+                    >
+                      <span class="cell-content">{{ formatValue(row[key]) }}</span>
+                      <span v-if="copiedCell === `query-${idx}-${key}`" class="copied-badge">Copied!</span>
                     </td>
                   </tr>
                 </tbody>
               </table>
+              <div v-else-if="visibleQueryColumns.length === 0" class="no-data">All columns hidden</div>
+              <div v-else-if="queryResult.length > 0" class="no-data">No matching records</div>
               <div v-else class="no-data">Query returned no results</div>
-            <div class="result-count">{{ queryResult.length }} row(s)</div>
+            </div>
           </div>
         </div>
       </div>
@@ -605,12 +943,24 @@ onMounted(() => {
   border-bottom: 1px solid var(--border-color);
 }
 
+.schema-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 0.75rem;
+}
+
 .schema-info h3 {
-  margin: 0 0 0.75rem 0;
+  margin: 0;
   font-size: 1rem;
   color: var(--text-primary);
 }
 
+.schema-hint {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
 .schema-columns {
   display: flex;
   flex-wrap: wrap;
@@ -628,16 +978,187 @@ onMounted(() => {
   color: var(--text-secondary);
 }
 
+.schema-col.clickable {
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+}
+
+.schema-col.clickable:hover {
+  background: var(--bg-hover);
+}
+
+.schema-col.hidden {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
 .schema-col.pk {
   background: var(--accent-muted);
   color: var(--accent);
 }
 
+.schema-col.pk.hidden {
+  background: var(--bg-tertiary);
+}
+
 .schema-col small {
   color: var(--text-muted);
   font-size: 0.7rem;
 }
 
+/* Query columns bar */
+.query-columns-bar {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.5rem 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  overflow-x: auto;
+}
+
+.columns-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.query-columns-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.query-col-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.2rem 0.5rem;
+  background: var(--bg-tertiary);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  cursor: pointer;
+  transition: all 0.15s;
+  user-select: none;
+}
+
+.query-col-toggle:hover {
+  background: var(--bg-hover);
+}
+
+.query-col-toggle.hidden {
+  opacity: 0.5;
+  text-decoration: line-through;
+}
+
+/* Filter bar */
+.filter-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.filter-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex: 1;
+  max-width: 400px;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-primary);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-muted);
+}
+
+.filter-input-wrapper:focus-within {
+  border-color: var(--accent);
+}
+
+.filter-input {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  outline: none;
+}
+
+.filter-input::placeholder {
+  color: var(--text-muted);
+}
+
+.clear-filter {
+  padding: 0.25rem;
+  background: transparent;
+  border: none;
+  color: var(--text-muted);
+  cursor: pointer;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.clear-filter:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.filter-actions {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.filter-count {
+  font-size: 0.8rem;
+  color: var(--text-muted);
+}
+
+.btn-copy-all {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  background: var(--bg-hover);
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  color: var(--text-secondary);
+  font-size: 0.8rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.btn-copy-all:hover:not(:disabled) {
+  background: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.btn-copy-all:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.btn-copy-all.copied {
+  background: var(--accent);
+  border-color: var(--accent);
+  color: white;
+}
+
+.query-results-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
 .data-table-container {
   flex: 1;
   overflow: auto;
@@ -670,6 +1191,7 @@ onMounted(() => {
   letter-spacing: 0.05em;
   position: sticky;
   top: 0;
+  z-index: 1;
 }
 
 .data-table td {
@@ -680,6 +1202,72 @@ onMounted(() => {
   background: var(--bg-hover);
 }
 
+/* Checkbox column */
+.checkbox-col {
+  width: 40px;
+  text-align: center;
+  padding: 0.5rem !important;
+}
+
+.checkbox-col input[type="checkbox"] {
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  accent-color: var(--accent);
+}
+
+/* Selected row */
+.data-table tr.row-selected td {
+  background: var(--accent-muted);
+}
+
+.data-table tr.row-selected:hover td {
+  background: var(--accent-muted);
+  filter: brightness(0.95);
+}
+
+.data-table td.copyable {
+  cursor: pointer;
+  position: relative;
+  transition: background 0.15s;
+}
+
+.data-table td.copyable:hover {
+  background: var(--accent-muted);
+}
+
+.data-table td.copyable:active {
+  background: var(--accent);
+  color: white;
+}
+
+.data-table td.copied {
+  background: var(--success-bg, #d4edda);
+}
+
+.cell-content {
+  display: block;
+}
+
+.copied-badge {
+  position: absolute;
+  top: 50%;
+  right: 0.5rem;
+  transform: translateY(-50%);
+  padding: 0.125rem 0.375rem;
+  background: var(--accent);
+  color: white;
+  font-size: 0.65rem;
+  font-weight: 600;
+  border-radius: 4px;
+  animation: fadeIn 0.15s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(-50%) scale(0.9); }
+  to { opacity: 1; transform: translateY(-50%) scale(1); }
+}
+
 .no-data {
   text-align: center;
   padding: 2rem;