/** * Copyright (c) 2026 DNA Genics, S.L. All rights reserved.
 *
 * Canonical DataTables pagination styles — single-border pill pattern.
 *
 * Fix: With dataTables.bootstrap4 integration the pagination markup is:
 *   ul.pagination > li.page-item.paginate_button > a.page-link
 * The double-border was caused by styling BOTH the <li> (via .paginate_button)
 * AND the <a> (via Bootstrap's .page-link). This file resets the <li> to a
 * transparent container and places all visible styling on .page-link only.
 *
 * Load order: after dataTables.bootstrap4.min.css, before view-specific CSS.
 * Referenced from both _Layout.cshtml and _Layout_2025.cshtml.
 */

/* ================================================================
   PAGINATION WRAPPER
   ================================================================ */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Flex row with gap — this is the sole source of horizontal spacing */
.dataTables_wrapper .dataTables_paginate .pagination {
    display: flex;
    gap: 0.375rem;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
    justify-content: center;
}

/* ================================================================
   RESET THE <li> — transparent container, no border
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item {
    list-style: none;
}

.dataTables_wrapper .dataTables_paginate .page-item.paginate_button {
    display: list-item !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: auto !important;
    height: auto !important;
    box-shadow: none !important;
}

/* ================================================================
   SINGLE BORDER LIVES ON THE <a> ONLY
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item .page-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 0.75rem !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: var(--dbc-text-body, #4a473f) !important;
    background: var(--dbc-white, #ffffff) !important;
    border: 1px solid var(--dbc-gray-200, #e4e2dc) !important;
    border-radius: var(--dbc-radius-sm, 6px) !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: none !important;
    line-height: 1 !important;
    outline: none !important;
}

/* ================================================================
   FOCUS
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item .page-link:focus,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link:focus,
.dataTables_wrapper .dataTables_paginate .page-link:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--dbc-gray-200, #e4e2dc) !important;
}

.dataTables_wrapper .dataTables_paginate .page-item:focus,
.dataTables_wrapper .dataTables_paginate .page-item .page-link:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* ================================================================
   HOVER
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item .page-link:hover:not(.disabled) {
    color: var(--dbc-earth-dark, #3d2b1f) !important;
    background: var(--dbc-amber-subtle, rgba(201, 169, 98, 0.12)) !important;
    border-color: var(--dbc-amber, #c9a962) !important;
    text-decoration: none !important;
}

/* ================================================================
   ACTIVE / CURRENT
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
    color: var(--dbc-white, #ffffff) !important;
    background: var(--dbc-amber, #c9a962) !important;
    border: 1px solid var(--dbc-amber, #c9a962) !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link:hover {
    color: var(--dbc-white, #ffffff) !important;
    background: var(--dbc-amber-light, #d4b974) !important;
    border: 1px solid var(--dbc-amber-light, #d4b974) !important;
    box-shadow: none !important;
    outline: none !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.active .page-link:focus {
    color: var(--dbc-white, #ffffff) !important;
    background: var(--dbc-amber, #c9a962) !important;
    border: 1px solid var(--dbc-amber, #c9a962) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ================================================================
   DISABLED
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    color: var(--dbc-gray-400, #9a968c) !important;
    background: var(--dbc-gray-100, #f1f0ed) !important;
    border-color: var(--dbc-gray-200, #e4e2dc) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    pointer-events: none;
}

.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link:hover {
    color: var(--dbc-gray-400, #9a968c) !important;
    background: var(--dbc-gray-100, #f1f0ed) !important;
    border-color: var(--dbc-gray-200, #e4e2dc) !important;
    box-shadow: none !important;
}

/* ================================================================
   ELLIPSIS
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item.ellipsis .page-link {
    background: transparent !important;
    border: none !important;
    color: var(--dbc-text-muted, #706c64) !important;
    cursor: default !important;
    min-width: auto !important;
    padding: 0 0.5rem !important;
}

.dataTables_wrapper .dataTables_paginate .page-item.ellipsis .page-link:hover {
    background: transparent !important;
    border: none !important;
    color: var(--dbc-text-muted, #706c64) !important;
}

/* ================================================================
   PREVIOUS / NEXT
   ================================================================ */
.dataTables_wrapper .dataTables_paginate .page-item.previous .page-link,
.dataTables_wrapper .dataTables_paginate .page-item.next .page-link {
    font-weight: 500 !important;
}