/**
 * DGA Unified Design System – Pagination (Navigational)
 * Reference: https://design.dga.gov.sa/guidelines/components/navigational/pagination
 * Aligns with Platform Code / National Design System. RTL/LTR supported via logical properties.
 */

:root {
  --dga-pagination-padding-x: 0.75rem;
  --dga-pagination-padding-y: 0.375rem;
  --dga-pagination-font-size: 1rem;
  --dga-pagination-color: #1f2937;
  --dga-pagination-bg: #fff;
  --dga-pagination-border: 1px solid #e6edef;
  --dga-pagination-radius: 8px;
  --dga-pagination-hover-bg: #f3f4f6;
  --dga-pagination-hover-border: #e6edef;
  --dga-pagination-active-underline: #1b8253;
  --dga-pagination-active-bg: #1b8253;
  --dga-pagination-active-color: #fff;
  --dga-pagination-active-border: #1b8253;
  --dga-pagination-disabled-bg: #e9ecef;
  --dga-pagination-disabled-color: #6c757d;
  --dga-pagination-focus-ring: 0 0 0 2px #fff, 0 0 0 4px #01527a;
}

/* Semantic nav wrapper */
nav.dga-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
}

.dga-pagination__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.dga-pagination__item {
  margin: 0;
}

.dga-pagination__link,
.dga-pagination__prev-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: var(--dga-pagination-padding-y) var(--dga-pagination-padding-x);
  font-size: var(--dga-pagination-font-size);
  font-weight: 500;
  color: var(--dga-pagination-color);
  background-color: var(--dga-pagination-bg);
  border: var(--dga-pagination-border);
  border-radius: var(--dga-pagination-radius);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.dga-pagination__link:hover:not(.dga-pagination__link--active):not(:disabled),
.dga-pagination__prev-next:hover:not(:disabled) {
  background-color: var(--dga-pagination-hover-bg);
  border-color: var(--dga-pagination-hover-border);
  color: var(--dga-pagination-color);
}

.dga-pagination__link--active {
  background-color: var(--dga-pagination-active-bg);
  border-color: var(--dga-pagination-active-border);
  color: var(--dga-pagination-active-color);
  cursor: default;
}

.dga-pagination__link:focus-visible,
.dga-pagination__prev-next:focus-visible {
  outline: none;
  box-shadow: var(--dga-pagination-focus-ring);
}

.dga-pagination__prev-next:disabled,
.dga-pagination__link:disabled {
  background-color: var(--dga-pagination-disabled-bg);
  color: var(--dga-pagination-disabled-color);
  border-color: var(--dga-pagination-disabled-bg);
  cursor: not-allowed;
  pointer-events: none;
}

.dga-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  min-height: 2rem;
  padding: var(--dga-pagination-padding-y) var(--dga-pagination-padding-x);
  font-size: var(--dga-pagination-font-size);
  color: var(--dga-pagination-color);
  user-select: none;
}

/* Optional: page size selector wrapper */
.dga-pagination__size {
  margin-inline-start: 0.75rem;
}

/* RTL: flip chevron icons if using fa-chevron-* */
[dir="rtl"] .dga-pagination__prev-next .fa-chevron-left {
  transform: scaleX(-1);
}
[dir="rtl"] .dga-pagination__prev-next .fa-chevron-right {
  transform: scaleX(-1);
}

/* Loading state: reduce opacity */
.dga-pagination.dga-pagination--loading {
  opacity: 0.7;
  pointer-events: none;
}

/* ---- Restyle Ant Design Table pagination to match DGA (underline style) ---- */
/* Lightweight: no borders/backgrounds on items; active = green underline only */

.ant-table-pagination.ant-pagination,
.ant-pagination {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0;
  margin: 10px 0 !important;
  list-style: none;
}

.ant-pagination-item,
.ant-pagination-prev,
.ant-pagination-next {
  margin: 0 !important;
}

.ant-pagination-item a,
.ant-pagination-next .ant-pagination-item-link,
.ant-pagination-prev .ant-pagination-item-link {
  min-height: 2rem;
  padding: var(--dga-pagination-padding-y) var(--dga-pagination-padding-x);
  font-size: var(--dga-pagination-font-size);
  font-weight: 500;
  color: var(--dga-pagination-color) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.ant-pagination-item a:hover,
.ant-pagination-next .ant-pagination-item-link:hover,
.ant-pagination-prev .ant-pagination-item-link:hover {
  color: var(--dga-pagination-color) !important;
  background: #ededed !important;
  /*border: none !important;*/
}

/* Active page: green underline only (no filled background) */
.ant-pagination-item-active,
.ant-pagination-item-active a {
  color: var(--dga-pagination-color) !important;
  background: transparent !important;
  border: none !important;
}

.ant-pagination-item-active a {
  padding-bottom: 4px !important;
  border-bottom: 3px solid var(--dga-pagination-active-underline) !important;
  padding-bottom: calc(var(--dga-pagination-padding-y) - 3px);
}

.ant-pagination-item a:focus-visible,
.ant-pagination-next .ant-pagination-item-link:focus-visible,
.ant-pagination-prev .ant-pagination-item-link:focus-visible {
  outline: none;
  box-shadow: var(--dga-pagination-focus-ring);
}

.ant-pagination-disabled .ant-pagination-item-link,
.ant-pagination-disabled {
  background: transparent !important;
  color: var(--dga-pagination-disabled-color) !important;
  border: none !important;
  opacity: 0.6;
}

.ant-pagination-item-ellipsis {
  color: var(--dga-pagination-color);
}