/* Listy rozmow i zgloszen - wezsze karty, kolor statusu, spokojniejsze puste ekrany. */

.thlist,
.aplista{max-width:720px}

/* ---------------------------------------------------------- rozmowy --- */
.thlist{gap:8px}
.th{align-items:center;gap:12px;border-radius:14px;padding:11px 13px;
    transition:border-color .15s ease, transform .12s ease}
.th:hover{border-color:rgba(227,199,101,.45);transform:translateY(-1px)}
.th-av{width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,#F2DC96,#A6790F);color:#14130F;
  font-weight:800;font-size:17px;line-height:1}
.th-av img{width:100%;height:100%;object-fit:cover}
.th-t{min-width:0;flex:1}
.th .who{font-size:15px;font-weight:700;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th .prev{font-size:13px;opacity:.62;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-p{text-align:right;flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.th .when{font-size:11px;opacity:.5;white-space:nowrap}
.th .dot{display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;border-radius:999px;
  background:var(--zloto,#E3C765);color:#14130F;font-size:11px;font-weight:800}
.th.nieprzeczytane{border-color:rgba(227,199,101,.4)}
.th.nieprzeczytane .who{color:var(--zloto,#E3C765)}

/* --------------------------------------------------------- zgloszenia --- */
.apl{gap:12px;border-radius:14px;padding:12px 14px 12px 16px;position:relative;overflow:hidden;
     transition:border-color .15s ease}
.apl:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:rgba(128,128,128,.35)}
.apl:hover{border-color:rgba(227,199,101,.4)}
.apl-wyslana:before{background:var(--zloto,#E3C765)}
.apl-przeczytana:before{background:#7E8794}
.apl-zaproszony:before{background:#3FBF87}
.apl-odrzucona:before{background:#E4674F}

.apt{font-size:15px}
.apf{font-size:13px;margin-top:1px}
.apn{margin-top:6px;font-size:13px;line-height:1.5;padding-left:9px;
     border-left:2px solid rgba(128,128,128,.3)}
.apd{font-size:12px;margin-top:4px}
.apkon{margin-top:7px;font-size:14px}
.apkon b{color:var(--zloto,#E3C765)}

.apst{padding:4px 11px;font-size:11px;letter-spacing:.03em;text-transform:uppercase}
.apst-wyslana{background:rgba(227,199,101,.16);color:#E3C765}
.apst-przeczytana{background:rgba(126,135,148,.20);color:#B6BDC6}
.apst-zaproszony{background:rgba(63,191,135,.16);color:#3FBF87}
.apst-odrzucona{background:rgba(228,103,79,.16);color:#E4674F}

.btn-mini{padding:6px 12px;font-size:12px;border-radius:9px;min-height:34px}
.apfil select{min-height:42px}

/* ------------------------------------------------------- puste ekrany --- */
.empty{padding:26px 20px;border-radius:14px;font-size:14px;line-height:1.55;
  border-style:dashed;border-color:rgba(227,199,101,.3);max-width:720px}
.empty:before{content:"";display:block;width:34px;height:34px;margin:0 auto 12px;
  border-radius:10px;border:2px solid rgba(227,199,101,.45);
  background:linear-gradient(150deg,rgba(242,220,150,.18),transparent)}

@media (max-width:560px){
  .th-av{width:38px;height:38px;flex:0 0 38px;font-size:15px}
  .apl{padding:11px 12px 11px 15px}
  .apbtns{gap:6px}
}

/* mocniejsze reguly: uklad wiersza rozmowy wygrywa z ustawieniami mobilnymi */
.thlist .th{flex-direction:row;align-items:center;text-align:left;flex-wrap:nowrap}
.thlist .th .th-t{display:block;min-width:0;flex:1 1 auto;text-align:left}
.thlist .th .who,
.thlist .th .prev{display:block;text-align:left}
.thlist .th .th-av{display:flex;flex:0 0 42px}
.thlist .th .th-p{display:flex;flex:0 0 auto;flex-direction:column;align-items:flex-end;text-align:right}
@media (max-width:560px){.thlist .th .th-av{flex:0 0 38px}}

/* ------------------------------------------------------------ rozmowa --- */
.chat{border-radius:16px;gap:8px;padding:14px;max-width:720px;
  background:linear-gradient(180deg,rgba(128,128,128,.05),transparent)}
.chat .bub{border-radius:16px;padding:9px 13px;font-size:14.5px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.chat .bub.me{border-bottom-right-radius:5px;background:linear-gradient(150deg,#F2DC96,#D9B84E);color:#14130F}
.chat .bub.you{border-bottom-left-radius:5px}
.chat .bub .t{font-size:10.5px;opacity:.55;margin-top:5px}

.sendbox{max-width:720px;gap:8px}
.sendbox textarea{border-width:1px;border-color:rgba(128,128,128,.4);border-radius:14px;
  font-size:15px;min-height:50px}
.sendbox textarea:focus{border-color:rgba(227,199,101,.7);outline:none}
.sendbox button{border-radius:14px;min-height:50px}

/* ------------------------------------------------- pasek zakladek panelu --- */
/* Zakladki nie mieszcza sie na telefonie i urywaly sie bez ostrzezenia.
   Teraz widac miekkie zanikniecie po prawej - znak, ze mozna przewinac. */
.pnav{position:relative;scroll-behavior:smooth}
@media (max-width:760px){
  .pnav{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
        mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .pnav a{font-size:14px;padding:10px 13px}
}

/* --------------------------------------------- wyjasnienie w wyszukiwarce --- */
.szk-wyjasnienie{max-width:720px;margin:0 0 14px;padding:13px 15px;border-radius:13px;
  border:1px solid rgba(227,199,101,.30);background:rgba(227,199,101,.07)}
.szk-wyjasnienie p{margin:0;font-size:13px;line-height:1.55;opacity:.85}
.szk-wyjasnienie .btn{margin-top:11px;min-height:44px;display:inline-flex;align-items:center}

/* --------------------------------------- wiadomosc przy uscisku dloni --- */
/* Bylo na sztywno biale tlo - w ciemnym motywie swiecilo jak latarka. */
.hs-wiad{font-size:14.5px;line-height:1.55;padding:9px 13px;border-radius:10px;
  background:rgba(128,128,128,.10);border-left:3px solid var(--zloto,#E3C765)}

/* ------------------------------------------ szukajka w obrebie listy --- */
.szukajka{position:relative;max-width:720px;margin:14px 0 12px}
.szukajka input{width:100%;min-height:46px;padding:0 14px 0 42px;border-radius:12px;
  border:1px solid rgba(128,128,128,.35);background:transparent;color:inherit;font:inherit;font-size:15px}
.szukajka input:focus{border-color:rgba(227,199,101,.7);outline:none}
.szukajka-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;opacity:.55;pointer-events:none}
.szukajka-ico svg{width:18px;height:18px;display:block}

.lista-kart{display:flex;flex-direction:column;gap:12px;max-width:720px}
.lista-kart [hidden]{display:none !important}
.filtr-pusto{max-width:720px;margin:12px 0 0;font-size:14px;opacity:.65}

/* --------------------------------- kto jest po drugiej stronie karty --- */
.kto{display:flex;align-items:center;gap:11px;flex-wrap:wrap}
.kto-ava{width:42px;height:42px;flex:0 0 42px;border-radius:50%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  background:linear-gradient(150deg,#F2DC96,#A6790F);color:#14130F;font-weight:800;font-size:17px}
.kto-ava img{width:100%;height:100%;object-fit:cover}
a.kto-ava{transition:transform .12s ease}
a.kto-ava:hover{transform:scale(1.05)}
.kto-t{flex:1;min-width:0}
.kto-n{display:block;font-size:16px;font-weight:700;line-height:1.25;
  text-decoration:none;color:inherit;overflow:hidden;text-overflow:ellipsis}
a.kto-n:hover{color:var(--zloto,#E3C765)}
.kto-s{display:block;font-size:12.5px;opacity:.6}

/* --------------------------------------- karta usciskow po stronie firmy --- */
.hs-linia{font-size:13.5px;line-height:1.5;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.hs-tel{font-weight:700;color:var(--zloto,#E3C765);text-decoration:none}
.hs-akcje{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.hs-akcje .btn{min-height:36px;padding:7px 13px;font-size:12.5px;border-radius:9px}
.hs-akcje form{margin:0}

/* ------------------------------------------------- autor wpisu w lencie --- */
.pautor{display:inline-block;font-weight:700;font-size:15.5px;line-height:1.25;
  text-decoration:none;color:inherit}
.pautor:hover{color:var(--zloto,#E3C765)}
a.pav{text-decoration:none;transition:transform .12s ease}
a.pav:hover{transform:scale(1.05)}

/* ------------------------- imie i nazwa firmy zawsze prowadza na strone --- */
.link-firma{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(227,199,101,.55)}
.link-firma:hover{color:var(--zloto,#E3C765);border-bottom-color:var(--zloto,#E3C765)}
.link-mocny{font-weight:inherit;border-bottom:0}
.link-mocny:hover{color:var(--zloto,#E3C765)}

/* ----------------------------------------- wpisy na profilu pracownika --- */
.pbp-wpis{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid rgba(128,128,128,.18)}
.pbp-wpis:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.pbp-wpis p{font-size:14px;line-height:1.6;margin:0 0 9px;white-space:pre-line}
.pbp-wpis time{font-size:11.5px;opacity:.5}
.pbp-wpis-gal{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:9px}
.pbp-wpis-gal img,.pbp-wpis-gal video{width:100%;height:110px;object-fit:cover;border-radius:10px;display:block}

/* ------------------------------------------- klikalne kafelki z liczbami --- */
.pnums-link,
.tile-link{text-decoration:none;color:inherit;cursor:pointer;
  transition:border-color .15s ease, transform .12s ease}
.pnums-link:hover,
.tile-link:hover{border-color:rgba(227,199,101,.5);transform:translateY(-1px)}
.pnums-link:hover b,
.tile-link:hover b{color:var(--zloto,#E3C765)}

/* kolka firm, ktore ogladaly profil */
.pwho-link{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;overflow:hidden;margin-right:-9px;
  background:linear-gradient(150deg,#F2DC96,#A6790F);color:#14130F;
  font-weight:800;font-size:13px;text-decoration:none;
  border:2px solid var(--bg,#0B0A08);transition:transform .12s ease}
.pwho-link:hover{transform:scale(1.08);z-index:2}
.pwho-link img{width:100%;height:100%;object-fit:cover}

/* pusta sekcja na profilu - jedno zdanie zamiast znikajacego bloku */
.pbp-pusto{margin:0;color:var(--ink2);font-size:15px;line-height:1.6}

/* ------------------------------------------------- rozwidlenie na glownej
   Dwie duze plytki: "szukam pracy" i "szukam pracownikow". Na telefonie
   jedna pod druga, na duzym ekranie obok siebie. Cel jest jeden - zeby
   pracodawca nie musial przewijac calej listy ofert, szukajac swojego
   wejscia. */
.rozw{display:grid;grid-template-columns:1fr;gap:12px;margin:22px 0 26px}

.rozw-p{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:14px;row-gap:2px;align-items:center;
  padding:18px 20px;border:1px solid var(--linia,rgba(255,255,255,.14));
  border-radius:16px;background:var(--card,rgba(255,255,255,.03));
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .12s ease,background .15s ease}

.rozw-p .pnav-ico{display:block;grid-row:1 / span 2;width:30px;height:30px;opacity:.9}
.rozw-t{font-size:20px;font-weight:700;line-height:1.2}
.rozw-o{font-size:14px;color:var(--ink2);line-height:1.35}

.rozw-p:hover{border-color:rgba(227,199,101,.55);transform:translateY(-1px)}
.rozw-p:hover .rozw-t{color:var(--zloto,#E3C765)}
.rozw-p:active{transform:scale(.99)}

/* Pierwsza plytka - dla pracownika, wiec zlota: to on jest tu gosciem,
   dla ktorego serwis jest darmowy. */
.rozw-p:first-child{border-color:rgba(227,199,101,.45);background:rgba(227,199,101,.07)}
.rozw-p:first-child .pnav-ico{color:var(--zloto,#E3C765);opacity:1}

@media (min-width:760px){
  .rozw{grid-template-columns:1fr 1fr;gap:16px}
}

/* ----------------------------------------------------- lista powiadomien
   Kazdy rodzaj zdarzenia ma swoj znaczek i swoja barwe. Liste czyta sie
   wtedy wzrokiem, bez czytania kazdej linijki po kolei. Nieprzeczytane
   maja zlota ramke i kropke - reszta jest przygaszona. */

.powlista{display:flex;flex-direction:column;gap:10px}

.pw{display:grid;grid-template-columns:auto 1fr auto;column-gap:13px;
  align-items:start;padding:14px 16px;
  border:1px solid var(--linia,rgba(255,255,255,.12));border-left-width:3px;
  border-radius:14px;background:var(--card,rgba(255,255,255,.02));
  text-decoration:none;color:inherit;
  transition:border-color .15s ease,transform .12s ease,opacity .15s ease}

.pw:hover{transform:translateY(-1px)}
.pw:active{transform:scale(.995)}

/* Przeczytane schodza na drugi plan, ale zostaja czytelne. */
.pw:not(.nowy){opacity:.72}

.pw.nowy{border-color:rgba(227,199,101,.5);background:rgba(227,199,101,.05)}
.pw.nowy .pw-tytul{color:var(--zloto,#E3C765)}

/* kolko ze znaczkiem */
.pw-znak{display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  background:rgba(128,128,128,.14);color:var(--ink2)}
.pw-znak .pnav-ico{display:block;width:20px;height:20px}

/* Barwy wedlug rodzaju zdarzenia. Przygaszone - to lista, nie choinka. */
.pw-uscisk,.pw-uscisk_odp,.pw-brygada{border-left-color:#C9A227}
.pw-uscisk .pw-znak,.pw-uscisk_odp .pw-znak,.pw-brygada .pw-znak{background:rgba(201,162,39,.16);color:#E3C765}

.pw-wiadomosc{border-left-color:#4E8FD4}
.pw-wiadomosc .pw-znak{background:rgba(78,143,212,.16);color:#7FB2E8}

.pw-zgloszenie,.pw-zgloszenie_odp{border-left-color:#4FA97A}
.pw-zgloszenie .pw-znak,.pw-zgloszenie_odp .pw-znak{background:rgba(79,169,122,.16);color:#77C79B}

.pw-uprawnienie,.pw-ogloszenie{border-left-color:#D08A3C}
.pw-uprawnienie .pw-znak,.pw-ogloszenie .pw-znak{background:rgba(208,138,60,.16);color:#E0A868}

.pwt{display:flex;flex-direction:column;gap:3px;min-width:0}

/* kto: awatar + imie */
.pw-kto{display:flex;align-items:center;gap:8px;min-width:0}
.pw-ava{flex:0 0 auto;width:24px;height:24px;border-radius:50%;object-fit:cover;
  background:rgba(128,128,128,.2)}
.pw-ava-lit{display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#14130F;
  background:linear-gradient(150deg,#F2DC96,#A6790F)}
.pw-imie{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

.pw-tytul{font-size:15px;font-weight:600;line-height:1.3}
.pw .pwd{font-size:14px;color:var(--ink2);line-height:1.4}
.pw .pww{font-size:12px;color:var(--ink2);white-space:nowrap;padding-top:2px}

/* Na telefonie czas schodzi pod tresc - inaczej zjada polowe szerokosci. */
@media (max-width:520px){
  .pw{grid-template-columns:auto 1fr}
  .pw .pww{grid-column:2;padding-top:4px}
}

/* ------------------------------------------------- filmy: oszczedzamy dane
   Film w kafelku ma preload="none" - nie sciaga sie, dopoki ktos go nie
   wlaczy. Czlowiek na pakiecie mobilnym nie moze spalic transferu tylko
   dlatego, ze otworzyl czyjas strone.

   Skutkiem ubocznym jest to, ze bez okladki przegladarka rysuje pusty
   prostokat. Dlatego dajemy ciemne tlo i znak odtwarzania - kafelek ma
   wygladac na film, ktory czeka, a nie na cos zepsutego. */

.pbp-gal video,
.pbp-wpis-gal video,
.fs-galeria video,
.fs-wpis-gal video{background:#12110F}

.pbp-gal figure,
.fs-galeria figure{position:relative}

.pbp-gal figure:has(video)::after,
.fs-galeria figure:has(video)::after{
  content:"";position:absolute;left:50%;top:50%;
  width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;
  background:rgba(0,0,0,.5);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events:none}

.pbp-gal figure:has(video)::before,
.fs-galeria figure:has(video)::before{
  content:"";position:absolute;left:50%;top:50%;
  margin:-9px 0 0 -5px;z-index:1;
  border-style:solid;border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent rgba(255,255,255,.92);
  pointer-events:none}

/* Znak lezy pod warstwa sterowania przegladarki: gdy czlowiek wlaczy film,
   przykrywa go obraz i pasek odtwarzania. Nie probujemy go chowac przez CSS -
   "paused" jest wlasciwoscia filmu, nie atrybutem, i selektor by nie zadzialal. */

/* ------------------------------------------------------------ lenta prac
   Karty na cala szerokosc zamiast malych kwadracikow. Zdjecie spoiny albo
   gotowej konstrukcji to glowny dowod umiejetnosci - ma byc widoczne,
   a nie zmniejszone do znaczka pocztowego.

   Ta sama rozpiska sluzy wlasnemu kabinetowi i profilowi publicznemu. */

.prace{display:flex;flex-direction:column;gap:16px}

.prc{border:1px solid var(--linia,rgba(255,255,255,.12));border-radius:16px;
  background:var(--card,rgba(255,255,255,.02));overflow:hidden}

.prc-kto{display:flex;align-items:center;gap:10px;padding:12px 14px}
.prc-ava{flex:0 0 auto;width:34px;height:34px;border-radius:50%;object-fit:cover;
  background:rgba(128,128,128,.2)}
.prc-ava-lit{display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;color:#14130F;
  background:linear-gradient(150deg,#F2DC96,#A6790F)}

.prc-kto-t{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1 1 auto}
.prc-kto-t a,.prc-kto-t b{font-size:15px;font-weight:600;color:inherit;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prc-kto-t time{font-size:12px;color:var(--ink2)}

.prc-media{margin:0;position:relative;background:#12110F;line-height:0}
.prc-media img,.prc-media video{display:block;width:100%;height:auto;
  /* Bardzo wysokie zdjecie nie moze zajac calego ekranu - inaczej lenta
     przestaje byc lenta i zamienia sie w jedno zdjecie na ekran. */
  max-height:70vh;object-fit:contain;background:#12110F}

/* Znak odtwarzania na filmie, ktory jeszcze sie nie zaladowal. */
.prc-media:has(video)::after{content:"";position:absolute;left:50%;top:50%;
  width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(0,0,0,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
  pointer-events:none}
.prc-media:has(video)::before{content:"";position:absolute;left:50%;top:50%;
  margin:-11px 0 0 -6px;z-index:1;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent rgba(255,255,255,.92);
  pointer-events:none}

.prc-opis{margin:0;padding:12px 14px 14px;font-size:15px;line-height:1.5}

/* Znacznik stanu widzi tylko wlasciciel - obcy nie ma wiedziec,
   ze czyjes zdjecie czeka na sprawdzenie. */
.prc-kto .pill{flex:0 0 auto}

/* ------------------------------------------------- strona specjalnosci
   Okruchy (Glowna > Oferty > Spawacz TIG) i dwie listy: oferty i ludzie. */

.okruchy{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  margin:0 0 14px;font-size:13px;color:var(--ink2)}
.okruchy a{color:inherit;text-decoration:none;border-bottom:1px dotted rgba(255,255,255,.3)}
.okruchy a:hover{color:var(--zloto,#E3C765)}
.okruchy b{color:var(--ink,inherit);font-weight:600}

.specludzie{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}

.specczlowiek{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 10px;border:1px solid var(--linia,rgba(255,255,255,.12));
  border-radius:14px;background:var(--card,rgba(255,255,255,.02));
  text-decoration:none;color:inherit;text-align:center;
  transition:border-color .15s ease,transform .12s ease}
.specczlowiek:hover{border-color:rgba(227,199,101,.5);transform:translateY(-1px)}
.specczlowiek:hover b{color:var(--zloto,#E3C765)}
.specczlowiek img,.specini{width:56px;height:56px;border-radius:50%;object-fit:cover;
  background:rgba(128,128,128,.2)}
.specini{display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:700;color:#14130F;
  background:linear-gradient(150deg,#F2DC96,#A6790F)}
.specczlowiek b{font-size:15px;font-weight:600;line-height:1.25}
.specczlowiek span{font-size:12px;color:var(--ink2)}

.specinne{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:15px}

/* Tag specjalnosci bywa teraz odnosnikiem - ma wygladac tak samo jak
   wczesniej wygladal napis, tylko reagowac na dotkniecie. */
a.ptag{text-decoration:none;transition:filter .15s ease,transform .12s ease}
a.ptag:hover{filter:brightness(1.08)}
a.ptag:active{transform:scale(.97)}