/*
 * Custom overrides. Auto-loaded after style.css via assets_helper.php
 * when this file exists at assets/css/custom.css.
 */

/* =========================================================================
 * DataTables pagination — ONE component for every table in the app.
 * =========================================================================
 *
 * This is the single source of truth for how the footer of every DataTable
 * (server-side initDataTable, inline appDataTableInline, admin, modules,
 * everywhere) renders. Do NOT add per-page or per-module pagination
 * overrides anywhere else — they cause inconsistency. If this component
 * needs a tweak, edit it here and the whole app updates at once.
 *
 * Structure rendered by DataTables + the _table_jump_to_page helper:
 *
 *   <div class="dataTables_wrapper">
 *     ...
 *     <div class="row">                                 ← footer row
 *       <div class="col-md-4">
 *         <div class="dataTables_info">Showing X of Y entries</div>
 *       </div>
 *       <div class="col-md-8 dataTables_paging">
 *         <div id="colvis"></div>
 *         <div class="dt-page-jump">                    ← "jump to page" select
 *           <select class="dt-page-jump-select">…</select>
 *         </div>
 *         <div class="dataTables_paginate">             ← First|Prev|1|…|Next|Last
 *           <ul class="pagination">
 *             <li class="paginate_button first"><a>First</a></li>
 *             …
 *           </ul>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * Layout: left column is "Showing X of Y entries", right column is
 * [jump-to-page select] [ pagination buttons ] — in that DOM order, right-
 * aligned, single line on desktop, centered and wrapped on mobile.
 * pagingType: "full_numbers" is forced in assets/js/main.min.js and
 * assets/builds/common.js so every table shows First / Previous / numbers
 * / Next / Last consistently.
 * --------------------------------------------------------------------- */

/* Footer row — make it a flex container so columns align on the same
   centerline instead of Bootstrap's default float layout. Use extra
   attribute/class specificity so module-level rules (e.g. historical
   .mailbox-module-page overrides) can't beat it. */
.dataTables_wrapper div.row:last-child,
div.dataTables_wrapper div.row:last-child {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    /* Symmetric vertical breathing room so the pagination row sits
       equally between the table's last row and the panel/card edge
       below. Without this, the pagination hugs the table above and
       leaves a bigger gap to the panel's natural padding-bottom. */
    padding-top: 14px !important;
    padding-bottom: 14px !important;
    min-height: 52px !important;
}

.dataTables_wrapper div.row:last-child > div.col-md-4,
.dataTables_wrapper div.row:last-child > div.col-md-8 {
    display: flex !important;
    align-items: center !important;
    float: none !important;
}

/* Info text on the left of the footer row. Matched to pill height (36px)
   and flex-centered so its baseline sits at the same y as the pagination
   pills regardless of parent layout. */
.dataTables_wrapper .dataTables_info {
    display: flex !important;
    align-items: center !important;
    min-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: #667085 !important;
    white-space: normal !important;
}

/* Right-column container — single row, items aligned, right-justified. */
.dataTables_wrapper .row:last-child .col-md-8.dataTables_paging {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 15px !important;
    float: none !important;
}

/* Neutralize any module-level flex `order:` overrides (e.g. old mailbox
   rules that pushed dt-page-jump to position 2). The footer should follow
   DOM order so every table looks identical. */
.dataTables_wrapper .row:last-child .col-md-8.dataTables_paging > *,
.dataTables_wrapper .row:last-child .col-md-8.dataTables_paging #colvis,
.dataTables_wrapper .row:last-child .col-md-8.dataTables_paging .dt-page-jump,
.dataTables_wrapper .row:last-child .col-md-8.dataTables_paging .dataTables_paginate {
    order: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Jump-to-page dropdown (the "1" select to the left of the page buttons). */
.dataTables_wrapper .dt-page-jump {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}
.dataTables_wrapper .dt-page-jump-select.form-control,
.dataTables_wrapper select.dt-page-jump-select {
    height: 36px !important;
    min-width: 54px !important;
    max-width: 90px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #344054 !important;
    box-shadow: none !important;
}

/* Pagination wrapper + list. */
.dataTables_wrapper .dataTables_paginate {
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
}
.dataTables_wrapper .dataTables_paginate .pagination,
.dataTables_wrapper div.dataTables_paginate ul.pagination {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    vertical-align: middle !important;
}
.dataTables_wrapper .dataTables_paginate .pagination > li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* The individual page buttons — anchors inside <li>. The bundled vendor
   CSS only styles span children so anchors would otherwise render as
   unstyled links. Explicit borders + padding make every button look the
   same regardless of which view rendered the table. */
.dataTables_wrapper .dataTables_paginate .pagination > li > a,
.dataTables_wrapper .dataTables_paginate .pagination > li > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #344054 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 120ms ease, border-color 120ms ease,
                color 120ms ease, box-shadow 120ms ease !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > li > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li > a:focus {
    background: #f2f4f7 !important;
    border-color: #98a2b3 !important;
    color: #1d2939 !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Current page — DataTables' Bootstrap renderer adds `active` on the <li>. */
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > a:focus,
.dataTables_wrapper .dataTables_paginate .pagination > li.active > span {
    background: #3b4ba1 !important;
    border-color: #3b4ba1 !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
    cursor: default !important;
}

/* Disabled (First/Previous on page 1, Next/Last on last page, ellipsis). */
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a:hover,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > a:focus,
.dataTables_wrapper .dataTables_paginate .pagination > li.disabled > span {
    background: transparent !important;
    border-color: #e4e7eb !important;
    color: #9aa3af !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_paginate .pagination > li.paginate_button.disabled > a {
    color: #9aa3af !important;
}

/* Page-size selector inside DataTables' lengthMenu (e.g. customer list's
   "10" dropdown). Keep it consistent with the jump-to-page selector. */
.dataTables_wrapper .dataTables_length {
    padding-top: 4px;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_length select.form-control,
.dataTables_wrapper .dataTables_length select.form-control.input-sm {
    height: 36px !important;
    min-width: 64px !important;
    padding: 0 8px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #344054 !important;
    box-shadow: none !important;
}

/* Mobile: footer row stacks, pagination centers. */
@media (max-width: 767px) {
    .dataTables_wrapper .row:last-child .col-md-4,
    .dataTables_wrapper .row:last-child .col-md-8.dataTables_paging {
        width: 100% !important;
        flex: 1 1 100% !important;
        justify-content: center !important;
        padding: 4px 0 !important;
        text-align: center !important;
    }
    .dataTables_wrapper .dataTables_info {
        text-align: center !important;
    }
    .dataTables_wrapper .dataTables_paginate .pagination {
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
}