/* Job-Linker — pasek szybkich filtrow nad lista ofert.
 * Faza 2, zadanie 2.3. Utworzone 2026-08-15, poprawione 2026-08-16.
 *
 * System „Job Linker Navy": granat #003366 jako autorytet, #007BFF jako kolor
 * akcji, hairline #DDE3EB zamiast cieni na bialym tle, jeden promien 8px.
 *
 * === POPRAWKA 2026-08-16 (uwaga wlasciciela: „tagi sa malo widoczne,
 * szczegolnie na telefonie") ===
 * Pierwsza wersja byla za cicha: pigulki 36 px, tekst 13,5 px, szara ramka
 * na bialym tle, a caly pasek stal PONIZEJ mapy. Na telefonie gubil sie
 * calkowicie. Teraz:
 *   - pasek stoi NAD mapa (zmiana kotwicy w PHP) i jest `sticky` na KAZDEJ
 *     szerokosci, nie tylko na telefonie — przy korzystaniu z mapy filtry
 *     zostaja na ekranie;
 *   - pigulki sa wieksze (42 px) i maja wyrazniejsza ramke;
 *   - doszedl podpis „Szybkie filtry", zeby pasek czytal sie jako narzedzie,
 *     a nie jako ozdobne etykiety.
 *
 * ⚠️ Z-INDEX: pasek jest `sticky`, ale trzyma sie NISKO (20). Listy select2
 * doczepiaja sie do <body> z z-index 1051, a modal aplikacji siedzi na 1050 —
 * podniesienie tego paska zaslonicby jedno i drugie (patrz CLAUDE.md).
 */

/* 2026-08-27 (Z-22): pasek zmniejszony na prosbe wlasciciela — „one sa za duze
 * nad ta mapa". Wysokosc pigulki 42 -> 30 px, wysokosc paska 44 -> 34 px.
 * Wyglad ujednolicony z pigulkami filtrow na mapie: jasne tlo, delikatna
 * ramka, pelne zaokraglenie. */
.jl-qf {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 10px;
	padding: 6px 0;
	min-height: 34px;

	/* Sticky na kazdej szerokosci: mapa potrafi zajac caly ekran, a filtry
	 * musza zostac pod reka. */
	position: sticky;
	top: 0;
	z-index: 20;
	background: #FFFFFF;
	border-bottom: 1px solid #DDE3EB;
}

/* 2026-08-27: akcent kolorystyczny na prosbe wlasciciela („brakuje jakiegos
 * akcentu kolorystycznego"). Po zmniejszeniu pigulek pasek zrobil sie caly
 * szaro-bialy. Akcent daja: kolorowa kreska przed podpisem sekcji, niebieski
 * podpis i wyrazniejszy stan aktywny. */
.jl-qf__label {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: Poppins, sans-serif;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #007BFF;
	white-space: nowrap;
}

.jl-qf__label::before {
	content: '';
	width: 3px;
	height: 14px;
	border-radius: 2px;
	background: linear-gradient(180deg, #007BFF, #003366);
}

.jl-qf__scroll {
	display: flex;
	align-items: center;
	gap: 8px;

	/* Telefon: przewijanie w bok, NIGDY zawijanie do drugiego wiersza —
	 * pasek ma zajmowac jeden wiersz, nie polowe ekranu. */
	overflow-x: auto;
	overflow-y: hidden;
	flex-wrap: nowrap;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;

	/* 🔴 Pasek przewijania UKRYTY (2026-08-27). Wlasciciel: „widac np w popularne
	 * branze pasek scroll w prawo / lewo" — przy niskim pasku zabieral wyraznie
	 * duzo miejsca i wygladal jak usterka. Przewijanie dziala dalej (kolko myszy,
	 * gest, klawiatura); ze jest co przewijac, sygnalizuje wygaszenie przy prawej
	 * krawedzi (maska nizej). */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 0;

	/* Miekkie wygaszenie przy prawej krawedzi zamiast paska przewijania.
	 * `mask` bez prefiksu nie dziala w starszym WebKicie — stad druga linia. */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
}

.jl-qf__scroll::-webkit-scrollbar {
	display: none;
}

.jl-qf__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	scroll-snap-align: start;

	height: 30px;
	padding: 0 12px;
	border: 1px solid #E4EAF0;
	border-radius: 999px;
	background: #F7F9FC;
	color: #003366;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.jl-qf__pill:hover,
.jl-qf__pill:focus {
	border-color: #007BFF;
	background: #FFFFFF;
	color: #003366;
	text-decoration: none;
}

.jl-qf__pill:focus-visible {
	outline: 2px solid #007BFF;
	outline-offset: 2px;
}

.jl-qf__count {
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: #5B6470;
	background: #FFFFFF;
	border: 1px solid #E4EAF0;
	border-radius: 999px;
	padding: 1px 6px;
}

/* Krzyzyk pokazuje sie dopiero na pigulce aktywnej — na nieaktywnej
 * sugerowalby, ze cos jest do wylaczenia. */
.jl-qf__x {
	display: none;
	font-size: 17px;
	line-height: 1;
	opacity: .85;
}

.jl-qf__pill.is-active {
	background: linear-gradient(135deg, #007BFF, #0056D2);
	border-color: #0056D2;
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 123, 255, .3);
}

.jl-qf__pill.is-active .jl-qf__count {
	background: rgba(255, 255, 255, .2);
	color: #FFFFFF;
}

.jl-qf__pill.is-active .jl-qf__x {
	display: inline;
}

.jl-qf__pill.is-active:hover {
	background: #001B36;
	border-color: #001B36;
	color: #FFFFFF;
}

.jl-qf__reset {
	flex: 0 0 auto;
	font-size: 13px;
	color: #5B6470;
	text-decoration: underline;
	white-space: nowrap;
}

.jl-qf__reset:hover {
	color: #003366;
}

.jl-qf__reset:focus-visible {
	outline: 2px solid #007BFF;
	outline-offset: 2px;
}

/* Stan ladowania po klknieciu — pasek nie moze wygladac na martwy,
 * zanim lista sie przeladuje. */
.jl-qf.is-loading {
	opacity: .6;
	pointer-events: none;
}

@media (max-width: 991px) {
	/* Podpis zabiera na waskim ekranie miejsce, ktore nalezy sie pigulkom. */
	.jl-qf__label {
		display: none;
	}

	.jl-qf {
		/* Pasek na pelna szerokosc ekranu, zeby przy przewijaniu w bok
		 * pigulki nie chowaly sie pod krawedzia kontenera. */
		margin-left: -15px;
		margin-right: -15px;
		padding-left: 15px;
		padding-right: 15px;
		gap: 8px;
	}

	/* Na telefonie pigulka zostaje odrobine wyzsza niz na desktopie — 30 px to
	 * za malo na palec (zalecane minimum celu dotykowego to ~32 px). */
	.jl-qf__pill {
		height: 32px;
		font-size: 12.5px;
		padding: 0 11px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jl-qf__pill {
		transition: none;
	}
}

/* =====================================================================
 * Z-07 (2026-08-22) — pasek byl „zbyt rozciagniety i przyklejony do lewej"
 *
 * Zgloszenie wlasciciela. Przyczyna jest strukturalna, nie estetyczna:
 * pasek wstawiamy PRZED kontener mapy (celowo — patrz jl-quick-filters.php,
 * dzieki temu przezywa podmiane listy AJAX-em), a przez to stoi POZA
 * kontenerem tresci. Reszta strony jest wyrownana do kontenera motywu,
 * pasek — do krawedzi okna.
 *
 * Zmierzone na produkcji przed poprawka (okno 1920):
 *   pasek            x=0    szer. 1905
 *   kontener tresci  x=293  szer. 1320
 *   podpis „Szybkie filtry"  x=0  → dosłownie ucięty przy krawedzi ekranu
 *
 * Po poprawce pasek ma x=293 i szer. 1320 — co do piksela jak tresc pod nim.
 *
 * 🔴 SZEROKOSCI MUSZA ODPOWIADAC DRABINCE `.container` MOTYWU, inaczej
 * wyrownanie rozjedzie sie na innej szerokosci ekranu. Z `superio/css/template.css`:
 *   >=768: 750px · >=992: 970px · >=1200: 1240px · >=1380: 1320px
 * (ta ostatnia wartosc jest latwa do przeoczenia — siedzi w sekcji
 * „Responsive" w okolicach linii 23817, osobno od pozostalych trzech).
 *
 * ⚠️ Tylko od 992px w gore. Ponizej dziala regula `@media (max-width: 991px)`
 * wyzej w tym pliku, ktora CELOWO daje paskowi pelna szerokosc ekranu przez
 * ujemne marginesy — zeby przy przewijaniu w bok pigulki nie chowaly sie pod
 * krawedzia kontenera. Nie łącz tych dwoch zachowan.
 *
 * ⚠️ Polprzezroczyste tlo („jak element mapy”) z tego samego zgloszenia
 * NIE zostalo zrobione: pasek jest `sticky`, wiec przy przewijaniu przejezdza
 * nad biala lista ofert, gdzie przezroczystosc pogarsza czytelnosc. Do decyzji
 * wlasciciela po obejrzeniu tej wersji.
 * ================================================================== */

@media (min-width: 992px) {
	.jl-qf {
		max-width: 970px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
}

@media (min-width: 1200px) {
	.jl-qf {
		max-width: 1240px;
	}
}

@media (min-width: 1380px) {
	.jl-qf {
		max-width: 1320px;
	}
}

/* =====================================================================
 * POPULARNE BRANZE — drugi rzad pigulek (2026-08-22, po Z-08)
 *
 * Wlasciciel poprosil o szybkie filtry z ikonami, jak na mapjob.pl.
 * 🔴 Pasek wyzej filtruje po TAGACH i pokazuje ich tylko trzy — bo pozostale
 * osiem ma ZERO ofert. Na mapjob te chipy to branze/zawody, nie tagi, i to
 * jest u nas realnie nowa sciezka: dzis branzy nie da sie wybrac jednym
 * klknieciem nigdzie poza rozwijana lista.
 *
 * Drugi rzad NIE jest przyklejony do gory — przyklejone dwa paski zjadalyby
 * za duzo ekranu przy przewijaniu. Przykleja sie tylko rzad tagow (wyzej).
 * ================================================================== */

.jl-qf--branze {
	position: static;
	border-bottom: 1px solid #DDE3EB;
	padding-top: 4px;
}

.jl-qf__ikona {
	font-size: 15px;
	line-height: 1;
	flex: 0 0 auto;
}

/* Pigulka branzy jest szersza od tagowej (dluzsze nazwy) — nie lamiemy jej. */
.jl-qf--branze .jl-qf__pill {
	white-space: nowrap;
}

@media (max-width: 991px) {
	.jl-qf--branze .jl-qf__label { display: none; }
}

/* =====================================================================
 * JASNE KONTROLKI NIEZALEZNIE OD MOTYWU SYSTEMU (2026-08-22)
 *
 * 🔴 Strona deklaruje <meta name="color-scheme" content="light dark">, wiec
 * u uzytkownika z CIEMNYM motywem systemu przegladarka rysuje natywne kontrolki
 * i PASKI PRZEWIJANIA w ciemnym wariancie — mimo bialego tla. Zglaszone przez
 * wlasciciela: gruby ciemny pasek pod pigulkami branz.
 *
 * ⚠️ To nie usterka tego paska, tylko calego portalu. Tu wymuszamy jasny tryb
 * lokalnie; naprawa globalna (poprawienie meta) to osobne zadanie — patrz
 * PULAPKI.md.
 * ================================================================== */

.jl-qf {
	color-scheme: light;
}

.jl-qf__scroll {
	scrollbar-color: #C3CCD8 transparent;
}

.jl-qf__scroll::-webkit-scrollbar-track {
	background: transparent;
}

.jl-qf__scroll::-webkit-scrollbar-thumb {
	background: #C3CCD8;
}

.jl-qf__scroll::-webkit-scrollbar-thumb:hover {
	background: #A9B5C5;
}