/* * Shared pagination design — single source of truth for every pagination * control in the app (Bootstrap-native pagination, DataTables 2.x, the * legacy DataTables 1.13.7 bundle, and the hand-rolled website .pag-wrap). * Loaded on both the backend (admin/employer/candidate) and frontend * (website) layouts so every pagination control renders identically. */ /* * Laravel Debugbar renders a fixed, full-width bar pinned to the bottom of the * viewport with an extremely high z-index. On pages where pagination sits near * the bottom of the content flow, scrolling down can place the pagination row * underneath that bar, so a click lands on the debugbar instead of the button * beneath it (this is what made pagination clicks need 2-3 attempts). Reserve * clearance only when the debugbar is actually present — :has() makes this a * no-op in production, where the debugbar never renders. */ body:has(.phpdebugbar) { padding-bottom: 46px; } html:has(.phpdebugbar) { scroll-padding-bottom: 46px; } :root { --pagination-brand: #294272; --pagination-active-fill: var(--pagination-brand); --pagination-border: #e8eaf1; --pagination-text: #474747; --pagination-muted: #ccc; --pagination-surface: #fff; --pagination-radius: 8px; --pagination-size: 38px; --pagination-font-size: 13px; --pagination-gap: 6px; } /* * Dark-mode tokens. This file is shared with the public website layout, * which never toggles [data-bs-theme="dark"], so these are self-contained * literals rather than references into admin_new/app.css's --card/--line/ * --brand tokens (those aren't guaranteed to exist wherever this stylesheet * loads). Values mirror that same dark palette by eye for visual * consistency across Admin + Employer, not by reference. * * --pagination-brand alone can't serve both roles it has in light mode: as * plain text/border color it needs to be light enough to read on a dark * background (#71a2ff, already used for dark-mode blue accents elsewhere), * but as the active page's solid fill behind white text that same light * blue is too close to white to give the number any contrast. --active-fill * splits that role out, using #3b82f6 - the same blue+white-text combination * already used for flatpickr's dark "selected date" state - so an "active/ * selected" control looks the same everywhere in the app. */ [data-bs-theme="dark"] { --pagination-brand: #71a2ff; --pagination-active-fill: #3b82f6; --pagination-border: #2c3a58; --pagination-text: #e5e7eb; --pagination-muted: #64748b; --pagination-surface: #16233d; } /* Bootstrap-native pagination (