/* Reset */
body, h1, table, th, td, form, button, ul, li, a {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f4f4f9;
    color: #333;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Minimální výška stránky bude vždy 100 % výšky okna */
    margin: 0;
    font-family: Inter,Arial,sans-serif;
}

/* Hlavní obsah stránky */
main {
    flex: 1; /* Zajistí, že hlavní obsah vyplní prostor mezi hlavičkou a patičkou */
}

/* Pozadí pro index.php */
body.index {
    background: url('img/hejhrej_index.jpg') no-repeat center center fixed;
    background-size: cover;
    color: #fff;
    padding: 20px;
}


/* Hlavička */
header {
    background-color: #000; /* Černé pozadí */
    color: #fff; /* Bílé písmo */
    padding: 10px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 2px solid #333; /* Oddělovací linka */
    font-size: 30px;
    margin-top: 10px;
    font-weight: bold;
}

header h1 {
    margin: 0;
    display: inline-block;
    padding-right: 20px;
}

/*header nav {
    position: relative;
}*/

.navigation {
    display: flex;
    justify-content: space-between; /* Rozdělí menu a pravé menu */
    align-items: center; /* Vertikální zarovnání */
    /*padding: 0px 20px;*/
    color: white;
}

/* Desktop menu - vždy viditelné */
header nav ul.menu {
    display: flex; /* Viditelné vždy na PC */
    flex-direction: row; /* Horizontální zobrazení */
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    font-size: 16px;
}

/* Odkazy v menu */
header nav ul.menu li a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

header nav ul.menu li a:hover {
    background-color: #333; /* Tmavě šedé pozadí při najetí */
    color: #ffd700; /* Zlatý text při najetí */
}

/* Mobilní menu - skryté */
@media (max-width: 768px) {

    header nav ul.menu {
        display: none; /* Skryté na mobilních zařízeních */
        flex-direction: column;
        gap: 10px;
        background-color: #000; /* Černé pozadí */
        padding: 10px;
        border-radius: 5px;
        position: absolute;
        top: 50px;
        left: 10px;
        width: calc(100% - 20px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
        transition: max-height 0.3s ease-out; /* Animace */
        max-height: 0; /* Zavřené menu */
        overflow: hidden;
    }

    header nav ul.menu.active {
        display: flex; /* Viditelné po aktivaci */
        max-height: 500px; /* Maximální výška při rozbalení */
    }

    .menu-toggle {
        display: block; /* Tlačítko menu viditelné pouze na mobilu */
        background: none;
        border: none;
        color: #fff;
        font-size: 1.5em;
        cursor: pointer;
    }
}

/* Tlačítko menu - skryté na PC */
@media (min-width: 769px) {
    .menu-toggle {
        display: none; /* Skryté na desktopu */
    }
}

/* Patička */
footer {
    background-color: #000; /* Černé pozadí */
    color: #fff; /* Bílé písmo */
    padding: 5px;
    text-align: center;
    margin-top: 20px;
    border-top: 2px solid #333; /* Oddělovací linka */
}

footer a {
    color: #ffd700; /* Zlatá barva odkazů */
    text-decoration: none;
    font-weight: bold;
}

footer a:hover {
    color: #fff; /* Bílé písmo při najetí */
    text-decoration: underline;
}

/* Globální styl pro tabulky */
table {
    width: 95%;
    border-collapse: collapse;
    background: #fff; /* Bílé pozadí tabulky */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Jemný stín */
    border-radius: 8px; /* Kulaté rohy */
    overflow: hidden; /* Skryje obsah přesahující okraje */
    margin: 20px 0; /* Vzdálenost od ostatního obsahu */
    text-align: left;
}

table.zebricek, table.matches{
    /* min-width: 768px; */
    max-width: 1000px;
}

/* Hlavička tabulky */
th {
    background-color: #000; /* Černé pozadí */
    color: #ffd700; /* Zlatý text */
    font-weight: bold;
    text-transform: uppercase; /* Velká písmena */
    padding: 12px;
    border-bottom: 2px solid #333; /* Oddělení řádků */
}

/* Buňky tabulky */
td {
    padding: 8px;
    border-bottom: 1px solid #ddd; /* Světle šedá čára mezi řádky */
    color: #333; /* Tmavě šedý text */
}

/* Každý druhý řádek */
tr:nth-child(even) {
    background-color: #f9f9f9; /* Světle šedé pozadí */
}

/* Zvýraznění řádku při najetí myší */
tr:hover {
    background-color: #f1f1f1; /* Ještě světlejší šedá při hoveru */
}

/* Odkazy uvnitř tabulky */
table a {
    color: #0056b3; /* Modrý odkaz */
    text-decoration: none;
    font-weight: bold;
}


/* Globální styl pro h1 */
h1 {
    text-align: center;
    color: black;
    margin-bottom: 10px;
    margin-top: 10px;
}

/* Sekce hlavičky hráče */
.player-header {
    background-color: #000; /* Černé pozadí */
    color: #fff; /* Bílé písmo */
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.player-header h1 {
    font-size: 2em;
    margin-bottom: 10px;
    color: #ffd700;
}

.player-header .rating {
    font-size: 1.2em;
    color: #ffd700; /* Zlatá barva */
}

.player-header .stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 10px;
    font-size: 1.1em;
}

.player-header .stats div {
    padding: 10px;
    background-color: #333;
    border-radius: 5px;
    color: #fff;
}

/* Tlačítka a navigace */
.pagination {
    text-align: center;
    margin: 20px 0;
}

.pagination a {
    text-decoration: none;
    color: #0056b3;
    font-weight: bold;
    padding: 8px 16px;
    border: 1px solid #0056b3;
    border-radius: 5px;
    margin: 0 5px;
    transition: all 0.3s ease;
}

.pagination a:hover {
    background-color: #0056b3;
    color: #fff;
}



input.number{
    width: 40px;
    font-size: 20px;
}

#ratingChart {
    height: 400px;
    margin: 20px auto;
    display: block;
}

h2{
    text-align: center;
    margin-top: 20px;
}

/* Nadpisy sekcí */
.form-container h1 {
    font-size: 24px;
    color: #0056b3;
    margin-bottom: 20px;
}

.team-section {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Uspořádání prvků pod sebou */
    align-items: center; /* Vodorovné zarovnání na střed */
    justify-content: center; /* Svislé zarovnání na střed */
    text-align: center; /* Zarovnání textu na střed */
    gap: 20px; /* Mezera mezi prvky */
    padding: 20px; /* Vnitřní odsazení */
    margin: 0 auto; /* Vycentrování celé sekce */
    max-width: 500px; /* Maximální šířka sekce */
    background-color: #f9f9f9; /* Světlé pozadí pro lepší přehlednost */
    border: 1px solid #ccc; /* Okraj */
    border-radius: 10px; /* Zaoblené rohy */
}
.team-section h2 {
    margin: 10px 0; /* Mezera nahoře a dole */
    font-size: 18px; /* Velikost textu nadpisů */
}
.team-section select,
.team-section input {
    width: 90%; /* Šířka odpovídající většině sekce */
    max-width: 300px; /* Maximální šířka */
    padding: 8px; /* Vnitřní odsazení */
    border: 1px solid #ccc; /* Okraj */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 16px; /* Velikost textu */
    margin-bottom: 10px; /* Mezera pod každým polem */
    box-sizing: border-box; /* Zohlednění paddingu */
}


.team-section,
.score-section {
    margin-bottom: 20px;
}

.team-section h2,
.score-section h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

/* Styl pro štítky */
.novy_zapas label {
    display: block;
    margin-bottom: 5px;
    color: #333;
    font-weight: bold;
}


select:focus,
input:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 86, 179, 0.5);
}

/* obecne  */
a{
    color: #0056b3;
    text-decoration: none;
}
table a:hover {
    color: #ffd700; /* Zlatý odkaz při hoveru */
    text-decoration: underline;
}

/* Kontejner pro formulář */
.form-container {
    max-width: 400px;
    min-width: 300px;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    flex: 1;
}

/* Nadpis */
.form-container h1 {
    font-size: 24px;
    color: #0056b3; /* Modrá barva nadpisu */
    margin-bottom: 20px;
}

/* Štítky */
.form-container label {
    display: block;
    margin-bottom: 10px;
    color: #333;
    font-weight: bold;
    text-align: left;
}


/* .select2 .select2-selection,*/
/* Vstupní pole */
.form-container input, .form-container select, .player-select  {
    width: 90%; /* Šířka odpovídající kontejneru */
    max-width: 300px; /* Maximální šířka */
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.form-container input:focus {
    outline: none;
    border-color: #0056b3;
    box-shadow: 0 0 5px rgba(0, 86, 179, 0.5); /* Modrý efekt při zaostření */
}

.top-background {
    width: 100%;
    height: 200px;
    background-attachment: scroll; /* Zajišťuje posouvání s obsahem */
    position: relative; /* Ujistěte se, že není ovlivněno fixním pozicováním */
}

.top_background_comp_1{
    background: url('./img/background_padel.webp') no-repeat center center;
    background-size: cover;
}

.top_background_comp_2, .top_background_comp_3{
    background: url('./img/background_tenis.jpg') no-repeat center center;
    background-size: cover;
}

.top_background_comp_4, .top_background_comp_5{
    background: url('./img/background_badminton.jpg') no-repeat center center;
    background-size: cover;
}

.top_background_comp_6{
    background: url('./img/background_squash.jpg') no-repeat center center;
    background-size: cover;
}

.top_background_comp_7{
    background: url('./img/background_pingpong.jpg') no-repeat center center;
    background-size: cover;
}

/* Nadpis formuláře */
.form-container h1 {
    text-align: center;
    color: #0056b3;
    margin-bottom: 20px;
}

/* Styl formuláře */
.styled-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.styled-form label {
    font-weight: bold;
    color: #333;
}

.styled-form input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

.score-section {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px 0;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column; /* Prvky pod sebou */
    align-items: center; /* Horizontální zarovnání na střed */
    text-align: center; /* Zarovnání textu na střed */
}

h3 {
    text-align: center;
    margin-bottom: 20px;
}

.score-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.score-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.score-column label {
    margin-bottom: 10px;
    font-weight: bold;
}

.add_match input {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 6px;
}


.player-header {
    display: flex; /* Flexbox pro horizontální rozložení */
    align-items: flex-start; /* Zarovnání horních okrajů fotky a detailů */
    gap: 20px; /* Mezera mezi fotkou a detaily */
    justify-content: center;
    align-items: center;
}


.competition-buttons {
    text-align: center;
    margin: 50px 0;
}

.competition-buttons form {
    display: inline-block;
    margin: 10px;
}

.competition-buttons button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 14px;
    color: black;
    background: #f0f0f0;
    border: 2px solid black;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    text-transform: uppercase;
    transition: transform 0.2s, background-color 0.2s;
}

.competition-buttons button.selected {
    background: gold;
}

div.comp-name{
    background: black;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
    color: gold;
    font-size: 18px;
    font-weight: bold;
}

/* Kontejner pro všechny příspěvky */
.posts-container {
    width: 80%;
    max-width: 800px;
    margin: 20px auto;
}

/* Stylování jednotlivých příspěvků */
.post {
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 40px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
    color:#555;
    line-height: 1.3;
}

.post:hover {
    transform: scale(1.02);
}

/* Stylování autora příspěvku */
.post .author {
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

/* Stylování data příspěvku */
.post .date {
    color: #888;
    font-size: 0.9em;
    margin-bottom: 10px;
}

/* Stylování obsahu příspěvku */
.post .content {
    line-height: 1.6;
    color: #555;
    white-space: pre-wrap; /* Zachová formátování včetně nových řádků */
}


/* Kontejner pro všechny soutěže */
.competitions-container {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Vzdálenost mezi jednotlivými položkami */
    margin-bottom: 1.5rem;
}

/* Jednotlivá položka soutěže */
.competition-item {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Vzdálenost mezi checkboxem, popiskem a výběrem úrovně */
}

/* Styl pro checkbox soutěže */
.competition-item input[type="checkbox"] {
    transform: scale(2); /* Zvýšení velikosti checkboxu */
    cursor: pointer;
    width: 50px;
}

/* Styl pro popisek soutěže */
.competition-item label {
    flex: 1;
}

.competition-item div.rating {
    width: 50px; /* Pevná šířka pro třetí sloupec */
    text-align: right;
}

/* Styl pro výběr úrovně */
.competition-item select {
    padding: 0.3rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    cursor: pointer;
}

/* Styl pro výběr úrovně při deaktivaci */
.competition-item select:disabled {
    background-color: #f9f9f9;
    cursor: not-allowed;
}


/* Dropdown kontejner */
.comp-dropdown {
    display: none; /* Skryté ve výchozím stavu */
    position: absolute; /* Absolutní pozicování vůči rodiči */
    background-color: #fff; /* Bílá barva pozadí */
    border: 1px solid #ccc; /* Jemný rámeček */
    border-radius: 8px; /* Zaoblené rohy */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Jemný stín */
    width: 300px; /* Fixní šířka */
    padding: 10px; /* Vnitřní odsazení */
    z-index: 10; /* Zajištění, že dropdown bude nahoře */
    left: 50%; /* Horizontální zarovnání na střed */
    transform: translateX(-50%); /* Posunutí o polovinu šířky pro střed */
    margin-top: 10px; /* Vzdálenost od aktivátoru */
}

/* Položky dropdownu */
.comp-dropdown a {
    display: block;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
    transition: background-color 0.3s ease;
    border-radius: 4px;
}

.comp-dropdown a:hover {
    background-color: #f2f2f2;
    color: #000;
}

/* Aktivátor dropdownu */
.comp-name {
    cursor: pointer;
    padding: 10px 15px;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    display: inline-block;
    margin: 0 auto; /* Zarovnání na střed */
    text-align: center;
    transition: background-color 0.3s ease;
    position: relative; /* Rodič pro absolutní pozicování dropdownu */
}

div.pod-menu-conteiner{
    background-color: black;
    display: flex; /* Aktivace flexboxu */
    flex-direction: column;
}

/* -------------- messages -------------*/

/* Horní část konverzace */
.conversationTop {
    padding: 15px;
    background-color: black;
    color: white;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    border-bottom: 1px solid #ccc;
}

/* Konverzace */
.conversation {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px; /* Nastavíme výšku s možností scrollování */
    overflow-y: auto;
}

/* Jednotlivé zprávy */
.mess {
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.5;
    max-width: 80%;
    word-wrap: break-word;
    position: relative;
}

/* Zprávy od odesílatele */
.mess.to {
    background-color: #515151;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

/* Zprávy od příjemce */
.mess.from {
    background-color: #e9ecef;
    color: #333;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}

.messStatus.readed {
    background-color: transparent; /* Odstranění barevného pozadí */
    width: auto;
    height: auto;
    font-size: 14px;
    color: green;
    font-weight: bold;
    content: "✔"; /* Přidání fajfky */
}

/* Volitelně: Pokud se zobrazuje jako prázdný prvek, použij pseudo-element */
.messStatus.readed::after {
    content: "✔"; /* Fajfka */
    color: green;
    font-size: 14px;
    font-weight: bold;
}

/* Stav zprávy (přečteno/nepřečteno) */
.messStatus {
    position: absolute;
    bottom: 5px;
    right: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: gray; /* Nepřečteno */
}

/*
.messStatus.readed {
    background-color: green;   
}
*/

/* Text zprávy */
.messText {
    margin-bottom: 5px;
}

/* Datum zprávy */
.messDate {
    font-size: 12px;
    color: #777;
    text-align: right;
}

/* Formulář pro odesílání zpráv */
.messageForm {
    border-top: 1px solid #ccc;
    padding: 10px;
    align-items: center;
}

.formContent {
    display: flex;
    align-items: center; /* Zarovnání obsahu na střed */
    width: 100%; /* Zajištění, že textarea zabírá dostupný prostor */
    gap: 10px;
}

.messageForm textarea {
    flex: 1;
    resize: none;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 14px;
    font-family: Arial, sans-serif;
}


/* ------------------------------------ */

.player_menu {
    margin: 10px 0;
    text-align: center; /* Zarovná obsah na střed */
}

.no-login-yet, .forgot_password{
    margin-top: 20px;
    color: gray;
    font-size: smaller;
    text-align: center;
}

.chat-container {
    display: flex;
    height: 100vh;
    max-width: 800px;
    margin: auto;
}

.conversation-list {
    padding: 10px;
    background-color: #f9f9f9;
    border-right: 1px solid #ccc;
    padding-right: 40px;
}

.conversation-list h3 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.conversation-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.conv_player {
    position: relative; /* Pro umístění no_read_count vůči rodiči */
    margin-bottom: 15px;
}

.conv_player a {
    text-decoration: none;
    color: #007BFF;
    font-size: 16px;
    transition: color 0.3s ease;
    display: inline-block; /* Zajištění zarovnání na řádku */
}

.conv_player a:hover {
    color: #0056b3;
}

.no_read_count1 {
    position: absolute;
    top: -3px; /* Mírně nad jménem hráče */
    left: calc(100% + 5px); /* Umístění napravo od textu */
    background-color: red;
    color: white;
    font-size: 10px; /* Menší velikost fontu */
    font-weight: bold;
    padding: 2px 6px; /* Menší vnitřní odsazení */
    border-radius: 50%; /* Kruhový tvar */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); /* Jemnější stín */
    line-height: 1; /* Zajištění správného vertikálního zarovnání textu */
}

.no_read_count {
    position: relative;
    color: #fff;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    background: #f00;
    padding: 0;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    border-radius: 50%;
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.3);
    float: right;
    margin-left: 3px;
    transition: transform 0.5s;
    transform-origin: center;
}

.right-menu{
    display: flex;
    gap:10px;
}
.right-menu .no_read_count{
    margin-left: -15px;
}

.player-menu{
    margin-top: 10px;
}

.player-menu a{
    background-color: white;
    border-radius: 5px;
    display: inline-block;
}

.player-menu a:hover {
    background-color: gold;
}
p.chat-help{
    margin: 30px;
}

div.index-welcome{
    width: 80%;
    max-width: 800px;
    margin: 20px auto;
    background-color: gold;
    color: black;
    border-radius: 8px;
}
div.index-welcome .text{
    padding: 20px;
}

.form-container textArea{
    width: 90%;
    padding: 8px;
    margin-bottom: 20px;
    border: 1px solid rgb(204, 204, 204);
    border-radius: 5px;
    font-size: 16px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    height: 120px;
}

.form-container input[type="number"] {
    width: 100px;
}

.form-container input[type="date"] {
    width: 200px;
}


.form-container .help-input{
    font-weight: lighter;
    font-size: small;
    padding-left: 10px;
}

/* Styl pro všechna povinná pole (nevyplněný rámeček) */
input:required, select:required {
    /* border: 2px solid gold; /* Zlatý rámeček */
    /* background-color: #fffdf0; /* Světle zlaté pozadí */
}

/* Styl při zaostření (focus) na povinné pole */
input:required:focus, select:required:focus {
    border: 2px solid #0ABF53; /* Zelený rámeček při zaostření */
    background-color: #E6FAF0; /* Světle zelené pozadí při zaostření */
    outline: none; /* Odstranění výchozího rámečku */
}

/* Styl při neplatném vstupu (HTML5 validace) */
input:required:invalid, select:required:invalid {
    border: 2px solid black;
    background-color: #F5EAEA;
    /* color: red; */
    font-weight: normal;
}

/* Styl při platném vstupu */
input:required:valid, select:required:valid {
    border: 2px solid black; /* Zelený rámeček pro platný vstup */
    background-color: #f4f4f9; /* Světle zelené pozadí pro platný vstup */
}


.cont-date-time {
    display: flex; /* Aktivuje flexbox layout */
    align-items: center; /* Vertikálně zarovná prvky na střed */
    gap: 10px; /* Mezera mezi datem a časem */
}

.cont-date-time input[type="date"],.cont-date-time select {
    padding: 5px 10px; /* Vnitřní odsazení pro lepší vzhled */
    font-size: 16px; /* Velikost textu */
    border: 1px solid #ccc; /* Světle šedý rámeček */
    border-radius: 4px; /* Zaoblené rohy */
    box-sizing: border-box; /* Zajistí správné měření šířky */
}

.cont-date-time input[type="date"]:focus, .cont-date-time select:focus {
    border-color: #0D6EFD; /* Barva rámečku při zaostření */
    outline: none; /* Odstranění výchozího obrysu */
}

.cont-date-time select {
    width: 120px; /* Šířka výběru času */
}

.cont-date-time input[type="date"] {
    flex: 1; /* Rozšíří šířku data na maximum dostupného místa */
    max-width: 150px;
}

.form-container .row {
    display: flex; /* Aktivace Flexboxu */
    gap: 10px; /* Mezera mezi prvky */
    align-items: center; /* Vertikální zarovnání prvků na střed */
}


.filters {
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px;
}
.filters label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: bold;
}
.filters input, .filters select {
    padding: 5px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    width: 100%;
}
@media (min-width: 768px) {
    .filters label {
        flex: 1 1 calc(20% - 10px);
        min-width: 150px;
    }
}
@media (max-width: 767px) {
    .filters label {
        flex: 1 1 100%;
    }
}

table.challenge-participants th{
    color: white;
    font-weight: normal;
    font-size: small;
}

/* Responzivní styl */
@media (max-width: 768px) {
    .player-header .stats {
        flex-direction: column;
        gap: 10px;
    }

    .match-table th, .match-table td {
        font-size: 0.9em;
        padding: 10px;
    }

    .pagination a {
        padding: 6px 12px;
    }

    .main-container{
        justify-content: flex-start;
    }

    .form-container{
        /*flex: 1 1 100%;*/
    }


}

button.add-participant{
    margin-bottom: 10px;
}

.error-message {
  color: #b00020;                 /* sytě červený text */
  background: #fdecea;            /* jemné červené pozadí */
  border: 1px solid #f5c2c7;      /* viditelný okraj – původně chyběl styl i barva */
  border-radius: 8px;             /* zaoblení rohů */
  text-align: center;
  padding: 12px 16px;
  margin: 16px auto;
  max-width: 800px;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Volitelné: malé varovné „emoji“ před textem */
.error-message::before {
  content: "⚠️";
  font-size: 1.1em;
  line-height: 1;
}

@media (min-width: 768px) {
    .form-container input[type="checkbox"] {
        transform: scale(2);
        cursor: pointer;
        width: 50px;
    }
}

/*
.form-container button {
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    width: 100%;
    max-width: 300px;
    display: block;
    margin: 0 auto;
}

button {
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    background-color: #0056b3;
}

.messageForm button {
    padding: 10px 20px;
    background-color: black;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}*/

button, .button {
    display: inline-block; /* Tlačítko jako blok */
    padding: 10px 20px; /* Velikost tlačítka */
    text-decoration: none; /* Odstranění podtržení odkazu */
    color: white; /* Barva textu */
    border: none; /* Odstranění rámečku */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 14px; /* Velikost písma */
    font-family: Arial, sans-serif; /* Styl písma */
    cursor: pointer; /* Změna kurzoru na ručičku */
    transition: background-color 0.3s ease; /* Efekt při hoveru */
    background-color: #0056b3;
    margin-top: 5px;
    margin-bottom: 5px;
}

button:hover, .button:hover {
    background-color: #003f7d;
    color: #fff;
    border-color: #0056b3;
}

button:active, .button:active {
    background-color: #004085;
    border-color: #004085;
}

.competition-name{
    background: black;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.competition-container{
    text-align: center;
}


/*filtry*/
.tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.tab {
    margin-right: 5px;
    position: relative;
}

.tab-toggle {
    display: none;
}

.tab-label {
    display: block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s;
}

.tab-label:hover {
    background-color: #0056b3;
}

.tab-content {
    display: none;
    border: 2px solid #007bff;
    border-radius: 0 0 5px 5px;
    padding: 20px;
    background-color: #f9f9f9;
    width: 100%;
    box-sizing: border-box;
    margin-top: -2px; /* Aby navazovalo na záložku */
}

.tab-toggle:checked + .tab-label + .tab-content {
    display: block;
}


.add_match .team-section {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Uspořádání prvků pod sebou */
    align-items: center; /* Vodorovné zarovnání na střed */
    justify-content: center; /* Svislé zarovnání na střed */
    text-align: center; /* Zarovnání textu na střed */
    gap: 10px; /* Mezera mezi prvky */
    padding: 0px 20px 10px; /* Vnitřní odsazení */
    margin: 10px auto; /* Vycentrování celé sekce */
    max-width: 500px; /* Maximální šířka sekce */
    background-color: #f9f9f9; /* Světlé pozadí pro lepší přehlednost */
    border: 1px solid #ccc; /* Okraj */
    border-radius: 10px; /* Zaoblené rohy */
}
.add_match h2 {
    margin: 10px 0; /* Mezera nahoře a dole */
    font-size: 18px; /* Velikost textu nadpisů */
}
.add_match select,
.add_match input {
    width: 90%; /* Šířka odpovídající většině sekce */
    max-width: 300px; /* Maximální šířka */
    padding: 8px; /* Vnitřní odsazení */
    border: 1px solid #ccc; /* Okraj */
    border-radius: 5px; /* Zaoblené rohy */
    font-size: 16px; /* Velikost textu */
    margin-bottom: 10px; /* Mezera pod každým polem */
    box-sizing: border-box; /* Zohlednění paddingu */
}

.add_match .datum{
    text-align: center;
}

.main-container{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.challenge-container .main-container{
    justify-content: center;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: flex-start;
}

/* Hlavní kontejner zpráv */
.messages {
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color:#fcfae3;
    color: #45443c;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 300px;
    padding: 10px;
}

/* Chybová zpráva */
.error-messages {
    max-width: 600px;
    margin: 20px auto;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color:#F5EAEA;
    color: #ff4d4d;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    min-width: 300px;
    padding: 10px;
}

/* Stylování tabulek pro mobily */
@media (max-width: 767px) {
    .main-container {
        align-items: flex-start;
    }

    table{
        min-width: 280px;
    }
    table, th, td {
        font-size: 0.9em; /* Zmenšení textu na mobilních zařízeních */
        padding: 5px
    }
    th{
        font-size: x-small;
    }

    div.messagesContainer{
        min-width: 300px;
    }

    div.messageForm textarea.comment{
        min-width: 250px;
    }

    table.challenges_list{
        width: 100%;
        border-collapse: collapse;
    }

    table.challenges_list th:first-child, table.challenges_list td:first-child {
        min-width: 200px; /* Zvýší šířku prvního sloupce */
        max-width: 300px; /* Zabrání extrémnímu zvětšení */
        overflow: visible; /* Zajistí, že nebude oříznut */
        white-space: nowrap; /* Zabrání zalamování textu */
    }

}


.welcome {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    background-color: rgba(249, 249, 249, 0.95);
}

.welcome h1, .welcome h2 {
    color: #007bff;
    text-align: center;
}

.welcome h1 {
    font-size: 28px;
}

.welcome h2 {
    font-size: 22px;
    margin-top: 30px;
}

.welcome ul {
    padding-left: 20px;
}

.welcome ul li {
    margin-bottom: 10px;
}

.welcome a {
    color: #007bff;
    text-decoration: none;
}

.welcome a:hover {
    text-decoration: underline;
}

.welcome button {
    display: block;
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    cursor: pointer;
    margin: 20px auto;
    border-radius: 5px;
}

.welcome button:hover {
    background-color: #0056b3;
}


.messageForm .formContent{
    flex-direction: column;
}

.messagesContainer{
    min-width: 400px;
}

.messageForm textarea.comment{
    min-width: 350px;
}

.details {
    font-size: 18px;
    color: #333;
}
.details strong {
    display: block;
    margin-bottom: 5px;
    font-size: 20px;
    color: #0073e6;
}
.details a {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 12px;
    background: #0073e6;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s;
}
.details a:hover {
    background: #005bb5;
}

.index .tomcup-player{
    padding-left: 15px;
}

.index .sign{
    text-align: center;
}

.matches-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.forgot_password .popis{
    margin-bottom: 20px;
    font-size: 16px;
}

.challenge-container .separator td {
    border-bottom: 5px solid black; /* Tlustá čára */
    height: 3px; /* Nízký řádek */
    padding: 0;
}

table.celk-poradi{
    max-width: 1000px;
}

button.menu-toggle{
    padding: 0px;
}

div.post-image img {
    width: 100%;
    height: auto;
    max-width: 600px; /* pokud chceš omezit maximální šířku */
    display: block;
    margin: 0 auto;
}


.pauza-checkbox {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* zarovná checkboxy vlevo */
    gap: 4px;
}

.pauza-checkbox label {
    display: flex;
    align-items: center;
    gap: 6px; /* mezera mezi checkboxem a jménem */
    font-size: 14px;
    line-height: 1.4;
}

.pauza-checkbox input[type="checkbox"] {
    margin-bottom: 0px;
}

/*@media (max-width: 600px) {
    .pauza-checkbox label {
        font-size: 14px;
    }

    .form-container {
        padding: 12px;
    }
}*/

/* ===== Padel Invite ===== */
.pozvanka-padel{
    --text: #333;
    --muted: #666;
    --heading: #111;
    --divider: #e6e6e6;
    --accent: #1a73e8;

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--text);
    max-width: 760px;
    margin: 0 auto;
    padding: 24px 20px 32px;
    line-height: 1.6;
}

.pozvanka-padel h1{
    font-size: 34px;
    line-height: 1.25;
    text-align: center;
    color: var(--heading);
    margin: 6px 0 14px;
    font-weight: 800;
}

.pozvanka-padel h2, .pozvanka-padel h3{
    font-size: 30px;
    line-height: 1.25;
    text-align: center;
    color: var(--heading);
    margin: 10px 0 8px;
    font-weight: 800;
}

.posts-container .pozvanka-padel h3{
    font-size: 26px;    
}

.pozvanka-padel p{
    font-size: 18px;
    margin: 12px 0;
}

.pozvanka-padel p.meta{
    text-align: center;
    font-weight: 600;
    color: var(--heading);
    margin: 0 0 18px;
}

.pozvanka-padel p.meta strong{
    font-weight: 700;
    color: var(--heading);
}

.pozvanka-padel .lead{
    text-align: center;
    color: var(--muted);
    font-size: 18px;
    max-width: 680px;
    margin: 0 auto 6px;
}

.pozvanka-padel ul{
    list-style: disc;
    padding-left: 22px;
    margin: 10px auto 4px;
    max-width: 680px;
    text-align: left;
}

.pozvanka-padel li{
    margin: 8px 0;
    font-size: 18px;
}

.pozvanka-padel strong{
    font-weight: 700;
    color: #222;
}

.pozvanka-padel .divider{
    height: 1px;
    background: var(--divider);
    margin: 18px auto 12px;
    width: 100%;
}

.pozvanka-padel .footer{
    text-align: center;
    margin-top: 22px;
    color: var(--muted);
}

.pozvanka-padel .cta{
    text-align: center;
    margin-top: 22px;
    font-size: 18px;
}

.pozvanka-padel .cta a{
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid rgba(26,115,232,.25);
}

.pozvanka-padel .cta a:hover{
    border-bottom-color: var(--accent);
}

.pozvanka-padel .tagline{
    text-align: center;
    font-weight: 800;
    margin-top: 18px;
    color: var(--heading);
}

/* Responsivní drobnosti */
@media (max-width: 520px){
    .pozvanka-padel{
        padding: 18px 14px 26px;
    }
    .pozvanka-padel h1{
        font-size: 28px;
    }
    .pozvanka-padel h2{
        font-size: 24px;
    }
    .pozvanka-padel p, .pozvanka-padel li{
        font-size: 16px;
    }
}

.label_hrac2{
    margin-top: 10px;
}