@use '../abstracts/mixins' as *;

.data-table__wrap {
    width: 100%;
    overflow-x: auto;
}

.table.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--fs-sm);
    color: var(--color-text);

    caption {
        caption-side: top;
        text-align: left;
        padding: var(--space-3) var(--space-4);
        color: var(--color-text-muted);
        font-size: var(--fs-xs);
    }

    thead th {
        background: var(--color-surface-alt);
        color: var(--color-text-muted);
        text-transform: uppercase;
        font-size: var(--fs-xs);
        letter-spacing: .04em;
        font-weight: 600;
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--color-border);
        text-align: left;
        white-space: nowrap;
    }

    tbody td {
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--color-border);
        vertical-align: middle;
    }

    &.table-hover tbody tr:hover td { background: var(--color-surface-alt); }
    &.table-striped tbody tr:nth-child(odd) td { background: rgba(0, 0, 0, 0.015); }
    &.table-sm tbody td, &.table-sm thead th { padding: var(--space-2) var(--space-3); }

    tfoot td { font-weight: 600; padding: var(--space-3) var(--space-4); background: var(--color-surface-alt); }
}

.data-table__empty {
    padding: var(--space-7) !important;
    text-align: center;
    color: var(--color-text-muted);
}

.pagination-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);

    &__summary { font-size: var(--fs-xs); color: var(--color-text-muted); }
    .pagination { margin: 0; gap: 2px; display: inline-flex; }
    .page-item .page-link {
        padding: .35rem .7rem;
        border-radius: var(--radius-sm);
        border: 1px solid var(--color-border);
        color: var(--color-text);
        font-size: var(--fs-sm);
        text-decoration: none;
    }
    .page-item.active .page-link { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
    .page-item.disabled .page-link { color: var(--color-text-muted); pointer-events: none; }
}