/**
* SOKS - Responsive CSS
* Breakpointy:
* 1024px — tablet landscape
* 768px — tablet (poniżej tej szerokości tabele zmieniają się w karty)
* 480px — mobile (telefon)
*
* Strategia tabel-jako-karty (SOKS 1.2.2+):
* JS responsive-tables.js automatycznie dodaje data-label="..." do każdej | .
* Poniżej 768px tabela renderuje się jako lista kart — 1 wiersz = 1 karta,
* każda komórka jako etykieta + wartość. Działa dla wszystkich tabel SOKS.
*/
/* ============================================
GLOBAL: zapobiega overflow horizontal
(kontenery, obrazki, embedy nie wychodzą poza viewport)
============================================ */
.ks-container,
.ks-tab-content,
.ks-klub-tab-content,
.ks-account-container,
.ks-rejestracja-container,
.ks-klub-container {
max-width: 100%;
box-sizing: border-box;
}
.ks-container img,
.ks-tab-content img,
.ks-klub-tab-content img,
.ks-account-container img {
max-width: 100%;
height: auto;
}
/* Wszystkie pre/code w SOKS — break-word zamiast horizontal scroll */
.ks-container pre,
.ks-container code,
.ks-tab-content pre,
.ks-tab-content code {
white-space: pre-wrap;
word-break: break-word;
}
/* ============================================
TABLET LANDSCAPE (max-width: 1024px)
============================================ */
@media (max-width: 1024px) {
/* --- Kontenery --- */
.ks-container,
.ks-tab-content,
.ks-klub-container {
padding: 20px !important;
}
/* --- Gridy: 4 kolumny -> 2 kolumny --- */
[style*="grid-template-columns: repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
}
/* --- Two-column layout: zmniejsz gap --- */
.ks-two-column-layout {
gap: 25px !important;
}
}
/* ============================================
TABLET (max-width: 768px)
============================================ */
@media (max-width: 768px) {
/* --- Zakładki: Account (Moje konto) --- */
.ks-tabs {
flex-wrap: wrap !important;
}
.ks-tabs .ks-tab {
padding: 10px 16px !important;
font-size: 14px !important;
flex: 1 1 auto !important;
text-align: center !important;
margin-right: 2px !important;
}
/* --- Zakładki: Panel klubu (v2) --- */
.ks-tabs-container {
flex-direction: column !important;
padding: 10px !important;
gap: 4px !important;
}
.ks-tabs-container .ks-tab {
padding: 10px 15px !important;
font-size: 14px !important;
border-radius: 6px !important;
border: 1px solid #dee2e6 !important;
margin-bottom: 0 !important;
}
.ks-tabs-container .ks-tab.active {
border-bottom: 1px solid #dee2e6 !important;
margin-bottom: 0 !important;
}
/* --- Zakładki: Zarządzanie zawodami --- */
.ks-klub-tabs {
flex-direction: column !important;
gap: 4px !important;
}
.ks-klub-tab {
padding: 10px 15px !important;
font-size: 14px !important;
border-radius: 6px !important;
text-align: center !important;
}
/* --- Kontenery --- */
.ks-container {
padding: 15px !important;
margin: 10px auto !important;
border-width: 1px !important;
}
.ks-tab-content {
padding: 15px !important;
min-height: auto !important;
}
.ks-klub-tab-content.active {
padding: 0 !important;
}
/* --- Two-column layout -> jedna kolumna --- */
.ks-two-column-layout {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
/* --- Gridy -> jedna kolumna --- */
.ks-account-grid,
.ks-registration-grid,
.ks-grid {
grid-template-columns: 1fr !important;
}
/* --- Tabele: horizontal scroll --- */
.ks-table-responsive,
[style*="overflow-x: auto"],
[style*="overflow-x:auto"] {
-webkit-overflow-scrolling: touch;
}
table.ks-table,
table.widefat,
.ks-payments-table,
.ks-wplaty-table,
.ks-kasa-table,
.ks-kalendarz-table,
.ks-zgloszenia-table,
.ks-tab-content table,
.ks-klub-tab-content table {
font-size: 13px !important;
}
table.ks-table th,
table.ks-table td,
table.widefat th,
table.widefat td,
.ks-payments-table th,
.ks-payments-table td,
.ks-wplaty-table th,
.ks-wplaty-table td,
.ks-kasa-table th,
.ks-kasa-table td,
.ks-kalendarz-table th,
.ks-kalendarz-table td,
.ks-zgloszenia-table th,
.ks-zgloszenia-table td,
.ks-tab-content table th,
.ks-tab-content table td,
.ks-klub-tab-content table th,
.ks-klub-tab-content table td {
padding: 8px 6px !important;
}
/* Wrap tabeli w scroll jeśli nie ma wrappera */
.ks-tab-content > table,
.ks-klub-tab-content > table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* --- Formularze --- */
.ks-field input,
.ks-field select,
.ks-field textarea,
.ks-form-row input,
.ks-form-row select,
.ks-form-row textarea {
font-size: 16px !important; /* Zapobiega zoom na iOS */
}
/* --- Filtry i formularze inline --- */
[style*="display: flex"][style*="gap"] {
flex-wrap: wrap !important;
}
form[style*="display: flex"] {
flex-wrap: wrap !important;
}
form[style*="display: flex"] select,
form[style*="display: flex"] input[type="text"],
form[style*="display: flex"] input[type="search"] {
min-width: 100% !important;
width: 100% !important;
}
/* --- Nagłówki --- */
.ks-container > h2,
.ks-tab-content > h2,
.ks-section-title {
font-size: 20px !important;
}
.ks-tab-content h3,
.ks-klub-tab-content h3 {
font-size: 17px !important;
}
/* --- Przyciski akcji: touch-friendly --- */
a[style*="padding: 6px 12px"],
a[style*="padding:6px 12px"],
button[style*="padding: 6px 12px"],
button[style*="padding:6px 12px"] {
padding: 10px 14px !important;
font-size: 13px !important;
}
/* Grupy przycisków - stack vertical */
td [style*="display: flex"][style*="gap"] {
flex-direction: column !important;
gap: 4px !important;
}
/* --- Karty --- */
.ks-card {
padding: 15px !important;
}
/* --- Membership fee banner --- */
.ks-membership-fee-banner {
padding: 15px !important;
}
.ks-membership-fee-banner > div[style*="display: flex"] {
flex-direction: column !important;
gap: 10px !important;
}
/* --- SOZ PZSS box --- */
.ks-membership-fee-banner + div[style*="display: flex"],
div[style*="background: linear-gradient"][style*="border-radius: 12px"] > div[style*="display: flex"] {
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
/* --- Stats grid: 4 -> 2 kolumny --- */
[style*="grid-template-columns: repeat(4"] {
grid-template-columns: repeat(2, 1fr) !important;
}
/* --- Składka status --- */
.ks-skladka-container {
padding: 15px !important;
}
/* --- WC zamówienia: filtry --- */
.ks-tab-content form[style*="display: flex"] {
flex-direction: column !important;
}
/* --- Selektory zawodów/rund --- */
.ks-wyniki-section select,
select[style*="min-width: 300px"] {
min-width: 100% !important;
width: 100% !important;
}
.ks-wyniki-section form[style*="display: flex"] {
flex-direction: column !important;
}
/* --- Wydruk zawodników: zdjęcie mniejsze --- */
.ks-container img[style*="max-width: 200px"],
img[style*="max-width:200px"] {
max-width: 120px !important;
}
/* --- Password section --- */
.ks-password-change-section {
padding: 15px !important;
}
.ks-password-fields {
max-width: 100% !important;
}
/* --- Admin notice --- */
.ks-admin-notice {
padding: 10px !important;
font-size: 14px !important;
}
/* --- System header --- */
.ks-system-header {
padding: 20px !important;
}
.ks-system-header h2 {
font-size: 20px !important;
}
.ks-system-header p {
font-size: 14px !important;
}
/* --- Rejestracja gości --- */
.ks-rejestracja-gosc-container {
padding: 15px !important;
}
/* --- Payment options --- */
.ks-payment-option {
padding: 10px !important;
}
/* --- Zawody karty --- */
.ks-zawody-card {
padding: 15px !important;
}
}
/* ============================================
MOBILE (max-width: 480px)
============================================ */
@media (max-width: 480px) {
/* --- Zakładki: jeszcze mniejsze --- */
.ks-tabs .ks-tab,
.ks-tabs-container .ks-tab,
.ks-klub-tab {
padding: 8px 12px !important;
font-size: 13px !important;
}
.ks-tab-icon {
font-size: 14px !important;
}
/* --- Kontenery --- */
.ks-container {
padding: 10px !important;
margin: 5px !important;
border-radius: 8px !important;
}
.ks-tab-content {
padding: 10px !important;
border-radius: 0 0 8px 8px !important;
}
/* --- Tabele: mniejszy font --- */
table.ks-table,
table.widefat,
.ks-payments-table,
.ks-wplaty-table,
.ks-kasa-table,
.ks-kalendarz-table,
.ks-zgloszenia-table,
.ks-tab-content table,
.ks-klub-tab-content table {
font-size: 11px !important;
}
table.ks-table th,
table.ks-table td,
table.widefat th,
table.widefat td,
.ks-payments-table th,
.ks-payments-table td,
.ks-wplaty-table th,
.ks-wplaty-table td,
.ks-kasa-table th,
.ks-kasa-table td,
.ks-kalendarz-table th,
.ks-kalendarz-table td,
.ks-zgloszenia-table th,
.ks-zgloszenia-table td,
.ks-tab-content table th,
.ks-tab-content table td,
.ks-klub-tab-content table th,
.ks-klub-tab-content table td {
padding: 5px 3px !important;
}
/* --- Stats grid: 1 kolumna --- */
[style*="grid-template-columns: repeat(4"],
[style*="grid-template-columns: repeat(2"] {
grid-template-columns: 1fr !important;
}
/* --- Nagłówki --- */
.ks-container > h2,
.ks-tab-content > h2 {
font-size: 18px !important;
}
h3 {
font-size: 15px !important;
}
/* --- Tytuł strony --- */
h2[style*="text-align:center"] {
font-size: 20px !important;
}
/* --- Badge / Status --- */
.ks-badge,
.ks-payment-status,
.ks-membership-fee-value,
span[style*="border-radius: 12px"][style*="font-size: 12px"] {
font-size: 10px !important;
padding: 3px 8px !important;
}
/* --- Submit button --- */
.ks-submit input,
.ks-pay-fee-btn {
width: 100% !important;
padding: 14px 20px !important;
font-size: 16px !important;
}
/* --- Membership fee banner --- */
.ks-membership-fee-banner {
padding: 12px !important;
border-radius: 8px !important;
}
/* --- Zdjęcie zawodnika --- */
.ks-container img[style*="max-width: 200px"],
img[style*="max-width:200px"] {
max-width: 80px !important;
}
/* --- Karty --- */
.ks-card {
padding: 12px !important;
}
.ks-card-title {
font-size: 15px !important;
}
/* --- Grupy checkboxów --- */
.ks-checkbox-group {
gap: 8px !important;
padding: 8px !important;
}
/* --- Club group sections --- */
.ks-club-group {
padding: 12px !important;
}
/* --- Generator dokumentów grid --- */
[style*="grid-template-columns: repeat(auto-fit, minmax(150px"] {
grid-template-columns: 1fr !important;
}
/* --- Zawody card --- */
.ks-zawody-card {
padding: 12px !important;
}
/* --- Alert messages --- */
.ks-alert,
.ks-message {
padding: 10px !important;
font-size: 13px !important;
}
}
/* ============================================================================
===== TABELE JAKO KARTY (mobile, < 768px) ==================================
============================================================================
Współpracuje z js/responsive-tables.js który dodaje data-label do każdego
| . Bez data-label fallback działa nadal jako horizontal-scroll.
============================================================================ */
@media (max-width: 768px) {
/* Wszystkie tabele SOKS — przejście w tryb "karty".
KLUCZOWE: min-width: 0 oraz max-width: 100% — wymusza zignorowanie
inline style="min-width: 900px" które niektóre tabele mają (np.
#ks-po-table w Rozrachunkach). Bez tego tabela renderuje się 900px
wide, komórki są poza viewport (parent ma overflow-x: auto), widać
tylko ::before label na pozycji 0px, wartości są przewinięte w prawo. */
.ks-table-rwd-ready,
table.ks-table.ks-table-rwd-ready,
table.widefat.ks-table-rwd-ready,
.ks-tab-content table.ks-table-rwd-ready,
.ks-klub-tab-content table.ks-table-rwd-ready,
.ks-table-responsive table.ks-table-rwd-ready,
table.ks-lista-kompletna-table.ks-table-rwd-ready,
.ks-payments-table.ks-table-rwd-ready,
.ks-wplaty-table.ks-table-rwd-ready,
.ks-kasa-table.ks-table-rwd-ready,
.ks-kalendarz-table.ks-table-rwd-ready,
.ks-zgloszenia-table.ks-table-rwd-ready {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Wrapper z overflow-x: auto wokół tabeli — na mobile zostawiamy
overflow visible, żeby karty mogły mieć normalny layout block.
Łapie zarówno overflow-x: auto, overflow: auto, jak i overflow: hidden. */
.ks-tab-section > div[style*="overflow"],
.ks-tab-content > div[style*="overflow"],
.ks-klub-tab-content > div[style*="overflow"] {
overflow: visible !important;
overflow-x: visible !important;
}
/* Ukryj nagłówki (są zastąpione przez data-label per komórka) */
.ks-table-rwd-ready thead,
.ks-table-rwd-ready > thead {
display: none !important;
}
/* tbody: bez stylów tabelowych */
.ks-table-rwd-ready tbody,
.ks-table-rwd-ready > tbody {
display: block !important;
width: 100% !important;
}
/* Każdy wiersz = osobna karta */
.ks-table-rwd-ready tbody tr,
.ks-table-rwd-ready > tbody > tr,
.ks-table-rwd-ready > tr {
display: block !important;
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 10px !important;
margin-bottom: 12px !important;
padding: 12px 14px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Każda komórka = blok "Etykieta nad Wartością".
Trzecia (i miejmy nadzieję ostatnia) iteracja CSS:
- PRÓBA 1: display:flex + ::before flex item → anonymous text nodes
w niektórych mobile browserach zachowują się dziwnie (niewidoczne).
- PRÓBA 2: display:grid + ::before grid item → ten sam problem na
Samsung Internet / Chrome Android — anonymous text nodes nie są
renderowane jako grid items poprawnie.
- PRÓBA 3 (TUTAJ): display:block + ::before jako block label NAD
wartością. Wartość komórki płynie naturalnie pod labelem.
To DZIAŁA w 100% przeglądarek bo nie używa flex/grid ani anonymous
text node tricks. Nieco mniej elegancki layout (label nad value
zamiast obok) ale 100% niezawodny.
*/
.ks-table-rwd-ready tbody td,
.ks-table-rwd-ready > tbody > tr > td,
.ks-table-rwd-ready > tr > td {
display: block !important;
padding: 8px 2px !important;
border: none !important;
border-bottom: 1px dashed #f1f3f5 !important;
text-align: left !important;
width: 100% !important;
box-sizing: border-box !important;
font-size: 14px !important;
line-height: 1.5 !important;
min-height: auto !important;
word-break: break-word !important;
height: auto !important;
}
/* Ostatnia komórka — bez separatora */
.ks-table-rwd-ready tbody td:last-child,
.ks-table-rwd-ready > tbody > tr > td:last-child {
border-bottom: none !important;
padding-bottom: 2px !important;
}
/* Etykieta NAD wartością — display: block, mała szara czcionka */
.ks-table-rwd-ready tbody td[data-label]:not([data-label=""])::before,
.ks-table-rwd-ready > tbody > tr > td[data-label]:not([data-label=""])::before {
content: attr(data-label);
display: block;
font-weight: 600;
color: #6b7280;
text-align: left;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 3px;
line-height: 1.2;
word-break: break-word;
}
/* Komórki z colspan / pustym data-label — pełna szerokość, bez etykiety */
.ks-table-rwd-ready tbody td[data-label=""],
.ks-table-rwd-ready > tbody > tr > td[data-label=""] {
text-align: center !important;
padding: 10px 0 !important;
}
/* Komórki BEZ atrybutu data-label — wartość bez labelu, normalny block */
.ks-table-rwd-ready tbody td:not([data-label]) {
display: block !important;
text-align: left !important;
padding: 6px 2px !important;
}
/* Pierwsza komórka karty (zwykle ID/numer/nazwa) — wyróżniona */
.ks-table-rwd-ready tbody tr > td:first-child {
background: linear-gradient(90deg, #f8fafc 0%, transparent 100%);
margin: -12px -14px 4px -14px;
padding: 10px 14px !important;
border-radius: 10px 10px 0 0;
font-size: 15px !important;
font-weight: 600;
border-bottom: 1px solid #e5e7eb !important;
/* Pierwsza komórka też używa grid layout dla spójności */
align-items: center !important;
}
.ks-table-rwd-ready tbody tr > td:first-child::before {
font-size: 11px;
align-self: center;
}
/* Checkboxy / radio w tabelach — zachowaj normalny rozmiar */
.ks-table-rwd-ready tbody td input[type="checkbox"],
.ks-table-rwd-ready tbody td input[type="radio"] {
width: auto !important;
margin: 0 !important;
}
/* Komórka z checkboxem (zwykle pierwsza) — bez gradient bg, mniejsza */
.ks-table-rwd-ready tbody tr > td:first-child:has(> input[type="checkbox"]:only-child) {
background: #f1f3f5 !important;
padding: 8px 14px !important;
font-size: 13px !important;
margin: -12px -14px 8px -14px;
}
/* Akcje (przyciski) w wierszu — wyrównaj do prawej */
.ks-table-rwd-ready tbody td .button,
.ks-table-rwd-ready tbody td a.button-small,
.ks-table-rwd-ready tbody td button {
font-size: 13px !important;
padding: 8px 12px !important;
}
/* Kolumna "Akcje" — przyciski zawijają się w obrębie karty.
Komórka ma w atrybucie white-space: nowrap, a td w trybie karty to
display: block, więc flex-wrap i gap same niczego nie zawijają.
Przy 4–5 przyciskach o szerokości min. 64 px wiersz był szerszy niż
telefon: strona dostawała przewijanie w bok, a Chrome traktował ją
wtedy jak stronę niemobilną (podwójne stuknięcie powiększa,
stuknięcia są opóźniane) — edycja członka wymagała dwóch stuknięć. */
.ks-table-rwd-ready tbody td:has(> a.button-small),
.ks-table-rwd-ready tbody td:has(> button) {
white-space: normal !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
/* Kolumna akcji oznaczona klasą ks-kol-akcje (th i td tej samej kolumny;
na desktopie, od 769 px, przyklejona do prawej krawędzi — frontend.css).
W karcie td jest blokiem na całą szerokość, a nowrap z atrybutu style
komórki trzymał całą jej zawartość w jednej linii: status, lista
konkurencji i przycisk (np. Moje Zawody) rozpychały kartę poza ekran.
Reguła wyżej łapie tylko przyciski będące bezpośrednimi dziećmi
komórki — ta obejmuje każdą treść komórki akcji, także przyciski
w i |