/* =========================================================
   pagination.css — DutchLine UI (Pagination)
   - Styles Bootstrap pagination
   - Premium, soft, enterprise
   - Sizes, compact, input-jump, per-page, meta bar
   ========================================================= */

.dl-pager{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

/* meta links, controls rechts */
.dl-pager-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap: 10px;
  margin-left:auto; /* = ms-auto effect */
}

.dl-pager-meta{
  color: var(--muted);
  font-weight: 800;
  letter-spacing: .01em;
  font-size: .95rem;
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

.dl-pager .pagination{
  margin: 0;
  gap: 8px;
}

/* Base link */
.dl-pager .page-link{
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  color: rgba(11,18,32,.86);
  font-weight: 900;
  letter-spacing: .01em;
  padding: 10px 12px;
  min-width: 42px;
  text-align:center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
  box-shadow: 0 10px 22px rgba(11,18,32,.06);
}

.dl-pager .page-link:hover{
  transform: translateY(-1px);
  background: #fff;
  border-color: var(--border2);
  color: var(--ink);
  box-shadow: 0 12px 26px rgba(11,18,32,.08);
}

.dl-pager .page-link:focus{ outline:none; }
.dl-pager .page-link:focus-visible{
  box-shadow: 0 0 0 6px var(--focus), 0 12px 26px rgba(11,18,32,.08);
}

/* Active */
.dl-pager .page-item.active .page-link{
  border-color: rgba(48,77,161,.22);
  background: rgba(48,77,161,.10);
  color: var(--ink);
  box-shadow: 0 14px 30px rgba(48,77,161,.12);
}

/* Disabled */
.dl-pager .page-item.disabled .page-link,
.dl-pager .page-link[aria-disabled="true"]{
  opacity: .55;
  pointer-events:none;
  transform:none;
  box-shadow:none;
}

/* Ellipsis */
.dl-pager .page-item .page-link.dl-ellipsis{
  background: rgba(11,18,32,.05);
  border-color: rgba(11,18,32,.08);
  min-width: 46px;
}

/* Compact variant */
.dl-pager.dl-pager-compact .page-link{
  padding: 8px 10px;
  min-width: 38px;
  border-radius: 12px;
  font-size: .92rem;
}

/* Size variants */
.dl-pager.dl-pager-sm .page-link{
  padding: 8px 10px;
  min-width: 38px;
  border-radius: 12px;
  font-size: .92rem;
}
.dl-pager.dl-pager-lg .page-link{
  padding: 12px 14px;
  min-width: 46px;
  border-radius: 16px;
  font-size: 1.02rem;
}

/* Optional variant */
.dl-pager[data-variant="soft"] .page-item.active .page-link{
  background: rgba(48,77,161,.08);
  border-color: rgba(48,77,161,.18);
  box-shadow: 0 14px 30px rgba(48,77,161,.10);
}

/* Jump / per page controls */
.dl-pager .dl-pager-jump{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dl-pager .dl-pager-jump .form-control{
  width: 92px;
  text-align:center;
}

.dl-pager .dl-pager-perpage{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dl-pager .dl-pager-perpage .form-select{
  width: auto;
  min-width: 120px;
}

/* Little "pill" labels */
.dl-pager .dl-mini{
  border-radius: 12px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.86);
  padding: 8px 10px;
  font-weight: 850;
  color: rgba(11,18,32,.84);
}

/* Loading state (optional, JS toggles) */
.dl-pager.is-loading{
  opacity: .75;
  pointer-events:none;
}
.dl-pager.is-loading .dl-mini::after{
  content:"";
  display:inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border-radius: 999px;
  border: 2px solid rgba(11,18,32,.35);
  border-right-color: transparent;
  animation: dlPagerSpin .75s linear infinite;
  vertical-align: -2px;
}
@keyframes dlPagerSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
.dl-pager{
  width: 100%;
}

.dl-pager-controls{
  margin-left: auto;
  justify-content: flex-end; /* extra duw naar rechts */
}