* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    /* font-size: 62.5%; */
    scroll-behavior: smooth;

}

body {
    /* kolor tła */
    background-color: #FFFFFF;
    /* #c5ffff; */
    font-family: 'Roboto', sans-serif;
    /* font-size: 1.6rem; */

    /* kolor tła gradient */
    /* background: linear-gradient(to left, white 1%, teal 200%); */
    /*height: 100%;*/
    /*height: 100vh;*/
    /*width: 100vh;*/
    /*width: 100%;*/
    align-items: center;
    justify-content: center;
}

.naglowek {
    /* display: flex; */
    height: 6rem;
    background-color: #005931;
}

section {
    display: flex;
    position: relative;
    margin: 50px auto;
    /* height: 400px; */ /* ZMIANA: Usunięto sztywną wysokość */
    /* width: 800px; */ /* ZMIANA: Usunięto sztywną wysokość */
    max-width: 100%; /* ZMIANA: Dodano, aby upewnić się, że nie wykracza poza rodzica */
    border: 5px solid black;
    flex-wrap: wrap; /* ZMIANA: Dodałem, żeby elementy wewnątrz section zawijały się na mniejszych ekranach */
    justify-content: center; /* Opcjonalnie: wyśrodkowanie elementów w sekcji */
    align-items: flex-start; /* Opcjonalnie: wyrównanie elementów w sekcji */
    min-height: 200px; /* Opcjonalnie: minimalna wysokość, żeby sekcja nie była pusta */    
}

.square {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    font-size: 50px;
    border: 3px solid black;
    background: lime;
}

/* change the color of active or hovered links */
/*   */
/* .navbar-nav .nav-item.active .nav-link, */
.navbar-nav .nav-item:hover .nav-link {
    color: rgb(171, 196, 177);
    background-color: #005931;
}

.vertical-text {
    transform: rotate(-90deg);
    transform-origin: left top 0;
    /* float: left; */
    /*bottom: 0;
    display: inline-table;
    left: 50%;
    position: absolute;
    transform: rotate(-90deg);
    transform-origin: 0 50% 0;
    white-space: pre;
    width: 100;
    margin-left: auto;
    margin-bottom: -110;*/
}

.bg-rezerwacja-wolna {
    background-color: #93c54b !important;
}

.bg-rezerwacja-zajeta {
    background-color: #c5a54b !important;
}

.bg-rezerwacja-szkola {
    background-color: #3a78ff !important;
}

.bg-dzien-tygodnia-0 {
    background-color: #eeffd2 !important;
}

.bg-dzien-tygodnia-1 {
    background-color: #ddcbcb !important;
}

.bg-dzien-tygodnia-2 {
    background-color: #d3fff9 !important;
}

.bg-dzien-tygodnia-3 {
    background-color: #f6ffdb !important;
}

.bg-dzien-tygodnia-4 {
    background-color: #fffbcc !important;
}

.bg-dzien-tygodnia-5 {
    background-color: #c5ffde !important;
}

.bg-dzien-tygodnia-6 {
    background-color: #cbcbff !important;
}

.bg-dzien-tygodnia-7 {
    background-color: #eeffd2 !important;
}

.bg-dzien-tygodnia-8 {
    background-color: #ddcbcb !important;
}

.bg-dzien-tygodnia-9 {
    background-color: #d3fff9 !important;
}

.bg-dzien-tygodnia-10 {
    background-color: #f6ffdb !important;
}

.bg-dzien-tygodnia-11 {
    background-color: #fffbcc !important;
}

.bg-dzien-tygodnia-12 {
    background-color: #c5ffde !important;
}

.bg-dzien-tygodnia-13 {
    background-color: #cbcbff !important;
}

.bg-dzien-tygodnia-14 {
    background-color: #b8ffdc !important;
}

.bg-pierwsza-runda {
    background-color: #ffff00 !important;
}

.bg-druga-runda {
    background-color: #00b050 !important;
}

.bg-trzecia-runda {
    background-color: #ff0000 !important;
}

.bg-czwarta-runda {
    background-color: #00b0f0!important;
}

.bg-piata-runda {
    background-color: #e7e6e6!important;
}

.bg-szosta-runda {
    background-color: #ffc000 !important;
}

.highlight:hover>* {
    background-color: #F0F4F6;
}

.table-hover-cells>tbody>tr>th:hover,
.table-hover-cells>tbody>tr>td:hover {
    background-color: #f5f5f5;
}

.table-hover-cells>tbody>tr>th.active:hover,
.table-hover-cells>tbody>tr>td.active:hover,
.table-hover-cells>tbody>tr.active>th:hover,
.table-hover-cells>tbody>tr.active>td:hover {
    background-color: #e8e8e8;
}

.table-hover.table-hover-cells>tbody>tr:hover>th:hover,
.table-hover.table-hover-cells>tbody>tr:hover>td:hover {
    background-color: #e8e8e8;
}

.table-hover.table-hover-cells>tbody>tr.active:hover>th:hover,
.table-hover.table-hover-cells>tbody>tr.active:hover>td:hover {
    background-color: #d8d8d8;
}

.rezerwuj {
    color: rgb(171, 196, 177) !important;
    /*background-color: #005931;*/
}

/* ZMIANA: Dodatkowy CSS dla responsywności menu, jeśli potrzebne */
@media (max-width: 991.98px) { /* breakpoint dla lg */
    .navbar-nav {
        flex-direction: column; /* Układanie elementów menu w kolumnach na małych ekranach */
        width: 100% !important; /* Ważne, aby nadpisać w-100 z w-75, w-0 */
        align-items: flex-start; /* Wyrównanie elementów do lewej w zwiniętym menu */
    }
    .navbar-nav .nav-item.dropdown .dropdown-menu {
        position: static; /* Aby menu rozwijane było wertykalne w zwiniętym navbarze */
        float: none;
        width: 100%;
        margin-top: 0;
    }
    .navbar-nav .nav-item {
        width: 100%; /* Spraw, żeby każdy element nav-item zajmował całą szerokość w menu hamburger */
        text-align: left;
    }
    .navbar-nav .nav-item .nav-link {
        padding-left: 1rem; /* Dodaj trochę paddingu dla czytelności */
    }
    .navbar-nav .ml-auto {
        margin-left: 0 !important; /* Wyłącz ml-auto na małych ekranach */
    }
}

/* Ustawienie tabeli, aby dopasowała się do zawartości i była wyśrodkowana */
.table.turniej-tabela,
.table.turniej-tabela-klasyfikacja {
    width: auto !important; /* Tabela dostosowuje się do zawartości */
    display: table !important; /* Ważne, aby tabela zachowywała się jak element blokowy do wyśrodkowania przez flexbox */
    /* Jeśli 'display: table;' nie działa, spróbuj 'display: block;' w połączeniu z 'margin: auto;' na samej tabeli */
    margin: 0 auto; /* Dodano margin auto do wyśrodkowania tabeli */
    float: none; /* Upewnij się, że nie ma żadnych floatów wpływających na wyśrodkowanie */
}

/* Dodano regułę dla kontenera .table-responsive */
.table-responsive {
    /* Upewnij się, że kontener responsywny nie wymusza 100% szerokości, ale pozwoli tabeli wewnątrz być węższą */
    width: fit-content; /* To jest kluczowe! Ustawia szerokość kontenera na szerokość jego zawartości */
    max-width: 100%; /* Zapewnia, że kontener nie wyjdzie poza rodzica */
}

/* Ograniczenia dla poszczególnych kolumn - ważne, aby były na tyle małe, żeby "skurczyć" kolumny */
.table.turniej-tabela th.col-lp,
.table.turniej-tabela td.col-lp,
.table.turniej-tabela-klasyfikacja th.col-lp,
.table.turniej-tabela-klasyfikacja td.col-lp {
    width: 1%; /* Ustawienie minimalnej szerokości */
    white-space: nowrap; /* Zapobiega zawijaniu się liczb */
}

.table.turniej-tabela th.col-gracz,
.table.turniej-tabela td.col-gracz,
.table.turniej-tabela-klasyfikacja th.col-gracz,
.table.turniej-tabela-klasyfikacja td.col-gracz {
    /* Ustawienie względnej szerokości lub max-width dla kolumn z nazwami graczy/zawodników */
    width: auto; /* Pozwala na elastyczne dopasowanie */
    max-width: none; /* aby kolumna mogła się rozszerzyć */
    /*white-space: nowrap; /* Zapobiega zawijaniu się nazwisk, jeśli nie ma miejsca, pojawi się scrollbar */
    /*overflow: hidden; /* Ukrywa nadmiarowy tekst, jeśli white-space: nowrap */
    /*text-overflow: ellipsis; /* Dodaje "..." jeśli tekst jest ucięty */
    /*-width: 250px; 
    min-width: 100px; /* Opcjonalnie, aby kolumna nie stała się za mała */
}

.table.turniej-tabela th.col-wynik,
.table.turniej-tabela td.col-wynik,
.table.turniej-tabela-klasyfikacja th.col-wynik,
.table.turniej-tabela-klasyfikacja td.col-wynik {
    width: 1%; /* Minimalna szerokość dla kolumn z wynikami/punktami */
    white-space: nowrap; /* Zapobiega zawijaniu się wyników */
}

/* Ogólna reguła dla nagłówków, aby zapewnić, że tekst się nie łamie niepotrzebnie */
.table thead th {
    white-space: nowrap;
}