/* ============================================
   INFINITY OS - TABLE COMPONENTS
   Admin Table Standardization (Priority P1.4)
   ============================================ */

/* ============================================
   TABLE WRAPPER
   Provides horizontal scroll on mobile
   ============================================ */

.infinity-table-wrapper {
    overflow-x: auto;
    margin: 0;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

/* ============================================
   BASE TABLE STYLES
   Foundation for all infinity tables
   ============================================ */

.infinity-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem; /* 14px */
}

/* ============================================
   TABLE HEADERS
   Uppercase, subtle background, clear hierarchy
   ============================================ */

.infinity-table thead th {
    padding: var(--space-md) var(--space-md); /* 16px */
    font-weight: 600;
    font-size: 0.75rem; /* 12px */
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--glass-border);
}

/* ============================================
   TABLE CELLS
   Consistent padding, subtle borders
   ============================================ */

.infinity-table tbody td {
    padding: var(--space-md) var(--space-md); /* 16px */
    border-bottom: 1px solid var(--glass-border);
    color: var(--text-secondary);
    vertical-align: middle;
}

/* ============================================
   ROW HOVER STATE
   Subtle feedback on interaction
   ============================================ */

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

.infinity-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* ============================================
   TABLE UTILITY CLASSES
   Reusable patterns for common table needs
   ============================================ */

/* Action Column - Right-aligned with fixed width */
.infinity-table .table-action-col {
    width: 200px;
    text-align: right;
    white-space: nowrap;
}

/* Action Button Container - Flex layout */
.table-actions {
    display: flex;
    gap: var(--space-xs); /* 4px */
    justify-content: flex-end;
    align-items: center;
}

/* ID/Code Display - Monospace, subtle */
.table-id {
    font-family: 'Courier New', monospace;
    font-size: 0.8125rem; /* 13px */
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Date/Timestamp Display - Subtle, tabular */
.table-date {
    font-size: 0.8125rem; /* 13px */
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}

/* Numeric Column - Right-aligned, tabular */
.infinity-table .table-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Text Truncation - Ellipsis overflow */
.table-truncate {
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================
   TABLE BADGES
   Status indicators within tables
   ============================================ */

.table-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: 0.75rem; /* 12px */
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-badge.badge-success {
    background: rgba(0, 255, 136, 0.1);
    color: var(--neon-green);
}

.table-badge.badge-warning {
    background: rgba(255, 102, 0, 0.1);
    color: var(--neon-orange);
}

.table-badge.badge-error {
    background: rgba(255, 0, 170, 0.1);
    color: var(--neon-magenta);
}

.table-badge.badge-neutral {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-tertiary);
}

.table-badge.badge-info {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    color: var(--accent);
}

/* ============================================
   EMPTY STATE
   When tables have no data
   ============================================ */

.table-empty {
    text-align: center;
    padding: var(--space-2xl) var(--space-lg); /* 48px 24px */
    color: var(--text-tertiary);
}

.table-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: var(--space-md);
}

.table-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-sm) 0;
}

.table-empty-message {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0 0 var(--space-lg) 0;
    max-width: 32rem;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================
   TABLE VARIANTS
   Optional modifiers for different use cases
   ============================================ */

/* Striped Rows - Alternating backgrounds for metrics tables */
.infinity-table.table-striped tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.02);
}

.infinity-table.table-striped tbody tr:nth-child(even):hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Compact Table - Reduced padding for dense data */
.infinity-table.table-compact th,
.infinity-table.table-compact td {
    padding: var(--space-sm) var(--space-md); /* 8px 16px */
}

/* ============================================
   RESPONSIVE TABLE BEHAVIOR
   ============================================ */

@media (max-width: 768px) {
    /* Smaller font on mobile */
    .infinity-table {
        font-size: 0.8125rem; /* 13px */
    }
    
    .infinity-table thead th {
        font-size: 0.6875rem; /* 11px */
    }
    
    /* Reduced padding on mobile */
    .infinity-table thead th,
    .infinity-table tbody td {
        padding: var(--space-sm) var(--space-sm); /* 8px */
    }
    
    /* Smaller action column */
    .infinity-table .table-action-col {
        width: 120px;
    }
    
    /* Stack action buttons vertically on very small screens */
    .table-actions {
        flex-direction: column;
        gap: var(--space-xs);
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    /* Hide non-essential columns with .table-hide-mobile class */
    .infinity-table .table-hide-mobile {
        display: none;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Keyboard focus visible on table rows */
.infinity-table tbody tr:focus-within {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* Screen reader only class for additional context */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}