/* Kontejner pro zafixovanou sekci s tabulkou */
.label-creation {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: white;
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Mírně větší stín pro moderní vzhled */
    max-height: calc(100vh - 260px); 
    overflow-y: auto; /* změna z hidden na auto */
    border-radius: 8px; /* Přidáno zakulacení */
}

.label-creation h2, .label-creation h3 {
    margin-top: 0;
    font-size: 18px; /* Modernější velikost */
    color: #208ea2;  /* Jemná modrá barva */
    font-weight: bold;
}

.label-creation p {
    margin: 10px 0;
    color: #555; /* Tmavší šedá pro text */
    font-size: 14px;
}

textarea {
    width: 100%;
    padding: 12px; /* Zvýšeno pro větší komfort */
    box-sizing: border-box;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px; /* Zakulacení okrajů */
    font-size: 14px;
    background-color: #fafafa; /* Světlejší pozadí */
    transition: border-color 0.3s ease;
}

textarea:focus {
    border-color: #208ea2; /* Barva při focusu */
}

.label-preview {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    background-color: #fafafa; /* Světlejší pozadí */
    display: block; /* ujistěte se, že je viditelný, JS ho už zapíná */
    max-height: 46vh;    /* maximální výška náhledu, např. 70% výšky okna */
    overflow-y: auto;
    border-radius: 8px; /* Zakulacené hrany */
}

.preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    color: #208ea2;
}

















/* Styly pro tvorbu štítků */

.label, .stock-label{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 0.2px dashed #000;
    border-right: 0.2px dashed #000;
    border-left: 0.2px dashed #000;
    border-bottom: 0; /* Defaultně odstraníme spodní ohraničení */
    font-weight: bold;
    padding-left: 15px; /* Přidání mezery před prvním prvkem */
    padding-right: 15px; /* Přidání mezery za posledním prvkem */
    width: 17cm;
    height: 4.5cm;  /* Upraveno na 4 cm */
    font-size: 60px;  /* Zvýšeno z 16px na 60px */
    box-sizing: border-box; /* Zajištění, aby padding byl součástí celkové šířky a výšky */
}

.label.page-break {
    border-bottom: 0.2px dashed #000; /* Přidání spodního ohraničení */
}

.label:last-child {
    border-bottom: 0.2px dashed #000; /* Přidání spodního ohraničení pouze k poslednímu štítku */
}

.label.small {
    width: 11cm;
    height: 2.3cm;  /* Upraveno na 2.4 cm */
    font-size: 42px;  /* Zvýšeno z 12px na 42px */
    padding-left: 10px; /* Přidání mezery před prvním prvkem */
    padding-right: 10px; /* Přidání mezery za posledním prvkem */
    box-sizing: border-box; /* Zajištění, aby padding byl součástí celkové šířky a výšky */
}

.qr-code-label {
    display: flex;
    justify-content: center;
    align-items: center;
}

.label .circle {
    width: 95px;  /* Zvýšeno z 24px na 95px */
    height: 95px;  /* Zvýšeno z 24px na 95px */
    border: 6px solid #000;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.label.small .circle {
    width: 65px;  /* Zvýšeno z 24px na 65px */
    height: 65px;  /* Zvýšeno z 24px na 65px */
    border: 4px solid #000;
}

.label .arrow {
    font-size: 100px;  /* Zvýšeno z 24px na 100px */
    margin-top: -15px;
    margin-left: -5px;
    margin-right: -5px;
}

.label.small .arrow {
    font-size: 70px;  /* Zvýšeno z 24px na 70px */
}

.page {
    width: 210mm;
    height: 297mm;
    border: 1px solid black;
    page-break-after: always;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    margin: 0;
}

#labels-container {
    display: flex;
    flex-direction: column;
}

.stock-label .qr-code-label {
margin-bottom: 15px;
}

.stock-label span {
font-size: 24px;
color: #333;
font-weight: bold;
margin-top: 10px;
}