/* ============================
   GLOBALNE USTAWIENIA
   ============================ */

/* Reset box modelu – padding i border wliczane w szerokość */
* {
  box-sizing: border-box;
}

/* Podstawowy wygląd strony */
body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f4f6f8; /* jasne tło aplikacji */
  color: #222;         /* kolor tekstu */
}

/* ============================
   GÓRNE MENU (LISTA / DODAJ)
   ============================ */

nav {
  position: sticky;     /* zawsze widoczne przy scrollu */
  top: 0;
  z-index: 10;
  display: flex;
  gap: 12px;
  padding: 12px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

nav {
  display: flex;
  padding: 10px;             /* odstęp od krawędzi ekranu */
  gap: 10px;                 /* odstęp między przyciskami */
  box-sizing: border-box;
}

nav button {
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: #111111;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}

/* LISTA – 75% szerokości kontenera minus gap */
nav button:first-child {
  flex: 0 0 calc(75% - 7.5px);  /* 7.5px = połowa gapu */
}

/* DODAJ – 25% szerokości kontenera minus gap */
nav button:last-child {
  flex: 0 0 calc(25% - 7.5px);
}




nav button:hover {
  opacity: 0.9;
}

/* ============================
   FORMULARZ DODAWANIA ELEMENTU
   ============================ */

#addForm {
  margin: 16px;
  padding: 16px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Pola formularza */
#addForm input,
#addForm textarea,
#addForm button {
  padding: 12px;
  font-size: 15px;
  border-radius: 10px;
  border: 1px solid #d0d0d0;
}

/* Pole opisu – możliwość zwiększania */
#addForm textarea {
  resize: vertical;
  min-height: 60px;
}

/* Przycisk dodawania */
#addForm button {
  background: #111;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* ============================
   LISTA ELEMENTÓW (GRID)
   ============================ */

#list {
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

/* ============================
   POJEDYNCZA KARTA ELEMENTU
   ============================ */

.item {
  background: #ffffff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
}

/* Zdjęcie produktu */
.item-image {
  width: 100%;
  height: 180px;
  object-fit: contain;  /* całe zdjęcie widoczne */
  background: #fafafa;
}

/* Checkbox w prawym górnym rogu */
.check {
  background: #ffffff;
  border-radius: 6px;
  padding: 4px;
}

.check input {
  width: 20px;
  height: 20px;
  accent-color: #2ecc71; /* zielony checkmark */
}

/* ============================
   ZAWARTOŚĆ KARTY
   ============================ */

.content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.content h3 {
  margin: 0;
  font-size: 18px;
}

/* Opis – sekcja rozwijana */
.content details summary {
  cursor: pointer;
  font-weight: 600;
  color: #555;
}

/* Tekst opisu (z zachowaniem <br>) */
.content details p {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.5;
}

/* Cena */
.content p {
  margin: 0;
  font-weight: 600;
}

/* ============================
   DOLNY PASEK: SKLEP + MENU
   ============================ */

.bottom {
  margin-top: auto; /* przykleja dół */
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Link do sklepu */
.shop-link {
  flex: 1;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #2ecc71;
  color: #2ecc71;
  font-weight: 700;
  text-decoration: none;
}

.shop-link:hover {
  background: #2ecc71;
  color: #ffffff;
}

/* Przycisk menu (⋮) */
.menu {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: #f0f0f0;
  font-size: 22px;
  cursor: pointer;
}

.menu:hover {
  background: #e0e0e0;
}

/* ============================
   FORMULARZ EDYCJI ELEMENTU
   ============================ */

.edit-section {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #f8f9fa;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edit-section input,
.edit-section textarea,
.edit-section button {
  padding: 10px;
  font-size: 14px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.edit-section textarea {
  resize: vertical;
}

.edit-section button {
  background: #111;
  color: #fff;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

/* ============================
   STOPKA – SUMA KOSZTÓW
   ============================ */

footer {
position: sticky;
bottom: 0;
padding: 14px;
background: #ffffff;
border-top: 1px solid #e0e0e0;
text-align: center;
font-size: 18px;
font-weight: 700;
}


/* ============================
   RESPONSYWNOŚĆ
   ============================ */

@media (max-width: 480px) {
  .item-image {
    height: 150px; /* mniejsze zdjęcie na telefonie */
  }
}