/* Commun à tout le panneau : polices, thème, connexion, boutons, bandeau, palette « aller à… », mise en page.
   Ordre de chargement fixé dans index.html (ex-style.css découpé : ne pas le changer). */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --bg: #0e1015;
  --bg-elevated: #161922;
  --bg-elevated-2: #1d212c;
  --border: #2a2f3d;
  --text: #e8eaf0;
  --text-muted: #8c93a6;
  --cyan: #00e5ff;
  --violet: #9146ff;
  --pink: #ff2fd0;
  --red: #ff3860;
  --green: #2ecc71;
  --discord: #5865f2;
  --discord-hover: #4752c4;
  --radius: 10px;
  /* Lueurs néon — réservées aux états "actifs" (nav sélectionné, bouton au
     survol, champ focus, interrupteur activé), jamais en décor ambiant. */
  --glow-cyan: rgba(0, 229, 255, 0.45);
  --glow-violet: rgba(145, 70, 255, 0.4);
  --font-display: 'Orbitron', 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

/* Fond "circuit imprimé" : deux lueurs douces (violet / cyan, les couleurs
   du logo) qui ancrent la page dans le même univers que l'icône du bot,
   plus un semis de points très discret qui évoque une trame de carte
   électronique sans jamais gêner la lecture. Trois calques fixes, posés une
   fois sur <body> — pas de répétition par composant. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 8% -10%, rgba(145, 70, 255, 0.16), transparent 60%),
    radial-gradient(ellipse 800px 700px at 100% 110%, rgba(0, 229, 255, 0.12), transparent 60%),
    radial-gradient(rgba(140, 147, 166, 0.3) 1px, transparent 1px);
  background-size: auto, auto, 28px 28px;
  background-attachment: fixed, fixed, fixed;
  background-repeat: no-repeat, no-repeat, repeat;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* Repère de focus clavier cohérent (le thème sombre masque l'anneau par
   défaut du navigateur) — ne s'affiche que pour une navigation clavier. */
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

/* Barres de défilement assorties au thème (sidebar, panneau principal,
   listes à cocher) plutôt que la barre claire par défaut du système. */
* { scrollbar-color: #343a4c var(--bg-elevated); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #343a4c; border-radius: 999px; border: 2px solid var(--bg-elevated); }
::-webkit-scrollbar-thumb:hover { background: #3d4457; }

/* Hauteur fixe (et non min-height) : c'est ce qui permet à .sidebar et
   .main-panel de défiler chacun de leur côté (voir leur overflow-y: auto)
   au lieu de faire défiler toute la page d'un bloc. */
#app { height: 100vh; display: flex; flex-direction: column; }

h1, h2, h3 { font-weight: 700; margin: 0 0 8px; }
p { margin: 0 0 8px; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
/* Utilitaire générique (ex. le bouton "effacer le filtre membre" de
   l'historique de modération, affiché seulement une fois un membre choisi) —
   .member-dropdown.hidden ci-dessous reste telle quelle, les deux cohabitent. */
.hidden { display: none; }

button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: 14px; }

/* ---------- Connexion ---------- */
.login-screen {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid rgba(0, 229, 255, 0.2);
  border-radius: var(--radius);
  padding: 40px 36px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow:
    0 0 0 1px rgba(145, 70, 255, 0.12),
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 90px rgba(0, 229, 255, 0.07);
}
.login-icon-wrap { position: relative; display: inline-block; margin-bottom: 8px; }
.login-icon-wrap::before {
  content: '';
  position: absolute;
  inset: -14px;
  background: radial-gradient(circle, var(--glow-cyan), transparent 70%);
  filter: blur(6px);
  z-index: 0;
}
.login-icon { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 18px; object-fit: cover; display: block; }
.login-card h1 {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: 0.01em;
  margin-bottom: 10px;
}
.login-card p { margin-bottom: 20px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-elevated-2);
  border: 1px solid var(--border);
  transition: filter 0.15s, transform 0.05s;
}
.btn:hover { filter: brightness(1.15); }
.btn:active { transform: scale(0.98); }
.btn-discord { background: var(--discord); border-color: var(--discord); width: 100%; padding: 13px 20px; }
.btn-discord:hover { background: var(--discord-hover); filter: none; }
.btn-primary {
  background: linear-gradient(135deg, var(--cyan), var(--violet));
  color: #0a0a0f;
  border: none;
  box-shadow: 0 2px 16px rgba(0, 229, 255, 0.18);
  transition: box-shadow 0.2s, transform 0.15s;
}
.btn-primary:hover { filter: none; box-shadow: 0 4px 26px var(--glow-cyan), 0 4px 26px var(--glow-violet); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0) scale(0.98); }
.btn-small { padding: 7px 14px; font-size: 13px; }
.btn-link {
  background: none; border: none; color: var(--text-muted); font-size: 13px;
  text-decoration: underline; padding: 4px;
}
.btn-link:hover { color: var(--text); }
.btn-icon {
  background: none; border: 1px solid transparent; color: var(--text-muted);
  font-size: 15px; padding: 4px 8px; border-radius: 6px;
}
.btn-icon:hover { color: var(--red); border-color: var(--border); }

/* ---------- Bandeau ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 20px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.brand span { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.02em; }
.brand-icon { width: 28px; height: 28px; border-radius: 7px; object-fit: cover; }
.menu-toggle {
  display: none;
  background: none; border: 1px solid var(--border); color: var(--text);
  border-radius: 6px; padding: 6px 10px; font-size: 16px;
}
.guild-select {
  flex: 1;
  max-width: 320px;
  background: var(--bg-elevated-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.user-box { display: flex; align-items: center; gap: 10px; margin-left: auto; white-space: nowrap; }
.avatar { width: 28px; height: 28px; border-radius: 50%; }

/* Bouton "aller à…" (palette de recherche globale, voir openCommandPalette) */
.btn-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 12px; color: var(--text-muted); font-size: 13px; cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-search:hover { border-color: var(--cyan); color: var(--text); }
.btn-search-kbd { background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 1px 6px; font-size: 11px; }

/* ---------- Palette "aller à…" (Ctrl/Cmd+K) ---------- */
.palette-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 6, 10, 0.65);
  display: flex; justify-content: center;
  padding-top: 12vh;
}
.palette-box {
  position: relative; width: 560px; max-width: 92vw; max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.palette-box::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--violet) 60%, transparent);
  opacity: 0.6;
}
input.palette-input {
  width: 100%; max-width: none; background: transparent; border: none; border-radius: 0;
  border-bottom: 1px solid var(--border); padding: 18px 20px; font-size: 16px;
}
.palette-list { overflow-y: auto; padding: 8px; }
.palette-item {
  display: flex; justify-content: space-between; align-items: center; width: 100%;
  background: none; border: none; border-radius: 8px; padding: 10px 12px;
  color: var(--text); font-size: 14px; text-align: left; cursor: pointer;
}
.palette-item:hover { background: var(--bg-elevated-2); }
.palette-item.active {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.14), rgba(145, 70, 255, 0.05) 65%, transparent);
  color: var(--cyan); font-weight: 700;
}
.palette-item-group { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; flex-shrink: 0; margin-left: 12px; }
.palette-empty { padding: 24px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }

/* ---------- Mise en page ---------- */
.layout { display: flex; flex: 1; min-height: 0; }
.sidebar {
  width: 260px;
  flex-shrink: 0;
  min-height: 0;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  padding: 12px 0;
}
.nav-group-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  padding: 14px 18px 6px;
}
.nav-group-icon { font-size: 12px; opacity: 0.85; }
.nav-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  color: var(--text);
  padding: 9px 18px;
  font-size: 14px;
  border-left: 3px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.nav-item:hover { background: var(--bg-elevated-2); border-left-color: var(--border); }
.nav-item.active {
  background: linear-gradient(90deg, rgba(0, 229, 255, 0.14), rgba(145, 70, 255, 0.05) 65%, transparent);
  border-left-color: var(--cyan);
  box-shadow: inset 0 0 24px rgba(0, 229, 255, 0.06);
  color: var(--cyan);
  font-weight: 700;
}
.main-panel { flex: 1; min-width: 0; min-height: 0; padding: 28px 32px 100px; overflow-y: auto; }
.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin: 12px 0;
  color: var(--text-muted);
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 14px;
}