body.admin-body,
body.login-body {
    background: radial-gradient(circle at 20% 20%, #0a0a0a 0%, #000000 80%);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Segoe UI", sans-serif;
    color: #fff;
}

.text-gradient {
    background: linear-gradient(90deg,#ff007a 0%,#ffae00 100%);
    -webkit-background-clip: text;
    color: transparent;
}

.bg-gradient-role {
    background: linear-gradient(90deg,#ffae00 0%,#fff 100%) !important;
}

.btn-gradient {
    background: linear-gradient(90deg,#ff007a 0%,#ffae00 100%);
    border: 0;
    color: #000;
    border-radius: .7rem;
    box-shadow: 0 10px 25px rgba(255,0,122,.3);
}
.btn-gradient:hover {
    filter: brightness(1.05);
    color:#000;
}

.login-box {
    background: rgba(20,20,20,0.9);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    min-width: 320px;
    max-width: 360px;
    width: 100%;
    backdrop-filter: blur(10px);
}

.table-dark.table-hover tbody tr.table-active {
    background-color: rgba(255,0,122,0.15) !important;
}

.request-table-wrapper {
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 1rem;
    box-shadow: 0 20px 50px rgba(0,0,0,.8);
    background: rgba(20,20,20,0.6);
    backdrop-filter: blur(10px);
    padding:1rem;
}

.profile-photo-wrapper {
    width:48px;
    height:48px;
}
.profile-photo {
    width:48px;
    height:48px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #ff007a;
    box-shadow:0 10px 20px rgba(255,0,122,.5);
}
.profile-photo.placeholder{
    width:48px;
    height:48px;
    border-radius:50%;
    background:linear-gradient(90deg,#ff007a 0%,#ffae00 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:#000;
}

.form-control,
.form-select,
textarea,
input[type="file"] {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: .6rem !important;
}
.form-control:focus,
.form-select:focus,
textarea:focus,
input[type="file"]:focus {
    border-color: #ff007a !important;
    box-shadow: 0 0 0 .25rem rgba(255,0,122,.25) !important;
}

.pagination .page-link {
  background-color: #000;
  color: #fff;
  border: 1px solid #444;
}
.pagination .page-item.active .page-link {
  background: linear-gradient(90deg,#ff007a 0%,#ffae00 100%);
  border: none;
  color: #000;
  font-weight: 700;
}
.pagination .page-link:hover {
  background-color: #222;
  color: #ffae00;
}
/* --- Formulierlabels wit maken voor donkere admin-thema's --- */
body.bg-dark label.form-label {
  color: #fff !important;
}

.btn-outline-info, .btn-outline-light {
  border-radius: 8px;
  transition: all 0.2s ease-in-out;
}

.btn-outline-info:hover {
  background: linear-gradient(45deg, #00bfff, #007bff);
  color: #fff;
  box-shadow: 0 0 10px rgba(0,191,255,0.5);
}

.btn-outline-light:hover {
  background: linear-gradient(45deg, #ffffff, #d0d0d0);
  color: #000;
}
/* 🌈 DJConnect Emoji Picker */
.emoji-picker {
  position: fixed;
  bottom: 80px;
  left: 15px;
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid #333;
  border-radius: 12px;
  padding: 0;
  width: 270px;
  max-height: 260px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0, 255, 255, 0.25);
  animation: slideUp 0.25s ease;
  z-index: 9999;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 🧭 Tabs */
.emoji-tabs {
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid #333;
  background: linear-gradient(90deg, #0d0d0d, #1a1a1a);
  padding: 4px;
}

.emoji-tab {
  background: none;
  border: none;
  font-size: 1.3rem;
  cursor: pointer;
  color: #888;
  transition: transform 0.15s ease, color 0.2s;
}

.emoji-tab:hover {
  color: #00d4ff;
  transform: scale(1.2);
}

.emoji-tab.active {
  color: #00ffcc;
  text-shadow: 0 0 5px #00ffcc;
}

/* 😀 Emoji’s */
.emoji-container {
  padding: 6px;
  text-align: center;
  max-height: 210px;
  overflow-y: auto;
}

.emoji-item {
  cursor: pointer;
  font-size: 1.4rem;
  margin: 4px;
  transition: transform 0.1s ease, filter 0.2s;
}

.emoji-item:hover {
  transform: scale(1.3);
  filter: drop-shadow(0 0 5px #00e6ff);
}

/* 😊 Knop */
.emoji-btn {
  border: none !important;
  font-size: 1.4rem !important;
  color: #fff;
  background: transparent !important;
  transition: transform 0.15s ease;
}

.emoji-btn:hover {
  transform: scale(1.2);
}
/* 🌤️ MODERN LIGHT THEME — DJConnect Blue Edition */
#chatWindow.light-mode {
  background: #f4f7fb;
  color: #222;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
  transition: all 0.3s ease-in-out;
}

/* 🟦 Header met frisse blauwe gradient */
#chatWindow.light-mode .chat-header {
  background: linear-gradient(90deg, #4da3ff, #6cc8ff);
  color: #fff !important;
  border-bottom: 2px solid #3399ff;
}

/* 👥 DJ-lijst */
#chatWindow.light-mode .chat-users {
  background: #e9f3ff;
  border-right: 2px solid #d0e5ff;
  color: #003366 !important;
}

#chatWindow.light-mode .dj.online {
  color: #007bff !important;
  font-weight: 600;
}
#chatWindow.light-mode .dj.offline {
  color: #8ca1b3 !important;
}

/* 💬 Chatvenster */
#chatWindow.light-mode .chat-messages {
  background: #ffffff;
  color: #000;
  border-radius: 0 0 10px 10px;
}

/* 📩 Berichtballonnen */
#chatWindow.light-mode .chat-message.sent {
  background: #d8ebff;
  color: #000;
  border-radius: 10px 10px 0 10px;
  margin: 4px 0;
}
#chatWindow.light-mode .chat-message.received {
  background: #f0f5fa;
  color: #000;
  border-radius: 10px 10px 10px 0;
  margin: 4px 0;
}

#chatWindow.light-mode .chat-message strong {
  color: #004080;
}
#chatWindow.light-mode .chat-message small {
  color: #555;
}

/* 🧑‍💻 Inputbalk */
#chatWindow.light-mode .chat-input {
  background: #eef6ff;
  border-top: 2px solid #cce5ff;
}

#chatWindow.light-mode input,
#chatWindow.light-mode button {
  background-color: #fff;
  color: #000;
  border-color: #ccc;
}
#chatWindow.light-mode #chatInput::placeholder {
  color: #666;
}

/* 🔘 Knoppen */
#chatWindow.light-mode .btn,
#chatWindow.light-mode .btn-gradient,
#chatWindow.light-mode .btn-dark,
#chatWindow.light-mode .btn-outline-dark {
  color: #003366 !important;
  background: #e6f2ff !important;
  border-color: #99ccff !important;
  transition: all 0.2s ease-in-out;
}

#chatWindow.light-mode .btn:hover {
  background: #d6eaff !important;
  border-color: #66b2ff !important;
}

/* 🌈 Emoji Picker */
#chatWindow.light-mode .emoji-picker {
  background: #ffffff;
  border: 1px solid #d0e5ff;
  color: #000;
  box-shadow: 0 0 25px rgba(0, 153, 255, 0.2);
}

#chatWindow.light-mode .emoji-tabs {
  background: linear-gradient(90deg, #f1f8ff, #e0f1ff);
  border-bottom: 1px solid #cce5ff;
}
#chatWindow.light-mode .emoji-tab {
  color: #0056b3;
}
#chatWindow.light-mode .emoji-tab.active {
  color: #007bff;
  text-shadow: 0 0 6px rgba(0, 136, 255, 0.4);
}
#chatWindow.light-mode .emoji-item:hover {
  filter: drop-shadow(0 0 5px #007bff);
}

/* ☀️ Theme toggle button */
#themeToggle {
  font-size: 1.2rem;
  padding: 3px 7px;
  border: 1px solid rgba(255,255,255,0.5);
  color: #fff;
  background: transparent;
  transition: all 0.3s ease-in-out;
  border-radius: 6px;
}
#themeToggle:hover {
  background: rgba(255,255,255,0.15);
  transform: rotate(20deg);
}
.dropdown-menu-dark {
  background-color: #111;
  border-radius: 10px;
}

.dropdown-item {
  color: #ddd !important;
  transition: 0.2s;
}

.dropdown-item:hover {
  background: linear-gradient(135deg, #00b4ff, #009dff);
  color: #fff !important;
  text-shadow: 0 0 5px #000;
}

.btn-outline-info.dropdown-toggle {
  border-color: #00b4ff;
  color: #00b4ff;
}
.btn-outline-info.dropdown-toggle:hover {
  background: linear-gradient(135deg, #00b4ff, #00eaff);
  color: #000;
  font-weight: 600;
}