/* ===== GAMEPANEL v1 — Thème néon dark =====
 * Très sombre + accents cyan, typo monospace moderne
 * Override les vars de style.css
 * Toutes les règles de composants sont scopées sous body.theme-v1
 * pour éviter d'écraser les overrides V3 en cascade.
 */

/* Charge la typo monospace JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');

/* === Variables CSS globales — actives UNIQUEMENT quand body.theme-v1 est présent === */
:root {
  /* ===== Backgrounds (plus sombres, plus profonds) ===== */
  --bg-0: #07090d;
  --bg-1: #0c0f15;
  --bg-2: #131820;
  --bg-3: #1c2330;

  /* ===== Borders ===== */
  --border: #1e2530;
  --border-strong: #2d3648;
  --border-subtle: #141a23;

  /* ===== Text ===== */
  --text-0: #f0f4f9;
  --text-1: #b4bcc7;
  --text-2: #6a7280;
  --text-3: #444c58;

  /* ===== Accent principal : cyan électrique ===== */
  --accent: #06b6d4;
  --accent-bright: #22d3ee;
  --accent-dim: rgba(6, 182, 212, 0.3);
  --accent-bg: rgba(6, 182, 212, 0.1);
  --accent-glow: rgba(6, 182, 212, 0.5);

  /* ===== Couleurs status ===== */
  --green: #00d97e;
  --green-bg: rgba(0, 217, 126, 0.1);
  --green-dim: rgba(0, 217, 126, 0.3);
  --green-glow: rgba(0, 217, 126, 0.5);

  --amber: #ffb020;
  --amber-bg: rgba(255, 176, 32, 0.1);
  --amber-dim: rgba(255, 176, 32, 0.3);

  --red: #ff4d6d;
  --red-bg: rgba(255, 77, 109, 0.1);
  --red-dim: rgba(255, 77, 109, 0.3);

  --blue: #4d7eff;
  --blue-bg: rgba(77, 126, 255, 0.1);
  --blue-dim: rgba(77, 126, 255, 0.3);

  --purple: #b366ff;
  --purple-bg: rgba(179, 102, 255, 0.1);
  --purple-dim: rgba(179, 102, 255, 0.3);

  /* ===== Typo : monospace partout ===== */
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-sans: 'JetBrains Mono', 'Inter', system-ui, sans-serif;
}

/* ============================================================
   Scopé body.theme-v1 — s'applique UNIQUEMENT quand ce thème est actif
   ============================================================ */

/* Application : tout en mono */
body.theme-v1,
body.theme-v1 button,
body.theme-v1 input,
body.theme-v1 select,
body.theme-v1 textarea {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.01em;
}

/* Lettrage plus tendu pour titres */
body.theme-v1 h1,
body.theme-v1 h2,
body.theme-v1 h3,
body.theme-v1 h4,
body.theme-v1 .page-header h1 {
  letter-spacing: -0.02em;
  font-weight: 700;
}

/* Sidebar : fond plus profond + bordure cyan subtile */
body.theme-v1 .sidebar {
  background: linear-gradient(180deg, #050709 0%, #0a0d12 100%) !important;
  border-right: 1px solid var(--border) !important;
}

body.theme-v1 .sidebar-section-label {
  color: var(--text-3);
  letter-spacing: 0.15em;
  font-size: 10px;
}

/* Nav item actif : accent cyan avec glow */
body.theme-v1 .nav-item.active,
body.theme-v1 .nav-item[data-nav].active {
  background: linear-gradient(90deg, var(--accent-bg) 0%, transparent 100%) !important;
  color: var(--accent-bright) !important;
  border-left: 2px solid var(--accent) !important;
  padding-left: 10px !important;
}

body.theme-v1 .nav-item:hover {
  background: rgba(6, 182, 212, 0.05) !important;
  color: var(--text-0) !important;
}

/* Boutons primaires : cyan néon */
body.theme-v1 .btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%) !important;
  color: #051116 !important;
  border: 1px solid var(--accent-bright) !important;
  box-shadow: 0 0 12px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.1) !important;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255,255,255,0.1);
}
body.theme-v1 .btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 100%) !important;
  box-shadow: 0 0 20px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  transform: translateY(-1px);
}

/* Boutons start/stop : verts/rouges plus saturés */
body.theme-v1 .btn-start {
  background: linear-gradient(135deg, var(--green) 0%, #059669 100%) !important;
  color: #04110a !important;
  border: 1px solid var(--green) !important;
  box-shadow: 0 0 10px rgba(0, 217, 126, 0.3) !important;
}
body.theme-v1 .btn-stop {
  background: linear-gradient(135deg, var(--red) 0%, #dc2626 100%) !important;
  color: #fff !important;
  border: 1px solid var(--red) !important;
  box-shadow: 0 0 10px rgba(255, 77, 109, 0.3) !important;
}
body.theme-v1 .btn-restart {
  background: linear-gradient(135deg, var(--amber) 0%, #d97706 100%) !important;
  color: #1a0f00 !important;
  border: 1px solid var(--amber) !important;
}

/* Cards */
body.theme-v1 .server-card {
  background: linear-gradient(180deg, var(--bg-1) 0%, #080b10 100%) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  transition: all 0.2s ease;
}
body.theme-v1 .server-card:hover {
  border-color: var(--game-color) !important;
  box-shadow: 0 0 0 1px var(--game-color), 0 0 30px var(--game-glow), 0 8px 30px rgba(0,0,0,0.5) !important;
}

/* Bordure top de la card */
body.theme-v1 .server-card::before {
  height: 1px !important;
  background: linear-gradient(90deg, transparent 0%, var(--game-color) 50%, transparent 100%) !important;
  opacity: 0.8 !important;
  box-shadow: 0 0 8px var(--game-color);
}

/* Stat boxes */
body.theme-v1 .stat-box {
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Status badge online */
body.theme-v1 .status-badge.online {
  background: rgba(0, 217, 126, 0.15) !important;
  color: var(--green) !important;
  border: 1px solid var(--green-dim) !important;
  text-shadow: 0 0 8px var(--green-glow);
}

/* Inputs : style terminal */
body.theme-v1 input[type="text"],
body.theme-v1 input[type="password"],
body.theme-v1 input[type="number"],
body.theme-v1 input[type="email"],
body.theme-v1 select,
body.theme-v1 textarea,
body.theme-v1 .form-input,
body.theme-v1 .form-select {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-0) !important;
  font-family: var(--font-mono) !important;
  transition: all 0.15s ease;
}
body.theme-v1 input:focus,
body.theme-v1 select:focus,
body.theme-v1 textarea:focus,
body.theme-v1 .form-input:focus,
body.theme-v1 .form-select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 1px var(--accent), 0 0 12px var(--accent-glow) !important;
}

/* Logo / Titre */
body.theme-v1 .sidebar-logo,
body.theme-v1 .gamepanel-title {
  font-family: var(--font-mono) !important;
  letter-spacing: -0.03em;
}

/* Pillule IP */
body.theme-v1 .server-card-bg + .server-card-inner > div[style*="background:rgba(0,0,0,0.25)"] {
  background: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-mono) !important;
}

/* Scrollbar custom */
body.theme-v1 ::-webkit-scrollbar { width: 8px; height: 8px; }
body.theme-v1 ::-webkit-scrollbar-track { background: var(--bg-0); }
body.theme-v1 ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
body.theme-v1 ::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* Selection */
body.theme-v1 ::selection {
  background: var(--accent-dim);
  color: var(--text-0);
}

/* Tabs */
body.theme-v1 .tab.active {
  color: var(--accent-bright) !important;
  border-bottom-color: var(--accent) !important;
  text-shadow: 0 0 8px var(--accent-glow);
}

/* Tableaux */
body.theme-v1 table {
  font-family: var(--font-mono);
}
body.theme-v1 table thead {
  background: var(--bg-2) !important;
  border-bottom: 1px solid var(--border-strong) !important;
}

/* Topbar */
body.theme-v1 .topbar {
  background: linear-gradient(180deg, #0a0d12 0%, #07090d 100%) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Logo GAMEPANEL avec glow cyan */
body.theme-v1 .sidebar-logo,
body.theme-v1 .logo,
body.theme-v1 [class*="logo"] {
  text-shadow: 0 0 12px var(--accent-glow), 0 0 24px rgba(6,182,212,0.3);
}
body.theme-v1 .sidebar-logo span:first-child,
body.theme-v1 .logo span:first-child {
  color: var(--text-0) !important;
}

/* Badge BETA — cyan */
body.theme-v1 .beta-badge,
body.theme-v1 [class*="beta"] {
  background: var(--accent-bg) !important;
  color: var(--accent-bright) !important;
  border: 1px solid var(--accent-dim) !important;
  text-shadow: 0 0 8px var(--accent-glow);
}

/* Bandeau topbar — style terminal */
body.theme-v1 .topbar,
body.theme-v1 .top-bar,
body.theme-v1 .global-stats {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.02em;
}

/* Status badge ARRÊTÉ */
body.theme-v1 .status-badge.offline,
body.theme-v1 .status-badge:not(.online):not(.loading) {
  background: rgba(255, 77, 109, 0.08) !important;
  color: #ff6b85 !important;
  border: 1px solid rgba(255, 77, 109, 0.25) !important;
}

/* Loader badges */
body.theme-v1 .loader-badge {
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  font-weight: 700 !important;
}
body.theme-v1 .loader-badge.vanilla,
body.theme-v1 .loader-badge[class*="vanilla"] {
  background: rgba(0, 217, 126, 0.1) !important;
  color: var(--green) !important;
  border: 1px solid var(--green-dim) !important;
}

/* Profil/role badges */
body.theme-v1 [style*="Super Administrateur"],
body.theme-v1 .role-badge,
body.theme-v1 .user-role-badge {
  font-family: var(--font-mono) !important;
}

/* Page headers */
body.theme-v1 .page-header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--text-0) 0%, var(--accent-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
body.theme-v1 .page-subtitle,
body.theme-v1 .page-header p {
  color: var(--text-2);
  font-size: 13px;
  letter-spacing: 0;
}

/* Modals : fond plus sombre */
body.theme-v1 .modal,
body.theme-v1 [class*="modal"] {
  background: var(--bg-1) !important;
  border: 1px solid var(--border-strong) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.8), 0 0 0 1px var(--accent-dim) !important;
}

/* Tables : header plus marqué */
body.theme-v1 table thead th {
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  color: var(--text-2) !important;
  text-transform: uppercase;
}

/* Bell icon */
body.theme-v1 #bell-btn,
body.theme-v1 .bell-btn {
  color: var(--text-2);
  transition: color 0.15s;
}
body.theme-v1 #bell-btn:hover,
body.theme-v1 .bell-btn:hover {
  color: var(--accent-bright) !important;
  text-shadow: 0 0 8px var(--accent-glow);
}

/* Toasts */
body.theme-v1 .toast {
  background: var(--bg-2) !important;
  border: 1px solid var(--border-strong) !important;
  font-family: var(--font-mono) !important;
}

/* Login page */
body.theme-v1 .login-card,
body.theme-v1 [class*="login"] {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  box-shadow: 0 0 40px rgba(6, 182, 212, 0.1), 0 24px 60px rgba(0,0,0,0.6) !important;
}

/* Code blocks */
body.theme-v1 pre,
body.theme-v1 code,
body.theme-v1 .code-block {
  background: var(--bg-0) !important;
  border: 1px solid var(--border) !important;
  font-family: var(--font-mono) !important;
}

/* Fix login page : restaure le titre GAMEPANEL */
body.theme-v1 .login-card h1,
body.theme-v1 .login-page h1,
body.theme-v1 [class*="login"] h1 {
  background: none !important;
  -webkit-text-fill-color: var(--text-0) !important;
  color: var(--text-0) !important;
  text-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(6,182,212,0.4) !important;
}

/* Fix badge BETA dans le login */
body.theme-v1 .login-card [class*="beta"],
body.theme-v1 .login-page [class*="beta"],
body.theme-v1 [class*="login"] span[style*="orange"],
body.theme-v1 [class*="login"] span[style*="amber"] {
  background: var(--accent-bg) !important;
  color: var(--accent-bright) !important;
  border-color: var(--accent-dim) !important;
}

/* Gradient h1 limité aux page-header */
body.theme-v1 h1 {
  background: none;
  -webkit-text-fill-color: initial;
  color: var(--text-0);
}
body.theme-v1 .page-header h1 {
  background: linear-gradient(135deg, var(--text-0) 0%, var(--accent-bright) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Bouton Connexion */
body.theme-v1 .login-card button[type="submit"],
body.theme-v1 .login-page button[type="submit"],
body.theme-v1 [class*="login"] button[type="submit"] {
  background: linear-gradient(135deg, var(--accent) 0%, #0891b2 100%) !important;
  color: #051116 !important;
  border: 1px solid var(--accent-bright) !important;
  box-shadow: 0 0 12px var(--accent-glow) !important;
  font-weight: 700;
}

/* Fix login title GAME visible */
body.theme-v1 .login-logo-title {
  background: none !important;
  -webkit-text-fill-color: var(--text-0) !important;
  color: var(--text-0) !important;
  text-shadow: 0 0 16px var(--accent-glow), 0 0 32px rgba(6,182,212,0.3) !important;
  font-family: var(--font-mono) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body.theme-v1 .login-logo-title span {
  background: none !important;
  -webkit-text-fill-color: var(--accent-bright) !important;
  color: var(--accent-bright) !important;
}

/* BETA badge dans login */
body.theme-v1 .login-logo-version,
body.theme-v1 .sidebar-logo-version {
  display: inline-block !important;
  margin: 8px auto 0 !important;
  padding: 3px 12px !important;
  background: var(--accent-bg) !important;
  color: var(--accent-bright) !important;
  border: 1px solid var(--accent-dim) !important;
  border-radius: 20px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  text-shadow: none !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
  width: fit-content !important;
  text-align: center !important;
  box-shadow: none !important;
  align-self: center !important;
}

/* Logo SVG manette */
body.theme-v1 .login-logo-mark,
body.theme-v1 .sidebar-logo-mark {
  filter: none !important;
  text-shadow: none !important;
  color: var(--accent-bright) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}
body.theme-v1 .login-logo-mark svg {
  filter: drop-shadow(0 0 12px var(--accent-glow));
}
body.theme-v1 .sidebar-logo-mark svg {
  filter: drop-shadow(0 0 6px var(--accent-glow));
}

/* Login logo : conteneur en colonne centrée */
body.theme-v1 .login-logo {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  padding: 24px 0 !important;
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Login page : fond transparent */
body.theme-v1 #login-page,
body.theme-v1 .login-page-wrap { background: transparent !important; }

/* Modal de confirmation */
body.theme-v1 .gp-confirm-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: gp-confirm-fadein 0.15s ease;
}
body.theme-v1 .gp-confirm-modal {
  background: rgba(12, 15, 21, 0.92); backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px;
  width: 420px; max-width: 92vw;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: gp-confirm-popin 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: var(--font-mono); overflow: hidden;
}
body.theme-v1 .gp-confirm-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px; }
body.theme-v1 .gp-confirm-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; }
body.theme-v1 .gp-confirm-icon.warning { background: rgba(255, 176, 32, 0.15); color: #ffb020; }
body.theme-v1 .gp-confirm-icon.danger  { background: rgba(255, 77, 109, 0.15); color: #ff4d6d; }
body.theme-v1 .gp-confirm-title { font-size: 16px; font-weight: 700; color: var(--text-0); }
body.theme-v1 .gp-confirm-body { padding: 20px 24px; color: var(--text-1); font-size: 13px; line-height: 1.6; }
body.theme-v1 .gp-confirm-body strong { color: var(--text-0); }
body.theme-v1 .gp-confirm-actions { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; background: rgba(0, 0, 0, 0.2); }
body.theme-v1 .gp-confirm-btn { padding: 8px 16px; border-radius: 6px; font-family: var(--font-mono); font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.15s ease; border: 1px solid var(--border); }
body.theme-v1 .gp-confirm-btn-cancel { background: var(--bg-2); color: var(--text-1); }
body.theme-v1 .gp-confirm-btn-cancel:hover { background: var(--bg-3); color: var(--text-0); }
body.theme-v1 .gp-confirm-btn-confirm-stop { background: linear-gradient(135deg, var(--red) 0%, #dc2626 100%); color: #fff; border: 1px solid var(--red); }
body.theme-v1 .gp-confirm-btn-confirm-restart { background: linear-gradient(135deg, var(--amber) 0%, #d97706 100%); color: #1a0f00; border: 1px solid var(--amber); }
body.theme-v1 .gp-confirm-btn-confirm-stop:hover,
body.theme-v1 .gp-confirm-btn-confirm-restart:hover { transform: translateY(-1px); filter: brightness(1.1); }

@keyframes gp-confirm-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes gp-confirm-popin  { from { opacity: 0; transform: scale(0.9) translateY(-20px); } to { opacity: 1; transform: scale(1) translateY(0); } }