/* DataTable Component */ .data-table { background: var(--bg-secondary); border: 1px solid var(--border-primary); border-radius: var(--radius-lg); overflow: hidden; } .data-table table { width: 100%; border-collapse: collapse; } .data-table th, .data-table td { padding: 14px 20px; text-align: left; border-bottom: 1px solid var(--border-primary); } .data-table th { background: var(--bg-tertiary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); } .data-table__th--sortable { cursor: pointer; user-select: none; transition: color var(--transition-fast); } .data-table__th--sortable:hover { color: var(--text-primary); } .data-table__th-content { display: flex; align-items: center; gap: 6px; } .data-table__sort-icon { transition: transform var(--transition-fast); } .data-table__sort-icon--desc { transform: rotate(180deg); } .data-table tbody tr:last-child td { border-bottom: none; } .data-table tbody tr { transition: background var(--transition-fast); } .data-table tbody tr:hover { background: var(--bg-tertiary); } .data-table td strong { color: var(--accent-primary); font-weight: 600; } /* Empty state */ .data-table__empty { text-align: center; padding: 48px 32px; color: var(--text-tertiary); background: var(--bg-secondary); border: 1px dashed var(--border-secondary); border-radius: var(--radius-lg); } .data-table__empty p { font-size: 0.9375rem; } /* Utility classes for cells */ .data-table .cell-mono { font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; font-size: 0.8125rem; color: var(--text-tertiary); background: var(--bg-tertiary); padding: 4px 8px; border-radius: var(--radius-sm); } .data-table .cell-truncate { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }