/* ================================================================
   Poprawki paska filtrow listingu:
     1. pigulka-przelacznik "Tylko lokalne" (.lf-local)
     2. wyrownanie wierszy w kolumnach panelu "Wiecej" (na koncu pliku)

   Znacznik: views/browse.php i views/search.php

   Osobny plik, a nie dopisek do listing.css, z dwoch konkretnych powodow:
   cache-buster ?VERSION jest stala z gitignorowanego .env, wiec zmiany
   w ISTNIEJACYCH arkuszach nie docieraja na serwer testowy bez twardego
   odswiezenia (nowy plik dociera od razu), a listing.css ma za soba
   incydenty z masowa zamiana koncow linii.

   Ladowany przez Header::set_css_last() w Browse_controller i Search_controller,
   wiec wchodzi po listing.css.

   Prefiks selektorow powtarza ten z listing.css, zeby regula nie wyciekla
   do wariantow paska dla ofert pracy i ogloszen uczniow.
   ================================================================ */

/* align-self: stretch zamiast wpisanej wysokosci. Rzad (.offer-filters-inner.row)
   jest flexem z align-items:center, wiec sasiednie chipy stoja na swojej naturalnej
   wysokosci, a wysokosc rzedu wyznacza najwyzszy z nich. Rozciagniecie naszej kolumny
   sprawia, ze pigulka dostaje DOKLADNIE te wysokosc - bez zgadywania, ile wychodzi
   z min-height, paddingu i box-sizing, ktore dla <label> z obrazkiem ::before licza
   sie inaczej niz dla <span> sasiada. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local {
	position: relative;
	display: flex;
	align-self: stretch;
}

/* Natywny checkbox chowamy, ale ZOSTAJE w formularzu i zachowuje fokus:
   prepare_form_data() serializuje form.elements, wiec to on niesie wartosc.
   Stad opacity/position zamiast display:none, ktore wyjeloby go z kolejnosci Tab. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	opacity: 0;
	pointer-events: none;
}

/* Wyglad 1:1 z .lf-loc-pill z listing.css — pigulka ma nalezec do tego samego rzedu.

   position/left NIE sa kosmetyka. main.css:1728 wypycha KAZDY <label> w pasku
   filtrow poza ekran:

       .offer-filters-wrapper label { position: absolute; left: -9999px; }

   To stara technika chowania etykiet formularza. Nasza pigulka jest <label>,
   wiec lapala sie na to i wychodzila z ukladu — kontener .lf-local miał w
   DevToolsach 0 x 0. Przywracamy ja do normalnego przeplywu. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-pill {
	position: static;
	left: auto;
	display: flex;
	align-items: center;
	gap: 8px;
	/* height:100% bierze wysokosc z rozciagnietej kolumny, min-height to tylko
	   zabezpieczenie, gdyby rzad z jakiegos powodu byl nizszy. */
	height: 100%;
	min-height: 42px;
	box-sizing: border-box;
	padding: 9px 16px;
	margin: 0;
	border: 1px solid #d7dee2;
	border-radius: 10px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	/* line-height: 1 jak w .cs-select > span — bez tego etykieta dziedziczy
	   interlinie serwisu i tekst rozpycha pigulke inaczej niz sasiednie chipy. */
	line-height: 1;
	color: #384047;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color .12s, box-shadow .12s, background-color .12s;
}

.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-pill:hover {
	border-color: #b9c4ca;
}

/* Stan wlaczony liczony z :checked, a NIE z klasy dokladanej w PHP. Pasek filtrow
   bywa poza .content-wrapper, ktory podmienia AJAX, wiec klasa z serwera nie
   odswiezylaby sie po klknieciu. Kolory jak .lf-location.is-active. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-input:checked + .lf-local-pill {
	background: #e6f8f2;
	border-color: #2AC59B;
	color: #1f9a78;
}

.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-input:focus-visible + .lf-local-pill {
	border-color: #2AC59B;
	box-shadow: 0 0 0 3px rgba(42, 197, 155, .12);
	outline: none;
}

/* Kwadracik rysuje GLOBALNY mechanizm serwisu (main.css:1985): natywny checkbox
   jest chowany, a obrazek stanu wstawia "input[type=checkbox] + label::before"
   jako tlo PNG, przelaczane przez :checked. Nasza etykieta jest wlasnie takim
   sasiadem inputa, wiec dostaje to za darmo - wczesniej rysowalismy obok wlasny
   kwadracik i w pigulce byly DWA.

   Korekta jest jedna: ::before ma z main.css margin-right: 8px, a pigulka ma juz
   swoj gap, wiec odstep robil sie podwojny. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-pill::before {
	flex: 0 0 auto;
	margin-right: 0;
}

.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-info {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	opacity: .75;
}

/* ---- podpowiedz przy ikonie ----
   Bootstrap wstawia .tooltip OBOK elementu, przy ktorym wisi, czyli w naszym
   przypadku do SRODKA pigulki. Dziedziczy wiec jej white-space: nowrap i tekst
   nie ma prawa sie zawinac - podpowiedz rozlewala sie w jedna dluga linie przez
   pol ekranu. Stad jawne white-space i ograniczenie szerokosci.

   Zasieg celowo zawezony do .lf-local-pill: .tooltip-inner jest klasa Bootstrapa
   wspolna dla calego serwisu i nie chcemy ruszac pozostalych podpowiedzi. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-pill .tooltip-inner {
	max-width: 260px;
	white-space: normal;
	text-align: left;
	line-height: 1.4;
}

/* main.css:3622 podnosi tooltipy w pasku filtrow o 47px. To offset dobrany pod
   inna kontrolke; nasza ikona siedzi nizej, wiec podpowiedz odlatywala az nad
   okruszki. Tutaj wystarczy typowy odstep. */
.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-pill .tooltip.top {
	margin-top: -8px;
}

/* Mobile: listing.css chowa tu .lf-loc-pill i rozwija panel lokalizacji na plasko.
   Nasza pigulka zostaje widoczna (o to chodzilo), ale na pelna szerokosc, zeby
   nie sterczala obok rozwinietego panelu. */
@media (max-width: 767px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .lf-local-pill {
		display: flex;
		width: 100%;
		justify-content: flex-start;
	}
}

/* ================================================================
   Panel "Wiecej" — rowny rytm wierszy we wszystkich kolumnach (desktop)

   Kolumny buduja trzy rozne wzorce znacznikowe, kazdy z innym paddingiem
   pionowym, wiec wiersze nie stawaly w jednej linii:

     .cs-options ul li span          padding: 7px 2px !important   (Miejsce lekcji,
                                                                    Liczba opinii,
                                                                    Ostatnia aktywnosc)
     .mf-col-days .list-menu li>span padding: 6px 0                (Dostepnosc)
     .mf-col-checks .form-group-chb  padding: 9px 0                (Pozostale)

   Rozny padding to rozna wysokosc wiersza ORAZ rozne przesuniecie pierwszego
   wiersza wzgledem naglowka kolumny - stad rozjazd widoczny golym okiem.

   Zamiast zgadywac padding per kolumna ustawiamy wspolna wysokosc wiersza i
   zerujemy padding pionowy. Wszystkie trzy wzorce sa juz flexem z
   align-items:center, wiec tresc centruje sie sama niezaleznie od wysokosci
   znacznika (kolko 18px w cs-select, obrazek 20px przy checkboxach).

   38px to dotychczasowa wysokosc najwyzszego wiersza (Pozostale: 20px obrazek
   + 2x9px padding) - dzieki temu nic sie nie kurczy, wyrownuja sie pozostale.

   !important tylko przy paddingu i tylko dlatego, ze regula dla cs-select tez
   go ma; bez tego nie da sie jej nadpisac samym porzadkiem ladowania.

   Zakres: desktop. Ponizej 767px panel ma w listing.css wlasne strojenie pod
   drawer i nie chcemy w nie wchodzic.
   ================================================================ */
@media (min-width: 768px) {
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .more-filters .mf-col .cs-select .cs-options ul li span,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days .list-menu li > span,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-checks .form-group-checkbox {
		box-sizing: border-box;
		min-height: 40px;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		align-items: center;
	}

	/* Same 40px nie wystarczylo: w dwoch ostatnich kolumnach wiersz i tak wychodzil
	   wyzszy, bo main.css:1742 dokłada etykietom w pasku filtrow

	       .offer-filters-wrapper .form-group-checkbox label { padding-bottom: 7px; }

	   a znacznik checkboxa to obrazek 20px z vertical-align: text-bottom, ktory
	   dodatkowo rozpycha linie tekstu. Razem dawalo to ~40px przy 38px w kolumnach
	   z cs-select - roznica narastala z kazdym wierszem i drugi wiersz rozjezdzal
	   sie juz widocznie.

	   Zerujemy padding i ujednolicamy metryki tekstu oraz wyrownanie obrazka, zeby
	   o wysokosci wiersza decydowalo wylacznie min-height powyzej. */
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-checks .form-group-checkbox label,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days .list-menu li label {
		padding-top: 0;
		padding-bottom: 0;
		margin: 0;
		line-height: 1.2;
	}

	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-checks .form-group-checkbox label::before,
	.offer-filters-wrapper:not(.job-offers):not(.student-filters) .mf-col-days .list-menu li label::before {
		vertical-align: middle;
	}
}