/*
  4GIS — motyw „Jasny” dla portali gminnych Lizmap 3.9 (k3s)
  Wersja 1.2 (15.10.2026; 1.1 — kolory w zmiennych; 1.2 — kwadraty rozwijania grup w drzewie zamiast trójkątów). Na podstawie pomysłu wizualnego z Gemini, przepisany pod prawdziwą budowę strony LWC 3.9.

  Gdzie leży (jedna z dwóch dróg — opis w README.md obok):
    a) media/themes/default/css/map.css repozytorium gminy, zamiast dotychczasowego map.css (wzorzec kościerzyński
       albo motyw z serwera 232) — wtedy tylko ta gmina;
    b) /mnt/nfs-projects/media/themes/default/css/map.css — wspólny katalog, Lizmap 3.9 ładuje go we wszystkich
       repozytoriach; reguły mają przedrostek „html body”, więc wygrywają z dotychczasowym map.css repozytoriów.
  main.css repozytorium zostaje bez zmian — z niego bierze się herb (zmienna --ure-logo-url); w gminach bez niej
  herb daje 4gis-branding.css według domeny. Ten sam plik dla każdej gminy — nic w nim nie zmienia się per gmina.
  Sprawdzony w przeglądarce (bez wgrywania na serwer) na: Kościerzyna, Kobylnica, Niepołomice, Olkusz.

  Ograniczenia Lizmapa (view~media:getCssFile przepisuje plik przed wysłaniem):
    - każdy adres obrazka (funkcja url) dostaje z przodu adres getMedia repozytorium — dlatego w tym pliku nie ma żadnych obrazków;
    - wszystkie cudzysłowy podwójne są usuwane — dlatego tylko apostrofy (np. content: '').
  Bez zewnętrznych czcionek (Google Fonts) — czcionka systemowa (Segoe UI w Windows).

  Układ pływających paneli działa tylko na komputerze (#content bez klasy .mobile).
  Na telefonie zmieniają się tylko kolory — układ zostaje Lizmapa i wyszukiwarki ULDK.

  Kolory zmienia się w jednym miejscu: blok :root poniżej.
*/

:root {
  --g4-akcent: #2f4631;          /* zieleń 4GIS (ta sama co w dotychczasowym nagłówku) */
  --g4-akcent-2: #4e695b;
  --g4-akcent-jasny: #e6eee8;    /* tło zaznaczenia */
  --g4-hover: #eff3f0;           /* tło po najechaniu */
  --g4-tekst: #1c2420;
  --g4-tekst-2: #5a6860;
  --g4-panel: #ffffff;
  --g4-panel-2: #f6f8f7;         /* paski tytułów okien */
  --g4-ramka: rgba(28, 36, 32, 0.13);
  --g4-cien: 0 10px 28px -10px rgba(16, 26, 20, 0.28), 0 2px 6px rgba(16, 26, 20, 0.08);
  --g4-r: 12px;
  --g4-r-maly: 8px;
  --g4-odstep: 10px;
  --g4-menu: 44px;               /* szerokość lewego paska narzędzi */
  --g4-naglowek: 60px;
  --g4-font: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Roboto, Arial, sans-serif;
  --g4-fokus: rgba(47, 70, 49, 0.15);  /* obwódka pola z kursorem */
  --g4-tlo-mapy: #eef1ef;              /* tło pod mapą, zanim wczytają się kafle */
  --g4-rozwin-tlo: #e3e8e5;            /* kwadrat rozwijania grupy w drzewie warstw */
  --g4-rozwin-tlo-hover: #d2dbd5;
  --g4-rozwin-znak: #2a332e;
}

/* ------------------------------------------------------------------ */
/* 1. Czcionka i tło                                                   */
/* ------------------------------------------------------------------ */

html body {
  font-family: var(--g4-font);
  color: var(--g4-tekst);
  background: var(--g4-panel-2);
}

html body #map-content {
  background: var(--g4-tlo-mapy);
}

/* ------------------------------------------------------------------ */
/* 2. Nagłówek — biały pasek, herb gminy, tytuł, wyszukiwarka, logowanie */
/* ------------------------------------------------------------------ */

html body #header {
  background: var(--g4-panel) !important;
  color: var(--g4-tekst);
  border-bottom: 1px solid var(--g4-ramka);
  box-shadow: 0 2px 10px rgba(16, 26, 20, 0.06);
}

html body #title h1,
html body #title h2 {
  font-family: var(--g4-font);
  text-shadow: none;
}

html body #title h1 {
  color: var(--g4-tekst) !important;
}

html body #title h2 {
  color: var(--g4-tekst-2) !important;
}

/* wymiary nagłówka — tylko komputer (na telefonie Lizmap ma własny, niski nagłówek 30 px i pasek wyszukiwania pod nim) */
@media (min-width: 768px) {
  html body {
    padding-top: var(--g4-naglowek);
  }

  html body #header {
    height: var(--g4-naglowek);
  }

  /* herb: obraz i jego położenie daje main.css repozytorium (--ure-logo-url) albo 4gis-branding.css; tu tylko
     wysokość i marginesy. Szerokości nie ustawiamy — Niepołomice mają szerszy logotyp poziomy (200 px). */
  html body #logo {
    height: 44px;
    margin: 8px 12px 0 16px;
  }

  html body #title {
    margin: 0;
    padding: 0 10px 0 0;
    height: var(--g4-naglowek);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
  }

  html body #title h1 {
    margin: 0;
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body #title h2 {
    display: block;
    margin: 1px 0 0 0;
    font-size: 12px;
    line-height: 15px;
    font-weight: 400;
  }
}

/* pasek z wyszukiwarką i logowaniem — kolory (wszystkie ekrany) */
html body #headermenu,
html body #headermenu .navbar-inner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body #search-query {
  border: 1px solid var(--g4-ramka);
  background: var(--g4-panel-2);
  color: var(--g4-tekst);
  font-family: var(--g4-font);
  box-shadow: none;
}

html body #search-query:focus {
  background: var(--g4-panel);
  border-color: var(--g4-akcent-2);
  box-shadow: 0 0 0 3px var(--g4-fokus);
  outline: none;
}

/* przycisk czyszczenia wyszukiwania tylko wtedy, gdy coś wpisano */
html body #nominatim-search:has(#search-query:placeholder-shown) #header-clear {
  visibility: hidden;
}

html body #nominatim-search .search-icon,
html body #nominatim-search #header-clear {
  filter: brightness(0);
  opacity: 0.55;
}

html body #headermenu .nav > li > a,
html body #headermenu a {
  color: var(--g4-tekst) !important;
  text-shadow: none !important;
  font-family: var(--g4-font);
}

/* układ paska — tylko komputer. Lizmap kładzie pasek pod tytułem (top: 45px); przenosimy go na prawo, w środek
   wysokości nagłówka. Na telefonie zostaje układ Lizmapa (wyszukiwarka pod nagłówkiem, logowanie w rogu). */
@media (min-width: 768px) {
  html body #headermenu {
    top: 0;
    left: auto;
    height: var(--g4-naglowek);
    display: flex;
    align-items: center;
    padding-right: 14px;
  }

  html body #headermenu .navbar-inner {
    min-height: 0;
    padding: 0;
  }

  html body #auth .pull-right {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  html body #nominatim-search {
    margin: 0;
    float: none;
  }

  html body #search-query {
    position: static;
    width: 240px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 34px 0 14px;
    border-radius: 999px;
    font-size: 13px;
  }

  html body #headermenu .nav {
    margin: 0;
  }

  html body #headermenu .nav > li > a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
  }

  html body #headermenu .nav > li > a:hover,
  html body #headermenu .nav > li > a:focus {
    background: var(--g4-hover) !important;
  }
}

/* ikony w nagłówku (logowanie, menu użytkownika) są białe — przyciemniamy */
html body #headermenu .nav .icon,
html body #headermenu .nav [class*=icon-] {
  filter: brightness(0);
  opacity: 0.7;
}

html body #headermenu .dropdown-menu {
  border-radius: var(--g4-r-maly);
  border: 1px solid var(--g4-ramka);
  box-shadow: var(--g4-cien);
}

html body #headermenu .dropdown-menu a {
  font-weight: 400;
}

/* ------------------------------------------------------------------ */
/* 3. Lewy pasek narzędzi (#mapmenu)                                    */
/* ------------------------------------------------------------------ */

html body #mapmenu {
  background: var(--g4-panel) !important;
}

/* aktywna pozycja: zieleń, biała ikona (komputer i telefon) */
html body #mapmenu .nav-list > li.active > a,
html body #mapmenu .nav-list > li.active > a:hover {
  background-color: var(--g4-akcent);
}

html body #mapmenu .nav-list > li.active > a .icon {
  filter: brightness(0) invert(1);
  opacity: 1;
}

/* komputer: ikony Lizmapa są białe (sprite) — na jasnym pasku przyciemniamy je filtrem.
   Na telefonie menu ma ciemne pozycje z białym tekstem — zostają jak w Lizmapie. */
html body #content:not(.mobile) #mapmenu .nav-list > li:not(.active) > a .icon {
  filter: brightness(0);
  opacity: 0.72;
}

html body #content:not(.mobile) #mapmenu .nav-list > li > a {
  border-radius: var(--g4-r-maly);
  transition: background-color 0.15s ease;
}

html body #content:not(.mobile) #mapmenu .nav-list > li:not(.active) > a {
  background-color: transparent;
}

html body #content:not(.mobile) #mapmenu .nav-list > li:not(.active) > a:hover {
  background-color: var(--g4-hover);
}

/* komputer: pasek jako pływająca karta */
html body #content:not(.mobile) #mapmenu {
  top: var(--g4-odstep);
  left: var(--g4-odstep);
  width: var(--g4-menu);
  height: auto;
  max-height: calc(100% - 2 * var(--g4-odstep));
  padding: 4px 0;
  box-sizing: border-box;
  border-radius: var(--g4-r);
  border: 1px solid var(--g4-ramka);
  box-shadow: var(--g4-cien);
  overflow-x: hidden;
  overflow-y: auto;
}

html body #content:not(.mobile) #mapmenu > div {
  width: calc(var(--g4-menu) - 2px);
}

html body #content:not(.mobile) #mapmenu .nav-list {
  margin: 0;
  padding: 0;
}

html body #content:not(.mobile) #mapmenu .nav-list > li > a {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 3px 0 3px 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* mapa na całą szerokość (za paskiem), panele zaczynają się za paskiem */
html body #content:not(.mobile) #map-content {
  margin-left: 0;
}

html body #content:not(.mobile) #docks-wrapper {
  left: calc(var(--g4-menu) + var(--g4-odstep));
  width: calc(100% - var(--g4-menu) - var(--g4-odstep));
}

/* ------------------------------------------------------------------ */
/* 4. Panele (lewy, prawy, dolny, informacje o warstwie)                 */
/* ------------------------------------------------------------------ */

/* Lizmap daje panelom tło z !important (var(--color-background-primary)) — stąd !important */
html body #dock,
html body #sub-dock,
html body #right-dock,
html body #bottom-dock,
html body #mini-dock {
  background-color: var(--g4-panel) !important;
  color: var(--g4-tekst);
}

/* przewijanie paneli zostaje Lizmapa (overflow: auto) — nie ruszamy, żeby długie treści dało się przewinąć */
html body #content:not(.mobile) #dock,
html body #content:not(.mobile) #sub-dock,
html body #content:not(.mobile) #right-dock {
  margin: var(--g4-odstep) 0 var(--g4-odstep) var(--g4-odstep);
  border-radius: var(--g4-r);
  border: 1px solid var(--g4-ramka);
  box-shadow: var(--g4-cien);
}

html body #content:not(.mobile) #dock,
html body #content:not(.mobile) #right-dock {
  height: calc(100% - 2 * var(--g4-odstep));
}

/* na mniejszych ekranach (do 1280 px) lewy panel trochę węższy, żeby panel informacji o warstwie nie wchodził
   pod okna narzędzi z prawej (pływające panele zajmują ok. 30 px więcej niż w Lizmapie) */
@media (max-width: 1280px) {
  html body #content:not(.mobile) #dock {
    max-width: min(40%, 360px);
  }
}

/* informacje o warstwie: wysokość według treści (jak w Lizmapie), ale nie wyżej niż mapa */
html body #content:not(.mobile) #sub-dock {
  max-height: calc(100% - 2 * var(--g4-odstep));
}

/* prawy panel (np. wypis i wyrys) zostaje przy prawej krawędzi — Lizmap robi to przez margin-left: auto */
html body #content:not(.mobile) #right-dock {
  margin-left: auto;
  margin-right: var(--g4-odstep);
}

html body #content:not(.mobile) #bottom-dock {
  margin: 0 var(--g4-odstep) var(--g4-odstep) var(--g4-odstep);
  border-radius: var(--g4-r);
  border: 1px solid var(--g4-ramka);
  box-shadow: var(--g4-cien);
}

/* zakładki u góry lewego panelu (Warstwy / Informacja / Popup / Filtruj) */
html body #dock-tabs {
  border-bottom: 1px solid var(--g4-ramka);
}

html body #dock-tabs > li > a {
  font-family: var(--g4-font);
  font-size: 13px;
  color: var(--g4-tekst-2);
  border-radius: var(--g4-r-maly) var(--g4-r-maly) 0 0;
}

html body #dock-tabs > li.active > a {
  color: var(--g4-akcent);
  font-weight: 600;
}

html body #dock-close {
  background-color: var(--g4-hover);
  border: 1px solid var(--g4-ramka);
  border-radius: var(--g4-r-maly);
}

html body #dock-close:hover {
  background-color: var(--g4-akcent-jasny);
}

/* tła treści w panelach: Lizmap daje półprzezroczystą biel — ujednolicamy */
html body #dock .menu-content,
html body #sub-dock .menu-content,
html body #right-dock .menu-content,
html body #mini-dock .menu-content {
  background: transparent;
}

/* tytuły okien i paneli */
html body #dock h3,
html body #sub-dock h3,
html body #mini-dock h3,
html body #right-dock h3,
html body #bottom-dock h3,
html body .dock-subtitle {
  color: var(--g4-akcent);
  font-family: var(--g4-font);
  font-weight: 600;
  text-shadow: none;
}

html body #dock h3 .title,
html body #sub-dock h3 .title,
html body #right-dock h3 .title {
  font-size: 15px;
}

/* w oknach narzędzi 14 px — tytuł „Wyszukiwarka działek ewidencyjnych” mieści się w jednym wierszu */
html body #mini-dock h3 .title {
  font-size: 14px;
}

/* białe ikony w tytułach, krzyżyki zamykania i akcje warstw — przyciemniamy */
html body #dock h3 .icon,
html body #dock h3 [class*=icon-],
html body #sub-dock h3 .icon,
html body #sub-dock h3 [class*=icon-],
html body #right-dock h3 .icon,
html body #right-dock h3 [class*=icon-],
html body #bottom-dock h3 .icon,
html body #bottom-dock h3 [class*=icon-],
html body #mini-dock h3 .icon,
html body #mini-dock h3 [class*=icon-],
html body .mini-dock-close [class*=icon-],
html body .right-dock-close [class*=icon-],
html body .bottom-dock-close [class*=icon-],
html body .sub-dock-close [class*=icon-] {
  filter: brightness(0);
  opacity: 0.6;
}

/* ------------------------------------------------------------------ */
/* 5. Drzewo warstw                                                     */
/* ------------------------------------------------------------------ */

html body lizmap-treeview {
  font-family: var(--g4-font);
  font-size: 13px;
  color: var(--g4-tekst);
}

html body lizmap-treeview label {
  color: var(--g4-tekst);
}

html body lizmap-treeview .group > .node label {
  font-weight: 600;
}

html body lizmap-treeview .node {
  border-radius: 6px;
}

html body lizmap-treeview .node:hover {
  background: var(--g4-hover);
}

html body lizmap-treeview input[type=checkbox],
html body #filter input[type=checkbox] {
  accent-color: var(--g4-akcent);
}

/* rozwijanie grup: zamiast czerwonych trójkątów Lizmapa małe kwadraty z „+” / „−” (znaki rysowane CSS-em, bez
   obrazków). Kolory w zmiennych --g4-rozwin-* w bloku :root. */
html body lizmap-treeview div.expandable {
  top: 4px;
  left: -22px;
  width: 16px;
  height: 16px;
  padding: 0;
  box-sizing: border-box;
  border-radius: 4px;
  background: var(--g4-rozwin-tlo);
  transform: none;
  transition: background-color 0.15s ease;
  cursor: pointer;
}

html body lizmap-treeview div.expandable.expanded {
  transform: none;
}

html body lizmap-treeview div.expandable:hover {
  background: var(--g4-rozwin-tlo-hover);
}

html body lizmap-treeview div.expandable::before,
html body lizmap-treeview div.expandable::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 2px;
  background: var(--g4-rozwin-znak);
  border-radius: 1px;
  transform: translate(-50%, -50%);
}

html body lizmap-treeview div.expandable::after {
  width: 2px;
  height: 8px;
}

html body lizmap-treeview div.expandable.expanded::after {
  display: none;
}

/* odmiany do podglądu (klasy na <html> ustawia podgladMotywu.js na dobra_test): kwadrat w kolorze menu
   i strzałka zamiast plusa. Po wyborze — wpisać wybrane wartości do :root i usunąć te reguły. */
html.g4-drz-kolor {
  --g4-rozwin-tlo: var(--g4-akcent);
  --g4-rozwin-tlo-hover: var(--g4-akcent-2);
  --g4-rozwin-znak: #fff;
}

html.g4-drz-strzalka body lizmap-treeview div.expandable::after {
  display: none;
}

html.g4-drz-strzalka body lizmap-treeview div.expandable::before {
  width: 5px;
  height: 5px;
  background: transparent;
  border-radius: 0;
  border-right: 2px solid var(--g4-rozwin-znak);
  border-bottom: 2px solid var(--g4-rozwin-znak);
  transform: translate(-70%, -50%) rotate(-45deg);
}

html.g4-drz-strzalka body lizmap-treeview div.expandable.expanded::before {
  transform: translate(-50%, -75%) rotate(45deg);
}

html body lizmap-treeview .layer-actions [class*=icon-] {
  opacity: 0.55;
}

html body #switcher-layers-actions .btn {
  border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* 6. Okna narzędzi w prawym górnym rogu (#mini-dock): ULDK, pomiary, wydruk… */
/* ------------------------------------------------------------------ */

/* gdy otwarty prawy panel, okno robi się węższe (max 30% mapy) — szeroka treść (np. pasek rysowania) przewija się w poziomie */
html body #content:not(.mobile) #mini-dock {
  top: var(--g4-odstep);
  border: 1px solid var(--g4-ramka);
  border-radius: var(--g4-r);
  box-shadow: var(--g4-cien);
  overflow-x: auto;
}

html body #mini-dock {
  color: var(--g4-tekst);
  font-family: var(--g4-font);
}

/* pasek tytułu każdego okna */
html body #mini-dock h3 {
  background: var(--g4-panel-2);
  border-bottom: 1px solid var(--g4-ramka);
  margin: 0;
}

/* dwa okna otwarte naraz (np. Wyszukaj + wyszukiwarka działek) — kreska między nimi */
html body #mini-dock-content > .tab-pane + .tab-pane {
  border-top: 1px solid var(--g4-ramka);
}

/* okno „Wyszukaj” (lista warstw do wyszukiwania, np. obręb / numer działki) */
html body #mini-dock .locate-layer {
  box-sizing: border-box;
  border: 1px solid var(--g4-ramka);
  border-radius: 6px;
  background: var(--g4-panel);
  padding: 4px 6px;
  margin-bottom: 6px;
}

html body #mini-dock .custom-combobox-input {
  font-family: var(--g4-font);
  font-size: 13px;
  color: var(--g4-tekst);
}

html body #mini-dock .mini-dock-close {
  border-radius: 6px;
}

html body #mini-dock .mini-dock-close:hover {
  background: var(--g4-hover);
}

/* ------------------------------------------------------------------ */
/* 7. Formularze i przyciski w panelach i oknach                         */
/* ------------------------------------------------------------------ */

html body #dock input[type=text],
html body #dock select,
html body #mini-dock input[type=text],
html body #mini-dock input[type=number],
html body #mini-dock select,
html body #right-dock input[type=text],
html body #right-dock select,
html body #bottom-dock input[type=text],
html body #bottom-dock select {
  border: 1px solid var(--g4-ramka);
  border-radius: 6px;
  background-color: var(--g4-panel);
  color: var(--g4-tekst);
  font-family: var(--g4-font);
  box-shadow: none;
}

html body #dock input[type=text]:focus,
html body #mini-dock input[type=text]:focus,
html body #mini-dock select:focus,
html body #right-dock input[type=text]:focus,
html body #right-dock select:focus {
  border-color: var(--g4-akcent-2);
  box-shadow: 0 0 0 3px var(--g4-fokus);
  outline: none;
}

/* zwykłe przyciski Bootstrapa w treści paneli — płaskie. Bez zmian zostają: przyciski z kolorem (btn-primary itd.),
   przyciski-linki, przyciski z ikoną w tle (…-clear) i wszystkie przyciski w paskach tytułów (zamknij, wyczyść, stop) */
html body #dock-content .menu-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]),
html body #switcher-layers-actions .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]),
html body #sub-dock .menu-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]),
html body #mini-dock-content .menu-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]),
html body #right-dock-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]),
html body #bottom-dock-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]) {
  background-image: none;
  background-color: var(--g4-panel);
  border: 1px solid var(--g4-ramka);
  border-radius: 6px;
  color: var(--g4-tekst);
  text-shadow: none;
  box-shadow: none;
}

html body #dock-content .menu-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]):hover,
html body #switcher-layers-actions .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]):hover,
html body #sub-dock .menu-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]):hover,
html body #mini-dock-content .menu-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]):hover,
html body #right-dock-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]):hover,
html body #bottom-dock-content .btn:not(#dock-close):not(.btn-link):not([class*=-clear]):not([class*=btn-primary]):not([class*=btn-success]):not([class*=btn-danger]):not([class*=btn-warning]):not([class*=btn-info]):hover {
  background-color: var(--g4-hover);
}

html body #mini-dock-content .menu-content .btn-primary,
html body #dock-content .btn-primary,
html body #right-dock-content .btn-primary,
html body #bottom-dock-content .btn-primary {
  background-image: none;
  background-color: var(--g4-akcent);
  border-color: var(--g4-akcent);
  border-radius: 6px;
  text-shadow: none;
}

/* przyciski wyszukiwarki działek (ULDK) — zostają ich kolory obramowań, tylko zaokrąglenie i tło */
html body #wyszukiwarkaUldk .rounded-box {
  border-radius: 6px;
  background: var(--g4-panel);
  font-family: var(--g4-font);
}

html body #wyszukiwarkaUldk .rounded-box:hover {
  background: var(--g4-hover);
}

/* ------------------------------------------------------------------ */
/* 8. Przyciski powiększania (#navbar) i mapa przeglądowa                */
/* ------------------------------------------------------------------ */

/* ikony przycisków są białe (sprite) — na białym tle odwracamy je mieszaniem kolorów (biały − biały = czarny) */
html body #navbar .btn {
  background-color: var(--g4-panel) !important;
  background-blend-mode: difference;
  border: 0 !important;
  border-radius: var(--g4-r-maly) !important;
  box-shadow: none !important;
}

html body #navbar .btn:hover {
  background-color: var(--g4-hover) !important;
}

html body #navbar .btn.active,
html body #navbar .btn.active:hover {
  background-color: var(--g4-akcent) !important;
  background-blend-mode: normal;
}

html body #navbar .btn:disabled {
  opacity: 0.35;
}

html body #navbar .slider {
  display: none;
}

html body #content:not(.mobile) #navbar {
  top: var(--g4-odstep);
  right: var(--g4-odstep);
  height: auto;
  padding: 4px;
  gap: 2px;
  background: var(--g4-panel);
  border: 1px solid var(--g4-ramka);
  border-radius: var(--g4-r);
  box-shadow: var(--g4-cien);
}

html body #content:not(.mobile) #navbar .btn {
  margin: 0;
}

html body #overview-box {
  border-radius: var(--g4-r);
  border: 1px solid var(--g4-ramka);
  box-shadow: var(--g4-cien);
  background: var(--g4-panel);
  overflow: hidden;
}

html body #overview-bar {
  background: var(--g4-panel);
}

/* ------------------------------------------------------------------ */
/* 9. Wyniki wyszukiwania z nagłówka, komunikaty, okna dialogowe          */
/* ------------------------------------------------------------------ */

html body #lizmap-search {
  background: var(--g4-panel);
  color: var(--g4-tekst);
  border: 1px solid var(--g4-ramka);
  border-radius: var(--g4-r);
  box-shadow: var(--g4-cien);
  font-family: var(--g4-font);
}

html body #lizmap-search a {
  color: var(--g4-akcent);
}

html body #lizmap-search [class*=icon-white] {
  filter: brightness(0);
  opacity: 0.6;
}

html body #message .alert {
  border-radius: var(--g4-r-maly);
  box-shadow: var(--g4-cien);
  font-family: var(--g4-font);
}

html body .modal {
  border-radius: var(--g4-r);
  border: 1px solid var(--g4-ramka);
  box-shadow: 0 24px 60px -12px rgba(16, 26, 20, 0.35);
  font-family: var(--g4-font);
  overflow: hidden;
}

html body .modal-header {
  background: var(--g4-panel-2);
  border-bottom: 1px solid var(--g4-ramka);
}

html body .modal-footer {
  background: var(--g4-panel-2);
  border-top: 1px solid var(--g4-ramka);
  box-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 10. Paski przewijania                                                 */
/* ------------------------------------------------------------------ */

html body #dock ::-webkit-scrollbar,
html body #mini-dock ::-webkit-scrollbar,
html body #right-dock ::-webkit-scrollbar,
html body #mapmenu::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html body #dock ::-webkit-scrollbar-thumb,
html body #mini-dock ::-webkit-scrollbar-thumb,
html body #right-dock ::-webkit-scrollbar-thumb,
html body #mapmenu::-webkit-scrollbar-thumb {
  background: rgba(28, 36, 32, 0.22);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ------------------------------------------------------------------ */
/* 11. Wąskie ekrany i telefon                                           */
/* ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 900px) {
  html body #search-query {
    width: 170px;
  }
}

@media (min-width: 768px) and (max-width: 900px) {
  html body #title h2 {
    display: none;
  }
}