/* ==========================================================================
   SZKIELET: KALENDARZ
   Siatka miesiaca w master stylu. Uzywana w P.data i samodzielnie.

   stan-nieobecny: readonly, loading, error | powod: kalendarz jest widokiem
   wyboru, nie polem. Odczyt zalatwia P.data, ktore go w ogole nie otwiera,
   wczytywanie i blad naleza do pola daty, nie do siatki dni.
   ========================================================================== */
.k-kalendarz {
  inline-size: calc(var(--u) * 70);
  padding: var(--odstep-3);
  background: var(--plyta);
  border: 1px solid var(--kreska);
  border-radius: var(--promien-2);
  box-shadow: var(--cien-lista);
}

.k-kalendarz-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--odstep-2);
  margin-block-end: var(--odstep-2);
}

.k-kalendarz-tytul {
  font: var(--tekst-etykieta);
  color: var(--atrament);
}

.k-kalendarz-krok {
  display: grid;
  place-items: center;
  inline-size: calc(var(--u) * 7);
  block-size: calc(var(--u) * 7);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-kalendarz-krok:hover:not(:disabled) {
  background: var(--plyta-2);
  color: var(--atrament);
}

.k-kalendarz-krok:focus-visible,
.k-kalendarz-data:focus-visible,
.k-kalendarz-dzis:focus-visible,
.k-kalendarz-wyczysc:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: calc(var(--pierscien-odstep) * -1);
}

.k-kalendarz-krok:active:not(:disabled),
.k-kalendarz-data:active:not(:disabled) {
  transform: var(--wcisniecie);
}

.k-kalendarz-siatka {
  inline-size: 100%;
  border-collapse: collapse;
}

.k-kalendarz-dzien-tygodnia {
  font: var(--tekst-pomoc);
  color: var(--atrament-3);
  text-align: center;
  padding-block: var(--odstep-1);
  font-weight: 400;
}

.k-kalendarz-komorka {
  padding: 1px;
  text-align: center;
}

.k-kalendarz-data {
  inline-size: calc(var(--u) * 9);
  block-size: calc(var(--u) * 8);
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
  color: var(--atrament);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--promien-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-kalendarz-data:hover:not(:disabled) {
  background: var(--marka-mgla);
}

/* dzien spoza ogladanego miesiaca jest widoczny, ale wyciszony,
   zeby tydzien na przelomie dalo sie ogarnac jednym spojrzeniem */
.k-kalendarz-data[data-poza="tak"] {
  color: var(--atrament-3);
}

.k-kalendarz-data[data-dzis="tak"] {
  border-color: var(--marka);
}

.k-kalendarz-data[aria-selected="true"] {
  background: var(--marka);
  color: var(--plyta);
  font-weight: 600;
}

.k-kalendarz-data:disabled {
  color: var(--atrament-3);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: var(--kreska-2);
}

.k-kalendarz-stopka {
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--odstep-2);
  padding-block-start: var(--odstep-2);
  border-block-start: 1px solid var(--kreska);
}

.k-kalendarz-dzis,
.k-kalendarz-wyczysc {
  font: var(--tekst-pomoc);
  color: var(--marka-ciemna);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  padding: var(--odstep-1) var(--odstep-2);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-kalendarz-wyczysc {
  color: var(--atrament-2);
}

.k-kalendarz-dzis:hover,
.k-kalendarz-wyczysc:hover {
  background: var(--plyta-2);
}

.k-kalendarz-dzis:active,
.k-kalendarz-wyczysc:active {
  transform: var(--wcisniecie);
}

@media (prefers-reduced-motion: reduce) {
  .k-kalendarz-krok,
  .k-kalendarz-data,
  .k-kalendarz-dzis,
  .k-kalendarz-wyczysc {
    transition: none;
  }
  .k-kalendarz-krok:active:not(:disabled),
  .k-kalendarz-data:active:not(:disabled),
  .k-kalendarz-dzis:active,
  .k-kalendarz-wyczysc:active {
    transform: none;
  }
}