/* ============================================================================
   DATA TABLE COMPONENTS
   ============================================================================
   
   Description:
   Comprehensive table component styles used across Dashboard, Admin, and
   Monitor pages. Includes table structure, headers, sorting, filters,
   search functionality, status badges, action buttons, and batch selection.
   
   Features:
   - Sortable columns
   - Search and filtering
   - Status badges and score indicators
   - Batch selection with fixed action bar
   - Responsive table layout
   
   Sections:
   1. Table Container & Structure
   2. Table Header Section
   3. Filters & Controls
   4. Search Bar
   5. Data Table - Base Styles
   6. Table Column Widths
   7. Table States
   8. Table Cell Components
   9. Status Badges
   10. Score Badges
   11. Cache Badges (Admin)
   12. Action Buttons
   13. Progress Indicators (Monitor)
   14. Table Footer
   15. Batch Selection
   
   ============================================================================ */

/* ============================================================================
   1. TABLE CONTAINER & STRUCTURE
   ============================================================================ */

.table-container {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
}

.table-wrapper {
    overflow-x: auto;
}

/* ============================================================================
   2. TABLE HEADER SECTION
   ============================================================================ */

.table-header {
    padding: 12px 16px 12px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.table-title {
    font-size: 2.2rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ============================================================================
   3. FILTERS & CONTROLS
   ============================================================================ */

.table-filters {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-group label {
    font-size: 0.75em;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: bold;
    padding-left: 2px;
}

.filter-select {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--text-primary);
    padding: 10px 36px 10px 14px;
    font-size: 1rem;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A99AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 160px;
}

.filter-select:focus {
    outline: none;
    border-color: var(--primary);
}

/* ============================================================================
   4. SEARCH BAR
   ============================================================================ */

.search-bar {
    position: relative;
    display: flex;
    align-items: center;
}

.search-icon {
    position: absolute;
    left: 14px;
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    pointer-events: none;
}

.search-input {
    width: 100%;
    background-color: var(--bg-secondary);
    border: none;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 16px 46px 16px 46px;
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.search-input::placeholder {
    color: var(--text-muted);
}

.clear-search {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--border-radius);
    transition: all var(--transition-fast);
}

.clear-search svg {
    width: 18px;
    height: 18px;
}

.clear-search:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

/* ============================================================================
   5. DATA TABLE - BASE STYLES
   ============================================================================ */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background-color: var(--bg-tertiary);
}

.data-table th {
    padding: 8px 16px;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 4px solid var(--border-color);
}

/* Sortable Table Headers */
.data-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: all var(--transition-fast);
}

.data-table th.sortable:hover {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.data-table th.sortable .th-content {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-start;
}

.data-table th.sortable .sort-icon {
    width: 16px;
    height: 16px;
    opacity: 0.3;
    transition: opacity var(--transition-fast);
}

.data-table th.sortable:hover .sort-icon {
    opacity: 0.6;
}

.data-table th.sortable.sort-asc .sort-icon,
.data-table th.sortable.sort-desc .sort-icon {
    opacity: 1;
}

/* Hide inactive sort direction */
.data-table th.sortable .sort-icon .sort-asc,
.data-table th.sortable .sort-icon .sort-desc {
    opacity: 0.3;
}

.data-table th.sortable.sort-asc .sort-icon .sort-asc {
    opacity: 1;
    stroke: var(--primary);
}

.data-table th.sortable.sort-asc .sort-icon .sort-desc {
    opacity: 0;
}

.data-table th.sortable.sort-desc .sort-icon .sort-desc {
    opacity: 1;
    stroke: var(--primary);
}

.data-table th.sortable.sort-desc .sort-icon .sort-asc {
    opacity: 0;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 1rem;
}

.data-table tbody tr {
    transition: background-color var(--transition-fast);
}

.data-table tbody tr:nth-child(even) {
    background-color: var(--bg-tertiary);
}

.data-table tbody tr:hover {
    background-color: var(--bg-tertiary);
}

.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table tbody tr.selected {
    background-color: var(--primary-light);
}

/* ============================================
   TABLE COLUMN WIDTHS
   ============================================ */

/* Dashboard Table Columns */
.data-table th.actions       { width: 170px; }
.data-table th.queue-actions { width: 90px; }
.data-table th.durations     { width: 120px; }
.data-table th.status        { width: 160px; }
.data-table th.sourced-by    { width: 160px; }
.data-table th.date          { width: 180px; }
.data-table th.score         { width: 96px; }
.data-table th.position      { width: 320px; }
.data-table th.progress      { width: 150px; }

/* Admin Table - Job Descriptions */
.data-table th.col-cache-status { width: 150px; }
.data-table th.col-expires-in   { width: 120px; }
.data-table th.col-jd-actions   { width: 168px; }


/* Admin Table - Whitelisted Users */
.data-table th.col-added        { width: 150px; }
.data-table th.col-added-by     { width: 220px; }
.data-table th.col-user-actions { width: 150px; }

/* ============================================================================
   7. TABLE STATES
   ============================================================================ */

.loading-row td {
    text-align: center;
    padding: 40px;
    color: var(--text-muted);
}

.empty-row td {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}

/* ============================================================================
   8. TABLE CELL COMPONENTS
   ============================================================================ */

/* Name Cell with Avatar */
.name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.name-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary) 0%, #5B6BE8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.name-text {
    font-weight: 500;
}

/* Date & Timestamp Cells */
.date-cell {
    color: var(--text-secondary);
    font-size: 0.813rem;
}

.sourced-by-cell {
    color: var(--text-secondary);
    font-size: 0.813rem;
}


/* ============================================================================
   9. STATUS BADGES
   ============================================================================ */

/* Base Status Badge */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    text-transform: capitalize;
}

/* Dashboard Status Badges */
.status-badge.encoded {
    background-color: var(--success-light);
    color: var(--success);
}

.status-badge.needs-review {
    background-color: var(--warning-light);
    color: var(--warning);
}

.status-badge.low-match {
    background-color: var(--info-light);
    color: var(--info);
}

.status-badge.failed {
    background-color: var(--danger-light);
    color: var(--danger);
}

/* Monitor Queue Status Badges */
.status-badge.status-waiting {
    background-color: #fff3e0;
    color: #e65100;
}

.status-badge.status-active {
    background-color: #e3f2fd;
    color: #1565c0;
}

.status-badge.status-completed {
    background-color: var(--success-light);
    color: var(--success);
}

.status-badge.status-failed {
    background-color: var(--danger-light);
    color: var(--danger);
}

.status-badge.status-delayed {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

/* ============================================================================
   10. SCORE BADGES
   ============================================================================ */

.score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 8px 14px;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.score-badge.score-low {
    background-color: var(--score-0);
}

.score-badge.score-medium-low {
    background-color: var(--score-25);
}

.score-badge.score-medium-high {
    background-color: var(--score-50);
}

.score-badge.score-high {
    background-color: var(--score-75);
}

.score-na {
    color: var(--text-muted);
}

/* ============================================================================
   11. CACHE BADGES (ADMIN)
   ============================================================================ */

.cache-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.cache-badge.status-cached {
    background: #d4edda;
    color: #155724;
}

/* ============================================================================
   12. ACTION BUTTONS
   ============================================================================ */

.actions-cell {
    display: flex;
    gap: 8px;
}

.action-btn {
    padding: 8px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--border-radius);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn.view {
    background-color: var(--primary-light);
    color: var(--primary);
}

.action-btn.view:hover {
    background-color: var(--primary);
    color: #fff;
}

.action-btn.retry {
    background-color: var(--warning-light);
    color: var(--warning);
}

/* ============================================================================
   13. PROGRESS INDICATORS (MONITOR)
   ============================================================================ */
.progress-bar {
    width: 100px;
    height: 6px;
    background: var(--border-color);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-fill.complete {
    background: var(--success);
}

.process-fill.failed {
    background: var(--danger);
}

/* ============================================================================
   14. TABLE FOOTER
   ============================================================================ */
.table-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-info {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

/* ============================================================================
   15. BATCH SELECTION
   ============================================================================ */

/* Checkbox Column */
.checkbox-col {
    width: 40px;
    text-align: center;
}

th.checkbox-col,
td.checkbox-col {
    padding: 8px 12px;
    border-right: 1px dotted var(--border-color);
}

.checkbox-col input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--primary);
    display: block;
}

/* Batch Actions Bar - Fixed Bottom */
.batch-actions {
    position: fixed;
    bottom: 0;
    left: var(--sidebar-width);
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    animation: slideUp 0.2s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.batch-actions #selected-count {
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.batch-actions .btn-danger {
    padding: 10px 24px;
    font-size: 0.9rem;
}