/*
 * ERP TABLES COMPONENT
 * Phase C5-B Shared Component Token Standardization
 * Replaces Bootstrap 5 table component while utilizing ERP tokens.
 */

.table,
.erp-table {
    width: 100%;
    margin-bottom: var(--erp-spacing-4);
    color: var(--erp-text-body);
    vertical-align: top;
    border-color: var(--erp-table-border-color, var(--erp-border-color));
}

.table > :not(caption) > * > *,
.erp-table > :not(caption) > * > * {
    padding: var(--erp-table-cell-padding, 10px 14px);
    background-color: transparent;
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px transparent;
}

.table > thead th,
.table > thead td,
.erp-table > thead th,
.erp-table > thead td {
    background-color: var(--erp-table-header-bg, var(--erp-color-slate-50));
    color: var(--erp-table-header-color, var(--erp-color-slate-600));
    font-size: var(--erp-table-header-font-size, var(--erp-font-size-table-th, 11.5px));
    font-weight: var(--erp-table-header-font-weight, var(--erp-font-weight-semibold, 600));
    padding: var(--erp-table-header-padding, 10px 14px);
    letter-spacing: var(--erp-letter-spacing-wide, 0.04em);
    text-transform: uppercase;
    border-bottom: 1px solid var(--erp-table-border-color, var(--erp-border-color));
}

.table > tbody,
.erp-table > tbody {
    vertical-align: inherit;
    font-size: var(--erp-font-size-table-td, var(--erp-font-size-base, 13px));
}

.table > thead,
.erp-table > thead {
    vertical-align: bottom;
}

.table-sm > :not(caption) > * > *,
.erp-table--dense > :not(caption) > * > * {
    padding: var(--erp-table-cell-padding-dense, 6px 10px);
}

.table-bordered > :not(caption) > * {
    border-width: 1px 0;
}

.table-bordered > :not(caption) > * > * {
    border-width: 0 1px;
    border-color: var(--erp-table-border-color, var(--erp-border-color));
}

.table-borderless > :not(caption) > * > * {
    border-bottom-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--erp-bg-surface-muted);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--erp-table-hover-bg, var(--erp-bg-hover));
}

.table-light {
    --erp-table-bg: #f8f9fa;
    --erp-table-striped-bg: #ecedee;
    --erp-table-hover-bg: #e2e3e5;
    color: #000;
    border-color: #dee2e6;
}
.table-light > :not(caption) > * > * {
    background-color: var(--erp-table-bg);
}
.table-light.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--erp-table-striped-bg);
}
.table-light.table-hover > tbody > tr:hover > * {
    background-color: var(--erp-table-hover-bg);
}

.table-primary {
    --erp-table-bg: #cfe2ff;
    --erp-table-striped-bg: #c5d7f2;
    --erp-table-hover-bg: #bacbe6;
    color: #000;
    border-color: #bacbe6;
}
.table-primary > :not(caption) > * > * {
    background-color: var(--erp-table-bg);
}
.table-primary.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--erp-table-striped-bg);
}
.table-primary.table-hover > tbody > tr:hover > * {
    background-color: var(--erp-table-hover-bg);
}

.table-warning {
    --erp-table-bg: #fff3cd;
    --erp-table-striped-bg: #f2e7c3;
    --erp-table-hover-bg: #e6dbb9;
    color: #000;
    border-color: #e6dbb9;
}
.table-warning > :not(caption) > * > * {
    background-color: var(--erp-table-bg);
}
.table-warning.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--erp-table-striped-bg);
}
.table-warning.table-hover > tbody > tr:hover > * {
    background-color: var(--erp-table-hover-bg);
}

.table-danger {
    --erp-table-bg: #f8d7da;
    --erp-table-striped-bg: #eccccf;
    --erp-table-hover-bg: #dfc2c4;
    color: #000;
    border-color: #dfc2c4;
}
.table-danger > :not(caption) > * > * {
    background-color: var(--erp-table-bg);
}
.table-danger.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--erp-table-striped-bg);
}
.table-danger.table-hover > tbody > tr:hover > * {
    background-color: var(--erp-table-hover-bg);
}


/* Responsive tables wrapper */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}