/* Symploc.DataTable.Blazor. Link after MudBlazor.min.css. Logical properties only, so RTL needs nothing extra. */

/* MudDataGrid pins its toolbar height; a wrapping toolbar would lay its second line over the header. */
.symploc-datatable .mud-table-toolbar {
    block-size: auto;
    min-block-size: 64px;
}

/* Short headers stay on one line; Arabic ones otherwise break word by word in narrow columns. */
.symploc-datatable .mud-table-head .column-header {
    white-space: nowrap;
}

/* DataType.Trimmable: two lines, then an ellipsis; the whole value is in a tooltip. */
.datatable-trim {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-inline-size: 32rem;
}

.symploc-datatable-image {
    max-block-size: 180px;
    max-inline-size: 180px;
}

.symploc-datatable-operator-active {
    color: var(--mud-palette-primary-text);
    background-color: var(--mud-palette-primary);
}

/* The sticky actions column looks like the rest of its row: opaque surface (it must hide what scrolls under it)
   with the row's own striped/hover tint layered on top, and a hairline on its inline-start side. MudBlazor pins
   it with a physical right:0 and a grey background; inset-inline moves the pin to the end side in RTL too. */
.symploc-datatable .mud-table-cell.sticky-right {
    inset-inline: auto 0;
    background-color: var(--mud-palette-surface);
    border-inline-start: 1px solid var(--mud-palette-table-lines);
}

.symploc-datatable.mud-table-striped .mud-table-body .mud-table-row:nth-of-type(odd) > .mud-table-cell.sticky-right {
    background-image: linear-gradient(var(--mud-palette-table-striped), var(--mud-palette-table-striped));
}

@media (hover: hover) and (pointer: fine) {
    .symploc-datatable.mud-table-hover .mud-table-body .mud-table-row:hover > .mud-table-cell.sticky-right {
        background-image: linear-gradient(var(--mud-palette-table-hover), var(--mud-palette-table-hover));
    }
}