/* =======================
   DARK THEME BASE STYLES
   ======================= */
body.dark-mode {
  background: #121212;
  color: #e0e0e0;
  font-size: 16px;
}

/* ============================
   DARK MODE GENERAL ELEMENTS
   ============================ */
body.dark-mode .header,
body.dark-mode .tab-bar,
body.dark-mode .drawer-item,
body.dark-mode .popup-content,
body.dark-mode .theme-popup,
body.dark-mode .notification-panel {
  background: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .material-symbols-outlined {
  color: #e0e0e0;
}

body.dark-mode .wallpaper-item {
  background: #2c2c2c;
  box-shadow: 0 2px 4px rgba(255, 255, 255, 0.05);
}

body.dark-mode .tab-bar a {
  color: #e0e0e0;
}

body.dark-mode .tab-bar a.active {
  color: #4caf50;
  border-bottom-color: #4caf50;
}

body.dark-mode .tab-bar a:hover:not(.active) {
  background: #1a1a1a;
}

body.dark-mode .drawer-menu {
  background: #151515;
}

body.dark-mode .drawer-item:hover {
  background: #1a1a1a;
}

body.dark-mode .popup-content button,
body.dark-mode .theme-popup button {
  background: #2a2a2a;
  color: #e0e0e0;
}

body.dark-mode .wallpaper-btn {
  background: #4caf50;
  color: white;
}

body.dark-mode .wallpaper-btn:hover {
  background: #43a047;
}

body.dark-mode .download-btn {
  background: #2196f3;
  color: white;
}

body.dark-mode .download-btn:hover {
  background: #1976d2;
}

body.dark-mode .premium-lock {
  background: rgba(255, 255, 255, 0.3);
}

body.dark-mode .notification-panel {
  color: #e0e0e0;
}

body.dark-mode .scroll-area li {
  color: #e0e0e0;
}

body.dark-mode .empty-message {
  color: #aaa;
}

body.dark-mode .bottom-nav {
  background: #1e1e1e;
  border-top: 1px solid #444;
}

body.dark-mode .bottom-item {
  color: #e0e0e0;
}

body.dark-mode .search-bar {
  background: #1e1e1e;
  border-bottom: 1px solid #444;
}

body.dark-mode .search-bar input {
  background: #2c2c2c;
  color: #e0e0e0;
  border: 1px solid #444;
}

body.dark-mode .search-bar .search-icon {
  color: #e0e0e0;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}

/* ================================
   📱 Mobile-specific Dark Overrides
   ================================ */
@media (max-width: 767px) {
  body.dark-mode {
    font-size: 14px;
    background: #101010;
  }

  body.dark-mode .wallpaper-btn {
    background: #2e7d32;
  }

  body.dark-mode .search-bar input {
    width: 94%;
  }

  body.dark-mode .wallpaper-item {
    background: #1b1b1b;
  }
}

/* ================================
   💻 Desktop-specific Dark Overrides
   ================================ */
@media (min-width: 768px) {
  body.dark-mode {
    font-size: 16px;
  }
}