body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', sans-serif;
    background-color: #f0f0f2;
}
h2 {
    color: #333; /* Ciemnoszary kolor tekstu */
    text-align: center; /* Wyśrodkowanie tekstu */
    margin: 20px 0; /* Dodanie przestrzeni nad i pod nagłówkiem */
    font-family: 'Helvetica Neue', sans-serif; /* Styl czcionki podobny do macOS */
    font-size: 24px; /* Rozmiar czcionki dla nagłówka */
    font-weight: normal; /* Normalna grubość czcionki */
}

.top-bar {
    height: 10px;
    background-color: #6a6a6a;
    width: 100%;
}

.navbar {
    background-color: #cdcccc;
    height: 60px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    margin: 30px;
    transition: all 0.3s ease;
}

.navbar:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
}

.navbar .left-section {
    font-size: 14px;
    color: #333;
}

.navbar .right-section .nav-button {
    height: 60px;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    padding: 0 15px;
    transition: background-color 0.3s ease;
}


.navbar .right-section .nav-button:hover {
    background-color: #d1d1d1;
}

.menu-button {
    display: none;
    cursor: pointer;
    /* Dodatkowe style dla przycisku menu */
}

.dropdown-content {
    display: none;
    /* Style dla rozwijanego menu */
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

@media (max-width: 768px) {
    .menu-button {
        display: block; /* Pokaż przycisk menu */
    }

    .right-section {
        display: none; /* Ukryj przyciski nawigacyjne na mniejszych ekranach */
    }

    .dropdown-content {
        display: none; /* Ukryj rozwijane menu domyślnie */
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
        border-radius: 5px;
        z-index: 1;
    }

    .dropdown-content a {
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        color: black;
    }

    .dropdown-content.show {
        display: block; /* Pokaż rozwijane menu, gdy przycisk jest aktywowany */
    }
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    border-radius: 5px;
    z-index: 1;
    overflow: hidden;
   
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    transition: background-color 0.3s ease;
    font-size: 12px;
}

.dropdown-content a:hover {background-color: #e1e1e1;}

.dropdown:hover .dropdown-content {display: block;}

.table-container {
    margin: 20px;
}

.add-button {
    padding: 10px 20px;
    background-color: #e1e1e1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.add-button:hover {
    background-color: #d1d1d1;
}

table {
    font-size: 14px;
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

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

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

.table-button {
    padding: 5px 10px;
    margin-right: 5px;
    background-color: #e1e1e1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.table-button:hover {
    background-color: #d1d1d1;
}
.login-container {
    width: 80%;
    max-width: 500px; /* Maksymalna szerokość kontenera */
    margin: 0 auto; /* Centrowanie w poziomie */
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 300px; /* Minimalna wysokość */
    box-sizing: border-box;
    margin-top: 2%;
}

.login-form {
    width: 100%;
    text-align: center;
}
.login-form input, .login-form select {
    width: calc(100% - 20px); /* Szerokość z uwzględnieniem paddingu */
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.login-form h2 {
    margin-bottom: 20px;
    color: #333;
}

.login-form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.login-form button {
    width: 100%;
    padding: 10px;
    background-color: #e1e1e1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-form button:hover {
    background-color: #d1d1d1;
}

.select {
    padding: 10px; /* Dodanie wypełnienia dla wygodniejszego używania */
    margin: 10px 0; /* Dodanie marginesu wokół elementu */
    border-radius: 5px; /* Zaokrąglenie rogów */
    border: 1px solid #ddd; /* Subtelna, solidna obramówka */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */
    background-color: #fff; /* Białe tło */
    font-family: 'Helvetica Neue', sans-serif; /* Czcionka podobna do macOS */
    font-size: 14px; /* Rozmiar czcionki */
    color: #333; /* Kolor tekstu */
    cursor: pointer; /* Kursor wskazujący, że element jest interaktywny */
    transition: border-color 0.3s ease-in-out; /* Animacja zmiany koloru obramówki */
}
.edit-button, .save-button, .cancel-button, .delete-button {
    padding: 5px 10px;
    margin: 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.edit-button {
    background-color: #e1e1e1;
}

.save-button {
    background-color: #008CBA; /* Niebieski */
    color: white;
}

.cancel-button {
    background-color: #f44336; /* Czerwony */
    color: white;
}

.delete-button {
    background-color: #e1e1e1;
}

/* Styl dla komórek tabeli w trybie edycji */
.editing-input {
    background-color: #FFF3CD; /* Jasnożółty tło dla wyróżnienia */
    border: 1px solid #FFECB3; /* Lekka obramówka */
}
.error-message {
    color: red; /* Czerwony kolor tekstu dla komunikatu o błędzie */
    background-color: #ffdada; /* Jasnoczerwone tło dla lepszej widoczności */
    padding: 10px;
    border: 1px solid red;
    border-radius: 5px;
    text-align: center; /* Wyśrodkowanie tekstu */
    width: 80%; /* Szerokość komunikatu */
    margin: 20px auto; /* Centrowanie komunikatu i dodanie marginesu z góry i dołu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */
}
.success-message {
    color: green; /* Zielony kolor tekstu dla komunikatu o sukcesie */
    background-color: #eaffea; /* Jasnozielone tło dla lepszej widoczności */
    padding: 10px;
    border: 1px solid green;
    border-radius: 5px;
    text-align: center; /* Wyśrodkowanie tekstu */
    width: 80%; /* Szerokość komunikatu */
    margin: 20px auto; /* Centrowanie komunikatu i dodanie marginesu z góry i dołu */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Lekki cień dla głębi */
}
/* Dodaj styl dla formularza "Dodaj nową firmę transportową" */
.form-container {
    width: 90%;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    text-align: center;
}

.form-container h2 {
    margin-bottom: 20px;
    color: #333;
}

.form-container input[type="text"] {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}

.form-container .add-button {
    padding: 10px 20px;
    background-color: #e1e1e1;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.form-container .add-button:hover {
    background-color: #d1d1d1;
}

/* Styl dla poszczególnych pól formularza */
.form-container input[type="text"],
.form-container input[type="date"],
.form-container select {
    flex: 1 1 auto; /* Elastyczne rozmieszczenie elementów */
    padding: 10px; /* Padding dla inputów i selectów */
    margin: 5px; /* Margines wokół każdego elementu */
    border: 1px solid #ddd; /* Obramowanie */
    border-radius: 5px; /* Zaokrąglone rogi */
    box-sizing: border-box; /* Box-sizing dla prawidłowego obliczania szerokości */
}
/* Styl dla pola input typu password w form-container */
.form-container input[type="password"] {
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    /* Dodatkowe style dostosowane do pola password */
    background-color: #f9f9f9; /* Tło pola password */
    color: #333; /* Kolor tekstu */
    font-size: 14px; /* Rozmiar czcionki */
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-container input[type="password"]:focus {
    border-color: #008CBA; /* Kolor obramówki po kliknięciu w pole password */
    background-color: #fff; /* Tło pola password po kliknięciu w nie */
}
/* Styl dla znaczników label w form-container */
.form-container label {
    margin-bottom: 5px; /* Dodaj niewielki margines poniżej znaczników label */
    color: #333; /* Kolor tekstu label */
    font-size: 14px; /* Rozmiar czcionki label */
}
.footer {
    background-color: #6a6a6a; /* Kolor tła stopki */
    color: #fff; /* Kolor tekstu w stopce */
    padding: 5px 0; /* Wewnętrzny odstęp góra/dół dla treści stopki */
    text-align: center; /* Wyśrodkowanie tekstu w stopce */
    font-size: 10px; /* Rozmiar czcionki */
    display: flex; /* Użyj Flexbox */
    flex-direction: column; /* Ustaw kierunek na kolumnę */
    margin-top: auto; /* Automatyczny margines górny, aby przesunąć stopkę na dół */

}
/* Statusy konstrukcji */
.status-konstrukcji-w-realizacji {
    background-color: #efb564; /* Jaśniejszy pomarańczowy */
}
.status-konstrukcji-zrealizowane {
    background-color: #76ca16; /* Zielony */
}
.status-konstrukcji-brak-materialow {
    background-color: #f86969; /* Jeszcze jaśniejszy zielony */
}

/* Statusy akcesori */
.status-akcesori-w-realizacji {
    background-color: #efb564; /* Jaśniejszy pomarańczowy */
}
.status-akcesori-zrealizowane {
    background-color: #76ca16; /* Zielony */
}
.status-akcesori-brak-materialow {
    background-color: #f86969; /* Jeszcze jaśniejszy zielony */
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: 10px;
    margin: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 14px;
    color: #333;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 14px;
    color: #333;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 5px 10px;
    background-color: #e1e1e1;
    border: none;
    border-radius: 5px;
    margin-left: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: #d1d1d1;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: #008CBA;
    color: white;
}
#myTable {
    font-size: 14px;
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
}

#myTable th, 
#myTable td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

#myTable th {
    background-color: #e1e1e1; /* Możesz dostosować kolor tła nagłówków */
}
body, html {
    height: 100%; /* Ustaw wysokość na 100% */
    display: flex;
    flex-direction: column;
}

.footer {
    margin-top: auto; /* Automatycznie przesuwa stopkę na dół */
}
.hide-button {
    display: none;
}
/* Stylizacja pól edycji */
.edit-nrZamowienia, .edit-przewidywanaDataRealizacji, .edit-statusKonstrukcji, .edit-statusAkcesori, .edit-firmaTransportowa, .edit-dataWysylki {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
}

/* Stylizacja rozwijanych list (select) */
.edit-rodzajZamowienia, .edit-firmaTransportowa {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
}
.high-priority {
    background-color: #dd2f2f; /* jaskrawoczerwony */
    color: white; /* biały tekst dla lepszej czytelności */
}
.special-order {
    background-color: rgb(255, 115, 0);
}