/* 4GIS branding (2026-10-05) - ladowane na KAZDEJ stronie Lizmapa (strona startowa, mapa, panel admin, logowanie)
   przez webassets: bootstrap.css[]=assets/css/4gis-branding.css w app/system/mainconfig.ini.php (ConfigMap).
   Plik serwuje nginx z /www/branding/_default/ (hostPath /home/ubuntu/lizmap-stack/custom/branding).

   Po co: nginx podmienia pliki Lizmapa wedlug domeny (logo gminy w naglowku, pusty logo_footer.png, neutralny
   loading.svg), ale przegladarki trzymaja stare obrazki 30 dni. Parametr ?v= wymusza pobranie nowych.
   Zmiana loga gminy w przyszlosci = nowy plik + podbicie ?v= ponizej.

   Specyficznosc "html body #logo" wygrywa z motywem Lizmapa (themes/default/css/main.css: #logo),
   ale PRZEGRYWA z regulami !important z media/themes/default/css/main.css repozytoriow
   (herb 30 px na stronie mapy, wzorzec koscierzynski) - te zostaja bez zmian. */

html body #logo {
  background-image: url("/themes/default/css/img/logo.png?v=20261018");
}

/* stopka "Powered by 3Liz" (strony zwykle) i jej odpowiednik w prawym dolnym rogu mapy
   (od 2026-10-18 tylko obrazek logo_footer - w jego miejsce nginx wstawia logo 4GIS, patrz nizej) */
html body footer.footer img[src*='logo_footer'],
html body #attribution-box > img[src*='logo_footer'] {
  display: none;
}

/* wskaznik ladowania mapy */
html body #loading {
  background-image: url("/themes/default/css/img/loading.svg?v=20261005");
}

/* --- 2026-10-18 (Claude): logo 4GIS z odnosnikiem do strony firmy https://4gis.com.pl/ ---
   prawy dolny rog mapy (#attribution-box) i stopka strony startowej. Odnosnik <a class="sip-4gis"> wstawia nginx
   (sub_filter w lizmap-nginx-conf) w miejsce obrazka logo_footer.png ("Powered by 3Liz"); obrazek /sip/4gis.svg
   podaje nginx z /www/branding/_default/sip/. Bez sub_filter strona dziala, tylko bez logo 4GIS. */
html body .sip-4gis {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  vertical-align: middle;
  border-radius: 3px;
}

html body .sip-4gis img {
  display: block;
  width: auto;
  height: 20px;
}

html body #attribution-box .sip-4gis {
  margin: 0 2px 0 6px;
  padding: 3px 5px;
  background: rgba(255, 255, 255, 0.85);
}

html body .sip-4gis:hover img {
  opacity: 0.85;
}

html body .sip-4gis:focus-visible {
  outline: 2px solid #0b57d0;
  outline-offset: 2px;
}

/* telefon: logo nie zaslania okna narzedzia */
@media (max-width: 768px) {
  html body:has(#mapmenu li.nav-minidock.active) #attribution-box,
  html body:has(#mapmenu li.nav-dock.active) #attribution-box,
  html body:has(#mapmenu li.nav-right-dock.active) #attribution-box {
    display: none;
  }
}

/* panel "O mapie": maly herb gminy zamiast obrazka projektu - sip-marka.js (media/js/default katalogu projektow),
   styl ustawia sam skrypt (klasa img.sip-herb) */

/* SIP-STRONA-START strona startowa i logowanie - strona.css (sip-motyw strona --branding, 2026-10-18;
   zmiany w sip-motywy/strona/strona.css, potem ponownie sip-motyw strona --branding <katalog>).
   Plik jest ladowany na kazdej stronie Lizmapa, dlatego kazda regula zaczyna sie od
   html body:has(> #content.container) - tylko strony zwykle (startowa, repozytorium, logowanie Lizmapa);
   mapa (#content bez klasy) i panel administracyjny (#content.container-fluid) bez zmian. */
/* ==========================================================================
   SIP 4GIS - strona startowa Lizmapa 3.9 w wygladzie motywu E
   Plik dopisywany przez 'sip-motyw strona' do www/themes/default/css/view.css instalacji Lizmapa
   (ten plik Lizmap laduje tylko na stronach zwyklych: strona startowa, logowanie - nie na mapie).
   Logo gminy w naglowku: panel administracyjny Lizmapa, Motyw (logo naglowka).
   Nazwa w naglowku: panel administracyjny, nazwa aplikacji (appName).
   Logo 4GIS w stopce: podmiana w nginx (sub_filter) - opis w INSTRUKCJA.txt, punkt 8.
   ========================================================================== */
html body:has(> #content.container) {
  --sip-akcent: #2f4631;
  --sip-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --sip-tekst: #1b1f23;
  --sip-tekst-2: #4b5560;
  --sip-link: #0b57d0;
  --sip-fokus: #0b57d0;
  --sip-ramka: #c5cad0;
  --sip-ramka-pola: #8a939c;
  --sip-tlo-strony: #f3f4f6;
  --sip-najechanie: #e6e9ec;
  --sip-wys-naglowka: 64px;
  --sip-wys-naglowka-tel: 56px;
  --sip-pasek-akcentu: 4px;
  --sip-wys-pola: 36px;
  --sip-promien: 2px;
}

html body:has(> #content.container) {
  /* Lizmap daje body 75 px (60 px na mniejszych ekranach) pod swoj wyzszy naglowek */
  padding-top: var(--sip-wys-naglowka);
  background: var(--sip-tlo-strony);
  color: var(--sip-tekst);
  font-family: var(--sip-font);
  font-size: 14px;
}
/* Lizmap (assets/css/main.css): h1-h5 { font-weight: normal !important } */
html body:has(> #content.container) #title h1,
html body:has(> #content.container) .liz-repository-title,
html body:has(> #content.container) .liz-project-title,
html body:has(> #content.container) .modal-header h3 {
  font-weight: 600 !important;
}
html body:has(> #content.container) .btn,
html body:has(> #content.container) input,
html body:has(> #content.container) select,
html body:has(> #content.container) textarea,
html body:has(> #content.container) button {
  font-family: var(--sip-font);
}
html body:has(> #content.container) a {
  color: var(--sip-link);
}
html body:has(> #content.container) a:focus-visible,
html body:has(> #content.container) button:focus-visible,
html body:has(> #content.container) .btn:focus-visible,
html body:has(> #content.container) input:focus-visible,
html body:has(> #content.container) [tabindex]:focus-visible {
  outline: 2px solid var(--sip-fokus) !important;
  outline-offset: 2px;
  box-shadow: none;
}

/* --- Naglowek (jak na mapie) ------------------------------------------------ */
html body:has(> #content.container) #header {
  height: var(--sip-wys-naglowka);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 0 0 16px;
  background: #ffffff !important;
  background-image: none !important;
  color: var(--sip-tekst);
  font-size: 14px;
  border: 0;
  box-shadow: inset 0 var(--sip-pasek-akcentu) 0 var(--sip-akcent), inset 0 -1px 0 var(--sip-ramka);
}
html body:has(> #content.container) #logo {
  flex: none;
  float: none;
  width: 44px;
  min-width: 0;
  height: 44px;
  margin: 0 12px 0 0;
  padding: 0;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
html body:has(> #content.container) #title {
  position: static;
  top: auto;
  transform: none;
  float: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: calc(100% - 240px);
  height: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
}
html body:has(> #content.container) #title h1,
html body:has(> #content.container) #title h2 {
  display: block;
  position: static;
  margin: 0;
  padding: 0;
  text-shadow: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body:has(> #content.container) #title h1 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--sip-tekst);
}
html body:has(> #content.container) #title h2 {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--sip-tekst-2);
}
html body:has(> #content.container) #title h2 a {
  color: inherit;
}
html body:has(> #content.container) #headermenu {
  position: fixed;
  top: var(--sip-pasek-akcentu);
  left: auto;
  right: 0;
  height: calc(var(--sip-wys-naglowka) - var(--sip-pasek-akcentu) - 1px);
  min-height: 0;
  /* bootstrap-responsive (do 767 px): .navbar-fixed-top { margin: 0 -20px } - przycisk wychodzil za ekran */
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  background: transparent;
}
html body:has(> #content.container) #headermenu .navbar-inner {
  display: flex;
  align-items: center;
  height: 100%;
  min-height: 0;
  padding: 0 16px 0 0;
  background: transparent !important;
  border: 0;
  box-shadow: none;
}
html body:has(> #content.container) #headermenu ul.nav {
  float: none;
  display: flex;
  margin: 0;
}
html body:has(> #content.container) #headermenu ul.nav > li {
  float: none;
}
html body:has(> #content.container) #headermenu li.login > a,
html body:has(> #content.container) #headermenu li.user > a,
html body:has(> #content.container) #headermenu li.home > a,
html body:has(> #content.container) #headermenu li.dropdown > a.dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--sip-wys-pola);
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: var(--sip-promien);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-shadow: none;
  text-decoration: none;
}
html body:has(> #content.container) #headermenu li.login > a {
  background: var(--sip-akcent);
  border: 1px solid var(--sip-akcent);
  color: #ffffff !important;
}
html body:has(> #content.container) #headermenu li.login > a:hover {
  background: color-mix(in srgb, var(--sip-akcent) 82%, #000000);
}
html body:has(> #content.container) #headermenu li.user > a,
html body:has(> #content.container) #headermenu li.home > a,
html body:has(> #content.container) #headermenu li.dropdown > a.dropdown-toggle {
  background: #ffffff;
  border: 1px solid var(--sip-ramka-pola);
  color: var(--sip-tekst) !important;
}
html body:has(> #content.container) #headermenu li.dropdown > a.dropdown-toggle:hover,
html body:has(> #content.container) #headermenu li.user > a:hover,
html body:has(> #content.container) #headermenu li.home > a:hover {
  background: var(--sip-najechanie);
}
html body:has(> #content.container) #headermenu li.login a .icon,
html body:has(> #content.container) #headermenu li.user a .icon,
html body:has(> #content.container) #headermenu li.home a .icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 0;
  background-image: none !important;
  background-color: currentColor !important;
  -webkit-mask: url(/sip/ikony/zaloguj.svg) center / 18px 18px no-repeat;
  mask: url(/sip/ikony/zaloguj.svg) center / 18px 18px no-repeat;
}
html body:has(> #content.container) #headermenu li.user a .icon {
  -webkit-mask-image: url(/sip/ikony/uzytkownik.svg);
  mask-image: url(/sip/ikony/uzytkownik.svg);
}
/* "Strona glowna" (np. na stronie logowania) */
html body:has(> #content.container) #headermenu li.home a .icon {
  -webkit-mask-image: url(/sip/ikony/dom.svg);
  mask-image: url(/sip/ikony/dom.svg);
}
html body:has(> #content.container) #headermenu .dropdown-menu {
  border: 1px solid var(--sip-ramka-pola);
  border-radius: var(--sip-promien);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
html body:has(> #content.container) #headermenu .dropdown-menu > li > a {
  padding: 8px 16px;
  color: var(--sip-tekst);
}
html body:has(> #content.container) #headermenu .dropdown-menu > li > a:hover,
html body:has(> #content.container) #headermenu .dropdown-menu > li > a:focus {
  background: var(--sip-najechanie);
  color: var(--sip-tekst);
}

/* --- Tresc ----------------------------------------------------------------- */
html body:has(> #content.container) #content {
  padding-top: 24px;
  padding-bottom: 8px;
}
/* wyszukiwarka projektow: w tresci strony zamiast pod naglowkiem; przy jednym projekcie zbedna */
html body:has(> #content.container) #search {
  position: static;
  display: block;
  margin: 0 0 16px;
}
html body:has(> #content.container) #content:not(:has(.liz-repository-project-item + .liz-repository-project-item)):not(:has(.liz-repository-project-list ~ .liz-repository-project-list)) #search {
  display: none;
}
html body:has(> #content.container) #search .input-prepend {
  display: flex;
}
html body:has(> #content.container) #search .input-prepend > .btn,
html body:has(> #content.container) #search #search-project {
  height: var(--sip-wys-pola);
  box-sizing: border-box;
  margin: 0;
  border: 1px solid var(--sip-ramka-pola);
  box-shadow: none;
  font-size: 14px;
}
html body:has(> #content.container) #search .input-prepend > .btn {
  min-width: var(--sip-wys-pola);
  border-right: 0;
  border-radius: var(--sip-promien) 0 0 var(--sip-promien);
  background: #ffffff;
  background-image: none;
  color: var(--sip-tekst);
  text-shadow: none;
}
html body:has(> #content.container) #search #search-project {
  width: 280px;
  padding: 0 10px;
  border-radius: 0 var(--sip-promien) var(--sip-promien) 0;
  background: #ffffff;
  color: var(--sip-tekst);
}
html body:has(> #content.container) #search #search-project::placeholder {
  color: var(--sip-tekst-2);
  opacity: 1;
}

html body:has(> #content.container) .liz-repository-title {
  margin: 0 0 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--sip-tekst);
}
html body:has(> #content.container) .liz-repository-project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 280px));
  gap: 16px;
  margin: 0 0 24px;
  padding: 0;
}
html body:has(> #content.container) .liz-repository-project-item .thumbnail {
  height: 100%;
  box-sizing: border-box;
  padding: 16px;
  background: #ffffff;
  border: 1px solid var(--sip-ramka);
  border-radius: var(--sip-promien);
  box-shadow: none;
}
html body:has(> #content.container) .liz-repository-project-item .thumbnail:hover {
  border-color: var(--sip-ramka-pola);
}
html body:has(> #content.container) .liz-project,
html body:has(> #content.container) .liz-project:hover {
  background: transparent;
}
html body:has(> #content.container) .liz-project img {
  display: block;
  width: 100%;
  height: 180px;
  margin: 0 auto;
  object-fit: contain;
}
html body:has(> #content.container) .liz-project-title {
  margin: 12px 0 14px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  color: var(--sip-tekst);
}
html body:has(> #content.container) .liz-project-title ~ p {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: auto 0 0;
}

/* przyciski: Zaladuj mape - kolor gminy, pozostale - obrys */
html body:has(> #content.container) #content .btn,
html body:has(> #content.container) .modal .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--sip-wys-pola);
  box-sizing: border-box;
  margin: 0;
  padding: 0 16px;
  border: 1px solid var(--sip-ramka-pola);
  border-radius: var(--sip-promien);
  background: #ffffff;
  background-image: none;
  box-shadow: none;
  color: var(--sip-tekst);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-shadow: none;
  text-decoration: none;
}
html body:has(> #content.container) #content .btn:hover,
html body:has(> #content.container) .modal .btn:hover {
  background: var(--sip-najechanie);
  color: var(--sip-tekst);
}
html body:has(> #content.container) #content .btn.liz-project-view,
html body:has(> #content.container) .modal .btn.liz-project-view {
  background: var(--sip-akcent);
  border-color: var(--sip-akcent);
  color: #ffffff;
}
html body:has(> #content.container) #content .btn.liz-project-view:hover,
html body:has(> #content.container) .modal .btn.liz-project-view:hover {
  background: color-mix(in srgb, var(--sip-akcent) 82%, #000000);
  color: #ffffff;
}

/* formularze (logowanie, konto, haslo): pola jak w oknach narzedzi, przycisk wysylania w kolorze gminy */
html body:has(> #content.container) #content input[type="text"],
html body:has(> #content.container) #content input[type="password"],
html body:has(> #content.container) #content input[type="email"],
html body:has(> #content.container) #content select,
html body:has(> #content.container) #content textarea {
  box-sizing: border-box;
  min-height: var(--sip-wys-pola);
  padding: 6px 10px;
  border: 1px solid var(--sip-ramka-pola);
  border-radius: var(--sip-promien);
  box-shadow: none;
  font-size: 14px;
  color: var(--sip-tekst);
}
html body:has(> #content.container) #content input[type="submit"].btn,
html body:has(> #content.container) #content .btn.btn-primary {
  background: var(--sip-akcent);
  border-color: var(--sip-akcent);
  color: #ffffff;
}
html body:has(> #content.container) #content input[type="submit"].btn:hover,
html body:has(> #content.container) #content .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--sip-akcent) 82%, #000000);
  color: #ffffff;
}
html body:has(> #content.container) #content .jforms-password-toggle-visibility {
  padding: 0 8px;
}

/* okno z metadanymi projektu */
html body:has(> #content.container) .modal {
  border: 1px solid var(--sip-ramka-pola);
  border-radius: var(--sip-promien);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
html body:has(> #content.container) .modal-header {
  padding: 12px 16px;
  background: #f3f4f6;
  border-bottom: 1px solid var(--sip-ramka);
}
html body:has(> #content.container) .modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
}
html body:has(> #content.container) .modal-header .close {
  margin-top: 0;
  font-size: 22px;
  opacity: 0.7;
}
html body:has(> #content.container) .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  background: #ffffff;
  border-top: 1px solid var(--sip-ramka);
  border-radius: 0 0 var(--sip-promien) var(--sip-promien);
  box-shadow: none;
}
html body:has(> #content.container) .modal-footer .btn + .btn {
  margin-left: 0;
}

/* --- Stopka: logo 4GIS z odnosnikiem zamiast Powered by 3Liz ----------------------- */
html body:has(> #content.container) footer.footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 8px 0 0;
  padding: 12px 0 16px;
  border-top: 1px solid var(--sip-ramka);
}
html body:has(> #content.container) footer.footer p {
  float: none;
  margin: 0;
}
html body:has(> #content.container) footer.footer img[src*='logo_footer'] {
  display: none;
}
html body:has(> #content.container) footer.footer .sip-4gis {
  display: inline-flex;
  align-items: center;
  padding: 4px;
  border-radius: var(--sip-promien);
}
html body:has(> #content.container) footer.footer .sip-4gis img {
  display: block;
  width: auto;
  height: 30px;
}

/* --- Telefon ---------------------------------------------------------------- */
@media (max-width: 767px) {
  html body:has(> #content.container) #header {
    height: var(--sip-wys-naglowka-tel);
    padding-left: 8px;
  }
  html body:has(> #content.container) #logo {
    width: 40px;
    height: 40px;
    margin-right: 10px;
  }
  html body:has(> #content.container) #title {
    max-width: calc(100% - 120px);
  }
  html body:has(> #content.container) #title h1 {
    font-size: 16px;
  }
  html body:has(> #content.container) #title h2 {
    font-size: 12px;
  }
  html body:has(> #content.container) #headermenu {
    height: calc(var(--sip-wys-naglowka-tel) - var(--sip-pasek-akcentu) - 1px);
  }
  html body:has(> #content.container) #headermenu .navbar-inner {
    padding-right: 8px;
  }
  html body:has(> #content.container) #headermenu li.login > a,
  html body:has(> #content.container) #headermenu li.user > a,
  html body:has(> #content.container) #headermenu li.home > a,
  html body:has(> #content.container) #headermenu li.dropdown > a.dropdown-toggle {
    min-width: 44px;
    height: 44px;
    justify-content: center;
    padding: 0 12px;
  }
  html body:has(> #content.container) {
    padding-top: var(--sip-wys-naglowka-tel);
  }
  html body:has(> #content.container) #content {
    padding: 16px 16px 0;
  }
  html body:has(> #content.container) .liz-repository-title {
    font-size: 20px;
  }
  html body:has(> #content.container) .liz-repository-project-list {
    grid-template-columns: 1fr;
  }
  html body:has(> #content.container) #content .btn,
  html body:has(> #content.container) .modal .btn {
    min-height: 44px;
    font-size: 16px;
  }
  html body:has(> #content.container) #search #search-project {
    width: 100%;
    height: 44px;
    font-size: 16px;
  }
  /* 16 px: iPhone nie powieksza strony przy wpisywaniu */
  html body:has(> #content.container) #content input[type="text"],
  html body:has(> #content.container) #content input[type="password"],
  html body:has(> #content.container) #content input[type="email"],
  html body:has(> #content.container) #content select,
  html body:has(> #content.container) #content textarea {
    min-height: 44px;
    font-size: 16px;
  }
  html body:has(> #content.container) #search .input-prepend > .btn {
    height: 44px;
    min-width: 44px;
  }
}

/* --bez-tytulu: tytul to wspolna nazwa aplikacji ("Lizmap"), byl niewidoczny juz wczesniej (kolor jak tlo
   naglowka) - w naglowku sam herb/logo domeny; tytul zostaje dla czytnikow ekranu. Szersze pole logo miesci
   tez logotypy poziome (np. Niepolomice), herby stoja przy lewej krawedzi.
   Wyjatek: domena z nazwa gminy - nginx (map $branding $sip_h1, sub_filter) wstawia wtedy
   <h1 class="sip-nazwa">SIP Gminy ...</h1> zamiast <h1>Lizmap</h1>: herb + nazwa jak w Lacku, bez podtytulu. */
html body:has(> #content.container) #title:not(:has(h1.sip-nazwa)) {
  position: absolute;
  width: 1px;
  max-width: none;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
html body:has(> #content.container) #header:not(:has(h1.sip-nazwa)) #logo {
  width: 220px;
  background-position: left center !important;
}
html body:has(> #content.container) #title:has(h1.sip-nazwa) h2 {
  display: none;
}
@media (max-width: 767px) {
  html body:has(> #content.container) #header:not(:has(h1.sip-nazwa)) #logo {
    width: 180px;
  }
}
/* SIP-STRONA-KONIEC */