/* ==========================================================================
   Song Manager - Aggressive Stile zur Konfliktlösung
   ========================================================================== */

/* Der Hauptcontainer für den Block. Erstellt einen eigenen Styling-Kontext. */
.song-manager-block {
    all: initial; /* Setzt alle vererbten Stile aggressiv zurück */
    display: block; /* Stellt sicher, dass es ein Block-Element ist */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #fff; /* Hintergrund erzwingen */
    color: #222; /* Textfarbe erzwingen */
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    padding: 25px;
    margin: 2em 0;
    max-width: 800px; /* Begrenzt die Breite für bessere Lesbarkeit */
}

/* Stellt sicher, dass alle Unterelemente das Box-Modell korrekt verwenden */
.song-manager-block *, .song-manager-block *::before, .song-manager-block *::after {
    box-sizing: border-box;
    font-family: inherit;
}

/* Steuerelemente (Suche & Sortierung) */
.song-manager-block .song-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 25px;
}

.song-manager-block .song-search-container {
    flex: 2 1 300px; /* Lässt das Suchfeld mehr Platz einnehmen */
}

.song-manager-block .song-sort-container {
    flex: 1 1 200px;
}

/* Felder für Suche und Sortierung */
.song-manager-block .song-search-input,
.song-manager-block .song-sort-select {
    width: 100% !important;
    padding: 12px 16px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    color: #111 !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    border-radius: 6px !important;
    margin: 0 !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Fokus-Stil für bessere Zugänglichkeit */
.song-manager-block .song-search-input:focus,
.song-manager-block .song-sort-select:focus {
    border-color: #007cba !important;
    box-shadow: 0 0 0 1px #007cba !important;
    outline: none !important;
}

/* Container für die Ergebnisliste */
.song-manager-block .song-list-container {
    clear: both;
}

/* Die Liste selbst - wichtig, um Theme-Stile zu entfernen */
.song-manager-block ul.song-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden; /* Stellt sicher, dass die border-radius bei den Items greift */
}

/* Einzelnes Listenelement - hier wird die optische Trennung definiert */
.song-manager-block li.song-item {
    display: block; /* KORREKTUR: !important entfernt, damit jQuery .hide() funktioniert */
    list-style-type: none !important;
    padding: 16px 20px !important;
    margin: 0 !important;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    transition: background-color 0.2s;
}

/* Entfernt den unteren Rand des letzten Elements */
.song-manager-block li.song-item:last-child {
    border-bottom: none;
}

/* Zebra-Streifen für bessere Lesbarkeit */
.song-manager-block li.song-item:nth-of-type(even) {
    background-color: #f9f9f9;
}

/* Hover-Effekt */
.song-manager-block li.song-item:hover {
    background-color: #f0f8ff; /* Ein sanftes Blau beim Hovern */
}

/* Header innerhalb des Listenelements */
.song-manager-block .song-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}

/* Liedtitel */
.song-manager-block h3.song-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.4 !important;
}

/* Seitenzahl */
.song-manager-block span.song-page {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #005a9c !important;
    background-color: #eaf5ff !important;
    padding: 5px 12px !important;
    border-radius: 15px !important;
    font-family: monospace;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Nachrichten, wenn keine Lieder gefunden werden */
.song-manager-block .no-songs,
.song-manager-block .no-results-message {
    padding: 40px 20px !important;
    text-align: center !important;
    color: #777 !important;
    background-color: #fafafa !important;
    border: 1px solid #ddd;
    border-radius: 6px;
}

/* Responsive Anpassungen */
@media (max-width: 600px) {
    .song-manager-block {
        padding: 15px;
    }
    .song-manager-block .song-item-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}