/* --- BASIS & VARIABELEN --- */
:root {
    --bg-color: #180324f1;
    --bg2-color: #11021af9;
    --neon-pink: #ff2fbf;
    --neon-red: #ff2f2f;
    --neon-purple: #9b4dff;
    --text-light: #ffffff;
    --text-muted: #b3b3b3;
    --glass-bg: rgba(20, 10, 30, 0.7);
}

* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }

body {
    background-color: var(--bg2-color);
    color: var(--text-light);
    font-family: 'Poppins', sans-serif;
    line-height: 1.8;
    overflow-x: hidden;
    padding-bottom: 100px;
}

h1, h2, h3, .logo { font-family: 'Orbitron', sans-serif; text-transform: uppercase; }

/* --- NEON EFFECTEN --- */
.neon-text-pink { color: #fff; text-shadow: 0 0 5px var(--neon-pink), 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink); }
.neon-text-purple { color: #fff; text-shadow: 0 0 5px var(--neon-purple), 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple); }

/* --- GLASSMORPHISM --- */
.glass-panel {
    background: var(--glass-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.border-pink { border-color: var(--neon-pink); box-shadow: 0 0 15px rgba(255, 47, 191, 0.2); }
.border-purple { border-color: var(--neon-purple); box-shadow: 0 0 15px rgba(155, 77, 255, 0.2); }
.border-top-pink { border-top: 2px solid var(--neon-pink); box-shadow: 0 -5px 50px rgba(255, 0, 179, 0.5); }
.border-bottom-pink { border-bottom: 2px solid #ff2fbf; box-shadow: 0 4px 50px rgba(255, 0, 179, 0.5); }

/* --- HEADER & NAV --- */
.top-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 15px 5%; position: sticky; top: 0; z-index: 1000;
}
.top-nav ul { display: flex; list-style: none; gap: 25px; }
.top-nav a { font-weight: 600; transition: 0.3s; font-size: 0.9rem; }
.top-nav a:hover, .top-nav a.active { color: var(--neon-pink); text-shadow: 0 0 8px var(--neon-pink); }

/* --- BUTTONS --- */
.btn {
    padding: 12px 30px; border-radius: 5px; font-family: 'Orbitron';
    font-weight: 700; cursor: pointer; transition: 0.3s; border: none; text-align: center;
}
.btn-purple { background: var(--neon-purple); color: #fff; }
.btn-purple:hover { box-shadow: 0 0 20px var(--neon-purple); transform: translateY(-2px); }

.btn-pink-glow {
    background: transparent; border: 2px solid var(--neon-pink); color: #fff;
    box-shadow: 0 0 10px var(--neon-pink) inset, 0 0 10px var(--neon-pink);
}
.btn-pink-glow:hover { background: var(--neon-pink); box-shadow: 0 0 20px var(--neon-pink); }

.btn-red-glow {
    background: transparent; border: 2px solid var(--neon-red); color: #fff;
    box-shadow: 0 0 10px var(--neon-red) inset, 0 0 10px var(--neon-red);
}
.btn-red-glow:hover { background: var(--neon-red); box-shadow: 0 0 20px var(--neon-red); }


/* --- HERO SECTION AANPASSING --- */
.hero {
    height: 80vh; 
    display: flex; 
    align-items: center; 
    justify-content: center;
    text-align: center; 
    background: transparent !important; /* Verwijder de eigen gradiënt van de hero */
}

/* --- OVERIGE SECTIES --- */
.request-section, .schedule-section {
    background: transparent !important;
}
.hero h1 { font-size: 4.5rem; line-height: 1; margin-bottom: 20px; }
.hero p { max-width: 600px; margin: 0 auto 30px; color: var(--text-muted); font-size: 1.1rem; }
.hero-btns { display: flex; gap: 20px; justify-content: center; }

/* --- REQUEST FORM --- */
.request-section { padding: 80px 5%; max-width: 1000px; margin: 0 auto; }
.p-40 { padding: 40px; border-radius: 20px; }
.request-form { display: flex; flex-direction: column; gap: 20px; margin-top: 30px; }
.input-row { display: flex; gap: 20px; flex-wrap: wrap; }
.input-row input, .input-row select, textarea {
    flex: 1; min-width: 250px; padding: 15px; background: rgba(0,0,0,0.2);
    border: 1px solid #444; color: #fff; border-radius: 8px; font-family: 'Poppins';
}
.mood-picker { display: flex; gap: 15px; align-items: center; }
.full-width { width: 100%; }
.response-msg { margin-top: 15px; text-align: center; font-weight: bold; }
.response-msg.success { color: var(--neon-pink); }

/* --- SCHEDULE --- */
.schedule-section { padding: 60px 5%; text-align: center; }
.schedule-grid { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 40px; }
.schedule-card { padding: 30px; border-radius: 15px; width: 320px; text-align: left; }
.schedule-card h3 { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 15px; }
.dj-name { font-size: 1.6rem; font-weight: 700; margin-bottom: 5px; }
.show-name { color: var(--neon-pink); font-size: 0.9rem; }

/* --- PLAYER --- */
.live-player {
    position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px 5%;
    display: flex; justify-content: space-between; align-items: center; z-index: 2000;
}
.player-info { display: flex; align-items: center; gap: 20px; }
.live-indicator {
    width: 12px; height: 12px; background: var(--neon-pink);
    border-radius: 50%; box-shadow: 0 0 10px var(--neon-pink);
    animation: pulse 1.5s infinite;
}
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } }
.track-details { display: flex; flex-direction: column; }
.status-text { font-size: 0.7rem; font-family: 'Orbitron'; }
.track-info { font-size: 0.9rem; font-weight: 600; }

.player-controls { display: flex; align-items: center; gap: 20px; }
.play-btn { 
    background: var(--neon-pink); color: #fff; border: none; padding: 10px 25px;
    font-family: 'Orbitron'; border-radius: 5px; cursor: pointer;
}
.play-btn.playing { background: var(--neon-purple); }
.volume-slider { accent-color: var(--neon-pink); width: 100px; cursor: pointer; }

/* --- LOGIN PAGE --- */
.flex-center { display: flex; justify-content: center; align-items: center; height: 100vh; }
.login-card { padding: 50px; border-radius: 20px; width: 400px; text-align: center; }
.login-card input { width: 100%; padding: 15px; margin-bottom: 20px; background: #111; border: 1px solid var(--neon-purple); color: #fff; }

/* --- DASHBOARD --- */
/* Chat & Input Styling */
.chat-area #chat-input {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid var(--neon-purple) !important;
    color: white;
    border-radius: 5px;
    padding: 15px;
    transition: 0.3s;
}

.chat-area #chat-input:focus {
    border-color: var(--neon-pink) !important;
    box-shadow: 0 0 10px var(--neon-pink);
    outline: none;
}

#chat-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2); /* Paarse ondertoon */
}

/* De berichten in de chat */
.chat-msg {
    border-left: 2px solid var(--neon-pink);
    margin-bottom: 10px;
    padding-left: 10px;
    background: rgba(255, 47, 191, 0.03);
}


.dashboard-container { display: grid; grid-template-columns: 260px 1fr; height: 100vh; padding: 20px; gap: 20px; }
.sidebar { padding: 30px; border-radius: 20px; display: flex; flex-direction: column; }
.dj-profile { text-align: center; margin-bottom: 40px; }
.avatar-glow { width: 80px; height: 80px; background: var(--neon-pink); border-radius: 50%; margin: 0 auto 15px; box-shadow: 0 0 20px var(--neon-pink); }
.dash-nav a { display: block; padding: 15px 0; border-bottom: 1px solid rgb(255, 250, 250); }
.dash-nav a.logout { color: #ff4d4d; margin-top: auto; }

.dash-grid-crazy { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 30px; }
.dash-card { padding: 25px; border-radius: 15px; }
.request-item { background: rgba(255,255,255,0.05); padding: 15px; border-radius: 10px; margin-bottom: 10px; border-left: 4px solid var(--neon-pink); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.5rem; }
    .top-nav ul { display: none; }
    .dashboard-container { grid-template-columns: 1fr; }
    .live-player { flex-direction: column; text-align: center; gap: 15px; }
}

/* Library Table */
.clan-table { width: 100%; border-collapse: collapse; margin-top: 20px; text-align: left; }
.clan-table th { color: var(--neon-pink); font-family: 'Orbitron'; padding: 10px; border-bottom: 1px solid var(--neon-purple); }
.clan-table td { padding: 15px 10px; border-bottom: 1px solid rgba(255,255,255,0.05); }

.lib-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.search-input { background: rgba(0,0,0,0.5); border: 1px solid var(--neon-purple); color: white; padding: 10px; border-radius: 5px; }

/* Settings Form */
label { display: block; margin-top: 15px; font-size: 0.8rem; color: var(--text-muted); }
input[type="text"], input[type="date"], input[type="color"] {
    width: 100%; padding: 12px; background: #111; border: 1px solid #333; color: white; margin-top: 5px;
}


/* Studio Layout Grid */
.studio-layout {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 20px;
}

.live-clock {
    font-family: 'Orbitron';
    font-size: 1.5rem;
    color: var(--neon-purple);
    text-shadow: 0 0 10px var(--neon-purple);
}

/* Action Buttons */
.action-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
}
.action-btn {
    padding: 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid #444;
    color: white;
    cursor: pointer;
    font-size: 0.8rem;
    border-radius: 5px;
    transition: 0.3s;
}
.action-btn:hover { border-color: var(--neon-pink); background: rgba(255,47,191,0.1); }
.btn-danger:hover { background: #ff4d4d; border-color: #ff4d4d; }

/* FX Board Compact */
.fx-grid-compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Mixer Vertical Faders */
.mixer-container {
    display: flex;
    justify-content: space-around;
    height: 150px;
    padding: 10px 0;
}
.fader { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fader label { font-size: 0.7rem; font-family: 'Orbitron'; }
.fader input[type="range"] {
    appearance: slider-vertical-lr;
    width: 20px;
    height: 100px;
    accent-color: var(--neon-pink);
}

/* Notes Area */
.notes-area {
    width: 100%;
    height: 120px;
    background: #000;
    color: rgb(255, 255, 255); /* Retro matrix look */
    border: 1px solid #333;
    padding: 10px;
    font-family: monospace;
    margin-bottom: 10px;
    resize: none;
}

.badge {
    background: var(--neon-pink);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: bold;
}

.track-details {
    overflow: hidden;
    white-space: nowrap;
    width: 400px; /* Pas aan naar wens */
}

#current-track {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 15s linear infinite;
}

@keyframes marquee {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Pauzeer scrollen als de tekst kort genoeg is */
#current-track:hover {
    animation-play-state: paused;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px; /* Ruimte tussen plaatje en tekst */
}

.site-logo {
    height: 50px; /* Pas dit aan naar de gewenste grootte */
    width: auto;
    filter: drop-shadow(0 0 5px rgba(255, 47, 191, 0.5)); /* Geeft je logo een subtiele glow */
    transition: transform 0.3s ease;
}

.site-logo:hover {
    transform: scale(1.05);
}

/* Zorg dat de navigatiebalk alles netjes uitlijnt */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 40px;
}


.test-box { 
    width: auto; 
    padding: 40px; 
    text-align: center; 
    background: rgba(20, 20, 20, 0.8); 
    border: 2px solid #ff2fbf; 
    border-radius: 15px; 
    box-shadow: 0 0 20px rgba(255, 47, 191, 0.2); 
}

.sidebar-aside { 
    width: auto; 
    padding: 40px; 
    text-align: center; 
    background: rgba(20, 20, 20, 0.8); 
    border: 2px solid #ff2fbf; 
    border-radius: 15px; 
    box-shadow: 0 0 20px rgba(255, 47, 191, 0.2); 
}




/* Custom Neon Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--neon-purple);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--neon-pink);
    box-shadow: 0 0 10px var(--neon-pink);
}


    /* De basis stijl voor alle links in de nav */
    .nav-link {
        display: inline-block;
        text-decoration: none;
        color: #ffffff; /* Standaard wit */
        font-weight: normal;
        text-transform: uppercase;
        font-size: 14px;
        transition: color 0.2s ease-in-out;
        padding: 8px 0;
    }

    /* Stijl als je met de muis over een link gaat */
    .nav-link:hover {
        color: #fd00c6;
    }

    /* Stijl voor de actieve pagina */
    .nav-link.active {
        color: #fd00c6; /* Fel roze */
        font-weight: bold;
    }




    /* --- BACKGROUND SLIDESHOW --- */
.bg-slideshow {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1; /* Keeps the images behind your website content */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Dark overlay to keep neon text readable */
.bg-slideshow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #190325f1; /* Dark tint matching your --bg-color */
    z-index: 1;
}

/* Individual Slides */
.bg-slideshow li {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    /* 18s total duration (6 seconds per image for 3 images) */
    animation: imageAnimation 32s linear infinite 0s; 
}

/* Assigning your images and animation delays */
.bg-slideshow li:nth-child(1) {
    background-image: url('backgrounds/image1.png'); /* Replace with your image paths */
}

.bg-slideshow li:nth-child(2) {
    background-image: url('backgrounds/image2.png');
    animation-delay: 8s; /* Starts after 1st image */
}

.bg-slideshow li:nth-child(3) {
    background-image: url/('backgrounds/image3.png');
    animation-delay: 16s; /* Starts after 2nd image */
}

.bg-slideshow li:nth-child(4) {
    background-image: url/('backgrounds/image4.png');
    animation-delay: 24s; /* Starts after 3nd image */
}

/* Keyframes for smooth fading */
@keyframes imageAnimation {
    5% { opacity: 0; animation-timing-function: ease-in; }
    10% { opacity: 1; animation-timing-function: ease-out; } /* Fades in */
    33% { opacity: 1; } /* Stays visible */
    45% { opacity: 0; } /* Fades out smoothly */
    100% { opacity: 0; } /* Stays hidden until its turn comes around again */
}