/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-base:#02040a; 
  --bg-surface:rgba(5, 7, 10, 0.8);
  --bg-card:rgba(255, 255, 255, 0.03);
  --bg-hover:rgba(168, 85, 247, 0.08);
  --bg-active:rgba(168, 85, 247, 0.15);
  --border:rgba(255, 255, 255, 0.06);
  --border-light:rgba(255, 255, 255, 0.12);
  --text-primary:#ffffff;
  --text-secondary:rgba(255, 255, 255, 0.75);
  --text-muted:rgba(255, 255, 255, 0.45);
  --accent-purple:#a855f7;
  --accent-pink:#ec4899;
  --accent-cyan:#06b6d4;
  --accent-green:#22c55e;
  --accent-red:#ef4444;
  --accent-orange:#f97316;
  --sidebar-w:240px;
  --radius:16px;
  --radius-sm:10px;
  --glass: blur(16px);
  --shadow-glow: 0 0 20px rgba(168, 85, 247, 0.2);
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(168, 85, 247, 0.3); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-purple); }

/* Star Animation */
.stars-container {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at center, #0a0e1a 0%, #000 100%);
}

.star {
  position: absolute;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  filter: blur(1px);
  animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.3) translateY(0); }
  50% { opacity: 0.8; transform: scale(1.2) translateY(-20px); }
}

/* Mouse Glow Effect */
.bg-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(168, 85, 247, 0.12) 0%, transparent 50%);
  z-index: -1;
  pointer-events: none;
}

html,body{height:100%; margin:0; padding:0;}
body{font-family:'Inter',sans-serif;font-size:13px;background:var(--bg-base);color:var(--text-primary);line-height:1.5;overflow:hidden;position:relative;}

/* FAQ / Questions Styles */
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}

.faq-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  backdrop-filter: var(--glass);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

.faq-card:hover {
  border-color: var(--accent-purple);
  transform: translateY(-6px) scale(1.02);
  background: rgba(168, 85, 247, 0.05);
  box-shadow: var(--shadow-glow);
}

.faq-question {
  font-weight: 700;
  font-size: 15px;
  color: var(--accent-purple);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.faq-answer {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Enhanced Cards */
.stat-card, .chart-card, .card {
  background: var(--bg-card);
  backdrop-filter: var(--glass);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.stat-card:hover, .chart-card:hover, .card:hover {
  transform: translateY(-8px);
  border-color: rgba(168, 85, 247, 0.4);
  background: rgba(168, 85, 247, 0.04);
  box-shadow: var(--shadow-glow);
}

/* SIDEBAR */
.sidebar{width:var(--sidebar-w);min-width:var(--sidebar-w);background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden;backdrop-filter: blur(20px); z-index: 100;}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:24px 20px;border-bottom:1px solid var(--border); margin-bottom: 10px;}
.brand-logo{width: 36px; height: 36px; transition: transform 0.3s ease;}
.sidebar-brand:hover .brand-logo { transform: rotate(10deg) scale(1.1); }
.brand-text{display:flex;flex-direction:column;min-width:0}
.brand-name{font-weight:800;font-size:16px;color:var(--text-primary);letter-spacing: -0.5px;}
.brand-sub{font-size:10px;color:var(--text-muted); text-transform: uppercase; font-weight: 600; letter-spacing: 1px;}

.nav-section{padding:0 12px}
.nav-section-label{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--text-muted);padding:20px 16px 8px;text-transform:uppercase; border-top: 1px solid rgba(255,255,255,0.03); margin-top: 10px;}
.nav-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:12px;color:var(--text-secondary);font-size:13px;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);margin-bottom:4px; position: relative;}
.nav-item:hover{background:var(--bg-hover);color:var(--text-primary); transform: translateX(5px);}
.nav-item.active{background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), transparent); color:var(--accent-purple);font-weight:600}
.nav-item.active::after { content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; background: var(--accent-purple); border-radius: 0 4px 4px 0; box-shadow: 0 0 10px var(--accent-purple); }
.nav-item [data-lucide]{ transition: transform 0.3s ease; }
.nav-item:hover [data-lucide]{ transform: scale(1.2); color: var(--accent-purple); }

/* Banner Animated */
.welcome-banner {
  background: linear-gradient(-45deg, #1a0a2e, #0d1a2e, #2d1b4e, #0a0e1a);
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
  border: 1px solid rgba(168,85,247,.3);
  border-radius: var(--radius);
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.wb-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; }

/* Stats */
.stat-card { position: relative; overflow: hidden; }
.stat-icon { transition: transform 0.3s ease; }
.stat-card:hover .stat-icon { transform: scale(1.2) rotate(5deg); animation: pulseIcon 1s infinite; }

@keyframes pulseIcon {
  0% { filter: drop-shadow(0 0 0px var(--accent-purple)); }
  50% { filter: drop-shadow(0 0 10px var(--accent-purple)); }
  100% { filter: drop-shadow(0 0 0px var(--accent-purple)); }
}

.stat-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; margin-top: 4px; }

/* Loader */
#loader {
  position: fixed;
  inset: 0;
  background: var(--bg-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  transition: opacity 0.5s ease;
}

.loader-logo { width: 80px; height: 80px; animation: loaderPulse 2s infinite ease-in-out; }
@keyframes loaderPulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0px var(--accent-purple)); }
  50% { transform: scale(1.1); filter: drop-shadow(0 0 20px var(--accent-purple)); }
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 10001;
}

.toast {
  background: rgba(5, 7, 10, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-purple);
  padding: 14px 20px;
  border-radius: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  animation: toastIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Table Enhancements */
.data-table tr { transition: all 0.2s ease; }
.data-table tr:hover td { background: rgba(255, 255, 255, 0.03) !important; }

/* Avatars */
.av { border: 2px solid rgba(255,255,255,0.05); box-shadow: 0 0 10px rgba(0,0,0,0.2); }
.av img { transition: transform 0.3s ease; }
.av:hover img { transform: scale(1.15); }

/* Activity Bar */
.activity-bar { height: 4px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.activity-progress { height: 100%; background: var(--accent-purple); border-radius: 10px; }

/* BUTTONS */
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:linear-gradient(135deg,var(--accent-purple),var(--accent-pink));color:#fff;border:none;border-radius:var(--radius-sm);font-size:12px;font-weight:600;transition:opacity .15s}
.btn-primary:hover{opacity:.88}
.btn-primary [data-lucide]{width:13px;height:13px}
.btn-secondary{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:var(--bg-hover);color:var(--text-secondary);border:1px solid var(--border);border-radius:var(--radius-sm);font-size:12px;font-weight:500;transition:all .15s}
.btn-secondary:hover{border-color:var(--accent-purple);color:var(--accent-purple)}
.btn-secondary [data-lucide]{width:13px;height:13px}

/* STATS GRID */
.stats-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px}
.stat-header{display:flex;align-items:center;justify-content:space-between}
.stat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.stat-icon [data-lucide]{width:15px;height:15px}
.stat-icon.purple{background:rgba(168,85,247,.15);color:var(--accent-purple)}
.stat-icon.red{background:rgba(239,68,68,.15);color:var(--accent-red)}
.stat-icon.orange{background:rgba(249,115,22,.15);color:var(--accent-orange)}
.stat-icon.cyan{background:rgba(6,182,212,.15);color:var(--accent-cyan)}
.stat-icon.green{background:rgba(34,197,94,.15);color:var(--accent-green)}
.stat-icon.pink{background:rgba(236,72,153,.15);color:var(--accent-pink)}
.stat-trend{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px}
.stat-trend.up{background:rgba(34,197,94,.12);color:var(--accent-green)}
.stat-trend.down{background:rgba(239,68,68,.12);color:var(--accent-red)}
.stat-trend.neutral{background:rgba(124,138,170,.12);color:var(--text-secondary)}
.stat-value{font-size:28px;font-weight:700;letter-spacing:-.02em}
.stat-value.purple{color:var(--accent-purple)}
.stat-value.red{color:var(--accent-red)}
.stat-value.orange{color:var(--accent-orange)}
.stat-value.cyan{color:var(--accent-cyan)}
.stat-value.green{color:var(--accent-green)}
.stat-value.pink{color:var(--accent-pink)}
.stat-label{font-size:11px;color:var(--text-muted)}

/* CHARTS */
.charts-grid{display:grid;grid-template-columns:1fr 280px;gap:12px}
.chart-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
.chart-card.wide{grid-column:1/2}
.chart-header{display:flex;align-items:flex-start;justify-content:space-between}
.chart-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.chart-subtitle{font-size:10.5px;color:var(--text-muted);margin-top:2px}
.chart-wrap{position:relative;height:160px}
.chart-footer-legend{display:flex;align-items:center;gap:14px;justify-content:center;font-size:11px;color:var(--text-secondary)}
.legend-dot{display:inline-block;width:10px;height:10px;border-radius:3px}
.purple-dot{background:var(--accent-purple)}
.orange-dot{background:var(--accent-orange)}
.donut-wrap{position:relative;display:flex;align-items:center;justify-content:center;height:150px}
.donut-wrap canvas{width:140px!important;height:140px!important}
.donut-center{position:absolute;display:flex;flex-direction:column;align-items:center;pointer-events:none}
.donut-count{font-size:24px;font-weight:700;color:var(--text-primary)}
.donut-label{font-size:10px;color:var(--text-muted)}
.donut-legend{display:flex;flex-direction:column;gap:6px}
.donut-legend-item{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--text-secondary)}
.dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.dl-val{margin-left:auto;font-weight:600;color:var(--text-primary)}

/* BOTTOM GRID */
.bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* CARD */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card-header{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.card-title{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--text-primary)}
.card-title [data-lucide]{color:var(--accent-purple)}
.card-sub{font-size:11px;color:var(--text-muted)}
.card-link{font-size:11px;color:var(--accent-purple);transition:opacity .15s}
.card-link:hover{opacity:.75}

/* TOP STAFF */
.top-staff-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
.top-staff-item:last-child{border-bottom:none}
.ts-rank{width:22px;text-align:center;font-size:12px;font-weight:700;color:var(--text-muted)}
.ts-rank.gold{color:#f59e0b}
.ts-rank.silver{color:#94a3b8}
.ts-rank.bronze{color:#a16207}
.ts-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.ts-info{flex:1;min-width:0}
.ts-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ts-grade{font-size:10px;color:var(--text-muted)}
.ts-count{font-size:13px;font-weight:700;color:var(--accent-purple)}

/* REPORT LIST */
.report-item{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--border)}
.report-item:last-child{border-bottom:none}
.report-cat{font-size:10px;font-weight:600;padding:2px 7px;border-radius:20px;white-space:nowrap}
.report-info{flex:1;min-width:0}
.report-player{font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.report-time{font-size:10px;color:var(--text-muted)}
.status-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;white-space:nowrap}
.s-open{background:rgba(239,68,68,.15);color:var(--accent-red);border:1px solid rgba(239,68,68,.25)}
.s-progress{background:rgba(249,115,22,.15);color:var(--accent-orange);border:1px solid rgba(249,115,22,.25)}
.s-resolved{background:rgba(34,197,94,.15);color:var(--accent-green);border:1px solid rgba(34,197,94,.25)}
.s-warn{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.25)}
.s-ban{background:rgba(239,68,68,.15);color:var(--accent-red);border:1px solid rgba(239,68,68,.25)}
.s-kick{background:rgba(249,115,22,.15);color:var(--accent-orange);border:1px solid rgba(249,115,22,.25)}
.s-pending{background:rgba(124,138,170,.15);color:var(--text-secondary);border:1px solid rgba(124,138,170,.25)}
.s-accepted{background:rgba(34,197,94,.15);color:var(--accent-green);border:1px solid rgba(34,197,94,.25)}
.s-refused{background:rgba(239,68,68,.15);color:var(--accent-red);border:1px solid rgba(239,68,68,.25)}

/* FILTER BAR */
.filter-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.search-input-wrap{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 12px;flex:1;min-width:200px;transition:border-color .15s}
.search-input-wrap:focus-within{border-color:var(--accent-purple)}
.search-input-wrap [data-lucide]{color:var(--text-muted);flex-shrink:0}
.search-input-wrap input{background:transparent;border:none;outline:none;color:var(--text-primary);font-size:12.5px;font-family:inherit;width:100%}
.search-input-wrap input::placeholder{color:var(--text-muted)}
.filter-select{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:7px 10px;color:var(--text-secondary);font-size:12px;font-family:inherit;outline:none;cursor:pointer;transition:border-color .15s}
.filter-select:focus{border-color:var(--accent-purple);color:var(--text-primary)}

/* DATA TABLE */
.data-table{width:100%;border-collapse:collapse}
.data-table th{padding:10px 14px;text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap}
.data-table td{padding:11px 14px;font-size:12.5px;color:var(--text-secondary);border-bottom:1px solid var(--border)}
.data-table tr:last-child td{border-bottom:none}
.data-table tbody tr:hover td{background:var(--bg-hover)}
.staff-cell{display:flex;align-items:center;gap:9px}
.staff-cell .av{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;flex-shrink:0}
.staff-cell .sn{font-size:12.5px;font-weight:500;color:var(--text-primary)}
.staff-cell .sd{font-size:10px;color:var(--text-muted)}
.grade-pill{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px}
.g-fondateur{background:rgba(168,85,247,.2);color:var(--accent-purple);border:1px solid rgba(168,85,247,.3)}
.g-responsable{background:rgba(236,72,153,.2);color:var(--accent-pink);border:1px solid rgba(236,72,153,.3)}
.g-administrateur{background:rgba(6,182,212,.2);color:var(--accent-cyan);border:1px solid rgba(6,182,212,.3)}
.g-moderateur{background:rgba(34,197,94,.2);color:var(--accent-green);border:1px solid rgba(34,197,94,.3)}
.online-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
.online-dot.on{background:var(--accent-green);box-shadow:0 0 5px var(--accent-green)}
.online-dot.off{background:var(--text-muted)}
.action-btns{display:flex;gap:5px}
.action-btn{width:27px;height:27px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-hover);color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:all .15s}
.action-btn:hover{border-color:var(--accent-purple);color:var(--accent-purple)}
.action-btn.danger:hover{border-color:var(--accent-red);color:var(--accent-red)}
.action-btn [data-lucide]{width:12px;height:12px}

/* LOGS */
.log-item{display:flex;align-items:flex-start;gap:12px;padding:11px 16px;border-bottom:1px solid var(--border);font-size:12px}
.log-item:last-child{border-bottom:none}
.log-icon{width:28px;height:28px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.log-icon [data-lucide]{width:13px;height:13px}
.log-content{flex:1;min-width:0}
.log-text{color:var(--text-secondary);line-height:1.5}
.log-text strong{color:var(--text-primary)}
.log-time{font-size:10px;color:var(--text-muted);margin-top:2px}

/* PLANNING */
.planning-grid{display:grid;grid-template-columns:1fr 300px;gap:16px}
.planning-card .card-header{border-bottom:1px solid var(--border)}
.planning-week{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border)}
.planning-day{background:var(--bg-card);padding:10px 8px;min-height:80px}
.pd-header{font-size:10px;font-weight:600;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px;text-align:center}
.pd-date{font-size:18px;font-weight:700;color:var(--text-primary);text-align:center;margin-bottom:6px}
.pd-event{font-size:10px;padding:2px 6px;border-radius:4px;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.availability-item{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border)}
.availability-item:last-child{border-bottom:none}
.avail-time{font-size:11px;color:var(--text-muted);min-width:80px}
.avail-name{flex:1;font-size:12.5px;font-weight:500;color:var(--text-primary)}

/* ROLES */
.roles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.role-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.role-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--border)}
.role-dot{width:10px;height:10px;border-radius:50%}
.role-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.role-count{font-size:10.5px;color:var(--text-muted);margin-left:auto}
.perm-list{padding:10px 16px;display:flex;flex-direction:column;gap:4px}
.perm-item{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-secondary);padding:4px 0}
.perm-item [data-lucide]{width:12px;height:12px}
.perm-on{color:var(--accent-green)}
.perm-off{color:var(--text-muted);opacity:.5}

/* SETTINGS */
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.settings-card{}
.settings-form{padding:16px;display:flex;flex-direction:column;gap:14px}
.form-group{display:flex;flex-direction:column;gap:5px}
.form-group label{font-size:11.5px;font-weight:500;color:var(--text-secondary)}
.form-input{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 11px;color:var(--text-primary);font-size:12.5px;font-family:inherit;outline:none;transition:border-color .15s;resize:vertical}
.form-input:focus{border-color:var(--accent-purple)}
select.form-input{cursor:pointer}
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px;color:var(--text-secondary)}
.toggle-row:last-child{border-bottom:none}
.toggle{position:relative;width:38px;height:20px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--border-light);border-radius:20px;transition:.3s;cursor:pointer}
.toggle-slider::before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.3s}
.toggle input:checked + .toggle-slider{background:var(--accent-purple)}
.toggle input:checked + .toggle-slider::before{transform:translateX(18px)}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;z-index:100}
.modal-overlay.open{display:flex}
.modal{background:var(--bg-card);border:1px solid var(--border-light);border-radius:14px;width:420px;max-width:95vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border)}
.modal-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-primary)}
.modal-title [data-lucide]{color:var(--accent-purple)}
.modal-close{background:var(--bg-hover);border:1px solid var(--border);color:var(--text-muted);border-radius:var(--radius-sm);width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:all .15s}
.modal-close:hover{border-color:var(--accent-red);color:var(--accent-red)}
.modal-close [data-lucide]{width:13px;height:13px}
.modal-body{padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal-footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:14px 20px;border-top:1px solid var(--border)}

/* TABS */
.tab-bar{display:flex;gap:4px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:4px;width:fit-content}
.tab-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-muted);font-size:12px;font-weight:500;transition:all .15s;font-family:inherit;cursor:pointer}
.tab-btn:hover{background:var(--bg-hover);color:var(--text-primary)}
.tab-btn.active{background:linear-gradient(135deg,rgba(168,85,247,.2),rgba(236,72,153,.15));color:var(--accent-purple);font-weight:600}
.tab-btn [data-lucide]{width:13px;height:13px}

/* LABEL REQUIRED */
.req{color:var(--accent-pink)}

/* NEW GRADE PILLS */
.g-support-discord{background:rgba(71,85,105,.25);color:#94a3b8;border:1px solid rgba(71,85,105,.4)}
.g-helpeur{background:rgba(51,65,85,.3);color:#94a3b8;border:1px solid rgba(51,65,85,.5)}
.g-admin{background:rgba(59,130,246,.2);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}
.g-community-manager-en-test{background:rgba(132,204,22,.15);color:#a3e635;border:1px solid rgba(132,204,22,.3)}
.g-community-manager{background:rgba(34,197,94,.2);color:var(--accent-green);border:1px solid rgba(34,197,94,.3)}
.g-gerant-des-cm{background:rgba(6,182,212,.2);color:var(--accent-cyan);border:1px solid rgba(6,182,212,.3)}
.g-gerant-legal{background:rgba(239,68,68,.2);color:var(--accent-red);border:1px solid rgba(239,68,68,.3)}
.g-gerant-illegale{background:rgba(249,115,22,.2);color:var(--accent-orange);border:1px solid rgba(249,115,22,.3)}
.g-gerant-fondateur{background:rgba(168,85,247,.2);color:var(--accent-purple);border:1px solid rgba(168,85,247,.3)}
.g-staff{background:rgba(124,138,170,.15);color:var(--text-secondary);border:1px solid rgba(124,138,170,.25)}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS & PROFESSIONAL POLISH
═══════════════════════════════════════════════════════════════════ */

/* PAGE TRANSITIONS */
@keyframes pgIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.page.active { animation: pgIn .22s cubic-bezier(.4,0,.2,1) forwards; }

/* MODAL SCALE-IN */
@keyframes modalIn {
  from { opacity:0; transform:scale(.94) translateY(-10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-overlay.open .modal { animation: modalIn .2s cubic-bezier(.34,1.4,.64,1) forwards; }
.modal-overlay { animation: none; }

/* STAT VALUE POP */
@keyframes statPop {
  from { opacity:0; transform:scale(.65); }
  to   { opacity:1; transform:scale(1); }
}
.stat-value { animation: statPop .38s cubic-bezier(.34,1.4,.64,1) both; }
.stats-grid .stat-card:nth-child(1) .stat-value { animation-delay:.04s }
.stats-grid .stat-card:nth-child(2) .stat-value { animation-delay:.08s }
.stats-grid .stat-card:nth-child(3) .stat-value { animation-delay:.12s }
.stats-grid .stat-card:nth-child(4) .stat-value { animation-delay:.16s }
.stats-grid .stat-card:nth-child(5) .stat-value { animation-delay:.20s }
.stats-grid .stat-card:nth-child(6) .stat-value { animation-delay:.24s }

/* CARD FADE-IN STAGGER */
@keyframes cardIn {
  from { opacity:0; transform:translateY(12px); }
  to   { opacity:1; transform:translateY(0); }
}
.stat-card { animation: cardIn .3s ease both; }
.stats-grid .stat-card:nth-child(1) { animation-delay:.03s }
.stats-grid .stat-card:nth-child(2) { animation-delay:.06s }
.stats-grid .stat-card:nth-child(3) { animation-delay:.09s }
.stats-grid .stat-card:nth-child(4) { animation-delay:.12s }
.stats-grid .stat-card:nth-child(5) { animation-delay:.15s }
.stats-grid .stat-card:nth-child(6) { animation-delay:.18s }

/* STAT CARD HOVER */
.stat-card { transition:transform .2s,box-shadow .2s,border-color .2s; }
.stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.45); border-color:var(--border-light); }

/* CARD HOVER GLOW */
.card { transition:border-color .2s,box-shadow .2s; }
.card:hover { border-color:rgba(168,85,247,.18); box-shadow:0 4px 24px rgba(0,0,0,.35); }

/* ROLE CARDS HOVER */
.role-card { transition:transform .2s,box-shadow .2s,border-color .2s; }
.role-card:hover { transform:translateY(-2px); box-shadow:0 6px 22px rgba(0,0,0,.4); border-color:rgba(168,85,247,.22); }

/* BUTTONS */
.btn-primary { transition:opacity .15s,transform .12s,box-shadow .15s; position:relative; overflow:hidden; }
.btn-primary::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.09),transparent); transform:translateX(-100%); transition:transform .45s; pointer-events:none; }
.btn-primary:hover::after { transform:translateX(100%); }
.btn-primary:hover { opacity:.9; transform:translateY(-1px); box-shadow:0 4px 18px rgba(168,85,247,.45); }
.btn-primary:active { transform:translateY(0) scale(.97); }
.btn-secondary { transition:border-color .15s,color .15s,background .15s,transform .12s; }
.btn-secondary:hover { transform:translateY(-1px); }
.btn-secondary:active { transform:translateY(0) scale(.97); }

/* NAV ITEMS */
.nav-item { position:relative; transition:background .18s,color .18s,transform .18s; }
.nav-item:hover { transform:translateX(3px); }
.nav-item.active::before { content:''; position:absolute; left:0; top:20%; width:3px; height:60%; background:var(--accent-purple); border-radius:0 3px 3px 0; }

/* ACTION BUTTONS */
.action-btn { transition:border-color .15s,color .15s,background .15s,transform .12s; }
.action-btn:hover { transform:scale(1.12); }

/* GRADE PILLS */
.grade-pill { transition:transform .15s,box-shadow .12s; cursor:default; }
.grade-pill:hover { transform:scale(1.07); }

/* TABLE ROWS */
.data-table tbody tr { transition:background .13s; }

/* ONLINE DOT PULSE */
@keyframes dotPulse {
  0%,100% { box-shadow:0 0 4px 1px rgba(34,197,94,.5); }
  50%     { box-shadow:0 0 12px 3px rgba(34,197,94,.25),0 0 20px rgba(34,197,94,.15); }
}
.online-dot.on { animation:dotPulse 2.4s ease-in-out infinite; }

/* BRAND LOGO GLOW */
@keyframes logoGlow {
  0%,100% { filter:drop-shadow(0 0 5px rgba(168,85,247,.5)); }
  50%     { filter:drop-shadow(0 0 14px rgba(168,85,247,.9)); }
}
.brand-logo svg { animation:logoGlow 3s ease-in-out infinite; }

/* WELCOME BANNER SHIMMER */
@keyframes bannerShimmer {
  0%   { transform:translateX(-100%) skewX(-20deg); }
  100% { transform:translateX(250%) skewX(-20deg); }
}
.welcome-banner { overflow:hidden; }
.welcome-banner::after { content:''; position:absolute; top:0; left:0; width:40%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.04),transparent); animation:bannerShimmer 5s ease-in-out infinite; pointer-events:none; }

/* TOPBAR GRADIENT BORDER */
.topbar {
  background:linear-gradient(var(--bg-surface),var(--bg-surface)) padding-box,
             linear-gradient(90deg,transparent 0%,rgba(168,85,247,.14) 50%,transparent 100%) border-box;
  border-bottom:1px solid transparent;
}

/* SEARCH FOCUS GLOW */
.search-input-wrap:focus-within { border-color:var(--accent-purple); box-shadow:0 0 0 3px rgba(168,85,247,.12); }
.form-input:focus { box-shadow:0 0 0 3px rgba(168,85,247,.1); }
.filter-select { transition:border-color .15s,color .15s; }
.filter-select:hover { border-color:var(--border-light); }

/* PERM TOGGLES IN MODAL */
.perm-toggle-row { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--border); }
.perm-toggle-row:last-child { border-bottom:none; }
.perm-toggle-label { font-size:12px; color:var(--text-secondary); display:flex; align-items:center; gap:7px; }
.perm-toggle-label [data-lucide] { width:12px; height:12px; color:var(--accent-purple); }

/* COLOR INPUT */
input[type="color"].form-input { padding:4px 6px; height:38px; cursor:pointer; }

/* ROLE HEADER EDIT BUTTON */
.role-edit-btn { display:none; align-items:center; justify-content:center; width:24px; height:24px; border-radius:6px; border:1px solid var(--border); background:var(--bg-hover); color:var(--text-muted); transition:all .15s; margin-left:8px; }
.role-edit-btn [data-lucide] { width:11px; height:11px; }
.role-edit-btn:hover { border-color:var(--accent-purple); color:var(--accent-purple); }
.is-fondateur .role-edit-btn { display:flex; }

/* SCROLLBAR */
.page { scroll-behavior:smooth; }

/* RESPONSIVE */
@media(max-width:1300px){.stats-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:1100px){.charts-grid{grid-template-columns:1fr}.chart-card.wide{grid-column:1/-1}.bottom-grid{grid-template-columns:1fr}}
@media(max-width:800px){.stats-grid{grid-template-columns:repeat(2,1fr)}.roles-grid,.settings-grid,.planning-grid{grid-template-columns:1fr}}
@media(max-width:600px){.sidebar{display:none}.stats-grid{grid-template-columns:1fr}}