/* ==========================================================================
   KONTROLKA: DATA
   Typ DateTime. Zmierzone uzycie: 367.
   Pole natywne, wiec kalendarz systemowy, format lokalny i obsluga
   klawiatura dzialaja bez naszego kodu. Wlasny kalendarz w JavaScripcie
   jest zawsze gorszy niz systemowy i nie ma powodu go pisac.
   ========================================================================== */
.k-data {
  inline-size: 100%;
  block-size: var(--wys-aktualna);
  padding-inline: var(--odstep-3);
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
  color: var(--atrament);
  background: var(--pole-tlo);
  border: 1px solid var(--pole-kreska);
  border-radius: var(--promien-1);
  transition: border-color var(--czas-1) var(--wyjscie),
              background-color var(--czas-1) var(--wyjscie);
}

.k-data:hover:not(:disabled):not([readonly]) {
  border-color: var(--pole-kreska-mocna);
}

.k-data:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
  border-color: var(--marka);
}

.k-data:disabled {
  background: var(--pole-tlo-wylaczone);
  border-color: var(--kreska);
  color: var(--atrament-3);
  cursor: not-allowed;
}

.k-data[readonly] {
  background: var(--plyta-2);
  border-color: transparent;
  color: var(--atrament);
  cursor: default;
}

/* kalendarza nie ma po co pokazywac, jesli nie ma czego zmienic */
.k-data[readonly]::-webkit-calendar-picker-indicator {
  display: none;
}

.k-data[aria-busy="true"] {
  opacity: .6;
}

.k-data[aria-invalid="true"] {
  border-color: var(--alarm);
  background: var(--pole-tlo-blad);
}

.k-data[aria-invalid="true"]:focus-visible {
  outline-color: var(--alarm);
}

.k-data[data-stan="powodzenie"] {
  border-color: var(--powodzenie);
}

/* --- skroty. Nie zastepuja kalendarza, skracaja droge do dwoch albo trzech
       najczestszych odpowiedzi. Wiecej niz cztery to juz drugi kalendarz. -- */
.k-data-skroty {
  display: flex;
  gap: var(--odstep-1);
  flex-wrap: wrap;
}

.k-data-skrot {
  font: var(--tekst-pomoc);
  color: var(--marka-ciemna);
  background: none;
  border: 1px solid var(--kreska);
  border-radius: var(--promien-pelny);
  padding-inline: var(--odstep-2);
  padding-block: var(--odstep-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-data-skrot:hover {
  background: var(--marka-mgla);
}

.k-data-skrot:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}

.k-data-skrot:active {
  transform: var(--wcisniecie);
}

.k-data-skrot:disabled {
  color: var(--atrament-3);
  cursor: not-allowed;
}

/* --- wlasny wybornik: oprawa, guzik i okno kalendarza ------------------ */
.k-pole:has(.k-data-oprawa) { position: relative; }

.k-data-oprawa{
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
}
.k-data-oprawa .k-data{
  flex: 1;
  min-inline-size: 0;
  padding-inline-end: calc(var(--u) * 8);
}
.k-data-wlasna{
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
}
.k-data-guzik{
  position: absolute;
  inset-inline-end: var(--odstep-1);
  display: grid;
  place-items: center;
  inline-size: calc(var(--u) * 6);
  block-size: calc(var(--u) * 6);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}
.k-data-guzik:hover{ background: var(--plyta-2); color: var(--atrament); }
.k-data-guzik:active{ transform: var(--wcisniecie); }
.k-data-kalendarz{
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 100%;
  z-index: var(--warstwa-lista);
  margin-block-start: var(--odstep-1);
}

@media (prefers-reduced-motion: reduce) {
  .k-data,
  .k-data-skrot,
  .k-data-guzik {
    transition: none;
  }
  .k-data-guzik:active { transform: none; }
  .k-data-skrot:active {
    transform: none;
  }
}