/* Site-wide results-table tools (wwwroot/js/table-grid.js): sort headers, row filter, column chooser,
   column drag/resize and paging. Loaded from _Layout. Depends only on the site theme tokens, so light
   and dark follow the site theme. Per-table column widths and hidden columns are written by the
   script into a small generated <style> scoped to table[data-xmr-grid="gN"]. */

.xmr-grid-toolbar {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    margin: 0 0 .5rem;
    font-size: .8125rem;
}

.xmr-grid-filter {
    position: relative;
    flex: 0 1 16rem;
    min-width: 10rem;
    margin: 0;
}

.xmr-grid-filter[hidden] {
    display: none;
}

.xmr-grid-filter > .bi {
    position: absolute;
    top: 50%;
    left: .6rem;
    transform: translateY(-50%);
    color: var(--text-muted);
    pointer-events: none;
}

.xmr-grid-filter > input {
    padding-left: 1.85rem;
}

.xmr-grid-count {
    color: var(--text-muted);
    white-space: nowrap;
}

.xmr-grid-actions {
    display: inline-flex;
    gap: .4rem;
    margin-left: auto;
}

.xmr-grid-actions [hidden] {
    display: none;
}

.xmr-grid-chooser {
    position: relative;
}

.xmr-grid-panel {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 1050;
    width: min(20rem, calc(100vw - 2rem));
    max-height: min(26rem, 70vh);
    overflow: auto;
    padding: .6rem;
    border: 1px solid var(--border-subtle);
    border-radius: .6rem;
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: 0 .6rem 1.6rem rgba(0, 0, 0, .28);
}

.xmr-grid-panel[hidden] {
    display: none;
}

.xmr-grid-panel-hint {
    margin: 0 0 .4rem;
    color: var(--text-muted);
    font-size: .75rem;
}

.xmr-grid-column-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.xmr-grid-column-list > li {
    display: flex;
    align-items: center;
    gap: .25rem;
    padding: .15rem .25rem;
    border-radius: .35rem;
    cursor: grab;
}

.xmr-grid-column-list > li:hover {
    background: var(--surface-panel);
}

.xmr-grid-column-list label {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: .45rem;
    min-width: 0;
    margin: 0;
    cursor: pointer;
}

.xmr-grid-column-list label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xmr-grid-column-list .btn-link {
    padding: .1rem .3rem;
    color: var(--text-muted);
}

.xmr-grid-column-list .btn-link:hover:not([disabled]),
.xmr-grid-column-list .btn-link:focus-visible {
    color: var(--accent);
}

.xmr-grid-grip {
    color: var(--text-muted);
}

.xmr-grid-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: .4rem;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px solid var(--border-subtle);
}

.xmr-grid-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: var(--text-muted);
}

.xmr-grid-pager[hidden],
.xmr-grid-page-nav[hidden] {
    display: none;
}

.xmr-grid-page-size {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0;
}

.xmr-grid-page-size > select {
    width: auto;
}

.xmr-grid-page-nav {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.xmr-grid-page-label {
    white-space: nowrap;
}

/* Rows the filter or the current page leaves out. */
.xmr-grid-table > tbody > tr.xmr-grid-out {
    display: none !important;
}

.xmr-grid-rel {
    position: relative;
}

.xmr-grid-sortable {
    cursor: pointer;
    user-select: none;
}

.xmr-grid-sortable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

/* The direction arrow is drawn, not written, so a header's text stays exactly the page's own. It
   exists only on the sorted column: a placeholder on every header would widen tight tables. */
.xmr-grid-sortable:hover {
    text-decoration: underline dotted;
    text-underline-offset: .25em;
}

.xmr-grid-sorted-asc::after,
.xmr-grid-sorted-desc::after {
    content: "";
    display: inline-block;
    width: .45rem;
    height: .45rem;
    margin-left: .35rem;
    vertical-align: .1em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.xmr-grid-sorted-desc::after {
    color: var(--accent);
}

.xmr-grid-sorted-asc::after {
    color: var(--accent);
    transform: rotate(-135deg);
    vertical-align: -.15em;
}

/* Kept inside its header: a handle overhanging the last column would make a tight table scroll. */
.xmr-grid-resizer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 8px;
    cursor: col-resize;
    touch-action: none;
}

.xmr-grid-resizer::after {
    content: "";
    position: absolute;
    top: 25%;
    bottom: 25%;
    right: 1px;
    width: 2px;
    border-radius: 1px;
    background: var(--border-subtle);
    opacity: 0;
}

.xmr-grid-th:hover > .xmr-grid-resizer::after,
.xmr-grid-resizing .xmr-grid-resizer::after {
    opacity: 1;
}

.xmr-grid-resizer:hover::after {
    background: var(--accent);
}

.xmr-grid-resizing,
.xmr-grid-resizing * {
    cursor: col-resize !important;
    user-select: none;
}

[dir="rtl"] .xmr-grid-resizer {
    right: auto;
    left: 0;
}

[dir="rtl"] .xmr-grid-resizer::after {
    right: auto;
    left: 1px;
}

.xmr-grid-dragging {
    opacity: .45;
}

th.xmr-grid-drop-before {
    box-shadow: inset 3px 0 0 var(--accent);
}

th.xmr-grid-drop-after {
    box-shadow: inset -3px 0 0 var(--accent);
}

.xmr-grid-column-list > li.xmr-grid-drop-before {
    box-shadow: inset 0 2px 0 var(--accent);
}

.xmr-grid-column-list > li.xmr-grid-drop-after {
    box-shadow: inset 0 -2px 0 var(--accent);
}

@media (max-width: 575.98px) {
    .xmr-grid-filter {
        flex: 1 1 100%;
    }

    .xmr-grid-actions {
        margin-left: 0;
    }

    .xmr-grid-panel {
        right: auto;
        left: 0;
    }
}

@media print {
    .xmr-grid-toolbar,
    .xmr-grid-pager,
    .xmr-grid-resizer {
        display: none !important;
    }

    .xmr-grid-table > tbody > tr.xmr-grid-out {
        display: table-row !important;
    }
}