/*
 * Pagination Digiyok (FR-11).
 *
 * Satu gaya untuk semua list: partial resources/views/vendor/pagination/digiyok.blade.php (view default paginator
 * Laravel, didaftarkan di AppServiceProvider) dan pagination DataTables. Warna memakai palet teal di
 * public/css/admin/custom.css; nilai cadangannya berlaku di halaman yang tidak memuat custom.css (halaman publik).
 *
 * Teks aksen dan halaman aktif memakai teal gelap #0f7a68: teal utama #16b69c hanya memberi kontras 2,6:1 dengan
 * putih, sedangkan #0f7a68 memberi 5,2:1.
 *
 * Selektor DataTables diawali "body div." supaya menang atas dataTables.bootstrap4.css yang dimuat sesudah file ini.
 */

.dy-pagination,
.dataTables_wrapper {
  --dy-pagination-accent: #0f7a68;
  --dy-pagination-on-accent: #fff;
  --dy-pagination-soft: var(--caribbean-green-100, #edfaf5);
  --dy-pagination-soft-border: var(--caribbean-green-300, #a5e5cf);
  --dy-pagination-focus: rgba(22, 182, 156, 0.4);
  --dy-pagination-bg: #fff;
  --dy-pagination-border: #dddfeb;
  --dy-pagination-text: #5a5c69;
  --dy-pagination-strong: #3a3b45;
  --dy-pagination-muted: #b7b9cc;
  --dy-pagination-disabled-bg: #f8f9fc;
}

/* Tata letak: ringkasan di kiri, tombol di kanan */
.dy-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
}

.dy-pagination--simple {
  justify-content: flex-end;
}

.dy-pagination--top {
  margin-top: 0;
  margin-bottom: 1rem;
}

.dy-pagination__summary,
body div.dataTables_wrapper div.dataTables_info {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--dy-pagination-text);
}

.dy-pagination__summary strong {
  font-weight: 700;
  color: var(--dy-pagination-strong);
}

/* Daftar tombol */
.dy-pagination .pagination,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Tombol: bawaan */
.dy-pagination .pagination .page-item .page-link,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--dy-pagination-text);
  background-color: var(--dy-pagination-bg);
  border: 1px solid var(--dy-pagination-border);
  border-radius: 0.5rem;
  box-shadow: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}

.dy-pagination .pagination .page-link .fas {
  font-size: 0.75rem;
}

/* Tombol: hover */
.dy-pagination .pagination .page-item:not(.active):not(.disabled) .page-link:hover,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item:not(.active):not(.disabled) .page-link:hover {
  color: var(--dy-pagination-accent);
  background-color: var(--dy-pagination-soft);
  border-color: var(--dy-pagination-soft-border);
  text-decoration: none;
}

/* Tombol: fokus, cincin hanya untuk navigasi keyboard */
.dy-pagination .pagination .page-item .page-link:focus,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link:focus {
  outline: 0;
  box-shadow: none;
}

.dy-pagination .pagination .page-item .page-link:focus-visible,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item .page-link:focus-visible {
  position: relative;
  z-index: 3;
  border-color: var(--dy-pagination-accent);
  box-shadow: 0 0 0 0.2rem var(--dy-pagination-focus);
}

/* Tombol: halaman aktif */
.dy-pagination .pagination .page-item.active .page-link,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.active .page-link {
  color: var(--dy-pagination-on-accent);
  background-color: var(--dy-pagination-accent);
  border-color: var(--dy-pagination-accent);
  cursor: default;
}

/* Tombol: nonaktif (Previous di halaman pertama, Next di halaman terakhir) */
.dy-pagination .pagination .page-item.disabled,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled {
  cursor: not-allowed;
}

.dy-pagination .pagination .page-item.disabled .page-link,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled .page-link {
  color: var(--dy-pagination-muted);
  background-color: var(--dy-pagination-disabled-bg);
  border-color: var(--dy-pagination-border);
  pointer-events: none;
}

/* Elipsis di antara nomor halaman */
.dy-pagination .pagination .page-item.disabled.dy-pagination__ellipsis .page-link,
body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.disabled[id$="_ellipsis"] .page-link {
  min-width: 1.5rem;
  padding: 0 0.25rem;
  color: var(--dy-pagination-text);
  background-color: transparent;
  border-color: transparent;
}

/*
 * Mobile: ringkasan di atas, lalu hanya Previous, halaman aktif, dan Next. Area konten di ponsel hanya sekitar
 * 160px (sidebar admin tetap tampil), jadi Previous dan Next menjadi tombol ikon; teksnya tetap dibaca pembaca layar.
 */
@media (max-width: 575.98px) {
  .dy-pagination {
    flex-direction: column;
    gap: 0.625rem;
  }

  .dy-pagination__summary {
    text-align: center;
  }

  .dy-pagination .pagination .page-item:not(.active):not(.dy-pagination__nav),
  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item:not(.active):not(.previous):not(.next) {
    display: none;
  }

  .dy-pagination .pagination .dy-pagination__nav .page-link,
  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.previous .page-link,
  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.next .page-link {
    padding: 0;
  }

  .dy-pagination .dy-pagination__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.previous .page-link,
  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.next .page-link {
    font-size: 0;
  }

  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.previous .page-link::before,
  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.next .page-link::before {
    font-family: "Font Awesome 5 Free";
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
  }

  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.previous .page-link::before {
    content: "\f053";
  }

  body div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-item.next .page-link::before {
    content: "\f054";
  }

  body div.dataTables_wrapper div.dataTables_info {
    white-space: normal;
  }
}