/* ==========================================================================
   KONTROLKA: SIATKA POZYCJI
   Typ ItemList. Zmierzone uzycie: 105.

   Jedyna kontrolka, ktora sklada inne. Komorka nie ma wlasnego wygladu pola,
   bo woła kontrolke z rejestru. Dlatego ten plik ustawia RAMY tabeli
   i nie dotyka niczego, co dzieje sie w komorce.

   Zageszczenie ustawia sie RAZ na kontenerze siatki, nie na kazdej komorce.
   ========================================================================== */
.k-siatka {
  display: grid;
  gap: var(--odstep-2);
  justify-items: start;
}

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

/* --- przewijanie poziome w OSOBNYM pojemniku, zeby strona nie jechala
       w bok. To jest najczestszy blad przy szerokich tabelach. ---------- */
.k-siatka-przewijak {
  inline-size: 100%;
  overflow-x: auto;
  border: 1px solid var(--kreska);
  border-radius: var(--promien-2);
  background: var(--plyta);
}

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

/* --- naglowek przyklejony. Warstwa z master stylu, bo bez niej lista
       rozwijana z komorki schowa sie pod naglowkiem. -------------------- */
.k-siatka-th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--warstwa-przyklejone);
  padding-inline: var(--odstep-2);
  padding-block: var(--odstep-2);
  font: var(--tekst-etykieta);
  color: var(--atrament-2);
  text-align: start;
  white-space: nowrap;
  background: var(--plyta-2);
  border-block-end: 1px solid var(--kreska);
}

.k-siatka-th[data-wyrownanie="do-prawej"] {
  text-align: end;
}

.k-siatka-th-akcje {
  inline-size: 1%;
}

.k-siatka-td {
  padding-inline: var(--odstep-1);
  padding-block: var(--odstep-1);
  border-block-end: 1px solid var(--kreska);
  vertical-align: middle;
}

.k-siatka-td[data-wyrownanie="do-prawej"] {
  text-align: end;
}

.k-siatka-tr:last-child .k-siatka-td {
  border-block-end: none;
}

/* --- hover na wierszu, nie na komorce. Wiersz jest jednostka
       zrozumienia, komorka nie. ---------------------------------------- */
.k-siatka-tr {
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-siatka-tr:hover {
  background: var(--marka-mgla);
}

/* --- pustka. Nazwana wprost, bo pusta tabela wyglada jak zepsuta. ----- */
.k-siatka-pusto {
  padding: var(--odstep-6);
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
  text-align: center;
}

/* --- suma. Wizualnie oddzielona, bo to nie jest kolejny wiersz danych. */
.k-siatka-suma .k-siatka-td {
  padding-block: var(--odstep-2);
  font: var(--tekst-liczba);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--atrament);
  background: var(--plyta-2);
  border-block-start: 2px solid var(--kreska-2);
  border-block-end: none;
}

/* suma pustej kolumny to BRAK, nie zero, i musi tak wygladac */
.k-siatka-brak {
  color: var(--atrament-3);
  font-weight: 400;
  font-style: italic;
}

/* --- dzialania. Dodanie jest przyciskiem glownym siatki, usuniecie
       jest ciche, bo pomylkowe klikniecie usuniecia boli. -------------- */
.k-siatka-dodaj {
  font: var(--tekst-wartosc);
  color: var(--marka-ciemna);
  background: none;
  border: 1px dashed var(--pole-kreska);
  border-radius: var(--promien-1);
  padding-inline: var(--odstep-4);
  block-size: var(--wys-kontrolki);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie),
              border-color var(--czas-1) var(--wyjscie);
}

.k-siatka-dodaj:hover {
  background: var(--marka-mgla);
  border-color: var(--marka);
}

.k-siatka-dodaj:focus-visible,
.k-siatka-usun:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: var(--pierscien-odstep);
}

.k-siatka-dodaj:active,
.k-siatka-usun:active {
  transform: var(--wcisniecie);
}

.k-siatka-dodaj:disabled,
.k-siatka-usun:disabled {
  color: var(--atrament-3);
  border-color: var(--kreska);
  cursor: not-allowed;
}

.k-siatka-usun {
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  padding-inline: var(--odstep-2);
  block-size: var(--wys-kontrolki-geste);
  cursor: pointer;
  transition: color var(--czas-1) var(--wyjscie),
              background-color var(--czas-1) var(--wyjscie);
}

.k-siatka-usun:hover {
  color: var(--alarm);
  background: var(--alarm-mgla);
}

/* --- tylko do odczytu. Wiersze widoczne, dzialan nie ma. Nie wygaszamy
       tresci, bo dane sa prawdziwe i trzeba je czytac. ----------------- */
.k-siatka.jest-do-odczytu .k-siatka-przewijak {
  background: var(--plyta-2);
}

.k-siatka.jest-do-odczytu .k-siatka-tr:hover {
  background: transparent;
}

/* --- w toku. Przeliczanie sum po stronie silnika. -------------------- */
.k-siatka[aria-busy="true"] .k-siatka-przewijak {
  opacity: .6;
  pointer-events: none;
}

/* --- blad. Obwodka na calej siatce, bo blad dotyczy zbioru pozycji,
       a nie jednej komorki. Blad komorki pokazuje sama komorka. ------- */
.k-siatka[aria-invalid="true"] .k-siatka-przewijak {
  border-color: var(--alarm);
}

@media (prefers-reduced-motion: reduce) {
  .k-siatka-tr,
  .k-siatka-dodaj,
  .k-siatka-usun {
    transition: none;
  }
  .k-siatka-dodaj:active,
  .k-siatka-usun:active {
    transform: none;
  }
}