/* TODO: TAINT: AI-generated. This file was AI-generated (Gemini and/or Cursor), and I haven't manually reviewed it yet.
   I should do this at some point in the future and change things I don't like. */

/* Globale Resets und Basis-Styling (wie vorher) */
body,
html {
    margin: 0;
    padding: 0;
    font-family: "Roboto", sans-serif;
    background-color: #f4f4f9;
    color: #333;
    line-height: 1.6;
}

main > p {
    text-align: center;
    padding: 1em;
    font-size: 1.1em;
    color: #757575;
}

/* Suchleiste (Höhe ca. 60px) */
search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #3f51b5; /* Indigo - Material Primary */
    padding: 12px 16px;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    box-sizing: border-box; /* Stellt sicher, dass Padding die Höhe nicht sprengt */
    height: 60px; /* Feste Höhe für genaue Positionierung */
}

input[type="search"] {
    width: 100%;
    padding: 10px 12px;
    border-radius: 4px;
    border: none;
    font-size: 16px;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
}

input[type="search"]::placeholder {
    color: #888;
}

/* Tab Bar (Höhe ca. 48px) */
nav {
    display: flex;
    position: fixed;
    top: 60px; /* Direkt unter der Suchleiste */
    left: 0;
    right: 0;
    background-color: #3f51b5; /* Gleiche Farbe wie Suchleiste für einen einheitlichen Header-Block */
    z-index: 999; /* Unter der Suchleiste, falls sie überlappen könnten */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); /* Dezenter Schatten */
    height: 48px; /* Feste Höhe */
    box-sizing: border-box;
}

nav a {
    flex-grow: 1;
    display: flex; /* Für vertikales Zentrieren des Texts */
    align-items: center;
    justify-content: center;
    padding: 0 8px; /* Horizontal Padding */
    text-align: center;
    color: rgba(
        255,
        255,
        255,
        0.75
    ); /* Etwas helleres, aber gedämpftes Weiß für inaktive Tabs */
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9em; /* Leicht kleiner als Haupttext */
    text-transform: uppercase;
    border-bottom: 3px solid transparent; /* Platzhalter für den aktiven Indikator */
    transition:
        color 0.2s ease-in-out,
        border-bottom-color 0.2s ease-in-out;
    user-select: none;
    text-decoration: none;
}

nav a:hover {
    background-color: rgba(255, 255, 255, 0.1); /* Leichter Hover-Effekt */
}

nav a.active {
    color: #ffffff; /* Reines Weiß für aktiven Tab */
    border-bottom-color: #ff4081; /* Material Accent Pink für den Indikator */
}

/* song .Liste Container */
main {
    padding-top: calc(60px + 48px); /* Höhe Suchleiste + Höhe TabBar */
    padding-bottom: 20px; /* Platz für Paginierung, falls am Ende */
}

/* Link zum Zurücksetzen der Suche in der main > p */
main > p a.clear-search-link,
main > p .clear-search-link {
    /* Zweite Regel für den Fall, dass Mithril das 'a' nicht direkt rendert */
    color: #3f51b5; /* Material Indigo, passend zum Header */
    text-decoration: underline;
    cursor: pointer;
    font-weight: 500; /* Etwas hervorheben */
    background: none; /* Sicherstellen, dass keine Button-Styles übernommen werden */
    border: none;
    padding: 0;
    display: inline; /* Damit es sich wie ein normaler Link im Text verhält */
}

main > p a.clear-search-link:hover,
main > p a.clear-search-link:focus,
main > p .clear-search-link:hover,
main > p .clear-search-link:focus {
    color: #303f9f; /* Dunkleres Indigo für Hover/Focus */
    text-decoration: none; /* Optional: Unterstreichung bei Hover entfernen */
}

/* Restliche Styles für Artist-Group, song .Item etc. bleiben wie zuvor */
section.artist {
    margin: 12px 8px;
    background-color: #ffffff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

section.artist > h2 {
    margin: 0;
    padding: 12px 16px;
    background-color: #e8eaf6;
    color: #303f9f;
    font-size: 1.1em;
    font-weight: 500;
    border-bottom: 1px solid #c5cae9;
}

.song {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s ease-in-out;
}

.song:last-child {
    border-bottom: none;
}

.song:hover {
    background-color: #f9f9f9;
}

.song .info {
    flex-grow: 1;
    margin-right: 8px; /* Abstand zum Icon */
    overflow: hidden; /* Verhindert Textüberlauf */
}

.song .title {
    font-size: 1em;
    font-weight: 400;
    color: #212121;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Text abschneiden bei Überlauf */
}

.song .artist {
    font-size: 0.85em;
    color: #757575;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.song .actions {
    margin-left: auto;
    flex-shrink: 0;
}

.heart-icon {
    cursor: pointer;
    color: #bdbdbd;
    font-size: 24px;
    user-select: none;
    transition:
        color 0.2s ease-in-out,
        transform 0.1s ease-out;
    vertical-align: middle;
}

.heart-icon:hover {
    transform: scale(1.1);
}

.heart-icon.is-favorite {
    color: #ff4081;
    font-variation-settings: "FILL" 1;
}

.material-symbols-outlined {
    font-variation-settings:
        "FILL" 0,
        "wght" 400,
        "GRAD" 0,
        "opsz" 24;
}

/* NEU: Pagination Controls Styles */
.pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0; /* Mehr Padding für bessere Sichtbarkeit */
    margin-top: 10px;
    user-select: none;
    flex-wrap: wrap; /* Erlaubt Umbruch bei vielen Seitenzahlen auf kleinen Bildschirmen */
}

.pagination-controls button.pagination-button, /* Klasse für Buttons hinzugefügt */
.pagination-controls span.page-number {
    margin: 4px; /* Etwas mehr Margin für Umbruch */
    padding: 8px 12px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #3f51b5; /* Material Indigo */
    cursor: pointer;
    border-radius: 4px;
    transition:
        background-color 0.2s,
        color 0.2s,
        border-color 0.2s;
    font-size: 0.9em;
    min-width: 36px; /* Mindestbreite für bessere Klickbarkeit */
    text-align: center;
    box-sizing: border-box;
}

.pagination-controls button.pagination-button:hover:not(:disabled),
.pagination-controls span.page-number.clickable:hover {
    background-color: #e8eaf6; /* Heller Indigo-Ton für Hover */
    border-color: #c5cae9;
}

.pagination-controls button.pagination-button:disabled {
    color: #aaa;
    cursor: not-allowed;
    background-color: #f9f9f9;
    border-color: #eee;
}

.pagination-controls span.page-number.active {
    background-color: #3f51b5;
    color: #fff;
    border-color: #3f51b5;
    font-weight: bold;
    cursor: default;
}

.pagination-controls span.dots {
    padding: 8px 6px;
    color: #777;
    margin: 4px;
    font-size: 0.9em;
}