/* Styl dla całego dokumentu */
body, html {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Główny kontener */
.container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    flex-grow: 1;
}

/* Zawartość główna */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Styl dla nagłówka strony */
h2 {
    color: #ffffff;
    background-color: #007bff;
    padding: 15px 20px;
    border-radius: 5px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Styl dla formularza logowania */
/* Styl dla ramki logowania */
.login-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Styl dla pól logowania */
.login-fields {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.login-fields label {
    font-weight: bold;
    margin-bottom: 5px;
    text-align: center;
}

/* Ustawienie węższej szerokości dla pól tekstowych */
.login-fields input[type="text"],
.login-fields input[type="password"] {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 300px;
    box-sizing: border-box;
}

/* Styl dla przycisku logowania */
.login-button {
    padding: 12px 24px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    height: 45px;
    width: 150px;
    box-sizing: border-box;
    margin-top: 15px;
}

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

/* Styl dla wiadomości o błędzie */
.error-message {
    font-size: 16px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin-top: 20px;
}

/* Styl dla menu nawigacyjnego */
nav {
    margin-bottom: 20px;
    text-align: center;
    background-color: #007bff;
    padding: 10px;
    border-radius: 5px;
}

nav a {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    margin: 0 10px;
    padding: 8px 15px;
    border-radius: 3px;
    transition: background-color 0.3s;
}

nav a:hover {
    background-color: #0056b3;
}

/* Styl dla etykiet formularza */
label {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 5px;
    display: block;
}

/* Styl dla pól wejściowych */
input[type="text"],
input[type="password"],
input[type="file"],
select {
    padding: 10px;
    font-size: 16px;
    margin-bottom: 15px;
    margin-top: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

/* Styl dla pola checkbox i jego etykiety */
.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

input[type="checkbox"] {
    margin-right: 5px;
}

/* Styl dla stronnicowania */
.pagination {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.pagination-left {
    flex: 1;
    text-align: left;
}

.pagination-right {
    flex: 1;
    text-align: right;
}

.pagination a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007bff;
    color: #ffffff;
    border-radius: 5px;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s;
}

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

/* Styl wiadomości (sukces / błąd) */
.message {
    padding: 10px;
    border-radius: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.message.error {
    background-color: #f8d7da;
    color: #721c24;
     border: 1px solid #f5c6cb;
}

.message.info {
    background-color: #e7f3fe;
    color: #31708f;
    border: 1px solid #bce8f1;
}

/* Styl dla tabeli */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

table, th, td {
    border: 1px solid #ddd;
    padding: 8px;
}

th {
    background-color: #f2f2f2;
    text-align: left;
    font-weight: bold;
}

td {
    text-align: left;
}

td:first-child {
    white-space: nowrap;
}

/* Styl dla błędów w formularzu logowania */
.error-message {
    color: red;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Styl dla importowanych komunikatów */
.import-messages {
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #333;
}

/* Styl dla stopki */
.footer {
    background-color: #e0e0e0;
    text-align: center;
    padding: 15px;
    font-size: 14px;
    color: #333;
    margin-top: 20px;
}

footer .footer-link {
    color: #0056b3;
    text-decoration: underline;
    font-weight: bold;
    transition: color 0.3s ease;
}

footer .footer-link:hover {
    color: #007bff;
}


/* Styl dla formularza wyszukiwania */
.search-form {
    margin-bottom: 20px;
}

/* Styl dla elementów akcji */
.action-box {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    background-color: #f9f9f9;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.action-box-wide {
    max-width: 1200px;
}

.action-fields {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}


.action-fields label {
    font-weight: bold;
    align-self: center;
}

.action-fields input[type="text"],
.action-fields select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 220px;
    height: 45px;
    box-sizing: border-box;
}

/* Styl dla przycisków akcji */
.action-button, .show-all-button {
    padding: 12px 24px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s;
    height: 45px;
    box-sizing: border-box;
}

.action-button:hover, .show-all-button:hover {
    background-color: #0056b3;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

/* Styl dla przycisków akcji w tabeli produktów */
.table-action-button {
    display: inline-block;
    padding: 5px 10px;
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.table-action-button:hover {
    background-color: #0056b3;
    color: #ffffff;
}

.table-action-button:active {
    background-color: #004494;
}

/* Nagłówek formularza akcji */
.action-header {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    color: #333;
    margin-bottom: 15px;
}

/* Styl komunikatu o błędzie w miejscu nagłówka */
.error-message {
    font-size: 18px;
    font-weight: bold;
    color: red;
    text-align: center;
    margin-bottom: 15px;
}

.kursy-walut-text {
    font-size: 12px;
    line-height: 1.2;
    margin-top: 5px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    background-color: #f9f9f9;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    max-width: 480px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.kursy-walut-text p {
    margin: 2px 0;
}

/* --------- Stylizacja tabeli wyników eksportu --------- */

.export-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 16px;
    text-align: left;
    border: 1px solid #000;
}

.export-table th,
.export-table td {
    padding: 12px 15px;
    border: 1px solid #ddd;
    border: 1px solid #000;
}

.export-table thead tr {
    background-color: #f4f4f4;
    color: #333;
    font-weight: bold;
}

.export-table tr.success {
    background-color: #d4edda;
    color: #155724;
}

.export-table tr.info {
    background-color: #fff3cd;
    color: #856404;
}

.export-table tr.error {
    background-color: #f8d7da;
    color: #721c24;
}

/* ----- Ogólne style użytkowe ----- */

/* Definicja klasy spacer */
.spacer {
    height: var(--spacer-height, 20px); /* Domyślnie 20px, jeśli zmienna nie jest ustawiona */
}

/* ----- Style dla TAGów ----- */

/* Kontener na obie sekcje tagów */
.tags-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Wyrównanie na górze */
    gap: 20px; /* Odstęp między sekcjami */
}

/* Styl dla pojedynczej sekcji tagów */
.tag-box {
    flex: 1; /* Każda sekcja zajmuje równą szerokość */
    max-width: 45%; /* Opcjonalnie: ograniczenie szerokości */
    min-width: 300px; /* Opcjonalnie: minimalna szerokość */
}

/* Styl dla sekcji tagów do dodania */
.tag-box.tags-to-add {
    background-color: #e6f9e6; /* Delikatny zielony */
    border: 1px solid #b3e6b3; /* Opcjonalnie: obramowanie */
    border-radius: 8px; /* Zaokrąglenie rogów */
    padding: 15px; /* Wewnętrzne odstępy */
}

/* Styl dla sekcji tagów do usunięcia */
.tag-box.tags-to-remove {
    background-color: #f9e6e6; /* Delikatny czerwony */
    border: 1px solid #e6b3b3; /* Opcjonalnie: obramowanie */
    border-radius: 8px; /* Zaokrąglenie rogów */
    padding: 15px; /* Wewnętrzne odstępy */
}

/* Styl dla listy tagów */
.tags-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px; /* Dodaj przewijanie przy długich listach */
    overflow-y: scroll; /* Wymusza wyświetlanie paska przewijania */
    scrollbar-width: thin; /* Dla Firefox - cieńszy pasek przewijania */
    scrollbar-color: #c1c1c1 #f9f9f9; /* Kolory pasków przewijania w Firefox */
    -webkit-overflow-scrolling: touch; /* Wspiera płynne przewijanie na urządzeniach dotykowych */
}

/* Styl pasków przewijania dla WebKit (Chrome, Edge, Safari) */
.tags-list::-webkit-scrollbar {
    width: 10px; /* Szerokość paska przewijania */
}

.tags-list::-webkit-scrollbar-track {
    background: #f9f9f9; /* Kolor tła paska przewijania */
}

.tags-list::-webkit-scrollbar-thumb {
    background-color: #c1c1c1; /* Kolor uchwytu */
    border-radius: 5px;
    border: 2px solid #f9f9f9; /* Optyczne wpasowanie uchwytu w tło */
}

/* Styl dla etykiety checkboxów w sekcji tagów */
.tags-list label {
    font-weight: normal; /* Nadpisanie domyślnego pogrubienia */
    display: flex; /* Ustawienie elastycznego układu */
    align-items: center; /* Wyrównanie checkboxa z tekstem */
    gap: 10px; /* Odstęp między checkboxem a nazwą tagu */
}

/* Styl dla pojedynczego elementu */
.tag-item label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.5;
}

/* Opcjonalne wyróżnienie tagów */
.tag-item input[type="checkbox"]:checked + span {
    font-weight: bold;
    color: #007bff;
}

/* ----- Atrybuty ----- */

/* Styl dla kontenera atrybutów */
.attrs-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

/* Styl dla sekcji atrybutów do przypisania */
.attr-box {
    flex: 1;
    max-width: 45%;
    min-width: 300px;
    background-color: #f9f9f9; /* Tło sekcji */
    border: 1px solid #ddd; /* Obramowanie */
    border-radius: 8px; /* Zaokrąglenie rogów */
    padding: 15px; /* Wewnętrzne odstępy */
}

/* Styl dla sekcji przypisywania atrybutów */
.attrs-to-add {
    background-color: #e6f9e6;
    border: 1px solid #b3e6b3;
}

/* Styl dla sekcji atrybutów do usunięcia */
.attrs-to-remove {
    background-color: #f9e6e6;
    border: 1px solid #e6b3b3;
}

/* Styl dla listy atrybutów */
.attrs-list {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Odstęp między atrybutami */
    max-height: 400px;
    overflow-y: scroll; /* Pasek przewijania */
    scrollbar-width: thin; /* Dla Firefox */
    scrollbar-color: #c1c1c1 #f9f9f9; /* Kolory paska przewijania */
}

/* Styl pasków przewijania dla WebKit (Chrome, Edge, Safari) */
.attrs-list::-webkit-scrollbar {
    width: 10px; /* Szerokość paska przewijania */
}

.attrs-list::-webkit-scrollbar-track {
    background: #f9f9f9; /* Kolor tła paska przewijania */
}

.attrs-list::-webkit-scrollbar-thumb {
    background-color: #c1c1c1; /* Kolor uchwytu */
    border-radius: 5px;
    border: 2px solid #f9f9f9; /* Obramowanie uchwytu */
}

/* Styl dla pojedynczego elementu atrybutu */
.attr-item {
    margin-bottom: 15px; /* Odstęp między elementami */
}

.attr-item strong {
    display: block;
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #333; /* Kolor tekstu nagłówka atrybutu */
}

/* Styl dla listy wartości */
.values-list {
    display: flex;
    flex-wrap: wrap; /* Wartości w wielu wierszach */
    gap: 10px; /* Odstępy między wartościami */
}

/* Styl dla etykiety wartości */
.values-list label {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f5f5f5;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.5;
    transition: background-color 0.3s, color 0.3s;
}

.values-list label:hover {
    background-color: #e6e6e6;
    color: #007bff;
}

/* Styl dla checkboxa wartości */
.values-list input[type="checkbox"] {
    margin-right: 5px;
}

/* Wyróżnienie zaznaczonej wartości */
.values-list input[type="checkbox"]:checked + span {
    font-weight: bold;
    color: #007bff;
}

/* Styl dla przycisku zastosowania tagi i atrybuty */
.action-button[name="apply_attributes"],
.action-button[name="remove_attributes"],
.action-button[name="apply_tags"],
.action-button[name="remove_tags"] {
    margin-top: 20px;
    width: 100%;
    max-width: none;
    background-color: #007bff;
}

.action-button[name="apply_attributes"]:hover,
.action-button[name="remove_attributes"]:hover,
.action-button[name="apply_tags"]:hover,
.action-button[name="remove_tags"]:hover {
    background-color: #0056b3;
}