/* ===== GLOBAL DARK MODE (FORCE) ===== */

/* Tło strony na czarno + domyślny biały tekst */
body.dark-theme {
  background: #000 !important;
  color: #fff !important;
}

/* Główne kontenery też na czarno */
body.dark-theme .navbar,
body.dark-theme .sidebar,
body.dark-theme .content,
body.dark-theme #content-area,
body.dark-theme footer {
  background: #000 !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* ✅ Najważniejsze: wymuś biały tekst wszędzie (przebija inline style) */
body.dark-theme :where(
  p, span, div, li, a,
  h1, h2, h3, h4, h5, h6,
  small, strong, em, label,
  button, td, th
) {
  color: #fff !important;
}

/* Usuń jasne tła w „ramkach” i elementach z inline background
   (nie ruszamy obrazków/iframe) */
body.dark-theme :where(div, section, article, main, header, aside, footer)
:not(img):not(svg):not(iframe):not(video):not(canvas) {
  background-color: transparent !important;
  border-color: #333 !important;
}

/* Formularze (żeby nie były „niewidoczne” na czarnym) */
body.dark-theme input,
body.dark-theme textarea,
body.dark-theme select {
  background: #111 !important;
  color: #fff !important;
  border-color: #333 !important;
}

/* Przyciski/menu dla czytelności */
body.dark-theme .menu-btn,
body.dark-theme .toggle-btn,
body.dark-theme .theme-control {
  background: #111 !important;
  color: #fff !important;
  border-color: #fff !important;
}
body.dark-theme .menu-btn:hover,
body.dark-theme .toggle-btn:hover,
body.dark-theme .theme-control:hover {
  background: #1a1a1a !important;
}

body.dark-theme .navbar {
  background: #000 !important;
}

/* Linki w navbarze – kapsułki + biały tekst */
body.dark-theme .navbar .nav-link {
  background: #111 !important;
  color: #fff !important;
  border-color: #444 !important;
  opacity: 1 !important;
  visibility: visible !important;
  -webkit-text-fill-color: #fff !important; /* czasem pomaga w Safari/Chrome */
}

/* WAŻNE: przebij selektory z data-color (bo są bardziej “konkretne”) */
body.dark-theme .navbar .nav-link[data-color] {
  color: #fff !important;
  border-color: #444 !important;
}

/* Hover/focus żeby było widać interakcję */
body.dark-theme .navbar .nav-link:hover,
body.dark-theme .navbar .nav-link:focus-visible {
  background: #222 !important;
  color: #fff !important;
}

/* ===== WYJĄTEK: białe sekcje sponsorów w stopce mają czarny tekst ===== */

body.dark-theme .footer-experience,
body.dark-theme .footer-media-patrons {
  background: #fff !important;      /* zostaje białe tło */
  border-color: #ddd !important;
}

/* wszystko w środku (h2/h3/p itd.) na czarno */
body.dark-theme .footer-experience *,
body.dark-theme .footer-media-patrons * {
  color: #000 !important;
}

/* gdyby były linki */
body.dark-theme .footer-experience a,
body.dark-theme .footer-media-patrons a {
  color: #000 !important;
}

/* ===== WYJĄTEK: SELECT "Miasto" ma jasny wygląd w dark mode ===== */
/* Podmień #city-select na ID/klasę Twojego selecta jeśli jest inne */

body.dark-theme #city-select {
  background: #fff !important;
  color: #000 !important;
  border-color: #444 !important;
  -webkit-text-fill-color: #000 !important; /* czasem pomaga w Chrome/Safari */
}

body.dark-theme #city-select option {
  background: #fff !important;
  color: #000 !important;
}

/* Dla pewności przy focus */
body.dark-theme #city-select:focus {
  outline: 2px solid #666 !important;
}