@import url('brandingPalette.css');

/* ─────────────────────────────────────────────────────────────────
   CWH brand pagination — the single owner of pager styling for every
   portal, current and future.

   Covers both pagination DOMs used across the project:
     1. Bootstrap / DataTables-Bootstrap:  ul.pagination > li.page-item > .page-link
     2. Plain DataTables:                  .dataTables_paginate .paginate_button

   Loaded globally via sharedAssets/sharedCSS.php (directory glob), so a
   new table or pager needs no extra wiring to pick this up. Per the
   brand palette: open-blue owns links/active states, light-blue owns
   hover highlights, light-grey owns disabled. !important is required —
   Bootstrap's pagination CSS variables and the per-portal legacy themes
   otherwise win the cascade (same approach as select2.css /
   bootstrap-multiselect-bs5.css). Do not write per-page pagination
   colour rules — modify this file.
   ───────────────────────────────────────────────────────────────── */

/* ── 1. Bootstrap pagination ─────────────────────────────────────── */

.pagination {
    font-family: var(--cwh-font-family);
}

/* One continuous joined group — adjacent buttons share their 1px border
   (Bootstrap's own -1px overlap), squared inner corners, rounded only on
   the two outer ends. The active page gets z-index so its border wins
   over the overlapped neighbours. */
.pagination .page-link {
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    color: var(--cwh-open-blue) !important;
    background: var(--cwh-white) !important;
    border: 1px solid var(--cwh-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 150ms ease, color 150ms ease;
}

.pagination .page-item:not(:first-child) .page-link {
    margin-left: -1px;
}

.pagination .page-item:first-child .page-link {
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.pagination .page-item:last-child .page-link {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.pagination .page-item.active .page-link {
    position: relative;
    z-index: 3;
}

.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
    background: var(--cwh-light-blue) !important;
    border-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
}

.pagination .page-item.active .page-link {
    background: var(--cwh-open-blue) !important;
    border-color: var(--cwh-open-blue) !important;
    color: var(--cwh-white) !important;
}

.pagination .page-item.disabled .page-link {
    color: var(--cwh-light-grey) !important;
    background: var(--cwh-white) !important;
    border-color: var(--cwh-border) !important;
}

.pagination .page-link:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 51, 126, 0.10) !important;
}

/* ── 2. Plain DataTables pager (non-Bootstrap markup) ────────────── */

.dataTables_wrapper .dataTables_paginate {
    font-family: var(--cwh-font-family);
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    font-family: var(--cwh-font-family);
    font-weight: var(--cwh-font-medium);
    color: var(--cwh-open-blue) !important;
    background: var(--cwh-white) !important;
    border: 1px solid var(--cwh-border) !important;
    border-radius: 0 !important;
    margin-left: -1px;
    transition: background 150ms ease, color 150ms ease;
}

/* Outer-end rounding on the pager's direct children only — the page
   numbers sit inside a <span> wrapper, so a bare :first-child would also
   round the first number mid-strip. */
.dataTables_wrapper .dataTables_paginate > .paginate_button:first-child {
    margin-left: 0;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}

.dataTables_wrapper .dataTables_paginate > .paginate_button:last-child {
    border-top-right-radius: 8px !important;
    border-bottom-right-radius: 8px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    position: relative;
    z-index: 3;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled) {
    background: var(--cwh-light-blue) !important;
    border-color: var(--cwh-light-blue) !important;
    color: var(--cwh-dark-blue) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--cwh-open-blue) !important;
    border-color: var(--cwh-open-blue) !important;
    color: var(--cwh-white) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: var(--cwh-light-grey) !important;
    background: var(--cwh-white) !important;
    border-color: var(--cwh-border) !important;
    cursor: default;
}