/* ===== Global Pagination with Dark Mode Support ===== */
nav[role="navigation"] {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 6px !important;
    margin-top: 1.5rem !important;
    font-size: 0.875rem !important; /* text-sm */
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

/* Link umum (nomor, prev, next) */
nav[role="navigation"] a,
nav[role="navigation"] span {
    color: #374151 !important; /* gray-700 */
    padding: 6px 10px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-weight: 500 !important;
    min-width: 36px !important;
    text-align: center !important;
    background: transparent !important;
    border: none !important;
}

/* Dark mode for links */
.dark nav[role="navigation"] a,
.dark nav[role="navigation"] span {
    color: #d1d5db !important; /* gray-300 */
}

/* Hover efek clean */
nav[role="navigation"] a:hover {
    color: #2563eb !important; /* blue-600 */
    background-color: #f3f4f6 !important; /* gray-100 */
}

/* Dark mode hover */
.dark nav[role="navigation"] a:hover {
    color: #60a5fa !important; /* blue-400 */
    background-color: #374151 !important; /* gray-700 */
}

/* Halaman aktif: background biru dengan angka putih */
nav[role="navigation"] span[aria-current="page"] {
    background-color: #2563eb !important; /* blue-600 */
    color: white !important;
    font-weight: 600 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Dark mode active page: background biru dengan angka putih */
.dark nav[role="navigation"] span[aria-current="page"] {
    background-color: #3b82f6 !important; /* blue-500 */
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}

/* Memastikan angka di dalam pagination aktif berwarna putih */
nav[role="navigation"] span[aria-current="page"] * {
    color: white !important;
}

.dark nav[role="navigation"] span[aria-current="page"] * {
    color: white !important;
}

/* Disabled tombol */
nav[role="navigation"] span[aria-disabled="true"] {
    color: #9ca3af; /* gray-400 */
    cursor: not-allowed;
    opacity: 0.5;
}

/* Dark mode disabled */
.dark nav[role="navigation"] span[aria-disabled="true"] {
    color: #6b7280; /* gray-500 */
}

/* Responsif */
@media (max-width: 640px) {
    nav[role="navigation"] {
        gap: 4px;
    }
    
    nav[role="navigation"] a,
    nav[role="navigation"] span {
        font-size: 0.75rem;
        padding: 4px 8px;
        min-width: 32px;
    }
}
