/* =====================================================================
   Panel sprzedawcy abc24.pl. Osobny arkusz od sklep.css - panel widzi
   tylko wlasciciel, wiec nie obowiazuje go wyglad ani style jego sklepu
   (sprzedawcy wstrzykuja wlasne <style>, ktore rozjechaloby panel).
   ===================================================================== */
:root {
  --tlo: #f5f6f8; --plyta: #fff; --tekst: #1c1f26; --slaby: #5b6472;
  --obwodka: #e3e6ec; --akcent: #2b4c8c; --akcent-ciemny: #1e3767; --akcent-jasny: #eaf0fb;
  --ok: #1f7a44; --ok-tlo: #e8f5ed; --blad: #b3261e; --blad-tlo: #fdecea;
  --uwaga: #8a5a00; --uwaga-tlo: #fdf3e2; --r: 8px;
  --grupa: #8a5a2e;
}

/* Motyw ciemny wylacznie z jawnego wyboru w przelaczniku - tak samo jak
   w sklep.css; bez fallbacku na prefers-color-scheme, zeby sprzedawca mial
   jeden, przewidywalny stan po obu stronach (sklep i panel). */
:root[data-motyw="ciemny"] {
  --tlo: #1a1c25; --plyta: #242631; --tekst: #e7e9ee; --slaby: #a3a9b8;
  --obwodka: #343747; --akcent: #8fb2ee; --akcent-ciemny: #1e2536; --akcent-jasny: #2b3448;
  --ok: #63c08c; --ok-tlo: #1e3428; --blad: #f19790; --blad-tlo: #3a2321;
  --uwaga: #e0b467; --uwaga-tlo: #382c17;
  --grupa: #d09a63;
}

/* Skala czcionki A-/A+ (--skala ustawia layout z ciasteczka, potem JS). */
html { font-size: calc(100% * var(--skala, 1)); }
* { box-sizing: border-box; }
body.panel {
  margin: 0; background: var(--tlo); color: var(--tekst);
  font: .875rem/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.panel a { color: var(--akcent); text-decoration: none; }
.panel a:hover { text-decoration: underline; }

.p-top { background: var(--akcent-ciemny); color: #fff; }
.p-top__in { max-width: 1200px; margin: 0 auto; padding: 0 20px; height: 56px; display: flex; align-items: center; gap: 16px; }
.p-top__logo { font-weight: 700; }
.p-top__sklep { font-size: 0.8125rem; opacity: .85; padding-left: 16px; border-left: 1px solid rgba(255,255,255,.25); }
.p-top__prawo { margin-left: auto; display: flex; gap: 14px; font-size: 0.8125rem; }
.p-top a { color: #fff; opacity: .9; }

.p-body { max-width: 1200px; margin: 0 auto; padding: 22px 20px 60px; }
.p-uklad { display: grid; grid-template-columns: 210px 1fr; gap: 22px; align-items: start; }
.p-uklad--samo { grid-template-columns: 1fr; }

/* ---- boczne menu kategorii przy liscie produktow w panelu (2026-09-06) -
   user zauwazyl brak: oryginalny produkty.mod pokazywal liste kategorii z
   licznikiem produktow ZAWSZE obok listy produktow (procedura EDYCJA_KATEGORIE),
   nie tylko jako pozycja w rozwijanym <select>. Osobny layout TYLKO dla tej
   strony, nie globalny .p-uklad (ten byl dla starego bocznego menu nawigacji,
   teraz usunietego na rzecz gornego paska - patrz layouts/panel.php). */
.p-produkty-uklad { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; }
.p-kat-menu { background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r); padding: 10px; }
.p-kat-menu h2 { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grupa); margin: 0 0 6px; padding: 0 6px; font-weight: 700; }
.p-kat-menu a { display: block; padding: 6px 8px; border-radius: 5px; color: var(--tekst); font-size: 0.8125rem; }
.p-kat-menu a:hover { background: var(--tlo); text-decoration: none; }
.p-kat-menu a.aktywna { background: var(--akcent-jasny); font-weight: 600; }
.p-kat-menu .licznik { color: var(--slaby); font-size: .85em; }
@media (max-width: 900px) { .p-produkty-uklad { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .p-uklad { grid-template-columns: 1fr; } }

.p-nav { background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r); padding: 8px; position: sticky; top: 20px; }
.p-nav a { display: block; padding: 9px 12px; border-radius: 5px; color: var(--tekst); font-size: 0.84375rem; }
.p-nav a:hover { background: var(--tlo); text-decoration: none; }
.p-nav__grupa { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grupa); padding: 12px 12px 6px; font-weight: 700; }

/* ---- gorne poziome menu (2026-09-06: user chcial nawigacje 1:1 jak w
   oryginalnym panelu ASP - jeden poziomy pasek, dokladna kolejnosc pozycji).
   "Dodatki" NIE jest rozwijanym menu (user poprawil 2026-09-06: "menu dodatki
   sie rozwija a nie jest zrealizowane jak w starej wersji") - w oryginale
   dodatki.mod mial WLASNY, DRUGI STALY PASEK (menu_1_ON/OFF, ta sama
   stylistyka co glowny pasek), widoczny na kazdej stronie tej sekcji.
   .p-podmenu-pasek nizej odtwarza dokladnie to zachowanie. */
.p-menu-pasek { background: var(--plyta); border-bottom: 1px solid var(--obwodka); }
.p-menu { max-width: 1200px; margin: 0 auto; padding: 0 12px; display: flex;
  align-items: stretch; flex-wrap: wrap; }
.p-menu a {
  display: block; padding: 12px 14px; font-size: 0.84375rem; color: var(--tekst);
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.p-menu a:hover { text-decoration: none; background: var(--tlo); }
.p-menu a.aktywny { border-bottom-color: var(--akcent); font-weight: 600; }

.p-podmenu-pasek { background: var(--tlo); border-bottom: 1px solid var(--obwodka); }
.p-podmenu-pasek .p-menu a { padding: 8px 14px; font-size: 0.78125rem; border-bottom-width: 2px; }
.p-podmenu-pasek .p-menu a.aktywny { color: var(--akcent); }

@media (max-width: 900px) {
  .p-menu { padding: 4px 8px; }
  .p-menu a { padding: 9px 10px; font-size: 0.8125rem; }
  .p-podmenu-pasek .p-menu a { padding: 7px 10px; font-size: 0.75rem; }
}

h1 { font-size: 1.375rem; margin: 0 0 4px; }
h2 { font-size: 1rem; margin: 0 0 10px; }
.karta { background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r); padding: 16px 18px; margin: 0 0 18px; }
/* User 2026-09-23 (/panel/grafiki): "wysrodkuj calosc sekcji wgraj
   grafike", potem "ale pole na cala szerokosc layoutu" - karta zostaje
   PELNEJ szerokosci (jak kazda inna .karta), tylko zawartosc (przycisk
   Wybierz plik, podpowiedz) jest wysrodkowana W JEJ WNETRZU. Wariant
   TYLKO dla tego jednego, samodzielnego formularza - generyczna ".karta"
   (uzywana wszedzie w panelu) zostaje nietknieta. */
.karta--wgraj-grafike { text-align: center; }
.karta--wgraj-grafike .strefa-plikow__wybor { justify-content: center; }
.karta--wgraj-grafike .strefa-plikow__podpowiedz { text-align: center; }
/* User: "wybierz plik poszerz o 150px" - zmierzone (headless chromium,
   getBoundingClientRect().width): 112,5px bez tej reguly, wiec
   112,5+150=262,5, zaokraglone do 263px. Zakres TYLKO #grafika_dropzone -
   ".plik-etykieta" jest wspoldzielona z "Zdjecie glowne"/"Galeria" na
   karcie produktu, ktorych szerokosc ma zostac bez zmian. */
#grafika_dropzone .plik-etykieta { width: 263px; }

.kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin: 14px 0 24px; }
.kafel { background: var(--plyta); border: 1px solid var(--obwodka); border-radius: var(--r); padding: 14px 16px; display: block; color: inherit; }
a.kafel:hover { border-color: var(--akcent); text-decoration: none; }
.kafel__etykieta { display: block; font-size: 0.75rem; color: var(--slaby); margin-bottom: 6px; }
.kafel__liczba { font-size: 1.625rem; font-weight: 700; }

.tab { width: 100%; border-collapse: collapse; font-size: 0.84375rem; background: var(--plyta); border-radius: var(--r); overflow: hidden; }
.tab th { text-align: left; font-size: 0.71875rem; text-transform: uppercase; letter-spacing: .05em; color: var(--slaby); padding: 10px 12px; border-bottom: 1px solid var(--obwodka); }
.tab td { padding: 10px 12px; border-bottom: 1px solid var(--obwodka); }
.tab tr:last-child td { border-bottom: none; }
.tab .lb { text-align: right; white-space: nowrap; }

.znak { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 0.71875rem; font-weight: 600; }
.znak--new { background: var(--akcent-jasny); color: var(--akcent-ciemny); }
.znak--pay { background: var(--ok-tlo); color: var(--ok); }
.znak--inp { background: var(--uwaga-tlo); color: var(--uwaga); }
.znak--snd { background: #e5f0fb; color: #1a5a9e; }
.znak--oki { background: var(--ok-tlo); color: var(--ok); }
.znak--bad { background: var(--blad-tlo); color: var(--blad); }
.znak--zwr { background: #f0eaf7; color: #6b3fa0; }

.filtry { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.filtry a { padding: 5px 12px; border-radius: 20px; background: var(--plyta); border: 1px solid var(--obwodka); font-size: 0.8125rem; }
.filtry a.akt { background: var(--akcent); color: #fff; border-color: var(--akcent); }
.stronicowanie { display: flex; gap: 5px; margin: 14px 0; flex-wrap: wrap; }
.stronicowanie a { padding: 5px 11px; border: 1px solid var(--obwodka); border-radius: 5px; background: var(--plyta); }
.stronicowanie a.akt { background: var(--akcent); color: #fff; border-color: var(--akcent); }

.btn { display: inline-block; padding: 9px 16px; font: inherit; font-weight: 600; border: 1px solid transparent;
       border-radius: 5px; cursor: pointer; background: var(--akcent); color: #fff; }
/* User zglosil "nadal go widze" dla przycisku chowanego w JS przez
   element.hidden=true (2026-09-23, /panel/grafiki) - realny powod: ".btn"
   (0,1,0) ustawia "display", a wbudowana reguła przegladarki dla [hidden]
   MA TAKA SAMA specyficznosc (0,1,0) - przy remisie specyficznosci arkusz
   AUTORA zawsze wygrywa z arkuszem PRZEGLADARKI, niezaleznie od kolejnosci
   w plikach. Skutek: `.hidden=true` w JS ustawial atrybut poprawnie (stad
   testy w headless chromium sprawdzajace SAMA WLASCIWOSC "przeszly"), ale
   wizualnie nic sie nie chowalo - potwierdzone dopiero getComputedStyle().
   Dotyczylo KAZDEGO ".btn"/"a.btn" chowanego przez hidden (tez Usun/Podglad
   w edytorze /panel/podstrony) - jedna reguła (0,2,0), wyzsza specyficznosc
   niz sam ".btn", naprawia to wszedzie na raz. */
.btn[hidden] { display: none; }
.panel a.btn { color: #fff; }
.btn:hover { background: var(--akcent-ciemny); }
.statusy { display: flex; gap: 8px; flex-wrap: wrap; }
.btn--bad, .btn--zwr { background: var(--blad); }
.btn--oki, .btn--pay { background: var(--ok); }
.btn--inp, .btn--snd { background: var(--uwaga); }

.p-login { max-width: 380px; margin: 60px auto; background: var(--plyta); border: 1px solid var(--obwodka); border-radius: 12px; padding: 28px; }
.p-login .pod { color: var(--slaby); margin: 0 0 20px; }
.p-login label { display: block; font-weight: 600; font-size: 0.8125rem; margin: 0 0 14px; }
.p-login input { width: 100%; padding: 9px 11px; font: inherit; margin-top: 5px;
                 border: 1px solid #c3ccdb; border-radius: 5px; }

.komunikat { padding: 11px 15px; border-radius: 6px; margin: 0 0 16px; border: 1px solid; font-size: 0.84375rem; }
.komunikat--ok { background: var(--ok-tlo); border-color: #bfe3cd; color: var(--ok); }
.komunikat--blad { background: var(--blad-tlo); border-color: #f5c6c2; color: var(--blad); }
.uwagi { background: var(--uwaga-tlo); padding: 10px 12px; border-radius: 6px; }
.szare { color: var(--slaby); } .male { font-size: 0.75rem; }
/* Opis funkcji pod checkboxem/naglowkiem karty - user 2026-09-22: "muszą być
   [opisy] bo inaczej ludzie nie będą wiedzieli co robić". Ciasniej niz
   domyslny odstep <p>, wciagniety pod tekst etykiety (28px = szerokosc
   checkboxa .ch + jego gap). */
.karta p.opis { margin: -6px 0 12px 28px; font-size: .75rem; color: var(--slaby); }
.karta h3 + p.opis, .karta h2 + p.opis, .karta .pola-obok + p.opis {
  margin-left: 0; margin-top: 4px;
}
.filtr-form { display: flex; gap: 8px; margin: 0 0 14px; flex-wrap: wrap; align-items: center; }
.filtr-form input, .filtr-form select { font: inherit; padding: 6px 9px; border: 1px solid #c3ccdb; border-radius: 5px; }
.tab--produkty input[type=text], .tab--produkty input[type=number] { font: inherit; padding: 3px 6px; border: 1px solid #c3ccdb; border-radius: 4px; text-align: right; }
.btn--maly { padding: 4px 10px; font-size: 0.78125rem; }
.karta--uwaga { border-color: #f0dcb4; background: var(--uwaga-tlo); }
.karta label { display: block; margin: 0 0 12px; font-size: 0.84375rem; font-weight: 600; }
.karta label input[type=text], .karta label select { width: 100%; font: inherit; font-weight: 400; padding: 8px 10px; margin-top: 5px; border: 1px solid #c3ccdb; border-radius: 5px; }
.karta label.ch { display: flex; gap: 9px; align-items: center; font-weight: 400; }
.karta label.ch input { width: auto; margin: 0; }
h3 { font-size: 0.875rem; margin: 16px 0 8px; }

/* Przelacznik motywu i rozmiaru czcionki w gornej belce panelu. */
.p-pref { display: inline-flex; gap: 4px; margin-left: auto; }
.p-pref button {
  background: rgba(255,255,255,.14); color: #fff; border: 0; border-radius: 5px;
  padding: 4px 9px; font: inherit; font-size: 0.78125rem; line-height: 1.4; cursor: pointer;
}
.p-pref button:hover { background: rgba(255,255,255,.26); }
.p-top__prawo { margin-left: 0; }

/* Adresy plikow dla porownywarek na pulpicie sprzedawcy. */
.lista-adresow { list-style: none; margin: 8px 0; padding: 0; }
.lista-adresow li { padding: 5px 0; border-bottom: 1px solid var(--obwodka); }
.lista-adresow li:last-child { border-bottom: 0; }
.lista-adresow strong { display: inline-block; min-width: 78px; }
.lista-adresow code { font-size: 0.78125rem; overflow-wrap: anywhere; }

/* Formularze edycji w panelu sprzedawcy. */
.tab input[type="text"], .tab input[type="number"] {
  font: inherit; padding: 4px 6px; border: 1px solid var(--obwodka);
  border-radius: 4px; background: var(--plyta); color: var(--tekst); width: 100%;
}
/* Uwaga na specyficznosc: ".tab input[type=number]" wyzej to (0,2,1) -
   selektor atrybutu liczy sie jak klasa. Sam ".waskie" (0,1,0) przegrywal,
   dlatego tu jest ".tab input.waskie" (0,2,1) postawione PO tamtej regule. */
.tab input.waskie, .tab .waskie, input.waskie { width: 7em; }
/* User 2026-09-23: "nadal stan za szeroki moze byc polowa szerokosci ceny".
   Zmierzone naprawde (headless Chromium na zywej stronie): kolumna "Cena"
   (input[type=text], width:100% komorki) wychodzi na ~63px, dokladna
   polowa to ~31px - przy tej szerokosci wartosc 3-cyfrowa (np. "999",
   patrz komentarz przy .waskie wyzej: "zazwyczaj stany maksymalnie 3
   cyfrowe") realnie sie UCINA (zmierzone zrzutem ekranu - widac tylko
   pierwsza cyfre). 52px to najwezsza szerokosc, przy ktorej "999" jeszcze
   sie w pelni miesci (z mala rezerwa) - 4em w skali panelu (13.5px/em przy
   domyslnej czcionce). Nie jest to dokladnie "polowa", ale najblizej niej,
   jak da sie bez lamania 3-cyfrowego stanu. Selektor musi wygrac ZAWSZE,
   niezaleznie od kolejnosci w pliku - stąd (0,3,1), wyzej od (0,2,1) reguly
   ".waskie", zamiast liczyc na kolejnosc jak przy zwyklym remisie. */
.tab input.waskie.pole-stanu {
  width: 4em;
  /* Strzalki spinnera number input nie sa widoczne w headless Chromium
     (zweryfikowane osobnym testem - dlatego trzeba je jawnie wylaczyc,
     zamiast ufac zrzutowi ekranu z testu), a w zwyklej przegladarce
     zajelyby ok. 16-20px, ktorych to wazkie pole juz nie ma - bez tego
     w prawdziwym Chrome/Firefox "999" i tak by sie ucinalo o szerokosc
     strzalek, mimo ze test headless wygladalby OK. */
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.tab input.waskie.pole-stanu::-webkit-inner-spin-button,
.tab input.waskie.pole-stanu::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.polowa { width: 50%; min-width: 12em; }
.nieprzenos { white-space: nowrap; }
.przewijana { overflow-x: auto; }
/* Podpowiedz "wlasna" dla .btn--wylaczony - user 2026-09-22: natywny title
   sie nie pokazywal (i tak czy inaczej byłby przycinany przez overflow-x:
   auto na .przewijana, bo ta wlasciwosc na jednej osi wymusza auto na
   drugiej). position:fixed + JS w preferencje.js ucieka spod tego
   przyciecia i dziala identycznie w kazdej przegladarce. */
.tooltip-plywajacy {
  position: fixed; z-index: 1000; max-width: 260px; padding: 6px 10px;
  background: var(--tekst); color: var(--tlo); font-size: 0.78125rem;
  font-weight: 400; line-height: 1.35; border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25); pointer-events: none;
}
.wiersz-dodatkowy td { border-top: 0; padding-top: 0; }
.pola-obok { display: flex; gap: 18px; flex-wrap: wrap; }
/* Pola obok siebie dziela wiersz po rowno, a podpowiedzi pod nimi sie zawijaja
   - inaczej dluzsza podpowiedz (np. przy wadze) rozpychala swoje pole i
   spychala je do nowej linii (user 2026-10-01: cena / cena przed obnizka /
   waga maja byc w jednej linii). Na waskim ekranie min-width i tak zawinie. */
.pola-obok.pola-obok--rowno > label { flex: 1 1 0; min-width: 9em; }
.pola-obok.pola-obok--rowno > label > input { width: 100%; box-sizing: border-box; }
.pola-obok label { flex: 0 0 auto; }
form textarea {
  display: block; width: 100%; margin-top: 4px; font: inherit; font-size: 0.84375rem;
  padding: 8px 10px; border-radius: 6px; border: 1px solid var(--obwodka);
  background: var(--plyta); color: var(--tekst); resize: vertical;
}
/* w tabelach pola zostaja w linii - blokowe rozjechalyby komorki */
.tab label input, .tab input { display: inline-block; margin-top: 0; }
form select, form input[type="file"] {
  display: block; margin-top: 4px; font: inherit; padding: 7px 9px;
  border-radius: 6px; border: 1px solid var(--obwodka);
  background: var(--plyta); color: var(--tekst); max-width: 100%;
}
.podglad-zdjecia { max-width: 300px; border: 1px solid var(--obwodka); border-radius: 6px; }
.btn--blad { background: var(--blad); }
.btn--blad:hover { background: var(--blad); opacity: .85; }
/* Przycisk "wyszarzony" (np. Usun kategorii z produktami) - widoczny, ale
   nieaktywny (type="button", nie [disabled] - patrz kategorie.php), wiec
   :hover na .btn--blad musi zostac PRZEBITY, inaczej po najsciu robilby
   sie ciemniejszy/bardziej widoczny jak prawdziwy aktywny przycisk. */
.btn--wylaczony, .btn--wylaczony:hover { opacity: .45; cursor: not-allowed; background: var(--blad); }
/* .panel a.btn wyzej ustawia color:#fff (0,2,1) - sam .btn--pusty (0,1,0)
   by przegral, wiec selektor musi byc rownie mocny. */
.panel a.btn--pusty, .btn--pusty {
  background: transparent; color: var(--akcent); border: 1px solid var(--obwodka);
}
.panel a.btn--pusty:hover { border-color: var(--akcent); text-decoration: none; }
/* Bug 2026-09-22 (user: "niebieski napis na niebieskim tle") - reguła
   wyzej dziala TYLKO dla <a>. Przyciski wyboru plikow (.plik-etykieta)
   to <label class="btn btn--pusty"> - na hover dzialalo tylko generyczne
   ".btn:hover" (tlo -> akcent-ciemny), bez zerowania go dla .btn--pusty,
   a kolor tekstu zostawal niebieski (z bazowej .btn--pusty) - niebieski
   na niebieskim. Ta regula (0,2,0) dziala dla KAZDEGO elementu z
   .btn--pusty, nie tylko <a> - konsekwentnie z reszta przyciskow
   .btn--pusty (obwodka, bez wypelnienia). */
.btn--pusty:hover { background: transparent; border-color: var(--akcent); text-decoration: none; }

/* Statystyki i galeria. */
.kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
         gap: 12px; margin: 0 0 20px; }
.kafle > div { background: var(--plyta); border: 1px solid var(--obwodka);
               border-radius: var(--r); padding: 14px 16px; }
.kafle b { display: block; font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.kafle span { font-size: 0.75rem; color: var(--slaby); }
.dwie-kolumny { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.dwie-kolumny > section { min-width: 0; }
@media (max-width: 900px) { .dwie-kolumny { grid-template-columns: 1fr; } }
.slupek-kom { width: 30%; }
.slupek { display: block; height: 10px; border-radius: 3px; background: var(--akcent); min-width: 2px; }
/* User 2026-09-23: "elementy graficzne niech sie wyswietlaja 2x wieksze
   niz teraz" - 160px->320px. Bezpieczne: miniatury sa generowane do
   Obrazek::MAX_MINI=300px (patrz app/Core/Obrazek.php), wiec 320px to
   wciaz w okolicy realnej rozdzielczosci pliku, nie naciagane rozmycie. */
.siatka-galerii { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
                  gap: 14px; margin: 0 0 18px; }
.siatka-galerii figure { margin: 0; background: var(--plyta); border: 1px solid var(--obwodka);
                         border-radius: var(--r); padding: 10px; text-align: center; }
.siatka-galerii img { max-width: 100%; height: auto; border-radius: 4px; }
.siatka-galerii figcaption { margin-top: 8px; }

/* Wartosci wariantu produktu (rozmiary, kolory). */
.lista-wariantow { list-style: none; margin: 8px 0 16px; padding: 0;
                   display: flex; flex-wrap: wrap; gap: 8px; }
.lista-wariantow li { display: flex; align-items: center; gap: 8px;
                      background: var(--tlo); border: 1px solid var(--obwodka);
                      border-radius: 6px; padding: 5px 8px 5px 12px; }
.lista-wariantow form { display: inline; }
/* Specyficznosc "input.kod-grafiki[type=text]" (0,2,1) - liczy sie tak,
   zeby zremisowac z ".tab input[type="text"]" (0,2,1) wyzej i wygrac
   kolejnoscia w pliku (ta reguła jest PO tamtej). User 2026-09-23: uzyte
   tez w kolumnie "Adres" na /panel/podstrony, wewnatrz .tab - sam ".kod-
   grafiki" (0,1,0) tam PRZEGRYWALBY, a "font: inherit" z tamtej reguly
   zresetowaloby font-family/font-size na ambientowe, gubiac monospace. */
input.kod-grafiki[type="text"] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.6875rem; width: 100%; }

/* Kafel abonamentu na pulpicie - kolor wg liczby dni do konca. */
.karta--abonament { border-left: 4px solid var(--ok); }
.karta--abonament.karta--uwaga { border-left-color: var(--uwaga); background: var(--uwaga-tlo); }
.karta--abonament.karta--blad  { border-left-color: var(--blad);  background: var(--blad-tlo); }
.karta--abonament code { font-size: 0.875rem; }
/* Blok "jak oplacic" - user 2026-09-22 PRZYWROCIL mozliwosc zwiniecia (po
   tym jak wczesniej tego samego dnia kazal ja usunac) - teraz auto-otwarty
   tylko gdy < 14 dni do wygasniecia (patrz warunek w pulpit.php), w innym
   wypadku domyslnie zwiniety. Strzalka jak w .karta--pomoc-start nizej. */
.abonament-wplata { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--obwodka); }
/* Rozdzial wewnatrz karty (np. "Wartosci do wyboru" pod "Wariant do
   wyboru" - user 2026-09-22: polaczone, bylo osobno daleko nizej). */
.karta__dzial { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--obwodka); }
.karta__dzial h3 { margin: 0 0 8px; font-size: 0.9375rem; }
.abonament-wplata__naglowek { margin: 0 0 6px; cursor: pointer; list-style: none;
                               display: flex; align-items: center; gap: 8px; }
.abonament-wplata__naglowek::-webkit-details-marker { display: none; }
.abonament-wplata__naglowek::before { content: '▸'; display: inline-block;
                                       transition: transform .15s; color: var(--akcent); }
.abonament-wplata[open] .abonament-wplata__naglowek::before { transform: rotate(90deg); }

/* Komunikat "dla poczatkujacych" na pulpicie - w odroznieniu od karty
   abonamentu wyzej, TU user 2026-09-22 chcial wlasnie mozliwosc zwiniecia
   (<details>), tylko domyslnie otwarta. */
.karta--pomoc-start { border-left: 4px solid var(--akcent); background: var(--akcent-jasny); }
.karta--pomoc-start summary { cursor: pointer; font-weight: 600; list-style: none;
                               display: flex; align-items: center; gap: 8px; }
.karta--pomoc-start summary::-webkit-details-marker { display: none; }
.karta--pomoc-start summary::before { content: '▸'; display: inline-block;
                                       transition: transform .15s; color: var(--akcent); }
.karta--pomoc-start[open] summary::before { transform: rotate(90deg); }
.pomoc-start__tresc { margin-top: 12px; }
.pomoc-start__tresc p { margin: 0 0 10px; }
.pomoc-start__tresc p:last-child { margin-bottom: 0; }

/* Strefa wgrywania zdjec (drag&drop + podglad miniatur) - port mechaniki
   z gielda.qrz.pl/dodaj (user 2026-09-22: "forme dodawania zdjec zrob w
   taki sam sposob"), nazwy klas polskie jak reszta tego arkusza. JS w
   preferencje.js. Tokeny kolorow abc24 (nie gieldowe --primary/--surface-*). */
.pole-etykieta { font-weight: 600; font-size: 0.84375rem; margin: 0 0 12px; }
.strefa-plikow { border: 2px dashed var(--obwodka); border-radius: var(--r); padding: 14px;
                 transition: border-color .15s, background-color .15s; }
.strefa-plikow.przeciagane { border-color: var(--akcent); background: var(--akcent-jasny); }
.strefa-plikow__wybor { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.strefa-plikow__podpowiedz { font-size: 0.75rem; color: var(--slaby); margin-top: 8px; }
.strefa-plikow__podglad { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.strefa-plikow__podglad:empty { margin-top: 0; }
/* Uwaga na specyficznosc: "form input[type=file]" wyzej (linia ok. 214)
   to (0,1,2) i wygrywaloby z samym ".plik-input" (0,1,0) - natywny
   przycisk przegladarki NIE chowal sie, stad user zobaczyl "podwojny
   przycisk wybierz plik" (wlasny .plik-etykieta + natywny input obok).
   ".strefa-plikow input.plik-input" ma (0,2,1) - bije to niezaleznie
   od kolejnosci w pliku. */
.strefa-plikow input.plik-input { display: none; }
.plik-nazwa { font-size: 0.8125rem; color: var(--slaby); font-style: italic; }
.miniatura-pliku { position: relative; width: 90px; }
.miniatura-pliku img { width: 90px; height: 90px; object-fit: cover; border-radius: 6px;
                        border: 1px solid var(--obwodka); display: block; }
/* display:flex+centrowanie (nie line-height) - SVG wewnatrz wymaga
   geometrycznego centrowania, nie tekstowego. */
/* Uzywana zarowno na <span> (podglad plikow jeszcze niewyslanych, JS) jak
   i na <button> (usuwanie juz zapisanych zdjec galerii, zwykly submit) -
   padding:0/font:inherit zerują domyslny wyglad przycisku, zeby oba
   wypadaly identycznie. */
.miniatura-pliku__usun { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px;
                          display: flex; align-items: center; justify-content: center;
                          background: var(--blad); color: #fff; border-radius: 50%;
                          cursor: pointer; border: 2px solid var(--plyta); padding: 0; font: inherit; }
.miniatura-pliku__usun:hover { opacity: .85; }
.miniatura-pliku__nazwa { display: block; font-size: 0.625rem; color: var(--slaby);
                           white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                           margin-top: 3px; }

/* Pole zwijalne (np. "Opis rozszerzony HTML" w formularzu produktu) -
   ta sama strzalka co .karta--pomoc-start summary, wzorem tamtej karty. */
.pole-zwijalne { margin: 0 0 12px; }
.pole-zwijalne summary { cursor: pointer; font-weight: 600; font-size: 0.84375rem;
                          list-style: none; display: flex; align-items: center; gap: 8px; }
.pole-zwijalne summary::-webkit-details-marker { display: none; }
.pole-zwijalne summary::before { content: '▸'; display: inline-block;
                                  transition: transform .15s; color: var(--akcent); }
.pole-zwijalne[open] summary::before { transform: rotate(90deg); }
.pole-zwijalne textarea { margin-top: 8px; }

/* User 2026-09-22: "zrob wieksze pole do wpisywania wyszukiwanej frazy
   powieksz o 250px" (wyszukiwanie produktow polecanych) - domyslna
   szerokosc pola bez tej reguly to 201px (zmierzone), wiec 201+250=451px. */
.szukaj-polecane { width: 451px; }

/* =====================================================================
   Edytor HTML w nowym oknie (user 2026-09-23) - przycisk dodawany przez JS
   pod kazdym <textarea data-edytor-html> na /panel/wyglad (patrz
   preferencje.js), oraz wnetrze samego okna /panel/edytor-html (widok
   panel/edytor-html.php, logika public/js/edytor-html.js).
   ===================================================================== */
.btn--edytor-html { display: block; margin: -6px 0 12px; }

/* Okno edytora zajmuje cala wysokosc (bez przewijania calej strony) -
   podglad i kod maja WLASNE przewijanie/skalowanie w srodku. */
body.edytor-html-okno { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.edytor-html {
  display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  padding: 14px 16px; gap: 10px;
}
.edytor-html__blad {
  background: var(--blad-tlo); color: var(--blad); border: 1px solid var(--blad);
  border-radius: var(--r); padding: 10px 12px; font-size: 0.84375rem;
}
.edytor-html__podglad-owijka {
  flex: 1 1 45%; min-height: 120px; display: flex; flex-direction: column;
  border: 1px solid var(--obwodka); border-radius: var(--r); overflow: hidden;
}
.edytor-html__podglad-etykieta {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 6px 10px; background: var(--tlo); border-bottom: 1px solid var(--obwodka);
  font-size: 0.71875rem; text-transform: uppercase; letter-spacing: .04em; color: var(--slaby);
}
.edytor-html__podglad { flex: 1; border: 0; width: 100%; background: #fff; }
.edytor-html__narzedzia { display: flex; flex-wrap: wrap; gap: 6px; flex: 0 0 auto; }
.edytor-html__narzedzia button {
  padding: 5px 10px; font-size: 0.78125rem; font-weight: 600;
  border: 1px solid var(--obwodka); border-radius: 5px;
  background: var(--plyta); color: var(--tekst); cursor: pointer;
}
.edytor-html__narzedzia button:hover { border-color: var(--akcent); color: var(--akcent); }
.edytor-html__kod {
  flex: 1 1 35%; min-height: 90px; width: 100%; resize: none;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.8125rem;
  padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--obwodka);
  background: var(--plyta); color: var(--tekst);
}
.edytor-html__kod:disabled { opacity: .6; }
.edytor-html__akcje {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; flex-wrap: wrap; flex: 0 0 auto;
}
.edytor-html__akcje-prawo { display: flex; gap: 8px; }

/* pasek BBCode nad "Opis krotki" (public/js/bbcode-pasek.js, 2026-10-01) */
.bbcode-pasek { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0 6px; }
.bbcode-pasek__przycisk { padding: 4px 9px; min-width: 32px; }
.bbcode-pasek__kolor { width: 32px; height: 30px; padding: 0 2px; border: 1px solid currentColor; border-radius: 4px; background: none; }

/* przycisk danych firmy z rejestru VAT (nip-rejestr.js, 2026-10-01) */
.nip-rejestr { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: -4px 0 12px; }
.nip-rejestr__wynik--ok { color: #1d6b3a; }
.nip-rejestr__wynik--blad { color: #b3261e; }
.pole-z-rejestru { background: #fff7d6 !important; transition: background 2s; }

/* Komunikat operatora platformy na samej gorze panelu (komunikat ustawiany przez operatora platformy, 2026-10-03);
   <details> - sprzedawca moze go zwinac do cienkiej belki z tytulem */
.p-komunikat-operatora { background: var(--uwaga-tlo); border-bottom: 2px solid var(--uwaga); color: var(--tekst); }
.p-komunikat-operatora__in { max-width: 1200px; margin: 0 auto; padding: 10px 20px; font-size: .9rem; line-height: 1.5; box-sizing: border-box; }
.p-komunikat-operatora summary { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; padding-bottom: 2px; }
.p-komunikat-operatora summary::-webkit-details-marker { display: none; }
.p-komunikat-operatora summary:focus-visible { outline: 2px solid var(--uwaga); outline-offset: -2px; }
.p-komunikat-operatora strong { color: var(--uwaga); }
/* Przycisk zwijania - wyrazna strzalka w ramce (user 2026-10-03: "dodaj taka
   strzalke do zwijania"); strzalka rysowana ramka (bez fontu/emoji), obrot przy zwinieciu */
.p-komunikat-operatora__przelacz { display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-size: .8rem; font-weight: 600; color: var(--uwaga); white-space: nowrap;
  border: 1px solid var(--uwaga); border-radius: 999px; padding: 4px 12px 4px 10px; }
.p-komunikat-operatora summary:hover .p-komunikat-operatora__przelacz { background: var(--uwaga); color: var(--uwaga-tlo); }
.p-komunikat-operatora__przelacz::before { content: ""; width: 7px; height: 7px; margin-top: 4px;
  border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .15s ease; }
.p-komunikat-operatora__przelacz::after { content: "zwiń"; }
.p-komunikat-operatora:not([open]) .p-komunikat-operatora__przelacz::before { transform: rotate(225deg); margin-top: -4px; }
.p-komunikat-operatora:not([open]) .p-komunikat-operatora__przelacz::after { content: "rozwiń"; }
@media (prefers-reduced-motion: reduce) { .p-komunikat-operatora__przelacz::before { transition: none; } }
.p-komunikat-operatora:not([open]) summary { padding-top: 6px; padding-bottom: 6px; }
.p-komunikat-operatora__tresc { padding-top: 0; }
.p-komunikat-operatora a { color: var(--akcent); text-decoration: underline; overflow-wrap: anywhere; }

/* Gorna belka panelu na telefonie (2026-10-03): na 390px "Zobacz sklep →" lamal sie
   na 3 linie, a "Wyloguj" wychodzil poza ekran. Waska szerokosc: dwa wiersze -
   logo + adres sklepu, pod spodem A-/A+ i linki; linki nigdy sie nie lamia. */
.p-top a { white-space: nowrap; }
@media (max-width: 640px) {
  .p-top__in { height: auto; min-height: 56px; flex-wrap: wrap; padding: 8px 16px; row-gap: 6px; column-gap: 12px; }
  .p-top__sklep { padding-left: 12px; overflow-wrap: anywhere; }
  .p-top__prawo { width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
  .p-top__prawo .p-pref { margin-left: 0; }
}

/* Panel na telefonie bez przewijania w bok (2026-10-03; zmierzone na 390px: pulpit 562px,
   produkty 632px, wyglad 590px, ustawienia 556px szerokosci). Przyczyny:
   - elementy siatki (.p-uklad / .p-produkty-uklad) maja domyslnie min-width:auto, wiec
     szeroka tabela w srodku rozpychala cala kolumne - min-width:0 to zatrzymuje,
   - szerokie tabele przewijaja sie WEWNATRZ siebie zamiast rozpychac strone,
   - pola .pola-obok i ich selecty/inputy nie moga byc szersze niz ekran. */
.p-uklad > *, .p-produkty-uklad > * { min-width: 0; }
@media (max-width: 640px) {
  .p-body { padding-left: 16px; padding-right: 16px; }
  table.tab { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pola-obok > label, .pola-obok label { flex: 1 1 100%; min-width: 0; max-width: 100%; }
  .pola-obok select, .pola-obok input, .karta select, .karta input[type=text] { max-width: 100%; box-sizing: border-box; }
  .filtr-form { flex-wrap: wrap; }
  .filtr-form select, .filtr-form input { max-width: 100%; }
}

/* Edytor stylu sklepu /panel/styl (2026-10-03): kolory po lewej, podglad na zywo po prawej */
.styl-uklad { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 20px; align-items: start; }
.styl-uklad > * { min-width: 0; }
.styl-zakladki { display: flex; gap: 6px; margin: 0 0 10px; }
.styl-zakladka { font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; padding: 7px 14px;
  border: 1px solid var(--obwodka); border-radius: 999px; background: var(--plyta); color: var(--tekst); }
.styl-zakladka[aria-selected="true"] { background: var(--akcent); border-color: var(--akcent); color: #fff; }
.styl-paleta[hidden] { display: none; }
.styl-paleta h3 { margin: 14px 0 6px; }
.styl-paleta h3:first-child { margin-top: 0; }
.karta label.styl-kolor { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px;
  margin: 0 0 6px; font-weight: 400; cursor: pointer; }
.styl-kolor input[type=color] { width: 38px; height: 28px; padding: 0; border: 1px solid var(--obwodka);
  border-radius: 5px; background: none; cursor: pointer; }
.styl-kolor__hex { font-size: .75rem; color: var(--slaby); font-variant-numeric: tabular-nums; }
.btn--drugi { background: transparent; color: var(--akcent); border: 1px solid var(--akcent); }
.styl-podglad { position: sticky; top: 12px; }
.styl-podglad__pasek { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.styl-podglad__pasek select { font: inherit; padding: 4px 8px; border: 1px solid var(--obwodka); border-radius: 5px; }
.styl-podglad__opcje { display: flex; gap: 6px; flex-wrap: wrap; }
.styl-podglad__okno { height: 72vh; min-height: 480px; overflow: hidden; border: 1px solid var(--obwodka);
  border-radius: var(--r); background: var(--tlo); }
.styl-podglad__okno--telefon { display: flex; justify-content: center; }
.styl-podglad iframe { display: block; border: 0; background: #fff; transform-origin: 0 0; }
.styl-podglad__okno--telefon iframe { border-left: 1px solid var(--obwodka); border-right: 1px solid var(--obwodka); }
@media (max-width: 900px) {
  .styl-uklad { grid-template-columns: 1fr; }
  .styl-podglad { position: static; }
  .styl-podglad__okno { height: 520px; }
}

/* Listy w kartach panelu (poradnik 2026-10-03) - oddech miedzy punktami */
.karta ul li, .karta ol li { margin: 0 0 6px; line-height: 1.55; }
.karta ul, .karta ol { padding-left: 1.3em; }

/* Znacznik "FV" na liscie zamowien - klient prosi o fakture VAT (2026-10-03) */
.znak--fv { background: var(--akcent-jasny); color: var(--akcent); margin-left: 6px; }