/*
 * pagination.css — PaginationNavigation, SimplePaginationNavigation
 */

/* ─── Full Pagination ────────────────────────────────────────────────────── */

div.PaginationNavigation {
  display: flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  background: var(--color-heading-bg);
  color: var(--color-text);
  font-size: var(--font-size-base);
  border-bottom: 1px solid var(--color-border-soft);
}
div.PaginationNavigation div.Caption {
  font-weight: 600;
  color: var(--color-text);
}
div.PaginationNavigation div.Caption span {
  font-weight: 600;
}

div.PaginationNavigation div.BackButton a,
div.PaginationNavigation div.ForwardButton a {
  display: block;
  font-weight: bold;
  width: 80px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  /* vertical-align: middle; */
  color: var(--color-text);
}
div.PaginationNavigation div.BackButton a:hover,
div.PaginationNavigation div.ForwardButton a:hover {
  background: var(--color-accent);
  color: var(--color-accent-text);
}
div.PaginationNavigation div.BackButton a    { border-right: 2px solid var(--color-bg); }
div.PaginationNavigation div.ForwardButton a { border-left:  2px solid var(--color-bg); }

div.PaginationNavigation div.BackButton    { order: 1; }
div.PaginationNavigation div.Caption,
div.PaginationNavigation div.PageLinks     { order: 2; flex: 1; text-align: center; }
/* Paginator prints "Last" before "Next" so classic theme renders Next | Last because of float.
   In the new theme, flip them visually via flex order so it reads Next|Last.
   Adjacent-sibling selector identifies the SECOND ForwardButton (Next). */
div.PaginationNavigation div.ForwardButton                          { order: 4; }
div.PaginationNavigation div.ForwardButton + div.ForwardButton      { order: 3; }
div.PaginationNavigation div.Caption span {
  height: 20px;
  line-height: 20px;
  vertical-align: middle;
}

div.PaginationNavigation div.PageLinks a {
  display: inline-block;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  padding: 2px 3px;
}
div.PaginationNavigation div.PageLinks a.Selected {
  background: var(--color-bg);
  color: var(--color-text);
}
div.PaginationNavigation div.PageLinks a:hover {
  background: var(--color-accent);
  color: var(--color-accent-text);
}
div.PaginationNavigation div.PageLinks span.Dotdotdot {
  display: inline-block;
  height: 18px;
  line-height: 18px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
}

/* ─── Simple Pagination ──────────────────────────────────────────────────── */

div.SimplePaginationNavigation {
  display: flex;
  align-items: center;
  height: 20px;
  width: 300px;
  margin: 0 auto;
}
div.SimplePaginationNavigation div.BackButton a,
div.SimplePaginationNavigation div.ForwardButton a {
  display: block;
  font-weight: bold;
  height: 20px;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
}
div.SimplePaginationNavigation div.BackButton a:hover,
div.SimplePaginationNavigation div.ForwardButton a:hover {
  text-decoration: underline;
}
div.SimplePaginationNavigation div.ForwardButton a { margin-left: auto; }