/* Sortable table headers — borderless label + tiny up/down carets (see SortHeader.razor).
   Text styling is inherited from the host header cell, so the same component fits every table. */

:where(button.th-sort) {
    font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit;
    letter-spacing: inherit; text-transform: inherit; color: inherit; text-align: inherit;
    padding-left: 0; padding-right: 0;
}
button.th-sort {
    -webkit-appearance: none; appearance: none;
    border: 0; background: none; box-shadow: none; outline: none; margin: 0;
    padding-top: 0; padding-bottom: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: flex-start; gap: 7px;
    white-space: nowrap; transition: color .15s ease;
}
button.th-sort.th-sort--r { justify-content: flex-end; }
button.th-sort:hover { color: var(--primary-color); }
button.th-sort:focus-visible { border-radius: 6px; box-shadow: 0 0 0 2px rgba(122, 31, 43, .25); }
button.th-sort.is-sorted { color: var(--primary-color); }

.th-sort__carets { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
.th-sort__carets i {
    display: block; width: 0; height: 0;
    border-left: 4px solid transparent; border-right: 4px solid transparent;
    transition: border-color .15s ease;
}
.th-sort__carets .up   { border-bottom: 5px solid #d3cbcf; }
.th-sort__carets .down { border-top: 5px solid #d3cbcf; }
button.th-sort:hover .th-sort__carets .up   { border-bottom-color: #b9aeb3; }
button.th-sort:hover .th-sort__carets .down { border-top-color: #b9aeb3; }
.th-sort__carets .up.on   { border-bottom-color: var(--primary-color) !important; }
.th-sort__carets .down.on { border-top-color: var(--primary-color) !important; }