/* Fix for dark mode text visibility in Settings page */

/* Force light text colors in dark mode for all elements with inline styles */
body.dark.settings-page [style*="color: #444"],
body.dark.settings-page [style*="color: #555"],
body.dark.settings-page [style*="color: #666"],
body.dark.settings-page [style*="color: #777"],
body.dark.settings-page [style*="color: #333"],
body.dark.settings-page [style*="color:#444"],
body.dark.settings-page [style*="color:#555"],
body.dark.settings-page [style*="color:#666"],
body.dark.settings-page [style*="color:#777"],
body.dark.settings-page [style*="color:#333"] {
  color: #e0e0e0 !important;
}

/* Main headings */
body.dark.settings-page h1[style*="color: #3f51b5"] {
  color: #e9c788; /* Gold color */
}

/* Section headings */
body.dark.settings-page h2[style*="color: #333"],
body.dark.settings-page h2[style*="color:#333"] {
  color: #ffffff !important;
}

/* Directly target any heading with inline styles */
body.dark.settings-page h1[style],
body.dark.settings-page h2[style],
body.dark.settings-page h3[style],
body.dark.settings-page h4[style],
body.dark.settings-page h5[style],
body.dark.settings-page h6[style] {
  color: #ffffff !important;
}

/* Section heading icons */
body.dark.settings-page h2 i[style*="color: #3f51b5"],
body.dark.settings-page h3 i[style*="color: #5c6bc0"] {
  color: #35a79c; /* Teal color */
}

/* Sub-headings */
body.dark.settings-page h3[style*="color: #444"] {
  color: #35a79c; /* Teal color */
}

/* Form labels */
body.dark.settings-page label[style*="color: #444"] {
  color: #e0e0e0;
  font-weight: 500;
}

/* Paragraphs and spans */
body.dark.settings-page p,
body.dark.settings-page span {
  color: #e0e0e0;
}

/* Username in profile section */
body.dark.settings-page #displayName {
  color: #ffffff;
}

/* Force dark backgrounds for elements with white background in dark mode */
body.dark.settings-page [style*="background: #fff"],
body.dark.settings-page [style*="background:#fff"],
body.dark.settings-page [style*="background: white"],
body.dark.settings-page [style*="background:#white"],
body.dark.settings-page [style*="background-color: #fff"],
body.dark.settings-page [style*="background-color:#fff"],
body.dark.settings-page [style*="background: #f8f9fa"],
body.dark.settings-page [style*="background:#f8f9fa"],
body.dark.settings-page [style*="background-color: #f8f9fa"],
body.dark.settings-page [style*="background-color:#f8f9fa"] {
  background-color: rgba(30, 30, 50, 0.7);
  border-color: rgba(78, 26, 74, 0.3);
}

/* Fix for buttons with light backgrounds */
body.dark.settings-page button[style*="background: #f0f2ff"],
body.dark.settings-page a[style*="background: #f0f2ff"] {
  background-color: rgba(30, 30, 50, 0.7);
  color: #35a79c;
  border-color: #35a79c;
}

/* Fix for edit profile button */
body.dark.settings-page .edit-profile-btn {
  background-color: #35a79c;
  color: white;
}

/* Fix border colors */
body.dark.settings-page [style*="border: 1px solid #e0e0e0"],
body.dark.settings-page [style*="border:1px solid #e0e0e0"],
body.dark.settings-page [style*="border-bottom: 1px solid #eee"],
body.dark.settings-page [style*="border-bottom:1px solid #eee"] {
  border-color: rgba(78, 26, 74, 0.3);
}

/* Fix specific elements by their ID */
body.dark.settings-page #shippingAddressDisplay {
  background-color: rgba(30, 30, 50, 0.7);
  color: #e0e0e0;
}

/* Input fields */
body.dark.settings-page input,
body.dark.settings-page select,
body.dark.settings-page textarea {
  background-color: rgba(30, 30, 50, 0.7);
  color: #e0e0e0;
  border-color: rgba(78, 26, 74, 0.3);
}

/* Comprehensive fix for any missed text elements in dark mode */
body.dark.settings-page * {
  color-scheme: dark;
}

body.dark.settings-page div,
body.dark.settings-page p,
body.dark.settings-page span,
body.dark.settings-page a,
body.dark.settings-page label,
body.dark.settings-page li {
  color: #e0e0e0;
}

/* Additional fixes for dark text elements with inline styles */
body.dark.settings-page [style*="color: black"],
body.dark.settings-page [style*="color:black"],
body.dark.settings-page [style*="color: #000"],
body.dark.settings-page [style*="color:#000"] {
  color: #ffffff !important;
}

/* Target any element with display:flex and color:#333 like in the screenshot */
body.dark.settings-page [style*="display: flex"][style*="color: #333"],
body.dark.settings-page [style*="display:flex"][style*="color: #333"],
body.dark.settings-page [style*="display: flex"][style*="color:#333"],
body.dark.settings-page [style*="display:flex"][style*="color:#333"] {
  color: #ffffff !important;
}

/* Last resort fix for any element with style attribute, excluding toggles and special elements */
body.dark.settings-page [style]:not(.toggle-input):not(.toggle-label):not(.toggle-ball):not([type="checkbox"]):not([type="radio"]):not(.toggle-switch):not(.toggle-slider):not([role="switch"]) {
  color: #e0e0e0 !important;
}

/* Enhance visibility of toggle elements in dark mode */
body.dark.settings-page .toggle-switch,
body.dark.settings-page .toggle-slider,
body.dark.settings-page [role="switch"],
body.dark.settings-page .switch,
body.dark.settings-page .toggle {
  background-color: rgba(30, 30, 50, 0.7) !important;
  border: 1px solid rgba(78, 26, 74, 0.3) !important;
}

body.dark.settings-page .toggle-label:after,
body.dark.settings-page .toggle-slider:after,
body.dark.settings-page .toggle-switch:after,
body.dark.settings-page [role="switch"]:after,
body.dark.settings-page .switch:after {
  background-color: #35a79c !important;
  border: 1px solid #209cb3 !important;
  box-shadow: 0 0 5px rgba(33, 156, 179, 0.5) !important;
}

body.dark.settings-page input[type="checkbox"],
body.dark.settings-page input[type="radio"] {
  background-color: rgba(30, 30, 50, 0.7) !important;
  border: 1px solid rgba(78, 26, 74, 0.3) !important;
}