/* ==========================================================================
   SZKIELET: NAWIGACJA
   Zakladki, menu boczne, gorny pasek, okruszki.

   stan-nieobecny: readonly, error | powod: nawigacja nie ma stanu odczytu
   ani bledu walidacji. Pozycje, ktorych nie wolno uzyc, w ogole nie
   przychodza z silnika, a nie sa szarzone w przegladarce.
   ========================================================================== */

/* --- zakladki. 299 w korpusie. ----------------------------------------- */
.k-zakladki {
  display: grid;
  gap: var(--odstep-4);
}

.k-zakladki-pasek {
  display: flex;
  gap: var(--odstep-1);
  border-block-end: 1px solid var(--kreska);
  overflow-x: auto;
}

.k-zakladka {
  display: inline-flex;
  align-items: center;
  gap: var(--odstep-2);
  padding: var(--odstep-2) var(--odstep-3);
  font: var(--tekst-wartosc);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-block-end: 2px solid transparent;
  margin-block-end: -1px;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--czas-1) var(--wyjscie),
              border-color var(--czas-1) var(--wyjscie);
}

.k-zakladka:hover:not(:disabled) {
  color: var(--atrament);
}

.k-zakladka:focus-visible {
  outline: var(--pierscien) solid var(--marka);
  outline-offset: calc(var(--pierscien-odstep) * -1);
  border-radius: var(--promien-1);
}

.k-zakladka:active:not(:disabled) {
  transform: var(--wcisniecie);
}

.k-zakladka[aria-selected="true"] {
  color: var(--atrament);
  font-weight: 600;
  border-block-end-color: var(--marka);
}

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

.k-zakladka-licznik {
  font: var(--tekst-pomoc);
  font-variant-numeric: tabular-nums;
  color: var(--atrament-2);
  background: var(--plyta-2);
  border-radius: var(--promien-pelny);
  padding-inline: var(--odstep-2);
}

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

/* --- menu boczne --------------------------------------------------------- */
.k-menu {
  display: grid;
  align-content: start;
  gap: var(--odstep-1);
  padding: var(--odstep-3);
  background: var(--plyta);
  border-inline-end: 1px solid var(--kreska);
  min-block-size: 100%;
}

.k-menu-naglowek {
  font: var(--tekst-naglowek);
  color: var(--atrament);
  padding: var(--odstep-2) var(--odstep-3) var(--odstep-4);
}

/* znak u gory po lewej: obraz albo slowo. Wysokosc trzymana w jednostkach
   siatki, zeby logo klienta nie rozpychalo menu. */
.k-menu-logo { display: flex; align-items: center; min-block-size: calc(var(--u) * 10); }
.k-menu-logo-obraz { display: block; max-block-size: calc(var(--u) * 8); max-inline-size: 100%; }
.k-menu-marka { display: grid; gap: 2px; }
.k-menu-marka-slowo { font: var(--tekst-tytul); letter-spacing: -0.02em; line-height: 1.1; }
.k-menu-marka-akcent { font-weight: 800; color: var(--marka); }
.k-menu-marka-nazwa { font-weight: 500; color: var(--atrament); }
.k-menu-marka-dopisek { font: var(--tekst-etykieta); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--atrament-2); }

.k-menu-lista {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-menu-podlista {
  padding-inline-start: var(--odstep-6);
}

.k-menu-odnosnik {
  display: flex;
  align-items: center;
  gap: var(--odstep-2);
  inline-size: 100%;
  text-align: start;
  font: var(--tekst-wartosc);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  padding: var(--odstep-2) var(--odstep-3);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie),
              color var(--czas-1) var(--wyjscie);
}

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

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

.k-menu-odnosnik:active:not(:disabled) {
  transform: var(--wcisniecie);
}

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

.k-menu-odnosnik[aria-current="page"] {
  background: var(--marka-mgla);
  color: var(--marka-ciemna);
  font-weight: 600;
}

.k-menu-tekst {
  flex: 1;
}

.k-menu-licznik {
  font: var(--tekst-pomoc);
  font-variant-numeric: tabular-nums;
  color: var(--marka-ciemna);
  background: var(--marka-mgla);
  border-radius: var(--promien-pelny);
  padding-inline: var(--odstep-2);
}

.k-menu-grupa[aria-expanded="true"] .k-ikona:last-child {
  transform: rotate(180deg);
}

.k-menu-grupa .k-ikona:last-child {
  transition: transform var(--czas-2) var(--wyjscie);
}

/* --- gorny pasek ---------------------------------------------------------- */
.k-pasek {
  display: flex;
  align-items: center;
  gap: var(--odstep-3);
  padding: var(--odstep-2) var(--odstep-4);
  background: var(--plyta);
  border-block-end: 1px solid var(--kreska);
  position: sticky;
  inset-block-start: 0;
  z-index: var(--warstwa-nawigacja);
}

.k-pasek-menu {
  display: grid;
  place-items: center;
  inline-size: var(--wys-kontrolki);
  block-size: var(--wys-kontrolki);
  color: var(--atrament-2);
  background: none;
  border: none;
  border-radius: var(--promien-1);
  cursor: pointer;
  transition: background-color var(--czas-1) var(--wyjscie);
}

.k-pasek-menu:hover {
  background: var(--plyta-2);
}

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

.k-pasek-tytuly {
  flex: 1;
  min-inline-size: 0;
}

.k-pasek-tytul {
  font: var(--tekst-naglowek);
  color: var(--atrament);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.k-pasek-podtytul {
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
}

.k-pasek-dzialania {
  display: flex;
  gap: var(--odstep-2);
}

/* --- okruszki. Separator rysuje CSS, wiec czytnik go nie czyta. --------- */
.k-okruszki-lista {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.k-okruszki-pozycja {
  display: flex;
  align-items: center;
}

.k-okruszki-pozycja + .k-okruszki-pozycja::before {
  content: "/";
  color: var(--atrament-3);
  padding-inline: var(--odstep-2);
}

.k-okruszki-odnosnik {
  font: var(--tekst-pomoc);
  color: var(--atrament-2);
  background: none;
  border: none;
  padding: var(--odstep-1);
  border-radius: var(--promien-1);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--czas-1) var(--wyjscie);
}

.k-okruszki-odnosnik:hover {
  color: var(--marka-ciemna);
}

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

.k-okruszki-biezacy {
  font: var(--tekst-pomoc);
  color: var(--atrament);
  padding: var(--odstep-1);
}

@media (prefers-reduced-motion: reduce) {
  .k-zakladka,
  .k-menu-odnosnik,
  .k-menu-grupa .k-ikona:last-child,
  .k-pasek-menu,
  .k-okruszki-odnosnik {
    transition: none;
  }
  .k-zakladka:active:not(:disabled),
  .k-menu-odnosnik:active:not(:disabled) {
    transform: none;
  }
}