/* Strona branżowa /systemy-dla-rekrutacji („Rekrutacja i kadry”).
   Linkowana po daplo.css i branza.css (wzór układu: /systemy-dla-firm-delegujacych).
   Tu tylko różnice: makiety etapu kandydata, kartoteka z ilustracją, generator z wachlarzem,
   oraz układy przeniesione ze strony głównej (S7 wdrożenie, S8 proces) i z /bezpieczenstwo (dziennik zmian). */

/* ---------- Wspólne ---------- */
.pig-rzad .pig { background: #fff; }
.kafel--panel .pig-rzad .pig--ok, .pig-rzad .pig--ok { background: var(--ok-tlo); border-color: var(--ok-tlo); }
.rz__tekst > .pig-rzad { margin-bottom: 0; }
.wiersze--opis li { align-items: flex-start; }
.wiersze--opis .fakt { display: block; }
.wiersze--opis .podpis { display: block; margin-top: 4px; }

/* statusy kandydata w makietach (Nowy: szary, Rozmowa: obrys, Oferta: czarna kropka, Zatrudniony: zielony) */
.rk-st--rozm { background: #fff; box-shadow: inset 0 0 0 1px var(--linia); }
.rk-st--rozm::before { background: #fff; box-shadow: inset 0 0 0 1.5px var(--stal); }
.rk-st--oferta { background: var(--tlo-2); box-shadow: inset 0 0 0 1px var(--czern); }
.rk-st--oferta::before { background: var(--czern); }
.rk-kd__os { display: grid; min-width: 0; line-height: 1.25; }
.rk-kd__os b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-kd__os span { font-size: 13px; color: var(--stal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 1. Nagłówek: stan i makieta kandydatów ---------- */
.rk-stan { display: grid; gap: 10px; margin: 24px 0 0; }
.rk-stan li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.rk-stan .pig { background: #fff; }
.rk-stan .pig--ok { background: var(--ok-tlo); border-color: var(--ok-tlo); }
.rk-stan__t { font-size: .9375rem; line-height: 1.4; font-weight: 500; color: var(--stal); }
.rk-kd .mk__tab { grid-template-columns: minmax(0, 1fr); }
.rk-kd__tr { grid-template-columns: 30px minmax(0, 1fr) auto; min-height: 48px; padding-top: 6px; padding-bottom: 6px; }
.rk-kd__tr--jest { box-shadow: inset 3px 0 0 var(--ok); background: var(--ok-tlo); }
.rk-bh .bh__chip { max-width: 72%; }
@container (max-width: 330px) { .rk-kd__tr--1 { display: none; } .rk-kd__tr .mk__av { display: none; } .rk-kd__tr { grid-template-columns: minmax(0, 1fr) auto; } }
@media (min-width: 1024px) {
  .rk-bh .bh__chip { max-width: 300px; top: -68px; bottom: auto; left: 40px; right: auto; }
}

/* ---------- 4a. Baza kandydatów ---------- */
.kb__tekst .kom { width: 100%; }
.kb__kom { font-size: 1rem; line-height: 1.5; }
.kb__kom .ik { color: var(--stal); margin-top: 2px; }
.kb__obraz { min-width: 0; container-type: inline-size; }
.kb { position: relative; background: var(--panel); border-radius: var(--r-m); padding: 16px 12px; }
.kb__mk { height: auto; }
.kb__mk .mk__app { grid-template-columns: 1fr; }
.kb__mk .mk__bok { display: none; }
.kb__mk .mk__adres { justify-content: flex-start; }
.kb__filtry { display: flex; flex-wrap: wrap; gap: 6px; }
.kb__f4 { display: none; }
.kb__mk .mk__tab { grid-template-columns: minmax(0, 1fr); }
.kb__tr { grid-template-columns: minmax(0, 1fr) auto; min-height: 50px; }
.kb__tr.mk__tr--g { min-height: 32px; }
.kb__os { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kb__tr--jest { box-shadow: inset 3px 0 0 var(--czern); }
.kb__karta { position: relative; margin-top: 12px; display: grid; gap: 10px; padding: 14px; }
.kb__karta-g { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kb__karta-g .rk-kd__os { gap: 4px; }
.kb__karta-g .rk-kd__os b { font-size: 16px; overflow: visible; }
.kb__pola { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.kb__pola span { font-size: 13px; color: var(--stal); }
.kb__pola b { font-size: 14px; font-weight: 600; }
.kb__zatr { justify-self: start; height: 34px; padding: 0 14px; }
.kb__dalej { font-size: 13px; line-height: 1.35; color: var(--stal); }
@container (min-width: 440px) { .kb__f4 { display: inline-flex; } }
@container (min-width: 600px) {
  .kb { padding: 32px 28px; min-height: 420px; }
  .kb__mk { width: 68%; }
  .kb__mk .mk__app { grid-template-columns: 52px 1fr; }
  .kb__mk .mk__bok { display: flex; }
  .kb__karta { position: absolute; right: 20px; top: 88px; width: 232px; margin: 0; }
}
@media (min-width: 1024px) {
  #kandydaci .rz__g { column-gap: 24px; }
  .kb__tekst { padding-right: 24px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  #kandydaci .rz__g > .s-5, #kandydaci .rz__g > .s-7 { grid-column: 1 / -1; }
  .kb__tekst { max-width: 720px; }
}

/* ---------- 4b. Kartoteka na panelu, koło z ilustracją IL-20 ---------- */
.rk-kt .rz__tekst .pig-rzad .pig:not(.pig--ok) { background: #fff; }
.rk-kolo { display: grid; place-items: center; background: #fff; width: 240px; }
.rk-kolo__il { width: 56%; height: 56%; }
.rk-kt .mk-podpis { margin-top: 12px; }
@media (min-width: 1024px) {
  .rk-kolo { width: 100%; }
  .rk-kt .kt__kolo { width: 400px; }
}

/* ---------- 4c. Dokumenty: UI-02 + DOC-01, DOC-03 ---------- */
.dk__pigi { margin-bottom: 12px; }
.gen__g { align-items: center; }
.gen__lista { margin: 0; }
.gen__obraz { min-width: 0; container-type: inline-size; }
.gen { position: relative; background: var(--panel); border-radius: var(--r-m); padding: 68px 12px 12px; overflow: hidden; }
.gen__mk { height: auto; }
.gen__mk .mk__tab { grid-template-columns: minmax(0, 1fr); border-radius: 8px; }
.gen__dok { padding: 0 12px; }
.gen__dok + .gen__dok { border-top: 1px solid var(--linia); }
.gen__dok--4 { display: none; }
.gen__pasek { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; }
.gen__bar { flex: 1; height: 6px; border-radius: 3px; background: var(--ok-tlo); overflow: hidden; }
.gen__bar i { display: block; height: 100%; width: 100%; background: var(--ok); border-radius: 3px; }
.gen__czas { top: 12px; right: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.gen__czas span { display: grid; }
.gen__czas b { font-size: 15px; font-weight: 600; }
.gen__czas span span { font-size: 13px; color: var(--stal); }
.gen__wach { display: none; }
@container (max-width: 340px) { .gen__chip-2 { display: none; } .gen__btn { display: none; } }
@container (min-width: 560px) {
  .gen { aspect-ratio: 7 / 5; padding: 0; }
  .gen__mk { position: absolute; left: 5%; top: 13%; width: 66%; height: 100%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .gen__dok--4 { display: flex; }
  .gen__czas { top: 3%; right: 3%; left: auto; }
  .gen__wach { display: block; position: absolute; right: 3%; bottom: -64px; width: 226px; height: 250px; z-index: 3; }
  .gen__wach .kartka { width: 156px; padding: 12px 10px; }
}
@media (min-width: 1024px) {
  .gen__g { column-gap: 24px; }
  .gen__lista { padding-right: 24px; }
}

/* ---------- 4d. Teczki: różnice ---------- */
.tc__tekst .pig-rzad .pig:not(.pig--ok) { background: #fff; }

/* ---------- 5. Wdrożenie (wzór S7 ze strony głównej) ---------- */
.wdr__gora { row-gap: 40px; }
.wdr__tekst { display: grid; gap: 20px; align-content: start; justify-items: start; }
.wdr__tekst .etykieta { margin-bottom: -8px; }
.wdr__tekst .lead { color: var(--mgla); }
.wdr__obraz { min-width: 0; }
.wdr__komp { max-width: 600px; margin-left: auto; aspect-ratio: auto; container-type: inline-size; }
.wdr__komp > .mk { position: relative; height: auto; border-color: var(--obrys-ciemne); }
.wdr__komp .mk__ekran { gap: 12px; }
.wdr__komp .mk__gora { flex-wrap: wrap; }
.wdr__os-n { display: grid; gap: 6px; justify-items: start; }
.wdr__hist-t { font-size: 13px; font-weight: 600; color: var(--stal); margin-bottom: -4px; }
.wdr__hist { grid-template-columns: minmax(0, 1fr); }
.wdr__hist .mk__dok { padding: 0 12px; }
.wdr__hist .mk__dok + .mk__dok { border-top: 1px solid var(--linia); }
@container (max-width: 440px) {
  .wdr__komp .mk__app { grid-template-columns: 1fr; }
  .wdr__komp .mk__bok { display: none; }
  .wdr__komp .mk__pola { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wdr__komp .mk__pole:nth-child(3) { display: none; }
  .wdr__komp .mk__gora .mk__btn { display: none; }
  .wdr__hist .mk__okr { display: none; }
}
.wdr__podpis { margin-top: 12px; text-align: right; color: var(--mgla); }
.wdr__dol { margin-top: 48px; padding-top: 40px; border-top: 1px dashed var(--mgla); display: grid; gap: 40px; }
.wdr__os { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; position: relative; }
.wdr__os::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; border-left: 1px dashed var(--mgla); }
.wdr__os li { display: flex; gap: 16px; align-items: flex-start; position: relative; }
.wdr__os b { display: block; font-size: 1rem; font-weight: 600; }
.wdr__os .data { color: var(--mgla); font-size: .9375rem; }
@media (min-width: 1024px) {
  .wdr__gora { column-gap: 24px; align-items: center; }
  .wdr__tekst { padding-right: 48px; }
  .wdr__dol { grid-template-columns: 4fr 8fr; gap: 24px; align-items: start; }
  .wdr__os { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- 6. Jak pracujemy (wzór S8 ze strony głównej) ---------- */
.proces { --kroki: 3; }
.proces .os__krok { align-content: start; }
.proces__glowka { display: grid; grid-template-rows: 48px 24px; row-gap: 16px; justify-items: start; }
.proces__glowka .proces__osoby { grid-row: 1; }
.proces__glowka .etap { grid-row: 2; }
.proces__osoby { display: flex; align-items: center; font-size: .9375rem; font-weight: 500; color: var(--stal); }
.proces__osoby img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid #fff; background: var(--tlo-2); }
.proces__osoby picture + picture img { margin-left: -12px; }
.proces__osoby span { margin-left: 12px; }
.proces__g { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.proces__g .pig { margin-bottom: 12px; }
.proces__g .il { flex: none; }
.proces__koszt { display: grid; gap: 4px; }
.proces__kwota { font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.proces__cta { display: flex; justify-content: center; margin-top: 40px; }
@media (max-width: 1023px) {
  .proces::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 40px; border-left: 2px solid var(--przeplyw); }
  .proces .os__krok { grid-template-columns: 1fr; gap: 12px; padding-left: 40px; }
  .proces__glowka { grid-template-columns: 24px 1fr; grid-template-rows: auto; column-gap: 16px; align-items: center; margin-left: -40px; }
  .proces__glowka .etap, .proces__glowka .proces__osoby { grid-row: 1; }
  .proces__glowka .proces__osoby { grid-column: 2; }
}
@media (min-width: 1024px) {
  .proces .os__krok { grid-template-rows: auto 1fr; }
  .proces__glowka .etap { margin-left: 24px; }
  .proces .os__karta { height: 100%; }
}
@media (max-width: 359px) {
  .proces .os__karta { padding: 20px 16px; }
  .proces__g .il { width: 64px; height: 64px; }
}

/* ---------- 7. Dane osobowe: dziennik zmian (wzór /bezpieczenstwo) ---------- */
.dost { row-gap: 32px; align-items: center; }
.dost__lewa { display: grid; gap: 16px; align-content: start; justify-items: start; }
.dost__lewa .h2 { margin: 0 0 16px; }
.dost__prawa { min-width: 0; }
.dost__plotno { position: relative; background: var(--panel); border-radius: var(--r-m); padding: 24px 12px 64px; container-type: inline-size; }
.dost__mk { height: auto; }
.dost__mk .mk__app { grid-template-columns: 1fr; }
.dost__mk .mk__bok { display: none; }
.dost__mk .mk__adres { justify-content: flex-start; padding: 0 8px; min-width: 0; }
@container (max-width: 400px) { .dost__mk .mk__bar-luz { display: none; } }
.dz__filtr { display: none; }
.dz__tab { border-radius: var(--r-s); }
.dz__tel-t { font-size: 13px; font-weight: 600; color: var(--stal); }
.dz__r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prac kiedy" "pola pola"; row-gap: 6px; padding: 10px 12px; }
.dz__r > span:nth-child(1) { grid-area: kiedy; font-size: 13px; color: var(--stal); }
.dz__r > span:nth-child(2) { display: none; }
.dz__r > b { grid-area: prac; font-size: 14px; white-space: normal; overflow: visible; }
.dz__r .dz__pola { grid-area: pola; }
.dz__r.mk__tr--g { display: none; }
.dz__pola { display: flex; gap: 4px; flex-wrap: wrap; }
.dz__r .mk__chip { height: 24px; padding: 0 8px; }
.dz__r--ost { display: none; }
.dz__stopka { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.dz__stopka .mk__szk { flex: 1; max-width: 40%; }
.dost__admin { display: none; }
.dost__chip { left: 12px; bottom: 12px; max-width: none; }
@container (min-width: 520px) {
  .dost__mk .mk__app { grid-template-columns: 52px 1fr; }
  .dost__mk .mk__bok { display: flex; }
  .dz__filtr { display: inline-flex; }
  .dz__tel-t { display: none; }
  .dz__r { grid-template-columns: 92px minmax(0, .9fr) minmax(0, 1fr) minmax(0, 1.2fr); grid-template-areas: none; padding: 0 12px; row-gap: 0; }
  .dz__r > span:nth-child(1), .dz__r > b, .dz__r .dz__pola { grid-area: auto; }
  .dz__r > b { white-space: nowrap; overflow: hidden; }
  .dz__r > span:nth-child(1) { font-size: 13px; color: var(--czern); }
  .dz__r > span:nth-child(2) { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .dz__r.mk__tr--g { display: grid; }
  .dz__r--ost { display: grid; }
}
@media (min-width: 1024px) {
  .dost { column-gap: 24px; }
  .dost__lewa { padding-right: 32px; }
  .dost__plotno { padding: 56px 40px 56px; }
  .dost__admin { display: flex; align-items: center; gap: 12px; right: -28px; top: 20px; padding: 12px 14px; }
  .dost__admin .ik { width: 20px; height: 20px; }
  .dost__admin span { display: grid; }
  .dost__admin b { font-size: 15px; font-weight: 600; }
  .dost__admin span span { font-size: 14px; color: var(--stal); }
  .dost__chip { left: -28px; bottom: 20px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .dost > .s-5, .dost > .s-7 { grid-column: 1 / -1; }
  .dost__lewa { max-width: 720px; }
}

/* ---------- 8. FAQ: ilustracja IL-07 zamiast zdjęcia ---------- */
.rk-faq__lewa { grid-template-columns: minmax(0, 1fr) 96px; align-items: end; }
.rk-faq__il { width: 96px; height: 96px; }
@media (min-width: 1024px) {
  .rk-faq__lewa { grid-template-columns: 1fr; align-items: start; }
  .rk-faq__il { width: 192px; height: 192px; }
}

/* bardzo wąski telefon: w bazie kandydatów bez kółek z inicjałami, żeby zmieściły się nazwiska */
@container (max-width: 340px) { .kb__os .mk__av { display: none; } }

/* Moduły 3–5: terminy, urlopy, zmiany i odejścia (27.09) */
.kd-lista { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }
.kd-lista li { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; }
.kd-lista .ik { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--ok); }
.kd-plotno { position: relative; }
.kd-mk { height: auto; box-shadow: 0 20px 50px rgba(11, 13, 16, .10); }
.kd-ekran { gap: 14px; padding: 18px 20px; }
.kd-mk .mk__modul { font-size: 16px; }
.kd-w { display: grid; }
.kd-w--t { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.3fr) .6fr minmax(0, .8fr); min-height: 44px; font-size: 13.5px; }
.kd-chip { right: -16px; bottom: -18px; }
/* kalendarz */
.kd-kal { display: grid; border: 1px solid var(--linia); border-radius: 8px; overflow: hidden; }
.kd-kal__w { display: grid; grid-template-columns: minmax(150px, 1.4fr) repeat(5, minmax(0, 1fr)); align-items: center; min-height: 46px; padding: 0 12px; border-top: 1px solid var(--linia); font-size: 13px;
  background-image: linear-gradient(to right, var(--linia) 1px, transparent 1px); background-size: calc((100% - 24px - 150px) / 5) 100%; }
.kd-kal__w > * { grid-row: 1; }
.kd-kal__w--g { border-top: 0; min-height: 36px; background: var(--tlo-2); font-weight: 600; color: var(--stal); background-image: none; }
.kd-kal__w--g > span:not(:first-child) { text-align: center; }
.kd-pas { display: flex; align-items: center; justify-content: center; height: 24px; margin: 0 3px; border-radius: 6px; font-style: normal; font-size: 12px; font-weight: 600; }
.kd-pas--urlop { background: var(--czern); color: #fff; }
.kd-pas--l4 { background: #FEF3C7; color: #92400E; }
.kd-leg { display: flex; gap: 16px; font-size: 12.5px; color: var(--stal); }
.kd-leg span { display: inline-flex; align-items: center; gap: 6px; }
.kd-leg i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; }
.kd-plotno--tel { padding-right: 12%; }
.kd-tel { width: 30%; min-width: 150px; right: -2%; bottom: -8%; }
.kd-tel__e { padding: 10px; gap: 6px; font-size: 12px; display: flex; flex-direction: column; }
.kd-tel__e > b { font-size: 14px; }
.kd-tel__p { display: flex; justify-content: space-between; gap: 6px; padding: 5px 0; border-top: 1px solid var(--linia); color: var(--stal); }
.kd-tel__p b { color: var(--czern); }
.kd-tel__b { display: grid; place-items: center; height: 28px; border-radius: 7px; border: 1px solid var(--linia); font-weight: 600; }
.kd-tel__b--ok { background: var(--czern); color: #fff; border-color: var(--czern); margin-top: auto; }
/* karta pracownika */
.kd-karta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.kd-karta > div { border: 1px solid var(--linia); border-radius: 10px; padding: 14px; display: grid; gap: 10px; align-content: start; }
.kd-karta__t { margin: 0; font-size: 13px; font-weight: 600; color: var(--stal); }
.kd-hist { margin: 0; padding: 0 0 0 14px; list-style: none; border-left: 2px solid var(--linia); display: grid; gap: 12px; }
.kd-hist li { position: relative; display: grid; font-size: 13px; }
.kd-hist li::before { content: ""; position: absolute; left: -20px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; border: 2px solid var(--czern); }
.kd-hist li:last-child::before { background: var(--czern); }
.kd-hist span { color: var(--stal); }
.kd-chk { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.kd-chk li { display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; font-size: 13px; }
.kd-chk li > span { grid-column: 2; color: var(--stal); font-size: 12px; }
.kd-chk .ik { width: 18px; height: 18px; color: var(--ok); }
.kd-kolko { width: 16px; height: 16px; margin: 1px; border-radius: 50%; border: 2px solid var(--szkielet); display: block; }
.kd-kolko--tok { border-color: #D97706; border-right-color: transparent; }
@media (max-width: 767px) {
  .kd-ekran { padding: 12px; }
  .kd-w--t { grid-template-columns: minmax(0, 1.4fr) auto; }
  .kd-w--t > :nth-child(2), .kd-w--t > :nth-child(3) { display: none; }
  .kd-mk .mk__chipy .mk__chip:nth-child(n+3) { display: none; }
  .kd-chip { right: 8px; left: 8px; bottom: -22px; justify-content: center; }
  .kd-kal__w { grid-template-columns: minmax(96px, 1.2fr) repeat(5, minmax(0, 1fr)); padding: 0 8px; background-size: calc((100% - 16px - 96px) / 5) 100%; font-size: 12px; }
  .kd-kal__w .hc__os .mk__av { display: none; }
  .kd-pas { font-size: 0; height: 16px; }
  .kd-plotno--tel { padding-right: 0; padding-bottom: 180px; }
  .kd-tel { width: 46%; bottom: 0; right: 4%; }
  .kd-karta { grid-template-columns: 1fr; }
}
@media (min-width: 768px) { .kd-plotno--tel { padding-right: 25%; } .kd-tel { width: 27%; right: 0; bottom: -6%; } }
@media (max-width: 767px) {
  .kd-chip { position: relative; left: auto; right: auto; bottom: auto; margin: 12px 0 0; width: max-content; max-width: 100%; }
  .kd-obraz-l { order: 2; }
  .kd-plotno--tel { padding-bottom: 0; }
  .kd-tel { position: relative; right: auto; bottom: auto; width: 62%; margin: -24px 0 0 auto; aspect-ratio: auto; }
  .kd-tel__e { gap: 4px; }
}