/* ===========================================================
   🌙 IMPROVED DARK MODE STYLES
   Comprehensive dark mode support for Trymzo App
   =========================================================== */

/* === Dark Mode Base === */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Apply smooth transitions to major elements */
body.dark-mode * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* === Navbar === */
body.dark-mode .navbar {
  background-color: #1a1a1a !important;
  color: #fff;
}

body.dark-mode .navbar a,
body.dark-mode .navbar .navbar-brand {
  color: #ffffff !important;
}

/* === Cards === */
body.dark-mode .card {
  background-color: #1e1e1e;
  border-color: #2a2a2a;
  color: #e0e0e0;
}

/* === List Groups === */
body.dark-mode .list-group-item {
  background-color: #1f1f1f;
  border-color: #2a2a2a;
  color: #ddd;
}

/* === Buttons === */
body.dark-mode .btn {
  color: #fff;
  background-color: #333;
  border-color: #444;
}

body.dark-mode .btn:hover {
  background-color: #444;
  border-color: #555;
}

/* === Form Controls === */
body.dark-mode .form-control {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #444;
}

body.dark-mode .form-control:focus {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #666;
}

/* === Modals === */
body.dark-mode .modal-content {
  background-color: #1e1e1e;
  color: #fff;
  border-color: #2a2a2a;
}

/* === Dropdowns === */
body.dark-mode .dropdown-menu {
  background-color: #2a2a2a;
  color: #fff;
}

body.dark-mode .dropdown-item {
  color: #fff;
}

body.dark-mode .dropdown-item:hover {
  background-color: #3a3a3a;
}

/* === Alerts === */
body.dark-mode .alert {
  background-color: #2a2a2a;
  color: #f5f5f5;
  border-color: #444;
}

/* === Badges === */
body.dark-mode .badge {
  background-color: #444;
  color: #fff;
}

/* === Tables === */
body.dark-mode table {
  background-color: #1f1f1f;
  color: #fff;
}

body.dark-mode thead th {
  background-color: #2a2a2a;
}

body.dark-mode tbody tr {
  border-color: #333;
}

/* === Utilities === */
body.dark-mode .border {
  border-color: #444 !important;
}

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

body.dark-mode .bg-light {
  background-color: #2c2c2c !important;
}

body.dark-mode .bg-white {
  background-color: #1c1c1c !important;
}

body.dark-mode hr {
  border-color: #333;
}

/* === Custom Classes === */
body.dark-mode .dark-mode-toggle {
  background-color: #333;
  color: #fff;
}

body.dark-mode .dark-mode-toggle:hover {
  background-color: #444;
}

/* === Navbar === */
body.dark-mode .navbar {
  background-color: #1a1a1a !important;
}

body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar-nav .nav-link {
  color: #fff !important;
}

/* === Cards === */
body.dark-mode .card {
  background-color: #1f1f1f;
  border-color: #333;
  color: #e0e0e0;
}

/* === Buttons === */
body.dark-mode .btn {
  background-color: #333;
  border-color: #444;
  color: #fff;
}

body.dark-mode .btn:hover {
  background-color: #444;
  border-color: #555;
}

/* === Forms === */
body.dark-mode .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

body.dark-mode .form-control:focus {
  border-color: #666;
  background-color: #2a2a2a;
  color: #fff;
}

/* === List Groups === */
body.dark-mode .list-group-item {
  background-color: #1e1e1e;
  border-color: #333;
  color: #e0e0e0;
}

/* === Modals === */
body.dark-mode .modal-content {
  background-color: #1e1e1e;
  color: #fff;
  border-color: #333;
}

/* === Alerts === */
body.dark-mode .alert {
  background-color: #2a2a2a;
  color: #f5f5f5;
  border-color: #444;
}

/* === Tables === */
body.dark-mode table {
  background-color: #1f1f1f;
  color: #fff;
}

body.dark-mode thead th {
  background-color: #2a2a2a;
}

body.dark-mode tbody tr {
  border-color: #333;
}

/* === Dropdown === */
body.dark-mode .dropdown-menu {
  background-color: #2a2a2a;
}

body.dark-mode .dropdown-item {
  color: #fff;
}

body.dark-mode .dropdown-item:hover {
  background-color: #3a3a3a;
}


/* ========== DARK MODE FOR MODAL DRAWER ========== */
body.dark-mode .modal-backdrop-custom {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Modal Drawer Container */
body.dark-mode .modal-drawer {
  background-color: #1f1f1f;
  color: #fff;
  box-shadow: 0 4px 6px rgba(255, 255, 255, 0.05);
}

/* Drawer Header */
body.dark-mode .drawer-header {
  background-color: #2c2c2c;
  box-shadow: 0 1px 4px rgba(255, 255, 255, 0.05);
  color: #fff;
}

body.dark-mode .drawer-header button {
  color: #fff;
}

/* Drawer Body */
body.dark-mode .drawer-body {
  background-color: #1f1f1f;
  color: #fff;
  scrollbar-color: rgba(255, 107, 0, 0.4) #2a2a2a;
  padding-bottom: calc(16px + var(--safe-bottom, 0px));
}

/* Scrollbar styling for Webkit (Chrome, Safari) */
body.dark-mode .drawer-body::-webkit-scrollbar-thumb {
  background-color: #555;
}

body.dark-mode .drawer-body::-webkit-scrollbar-thumb:hover {
  background-color: #888;
}

body.dark-mode .drawer-body::-webkit-scrollbar-track {
  background-color: #2a2a2a;
}

/* Animations remain unchanged, unless you want to darken background overlay more */

/* ========== DARK MODE FOR SIDEBAR ========== */

/* App Sidebar Container */
body.dark-mode .app-sidebar {
  background-color: #1e1e2f;
  color: #f1f1f1;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

/* Sidebar Nav Items */
body.dark-mode .sidebar-nav {
  background-color: transparent;
}

body.dark-mode .sidebar-nav .nav-link {
  color: #E5E7E8;
  transition: all 0.2s ease;
}

body.dark-mode .sidebar-nav .nav-link::before {
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.2) 0%, transparent 100%);
}

body.dark-mode .sidebar-nav .nav-link:hover {
  background-color: rgba(255, 107, 0, 0.1);
  color: #FF8C42;
}

body.dark-mode .sidebar-nav .nav-link:hover::before {
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.3) 0%, transparent 100%);
}

body.dark-mode .sidebar-nav .nav-link:active {
  background-color: rgba(255, 107, 0, 0.15);
}

body.dark-mode .sidebar-nav .nav-link i {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2) 0%, rgba(255, 107, 0, 0.1) 100%);
  color: #FF8C42;
}

body.dark-mode .sidebar-nav .nav-link:hover i {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.3) 0%, rgba(255, 107, 0, 0.2) 100%);
}

body.dark-mode .sidebar-nav .nav-link:focus,
body.dark-mode .sidebar-nav .nav-link:focus-visible {
  outline: none;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.4);
}

body.dark-mode .app-sidebar .nav-link:focus,
body.dark-mode .app-sidebar .nav-link:focus-visible {
  outline: none;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.4);
}

body.dark-mode .trymzo-bottom-nav .nav-item:focus,
body.dark-mode .trymzo-bottom-nav .nav-item:focus-visible,
body.dark-mode .trymzo-bottom-nav .nav-item:active {
  outline: none;
  text-decoration: none;
  background-color: rgba(255, 107, 0, 0.15);
  border-radius: 12px;
  transform: scale(0.95);
  transition: all 0.2s ease;
}

/* Active or Selected Item */
body.dark-mode .sidebar-nav .nav-link.active {
  background-color: rgba(255, 107, 0, 0.15);
  color: #FF8C42;
  font-weight: 500;
}

body.dark-mode .sidebar-nav .nav-link.active::before {
  width: 4px;
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.4) 0%, transparent 100%);
}

body.dark-mode .sidebar-nav .nav-link.active i {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.3) 0%, rgba(255, 107, 0, 0.2) 100%);
  color: #FF8C42;
}


body.dark-mode .app-sidebar::-webkit-scrollbar {
  width: 6px;
}

body.dark-mode .app-sidebar::-webkit-scrollbar-thumb {
  background-color: rgba(255, 107, 0, 0.4);
}

body.dark-mode .app-sidebar::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 107, 0, 0.6);
}

body.dark-mode .app-sidebar {
  scrollbar-color: rgba(255, 107, 0, 0.4) transparent;
}


/* ========== DARK MODE FOR CUSTOMER HEADER ========== */
body.dark-mode .customer-header {
  background-color: #1e1e2f;
  color: #f1f1f1;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Title or Text inside Header */
body.dark-mode .customer-header h5,
body.dark-mode .customer-header h6,
body.dark-mode .customer-header .title,
body.dark-mode .customer-header .text {
  color: #ffffff;
}

/* Icons and Buttons */
body.dark-mode .customer-header i,
body.dark-mode .customer-header svg,
body.dark-mode .customer-header button {
  color: #f1f1f1;
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.1);
}

/* Hover Effects */
body.dark-mode .customer-header button:hover,
body.dark-mode .customer-header i:hover,
body.dark-mode .customer-header svg:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}

/* ========== DARK MODE FOR REFRESH BUTTON ========== */
body.dark-mode .refresh-btn {
  background-color: #2d2d3f;
  color: #f1f1f1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .refresh-btn:hover {
  background-color: #3c3c50;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ========== DARK MODE FOR STATUS FILTER ========== */
body.dark-mode .status-filter {
  background-color: #2d2d3f;
  color: #f1f1f1;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* For select dropdown (if applicable) */
body.dark-mode .status-filter select {
  background-color: #2d2d3f;
  color: #f1f1f1;
  border: none;
}

/* Hover effect */
body.dark-mode .status-filter:hover {
  background-color: #3c3c50;
  border-color: rgba(255, 255, 255, 0.2);
}

/* ========== DARK MODE FOR FILTER CONTROLS ========== */


/* Input and select inside filter-controls */
body.dark-mode .filter-controls input,
body.dark-mode .filter-controls select {
  background-color: #2c2c3c;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .filter-controls input::placeholder {
  color: #bbb;
}

/* Button inside filter-controls */
body.dark-mode .filter-controls button {
  background-color: #3a3a4d;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color 0.3s, border-color 0.3s;
}

body.dark-mode .filter-controls button:hover {
  background-color: #50506a;
  border-color: rgba(255, 255, 255, 0.3);
}


/* ======================= */
/* Edit Mode: Editable Field */
body.dark-mode .edit-mode .editable-field {
  background-color: #2c2c3c !important;
  color: #f1f1f1;
  border-radius: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid #555 !important;
}

body.dark-mode .edit-mode .editable-field:focus {
  border: 1px solid #888;
  background-color: #333 !important;
}

/* ======================= */
/* Edit Mode: Form Section */
body.dark-mode .edit-mode .form-section {
  background-color: #1e1e2f !important;
  border-radius: 8px;
  box-shadow: 0 2px 15px rgba(255, 255, 255, 0.05);
  padding: 20px;
  margin-bottom: 20px;
  color: #f1f1f1;
}

/* ======================= */
/* Change Photo Button */
body.dark-mode #personalInfoSection .change-photo-btn {
  background: var(--primary-color);
  color: white;
  border: 2px solid #444;
}

/* ======================= */
/* Label Text */
body.dark-mode #personalInfoSection .label-text {
  color: #cccccc;
}

body.dark-mode #personalInfoSection .form-section-title {
  color: #E5E7E8;
}

body.dark-mode #personalInfoSection .form-actions {
  border-top-color: #333;
}

body.dark-mode #personalInfoSection .profile-avatar-wrapper {
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

body.dark-mode #personalInfoSection .profile-upload-overlay {
  background: rgba(0, 0, 0, 0.7);
}

/* ======================= */
/* Header Shadow */
body.dark-mode #personalInfoSection .header-shadow {
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.04);
}

body.dark-mode #helpSection .btn-link {
  color: #f1f1f1;
  text-decoration: none;
}

/* ========== DARK MODE FOR TRYMZO HEADER ========== */
body.dark-mode .trymzo-header {
  height: calc(54px + var(--safe-top));
  padding-top: var(--safe-top);
  padding-bottom: 6px;
  background: linear-gradient(180deg, #1a1a1a 0%, #1e1e1e 90%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 107, 0, 0.1);
}

body.dark-mode .header-btn {
  color: #e0e0e0;
}

body.dark-mode .header-btn:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}

body.dark-mode .trymzo-logo img {
  filter: brightness(0.95);
}

/* ========== DARK MODE FOR BOTTOM NAVIGATION ========== */
body.dark-mode .trymzo-bottom-nav {
  background: linear-gradient(0deg, #1a1a1a 0%, #1e1e1e 90%);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .trymzo-bottom-nav .nav-item {
  color: #999;
}

body.dark-mode .trymzo-bottom-nav .nav-item.active,
body.dark-mode .trymzo-bottom-nav .nav-item:hover {
  color: #FF6B00;
}

body.dark-mode .trymzo-bottom-nav .nav-item i {
  color: inherit;
}

/* ========== DARK MODE FOR MAIN CONTENT ========== */
body.dark-mode .main-content {
  background-color: #121212;
  color: #e0e0e0;
}

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

/* ========== DARK MODE FOR CUSTOM SWITCHES ========== */
body.dark-mode .custom-control-input:checked~.custom-control-label::before {
  background-color: #FF6B00;
  border-color: #FF6B00;
}

body.dark-mode .custom-control-input~.custom-control-label::before {
  background-color: #2a2a2a;
  border-color: #555;
}

body.dark-mode .custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(255, 107, 0, 0.25);
}

body.dark-mode .custom-control-label {
  color: #e0e0e0;
}

/* ========== DARK MODE FOR SETTINGS PAGE ========== */
body.dark-mode #settingsContainer {
  background-color: transparent;
}

body.dark-mode #settingsContainer .list-group-item {
  background-color: #1e1e1e;
  border-color: #333;
  color: #e0e0e0;
}

body.dark-mode #settingsContainer .list-group-item:hover {
  background-color: #2a2a2a;
}

body.dark-mode #settingsContainer .profile-avatar img {
  border: 2px solid #444;
}

body.dark-mode #settingsContainer .profile-name {
  color: #ffffff;
}

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

body.dark-mode #settingsContainer .border-bottom {
  border-color: #333 !important;
}

body.dark-mode #settingsContainer .btn-outline-danger {
  border-color: #d63031;
  color: #d63031;
}

body.dark-mode #settingsContainer .btn-outline-danger:hover {
  background-color: #d63031;
  color: #fff;
}

/* ========== DARK MODE FOR LOADERS ========== */
body.dark-mode #trymzo-loader:not(.overlay-mode) {
  background-color: #121212;
}

body.dark-mode #trymzo-loader:not(.overlay-mode) .tzl-ring::before {
  background-color: #121212;
}

body.dark-mode #trymzo-loader:not(.overlay-mode) .tzl-wordmark {
  color: #ffffff;
}

body.dark-mode #trymzo-loader:not(.overlay-mode) .tzl-tagline {
  color: #888;
}

/* ========== DARK MODE FOR TOP LOADER ========== */
body.dark-mode #top-loader {
  background: linear-gradient(90deg, #FF6B00, #FF8C42);
}

/* ========== DARK MODE FOR PROFILE SECTION ========== */
body.dark-mode .app-sidebar .profile {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.dark-mode .app-sidebar .profile-name {
  color: #ffffff;
}

body.dark-mode .app-sidebar .profile-image {
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* ========== DARK MODE FOR BUTTON PRIMARY ========== */
body.dark-mode .btn-primary {
  background-color: #FF6B00;
  border-color: #FF6B00;
  color: #fff;
}

body.dark-mode .btn-primary:hover {
  background-color: #FF8C42;
  border-color: #FF8C42;
}

body.dark-mode .btn-link {
  color: #FF6B00;
}

body.dark-mode .btn-link:hover {
  color: #FF8C42;
}

/* ========== DARK MODE FOR TEXT PRIMARY ========== */
body.dark-mode .text-primary {
  color: #FF6B00 !important;
}

/* ========== DARK MODE FOR SPINNER ========== */
body.dark-mode .spinner-border.text-primary {
  border-color: #FF6B00;
  border-right-color: transparent;
}

/* ========== DARK MODE FOR IMAGES ========== */
body.dark-mode img {
  opacity: 0.95;
}

body.dark-mode img:hover {
  opacity: 1;
}

/* ========== DARK MODE FOR SELECT ELEMENTS ========== */
body.dark-mode select.form-control,
body.dark-mode select {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #444;
}

body.dark-mode select.form-control:focus,
body.dark-mode select:focus {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #666;
}

/* ========== DARK MODE FOR TEXTAREA ========== */
body.dark-mode textarea.form-control {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #444;
}

body.dark-mode textarea.form-control:focus {
  background-color: #2a2a2a;
  color: #fff;
  border-color: #666;
}

/* ========== DARK MODE FOR COLLAPSE/CARD BODIES ========== */
body.dark-mode .collapse {
  background-color: transparent;
}

body.dark-mode .card-body {
  background-color: #1e1e1e;
  color: #e0e0e0;
}

body.dark-mode .card-header {
  background-color: #2a2a2a;
  border-bottom-color: #444;
  color: #fff;
}

body.dark-mode .card-footer {
  background-color: #2a2a2a;
  border-top-color: #444;
  color: #fff;
}

/* ========== DARK MODE FOR SWEETALERT2 ========== */
body.dark-mode .swal2-popup {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

body.dark-mode .swal2-title {
  color: #ffffff !important;
}

body.dark-mode .swal2-content {
  color: #e0e0e0 !important;
}

body.dark-mode .swal2-confirm {
  background-color: #FF6B00 !important;
}

body.dark-mode .swal2-cancel {
  background-color: #444 !important;
  color: #fff !important;
}

/* ========== DARK MODE FOR THEME SELECTOR MODAL ========== */
body.dark-mode .theme-option {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .theme-option:hover {
  background-color: #2a2a2a !important;
}

body.dark-mode .theme-option .font-weight-bold {
  color: #ffffff !important;
}

body.dark-mode .theme-option small {
  color: #aaa !important;
}

/* ========== DARK MODE FOR CUSTOM SCROLLBARS ========== */
body.dark-mode ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
  background: #1a1a1a;
}

body.dark-mode ::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox scrollbar */
body.dark-mode {
  scrollbar-width: thin;
  scrollbar-color: #444 #1a1a1a;
}

/* ===========================================================
   ⚙️ DARK MODE FOR SETTINGS PAGE
   =========================================================== */
body.dark-mode #settingsContainer .settings-profile-card {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(30, 30, 30, 0.95) 100%);
  border-color: rgba(255, 107, 0, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode #settingsContainer .profile-avatar img {
  border-color: rgba(255, 107, 0, 0.4);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode #settingsContainer .profile-name {
  color: #FFFFFF;
}

body.dark-mode #settingsContainer .profile-meta {
  color: #AAB1B3;
}

body.dark-mode #settingsContainer .settings-section-title {
  color: #7A868A;
}

body.dark-mode #settingsContainer .settings-list-item {
  background-color: #1E1E1E;
  border-bottom-color: #333;
}

body.dark-mode #settingsContainer .settings-list-item:hover {
  background-color: #2A2A2A;
}

body.dark-mode #settingsContainer .settings-list-item:hover::before {
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.3) 0%, transparent 100%);
}

body.dark-mode #settingsContainer .settings-list-item:active {
  background-color: #252525;
}

body.dark-mode #settingsContainer .settings-list-item:focus,
body.dark-mode #settingsContainer .settings-list-item:focus-visible {
  outline: none;
  text-decoration: none;
  box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.4);
}

body.dark-mode #settingsContainer .settings-icon {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2) 0%, rgba(255, 107, 0, 0.1) 100%);
  color: #FF8C42;
}

body.dark-mode #settingsContainer .settings-list-item:hover .settings-icon {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.3) 0%, rgba(255, 107, 0, 0.2) 100%);
}

body.dark-mode #settingsContainer .settings-item-label {
  color: #E5E7E8;
}

body.dark-mode #settingsContainer .settings-item-value {
  color: #AAB1B3;
}

body.dark-mode #settingsContainer .settings-chevron {
  color: #555;
}

body.dark-mode #settingsContainer .settings-list-item:hover .settings-chevron {
  color: #FF8C42;
}

body.dark-mode #settingsContainer .settings-logout-btn {
  background: linear-gradient(135deg, #1E1E1E 0%, #252525 100%);
  border-color: #EA4335;
  color: #EA4335;
  box-shadow: 0 2px 8px rgba(234, 67, 53, 0.2);
}

body.dark-mode #settingsContainer .settings-logout-btn:hover {
  background: #EA4335;
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(234, 67, 53, 0.4);
}

body.dark-mode #settingsContainer .settings-edit-btn {
  background: rgba(255, 107, 0, 0.2);
  color: #FF8C42;
}

body.dark-mode #settingsContainer .settings-edit-btn:hover {
  background: rgba(255, 107, 0, 0.3);
}

body.dark-mode #settingsContainer .settings-sub-item {
  background-color: #1A1A1A;
}

body.dark-mode #settingsContainer .settings-sub-item .settings-icon {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.15) 0%, rgba(255, 107, 0, 0.08) 100%);
}

body.dark-mode #settingsContainer .custom-control-label::before {
  background-color: #444;
}

body.dark-mode #settingsContainer .custom-control-label::after {
  background-color: #FFFFFF;
}

/* ===========================================================
   🎨 DARK MODE FOR THEME PAGE
   =========================================================== */
body.dark-mode #themeContainer .theme-section-title {
  color: #7A868A;
}

body.dark-mode #themeContainer .theme-list-item {
  background-color: #1E1E1E;
  border-bottom-color: #333;
}

body.dark-mode #themeContainer .theme-list-item:hover {
  background-color: #2A2A2A;
}

body.dark-mode #themeContainer .theme-list-item:hover::before {
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.3) 0%, transparent 100%);
}

body.dark-mode #themeContainer .theme-list-item:active {
  background-color: #252525;
}

body.dark-mode #themeContainer .theme-icon {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2) 0%, rgba(255, 107, 0, 0.1) 100%);
  color: #FF8C42;
}

body.dark-mode #themeContainer .theme-list-item:hover .theme-icon {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.3) 0%, rgba(255, 107, 0, 0.2) 100%);
}

body.dark-mode #themeContainer .theme-item-label {
  color: #E5E7E8;
}

/* 🎨 DARK MODE FOR LANGUAGE PAGE
   =========================================================== */
body.dark-mode #languageContainer .language-section-title {
  color: #7A868A;
}

body.dark-mode #languageContainer .language-list-item {
  background-color: #1E1E1E;
  border-bottom-color: #333;
}

body.dark-mode #languageContainer .language-list-item:hover {
  background-color: #2A2A2A;
}

body.dark-mode #languageContainer .language-list-item:hover::before {
  background: linear-gradient(90deg, rgba(255, 107, 0, 0.3) 0%, transparent 100%);
}

body.dark-mode #languageContainer .language-list-item:active {
  background-color: #252525;
}

body.dark-mode #languageContainer .language-icon {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.2) 0%, rgba(255, 107, 0, 0.1) 100%);
  color: #FF8C42;
}

body.dark-mode #languageContainer .language-list-item:hover .language-icon {
  background: linear-gradient(135deg, rgba(255, 107, 0, 0.3) 0%, rgba(255, 107, 0, 0.2) 100%);
}

body.dark-mode #languageContainer .language-item-label {
  color: #E5E7E8;
}

body.dark-mode #languageContainer .language-item-description {
  color: #7A868A;
}

body.dark-mode #themeContainer .theme-item-description {
  color: #AAB1B3;
}

body.dark-mode #themeContainer .theme-check {
  color: #FF8C42;
}