/* ==========================================================================
   KONTROLKA: WSKAZANIE ELEMENTU
   Typy DataRow i Dictionary. Zmierzone uzycie: 352.
   Szuka po stronie serwera, wiec musi umiec pokazac, ze czeka. Cisza
   po wpisaniu frazy wyglada jak awaria, a nie jak zapytanie w drodze.
   ========================================================================== */
.k-pole:has(.k-wskazanie),
.k-pole:has(.k-wybor-wiele) {
  position: relative;
}

.k-wskazanie {
  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);
}

.k-wskazanie::placeholder {
  color: var(--atrament-3);
}

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

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

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

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

/* --- w toku. Zapytanie do serwera, wiec stan trwa realnie i widocznie. -- */
.k-wskazanie[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-wskazanie-czeka 1.1s var(--wyjscie) infinite;
}

@keyframes k-wskazanie-czeka {
  from { background-position: -40% 0; }
  to   { background-position: 140% 0; }
}

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

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

/* --- lista wynikow. Warstwa z master stylu, bo bez niej pierwsza lista
       schowa sie pod przyklejonym naglowkiem tabeli, a tego nikt nie
       przewiduje przy pisaniu kontrolki. --------------------------------- */
.k-wskazanie-lista {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--warstwa-lista);
  margin-block-start: var(--odstep-1);
  max-block-size: calc(var(--u) * 60);
  overflow-y: auto;
  background: var(--plyta);
  border: 1px solid var(--kreska);
  border-radius: var(--promien-2);
  box-shadow: var(--cien-lista);
}

.k-wskazanie-pozycja {
  display: flex;
  align-items: baseline;
  gap: var(--odstep-2);
  padding-inline: var(--odstep-3);
  padding-block: var(--odstep-2);
  font: var(--tekst-wartosc);
  color: var(--atrament);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-wskazanie-pozycja:hover {
  background: var(--marka-mgla);
}

.k-wskazanie-pozycja:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: calc(var(--pierscien-odstep) * -1);
}

.k-wskazanie-pozycja:active {
  background: var(--plyta-2);
}

.k-wskazanie-pozycja[aria-selected="true"] {
  background: var(--marka-mgla);
}

.k-wskazanie-opis {
  margin-inline-start: auto;
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

.k-wskazanie-pusto {
  padding: var(--odstep-3);
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

/* --- oprawa i przybory: czyszczenie oraz przegladanie ------------------ */
.k-wskazanie-oprawa{
  position: relative;
  display: flex;
  align-items: center;
  inline-size: 100%;
}
.k-wskazanie-oprawa .k-wskazanie{
  flex: 1;
  min-inline-size: 0;
  padding-inline-end: calc(var(--u) * 14);
}
.k-wskazanie-przybory{
  position: absolute;
  inset-inline-end: var(--odstep-1);
  display: flex;
  gap: 2px;
}
.k-wskazanie-wyczysc,
.k-wskazanie-rozwin{
  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-wskazanie-wyczysc:hover,
.k-wskazanie-rozwin:hover{
  background: var(--plyta-2);
  color: var(--atrament);
}
.k-wskazanie-wyczysc:active,
.k-wskazanie-rozwin:active{ transform: var(--wcisniecie); }

/* --- podswietlenie z klawiatury i trafienie frazy ---------------------- */
.k-wskazanie-pozycja[data-podswietlona="tak"]{
  background: var(--marka-mgla);
}
.k-wskazanie-etykieta{ min-inline-size: 0; }
.k-wskazanie-trafienie{
  background: none;
  color: inherit;
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .k-wskazanie,
  .k-wskazanie-pozycja,
  .k-wskazanie-wyczysc,
  .k-wskazanie-rozwin {
    transition: none;
  }
  .k-wskazanie-wyczysc:active,
  .k-wskazanie-rozwin:active { transform: none; }
  .k-wskazanie[aria-busy="true"] {
    animation: none;
    background-image: none;
  }
}