/* Bacagratis v11.2 - Fix Laravel/Tailwind pagination without Tailwind runtime */

/* Target khusus pagination bawaan Laravel agar SVG panah tidak raksasa */
nav[role="navigation"][aria-label="Pagination Navigation"]{
  margin: 28px auto 18px !important;
  width: 100% !important;
  max-width: 100% !important;
  color: #0f172a !important;
}

/* SVG bawaan pagination Laravel menggunakan class w-5 h-5.
   Karena Tailwind tidak aktif, class itu tidak punya ukuran. */
nav[role="navigation"][aria-label="Pagination Navigation"] svg,
nav[role="navigation"][aria-label="Pagination Navigation"] .w-5,
nav[role="navigation"][aria-label="Pagination Navigation"] .h-5{
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block !important;
  flex: 0 0 18px !important;
}

/* Fallback Tailwind utility yang dipakai template pagination */
nav[role="navigation"][aria-label="Pagination Navigation"] .hidden{
  display: none !important;
}
nav[role="navigation"][aria-label="Pagination Navigation"] .flex,
nav[role="navigation"][aria-label="Pagination Navigation"] .inline-flex{
  display: inline-flex !important;
}
nav[role="navigation"][aria-label="Pagination Navigation"] .items-center{
  align-items: center !important;
}
nav[role="navigation"][aria-label="Pagination Navigation"] .justify-between{
  justify-content: space-between !important;
}
nav[role="navigation"][aria-label="Pagination Navigation"] .gap-2{
  gap: .5rem !important;
}

/* Desktop: tampilkan pagination lengkap, sembunyikan versi mobile */
@media (min-width: 640px){
  nav[role="navigation"][aria-label="Pagination Navigation"] .sm\:hidden{
    display: none !important;
  }
  nav[role="navigation"][aria-label="Pagination Navigation"] .sm\:flex,
  nav[role="navigation"][aria-label="Pagination Navigation"] .sm\:flex-1{
    display: flex !important;
  }
  nav[role="navigation"][aria-label="Pagination Navigation"] .sm\:items-center{
    align-items: center !important;
  }
  nav[role="navigation"][aria-label="Pagination Navigation"] .sm\:justify-between{
    justify-content: space-between !important;
  }
  nav[role="navigation"][aria-label="Pagination Navigation"] .sm\:gap-2{
    gap: .5rem !important;
  }
}

/* Mobile: tampilkan simple previous/next */
@media (max-width: 639px){
  nav[role="navigation"][aria-label="Pagination Navigation"] .sm\:hidden{
    display: flex !important;
  }
  nav[role="navigation"][aria-label="Pagination Navigation"] .hidden.sm\:flex,
  nav[role="navigation"][aria-label="Pagination Navigation"] .hidden.sm\:flex-1{
    display: none !important;
  }
}

/* Rapikan tombol pagination bawaan Laravel */
nav[role="navigation"][aria-label="Pagination Navigation"] a,
nav[role="navigation"][aria-label="Pagination Navigation"] span[aria-disabled="true"] > span,
nav[role="navigation"][aria-label="Pagination Navigation"] span[aria-current="page"] > span{
  min-height: 38px !important;
  padding: 8px 12px !important;
  border: 1px solid #dbeafe !important;
  background: #fff !important;
  color: #334155 !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .04) !important;
  margin-left: 4px !important;
}

nav[role="navigation"][aria-label="Pagination Navigation"] a:hover{
  color: #1d4ed8 !important;
  border-color: #93c5fd !important;
  background: #eff6ff !important;
}

nav[role="navigation"][aria-label="Pagination Navigation"] span[aria-current="page"] > span{
  color: #fff !important;
  border-color: #2563eb !important;
  background: #2563eb !important;
}

nav[role="navigation"][aria-label="Pagination Navigation"] span[aria-disabled="true"] > span{
  color: #94a3b8 !important;
  background: #f8fafc !important;
  cursor: not-allowed !important;
}

/* Text "Showing 1 to..." dibuat lebih halus */
nav[role="navigation"][aria-label="Pagination Navigation"] p{
  margin: 0 !important;
  color: #64748b !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

nav[role="navigation"][aria-label="Pagination Navigation"] .font-medium{
  font-weight: 800 !important;
  color: #0f172a !important;
}

/* Hindari whitespace besar kalau ada SVG atau flex gagal */
nav[role="navigation"][aria-label="Pagination Navigation"] *{
  max-width: 100%;
}

/* Extra fallback global: class Tailwind w-5/h-5 hanya untuk SVG */
svg.w-5.h-5{
  width: 18px !important;
  height: 18px !important;
}