/* ================ DARK MODE STYLES ================ */
body.dark-mode {
  --primary: #3a86ff;
  --secondary: #adb5bd;
  --light-gray: #212529;
  --border-gray: #495057;
  --text-dark: #f8f9fa;
  --text-light: #adb5bd;
  --white: #212529;
  --black: #f8f9fa;
  --shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
  --shadow-lg: 0 2px 8px rgba(255, 255, 255, 0.1);
  background-color: #121212;
  color: #f8f9fa;
}

body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .dropdown-menu {
  background-color: #2d2d2d;
  border-color: #444;
}

body.dark-mode .card-header,
body.dark-mode .card-footer,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
  background-color: #252525;
  border-color: #444;
}

body.dark-mode .text-muted {
  color: #adb5bd !important;
}

body.dark-mode .btn-light {
  background-color: #444;
  color: #f8f9fa;
}

body.dark-mode .btn-outline-light {
  color: #f8f9fa;
  border-color: #666;
}

body.dark-mode .alert-light {
  background-color: #444;
  color: #f8f9fa;
}

body.dark-mode .post-text.collapsed::after {
  background: linear-gradient(to bottom, transparent, #2d2d2d);
}

/* Dark mode toggle switch */
.theme-switch-wrapper {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
}

.theme-switch {
  display: inline-block;
  height: 34px;
  position: relative;
  width: 60px;
}

.theme-switch input {
  display: none;
}

.slider {
  background-color: #ccc;
  bottom: 0;
  cursor: pointer;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  background-color: #fff;
  bottom: 4px;
  content: "";
  height: 26px;
  left: 4px;
  position: absolute;
  transition: .4s;
  width: 26px;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

.slider i {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
}

.slider .fa-sun {
  left: 6px;
  opacity: 0;
  transition: opacity 0.2s;
}

.slider .fa-moon {
  right: 6px;
  opacity: 1;
  transition: opacity 0.2s;
}

input:checked + .slider .fa-sun {
  opacity: 1;
}

input:checked + .slider .fa-moon {
  opacity: 0;
}