/* Dark Mode Text Visibility Fixes */

[data-theme="dark"] {
  /* Ensure all text elements use light colors */
  color: var(--dark-color);
}

[data-theme="dark"] * {
  /* Override any hardcoded dark colors */
  color: inherit;
}

/* Headings */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6 {
  color: var(--dark-color) !important;
}

/* Paragraphs and text */
[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] div,
[data-theme="dark"] li,
[data-theme="dark"] td,
[data-theme="dark"] th {
  color: var(--dark-color) !important;
}

/* Links */
[data-theme="dark"] a {
  color: var(--accent-color) !important;
}

[data-theme="dark"] a:hover {
  color: var(--tertiary-color) !important;
}

/* Cards and containers */
[data-theme="dark"] .card,
[data-theme="dark"] .section,
[data-theme="dark"] .container {
  color: var(--dark-color);
}

/* Form elements - Ensure text is visible in all themes */
input,
textarea,
select {
  color: var(--dark-color) !important;
}

[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  color: var(--dark-color) !important;
  background-color: var(--light-gray) !important;
}

/* Phone number inputs specifically */
input[type="tel"],
input[type="phone"],
input[name*="phone"],
input[id*="phone"] {
  color: var(--dark-color) !important;
  -webkit-text-fill-color: var(--dark-color) !important;
}

/* Ensure phone inputs are visible on desktop/larger screens */
@media (min-width: 769px) {
  input[type="tel"],
  input[type="phone"],
  input[name*="phone"],
  input[id*="phone"],
  .form-group input[type="tel"],
  .form-group input[type="phone"],
  .form-group input[name*="phone"],
  .form-group input[id*="phone"] {
    color: var(--dark-color) !important;
    -webkit-text-fill-color: var(--dark-color) !important;
  }
}

[data-theme="dark"] input[type="tel"],
[data-theme="dark"] input[type="phone"],
[data-theme="dark"] input[name*="phone"],
[data-theme="dark"] input[id*="phone"] {
  color: var(--dark-color) !important;
  background-color: var(--light-gray) !important;
  -webkit-text-fill-color: var(--dark-color) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7 !important;
}

/* Labels */
[data-theme="dark"] label {
  color: var(--dark-color) !important;
}

/* Buttons - ensure text is visible */
[data-theme="dark"] .btn {
  color: var(--white) !important;
}

[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-nature {
  color: var(--white) !important;
}

/* Navigation */
[data-theme="dark"] .nav-link {
  color: var(--dark-color) !important;
}

[data-theme="dark"] .nav-link:hover,
[data-theme="dark"] .nav-link.active {
  color: var(--accent-color) !important;
}

/* Breadcrumbs */
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb a {
  color: var(--dark-color) !important;
}

/* Testimonials */
[data-theme="dark"] .testimonial-content p {
  color: var(--dark-color) !important;
}

[data-theme="dark"] .testimonial-author h4 {
  color: var(--accent-color) !important;
}

[data-theme="dark"] .testimonial-author span {
  color: var(--text-muted) !important;
}

/* Section titles and subtitles */
[data-theme="dark"] .section-title {
  color: var(--accent-color) !important;
}

[data-theme="dark"] .section-subtitle {
  color: var(--text-muted) !important;
}

/* Cards and boxes */
[data-theme="dark"] .card-title,
[data-theme="dark"] .card-body {
  color: var(--dark-color) !important;
}

/* Tables */
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
  color: var(--dark-color) !important;
  border-color: var(--medium-gray) !important;
}

/* Lists */
[data-theme="dark"] ul,
[data-theme="dark"] ol,
[data-theme="dark"] li {
  color: var(--dark-color) !important;
}

/* Icons - ensure they're visible */
[data-theme="dark"] .fas,
[data-theme="dark"] .far,
[data-theme="dark"] .fab {
  color: var(--dark-color);
}

/* Override any white text on dark backgrounds */
[data-theme="dark"] .text-white {
  color: var(--dark-color) !important;
}

/* Ensure contrast for important elements */
[data-theme="dark"] .highlight,
[data-theme="dark"] .accent {
  color: var(--accent-color) !important;
}

/* Footer text */
[data-theme="dark"] footer,
[data-theme="dark"] footer * {
  color: var(--dark-color) !important;
}

/* Ensure readable text in modals and overlays */
[data-theme="dark"] .modal,
[data-theme="dark"] .overlay {
  color: var(--dark-color) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-body {
  color: var(--dark-color) !important;
  background-color: var(--white) !important;
}