/* Alles sauber im ldgroup-layout Namespace gekapselt */
/*
 * ============================================================================
 * LINE DANCE CLUB - COUNTRY MEETS MODERN (STYLESHEET)
 * ============================================================================
 * 
 * @package     ldgroup
 * @module      Spotify
 * @component   spotify
 * 
 * @description Alle Style Elemente für die Spotify views
 * 
 * @status      In Progress
 * @open        test/Schauen was noch aussteht
 * @ticket      #90
 * @version     1.0.0
 * @created     2026-07-04
 * @last_change 2026-07-04
 * 
 * @export-to-schorsch
 * ============================================================================
 */
/** Ende LDC Header */
.ldgroup-layout {
    font-family: 'Montserrat', sans-serif;
}

/* Spezifische Container-Anpassungen für das Spotify-Modul */
.ldgroup-layout .spotify-playlist-container {
    width: 100%;
    margin: 0 auto;
    color: #ffffff;
}

/* Playlist Inhalt Überschrift */
.ldgroup-layout .spotify-playlist-title {
    color: var(--ldgroup-orange) !important; 
    text-transform: uppercase; 
    font-size: 0.95em; 
    padding: 10px; 
    margin: 0; 
    text-align: center; 
    letter-spacing: 0.5px;
}

/* Fehler-Box Styling */
.ldgroup-layout .spotify-error-box {
    border-left: 5px solid #ff4d4d; 
    color: #ff4d4d; 
    background: #fff5f5;
    padding: 15px;
    border-radius: 4px;
}

/* Flexbox Zeilen-Struktur (Ehemals Inline) */
.ldgroup-layout .spotify-track-row {
    border-top: 1px solid var(--ldgroup-color-light) !important; 
    padding: 10px; 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    gap: 15px !important;
    transition: background-color 0.2s ease;
}

/* Hover-Effekt für die einzelnen Track-Zeilen */
.ldgroup-layout .spotify-track-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Cover-Bilder & Placeholder in der Liste */
.ldgroup-layout .spotify-cover {
    width: 40px; 
    height: 40px; 
    border-radius: 6px; 
    flex-shrink: 0; 
    object-fit: cover; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ldgroup-layout .spotify-cover-placeholder {
    width: 40px; 
    height: 40px; 
    background: #555; 
    border-radius: 6px; 
    flex-shrink: 0;
}

/* Mittlere Spalte: Text-Abschnittskontrolle */
.ldgroup-layout .spotify-track-info {
    flex: 1 !important; 
    min-width: 0 !important; 
    text-align: left !important;
}

.ldgroup-layout .spotify-track-title {
    font-weight: bold; 
    color: #ffb74d; 
    display: block; 
    font-size: 0.95em; 
    text-transform: uppercase; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.ldgroup-layout .spotify-track-artist {
    font-size: 0.85em; 
    color: #eee; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.ldgroup-layout .spotify-track-id {
    font-size: 0.75em; 
    color: #888; 
    display: block; 
    text-transform: uppercase; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

/* Rechte Spalte: Aktions-Box */
.ldgroup-layout .spotify-track-action {
    width: 95px; 
    text-align: right; 
    flex-shrink: 0; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
}

/* Reiner grüner Haken */
.ldgroup-layout .spotify-checkmark {
    color: #91bf42; 
    font-size: 1.4em; 
    font-weight: bold; 
    padding-right: 15px; 
    display: inline-block;
}

/* Anpassung für die scrollbare Liste innerhalb der Kachel */
.ldgroup-layout .showData_global-relations-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--ldgroup-orange) rgba(0, 0, 0, 0.3);
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Webkit-Anpassungen für die Scrollbar (Chrome, Safari, Edge) */
.ldgroup-layout .showData_global-relations-scroll::-webkit-scrollbar {
    width: 6px;
}

.ldgroup-layout .showData_global-relations-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.ldgroup-layout .showData_global-relations-scroll::-webkit-scrollbar-thumb {
    background: var(--ldgroup-orange);
    border-radius: 4px;
}

/* Spotify Player / Widget Box */
.ldgroup-layout .spotify-player-container {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ldgroup-layout .spotify-player-container iframe {
    border-radius: 8px;
    width: 100%;
    display: block;
}

/* Der rote Import-Button */
.ldgroup-layout .spotify-import-btn {
    margin: 0;
    padding: 5px 12px; 
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    white-space: nowrap !important;
    word-break: keep-all !important;
    background-color: #b71c1c !important; 
    color: #ffffff !important;
    border: 1px solid #d32f2f !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.ldgroup-layout .spotify-import-btn:hover {
    background-color: #d32f2f !important;
    border-color: #f44336 !important;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.6);
    transform: scale(1.02);
}

/* --- NEU: EINGEFÜHRTE STYLES AUS DER HEADER-NAVIGATION --- */

/* Der umschließende Container für die dreiteilige Kopf-Zeile */
.ldgroup-layout .spotify-header-row {
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 10px !important; 
    width: 100% !important; 
    margin-bottom: 20px !important; 
    box-sizing: border-box !important; 
    height: 36px !important;
}

/* Live-Cover Box links */
.ldgroup-layout .spotify-preview-box {
    width: 36px !important; 
    height: 36px !important; 
    min-height: 36px !important; 
    border-radius: 4px !important; 
    background: #333 !important; 
    border: 1px solid #555 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    overflow: hidden !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; 
    flex-shrink: 0 !important; 
    box-sizing: border-box !important;
}

.ldgroup-layout .spotify-preview-box span {
    color: #666; 
    font-size: 0.55em; 
    text-transform: uppercase; 
    font-weight: bold;
}

.ldgroup-layout .spotify-preview-box img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

/* Das Selektorfeld in der Mitte */
.ldgroup-layout .spotify-select-dropdown {
    flex: 1 !important; 
    min-width: 200px !important; 
    max-width: 320px !important; 
    padding: 6px 10px !important; 
    border-radius: 4px !important; 
    font-family: 'Montserrat', sans-serif !important; 
    font-size: 0.85em !important; 
    background: rgba(255, 255, 255, 0.95) !important; 
    color: #000 !important; 
    border: 1px solid #ccc !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; 
    height: 36px !important; 
    box-sizing: border-box !important; 
    vertical-align: middle !important;
}

/* Der optimierte Refresh-Button rechts */
.ldgroup-layout .spotify-refresh-btn {
    margin: 0 !important; /* Verhindert das Ausbrechen aus der vertikalen Achse */
    width: 36px !important; 
    height: 36px !important; 
    min-width: 36px !important; 
    padding: 0 !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background-color: #383838 !important; 
    color: var(--ldgroup-orange) !important; 
    border: 1px solid #222 !important; 
    border-radius: 4px !important; 
    box-sizing: border-box !important; 
    cursor: pointer !important; 
    font-size: 1.2em !important; 
    flex-shrink: 0 !important; 
    font-weight: bold !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Unterer Container für die Aktions-Schaltflächen */
.ldgroup-layout .spotify-actions-row {
    padding-top: 0 !important; 
    gap: 12px !important; 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: center !important; 
    align-items: center !important; 
    width: 100% !important;
}

.ldgroup-layout .spotify-actions-row button {
    white-space: nowrap !important; 
    font-size: 0.75em !important; 
    padding: 0 15px !important; 
    height: 34px !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex: 1 !important; 
    max-width: 140px !important; 
    box-sizing: border-box !important;
}/* Alles sauber im ldgroup-layout Namespace gekapselt */
.ldgroup-layout {
    font-family: 'Montserrat', sans-serif;
}

/* Spezifische Container-Anpassungen für das Spotify-Modul */
.ldgroup-layout .spotify-playlist-container {
    width: 100%;
    margin: 0 auto;
    color: #ffffff;
}

/* Playlist Inhalt Überschrift */
.ldgroup-layout .spotify-playlist-title {
    color: var(--ldgroup-orange) !important; 
    text-transform: uppercase; 
    font-size: 0.95em; 
    padding: 10px; 
    margin: 0; 
    text-align: center; 
    letter-spacing: 0.5px;
}

/* Fehler-Box Styling */
.ldgroup-layout .spotify-error-box {
    border-left: 5px solid #ff4d4d; 
    color: #ff4d4d; 
    background: #fff5f5;
    padding: 15px;
    border-radius: 4px;
}

/* Flexbox Zeilen-Struktur (Ehemals Inline) */
.ldgroup-layout .spotify-track-row {
    border-top: 1px solid var(--ldgroup-color-light) !important; 
    padding: 10px; 
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: space-between !important; 
    gap: 15px !important;
    transition: background-color 0.2s ease;
}

/* Hover-Effekt für die einzelnen Track-Zeilen */
.ldgroup-layout .spotify-track-row:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Cover-Bilder & Placeholder in der Liste */
.ldgroup-layout .spotify-cover {
    width: 40px; 
    height: 40px; 
    border-radius: 6px; 
    flex-shrink: 0; 
    object-fit: cover; 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.ldgroup-layout .spotify-cover-placeholder {
    width: 40px; 
    height: 40px; 
    background: #555; 
    border-radius: 6px; 
    flex-shrink: 0;
}

/* Mittlere Spalte: Text-Abschnittskontrolle */
.ldgroup-layout .spotify-track-info {
    flex: 1 !important; 
    min-width: 0 !important; 
    text-align: left !important;
}

.ldgroup-layout .spotify-track-title {
    font-weight: bold; 
    color: #ffb74d; 
    display: block; 
    font-size: 0.95em; 
    text-transform: uppercase; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.ldgroup-layout .spotify-track-artist {
    font-size: 0.85em; 
    color: #eee; 
    display: block; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

.ldgroup-layout .spotify-track-id {
    font-size: 0.75em; 
    color: #888; 
    display: block; 
    text-transform: uppercase; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
}

/* Rechte Spalte: Aktions-Box */
.ldgroup-layout .spotify-track-action {
    width: 95px; 
    text-align: right; 
    flex-shrink: 0; 
    display: flex; 
    justify-content: flex-end; 
    align-items: center;
}

/* Reiner grüner Haken */
.ldgroup-layout .spotify-checkmark {
    color: #91bf42; 
    font-size: 1.4em; 
    font-weight: bold; 
    padding-right: 15px; 
    display: inline-block;
}

/* Anpassung für die scrollbare Liste innerhalb der Kachel */
.ldgroup-layout .showData_global-relations-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--ldgroup-orange) rgba(0, 0, 0, 0.3);
    max-height: 450px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Webkit-Anpassungen für die Scrollbar (Chrome, Safari, Edge) */
.ldgroup-layout .showData_global-relations-scroll::-webkit-scrollbar {
    width: 6px;
}

.ldgroup-layout .showData_global-relations-scroll::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
}

.ldgroup-layout .showData_global-relations-scroll::-webkit-scrollbar-thumb {
    background: var(--ldgroup-orange);
    border-radius: 4px;
}

/* Spotify Player / Widget Box */
.ldgroup-layout .spotify-player-container {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.ldgroup-layout .spotify-player-container iframe {
    border-radius: 8px;
    width: 100%;
    display: block;
}

/* Der rote Import-Button */
.ldgroup-layout .spotify-import-btn {
    margin: 0;
    padding: 5px 12px; 
    font-size: 0.75em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    white-space: nowrap !important;
    word-break: keep-all !important;
    background-color: #b71c1c !important; 
    color: #ffffff !important;
    border: 1px solid #d32f2f !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.ldgroup-layout .spotify-import-btn:hover {
    background-color: #d32f2f !important;
    border-color: #f44336 !important;
    box-shadow: 0 0 8px rgba(211, 47, 47, 0.6);
    transform: scale(1.02);
}

/* --- NEU: EINGEFÜHRTE STYLES AUS DER HEADER-NAVIGATION --- */

/* Der umschließende Container für die dreiteilige Kopf-Zeile */
.ldgroup-layout .spotify-header-row {
    display: flex !important; 
    flex-direction: row !important; 
    align-items: center !important; 
    justify-content: center !important; 
    gap: 10px !important; 
    width: 100% !important; 
    margin-bottom: 20px !important; 
    box-sizing: border-box !important; 
    height: 36px !important;
    margin-bottom: 0 !important;
    margin-top: 15px  !important;
}

/* Live-Cover Box links */
.ldgroup-layout .spotify-preview-box {
    width: 36px !important; 
    height: 36px !important; 
    min-height: 36px !important; 
    border-radius: 4px !important; 
    background: #333 !important; 
    border: 1px solid #555 !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    overflow: hidden !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important; 
    flex-shrink: 0 !important; 
    box-sizing: border-box !important;
}

.ldgroup-layout .spotify-preview-box span {
    color: #666; 
    font-size: 0.55em; 
    text-transform: uppercase; 
    font-weight: bold;
}

.ldgroup-layout .spotify-preview-box img {
    width: 100%; 
    height: 100%; 
    object-fit: cover;
}

/* Das Selektorfeld in der Mitte */
.ldgroup-layout .spotify-select-dropdown {
    flex: 1 !important; 
    min-width: 200px !important; 
    max-width: 320px !important; 
    padding: 6px 10px !important; 
    border-radius: 4px !important; 
    font-family: 'Montserrat', sans-serif !important; 
    font-size: 0.85em !important; 
    background: rgba(255, 255, 255, 0.95) !important; 
    color: #000 !important; 
    border: 1px solid #ccc !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important; 
    height: 36px !important; 
    box-sizing: border-box !important; 
    vertical-align: middle !important;
}

/* Der optimierte Refresh-Button rechts */
.ldgroup-layout .spotify-refresh-btn {
    margin: 0 !important; /* Verhindert das Ausbrechen aus der vertikalen Achse */
    width: 36px !important; 
    height: 36px !important; 
    min-width: 36px !important; 
    padding: 0 !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    background-color: #383838 !important; 
    color: var(--ldgroup-orange) !important; 
    border: 1px solid #222 !important; 
    border-radius: 4px !important; 
    box-sizing: border-box !important; 
    cursor: pointer !important; 
    font-size: 1.2em !important; 
    flex-shrink: 0 !important; 
    font-weight: bold !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Unterer Container für die Aktions-Schaltflächen */
.ldgroup-layout .spotify-actions-row {
    padding-top: 0 !important; 
    gap: 12px !important; 
    display: flex !important; 
    flex-direction: row !important; 
    justify-content: center !important; 
    align-items: center !important; 
    width: 100% !important;
}

.ldgroup-layout .spotify-actions-row button {
    white-space: nowrap !important; 
    font-size: 0.75em !important; 
    padding: 0 15px !important; 
    height: 34px !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    flex: 1 !important; 
    max-width: 140px !important; 
    box-sizing: border-box !important;
}

/* --- HOVER-POPUP FÜR DAS PLAYLIST-COVER --- */
/* Sorgt dafür, dass das absolute Popup an dieser Box ausgerichtet wird */
.ldgroup-layout .spotify-preview-box {
    position: relative;
    overflow: visible !important; /* WICHTIG: Damit das Bild aus der Box heraustreten kann */
}

/* Grundzustand des Bildes im kleinen 36x36px Icon */
.ldgroup-layout .spotify-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.15s ease-in-out;
    position: relative;
    z-index: 1;
}

/* Das große Popup beim Hovern */
.ldgroup-layout .spotify-preview-box:hover img {
    position: absolute;
    top: -10px;        /* Schiebt es leicht nach oben */
    left: 45px;        /* Spingt rechts neben das Icon, überlagert das Dropdown nicht unschön */
    width: 350px !important;  /* Schöne, klar erkennbare Größe */
    height: 350px !important;
    z-index: 9999 !important; /* Garantiert über allen anderen Elementen und Tabellen */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7); /* Satter Schatten für den "Schwebeeffekt" */
    border: 2px solid #555;
    border-radius: 6px;
}