/**
 * AIDocBot - Tables Component
 * Design System Version 1.0
 */

/* ========================================
   BASE TABLE
   ======================================== */

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

    /* ========================================
   TABLE HEADER
   ======================================== */

    .table thead {
        background: var(--neutral-50);
    }

    .table th {
        padding: var(--space-3) var(--space-4);
        text-align: left;
        font-size: var(--text-sm);
        font-weight: var(--font-semibold);
        color: var(--neutral-700);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        border-bottom: 2px solid var(--neutral-200);
    }

        .table th:first-child {
            padding-left: var(--space-6);
        }

        .table th:last-child {
            padding-right: var(--space-6);
        }

    /* ========================================
   TABLE BODY
   ======================================== */

    .table td {
        padding: var(--space-4);
        font-size: var(--text-base);
        color: var(--neutral-700);
        border-bottom: var(--border-width) solid var(--neutral-200);
    }

        .table td:first-child {
            padding-left: var(--space-6);
        }

        .table td:last-child {
            padding-right: var(--space-6);
        }

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

        .table tbody tr:hover {
            background: var(--neutral-50);
        }

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

/* ========================================
   TABLE VARIANTS
   ======================================== */

/* Striped Table */
.table-striped tbody tr:nth-child(even) {
    background: var(--neutral-50);
}

    .table-striped tbody tr:nth-child(even):hover {
        background: var(--neutral-100);
    }

/* Bordered Table */
.table-bordered {
    border: var(--border-width) solid var(--neutral-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

    .table-bordered th,
    .table-bordered td {
        border: var(--border-width) solid var(--neutral-200);
    }

/* Compact Table */
.table-sm th,
.table-sm td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm);
}

/* Spacious Table */
.table-lg th,
.table-lg td {
    padding: var(--space-5) var(--space-6);
}

/* ========================================
   TABLE CELL UTILITIES
   ======================================== */

.table-cell-center {
    text-align: center;
}

.table-cell-right {
    text-align: right;
}

.table-cell-nowrap {
    white-space: nowrap;
}

/* ========================================
   TABLE ACTIONS
   ======================================== */

.table-actions {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    justify-content: flex-end;
}

    .table-actions button {
        padding: var(--space-1) var(--space-2);
    }

/* ========================================
   TABLE STATUS INDICATORS
   ======================================== */

.table-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-base);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
}

.table-status-active {
    background: var(--success-light);
    color: var(--success);
}

.table-status-inactive {
    background: var(--neutral-100);
    color: var(--neutral-600);
}

.table-status-pending {
    background: var(--warning-light);
    color: var(--warning-hover);
}

.table-status-error {
    background: var(--error-light);
    color: var(--error);
}

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

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
}

    .table-responsive::-webkit-scrollbar {
        height: 8px;
    }

    .table-responsive::-webkit-scrollbar-track {
        background: var(--neutral-100);
    }

    .table-responsive::-webkit-scrollbar-thumb {
        background: var(--neutral-300);
        border-radius: var(--radius-base);
    }

        .table-responsive::-webkit-scrollbar-thumb:hover {
            background: var(--neutral-400);
        }

/* ========================================
   EMPTY STATE
   ======================================== */

.table-empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--neutral-500);
}

    .table-empty i {
        font-size: 48px;
        color: var(--neutral-300);
        margin-bottom: var(--space-4);
    }

    .table-empty p {
        font-size: var(--text-lg);
        color: var(--neutral-600);
        margin-bottom: var(--space-4);
    }

/* ========================================
   TABLE CONTAINER
   ======================================== */

.table-container {
    background: white;
    border: var(--border-width) solid var(--neutral-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

    .table-container .table {
        margin: 0;
    }

/* ========================================
   TABLE HEADER TOOLBAR
   ======================================== */

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-bottom: var(--border-width) solid var(--neutral-200);
    background: var(--neutral-50);
}

.table-header-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--neutral-900);
    margin: 0;
}

.table-header-actions {
    display: flex;
    gap: var(--space-2);
}

/* ========================================
   TABLE FOOTER
   ======================================== */

.table-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-top: var(--border-width) solid var(--neutral-200);
    background: var(--neutral-50);
}

.table-info {
    font-size: var(--text-sm);
    color: var(--neutral-600);
}

/* ========================================
   PAGINATION
   ======================================== */

.table-pagination {
    display: flex;
    gap: var(--space-1);
}

    .table-pagination button {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
        min-width: 36px;
    }

        .table-pagination button.active {
            background: var(--brand-primary);
            color: white;
        }

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
    .table th,
    .table td {
        padding: var(--space-2) var(--space-3);
        font-size: var(--text-sm);
    }

        .table th:first-child,
        .table td:first-child {
            padding-left: var(--space-3);
        }

        .table th:last-child,
        .table td:last-child {
            padding-right: var(--space-3);
        }

    .table-header,
    .table-footer {
        padding: var(--space-3);
        flex-direction: column;
        gap: var(--space-3);
        align-items: stretch;
    }

    .table-header-actions {
        width: 100%;
        justify-content: space-between;
    }

    .table-actions {
        justify-content: flex-start;
    }

    /* Stack table on mobile if needed */
    .table-mobile-stack {
        display: block;
    }

        .table-mobile-stack thead {
            display: none;
        }

        .table-mobile-stack tbody,
        .table-mobile-stack tr,
        .table-mobile-stack td {
            display: block;
            width: 100%;
        }

        .table-mobile-stack tr {
            margin-bottom: var(--space-4);
            border: var(--border-width) solid var(--neutral-200);
            border-radius: var(--radius-md);
            padding: var(--space-3);
        }

        .table-mobile-stack td {
            border: none;
            padding: var(--space-2) 0;
            position: relative;
            padding-left: 40%;
        }

            .table-mobile-stack td::before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 35%;
                font-weight: var(--font-semibold);
                color: var(--neutral-600);
                font-size: var(--text-sm);
            }
}