/* Grundlayout */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;

    display: flex;
  justify-content: center; /* horizontal zentrieren */
  align-items: center;     /* vertikal zentrieren */
 background-image:
    url('bg.png'),
    linear-gradient(to bottom, #111 0%, #111 100%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: auto; /* Originalgröße */
  background-color: #111;
  color: #fff;
}

/* Container für alle Cards */
.container {
  display: flex;
  flex-direction: column;
  gap: 16px;        /* Abstand zwischen den Cards */
  align-items: center; /* horizontal zentrieren */
  padding: 16px;
}

/* Card / Box */
section.card {
  width: 90%;
  max-width: 600px;
  background-color: rgba(47, 47, 47, 0.95); /* Anthrazit leicht transparent */
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}

/* Formular und Buttons */
input, button {
  font-size: 1rem;
  padding: 8px;
  margin: 4px 0;
  border-radius: 6px;
  border: none;
}

button {
  cursor: pointer;
  background-color: #444;
  color: #fff;
}

button:hover {
  background-color: #666;
}

/* Wunschliste */
.list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px;
  border-bottom: 1px solid #ccc;
}

.center {
  text-align: center;      /* Text in der Box zentrieren */
  width: 90%;
  max-width: 400px;
}

.center input,
.center button {
  width: 100%;             /* Input & Button füllen die Box */
  padding: 10px;
  margin: 8px 0;
  border-radius: 6px;
  border: none;
}

.center button {
  background-color: #444;
  color: #fff;
  cursor: pointer;
}

.center button:hover {
  background-color: #666;
}

.muted {
  color: #ccc;
}

.logout-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 6px 12px;
  font-size: 0.9rem;
  border-radius: 6px;
  border: none;
  background-color: #444;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}

.logout-btn:hover {
  background-color: #666;
}


.wish {
  background-color: rgba(50, 50, 50, 0.8);
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.actions button {
  margin-left: 8px;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  background-color: #444;
  color: #fff;
}

.actions button:hover {
  background-color: #666;
}

.actions .danger {
  background-color: #a33;
}

.played {
  color: #6f6;
  font-weight: bold;
  margin-left: 8px;
}


/* Container mit Song-Infos links, Vote rechts */
.wish-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15); /* dünne graue Linie */
}

/* Optional: letzte Zeile ohne Linie */
.list .wish-item:last-child {
  border-bottom: none;
}

.wish-info {
  flex: 1 1 auto;
  min-width: 0;
}


.wish-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wish-sep {
  margin: 0 0.25rem;
  opacity: 0.7;
}


.wish-vote {
  flex-shrink: 0;
}

.played {
  color: #6f6;
  font-weight: bold;
  margin-left: 8px;
}

.vote-btn {
  border: none;
  border-radius: 5px;
  padding: 6px 10px;
  cursor: pointer;
  background-color: #444;
  color: #fff;
  transition: background-color 0.2s;
}

.vote-btn:hover {
  background-color: #666;
}

.muted {
  color: #aaa;
}




/* rechte Seite: Badge + Button in einer Zeile */
.wish-actions {
  display: inline-flex;       /* wichtig: eine Zeile */
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  flex: 0 0 auto;
}

/* grüner Badge */
.badge-played {
  background-color: #28a745;
  color: #fff;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Vote-Button */
.btn-vote {
  display: inline-flex;       /* auch hier: eine Zeile */
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: none;
  background: #007bff;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
}





.btn.small {
  padding: 5px 8px;
  font-size: 0.85rem;
}

.btn.danger {
  background-color: #c0392b;
}

.btn.danger:hover {
  background-color: #e74c3c;
}



.btn-vote .thumb {
  font-size: 1.1rem;
  line-height: 1;
}

.btn-vote {
  background-color: #444444;   /* anthrazit */
  border-color: #444444;
  color: #ffffff;
}

/* Optional: Hover-Effekt */
.btn-vote:hover {
  background-color: #666666;
  border-color: #666666;
}


/* DJ-Buttons */
.btn-played,
.btn-delete {
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
}


/* Hellroter Delete-Button */
.btn-delete {
  background-color: #ff6b6b;   /* hellrot */
  border-color: #ff6b6b;
  color: #ffffff;
}

.btn-delete:hover {
  background-color: #ff4c4c;   /* etwas dunkler beim Hover */
  border-color: #ff4c4c;
}


/* DJ-Button: gespielt = grün, ungespielt = grau */

.btn-played {
  background-color: #27ae60;  /* grün */
  color: #fff;
}

.btn-played:hover {
  background-color: #2ecc71;
}

.btn-unplayed {
  background-color: #555;      /* grau */
  color: #fff;
}

.btn-unplayed:hover {
  background-color: #777;
}

/* Badges für Played / Unplayed */

.played-badge {
  background-color: #27ae60;
  color: #fff;
  font-weight: bold;
  border-radius: 8px;
  padding: 2px 8px;
  margin-left: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}

.unplayed-badge {
  background-color: #555;
  color: #fff;
  border-radius: 8px;
  padding: 2px 8px;
  margin-left: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
}



.btn-played-toggle {
  background: transparent;
  border: none;
  color: #9e9e9e;
  cursor: pointer;
  font-size: 1.2rem;
}

.btn-played-toggle .fa-check-circle {
  color: #4caf50; /* grün für gespielt */
}

/* CSV-Export-Button: hellblau, gleiche Größe wie andere .btn.small */

.btn-export {
  background-color: #3498db;   /* hellblau */
  color: #fff;
}

.btn-export:hover {
  background-color: #5dade2;   /* etwas heller beim Hover */
}