/* =====================================================================
   Paczka 240 -- pelnoekranowy kalendarz pracownika.

   Robert: "to, co teraz jest, nie da sie nawet przewijac".

   Dlatego to NIE jest okno (.modal). Okna pracownika maja narzucona
   z gory wysokosc i wlasne reguly przewijania w assets/pro-design-6.96.css,
   same z !important -- miesiac plus edytor dnia sie tam nie miescily.
   Tu mamy wlasna kolumne na cala wysokosc: pasek i dni tygodnia stoja,
   PRZEWIJA SIE TYLKO SIATKA, a dzien wysuwa sie od dolu.

   Kazda klasa, ktora ustawia display, pilnuje [hidden] -- na tym juz
   dwa razy polegliśmy (Paczki 215b i 225).
   ===================================================================== */

.calScreen {
  --calTlo: #f4f7fb;
  --calPlyta: #ffffff;
  --calKreska: #dfe6ef;
  --calTekst: #16233a;
  --calSzary: #6a7789;
  --calAkcent: #0b5fcc;
  --calZielen: #12764a;

  position: fixed;
  inset: 0;
  /* Paczka 240: pasek i szuflada Workera siegaja 1500 (assets/worker-nav.css).
     Kalendarz jest ekranem na wierzchu wszystkiego -- inaczej wlasny pasek
     aplikacji przykrywa jego naglowek z nazwa miesiaca, co wlasnie sie
     stalo za pierwszym razem. */
  z-index: 1600;
  display: flex;
  flex-direction: column;
  background: var(--calTlo);
  color: var(--calTekst);
  font-size: 14px;
  overscroll-behavior: contain;
}
.calScreen[hidden] { display: none !important; }

/* Pod spodem nic sie nie przewija, kiedy kalendarz jest otwarty. */
body.calOpen { overflow: hidden; }

/* --- pasek u gory ------------------------------------------------- */
.calBar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  border-bottom: 1px solid var(--calKreska);
  background: var(--calPlyta);
}
.calBar[hidden] { display: none !important; }

.calBack,
.calNav {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--calKreska);
  border-radius: 11px;
  background: var(--calTlo);
  color: var(--calTekst);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.calBack[hidden], .calNav[hidden] { display: none !important; }
.calNav:disabled { opacity: .35; cursor: default; }

.calTitle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.calTitle[hidden] { display: none !important; }
.calTitle b { font-size: 17px; letter-spacing: .01em; }
.calTitle small { font-size: 11px; color: var(--calSzary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Paczka 243: widac na pierwszy rzut oka, czy to biezacy miesiac.
   Odznaka, gdy tak; przycisk powrotu, gdy nie -- nigdy oba naraz. */
.calNow {
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--calAkcent);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.calNow[hidden] { display: none !important; }

.calTodayBtn {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--calAkcent);
  border-radius: 999px;
  background: transparent;
  color: var(--calAkcent);
  font-size: 12.5px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
.calTodayBtn[hidden] { display: none !important; }
.calTodayBtn:hover { background: var(--calAkcent); color: #fff; }

/* Biezacy miesiac dostaje takze delikatna kreske pod paskiem -- zeby
   roznica byla widoczna takze katem oka, nie tylko po przeczytaniu. */
.calScreen.calThisMonth .calBar { box-shadow: inset 0 -2px 0 var(--calAkcent); }

.calArrows { flex: 0 0 auto; display: flex; gap: 6px; }
.calArrows[hidden] { display: none !important; }

/* --- suma miesiaca ------------------------------------------------- */
.calSummary {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  background: var(--calPlyta);
  border-bottom: 1px solid var(--calKreska);
}
.calSummary[hidden] { display: none !important; }
.calSummary > span {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 4px;
  border-radius: 11px;
  background: var(--calTlo);
  text-align: center;
}
.calSummary b, .calSummary i, .calSummary em {
  font-style: normal;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}
.calSummary i { color: var(--calAkcent); }
.calSummary em { color: var(--calZielen); }
.calSummary small { font-size: 10.5px; color: var(--calSzary); }

/* --- dni tygodnia (stoja) ------------------------------------------ */
.calWeekdays {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 9px 10px 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--calSzary);
  text-align: center;
  text-transform: uppercase;
}
.calWeekdays[hidden] { display: none !important; }
.calWeekdays .calWeekend { color: #a8b2c0; }

/* --- to jest jedyna rzecz, ktora sie przewija ---------------------- */
.calScroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 10px calc(22px + env(safe-area-inset-bottom));
}
.calScroll[hidden] { display: none !important; }

.calGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}
.calGrid[hidden] { display: none !important; }

.calLoading {
  grid-column: 1 / -1;
  padding: 40px 10px;
  color: var(--calSzary);
  text-align: center;
}
.calLoading.calBad { color: #a8352c; }

.calPad { display: block; }

.calDay {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  aspect-ratio: 1 / 1.14;
  padding: 5px 2px 4px;
  border: 1px solid var(--calKreska);
  border-radius: 13px;
  background: var(--calPlyta);
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.calDay[hidden] { display: none !important; }

.calNum { font-size: 11.5px; font-weight: 700; color: var(--calSzary); }
.calConfirmed { font-size: 17px; font-weight: 800; line-height: 1.15; }
.calConfirmed.calEmpty { color: #cdd5e0; font-weight: 700; }
.calMarks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-height: 12px;
}
.calClaim { font-style: normal; font-size: 10.5px; font-weight: 800; color: var(--calAkcent); }
.calOff { font-style: normal; font-size: 9px; font-weight: 800; color: var(--calZielen); letter-spacing: .02em; }

.calWeekendDay { background: #fafbfd; }
.calLeave { background: rgba(18, 118, 74, .08); border-color: rgba(18, 118, 74, .28); }
.calFuture { opacity: .42; }
.calToday { border-color: var(--calAkcent); box-shadow: inset 0 0 0 1.5px var(--calAkcent); }
.calPicked { background: var(--calAkcent); border-color: var(--calAkcent); }
.calPicked .calNum, .calPicked .calConfirmed, .calPicked .calClaim, .calPicked .calOff { color: #fff; }
.calPicked .calConfirmed.calEmpty { color: rgba(255, 255, 255, .55); }

.calLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 14px 2px 0;
  font-size: 11px;
  color: var(--calSzary);
}
.calLegend[hidden] { display: none !important; }
.calLegend b { color: var(--calTekst); font-weight: 800; }
.calLegend i { font-style: normal; font-weight: 800; color: var(--calAkcent); }
.calLegend em { font-style: normal; font-weight: 800; color: var(--calZielen); }

/* --- szuflada dnia -------------------------------------------------- */
/* Siatka nie chowa sie pod szuflada -- ostatnie dni musza dac sie
   dosiegnac kciukiem. */
/* Paczka 253: odstep u dolu nie jest juz sztywny.

   Stalo tu 56vh -- wartosc dobrana pod szuflade z Paczki 240. Odkad
   doszedl do niej blok urlopowy, szuflada bywa wyzsza i OSTATNI DZIEN
   MIESIACA chowal sie pod nia. Zlapal to test Paczki 243, ten sam,
   ktory powstal po tamtej awarii.

   Teraz odstep ustawia skrypt, mierzac PRAWDZIWA wysokosc szuflady --
   wiec zadna przyszla zmiana jej zawartosci go nie unieważni. Wartosc
   ponizej zostaje jako zabezpieczenie na wypadek, gdyby skrypt nie
   zdazyl jej policzyc. */
.calScreen.calDayOpen .calScroll { padding-bottom: 56vh; }

.calSheet {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  max-height: 76%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 16px calc(18px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--calKreska);
  border-radius: 18px 18px 0 0;
  background: var(--calPlyta);
  box-shadow: 0 -14px 44px rgba(8, 17, 29, .22);
  animation: calSheetIn .18s ease-out;
}
.calSheet[hidden] { display: none !important; }
@keyframes calSheetIn { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .calSheet { animation: none; } }

.calGrab {
  width: 38px; height: 4px;
  margin: 0 auto 10px;
  border-radius: 999px;
  background: #d5dce6;
}
.calSheetHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}
.calSheetHead[hidden] { display: none !important; }
.calSheetHead b { font-size: 17px; }
.calSheetClose {
  width: 34px; height: 34px;
  border: 1px solid var(--calKreska);
  border-radius: 9px;
  background: var(--calTlo);
  color: var(--calTekst);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.calPills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.calPills[hidden] { display: none !important; }
.calPill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
}
.calPillGrey { background: #eef1f6; color: var(--calSzary); }
.calPillDark { background: #16233a; color: #fff; }
.calPillGreen { background: rgba(18, 118, 74, .13); color: var(--calZielen); }

.calManagerNote { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; }
.calSay { margin: 0 0 11px; font-size: 12px; line-height: 1.5; color: var(--calSzary); }
.calShut {
  margin: 2px 0 0;
  padding: 11px 12px;
  border-radius: 11px;
  background: #fff6e8;
  color: #8a5a12;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

.calFields { display: grid; grid-template-columns: 110px 1fr; gap: 10px; }
.calFields[hidden] { display: none !important; }
.calFields label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  color: var(--calSzary);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.calFields input {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid var(--calKreska);
  border-radius: 11px;
  background: var(--calTlo);
  color: var(--calTekst);
  font: inherit;
  font-size: 15px;
}
.calFields input:focus-visible { outline: 2px solid var(--calAkcent); outline-offset: 1px; }

.calSheetFoot { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; }
.calSheetFoot[hidden] { display: none !important; }
.calSave {
  flex: 1 1 auto;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--calAkcent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.calState { flex: 0 0 auto; font-style: normal; font-size: 12.5px; font-weight: 800; }
.calState.calOk { color: var(--calZielen); }
.calState.calBadText { color: #a8352c; }

@media (min-width: 620px) {
  .calScroll, .calWeekdays { padding-left: max(10px, calc((100% - 560px) / 2)); padding-right: max(10px, calc((100% - 560px) / 2)); }
  .calSheet { left: 50%; right: auto; width: min(560px, 100%); transform: translateX(-50%); border-radius: 18px 18px 0 0; }
  @keyframes calSheetIn { from { transform: translateX(-50%) translateY(14px); opacity: .6; } to { transform: translateX(-50%); opacity: 1; } }
}

@media (prefers-color-scheme: dark) {
  .calNow { color: #0b1524; }
  .calTodayBtn:hover { color: #0b1524; }
  .calScreen {
    --calTlo: #0e1622;
    --calPlyta: #17212f;
    --calKreska: #2a3646;
    --calTekst: #e8edf4;
    --calSzary: #93a1b4;
    --calAkcent: #6ea8ff;
    --calZielen: #5fcf9a;
  }
  .calConfirmed.calEmpty { color: #3a4557; }
  .calWeekendDay { background: #141d2a; }
  .calPicked .calNum, .calPicked .calConfirmed, .calPicked .calClaim, .calPicked .calOff { color: #0b1524; }
  .calPillDark { background: #e8edf4; color: #0e1622; }
  .calPillGrey { background: #202b3b; }
  .calShut { background: rgba(224, 164, 94, .12); color: #e0a45e; }
  .calGrab { background: #33405290; }
  .calSave { color: #0b1524; }
}

/* =====================================================================
   Paczka 253 -- WNIOSEK URLOPOWY W SZUFLADZIE DNIA.

   Oddzielony od godzin kreska i odstepem, bo to dwie rozne rzeczy:
   godziny mowia, co BYLO, wniosek prosi o to, co BEDZIE. Na jednym
   ekranie musza byc rozroznialne bez czytania.
   ===================================================================== */
.calLeave{
  margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(148,163,184,.34);
}
.calLeaveNote{
  display:grid;gap:5px;margin-top:9px;
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#64748b;
}
.calLeaveNote input{
  min-height:44px;padding:0 12px;
  border:1px solid #cbd5e1;border-radius:11px;
  background:#fff;color:#0f172a;font:400 16px/1 inherit;
}
.calLeaveAsk{background:#0f766e}
.calLeaveState{display:block;margin-top:7px;font-style:normal;font-size:13px;color:#64748b}
.calLeaveState.calBad{color:#b91c1c;font-weight:600}

/* =====================================================================
   Paczka 253 -- SZUFLADA NIE MOZE ZAJAC POLOWY EKRANU.

   Po dolozeniu bloku urlopowego szuflada dnia urosla tak, ze na telefonie
   zaslaniala kalendarz, z ktorego sie wybiera dzien -- a ostatni dzien
   miesiaca chowal sie pod nia nawet po przewinieciu. Zlapal to test
   Paczki 243.

   OGRANICZAMY WYSOKOSC, ALE Z WLASNYM PRZEWIJANIEM. To jest cala roznica
   wobec bledu z Paczki 240: tamten wzial sie z przyciecia BEZ mozliwosci
   przewiniecia, przez co dolna czesc tresci byla nie do dosiegniecia.
   Tutaj tresc zostaje dostepna, tylko szuflada przestaje zarastac ekran.
   ===================================================================== */
#calSheet{
  /* 32vh, a nie "tyle, ile trzeba": siatka miesiaca NIE PRZEWIJA SIE na
     wyzszym telefonie (cala tresc miesci sie w kontenerze), wiec zaden
     odstep u dolu nie podniesie ostatniego wiersza ponad szuflade --
     sprawdzilem to pomiarem, zanim tu wpisalem liczbe. Jedyne, co
     decyduje, to wysokosc samej szuflady. Tresc w niej sie przewija,
     wiec nic z niej nie ginie. */
  max-height:32vh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}