/* ======================================================================
   Merged in from theme.css / theme-override.css.
   These loaded BEFORE this file did, so they sit at the top: everything
   below still overrides them, exactly as it did when they lived in the
   two old sheets.
   ====================================================================== */
/* ----- from theme.css ----- */
/*     Pagination     */
.pagination > li > a, .pagination > li:first-child > a, .pagination > li:last-child > a, .pagination > li > span, .pagination > li:first-child > span, .pagination > li:last-child > span {
    /*border-radius: 100px !important;*/
    margin: 0 2px;
    color: #777777;
}

.pagination.pg-primary > li.active:first-child > a,
.pagination.pg-primary > li.active:last-child > a,
.pagination.pg-primary > li.active:first-child > span,
.pagination.pg-primary > li.active:last-child > span {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #ffffff;
}

/* ============================================================================
   PAGINATION
   Consolidated from theme.css (vendor) and theme-override.css (app).
   Values are the resolved cascade result as of the consolidation — no
   intended visual change.

   Every !important in the old theme-override block existed only to beat
   theme.css's `.pagination > li > a` vendor rule, which this file replaces.
   All 12 are dropped; the two-class selectors below already outrank
   Bootstrap's .page-link / .page-item.active .page-link / .page-item.disabled
   .page-link.
   ============================================================================ */

.pagination .page-link {
    /* margin carried from theme.css's `.pagination > li > a` — the only
       declaration of that rule that was not already masked. */
    margin: 0 2px;
    padding: 0.5rem 0.75rem;
    background: var(--surface-1);
    border: 1px solid var(--border-normal);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.pagination.pagination-sm .page-link {
    padding: 0.25rem 0.5rem;
}

.pagination .page-link:hover {
    background: var(--surface-2);
    border-color: var(--border-emphasis);
    color: var(--text-primary);
}

.pagination .page-item.active .page-link {
    background: linear-gradient(
            135deg,
            rgba(var(--bs-primary-rgb), 0.25),
            rgba(var(--bs-primary-rgb), 0.15)
    );
    border-color: rgba(var(--bs-primary-rgb), 0.4);
    color: var(--color-blue);
}

.pagination .page-item.disabled .page-link {
    background: var(--surface-1);
    border-color: var(--border-subtle);
    color: var(--text-muted);
    opacity: 0.5;
}

/* Legacy blue-fill active state from theme.css. Every app pager renders
   Bootstrap 4 markup (li.page-item > a.page-link), so the four-class
   `.pagination .page-item.active .page-link` rule above outranks this and
   nothing here is currently visible. Retained verbatim so a Bootstrap
   3-style `li.active > a` pager would still resolve as it does today. */
.pagination.pg-primary > li.active > a,
.pagination.pg-primary > li.active > span {
    background: var(--color-blue);
    border-color: var(--color-blue);
    color: #ffffff;
}

/* ============================================================================
   PAGER PILL
   Count, page size and paging as one bordered control, so a lone item count
   still reads as a control rather than floating text. Rendered by
   components/pagination.html and by the registrations toolbar.
   ============================================================================ */

.table-meta {
    display: flex;
    /* Stretch, so every divider is the pill's full height whatever the
       segment beside it contains. */
    align-items: stretch;
    border: 1px solid var(--border-normal);
    /* Height and radius are the small-input metrics from forms.css, so the
       pill lines up with the search box it shares a toolbar row with. */
    border-radius: 6px;
    background: var(--surface-1);
    font-size: .8rem;
    line-height: 1;
}

.table-meta .meta-label {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Every segment shares one height and one gutter, and drops its own chrome,
   so the group reads as a single element. Square by default: only the two end
   segments are rounded, below, or an interior fill (the current page) would
   round its corners in the middle of the pill. */
.table-meta .btn,
.table-meta .meta-label {
    height: 30px;
    padding: 0 .65rem;
    display: inline-flex;
    align-items: center;
    border: 0;
    border-radius: 0;
    font-size: .8rem;
    box-shadow: none;
}

/* Divider between segments, and the end rounding. Both are written to carry
   two units of specificity and to sit after the reset above, because the
   reset's `.table-meta .btn` would otherwise erase them. */
.table-meta > :not(:first-child) {
    border-left: 1px solid var(--border-normal);
}

/* The paging controls are one segment between them: divide the count and the
   page size off from the arrows, but not each page number from the next. */
.table-meta > .page-number,
.table-meta > .page-number + * {
    border-left: 0;
}

/* 5px, not 6px: the end segments sit inside the pill's 1px border. */
.table-meta > *:first-child,
.table-meta > *:first-child > .btn {
    border-radius: 5px 0 0 5px;
}

.table-meta > *:last-child,
.table-meta > *:last-child > .btn {
    border-radius: 0 5px 5px 0;
}

.table-meta .btn {
    color: var(--text-secondary);
}

.table-meta .btn:hover:not(:disabled) {
    background: var(--surface-2);
    color: var(--text-primary);
}

.table-meta .btn:disabled,
.table-meta .btn.disabled {
    color: var(--text-muted);
    opacity: .4;
    pointer-events: none;
}

/* The page the list is on. Tinted rather than filled: the pill is chrome,
   and a solid primary block would outweigh the table beneath it. Named
   `is-current` because Bootstrap's `.btn.active` carries an inset shadow at a
   specificity this file cannot reach. */
.table-meta .page-number.is-current {
    background: rgba(var(--bs-primary-rgb), 0.15);
    color: var(--color-blue);
    font-weight: 500;
}

.table-meta .page-number {
    min-width: 2rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}

/* A pager marked [data-auto-compact] ships both paging forms and shows the
   numbers; pager.js adds .is-compact when the toolbar runs out of room, which
   trades them for the indicator. A pager rendered `compact=True` carries no
   numbers and no attribute, so the indicator is simply what it has. */
.table-meta[data-auto-compact] .page-indicator {
    display: none;
}

.table-meta[data-auto-compact].is-compact .page-indicator {
    display: inline-flex;
}

.table-meta[data-auto-compact].is-compact .page-number {
    display: none;
}

/* The next arrow follows the hidden numbers, so the rule that keeps the
   paging block undivided is still matching it. Compact, it follows the
   indicator and needs its divider back. */
.table-meta[data-auto-compact].is-compact > .page-number + * {
    border-left: 1px solid var(--border-normal);
}

/* Phones are compact outright. The wrap detection would mostly get here on
   its own, but not when the pager has its row to itself and nothing to wrap
   against, and a tap target list of page numbers is not wanted at this width
   either way. pager.js measures with the numbers restored, which this rule
   overrides, so it simply never finds room and never fights the query. */
@media screen and (max-width: 576px) {
    .table-meta[data-auto-compact] .page-number {
        display: none;
    }

    .table-meta[data-auto-compact] .page-indicator {
        display: inline-flex;
    }

    .table-meta[data-auto-compact] > .page-number + * {
        border-left: 1px solid var(--border-normal);
    }
}

.table-meta .page-indicator {
    min-width: 4.25rem;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}