* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #000000; color: #b3b3b3; overflow-y: auto; overflow-x: hidden; height: 100vh; }

/* Scrollbar customizada */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

.sidebar-container { padding: 20px 15px; display: flex; flex-direction: column; height: 100%; }

/* Menu Fixo */
.nav-links { list-style: none; margin-bottom: 20px; }
.nav-links li { padding: 10px 15px; margin-bottom: 5px; border-radius: 4px; cursor: pointer; display: flex; align-items: center; gap: 15px; font-weight: 600; font-size: 14px; transition: color 0.3s, background-color 0.2s; }
.nav-links li:hover { color: #ffffff; }
.nav-links li.active { background-color: #282828; color: #ffffff; }
.icon { font-size: 20px; }

.divider { height: 1px; background-color: #282828; margin: 10px 0 20px 0; }

/* Playlists */
.playlists-section { display: flex; flex-direction: column; flex: 1; }
.playlists-header { display: flex; justify-content: space-between; align-items: center; padding: 0 10px; margin-bottom: 15px; }
.playlists-header h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: #b3b3b3; }
#btnPlusPlaylist { background: none; border: none; color: #b3b3b3; font-size: 20px; cursor: pointer; transition: 0.2s; }
#btnPlusPlaylist:hover { color: #ffffff; transform: scale(1.1); }

.playlists-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.playlist-item { padding: 8px 10px; border-radius: 4px; cursor: pointer; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.2s, color 0.2s; color: #b3b3b3; }
.playlist-item:hover { background-color: #1a1a1a; color: #ffffff; }

/* Botão Primeira Playlist */
.btn-create-first { margin-top: 20px; padding: 12px; background-color: #ef5466; color: white; border: none; border-radius: 20px; font-size: 13px; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-create-first:hover { background-color: #d43f50; transform: scale(1.02); }


/* ================= TEMA CLARO ================= */
body.light-theme { background-color: #ffffff; color: #666666; }

body.light-theme .nav-links li { color: #666666; }
body.light-theme .nav-links li:hover { color: #121212; background-color: #f5f5f5; }
body.light-theme .nav-links li.active { background-color: #f0f0f0; color: #121212; font-weight: 700; }

body.light-theme .divider { background-color: #e0e0e0; }

body.light-theme .playlists-header h3 { color: #666666; font-weight: 600; }
body.light-theme #btnPlusPlaylist { color: #666666; }
body.light-theme #btnPlusPlaylist:hover { color: #121212; }

body.light-theme .playlist-item { color: #666666; font-weight: 500; }
body.light-theme .playlist-item:hover { background-color: #f0f0f0; color: #121212; }

/* Força a cor mais clara na barra de rolagem (se compatível no navegador) */
body.light-theme::-webkit-scrollbar-thumb { background: #cccccc; }
body.light-theme::-webkit-scrollbar-thumb:hover { background: #aaaaaa; }