fix: resolve modal dropdown z-index conflicts across application

Restructure 7 modal components to use 3-layer architecture preventing
native select dropdown menus from being blocked by modal overlays.

Components fixed:
- ProxyHostForm: ACL selector and Security Headers dropdowns
- User management: Role and permission mode selection
- Uptime monitors: Monitor type selection (HTTP/TCP)
- Remote servers: Provider selection dropdown
- CrowdSec: IP ban duration selection

The fix separates modal background overlay (z-40) from form container
(z-50) and enables pointer events only on form content, allowing
native dropdown menus to render above all modal layers.

Resolves user inability to select security policies, user roles,
monitor types, and other critical configuration options through
the UI interface.

frontend/src/pages/CrowdSecConfig.tsx

@@ -1172,9 +1172,15 @@ export default function CrowdSecConfig() {
 
       {/* Ban IP Modal */}
       {showBanModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center">
-          <div className="absolute inset-0 bg-black/60" onClick={() => setShowBanModal(false)} />
-          <div className="relative bg-dark-card rounded-lg p-6 w-[480px] max-w-full">
+        <>
+          {/* Layer 1: Background overlay (z-40) */}
+          <div className="fixed inset-0 bg-black/60 z-40" onClick={() => setShowBanModal(false)} />
+          
+          {/* Layer 2: Form container (z-50, pointer-events-none) */}
+          <div className="fixed inset-0 flex items-center justify-center pointer-events-none z-50">
+            
+            {/* Layer 3: Form content (pointer-events-auto) */}
+            <div className="bg-dark-card rounded-lg p-6 w-[480px] max-w-full pointer-events-auto">
             <h3 className="text-xl font-semibold text-white mb-4 flex items-center gap-2">
               <ShieldOff className="h-5 w-5 text-red-400" />
               {t('crowdsecConfig.banModal.title')}