/* celý modal v popup-content */
.export-modal {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

/* pozadí pod modalem (tmavé) */
.export-modal__backdrop {
    display: none; /* nechceme překrývat celý popup, jen obsah */
}

/* obsah modal okna */
.export-modal__content {
    background: #ffffff;
    border-radius: 1px;
    padding: 18px 20px;
    margin: 0 auto;
}

/* nadpis */
.export-modal__content h3 {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: #2a2a2a;
}

/* seznam exportů */
.export-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

/* buttony exportů */
.button-choose-export {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 2px;
    border: 1px solid #d8d8d8;
    background: #f8f8f8;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

/* hover efekt */
.button-choose-export:hover {
    background: #f1f1f1;
    transform: translateY(-1px);
}

/* aktivní / focus efekt */
.button-choose-export:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.25);
}

/* text v buttonu */
.button-choose-export strong {
    display: block;
    font-size: 14px;
    color: #1f1f1f;
}

.button-choose-export small {
    display: block;
    font-size: 12px;
    color: #6d6d6d;
    margin-top: 2px;
}

/* =========================
   STYLY PRO DRUHÝ KROK
   ========================= */

.export-columns-modal {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.export-columns-modal__content {
    background: #ffffff;
    border-radius: 1px;
    padding: 18px 20px;
    margin: 0 auto;
}

/* Nadpis a akce výběru */
.export-columns-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}

.export-columns-modal__content h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #2a2a2a;
}

.export-columns-modal__selection-actions {
    display: flex;
    gap: 8px;
}

/* Tlačítka pro hromadný výběr */
.btn-selection {
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    background: #fff;
    color: #555;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-selection:hover {
    background: #f8f8f8;
    border-color: #bbb;
    color: #333;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.btn-selection--all:hover {
    border-color: #4a6fa5;
    color: #4a6fa5;
}

.btn-selection--none:hover {
    border-color: #d9534f;
    color: #d9534f;
}

/* Form */
#export-columns-form {
    display: grid;
    gap: 12px;
}

/* Checkboxy */
#export-columns-form label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    background: #f9f9f9;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

#export-columns-form label:hover {
    background: #f2f2f2;
    transform: translateY(-1px);
}

/* Disabled checkbox */
#export-columns-form input[type="checkbox"][disabled] + * {
    opacity: 0.6;
}

/* akční řádek (input + button) */
.export-columns-modal__actions {
    display: flex;
    flex-direction: column; /* input nad tlačítkem */
    gap: 10px;
    margin-top: 14px;

    grid-column: 1 / -1;

}

/* wrapper inputu + label */
.export-columns-modal__filename-wrapper {
    display: flex;
    flex-direction: column;
    gap: 4px;

}

/* label pro filename (nová třída) */
.export-columns-modal__filename-label {
    font-size: 12px;
    color: #6d6d6d;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 0px !important;
    background: white !important;
    cursor: pointer;
    transition: none !important;
}

.export-columns-modal__filename-label:hover {
    background: white;
    transform: none !important;
}

/* input pro název souboru */
.export-columns-modal__filename {
    width: 100%;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    background: #ffffff;
    font-size: 14px;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* input focus */
.export-columns-modal__filename:focus {
    outline: none;
    border-color: #4a6fa5;
    box-shadow: 0 0 0 3px rgba(74, 111, 165, 0.18);
}

/* Tlačítko generování */
.js-export-generate {
    width: 100%;
    padding: 12px 14px;
    border-radius: 4px;
    border: 1px solid #d8d8d8;
    background: #007bff;
    color: #ffffff;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.15s ease, transform 0.15s ease;
}

.js-export-generate:hover {
    background: #006ae6;
    transform: translateY(-1px);
}

.js-export-generate:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 120, 255, 0.25);
}

/* Hint text */
.export-columns-modal__hint {
    font-size: 12px;
    color: #6d6d6d;
    margin-top: 8px;
}