/* Základní styly pro celou stránku */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    margin: 10px;
    padding: 0 0 15px 0; /* Přidán dolní padding */
}

/* Styly pro tabulky */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th, td {
    padding: 8px;
    text-align: left;
}

/* Styly pro liché řádky */
tr:nth-child(odd) {
    background-color: #f8f8f8; /* Hodně světlé šedé pozadí pro liché řádky */
}

/* Styly pro hlavičku tabulky */
th {
    background-color: #ddd; /* Světle šedé pozadí za názvem položek */
    font-size: 12px; /* Velikost textu hlavičky tabulky */
}

/* Styl pro text v hlavičce tabulky */
.column-header {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.column-header:hover {
    color: #c22b4c; /* dc214a z loga  555 Tmavě šedá barva při najetí myší */
    text-decoration: underline;
}

/* Pevná šířka pro sloupec "Číslo jednotky" */
td.cislo-jednotky {
    width: 12ch; /* Šířka odpovídá 12 znakům */
    word-break: break-all; /* Zajistí zalomení textu po 12 znacích */
    white-space: normal; /* Umožní zalamování textu */
}

/* Styly pro text v tabulce */
td {
    font-size: 11px; /* Velikost textu v tabulce */
}

/* Styly pro barvu textu */
.green {
    color: green;
}

.red {
    color: red;
}

/* Styly pro ikony */
.icon {
    width: 26px;
}

/* Styly pro formulář */
form {
    width: 100%;
}

/* Styly pro pole formuláře */
form input[type="text"], form input[type="date"], form select, form textarea {
    width: 50%; /* Nastavení šířky na 50% */
    min-width: 300px; /* Nastavení minimální šířky na 300px */
    margin-bottom: 10px; /* Vložit malou mezeru mezi každé pole a nadpis dalšího pole */
}

input[type="text"], input[type="password"] {
    width: 50%; /* Nastavení šířky na 50% */
    min-width: 300px; /* Nastavení minimální šířky na 300px */
    margin-bottom: 10px; /* Vložit malou mezeru mezi každé pole a nadpis dalšího pole */
}

/* Styly pro pole formuláře readonly */
input[readonly] {
    background-color: #f0f0f0; /* světle šedá barva */
}
textarea[readonly] {
    background-color: #f0f0f0; /* světle šedá barva */
}

#delete_fotka1,
#delete_fotka2,
#delete_fotka3,
#delete_fotka4,
#delete_fotka5,
#delete_fotka6,
#delete_montazni_list {
    margin-top: 3px;
    margin-bottom: 3px;
}

#delete_button_fotka1,
#delete_button_fotka2,
#delete_button_fotka3,
#delete_button_fotka4,
#delete_button_fotka5,
#delete_button_fotka6,
#delete_button_montazni_list {
    margin-top: 3px;
    margin-bottom: 3px;
}

/* Styly pro tlačítko formuláře */
form input[type="submit"] {
    display: block; /* Tlačítko se zobrazí na novém řádku */
    margin: 0 auto; /* Centruje tlačítko horizontálně */
    background-color: lightblue; /* Tlačítko Přidat záznam světle modré */
    color: black;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Přidání efektu přechodu */
}

/* Styly pro tlačítko formuláře při najetí myši */
form input[type="submit"]:hover {
    background-color: #8dabc9; /* 3399FF Malinko tmavší modrá barva */
}

/* Styly pro tlačítko odkazu */
.button-link {
    display: inline-block; /* Změněno na inline-block */
    margin: 10px auto; /* Centrované tlačítko */
    background-color: lightblue; /* Tlačítko světle modré */
    color: black;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-align: center; /* Centrovat text uvnitř */
    text-decoration: none; /* Odstranit podtržení odkazu */
    transition: background-color 0.3s ease; /* Přidání efektu přechodu */
    width: auto; /* Automatická šířka podle obsahu */
}

/* Styly pro tlačítko odkazu při najetí myši */
.button-link:hover {
    background-color: #8dabc9; /* Malinko tmavší modrá barva */
}

/* Styly pro hlavičku */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-color: #ccc; /* Barva hlavičky */
}

.logo {
    width: 200px; /* Vychozí šířka loga na 120 pixelů */
    height: auto;
    cursor: pointer;
}

.info-texts {
    display: flex;
    align-items: center;
    margin-right: 40px; /* Odsazení mezi texty */
    font-size: 13px; 
}

.action-buttons {
    display: flex;
    align-items: center;
}

/* Styly pro tlačítko v hlavičce */
/* Základní styly pro tlačítko */
.button {
    display: inline-block; /* Zobrazení jako blokový prvek s možností nastavení šířky a výšky */
    padding: 6px 6px; /* Vnitřní odsazení tlačítka (10px nahoru/dolů, 16px vlevo/vpravo) */
    background-color: #f0f0f0; /* Výchozí barva pozadí tlačítka */
    color: black; /* Barva textu uvnitř tlačítka */
    border: 1px solid #666; /* Tenký hranatý rámec s barvou #666 okolo tlačítka */
    border-radius: 4px; /* Zaoblené rohy tlačítka */
    cursor: pointer; /* Změna kurzoru na ruku při najetí na tlačítko */
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease; /* Plynulý přechod pro změnu vlastností tlačítka */
    margin-left: max(1.5%, 4px); /* Minimální odsazení vlevo mezi tlačítky */
    margin-right: max(1.5%, 4px); /* Minimální odsazení vpravo mezi tlačítky */
    text-align: center; /* Zarovnání textu na střed tlačítka */
    white-space: normal; /* Zajištění zalamování textu na více řádků */
    text-decoration: none; /* Odstranění podtržení u odkazových tlačítek */
    font-size: 13px; /* Velikost písma v tlačítku */
    line-height: 1.2; /* Výška řádku textu pro lepší prostorové vyvážení */
    box-sizing: border-box; /* Zahrnutí paddingu a borderu do šířky a výšky */
    outline: none; /* Odstranění výchozího okraje */
}

/* Při najetí myší */
.button:hover {
    background-color: #d3bdc2; /* Tmavší odstín pro efekt při najetí myší */
    border-color: #333; /* Tmavší barva rámečku okolo tlačítka */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Výraznější stín pro efekt při najetí myší */
}

/* Při aktivaci tlačítka */
.button:active {
    transform: translateY(1px); /* Posunutí tlačítka o 1 pixel dolů při aktivaci */
    box-shadow: none; /* Odstranění stínování při aktivaci tlačítka */
}

/* Media query pro zmenšení mezer mezi tlačítky */
@media screen and (max-width: 600px) {
    .action-buttons .button {
        padding: 3px 4px; /* Úprava vnitřního odsazení na 4px nahoře a dole a 4px na stranách */
        margin-left: 2px; /* Menší mezera vlevo */
        margin-right: 2px; /* Menší mezera vpravo */
    }
}




/* Styly pro text v hlavičce */
.action-buttons {
    font-size: 16px; /* Velikost textu v hlavičce */
}

/* Styly pro patičku */
.footer {
    background-color: #aaa;
    padding: 5px 10px;
    text-align: center;
    width: calc(100% - 40px); /* Upravená šířka */
    position: fixed;
    bottom: 0;
    height: 10px;
}

.footer p {
    margin: 0;
    color: #fff; /* Bílá barva textu */
    font-size: 0.7em; /* Velikost textu o jednu třetinu menší */
}


    .multi-line {
        white-space: nowrap; /* Zajistí, že text nebude zalamován na nové řádky */
    }
    .multi-line a {
        display: inline-block; /* Umožní lepší kontrolu nad šířkou a zalamováním textu */
        text-align: center; /* Zarovná text uprostřed v rámci každého odkazu */
        margin-right: 10px; /* Mezery mezi odkazy a oddělovačem */
    }
    .multi-line a:last-child {
        margin-right: 0; /* Odstraní pravý okraj u posledního odkazu */
    }
    .multi-line a br {
        content: "\a"; /* Přidá nový řádek */
        white-space: pre; /* Zajistí, že nový řádek bude správně zobrazen */
    }