/* ================================ */
/* DJ Dashboard CSS - Modern Dark Theme met Actieknoppen */
/* ================================ */

/* Body & Algemeen */
body {
    font-family: 'Roboto', Arial, sans-serif;
    background-color: #121212; /* Echte donkere achtergrond */
    color: #eee;
    padding: 20px;
    margin: 0;
}

/* Header */
h2 {
    text-align: center;
    color: #79c2d0; /* Accentkleur */
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 2em;
}

/* Logout knop */
a[href="logout.php"] {
    display: inline-block;
    padding: 10px 20px;
    margin-left: 20px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

a[href="logout.php"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.4);
    background: linear-gradient(135deg, #c0392b, #e74c3c);
}

/* Knop donkere modus */
button#toggleMode {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 15px;
    background: linear-gradient(135deg, #2a08c3, #320283);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

button#toggleMode:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* ================================ */
/* DJ Requests Table Styling */
/* ================================ */
table.dj-requests {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    background-color: #1e1e1e;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    font-family: 'Roboto', sans-serif;
    font-size: 1em;
}

/* Table Header */
table.dj-requests th {
    background-color: #2a2a2a;
    color: #79c2d0;
    padding: 12px;
    font-weight: 600;
    text-align: left;
    border-bottom: 2px solid #444;
}

/* Table Cells */
table.dj-requests td {
    background-color: #1e1e1e;
    padding: 12px;
    border-bottom: 1px solid #333;
    vertical-align: top;
    word-wrap: break-word;
    max-width: 250px;
    color: #eee;
}

/* Afwisselende rijen */
table.dj-requests tr:nth-child(even) td {
    background-color: #2a2a2a;
}

/* Statuskleuren */
table.dj-requests tr.new td {
    background-color: #08bc56; /* geel */
    color: #000;
}

table.dj-requests tr.handled td {
    background-color: #3a5d3a; /* groen */
    color: #fff;
}

/* Hover effect */
table.dj-requests tr:hover td {
    background-color: #444;
    transition: all 0.2s ease;
}

/* ================================ */
/* Actie-knoppen in tabel */
/* ================================ */
table.dj-requests td a {
    display: inline-block;
    padding: 6px 12px;
    margin-right: 5px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    transition: all 0.3s ease;
    color: #fff;
}

/* Afgehandeld knop (geel) */
table.dj-requests td a[href*="handle_id"] {
    background: linear-gradient(135deg, #f1c40f, #d4ac0d);
    color: #000;
}

table.dj-requests td a[href*="handle_id"]:hover {
    background: linear-gradient(135deg, #d4ac0d, #f1c40f);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* Verwijderen knop (rood) */
table.dj-requests td a[href*="delete_id"] {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
}

table.dj-requests td a[href*="delete_id"]:hover {
    background: linear-gradient(135deg, #c0392b, #e74c3c);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

/* ================================ */
/* Donkere modus toggle support */
/* ================================ */
body.dark-mode {
    background-color: #121212;
    color: #eee;
}

body.dark-mode table.dj-requests th {
    background-color: #2a2a2a;
    color: #79c2d0;
}

body.dark-mode table.dj-requests td {
    background-color: #1e1e1e;
    color: #eee;
}

body.dark-mode table.dj-requests tr:nth-child(even) td {
    background-color: #2a2a2a;
}