/* ====================================
   TABLE.CSS - Base table component styles
   ==================================== */

/* Base table structure */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--border-primary);
}

.table th {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.table td {
    color: var(--text-primary);
}

/* Table container with horizontal scroll */
.table-container {
    position: relative;
    overflow-x: auto;
}

/* Utility class for centered empty states */
.table-cell-center {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
}

/* Basic table hover states - common across pages */
.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .table-container {
        overflow-x: auto;
        margin: 0 -16px;
        border-radius: 8px;
    }
    
    .table th,
    .table td {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    .table th {
        font-size: 12px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .table th,
    .table td {
        padding: 6px 8px;
        font-size: 12px;
    }
    
    .table-cell-center {
        padding: 24px 16px;
        font-size: 14px;
    }
}

/* ====================================
   Glass Morphism Fallbacks for Tables
   ==================================== */

/* Fallbacks for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(8px)) {
    .table thead.sticky,
    .table-container .sticky {
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border-primary);
    }
}