.dw-table__wrapper { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); } .dw-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .dw-table__th { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); font-weight: 600; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--color-border); white-space: nowrap; user-select: none; } .dw-table__th--sortable { cursor: pointer; } .dw-table__th--sortable:hover { color: var(--color-text-secondary); } .dw-table__th--right { text-align: right; } .dw-table__sort-icon { font-size: 10px; color: var(--color-accent); } .dw-table__td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); color: var(--color-text-primary); vertical-align: middle; } .dw-table__td--right { text-align: right; } .dw-table__row:last-child .dw-table__td { border-bottom: none; } .dw-table__row--clickable { cursor: pointer; transition: background var(--transition-fast); } .dw-table__row--clickable:hover { background: var(--color-surface-hover); } .dw-table__empty { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); font-size: var(--text-sm); } /* Inline confidence bar for tables */ .dw-table__confidence { display: flex; align-items: center; gap: var(--space-2); } .dw-table__confidence-bar { width: 48px; height: 4px; border-radius: 2px; background: var(--color-border); overflow: hidden; } .dw-table__confidence-fill { height: 100%; border-radius: 2px; } .dw-table__confidence-fill--high { background: var(--color-success); } .dw-table__confidence-fill--med { background: var(--color-warning); } .dw-table__confidence-fill--low { background: var(--color-danger); } /* File type icons */ .dw-table__file-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; flex-shrink: 0; text-transform: uppercase; } .dw-table__file-icon--pdf { background: rgba(229, 72, 77, 0.15); color: var(--color-danger); } .dw-table__file-icon--doc { background: rgba(76, 141, 255, 0.15); color: var(--color-accent); } .dw-table__file-icon--txt { background: rgba(154, 163, 174, 0.15); color: var(--color-text-muted); } .dw-table__file-icon--csv { background: rgba(63, 191, 127, 0.15); color: var(--color-success); } .dw-table__file-icon--xls { background: rgba(63, 191, 127, 0.15); color: var(--color-success); } .dw-table__file-icon--img { background: rgba(232, 162, 61, 0.15); color: var(--color-warning); } .dw-table__filename-cell { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; color: inherit; } .dw-table__filename-cell:hover .dw-table__filename { color: var(--color-accent); } .dw-table__filename { font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; transition: color var(--transition-fast); } /* Row action icons */ .dw-table__actions { display: flex; gap: var(--space-2); align-items: center; } .dw-table__action-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer; text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast); } .dw-table__action-btn:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } .dw-table__action-btn--danger:hover { background: var(--color-danger-soft); color: var(--color-danger); } .dw-table__action-btn--retry { font-size: 1.1rem; font-weight: 600; } .dw-table__action-btn--retry:hover { background: var(--color-accent-soft); color: var(--color-accent); } /* Mobile responsive */ @media (max-width: 768px) { .dw-table__wrapper { border-radius: var(--radius-sm); } .dw-table__th, .dw-table__td { padding: var(--space-2) var(--space-3); } .dw-table__filename { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; } }