/*
 * DataTable — selectable / sticky styling.
 *
 * Source of truth: Claude Design project "TCM Local Design library"
 *   → TCM Local Design.dc.html → Tables → "DataTable — selectable, sticky".
 *
 * Spec summary: sticky select column (col 1) · sticky header row · scrolling body
 * only · title row, selection bar and pagination pinned outside the scroll area.
 */

/* ---- Header count label ---------------------------------------------- */

.datatable-count {
    font-size: var(--typography-caption-font-size);
    font-weight: var(--typography-caption-font-weight);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ---- Bulk-selection bar ---------------------------------------------- */
/*
 * Design system SelectionBar: a white card (not a tint bar) — surface-card
 * background, split border, house radius. "N selected" is the only bold;
 * "Clear selection" is an underlined link beside it; bulk actions right.
 */

.datatable-selection-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--size-md);
    flex-wrap: wrap;
    padding: 10px var(--size-md);
    margin: var(--spacing-xs) 0;
    background: var(--surface-card);
    border: var(--border-width) solid var(--border-split);
    border-radius: var(--radius);
    font-size: var(--type-body-size);
}

.datatable-selection-summary {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.datatable-selection-count {
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight-strong);
    color: var(--text-body);
}

.datatable-selection-clear.ant-btn-text {
    padding: 0;
    height: auto;
    color: var(--text-link);
    text-decoration: underline;
}

.datatable-selection-clear.ant-btn-text:hover {
    background: none;
    color: var(--text-link-hover);
    text-decoration: underline;
}

.datatable-selection-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-left: auto;
    flex-wrap: nowrap;
}

/* ---- Sticky select column -------------------------------------------- */
/*
 * Spec: column 1 is position: sticky; left: 0 with an opaque row-matched
 * background (so rows scrolling underneath do not show through) and a 6px right
 * shadow marking the pinned edge. Header cell is sticky on both axes, so it needs
 * the higher z-index (4 header-select vs 3 header-row vs 2 body-select).
 */

.datatable-selectable .ant-table-selection-column {
    position: sticky;
    left: 0;
    z-index: 2;
    width: 3.5rem;
    background: #ffffff;
    box-shadow: 0.375rem 0 0.375rem -0.375rem rgba(0, 0, 0, 0.12),
                inset -1px 0 0 0 var(--color-border-split);
}

.datatable-selectable .ant-table-thead .ant-table-selection-column {
    z-index: 4;
    background: var(--color-bg-table-header);
}

.datatable-selectable .ant-table-tbody > tr:hover > .ant-table-selection-column {
    background: var(--color-bg-table-header);
}

/* Selected rows keep an opaque pinned cell too — matched to the selected-row
   surface (#F4F7FC), which the design system reserves for selection state. */
.datatable-selectable .ant-table-tbody > tr.ant-table-row-selected > .ant-table-selection-column {
    background: var(--surface-selected);
}

/* ---- Checkbox: 1rem control, 2px radius ------------------------------ */

.datatable-selectable .ant-checkbox-inner {
    width: 1rem;
    height: 1rem;
    border-radius: 2px;
}

/* ---- Numeric and identifier cells ------------------------------------ */
/*
 * Identifiers, external IDs and right codes in a table are UI text: they stay
 * in Open Sans. Columns of figures line up via tabular figures, not a second
 * typeface — Inconsolata is reserved for literal code (.typography-mono).
 */

.datatable-numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
}