/* ── Zapato — wspólne style panelu adnotacji ──────────────────────────
   Identyfikacja wizualna nawiązuje do sklepu zapato.com.pl.
   Zasada: róż (#E32E6E) tylko tam, gdzie coś znaczy — aktywna zakładka,
   przycisk główny, zaznaczony produkt, pilne etykiety. Reszta neutralna. */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;1,600&display=swap');

:root {
  --roz: #E32E6E;
  --roz-ciemny: #C41F5C;
  --czern: #1A1A1A;
  --biel: #FFFFFF;
  --pasek: #F5F5F5;
  --obramowanie: #E0E0E0;
  --tekst-drugi: #6B6B6B;
  --cien: 0 2px 8px rgba(0,0,0,.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--biel);
  color: var(--czern);
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;                 /* nic nie wystaje w bok na telefonie */
  -webkit-tap-highlight-color: transparent;
}

/* Blokada przewijania tła, gdy otwarta jest pełnoekranowa szufladka (telefon) */
body.bez-scrolla { overflow: hidden; }

button { -webkit-tap-highlight-color: transparent; }

/* ── Typografia pomocnicza ── */
.etykieta {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 600;
  color: var(--tekst-drugi);
}

/* ── Logotyp ──
   Obraz z fallbackiem: dopóki nie ma pliku logo, widać napis „Zapato".
   Gdy /logo.svg lub /logo.png się wczyta, napis chowa się, a obraz pokazuje. */
.logo {
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  color: var(--czern);
  letter-spacing: -0.01em;
}
.logo-wrap { display: inline-flex; align-items: center; text-decoration: none; }
.logo-img { display: none; height: 30px; width: auto; max-width: 180px; }
.logo-wrap.ma-logo .logo-img  { display: block; }
.logo-wrap.ma-logo .logo-text { display: none; }

/* ── Nagłówek ── */
.naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--obramowanie);
  background: var(--biel);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* ── Kontrolki formularza ── */
label { display: block; }

input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--obramowanie);
  border-radius: 0;               /* ostre rogi */
  background: var(--biel);
  color: var(--czern);
  font-family: inherit;
  font-size: 16px;                /* >=16px, by iOS nie zoomował */
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--roz);
}

textarea { resize: vertical; min-height: 72px; }

/* ── Przyciski ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border: 1px solid var(--czern);
  border-radius: 0;
  background: var(--biel);
  color: var(--czern);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: background .12s, color .12s, border-color .12s;
}
.btn:hover { background: var(--pasek); }

.btn-glowny {
  background: var(--roz);
  border-color: var(--roz);
  color: var(--biel);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.btn-glowny:hover { background: var(--roz-ciemny); border-color: var(--roz-ciemny); }

.btn-pelny { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Pasek danych zamówienia ── */
.pasek-zam {
  background: var(--pasek);
  border: 1px solid var(--obramowanie);
  padding: 12px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}
.pasek-zam .poz { display: flex; flex-direction: column; }
.pasek-zam .poz b { font-weight: 600; font-size: 14px; }

/* ── Komunikaty ── */
.komunikat { padding: 12px 14px; font-size: 14px; border: 1px solid transparent; }
.komunikat-ok   { background: #F0FAF3; border-color: #Bfe6cc; color: #1c6b3a; }
.komunikat-blad { background: #FDF0F4; border-color: #F3C2d2; color: var(--roz-ciemny); }
.komunikat-uwaga{ background: #FFF8EC; border-color: #F0DDB0; color: #8a6400; }

.ukryty { display: none !important; }

/* ══════════════════════════════════════════════════════════════════
   PANEL PRACOWNIKA (index.html) — układ pionowy, mobile-first
   ══════════════════════════════════════════════════════════════════ */

.praca {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(24px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.sekcja { display: flex; flex-direction: column; gap: 8px; }

/* Pole numeru + przycisk wczytania */
.wczytaj { display: flex; gap: 8px; }
.wczytaj input { flex: 1; letter-spacing: 0.15em; font-weight: 600; text-align: center; }

/* Lista produktów — wybór jednego */
.produkty { display: flex; flex-direction: column; gap: 8px; }
.produkt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--obramowanie);
  background: var(--biel);
  cursor: pointer;
  border-left: 4px solid transparent;   /* miejsce na różową belkę */
  text-align: left;
  font-family: inherit;
  min-height: 44px;
}
.produkt:hover { background: var(--pasek); }
.produkt.wybrany {
  border-left-color: var(--roz);        /* różowa belka od lewej */
  background: #FDF3F7;
}
.produkt .nazwa { font-weight: 600; font-size: 14px; }
.produkt .meta { font-size: 12px; color: var(--tekst-drugi); }
.produkt .info { flex: 1; }

/* Powody — siatka 2×2 na telefonie */
.powody { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.powod {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--obramowanie);
  background: var(--biel);
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
}
.powod input { width: 20px; height: 20px; accent-color: var(--roz); flex: none; }
.powod.zazn { border-color: var(--roz); background: #FDF3F7; }

/* Dyskretna informacja o liczbie odbiorców powiadomienia */
.info-mail { font-size: 12px; color: var(--tekst-drugi); text-align: center; }

/* Wybór osoby w nagłówku */
.osoba { min-width: 150px; }
.osoba select { padding: 8px 10px; font-size: 14px; }

@media (min-width: 560px) {
  .powody { grid-template-columns: repeat(4, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════
   PANEL ADMINISTRATORA (admin.html)
   Telefon: zakładki na całą szerokość + kartki.
   Komputer (>=900px): nawigacja boczna + tabela.
   ══════════════════════════════════════════════════════════════════ */

.admin-naglowek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  border-bottom: 1px solid var(--obramowanie);
  background: var(--biel);
  position: sticky;
  top: 0;
  z-index: 30;
}

.admin-uklad { display: block; }

/* ── Zakładki / nawigacja ── */
.zakladki {
  display: flex;
  border-bottom: 1px solid var(--obramowanie);
  background: var(--biel);
}
.zakladka {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 12px;
  border: none;
  background: var(--biel);
  color: var(--tekst-drugi);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.zakladka.aktywna { color: var(--czern); border-bottom-color: var(--roz); }
.zakladka .licznik {
  background: var(--pasek);
  color: var(--czern);
  border-radius: 0;
  padding: 1px 7px;
  font-size: 11px;
  min-width: 20px;
  text-align: center;
}
.zakladka.aktywna .licznik { background: var(--roz); color: var(--biel); }

/* ── Pasek filtrów ── */
.filtry {
  display: flex;
  gap: 8px;
  padding: 14px 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--obramowanie);
  background: var(--biel);
}
.filtry .f-numer { width: 120px; flex: none; }
.filtry .f-produkt { flex: 1; min-width: 160px; }
.filtry .f-powod { width: 170px; flex: none; }

/* Telefon: produkt na całą szerokość, numer i powód dzielą drugi rząd po połowie */
@media (max-width: 620px) {
  .filtry .f-produkt { flex: 1 1 100%; order: -1; }
  .filtry .f-numer { flex: 1; width: auto; }
  .filtry .f-powod { flex: 1; width: auto; }
}
.filtry input, .filtry select { font-size: 14px; padding: 10px; }

/* ── Kartki (telefon) ── */
.lista {
  padding: 12px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 12px;
}
.pusto { padding: 40px 16px; text-align: center; color: var(--tekst-drugi); }

.karta {
  border: 1px solid var(--obramowanie);
  background: var(--biel);
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  cursor: pointer;
}
.karta:hover { box-shadow: var(--cien); }
.karta .gora { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.karta .numer { font-size: 22px; font-weight: 600; letter-spacing: 0.02em; }
.karta .produkt-n { font-size: 14px; font-weight: 500; }
.karta .autor { font-size: 12px; color: var(--tekst-drugi); }
.karta .stopka { display: flex; justify-content: flex-end; }

/* ── Etykieta powodu (może być różowa — sygnał pilności) ── */
.powod-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border: 1px solid var(--roz);
  color: var(--roz-ciemny);
  background: #FDF3F7;
  white-space: nowrap;
}
.powod-tag.neutral { border-color: var(--obramowanie); color: var(--tekst-drugi); background: var(--pasek); }
.powod-tag + .powod-tag { margin-left: 4px; }

/* ── Tabela (komputer) — domyślnie schowana ── */
.tabela-wrap { display: none; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th {
  text-align: left;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--tekst-drugi);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--obramowanie);
}
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--obramowanie); vertical-align: middle; }
.tabela tr { cursor: pointer; }
.tabela tbody tr:hover { background: var(--pasek); }
.tabela .kol-numer { font-size: 19px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.tabela .kol-produkt { font-size: 14px; }
.tabela .kol-produkt .meta { font-size: 12px; color: var(--tekst-drugi); }
.tabela .kol-zglosil { font-size: 13px; color: var(--tekst-drugi); white-space: nowrap; }
.tabela .kol-akcja { text-align: right; white-space: nowrap; }

/* przyciski w wierszu/kartce nie mają otwierać szufladki */
.btn-mini { padding: 8px 12px; font-size: 12px; min-height: 38px; }

/* ── Szufladka szczegółów ── */
.przeslona {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  z-index: 40;
}
.przeslona.otwarta { opacity: 1; pointer-events: auto; }

.szufladka {
  position: fixed;
  z-index: 50;
  background: var(--biel);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
  /* Telefon: wjeżdża od dołu, pełny ekran */
  left: 0; right: 0; bottom: 0; top: 0;
  transform: translateY(100%);
}
.szufladka.otwarta { transform: translateY(0); }

.szufladka .sz-naglowek {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid var(--obramowanie);
}
.szufladka .sz-numer { font-size: 24px; font-weight: 600; }
.szufladka .sz-zamknij {
  border: none; background: none; font-size: 26px; line-height: 1;
  cursor: pointer; color: var(--tekst-drugi); padding: 4px 8px;
}
.szufladka .sz-tresc { padding: 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 18px; }
.szufladka .sz-stopka {
  padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--obramowanie);
}

.blok .etykieta { display: block; margin-bottom: 6px; }
.blok .wartosc { font-size: 14px; }
.dane-grid { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 14px; }
.dane-grid .k { color: var(--tekst-drugi); }
.status-znak {
  display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; padding: 3px 8px; border: 1px solid var(--obramowanie); color: var(--tekst-drugi);
}
.status-znak.zamknieta { border-color: #Bfe6cc; color: #1c6b3a; background: #F0FAF3; }

/* ══ KOMPUTER ══ */
@media (min-width: 900px) {
  .admin-uklad { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 57px); }

  .nawigacja { border-right: 1px solid var(--obramowanie); padding: 16px 0; display: block; }
  .zakladki { display: none; } /* na komputerze zamiast zakładek — nawigacja boczna */
  .zakladki-prod { display: flex; } /* zakładki produkcji (Podział) widoczne też na komputerze */

  .naw-poz {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding: 12px 18px;
    border: none; background: none; cursor: pointer;
    font-family: inherit; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.1em; color: var(--tekst-drugi);
    border-left: 3px solid transparent;
  }
  .naw-poz.aktywna { color: var(--czern); border-left-color: var(--roz); background: #FDF3F7; }
  .naw-poz .licznik { background: var(--pasek); padding: 1px 8px; font-size: 11px; }
  .naw-poz.aktywna .licznik { background: var(--roz); color: var(--biel); }

  .lista { display: none; }            /* zamiast kartek — tabela */
  .tabela-wrap { display: block; }

  /* Szufladka wysuwa się z prawej */
  .szufladka {
    left: auto; top: 0; bottom: 0; right: 0;
    width: 440px; max-width: 92vw;
    transform: translateX(100%);
    box-shadow: -4px 0 24px rgba(0,0,0,.12);
  }
  .szufladka.otwarta { transform: translateX(0); }
}

@media (max-width: 899px) {
  .nawigacja { display: none; } /* na telefonie nawigacja boczna schowana */
}

/* ══════════════════════════════════════════════════════════════════
   ROZDZIELACZ (strona główna) — dwa duże kafle modułów
   ══════════════════════════════════════════════════════════════════ */
.rozdzielacz {
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 16px;
  padding-bottom: max(32px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.kafel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 28px 22px;
  border: 1px solid var(--obramowanie);
  background: var(--biel);
  text-decoration: none;
  color: var(--czern);
  border-left: 4px solid transparent;
  min-height: 120px;
  justify-content: center;
  transition: border-color .12s, box-shadow .12s;
}
.kafel:hover { border-left-color: var(--roz); box-shadow: var(--cien); }
.kafel-etk { text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 600; color: var(--tekst-drugi); }
.kafel-nazwa { font-size: 28px; font-weight: 600; letter-spacing: 0.02em; }
.kafel-opis { font-size: 13px; color: var(--tekst-drugi); }

@media (min-width: 700px) {
  .rozdzielacz { grid-template-columns: 1fr 1fr; padding-top: 56px; }
}

/* ── Selektor tożsamości (PRODUKCJA) ── */
.toz-panel { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.toz-pole { display: flex; flex-direction: column; gap: 4px; }
.toz-pole select, .toz-pin { padding: 8px 10px; font-size: 14px; }
.toz-pin { width: 90px; letter-spacing: 0.3em; text-align: center; }
.toz-zalogowany { display: flex; align-items: center; gap: 10px; }
.toz-zalogowany .toz-kto { font-size: 15px; font-weight: 600; }
.toz-zalogowany .etykieta { padding: 2px 8px; border: 1px solid var(--obramowanie); background: var(--pasek); }

/* ══════════════════════════════════════════════════════════════════
   PRODUKCJA — wspólne elementy widoków etapów
   ══════════════════════════════════════════════════════════════════ */

/* Pasek postępu listy (ile pozycji na którym etapie) */
.postep {
  display: flex; flex-direction: column; gap: 6px;
  padding: 12px 16px; border-bottom: 1px solid var(--obramowanie); background: var(--biel);
}
.postep-belka { display: flex; height: 10px; border: 1px solid var(--obramowanie); overflow: hidden; }
.postep-seg { height: 100%; }
.postep-seg.krojownia { background: #D9D9D9; }
.postep-seg.szarfowanie { background: #C4C4C4; }
.postep-seg.rozdzial  { background: #B0B0B0; }
.postep-seg.szwalnia  { background: #8A8A8A; }
.postep-seg.montaz    { background: #5A5A5A; }
.postep-seg.zakonczona{ background: var(--roz); }
.postep-legenda { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--tekst-drugi); }
.postep-legenda b { color: var(--czern); }

/* Nagłówek grupy (model) */
.grupa-model { margin-top: 18px; }
.grupa-naglowek {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 6px 0; border-bottom: 1px solid var(--obramowanie); margin-bottom: 8px;
}
.grupa-naglowek .g-prawa { display: flex; align-items: center; gap: 8px; flex: none; }
.grupa-naglowek .g-model { font-size: 18px; font-weight: 600; letter-spacing: 0.02em; }
.grupa-naglowek .g-ile { font-size: 11px; color: var(--tekst-drugi); text-transform: uppercase; letter-spacing: 0.08em; }

/* Kartka pozycji */
.poz-karta {
  border: 1px solid var(--obramowanie); background: var(--biel);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 10px;
  border-left: 4px solid transparent; margin-bottom: 8px;
}
.poz-karta.zablokowana { border-left-color: var(--roz); background: #FDF3F7; }
.poz-gora { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.poz-model { font-size: 17px; font-weight: 600; }
.poz-dane { font-size: 13px; color: var(--tekst-drugi); }
.poz-dane .rozmiar { color: var(--czern); font-weight: 600; }
.kolor { color: var(--czern); font-weight: 600; }   /* pogrubiony kolor pary — jak rozmiar */
.poz-numer { font-size: 13px; color: var(--tekst-drugi); }
.poz-akcje { display: flex; gap: 8px; flex-wrap: wrap; }
.poz-akcje .btn { flex: 1; min-width: 120px; }

.etk-blok {
  display: inline-block; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; padding: 3px 8px; border: 1px solid var(--roz);
  color: var(--roz-ciemny); background: #FDF3F7; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
   PRODUKCJA — ROZDZIAŁ ZADAŃ (mobile-first)
   ══════════════════════════════════════════════════════════════════ */

/* Przyklejony licznik nierozdysponowanych + sterowanie */
.rozdz-gora {
  position: sticky; top: 0; z-index: 20;
  background: var(--biel); border-bottom: 1px solid var(--obramowanie);
  padding: 10px 16px;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 8px;
}
.rozdz-licznik { display: flex; align-items: baseline; gap: 8px; }
.rozdz-licznik b { font-size: 22px; font-weight: 600; }
.rozdz-licznik span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tekst-drugi); }

.rozdz-sterowanie { display: flex; gap: 8px; align-items: center; }
.rozdz-sterowanie select { padding: 8px 10px; font-size: 14px; flex: 1; }
.btn-filtry { flex: none; }
.filtry-znacznik { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; background: var(--roz); color: #fff; font-size: 11px; }

/* Aktywne filtry jako etykiety */
.aktywne-filtry { display: flex; flex-wrap: wrap; gap: 6px; }
.filtr-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 8px; border: 1px solid var(--roz);
  color: var(--roz-ciemny); background: #FDF3F7;
}
.filtr-chip button { border: none; background: none; cursor: pointer; color: inherit; font-size: 14px; line-height: 1; padding: 0; }

/* Rozwijany panel filtrów */
.panel-filtry {
  border-bottom: 1px solid var(--obramowanie); background: var(--pasek);
  padding: 12px 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.panel-filtry .pf-pole { display: flex; flex-direction: column; gap: 4px; }
.panel-filtry .pf-pole.pf-szer { grid-column: 1 / -1; }
.panel-filtry input, .panel-filtry select { padding: 9px 10px; font-size: 14px; }
.panel-filtry .pf-akcje { grid-column: 1 / -1; display: flex; gap: 8px; }

/* Kartka pozycji z polem zaznaczenia */
.rozdz-karta {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid var(--obramowanie); background: var(--biel); margin-bottom: 8px;
}
.rozdz-zazn {
  flex: none; width: 52px; min-height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--obramowanie); cursor: pointer;
}
.rozdz-zazn input { width: 22px; height: 22px; accent-color: var(--roz); }
.rozdz-karta.wybrana { background: #FDF3F7; }
.rozdz-karta.wybrana .rozdz-zazn { border-right-color: var(--roz); }
.rozdz-tresc { flex: 1; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rozdz-tresc .r-model { font-size: 20px; font-weight: 600; letter-spacing: 0.02em; }  /* +2px (panel Sebastiana/Podział) */
.rozdz-tresc .r-meta { font-size: 15px; color: var(--tekst-drugi); }                   /* +2px: kolor + rozmiar + numer */
.rozdz-tresc .r-meta .rozmiar { color: var(--czern); font-weight: 600; }

/* Nagłówek grupy modelu z „zaznacz cały model" */
.rozdz-grupa-nag {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 0 6px; border-bottom: 1px solid var(--obramowanie); margin: 16px 0 8px;
}
.rozdz-grupa-nag .g-model { font-size: 17px; font-weight: 600; }
.rozdz-grupa-nag .g-prawa { display: flex; align-items: center; gap: 10px; }
.rozdz-grupa-nag .g-ile { font-size: 11px; color: var(--tekst-drugi); text-transform: uppercase; letter-spacing: 0.08em; }

/* Pasek akcji przyklejony do dołu (widoczny po zaznaczeniu) */
.pasek-akcji {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--czern); color: #fff;
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  transform: translateY(120%); transition: transform .2s;
}
.pasek-akcji.widoczny { transform: translateY(0); }
.pasek-akcji .pa-licznik { font-weight: 600; white-space: nowrap; }
.pasek-akcji select { flex: 1; min-width: 120px; padding: 10px; font-size: 15px; border: none; }
.pasek-akcji .btn { flex: none; }

/* Podkładka, by pasek akcji nie zasłaniał ostatnich kartek */
.rozdz-stopka-luz { height: 90px; }

/* Toast potwierdzenia z cofnięciem */
.toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%);
  background: #1A1A1A; color: #fff; padding: 12px 16px;
  display: flex; align-items: center; gap: 14px; z-index: 50; max-width: 92vw;
  box-shadow: var(--cien);
}
.toast button { border: 1px solid #fff; background: none; color: #fff; padding: 6px 12px; cursor: pointer; font-family: inherit; font-weight: 600; }

@media (min-width: 900px) {
  .panel-filtry { grid-template-columns: repeat(4, 1fr); max-width: 900px; }
  .pasek-akcji { justify-content: center; }
  .pasek-akcji select { flex: none; min-width: 220px; }
}

/* ══════════════════════════════════════════════════════════════════
   PRODUKCJA — PANEL ADMINISTRACYJNY (desktop-first, mobile → kartki)
   ══════════════════════════════════════════════════════════════════ */
.ap-pasek {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--obramowanie); background: var(--biel);
}
.ap-widok { display: flex; border: 1px solid var(--obramowanie); }
.ap-widok button {
  border: none; background: var(--biel); padding: 9px 14px; cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tekst-drugi);
}
.ap-widok button.aktywny { background: var(--roz); color: #fff; }

.ap-filtry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--obramowanie); background: var(--pasek); }
.ap-filtry input, .ap-filtry select { padding: 8px 10px; font-size: 14px; }
.ap-filtry .fpole-numer { width: 110px; }
.ap-filtry .fpole-model { width: 120px; }
.ap-filtry label.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.ap-filtry label.check input { width: 18px; height: 18px; accent-color: var(--roz); }

.ap-tresc { padding: 0 16px 24px; }

/* Wyróżnienie: zatrzymana + wymagany kontakt */
tr.pilna, .karta.pilna { background: #FDECF2 !important; }
.ap-znak { display:inline-block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; padding:2px 7px; white-space:nowrap; }
.ap-znak.zatrzymana { border:1px solid var(--roz); color:var(--roz-ciemny); background:#FDF3F7; }
.ap-znak.kontakt { border:1px solid var(--roz-ciemny); color:#fff; background:var(--roz); }
.ap-znak.zamknieta { border:1px solid #Bfe6cc; color:#1c6b3a; background:#F0FAF3; }
.ap-znak.neutral { border:1px solid var(--obramowanie); color:var(--tekst-drugi); }

.ap-kontakt-cb { display:inline-flex; align-items:center; gap:5px; font-size:11px; }
.ap-kontakt-cb input { width:16px; height:16px; accent-color:var(--roz); }

/* Grupa zamówienia (widok „po zamówieniach") */
.zam-grupa { border:1px solid var(--obramowanie); margin:12px 0; }
.zam-naglowek { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; background:var(--pasek); border-bottom:1px solid var(--obramowanie); }
.zam-naglowek .z-numer { font-size:20px; font-weight:600; }
.zam-naglowek .z-ile { font-size:11px; color:var(--tekst-drugi); text-transform:uppercase; letter-spacing:0.08em; }
.zam-poz { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 14px; border-bottom:1px solid var(--obramowanie); cursor:pointer; }
.zam-poz:last-child { border-bottom:none; }
.zam-poz:hover { background:var(--pasek); }
.zam-poz .zp-model { font-weight:600; }
.zam-poz .zp-meta { font-size:12px; color:var(--tekst-drugi); }

/* Historia w szufladce */
.hist { display:flex; flex-direction:column; gap:0; }
.hist-wpis { display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--obramowanie); font-size:13px; }
.hist-wpis .h-rodzaj { font-weight:600; white-space:nowrap; }
.hist-wpis .h-data { color:var(--tekst-drugi); font-size:11px; white-space:nowrap; }

/* Nagłówek grupy daty zlecenia (widoki produkcji) */
.grupa-data {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin: 22px 0 6px; padding: 8px 12px;
  background: var(--czern); color: #fff;
}
.grupa-data:first-child { margin-top: 8px; }
.grupa-data .gd-ile { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; opacity: .8; }
.grupa-data > span:first-child { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.grupa-data-klik { cursor: pointer; user-select: none; }
.grupa-data-klik:hover { background: #2a2a2a; }
.grupa-data .zw-strzalka { display: inline-block; width: 1em; font-size: 11px; opacity: .85; }
.grupa-data .gd-data { font-weight: 400; text-transform: none; letter-spacing: 0; opacity: .7; font-size: 11px; }

/* Menu „Inne" w kartce szwalni */
.poz-inne {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 8px; padding: 8px; border: 1px dashed var(--obramowanie); background: var(--pasek);
}
.poz-inne .btn { width: 100%; justify-content: flex-start; }

/* Pasek raportu (szwalnia/admin) */
.raport-kontrolki { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.raport-kontrolki select, .raport-kontrolki input { padding: 8px 10px; font-size: 14px; }

.postep-seg.podzial_cholewek { background: #727272; }

/* Przyciski koszyków w pasku akcji */
.koszyki-btny { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.koszyki-btny .btn { flex: 1; min-width: 64px; }

.poz-atom { display: block; font-size: 11px; color: var(--tekst-drugi); }

/* Panel „Cofnij pomyłkę" */
.cof-lista { border: 1px dashed var(--obramowanie); background: var(--pasek); padding: 8px; margin-top: 6px; }
.cof-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--obramowanie); font-size: 13px; }
.cof-row:last-child { border-bottom: none; }
.cof-licznik { background: var(--roz); color: #fff; padding: 0 6px; font-size: 11px; }

/* Komentarz na karcie (WERSALIKI, czerwony) + flaga PILNE */
.karta-uwaga { color: #D40000; font-weight: 700; text-transform: uppercase; font-size: 12px; letter-spacing: 0.03em; margin-left: 8px; white-space: nowrap; }
.pilne-flaga { display: inline-block; background: #FF6A00; color: #fff; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; padding: 2px 8px; margin-left: 8px; }
.grupa-pilne { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 8px 0 6px; padding: 8px 12px; background: #D40000; color: #fff; }
.grupa-pilne > span:first-child { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.grupa-pilne .gd-ile { font-size: 11px; opacity: .85; text-transform: uppercase; letter-spacing: 0.06em; }

/* Wiersz rozmiaru w „Rozdzielone Wykroje" — cofanie pojedynczego rozmiaru */
.rozdz-rozmiar-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 6px 12px 6px 22px; border-bottom: 1px solid var(--obramowanie); background: var(--biel);
}
.rozdz-rozmiar-row .rr-etk { font-size: 13px; }
.rozdz-rozmiar-row .btn-mini { border-color: var(--roz); color: var(--roz-ciemny); }

/* Przycisk usuwania modelu (Renata / Sebastian / Kasia S.) */
.btn-mini.usun-model { border-color: #B00020; color: #B00020; }
.btn-mini.usun-model:hover { background: #B00020; color: #fff; }

/* ── Widok cholewek „Wg kodu" (Do rozdzielenia) ── */
.ch-widok { width: auto; flex: none; }
.ch-widok button { flex: 0 0 auto; padding: 8px 14px; }
.ch-kod-lista { display: flex; flex-direction: column; }
.ch-kod-row {
  display: grid; grid-template-columns: 36px minmax(0,1.4fr) auto minmax(0,1.4fr);
  align-items: center; gap: 8px; padding: 9px 6px; border-bottom: 1px solid var(--obramowanie);
}
.ch-kod-row.wybrana { background: #FDF3F7; }
.ch-kod-head { border-bottom: 2px solid var(--czern); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tekst-drugi); }
.ch-kod-row .chk-kod { font-weight: 600; overflow-wrap: anywhere; }
.ch-kod-head .chk-kod { font-weight: 600; }
.ch-kod-row .chk-ile { font-size: 12px; color: var(--tekst-drugi); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.06em; }
.ch-kod-row .chk-uwaga { color: var(--roz-ciemny); font-weight: 600; text-transform: uppercase; font-size: 12px; overflow-wrap: anywhere; }
.ch-kod-head .chk-uwaga, .ch-kod-head .chk-ile { color: var(--tekst-drugi); font-weight: 600; }
.ch-kod-row.pilna .chk-kod::before { content: "⚠ "; color: var(--roz); }

/* ── Krojownia: nagłówek listy (przycisk „Wykrój całość") + edycja pozycji ── */
.grupa-data .gd-prawa { display: flex; align-items: center; gap: 8px; flex: none; }
.grupa-data .kroj-lista { min-height: 30px; padding: 5px 12px; background: var(--biel); color: var(--czern); border-color: var(--biel); }
.grupa-data .kroj-lista:hover { background: var(--roz); color: #fff; border-color: var(--roz); }
.poz-akcje .poz-edytuj { border-color: var(--tekst-drugi); color: var(--tekst-drugi); }
.poz-akcje .poz-usun { border-color: #B00020; color: #B00020; }
.poz-akcje .poz-usun:hover { background: #B00020; color: #fff; }

/* ── Pasek z nazwą bieżącego modułu (w nagłówku, zawsze widoczny) ── */
.naglowek.ma-modul, .admin-naglowek.ma-modul {
  flex-direction: column; align-items: stretch; gap: 0; padding-bottom: 0;
}
.naglowek.ma-modul .naglowek-gora, .admin-naglowek.ma-modul .naglowek-gora {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px;
}
.modul-nazwa {
  text-align: center; background: var(--roz); color: #fff;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; font-size: 14px;
  padding: 7px 10px; margin: 0 -16px;
}

/* Pasek z licznikiem pod podzakładkami CHOLEWKI (czytelne nazwy zakładek) */
.ch-licznik-pas { font-size: 12px; color: var(--tekst-drugi); padding: 2px 2px 10px; }
.ch-licznik-pas b { color: var(--czern); font-weight: 700; }

/* Zwijalny nagłówek listy w widoku admina Szwalni (jasny) */
.lista-zwijak { cursor: pointer; user-select: none; display: flex; justify-content: space-between; }
.lista-zwijak:hover { background: var(--pasek); }
.lista-zwijak .zw-strzalka { display: inline-block; width: 1em; font-size: 11px; opacity: .7; }

/* Podział — pasek wyboru zespołu (Krok 1, przed zaznaczaniem wykroi) */
.rozdz-zespol-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; background: #FDF3F7; border-top: 1px solid var(--obramowanie); border-bottom: 2px solid var(--roz);
}
.rozdz-zespol-bar select { width: auto; min-width: 150px; flex: 0 0 auto; font-weight: 600; padding: 10px 12px; }
.rozdz-zespol-bar .etykieta { color: var(--roz-ciemny); }
.rozdz-zespol-bar .rzb-hint { font-size: 11px; color: var(--tekst-drugi); margin-left: auto; }

/* Panel „Historia" (dziennik zdarzeń, tylko odczyt) */
.hist-lista { max-height: 420px; overflow: auto; border: 1px solid var(--obramowanie); margin-top: 6px; }
.hist-lista .tabela { font-size: 13px; }