.staff-panel { position:fixed; inset:0; z-index:9000; background:#040408; display:flex; flex-direction:column; opacity:0; pointer-events:none; transition:.4s cubic-bezier(0.16, 1, 0.3, 1); }
.staff-panel::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at 50% 0%, rgba(232,48,74,0.08), transparent 50%), radial-gradient(circle at 100% 50%, rgba(245,166,35,0.05), transparent 40%); pointer-events:none; z-index:0; }
.staff-panel.open { opacity:1; pointer-events:all; }

/* Topbar */
.staff-topbar { position:relative; z-index:10; height:70px; background:rgba(10,10,15,0.4); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border-bottom:1px solid rgba(255,255,255,0.04); display:flex; align-items:center; padding:0 2rem; gap:16px; flex-shrink:0; }
.staff-logo { font-family:var(--ff-head); font-size:22px; font-weight:800; background:linear-gradient(135deg, #fff, #a8a6be); -webkit-background-clip:text; -webkit-text-fill-color:transparent; letter-spacing:-0.5px; display:flex; align-items:center; gap:8px; }
.staff-badge { background:linear-gradient(135deg, rgba(245,166,35,0.15), rgba(232,48,74,0.15)); border:1px solid rgba(245,166,35,0.3); color:var(--gold2); font-size:10px; font-weight:800; padding:4px 12px; border-radius:20px; text-transform:uppercase; letter-spacing:1px; box-shadow:0 4px 12px rgba(245,166,35,0.1); }

/* Layout Corps */
.staff-body { display:flex; flex:1; overflow:hidden; position:relative; z-index:1; }

/* Sidebar */
.staff-sidebar { width:260px; background:rgba(15,15,24,0.3); backdrop-filter:blur(20px); border-right:1px solid rgba(255,255,255,0.03); padding:1.5rem 0.8rem; flex-shrink:0; overflow-y:auto; display:flex; flex-direction:column; gap:4px; }
.staff-nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; color:rgba(255,255,255,0.72); font-size:13.5px; font-weight:600; cursor:pointer; transition:.25s ease; border-radius:12px; border:1px solid transparent; }
.staff-nav-item:hover { color:#fff; background:rgba(255,255,255,0.05); }
.staff-nav-item.active { color:#fff; background:linear-gradient(90deg, rgba(155,140,248,0.18), transparent); border-color:rgba(155,140,248,0.25); box-shadow:inset 4px 0 0 #9b8cf8; }
.staff-nav-icon { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; flex-shrink:0; color:rgba(155,140,248,0.9); opacity:1; filter:none; transition:.25s; }
.staff-nav-icon svg {
  width: 20px;
  height: 20px;
}
.staff-nav-icon svg path,
.staff-nav-icon svg line,
.staff-nav-icon svg polyline,
.staff-nav-icon svg rect,
.staff-nav-icon svg circle,
.staff-nav-icon svg ellipse {
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.staff-nav-item:hover .staff-nav-icon { color:#c4b8ff; }
.staff-nav-item.active .staff-nav-icon { color:#fff; filter:drop-shadow(0 0 8px rgba(155,140,248,0.55)); transform:scale(1.05); }
.staff-nav-sep { height:1px; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.05), transparent); margin:12px 0; }

/* Content Area */
.staff-content { flex:1; overflow-y:auto; padding:3rem 4rem; scrollbar-width:none; }
.staff-content::-webkit-scrollbar { display:none; }
.staff-section { display:none; animation:staffFadeIn .4s cubic-bezier(0.16, 1, 0.3, 1); max-width:1200px; margin:0 auto; }
.staff-section.active { display:block; }
@keyframes staffFadeIn { from{ opacity:0; transform:translateY(15px); } to{ opacity:1; transform:translateY(0); } }

/* Headers de Section */
.staff-section-title { font-family:var(--ff-head); font-size:32px; font-weight:800; color:#fff; margin-bottom:8px; letter-spacing:-1px; display:flex; align-items:center; gap:12px; }
.staff-section-sub { color:var(--muted); font-size:14px; margin-bottom:32px; line-height:1.6; max-width:600px; }

/* Cards Stats (Vue d'ensemble) */
.staff-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; margin-bottom:36px; }
.staff-card { background:linear-gradient(160deg, rgba(25,25,35,0.4), rgba(15,15,25,0.6)); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.05); border-radius:20px; padding:24px; transition:.3s ease; position:relative; overflow:hidden; }
.staff-card::before { content:''; position:absolute; top:0; left:0; width:100%; height:3px; background:var(--c, rgba(255,255,255,0.1)); opacity:0.5; }
.staff-card:hover { transform:translateY(-4px); border-color:rgba(255,255,255,0.1); box-shadow:0 12px 30px rgba(0,0,0,0.5), 0 0 40px var(--c-glow, transparent); }
.staff-card-n { font-family:var(--ff-head); font-size:42px; font-weight:800; color:#fff; line-height:1; margin-bottom:8px; letter-spacing:-1px; }
.staff-card-l { font-size:13px; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; }

/* Variations Cards */
.sc-red { --c:var(--red); --c-glow:rgba(232,48,74,0.15); }
.sc-gold { --c:var(--gold); --c-glow:rgba(245,166,35,0.15); }
.sc-green { --c:#22c55e; --c-glow:rgba(34,197,94,0.15); }
.sc-blue { --c:#3b82f6; --c-glow:rgba(59,130,246,0.15); }

/* Blocs & Panels génériques */
.staff-panel-box { background:linear-gradient(145deg, rgba(20,20,30,0.4), rgba(10,10,15,0.6)); border:1px solid rgba(255,255,255,0.04); border-radius:20px; padding:28px; margin-bottom:24px; box-shadow:0 10px 30px rgba(0,0,0,0.3); }
.staff-panel-header { font-family:var(--ff-head); font-size:18px; font-weight:700; margin-bottom:20px; color:#fff; display:flex; align-items:center; gap:10px; }

/* Boutons Staff */
.sp-btn { padding:10px 20px; border-radius:12px; font-size:13.5px; font-weight:600; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); color:var(--text2); cursor:pointer; transition:.2s ease; font-family:var(--ff-body); display:inline-flex; align-items:center; gap:8px; justify-content:center; }
.sp-btn:hover { background:rgba(255,255,255,0.08); color:#fff; transform:translateY(-1px); }
.sp-btn.primary { background:linear-gradient(135deg, var(--red), var(--red2)); border:none; color:#fff; box-shadow:0 6px 15px rgba(232,48,74,0.3); }
.sp-btn.primary:hover { box-shadow:0 8px 20px rgba(232,48,74,0.5); filter:brightness(1.1); }
.sp-btn.gold { background:linear-gradient(135deg, rgba(245,166,35,0.15), rgba(245,166,35,0.05)); border:1px solid rgba(245,166,35,0.3); color:var(--gold2); }
.sp-btn.gold:hover { background:rgba(245,166,35,0.25); border-color:var(--gold); color:#fff; box-shadow:0 4px 15px rgba(245,166,35,0.2); }
.sp-btn.danger { background:rgba(232,48,74,0.1); border:1px solid rgba(232,48,74,0.2); color:var(--red2); }
.sp-btn.danger:hover { background:rgba(232,48,74,0.2); color:#fff; }

/* Formulaires Staff */
.staff-form-group { margin-bottom:20px; }
.staff-form-label { display:block; font-size:12.5px; font-weight:700; color:var(--text2); text-transform:uppercase; letter-spacing:0.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.staff-form-input, .staff-form-select, .staff-form-textarea { width:100%; background:rgba(0,0,0,0.3); border:1px solid rgba(255,255,255,0.06); color:#fff; padding:14px 18px; border-radius:12px; font-family:var(--ff-body); font-size:14.5px; transition:.2s ease; outline:none; }
.staff-form-select option { background:#0a0a10; color:#fff; }
.staff-form-input:focus, .staff-form-select:focus, .staff-form-textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(245,166,35,0.15); background:rgba(0,0,0,0.5); }
.staff-form-textarea { min-height:140px; resize:vertical; line-height:1.6; }

/* Tableaux (Reports / Utils) */
.staff-table-wrap { background:rgba(15,15,25,0.5); border:1px solid rgba(255,255,255,0.04); border-radius:16px; overflow:hidden; }
.staff-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.staff-table th { text-align:left; padding:16px 20px; background:rgba(0,0,0,0.3); color:var(--muted); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; border-bottom:1px solid rgba(255,255,255,0.05); }
.staff-table td { padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.02); color:rgba(255,255,255,0.8); vertical-align:middle; }
.staff-table tr:hover td { background:rgba(255,255,255,0.02); color:#fff; }
.staff-status { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:6px; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:0.5px; }
.staff-status.open { background:rgba(232,48,74,0.15); color:var(--red2); border:1px solid rgba(232,48,74,0.3); }
.staff-status.done { background:rgba(34,197,94,0.15); color:#22c55e; border:1px solid rgba(34,197,94,0.3); }

/* Lignes Utilisateurs / Tickets */
.staff-list-row { display:flex; align-items:center; gap:16px; padding:16px 20px; background:rgba(255,255,255,0.015); border:1px solid rgba(255,255,255,0.04); border-radius:14px; margin-bottom:10px; transition:.2s ease; cursor:pointer; }
.staff-list-row:hover { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.1); transform:translateX(4px); }
.staff-list-row.unread { border-left:4px solid var(--red); background:linear-gradient(90deg, rgba(232,48,74,0.08), transparent); }