/* ==========================================================================
   CSS Variabelen (Kleurenpalet & Dimensies)
   ========================================================================== */
:root {
    --font-primary: 'Montserrat', sans-serif;
    --sidebar-width: 240px;
    --header-height: 60px;
    --color-background: #ffffff;
    --color-surface: #ffffff;
    --color-border: #dee2e6;
    --color-text-primary: #212529;
    --color-text-secondary: #6c757d;
    --color-accent-primary: #545f65; 
    --color-accent-text: #ffffff;
}



/* ==========================================================================
   Algemene Stijlen & Typografie
   ========================================================================== */


body {
    font-family: var(--font-primary);
    background-color: var(--color-background);
    color: var(--color-text-primary);
    font-size: 13px;
    padding-top: var(--header-height);
}

.pp-artist-cover {
    border-radius: 50%;
    object-position: center top; /* verplaatst focus naar beneden */
    display: block;
}

a {
    color: var(--color-text-secondary);
    transition: all 0.2s ease-in-out;
}
a:hover {
    color: var(--color-text-primary);
    text-decoration: none;
}

.h1, h1 {
    font-size: 22px;
}


.h2, h2 {
    font-size: 20px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
}

button:focus {
    outline: none;  /* Verwijdert de browser outline */
    box-shadow: none; /* Verwijdert eventuele schaduwen */
}

/* ==========================================================================
   Nieuwe Lay-out: Sidebar, Header, Main Content
   ========================================================================== */


.sidebar-header {
    display: block;
    width: 235px;
    height: 50px;
    background: url(../img/logo.png) no-repeat center center;
    background-size: 150px auto;
    overflow: hidden;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background-color: var(--color-surface);
    border-right: 1px solid var(--color-border);
    padding: 1rem 0;
    z-index: 1031;
}
/* This was duplicated, keeping one version */
/* .sidebar-header {
    font-family: var(--font-primary);
    padding: 0 1.5rem 1rem 1.5rem;
    font-weight: 700;
} */
.sidebar .nav-link {
    font-weight: 500;
    padding: 0.75rem 1.5rem;
    border-left: 3px solid transparent;
}
.sidebar .nav-link:hover {
    background-color: #f1f3f5;
}
.sidebar .nav-link.active {
    color: var(--color-accent-primary);
    font-weight: 700;
    border-left-color: var(--color-accent-primary);
    background: #f9f9f9;    
}

.top-header {
    position: fixed;
    top: 0;
    left: var(--sidebar-width);
    right: 0;
    height: var(--header-height);
    background-color: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    z-index: 1030;
}

.main-content-area {
    margin-left: var(--sidebar-width);
    padding: 1.5rem;
    padding-bottom: 120px;
}


/* ==========================================================================
   Comments Elementen
   ========================================================================== */

.testing {
    margin-bottom: -15px;
}

/* Comment actions container: emoji links, knoppen rechts */
.comment-actions {
  display: flex;
  justify-content: space-between; /* emoji links, knoppen rechts */
  align-items: center;
  margin-top: 6px;
  position: relative;
}

/* Smiley-knop */
.emoji-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 0 4px;
  transition: transform 0.2s;
}

/* Dropdown-menu met emoji's */
.emoji-menu {
  display: none;           /* standaard verbergen */
  position: absolute;
  top: 100%;               /* onder de knop plaatsen */
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-top: 4px;         /* kleine ruimte tussen knop en menu */
  z-index: 10;
  flex-wrap: wrap;         /* meerdere rijen emoji mogelijk */
}

/* Emoji's in het menu */
.emoji-menu .emoji {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  margin: 2px;
  transition: transform 0.1s;
}

.emoji-menu .emoji:hover {
  transform: scale(1.2);
}

/* Toon menu als actief via JS */
.emoji-dropdown.active .emoji-menu {
  display: flex;
}

/* Emoji-dropdown standaard verbergen */
.emoji-dropdown {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}

/* Optioneel: ook zichtbaar bij focus in textarea (voor comment-box en reply-box) */
.comment-box:focus-within .emoji-dropdown,
.reply-box:focus-within .emoji-dropdown {
  opacity: 1;
  visibility: visible;
}




.reply-box, 
.comment-box {
  position: relative;
  width: 100%;
}

.reply-box .form-control, 
.comment-box .form-control {
  width: 100%;
  border: none;
  border-bottom: 1px solid #ddd;
  background: transparent;
  resize: none;
  padding: 6px 0;
  font-size: 14px;
  color: #333;
  outline: none;
  box-shadow: none;
  transition: border-color 0.2s;
  border-radius: 0px!important;
}

.reply-box .form-control:focus, 
.comment-box .form-control:focus {
  border-bottom: 1px solid #000;
}

.reply-box .form-control::placeholder,
.comment-box .form-control::placeholder {
  color: #888;
  font-size: 14px;
}


.comment-box .form-control {
  overflow: hidden;
}

.form-control:focus,
.comment-box .form-control:focus {
  border-color: #000 !important; /* or any color you prefer */
  box-shadow: none !important;
}
/* ==========================================================================
   Header Elementen
   ========================================================================== */
.search-form {
    flex-grow: 1;     /* Laat de zoekbalk alle lege ruimte opvullen */
    margin: 0 1rem;   /* Voegt wat ademruimte toe aan de linker- en rechterkant */
    width: 100%;  /* Optioneel: een limiet voor hele grote schermen */
}

.search-container {
    position: relative; /* Behoudt de positie voor het icoontje */
    width: 100%;      /* Vult het formulier */
}
.search-container .form-control {
    padding-left: 2.5rem;
    border-radius: 6px;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
}
.search-container .fa-search {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}
.header-icon {
    font-size: 1.2rem;
}
.navbar-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 8px;
    object-fit: cover;
}
.dropdown-menu {
    border-radius: 8px;
    border: 1px solid var(--color-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.dropdown-toggle::after {
    display: none;
}

/* ==========================================================================
   Player
   ========================================================================== */

.player-now-playing {
    display: flex;
    align-items: center;
    gap: 15px; 
}

#current-song-art {
    width: 56px;
    height: 56px;
    border-radius: 4px;
    object-fit: cover;
}   
.player-container {
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    align-items: center;
    gap: 30px;
    z-index: 1040;
}
.player-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}
.player-controls {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.player-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.player-controls .btn {
    background-color: transparent;
    border: 1px solid #e9ecef!important;
    color: var(--color-text-secondary);
    width: 32px!important;
    height: 32px!important;
    border-radius: 50%;
    font-size: 12px!important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}
.player-controls .btn:hover {
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}
.player-controls #play-pause-btn {
    background-color: var(--color-accent-primary);
    border-color: var(--color-accent-primary);
    color: var(--color-accent-text);
    width: 40px!important;
    height: 40px!important;
    font-size: 16px;
}
.player-controls #play-pause-btn:hover {
    background-color: var(--color-text-secondary);
    border-color: var(--color-accent-primary);
}
.player-bar, .volume-bar {
    display: flex;
    align-items: center;
    width: 100%;
}
.volume-bar {
    justify-content: flex-end;
    gap: 8px;
}
#volume-icon {
    cursor: pointer;
}
.time {
    color: var(--color-text-secondary);
    font-size: 12px;
    min-width: 40px;
    text-align: center;
}
input[type="range"] {
    -webkit-appearance: none;
    width: 100%;
    height: 5px;
    background: #e9ecef;
    border-radius: 5px;
    outline: none;
    cursor: pointer;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: var(--color-accent-primary);
    border-radius: 50%;
    border: 3px solid var(--color-surface);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: var(--color-accent-primary);
    border-radius: 50%;
    border: 3px solid var(--color-surface);
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

/* ==========================================================================
   Overige Componenten
   ========================================================================== */
.table {
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 8px; /* Added for consistency */
}
.table td, .table th {
    border-top: 1px solid #f1f3f5;
    vertical-align: middle;
    padding: 10px 15px;
}
.table thead th {
    font-family: var(--font-primary);
    color: var(--color-text-secondary);
    border-bottom: 1px solid #dee2e6!important; /* From your code */
    border-top: none;
    font-size: 14px;
    font-weight: 600;
}
.table-hover tbody tr:hover {
    background-color: #f8f9fa;
}

.playlist-artist {
    color: var(--color-accent-primary);
    font-weight: 700;
}

.list-group-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    margin-bottom: -1px;
}
.list-group-item-action:hover {
    background-color: #f8f9fa;
}

.form-control {
    border-radius: 6px;
    border: 1px solid var(--color-border);
    padding: 8px 12px;
}
.form-control:focus {
    border-color: var(--color-accent-primary);
    box-shadow: 0 0 0 3px rgb(84 95 101 / 8%);
}

.btn {
    font-family: var(--font-primary);
    border-radius: 6px;
    font-size: 12px;   
    padding: 10px 15px;
    border: 1px solid var(--color-border);
    transition: all 0.2s ease-in-out;    
}

.btn-link {
    border: none!important;    
}

.preview-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    width: 32px;
    height: 32px;
    border: none;
    z-index: 2;
    border-radius: 50%;
    transition: transform 0.2s ease, background-color 0.2s ease;
    cursor: pointer;
}

.preview-btn .fa-play{
    font-size: 14px;
}

.btn:active {
    transform: scale(0.98);
}
.btn:focus {
    box-shadow: none;
}
.btn-primary, .btn-success {
    background-color: var(--color-accent-primary);
    color: var(--color-accent-text);
}
.btn-primary:hover, .btn-success:hover {
    background-color: #316dca; /* Adjusted from #c82333 */
}

.modal-content {
    background-color: var(--color-surface);
    border: none;
    border-radius: 8px;
}
.modal-header {
    border-bottom: 1px solid var(--color-border);
}

.cover-play {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 4px;
}

.playlist-table td:nth-child(2) {
    padding-left: 4px;
}

.playlist-table .cover-play {
    padding-right: 0;
}

.playlist-table td:nth-child(3) {
    padding-left: 10px;
}

.song-cover {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 3px;
}

.playlist-table th:nth-child(2), 
.playlist-table td.cover-play {
    width: 60px;  
    max-width: 60px;
}

#play-all-btn {
    background-color: transparent;
    border: 1px solid #e9ecef;
    color: var(--color-text-secondary);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 16px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
}

/* ==========================================================================
   Playlist Header & Info
   ========================================================================== */
.playlist-header {
    min-height: 200px; /* From your code */
    border-radius: 8px;
    overflow: hidden;
    color: white;
    padding: 20px 40px; 
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px; 
    margin-top: 8px;
    margin-bottom: 15px;
}

.playlist-header .overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0));
    z-index: 1;
}

.playlist-cover-collage,
.playlist-info {
    position: relative;
    z-index: 2;
}

/* Container voor titel en acties */
.playlist-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

/* Titelstijl */
.playlist-title .playlist-name {
    font-size: 18px; /* ongeveer <h2> formaat */
    font-weight: 600;
    margin: 0;
}

.like-btn:hover {
    color: #ff4d4d; /* hover effect */
}

/* Heart icon states */
.like-btn .liked {
    color: #e0245e; /* rood hart */
}

.like-btn .unliked {
    color: #aaa; /* grijs hart */
}

/* Like count */
#like-count {
    font-size: 0.95rem;
    font-weight: 500;
    color: #555;
}


/* In style.css */
.favorite-btn-playlist {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.favorite-btn-playlist i {
    color: #aaa; /* Standaard grijze kleur */
    transition: color 0.2s ease;
}

.favorite-btn-playlist i.favorited {
    color: #1DB954; /* Groene kleur, zoals Spotify */
}


.playlist-cover-collage {
    width: 130px;
    height: 130px;
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 2px;
    border: 1px solid var(--color-border);
    padding: 2px;
    background: #fff;
}
.playlist-cover-collage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.playlist-cover-collage.single {
    display: block;
}
.playlist-cover-collage.single .collage-item {
    width: 100%;
    height: 100%;
}

.playlist-info {
    color: var(--color-text-primary);
}
.playlist-info .text-muted,
.playlist-info .text-light {
   color: var(--color-accent-primary);
}

.user-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
}

.playlist-owner-text a {
    text-decoration: none;
    color: var(--color-accent-primary);
    font-weight: 700;
}


/* ==========================================================================
   Dropdown + effect...
   ========================================================================== */
.dropdown-like {
    border-radius: 0px!important;
    font-size: 13px!important;
}

.dropdown-menu-lower {
  margin-top: 24px; 
}

/* Dropdown items consistent kleuren */
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item:active,
.dropdown-item.active {
    color: #16181b !important;          /* Tekstkleur */
    text-decoration: none !important;   /* Geen onderstreping */
    background-color: #f8f9fa !important; /* Achtergrondkleur */
}

/* Optioneel: voeg een lichte overgang toe voor hover */
.dropdown-item {
    transition: background-color 0.2s, color 0.2s;
}



/* ==========================================================================
   Likes, Friends & Notifications
   ========================================================================== */
.friend-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.friend-label {
    font-size: 0.9rem;
    color: #333;
}

#like-count {
    font-size: 14px!important;
    font-weight: 500!important;
}


.like-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  padding-left: 10px;
  margin-right: -5px;
  font-size: 18px;
}

.like-btn:focus,
.like-btn:active {
  outline: none;
  box-shadow: none;
}

.like-btn i.unliked {
  color: #aaa;
  transition: color 0.2s ease;
}

.like-btn i.liked {
  color: #e02424; 
  transition: color 0.2s ease;
}

.notification-wrapper-left,
.notification-wrapper {
    margin-top: 10px;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.notification-wrapper-left {
  padding-left: 15px;
  margin-right: -5px;
}


.notification-wrapper .fa-bell,
.notification-wrapper-left .fa-user-friends {
    font-size: 18px;
    color: #444;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    background: #e02424;
    color: white;
    border-radius: 50%;
    padding: 2px 7px;
    font-size: 10px;
    display: none;
}

.notification-item {
    transition: background-color 0.2s ease;
}
.notification-item:hover {
    background-color: #f8f9fa;
    text-decoration: none;
}
.notification-item strong {
    font-size: 0.95rem;
}
.notification-item .text-muted {
    font-size: 0.8rem;
}



/* ==========================================================================
   Top 10 Liedjes & Artiesten Grids
   ========================================================================== */
.pp-song-grid,
.pp-artist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start;
}

.pp-song-card,
.pp-artist-card {
  flex: 1 1 calc(10% - 10px);
  min-width: 120px;
  text-align: center;
  font-size: 0.9em;
}

.pp-cover-wrapper,
.pp-artist-cover-wrapper {
  position: relative;
  width: 100%;
}

.pp-song-cover,
.pp-artist-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pp-track,
.pp-artist-playcount {
  color: #6c757d;
  font-size: 0.85em;
}

.pp-song-info,
.pp-artist-info {
  margin-top: 4px;
}

.pp-song-cover {
  border-radius: 6px;
}

.pp-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pp-play-btn:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.pp-playcount {
  display: block;
  margin-top: 2px;
  font-size: 0.8em;
  color: #555;
}

.pp-artist-cover-wrapper {
  aspect-ratio: 1 / 1; 
  border-radius: 6px;
  overflow: hidden;
  margin: 0 auto 8px auto;
}

.pp-artist-info strong {
  font-size: 0.9em;
  margin-bottom: 2px;
}

.pp-artist-playcount {
    font-weight: 400;
}

.pp-more-menu {
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.pp-more-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.pp-dropdown {
  display: none;
  position: absolute;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 10;
  flex-direction: row;
  gap: 8px;
  padding: 6px 10px;
}

.pp-dropdown.show {
  display: flex;
}

.pp-dropdown a {
  display: inline-block;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  padding: 4px 6px;
}

.pp-dropdown a:hover {
    background: #f1f3f5;
    border-radius: 4px;
}

/* ==========================================================================
   Utility Classes & Special States
   ========================================================================== */

.cover-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: middle;
}

.cover-container .song-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.cover-container .play-song {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    width: 32px;
    height: 32px;
    border: none;
    z-index: 2;
    border-radius: 50%;
}

.cover-container .play-song .fa-play  {
    position: relative;   
    font-size: 14px;
    top: -2px; /* Visual alignment */
    left: -5px; /* Visual alignment */
} 

.cover-container .play-song .fa-spinner,
.cover-container .play-song .fa-spin,
.cover-container .play-song .fa-volume-up  {
    position: relative;   
    font-size: 14px;
    top: -2px; /* Visual alignment */
    left: -6px; /* Visual alignment */
} 

.now-playing {
    background-color:#f8f9fa;
}

#current-song-artist {
    color: var(--color-accent-primary);
    font-weight: 600; 
    font-size: 12px;    
}

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 ratio */
  height: 0;
  overflow: hidden;
  max-width: 100%;
  margin-bottom: 15px; /* space below video */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  margin-bottom: 5px;
}


/* ==========================================================================
   Custom Alert Box css
   ========================================================================== */
  .custom-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
  }

  .custom-modal {
    background: #fff;
    padding: 20px;
    border-radius: 4px;
    width: 300px;
    max-width: 90%;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: fadeIn 0.2s ease-in-out;
    font-weight: 300!important;
  }

  .custom-modal h3 {
    margin: 0 0 15px;
    font-size: 14px;
    font-weight: 200!important;    
  }

  .custom-modal button {
    padding: 8px 16px;
    border: none;
    border-radius: 4px;
    margin: 0 5px;
    cursor: pointer;
  }

  .btn-confirm {
    background: #2563eb;
    color: #fff;
  }

  .btn-cancel {
    background: #e5e7eb;
    color: #111;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
  }


/* ==========================================================================
   Carousel Navigatie voor Grids
   ========================================================================== */
.grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Knoppen zijn standaard verborgen op desktop */
.carousel-nav {
    display: none;
}

/* ==========================================================================
   Responsive Media Queries
   ========================================================================== */
@media (max-width: 991.98px) {
    hide-mobile {
        display: none;
    }
    .sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 1041;
    }
    .sidebar.active {
        transform: translateX(0);
    }
    .top-header {
        left: 0;
    }
    .main-content-area {
        margin-left: 0;
    }
    .menu-toggle {
        background: none;
        border: none;
        font-size: 1.5rem;
        margin-right: 1rem;
        cursor: pointer;
        color: var(--color-text-primary);
    }
    .sidebar-overlay {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1040;
        display: none;
    }
    .sidebar.active ~ .sidebar-overlay {
        display: block;
    }

    .pp-song-card, 
    .pp-artist-card {
        flex: 1 1 calc(50% - 10px); 
    }
}

@media (max-width: 768px) {
    /* Maak de grids horizontaal scrollbaar op mobiel */
    .pp-artist-grid,
    .pp-song-grid {
        flex-wrap: nowrap; /* Zorgt dat items op één lijn blijven */
        overflow-x: auto;  /* Maakt horizontaal scrollen mogelijk */
        scroll-behavior: smooth;
        padding-bottom: 15px; /* Ruimte voor de scrollbar */
        
        /* Verberg de scrollbar zelf */
        scrollbar-width: none; /* Firefox */
    }
    .pp-artist-grid::-webkit-scrollbar,
    .pp-song-grid::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    /* Maak de navigatieknoppen zichtbaar */
    .carousel-nav {
        display: flex;
        gap: 8px;
    }
    .carousel-nav button {
        background: none;
        border: 1px solid var(--color-border);
        border-radius: 50%;
        width: 32px;
        height: 32px;
        cursor: pointer;
    }

    .playlist-header {
        padding: 15px;
        flex-direction: column;
        align-items: flex-start; 
    }

    .playlist-cover-collage {
        margin-bottom: 10px; 
        width: 100px;
        height: 100px;
    }

    .playlist-info {
        padding-left: 0; 
        width: 100%; 
    }

    .playlist-info h2 {
        font-size: 1.2rem;
    }

    .playlist-info p {
        font-size: 0.9rem;
    }

    .player-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        padding: 10px;
    }

    .player-now-playing {
        width: 20%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin: 0;
        flex: 1;    
    }
    
    .player-center {
        flex: 2; 
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }
    
    .player-right {
        width: 30%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin: 0;
        flex: 1;     
    }
    
    .song-info {
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
    }

    #current-song-artist {
       color: var(--color-accent-primary);
       font-weight: 700; 
       font-size: 11px;    
    }

    #current-song-art {
        width: 34px!important;
        height: 34px!important;
    }

    #current-song-artist,
    #current-song-title {
        display: inline-block;
        animation: scrollText 15s linear infinite;
        animation-play-state: running;
    }

    @keyframes scrollText {
        0% { transform: translateX(100%); }
        100% { transform: translateX(-100%); }
    }
}

/* ==========================================================================
   Comment Thread Styles
   ========================================================================== */
.reply:not(:last-child) {
    margin-left: 30px;
    margin-top: 10px;
    padding-left: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}

/* Optioneel: de laatste reply zonder border */
.reply:last-child {
    margin-left: 30px;
    margin-top: 10px;
    padding-left: 15px;
    padding-bottom: 15px;
    border-bottom: none;
}

.comment-thread-wrapper:not(:last-child) {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 8px;
}

/* Laatste comment-thread zonder border */
.comment-thread-wrapper:last-child {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.comment-avatar {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 50%;
}

.comment {
  padding-top: 8px;
}


.reply-btn {
  font-size: 0.85rem;
  color: var(--color-accent-primary) !important;
  background: transparent;
  border: none;
  cursor: pointer;
}

.reply-btn:hover {
  text-decoration: underline;
}

.toggle-replies {
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-text-secondary);
}

.dropdown-toggle::after {
  display: none !important;
}

.comment-form-wrapper textarea {
  resize: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border-radius: 6px;
  padding: 6px 8px;
}

.btn-like-post {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

.btn-like-post i {
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.btn-like-post.not-liked i {
  color: var(--color-text-secondary);
}

.btn-like-post.liked i {
  color: #e02424; /* rode tint behouden */
}