/*
 * (7.10) Tryb nocny — Mateusz: przełącznik, domyślnie jasny.
 * Jeden plik dla panelu biura, panelu ekipy i Strefy Podwykonawcy.
 * Cała strona jest odwracana kolorystycznie (z zachowaniem odcieni), a zdjęcia, filmy, podpisy,
 * PDF-y i ikony map wracają do oryginału. Dzięki temu działa też na kolorach wpisanych na sztywno.
 * (8.10) Mapy zostają JASNE (jak w dzień) — Mateusz: „w trybie ciemnym jasna mapa”.
 */
@media screen {
  html.ciemny { filter: invert(1) hue-rotate(180deg); background: #fff; }

  /* Wracają do oryginalnych kolorów */
  html.ciemny img,
  html.ciemny video,
  html.ciemny iframe,
  html.ciemny embed,
  html.ciemny object,
  html.ciemny canvas,
  html.ciemny picture,
  html.ciemny svg image,
  html.ciemny [style*="background-image"],
  html.ciemny .leaflet-marker-icon,
  html.ciemny .tryb-oryginal,
  html.ciemny .sidebar-d { filter: invert(1) hue-rotate(180deg); }
  /* Ikony w środku elementu, który już wrócił do oryginału, nie mogą się odwrócić drugi raz */
  html.ciemny .sidebar-d img, html.ciemny .tryb-oryginal img, html.ciemny .tryb-oryginal canvas { filter: none; }
  /* Podpis na ekranie: białe tło pod płótnem, czarny długopis */
  html.ciemny canvas { background-color: #fff; }

  /* Mapa (Leaflet) w całości jak w trybie jasnym: kafelki, trasy, pinezki i dymki */
  html.ciemny .leaflet-map-pane, html.ciemny .leaflet-container { filter: invert(1) hue-rotate(180deg); }
  html.ciemny .leaflet-container .leaflet-map-pane,
  html.ciemny .leaflet-container img, html.ciemny .leaflet-container canvas,
  html.ciemny .leaflet-container .leaflet-marker-icon,
  html.ciemny .leaflet-container [style*="background-image"] { filter: none; }
  html.ciemny .leaflet-container canvas { background-color: transparent; }

  /* Strona ciemniejsza niż karty (po odwróceniu: tło prawie czarne, karty grafitowe) */
  html.ciemny body { background-color: #fff !important; }
  html.ciemny body.bg-gray-50, html.ciemny body.bg-gray-100 { background-color: #fff !important; }
  html.ciemny .bg-white { background-color: #e6e7ea !important; }
  html.ciemny .bg-gray-50, html.ciemny .bg-slate-50 { background-color: #d9dbe0 !important; }
  html.ciemny .bg-gray-100, html.ciemny .bg-slate-100 { background-color: #cdd0d6 !important; }

  /* Cienie po odwróceniu świeciłyby na biało */
  html.ciemny .shadow, html.ciemny .shadow-sm, html.ciemny .shadow-md, html.ciemny .shadow-lg,
  html.ciemny .shadow-xl, html.ciemny .shadow-2xl { box-shadow: 0 0 0 1px rgba(0,0,0,.08) !important; }

  /* Przyciemnienie pod oknami (po odwróceniu ma zostać ciemne) */
  html.ciemny [style*="background:rgba(0,0,0"], html.ciemny [style*="background: rgba(0,0,0"],
  html.ciemny [style*="background-color:rgba(0,0,0"], html.ciemny [style*="background-color: rgba(0,0,0"],
  html.ciemny .sidebar-backdrop, html.ciemny [class*="bg-black/"], html.ciemny .bg-black.bg-opacity-50,
  html.ciemny .bg-black.bg-opacity-40, html.ciemny .bg-black.bg-opacity-60 { background-color: rgba(255,255,255,.55) !important; }

  /* Pola formularzy — lekko odcięte od karty */
  html.ciemny input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  html.ciemny select, html.ciemny textarea { background-color: #f4f5f7; color: #111827; }
  html.ciemny ::placeholder { color: #8b919c; }
  html.ciemny input[type=date], html.ciemny input[type=time], html.ciemny input[type=month] { color-scheme: light; }
}

/* Przycisk przełącznika */
.tryb-nocny-btn { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }