/* assets/css/style.css */

body {
    background-color: #121212 !important;
    color: #f8f9fa;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Player Container & Video Wrapper */
#player-container {
    background-color: #1e1e1e !important;
    border: 1px solid #333;
}

#video-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.5);
    background: #000;
}

/* Unsichtbare Touch- und Swipe-Ebene direkt über den Playern */
#touch-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: auto;
    background: transparent;
}

/* Slide-In Animation für den Videoübergang */
.slide-in-right {
    animation: slideInRight 1s forwards;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Aktiver Track in der Playlist */
.list-group-item.active-track {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
    color: #fff !important;
}

.list-group-item {
    background-color: #2b2b2b;
    color: #e0e0e0;
    border-color: #3d3d3d;
    cursor: pointer;
}

.list-group-item:hover {
    background-color: #383838;
    color: #fff;
}

/* Vollbild Modus Anpassungen */
#video-wrapper:fullscreen {
    max-width: 100% !important;
    width: 100vw !important;
    height: 100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
}

#video-wrapper:-webkit-full-screen {
    max-width: 100% !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* VU Meter Canvas im Vollbild */
#vu-meter-canvas {
    pointer-events: none;
    z-index: 10;
}

/* Fake-Vollbild Modus für iOS und gespiegelte Displays */
#video-wrapper.fake-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 999999 !important;
    background: #000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Container für die Buttons über dem Video */
.video-overlay-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 15px;
    z-index: 100;
    transform: translateY(-50%);
    pointer-events: none;
}

.video-overlay-controls button {
    pointer-events: auto;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.7);
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 1.2rem;
    touch-action: manipulation;
    cursor: pointer;
}