/* Strony systemow (systemy.html.twig — pelny i skrocony). Laduje autoAsset()
   PO build.css, wiec nadpisuje bez przebudowy Tailwinda.

   ROZPISKA KUPONOW (daro, 19.09.2026): wiersze listy stały jeden pod drugim
   bez odstepu, a liczby szly zwyklym tekstem („Kupon 1: 1, 2, 3, 4, 5, 6").
   Teraz 10 px rytmu miedzy wierszami i liczby w kulach danej gry — tych
   samych, co na wynikach (.kula--<gra> z build.css). */

.kupony-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.kupony-lista__wiersz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
}

/* Kreska tylko MIEDZY wierszami: pierwszy zaczyna sie pod statusem, ostatni
   nie dokleja linii do dolnej krawedzi karty. */
.kupony-lista__wiersz + .kupony-lista__wiersz {
  border-top: 1px solid var(--obramowanie);
}

.kupony-lista__nr {
  min-width: 84px;
  font-size: 13px;
  font-weight: 600;
  color: var(--tekst2);
  font-variant-numeric: tabular-nums;
}

.kupony-lista__euro {
  font-size: 13px;
  color: var(--tekst2);
}

/* Jeden rytm 10 px w calej karcie. Wczesniej nakladaly sie trzy zrodla:
   `gap` formularza, marginesy jego dzieci i padding kazdego pola. W efekcie
   miedzy kontrolkami powstawalo 20-40 px. Logiczny wrapper pola nie jest
   osobna karta, dlatego nie dostaje wlasnego paddingu. */
[data-system-kupony] {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px;
}

[data-system-kupony] > *,
[data-kupony-form] > * { margin: 0; }

[data-kupony-form] { gap: 10px; }

[data-kupony-form] .formularz__pole {
  gap: 10px;
  padding: 0;
}

[data-kupony-form] .formularz__etykieta,
[data-kupony-form] .formularz__pomoc { margin: 0; }

[data-kupony-form] .komunikat { padding: 10px; }

[data-kupony-status] { margin: 0; }
[data-kupony-status]:empty { display: none; }

[data-kupony-form] button,
[data-kupony-form] select,
[data-kupony-form] input { min-height: 44px; }

/* Przycisk „losuj liczby" stoi w jednym rzedzie z polem, nie pod nim. */
.kupony-pole-liczby {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.kupony-pole-liczby > input {
  flex: 1 1 220px;
  min-width: 0;
}

.kupony-losuj {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .kupony-lista__nr { min-width: 0; }
}

/* Aktywny system: ta sama czytelna powierzchnia dla td i naglowka wiersza.
   Nadpisuje stale jasne tlo z main.css, takze na hover i w parzystym wierszu. */
.strona--systemy { --system-aktywny-tlo: #FFF8DB; }
.a11y-ciemny .strona--systemy { --system-aktywny-tlo: #2E2214; }

.strona--systemy .tabela tbody tr:is(.tabela__wiersz--aktywny, .is_active) > :is(td, th),
.strona--systemy .tabela tbody tr:is(.tabela__wiersz--aktywny, .is_active):hover > :is(td, th) {
  background: var(--system-aktywny-tlo);
  color: var(--tekst);
  font-weight: 600;
}

/* Zaznaczona myszka kwota nie moze dziedziczyc bieli na zoltym tle. */
.a11y-ciemny .strona--systemy ::selection {
  background: #FFE05A;
  color: #0F172A;
  text-shadow: none;
}

/* Prawidlowy, ale wysoki koszt moze zajac dwa wiersze na telefonie. */
.strona--systemy .kalkulator__kwota { max-width: 100%; overflow-wrap: anywhere; }