- {section === 'users' && setRefreshKey(k => k + 1)} />}
+ {section === 'users' &&
+
+ );
+ }
+
+ // ── Lien invalide / expiré ───────────────────────────────────────────────
+ if (status === 'invalid') {
+ return (
+
+
+ );
+ }
+
+ // ── Succès ───────────────────────────────────────────────────────────────
+ if (status === 'done') {
+ return (
+
+
+ );
+ }
+
+ // ── Formulaire ───────────────────────────────────────────────────────────
+ const roleLabel = inv?.role === 'admin' ? 'Administrateur' : 'Utilisateur';
+
+ return (
+
+
+ );
+}
diff --git a/frontend/src/pages/admin/UsersSection.jsx b/frontend/src/pages/admin/UsersSection.jsx
index c4361e4..0928a26 100644
--- a/frontend/src/pages/admin/UsersSection.jsx
+++ b/frontend/src/pages/admin/UsersSection.jsx
@@ -1,146 +1,646 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
+import * as XLSX from 'xlsx';
import { api } from '../../api.js';
import ConfirmModal from '../../components/ConfirmModal.jsx';
-import { fmt, Badge } from './adminHelpers.jsx';
+import Modal from '../../components/Modal.jsx';
+import { fmt, Badge, UserStatusBadge } from './adminHelpers.jsx';
+// ── Helpers ────────────────────────────────────────────────────────────────
+
+function computedStatus(u) {
+ if (u.status === 'deactivated') return 'deactivated';
+ if (u.status === 'locked') return 'locked';
+ if (!u.email_verified) return 'pending';
+ return 'active';
+}
+
+const STATUS_OPTIONS = [
+ { value: 'all', label: 'Tous' },
+ { value: 'active', label: 'Actif' },
+ { value: 'pending', label: 'En attente' },
+ { value: 'deactivated', label: 'Désactivé' },
+ { value: 'locked', label: 'Verrouillé' },
+];
+
+const ROLE_OPTIONS = [
+ { value: 'all', label: 'Tous' },
+ { value: 'user', label: 'Utilisateur' },
+ { value: 'admin', label: 'Admin' },
+];
+
+const AVATAR_COLORS = [
+ ['#dbeafe','#1d4ed8'], ['#fce7f3','#be185d'], ['#d1fae5','#065f46'],
+ ['#fef3c7','#92400e'], ['#ede9fe','#5b21b6'], ['#fee2e2','#991b1b'],
+ ['#cffafe','#0e7490'], ['#dcfce7','#166534'],
+];
+
+function avatarColor(name) {
+ const code = [...(name || '?')].reduce((a, c) => a + c.charCodeAt(0), 0);
+ return AVATAR_COLORS[code % AVATAR_COLORS.length];
+}
+
+function initials(u) {
+ const n = u.display_name || u.email;
+ const parts = n.trim().split(/\s+/);
+ return parts.length >= 2
+ ? (parts[0][0] + parts[1][0]).toUpperCase()
+ : n.slice(0, 2).toUpperCase();
+}
+
+// ── Icônes SVG ─────────────────────────────────────────────────────────────
+const IcoEdit = () => ;
+const IcoCheck = () => ;
+const IcoMail = () => ;
+const IcoPause = () => ;
+const IcoPlay = () => ;
+const IcoTrash = () => ;
+const IcoDots = () => ;
+const IcoSearch = () => ;
+
+function MenuBtn({ onClick, icon, label, danger = false }) {
+ return (
+
+ );
+}
+
+// ── Export ─────────────────────────────────────────────────────────────────
+const STATUS_FR = { active: 'Actif', pending: 'En attente', deactivated: 'Désactivé', locked: 'Verrouillé' };
+
+function toRows(users) {
+ return users.map(u => ({
+ ID: u.id, Nom: u.display_name || '', Email: u.email,
+ Statut: STATUS_FR[computedStatus(u)] || '',
+ Rôle: u.role === 'admin' ? 'Admin' : 'Utilisateur',
+ '2FA': u.totp_enabled ? 'Oui' : 'Non',
+ 'Inscrit le': u.created_at ? u.created_at.replace('T', ' ').slice(0, 16) : '',
+ }));
+}
+
+function dlBlob(content, filename, type) {
+ const blob = new Blob([content], { type });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url; a.download = filename; a.click();
+ URL.revokeObjectURL(url);
+}
+
+function toCSV(users) {
+ const headers = ['ID', 'Nom', 'Email', 'Statut', 'Rôle', '2FA', 'Inscrit le'];
+ const rows = toRows(users).map(r => Object.values(r).map(v => `"${String(v).replace(/"/g,'""')}"`).join(','));
+ return '' + [headers.map(h => `"${h}"`).join(','), ...rows].join('\n');
+}
+function toXLSX(users) {
+ const ws = XLSX.utils.json_to_sheet(toRows(users));
+ const wb = XLSX.utils.book_new();
+ XLSX.utils.book_append_sheet(wb, ws, 'Utilisateurs');
+ return XLSX.write(wb, { type: 'array', bookType: 'xlsx' });
+}
+function toJSON(users) { return JSON.stringify(toRows(users), null, 2); }
+
+function ExportDropdown({ onCSV, onXLSX, onJSON }) {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+ useEffect(() => {
+ if (!open) return;
+ const h = e => { if (!ref.current?.contains(e.target)) setOpen(false); };
+ document.addEventListener('mousedown', h);
+ return () => document.removeEventListener('mousedown', h);
+ }, [open]);
+ const choose = fn => { setOpen(false); fn(); };
+ return (
+ Fermer
+ ) : (
+ <>
+
+
+
+ )}
+ >
+ {sent ? (
+
+ );
+}
+
+// ── Modale création utilisateur ────────────────────────────────────────────
+function CreateUserModal({ open, onClose, onCreated }) {
+ const [form, setForm] = useState({ email: '', password: '', displayName: '', role: 'user' });
+ const [loading, setLoading] = useState(false);
+ const [err, setErr] = useState(null);
+
+ const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
+
+ const reset = () => { setForm({ email: '', password: '', displayName: '', role: 'user' }); setErr(null); };
+
+ const handleClose = () => { reset(); onClose(); };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true); setErr(null);
+ try {
+ const created = await api.post('/admin/users', {
+ email: form.email,
+ password: form.password,
+ displayName: form.displayName || undefined,
+ role: form.role,
+ });
+ reset();
+ onCreated?.(created);
+ onClose();
+ } catch (e) { setErr(e.message); }
+ finally { setLoading(false); }
+ };
+
+ return (
+
+
+
+ }
+ >
+ {err &&
+ );
+}
+
+// ── Composant principal ────────────────────────────────────────────────────
export default function UsersSection({ currentUserId }) {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [err, setErr] = useState(null);
const [confirmAction, setConfirmAction] = useState(null);
+ const [showCreate, setShowCreate] = useState(false);
+ const [showInvite, setShowInvite] = useState(false);
+ const [search, setSearch] = useState('');
+ const [filterStatus, setFilterStatus] = useState('all');
+ const [filterRole, setFilterRole] = useState('all');
+ const [openMenu, setOpenMenu] = useState(null);
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(10);
const load = useCallback(async () => {
- try {
- setLoading(true);
- const data = await api.get('/admin/users');
- setUsers(data);
- } catch (e) { setErr(e.message); }
+ try { setLoading(true); setUsers(await api.get('/admin/users')); }
+ catch (e) { setErr(e.message); }
finally { setLoading(false); }
}, []);
useEffect(() => { load(); }, [load]);
+ useEffect(() => { setPage(1); }, [search, filterStatus, filterRole]);
+ useEffect(() => {
+ if (!openMenu) return;
+ const close = () => setOpenMenu(null);
+ window.addEventListener('scroll', close, true);
+ return () => window.removeEventListener('scroll', close, true);
+ }, [openMenu]);
- const toggleRole = (u) => {
+ // ── Filtrage ──────────────────────────────────────────────────────────
+ const filtered = users.filter(u => {
+ const q = search.toLowerCase();
+ if (q && !u.email.toLowerCase().includes(q) && !(u.display_name || '').toLowerCase().includes(q)) return false;
+ if (filterStatus !== 'all' && computedStatus(u) !== filterStatus) return false;
+ if (filterRole !== 'all' && u.role !== filterRole) return false;
+ return true;
+ });
+
+ const totalPages = Math.max(1, Math.ceil(filtered.length / pageSize));
+ const safePage = Math.min(page, totalPages);
+ const paged = filtered.slice((safePage - 1) * pageSize, safePage * pageSize);
+
+ // ── Actions ───────────────────────────────────────────────────────────
+ const confirm = (title, message, onConfirm, confirmLabel) =>
+ setConfirmAction({ title, message, onConfirm, confirmLabel });
+
+ const toggleRole = u => {
const newRole = u.role === 'admin' ? 'user' : 'admin';
- setConfirmAction({
- title: 'Changer le rôle',
- message: `Changer le rôle de ${u.display_name || u.email} → ${newRole === 'admin' ? 'Administrateur' : 'Utilisateur'} ?`,
- confirmLabel: 'Confirmer',
- onConfirm: async () => {
- try {
- await api.patch(`/admin/users/${u.id}/role`, { role: newRole });
- load();
- } catch (e) { setErr('Erreur : ' + e.message); }
- finally { setConfirmAction(null); }
- },
- });
+ confirm('Changer le rôle',
+ `Changer le rôle de ${u.display_name || u.email} → ${newRole === 'admin' ? 'Administrateur' : 'Utilisateur'} ?`,
+ async () => { await api.patch(`/admin/users/${u.id}/role`, { role: newRole }); load(); }, 'Confirmer');
+ };
+ const verifyEmail = u => confirm("Vérifier l'email",
+ `Marquer l'email de ${u.display_name || u.email} comme vérifié ?`,
+ async () => { await api.patch(`/admin/users/${u.id}/verify-email`, {}); load(); }, 'Confirmer');
+ const resendVerif = async u => {
+ try { await api.post('/auth/resend-verification', { email: u.email }); alert(`Email envoyé à ${u.email}`); }
+ catch (e) { setErr(e.message); }
+ };
+ const setStatus = (u, status) => {
+ const labels = { deactivated: 'Désactiver', active: 'Réactiver', locked: 'Verrouiller' };
+ confirm(`${labels[status]} le compte`, `${labels[status]} le compte de ${u.display_name || u.email} ?`,
+ async () => { await api.patch(`/admin/users/${u.id}/status`, { status }); load(); }, labels[status]);
+ };
+ const deleteUser = u => confirm("Supprimer l'utilisateur",
+ `Supprimer définitivement ${u.display_name || u.email} ? Toutes ses données seront effacées.`,
+ async () => { await api.del(`/admin/users/${u.id}`); load(); });
+
+ const openMenuFor = (e, u) => {
+ e.stopPropagation();
+ const rect = e.currentTarget.getBoundingClientRect();
+ setOpenMenu({ user: u, x: rect.right, y: rect.bottom });
};
- const verifyEmail = (u) => {
- setConfirmAction({
- title: 'Vérifier l\'email manuellement',
- message: `Marquer l'email de ${u.display_name || u.email} comme vérifié ?`,
- confirmLabel: 'Confirmer',
- onConfirm: async () => {
- try {
- await api.patch(`/admin/users/${u.id}/verify-email`, {});
- load();
- } catch (e) { setErr('Erreur : ' + e.message); }
- finally { setConfirmAction(null); }
- },
- });
+ // ── Pill dropdown custom ───────────────────────────────────────────────
+ const PillDropdown = ({ label, value, options, onChange }) => {
+ const [open, setOpen] = useState(false);
+ const ref = useRef(null);
+ const selected = options.find(o => o.value === value);
+ useEffect(() => {
+ if (!open) return;
+ const h = e => { if (!ref.current?.contains(e.target)) setOpen(false); };
+ document.addEventListener('mousedown', h);
+ return () => document.removeEventListener('mousedown', h);
+ }, [open]);
+ return (
+
+
+ );
+
+ // ── Chargement ───────────────────────────────────────────────────────────
+ if (status === 'loading') {
+ return (
+
+ { e.target.style.display = 'none'; }}
+ style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }} />
+
+ 
{ e.target.style.display = 'none'; }}
+ style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', opacity: 0.85 }} />
+
+ {appInfo.iconUrl && 
}
+ {appInfo.appName}
+
+
+
+
+
+ {appInfo.iconUrl && }
+ {appInfo.appName}
+
+ {children}
+ Vérification du lien…
+
+
+
+
+
+ Lien invalide
+{errMsg}
+ + Retour à la connexion + +
+
+
+
+
+ Compte créé !
++ Votre compte a été activé avec succès. Vous pouvez maintenant vous connecter. +
+ +
+
+
+ {err && (
+ + Finaliser votre inscription +
++ Vous avez été invité en tant que {roleLabel}. +
+
+ {err}
+
+ )}
+
+
+
+ + Déjà inscrit ?{' '} + Se connecter +
+
+
+ {open && (
+
+ );
+}
+
+// ── Pagination ─────────────────────────────────────────────────────────────
+const PAGE_SIZES = [10, 15, 25, 50];
+
+function AdminPagination({ page, setPage, pageSize, setPageSize, total }) {
+ const totalPages = Math.max(1, Math.ceil(total / pageSize));
+ if (total === 0) return null;
+ const delta = 2;
+ const pages = [];
+ for (let i = Math.max(1, page - delta); i <= Math.min(totalPages, page + delta); i++) pages.push(i);
+ return (
+
+
+
+
+
+ )}
+
+
+ );
+}
+const Ellipsis = () => …;
+function PBtn({ onClick, disabled, active, children }) {
+ return (
+
+ );
+}
+
+// ── Composant principal ────────────────────────────────────────────────────
+// ── Modale invitation ──────────────────────────────────────────────────────
+function InviteUserModal({ open, onClose }) {
+ const [form, setForm] = useState({ email: '', role: 'user' });
+ const [loading, setLoading] = useState(false);
+ const [err, setErr] = useState(null);
+ const [sent, setSent] = useState(false);
+
+ const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
+ const reset = () => { setForm({ email: '', role: 'user' }); setErr(null); setSent(false); };
+ const handleClose = () => { reset(); onClose(); };
+
+ const handleSubmit = async (e) => {
+ e.preventDefault();
+ setLoading(true); setErr(null);
+ try {
+ await api.post('/admin/invitations', { email: form.email, role: form.role });
+ setSent(true);
+ } catch (e) { setErr(e.message); }
+ finally { setLoading(false); }
+ };
+
+ return (
+
+
+ Page {page} sur {totalPages}
+
+
+ setPage(p => Math.max(1, p - 1))} disabled={page === 1}>‹
+ {pages[0] > 1 && <> setPage(1)}>1 {pages[0] > 2 && setPage(n)} active={n === page}>{n} )}
+ {pages[pages.length - 1] < totalPages && <>{pages[pages.length - 1] < totalPages - 1 && setPage(totalPages)}>{totalPages} }
+ setPage(p => Math.min(totalPages, p + 1))} disabled={page === totalPages}>›
+
+
+
+ ) : (
+ <>
+ {err &&
+
+
+ Invitation envoyée !
+
+ Un email a été envoyé à {form.email}.
Le lien est valable 7 jours.
+
{err}
}
+
+
+ )}
+ {err}
}
+
+
+
+ {open && (
+
+ );
};
- const deleteUser = (u) => {
- setConfirmAction({
- title: 'Supprimer l\'utilisateur',
- message: `Supprimer définitivement ${u.display_name || u.email} ? Toutes ses données seront effacées.`,
- onConfirm: async () => {
- try {
- await api.del(`/admin/users/${u.id}`);
- load();
- } catch (e) { setErr('Erreur : ' + e.message); }
- finally { setConfirmAction(null); }
- },
- });
- };
+ const today = new Date().toISOString().slice(0, 10);
if (loading) return
+ {options.map(o => (
+
+ ))}
+
+ )}
+ Chargement…
; if (err) return{err}
; return ( <> -
-
-
-
+
Comptes utilisateurs
-- {users.length} utilisateur{users.length !== 1 ? 's' : ''} enregistré{users.length !== 1 ? 's' : ''} -
-| ID | -Nom | -Email vérifié | -2FA | -Rôle | -Créé le | -Actions | -|
|---|---|---|---|---|---|---|---|
| {u.id} | -{u.display_name || —} | -{u.email} | -- {u.email_verified - ? ✓ Vérifié - : En attente - } - | -- {u.totp_enabled - ? 🔐 Activé - : — - } - | -{fmt(u.created_at)} | -
-
-
- {!u.email_verified && (
-
- )}
- {u.id !== currentUserId && (
-
- )}
-
- |
-
+
+ {/* En-tête */}
+
+
+ {/* Menu ⋮ contextuel */}
+ {openMenu && (
+ <>
+
+
+
+ {/* Filtres pills */}
+
+
+ Comptes utilisateurs
++ Gérez les comptes et les accès des membres de l'application. +
+
+ dlBlob(toCSV(filtered), `utilisateurs_${today}.csv`, 'text/csv;charset=utf-8')}
+ onXLSX={() => dlBlob(toXLSX(filtered), `utilisateurs_${today}.xlsx`, 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet')}
+ onJSON={() => dlBlob(toJSON(filtered), `utilisateurs_${today}.json`, 'application/json')}
+ />
+
+
+
+
+
+
+
+
+ {/* Tableau */}
+ {filtered.length === 0 ? (
+ + Aucun utilisateur ne correspond aux filtres. +
+ ) : ( +
+
+
+
+
+ )}
| Utilisateur | +Statut | +Rôle | +2FA | +Inscrit le | ++ |
|---|---|---|---|---|---|
|
+
+
+
+ {initials(u)}
+
+
+
+
+ {u.display_name || {u.email.split('@')[0]}}
+ {u.id === currentUserId && (vous)}
+
+ {u.email}
+ |
+ + {u.totp_enabled + ? 🔐 Actif + : — + } + | +{fmt(u.created_at)} | ++ + | +
+
+ setOpenMenu(null)} />
+ setShowInvite(false)}
+ />
+
+ setShowCreate(false)}
+ onCreated={() => load()}
+ />
+
{
+ try { await confirmAction.onConfirm(); }
+ catch (e) { setErr(e.message); }
+ finally { setConfirmAction(null); }
+ }}
onCancel={() => setConfirmAction(null)}
/>
diff --git a/frontend/src/pages/admin/adminHelpers.jsx b/frontend/src/pages/admin/adminHelpers.jsx
index d79bbee..be70a6b 100644
--- a/frontend/src/pages/admin/adminHelpers.jsx
+++ b/frontend/src/pages/admin/adminHelpers.jsx
@@ -25,6 +25,33 @@ export function Badge({ role }) {
);
}
+/** Badge statut utilisateur — dérivé de status + email_verified */
+export function UserStatusBadge({ status, emailVerified }) {
+ // status: 'active' | 'deactivated' | 'locked'
+ // Le statut affiché est une combinaison des deux champs
+ let label, bg, color, border;
+ if (status === 'deactivated') {
+ label = 'Désactivé'; bg = 'rgba(100,116,139,.12)'; color = '#64748b'; border = 'rgba(100,116,139,.3)';
+ } else if (status === 'locked') {
+ label = 'Verrouillé'; bg = 'rgba(239,68,68,.12)'; color = '#dc2626'; border = 'rgba(239,68,68,.3)';
+ } else if (!emailVerified) {
+ label = 'En attente'; bg = 'rgba(245,158,11,.12)'; color = '#d97706'; border = 'rgba(245,158,11,.3)';
+ } else {
+ label = 'Actif'; bg = 'rgba(34,197,94,.12)'; color = '#16a34a'; border = 'rgba(34,197,94,.3)';
+ }
+ return (
+
+
+ {label}
+
+ );
+}
+
export function StatusBadge({ status }) {
const ok = status === 'ok';
return (
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index b073999..8e22275 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -251,6 +251,25 @@ a { color: var(--primary); }
}
.btn-add-invest:hover { background: var(--primary-hover); box-shadow: 0 3px 12px rgba(59,130,246,.5); }
+/* ── Boutons génériques ──────────────────────────────────────── */
+.btn {
+ display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+ padding: 0 14px; height: 32px;
+ border-radius: 8px; border: 1px solid transparent;
+ font-size: var(--fs-sm); font-weight: 500;
+ cursor: pointer; white-space: nowrap;
+ transition: background .15s, border-color .15s, box-shadow .15s;
+}
+.btn-sm { height: 32px; padding: 0 12px; font-size: var(--fs-xs); }
+.btn-primary {
+ background: var(--primary); color: #fff; border-color: var(--primary);
+}
+.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
+.btn-outline {
+ background: var(--surface); color: var(--text); border-color: var(--border);
+}
+.btn-outline:hover { background: var(--surface-2); border-color: var(--border); }
+
/* ── Burger menu topbar ──────────────────────────────────────── */
.topbar-burger-wrap { position: relative; display: none; }
.topbar-burger-btn {
@@ -426,10 +445,10 @@ a { color: var(--primary); }
display: flex;
align-items: center;
gap: 8px;
- height: 40px;
- padding: 0 16px;
+ height: 32px;
+ padding: 0 12px;
border: 1.5px solid var(--primary);
- border-radius: 20px;
+ border-radius: 8px;
background: transparent;
color: var(--primary);
min-width: 330px;
@@ -1895,4 +1914,101 @@ tr:hover td { background: var(--surface-2); }
.drill-table tr:hover td { background: inherit; }
/* Les lignes cliquables ont leur propre hover via opacity inline — on protège
les lignes "header de section" (sous-total, total) contre le global hover. */
-.drill-table tr.drill-row-fixed:hover td { background: inherit !important; }
+.drill-table tr.drill-row-fixed:hove
+/* ── Pagination ──────────────────────────────────────────────────────────── */
+.pagination-bar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 12px 2px 2px;
+ gap: 12px;
+ flex-wrap: wrap;
+}
+.pagination-info {
+ font-size: var(--fs-xs);
+ color: var(--text-muted);
+ white-space: nowrap;
+}
+.pagination-controls {
+ display: flex;
+ align-items: center;
+ gap: 4px;
+}
+.pagination-size-label {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ font-size: var(--fs-xs);
+ color: var(--text-muted);
+ margin-right: 10px;
+ white-space: nowrap;
+}
+.pagination-size-select {
+ font-size: var(--fs-xs);
+ padding: 3px 6px;
+ border: 1px solid var(--border);
+ border-radius: 4px;
+ background: var(--surface);
+ color: var(--text);
+ cursor: pointer;
+}
+.pagination-btn {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 28px;
+ height: 28px;
+ padding: 0;
+ background: var(--surface);
+ border: 1px solid var(--border);
+ border-radius: 5px;
+ font-size: 13px;
+ color: var(--text);
+ cursor: pointer;
+ line-height: 1;
+ transition: background .12s, border-color .12s;
+}
+.pagination-btn:hover:not(:disabled) {
+ background: var(--surface-2);
+ border-color: var(--primary);
+ color: var(--primary);
+}
+.pagination-btn:disabled {
+ opacity: .35;
+ cursor: default;
+}
+.pagination-pages {
+ font-size: var(--fs-xs);
+ color: var(--text-muted);
+ padding: 0 8px;
+ white-space: nowrap;
+}
+
+/* ── Barre de filtres admin users ─────────────────────────────────────────── */
+.admin-filters {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ margin-bottom: 16px;
+ flex-wrap: wrap;
+}
+.admin-filters input[type=search] {
+ flex: 1;
+ min-width: 180px;
+ padding: 7px 12px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ background: var(--surface);
+ color: var(--text);
+ font-size: var(--fs-sm);
+}
+.admin-filters input[type=search]::placeholder { color: var(--text-muted); }
+.admin-filters select {
+ padding: 7px 12px;
+ border-radius: 6px;
+ border: 1px solid var(--border);
+ background: var(--surface);
+ color: var(--text);
+ font-size: var(--fs-sm);
+ min-width: 160px;
+}
+
+
+ )}
+
+