/*
 * Pagination
 * ----------
 * Shared by the public site (layouts/website.blade.php) and the dashboard
 * (layouts/dashboard.blade.php). Loaded AFTER bootstrap.min.css so these rules win.
 *
 * The project ships the LTR Bootstrap 5.1.3 build but renders `dir="rtl"`, so the
 * stock `.pagination { padding-left: 0 }` never clears the UA's start padding in
 * RTL and the control sits ~40px off its container. Everything below is written
 * with logical properties so it behaves in both directions.
 */

.app-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    width: 100%;
    margin-block: 1.5rem 0;
}

/* Reset the UA list padding on BOTH sides -- the LTR Bootstrap build only zeroes
   padding-left, which is the *end* side in RTL. This is the actual misalignment. */
.app-pagination .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding-inline: 0;
    margin-block: 0;
    list-style: none;
}

.app-pagination .page-item {
    margin: 0;
}

.app-pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.375rem;
    height: 2.375rem;
    padding: 0 .625rem;
    border: 1px solid #dee2e6;
    border-radius: .375rem;
    font-family: cairo, 'Noto Kufi Arabic', arial, helvetica, sans-serif;
    font-size: .9375rem;
    line-height: 1;
    color: #495057;
    background-color: #fff;
    text-decoration: none;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, color .15s ease-in-out;
}

/* Because we use gap + a radius on every item, Bootstrap's first/last-child
   radius rules (which are LTR-oriented) must be neutralised. */
.app-pagination .page-item:first-child .page-link,
.app-pagination .page-item:last-child .page-link {
    border-radius: .375rem;
}

.app-pagination .page-link:hover {
    color: #2f4f13;
    background-color: #f1f7e8;
    border-color: #8dc04b;
}

.app-pagination .page-link:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(141, 192, 75, .35);
    border-color: #8dc04b;
}

/* Active state uses the project's accent green (#8DC04B). */
.app-pagination .page-item.active .page-link {
    color: #fff;
    background-color: #8dc04b;
    border-color: #8dc04b;
    font-weight: 700;
    cursor: default;
}

.app-pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background-color: #f8f9fa;
    border-color: #e9ecef;
    pointer-events: none;
    cursor: not-allowed;
}

/* The "…" separator should read as a label, not a button. */
.app-pagination .page-item.disabled .page-link[aria-hidden="true"],
.app-pagination .page-item.disabled > span.page-link {
    background-color: transparent;
    border-color: transparent;
}

.app-pagination__summary {
    white-space: nowrap;
}

/* --- Responsive ------------------------------------------------------- */

/* Below Bootstrap's `sm` breakpoint the template swaps to prev/next only;
   let those two buttons share the row evenly. */
@media (max-width: 575.98px) {
    .app-pagination {
        margin-block-start: 1rem;
    }

    .app-pagination .pagination {
        width: 100%;
        justify-content: space-between;
        gap: .5rem;
    }

    .app-pagination .page-link {
        min-width: 0;
        flex: 1 1 auto;
        padding: 0 1rem;
    }
}

/* On narrow tablets the summary line competes with the page numbers for space;
   stack them and centre instead of letting the numbers overflow. */
@media (min-width: 576px) and (max-width: 767.98px) {
    .app-pagination > .d-sm-flex {
        flex-direction: column;
        align-items: center !important;
        gap: .5rem;
    }
}