/*
 * Styles to handle long pagination controls within a constrained container,
 * like a dashboard card, by making them horizontally scrollable.
 * This version uses a consistent two-row layout.
 */

/* --- Main Layout --- */
.pagination-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pagination-controls {
    display: flex;
    justify-content: flex-end; /* Align controls to the right */
    align-items: center;
    gap: 1rem; /* Space between jump and per-page controls */
    margin-top: 0.75rem;
    width: 100%;
}

/* --- Base Styles for the Pagination Component --- */

.pagination-scroll-container {
    width: 100%;
    overflow-x: auto; /* Enable horizontal scrolling */
    overflow-y: hidden; /* Hide vertical scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS devices */
    padding-bottom: 10px; /* Add space below for the scrollbar to not overlap content */
    margin-bottom: -10px; /* Counteract padding to maintain original layout spacing */
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: #ced4da #f8f9fa; /* For Firefox */
}

.pagination-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.pagination-scroll-container::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}
.pagination-scroll-container::-webkit-scrollbar-thumb {
    background-color: #ced4da;
    border-radius: 4px;
    border: 2px solid #f8f9fa;
}
.pagination-scroll-container .pagination {
    white-space: nowrap; /* Prevent page items from wrapping to the next line */
    margin-bottom: 0; /* Remove default bottom margin if any */
}

.jump-to-page-form {
    gap: 0.25rem; /* Adds a small space between the input and the button */
}
.jump-to-page-input {
    width: 75px !important; /* Override Bootstrap's default width */
}
.jump-to-page-form .form-control-sm,
.jump-to-page-form .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: .875rem;
    height: calc(1.5em + 0.5rem + 2px);
}