/* ====================================
   🎨 DARK MODE CSS VARIABLES
   Modern Dark/Light Theme System
==================================== */

:root {
  /* === LIGHT MODE (DEFAULT) === */
  
  /* Backgrounds */
  --bg-primary: #ffffff;
  --bg-secondary: #f9f9f9;
  --bg-tertiary: #f5f5f5;
  --bg-card: #ffffff;
  --bg-input: #f9f9f9;
  --bg-chat: #ffffff;
  --bg-hover: rgba(255, 255, 255, 0.04);
  
  /* Text Colors */
  --text-primary: #202020;
  --text-secondary: #737373;
  --text-muted: #939393;
  --text-light: #363636;
  --text-white: #ffffff;
  
  /* Borders */
  --border-light: #f2f2f2;
  --border-medium: #d4d4d4;
  --border-strong: #e0e0e0;
  --border-card: #ffffff;
  
  /* Gradients */
  --gradient-main: radial-gradient(ellipse at top, #f9f9f9, #f9f9f9, #f9f9f9);
  --gradient-hero: linear-gradient(135deg, #0f172a 40%, #192336 100%);
  --gradient-glass: rgba(255, 255, 255, 0.8);
  
  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.18);
  
  /* Special Elements */
  --avatar-border: #1c2740;
  --avatar-bg: #253350;
  --scrollbar-track: #020617;
  --scrollbar-thumb: #334155;
  --scrollbar-thumb-hover: #3b82f6;
}

/* === DARK MODE === */
[data-theme="dark"] {
  /* Backgrounds */
  --bg-primary: #1a1a1a;
  --bg-secondary: #0f0f0f;
  --bg-tertiary: #141414;
  --bg-card: #242424;
  --bg-input: #2a2a2a;
  --bg-chat: #1f1f1f;
  --bg-hover: rgba(255, 255, 255, 0.08);
  
  /* Text Colors */
  --text-primary: #e5e5e5;
  --text-secondary: #a0a0a0;
  --text-muted: #707070;
  --text-light: #c5c5c5;
  --text-white: #ffffff;
  
  /* Borders */
  --border-light: #2a2a2a;
  --border-medium: #3a3a3a;
  --border-strong: #404040;
  --border-card: #2a2a2a;
  
  /* Gradients */
  --gradient-main: radial-gradient(ellipse at top, #0f0f0f, #1a1a1a, #0f0f0f);
  --gradient-hero: linear-gradient(135deg, #0a0f1a 40%, #0f1520 100%);
  --gradient-glass: rgba(30, 30, 30, 0.8);
  
  /* Shadows */
  --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.6);
  
  /* Special Elements */
  --avatar-border: #3f3f3f;
  --avatar-bg: #2a2a2a;
  --scrollbar-track: #1a1a1a;
  --scrollbar-thumb: #3a3a3a;
  --scrollbar-thumb-hover: #4a4a4a;
}

/* ====================================
   🎯 SMOOTH TRANSITIONS
==================================== */
* {
  transition: background-color 0.3s ease, 
              border-color 0.3s ease, 
              color 0.3s ease,
              box-shadow 0.3s ease;
}

/* Animasyonları transition'dan muaf tut */
@keyframes slideInUp,
@keyframes float,
@keyframes vipGradient,
@keyframes vipShine,
@keyframes modalGlow {
  * {
    transition: none;
  }
}

/* ====================================
   📦 GLOBAL DARK MODE STYLES
==================================== */

body {
  background: var(--gradient-main) !important;
  color: var(--text-primary) !important;
}

.bg-main-gradient {
  background: var(--gradient-main) !important;
}

.glass-header {
  background-color: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

/* ====================================
   🎴 CARDS & CONTAINERS
==================================== */

.kt-card,
.chat-wrapper {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
}

/* ====================================
   💬 CHAT SPECIFIC
==================================== */

.chat-wrapper {
  background: var(--bg-chat) !important;
  border: 1px solid var(--border-card) !important;
}

.chat-rooms {
  background: var(--bg-primary) !important;
  border-bottom: 1px solid var(--border-light) !important;
}

.room-btn {
  background: var(--bg-primary) !important;
  color: var(--text-muted) !important;
}

.room-btn.active {
  background: #e96982 !important;
  color: #fff !important;
}

.chat-messages {
  background: var(--bg-chat) !important;
}

.chat-line:hover {
  background: var(--bg-hover) !important;
}

.chat-username {
  color: var(--text-primary) !important;
}

.chat-text {
  color: var(--text-secondary) !important;
}

.chat-input {
  background: var(--bg-primary) !important;
  border-top: 1px solid var(--border-light) !important;
}

.chat-input input {
  background: var(--bg-input) !important;
  color: var(--text-light) !important;
}

[data-theme="dark"] .chat-input input::placeholder {
  color: var(--text-muted);
}

/* ====================================
   👤 AVATARS
==================================== */

.avatar {
  border: 1px solid var(--avatar-border) !important;
  background: var(--avatar-bg) !important;
}

[data-theme="dark"] .avatar {
  border: 2px solid var(--avatar-border) !important;
  background: var(--avatar-bg) !important;
}

.avatar-text {
  background: var(--bg-card) !important;
  color: var(--text-white) !important;
}

.chat-avatar img {
  border: 1px solid var(--border-medium) !important;
}

/* ====================================
   🏠 HERO SECTION
==================================== */

.hero-section {
  background: var(--gradient-hero) !important;
}

.hero-text h1 {
  color: var(--text-white) !important;
}

.hero-text h2 {
  color: var(--text-secondary) !important;
}

.hero-text p {
  color: var(--text-muted) !important;
}

/* ====================================
   🔒 LOCK SCREEN
==================================== */

.room-lock-screen {
  color: var(--text-secondary) !important;
}

.room-lock-screen input {
  background-color: var(--bg-input) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-light) !important;
}

[data-theme="dark"] .room-lock-screen input::placeholder {
  color: var(--text-muted);
}

/* ====================================
   📜 SCROLLBAR
==================================== */

::-webkit-scrollbar {
  width: 8px;
}

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

::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* ====================================
   🎭 THEME TOGGLE BUTTON
==================================== */

.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: var(--bg-input);
  border-radius: 30px;
  border: 2px solid var(--border-medium);
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  padding: 0 4px;
  box-shadow: var(--shadow-sm);
}

.theme-toggle:hover {
  box-shadow: var(--shadow-md);
}

.theme-toggle-slider {
  position: absolute;
  width: 22px;
  height: 22px;
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 50%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  left: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .theme-toggle-slider {
  background: linear-gradient(135deg, #4a5568, #2d3748);
  left: calc(100% - 26px);
}

.theme-toggle-icon {
  font-size: 14px;
}

/* Light mode icon (sun) */
[data-theme="light"] .theme-toggle-icon::before {
  content: "☀️";
}

/* Dark mode icon (moon) */
[data-theme="dark"] .theme-toggle-icon::before {
  content: "🌙";
}

/* ====================================
   🎨 SPECIAL OVERRIDES
==================================== */

/* Lock icon and special images - keep visible in both modes */
.lock-icon,
.room-lock-screen img {
  filter: none !important;
}

/* Badge colors - keep original vibrant colors */
.badge.admin,
.badge.vip {
  /* Keep original colors - they work in both modes */
}

/* Command dropdown */
#commandDropdown {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-medium) !important;
  color: var(--text-primary) !important;
}

.command-dropdown-item {
  transition: background-color 0.2s ease;
}

.command-dropdown-item:hover {
  background: var(--bg-hover) !important;
}

/* ====================================
   📱 RESPONSIVE DARK MODE
==================================== */

@media (max-width: 768px) {
  .theme-toggle {
    width: 50px;
    height: 26px;
  }
  
  .theme-toggle-slider {
    width: 18px;
    height: 18px;
    font-size: 10px;
  }
  
  [data-theme="dark"] .theme-toggle-slider {
    left: calc(100% - 22px);
  }
}

/* ====================================
   🎭 MODAL DARK MODE SUPPORT
==================================== */

/* Login Modal */
.login-modal-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

.login-modal {
  background: var(--bg-card) !important;
}

.login-modal .modal-header h2 {
  color: var(--text-primary) !important;
}

.login-modal .modal-header p {
  color: var(--text-secondary) !important;
}

.login-form input {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .login-form input::placeholder {
  color: var(--text-muted);
}

.modal-footer {
  color: var(--text-secondary) !important;
}

/* Premium Modal */
.premium-modal {
  background: linear-gradient(135deg, var(--bg-card), var(--bg-secondary)) !important;
}

/* Elite Modal */
.elite-modal {
  background: var(--bg-card) !important;
}

.elite-left h2 {
  color: #ff4064 !important;
}

.elite-left p {
  color: var(--text-secondary) !important;
}

.elite-icon-card {
  background: var(--bg-input) !important;
  border: 2px solid var(--border-light) !important;
}

.elite-icon-card span {
  color: var(--text-muted) !important;
}

.elite-icon-card:has(input:checked) {
  background: var(--bg-primary) !important;
  border-color: var(--border-medium) !important;
}

.elite-field input,
.elite-field textarea {
  background: var(--bg-input) !important;
  border: 1px solid var(--border-light) !important;
  color: var(--text-primary) !important;
}

[data-theme="dark"] .elite-field input::placeholder,
[data-theme="dark"] .elite-field textarea::placeholder {
  color: var(--text-muted);
}

.elite-field label {
  background: var(--bg-card) !important;
  color: var(--text-muted) !important;
}

.btn-light {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
}

/* Rank Modal */
#rankModal > div {
  background: var(--bg-card) !important;
}

#rankModal h2 {
  color: var(--text-primary) !important;
}

#rankModal .group {
  background: var(--bg-input) !important;
}

#rankModal .font-semibold {
  color: var(--text-primary) !important;
}

/* ====================================
   🔧 UTILITY CLASSES
==================================== */

.dark-mode-text-primary {
  color: var(--text-primary) !important;
}

.dark-mode-text-secondary {
  color: var(--text-secondary) !important;
}

.dark-mode-bg-card {
  background: var(--bg-card) !important;
}

.dark-mode-border {
  border-color: var(--border-light) !important;
}

/* ====================================
   🔗 NAVIGATION LINKS
==================================== */

header nav a {
  color: var(--text-secondary) !important;
}

header nav a:hover {
  color: var(--text-primary) !important;
}

/* Close button */
.close-btn {
  background: var(--bg-input) !important;
  color: var(--text-secondary) !important;
}

.close-btn:hover {
  background: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

/* Premium close button */
.premium-close {
  color: var(--text-secondary) !important;
}

.premium-close:hover {
  color: var(--text-primary) !important;
}