:root{
    --bg:#0b1220;
    --bg-soft:#111a2f;
    --surface:#ffffff;
    --surface-2:#f5f8ff;
    --border:#e5eaf5;
    --text:#172033;
    --muted:#6c7893;
    --primary:#4f46e5;
    --primary-2:#7c3aed;
    --success:#16a34a;
    --warning:#d97706;
    --danger:#dc2626;
    --shadow:0 14px 40px rgba(15,23,42,.10);
    --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;font-family:Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top left, rgba(79,70,229,.14), transparent 20%), radial-gradient(circle at bottom right, rgba(59,130,246,.12), transparent 22%), linear-gradient(180deg,#eef4ff 0%,#f8fbff 100%);color:var(--text);min-height:100%}
a{text-decoration:none;color:inherit;transition:color .2s ease}
.app-shell{display:grid;grid-template-columns:300px 1fr;min-height:100vh;gap:1px}
.sidebar{background:linear-gradient(180deg,var(--bg) 0%,#101b33 100%);color:#fff;padding:28px;display:flex;flex-direction:column;gap:24px;box-shadow:0 24px 60px rgba(15,23,42,.2)}
.brand{display:flex;gap:14px;align-items:center}
.brand-badge{width:54px;height:54px;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-2));display:flex;align-items:center;justify-content:center;font-weight:700;font-size:20px;box-shadow:0 10px 25px rgba(124,58,237,.35)}
.brand h1{margin:0;font-size:20px}
.brand p{margin:4px 0 0;color:#b7c3df;font-size:13px}
.nav-menu{display:flex;flex-direction:column;gap:8px}
.nav-menu a{padding:12px 14px;border-radius:14px;color:#d9e2f7;transition:.2s;background:transparent;display:flex;align-items:center;gap:10px}
.nav-menu a i{width:18px;text-align:center;font-size:16px}
.nav-menu a:hover,.nav-menu a.active{background:rgba(255,255,255,.09);color:#fff;transform:translateX(2px)}
.sidebar-footer{margin-top:auto}
.user-card{padding:14px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:rgba(255,255,255,.06);display:flex;flex-direction:column;gap:4px}
.user-card span{color:#bdd0ff;font-size:12px;letter-spacing:1px}
.logout-link{margin-top:12px;display:block;text-align:center;padding:12px;border-radius:14px;background:#ef4444;color:#fff;font-weight:600}
.main-content{padding:24px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;background:rgba(255,255,255,.75);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.6);padding:22px 24px;border-radius:22px;box-shadow:var(--shadow);margin-bottom:22px}
.topbar-row{display:flex;align-items:center;gap:18px;width:100%}
.menu-toggle{display:none;align-items:center;justify-content:center;width:50px;height:50px;border:none;border-radius:16px;background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;cursor:pointer;transition:.25s ease;position:relative;flex-shrink:0;font-size:20px;box-shadow:0 8px 20px rgba(79,70,229,.2)}
.menu-toggle:hover{transform:scale(1.08);box-shadow:0 12px 28px rgba(79,70,229,.3)}
.menu-toggle i{display:block}
.sidebar-backdrop{position:fixed;inset:0;background:rgba(11,18,32,.45);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;z-index:98}
.sidebar-backdrop.active{opacity:1;visibility:visible}
body.no-scroll{overflow:hidden}
.topbar-gradient{background:linear-gradient(135deg, rgba(79,70,229,.08), rgba(59,130,246,.08));border:1px solid rgba(79,70,229,.2);box-shadow:0 14px 40px rgba(79,70,229,.08)}
.topbar-content{width:100%}
.topbar-title{margin:0 0 6px;font-size:28px;background:linear-gradient(135deg, var(--primary), var(--primary-2), #2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:800}
.topbar p{margin:0;color:var(--muted)}
.alert{padding:14px 16px;border-radius:16px;margin-bottom:18px;font-weight:600}
.alert-success{background:#e8fff1;color:#136c38;border:1px solid #bbf7d0}
.alert-danger{background:#fff1f2;color:#9f1239;border:1px solid #fecdd3}
.alert-warning{background:#fff7ed;color:#9a3412;border:1px solid #fed7aa}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:28px}
.card{background:linear-gradient(135deg, var(--surface) 0%, rgba(248,252,255,0.6) 100%);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:0 14px 40px rgba(15,23,42,.08);position:relative;overflow:hidden;transition:all .35s cubic-bezier(0.4,0,0.2,1)}
.card-membres{background: linear-gradient(135deg, #e0e7ff, #f3f4ff) !important; border-left: 4px solid #4f46e5;}
.card-departements{background: linear-gradient(135deg, #dcfce7, #f0fdf4) !important; border-left: 4px solid #16a34a;}
.card-activites{background: linear-gradient(135deg, #fff7ed, #fffdf9) !important; border-left: 4px solid #d97706;}
.card-utilisateurs{background: linear-gradient(135deg, #fef2f2, #fefefe) !important; border-left: 4px solid #dc2626;}
.card-rapports{background: linear-gradient(135deg, #f3e8ff, #faf5ff) !important; border-left: 4px solid #7c3aed;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg, var(--primary), var(--primary-2), #2563eb);opacity:0;transition:opacity .35s ease}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(79,70,229,.12);border-color:rgba(79,70,229,.15)}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-6px);box-shadow:0 22px 60px rgba(79,70,229,.12);border-color:rgba(79,70,229,.15)}
.card:hover::before{opacity:1}
.card-icon{font-size: 48px; color: var(--primary); margin-bottom: 16px; text-align: center;}
.card-membres .card-icon { color: #4f46e5; }
.card-departements .card-icon { color: #16a34a; }
.card-activites .card-icon { color: #d97706; }
.card-utilisateurs .card-icon { color: #dc2626; }
.card-rapports .card-icon { color: #7c3aed; }
.card-membres::before { background: linear-gradient(90deg, #4f46e5, #6366f1); }
.card-departements::before { background: linear-gradient(90deg, #16a34a, #22c55e); }
.card-activites::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.card-utilisateurs::before { background: linear-gradient(90deg, #dc2626, #ef4444); }
.card-rapports::before { background: linear-gradient(90deg, #7c3aed, #8b5cf6); }
.fade-in{animation:fadeInUp .55s ease both}
.card h3,.card h4{margin:0 0 12px;color:var(--text);font-weight:700}
.card p{margin:0;color:var(--muted);font-size:14px}
.metric{font-size:36px;font-weight:800;margin-top:12px;background:linear-gradient(135deg, var(--primary), var(--primary-2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.metric-sub{font-size:13px;color:var(--muted);margin-top:8px;font-weight:500}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:24px;box-shadow:var(--shadow);overflow:hidden}
.panel-header{padding:24px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg, rgba(248,252,255,0.5), rgba(255,255,255,0.3));}
.panel-header h3{font-size:20px;color:#0b1220;margin:0;}
.panel-header p{color:#6c7893;font-size:13px;margin:4px 0 0;}
.panel-body{padding:24px;}
.panel-actions{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:none;border-radius:14px;font-weight:700;cursor:pointer;transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;font-size: 14px;}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(79,70,229,.18)}
.btn i{font-size: 14px;}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));color:#fff;box-shadow:0 14px 30px rgba(79,70,229,.18)}
.btn-primary:hover{box-shadow: 0 18px 40px rgba(79,70,229,.25);}
.btn-light{background:#fff;border:1px solid var(--border);color:var(--text)}
.btn-light:hover{background:#f8faff;border-color:var(--primary);}
.btn-success{background:var(--success);color:#fff}
.btn-success:hover{background:#15803d;box-shadow: 0 8px 16px rgba(22,163,74,.2);}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c;box-shadow: 0 8px 16px rgba(220,38,38,.2);}
.btn-warning{background:var(--warning);color:#fff}
.source-toggle{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.source-toggle label{display:flex;align-items:center;gap:8px;padding:12px 14px;border-radius:14px;background:#f8faff;border:1px solid #dbeafe;cursor:pointer;transition:background .2s ease,border-color .2s ease}
.source-toggle input{accent-color:var(--primary)}
.source-toggle input:checked + span, .source-toggle input:checked{border-color:var(--primary)}
.checkbox-label{display:flex;align-items:center;gap:10px;font-weight:600;color:var(--text)}
.badge-light{background:#f8fafc;color:#334155}
.file-input{width:100%;padding:14px 16px;border:1px dashed #cbd5e1;border-radius:14px;background:#f7fbff;color:#334155;cursor:pointer}
.fade-in{animation:fadeInUp .55s ease both}
.card, .panel{transform:translateY(0);transition:transform .25s ease, box-shadow .25s ease}
.card:hover, .panel:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(15,23,42,.12)}
@keyframes fadeInUp {
    from {opacity:0;transform:translateY(18px);}
    to {opacity:1;transform:translateY(0);}
}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.form-group{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.form-group label{font-weight:700}
.input,.select,.textarea{width:100%;padding:12px 14px;border:1px solid #d6deef;border-radius:14px;background:#fbfdff;outline:none;font-size:14px}
.textarea{min-height:110px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:#9aa8ff;box-shadow:0 0 0 4px rgba(79,70,229,.10)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;display:block;width:100%;border-radius:16px;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:14px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
th{background:#f7f9ff;font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:#4d5c7a}
.table-activites th{background: linear-gradient(135deg, #fff7ed, #fffdf9); color: #d97706; border-bottom: 2px solid #d97706;}
.table-finances th{background: linear-gradient(135deg, #dcfce7, #f0fdf4); color: #16a34a; border-bottom: 2px solid #16a34a;}
tr:hover td{background:#fcfdff}
table .panel-actions{display:flex;gap:4px;flex-wrap:nowrap}
table .panel-actions .btn{padding:6px 8px;font-size:11px;white-space:nowrap}
.badge{display:inline-block;padding:8px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:0.3px}
.badge-success{background:#dcfce7;color:#166534;border: 1px solid #bbf7d0;}
.badge-warning{background:#fef3c7;color:#92400e;border: 1px solid #fed7aa;}
.badge-danger{background:#fee2e2;color:#991b1b;border: 1px solid #fecdd3;}
.badge-primary{background:#e0e7ff;color:#3730a3;border: 1px solid #c7d2fe;}
.badge-light{background:#f1f5f9;color:#475569;border: 1px solid #e2e8f0;}
.search-form{display:flex;gap:12px;flex-wrap:wrap}
.search-form .input{max-width:320px}
.filter-bar{background: linear-gradient(135deg, rgba(79,70,229,0.05), rgba(99,102,241,0.02)); border: 1px solid #e5eaf5; border-radius: 16px; padding: 20px; margin-bottom: 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;}
.filter-bar .form-group{margin-bottom: 0;}
.filter-bar label{font-size: 13px; font-weight: 600; color: #4d5c7a; text-transform: uppercase; letter-spacing: 0.5px;}
.filter-bar .input, .filter-bar .select{font-size: 14px; padding: 10px 12px;}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:16px 14px;border-bottom:1px solid #f0f4f8;text-align:left;vertical-align:top}
th{background:linear-gradient(135deg, #f8faff, #fafcff);font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:#5a6a8a;font-weight:700;border-bottom: 2px solid var(--border);}
tbody tr{transition:all .2s ease}
tbody tr:hover{background:#fbfdff;box-shadow: inset 0 0 8px rgba(79,70,229,0.05);}
td{font-size: 14px; color: #172033;}
.table-activites th{background: linear-gradient(135deg, #fff7ed, #fffdf9); color: #d97706; border-bottom: 2px solid #d97706;}
.table-finances th{background: linear-gradient(135deg, #dcfce7, #f0fdf4); color: #16a34a; border-bottom: 2px solid #16a34a;}
.table-membres th{background: linear-gradient(135deg, #e0e7ff, #f3f4ff); color: #4f46e5; border-bottom: 2px solid #4f46e5;}
.table-departements th{background: linear-gradient(135deg, #f3e8ff, #faf5ff); color: #7c3aed; border-bottom: 2px solid #7c3aed;}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px;background:
radial-gradient(circle at top left, rgba(124,58,237,.28), transparent 30%),
radial-gradient(circle at bottom right, rgba(79,70,229,.22), transparent 30%),
linear-gradient(180deg,#edf2ff 0%, #f8fbff 100%)}
.auth-card{width:min(960px,100%);display:grid;grid-template-columns:1fr 430px;background:#fff;border-radius:30px;overflow:hidden;box-shadow:0 25px 60px rgba(15,23,42,.18)}
.auth-side{padding:42px;background:linear-gradient(160deg,var(--bg) 0%, #172a55 100%);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center}
.logo-container{text-align:center;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.auth-logo{width:200px;height:auto;max-width:90%;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.25);transition:transform .35s ease}
.auth-logo:hover{transform:scale(1.05)}
.auth-side h1{font-size:38px;margin:0 0 14px}
.auth-side p{color:#d8e2ff;line-height:1.6}
.auth-side ul{padding-left:20px;color:#d8e2ff;line-height:1.8}
.auth-form{padding:42px}
.auth-form h2{margin:0 0 8px}
.auth-form p{margin:0 0 22px;color:var(--muted)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.empty-state{padding:28px;border:1px dashed #cbd5e1;border-radius:18px;text-align:center;color:var(--muted);background:#fafcff}
.footer-note{margin-top:18px;color:var(--muted);font-size:13px}
@media (max-width: 980px){
    .app-shell{grid-template-columns: minmax(0, 1fr);}
    .sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;transform:translateX(-110%);transition:transform .25s ease;z-index:99}
    .sidebar.open{transform:translateX(0)}
    .topbar{position:sticky;top:0;z-index:90;flex-direction:column;align-items:stretch;gap:14px;padding:14px 16px}
    .topbar-row{width:100%;gap:12px}
    .menu-toggle{display:flex}
    .topbar-content{width:100%}
    .topbar-title{font-size:22px;margin:0 0 4px}
    .topbar p{font-size:12px}
    .topbar .btn{width:100%}
    .main-content{padding:16px 12px 24px; min-width: 0;}
    .auth-card{grid-template-columns:1fr}
    .filter-bar{grid-template-columns:1fr !important;padding:14px}
    .panel-header{flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
    .panel-header h3{font-size:18px}
    .panel-body{padding:14px}
    .panel-actions{flex-direction:column}
    .panel-actions .btn{width:100%}
    .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;display:block;width:100%}
    .table-wrap table{width:auto;min-width:100%}
    table{font-size:12px;min-width:0}
    th,td{padding:10px 8px;white-space:nowrap}
    .btn{padding:10px 14px;font-size:13px}
    .grid-cards{grid-template-columns:1fr;gap:14px;margin-bottom:18px}
    .card{padding:14px;border-radius:14px}
    .card-icon{font-size:32px;margin-bottom:8px}
    .card h3{font-size:16px;margin-bottom:6px}
    .metric{font-size:22px;margin-top:6px}
    .metric-sub{font-size:11px}
    .form-grid{grid-template-columns:1fr}
    .search-form{flex-direction:column}
    .search-form .input{max-width:100%}
    .stat-row{grid-template-columns:1fr}
    .badge{padding:5px 10px;font-size:10px}
}
@media (max-width: 640px){
    .sidebar{max-width:95vw;width:min(280px,95vw);padding:16px;gap:14px}
    .brand{gap:10px}
    .brand-badge{width:44px;height:44px;font-size:16px}
    .brand h1{font-size:16px}
    .brand p{font-size:12px}
    .nav-menu{gap:4px}
    .nav-menu a{padding:10px 12px;font-size:13px}
    .user-card{padding:10px;font-size:12px}
    .logout-link{padding:10px;font-size:12px}
    .main-content{padding:12px 8px 18px}
    .topbar{padding:12px 10px;margin-bottom:12px;border-radius:12px;gap:10px}
    .topbar-title{font-size:18px;margin:0}
    .topbar p{font-size:11px}
    .menu-toggle{width:44px;height:44px;font-size:18px}
    .panel-header{padding:12px;gap:8px}
    .panel-header h3{font-size:16px}
    .panel-body{padding:12px}
    .card{padding:12px;gap:8px}
    .card-icon{font-size:24px;margin-bottom:6px}
    .card h3{font-size:14px;margin-bottom:4px}
    .card p{font-size:12px}
    .metric{font-size:18px;margin-top:4px}
    .metric-sub{font-size:10px}
    .btn{padding:8px 12px;font-size:12px;gap:6px}
    .btn i{font-size:12px}
    .input,.select,.textarea{padding:10px 12px;font-size:13px;border-radius:10px}
    .textarea{min-height:80px}
    .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;display:block;width:100%}
    .table-wrap table{width:auto;min-width:100%}
    table{font-size:11px;min-width:0}
    th,td{padding:8px 6px;font-size:11px;white-space:nowrap}
    table .panel-actions{gap:1px;flex-wrap:nowrap}
    table .panel-actions .btn{padding:5px;font-size:0;width:24px;min-width:24px;height:24px}
    table .panel-actions .btn i{font-size:10px}
    .form-group{margin-bottom:12px}
    .form-group label{font-size:13px;font-weight:600}
    .search-form{flex-direction:column;gap:10px}
    .search-form .input{max-width:100%}
    .alert{padding:10px 12px;font-size:13px;border-radius:12px;margin-bottom:12px}
    .badge{padding:4px 8px;font-size:9px;border-radius:8px}
    h1{font-size:16px}
    h2{font-size:14px}
    h3{font-size:13px}
    .stat-row{grid-template-columns:1fr}
    .grid-cards{gap:10px;margin-bottom:14px}
    .empty-state{padding:18px;border-radius:12px}
    .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;display:block}
    .filter-bar{padding:12px;gap:10px}
    .filter-bar label{font-size:12px}
    .filter-bar .input,.filter-bar .select{padding:8px 10px;font-size:12px}
}

/* Styles pour les montants par devise */
.devise-amount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.devise-amount:last-child {
    margin-bottom: 0;
}

.amount {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Styles spécifiques pour les cards financières - taille réduite pour plus de discrétion */
.card-finances,
.card-departements {
    padding: 16px !important;
    min-height: auto !important;
}

.card-finances .card-icon,
.card-departements .card-icon {
    font-size: 32px !important;
    margin-bottom: 8px !important;
}

.card-finances h3,
.card-departements h3 {
    font-size: 16px !important;
    margin-bottom: 8px !important;
}

.card-finances .metric,
.card-departements .metric {
    font-size: 20px !important;
    margin-top: 6px !important;
}

.card-finances .metric-sub,
.card-departements .metric-sub {
    font-size: 12px !important;
    margin-top: 4px !important;
}

.card-finances .amount,
.card-departements .amount {
    font-size: 18px !important;
}

.currency {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    background: rgba(79, 70, 229, 0.1);
    padding: 4px 8px;
    border-radius: 8px;
    border: 1px solid rgba(79, 70, 229, 0.2);
}

/* Responsive tables: ensure horizontal scroll on small screens */
.table-responsive, .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-responsive table, .table-wrap table { width: auto; min-width: 100%; }
.table-responsive th, .table-responsive td, .table-wrap th, .table-wrap td { white-space: nowrap; }

@media (max-width: 980px) {
  .table-responsive table, .table-wrap table { min-width: 600px; }
}

@media (max-width: 640px) {
  .table-responsive table, .table-wrap table { min-width: 480px; }
}

/* Styles de pagination */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.pagination-info {
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
}
.pagination .btn.disabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}