/* ==========================================================================
   KONTROLKA: TEKST
   Obsluguje typy pol Varchar, Text, LongText. Zmierzone uzycie: 1252,
   czyli najczestsza kontrolka w calym korpusie.

   Wzorzec dla pozostalych dziesieciu. Jesli trzecia kontrolka pisana
   wedlug tego ukladu nie bedzie nudna, to znaczy, ze uklad jest zly.

   stan-nieobecny: active | powod: pole tekstowe nie ma stanu wcisniecia,
   nacisniecie na nim po prostu ustawia w nim kursor. Wcisniecie
   projektujemy na przyciskach i przelacznikach.
   ========================================================================== */

/* --- ramka pola: etykieta nad polem, komunikat pod polem ----------------- */
.k-pole {
  display: grid;
  gap: var(--odstep-1);
  min-inline-size: 0;                  /* zeby pole nie rozpychalo siatki formularza */
}

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

.k-etykieta[data-wymagane="tak"]::after {
  content: "*";
  margin-inline-start: var(--odstep-1);
  color: var(--alarm);
}

/* --- spoczynek ----------------------------------------------------------- */
.k-tekst {
  inline-size: 100%;
  block-size: var(--wys-aktualna);
  padding-inline: var(--odstep-3);
  font: var(--tekst-wartosc);
  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-tekst::placeholder {
  color: var(--atrament-3);            /* kontrast 4,5:1, nie szarosc dekoracyjna */
}

/* --- wariant wielolinijkowy: to samo pole, inna wysokosc ---------------- */
.k-tekst[data-linie="wiele"] {
  block-size: auto;
  min-block-size: calc(var(--wys-aktualna) * 2.5);
  padding-block: var(--odstep-2);
  resize: vertical;
  line-height: 1.5;
}

/* --- hover. Osobno od skupienia, bo uzytkownik klawiatury nie zobaczy
       hovera nigdy. -------------------------------------------------------- */
.k-tekst:hover:not(:disabled):not([readonly]) {
  border-color: var(--pole-kreska-mocna);
}

/* --- skupienie klawiatura. Pierscien zawsze widoczny, nigdy outline: none
       bez zamiennika. ------------------------------------------------------ */
.k-tekst:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
  border-color: var(--marka);
}

/* --- wylaczona. Znaczy "nie teraz". Kursor mowi to samo co kolor. ------- */
.k-tekst:disabled {
  background: var(--pole-tlo-wylaczone);
  border-color: var(--kreska);
  color: var(--atrament-3);
  cursor: not-allowed;
}

/* --- tylko do odczytu. Znaczy "nie ty". Wyglada jak tresc, nie jak pole,
       bo tu nie ma czego wpisywac. Roznica wobec wylaczonej musi byc
       widoczna bez czytania podpowiedzi. ---------------------------------- */
.k-tekst[readonly] {
  background: var(--plyta-2);
  border-color: transparent;
  color: var(--atrament);
  cursor: default;
}

/* --- w toku. Sprawdzenie po stronie serwera, na przyklad numeru
       identyfikacyjnego. Ruch tylko na przezroczystosci. ------------------ */
.k-tekst[aria-busy="true"] {
  background-image: linear-gradient(90deg,
    transparent 0%, var(--marka-mgla) 50%, transparent 100%);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: k-tekst-w-toku 1.1s var(--wyjscie) infinite;
}

@keyframes k-tekst-w-toku {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

/* --- blad. Walidacja na opuszczeniu pola, nie na kazdym znaku. ---------- */
.k-tekst[aria-invalid="true"] {
  border-color: var(--alarm);
  background: var(--pole-tlo-blad);
}

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

/* --- powodzenie. Krotkie potwierdzenie po zapisie, nie stan trwaly.
       Na polu tekstowym pojawia sie rzadko i celowo gasnie samo. --------- */
.k-tekst[data-stan="powodzenie"] {
  border-color: var(--powodzenie);
}

/* --- komunikaty pod polem ------------------------------------------------ */
.k-pomoc {
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

.k-blad {
  font: var(--tekst-blad);
  color: var(--alarm);
}

/* --- jednostka i licznik znakow: w polu, nie obok niego ----------------- */
.k-pole:has(.k-jednostka) .k-tekst {
  padding-inline-end: var(--odstep-8);
}

.k-jednostka {
  grid-area: pole;
  justify-self: end;
  align-self: center;
  margin-inline-end: var(--odstep-3);
  font: var(--tekst-pomoc);
  color: var(--atrament-jednostka);
  pointer-events: none;
}

.k-licznik {
  font: var(--tekst-pomoc);
  color: var(--atrament-3);
  justify-self: end;
  font-variant-numeric: tabular-nums;
}

.k-licznik[data-przekroczony="tak"] {
  color: var(--alarm);
}

/* --- rozmiary. Zamknieta lista, bramka odrzuca kazdy inny. ------------- */
.k-rozmiar-maly   { --wys-aktualna: var(--wys-kontrolki-geste); }
.k-rozmiar-sredni { --wys-aktualna: var(--wys-kontrolki); }
.k-rozmiar-duzy   { --wys-aktualna: var(--wys-kontrolki-luzne); }

/* --- wygaszenie ruchu. Czasy gasi master styl, animacje gasimy tutaj. -- */
@media (prefers-reduced-motion: reduce) {
  .k-tekst[aria-busy="true"] {
    animation: none;
    background-image: none;
  }
}