/*
 * Ręcznie pisane odpowiedniki garstki klas Tailwind, których nasze .razor jeszcze
 * używają, a których nie ma w skompilowanym blazorblueprint.css (ten zawiera tylko
 * klasy, których biblioteka faktycznie sama używa wewnętrznie). Zastępuje własny build
 * Tailwind (usunięty) — patrz uzasadnienie usunięcia: blazorblueprint.css (Tailwind v4)
 * i nasz poprzedni własny build (Tailwind v3) współdzieliły nazwę zmiennej
 * --tw-translate-x dla dwóch RÓŻNYCH mechanizmów (composited transform w v3 vs natywna
 * właściwość CSS "translate" w v4) — nasz unlayered reset (*,:after,:before{--tw-translate-x:0})
 * bił w kaskadzie warstwowe reguły blazorblueprint.css niezależnie od kolejności/specyficzności
 * (CSS Cascade Layers: reguły spoza @layer zawsze wygrywają z regułami W @layer), po cichu
 * zerując każdą animację/przesunięcie opartą o translate w komponentach Bb* (stąd np. switch,
 * który zmieniał tylko tło, nie pozycję kciuka).
 */
.focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
.focus-visible\:ring-2:focus-visible { box-shadow: 0 0 0 2px var(--tw-ring-color, var(--ring)); }
.focus-visible\:ring-ring:focus-visible { --tw-ring-color: var(--ring); }
.hover\:bg-sidebar-accent:hover { background-color: var(--sidebar-accent); }
.hover\:text-sidebar-accent-foreground:hover { color: var(--sidebar-accent-foreground); }
.list-decimal { list-style-type: decimal; }
.list-inside { list-style-position: inside; }
.max-w-\[20rem\] { max-width: 20rem; }
.max-w-\[12rem\] { max-width: 12rem; }
.max-w-\[10rem\] { max-width: 10rem; }
.max-w-\[6rem\] { max-width: 6rem; }
.min-w-\[10rem\] { min-width: 10rem; }
.min-w-\[12rem\] { min-width: 12rem; }
.mb-0 { margin-bottom: 0; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }

/*
 * Znalezione przez systematyczny audyt: wyciągnięcie WSZYSTKICH klas użytych w .razor
 * (łącznie z tymi budowanymi dynamicznie w C#, np. CarouselImageClass w YourData.razor)
 * i porównanie z tym, co faktycznie jest w blazorblueprint.css + powyższą częścią tego
 * pliku. Bez tego dopisywanie nowych klas Tailwind w markupie jest ciche — nic nie
 * ostrzega, że klasa nie istnieje, po prostu nie ma żadnego efektu (stąd np. karuzela
 * karty poziomu renderująca się w naturalnym rozmiarze obrazka zamiast w max-w-md).
 */
.-mx-4 { margin-left: -1rem; margin-right: -1rem; }
/* ml-6 (1.5rem) — wcięcie przełączników warna per rodzaj naruszenia w MessageFilter.razor,
   żeby było widać, że są podrzędne wobec głównego "Nadawaj warna". Nie ma go ani w
   blazorblueprint.css, ani niżej w tym pliku (sprawdzone gerpem po obu), więc bez tego wpisu
   klasa nie robiłaby NIC i hierarchia w UI by nie istniała. */
.ml-6 { margin-left: 1.5rem; }
/* Lista top 50 w rankingu XP (Stats.razor) — przewijana, żeby 50 pozycji nie rozciągało
   strony na kilka ekranów. Wartość arbitralna, więc nie ma jej w blazorblueprint.css. */
.max-h-\[32rem\] { max-height: 32rem; }

/*
 * Obwódka avatara podium w rankingu XP (Stats.razor) — złoto/srebro/brąz z efektem
 * mieniącego się metalu. Zgłoszone bezpośrednio.
 *
 * Realizacja przez OTOCZKĘ z animowanym gradientem w tle plus wewnętrzny padding, a nie
 * przez border-image: border-image nie współpracuje z border-radius (obwódka wyszłaby
 * kwadratowa wokół okrągłego avatara). Gradient jest szerszy niż element
 * (background-size: 200%) i przesuwany w nieskończoność — stąd wrażenie przesuwającego się
 * refleksu światła po metalu.
 *
 * Kolory wpisane wprost, nie przez tokeny motywu: złoto/srebro/brąz niosą znaczenie samo w
 * sobie (miejsce na podium) i mają wyglądać identycznie w jasnym i ciemnym motywie.
 */
.podium-ring {
  padding: 3px;
  border-radius: 9999px;
  background-size: 200% 100%;
  animation: podium-shimmer 3s linear infinite;
}
.podium-gold   { background-image: linear-gradient(110deg, #8a6d1f, #facc15, #fffbe6, #facc15, #8a6d1f); }
.podium-silver { background-image: linear-gradient(110deg, #6b7280, #cbd5e1, #ffffff, #cbd5e1, #6b7280); }
.podium-bronze { background-image: linear-gradient(110deg, #6b3f1d, #c87941, #f0c9a5, #c87941, #6b3f1d); }

/*
 * Wiersz ZALOGOWANEGO użytkownika w rankingu — zgłoszone bezpośrednio: ma być obwiedziony
 * kolorem z ThemeService. Stąd var(--primary), a nie konkretny kolor: ThemeService
 * (BlazorBlueprint) przestawia właśnie ten token przy zmianie koloru akcentu, więc obwódka
 * automatycznie idzie za wyborem użytkownika w przełączniku motywu — inaczej niż złoto/srebro/
 * brąz podium, które celowo są stałe, bo niosą znaczenie same w sobie.
 *
 * Delikatne tło z color-mix zamiast samej ramki: przy 50 pozycjach sama obwódka bywa trudna do
 * wyłapania wzrokiem podczas przewijania.
 */
.ranking-row-me {
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
}

/* Poza podium — ten sam rozmiar otoczki, statyczny kolor obramowania z motywu. Bez tego
   avatary od 4. miejsca w dół byłyby o 4px mniejsze i lista by się „schodkowała". */
.podium-ring-plain {
  padding: 2px;
  border-radius: 9999px;
  background: var(--border);
}

@keyframes podium-shimmer {
  from { background-position: 0 0; }
  to   { background-position: -200% 0; }
}

/* PLAN.md wymaga respektowania prefers-reduced-motion w całym dashboardzie — tutaj
   zatrzymujemy animację, ale gradient (czyli sama informacja o miejscu) zostaje. */
@media (prefers-reduced-motion: reduce) {
  .podium-ring { animation: none; }
}
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-3 { row-gap: 0.75rem; }
.hover\:border-primary:hover { border-color: var(--primary); }
/* w-32 (8rem) — używane przez LevelRoles.razor na polach poziomu. Nie ma go ani w
   blazorblueprint.css, ani niżej w tym pliku, a projekt nie ma builda Tailwind, więc bez tego
   wpisu klasa nie robiła NIC i pola numeryczne rozjeżdżały się na pełną szerokość. */
.w-32 { width: 8rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-5xl { max-width: 64rem; }
/* Zgłoszone bezpośrednio: tabela logu moderacji (8 kolumn) nie mieściła się w max-w-5xl
   (64rem) — sama kolumna "Powód / dowód" ma do 20rem, więc kolumny albo się ściskały, albo
   trzeba było scrollować poziomo. */
.max-w-7xl { max-width: 80rem; }
.mb-6 { margin-bottom: 1.5rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.space-y-1 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.25rem; }
.text-\[8px\] { font-size: 8px; }
.ring-primary\/40 { --tw-ring-color: color-mix(in oklab, var(--primary) 40%, transparent); }

@media (min-width: 768px) {
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
  .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.gap-y-2 { row-gap: 0.5rem; }