/* border-collapse: collapse rozjezdza sie z position: sticky — przewijane
   wiersze przebijaja przez tla naglowka. separate + zerowy odstep daje ten
   sam wyglad bez artefaktu. */
.tabela-jn {
  border-collapse: separate;
  border-spacing: 0;
}

/* Klasy pomocnicze w jezyku kalkulatora K — Tailwind robi reszte.
   Trzymamy je tutaj, a nie w @apply, bo build Tailwinda w przegladarce
   nie przetwarza wlasnych arkuszy. */

.th-jn {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
  padding: .5rem .5rem;
  /* Podpisy kolumn wysrodkowane nad swoja kolumna — wartosci zostaja
     wyrownane po swojemu (liczby do prawej, tekst do lewej). */
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6b7280;
  white-space: nowrap;
}
.th-jn.text-right { text-align: center; }  /* zostaje dla zgodnosci znacznikow */

/* Przelicznik to powod, dla ktorego ta tabela istnieje — dlatego wyrozniony */
.th-akcent {
  background: #eff6ff;
  border-bottom-color: #bfdbfe;
  color: #1d4ed8;
  text-align: center;
}

.td-jn {
  padding: .4rem .5rem;
  border-bottom: 1px solid #f3f4f6;
  white-space: nowrap;
}
#wiersze tr:hover { background: #f9fafb; }
#wiersze tr:hover .td-akcent { background: #eff6ff; }
.td-akcent { background: #f8fbff; font-weight: 600; text-align: right; }

.chip {
  padding: .25rem .75rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  background: #fff;
  transition: all .15s;
  cursor: pointer;
}
.chip:hover { border-color: #9ca3af; color: #374151; }
.chip[aria-pressed="true"] {
  background: #111827;
  border-color: #111827;
  color: #fff;
  font-weight: 600;
}

.badge {
  display: inline-block;
  padding: .05rem .4rem;
  border-radius: .25rem;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.badge-ok   { background: #dcfce7; color: #15803d; }
.badge-luka { background: #ffedd5; color: #c2410c; }
.badge-nd   { background: #f3f4f6; color: #9ca3af; }

.swieza { background: #dcfce7; color: #15803d; }
.stara  { background: #fee2e2; color: #b42318; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Nazwa to jedyna kolumna o nieprzewidywalnej dlugosci — tylko ona zawija,
   dzieki czemu Cena zakupu nie wypada za prawa krawedz na 1440 px. */
.td-nazwa {
  white-space: normal;
  min-width: 260px;
  max-width: 380px;
  line-height: 1.3;
}

/* Wiersz filtrow — druga warstwa naglowka, wiec tez sticky, ale nizej. */
.th-filtr {
  position: sticky;
  /* Wlasciwy offset ustawia JS po renderze — wysokosc naglowka zalezy od
     fontu, ktory moze sie nie doladowac. Ta wartosc to tylko punkt startowy. */
  top: 30px;
  z-index: 9;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: .25rem .5rem .375rem;
}
.th-filtr-akcent { background: #f8fbff; }
.in-filtr {
  width: 100%;
  min-width: 56px;
  padding: .2rem .4rem;
  border: 1px solid #e5e7eb;
  border-radius: .25rem;
  font-size: 11px;
  font-weight: 400;
  color: #374151;
  background: #fff;
}
.in-filtr::placeholder { color: #d1d5db; font-weight: 400; }
.in-filtr:focus { outline: none; border-color: #3b82f6; }
.in-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Telefon: na 390 px kolumna nazwy zjadala pol ekranu i reszta chowala sie
   za scrollem. Wezsza nazwa plus ciasniejsze komorki mieszcza kilka kolumn
   naraz, wiec technolog widzi stan bez przewijania w bok. */
@media (max-width: 640px) {
  .td-nazwa { min-width: 150px; max-width: 220px; }
  .td-jn, .th-jn { padding-left: .375rem; padding-right: .375rem; }
  .tabela-jn { font-size: 13px; }
}

/* Klikalny naglowek — strzalka pokazuje kierunek, ale dopiero po kliknieciu:
   dziewiec strzalek naraz to szum, nie informacja. */
.th-sort { cursor: pointer; user-select: none; }
.th-sort:hover { color: #111827; }
.th-sort[data-kier]::after {
  content: attr(data-strzalka);
  margin-left: .25rem;
  color: #2563eb;
  font-weight: 700;
}
.th-sort[data-kier] { color: #1d4ed8; }

/* Kod kopiuje sie po kliknieciu, wiec musi wygladac na klikalny. */
.kod-kopiuj { cursor: copy; }
.kod-kopiuj:hover { color: #2563eb; text-decoration: underline; }
.kod-skopiowany { color: #15803d !important; font-weight: 700; }

.suma-etykieta { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; display: block; }
.suma-wartosc { font-weight: 700; font-variant-numeric: tabular-nums; }
.suma-zakres { font-size: 10px; color: #9ca3af; font-weight: 400; }

/* Zakladki jak w kalkulatorze: aktywna na bialo z cieniem, reszta plaska. */
.zakladka {
  padding: .375rem .875rem;
  border-radius: .375rem;
  font-size: 13px;
  font-weight: 600;
  color: #6b7280;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: all .15s;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}
.zakladka:hover { color: #374151; }
.zakladka[aria-selected="true"] {
  background: #fff;
  color: #111827;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.licznik-koszyka {
  min-width: 1.25rem;
  padding: 0 .3rem;
  border-radius: 9999px;
  background: #e5e7eb;
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.zakladka[aria-selected="true"] .licznik-koszyka { background: #1d4ed8; color: #fff; }
.licznik-koszyka[data-pusty="true"] { display: none; }

/* Przycisk dodania do koszyka: widoczny, ale nie krzyczy. */
.dodaj {
  width: 1.5rem; height: 1.5rem;
  border-radius: .25rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: all .12s;
}
.dodaj:hover { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.dodaj[data-wkoszyku="true"] { background: #dcfce7; border-color: #86efac; color: #15803d; }

.in-koszyk {
  width: 5.5rem;
  padding: .2rem .4rem;
  border: 1px solid #e5e7eb;
  border-radius: .25rem;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.in-koszyk:focus { outline: none; border-color: #3b82f6; }
/* Ilosc zero to nie wycena, tylko niedokonczona pozycja: widac to od razu. */
.in-koszyk[data-zero="true"] { border-color: #fca5a5; background: #fef2f2; }
.in-marza { width: 4rem; }
.in-marza::placeholder { color: #d1d5db; }

.usun {
  border: 0; background: transparent; color: #d1d5db;
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 .25rem;
}
.usun:hover { color: #b42318; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.wpis-archiwum { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; padding: .625rem 0; }
.wpis-archiwum a { color: #1d4ed8; font-weight: 600; text-decoration: none; font-size: 14px; }
.wpis-archiwum a:hover { text-decoration: underline; }
.wpis-meta { font-size: 11px; color: #9ca3af; }

/* Ilosc i jednostka to jedno pole decyzji, wiec siedza obok siebie. */
.grupa-ilosci { display: inline-flex; gap: .25rem; align-items: center; }
.in-jednostka {
  padding: .2rem .25rem;
  border: 1px solid #e5e7eb;
  border-radius: .25rem;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
  background: #fff;
  cursor: pointer;
}
.in-jednostka:focus { outline: none; border-color: #3b82f6; }
.in-jednostka:disabled { color: #9ca3af; background: #f9fafb; cursor: default; }

/* Kolumny przelicznikowe wchodza dopiero na zyczenie. */
.kol-extra { display: none; }
body[data-wiecej="true"] .kol-extra { display: table-cell; }

/* Wiersz grupy: ciemny pasek z sumami, klikalny (zwija grupe). */
.wiersz-grupy { cursor: pointer; }
.wiersz-grupy td {
  background: #eef2f7;
  border-top: 1px solid #d8dde3;
  border-bottom: 1px solid #d8dde3;
  padding: .35rem .625rem;
  font-size: 12px;
  font-weight: 700;
  color: #1f3a5f;
  letter-spacing: .01em;
}
.wiersz-grupy:hover td { background: #e2e8f0; }

/* Chip zestawu ma krzyzyk do usuniecia — pojawia sie po najechaniu. */
.chip-zestaw { position: relative; padding-right: 1.5rem; }
.usun-zestaw {
  position: absolute; right: .4rem; top: 50%; transform: translateY(-50%);
  font-size: 10px; color: #d1d5db; opacity: 0; transition: opacity .12s;
}
.chip-zestaw:hover .usun-zestaw { opacity: 1; }
.usun-zestaw:hover { color: #b42318; }

/* Okno wysylki: przycmione tlo, karta na srodku. */
.okno-tlo {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17, 24, 39, .45);
  display: grid; place-items: center; padding: 1rem;
}
.okno {
  background: #fff; border-radius: .75rem; border: 2px solid #e5e7eb;
  padding: 1.25rem; width: min(560px, 96vw);
  box-shadow: 0 12px 32px rgba(0,0,0,.18);
}
.podglad {
  margin-top: .875rem; padding: .75rem;
  background: #f9fafb; border: 1px solid #e5e7eb; border-radius: .5rem;
  font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  max-height: 260px; overflow: auto; color: #374151;
}

/* ─── telefon: tabela stanow czyta sie jako karty ─────────────────────────
   Dziewiec kolumn na 390 px trzeba przesuwac palcem, wiec na waskim ekranie
   kazdy wiersz staje sie kafelkiem: nazwa jako tytul, resztа jako pary
   podpis-wartosc. Uklad zmienia sam CSS — logika rysowania jest jedna. */
@media (max-width: 700px) {
  #tabela-naglowek, #wiersz-filtrow { display: none; }

  .tabela-jn, #wiersze { display: block; width: 100%; }

  #wiersze tr {
    display: grid;
    /* trzy kolumny: przycisk, potem dwie na pola — dzieki temu na karcie
       siedza po dwa pola w rzedzie i kafelek jest o polowe krotszy */
    grid-template-columns: auto 1fr 1fr;
    gap: .1rem .5rem;
    background: #fff;
    border: 1px solid var(--ramka);
    border-radius: .5rem;
    padding: .625rem .75rem;
    margin-bottom: .5rem;
  }
  #wiersze tr:hover { background: #fff; }

  #wiersze td {
    display: block;
    border: 0;
    padding: 0;
    white-space: normal;
    text-align: left !important;
    grid-column: 2;
  }

  /* przycisk, kod i nazwa tworza naglowek karty na calej szerokosci */
  #wiersze td:first-child { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  #wiersze td:nth-child(2) { grid-column: 2 / span 2; }
  #wiersze td:nth-child(3) {
    grid-column: 2 / span 2; font-size: 14px; font-weight: 600; line-height: 1.3;
    margin-bottom: .25rem; max-width: none; min-width: 0;
  }

  /* pozostale pola wchodza automatycznie po dwa w rzedzie */
  #wiersze td:nth-child(n+4) { grid-column: auto; margin-top: .3rem; }
  #wiersze td[data-etykieta]:nth-child(n+4)::before {
    content: attr(data-etykieta);
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--szary);
    font-weight: 600;
  }
  #wiersze td:nth-child(2) { font-size: 10px; color: var(--szary); }

  /* wiersz grupy zostaje paskiem na calej szerokosci */
  #wiersze tr.wiersz-grupy { display: block; padding: 0; border: 0; background: none; }
  #wiersze tr.wiersz-grupy td { padding: .4rem .625rem; border-radius: .375rem; }

  .tabela-scroll, .overflow-x-auto { overflow-x: visible; }
  .dodaj { width: 1.75rem; height: 1.75rem; }
}

/* Ostatni zakup prowadzi do zadania w Asanie — to zaproszenie do sprawdzenia,
   bo ceny pochodza z opisow pisanych rekami. */
.link-zakup { color: #1d4ed8; text-decoration: none; font-weight: 600; }
.link-zakup:hover { text-decoration: underline; }
.link-zakup.italic { font-style: italic; font-weight: 500; }