/* Theme overrides to ensure proper application of theme styles */

/* General theme overrides that apply to all themes */
body[class*="theme-"] {
  /* Allow each theme to control its own background */
}

/* Link styles (excluding menu links) */
body[class*="theme-"] a:not(.dropbtn):not(.dropdown-content a):not(.submenu a) {
  color: var(--link-color) !important;
}

body[class*="theme-"] a:not(.dropbtn):not(.dropdown-content a):not(.submenu a):hover {
  color: var(--link-hover-color) !important;
}

/* Button styles */
body[class*="theme-"] button,
body[class*="theme-"] .button,
body[class*="theme-"] input[type="submit"],
body[class*="theme-"] input[type="button"] {
  background-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  border: 1px solid var(--button-border) !important;
}

body[class*="theme-"] button:hover,
body[class*="theme-"] .button:hover,
body[class*="theme-"] input[type="submit"]:hover,
body[class*="theme-"] input[type="button"]:hover {
  background-color: var(--button-hover-bg) !important;
}

/* Menu styles */
body[class*="theme-"] nav {
  background-color: var(--nav-bg) !important;
}

body[class*="theme-"] .dropbtn {
  color: var(--nav-text) !important;
}

body[class*="theme-"] .dropdown-content {
  background-color: var(--dropdown-bg, var(--secondary-color)) !important;
}

body[class*="theme-"] .dropdown-content a {
  color: var(--nav-link-color) !important;
}

body[class*="theme-"] .submenu {
  background-color: var(--dropdown-bg, var(--secondary-color)) !important;
}

body[class*="theme-"] .submenu a {
  color: var(--nav-link-color) !important;
}

/* Weather Module Styles */
body[class*="theme-"] .weather-test-preview,
body[class*="theme-"] .location-test-preview {
  margin-top: 15px;
  padding: 15px;
  background-color: var(--card-bg, #f8f9fa);
  border-radius: 5px;
  border: 1px solid var(--border-color, #e9ecef);
}

body[class*="theme-"] .weather-test-preview h5,
body[class*="theme-"] .location-test-preview h5 {
  margin-bottom: 10px;
  color: var(--text-color, #495057);
  font-size: 14px;
  font-weight: 600;
}

body[class*="theme-"] .weather-data-grid,
body[class*="theme-"] .location-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
  font-size: 13px;
}

body[class*="theme-"] .weather-data-grid div,
body[class*="theme-"] .location-data-grid div {
  padding: 5px;
  background-color: var(--input-bg, #ffffff);
  border-radius: 3px;
  border: 1px solid var(--border-color, #dee2e6);
  color: var(--text-color);
}

body[class*="theme-"] .troubleshooting-tips {
  margin-top: 15px;
  padding: 10px;
  background-color: var(--warning-bg, #fff3cd);
  border-radius: 5px;
  border: 1px solid var(--warning-border, #ffeaa7);
}

body[class*="theme-"] .troubleshooting-tips h6 {
  margin-bottom: 8px;
  color: var(--warning-text, #856404);
  font-size: 13px;
  font-weight: 600;
}

body[class*="theme-"] .troubleshooting-tips ul {
  margin: 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--warning-text, #856404);
}

body[class*="theme-"] .troubleshooting-tips li {
  margin-bottom: 3px;
}

/* Alert styles for weather module */
body[class*="theme-"] .alert {
  padding: 12px 15px;
  margin-bottom: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
}

body[class*="theme-"] .alert-success {
  color: var(--success-text, #155724);
  background-color: var(--success-bg, #d4edda);
  border-color: var(--success-border, #c3e6cb);
}

body[class*="theme-"] .alert-danger {
  color: var(--danger-text, #721c24);
  background-color: var(--danger-bg, #f8d7da);
  border-color: var(--danger-border, #f5c6cb);
}

body[class*="theme-"] .alert-info {
  color: var(--info-text, #0c5460);
  background-color: var(--info-bg, #d1ecf1);
  border-color: var(--info-border, #bee5eb);
}

body[class*="theme-"] .text-muted {
  color: var(--muted-text, #6c757d) !important;
  font-size: 12px;
}

/* Weather configuration setup guide */
body[class*="theme-"] .setup-guide {
  margin-top: 10px;
  padding: 10px 15px;
  background-color: var(--info-bg, #e7f3ff);
  border: 1px solid var(--info-border, #b3d9ff);
  border-radius: 5px;
  font-size: 14px;
}

body[class*="theme-"] .setup-guide p {
  margin: 0;
  color: var(--info-text, #0066cc);
}

body[class*="theme-"] .setup-guide i {
  margin-right: 5px;
}