/* Dark Mode Overrides - Apply CSS Variables */

/* Chat Sidebar */
.chat-sidebar {
  background: var(--bg-secondary);
  border-right: 1px solid var(--border-color);
}

.sidebar-header {
  border-bottom: 1px solid var(--border-color);
}

.sidebar-search #searchInput {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.sidebar-search #searchInput:focus {
  background: var(--bg-secondary);
  border-color: var(--accent-color);
}

.search-results-container {
  background: var(--bg-secondary);
  border-color: var(--border-color);
}

.search-result-item:hover {
  background: var(--bg-hover);
}

/* Conversations */
.conversation-item {
  background: var(--bg-secondary);
}

.conversation-item:hover {
  background: var(--bg-hover);
}

.conversation-item.active {
  background: var(--bg-tertiary);
}

.conversation-item.has-unread {
  background: var(--bg-tertiary);
}

.conversation-info h5 {
  color: var(--text-primary);
}

.conversation-info p {
  color: var(--text-secondary);
}

/* Chat Main */
.chat-main {
  background: var(--bg-primary);
}

.chat-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
}

.chat-header-info h3 {
  color: var(--text-primary);
}

.chat-header-info .status-text {
  color: var(--text-secondary);
}

/* Messages */
.messages-container {
  background: var(--bg-primary);
}

.message-wrapper.own .message-bubble {
  background: var(--message-own-bg);
  color: var(--message-own-text);
}

.message-wrapper:not(.own) .message-bubble {
  background: var(--message-other-bg);
  color: var(--message-other-text);
}

.message-time {
  color: var(--text-secondary);
}

/* Chat Input */
.chat-input-area {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-color);
}

.chat-input-area form {
  background: var(--bg-hover);
}

#messageInput {
  background: transparent;
  color: var(--text-primary);
}

#messageInput::placeholder {
  color: var(--text-secondary);
}

/* Role Badge */
.role-badge {
  background: var(--bg-tertiary);
  color: var(--accent-color);
}

/* Empty State */
.empty-state {
  color: var(--text-secondary);
}

/* Buttons */
.btn-logout,
.btn-notification,
.btn-upload,
.btn-back {
  color: var(--text-primary);
}

.btn-logout:hover,
.btn-notification:hover {
  background: var(--bg-hover);
}

/* Login Page - Keep gradient for both themes */
.login-box {
  position: relative;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
}

.login-box input {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-primary);
}

.login-box input:focus {
  border-color: var(--accent-color);
}

.subtitle {
  color: var(--text-secondary);
}

.form-group label {
  color: var(--text-tertiary);
}

/* Toggle Button */
.toggle-btn {
  background: var(--bg-hover);
  color: var(--text-secondary);
}

.toggle-btn.active {
  background: var(--bg-secondary);
  color: var(--accent-color);
}

/* Dark Mode Toggle on Login Page */
.btn-dark-mode-login {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--bg-hover);
  color: var(--text-primary);
  font-size: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}

.btn-dark-mode-login:hover {
  background: var(--bg-tertiary);
  transform: scale(1.1);
}

/* Emoji Picker */
.emoji-picker {
  background: var(--bg-secondary);
  border-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.emoji-picker-header {
  border-bottom: 1px solid var(--border-color);
  background: var(--bg-hover);
}

.emoji-category {
  background: transparent;
  color: var(--text-secondary);
}

.emoji-category:hover {
  background: var(--bg-tertiary);
}

.emoji-category.active {
  background: var(--bg-tertiary);
  border-bottom-color: var(--accent-color);
}

.emoji-picker-body {
  background: var(--bg-secondary);
}

.emoji-item {
  background: transparent;
}

.emoji-item:hover {
  background: var(--bg-hover);
  transform: scale(1.3);
}

/* Message Reactions */
.message-reactions {
  background: var(--bg-hover);
  border-color: var(--border-color);
}

.reaction-item {
  background: var(--bg-tertiary);
  border-color: var(--border-light);
}

.reaction-item:hover {
  background: var(--bg-hover);
  border-color: var(--accent-color);
}

.reaction-item.own {
  background: var(--accent-color);
  border-color: var(--accent-color);
}

.reaction-add-btn {
  background: var(--bg-hover);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

.reaction-add-btn:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent-color);
  color: var(--text-primary);
}

/* Image Modal Dark Mode */
.image-modal {
  background-color: rgba(0, 0, 0, 0.98);
}

.image-modal-close {
  color: #ffffff;
}

.image-modal-close:hover {
  color: #cccccc;
}

.image-modal-caption {
  color: #e0e0e0;
}