body {
  font-family: sans-serif;
  background: #333;
  color: #fff;
  margin: 0;
  padding: 1rem;
}

h1 {
  text-align: center;
  margin-bottom: 1rem;
}

.filter {
  text-align: center;
  margin-bottom: 1rem;
}

form label {
  display: block;
  margin: 0.5rem 0 0.25rem;
}

/* Allgemeine Regeln für Inputs, Selects, Buttons, Textareas */
input:not([type="checkbox"]),
select,
button,
textarea {
  width: 100%; /* Füllt die Breite des Elternelements (Label) */
  padding: 0.4rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  box-sizing: border-box; /* Wichtig für korrekte Breitenberechnung */
}

button {
  background: #555;
  color: white;
  margin-top: 0.5rem;
  cursor: pointer;
}

button:hover {
  background: #777;
}

#newCardForm {
  background: #222;
  padding: 1rem;
  border-radius: 8px;
  max-width: 400px;
  margin: 2rem auto;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.column {
  background: white; /* Geändert von #444 zu white für bessere Lesbarkeit */
  padding: 1rem;
  border-radius: 8px;
  width: 260px;
  min-height: 550px;
  position: relative;
  color: #000; /* Textfarbe für die Spalten */
}

.column h2 {
  text-align: center;
  margin-top: 0;
  font-size: 1.2rem;
  color: #000; /* Überschriftfarbe */
}

.column .slot-controls {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 0.5rem;
}

.column .slot-controls button {
  width: auto;
  padding: 0.3rem 0.6rem;
  font-size: 0.9rem;
  background: #666;
  border: none;
  border-radius: 4px;
  color: white; /* Textfarbe für Buttons */
  cursor: pointer;
}

.column .slot-controls button:hover {
  background: #888;
}

.column[data-status="playing"] {
  border: 2px solid lime;
}

.column[data-status="next"] {
  border: 2px solid orange;
}

.card {
  background: #fafafa;
  color: #000;
  padding: 0.6rem;
  border-radius: 6px;
  margin-bottom: 0.6rem;
  cursor: grab;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  position: relative; /* Wichtig für die Positionierung der Notiz und des Alerts */
}

/* Stil für den Notiz-Trigger (z.B. ein Info-Icon oder Text) */
.card-note-trigger {
    font-size: 0.8rem;
    color: #555;
    cursor: help;
    position: relative;
    display: inline-block;
    margin-top: 0.3rem;
}

/* Stil für den tatsächlichen Notiz-Inhalt (Tooltip) */
.card-note-content {
    visibility: hidden; /* Standardmäßig versteckt */
    opacity: 0; /* Standardmäßig transparent */
    width: 200px;
    background-color: #555;
    color: #fff;
    text-align: left; /* Für bessere Lesbarkeit der Notiz */
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Positionierung oberhalb des Triggers */
    left: 100%; /* Positioniert den linken Rand des Tooltips am rechten Rand des Triggers */
    margin-left: 5px; /* Kleiner Abstand zum Trigger */
    transition: opacity 0.3s, visibility 0.3s; /* Sanfter Übergang */
    font-size: 0.9rem;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    white-space: normal;
}

/* Pfeil für den Notiz-Tooltip */
.card-note-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -10px; /* Positioniert den Pfeil links vom Tooltip, um auf den Trigger zu zeigen */
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Zeige den Notiz-Tooltip beim Hover über den Trigger */
.card-note-trigger:hover .card-note-content {
    visibility: visible;
    opacity: 1;
}

/* NEUE STILE FÜR HINWEIS-SYMBOL UND TOOLTIP */
.card-alert-trigger {
    font-size: 1rem; /* Etwas größer als Notiz */
    font-weight: bold;
    color: red; /* Auffällige Farbe */
    cursor: help;
    position: relative;
    display: inline-block;
    margin-top: 0.3rem;
    margin-left: 10px; /* Abstand zur Notiz oder anderen Elementen */
    animation: pulse 1.5s infinite; /* Pulsierender Effekt */
}

/* Stil für gelesene Hinweise */
.card-alert-trigger.alert-read {
    color: green; /* Grün, wenn gelesen */
    animation: none; /* Kein Pulsieren mehr */
    opacity: 0.7; /* Etwas blasser */
}

/* Pulsierender Effekt für das Hinweis-Symbol */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

/* Stil für den tatsächlichen Hinweis-Inhalt (Tooltip) */
.card-alert-content {
    visibility: hidden; /* Standardmäßig versteckt */
    opacity: 0; /* Standardmäßig transparent */
    width: 250px; /* Etwas breiter als Notiz */
    background-color: #d9534f; /* Roter Hintergrund für Hinweis */
    color: white;
    text-align: left;
    border-radius: 6px;
    padding: 10px; /* Etwas mehr Padding */
    position: absolute;
    z-index: 2; /* Höherer Z-Index als Notiz, falls überlappend */
    bottom: 125%; /* Positionierung oberhalb des Triggers */
    left: 100%;
    margin-left: 5px;
    transition: opacity 0.3s, visibility 0.3s;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4); /* Stärkerer Schatten */
    white-space: normal;
}

/* Pfeil für den Hinweis-Tooltip */
.card-alert-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -10px;
    border-width: 5px;
    border-style: solid;
    border-color: #d9534f transparent transparent transparent; /* Roter Pfeil */
}

/* Zeige den Hinweis-Tooltip beim Hover über den Trigger */
.card-alert-trigger:hover .card-alert-content {
    visibility: visible;
    opacity: 1;
}

/* Stile für den neuen Bestätigungsdialog */
#alertConfirmDialog {
    border: none;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    z-index: 1000; /* Noch höher als andere Modals */
    background: white;
    color: black;
    max-width: 450px;
    width: 90%;
}
#alertConfirmDialog h2 {
    text-align: center;
    color: #333;
    margin-top: 0;
}
#alertConfirmDialog p {
    text-align: center;
    margin-bottom: 1em;
}
#alertConfirmDialog button {
    padding: 0.7em 1.5em;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

/* NEUE STILE FÜR noTableWarningDialog */
#noTableWarningDialog {
    border: none;
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    z-index: 1001; /* Noch höher als alertConfirmDialog */
    background: white;
    color: black;
    max-width: 450px;
    width: 90%;
}
#noTableWarningDialog h2 {
    text-align: center;
    color: #333;
    margin-top: 0;
}
#noTableWarningDialog p {
    text-align: center;
    margin-bottom: 1em;
}
#noTableWarningDialog button {
    padding: 0.7em 1.5em;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}


/* Stile für die Checkbox-Container (Tische) */
.tisch-checkbox-container {
    gap: 5px; /* Abstand zwischen den Checkbox-Items */
    max-height: 150px; /* Begrenzte Höhe, um Scrollen zu vermeiden */
    overflow-y: auto; /* Scrollbalken, wenn Inhalt die Höhe überschreitet */
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 5px;
    background: #fff; /* Hintergrund für den Container */
    color: #000; /* Textfarbe für die Labels */
    max-width: 100%; /* Stellt sicher, dass der Container die Breite des Elternelements nicht überschreitet */
    box-sizing: border-box; /* Stellt sicher, dass Padding in der Breite enthalten ist */
}

.tisch-checkbox-item {
    display: inline-block; /* Geändert zu inline-block für besseres Umbrechen */
    align-items: center; /* Behält die vertikale Ausrichtung bei */
    margin-right: 10px; /* Abstand zwischen den Checkboxen */
    margin-bottom: 5px; /* Abstand zwischen den Zeilen */
}

.tisch-checkbox-item input[type="checkbox"] {
    width: auto; /* Checkboxen sollen nicht 100% Breite einnehmen */
    margin-right: 5px;
}
.tisch-checkbox-item label {
    display: inline-block; /* Label soll neben Checkbox bleiben */
    margin: 0; /* Keine zusätzlichen Margins */
    width: auto; /* Label soll nicht 100% Breite einnehmen */
}

.card-header {
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.card-body {
  font-size: 0.9rem;
}

.card-body div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.card-body div span {
  flex: 1;
}

.card-body div .btn-group {
  display: flex;
  gap: 4px;
}

.card-body div .btn-group button {
  padding: 2px 6px;
  font-size: 0.85rem;
  background: #eee;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.card-body div .btn-group button:hover {
  background: #ccc;
}

.card-actions {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}

.edit-btn {
  font-size: 0.75rem;
  background: #ddd;
  border: none;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn:hover {
  background: #bbb;
}

.column button {
  width: 100%;
  margin-top: 0.5rem;
  background: #880000;
  color: white;
}

.column button:hover {
  background: #aa0000;
}

#editModal {
  display: none;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: black;
  padding: 1.5rem;
  border: 2px solid #222;
  border-radius: 8px;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  z-index: 999;
  max-width: 400px; /* Diese Eigenschaft begrenzt die maximale Breite */
  width: 90%; /* Diese Eigenschaft stellt sicher, dass es auf kleineren Bildschirmen responsive ist */
  overflow-y: auto;
  max-height: 80vh;
}

/* WICHTIGE NEUE REGEL: Setzt max-width und box-sizing für alle Labels im Edit-Modal */
#editModal form label {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  margin-bottom: 0.5rem;
}

/* Spezifische Regel für Inputs, Selects und Textareas innerhalb des Edit-Modals */
#editModal form input:not([type="checkbox"]),
#editModal form select,
#editModal form textarea {
  width: 100%;
  box-sizing: border-box;
}

/* Spezifische Regel für den tisch-checkbox-container innerhalb des Edit-Modals */
#editModal form .tisch-checkbox-container {
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
}

#editModal button[type="submit"] {
  background: #2b8a3e;
  color: white;
}

#editModal button[type="submit"]:hover {
  background: #237032;
}

#editModal button[type="button"] {
  background: #555;
  color: white;
  margin-top: 0.5rem;
}

#editModal button[type="button"]:hover {
  background: #777;
}

/* Stile für das aufklappbare Menü */
.view-navigation {
    position: relative; /* Für die Positionierung des Dropdowns */
    text-align: center;
    margin-bottom: 1rem;
}

.menu-toggle {
    display: block; /* Immer anzeigen */
    background-color: #555;
    color: white;
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    width: auto; /* Passt sich dem Inhalt an */
    margin: 0 auto 10px auto; /* Zentriert den Button */
}

.nav-links {
    flex-direction: column; /* Buttons untereinander */
    align-items: center; /* Zentriert die Buttons */
    max-height: 0; /* Standardmäßig versteckt */
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out; /* Sanfter Übergang */
    overflow: hidden; /* Versteckt überlaufenden Inhalt während des Übergangs */
    display: flex; /* Immer flex, um Animation zu ermöglichen */
}

.nav-links.open {
    max-height: 200px; /* Genug Platz für alle Buttons */
    opacity: 1;
}

.nav-links button {
    width: 80%; /* Buttons nehmen mehr Breite ein, auch auf großen Bildschirmen */
    margin-bottom: 5px; /* Abstand zwischen den Buttons */
}