/* ── Wrapper ────────────────────────────────────────────────────── */
.bdt-table-wrapper {
    --bdt-border-color: #dddddd;
    --bdt-border-thickness: 1px;
    --bdt-border-top: 1;
    --bdt-border-right: 1;
    --bdt-border-bottom: 1;
    --bdt-border-left: 1;
    overflow-x: auto;
    width: 100%;
}

/* ── Table base ─────────────────────────────────────────────────── */
.bdt-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

/* ── Cell borders (driven by CSS vars) ─────────────────────────── */
.bdt-table th,
.bdt-table td {
    padding: 0.6em 0.8em;
    border-top-width:    calc(var(--bdt-border-top)    * var(--bdt-border-thickness));
    border-right-width:  calc(var(--bdt-border-right)  * var(--bdt-border-thickness));
    border-bottom-width: calc(var(--bdt-border-bottom) * var(--bdt-border-thickness));
    border-left-width:   calc(var(--bdt-border-left)   * var(--bdt-border-thickness));
    border-style: solid;
    border-color: var(--bdt-border-color);
    white-space: pre-wrap;
}

/* ── Hide last row border ───────────────────────────────────────── */
.bdt-table-wrapper[data-hide-last-row="1"] .bdt-table tbody tr:last-child td,
.bdt-table-wrapper[data-hide-last-row="1"] .bdt-table tbody tr:last-child th {
    border-bottom-width: 0;
}

/* ── Hide last column border ────────────────────────────────────── */
.bdt-table-wrapper[data-hide-last-col="1"] .bdt-table tr td:last-child,
.bdt-table-wrapper[data-hide-last-col="1"] .bdt-table tr th:last-child {
    border-right-width: 0;
}

/* ── Row background colours ─────────────────────────────────────── */
.bdt-table tr[style*="--bdt-row-bg"] td,
.bdt-table tr[style*="--bdt-row-bg"] th {
    background-color: var(--bdt-row-bg);
}

/* ── Column background colours ──────────────────────────────────── */
.bdt-table td.bdt-col-bg,
.bdt-table th.bdt-col-bg {
    background-color: var(--bdt-col-bg);
}

/* ── Colour precedence: row wins (default) ──────────────────────── */
.bdt-table-wrapper[data-color-precedence="row"] .bdt-table tr[style*="--bdt-row-bg"] td.bdt-col-bg,
.bdt-table-wrapper[data-color-precedence="row"] .bdt-table tr[style*="--bdt-row-bg"] th.bdt-col-bg {
    background-color: var(--bdt-row-bg);
}

/* ── Colour precedence: column wins ─────────────────────────────── */
.bdt-table-wrapper[data-color-precedence="column"] .bdt-table tr[style*="--bdt-row-bg"] td.bdt-col-bg,
.bdt-table-wrapper[data-color-precedence="column"] .bdt-table tr[style*="--bdt-row-bg"] th.bdt-col-bg {
    background-color: var(--bdt-col-bg);
}

/* ── Stacked card layout ────────────────────────────────────────── */
.bdt-stacked .bdt-table,
.bdt-stacked .bdt-table thead,
.bdt-stacked .bdt-table tbody,
.bdt-stacked .bdt-table th,
.bdt-stacked .bdt-table td,
.bdt-stacked .bdt-table tr {
    display: block;
}

/* Hide the header row visually (labels come from data-mobile-label) */
.bdt-stacked .bdt-table thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.bdt-stacked .bdt-table tr {
    border: 1px solid var(--bdt-border-color);
    margin-bottom: 1em;
    border-radius: 4px;
    overflow: hidden;
}

.bdt-stacked .bdt-table td,
.bdt-stacked .bdt-table tbody th {
    position: relative;
    padding-left: 45%;
    border: none;
    border-bottom: 1px solid var(--bdt-border-color);
    white-space: pre-wrap;
    text-align: left;
}

.bdt-stacked .bdt-table td:last-child,
.bdt-stacked .bdt-table tbody th:last-child {
    border-bottom: none;
}

/* Label via ::before pseudo-element */
.bdt-stacked .bdt-table td::before,
.bdt-stacked .bdt-table tbody th::before {
    content: attr(data-mobile-label);
    position: absolute;
    left: 0.8em;
    width: 40%;
    padding-right: 0.5em;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}