/* Globální styly, aplikují se na všechna zařízení */
  
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    color: #000000;
}

header {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Důležité pro správné umístění dceřiných prvků */
    margin: 0;
    padding: 0; 
    height: 10em;
    background-color: rgba(156, 156, 220, 1);
    justify-content: flex-end
}

#header-image {
    width: 100%;
    height: 7em;
    object-fit: cover;
    position: relative;
}

.logo {
    position: absolute;
    top: 1em;
    left: 1em;
}



main {
    flex: 1;
    background-color: rgba(170, 170, 170, 1); 
	background-size: cover; /* nastaví velikost obrázku */
    padding: 1em;
    padding-left: 1em; 
    padding-top: 1em; 
    overflow: auto;
}

a {
  color: #FFA500;
  text-decoration: none;
}

p {
    margin-bottom: 1em;  
    margin-top: 1em;
}

h1 {
    font-size: 1.3em;
    margin-bottom: 1em; 
    margin-top: 1em; 
}

h2 {
    font-size: 1.2em;
    margin-bottom: 1em;
    margin-top: 1em;
}

h3 {
    font-size: 1.1em;
    margin-bottom: 1em;
}

.logo h5 {
    font-size: 1.6em;
    color: black;
    text-align: left;
    padding-left: 1em; 
    padding-top: 1em; 
}

footer {
  background-color: #000000;
  color: #fff;
  padding: 0.5em;
  text-align: center;
}

.form-group {
    display: flex;
    align-items: center;
    margin-bottom: 0.5em;
    gap: 10px;
}

label {
    width: 10em; 
    margin-right: 1em;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
input[type="tel"], 
input[type="number"],
select {  
    flex-grow: 0; /* Zabraňuje automatickému rozšiřování */
    flex-shrink: 1; /* Umožňuje zmenšení, pokud je málo místa */
    flex-basis: 30em; /* Nastavuje výchozí šířku */
    padding: 10px; /* Upravte odsazení podle potřeby */
    margin: 0; /* Zajistěte, že okraje jsou stejné */
    border: 1px solid #ccc; /* Jednotný styl okraje */
    border-radius: 4px; /* Zaoblené rohy */
    font-size: 1em; /* Stejná velikost písma */
    line-height: 1; /* Stejná výška řádku pro lepší čitelnost */
    background-color: #fff; /* Barva pozadí */
    color: #000; /* Barva textu */
}

.alert {
    color: #ffffff;
    background-color: #007bff;
    padding: 1em;
    margin-bottom: 1em;
    border-radius: 0,5em;
    text-align: center;
}

table {
    width: 100%; /* Nastaví šířku tabulky na celou šířku kontejneru */
    border-collapse: collapse; /* Odebere dvojitá ohraničení mezi buňkami */
    margin-bottom: 20px; /* Přidává prostor pod tabulkou */
}

.history-table {
    width: 100% !important; /* Nastaví šířku tabulky na celou šířku kontejneru */
}

/* Nastavení šířek sloupců */
.history-table th:nth-child(1), .history-table td:nth-child(1) { width: 15%; }
.history-table th:nth-child(2), .history-table td:nth-child(2) { width: 70%; }
.history-table th:nth-child(3), .history-table td:nth-child(3) { width: 15%; }

table .button {
    padding: 0.5em 1em; /* menší vnitřní okraje */
    font-size: 0.8em; /* menší velikost písma */
    margin: 0; /* odstraní jakékoli vnější okraje */
}

table td, table th {
    padding: 0.5em; /* menší odsazení buňky */
    text-align: left; /* Zarovnání textu doleva */
    border: 1px solid #ddd; /* Jednotné ohraničení pro buňky a hlavičky */
    border: 1px solid #ddd; /* Nastaví ohraničení buňek */
    padding: 8px; /* Přidává prostor uvnitř buněk */
    text-align: center; /* Zarovnává text vlevo */
}

th {
    background-color: #333; /* Nastaví barvu pozadí pro hlavičku */
    color: white; /* Nastaví barvu textu pro hlavičku */
}

tr:hover {
    background-color: #ddd; /* Nastaví barvu pozadí při najetí myší */
}

.button {
    background-color: #8B4513; /* Hnědá barva */
    color: white; /* Bílý text */
    padding: 10px;
    border: none; /* Žádný okraj */
    border-radius: 0.5em; /* Zkosené rohy */
    cursor: pointer; /* Ukazatel kurzoru jako ukazatel */
    font-size: 1em; /* Velikost písma */
    transition: background-color 0.3s; /* Plynulá změna barvy pozadí */
}

.button:hover {
    background-color: #A0522D; /* Tmavší hnědá barva při najetí myši */
}

.button-group {
    display: flex;
    justify-content: flex-start; /* Zarovnání obsahu na levou stranu */
    gap: 1em; /* Vzdálenost mezi tlačítky */
    width: 10%; /* nebo jiná vhodná šířka */
}

.button.disabled, .button[disabled] {
    background-color: #ccc;
    cursor: not-allowed;
    pointer-events: none; /* Zabraňuje klikání */
}

select {
    flex-grow: 0; /* Zabraňuje automatickému rozšiřování */
    flex-shrink: 1; /* Umožňuje zmenšení, pokud je málo místa */
    flex-basis: 30em; /* Nastavuje výchozí šířku, stejně jako u inputů */
    padding: 0,25em; /* Odsazení uvnitř select boxu */
    border: 0,1em solid #ccc; /* Styl okraje, podobně jako u inputů */
    border-radius: 0,25em; /* Zaoblené rohy */
    font-size: 1em; /* Velikost písma, stejně jako u inputů */
    cursor: pointer; /* Změní kurzor na ukazatel, když je nad select boxem */
}

ul {
    padding-left: 20px; /* Zvyšuje odsazení od levého okraje */
    list-style-type: disc; /* Můžete zvolit různé styly, jako jsou disc, circle, square, none, atd. */
}

li {
    margin-bottom: 10px; /* Přidává prostor pod každou odrážkou */
    font-size: 16px; /* Můžete nastavit velikost písma podle vašich potřeb */
}     

@media screen and (max-width: 1024px) {

    header {
        height: auto;
        position: relative;
        background-color: rgba(156, 156, 220, 1);
        height: 8em;
    }

    .hamburger-icon {
        display: block;
        position: absolute;
        top: 0;
        right: 0; 
        color: white;
        font-size: 3em;
        cursor: pointer;
        background-color: #333;
    }
        
    nav {
        display: none; /* Skrytí menu ve výchozím stavu */
        position: absolute;
        background-color: #333;
        width: 100%;
        top: 3em;
    }
    
    nav.active {
        display: block;
    }

    nav a {
        display: block; /* Zajišťuje, že odkazy budou pod sebou */
        padding: 2em;
        color: white;
        text-decoration: none;
    }
    
    .table-wrapper {
    overflow-x: auto;
    }
    
    th {
        font-size: 0.8em; /* Zmenšení textu ve sloupcích */
        padding: 0.2em; /* Upravení odsazení pro menší prostor */
    }

}

@media screen and (min-width: 1025px) {
    
    nav {
    position: relative; /* Absolutní, pokud chcete specifické umístění v hlavičce */
    width: 100%;
    height: 3em; 
    background-color: #333; /* nastaví barvu pozadí */
	overflow: hidden; /* nastaví overflow */
    align-self: stretch;
    text-align: center;   
    }

    nav a {
	float: left; /* nastaví umístění odkazů v menu */
	color: white; /* nastaví barvu textu */
	text-align: center; /* nastaví zarovnání textu */
	text-decoration: none; /* odstraní podtržení pod textem */
    display: block;
    float: left;
    padding: 1em 1em;
    }

    nav a:hover {
	background-color: #ddd; /* nastaví barvu pozadí při najetí myší */
    color: black; /* nastaví barvu textu při najetí myší */
    }

    .hamburger-icon {
    display: none; /* Skryto na velkých obrazovkách */
    position: absolute;
    top: 1em; 
    right: 1em;
    cursor: pointer;
    font-size: 3em; 
    color: white;
    }
    
    table {
        width: auto; /* Šířka tabulky podle obsahu */
        margin-left: 0; /* Zarovnání tabulky doleva */
        margin-right: auto;
    }

    th, td {
        text-align: center; /* Zarovnání obsahu buněk na střed */
    }
    
  
}