/* ══════════════════════════════════════════════════════
   style.css — commun à index.html (dashboard) et lounge.html
   ══════════════════════════════════════════════════════ */
/* 🎃 Halloween theme */
:root {
  --bg:#0e0a06; --bg2:#1a1008; --bg3:#241508;
  --border:#3a2010; --border2:#4a2c10;
  --text:#f0dcc0; --muted:#8a6a40;
  --accent:#e07800; --accent2:#f59500;
  --green:#3ba55d; --red:#c0392b; --yellow:#f59500; --spotify:#1db954;
  --mono:'IBM Plex Mono',monospace; --sans:'IBM Plex Sans',sans-serif;
  --theme-a:224,120,0; --theme-b:14,10,6;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;min-height:100vh}
body.page-dashboard{display:flex}

/* ── Login ── */
#loginOverlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000}
#loginOverlay.hidden{display:none}
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.login-box{background:var(--bg2);border:1px solid var(--border2);border-radius:14px;padding:40px 36px;width:340px;display:flex;flex-direction:column;gap:18px}
.page-lounge .login-box{text-align:center}
.login-box h2{font-size:20px;font-weight:600}
.login-box p{font-size:13px;color:var(--muted);line-height:1.5}
.login-error{font-size:12px;color:var(--red);display:none}
.login-error.show{display:block}

/* ── Sidebar (dashboard) ── */
.sidebar{width:220px;background:var(--bg2);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0}
.sidebar-logo{padding:24px 20px 16px;display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--border)}
.sidebar-logo .dot{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px}
.sidebar-logo span{font-weight:600;font-size:15px}
.status-pill{font-size:11px;font-family:var(--mono);padding:2px 8px;border-radius:20px;background:#1a2d1c;color:var(--green);margin-left:auto}
.status-pill.offline{background:#2d1a1a;color:var(--red)}
nav{padding:12px 0;flex:1}
.nav-section{font-size:10px;font-weight:600;letter-spacing:.08em;color:var(--muted);padding:12px 20px 6px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 20px;cursor:pointer;color:var(--muted);transition:all .15s;border-left:2px solid transparent}
.nav-item:hover{background:var(--bg3);color:var(--text)}
.nav-item.active{background:rgba(88,101,242,.12);color:var(--accent2);border-left-color:var(--accent)}
.nav-item .icon{font-size:16px}
.sidebar-bot{padding:16px 20px;border-top:1px solid var(--border)}
.bot-card{display:flex;align-items:center;gap:10px}
.bot-avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;flex-shrink:0}
.bot-name{font-size:13px;font-weight:500}
.bot-latency{font-size:11px;color:var(--muted);font-family:var(--mono)}

/* ── Topbar / Main ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);height:56px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0}
.page-dashboard .topbar{padding:0 28px}
.page-lounge   .topbar{padding:0 20px}
.page-title{font-size:16px;font-weight:600}
.topbar-left{display:flex;align-items:center;gap:10px}
.topbar-right{display:flex;align-items:center;gap:12px}
.content{padding:20px}
.page-dashboard .content{flex:1;overflow-y:auto;padding:24px 28px}
select.guild-select{background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:6px 12px;border-radius:6px;font-family:var(--sans);font-size:13px;cursor:pointer}
.dot{width:32px;height:32px;background:var(--accent);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.brand{font-weight:600;font-size:15px}
#av{width:28px;height:28px;border-radius:50%;vertical-align:middle}
#nm{font-size:13px;font-family:var(--mono);color:var(--muted)}

/* ── Stats (dashboard) ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stat-card{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:18px 20px}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.stat-value{font-size:28px;font-weight:600;font-family:var(--mono);color:var(--text)}
.stat-value.accent{color:var(--accent2)}
.stat-value.green{color:var(--green)}
.stat-value.yellow{color:var(--yellow)}

/* ── Panel ── */
.panel{background:var(--bg2);border:1px solid var(--border);border-radius:10px;margin-bottom:20px;overflow:hidden}
.panel-header{padding:14px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.panel-title{font-weight:500;font-size:13px}
.panel-body{padding:20px}

/* ── Table ── */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:0 0 10px;border-bottom:1px solid var(--border)}
td{padding:10px 0;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
.tag{display:inline-block;background:rgba(88,101,242,.15);color:var(--accent2);padding:2px 8px;border-radius:4px;font-size:11px;margin:2px}
.tag.green{background:rgba(59,165,93,.15);color:#4ade80}

/* ── Buttons ── */
.btn{padding:7px 16px;border-radius:6px;border:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;transition:all .15s}
.btn:disabled{opacity:.4;cursor:default}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent2)}
.btn-danger{background:rgba(237,66,69,.15);color:var(--red);border:1px solid rgba(237,66,69,.3)}
.btn-danger:hover{background:rgba(237,66,69,.25)}
.btn-warn{background:rgba(250,168,26,.15);color:var(--yellow);border:1px solid rgba(250,168,26,.3)}
.btn-warn:hover{background:rgba(250,168,26,.25)}
.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border2)}
.btn-ghost:hover{background:var(--bg3);color:var(--text)}
.btn-green{background:rgba(29,185,84,.15);color:var(--spotify);border:1px solid rgba(29,185,84,.35)}
.btn-green:hover{background:rgba(29,185,84,.25)}
.btn-sm{padding:4px 10px;font-size:12px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}

/* ── Form ── */
.form-row{display:grid;gap:12px;margin-bottom:14px}
.form-row.cols2{grid-template-columns:1fr 1fr}
.form-row.cols3{grid-template-columns:1fr 1fr 1fr}
label{display:block;font-size:11px;font-weight:500;color:var(--muted);margin-bottom:5px;letter-spacing:.05em;text-transform:uppercase}
input[type=text],input[type=number],input[type=password],select,textarea{width:100%;background:var(--bg3);border:1px solid var(--border2);color:var(--text);padding:8px 12px;border-radius:6px;font-family:var(--sans);font-size:13px}
textarea{resize:vertical;min-height:80px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
input[type=range]{width:100%;accent-color:var(--accent)}
@media(max-width:560px){.form-row.cols2,.form-row.cols3{grid-template-columns:1fr}}

/* ── Logs ── */
.log-list{font-family:var(--mono);font-size:12px;max-height:280px;overflow-y:auto}
.log-row{display:flex;gap:12px;padding:5px 0;border-bottom:1px solid var(--border)}
.log-time{color:var(--muted);width:56px;flex-shrink:0}
.log-action{width:70px;flex-shrink:0;font-weight:500;color:var(--accent2)}
.log-detail{color:var(--text);opacity:.8}
.empty{color:var(--muted);text-align:center;padding:28px;font-size:13px}
.hint{font-size:12px;color:var(--muted);margin-top:4px}

/* ── Toast ── */
.toast-container{position:fixed;bottom:24px;right:24px;left:24px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:999}
.toast{background:var(--bg2);border:1px solid var(--border2);padding:12px 18px;border-radius:8px;font-size:13px;animation:slideIn .2s ease;display:flex;align-items:center;gap:10px}
.toast.success{border-color:var(--green)}
.toast.error{border-color:var(--red)}
@keyframes slideIn{from{transform:translateX(20px);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── Page visibility (dashboard) ── */
.page{display:none}
.page.active{display:block}

/* ── Musique (commun) ── */
.music-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.np{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.np-cover{width:84px;height:84px;border-radius:8px;background:var(--bg3);border:1px solid var(--border2);object-fit:cover;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:28px}
#npCoverWrap{cursor:pointer}
.np-title{font-weight:600;font-size:15px}
.np-artist{color:var(--muted);font-size:13px;margin-top:2px}
.np-state{font-size:11px;font-family:var(--mono);margin-top:6px;color:var(--muted)}
.queue-item,.track{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}
.queue-item:last-child,.track:last-child{border-bottom:none}
.track img,.track .ph,.queue-item img,.queue-item .ph{width:44px;height:44px;border-radius:6px;object-fit:cover;background:var(--bg3);flex-shrink:0}
.track-info{flex:1;min-width:0}
.track-title{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-num{color:var(--muted);font-family:var(--mono);font-size:12px;width:22px;flex-shrink:0}
.vol-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.vol-row span{font-family:var(--mono);font-size:12px;color:var(--muted);width:40px;text-align:right}
@media(max-width:1100px){.music-grid{grid-template-columns:1fr}}

/* ── Paroles (lounge) ── */
.lyrics-box{max-height:260px;overflow-y:auto;scroll-behavior:smooth;padding-right:4px}
.lyrics-line{padding:5px 0;color:var(--muted);font-size:14px;line-height:1.5;transition:color .15s,transform .15s}
.lyrics-line.active{color:var(--text);font-weight:600;transform:translateX(2px)}
.lyrics-line.active::before{content:'▸ ';color:var(--accent2)}
.lyrics-plain{white-space:pre-line;color:var(--text);line-height:1.7;font-size:13px}

/* ── Lecteur plein écran (lounge) ── */
#fullPlayer{
  position:fixed;inset:0;z-index:1100;display:none;
  flex-direction:column;align-items:center;
  padding:20px 20px 48px;overflow-y:auto;
  background:radial-gradient(120% 60% at 50% -10%,rgb(var(--theme-a)) 0%,rgb(var(--theme-b)) 55%,var(--bg) 100%)
}
#fullPlayer.open{display:flex}
.full-close{align-self:flex-end;background:rgba(255,255,255,.08);border:none;color:var(--text);width:36px;height:36px;border-radius:50%;font-size:16px;cursor:pointer;flex-shrink:0}
.full-close:hover{background:rgba(255,255,255,.18)}
.full-cover-wrap{margin:12px 0 24px}
.full-cover{width:min(280px,62vw);height:min(280px,62vw);border-radius:12px;object-fit:cover;box-shadow:0 20px 60px rgba(0,0,0,.5);background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:64px}
.full-title{font-size:22px;font-weight:600;text-align:center;max-width:90vw}
.full-artist{font-size:15px;color:rgba(255,255,255,.7);margin-top:4px;text-align:center;max-width:90vw}
.full-controls{display:flex;gap:10px;margin:22px 0 8px;flex-wrap:wrap;justify-content:center}
.full-vol{display:flex;align-items:center;gap:10px;width:min(320px,90vw);margin-bottom:28px}
.full-vol label{color:rgba(255,255,255,.6)}
.full-vol span{font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.6);width:40px;text-align:right}
.full-lyrics{width:min(560px,92vw);text-align:center}
.full-lyrics .lyrics-line{font-size:18px;padding:9px 0;color:rgba(255,255,255,.45);font-weight:500}
.full-lyrics .lyrics-line.active{color:#fff;font-size:22px;font-weight:700;transform:none}
.full-lyrics .lyrics-line.active::before{content:none}
.full-lyrics .lyrics-plain{color:rgba(255,255,255,.85)}
.full-lyrics .empty{color:rgba(255,255,255,.5)}/* ═══════════════════════════════════════════════════════════════════════════
   lounge-music.css
   Nouvelles features : Now Playing Bar · Skip Vote · Owner Panel · Perm Playlist
   À ajouter dans lounge.html : <link rel="stylesheet" href="lounge-music.css">
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Now Playing Bar ──────────────────────────────────────────────────────── */

#npBar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  background: rgba(10, 10, 20, 0.92);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 -4px 40px rgba(0, 0, 0, 0.5);
  transition: background 1.2s ease;
  user-select: none;
}
#npBar.active { display: flex; }

/* Barre de progression collée en haut de la barre */
#npBar .nb-progress {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 0;
}
#npBar .nb-progress-fill {
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(var(--theme-a, 88, 101, 242), 1),
    rgba(var(--theme-a, 88, 101, 242), 0.4)
  );
  transition: width 0.8s linear;
  width: 0%;
  border-radius: 0 2px 2px 0;
}

/* Pochette */
#npBar .nb-cover {
  width: 44px; height: 44px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
#npBar .nb-cover:hover { transform: scale(1.06); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }
#npBar .nb-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Infos titre */
#npBar .nb-info { flex: 1; min-width: 0; }
#npBar .nb-title {
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
  line-height: 1.3;
}
#npBar .nb-artist {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Boutons de la barre */
#npBar .nb-btns {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
}
#npBar .nb-btn {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 8px;
  padding: 5px 13px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  white-space: nowrap;
  line-height: 1.5;
}
#npBar .nb-btn:hover  { background: rgba(255,255,255,0.14); transform: translateY(-1px); }
#npBar .nb-btn:active { transform: translateY(0); }
#npBar .nb-btn:disabled { opacity: 0.3; cursor: default; transform: none; }

#npBar .nb-btn.warn {
  border-color: rgba(250, 166, 26, 0.35);
  color: #faa61a;
}
#npBar .nb-btn.warn:hover { background: rgba(250,166,26,0.12); }

#npBar .nb-btn.danger {
  border-color: rgba(237, 66, 69, 0.35);
  color: #ed4245;
}
#npBar .nb-btn.danger:hover { background: rgba(237,66,69,0.12); }

/* Bouton vote skip */
#skipVoteBtn { display: none; }
#skipVoteBtn .vote-count {
  font-size: 10px;
  background: rgba(250, 166, 26, 0.18);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 5px;
  color: #faa61a;
  font-weight: 600;
}
#skipVoteBtn.voted {
  opacity: 0.5;
  cursor: default;
}

/* Padding body pour ne pas cacher le contenu derrière la barre */
body.has-npbar { padding-bottom: 70px; }

/* ── Owner Panel ─────────────────────────────────────────────────────────── */

#ownerPanel { display: none; }
#ownerPanel .panel-header .tag {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a1200;
  font-weight: 700;
}

.owner-ctrl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .owner-ctrl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Volume owner */
#volOwner {
  flex: 1;
  accent-color: #ffd700;
}

/* Quick play input */
#ownerQuery {
  font-family: var(--mono, monospace);
  font-size: 12px;
}

/* Statut vote dans owner panel */
#ownerVoteStatus {
  font-family: var(--mono, monospace);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

/* ── Playlist permanente ─────────────────────────────────────────────────── */

.perm-track {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.1s;
  border-radius: 6px;
  padding-left: 4px;
  padding-right: 4px;
}
.perm-track:hover { background: rgba(255, 255, 255, 0.03); }
.perm-track:last-child { border-bottom: none; }

.perm-track img {
  width: 38px; height: 38px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
}
.perm-track .ph {
  width: 38px; height: 38px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.perm-track .pt-info {
  flex: 1;
  min-width: 0;
}
.perm-track .pt-title {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: rgba(255, 255, 255, 0.92);
}
.perm-track .pt-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.38);
  margin-top: 2px;
}

/* Champ ajout playlist */
#permAddQuery {
  font-size: 12px;
}

/* ── Animations légères ──────────────────────────────────────────────────── */

@keyframes npBarIn {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
#npBar.active { animation: npBarIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }

/* Pulsation pochette quand musique joue */
@keyframes coverPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--theme-a, 88,101,242), 0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(var(--theme-a, 88,101,242), 0); }
}
#npBar.active .nb-cover {
  animation: coverPulse 2.5s ease-in-out infinite;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  #npBar { gap: 10px; padding: 8px 12px; }
  #npBar .nb-cover { width: 38px; height: 38px; font-size: 17px; }
  #npBar .nb-title { font-size: 12px; }
  #npBar .nb-btn   { padding: 4px 9px; font-size: 11px; }
  #skipVoteBtn .vote-count { display: none; }
}