/* =============================================================== */
/* --- WorkerMeet Professional Dark Mode Theme --- */
/* =============================================================== */

/*
 * Dark Mode Color System:
 * - Main background: #0f0f0f
 * - Card background: #1c1c1c
 * - Secondary background: #262626
 * - Primary accent: #ff3b3b (WorkerMeet red)
 * - Main text: #ffffff
 * - Secondary text: #bdbdbd
 * - Tertiary text: #9e9e9e
 * - Border color: #333333
 * - Hover highlight: rgba(255, 59, 59, 0.1)
 */

/* =============================================================== */
/* --- CSS Variables for Dark Mode --- */
/* =============================================================== */

:root {
  /* Light Mode (Default) Variables */
  --wm-bg-primary: #f0f2f5;
  --wm-bg-secondary: #ffffff;
  --wm-bg-tertiary: #f8f9fa;
  --wm-bg-card: #ffffff;
  --wm-bg-input: #ffffff;
  
  --wm-text-primary: #111827;
  --wm-text-secondary: #4b5563;
  --wm-text-tertiary: #6b7280;
  --wm-text-muted: #9ca3af;
  
  --wm-border-color: #e5e7eb;
  --wm-border-light: #f3f4f6;
  
  --wm-accent-primary: #d32f2f;
  --wm-accent-light: #f44336;
  --wm-accent-dark: #b71c1c;
  
  --wm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --wm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --wm-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  
  --wm-hover-bg: rgba(211, 47, 47, 0.05);
  --wm-category-icon-bg: rgba(211, 47, 47, 0.1);
}

/* Dark Mode Variables - Applied when body has .dark-mode class */
body.dark-mode {
  --wm-bg-primary: #0f0f0f;
  --wm-bg-secondary: #1c1c1c;
  --wm-bg-tertiary: #262626;
  --wm-bg-card: #1c1c1c;
  --wm-bg-input: #262626;
  
  --wm-text-primary: #ffffff;
  --wm-text-secondary: #e0e0e0;
  --wm-text-tertiary: #bdbdbd;
  --wm-text-muted: #9e9e9e;
  
  --wm-border-color: #333333;
  --wm-border-light: #2a2a2a;
  
  --wm-accent-primary: #ff3b3b;
  --wm-accent-light: #ff5252;
  --wm-accent-dark: #d32f2f;
  
  --wm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --wm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --wm-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
  
  --wm-hover-bg: rgba(255, 59, 59, 0.1);
  --wm-category-icon-bg: #2a2a2a;
}

/* =============================================================== */
/* --- Global Dark Mode Base Styles --- */
/* =============================================================== */

body.dark-mode {
  background-color: var(--wm-bg-primary);
  color: var(--wm-text-primary);
}

/* =============================================================== */
/* --- Typography Colors --- */
/* =============================================================== */

body.dark-mode .section-title {
  color: var(--wm-text-primary);
}

body.dark-mode .info-text {
  color: var(--wm-text-tertiary);
}

/* =============================================================== */
/* --- Card Styles (Worker Cards, Posts) --- */
/* =============================================================== */

body.dark-mode .card,
body.dark-mode .listing-card,
body.dark-mode .post-form-card,
body.dark-mode .profile-info-card,
body.dark-mode .help-section-card,
body.dark-mode .about-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .listing-card {
  border: 1px solid var(--wm-border-color);
}

body.dark-mode .listing-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* Worker Card Specific Elements */
body.dark-mode .listing-initials {
  background-color: #2a2a2a;
  color: var(--wm-accent-primary);
  border-color: var(--wm-accent-primary);
}

body.dark-mode .listing-user-info .user-name {
  color: var(--wm-text-primary);
}

body.dark-mode .listing-user-info .job-title-preview {
  color: var(--wm-text-tertiary);
}

body.dark-mode .listing-description {
  color: var(--wm-text-secondary);
}

body.dark-mode .listing-meta .posted-ago {
  color: var(--wm-text-muted);
}

body.dark-mode .listing-distance {
  color: #4ade80 !important; /* Bright green for visibility */
}

body.dark-mode .listing-type-tag {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .listing-category-tag {
  border-color: var(--wm-accent-primary);
  color: var(--wm-accent-primary);
  background-color: transparent;
}

body.dark-mode .listing-price {
  color: var(--wm-accent-primary);
}

body.dark-mode .listing-rating span:not(.stars) {
  color: var(--wm-text-primary);
}

body.dark-mode .listing-rating span:not(.stars) ~ span {
  color: var(--wm-text-tertiary);
}

/* =============================================================== */
/* --- Category Cards --- */
/* =============================================================== */

body.dark-mode .categories-grid {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .category-item {
  color: var(--wm-text-tertiary);
}

body.dark-mode .category-item i {
  background-color: var(--wm-category-icon-bg);
  color: var(--wm-accent-primary);
}

body.dark-mode .category-item:hover i {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
  transform: scale(1.1);
}

body.dark-mode .category-item span {
  color: var(--wm-text-secondary);
}

/* =============================================================== */
/* --- Chat / Messages List --- */
/* =============================================================== */

body.dark-mode #chat-list-container {
  background-color: transparent;
}

body.dark-mode .chat-item {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: var(--wm-shadow-sm);
  transition: all 0.2s ease;
}

body.dark-mode .chat-item:hover {
  background-color: var(--wm-bg-tertiary);
  transform: translateX(4px);
  box-shadow: var(--wm-shadow-md);
}

body.dark-mode .chat-item:active {
  background-color: var(--wm-hover-bg);
}

body.dark-mode .chat-avatar {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .chat-name {
  color: var(--wm-text-primary) !important;
  font-weight: 600;
}

body.dark-mode .chat-preview {
  color: var(--wm-text-tertiary);
}

body.dark-mode .chat-time {
  color: var(--wm-text-muted);
}

body.dark-mode .chat-item-unread .chat-name,
body.dark-mode .chat-item-unread .chat-preview {
  color: var(--wm-text-primary);
  font-weight: 600;
}

/* Chat Window Dark Mode */
body.dark-mode .chat-window {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .message.received .message-bubble {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
}

body.dark-mode .message.sent .message-bubble {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .message-input-container {
  background-color: var(--wm-bg-card);
  border-top-color: var(--wm-border-color);
}

body.dark-mode .message-input-container input {
  background-color: var(--wm-bg-tertiary);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .chat-input-bar {
  background-color: var(--wm-bg-card);
  border-top-color: var(--wm-border-color);
}

body.dark-mode #chatInput {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
  border-color: var(--wm-border-color);
}

body.dark-mode #chatInput::placeholder {
  color: var(--wm-text-muted);
}

/* =============================================================== */
/* --- Profile Page --- */
/* =============================================================== */

body.dark-mode .profile-header-bg {
  background: linear-gradient(135deg, var(--wm-accent-dark) 0%, var(--wm-accent-primary) 100%);
}

body.dark-mode .profile-info-card-home {
  background-color: transparent;
}

body.dark-mode .profile-pic-container-home {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-bg-card);
}

body.dark-mode .profile-initials {
  color: var(--wm-accent-primary);
}

body.dark-mode .profile-info-card-home h2 {
  color: var(--wm-text-primary);
}

body.dark-mode .profile-info-card-home .role {
  color: var(--wm-text-tertiary);
}

body.dark-mode .profile-details-home .info-item {
  color: var(--wm-text-tertiary);
}

body.dark-mode .profile-details-home .info-item i {
  color: var(--wm-accent-primary);
}

body.dark-mode .profile-stats-container {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
}

body.dark-mode .stat-value {
  color: var(--wm-accent-primary);
}

body.dark-mode .stat-label {
  color: var(--wm-text-tertiary);
}

/* Profile Tabs */
body.dark-mode .profile-tabs {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
}

body.dark-mode .tab-button {
  color: var(--wm-text-tertiary);
}

body.dark-mode .tab-button.active {
  color: var(--wm-accent-primary);
  border-bottom-color: var(--wm-accent-primary);
}

body.dark-mode .tab-content {
  background-color: transparent;
}

/* Edit Profile Button */
body.dark-mode .edit-profile-btn {
  background-color: var(--wm-bg-card);
  color: var(--wm-accent-primary);
  border-color: var(--wm-accent-primary);
}

body.dark-mode .edit-profile-btn:hover {
  background-color: var(--wm-hover-bg);
}

/* =============================================================== */
/* --- Settings Page --- */
/* =============================================================== */

body.dark-mode .settings-container {
  color: var(--wm-text-primary);
}

body.dark-mode .settings-section-header {
  color: var(--wm-accent-primary);
}

body.dark-mode .settings-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .settings-item {
  border-bottom-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .settings-item:hover {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .settings-item:active {
  background-color: var(--wm-hover-bg);
}

body.dark-mode .settings-item-title {
  color: var(--wm-text-primary);
}

body.dark-mode .settings-item-subtitle {
  color: var(--wm-text-tertiary);
}

body.dark-mode .settings-arrow {
  color: var(--wm-text-muted);
}

body.dark-mode .settings-item:hover .settings-arrow {
  color: var(--wm-accent-primary);
}

body.dark-mode .icon-red,
body.dark-mode .icon-blue,
body.dark-mode .icon-orange,
body.dark-mode .icon-green,
body.dark-mode .icon-purple,
body.dark-mode .icon-teal,
body.dark-mode .icon-pink,
body.dark-mode .icon-gray {
  color: var(--wm-accent-primary) !important;
}

/* Toggle Switch in Dark Mode */
body.dark-mode .toggle-label {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .toggle-slider {
  background-color: var(--wm-text-muted);
}

body.dark-mode .toggle-switch:checked + .toggle-label {
  background-color: var(--wm-accent-primary);
}

body.dark-mode .toggle-switch:checked + .toggle-label .toggle-slider {
  background-color: #ffffff;
}

/* =============================================================== */
/* --- Buttons --- */
/* =============================================================== */

body.dark-mode .btn-primary {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .btn-primary:hover {
  background-color: var(--wm-accent-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.4);
}

body.dark-mode .btn-secondary {
  background-color: transparent;
  color: var(--wm-accent-primary);
  border-color: var(--wm-accent-primary);
}

body.dark-mode .btn-secondary:hover {
  background-color: var(--wm-hover-bg);
}

/* Listing Action Buttons (Contact/Message/Location) */
body.dark-mode .listing-action-btn {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
  transition: all 0.2s ease;
}

body.dark-mode .listing-action-btn:hover {
  background-color: var(--wm-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.4);
}

body.dark-mode .listing-action-btn:active {
  transform: translateY(0);
}

body.dark-mode .listing-action-btn.delete {
  background-color: var(--wm-text-muted);
}

body.dark-mode .listing-action-btn.delete:hover {
  background-color: #757575;
}

/* Profile Action Buttons */
body.dark-mode .profile-action-btn {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .profile-action-btn:hover {
  background-color: var(--wm-accent-light);
}

/* Location Button */
body.dark-mode .btn-location {
  background: linear-gradient(135deg, var(--wm-accent-primary) 0%, var(--wm-accent-light) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.3);
}

body.dark-mode .btn-location:hover {
  background: linear-gradient(135deg, var(--wm-accent-dark) 0%, var(--wm-accent-primary) 100%);
  box-shadow: 0 6px 16px rgba(255, 59, 59, 0.4);
}

/* Send Button */
body.dark-mode .send-btn {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .send-btn:hover {
  background-color: var(--wm-accent-light);
}

/* =============================================================== */
/* --- Navigation --- */
/* =============================================================== */

body.dark-mode .bottom-nav {
  background-color: var(--wm-bg-card);
  border-top: 1px solid var(--wm-border-color);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .nav-item {
  color: var(--wm-text-tertiary);
}

body.dark-mode .nav-item.active {
  color: var(--wm-accent-primary);
  background-color: rgba(255, 59, 59, 0.1);
}

body.dark-mode .nav-item.active i {
  background-color: rgba(255, 59, 59, 0.15);
  color: var(--wm-accent-primary);
}

/* Floating Post Button */
body.dark-mode .bottom-nav .nav-item-post {
  background: linear-gradient(135deg, var(--wm-accent-primary) 0%, var(--wm-accent-dark) 100%);
  border-color: var(--wm-bg-card);
  box-shadow: 0 6px 20px rgba(255, 59, 59, 0.4);
}

body.dark-mode .bottom-nav .nav-item-post:hover {
  box-shadow: 0 8px 25px rgba(255, 59, 59, 0.5);
}

/* =============================================================== */
/* --- Search Bar --- */
/* =============================================================== */

body.dark-mode .search-bar {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
  box-shadow: var(--wm-shadow-sm);
}

body.dark-mode .search-bar i {
  color: var(--wm-text-muted);
}

body.dark-mode .search-bar input {
  color: var(--wm-text-primary);
}

body.dark-mode .search-bar input::placeholder {
  color: var(--wm-text-muted);
}

/* Search Results */
body.dark-mode .search-results-container {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
  box-shadow: var(--wm-shadow-lg);
}

body.dark-mode .search-result-header {
  color: var(--wm-text-muted);
}

body.dark-mode .search-result-item {
  color: var(--wm-text-primary);
  border-bottom-color: var(--wm-border-color);
}

body.dark-mode .search-result-item:hover {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .search-result-avatar {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .search-result-name {
  color: var(--wm-text-primary);
}

body.dark-mode .search-result-subtext {
  color: var(--wm-text-tertiary);
}

body.dark-mode .search-result-price {
  color: var(--wm-accent-primary);
}

/* =============================================================== */
/* --- Forms & Inputs --- */
/* =============================================================== */

body.dark-mode .form-group label {
  color: var(--wm-text-primary);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .form-group select {
  background-color: var(--wm-bg-input);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
  color: var(--wm-text-muted);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus,
body.dark-mode .form-group select:focus {
  border-color: var(--wm-accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.1);
}

body.dark-mode .input-with-icon i {
  color: var(--wm-text-muted);
}

/* Character Counter Dark Mode */
body.dark-mode .char-counter {
  color: var(--wm-text-muted);
}

body.dark-mode .char-counter.warning {
  color: #ffb74d;
}

body.dark-mode .char-counter.error {
  color: var(--wm-accent-primary);
}

body.dark-mode .form-group input.invalid,
body.dark-mode .form-group textarea.invalid {
  border-color: var(--wm-accent-primary);
  background-color: rgba(255, 59, 59, 0.1);
}

/* =============================================================== */
/* --- Filter Container (Explore Page) --- */
/* =============================================================== */

body.dark-mode .filter-container {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .filter-group label {
  color: var(--wm-text-primary);
}

body.dark-mode .filter-dropdown {
  background-color: var(--wm-bg-input);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .select-arrow {
  color: var(--wm-text-muted);
}

/* =============================================================== */
/* --- Side Menu / Drawer --- */
/* =============================================================== */

body.dark-mode .side-menu {
  background-color: var(--wm-bg-card);
  border-left: 1px solid var(--wm-border-color);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .menu-list a {
  color: var(--wm-text-primary);
  border-bottom-color: var(--wm-border-color);
}

body.dark-mode .menu-list a:hover {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-accent-primary);
}

body.dark-mode .menu-list a i {
  color: var(--wm-accent-primary);
}

body.dark-mode .menu-divider {
  border-bottom-color: var(--wm-border-color);
}

/* =============================================================== */
/* --- Navigation Badges Dark Mode --- */
/* =============================================================== */

body.dark-mode .nav-unread-badge,
body.dark-mode .nav-messages-badge {
  background-color: #ff3b3b;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(255, 59, 59, 0.4);
}

body.dark-mode .notification-badge {
  background-color: #ff3b3b;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(255, 59, 59, 0.4);
}

/* =============================================================== */
/* --- Popups & Modals --- */
/* =============================================================== */

body.dark-mode .popup {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode .popup-header {
  border-bottom-color: var(--wm-border-color);
}

body.dark-mode .popup-header h2 {
  color: var(--wm-text-primary);
}

body.dark-mode .popup-content {
  color: var(--wm-text-secondary);
}

body.dark-mode .close-popup-btn {
  color: var(--wm-text-muted);
}

body.dark-mode .close-popup-btn:hover {
  color: var(--wm-text-primary);
}

body.dark-mode .modal-content {
  background-color: var(--wm-bg-card);
}

body.dark-mode .modal .close-btn,
body.dark-mode .popup .close-btn {
  color: var(--wm-text-muted);
}

body.dark-mode .modal .close-btn:hover {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
}

/* =============================================================== */
/* --- Loading Overlay --- */
/* =============================================================== */

body.dark-mode #loadingOverlay {
  background: rgba(15, 15, 15, 0.95);
  color: var(--wm-accent-primary);
}

body.dark-mode .spinner {
  border-color: var(--wm-bg-tertiary);
  border-top-color: var(--wm-accent-primary);
}

/* =============================================================== */
/* --- Custom Popup --- */
/* =============================================================== */

body.dark-mode #custom-popup {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode #custom-popup-message {
  color: var(--wm-text-primary);
}

body.dark-mode #custom-popup-ok {
  background: linear-gradient(135deg, var(--wm-accent-primary) 0%, var(--wm-accent-light) 100%);
}

body.dark-mode #custom-popup-cancel {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
}

/* =============================================================== */
/* --- Availability Status --- */
/* =============================================================== */

body.dark-mode .availability-status {
  border-color: var(--wm-bg-card);
}

body.dark-mode .status-online {
  background-color: #4ade80;
}

body.dark-mode .status-offline {
  background-color: var(--wm-text-muted);
}

/* =============================================================== */
/* --- Reviews Section --- */
/* =============================================================== */

body.dark-mode #reviews-summary-container {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

body.dark-mode #reviews-list-container {
  background-color: transparent;
}

/* =============================================================== */
/* --- Responsive Adjustments --- */
/* =============================================================== */

@media (max-width: 480px) {
  body.dark-mode .listing-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  body.dark-mode .chat-item {
    margin-bottom: 6px;
  }
}

/* =============================================================== */
/* --- Transitions for Smooth Theme Switching --- */
/* =============================================================== */

.card, .listing-card, .chat-item, .settings-card, .categories-grid,
.search-bar, .form-group input, .form-group textarea, .form-group select,
.popup, .side-menu, .bottom-nav, .filter-container, .tab-content {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body, .section-title, .info-text, .user-name, .job-title-preview,
.listing-description, .chat-name, .chat-preview, .settings-item-title,
.settings-item-subtitle, .category-item span {
  transition: color 0.3s ease;
}
/* =============================================================== */
/* --- WorkerMeet Professional Dark Mode Theme --- */
/* =============================================================== */

/*
 * Dark Mode Color System:
 * - Main background: #0f0f0f
 * - Card background: #1c1c1c
 * - Secondary background: #262626
 * - Primary accent: #ff3b3b (WorkerMeet red)
 * - Main text: #ffffff
 * - Secondary text: #bdbdbd
 * - Tertiary text: #9e9e9e
 * - Border color: #333333
 * - Hover highlight: rgba(255, 59, 59, 0.1)
 */

/* =============================================================== */
/* --- CSS Variables for Dark Mode --- */
/* =============================================================== */

:root {
  /* Light Mode (Default) Variables */
  --wm-bg-primary: #f0f2f5;
  --wm-bg-secondary: #ffffff;
  --wm-bg-tertiary: #f8f9fa;
  --wm-bg-card: #ffffff;
  --wm-bg-input: #ffffff;
  
  --wm-text-primary: #111827;
  --wm-text-secondary: #4b5563;
  --wm-text-tertiary: #6b7280;
  --wm-text-muted: #9ca3af;
  
  --wm-border-color: #e5e7eb;
  --wm-border-light: #f3f4f6;
  
  --wm-accent-primary: #d32f2f;
  --wm-accent-light: #f44336;
  --wm-accent-dark: #b71c1c;
  
  --wm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --wm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --wm-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  
  --wm-hover-bg: rgba(211, 47, 47, 0.05);
  --wm-category-icon-bg: rgba(211, 47, 47, 0.1);
}

/* Dark Mode Variables - Applied when body has .dark-mode class */
body.dark-mode {
  --wm-bg-primary: #0f0f0f;
  --wm-bg-secondary: #1c1c1c;
  --wm-bg-tertiary: #262626;
  --wm-bg-card: #1c1c1c;
  --wm-bg-input: #262626;
  
  --wm-text-primary: #ffffff;
  --wm-text-secondary: #e0e0e0;
  --wm-text-tertiary: #bdbdbd;
  --wm-text-muted: #9e9e9e;
  
  --wm-border-color: #333333;
  --wm-border-light: #2a2a2a;
  
  --wm-accent-primary: #ff3b3b;
  --wm-accent-light: #ff5252;
  --wm-accent-dark: #d32f2f;
  
  --wm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --wm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
  --wm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
  --wm-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
  
  --wm-hover-bg: rgba(255, 59, 59, 0.1);
  --wm-category-icon-bg: #2a2a2a;
}

/* =============================================================== */
/* --- Global Dark Mode Base Styles --- */
/* =============================================================== */

body.dark-mode {
  background-color: var(--wm-bg-primary);
  color: var(--wm-text-primary);
}

/* =============================================================== */
/* --- Typography Colors --- */
/* =============================================================== */

body.dark-mode .section-title {
  color: var(--wm-text-primary);
}

body.dark-mode .info-text {
  color: var(--wm-text-tertiary);
}

/* =============================================================== */
/* --- Card Styles (Worker Cards, Posts) --- */
/* =============================================================== */

body.dark-mode .card,
body.dark-mode .listing-card,
body.dark-mode .post-form-card,
body.dark-mode .profile-info-card,
body.dark-mode .help-section-card,
body.dark-mode .about-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .listing-card {
  border: 1px solid var(--wm-border-color);
}

body.dark-mode .listing-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
  transform: translateY(-2px);
}

/* Worker Card Specific Elements */
body.dark-mode .listing-initials {
  background-color: #2a2a2a;
  color: var(--wm-accent-primary);
  border-color: var(--wm-accent-primary);
}

body.dark-mode .listing-user-info .user-name {
  color: var(--wm-text-primary);
}

body.dark-mode .listing-user-info .job-title-preview {
  color: var(--wm-text-tertiary);
}

body.dark-mode .listing-description {
  color: var(--wm-text-secondary);
}

body.dark-mode .listing-meta .posted-ago {
  color: var(--wm-text-muted);
}

body.dark-mode .listing-distance {
  color: #4ade80 !important; /* Bright green for visibility */
}

body.dark-mode .listing-type-tag {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .listing-category-tag {
  border-color: var(--wm-accent-primary);
  color: var(--wm-accent-primary);
  background-color: transparent;
}

body.dark-mode .listing-price {
  color: var(--wm-accent-primary);
}

body.dark-mode .listing-rating span:not(.stars) {
  color: var(--wm-text-primary);
}

body.dark-mode .listing-rating span:not(.stars) ~ span {
  color: var(--wm-text-tertiary);
}

/* =============================================================== */
/* --- Category Cards --- */
/* =============================================================== */

body.dark-mode .categories-grid {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .category-item {
  color: var(--wm-text-tertiary);
}

body.dark-mode .category-item i {
  background-color: var(--wm-category-icon-bg);
  color: var(--wm-accent-primary);
}

body.dark-mode .category-item:hover i {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
  transform: scale(1.1);
}

body.dark-mode .category-item span {
  color: var(--wm-text-secondary);
}

/* =============================================================== */
/* --- Chat / Messages List --- */
/* =============================================================== */

body.dark-mode #chat-list-container {
  background-color: transparent;
}

body.dark-mode .chat-item {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  border-radius: 12px;
  margin-bottom: 8px;
  box-shadow: var(--wm-shadow-sm);
  transition: all 0.2s ease;
}

body.dark-mode .chat-item:hover {
  background-color: var(--wm-bg-tertiary);
  transform: translateX(4px);
  box-shadow: var(--wm-shadow-md);
}

body.dark-mode .chat-item:active {
  background-color: var(--wm-hover-bg);
}

body.dark-mode .chat-avatar {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .chat-name {
  color: var(--wm-text-primary) !important;
  font-weight: 600;
}

body.dark-mode .chat-preview {
  color: var(--wm-text-tertiary);
}

body.dark-mode .chat-time {
  color: var(--wm-text-muted);
}

body.dark-mode .chat-item-unread .chat-name,
body.dark-mode .chat-item-unread .chat-preview {
  color: var(--wm-text-primary);
  font-weight: 600;
}

/* Chat Window Dark Mode */
body.dark-mode .chat-window {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .message.received .message-bubble {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
}

body.dark-mode .message.sent .message-bubble {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .message-input-container {
  background-color: var(--wm-bg-card);
  border-top-color: var(--wm-border-color);
}

body.dark-mode .message-input-container input {
  background-color: var(--wm-bg-tertiary);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .chat-input-bar {
  background-color: var(--wm-bg-card);
  border-top-color: var(--wm-border-color);
}

body.dark-mode #chatInput {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
  border-color: var(--wm-border-color);
}

body.dark-mode #chatInput::placeholder {
  color: var(--wm-text-muted);
}

/* =============================================================== */
/* --- Profile Page --- */
/* =============================================================== */

body.dark-mode .profile-header-bg {
  background: linear-gradient(135deg, var(--wm-accent-dark) 0%, var(--wm-accent-primary) 100%);
}

body.dark-mode .profile-info-card-home {
  background-color: transparent;
}

body.dark-mode .profile-pic-container-home {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-bg-card);
}

body.dark-mode .profile-initials {
  color: var(--wm-accent-primary);
}

body.dark-mode .profile-info-card-home h2 {
  color: var(--wm-text-primary);
}

body.dark-mode .profile-info-card-home .role {
  color: var(--wm-text-tertiary);
}

body.dark-mode .profile-details-home .info-item {
  color: var(--wm-text-tertiary);
}

body.dark-mode .profile-details-home .info-item i {
  color: var(--wm-accent-primary);
}

body.dark-mode .profile-stats-container {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
}

body.dark-mode .stat-value {
  color: var(--wm-accent-primary);
}

body.dark-mode .stat-label {
  color: var(--wm-text-tertiary);
}

/* Profile Tabs */
body.dark-mode .profile-tabs {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
}

body.dark-mode .tab-button {
  color: var(--wm-text-tertiary);
}

body.dark-mode .tab-button.active {
  color: var(--wm-accent-primary);
  border-bottom-color: var(--wm-accent-primary);
}

body.dark-mode .tab-content {
  background-color: transparent;
}

/* Edit Profile Button */
body.dark-mode .edit-profile-btn {
  background-color: var(--wm-bg-card);
  color: var(--wm-accent-primary);
  border-color: var(--wm-accent-primary);
}

body.dark-mode .edit-profile-btn:hover {
  background-color: var(--wm-hover-bg);
}

/* =============================================================== */
/* --- Settings Page --- */
/* =============================================================== */

body.dark-mode .settings-container {
  color: var(--wm-text-primary);
}

body.dark-mode .settings-section-header {
  color: var(--wm-accent-primary);
}

body.dark-mode .settings-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .settings-item {
  border-bottom-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .settings-item:hover {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .settings-item:active {
  background-color: var(--wm-hover-bg);
}

body.dark-mode .settings-item-title {
  color: var(--wm-text-primary);
}

body.dark-mode .settings-item-subtitle {
  color: var(--wm-text-tertiary);
}

body.dark-mode .settings-arrow {
  color: var(--wm-text-muted);
}

body.dark-mode .settings-item:hover .settings-arrow {
  color: var(--wm-accent-primary);
}

body.dark-mode .icon-red,
body.dark-mode .icon-blue,
body.dark-mode .icon-orange,
body.dark-mode .icon-green,
body.dark-mode .icon-purple,
body.dark-mode .icon-teal,
body.dark-mode .icon-pink,
body.dark-mode .icon-gray {
  color: var(--wm-accent-primary) !important;
}

/* Toggle Switch in Dark Mode */
body.dark-mode .toggle-label {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .toggle-slider {
  background-color: var(--wm-text-muted);
}

body.dark-mode .toggle-switch:checked + .toggle-label {
  background-color: var(--wm-accent-primary);
}

body.dark-mode .toggle-switch:checked + .toggle-label .toggle-slider {
  background-color: #ffffff;
}

/* =============================================================== */
/* --- Buttons --- */
/* =============================================================== */

body.dark-mode .btn-primary {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .btn-primary:hover {
  background-color: var(--wm-accent-light);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.4);
}

body.dark-mode .btn-secondary {
  background-color: transparent;
  color: var(--wm-accent-primary);
  border-color: var(--wm-accent-primary);
}

body.dark-mode .btn-secondary:hover {
  background-color: var(--wm-hover-bg);
}

/* Listing Action Buttons (Contact/Message/Location) */
body.dark-mode .listing-action-btn {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
  transition: all 0.2s ease;
}

body.dark-mode .listing-action-btn:hover {
  background-color: var(--wm-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.4);
}

body.dark-mode .listing-action-btn:active {
  transform: translateY(0);
}

body.dark-mode .listing-action-btn.delete {
  background-color: var(--wm-text-muted);
}

body.dark-mode .listing-action-btn.delete:hover {
  background-color: #757575;
}

/* Profile Action Buttons */
body.dark-mode .profile-action-btn {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .profile-action-btn:hover {
  background-color: var(--wm-accent-light);
}

/* Location Button */
body.dark-mode .btn-location {
  background: linear-gradient(135deg, var(--wm-accent-primary) 0%, var(--wm-accent-light) 100%);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(255, 59, 59, 0.3);
}

body.dark-mode .btn-location:hover {
  background: linear-gradient(135deg, var(--wm-accent-dark) 0%, var(--wm-accent-primary) 100%);
  box-shadow: 0 6px 16px rgba(255, 59, 59, 0.4);
}

/* Send Button */
body.dark-mode .send-btn {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode .send-btn:hover {
  background-color: var(--wm-accent-light);
}

/* =============================================================== */
/* --- Navigation --- */
/* =============================================================== */

body.dark-mode .bottom-nav {
  background-color: var(--wm-bg-card);
  border-top: 1px solid var(--wm-border-color);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .nav-item {
  color: var(--wm-text-tertiary);
}

body.dark-mode .nav-item.active {
  color: var(--wm-accent-primary);
  background-color: rgba(255, 59, 59, 0.1);
}

body.dark-mode .nav-item.active i {
  background-color: rgba(255, 59, 59, 0.15);
  color: var(--wm-accent-primary);
}

/* Floating Post Button */
body.dark-mode .bottom-nav .nav-item-post {
  background: linear-gradient(135deg, var(--wm-accent-primary) 0%, var(--wm-accent-dark) 100%);
  border-color: var(--wm-bg-card);
  box-shadow: 0 6px 20px rgba(255, 59, 59, 0.4);
}

body.dark-mode .bottom-nav .nav-item-post:hover {
  box-shadow: 0 8px 25px rgba(255, 59, 59, 0.5);
}

/* =============================================================== */
/* --- Search Bar --- */
/* =============================================================== */

body.dark-mode .search-bar {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
  box-shadow: var(--wm-shadow-sm);
}

body.dark-mode .search-bar i {
  color: var(--wm-text-muted);
}

body.dark-mode .search-bar input {
  color: var(--wm-text-primary);
}

body.dark-mode .search-bar input::placeholder {
  color: var(--wm-text-muted);
}

/* Search Results */
body.dark-mode .search-results-container {
  background-color: var(--wm-bg-card);
  border-color: var(--wm-border-color);
  box-shadow: var(--wm-shadow-lg);
}

body.dark-mode .search-result-header {
  color: var(--wm-text-muted);
}

body.dark-mode .search-result-item {
  color: var(--wm-text-primary);
  border-bottom-color: var(--wm-border-color);
}

body.dark-mode .search-result-item:hover {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .search-result-avatar {
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .search-result-name {
  color: var(--wm-text-primary);
}

body.dark-mode .search-result-subtext {
  color: var(--wm-text-tertiary);
}

body.dark-mode .search-result-price {
  color: var(--wm-accent-primary);
}

/* =============================================================== */
/* --- Forms & Inputs --- */
/* =============================================================== */

body.dark-mode .form-group label {
  color: var(--wm-text-primary);
}

body.dark-mode .form-group input,
body.dark-mode .form-group textarea,
body.dark-mode .form-group select {
  background-color: var(--wm-bg-input);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .form-group input::placeholder,
body.dark-mode .form-group textarea::placeholder {
  color: var(--wm-text-muted);
}

body.dark-mode .form-group input:focus,
body.dark-mode .form-group textarea:focus,
body.dark-mode .form-group select:focus {
  border-color: var(--wm-accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.1);
}

body.dark-mode .input-with-icon i {
  color: var(--wm-text-muted);
}

/* =============================================================== */
/* --- Filter Container (Explore Page) --- */
/* =============================================================== */

body.dark-mode .filter-container {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .filter-group label {
  color: var(--wm-text-primary);
}

body.dark-mode .filter-dropdown {
  background-color: var(--wm-bg-input);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .select-arrow {
  color: var(--wm-text-muted);
}

/* =============================================================== */
/* --- Side Menu / Drawer --- */
/* =============================================================== */

body.dark-mode .side-menu {
  background-color: var(--wm-bg-card);
  border-left: 1px solid var(--wm-border-color);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
}

body.dark-mode .menu-list a {
  color: var(--wm-text-primary);
  border-bottom-color: var(--wm-border-color);
}

body.dark-mode .menu-list a:hover {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-accent-primary);
}

body.dark-mode .menu-list a i {
  color: var(--wm-accent-primary);
}

body.dark-mode .menu-divider {
  border-bottom-color: var(--wm-border-color);
}

/* =============================================================== */
/* --- Popups & Modals --- */
/* =============================================================== */

body.dark-mode .popup {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode .popup-header {
  border-bottom-color: var(--wm-border-color);
}

body.dark-mode .popup-header h2 {
  color: var(--wm-text-primary);
}

body.dark-mode .popup-content {
  color: var(--wm-text-secondary);
}

body.dark-mode .close-popup-btn {
  color: var(--wm-text-muted);
}

body.dark-mode .close-popup-btn:hover {
  color: var(--wm-text-primary);
}

body.dark-mode .modal-content {
  background-color: var(--wm-bg-card);
}

body.dark-mode .modal .close-btn,
body.dark-mode .popup .close-btn {
  color: var(--wm-text-muted);
}

body.dark-mode .modal .close-btn:hover {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
}

/* =============================================================== */
/* --- Loading Overlay --- */
/* =============================================================== */

body.dark-mode #loadingOverlay {
  background: rgba(15, 15, 15, 0.95);
  color: var(--wm-accent-primary);
}

body.dark-mode .spinner {
  border-color: var(--wm-bg-tertiary);
  border-top-color: var(--wm-accent-primary);
}

/* =============================================================== */
/* --- Custom Popup --- */
/* =============================================================== */

body.dark-mode #custom-popup {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

body.dark-mode #custom-popup-message {
  color: var(--wm-text-primary);
}

body.dark-mode #custom-popup-ok {
  background: linear-gradient(135deg, var(--wm-accent-primary) 0%, var(--wm-accent-light) 100%);
}

body.dark-mode #custom-popup-cancel {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
}

/* =============================================================== */
/* --- Availability Status --- */
/* =============================================================== */

body.dark-mode .availability-status {
  border-color: var(--wm-bg-card);
}

body.dark-mode .status-online {
  background-color: #4ade80;
}

body.dark-mode .status-offline {
  background-color: var(--wm-text-muted);
}

/* =============================================================== */
/* --- Reviews Section --- */
/* =============================================================== */

body.dark-mode #reviews-summary-container {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

body.dark-mode #reviews-list-container {
  background-color: transparent;
}

/* =============================================================== */
/* --- Notifications Page --- */
/* =============================================================== */

body.dark-mode .app-container {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .main-content.notifications-page {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .notification-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .notification-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

body.dark-mode .notification-title {
  color: var(--wm-text-primary);
}

body.dark-mode .notification-text {
  color: var(--wm-text-secondary);
}

body.dark-mode .notification-time {
  color: var(--wm-text-muted);
}

body.dark-mode .notif-title {
  color: var(--wm-accent-primary);
}

body.dark-mode .notif-message {
  color: var(--wm-text-tertiary);
}

/* =============================================================== */
/* --- Location Permission Prompt --- */
/* =============================================================== */

body.dark-mode .location-permission-prompt {
  background: linear-gradient(135deg, var(--wm-bg-card) 0%, rgba(255, 59, 59, 0.05) 100%);
  border-color: var(--wm-border-color);
}

body.dark-mode .location-prompt-content h3 {
  color: var(--wm-text-primary);
}

body.dark-mode .location-prompt-content p {
  color: var(--wm-text-secondary);
}

body.dark-mode .skip-location-btn {
  border-color: var(--wm-border-color);
  color: var(--wm-text-tertiary);
  background-color: var(--wm-bg-tertiary);
}

body.dark-mode .skip-location-btn:hover {
  background-color: var(--wm-bg-input);
  color: var(--wm-text-primary);
}

body.dark-mode .location-skip-note {
  background: rgba(255, 255, 255, 0.05);
  color: var(--wm-text-tertiary);
}

body.dark-mode .location-skip-note i {
  color: var(--wm-accent-primary);
}

/* =============================================================== */
/* --- Responsive Adjustments --- */
/* =============================================================== */

@media (max-width: 480px) {
  body.dark-mode .listing-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  }
  
  body.dark-mode .chat-item {
    margin-bottom: 6px;
  }
}

/* =============================================================== */
/* --- Transitions for Smooth Theme Switching --- */
/* =============================================================== */

.card, .listing-card, .chat-item, .settings-card, .categories-grid,
.search-bar, .form-group input, .form-group textarea, .form-group select,
.popup, .side-menu, .bottom-nav, .filter-container, .tab-content,
.notification-card {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body, .section-title, .info-text, .user-name, .job-title-preview,
.listing-description, .chat-name, .chat-preview, .settings-item-title,
.settings-item-subtitle, .category-item span, .notification-title,
.notification-text {
  transition: color 0.3s ease;
}


/* =============================================================== */
/* --- Additional Fixes for Dynamic Content --- */
/* =============================================================== */

/* Fix for dynamically generated content with hardcoded colors */
body.dark-mode [style*="color: rgb(0, 0, 0)"],
body.dark-mode [style*="color: #000"],
body.dark-mode [style*="color:#000"] {
  color: var(--wm-text-primary) !important;
}

body.dark-mode [style*="color: rgb(51, 51, 51)"],
body.dark-mode [style*="color: #333"],
body.dark-mode [style*="color:#333"] {
  color: var(--wm-text-primary) !important;
}

body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background: #fff"] {
  background-color: var(--wm-bg-card) !important;
}

body.dark-mode [style*="background-color: rgb(255, 255, 255)"] {
  background-color: var(--wm-bg-card) !important;
}

/* Fix for listing-info elements that might have hardcoded colors */
body.dark-mode .listing-info h3,
body.dark-mode .listing-info p {
  color: var(--wm-text-primary);
}

body.dark-mode .listing-info .meta {
  color: var(--wm-text-tertiary);
}

/* Fix for job title preview in dark mode */
body.dark-mode .job-title-preview {
  color: var(--wm-text-tertiary) !important;
}

/* Ensure all text in cards is readable */
body.dark-mode .listing-card * {
  color-scheme: dark;
}

body.dark-mode .listing-card p,
body.dark-mode .listing-card span:not(.stars):not(.unread-badge) {
  color: inherit;
}

/* Specific fix for user name */
body.dark-mode .user-name {
  color: var(--wm-text-primary) !important;
}

/* Fix for category names */
body.dark-mode .category-item span {
  color: var(--wm-text-secondary) !important;
}

/* Ensure proper contrast for all text elements */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: var(--wm-text-primary);
}

body.dark-mode p {
  color: var(--wm-text-secondary);
}

body.dark-mode span {
  color: inherit;
}

body.dark-mode label {
  color: var(--wm-text-primary);
}

/* Fix for any remaining hardcoded colors in listings */
body.dark-mode .listings-container .info-text {
  background-color: var(--wm-bg-card);
  padding: 20px;
  border-radius: 12px;
  color: var(--wm-text-tertiary);
}

/* Fix for "No Messages Yet" and similar messages */
body.dark-mode #chat-list-container .info-text {
  background-color: var(--wm-bg-card);
  color: var(--wm-text-tertiary);
  padding: 20px;
  border-radius: 12px;
}

/* Ensure links are visible in dark mode */
body.dark-mode a:not(.btn-primary):not(.btn-secondary):not(.listing-action-btn):not(.nav-item):not(.category-item):not(.settings-item) {
  color: var(--wm-accent-primary);
}

body.dark-mode a:hover:not(.btn-primary):not(.btn-secondary):not(.listing-action-btn):not(.nav-item):not(.category-item):not(.settings-item) {
  color: var(--wm-accent-light);
}

/* Fix for the workers list container */
body.dark-mode .workers-list {
  background-color: transparent;
}

body.dark-mode .workers-list .info-text {
  background-color: var(--wm-bg-card);
  color: var(--wm-text-tertiary);
  padding: 20px;
  border-radius: 12px;
}

/* Fix for explore listings container */
body.dark-mode #explore-listings-container {
  background-color: transparent;
}

body.dark-mode #explore-listings-container .info-text {
  background-color: var(--wm-bg-card);
  color: var(--wm-text-tertiary);
  padding: 20px;
  border-radius: 12px;
}

/* Fix for my posts container */
body.dark-mode #my-posts-container {
  background-color: transparent;
}

body.dark-mode #my-posts-container .info-text {
  background-color: var(--wm-bg-card);
  color: var(--wm-text-tertiary);
  padding: 20px;
  border-radius: 12px;
}

/* Fix for stars rating */
body.dark-mode .stars {
  color: #fbbf24 !important; /* Keep stars golden/yellow */
}

/* Fix for any inline styles that might override */
body.dark-mode .chat-name-unread {
  color: var(--wm-text-primary) !important;
  font-weight: 600;
}

body.dark-mode .chat-preview-unread {
  color: var(--wm-text-tertiary) !important;
  font-weight: 500;
}

/* Fix for header elements */
body.dark-mode .header-left .logo {
  color: #ffffff;
}

/* Fix for section titles */
body.dark-mode h1.section-title,
body.dark-mode h2.section-title {
  color: var(--wm-text-primary);
}

/* Fix for rating text */
body.dark-mode .listing-rating {
  color: var(--wm-text-tertiary);
}

/* Fix for distance display */
body.dark-mode .worker-distance {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-tertiary);
}

body.dark-mode .worker-distance i {
  color: var(--wm-accent-primary);
}

/* Fix for search results hover */
body.dark-mode .search-result-item:hover {
  background-color: var(--wm-bg-tertiary);
}

/* Fix for menu header in side menu */
body.dark-mode .side-menu .menu-header {
  background: linear-gradient(135deg, var(--wm-accent-dark) 0%, var(--wm-accent-primary) 100%);
}

body.dark-mode .side-menu .menu-header h2 {
  color: #ffffff;
}

body.dark-mode .side-menu .menu-header .close-menu-btn {
  color: #ffffff;
}

/* Fix for popup header */
body.dark-mode .popup-header h2 {
  color: var(--wm-text-primary);
}

/* Fix for tab buttons */
body.dark-mode .tab-button {
  color: var(--wm-text-tertiary);
}

body.dark-mode .tab-button.active {
  color: var(--wm-accent-primary);
}

/* Fix for profile header background */
body.dark-mode .profile-header-bg {
  background: linear-gradient(135deg, var(--wm-accent-dark) 0%, var(--wm-accent-primary) 100%);
}

/* Fix for loading spinner text */
body.dark-mode #loadingOverlay p {
  color: var(--wm-text-tertiary);
}

/* Fix for custom popup overlay */
body.dark-mode #custom-popup-overlay {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* Fix for any remaining white backgrounds */
body.dark-mode [style*="background: white"],
body.dark-mode [style*="background-color: white"] {
  background-color: var(--wm-bg-card) !important;
}

/* Fix for camera and upload icons on profile */
body.dark-mode .camera-icon {
  background-color: var(--wm-bg-tertiary);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .upload-icon {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}


/* =============================================================== */
/* --- Login/Auth Pages (index.html, forgot.html) --- */
/* =============================================================== */

/* Login page background */
body.dark-mode {
  background: var(--wm-bg-primary);
}

body.dark-mode .login-container,
body.dark-mode .container {
  background-color: var(--wm-bg-card);
  box-shadow: var(--wm-shadow-lg);
}

body.dark-mode .wm-title {
  background: linear-gradient(180deg, #ff6b6b, #ff3b3b);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

body.dark-mode .welcome-title {
  color: var(--wm-text-primary);
}

body.dark-mode .login-heading {
  color: var(--wm-text-primary);
}

body.dark-mode .login-subtext {
  color: var(--wm-text-tertiary);
}

body.dark-mode .input-field {
  background-color: var(--wm-bg-input);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .input-field:focus {
  border-color: var(--wm-accent-primary);
  box-shadow: 0 0 0 3px rgba(255, 59, 59, 0.1);
}

body.dark-mode .input-field::placeholder {
  color: var(--wm-text-muted);
}

body.dark-mode .label {
  color: var(--wm-text-secondary);
}

body.dark-mode .login-btn {
  background: linear-gradient(135deg, var(--wm-accent-primary) 0%, var(--wm-accent-light) 100%);
  color: #ffffff;
}

body.dark-mode .google-login-btn {
  background-color: var(--wm-bg-tertiary);
  border-color: var(--wm-border-color);
  color: var(--wm-text-primary);
}

body.dark-mode .google-login-btn:hover {
  background-color: var(--wm-bg-input);
}

body.dark-mode .link a {
  color: var(--wm-accent-primary);
}

body.dark-mode .footer-text {
  color: var(--wm-text-muted);
}

body.dark-mode .divider {
  color: var(--wm-text-muted);
}

body.dark-mode .divider::before,
body.dark-mode .divider::after {
  background-color: var(--wm-border-color);
}

body.dark-mode .forgot-password {
  color: var(--wm-accent-primary);
}

/* Signup link section */
body.dark-mode .signup-link {
  color: var(--wm-text-tertiary);
}

body.dark-mode .signup-link a {
  color: var(--wm-accent-primary);
}

/* Form labels */
body.dark-mode form label {
  color: var(--wm-text-secondary);
}

/* Input icons */
body.dark-mode .input-icon {
  color: var(--wm-text-muted);
}

/* Checkbox styling */
body.dark-mode input[type="checkbox"] {
  accent-color: var(--wm-accent-primary);
}

/* =============================================================== */
/* --- Dashboard Page --- */
/* =============================================================== */

body.dark-mode .dashboard-container {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .dashboard-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .dashboard-card h3 {
  color: var(--wm-text-primary);
}

body.dark-mode .dashboard-card p {
  color: var(--wm-text-secondary);
}

body.dark-mode .dashboard-stat {
  color: var(--wm-accent-primary);
}

/* =============================================================== */
/* --- Map Page --- */
/* =============================================================== */

body.dark-mode .map-container {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .map-controls {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
}

/* =============================================================== */
/* --- Admin Page --- */
/* =============================================================== */

body.dark-mode .admin-container {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .admin-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
}

body.dark-mode .admin-table {
  background-color: var(--wm-bg-card);
}

body.dark-mode .admin-table th {
  background-color: var(--wm-bg-tertiary);
  color: var(--wm-text-primary);
}

body.dark-mode .admin-table td {
  color: var(--wm-text-secondary);
  border-bottom-color: var(--wm-border-color);
}

/* =============================================================== */
/* --- Blotic Verification Page --- */
/* =============================================================== */

body.dark-mode .verification-container {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .verification-card {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode .verification-step {
  background-color: var(--wm-bg-tertiary);
  border: 1px solid var(--wm-border-color);
}

body.dark-mode .verification-step.active {
  border-color: var(--wm-accent-primary);
  background-color: var(--wm-hover-bg);
}

/* =============================================================== */
/* --- Offline Screen Page --- */
/* =============================================================== */

body.dark-mode .offline-container {
  background-color: var(--wm-bg-primary);
}

body.dark-mode .offline-content {
  background-color: var(--wm-bg-card);
  border: 1px solid var(--wm-border-color);
}

body.dark-mode .offline-icon {
  color: var(--wm-text-muted);
}

body.dark-mode .offline-title {
  color: var(--wm-text-primary);
}

body.dark-mode .offline-message {
  color: var(--wm-text-secondary);
}

body.dark-mode .retry-btn {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}


/* =============================================================== */
/* --- 404 Page --- */
/* =============================================================== */

body.dark-mode #message {
  background-color: var(--wm-bg-card);
  color: var(--wm-text-secondary);
  box-shadow: var(--wm-shadow-card);
}

body.dark-mode #message h1 {
  color: var(--wm-text-primary);
}

body.dark-mode #message h2 {
  color: var(--wm-accent-primary);
}

body.dark-mode #message h3 {
  color: var(--wm-text-tertiary);
}

body.dark-mode #message p {
  color: var(--wm-text-secondary);
}

body.dark-mode #message a {
  background-color: var(--wm-accent-primary);
  color: #ffffff;
}

body.dark-mode #load {
  color: var(--wm-text-muted);
}

@media (max-width: 600px) {
  body.dark-mode #message {
    background-color: var(--wm-bg-card);
  }
  
  body.dark-mode body {
    border-top-color: var(--wm-accent-primary);
  }
}


/* =============================================================== */
/* --- Language Selector Dark Mode Styles --- */
/* =============================================================== */

/* Bottom Sheet - Dark Mode */
body.dark-mode .language-sheet {
  background: #1c1c1c;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

/* Handle - Dark Mode */
body.dark-mode .language-handle {
  background: #444444;
}

/* Header - Dark Mode */
body.dark-mode .language-header {
  border-bottom-color: #333333;
}

body.dark-mode .language-title {
  color: #ffffff;
}

/* Language Item - Dark Mode */
body.dark-mode .language-item {
  background: transparent;
}

body.dark-mode .language-item:hover {
  background: #262626;
}

/* Selected Language Item - Dark Mode
 * This is the key fix - use dark background instead of white/pink */
body.dark-mode .language-item-selected {
  background: #2a2a2a !important;
  border: 1px solid rgba(255, 59, 59, 0.3);
}

body.dark-mode .language-item-selected:hover {
  background: #333333 !important;
}

/* Language Name - Dark Mode */
body.dark-mode .language-name {
  color: #ffffff;
}

/* Selected Language Name - Dark Mode */
body.dark-mode .language-item-selected .language-name {
  color: #ff3b3b;
  font-weight: 600;
}

/* Checkmark - Dark Mode */
body.dark-mode .language-checkmark {
  background: #ff3b3b;
  box-shadow: 0 2px 8px rgba(255, 59, 59, 0.3);
}

body.dark-mode .language-checkmark i {
  color: #ffffff;
}

/* Close Button Area - Dark Mode */
body.dark-mode .language-close-area {
  border-top-color: #333333;
  background: #1c1c1c;
}

body.dark-mode .language-close-btn {
  background: #262626;
  color: #bdbdbd;
}

body.dark-mode .language-close-btn:hover {
  background: #333333;
  color: #ffffff;
}

/* Scrollbar Styling for Language List - Dark Mode */
body.dark-mode .language-list::-webkit-scrollbar {
  width: 6px;
}

body.dark-mode .language-list::-webkit-scrollbar-track {
  background: transparent;
}

body.dark-mode .language-list::-webkit-scrollbar-thumb {
  background: #444444;
  border-radius: 3px;
}

body.dark-mode .language-list::-webkit-scrollbar-thumb:hover {
  background: #555555;
}

/* Animation for selected item in dark mode */
@keyframes languageItemSelected {
  0% {
    background: transparent;
    border-color: transparent;
  }
  50% {
    background: #333333;
    border-color: rgba(255, 59, 59, 0.5);
  }
  100% {
    background: #2a2a2a;
    border-color: rgba(255, 59, 59, 0.3);
  }
}

body.dark-mode .language-item-selected {
  animation: languageItemSelected 0.3s ease;
}

/* Hover effect for non-selected items in dark mode */
body.dark-mode .language-item:not(.language-item-selected):hover {
  background: #262626;
  transform: translateX(4px);
}

/* Active/Pressed state for all items in dark mode */
body.dark-mode .language-item:active {
  background: #333333 !important;
  transform: scale(0.98);
}

/* Focus state for accessibility in dark mode */
body.dark-mode .language-item:focus {
  outline: 2px solid rgba(255, 59, 59, 0.5);
  outline-offset: -2px;
}