:root {
     --zer: #166f00;
     --pri: #1c9100;
     --sec: #27c700;
     --ter: #70fd4d;
     --blk: #1e1e1e;
     --drk: #b2b2b2;
     --gry: #ecf0f3;
     --wht: #fbfdfe;
}

html,
body {
     width: 100vw;
     height: 100vh;
     padding: 0;
     margin: 0;
     font-family: "Lato", sans-serif;
     font-size: 24px;
     font-weight: 400;
     scroll-behavior: smooth;
     background-color: var(--wht);
     overflow-x: hidden;
}

/* Reset box-sizing */
* {
     margin: 0;
     padding: 0;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

/* Logo na stronie głównej */
.logo-container {
     width: 100%;
     text-align: center;
     margin: 60px 0;
}

.logo-container button {
     border: none;
     outline: none;
     background-color: transparent;
     padding: 0;
     margin: 0;
     cursor: pointer;
}

.logo-container img {
     height: 50px;
}

/* Główna zawartość */
.main-content {
     width: 50%;
     margin: 0 auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 20px;
}

.client-select {
     padding: 15px 25px;
     font-family: "Lato", sans-serif;
     font-size: 24px;
     font-weight: 400;
     min-width: 300px;
     cursor: pointer;
}

.client-select:focus {
     outline: none;
     border-color: blue;
}

/* Przyciski */
.btn {
     padding: 20px 50px;
     border: none;
     outline: none;
     font-family: "Lato", sans-serif;
     font-size: 24px;
     font-weight: 700;
     color: white;
     background-color: rebeccapurple;
     text-transform: uppercase;
     cursor: pointer;
     -webkit-transition: background-color 0.3s ease;
     transition: background-color 0.3s ease;
}

.btn:hover {
     background-color: #8c48d0;
}

.footer-buttons {
     width: 100%;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     gap: 20px;
     -ms-flex-wrap: wrap;
     flex-wrap: wrap;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     margin-top: 200px;
}

.footer-btn {
     padding: 15px 30px;
     border: none;
     outline: none;
     font-family: "Lato", sans-serif;
     font-size: 20px;
     font-weight: 700;
     color: white;
     background-color: dodgerblue;
     text-transform: uppercase;
     cursor: pointer;
     -webkit-transition: background-color 0.3s ease;
     transition: background-color 0.3s ease;
}

.footer-btn:hover {
     background-color: #5caeff;
}

/* Kontener całej sekcji tabeli */
.tabela-container {
     width: 95%;
     margin: 0 auto;
     height: 100vh;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
}

/* Nagłówek tabeli */
.tabela-header {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     padding: 10px 0 20px 0;
     z-index: 10;
     font-family: "Lato", sans-serif;
     font-size: 30px;
     font-weight: 900;
     color: rebeccapurple;
     background-color: var(--wht);
}

.tabela-header .logo button {
     border: none;
     outline: none;
     background-color: transparent;
     padding: 0;
     margin: 0;
     cursor: pointer;
}

.tabela-header .logo img {
     height: 50px;
}

.prawo {
     text-align: right;
     -webkit-box-flex: 1;
     -ms-flex-positive: 1;
     flex-grow: 1;
     padding-right: 20px;
}

/* Kontener przewijalnego tbody */
.tabela-scroll {
     -webkit-box-flex: 1;
     -ms-flex: 1 1 auto;
     flex: 1 1 auto;
     overflow-y: auto;
}

/* Tabela */
.towary {
     width: 100%;
     border-collapse: collapse;
     table-layout: fixed;
}

/* Nagłówek tabeli */
.towary thead {
     position: -webkit-sticky;
     position: sticky;
     top: 0;
     background-color: #f2f2f2;
     z-index: 5;
}

/* Komórki tabeli */
.towary th,
.towary td {
     border: 1px solid #000;
     padding: 12px 8px;
     vertical-align: middle;
     font-size: 24px;
}

/* Szerokości kolumn */
.col-nr {
     width: 14%;
}

.col-nazwa {
     width: 50%;
}

.col-cena {
     width: 16%;
}

.col-ilosc {
     width: 20%;
}

/* Wyrównanie kolumn */
.towary th:nth-child(1),
.towary td:nth-child(1) {
     text-align: center;
}

.towary th:nth-child(2),
.towary td:nth-child(2) {
     text-align: left;
}

.towary th:nth-child(3),
.towary td:nth-child(3) {
     text-align: right;
}

.towary th:nth-child(4),
.towary td:nth-child(4) {
     text-align: right;
}

/* Komórka z nazwą produktu - KLIKALNA DLA ZDJĘCIA */
.towary td.nazwa {
     cursor: pointer;
     -webkit-transition: background-color 0.2s ease;
     transition: background-color 0.2s ease;
}

.towary td.nazwa:hover {
     background-color: rgba(0, 0, 0, 0.05);
}

/* Input w komórce ilości */
.input-ilosc {
     width: 100%;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     text-align: right;
     padding: 6px 6px 6px 0;
     font-family: "Lato", sans-serif;
     font-size: 24px;
     font-weight: 400;
     border: 1px solid #ccc;
     border-radius: 3px;
}

.input-ilosc:focus {
     outline: none;
     border-color: var(--pri);
}

/* Stopka tabeli */
.tabela-footer {
     padding: 40px 0 10px 0;
     text-align: right;
     background-color: var(--wht);
     position: -webkit-sticky;
     position: sticky;
     bottom: 0;
}

.btn-podsumowanie {
     padding: 20px 40px;
     font-family: "Lato", sans-serif;
     font-size: 20px;
     font-weight: 700;
     text-transform: uppercase;
     background-color: forestgreen;
     color: #ffffff;
     border: none;
     cursor: pointer;
     -webkit-transition: background-color 0.3s ease;
     transition: background-color 0.3s ease;
}

.btn-podsumowanie:hover {
     background-color: #23b223;
}

/* MODAL ZDJĘCIA - KLUCZOWE POPRAWKI */
#overlay {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.9);
     opacity: 0;
     -webkit-transition: opacity 0.3s ease;
     transition: opacity 0.3s ease;
     z-index: 999;
     cursor: pointer;
}

#overlay.show {
     opacity: 1;
     display: block;
}

/* Modal dla zdjęć */
#modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     -webkit-box-pack: center;
     -ms-flex-pack: center;
     justify-content: center;
     -webkit-box-align: center;
     -ms-flex-align: center;
     align-items: center;
     opacity: 0;
     -webkit-transition: opacity 0.3s ease;
     transition: opacity 0.3s ease;
     pointer-events: none;
     /* Pozwala na kliknięcia przez modal */
}

#modal.show {
     opacity: 1;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     pointer-events: auto;
     /* Włącz interakcję po pokazaniu */
}

/* Zdjęcie w modal - KLIKALNE WSZĘDZIE */
#modal-img {
     max-width: 95%;
     max-height: 95%;
     -o-object-fit: contain;
     object-fit: contain;
     cursor: pointer;
     border: 3px solid white;
     border-radius: 5px;
     -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
     box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
     -webkit-transform: scale(0.9);
     transform: scale(0.9);
     -webkit-transition: -webkit-transform 0.3s ease;
     transition: -webkit-transform 0.3s ease;
     transition: transform 0.3s ease;
     transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}

#modal.show #modal-img {
     -webkit-transform: scale(1);
     transform: scale(1);
}

/* MODAL PODSUMOWANIA */
#overlay-podsumowanie {
     display: none;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.7);
     opacity: 0;
     -webkit-transition: opacity 0.3s ease;
     transition: opacity 0.3s ease;
     z-index: 999;
}

#overlay-podsumowanie.show {
     opacity: 1;
     display: block;
}

#modal-podsumowanie {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 50%;
     top: 50%;
     -webkit-transform: translate(-50%, -50%) scale(0.9);
     transform: translate(-50%, -50%) scale(0.9);
     width: 90%;
     height: 80%;
     background-color: #fff;
     -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     opacity: 0;
     -webkit-transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
     transition: opacity 0.3s ease, -webkit-transform 0.3s ease;
     transition: opacity 0.3s ease, transform 0.3s ease;
     transition: opacity 0.3s ease, transform 0.3s ease, -webkit-transform 0.3s ease;
}

#modal-podsumowanie.show {
     opacity: 1;
     -webkit-transform: translate(-50%, -50%) scale(1);
     transform: translate(-50%, -50%) scale(1);
     display: block;
}

.modal-content-wrapper {
     width: 100%;
     height: 100%;
     background-color: #fff;
     overflow-y: auto;
     padding: 20px;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
}

.modal-tytul {
     font-family: "Lato", sans-serif;
     font-size: 30px;
     font-weight: 900;
     color: rebeccapurple;
     margin-bottom: 20px;
     text-align: right;
     padding: 10px 0;
     border-bottom: 2px solid #eee;
}

/* Tabela w modalu podsumowania */
#modal-tabela {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
     font-size: 24px;
}

#modal-tabela th,
#modal-tabela td {
     border: 1px solid #000;
     padding: 8px 10px;
     vertical-align: top;
}

#modal-tabela th {
     background-color: #f5f5f5;
     font-weight: 700;
}

#modal-tabela th:nth-child(1),
#modal-tabela td:nth-child(1) {
     text-align: center;
     width: 10%;
}

#modal-tabela th:nth-child(2),
#modal-tabela td:nth-child(2) {
     text-align: left;
     width: 40%;
}

#modal-tabela th:nth-child(3),
#modal-tabela td:nth-child(3) {
     text-align: right;
     width: 15%;
}

#modal-tabela th:nth-child(4),
#modal-tabela td:nth-child(4) {
     text-align: right;
     width: 15%;
}

#modal-tabela th:nth-child(5),
#modal-tabela td:nth-child(5) {
     text-align: right;
     width: 20%;
}

/* Edytowalne komórki */
[contenteditable="true"] {
     outline: 1px solid #ddd;
     min-height: 1.5em;
     cursor: text;
     -webkit-transition: background-color 0.2s ease;
     transition: background-color 0.2s ease;
}

[contenteditable="true"]:focus {
     background-color: #fffde7;
     outline: 2px solid var(--sec);
}

.modal-footer {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-pack: justify;
     -ms-flex-pack: justify;
     justify-content: space-between;
     gap: 15px;
     margin-top: 30px;
     padding-top: 20px;
     border-top: 2px solid #eee;
}

.modal-footer button {
     padding: 15px 35px;
     font-family: "Lato", sans-serif;
     font-size: 18px;
     font-weight: 700;
     text-transform: uppercase;
     color: #ffffff;
     border: none;
     cursor: pointer;
     -webkit-transition: all 0.3s ease;
     transition: all 0.3s ease;
     min-width: 180px;
}

.modal-footer .btn-wroc {
     background-color: #d32f2f;
}

.modal-footer .btn-wyslij-pdf {
     background-color: forestgreen;
}

.modal-footer .btn-wroc:hover {
     background-color: #f44336;
     -webkit-transform: translateY(-2px);
     transform: translateY(-2px);
}

.modal-footer .btn-wyslij-pdf:hover {
     background-color: #23b223;
     -webkit-transform: translateY(-2px);
     transform: translateY(-2px);
}

.wiersz-niestandardowy {
     background-color: #fff8e1;
     font-style: italic;
}

.wiersz-niestandardowy td {
     background-color: #fff8e1 !important;
}

h1 {
     color: dodgerblue;
     font-weight: 900;
     text-transform: uppercase;
}

.main-content-adding form {
     width: 50%;
     margin: 0 auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 20px;
}

.main-content-adding input[type="text"],
.main-content-adding input[type="email"],
.main-content-adding input[type="number"],
.main-content-adding input[type="file"],
.main-content-adding select {
     width: 100%;
     font-family: "Lato", sans-serif;
     font-size: 24px;
     font-weight: 400;
     padding: 10px;
}

.main-content-adding button[type="submit"] {
     font-family: "Lato", sans-serif;
     font-size: 20px;
     font-weight: 700;
     text-transform: uppercase;
     padding: 20px;
     border: none;
     outline: none;
     background-color: forestgreen;
     color: #ffffff;
     cursor: pointer;
}

.main-content-adding button[type="submit"]:hover {
     background-color: #2eb72e;
     -webkit-transition: 0.3s all;
     transition: 0.3s all;
}

.main-category-adding form {
     width: 80%;
     margin: 0 auto;
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
     -webkit-box-orient: vertical;
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
     gap: 20px;
}

.main-category-adding form table {
     width: 100%;
     border-collapse: collapse;
     margin-top: 20px;
     font-size: 24px;
}

.main-category-adding form table th,
.main-category-adding form table td {
     border: 1px solid #000;
     padding: 8px 10px;
     vertical-align: top;
}

.main-category-adding form table th {
     background-color: #f5f5f5;
     font-weight: 700;
}

.main-category-adding form table th:nth-child(1),
.main-category-adding form table td:nth-child(1) {
     text-align: center;
     width: 20%;
}

.main-category-adding form table th:nth-child(2),
.main-category-adding form table td:nth-child(2) {
     text-align: left;
     width: 55%;
}

.main-category-adding form table th:nth-child(3),
.main-category-adding form table td:nth-child(3) {
     text-align: right;
     width: 25%;
}

/* Responsywność */
@media (max-width: 1200px) {

     html,
     body {
          font-size: 20px;
     }

     .main-content {
          width: 70%;
     }

     .towary th,
     .towary td {
          padding: 8px 6px;
     }
}

@media (max-width: 768px) {

     html,
     body {
          font-size: 18px;
     }

     .main-content {
          width: 90%;
     }

     .tabela-container {
          width: 98%;
     }

     .towary th,
     .towary td {
          padding: 6px 4px;
          font-size: 16px;
     }

     .input-ilosc {
          font-size: 18px;
     }

     .modal-footer {
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
     }

     .modal-footer button {
          width: 100%;
     }
}