:root{
  --teal-deep:#123D3A; --teal:#40BEB5; --orange:#F16E22; --cream:#FBFCFC; --ink:#16221F; --muted:#5E706D;
  --line:#E1E5E9; --danger:#c0392b; --success:#2f7d4f; --amber:#D98E00; --blue:#3068B0; --purple:#7A4FC2; --rose:#D64B6E;
  --page-bg:#F3F5F7; --sidebar-bg:#15181D;
  --radius-lg:10px; --radius-md:8px; --radius-sm:7px;
  --shadow-card:0 1px 2px rgba(15,23,23,0.035);
  --shadow-pop:0 20px 48px rgba(10,16,16,0.24);

  /* --- wygląd panelu: zmienne dodane pod system stylów/trybów (Ustawienia → Wygląd panelu) --- */
  --surface:#fff; --bg-alt:#f7f7f7;
  --focus-ring:rgba(64,190,181,0.15);
  --accent-hover:#d85c14; --success-hover:#256b41;
  --selected-bg:#F1FAF6; --pakiet-aktywny-bg:#FBFFFD;
  --tone-warning-bg:#FCEEE3; --tone-warning-fg:#a3550f;
  --tone-success-bg:#E1F5F1; --tone-success-fg:#0f6b5c;
  --tone-danger-bg:#FBE4E1; --tone-danger-fg:#a3341f;
  --tone-neutral-bg:#EDEDED; --tone-neutral-fg:#666;
  --opinie-grad-1:#FFF7E6; --opinie-grad-2:#FFFDF7; --opinie-border:#F3DFA0;
  --blink-border:#E8B300; --blink-fg:#7A5D00; --blink-bg-1:#FCE79A; --blink-bg-2:#FFF6D6;
  --powracajacy-bg:#FFF8EC; --powracajacy-border:#F5DBA0;
}
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:hidden TYLKO na body, NIE na html — ustawione na obu naraz
   (jak było wcześniej) łamie position:sticky w całym panelu: przeglądarka
   traktuje wtedy i html, i body jako osobne kontenery przewijania, przez co
   sticky "gubi" właściwego przodka i element ucieka poza ekran zamiast się
   przykleić (zweryfikowane bezpośrednim testem — dokładnie to powodowało, że
   podgląd banera w edytorze HERO nie przyklejał się przy przewijaniu). Samo
   overflow-x:hidden na body w zupełności wystarcza, żeby zablokować poziomy
   scroll strony. */
body{ margin:0; overflow-x:hidden; font-family:'Work Sans',system-ui,sans-serif; background:var(--page-bg); color:var(--ink); font-size:14px; line-height:1.45; }
img{ max-width:100%; }
a{ color:inherit; }
h1{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:1.3rem; margin:0; letter-spacing:-0.01em; }
h2{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:0.95rem; letter-spacing:0.01em; margin:0 0 10px; display:flex; align-items:center; gap:8px; }
h2::before{ content:''; width:8px; height:8px; border-radius:50%; background:var(--page-accent, var(--teal)); flex-shrink:0; }
h2.no-dot::before, .dash-card h2::before{ display:none; }

/* --- shell / nav --- */
.admin-shell{ min-height:100vh; }
.admin-sidebar{
  width:216px; flex-shrink:0; background:var(--sidebar-bg); color:#fff;
  display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:50;
  border-right:1px solid rgba(255,255,255,0.06);
}
.admin-sidebar-scroll{ flex:1; overflow-y:auto; padding:22px 16px 150px; min-height:0; }
.admin-logo{ display:flex; align-items:center; gap:10px; margin-bottom:26px; padding:0 2px; }
.admin-logo-mark{
  flex-shrink:0; width:32px; height:32px; border-radius:var(--radius-sm); object-fit:contain;
}
.admin-logo-text{ font-family:'Work Sans',sans-serif; font-size:0.9rem; font-weight:700; line-height:1.25; }
.admin-logo-text small{ font-size:0.68em; opacity:0.5; display:block; font-weight:500; }
.admin-nav{ display:flex; flex-direction:column; gap:1px; flex:1; }
.admin-nav a{
  text-decoration:none; color:rgba(255,255,255,0.65); padding:9px 12px; border-radius:6px;
  font-size:0.82rem; font-weight:500; display:flex; align-items:center; justify-content:space-between;
  transition:background 0.15s ease, color 0.15s ease;
}
.admin-nav-label{ display:flex; align-items:center; gap:9px; }
.admin-nav-label svg{ flex-shrink:0; opacity:0.85; }
.admin-nav-label .ti, .admin-nav-label .ti-img{ flex-shrink:0; opacity:0.85; font-size:15px; width:15px; height:15px; }
.admin-nav a:hover{ background:rgba(255,255,255,0.05); color:#fff; }
.admin-nav a.is-active{ background:rgba(255,255,255,0.06); color:var(--teal); font-weight:700; }
.admin-nav .badge-count{ background:rgba(255,255,255,0.14); border-radius:999px; font-size:0.68rem; padding:1px 7px; }
.admin-nav a.is-active .badge-count{ background:rgba(64,190,181,0.25); color:var(--teal); }

/* Telefon: przycisk "Pokaż więcej" (pełna szerokość) chowa/pokazuje resztę
   menu — na komputerze ten wrapper jest zawsze "przezroczysty"
   (display:contents), więc jego dzieci (Opinie/Papier/Magazyn/grupa
   "Pakiety i promocja") po prostu płyną normalnie w kolumnie menu, tak jak
   dawniej, bez żadnego dodatkowego przycisku. */
.admin-nav-rozwin{ display:none; }
.admin-nav-wiecej{ display:contents; }

.badge-count--mruga{ background: var(--orange) !important; color:#fff; font-weight:700; animation: mrugniecie 1.1s ease-in-out infinite; }
@keyframes mrugniecie{ 0%, 100%{ opacity:1; } 50%{ opacity:0.35; } }
.admin-sidebar-footer{
  position:fixed; left:0; bottom:0; width:216px; z-index:51; background:var(--sidebar-bg);
  flex-shrink:0; border-top:1px solid rgba(255,255,255,0.08);
  padding:14px 16px; display:flex; flex-direction:column; gap:6px;
}
.admin-sidebar-btn{
  text-decoration:none; color:rgba(255,255,255,0.75); font-size:0.76rem; text-align:center; font-weight:600;
  padding:8px 10px; border-radius:6px; background:transparent;
  border:1px solid rgba(255,255,255,0.12); transition:background 0.15s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.admin-sidebar-btn .ti, .admin-sidebar-btn .ti-img{ flex-shrink:0; }
.admin-sidebar-btn:hover{ background:rgba(255,255,255,0.08); }
.admin-sidebar-btn.is-active{ background:rgba(255,255,255,0.06); border-color:rgba(64,190,181,0.4); color:var(--teal); font-weight:700; }
.admin-main{ flex:1; padding:28px 32px 80px; max-width:1280px; margin-left:216px; }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; padding-bottom:0; border-bottom:none; }
@media (max-width: 820px){
  .admin-shell{ display:flex; flex-direction:column; }
  .admin-sidebar{ position:static; width:auto; height:auto; box-shadow:none; order:1; }
  .admin-sidebar-scroll{ overflow-y:visible; padding-bottom:22px; padding-left:10px; padding-right:10px; }
  .admin-nav{ flex-direction:row; flex-wrap:wrap; }
  .admin-sidebar-footer{
    position:static; width:auto; order:3;
    flex-direction:row; flex-wrap:wrap;
  }
  .admin-sidebar-btn{ flex:1; min-width:110px; }
  .admin-main{ order:2; padding:18px; max-width:100%; margin-left:0; }

  /* Pigułki menu trochę ciaśniejsze niż na komputerze — inaczej Rezerwacje/
     Wiadomości z licznikiem powiadomień nie mieszczą się obok Pulpitu w
     jednej linii i łamią się do drugiej. */
  .admin-nav a{ padding:7px 9px; font-size:0.78rem; gap:5px; }
  .admin-nav .badge-count{ font-size:0.64rem; padding:1px 5px; }

  /* Przycisk "Pokaż więcej" — pełna szerokość, jak dawniej — chowa/pokazuje
     resztę menu (patrz .admin-nav-wiecej wyżej: na komputerze to zawsze
     display:contents, tu dopiero dostaje właściwe, przełączane display). */
  .admin-nav-rozwin{
    display:flex; flex-basis:100%; width:100%; align-items:center; justify-content:center;
    -webkit-appearance:none; appearance:none; outline:none; border:none; margin-top:1px;
    background:rgba(255,255,255,0.05); color:rgba(255,255,255,0.65); border-radius:6px;
    padding:8px; cursor:pointer; transition:background-color 0.15s ease, color 0.15s ease;
  }
  .admin-nav-rozwin:hover{ background:rgba(255,255,255,0.09); color:#fff; }
  .admin-nav-rozwin svg{ transition:transform 0.15s ease; }
  .admin-nav-rozwin[aria-expanded="true"] svg{ transform:rotate(180deg); }
  .admin-nav-wiecej{ display:none; }
  .admin-nav-wiecej.jest-rozwiniete{ display:contents; }
}

/* --- cards / grids --- */
.card{ background:var(--surface); border-radius:var(--radius-lg); padding:20px 22px; box-shadow:var(--shadow-card); margin-bottom:14px; border:1px solid var(--line); }

/* --- ustawienia: zakładki u góry + pigułki + jeden panel treści ---
   .ustawienia-layout NIE jest już (od przebudowy nawigacji na zakładki)
   dwukolumnowym gridem "boczne menu | panel" — to była pozostałość po
   STARYM układzie z `.ustawienia-nav-boczna` (patrz niżej, ta klasa też
   już nie jest używana w HTML). Zostawiony wtedy `display:grid;
   grid-template-columns:220px 1fr` bez zmiany dawał w praktyce LOSOWE
   (zależne od tego, ile jest teraz elementów-dzieci: nav.ustawienia-tabs +
   N grup pigułek + .ustawienia-panele) auto-rozmieszczenie w siatce —
   .ustawienia-panele (czyli CAŁA zawartość ustawień) potrafiło trafić do
   220-pikselowej kolumny zamiast zająć pełną szerokość, co objawiało się
   m.in. tym, że position:sticky wewnątrz (np. podgląd banera HERO) w ogóle
   nie działało tak jak powinno. Zwykły blokowy układ (dzieci jedno pod
   drugim, pełna szerokość) jest tym, co ta nawigacja faktycznie potrzebuje. */
.ustawienia-layout{ display:block; }
.ustawienia-nav-boczna{ position:sticky; top:20px; display:flex; flex-direction:column; gap:18px; }
.ustawienia-nav-grupa-tytul{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); margin:0 0 6px 10px; }
.ustawienia-nav-link{ display:block; width:100%; text-align:left; background:none; border:none; border-radius:var(--radius-sm); padding:8px 10px; font:inherit; font-size:0.86rem; font-weight:600; color:var(--ink); cursor:pointer; }
.ustawienia-nav-link:hover{ background:var(--bg-alt); }
.ustawienia-nav-link.is-active{ background:var(--page-accent, var(--teal)); color:#fff; }
.ustawienia-panel{ display:none; }
.ustawienia-panel.is-active{ display:block; animation:ustawieniaPanelWejscie 0.15s ease; }
@keyframes ustawieniaPanelWejscie{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.ustawienia-panel-tytul{ font-weight:600; font-size:1.1rem; margin:0 0 4px; }
.ustawienia-panel--dwie-kolumny{ columns:2 340px; column-gap:28px; }
.ustawienia-panel--dwie-kolumny label,
.ustawienia-panel--dwie-kolumny p,
.ustawienia-panel--dwie-kolumny table,
.ustawienia-panel--dwie-kolumny .form-row,
.ustawienia-panel--dwie-kolumny .pakiet-row,
.ustawienia-panel--dwie-kolumny .pakiet-akcje,
.ustawienia-panel--dwie-kolumny .card,
.ustawienia-panel--dwie-kolumny .szablon-maila-blok,
.ustawienia-panel--dwie-kolumny .dodatkowy-mail-wiersz{ break-inside:avoid; }
@media (max-width:900px){
  .ustawienia-nav-boczna{ position:static; }
}

/* --- dział Ustawienia → Konta: lista kont po lewej, szczegóły rozwijane w prawo --- */
.konta-uklad{ display:flex; align-items:flex-start; gap:20px; margin-top:4px; }
.konta-lista{ flex:0 0 260px; display:flex; flex-direction:column; gap:3px; }
.konta-wiersz{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; color:inherit;
  background:none; border:1.5px solid transparent; border-radius:var(--radius-md); padding:8px 10px; cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.konta-wiersz:hover{ background:var(--bg-alt); }
.konta-wiersz.is-active{ background:var(--bg-alt); border-color:var(--line); }
.konta-avatar{
  width:34px; height:34px; border-radius:50%; color:#fff; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem;
}
/* Odznaczenie galerii na liście "Galerie online" — zaokrąglony kwadracik jak
   mini odbitka/ramka ze zdjęciem, zamiast okrągłego inicjału jak przy kontach. */
.konta-avatar--galeria{ border-radius:8px; font-size:1.05rem; }
.konta-wiersz-tekst{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.konta-wiersz-tekst strong{ font-size:0.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.konta-wiersz-rola{ font-size:0.72rem; color:var(--muted); line-height:1.35; min-height:calc(1.35em * 2); }
.konta-wiersz-uwaga{ flex-shrink:0; font-size:0.82rem; }
.konta-wiersz-strzalka{ flex-shrink:0; font-size:1.15rem; opacity:0.35; transition:transform 0.15s ease, opacity 0.15s ease; }
.konta-wiersz.is-active .konta-wiersz-strzalka{ opacity:0.9; color:var(--page-accent, var(--teal)); transform:translateX(2px); }
.konta-dodaj-btn{
  margin-top:6px; background:none; border:1.5px dashed var(--line); color:var(--muted); border-radius:var(--radius-md);
  padding:8px 10px; cursor:pointer; font:inherit; font-size:0.82rem; font-weight:600; text-align:left;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.konta-dodaj-btn:hover{ border-color:var(--page-accent, var(--teal)); color:var(--page-accent, var(--teal)); }

.konta-szczegoly{
  flex:1; min-width:0; min-height:240px; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:20px 22px; position:sticky; top:20px;
}
.konta-szczegoly-puste{
  height:100%; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); padding:30px 16px;
}
.konta-panel-szczegoly{ display:none; }
.konta-panel-szczegoly.is-active{ display:block; animation:kontaSzczegolyWejscie 0.15s ease; }
@keyframes kontaSzczegolyWejscie{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.konta-pole{ display:flex; flex-direction:column; gap:5px; margin-bottom:16px; max-width:360px; }
.konta-pole input, .konta-pole select{ width:100%; }
.konta-szczegoly-akcje{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:760px){
  .konta-uklad{ flex-direction:column; }
  .konta-lista{ flex:0 0 auto; width:100%; }
  .konta-szczegoly{ width:100%; position:static; }
}

/* --- Testowa strona "Galerie + Układy wydruków" (admin/galerie_i_uklady_test.php):
   ten sam wzorzec konta-uklad/konta-lista/konta-szczegoly co wyżej, ale z DWIEMA
   listami (galerie po lewej, układy po prawej) otaczającymi wspólny środkowy
   panel szczegółów — stąd osobny kontener zamiast .konta-uklad wprost (ten ma
   sztywno założone dokładnie 2 dzieci we flex:0/flex:1 parze). --- */
.uw-test-trzykolumnowy{ display:flex; align-items:flex-start; gap:18px; margin-top:4px; }
.uw-test-trzykolumnowy .konta-lista{ flex:0 0 230px; }
.uw-test-trzykolumnowy .konta-szczegoly{ flex:1; min-width:0; }
.uw-test-kolumna-tytul{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); padding:0 2px 6px; }
/* Lista po prawej (układy wydruków) jest "zwrócona" w stronę środkowego
   panelu szczegółów, który leży na LEWO od niej — strzałka (znak „‹” już w
   HTML) więc przy zaznaczeniu też przesuwa się w LEWO, nie w prawo jak
   domyślna .konta-wiersz-strzalka. */
.konta-wiersz.is-active .konta-wiersz-strzalka--lewo{ transform:translateX(-2px); }
@media (max-width:980px){
  .uw-test-trzykolumnowy{ flex-direction:column; }
  .uw-test-trzykolumnowy .konta-lista{ flex:0 0 auto; width:100%; }
  .uw-test-trzykolumnowy .konta-szczegoly{ width:100%; position:static; order:-1; }
}

/* "Komory przewodnie" — wybrana pozycja na liście i środkowy panel szczegółów
   dostają dopasowaną kolorem, wyraźną ramkę (fioletowa dla galerii, zielona
   dla układów wydruku), żeby było od razu widać, że to jedna, powiązana
   całość, nawet gdy leżą po przeciwnych stronach środkowego panelu. Kolor
   panelu szczegółów przełącza JS (klasa doklejana przy otwarciu pozycji, patrz
   otworzPozycje() w admin/galerie_i_uklady_test.php) — sam typ pozycji
   (galeria/uklad) nie jest dostępny w czystym CSS bez tej klasy. */
.konta-wiersz.is-active[data-typ="galeria"]{ border-color:var(--purple); box-shadow:0 0 0 1px var(--purple); }
.konta-wiersz.is-active[data-typ="uklad"]{ border-color:var(--success); box-shadow:0 0 0 1px var(--success); }
.uw-test-trzykolumnowy .konta-szczegoly.uw-test-szczegoly--galeria{ border-color:var(--purple); border-width:2px; box-shadow:0 0 0 1px var(--purple); }
.uw-test-trzykolumnowy .konta-szczegoly.uw-test-szczegoly--uklad{ border-color:var(--success); border-width:2px; box-shadow:0 0 0 1px var(--success); }

/* Panel szczegółów podzielony na kilka grup (dostęp / zdjęcia / impreza i
   klient itd.) — CELOWO bez podpisów nad każdą z nich (treść w środku mówi
   sama za siebie), tylko odstęp między grupami — patrz .galeria-info-siatka
   wewnątrz każdej z nich, bez zmian. */
.uw-test-sekcja{ margin-bottom:22px; }
.uw-test-sekcja:last-of-type{ margin-bottom:0; }
/* Wiersz "wartości" (link+kopiuj, PIN+kopiuj) na STAŁEJ wysokości, żeby
   przyciski kopiowania obok pola tekstowego i obok dużego PIN-u (inny font/
   padding, więc naturalnie inna wysokość) wypadały na tym samym poziomie. */
.uw-test-wartosc-wiersz{ display:flex; align-items:center; gap:6px; height:38px; }
.uw-test-wartosc-wiersz input[type="text"]{ height:100%; box-sizing:border-box; }
.uw-test-wartosc-wiersz .galeria-pin-duzy{ height:100%; box-sizing:border-box; display:inline-flex; align-items:center; padding-top:0; padding-bottom:0; }
.uw-test-status-banner{
  display:block; padding:10px 16px; border-radius:var(--radius-md); font-weight:700; font-size:0.86rem;
  margin-bottom:20px;
}
.uw-test-status-banner--sukces{ background:var(--tone-success-bg); color:var(--tone-success-fg); }
.uw-test-status-banner--uwaga{ background:var(--tone-warning-bg); color:var(--tone-warning-fg); }
.uw-test-status-banner--blad{ background:var(--tone-danger-bg); color:var(--tone-danger-fg); }
.uw-test-akcje-rowne{ display:flex; gap:10px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.uw-test-akcje-rowne form{ margin:0; flex:1; display:flex; }
.uw-test-akcje-rowne > a, .uw-test-akcje-rowne form > button{ flex:1; width:100%; justify-content:center; }

/* --- Sprzęt / Pakiety / Dodatki / Tła / Szablony maili: sam wzorzec (lista
   POLA-detal-uklad po lewej, szczegóły w prawo), współdzielony między
   wszystkimi stronami, które go używają. CSS Grid (nie flex) — lista ma
   SZTYWNĄ szerokość 270px, panel szczegółów dostaje ZAWSZE całą resztę
   szerokości (minmax(0,1fr) — to "0" jest konieczne, inaczej długa,
   nieprzełamywalna treść w środku, np. adres URL czy nazwa pliku, potrafi
   rozepchnąć kolumnę szerzej niż jest miejsca i ścisnąć/rozjechać całą
   siatkę). Wcześniej to był display:flex, co przy niektórych połączeniach
   treści w panelu szczegółów (długie teksty, dodatkowe pola) potrafiło
   ścieśniać albo rozjeżdżać kolumny — grid o stałych torach nie ma tego
   problemu. */
.lista-detal-uklad{ display:grid; grid-template-columns:270px minmax(0,1fr); align-items:start; gap:20px; margin-top:4px; }
.lista-detal-lista{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.lista-detal-wiersz{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; font:inherit; color:inherit;
  background:none; border:1.5px solid transparent; border-radius:var(--radius-md); padding:8px 10px; cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease;
}
.lista-detal-wiersz:hover{ background:var(--bg-alt); }
.lista-detal-wiersz.is-active{ background:var(--bg-alt); border-color:var(--line); }
.lista-detal-miniatura{
  width:34px; height:34px; border-radius:7px; object-fit:cover; flex-shrink:0; background:var(--page-bg);
  display:flex; align-items:center; justify-content:center; font-size:1rem;
}
.lista-detal-tekst{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
.lista-detal-tekst strong{ font-size:0.85rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lista-detal-info{ font-size:0.72rem; color:var(--muted); }
.lista-detal-strzalka{ flex-shrink:0; font-size:1.15rem; opacity:0.35; transition:transform 0.15s ease, opacity 0.15s ease; }
.lista-detal-wiersz.is-active .lista-detal-strzalka{ opacity:0.9; color:var(--page-accent, var(--teal)); transform:translateX(2px); }
.lista-detal-dodaj{
  margin-top:6px; background:none; border:1.5px dashed var(--line); color:var(--muted); border-radius:var(--radius-md);
  padding:8px 10px; cursor:pointer; font:inherit; font-size:0.82rem; font-weight:600; text-align:left;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.lista-detal-dodaj:hover, .lista-detal-dodaj.is-active{ border-color:var(--page-accent, var(--teal)); color:var(--page-accent, var(--teal)); }
.lista-detal-wiersz-wrap{ display:flex; align-items:stretch; gap:4px; }
.lista-detal-strzalki{ display:flex; flex-direction:column; gap:2px; flex-shrink:0; justify-content:center; }
.lista-detal-strzalki .btn{ padding:3px 7px; min-width:0; line-height:1; }

.lista-detal-szczegoly{
  min-width:0; min-height:240px; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:20px 22px; position:sticky; top:20px;
}
.lista-detal-puste{
  height:100%; min-height:200px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; color:var(--muted); padding:30px 16px;
}
.lista-detal-panel{ display:none; }
.lista-detal-panel.is-active{ display:block; animation:listaDetalWejscie 0.15s ease; }
@keyframes listaDetalWejscie{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
.lista-detal-pole{ display:flex; flex-direction:column; gap:5px; margin-bottom:16px; max-width:380px; }
.lista-detal-pole input, .lista-detal-pole select, .lista-detal-pole textarea{ width:100%; }
.lista-detal-zdjecie-blok{ display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.lista-detal-podglad-duzy{ width:76px; height:76px; object-fit:cover; border-radius:8px; flex-shrink:0; border:1px solid var(--line); }
.lista-detal-akcje{ display:flex; gap:10px; flex-wrap:wrap; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
@media (max-width:760px){
  .lista-detal-uklad{ grid-template-columns:1fr; }
  .lista-detal-lista{ width:100%; }
  .lista-detal-szczegoly{ width:100%; position:static; }
}
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; margin-bottom:18px; }
.stat-card{ background:var(--surface); border-radius:var(--radius-md); padding:14px 16px; box-shadow:var(--shadow-card); border:1px solid var(--line); }
.stat-card a{ text-decoration:none; }
.stat-card .num{ font-family:'Anton',sans-serif; font-size:1.5rem; color:var(--orange); }
.stat-card .label{ font-size:0.76rem; color:var(--muted); }

/* --- siatka kafelkowa (bento) — statyczna wersja (bez przeciągania), przez
   klasy .dash-span-N na każdym elemencie; używana na pulpicie w
   .dash-alert/.dash-info-banner/.dash-urlop-banner (banery pokazywane
   POZA modyfikowalną siatką modułów, patrz .pulpit-grid niżej) i na
   admin/papier.php (cała strona, statyczny układ). --- */
.dash-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-bottom:16px; }
.dash-span-3{ grid-column:span 3; }
.dash-span-4{ grid-column:span 4; }
.dash-span-2{ grid-column:span 2; }
.dash-span-5{ grid-column:span 5; }
.dash-span-6{ grid-column:span 6; }
.dash-span-7{ grid-column:span 7; }
.dash-span-8{ grid-column:span 8; }
.dash-span-12{ grid-column:span 12; }
@media (max-width: 980px){
  .dash-grid > *{ grid-column:span 12 !important; }
}
@media (max-width: 700px){
  .dash-grid{ grid-template-columns:repeat(6,1fr); }
  .dash-grid > *{ grid-column:span 6 !important; }
  .dash-grid > .dash-kpi{ grid-column:span 3 !important; }
}

/* --- pulpit: prawdziwa dwuwymiarowa siatka (bento) — każdy kafelek ma
   JAWNĄ pozycję (--gx/--gy) i rozmiar (--gw/--gh) w jednostkach siatki,
   ustawiane przeciąganiem w edytorze (patrz admin/includes/panel_pulpit.php
   i .pulpit-edytor-* niżej) i zapisane osobno dla każdego konta w tabeli
   dashboard_moduly. To samo pozycjonowanie (custom properties na
   .pulpit-kafelek) jest współdzielone między żywym pulpitem (.pulpit-grid w
   admin/dashboard.php) i jego edytorem (.pulpit-edytor-siatka) — dzięki
   temu podgląd w edytorze ZAWSZE wygląda dokładnie tak, jak potem
   prawdziwy pulpit. Osobna klasa od .dash-grid/.dash-span-N powyżej, żeby
   nie zepsuć ich statycznego, niedraggowalnego użycia gdzie indziej. --- */
.pulpit-grid, .pulpit-edytor-siatka{
  display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:64px; gap:16px; margin-bottom:16px; position:relative;
}
.pulpit-kafelek{
  grid-column: var(--gx) / span var(--gw);
  grid-row: var(--gy) / span var(--gh);
  min-width:0; min-height:0;
}
.pulpit-grid .dash-card, .pulpit-grid .dash-kpi, .pulpit-grid .card,
.pulpit-edytor-siatka .dash-card, .pulpit-edytor-siatka .dash-kpi, .pulpit-edytor-siatka .card{ overflow-y:auto; }
/* Gdy admin rozciągnie kafelek dużo ponad to, ile faktycznie potrzebuje
   jego treść — zamiast zostawiać pustą przestrzeń pod treścią (blok
   przyklejony do góry), treść pionowo wyśrodkowuje się w dostępnej
   wysokości. Bezpieczne dla treści, która i tak WYPEŁNIA/przelewa kafelek
   (listy, formularze, długi czat) — justify-content:center nie ma wtedy
   żadnego efektu, bo nie ma wolnej przestrzeni do rozdzielenia; działa
   tylko dla treści krótszej niż kafelek. align-items zostaje domyślne
   (stretch), więc szerokość treści (formularze, tabele) nadal wypełnia
   kafelek — nie robimy tu wyśrodkowania w poziomie hurtowo, bo zwęziłoby
   to każdą listę/formularz do szerokości jego najkrótszej linijki.
   .rez-faktura-box ma WŁASNY układ (poziomy wiersz, patrz niżej) — wyłączony
   z tej reguły, żeby nie nadpisać mu flex-direction. */
.pulpit-grid .dash-card:not(.rez-faktura-box), .pulpit-grid .dash-kpi:not(.rez-faktura-box), .pulpit-grid .card:not(.rez-faktura-box),
.pulpit-edytor-siatka .dash-card:not(.rez-faktura-box), .pulpit-edytor-siatka .dash-kpi:not(.rez-faktura-box), .pulpit-edytor-siatka .card:not(.rez-faktura-box){
  display:flex; flex-direction:column; justify-content:center;
}

/* Widoczna kratka w tle EDYTORA (nie na prawdziwym pulpicie) — zwykłe
   elementy tej samej siatki, po jednej komórce, żeby zawsze idealnie
   pokrywały się z prawdziwymi kafelkami; bez interakcji, rysowane jako
   pierwsze w DOM, więc leżą POD kafelkami (patrz narysujTloSiatki() w
   panel_pulpit.php). */
.pulpit-siatka-komorka{
  background:var(--page-bg); border:1px dashed var(--line); border-radius:6px; pointer-events:none;
}
@media (max-width: 980px){
  .pulpit-grid, .pulpit-edytor-siatka{ grid-auto-rows:auto; }
  .pulpit-grid .pulpit-kafelek, .pulpit-edytor-siatka .pulpit-kafelek{ grid-column:1 / -1 !important; grid-row:auto !important; }
}
@media (max-width: 700px){
  .pulpit-grid, .pulpit-edytor-siatka{ grid-template-columns:repeat(6,1fr); }
  .pulpit-grid .pulpit-kafelek--kpi, .pulpit-edytor-siatka .pulpit-kafelek--kpi{ grid-column:span 3 !important; }
}

/* --- edytor pulpitu: siatka po lewej (nieco pomniejszona — mniejszy rząd i
   odstęp niż na prawdziwym pulpicie, żeby zmieściła się obok panelu z
   modułami do dodania), panel z modułami po prawej, zawsze widoczny (sticky)
   dzięki czemu dodawanie modułu nie wymaga przewijania w górę/w dół. Pasek
   akcji na dole jest TEŻ sticky (ten sam wzór co .hero-edytor-akcje w
   panel_hero.php), więc "Zapisz układ" jest zawsze pod ręką. --- */
.pulpit-edytor-siatka{ grid-auto-rows:54px; gap:10px; }
.pulpit-edytor-uklad{ display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; }
.pulpit-edytor-glowna{ min-width:0; }
.pulpit-edytor-panel-boczny{
  background:var(--page-bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:12px;
  position:sticky; top:12px; max-height:calc(100vh - 160px); overflow-y:auto; min-width:0;
}
.pulpit-edytor-grupa-lista{ display:flex; flex-direction:column; gap:4px; padding:8px !important; }
.pulpit-edytor-modul-wiersz{
  display:flex; align-items:flex-start; gap:8px; padding:6px 6px; border-radius:var(--radius-sm); cursor:pointer;
}
.pulpit-edytor-modul-wiersz:hover{ background:var(--surface); }
.pulpit-edytor-modul-wiersz input{ width:16px; height:16px; margin-top:2px; cursor:pointer; flex-shrink:0; }
.pulpit-edytor-modul-tresc{ min-width:0; }
.pulpit-edytor-modul-tresc strong{ display:block; font-size:0.78rem; line-height:1.3; }
.pulpit-edytor-modul-tresc .hint{ display:block; font-size:0.68rem; line-height:1.3; margin-top:1px; }
.pulpit-edytor-usun{
  position:absolute; top:4px; right:4px; width:18px; height:18px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.06); color:var(--muted); font-size:0.62rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.pulpit-edytor-usun:hover{ background:var(--rose); color:#fff; }
.pulpit-edytor-akcje{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:16px; padding:12px 16px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  position:sticky; bottom:16px; box-shadow:var(--shadow-pop); z-index:5;
}
@media (max-width:1100px){
  .pulpit-edytor-uklad{ grid-template-columns:1fr; }
  .pulpit-edytor-panel-boczny{ position:static; max-height:none; }
}

.dash-alert{
  border-radius:var(--radius-lg); padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:12px; color:#fff; background:var(--amber);
}
.dash-alert--calm{ background:var(--success); }
.dash-alert strong{ font-family:'Work Sans',sans-serif; font-size:1.05rem; font-weight:700; }
.dash-alert p{ margin:2px 0 0; font-size:0.82rem; opacity:0.92; }
.dash-alert .btn{ background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.5); color:#fff; }
.dash-alert .btn:hover{ background:rgba(255,255,255,0.3); }

/* --- pulpit: baner urlopu — zawsze widoczny (nie jest modułem, więc nie
   da się go wyłączyć/schować w "Dostosuj pulpit"), bo to ważna informacja. --- */
.dash-urlop-banner{
  border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:#fff; background:var(--orange);
}
.dash-urlop-banner-ikona{ font-size:1.8rem; line-height:1; flex-shrink:0; }
.dash-urlop-banner strong{ font-family:'Work Sans',sans-serif; font-size:1.05rem; font-weight:700; display:block; }
.dash-urlop-banner p{ margin:2px 0 0; font-size:0.82rem; opacity:0.92; }
.dash-urlop-banner .btn{ margin-left:auto; background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.5); color:#fff; }
.dash-urlop-banner .btn:hover{ background:rgba(255,255,255,0.3); }

/* --- pulpit: baner auto-odpowiedzi — ten sam wzór co baner urlopu, inny
   kolor (niebieski), żeby dało się je odróżnić, gdy oba są widoczne naraz. --- */
.dash-info-banner{
  border-radius:var(--radius-lg); padding:16px 20px; margin-bottom:16px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  color:#fff; background:var(--blue);
}
.dash-info-banner-ikona{ font-size:1.8rem; line-height:1; flex-shrink:0; }
.dash-info-banner strong{ font-family:'Work Sans',sans-serif; font-size:1.05rem; font-weight:700; display:block; }
.dash-info-banner p{ margin:2px 0 0; font-size:0.82rem; opacity:0.92; }
.dash-info-banner .btn{ margin-left:auto; background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.5); color:#fff; }
.dash-info-banner .btn:hover{ background:rgba(255,255,255,0.3); }

.dash-kpi{
  border-radius:var(--radius-md); padding:14px 12px 12px; background:var(--surface); position:relative; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:3px;
  text-decoration:none; border:1px solid var(--line); border-top:3px solid var(--kpi-color, var(--teal));
  transition:border-color 0.12s ease, background 0.12s ease;
}
.dash-kpi:hover{ background:var(--page-bg); }
.dash-kpi .dash-kpi-num{ font-family:'Anton',sans-serif; font-size:1.5rem; line-height:1; color:var(--kpi-color, var(--teal)); }
.dash-kpi .dash-kpi-label{ font-size:0.68rem; line-height:1.25; color:var(--muted); font-weight:600; }
.dash-kpi--amber{ --kpi-color:var(--amber); }
.dash-kpi--teal{ --kpi-color:var(--teal-deep); }
.dash-kpi--rose{ --kpi-color:var(--rose); }
.dash-kpi--blue{ --kpi-color:var(--blue); }
.dash-kpi--purple{ --kpi-color:var(--purple); }
.dash-kpi--green{ --kpi-color:var(--success); }

.dash-card{ background:var(--surface); border-radius:var(--radius-lg); padding:20px; box-shadow:var(--shadow-card); border:1px solid var(--line); height:100%; }
.dash-card h2{ display:flex; align-items:center; gap:8px; }
.dash-card-accent{ width:8px; height:8px; border-radius:50%; display:inline-block; }

.dash-bar-row{ margin-bottom:12px; }
.dash-bar-row-head{ display:flex; justify-content:space-between; font-size:0.82rem; margin-bottom:4px; }
.dash-bar-track{ background:var(--page-bg); border-radius:999px; height:9px; overflow:hidden; }
.dash-bar-fill{ height:100%; border-radius:999px; }

/* --- pulpit: kafelki grupy "Narzędzia" (zegar / kalkulator / notatnik / stoper) --- */
.dash-zegar-karta{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:4px; height:100%; }
.dash-zegar-czas{ font-family:'Anton',sans-serif; font-size:2rem; line-height:1; color:var(--teal-deep); font-variant-numeric:tabular-nums; }
.dash-zegar-data{ font-size:0.82rem; color:var(--muted); text-transform:capitalize; }

.dash-kalkulator-karta{ display:flex; flex-direction:column; height:100%; gap:8px; }
.dash-kalkulator-wyswietlacz{
  background:var(--page-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px;
  font-family:'Anton',sans-serif; font-size:1.4rem; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dash-kalkulator-przyciski{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; flex:1; }
.dash-kalkulator-btn{
  border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--page-bg); color:var(--ink);
  font-size:0.9rem; cursor:pointer; min-height:32px;
}
.dash-kalkulator-btn:hover{ border-color:var(--teal); }
.dash-kalkulator-btn--funkcja{ color:var(--muted); font-weight:600; }
.dash-kalkulator-btn--dzialanie{ background:var(--teal); color:#fff; border-color:var(--teal); }
.dash-kalkulator-btn--dzialanie:hover{ background:var(--teal-deep); border-color:var(--teal-deep); }
.dash-kalkulator-btn--rowna{ background:var(--teal-deep); color:#fff; border-color:var(--teal-deep); }

.dash-notatnik-form{ display:flex; flex-direction:column; height:calc(100% - 30px); }
.dash-notatnik-tresc{ flex:1; resize:none; width:100%; font-size:0.86rem; padding:8px 10px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--page-bg); color:var(--ink); }

.dash-stoper-karta{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; height:100%; }
.dash-stoper-czas{ font-family:'Anton',sans-serif; font-size:1.8rem; line-height:1; color:var(--teal-deep); font-variant-numeric:tabular-nums; }
.dash-stoper-przyciski{ display:flex; gap:8px; }

.modul-uklad-item{ display:flex; align-items:center; gap:12px; background:var(--page-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 14px; cursor:grab; }
.modul-uklad-item--przeciagany{ opacity:0.4; }
.modul-uklad-item--ukryty{ opacity:0.55; }
.modul-uklad-uchwyt{ font-size:1.1rem; color:var(--muted); cursor:grab; user-select:none; }
.modul-uklad-widocznosc input{ width:18px; height:18px; cursor:pointer; }
.modul-uklad-opis{ flex:1; min-width:0; }
.modul-uklad-opis strong{ display:block; font-size:0.86rem; }
.modul-uklad-opis .hint{ margin-top:2px; }
.modul-uklad-szerokosc{ font-size:0.78rem; padding:6px 9px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--surface); max-width:170px; }

/* --- edytor układu pulpitu: kafelki mają WŁASNĄ, jawną pozycję/rozmiar
   (patrz .pulpit-kafelek wyżej) — podczas przeciągania/zmiany rozmiaru
   porusza/zmienia się TYLKO aktywny kafelek (przez bezpośrednią zmianę
   JEGO WŁASNYCH --gx/--gy/--gw/--gh), żadne inne kafelki nigdy nie są
   ruszane automatycznie — stąd brak chaosu, który był w starej wersji
   opartej na CSS Grid z auto-flow i przestawianiu węzłów DOM w locie.
   Upuszczenie/rozciągnięcie w zajęte miejsce po prostu się nie udaje
   (kafelek wraca na poprzednie miejsce) — patrz JS w panel_pulpit.php. --- */
.pulpit-kafelek--edytor:not([hidden]){
  position:relative; display:flex; flex-direction:column; background:var(--surface); border:1.5px solid var(--line);
  border-radius:var(--radius-md); padding:8px 10px; overflow:hidden; touch-action:none; box-sizing:border-box;
  transition:box-shadow 0.15s ease, border-color 0.15s ease;
}
.pulpit-kafelek--edytor:hover{ border-color:var(--teal); }
.pulpit-kafelek--edytor.jest-przeciagany{ z-index:30; box-shadow:0 12px 32px rgba(0,0,0,0.24); border-color:var(--teal); cursor:grabbing; opacity:0.97; }
.pulpit-kafelek--edytor.jest-nieprawidlowe{ border-color:var(--rose) !important; }
.pulpit-edytor-glowa{ display:flex; align-items:flex-start; gap:6px; padding-right:16px; }
.pulpit-edytor-uchwyt{ cursor:grab; color:var(--muted); font-size:0.95rem; flex-shrink:0; user-select:none; padding-top:1px; touch-action:none; }
.pulpit-edytor-uchwyt:active{ cursor:grabbing; }
.pulpit-edytor-tresc{ flex:1; min-width:0; }
.pulpit-edytor-tresc strong{ display:block; font-size:0.76rem; line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pulpit-edytor-tresc .hint{ display:block; font-size:0.64rem; line-height:1.25; margin-top:1px; overflow:hidden; text-overflow:ellipsis; }
.pulpit-edytor-rozmiar{ margin-top:auto; padding-top:4px; font-size:0.6rem; color:var(--muted); font-weight:600; }
.pulpit-edytor-uchwyt-rozmiar{
  position:absolute; right:0; bottom:0; width:20px; height:20px; cursor:nwse-resize; touch-action:none;
  display:flex; align-items:flex-end; justify-content:flex-end; padding:4px;
}
.pulpit-edytor-uchwyt-rozmiar::after{
  content:''; width:8px; height:8px; border-right:2px solid var(--line); border-bottom:2px solid var(--line); border-radius:0 0 3px 0;
}
.pulpit-kafelek--edytor:hover .pulpit-edytor-uchwyt-rozmiar::after{ border-color:var(--teal); }

.pulpit-edytor-ramka-btn{
  position:absolute; top:4px; right:26px; width:18px; height:18px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.06); color:var(--muted); font-size:0.68rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.pulpit-edytor-ramka-btn:hover{ background:var(--teal); color:#fff; }

/* --- popover ramki: JEDEN, współdzielony egzemplarz na całą stronę
   (position:fixed), otwierany obok klikniętego przycisku ⬚ na kafelku — ten
   sam wzorzec co dropdown tła fotograficznego w edytorze układu wydruku
   klienta (patrz uklad_wydruku.php): zawsze jeden, pozycjonowany przy
   wyzwalaczu, zamykany kliknięciem na zewnątrz. --- */
.pulpit-ramka-popover:not([hidden]){
  position:fixed; z-index:60; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-pop); padding:10px; display:flex; flex-direction:column; gap:8px; width:180px;
}
.pulpit-ramka-grubosci{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.pulpit-ramka-grubosc-btn{
  font-size:0.72rem; padding:5px 6px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--page-bg); color:var(--ink); cursor:pointer;
}
.pulpit-ramka-grubosc-btn:hover{ border-color:var(--teal); }
.pulpit-ramka-grubosc-btn.jest-aktywna{ background:var(--teal); border-color:var(--teal); color:#fff; }
.pulpit-ramka-kolor-wiersz{ display:flex; gap:6px; align-items:center; }
.pulpit-ramka-kolor-wiersz input[type="color"]{ width:32px; height:28px; padding:0; border:1px solid var(--line); border-radius:var(--radius-sm); cursor:pointer; flex-shrink:0; }
.pulpit-ramka-kolor-wiersz input[type="text"]{ flex:1; min-width:0; font-size:0.76rem; padding:5px 7px; border-radius:var(--radius-sm); border:1px solid var(--line); background:var(--page-bg); color:var(--ink); }

/* Sekcja płaska (bez ciężkiej ramki-karty) — spójna z "flat" wyglądem Analityki/Magazynu/Papieru. */
.opinie-sekcja{ margin:0; }
.opinie-sekcja-tytul{ margin:0 0 4px; font-size:1.15rem; }

.opinie-licznik-badge{ border-radius:999px; font-size:0.72rem; padding:2px 8px; margin-left:4px; color:#fff; }
.opinie-licznik-badge--amber{ background:var(--amber); }

.opinie-karta-moderacji{
  margin-top:10px; padding:16px 18px; border-radius:var(--radius-md);
  background:var(--tone-warning-bg, var(--bg-alt)); border:1px solid var(--line);
}

.opinie-badge-ikona{ display:inline-flex; align-items:center; gap:4px; }

/* Przycisk główny w kolorze akcentu strony (teal), zamiast domyślnego pomarańczowego .btn-accent. */
.opinie-btn-primary{
  display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:none;
  border-radius:999px; background:var(--page-accent, var(--teal)); color:#fff;
  font-size:0.85rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.opinie-btn-primary:hover{ filter:brightness(0.94); }
.opinie-btn-primary--small{ padding:7px 14px; font-size:0.8rem; }

.opinie-header{ display:flex; gap:20px; align-items:center; flex-wrap:wrap; margin-bottom:16px; padding-bottom:16px; border-bottom:1px solid var(--line); }
.opinie-rating-summary{ display:flex; align-items:center; gap:12px; background:linear-gradient(135deg, var(--opinie-grad-1), var(--opinie-grad-2)); border:1px solid var(--opinie-border); border-radius:var(--radius-md); padding:10px 18px; flex-shrink:0; }
.opinie-rating-num{ font-family:'Anton',sans-serif; font-size:2.1rem; line-height:1; color:var(--amber); }
.opinie-rating-stars{ color:var(--amber); letter-spacing:2px; font-size:1rem; line-height:1; margin-bottom:2px; }
.opinie-header-text{ flex:1; min-width:220px; }
.opinie-header-text h2{ margin-bottom:4px; }

.checklista-dwie-kolumny{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
@media (max-width:900px){ .checklista-dwie-kolumny{ grid-template-columns:1fr; } }
.checklista-kolumna-tytul{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:1rem; margin:4px 0 12px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.checklista-kategoria-card{ border-left:4px solid var(--amber); }
.checklista-kategoria-card--sprzet{ border-left-color:var(--teal); }
.checklista-kategoria-card--dodatek{ border-left-color:var(--rose); }
.checklista-podmodul-nazwa{ font-size:0.95rem; }
.checklista-kategoria-head{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; padding-bottom:12px; border-bottom:1px solid var(--line); }
.checklista-kategoria-nazwa-form{ display:flex; align-items:center; gap:8px; flex:1; min-width:220px; }
.checklista-kategoria-nazwa-input{ font-family:'Work Sans',sans-serif; font-weight:700; font-size:1rem; border:1.5px solid transparent; border-radius:var(--radius-sm); padding:4px 8px; background:transparent; flex:1; min-width:120px; transition:border-color 0.15s ease, background 0.15s ease; }
.checklista-kategoria-nazwa-input:hover, .checklista-kategoria-nazwa-input:focus{ border-color:var(--line); background:var(--surface); outline:none; }
.checklista-kategoria-akcje{ display:flex; gap:6px; flex-wrap:wrap; }
.checklista-pozycja{ margin-bottom:6px; }

.dash-event-row{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--page-bg); }
.dash-event-row:last-child{ border-bottom:none; }
.dash-event-date{
  flex-shrink:0; width:46px; height:46px; border-radius:var(--radius-sm); background:var(--teal-deep); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; font-family:'Anton',sans-serif;
}
.dash-event-date .d{ font-size:1rem; line-height:1; }
.dash-event-date .m{ font-size:0.55rem; text-transform:uppercase; opacity:0.85; }
.dash-event-row--soon .dash-event-date{ background:var(--rose); }

.checklista-modul-card{ border-left:4px solid var(--amber); }
.checklista-modul-head{ display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px; }
.checklista-modul-postep{ display:flex; align-items:center; gap:8px; min-width:160px; }
.checklista-modul-postep-track{ width:100px; height:7px; background:var(--page-bg); border-radius:999px; overflow:hidden; }
.checklista-modul-postep-fill{ height:100%; background:var(--amber); border-radius:999px; transition:width 0.2s ease; }

.rez-checklist-columns{ column-count:2; column-gap:28px; }
.rez-checklist-group{ break-inside:avoid; margin-bottom:16px; }
.rez-checklist-item{ display:flex; align-items:flex-start; gap:8px; font-size:0.85rem; font-weight:400; padding:5px 6px; border-radius:var(--radius-sm); cursor:pointer; transition:background 0.12s ease; }
.rez-checklist-item:hover{ background:var(--page-bg); }
.rez-checklist-item input{ margin-top:3px; flex-shrink:0; }
.rez-checklist-item.is-checked span{ color:var(--muted); text-decoration:line-through; }
.rez-checklist-subtitle{ font-size:0.72rem; font-weight:700; color:var(--muted); margin:8px 0 2px; padding-left:2px; }
@media (max-width: 700px){
  .rez-checklist-columns{ column-count:1; }
}

.checklista-modul-notatka{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.checklista-modul-notatka-label{ display:block; font-size:0.8rem; font-weight:700; margin-bottom:6px; }

.dash-calendar-weekdays{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:0.68rem; color:var(--muted); font-weight:700; margin-bottom:4px; }
.dash-calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.dash-calendar-cell{
  aspect-ratio:1/1; border-radius:var(--radius-sm); background:var(--page-bg); padding:4px;
  display:flex; flex-direction:column; align-items:center; gap:2px; position:relative;
}
.dash-calendar-cell--puste{ background:transparent; }
.dash-calendar-cell--dzis{ border:1.5px solid var(--teal-deep); }
.dash-calendar-cell--zajety .dash-calendar-day-num{ font-weight:800; color:var(--ink); }
.dash-calendar-day-num{ font-size:0.68rem; color:var(--muted); font-weight:600; }
.dash-calendar-dot{ width:7px; height:7px; border-radius:50%; display:inline-block; }
.dash-calendar-cell .dash-calendar-dot{ margin:0 1px; }
.dash-calendar-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:10px; font-size:0.72rem; color:var(--muted); align-items:center; }
.dash-calendar-legend .dash-calendar-dot{ margin-right:4px; vertical-align:middle; }

.dash-budki-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
.dash-budka-box{ border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; }
.dash-budka-box textarea{ font-size:0.8rem; resize:vertical; }
@media (max-width: 600px){
  .dash-calendar-day-num{ font-size:0.6rem; }
  .dash-calendar-cell{ border-radius:5px; padding:2px; }
}

.price-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:8px 16px; }
.price-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 0; border-bottom:1px solid var(--page-bg); font-size:0.82rem; }
.price-row:last-child{ border-bottom:none; }
.price-row .hint{ display:block; font-size:0.7rem; color:var(--muted); font-weight:400; }
.group-title{ font-weight:700; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); margin:12px 0 4px; }
.group-title:first-child{ margin-top:0; }
.hint{ font-size:0.7rem; color:var(--muted); font-weight:400; }

/* --- ikonka "i" z opisem modułu (dymek pokazywany po kliknięciu) --- */
.info-ikona-wrap{ position:relative; display:inline-flex; }
.info-ikona{
  width:17px; height:17px; border-radius:50%; border:1.5px solid var(--muted); background:none; color:var(--muted);
  font-size:0.68rem; font-weight:700; font-style:italic; font-family:Georgia,serif; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0; flex-shrink:0;
  transition:border-color 0.15s ease, color 0.15s ease;
}
.info-ikona:hover{ border-color:var(--page-accent, var(--teal)); color:var(--page-accent, var(--teal)); }
.info-popover{
  display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:40; width:280px; max-width:min(280px,80vw);
  background:#16221F; color:#fff; font-size:0.76rem; font-weight:400; text-transform:none; letter-spacing:normal;
  line-height:1.5; padding:10px 12px; border-radius:var(--radius-sm); box-shadow:var(--shadow-pop);
}
.info-ikona-wrap.jest-otwarte .info-popover{ display:block; }

/* --- forms --- */
label{ display:block; font-weight:600; font-size:0.78rem; margin-bottom:4px; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=tel], input[type=date], input[type=time], textarea, select{
  padding:8px 11px; border:1px solid var(--line); border-radius:var(--radius-sm); font-family:inherit; font-size:0.85rem; background:var(--surface); color:var(--ink);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
textarea, select{ width:100%; }
input[type=number]{ width:88px; }
input[type=text], input[type=email], input[type=tel], input[type=date]{ width:100%; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--teal); box-shadow:0 0 0 3px var(--focus-ring); }
.form-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }
.form-row label{ margin:0; }
.checkbox-line{ display:flex; align-items:center; gap:8px; font-weight:600; font-size:0.85rem; }
.addon-check{ display:inline-flex; align-items:center; gap:5px; font-weight:400; font-size:0.78rem; margin:2px 10px 2px 0; }

/* --- ładniejszy przełącznik "aktywny" (zamiast gołego checkboksa) --- */
.toggle-pill{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:0.78rem; font-weight:600; margin:2px 10px 2px 0; }
.toggle-pill input{ position:absolute; opacity:0; width:1px; height:1px; }
.toggle-pill-suwak{
  position:relative; width:38px; height:22px; border-radius:999px; background:var(--line);
  transition:background 0.15s ease; flex-shrink:0;
}
.toggle-pill-suwak::before{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.25); transition:transform 0.15s ease;
}
.toggle-pill input:checked + .toggle-pill-suwak{ background:var(--success); }
.toggle-pill input:checked + .toggle-pill-suwak::before{ transform:translateX(16px); }
.toggle-pill input:focus-visible + .toggle-pill-suwak{ outline:2px solid var(--page-accent, var(--teal)); outline-offset:2px; }

/* --- accordions (pakiety / dodatki / kody) --- */
.pakiet{ border:1px solid var(--line); border-left:3px solid var(--page-accent, var(--teal)); border-radius:var(--radius-sm); margin-bottom:8px; overflow:hidden; }
.pakiet--aktywny{ border-left-color:var(--success); background:var(--pakiet-aktywny-bg); }
.pakiet--aktywny summary{ background:var(--selected-bg); }
.pakiet--nieaktywny{ opacity:0.6; }
.pakiet summary{ list-style:none; cursor:pointer; padding:10px 14px; display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:0.85rem; background:var(--page-bg); }
.pakiet summary::-webkit-details-marker{ display:none; }
.pakiet summary::after{ content:'▾'; color:var(--muted); font-weight:400; transition:transform 0.15s ease; }
.pakiet[open] summary::after{ transform:rotate(180deg); }
.pakiet-body{ padding:14px; border-top:1px solid var(--line); }
.pakiet-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.pakiet-row label{ margin:0; white-space:nowrap; }
.pakiet-akcje{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px; }

/* =========================================================
   CZAT — wątki wiadomości (dział "Wiadomości" i "Rozmowa z klientem"
   w szczegółach rezerwacji), stylizowane na komunikator (Messenger/
   Telegram/WhatsApp): lista rozmów + dymki + kompozytor na dole.
   ========================================================= */

/* --- dwukolumnowy układ "skrzynki" (lista rozmów | otwarta rozmowa) --- */
.inbox-layout{
  display:grid; grid-template-columns:340px 1fr; grid-template-rows:minmax(0,1fr); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-card); min-height:420px;
}
.inbox-layout.ma-otwarte-zalaczniki,
.inbox-layout.ma-otwarte-inne-watki{ grid-template-columns:340px 1fr 260px; }
@media (min-width:861px){
  /* Dopóki żadna konkretna rozmowa nie jest otwarta, lista rozmówców
     zajmuje większość szerokości modułu (tematy + fragment wiadomości —
     patrz .inbox-item-podglad-tresc niżej), żeby łatwo było odnaleźć
     właściwy wątek — po kliknięciu w rozmowę wraca do wąskiej kolumny
     ustawionej wyżej. */
  .inbox-layout:not(.ma-otwarta-rozmowe){ grid-template-columns:4fr 1fr; }
}
@media (max-width:860px){
  /* Na telefonie okno wiadomości ma zajmować cały ekran — zamiast próbować
     "przykryć" pasek boczny/górny/dolny warstwą position:fixed (co na
     części przeglądarek mobilnych potrafi wymknąć się spod overflow:hidden
     i wywołać poziomy scroll całej strony), po prostu CHOWAMY resztę
     chrome panelu na tej jednej stronie — dzięki :has() rozpoznajemy, że
     jesteśmy w dziale Wiadomości, bez żadnej dodatkowej klasy na <body>. */
  body:has(.inbox-layout) .admin-sidebar,
  body:has(.inbox-layout) .admin-sidebar-footer,
  body:has(.inbox-layout) .admin-topbar{
    display:none;
  }
  body:has(.inbox-layout){ overflow-x:hidden; }
  body:has(.inbox-layout) .admin-main{
    padding:0; margin:0; width:100%; max-width:100vw; overflow-x:hidden; box-sizing:border-box;
  }
  .inbox-layout{
    width:100%; max-width:100vw; box-sizing:border-box; overflow-x:hidden;
    height:100vh; height:100dvh;
    grid-template-columns:1fr; min-height:0; border-radius:0; border:none;
  }
  .inbox-layout > *{ min-width:0; max-width:100%; }
  .inbox-layout.ma-otwarte-zalaczniki,
  .inbox-layout.ma-otwarte-inne-watki{ grid-template-columns:1fr; }
  .inbox-layout.ma-otwarta-rozmowe .inbox-lista{ display:none; }
  .inbox-layout:not(.ma-otwarta-rozmowe) .inbox-rozmowa{ display:none; }
  .inbox-layout.ma-otwarte-zalaczniki .inbox-lista,
  .inbox-layout.ma-otwarte-zalaczniki .inbox-rozmowa,
  .inbox-layout.ma-otwarte-inne-watki .inbox-lista,
  .inbox-layout.ma-otwarte-inne-watki .inbox-rozmowa{ display:none; }
  .inbox-layout.ma-nowa-wiadomosc .inbox-lista{ display:none; }
}
.inbox-mobile-wyjscie{
  display:none; align-items:center; gap:4px; text-decoration:none; color:inherit; font-weight:600; font-size:0.82rem; flex-shrink:0;
  background:none; border:none; padding:0; cursor:pointer; font-family:inherit;
}

/* --- boczna, rozwijana kolumna z załącznikami całej rozmowy --- */
.inbox-zalaczniki-panel{ display:none; border-left:1px solid var(--line); background:var(--bg-alt); overflow-y:auto; height:100%; }
.inbox-layout.ma-otwarte-zalaczniki .inbox-zalaczniki-panel{ display:block; }

/* --- boczna, rozwijana kolumna z innymi wątkami tej samej osoby (adres
   e-mail) — ten sam mechanizm co załączniki wyżej, osobna klasa/przełącznik,
   żeby oba panele nie mogły pokazać się naraz w tej samej kolumnie. --- */
.inbox-inne-watki-panel{ display:none; border-left:1px solid var(--line); background:var(--bg-alt); overflow-y:auto; height:100%; }
.inbox-layout.ma-otwarte-inne-watki .inbox-inne-watki-panel{ display:block; }

/* --- panel "Nowa wiadomość": zajmuje to samo miejsce co otwarta rozmowa --- */
.inbox-nowa-wiadomosc-panel{ display:none; flex-direction:column; min-height:0; overflow-y:auto; }
.inbox-layout.ma-nowa-wiadomosc .inbox-rozmowa{ display:none; }
.inbox-layout.ma-nowa-wiadomosc .inbox-nowa-wiadomosc-panel{ display:flex; }
.inbox-nowa-wiadomosc-naglowek{
  padding:12px 18px; border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; gap:10px; flex-shrink:0;
}
.inbox-zalaczniki-naglowek{
  padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; font-size:0.86rem;
  display:flex; align-items:center; gap:10px;
}
.inbox-zalaczniki-lista{ display:flex; flex-direction:column; }
.inbox-zalacznik-wiersz{ display:flex; gap:10px; align-items:center; padding:10px 14px; text-decoration:none; color:inherit; border-bottom:1px solid var(--line); }
.inbox-zalacznik-wiersz:hover{ background:var(--surface); }
.inbox-zalacznik-ikona{ font-size:1.2rem; flex-shrink:0; }
.inbox-zalacznik-info{ min-width:0; display:flex; flex-direction:column; gap:2px; }
.inbox-zalacznik-nazwa{ font-size:0.8rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.inbox-zalacznik-meta{ font-size:0.68rem; color:var(--muted); }

/* Kolumna listy rozmów jest teraz kolumną flex (nie samym scrollowanym
   blokiem) — dzięki temu środkowa część (.inbox-lista-watki) rośnie i
   wypełnia dostępną wysokość, a pasek stronicowania zawsze ląduje na samym
   dole panelu, nawet gdy wątków na stronie jest mało i lista nie sięga do
   końca (samo position:sticky tego nie dawało — "przykleja się" tylko przy
   przewijaniu, nie dokleja elementu do dołu krótkiej zawartości). */
.inbox-lista{ border-right:1px solid var(--line); overflow:hidden; height:100%; background:var(--bg-alt); display:flex; flex-direction:column; }
/* Nagłówek + (opcjonalnie) pasek masowego zaznaczania — stały blok na górze
   (już nie trzeba position:sticky, bo scrolluje się tylko .inbox-lista-watki
   poniżej, nie cała kolumna). */
.inbox-lista-lepki{ flex-shrink:0; z-index:2; background:var(--surface); }
.inbox-lista-naglowek{
  padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.inbox-lista-naglowek h2{ margin:0; }
.inbox-lista-pusta{ padding:24px 16px; color:var(--muted); font-size:0.85rem; text-align:center; }
.inbox-lista-watki{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }

.btn-ikona{ width:32px; height:32px; padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:0.95rem; flex-shrink:0; }

/* Stronicowanie listy rozmów (15/stronę), zakres "X–Y z Z" na wzór Gmaila —
   zwykły (nie sticky) ostatni element kolumny flex, więc zawsze jest na
   samym dole panelu. */
.inbox-lista-stronicowanie{
  flex-shrink:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 16px; border-top:1px solid var(--line); background:var(--surface);
}
.inbox-lista-stronicowanie-zakres{ font-size:0.76rem; color:var(--muted); }
.inbox-lista-stronicowanie-strzalki{ display:flex; gap:6px; }
.inbox-lista-stronicowanie-strzalki .btn-ikona{ font-size:1.1rem; line-height:1; }
.inbox-lista-stronicowanie-strzalki .jest-wylaczony{
  opacity:0.35; cursor:default; pointer-events:none;
}

.inbox-lista-filtr-spam{
  display:block; padding:8px 16px; text-align:center; text-decoration:none;
  background:var(--tone-warning-bg); color:var(--tone-warning-fg); font-size:0.78rem; font-weight:600;
  border-bottom:1px solid var(--line);
}
.inbox-lista-filtr-spam:hover{ filter:brightness(0.97); }
.inbox-lista-filtr-spam.jest-aktywny{ background:var(--bg-alt); color:var(--ink); }
.inbox-item-spam-znacznik{ margin-left:4px; font-size:0.78rem; }

.inbox-lista-szukaj{ padding:8px 12px; border-bottom:1px solid var(--line); background:var(--surface); }
.inbox-lista-szukaj input{
  width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--bg-alt); color:var(--ink); font-size:0.82rem;
}
.inbox-lista-szukaj input:focus{ outline:none; border-color:var(--page-accent, var(--teal)); background:var(--surface); }

.inbox-lista-nowe-gdzie-indziej{
  display:block; flex-shrink:0; padding:8px 12px; text-align:center; text-decoration:none;
  background:var(--tone-warning-bg); color:var(--tone-warning-fg); font-size:0.76rem; font-weight:600;
  border-bottom:1px solid var(--line);
}
.inbox-lista-nowe-gdzie-indziej:hover{ filter:brightness(0.97); }

/* Masowe zaznaczanie/usuwanie wątków — patrz JS w admin/zapytania.php. */
.inbox-zaznaczanie-pasek{
  align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
  padding:10px 16px; background:var(--tone-warning-bg); border-bottom:1px solid var(--line); margin:0;
  box-sizing:border-box; width:100%;
}
.inbox-zaznaczanie-pasek:not([hidden]){ display:flex; }
.inbox-zaznaczanie-pasek #zaznaczanieLicznik{ font-size:0.82rem; font-weight:600; color:var(--tone-warning-fg); }
.inbox-zaznaczanie-akcje{ display:flex; gap:6px; flex-wrap:wrap; }
.inbox-item-wiersz{ display:contents; }
.inbox-item-checkbox{ display:none; }
.inbox-lista.jest-zaznaczanie .inbox-item-wiersz{ display:flex; align-items:center; gap:6px; padding-left:12px; }
.inbox-lista.jest-zaznaczanie .inbox-item-checkbox{
  display:block; flex-shrink:0; width:17px; height:17px; cursor:pointer; accent-color:var(--page-accent, var(--teal));
}
.inbox-lista.jest-zaznaczanie .inbox-item-wiersz[data-typ="rezerwacja"]{ opacity:0.5; }
.inbox-lista.jest-zaznaczanie .inbox-item{ flex:1; min-width:0; }

.inbox-item{
  display:flex; gap:10px; padding:12px 16px; text-decoration:none; color:inherit;
  border-bottom:1px solid var(--line); border-left:3px solid transparent; align-items:flex-start; transition:background 0.12s ease;
}
.inbox-item:hover{ background:var(--surface); }
.inbox-item.is-active{ background:var(--surface); box-shadow:inset 3px 0 0 var(--page-accent, var(--teal)); }
.inbox-item.is-unread{ background:var(--tone-warning-bg); border-left-color:var(--danger); }
.inbox-item.is-unread:hover{ filter:brightness(0.97); }
.inbox-item.is-unread.is-active{ background:var(--surface); }
.inbox-item.is-unread .inbox-item-nazwa{ font-weight:800; color:var(--tone-warning-fg); }
.inbox-item.is-unread .inbox-item-podglad{ color:var(--ink); font-weight:600; }
.inbox-item.is-unread .inbox-item-kropka{ background:var(--danger); }

.inbox-avatar{
  width:40px; height:40px; border-radius:50%; background:var(--page-accent, var(--teal)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.85rem; flex-shrink:0;
}
.inbox-avatar-wrap{ position:relative; flex-shrink:0; }
.inbox-avatar-znacznik{
  position:absolute; right:-3px; bottom:-3px; width:20px; height:20px; border-radius:50%;
  background:var(--surface); border:2px solid var(--bg-alt); font-size:0.86rem;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
.inbox-item-tresc{ flex:1; min-width:0; }
.inbox-item-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.inbox-item-nazwa{ flex:1; min-width:0; display:block; font-size:0.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.inbox-item-top-prawa{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.inbox-item-czas{ font-size:0.66rem; color:var(--muted); flex-shrink:0; white-space:nowrap; }
.inbox-item-pin{
  font-size:0.84rem; line-height:1; color:var(--muted); cursor:pointer; flex-shrink:0; padding:1px; border-radius:3px;
}
.inbox-item-pin:hover{ color:var(--amber); }
.inbox-item-pin.jest-przypiety{ color:var(--amber); }
/* Pusta gwiazdka jest domyślnie przygaszona (żeby nie odwracać uwagi od
   nazwy/tematu), ale nigdy całkiem niewidoczna — inaczej na dotykowym
   ekranie, bez najechania myszą, nikt by jej nie odnalazł. Pełna
   nieprzezroczystość dopiero na hover/fokus albo gdy rozmowa jest przypięta. */
.inbox-item-pin:not(.jest-przypiety){ opacity:0.35; }
.inbox-item:hover .inbox-item-pin,
.inbox-item-pin:focus-visible{ opacity:1; }
.inbox-item-podglad{ display:block; min-width:0; font-size:0.78rem; color:var(--muted); margin-top:2px; }
.inbox-item-podglad-temat,
.inbox-item-podglad-tresc{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* Temat rozmowy wyraźnie czytelniejszy niż fragment ostatniej wiadomości —
   ten drugi ma zostać w tle, tylko jako dodatkowy kontekst. */
.inbox-item-podglad-temat{ font-weight:700; font-size:0.8rem; color:var(--ink); }
.inbox-item-podglad-tresc{ font-size:0.74rem; margin-top:1px; }
/* Pod nazwą rozmówcy domyślnie pokazujemy temat rozmowy zamiast fragmentu
   ostatniej wiadomości — fragment wraca dopiero w szerokim widoku listy
   (patrz reguła .inbox-layout:not(.ma-otwarta-rozmowe) wyżej), gdzie jest
   miejsce na obie linijki naraz. */
.inbox-layout.ma-otwarta-rozmowe .inbox-item-podglad-tresc{ display:none; }
.inbox-item-kropka{ width:8px; height:8px; border-radius:50%; background:var(--page-accent, var(--teal)); flex-shrink:0; margin-top:6px; }

/* --- kolumna z otwartą rozmową --- */
.inbox-rozmowa{ display:flex; flex-direction:column; min-height:0; }
.inbox-rozmowa-naglowek{
  padding:12px 18px; border-bottom:1px solid var(--line); background:var(--surface);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.inbox-rozmowa-info{ min-width:0; }
.inbox-rozmowa-info strong{ display:flex; align-items:center; gap:6px; font-size:0.95rem; }
.inbox-rozmowa-info > span{ font-size:0.76rem; color:var(--muted); }
.inbox-rozmowa-info > span,
.inbox-rozmowa-rezerwacja-link{ display:block; }
.inbox-rozmowa-rezerwacja-link{ font-size:0.78rem; font-weight:600; color:var(--page-accent, var(--teal)); text-decoration:none; margin-top:2px; }
.inbox-rozmowa-rezerwacja-link:hover{ text-decoration:underline; }
.inbox-rozmowa-akcje{ margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }

/* --- mała, ledwo widoczna edycja imienia rozmówcy (dział "Wiadomości") --- */
.watek-edytuj-imie-btn{
  background:none; border:none; padding:0; margin:0; font-size:0.66rem; font-weight:400; color:var(--muted);
  opacity:0.55; cursor:pointer; font-family:inherit; text-decoration:underline;
}
.watek-edytuj-imie-btn:hover{ opacity:1; color:var(--page-accent, var(--teal)); }
.watek-edytuj-imie-formularz{ display:none; gap:6px; align-items:center; margin-top:6px; flex-wrap:wrap; }
.watek-edytuj-imie-formularz.widoczny{ display:flex; }
.watek-edytuj-imie-formularz input[type="text"]{
  padding:5px 9px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--ink); font:inherit; font-size:0.8rem; min-width:0; flex:1 1 180px;
}
.watek-edytuj-imie-formularz input[type="text"]:focus{ outline:none; border-color:var(--page-accent, var(--teal)); }

.badge-rezerwacja{ background:var(--tone-neutral-bg); color:var(--tone-neutral-fg); font-size:0.62rem; padding:1px 7px; vertical-align:middle; }
.badge-nowa-wiadomosc{ display:block; width:fit-content; background:var(--tone-warning-bg); color:var(--tone-warning-fg); font-size:0.62rem; padding:1px 7px; margin-top:4px; }

.inbox-rozmowa-temat{
  padding:8px 18px; border-bottom:1px solid var(--line); background:var(--bg-alt);
  font-size:0.82rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* --- kompaktowy rozwijany dropdown "inne rozmowy z tą osobą" (adres e-mail)
   — używany tam, gdzie nie ma bocznej rozwijanej kolumny jak w skrzynce
   Wiadomości (patrz admin/rezerwacje.php). Zwykły <details> — bez JS,
   pokazuje się tylko gdy dopasowywanie poczty świadomie NIE skleiło różnych
   tematów w jedną rozmowę (patrz pobierz_inne_watki_dla_email). --- */
.inbox-inne-watki-dropdown{ position:relative; }
.inbox-inne-watki-dropdown summary{ list-style:none; cursor:pointer; }
.inbox-inne-watki-dropdown summary::-webkit-details-marker{ display:none; }
.inbox-inne-watki-dropdown[open] summary{ border-color:var(--page-accent, var(--teal)); color:var(--page-accent, var(--teal)); }
.inbox-inne-watki-dropdown-lista{
  position:absolute; top:calc(100% + 6px); right:0; z-index:40; min-width:220px; max-width:300px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow-pop);
  padding:6px; display:flex; flex-direction:column; gap:2px;
}
.inbox-inne-watki-dropdown-lista a{
  display:block; padding:6px 8px; border-radius:var(--radius-sm); font-size:0.8rem; font-weight:600;
  color:var(--ink); text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.inbox-inne-watki-dropdown-lista a:hover{ background:var(--bg-alt); }

/* --- stopka karty skrzynki: mały, wkomponowany przycisk nowej wiadomości --- */
.inbox-stopka{
  grid-column:1 / -1; border-top:1px solid var(--line); background:var(--bg-alt); padding:8px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.inbox-stopka-przeczytane{ font-size:0.74rem; color:var(--muted); text-align:right; }
.inbox-stopka-akcje{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.czat-wewnetrzny-link.is-unread{
  background:var(--tone-warning-bg); color:var(--tone-warning-fg); border-color:var(--tone-warning-bg); font-weight:700;
}
.czat-wewnetrzny-link.is-unread:hover{ filter:brightness(0.97); }
.czat-wewnetrzny-kropka{ display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--danger); margin-left:5px; vertical-align:middle; }
.inbox-nowa-wiadomosc-srodek{
  flex:1; display:flex; align-items:center; justify-content:center; padding:28px 20px; min-height:0; overflow-y:auto;
}
.inbox-nowa-wiadomosc-formularz{
  display:flex; flex-direction:column; gap:12px; width:88%; max-width:none; box-sizing:border-box;
}
.inbox-nowa-wiadomosc-formularz input,
.inbox-nowa-wiadomosc-formularz textarea{
  padding:9px 12px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font:inherit; font-size:0.86rem;
}
.inbox-nowa-wiadomosc-formularz input:focus,
.inbox-nowa-wiadomosc-formularz textarea:focus{ outline:none; border-color:var(--page-accent, var(--teal)); }
.inbox-nowa-wiadomosc-akcje{ display:flex; align-items:center; justify-content:space-between; gap:10px; }

.inbox-pusta{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; color:var(--muted); padding:40px; text-align:center;
}
.inbox-pusta-ikona{ font-size:2.2rem; opacity:0.5; }

/* --- sama nić wiadomości (dymki) --- */
.czat-watek{ flex:1; display:flex; flex-direction:column; gap:3px; overflow-y:auto; overflow-x:hidden; padding:18px; background:var(--page-bg); min-height:0; }
/* Używane WYŁĄCZNIE w module "Rozmowa z klientem" na pulpicie rezerwacji
   (kafelek pulpit-kafelek) — .czat-watek ma już flex:1/min-height:0 z
   bazowej reguły wyżej, więc rośnie/kurczy się razem z wysokością całego
   kafelka (patrz .card{display:flex;flex-direction:column} w miejscu
   użycia), a górna belka (.inbox-rozmowa-naglowek) i dolny kompozytor
   (.czat-kompozytor) mają tam flex-shrink:0, więc zawsze zostają w pełni
   widoczne przy krawędziach kafelka. Wcześniej sztywne max-height:440px
   uniemożliwiało to — wątek nie rósł wraz z powiększaniem kafelka. */
.czat-watek--kompakt{ border:1px solid var(--line); border-radius:var(--radius-md); }
.czat-dzien-separator{ align-self:center; font-size:0.66rem; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:3px 12px; border-radius:999px; margin:8px 0 10px; }
.czat-dymek{
  max-width:74%; padding:9px 14px; border-radius:16px; font-size:0.86rem; line-height:1.45;
  box-shadow:0 1px 1px rgba(0,0,0,0.04); margin-bottom:3px;
}
.czat-dymek--klient{
  align-self:flex-start; background:var(--czat-klient-bg, var(--surface)); color:var(--czat-klient-tekst, var(--ink));
  border:1px solid var(--line); border-bottom-left-radius:4px;
}
.czat-dymek--admin{
  align-self:flex-end; background:var(--czat-admin-bg, var(--page-accent, var(--teal))); color:var(--czat-admin-tekst, #fff);
  border-bottom-right-radius:4px;
}
.czat-dymek-autor{ font-size:0.68rem; font-weight:700; margin-bottom:2px; opacity:0.75; }
.czat-dymek-tresc{ white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; }
.czat-dymek-data{ font-size:0.63rem; margin-top:4px; opacity:0.7; text-align:right; }
.czat-dymek-stopka{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:4px; }
.czat-dymek-stopka .czat-dymek-data{ margin-top:0; }
.czat-dymek-usun-form{ display:inline; }
.czat-dymek-usun{
  background:none; border:none; padding:0; margin:0; font-size:0.63rem; font-weight:700;
  cursor:pointer; color:inherit; opacity:0.7; text-decoration:underline;
}
.czat-dymek-usun:hover{ opacity:1; }
.czat-dymek .czat-zalaczniki-lista{ margin-top:6px; }
.czat-zalacznik-chip--link{ text-decoration:none; cursor:pointer; }
.czat-zalacznik-chip--link:hover{ text-decoration:underline; }
.czat-dymek--admin .czat-zalacznik-chip--link{ background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.3); color:inherit; }
@media (max-width:600px){ .czat-dymek{ max-width:86%; } }

/* --- kształty dymków (Ustawienia → Wygląd czatu) --- */
.czat-watek[data-ksztalt="ostre"] .czat-dymek{ border-radius:6px; }
.czat-watek[data-ksztalt="ostre"] .czat-dymek--klient{ border-bottom-left-radius:6px; }
.czat-watek[data-ksztalt="ostre"] .czat-dymek--admin{ border-bottom-right-radius:6px; }

.czat-watek[data-ksztalt="pigulka"] .czat-dymek{ border-radius:999px; padding:10px 20px; }
.czat-watek[data-ksztalt="pigulka"] .czat-dymek--klient{ border-bottom-left-radius:999px; }
.czat-watek[data-ksztalt="pigulka"] .czat-dymek--admin{ border-bottom-right-radius:999px; }

.czat-watek[data-ksztalt="dymek"] .czat-dymek{ border-radius:14px; position:relative; }
.czat-watek[data-ksztalt="dymek"] .czat-dymek--klient{ border-bottom-left-radius:14px; margin-left:9px; }
.czat-watek[data-ksztalt="dymek"] .czat-dymek--klient::before{
  content:''; position:absolute; left:-8px; bottom:0; width:0; height:0;
  border:8px solid transparent; border-right-color:var(--czat-klient-bg, var(--surface)); border-left:0; border-bottom:0;
}
.czat-watek[data-ksztalt="dymek"] .czat-dymek--admin{ border-bottom-right-radius:14px; margin-right:9px; }
.czat-watek[data-ksztalt="dymek"] .czat-dymek--admin::before{
  content:''; position:absolute; right:-8px; bottom:0; width:0; height:0;
  border:8px solid transparent; border-left-color:var(--czat-admin-bg, var(--page-accent, var(--teal))); border-right:0; border-bottom:0;
}

/* Organiczny — asymetryczne, nieregularne rogi jak bąbelek. */
.czat-watek[data-ksztalt="organiczny"] .czat-dymek{ border-radius:22px 18px 22px 18px; }
.czat-watek[data-ksztalt="organiczny"] .czat-dymek--klient{ border-radius:6px 22px 22px 22px; }
.czat-watek[data-ksztalt="organiczny"] .czat-dymek--admin{ border-radius:22px 6px 22px 22px; }

/* Komiksowy — gruba ramka, twardy przesunięty cień i lekkie przekrzywienie. */
.czat-watek[data-ksztalt="komiks"] .czat-dymek{
  border-radius:10px; border:2px solid rgba(0,0,0,0.28); box-shadow:3px 3px 0 rgba(0,0,0,0.22);
}
.czat-watek[data-ksztalt="komiks"] .czat-dymek--klient{ border-bottom-left-radius:2px; transform:rotate(-0.6deg); }
.czat-watek[data-ksztalt="komiks"] .czat-dymek--admin{ border-bottom-right-radius:2px; transform:rotate(0.6deg); }

/* Neonowy — pigułka ze świecącą poświatą w kolorze własnego tła dymka. */
.czat-watek[data-ksztalt="neon"] .czat-dymek{ border-radius:999px; padding:10px 20px; }
.czat-watek[data-ksztalt="neon"] .czat-dymek--klient{ box-shadow:0 0 0 1px rgba(255,255,255,0.4) inset, 0 0 14px 2px var(--czat-klient-bg, var(--surface)); }
.czat-watek[data-ksztalt="neon"] .czat-dymek--admin{ box-shadow:0 0 0 1px rgba(255,255,255,0.25) inset, 0 0 14px 2px var(--czat-admin-bg, var(--page-accent, var(--teal))); }

/* Origami — jeden róg przycięty po skosie, jak zagięta karteczka. */
.czat-watek[data-ksztalt="origami"] .czat-dymek{ border-radius:4px; }
.czat-watek[data-ksztalt="origami"] .czat-dymek--klient{ clip-path:polygon(0 0, 100% 0, 100% 100%, 13px 100%, 0 calc(100% - 13px)); }
.czat-watek[data-ksztalt="origami"] .czat-dymek--admin{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 0 100%); }

/* --- pasek do pisania wiadomości, przypięty na dole --- */
.czat-kompozytor{ position:relative; display:flex; gap:8px; align-items:flex-end; padding:12px 16px; border-top:1px solid var(--line); background:var(--surface); }
.czat-dymek-potwierdzenie{
  position:absolute; right:16px; bottom:100%; margin-bottom:8px;
  background:#16221F; color:#fff; font-size:0.76rem; font-weight:600;
  padding:6px 14px; border-radius:999px; box-shadow:var(--shadow-pop); white-space:nowrap;
  pointer-events:none; animation:dymekPotwierdzenieAnimacja 2.6s ease forwards;
}
.czat-dymek-potwierdzenie--blad{ background:var(--danger); }
@keyframes dymekPotwierdzenieAnimacja{
  0%{ opacity:0; transform:translateY(6px); }
  12%{ opacity:1; transform:translateY(0); }
  78%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(0); }
}
.czat-kompozytor-tekst{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.czat-kompozytor textarea{ width:100%; box-sizing:border-box; resize:none; border-radius:20px; padding:10px 16px; min-height:74px; max-height:140px; font-size:0.88rem; line-height:1.4; }
/* Trzy okrągłe przyciski kompozytora (spinacz/fakturuj/wyślij) — WSPÓLNA
   receptura w jednej regule (zamiast trzech osobnych, łatwych do rozjechania
   przy przyszłych zmianach), z !important na box-model, żeby ANI .btn ANI
   .btn-accent (obie klasy są też na przycisku "wyślij") nie mogły w żaden
   sposób zmienić kształtu/rozmiaru — łącznie z box-sizing, bo to jedyny
   z tej trójki przycisk z obramowaniem z .btn (1.5px solid), a reszta ma
   własne 1px, więc bez border-box różniłyby się rozmiarem o ułamek piksela. */
.czat-kompozytor-spinacz,
button.czat-kompozytor-fakturuj,
button.czat-kompozytor-wyslij{
  box-sizing:border-box !important; flex:0 0 42px !important;
  width:42px !important; height:42px !important; min-width:42px !important; max-width:42px !important; min-height:42px !important; max-height:42px !important;
  padding:0 !important; border-radius:50% !important; border:1px solid var(--line) !important;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1; cursor:pointer; background:var(--bg-alt); color:var(--ink);
  transition:background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.czat-kompozytor-spinacz:hover,
button.czat-kompozytor-fakturuj:hover{ background:var(--surface); }
button.czat-kompozytor-fakturuj.is-active{
  background:var(--page-accent, var(--orange)); border-color:var(--page-accent, var(--orange)) !important; color:#fff;
}
button.czat-kompozytor-wyslij{
  background:var(--page-accent, var(--orange)); border-color:var(--page-accent, var(--orange)) !important; color:#fff;
}
button.czat-kompozytor-wyslij:hover{ filter:brightness(0.94); }
/* Wspólny kontener trzech "okrągłych" akcji kompozytora (spinacz/fakturuj/
   wyślij) — na desktopie to zwykły rząd obok pola tekstowego (patrz niżej),
   na telefonie (@media 860px) zamienia się w dwuwierszową kolumnę: spinacz
   i fakturuj zmniejszone i obok siebie NAD przyciskiem wysłania, dzięki
   czemu pole tekstowe zyskuje więcej szerokości. */
.czat-kompozytor-akcje{ display:flex; align-items:flex-end; gap:8px; }
.czat-kompozytor-spinacz-plaski{
  display:inline-flex; align-items:center; gap:6px; width:fit-content; padding:6px 12px; border-radius:999px;
  font-size:0.8rem; font-weight:600; cursor:pointer; border:1px solid var(--line); background:var(--bg-alt); color:var(--ink);
}
.czat-kompozytor-spinacz-plaski:hover{ background:var(--surface); }
.czat-zalaczniki-lista{ display:flex; flex-wrap:wrap; gap:6px; }
.czat-zalacznik-chip{
  display:inline-flex; align-items:center; gap:6px; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:999px; padding:3px 6px 3px 10px; font-size:0.72rem; color:var(--ink);
}
.czat-zalacznik-chip button{ border:none; background:none; cursor:pointer; color:var(--muted); font-size:0.9rem; line-height:1; padding:2px; }
.czat-zalacznik-chip button:hover{ color:var(--danger); }

/* --- typ kodu rabatowego: lista do zaznaczania zamiast <select> --- */
.typ-radio-group{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; }
.typ-radio-option{ display:inline-flex; align-items:center; gap:6px; margin:0; padding:7px 12px; border:1.5px solid var(--line); border-radius:999px; font-weight:600; font-size:0.78rem; white-space:nowrap; cursor:pointer; background:var(--surface); transition:border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.typ-radio-option:has(input:checked){ border-color:var(--teal); background:var(--selected-bg); color:var(--teal-deep); }
.typ-radio-option input{ margin:0; }

/* --- wybór ikony znacznika "klient z rezerwacją" (Ustawienia → Wygląd czatu) --- */
.pole-ikona-rezerwacji{ min-width:190px; }

/* --- statystyki kodów rabatowych --- */
.kody-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; }
.kody-stat-tile{ background:var(--page-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.kody-stat-num{ font-family:'Anton',sans-serif; font-size:1.4rem; line-height:1; color:var(--teal-deep); }
.kody-stat-label{ margin-top:4px; font-size:0.72rem; line-height:1.25; color:var(--muted); font-weight:600; }

.repeater-item{ display:flex; gap:6px; margin-bottom:6px; }
.repeater-item input{ flex:1; }
.repeater-remove{ background:var(--surface); border:1px solid var(--line); color:var(--danger); border-radius:var(--radius-sm); width:28px; height:28px; cursor:pointer; flex-shrink:0; font-size:0.8rem; }
.repeater-remove:hover{ border-color:var(--danger); }
.repeater-add{ background:none; border:1.5px dashed var(--line); color:var(--muted); border-radius:var(--radius-sm); padding:5px 10px; cursor:pointer; font-size:0.76rem; }
.repeater-add:hover{ border-color:var(--teal); color:var(--teal); }

/* --- buttons --- */
.btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 20px; border-radius:999px; border:1.5px solid transparent; font-size:0.85rem; font-weight:600; cursor:pointer; text-decoration:none; font-family:inherit; transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease; }
.btn:active{ transform:scale(0.98); }
.btn-accent{ background:var(--orange); color:#fff; }
.btn-accent:hover{ background:var(--accent-hover); }
.btn-outline{ background:var(--surface); border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--teal); color:var(--teal-deep); }
.btn-danger{ background:var(--surface); border:1.5px solid var(--danger); color:var(--danger); }
.btn-danger:hover{ background:var(--danger); color:#fff; }
.btn-success{ background:var(--success); color:#fff; }
.btn-success:hover{ background:var(--success-hover); }
.btn-small{ padding:6px 14px; font-size:0.78rem; }
.btn[disabled]{ opacity:0.5; cursor:not-allowed; }

/* --- flash / badges --- */
.flash{ padding:10px 16px; border-radius:var(--radius-sm); margin-bottom:14px; font-size:0.82rem; font-weight:600; }
.flash-ok{ background:var(--tone-success-bg); color:var(--tone-success-fg); }
.flash-err{ background:var(--tone-danger-bg); color:var(--tone-danger-fg); }

/* Komunikaty w panelu (Zapisano/Odświeżono itp.) — pływające okienko w rogu
   zamiast kafelka na górze strony, żeby nie przesuwało reszty treści w dół.
   Uwaga: .flash samo w sobie (bez .flash-stos, np. na login.php) zostaje
   zwykłym, statycznym komunikatem — tylko zagnieżdżenie w .flash-stos włącza
   pływające pozycjonowanie i auto-znikanie. */
.flash-stos{
  position:fixed; bottom:24px; right:24px; z-index:200;
  display:flex; flex-direction:column; gap:8px; align-items:flex-end;
  pointer-events:none; max-width:min(340px, calc(100vw - 32px));
}
.flash-stos .flash{
  margin-bottom:0; box-shadow:var(--shadow-pop); width:100%; box-sizing:border-box;
  animation:flashPojawSieZnikaj 10s ease forwards;
}
@keyframes flashPojawSieZnikaj{
  0%{ opacity:0; transform:translateY(10px); }
  3%{ opacity:1; transform:translateY(0); }
  95%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(10px); }
}
.badge{ display:inline-block; padding:2px 9px; border-radius:999px; font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.badge-oczekujace{ background:var(--tone-warning-bg); color:var(--tone-warning-fg); }
.badge-zaakceptowane{ background:var(--tone-success-bg); color:var(--tone-success-fg); }
.badge-odrzucone{ background:var(--tone-danger-bg); color:var(--tone-danger-fg); }
.badge-anulowane{ background:var(--tone-neutral-bg); color:var(--tone-neutral-fg); }
/* Niebieski, bez osobnej pary --tone-info-bg/-fg per motyw (byłoby to do
   dopisania w ~10 blokach [data-styl]) — color-mix() z już istniejącym
   var(--blue) daje ten sam efekt (czytelne tło+tekst w każdym motywie) bez
   dublowania definicji kolorów. */
.badge-zrealizowano{ background:color-mix(in srgb, var(--blue) 16%, transparent); color:var(--blue); }
.badge-zrealizowane{ background:var(--teal); color:#fff; }

/* --- tables / lists --- */
table{ width:100%; border-collapse:collapse; font-size:0.85rem; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th{ font-size:0.7rem; text-transform:uppercase; letter-spacing:0.03em; color:var(--muted); font-weight:600; }
tr:hover td{ background:var(--page-bg); }
.filters{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
.filters a{ text-decoration:none; padding:6px 14px; border-radius:999px; font-size:0.78rem; font-weight:600; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease; }
.filters a.is-active{ background:var(--page-accent, var(--ink)); border-color:var(--page-accent, var(--ink)); color:#fff; }
.filters a.filters--mruga:not(.is-active){ animation: mrugniecie-tlo 1.1s ease-in-out infinite; border-color:var(--blink-border); color:var(--blink-fg); font-weight:800; }
@keyframes mrugniecie-tlo{ 0%, 100%{ background:var(--blink-bg-1); } 50%{ background:var(--blink-bg-2); } }
/* Pole wyszukiwania rezerwacji w tej samej linii co zakładki statusów,
   dosunięte do prawej krawędzi (margin-left:auto w tym samym flex-rzędzie). */
.rez-filtry-szukaj{ display:flex; align-items:center; gap:8px; margin-left:auto; }
/* Małe przyciski sortowania w nagłówkach kolumn listy rezerwacji — strzałka
   widoczna zawsze, ale przygaszona, dopóki ta kolumna nie jest aktywnym
   kryterium sortowania (wtedy pokazuje kierunek i podświetla się). */
.rez-th-sort{ display:inline-flex; align-items:center; gap:3px; color:inherit; text-decoration:none; }
.rez-th-sort i{ font-size:0.85rem; opacity:0.3; }
.rez-th-sort:hover i{ opacity:0.7; }
.rez-th-sort.jest-aktywny{ color:var(--ink); }
.rez-th-sort.jest-aktywny i{ opacity:1; color:var(--teal-deep); }
.rez-filtry-szukaj input[type="text"]{ max-width:220px; }
.rez-filtry-szukaj .btn i{ margin-right:2px; }

.detail-grid{ display:grid; grid-template-columns:140px 1fr; gap:6px 14px; font-size:0.85rem; }
.detail-grid dt{ color:var(--muted); font-weight:600; }
.detail-grid dd{ margin:0; }

/* --- timeline (notatki/wiadomosci) --- */
.timeline-item{ border-left:2px solid var(--line); padding:2px 0 12px 14px; margin-left:4px; position:relative; }
.timeline-item::before{ content:''; position:absolute; left:-5px; top:5px; width:8px; height:8px; border-radius:50%; background:var(--teal); }
.timeline-item.is-wiadomosc::before{ background:var(--orange); }
.timeline-meta{ font-size:0.72rem; color:var(--muted); margin-bottom:2px; }
.timeline-text{ font-size:0.85rem; white-space:pre-wrap; }

.file-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--page-bg); font-size:0.82rem; }
.file-row:last-child{ border-bottom:none; }

.gallery-admin-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap:14px; }
.gallery-admin-item{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.gallery-admin-item img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.gallery-admin-form{ padding:8px; }
.gallery-admin-form input[type=text]{ font-size:0.78rem; padding:5px 8px; }

/* --- drukarki: mały przycisk "Edytuj" pływający w rogu okienka --- */
.printer-card{ position:relative; display:flex; flex-direction:column; min-height:190px; transition:opacity 0.15s ease, filter 0.15s ease; }
.printer-edit-toggle{ position:absolute; top:12px; right:12px; list-style:none; cursor:pointer; }
.printer-edit-toggle::-webkit-details-marker{ display:none; }

/* Nieaktywna drukarka: cały kafelek wyraźnie przygaszony i odbarwiony (nie
   tylko mały dopisek), rozjaśnia się lekko pod kursorem, żeby dało się
   wygodnie edytować bez mrużenia oczu. */
.printer-card--nieaktywna{ opacity:0.5; filter:grayscale(0.9); }
.printer-card--nieaktywna:hover{ opacity:0.85; }
.printer-card-status-badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.68rem; font-weight:700; color:var(--muted); background:var(--bg-alt);
  border:1px solid var(--line); border-radius:999px; padding:2px 9px; white-space:nowrap;
}

/* Przycisk główny w kolorze akcentu strony (teal), zamiast domyślnego pomarańczowego .btn-accent — patrz też .magazyn-btn-primary/.an2-btn-primary. */
.papier-btn-primary{
  display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:none;
  border-radius:999px; background:var(--page-accent, var(--teal)); color:#fff;
  font-size:0.85rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.papier-btn-primary:hover{ filter:brightness(0.94); }
.papier-btn-primary--small{ padding:7px 14px; font-size:0.8rem; }

/* --- nagłówek modułu "Drukarki": tytuł + przycisk dodawania w jednej
   linii, po prawej. Formularz dodawania to rozwijany dymek (dropdown),
   żeby otwarcie go nie rozpychało układu kart poniżej. --- */
.drukarki-naglowek{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.drukarka-dodaj{ position:relative; flex-shrink:0; }
.drukarka-dodaj > summary{ list-style:none; }
.drukarka-dodaj > summary::-webkit-details-marker{ display:none; }
.drukarka-dodaj-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:20; width:320px; max-width:min(90vw, 320px);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-card); padding:16px; box-sizing:border-box;
}

/* --- magazyn papieru: ikonki rolek (widok od czoła, z otworem na środku) — po jednej na każdą pełną rolkę w magazynie --- */
.magazyn-rolki{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; min-height:24px; }
.magazyn-rolka{ position:relative; flex:none; width:24px; height:24px; border-radius:50%; background:var(--blue); }
.magazyn-rolka::after{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:8px; height:8px; border-radius:50%; background:var(--surface); }

.rezerwacja-columns{ display:grid; grid-template-columns: 1.15fr 1fr; gap:16px; align-items:start; }
.rezerwacja-col-left .card, .rezerwacja-col-right .card{ margin-bottom:16px; }
@media (max-width: 980px){
  .rezerwacja-columns{ grid-template-columns: 1fr; }
}

/* --- widok szczegółów zapytania: nagłówek, pasek działań, strefa niebezpieczna --- */
.rez-header-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.rez-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.rez-header-links{ display:flex; gap:8px; flex-wrap:wrap; max-width:100%; }
.rez-header-links form{ display:contents; }
.rez-faktura-galeria-row{ display:flex; gap:14px; margin-bottom:16px; }
.rez-faktura-box{
  display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; padding:8px 12px; flex:1 1 0; min-width:0;
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-alt);
}
.rez-faktura-etykieta{ font-size:0.78rem; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:0.02em; }
@media (max-width:640px){
  /* Mniejsze przyciski na telefonie — inaczej "Lista/Pobierz PDF/Dodaj do
     kalendarza/Wyślij ankietę" oraz przyciski ramek Faktura/Galeria łamały
     się na zbyt wiele osobnych linii, zajmując dużo miejsca na ekranie. */
  .rez-header-links{ gap:6px; }
  .rez-header-links .btn, .rez-faktura-box .btn{ padding:5px 10px; font-size:0.72rem; gap:4px; }
  .rez-faktura-box{ gap:6px; padding:7px 10px; }
  .rez-faktura-galeria-row{ flex-direction:column; gap:8px; }
}
.rez-actions-row{ display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; }
.rez-actions-buttons{ display:flex; gap:8px; flex-wrap:wrap; }

.rez-discount-note{ font-size:0.92rem; font-weight:700; color:var(--success); background:var(--tone-success-bg); padding:9px 14px; border-radius:var(--radius-sm); margin-bottom:10px; }
.rez-powracajacy-klient{ font-size:0.82rem; background:var(--powracajacy-bg); border:1px solid var(--powracajacy-border); border-radius:var(--radius-md); padding:10px 12px; margin-bottom:14px; }
.rez-powracajacy-klient ul{ list-style:none; }
.rez-powracajacy-klient li{ margin-bottom:3px; }
.rez-addons{ display:flex; flex-direction:column; gap:6px; }
.rez-addon-item{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:7px 12px; background:var(--page-bg); border-radius:var(--radius-sm); }
.rez-addon-gratis{ flex-shrink:0; }

/* --- login --- */
.login-shell{ min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--sidebar-bg); }
.login-box{ background:var(--surface); border-radius:var(--radius-lg); padding:36px 32px; width:100%; max-width:320px; box-shadow:var(--shadow-pop); }

.save-bar{ position:sticky; bottom:0; background:var(--page-bg); padding:12px 0 4px; margin-top:4px; display:flex; justify-content:flex-end; border-top:1px solid var(--line); }

/* --- niestandardowe okno potwierdzenia (zamiast domyślnego confirm() przeglądarki) --- */
.confirm-overlay{
  position:fixed; inset:0; background:rgba(16,20,24,0.55); display:none;
  align-items:center; justify-content:center; z-index:1000; padding:20px;
}
.confirm-overlay.is-open{ display:flex; }
.confirm-box{
  background:var(--surface); border-radius:var(--radius-lg); padding:26px; width:100%; max-width:460px;
  box-shadow:var(--shadow-pop); max-height:85vh; overflow-y:auto;
}
.confirm-box p{ font-size:0.92rem; margin:0 0 20px; color:var(--ink); line-height:1.5; white-space:pre-wrap; }
.confirm-boxed{
  background:var(--page-bg); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px;
  font-size:0.85rem; color:var(--ink); line-height:1.5; white-space:pre-wrap;
  margin:-8px 0 20px; max-height:280px; overflow-y:auto;
}
.confirm-actions{ display:flex; gap:10px; justify-content:flex-end; }

/* --- okno "Faktura" w szczegółach rezerwacji — szerszy, przewijany formularz na tym samym .confirm-overlay --- */
.faktura-modal-box{ max-width:720px; text-align:left; }
.faktura-modal-box h4{ margin:18px 0 8px; font-size:0.95rem; }
.faktura-modal-box label{ display:block; margin-top:10px; font-size:0.85rem; font-weight:600; }
.faktura-modal-box input[type="text"],
.faktura-modal-box input[type="date"],
.faktura-modal-box input[type="number"],
.faktura-modal-box select,
.faktura-modal-box textarea{ width:100%; box-sizing:border-box; font-weight:400; margin-top:4px; }
.faktura-modal-box .checkbox-line{ display:flex; align-items:center; gap:6px; font-weight:400; }
/* Dwuwierszowy układ (zamiast jednego ciasnego rzędu z 6 polami obok
   siebie) — góra: checkbox + nazwa + usuń, dół: ilość/jednostka/cena z
   mini-etykietami. Dzięki temu wiersz mieści się w oknie modala bez
   przewijania w bok, niezależnie od tego, jak wąski jest ekran. */
.faktura-pozycja-wiersz{
  margin-top:12px; padding-bottom:12px; border-bottom:1px solid var(--line); transition:opacity 0.15s ease;
}
.faktura-pozycja-wiersz:last-child{ border-bottom:none; padding-bottom:0; }
.faktura-pozycja-wiersz.jest-wylaczona{ opacity:0.45; }
.faktura-pozycja-gora{ display:flex; gap:8px; align-items:center; }
.faktura-pozycja-gora .faktura-pozycja-aktywna{ flex-shrink:0; width:16px; height:16px; cursor:pointer; accent-color:var(--page-accent, var(--teal)); }
.faktura-pozycja-gora .faktura-pozycja-nazwa{ flex:1; min-width:0; margin-top:0 !important; }
.faktura-pozycja-dol{ display:flex; gap:8px; margin-top:6px; }
.faktura-modal-box .faktura-pozycja-dol label{
  display:flex; flex-direction:column; gap:2px; flex:1; min-width:0;
  font-size:0.7rem; font-weight:600; color:var(--muted); margin-top:0;
}
.faktura-pozycja-dol input{ margin-top:0 !important; }
.faktura-pozycja-usun{
  flex-shrink:0; width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background:var(--bg-alt);
  color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:0.8rem;
}
.faktura-pozycja-usun:hover{ background:var(--danger); color:#fff; border-color:var(--danger); }

/* ==========================================================
   MOBILE — poprawki dla wąskich ekranów (telefony)
   Umieszczone na końcu pliku celowo, żeby wygrywały w kaskadzie
   z regułami bazowymi o tej samej specyficzności.
   ========================================================== */

/* Wiele formularzy w panelu ma pola z ustawioną na sztywno szerokością
   w px (np. width:150px) oraz kontenery z inline display:flex bez
   zawijania — na wąskim ekranie telefonu to one wypychały treść poza
   prawą krawędź ekranu. Poniższe reguły naprawiają to globalnie. */
@media (max-width: 600px){
  .admin-main{ padding:14px; }
  .card{ padding:14px; }

  /* każdy kontener z inline display:flex zawija się zamiast wypychać treść */
  [style*="display:flex"], [style*="display: flex"]{ flex-wrap:wrap; }

  /* pola tekstowe/liczby/daty/godziny ze sztywną szerokością w px
     stają się pełnej szerokości kontenera */
  input[type=text], input[type=number], input[type=email], input[type=tel],
  input[type=date], input[type=time], input[type=password]{
    width:100% !important; max-width:100%;
  }
  .form-row > div, .pakiet-row > div{ width:100%; }
  .form-row, .pakiet-row{ row-gap:10px; }

  .detail-grid{ grid-template-columns:1fr; }
  .detail-grid dt{ margin-top:6px; }

  .rezerwacja-columns{ gap:0; }

  .stat-grid{ grid-template-columns:repeat(2,1fr); }

  h1{ font-size:1.05rem; }
  h2{ font-size:0.86rem; }
}

@media (max-width: 380px){
  .stat-grid{ grid-template-columns:1fr; }
}

/* Dział "Wiadomości" na telefonie — dopiski do reguł bazowych zdefiniowanych
   wcześniej w tym pliku (.inbox-rozmowa-naglowek, .inbox-stopka...).
   Muszą być TUTAJ (po tamtych regułach), bo przy tej samej specyficzności
   wygrywa kolejność w pliku — wcześniejsza reguła w @media by przegrała. */
@media (max-width:860px){
  /* Linki powrotu ("← Wstecz" / "← Pulpit" / "← Wróć do czatu") — bazowa
     reguła (display:none) jest zadeklarowana wcześniej w pliku, ale musi
     dać się nadpisać właśnie tutaj, na końcu, żeby faktycznie się pokazały. */
  .inbox-mobile-wyjscie{ display:inline-flex; }

  /* Nagłówek otwartej rozmowy: rozpłaszczamy .inbox-rozmowa-info przez
     display:contents, żeby jego dzieci (imię, e-mail/dane imprezy, link do
     rezerwacji) stały się BEZPOŚREDNIMI elementami elastycznymi nagłówka.
     Dzięki temu przez "order" trzymamy link powrotu + awatar + imię w
     JEDNYM, niskim pierwszym wierszu (na wysokości imienia — nie całego
     nagłówka), a e-mail/dane imprezy, przyciski akcji (inne wątki/
     załączniki/usuń) i link do rezerwacji wymuszamy każde na pełną
     szerokość (flex-basis:100%) we własnych, kolejnych wierszach —
     inaczej przyciski akcji zasłaniały/obcinały imię, walcząc z nim
     o miejsce w jednej linii. */
  .inbox-rozmowa-naglowek{ padding:8px 12px; gap:2px 8px; }
  .inbox-rozmowa-info{ display:contents; }
  .inbox-mobile-wyjscie{ order:0; }
  .inbox-rozmowa-naglowek .inbox-avatar{ order:1; width:28px; height:28px; font-size:0.65rem; flex-shrink:0; }

  /* Imię/nazwa dostaje CAŁĄ resztę pierwszej linii (Wstecz + awatar biorą
     tylko tyle, ile potrzebują) i porządnie się ucina wielokropkiem zamiast
     być na surowo obcinane w pół słowa. Przycisk "✎ edytuj" obok niej nie
     kurczy się (flex-shrink:0), żeby zawsze zostawał w całości klikalny. */
  .inbox-rozmowa-info strong{ order:2; flex:1; min-width:0; font-size:0.85rem; gap:4px; }
  .inbox-rozmowa-info strong .inbox-rozmowa-nazwa-tekst{
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .inbox-rozmowa-info strong .badge,
  .inbox-rozmowa-info strong .watek-edytuj-imie-btn{ flex-shrink:0; }
  .inbox-rozmowa-info .badge-tekst{ display:none; }

  /* Przyciski akcji (inne wątki / załączniki / usuń) schodzą na własną
     linię PO danych rozmówcy — inaczej walczyły o miejsce z imieniem i je
     zasłaniały. Mniejsze niż na komputerze. Link "Zobacz rezerwację" (gdy
     istnieje — tylko dla rozmów powiązanych z rezerwacją) dzieli z nimi tę
     samą linię: żadne z nich nie ma flex-basis:100%, więc oba trafiają na
     wspólną, świeżą linię (bo linia z e-mailem/danymi imprezy wyżej i tak
     zawsze zajmuje 100% szerokości), a margin-left:auto na przyciskach
     akcji spycha je do prawej krawędzi tej linii — czy to obok linku (który
     zostaje po lewej), czy to samotnie (gdy linku nie ma, np. w wiadomości
     napisanej bezpośrednio na maila). */
  .inbox-rozmowa-info > span{ order:3; flex-basis:100%; width:100%; white-space:normal; font-size:0.72rem; }
  .inbox-rozmowa-rezerwacja-link{ order:4; font-size:0.72rem; margin-top:0; flex-shrink:0; }
  .inbox-rozmowa-akcje{ order:5; margin-left:auto; }
  .inbox-rozmowa-akcje .btn{ padding:5px 9px; font-size:0.72rem; }
  .watek-edytuj-imie-formularz{ order:6; flex-basis:100%; width:100%; }

  /* Stopka skrzynki: przyciski i "Przeczytane przez" w jednej linii —
     przyciski trzymają swój rozmiar, tekst czytelników się skraca. */
  .inbox-stopka{ flex-wrap:nowrap; padding:6px 10px; gap:8px; }
  .inbox-stopka-akcje{ flex-wrap:nowrap; flex-shrink:0; gap:6px; }
  .inbox-stopka .btn{ padding:6px 10px; font-size:0.72rem; }
  .inbox-stopka-przeczytane{
    flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right;
  }

  /* Kompozytor wiadomości: spinacz (📎), fakturuj (📄) i wyślij (➤) — na
     wąskich ekranach WSZYSTKIE TRZY zmniejszone do tego samego rozmiaru,
     żeby stały równo w jednym rzędzie (wcześniej tylko dwa pierwsze się
     zmniejszały, a wyślij zostawał w pełnym rozmiarze, co wyglądało na
     "rozjechane" przyciski o różnej wysokości). */
  .czat-kompozytor-akcje{
    flex-wrap:nowrap; align-items:flex-end; gap:6px;
  }
  .czat-kompozytor-akcje .czat-kompozytor-spinacz,
  .czat-kompozytor-akcje button.czat-kompozytor-fakturuj,
  .czat-kompozytor-akcje button.czat-kompozytor-wyslij{
    flex:0 0 32px !important; width:32px !important; height:32px !important; min-width:32px !important; max-width:32px !important; min-height:32px !important; max-height:32px !important; font-size:0.85rem;
  }
}

/* Tabele w panelu (lista rezerwacji, pulpit) mają za dużo kolumn, żeby
   zmieścić się na ekranie telefonu — od tej szerokości pokazujemy je
   jako karty (jeden wiersz = jedna karta) zamiast poziomego scrolla. */
@media (max-width: 640px){
  .card table thead{
    position:absolute; width:1px; height:1px; overflow:hidden;
    clip:rect(0 0 0 0); white-space:nowrap; border:0; padding:0; margin:-1px;
  }
  .card table, .card table tbody, .card table tr, .card table td{
    display:block; width:100%;
  }
  .card table{ border:none; }
  .card table tr{
    border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:10px;
  }
  .card table tr:last-child{ margin-bottom:0; }
  .card table td{ border-bottom:none; padding:4px 0; word-break:break-word; }
  .card table td[data-label]::before{
    content:attr(data-label); display:block; font-size:0.66rem; text-transform:uppercase;
    letter-spacing:0.03em; color:var(--muted); font-weight:700; margin-bottom:2px;
  }
  .card table tr:hover td{ background:none; }
  .card table td:last-child{ margin-top:6px; }
  .card table td:last-child a.btn, .card table td:last-child button.btn{
    display:flex; width:100%; justify-content:center;
  }
}

/* ==========================================================
   PASEK PROMOCYJNY — podgląd w panelu (pasek.php)
   Te same klasy co na stronie głównej (style.css), żeby podgląd
   wyglądał identycznie jak na żywo.
   ========================================================== */
.promo-bar-preview-wrap{ border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.promo-bar{
  overflow:hidden; white-space:nowrap; font-size:0.85rem; font-weight:600;
  padding:8px 0; position:relative;
}
.promo-bar__track{ display:inline-flex; gap:60px; align-items:center; padding-left:100%; }
.promo-bar--przesuwanie .promo-bar__track{ animation: promo-scroll 14s linear infinite; }
@keyframes promo-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-100%); } }

.promo-bar--statyczny .promo-bar__track,
.promo-bar--miganie .promo-bar__track,
.promo-bar--powiekszanie .promo-bar__track{
  display:block; padding-left:0; text-align:center; white-space:normal;
}

.promo-bar--miganie .promo-bar__text{ animation: promo-blink 1.1s ease-in-out infinite; }
@keyframes promo-blink{ 0%, 100%{ opacity:1; } 50%{ opacity:0.25; } }

.promo-bar--powiekszanie .promo-bar__text{ display:inline-block; animation: promo-pulse 1.3s ease-in-out infinite; }
@keyframes promo-pulse{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.14); } }

/* ==========================================================
   WYGLĄD PANELU — STYLE I TRYBY
   3 style (Podstawowy / Minimalistyczny / Cyber) × 2 tryby
   (jasny / ciemny), wybierane w Ustawieniach i zapamiętywane
   per konto (admin/includes/layout_top.php ustawia data-styl
   i data-tryb na <html> na podstawie zapisanej preferencji).

   Podstawowy/jasny to dzisiejszy wygląd = wartości z :root,
   więc nie ma dla niego osobnego bloku poniżej.
   ========================================================== */

/* --- wspólna paleta trybu ciemnego: bazowe kolory dzielone przez
   wszystkie 3 style w trybie ciemnym (Podstawowy/ciemny to WYŁĄCZNIE
   ta warstwa — nic więcej nie nadpisuje). Minimalistyczny/ciemny i
   Cyber/ciemny dziedziczą stąd bezpieczne (czytelne pod białym
   tekstem) kolory wypełnień przycisków/odznak i dokładają własne
   zmiany strukturalne/akcentowe. --- */
html[data-tryb="ciemny"]{
  --ink:#EDEFEF; --muted:#9AACA8; --line:#2B3432;
  --page-bg:#12181B; --surface:#1B2321; --bg-alt:#232D2A;
  --danger:#E2554A; --success:#3FA873; --amber:#CC8A1F; --blue:#5B8FDB; --purple:#A784E0; --rose:#E87C9B;
  --teal-deep:#1B5750; --accent-hover:#ff8a3d; --success-hover:#3a9c68;
  --shadow-card:0 1px 2px rgba(0,0,0,0.4); --shadow-pop:0 20px 48px rgba(0,0,0,0.55);
  --selected-bg:#173A2E; --pakiet-aktywny-bg:#16211C;
  --tone-warning-bg:#3A2A15; --tone-warning-fg:#F0B96B;
  --tone-success-bg:#173A2E; --tone-success-fg:#6FE3B4;
  --tone-danger-bg:#3A1B18; --tone-danger-fg:#FF9A8A;
  --tone-neutral-bg:#2B2F31; --tone-neutral-fg:#B7BDBF;
  --opinie-grad-1:#3A3116; --opinie-grad-2:#2A2416; --opinie-border:#5C4E22;
  --powracajacy-bg:#332B18; --powracajacy-border:#5C4E22;
  --focus-ring:rgba(64,190,181,0.28);
}

/* --- Minimalistyczny: proste prostokątne moduły, płaskie kolory,
   brak cieni/gradientów/zaokrągleń. --- */
html[data-styl="minimalistyczny"][data-tryb="jasny"]{
  --page-bg:#F4F4F4; --surface:#FFFFFF; --bg-alt:#EFEFEF; --line:#DADADA;
  --radius-lg:0; --radius-md:0; --radius-sm:0;
  --shadow-card:none; --shadow-pop:0 0 0 1px var(--line);
  --focus-ring:rgba(0,0,0,0.12);
}
html[data-styl="minimalistyczny"][data-tryb="ciemny"]{
  --radius-lg:0; --radius-md:0; --radius-sm:0;
  --shadow-card:none; --shadow-pop:0 0 0 1px var(--line);
}
html[data-styl="minimalistyczny"] h2::before{ display:none; }
html[data-styl="minimalistyczny"] .dash-card-accent{ display:none; }
html[data-styl="minimalistyczny"] .badge{ border-radius:0; }
html[data-styl="minimalistyczny"] .btn{ border-radius:0; }
html[data-styl="minimalistyczny"] .btn:active{ transform:none; }
html[data-styl="minimalistyczny"] .filters a{ border-radius:0; }
html[data-styl="minimalistyczny"] .typ-radio-option{ border-radius:0; }
html[data-styl="minimalistyczny"] .admin-nav a{ border-radius:0; }
html[data-styl="minimalistyczny"] .admin-nav .badge-count{ border-radius:0; }
html[data-styl="minimalistyczny"] .admin-sidebar-btn{ border-radius:0; }
html[data-styl="minimalistyczny"] .admin-logo-mark{ border-radius:0; }
html[data-styl="minimalistyczny"] .pakiet--aktywny{ background:var(--surface); }
html[data-styl="minimalistyczny"] .pakiet--aktywny summary{ background:var(--page-bg); }
html[data-styl="minimalistyczny"] .opinie-rating-summary{ background:var(--surface); border-color:var(--line); }
html[data-styl="minimalistyczny"] .rez-powracajacy-klient{ background:var(--page-bg); border-color:var(--line); }
html[data-styl="minimalistyczny"] .timeline-item::before{ display:none; }
html[data-styl="minimalistyczny"] .admin-nav a.is-active{ background:transparent; border-left:3px solid var(--teal); }

/* --- Cyber: nasycone neonowe akcenty, poświaty, więcej "ozdobników"
   (gradient na pasku bocznym, glow na fokusie/aktywnym linku,
   wersaliki w nagłówkach) — wyłącznie CSS, bez zmian w HTML/PHP. --- */
html[data-styl="cyber"][data-tryb="jasny"]{
  --page-bg:#FAFAFF; --surface:#FFFFFF; --bg-alt:#F2F0FA; --line:#D9D3F0;
  --ink:#1B1030; --muted:#6B5F8C;
  --teal:#00B39E; --teal-deep:#0D5C50; --orange:#D6136B; --amber:#B8790A;
  --danger:#D6294A; --success:#0FAE72; --blue:#3B6FE0; --purple:#7A3FD1; --rose:#D6337F;
  --shadow-card:0 1px 2px rgba(15,23,23,0.035), 0 0 0 1px rgba(214,19,107,0.08);
  --shadow-pop:0 20px 48px rgba(122,63,209,0.28);
  --focus-ring:rgba(0,179,158,0.35);
}
html[data-styl="cyber"][data-tryb="ciemny"]{
  --page-bg:#0A0612; --surface:#140B24; --bg-alt:#1B1030; --line:#2E2050;
  --ink:#F1EAFF; --muted:#9C8FC0;
  --teal:#00FFD1; --blue:#4FB8FF; --purple:#B26BFF; --rose:#FF5FA8; --orange:#E0146E;
  --shadow-card:0 0 0 1px rgba(0,255,209,0.08), 0 4px 12px rgba(0,0,0,0.5);
  --shadow-pop:0 0 40px rgba(178,107,255,0.45), 0 20px 48px rgba(0,0,0,0.6);
  --opinie-grad-1:#2A1642; --opinie-grad-2:#1B0F30; --opinie-border:#4A2E7A;
  --powracajacy-bg:#1B1030; --powracajacy-border:#3A2560;
  --focus-ring:rgba(0,255,209,0.4);
}
html[data-styl="cyber"] .admin-sidebar{
  background:linear-gradient(180deg, var(--sidebar-bg), #1A0B33);
  box-shadow:inset -1px 0 0 rgba(0,229,199,0.25);
}
html[data-styl="cyber"] input:focus, html[data-styl="cyber"] textarea:focus, html[data-styl="cyber"] select:focus{
  box-shadow:0 0 0 3px var(--focus-ring), 0 0 12px var(--focus-ring);
}
html[data-styl="cyber"] .admin-nav a.is-active{
  box-shadow:inset 3px 0 0 var(--teal), 0 0 10px var(--teal);
}
html[data-styl="cyber"] .btn:hover{ box-shadow:0 0 12px var(--teal); }
html[data-styl="cyber"] h1, html[data-styl="cyber"] h2{
  text-transform:uppercase; letter-spacing:0.04em;
}

/* --- Brutal (neobrutalizm): grube czarne obramowania, twarde przesunięte
   cienie (bez rozmycia), zderzające się jaskrawe kolory, zero zaokrągleń,
   przyciski "wciskane" w swój cień przy kliknięciu. --- */
html[data-styl="brutal"]{
  --radius-lg:0; --radius-md:0; --radius-sm:0;
}
html[data-styl="brutal"][data-tryb="jasny"]{
  --page-bg:#FFF7DE; --surface:#FFFFFF; --bg-alt:#FFF0B3; --line:#0A0A0A;
  --ink:#0A0A0A; --muted:#3D3D3D;
  --teal:#00B389; --teal-deep:#00664D; --orange:#FF5C00; --amber:#E0A800;
  --danger:#E0264A; --success:#0B9E4F; --blue:#1857C4; --purple:#8A1FD1; --rose:#D6247A;
  --shadow-card:4px 4px 0 #0A0A0A; --shadow-pop:8px 8px 0 #0A0A0A;
  --focus-ring:rgba(10,10,10,0.25);
}
html[data-styl="brutal"][data-tryb="ciemny"]{
  --page-bg:#1A1A1A; --surface:#242424; --bg-alt:#2E2E2E; --line:#F5F5F0;
  --ink:#F5F5F0; --muted:#B8B8B0;
  --teal:#00FFC2;
  --shadow-card:3px 3px 0 #6B6B66; --shadow-pop:5px 5px 0 #6B6B66;
  --focus-ring:rgba(255,214,0,0.4);
}
html[data-styl="brutal"] .card,
html[data-styl="brutal"] .stat-card,
html[data-styl="brutal"] .dash-card,
html[data-styl="brutal"] .login-box,
html[data-styl="brutal"] .confirm-box,
html[data-styl="brutal"] .modul-uklad-item,
html[data-styl="brutal"] .kody-stat-tile,
html[data-styl="brutal"] .gallery-admin-item,
html[data-styl="brutal"] .dash-budka-box,
html[data-styl="brutal"] .wyglad-swatch{
  border-style:solid; border-width:3px; border-color:var(--ink);
}
/* .dash-kpi i .pakiet mają kolorowy akcent na jednej krawędzi (kategoria
   KPI / status modułu) — pogrubiamy ramkę, ale zachowujemy ten akcent. */
html[data-styl="brutal"] .dash-kpi{
  border-style:solid; border-width:3px; border-color:var(--ink);
  border-top-width:5px; border-top-color:var(--kpi-color, var(--teal));
}
html[data-styl="brutal"] .pakiet{
  border-style:solid; border-width:3px; border-color:var(--ink);
  border-left-width:5px; border-left-color:var(--page-accent, var(--teal));
}
html[data-styl="brutal"] input, html[data-styl="brutal"] textarea, html[data-styl="brutal"] select{
  border-width:2.5px; border-color:var(--ink);
}
html[data-styl="brutal"] .btn{
  border-width:2.5px; border-color:var(--ink); font-weight:800; text-transform:uppercase; letter-spacing:0.02em;
  box-shadow:3px 3px 0 var(--ink); transition:transform 0.08s ease, box-shadow 0.08s ease;
}
html[data-styl="brutal"] .btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--ink); }
html[data-styl="brutal"] .btn:active{ transform:translate(2px,2px) scale(1); box-shadow:1px 1px 0 var(--ink); }
html[data-styl="brutal"] .badge{ border-radius:0; border:2px solid var(--ink); transform:rotate(-2deg); }
/* Anton tylko na dużym, jednorazowym tytule strony (h1) — na małych
   nagłówkach kart (h2, "nazwy modułów") ta czcionka jest zbyt gęsta i
   zlewa się w czytaniu, więc tam zostaje zwykła, pogrubiona czcionka. */
html[data-styl="brutal"] h1{ font-family:'Anton',sans-serif; letter-spacing:0.02em; }
html[data-styl="brutal"] h2{ font-family:'Work Sans',sans-serif; font-weight:800; letter-spacing:0.01em; }
html[data-styl="brutal"] .dash-card-accent, html[data-styl="brutal"] h2::before{ border-radius:0; }
html[data-styl="brutal"] .admin-nav a.is-active{ border:2px solid var(--teal); background:transparent; }

/* --- Pastel: miękkie bąbelkowe moduły, duże zaokrąglenia, pastelowa
   paleta, delikatne cienie i "odbijające się" animacje przy najechaniu. --- */
html[data-styl="pastel"]{
  --radius-lg:28px; --radius-md:22px; --radius-sm:16px;
}
html[data-styl="pastel"][data-tryb="jasny"]{
  --page-bg:#FDF3FF; --surface:#FFFFFF; --bg-alt:#FCEFFF; --line:#F0D9FF;
  --ink:#5B4B75; --muted:#A594BE;
  --teal:#8FE8D4; --teal-deep:#3D8F7A; --orange:#E8927A; --amber:#D9A441;
  --danger:#E0708A; --success:#5FB88A; --blue:#A6C8FF; --purple:#D6B3FF; --rose:#FFB3D1;
  --shadow-card:0 8px 20px rgba(180,140,220,0.18); --shadow-pop:0 24px 55px rgba(180,140,220,0.35);
  --focus-ring:rgba(166,200,255,0.45);
}
html[data-styl="pastel"][data-tryb="ciemny"]{
  --page-bg:#241B33; --surface:#332545; --bg-alt:#3D2C52; --line:#4A3768;
  --ink:#F3E9FF; --muted:#B9A6D6;
  --teal:#9CF0DC; --blue:#B8D2FF; --purple:#E0C4FF; --rose:#FFC8E0;
  --shadow-card:0 8px 20px rgba(0,0,0,0.35); --shadow-pop:0 24px 55px rgba(0,0,0,0.5);
  --focus-ring:rgba(224,196,255,0.35);
}
html[data-styl="pastel"] .admin-sidebar{
  background:linear-gradient(180deg, #4A3768, #6B4F94);
}
html[data-styl="pastel"] .card, html[data-styl="pastel"] .dash-card, html[data-styl="pastel"] .stat-card, html[data-styl="pastel"] .dash-kpi{
  transition:transform 0.18s ease, box-shadow 0.18s ease;
}
html[data-styl="pastel"] .card:hover, html[data-styl="pastel"] .dash-card:hover{ transform:translateY(-3px); }
html[data-styl="pastel"] .btn{ transition:background 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
html[data-styl="pastel"] .btn:hover{ transform:scale(1.04); }
html[data-styl="pastel"] h1, html[data-styl="pastel"] h2{ font-weight:800; }
html[data-styl="pastel"] .dash-kpi{ border-top-width:4px; }

/* --- Zeszyt: kartka papieru w linie (jasny) / szkolna tablica z kredą
   (ciemny) — najprostszy z nowych stylów, żywy tylko dzięki delikatnym
   liniom w tle kart i odręcznej czcionce nagłówków. --- */
html[data-styl="zeszyt"][data-tryb="jasny"]{
  --page-bg:#F5F1E2; --surface:#FFFDF7; --bg-alt:#EFE9D6; --line:#C7D9EE;
  --ink:#2B2620; --muted:#8A7F68;
  --teal:#2E7D6B; --teal-deep:#1D5749; --orange:#C1440E; --amber:#B8860B;
  --danger:#B23A2E; --success:#3F7D4A; --blue:#2F5FA8; --purple:#6B4FA0; --rose:#B14C6B;
  --shadow-card:0 1px 3px rgba(60,50,20,0.14); --shadow-pop:0 20px 44px rgba(60,50,20,0.22);
  --focus-ring:rgba(46,125,107,0.25);
}
html[data-styl="zeszyt"][data-tryb="ciemny"]{
  --page-bg:#16241B; --surface:#1E3024; --bg-alt:#1A2A20; --line:#3E5C48;
  --ink:#F2F0E6; --muted:#9FB8A8;
  --teal:#7FD9C4; --orange:#E8A33D; --amber:#E8C34D;
  --danger:#E28A82; --success:#8FD9A8; --blue:#8FB8E8; --purple:#C4A8E8; --rose:#E8A8C4;
  --shadow-card:0 1px 3px rgba(0,0,0,0.4); --shadow-pop:0 20px 44px rgba(0,0,0,0.5);
  --focus-ring:rgba(127,217,196,0.3);
}
html[data-styl="zeszyt"] h1, html[data-styl="zeszyt"] h2, html[data-styl="zeszyt"] .admin-logo-text{ font-family:'Caveat',cursive; }
html[data-styl="zeszyt"] h1{ font-size:2.1rem; font-weight:700; }
html[data-styl="zeszyt"] h2{ font-size:1.5rem; font-weight:700; }
html[data-styl="zeszyt"] h2::before{ display:none; }
html[data-styl="zeszyt"] .admin-logo-text{ font-size:1.3rem; line-height:1; }
html[data-styl="zeszyt"] .admin-logo-text small{ font-family:'Work Sans',sans-serif; }
html[data-styl="zeszyt"][data-tryb="jasny"] .card,
html[data-styl="zeszyt"][data-tryb="jasny"] .dash-card,
html[data-styl="zeszyt"][data-tryb="jasny"] .stat-card{
  background-image:repeating-linear-gradient(180deg, transparent 0 27px, #DCE8F5 27px 28px);
}
html[data-styl="zeszyt"][data-tryb="ciemny"] .card,
html[data-styl="zeszyt"][data-tryb="ciemny"] .dash-card,
html[data-styl="zeszyt"][data-tryb="ciemny"] .stat-card{
  background-image:repeating-linear-gradient(180deg, transparent 0 27px, rgba(255,255,255,0.06) 27px 28px);
}
html[data-styl="zeszyt"][data-tryb="jasny"] .admin-sidebar{ background:#3B2E22; }

/* --- Kosmos: "nie z tej ziemi" — mgławice, gwiazdy i poświata. Jasny
   wariant to pastelowa zorza za dnia, ciemny to pełny, głęboki kosmos. --- */
html[data-styl="kosmos"][data-tryb="jasny"]{
  --page-bg:#F5EEFF; --surface:#FFFFFF; --bg-alt:#F0E6FF; --line:#E0CFFA;
  --ink:#2B1B47; --muted:#8672A8;
  --teal:#00A8B8; --teal-deep:#046670; --orange:#E0359A; --amber:#B8860B;
  --danger:#D6335A; --success:#1FA478; --blue:#5B7FFF; --purple:#8A3FE0; --rose:#E066B8;
  --shadow-card:0 4px 16px rgba(138,63,224,0.16); --shadow-pop:0 24px 55px rgba(138,63,224,0.28);
  --focus-ring:rgba(0,168,184,0.35);
}
html[data-styl="kosmos"][data-tryb="ciemny"]{
  --page-bg:#050318; --surface:#0F0A26; --bg-alt:#150E33; --line:#2E2158;
  --ink:#EDE7FF; --muted:#9C8FC0;
  --teal:#00F0FF; --teal-deep:#0A5C66; --orange:#FF2E9A; --amber:#FFD84D;
  --danger:#FF5C7A; --success:#3FFFC4; --blue:#5B8CFF; --purple:#B26BFF; --rose:#FF6FCF;
  --shadow-card:0 0 0 1px rgba(0,240,255,0.12), 0 4px 20px rgba(0,0,0,0.5);
  --shadow-pop:0 0 60px rgba(178,107,255,0.5), 0 20px 55px rgba(0,0,0,0.7);
  --focus-ring:rgba(0,240,255,0.4);
}
html[data-styl="kosmos"] .admin-sidebar{
  background:linear-gradient(180deg, var(--sidebar-bg), #2A0F52 65%, #4A1478);
}
html[data-styl="kosmos"][data-tryb="jasny"] body{
  background-color:var(--page-bg);
  background-image:
    radial-gradient(ellipse 800px 500px at 10% -10%, rgba(138,63,224,0.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(0,168,184,0.12), transparent 55%);
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
}
html[data-styl="kosmos"][data-tryb="ciemny"] body{
  background-color:var(--page-bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 10% -10%, rgba(178,107,255,0.32), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 0%, rgba(0,240,255,0.18), transparent 55%),
    radial-gradient(1.6px 1.6px at 40px 60px, #fff, transparent),
    radial-gradient(1.2px 1.2px at 160px 20px, #fff, transparent),
    radial-gradient(1.6px 1.6px at 100px 150px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.2px 1.2px at 220px 190px, #fff, transparent);
  background-repeat:no-repeat, no-repeat, repeat, repeat, repeat, repeat;
  background-size:100% 700px, 100% 600px, 260px 260px, 260px 260px, 320px 320px, 320px 320px;
  background-attachment:fixed, fixed, fixed, fixed, fixed, fixed;
}
html[data-styl="kosmos"][data-tryb="ciemny"] .admin-sidebar{
  box-shadow:inset -1px 0 0 rgba(178,107,255,0.3), 4px 0 30px rgba(178,107,255,0.15);
}
html[data-styl="kosmos"][data-tryb="ciemny"] .card,
html[data-styl="kosmos"][data-tryb="ciemny"] .dash-card,
html[data-styl="kosmos"][data-tryb="ciemny"] .stat-card{
  border-color:rgba(0,240,255,0.18);
}
html[data-styl="kosmos"] .admin-nav a.is-active{ box-shadow:inset 3px 0 0 var(--teal), 0 0 14px var(--teal); }
html[data-styl="kosmos"] .btn:hover{ box-shadow:0 0 14px var(--purple); }
html[data-styl="kosmos"] input:focus, html[data-styl="kosmos"] textarea:focus, html[data-styl="kosmos"] select:focus{
  box-shadow:0 0 0 3px var(--focus-ring), 0 0 14px var(--focus-ring);
}
html[data-styl="kosmos"] h1, html[data-styl="kosmos"] h2{ text-transform:uppercase; letter-spacing:0.05em; }

/* --- Retrofala: neonowy synthwave rodem z lat 80. — zachód słońca na
   pasku bocznym, podwójne kolorowe cienie, gradientowy napis h1. --- */
html[data-styl="retrofala"][data-tryb="jasny"]{
  --page-bg:#FFE9F5; --surface:#FFFFFF; --bg-alt:#FFF0FA; --line:#FFC2E6;
  --ink:#3B1D4A; --muted:#9370A8;
  --teal:#00A8B8; --teal-deep:#046670; --orange:#E0359A; --amber:#C98A1F;
  --danger:#D6335A; --success:#1FA478; --blue:#5B7FFF; --purple:#8A3FE0; --rose:#E066B8;
  --shadow-card:3px 3px 0 rgba(224,53,154,0.3), 6px 6px 0 rgba(0,168,184,0.2);
  --shadow-pop:0 24px 55px rgba(138,63,224,0.3);
  --focus-ring:rgba(0,168,184,0.35);
}
html[data-styl="retrofala"][data-tryb="ciemny"]{
  --page-bg:#1A0B2E; --surface:#241040; --bg-alt:#2E1550; --line:#4A2470;
  --ink:#FDE8FF; --muted:#B98FD6;
  --teal:#00F0FF; --teal-deep:#0A5C66; --orange:#FF2E97; --amber:#FFD84D;
  --danger:#FF4D6D; --success:#4DFFC2; --blue:#5B8CFF; --purple:#B24EFF; --rose:#FF6FCF;
  --shadow-card:4px 4px 0 rgba(255,46,151,0.55), 8px 8px 0 rgba(0,240,255,0.35);
  --shadow-pop:0 0 50px rgba(255,46,151,0.4), 0 20px 50px rgba(0,0,0,0.6);
  --focus-ring:rgba(0,240,255,0.4);
}
html[data-styl="retrofala"] .admin-sidebar{
  background:linear-gradient(180deg, #1A0B2E 0%, #4A1D6E 55%, #C4207A 100%);
}
html[data-styl="retrofala"] h1{
  background:linear-gradient(90deg, var(--orange), var(--purple), var(--teal));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-transform:uppercase; letter-spacing:0.03em;
}
html[data-styl="retrofala"] h2{ text-transform:uppercase; letter-spacing:0.03em; }
html[data-styl="retrofala"] .btn{
  border-width:2px; border-color:var(--ink);
  box-shadow:3px 3px 0 var(--orange), 6px 6px 0 var(--teal);
  transition:transform 0.1s ease, box-shadow 0.1s ease;
}
html[data-styl="retrofala"] .btn:hover{ transform:translate(-1px,-1px); box-shadow:4px 4px 0 var(--orange), 8px 8px 0 var(--teal); }
html[data-styl="retrofala"] .btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 var(--orange), 2px 2px 0 var(--teal); }
html[data-styl="retrofala"] .admin-nav a.is-active{ box-shadow:inset 3px 0 0 var(--teal), 0 0 12px var(--orange); }

/* --- Szkło (glassmorphism): półprzezroczyste, rozmyte panele na
   kolorowym tle w gradiencie — jedyny styl korzystający z backdrop-filter,
   więc wygląda i "działa" inaczej niż wszystkie pozostałe. --- */
html[data-styl="szklo"][data-tryb="jasny"]{
  --page-bg:#E8EEFC; --surface:rgba(255,255,255,0.62); --bg-alt:rgba(255,255,255,0.42); --line:rgba(120,140,220,0.35);
  --ink:#1B2340; --muted:#5C6690;
  --teal:#2EC4B6; --teal-deep:#0F6E63; --orange:#FF8A5C; --amber:#D9A441;
  --danger:#E0567A; --success:#2FAE7D; --blue:#4E7FE0; --purple:#8A6FE0; --rose:#E077A8;
  --shadow-card:0 8px 24px rgba(30,50,120,0.12); --shadow-pop:0 24px 60px rgba(30,50,120,0.22);
  --focus-ring:rgba(78,127,224,0.3);
}
html[data-styl="szklo"][data-tryb="ciemny"]{
  --page-bg:#0E1224; --surface:rgba(30,38,70,0.55); --bg-alt:rgba(30,38,70,0.35); --line:rgba(255,255,255,0.14);
  --ink:#EDEFFF; --muted:#9AA3D6;
  --teal:#4FE0D1; --teal-deep:#1F7A6E; --blue:#7CA6FF; --purple:#B49CFF; --rose:#FF9EC4; --orange:#FFA26B;
  --shadow-card:0 8px 24px rgba(0,0,0,0.4); --shadow-pop:0 24px 60px rgba(0,0,0,0.55);
  --focus-ring:rgba(79,224,209,0.35);
}
html[data-styl="szklo"] body{
  background-color:var(--page-bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 0% 0%, rgba(78,127,224,0.18), transparent 60%),
    radial-gradient(ellipse 800px 600px at 100% 100%, rgba(138,111,224,0.16), transparent 55%);
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
}
html[data-styl="szklo"] .card, html[data-styl="szklo"] .dash-card, html[data-styl="szklo"] .stat-card, html[data-styl="szklo"] .dash-kpi,
html[data-styl="szklo"] .login-box, html[data-styl="szklo"] .confirm-box{
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border:1px solid var(--line);
}
html[data-styl="szklo"] .admin-sidebar{
  background:rgba(20,25,50,0.55); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-right:1px solid rgba(255,255,255,0.1);
}
html[data-styl="szklo"] .admin-nav a.is-active{ background:rgba(255,255,255,0.14); box-shadow:inset 3px 0 0 var(--teal); }
html[data-styl="szklo"] .btn:hover{ box-shadow:0 0 12px var(--focus-ring); }

/* --- Vintage: sepiowa kartoteka starego atelier fotograficznego — ciepłe,
   spłowiałe barwy i karty oprawione jak stare odbitki (podwójna ramka:
   cienka linia + biały "mat" pod spodem). Pasuje tematycznie do fotobudki. --- */
html[data-styl="vintage"][data-tryb="jasny"]{
  --page-bg:#F2E8D5; --surface:#FBF4E4; --bg-alt:#EDE0C4; --line:#D8C39E;
  --ink:#4A3420; --muted:#8A7455;
  --teal:#6B8E7A; --teal-deep:#3F5C4C; --orange:#C1732E; --amber:#B8860B;
  --danger:#A8432E; --success:#5C7A4A; --blue:#5C7A9A; --purple:#8A6B8F; --rose:#B8697A;
  --shadow-card:0 2px 6px rgba(74,52,32,0.18); --shadow-pop:0 20px 46px rgba(74,52,32,0.3);
  --focus-ring:rgba(107,142,122,0.3);
}
html[data-styl="vintage"][data-tryb="ciemny"]{
  --page-bg:#241C14; --surface:#332920; --bg-alt:#2C231A; --line:#4A3B2A;
  --ink:#F0E4CC; --muted:#B8A588;
  --teal:#8FB89F; --teal-deep:#4C6B58; --orange:#D98A4A; --amber:#E0B84D;
  --danger:#D67A5C; --success:#8FB89F; --blue:#8FAAC4; --purple:#B39AC0; --rose:#D68FA0;
  --shadow-card:0 2px 6px rgba(0,0,0,0.4); --shadow-pop:0 20px 46px rgba(0,0,0,0.55);
  --focus-ring:rgba(217,138,74,0.3);
}
html[data-styl="vintage"] .admin-sidebar{ background:#3B2E1F; }
html[data-styl="vintage"] .card, html[data-styl="vintage"] .dash-card, html[data-styl="vintage"] .stat-card{
  border:1px solid var(--line); box-shadow:var(--shadow-card), inset 0 0 0 4px var(--surface);
}
html[data-styl="vintage"] h1, html[data-styl="vintage"] h2{ font-variant:small-caps; letter-spacing:0.03em; }
html[data-styl="vintage"] .badge{ border-radius:2px; }
html[data-styl="vintage"] .btn{ border-radius:2px; text-transform:uppercase; letter-spacing:0.04em; font-weight:700; }
html[data-styl="vintage"] .admin-nav a.is-active{ border-left:3px solid var(--orange); background:rgba(193,115,46,0.1); }

/* --- Ocean: głębiny morskie — na jasno spokojna toń przy powierzchni, na
   ciemno bioluminescencja w mroku. Pigułkowe (w pełni zaokrąglone) przyciski
   i pozycje menu przywołują bąbelki/kamyki obtoczone wodą. --- */
html[data-styl="ocean"][data-tryb="jasny"]{
  --page-bg:#E3F2F5; --surface:#FFFFFF; --bg-alt:#D6EEF2; --line:#B8DEE5;
  --ink:#0D2B36; --muted:#5C8A96;
  --teal:#1AA8B8; --teal-deep:#0A5C68; --orange:#F4A300; --amber:#D9A441;
  --danger:#D6524A; --success:#1FA478; --blue:#2F7FC4; --purple:#5C6FC4; --rose:#D67A9A;
  --shadow-card:0 4px 14px rgba(10,92,104,0.14); --shadow-pop:0 24px 55px rgba(10,92,104,0.26);
  --focus-ring:rgba(26,168,184,0.3);
}
html[data-styl="ocean"][data-tryb="ciemny"]{
  --page-bg:#031A24; --surface:#08283A; --bg-alt:#0C3244; --line:#144A5E;
  --ink:#DFF6FA; --muted:#7FB0BE;
  --teal:#2EF0D6; --teal-deep:#0A5C66; --blue:#4FA8FF; --purple:#7A6FE0; --rose:#FF7AB8; --orange:#FFB84D;
  --shadow-card:0 0 0 1px rgba(46,240,214,0.12), 0 4px 18px rgba(0,0,0,0.5);
  --shadow-pop:0 0 50px rgba(46,240,214,0.3), 0 20px 50px rgba(0,0,0,0.6);
  --focus-ring:rgba(46,240,214,0.35);
}
html[data-styl="ocean"] .admin-sidebar{ background:linear-gradient(180deg, var(--sidebar-bg), #06384A 70%, #0A5C68); }
html[data-styl="ocean"][data-tryb="ciemny"] body{
  background-color:var(--page-bg);
  background-image:
    radial-gradient(ellipse 900px 600px at 20% 0%, rgba(46,240,214,0.12), transparent 60%),
    radial-gradient(ellipse 700px 500px at 100% 100%, rgba(79,168,255,0.14), transparent 55%);
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
}
html[data-styl="ocean"] .btn{ border-radius:999px; }
html[data-styl="ocean"] .admin-nav a{ border-radius:999px; }
html[data-styl="ocean"] .admin-nav a.is-active{ box-shadow:inset 3px 0 0 var(--teal), 0 0 12px var(--teal); }
html[data-styl="ocean"] .btn:hover{ box-shadow:0 0 12px var(--teal); }

/* --- Ustawienia → Kopia zapasowa --- */
.kopie-zapasowe-lista{ display:flex; flex-direction:column; }
.kopie-zapasowe-wiersz{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:10px 4px; border-bottom:1px solid var(--line);
}
.kopie-zapasowe-wiersz:last-child{ border-bottom:none; }
.kopie-zapasowe-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.kopie-zapasowe-info strong{ font-size:0.86rem; }
.kopie-zapasowe-info .hint{ font-size:0.72rem; word-break:break-all; }
.kopie-zapasowe-akcje{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.kopie-zapasowe-akcje form{ display:contents; }
html[data-styl="ocean"] input:focus, html[data-styl="ocean"] textarea:focus, html[data-styl="ocean"] select:focus{
  box-shadow:0 0 0 3px var(--focus-ring), 0 0 10px var(--focus-ring);
}

/* --- Luksus: czerń i złoto, cienka linia zamiast grubych obramowań,
   wersaliki z rozstrzeloną interlinią — butikowa elegancja. --- */
html[data-styl="luksus"][data-tryb="jasny"]{
  --page-bg:#F5F0E6; --surface:#FFFFFF; --bg-alt:#EDE4D0; --line:#D4C39A;
  --ink:#1A1508; --muted:#6B5F42;
  --teal:#8A7530; --teal-deep:#5C4E1F; --orange:#B8860B; --amber:#C9A227;
  --danger:#8A2E2E; --success:#3F6B4A; --blue:#3A4E7A; --purple:#5C4A7A; --rose:#8A4A5C;
  --shadow-card:0 2px 8px rgba(26,21,8,0.12); --shadow-pop:0 24px 55px rgba(26,21,8,0.24);
  --focus-ring:rgba(201,162,39,0.35);
}
html[data-styl="luksus"][data-tryb="ciemny"]{
  --page-bg:#0A0906; --surface:#161310; --bg-alt:#1E1A14; --line:#3A331F;
  --ink:#F0E6C8; --muted:#A6987A;
  --teal:#D4AF37; --teal-deep:#8A7328; --orange:#E0BF5C; --amber:#E0C468;
  --danger:#C4614F; --success:#7CA478; --blue:#7896C4; --purple:#A088C4; --rose:#C48AA0;
  --shadow-card:0 2px 10px rgba(0,0,0,0.5); --shadow-pop:0 24px 60px rgba(0,0,0,0.65), 0 0 30px rgba(212,175,55,0.15);
  --focus-ring:rgba(212,175,55,0.4);
}
html[data-styl="luksus"] .admin-sidebar{ background:linear-gradient(180deg, #0A0906, #1E1A0A); border-right:1px solid rgba(212,175,55,0.25); }
html[data-styl="luksus"] .card, html[data-styl="luksus"] .dash-card, html[data-styl="luksus"] .stat-card{ border:1px solid var(--line); }
html[data-styl="luksus"] h1, html[data-styl="luksus"] h2{ font-weight:700; letter-spacing:0.06em; text-transform:uppercase; }
html[data-styl="luksus"] .btn{ border:1px solid var(--teal); letter-spacing:0.03em; text-transform:uppercase; font-weight:600; }
html[data-styl="luksus"] .admin-nav a.is-active{ border-left:2px solid var(--teal); background:rgba(212,175,55,0.08); color:var(--teal); }

/* --- Las: mchowa zieleń i kora drzew, miękkie zaokrąglenia i delikatne
   uniesienie kart pod kursorem — organiczny, spokojny klimat leśnej polany. --- */
html[data-styl="las"]{
  --radius-lg:16px; --radius-md:12px; --radius-sm:9px;
}
html[data-styl="las"][data-tryb="jasny"]{
  --page-bg:#EEF3E4; --surface:#FFFFFF; --bg-alt:#E4EDD6; --line:#C9DBB0;
  --ink:#2A3B1E; --muted:#6B8054;
  --teal:#5C8F52; --teal-deep:#3A5C32; --orange:#C1732E; --amber:#B8860B;
  --danger:#A8432E; --success:#4A8F52; --blue:#4A7A9A; --purple:#7A6FA0; --rose:#B8697A;
  --shadow-card:0 3px 10px rgba(42,59,30,0.14); --shadow-pop:0 22px 50px rgba(42,59,30,0.26);
  --focus-ring:rgba(92,143,82,0.3);
}
html[data-styl="las"][data-tryb="ciemny"]{
  --page-bg:#131C0E; --surface:#1C2815; --bg-alt:#20301A; --line:#3A4C2E;
  --ink:#E4EDD0; --muted:#9AAF82;
  --teal:#7CBF6A; --teal-deep:#4A7A3E; --orange:#D98A4A; --amber:#E0C468;
  --danger:#D6816C; --success:#8FD97A; --blue:#7CA4C4; --purple:#A697C4; --rose:#D68FA0;
  --shadow-card:0 3px 10px rgba(0,0,0,0.4); --shadow-pop:0 22px 50px rgba(0,0,0,0.55);
  --focus-ring:rgba(124,191,106,0.3);
}
html[data-styl="las"] .admin-sidebar{ background:linear-gradient(180deg, #1C2815, #2E3F1F); }
html[data-styl="las"] .card, html[data-styl="las"] .dash-card, html[data-styl="las"] .stat-card{ border:1px solid var(--line); }
html[data-styl="las"] .card, html[data-styl="las"] .dash-card{ transition:transform 0.18s ease, box-shadow 0.18s ease; }
html[data-styl="las"] .card:hover, html[data-styl="las"] .dash-card:hover{ transform:translateY(-2px); }
html[data-styl="las"] .admin-nav a.is-active{ background:var(--selected-bg); box-shadow:inset 3px 0 0 var(--teal); }

/* --- Przełącznik jasny/ciemny (Ustawienia → Wygląd) — pigułkowy suwak
   z ikoną słońca/księżyca zamiast zwykłych radiobuttonów. Podświetlenie
   aktywnej opcji działa czysto przez CSS (:has), bez JS. --- */
.tryb-suwak{
  display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--bg-alt); border:1px solid var(--line);
  width:fit-content;
}
.tryb-suwak-opcja{
  position:relative; display:flex; align-items:center; gap:6px; padding:8px 18px; border-radius:999px;
  cursor:pointer; font-weight:600; font-size:0.84rem; color:var(--muted); transition:color 0.2s ease;
}
.tryb-suwak-opcja input{ position:absolute; opacity:0; width:1px; height:1px; }
.tryb-suwak-opcja span{ font-size:1rem; line-height:1; }
.tryb-suwak-opcja:has(input:checked){ color:#fff; }
.tryb-suwak-opcja:has(input:checked)::before{
  content:''; position:absolute; inset:0; z-index:-1; border-radius:999px;
  background:linear-gradient(135deg, var(--amber), var(--orange));
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

/* --- podgląd (swatch) każdej kombinacji styl+tryb w Ustawieniach --- */
.wyglad-swatch{ display:block; width:100%; height:34px; border-radius:6px; border:1px solid rgba(0,0,0,0.12); }
.wyglad-swatch--podstawowy-jasny{ background:linear-gradient(135deg, #F3F5F7 50%, #40BEB5 50%); }
.wyglad-swatch--podstawowy-ciemny{ background:linear-gradient(135deg, #12181B 50%, #40BEB5 50%); }
.wyglad-swatch--minimalistyczny-jasny{ background:linear-gradient(135deg, #F4F4F4 50%, #1A1A1A 50%); border-radius:0; }
.wyglad-swatch--minimalistyczny-ciemny{ background:linear-gradient(135deg, #141414 50%, #EDEDED 50%); border-radius:0; }
.wyglad-swatch--cyber-jasny{ background:linear-gradient(135deg, #FAFAFF 50%, #00B39E 50%); box-shadow:0 0 6px rgba(0,179,158,0.4); }
.wyglad-swatch--cyber-ciemny{ background:linear-gradient(135deg, #0A0612 50%, #00FFD1 50%); box-shadow:0 0 6px rgba(0,255,209,0.5); }
.wyglad-swatch--brutal-jasny{ background:linear-gradient(135deg, #FFF7DE 50%, #FF5C00 50%); border:2px solid #0A0A0A; border-radius:0; box-shadow:3px 3px 0 #0A0A0A; }
.wyglad-swatch--brutal-ciemny{ background:linear-gradient(135deg, #1A1A1A 50%, #FFD600 50%); border:2px solid #F5F5F0; border-radius:0; box-shadow:3px 3px 0 #F5F5F0; }
.wyglad-swatch--pastel-jasny{ background:linear-gradient(135deg, #FDF3FF 50%, #D6B3FF 50%); border-radius:14px; }
.wyglad-swatch--pastel-ciemny{ background:linear-gradient(135deg, #241B33 50%, #E0C4FF 50%); border-radius:14px; }
.wyglad-swatch--zeszyt-jasny{ background:linear-gradient(135deg, #F5F1E2 50%, #2E7D6B 50%); }
.wyglad-swatch--zeszyt-ciemny{ background:linear-gradient(135deg, #16241B 50%, #7FD9C4 50%); }
.wyglad-swatch--kosmos-jasny{ background:linear-gradient(135deg, #F5EEFF 50%, #8A3FE0 50%); box-shadow:0 0 6px rgba(138,63,224,0.3); }
.wyglad-swatch--kosmos-ciemny{ background:linear-gradient(135deg, #050318 50%, #00F0FF 50%); box-shadow:0 0 8px rgba(0,240,255,0.5); }
.wyglad-swatch--retrofala-jasny{ background:linear-gradient(135deg, #FFE9F5 50%, #E0359A 50%); }
.wyglad-swatch--retrofala-ciemny{ background:linear-gradient(135deg, #1A0B2E 50%, #FF2E97 50%); box-shadow:0 0 8px rgba(255,46,151,0.4); }
.wyglad-swatch--szklo-jasny{ background:linear-gradient(135deg, rgba(232,238,252,0.9) 50%, #4E7FE0 50%); border:1px solid rgba(255,255,255,0.6); }
.wyglad-swatch--szklo-ciemny{ background:linear-gradient(135deg, rgba(14,18,36,0.9) 50%, #4FE0D1 50%); }
.wyglad-swatch--vintage-jasny{ background:linear-gradient(135deg, #F2E8D5 50%, #C1732E 50%); }
.wyglad-swatch--vintage-ciemny{ background:linear-gradient(135deg, #241C14 50%, #D98A4A 50%); }
.wyglad-swatch--ocean-jasny{ background:linear-gradient(135deg, #E3F2F5 50%, #1AA8B8 50%); border-radius:17px; }
.wyglad-swatch--ocean-ciemny{ background:linear-gradient(135deg, #031A24 50%, #2EF0D6 50%); border-radius:17px; box-shadow:0 0 6px rgba(46,240,214,0.4); }
.wyglad-swatch--luksus-jasny{ background:linear-gradient(135deg, #F5F0E6 50%, #B8860B 50%); }
.wyglad-swatch--luksus-ciemny{ background:linear-gradient(135deg, #0A0906 50%, #D4AF37 50%); box-shadow:0 0 6px rgba(212,175,55,0.35); }
.wyglad-swatch--las-jasny{ background:linear-gradient(135deg, #EEF3E4 50%, #5C8F52 50%); border-radius:14px; }
.wyglad-swatch--las-ciemny{ background:linear-gradient(135deg, #131C0E 50%, #7CBF6A 50%); border-radius:14px; }

/* --- szablony automatycznych maili: separator między kolejnymi szablonami --- */
.szablon-maila-blok{
  padding:18px 20px; background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-md);
}

/* ==========================================================
   MAGAZYN (magazyn.php) — okrojona ewidencja gadżetów/rekwizytów.
   ========================================================== */
/* Nagłówek działu — płaski, bez ciężkiej ramki-karty (spójny z "flat" wyglądem Analityki). */
.magazyn-header{ margin:0 0 4px; }
.magazyn-header-tytul{ margin:0 0 4px; font-size:1.15rem; }

/* Przycisk główny w kolorze akcentu strony (teal), zamiast domyślnego pomarańczowego .btn-accent. */
.magazyn-btn-primary{
  display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:none;
  border-radius:999px; background:var(--page-accent, var(--teal)); color:#fff;
  font-size:0.85rem; font-weight:600; cursor:pointer; white-space:nowrap;
}
.magazyn-btn-primary:hover{ filter:brightness(0.94); }
.magazyn-btn-primary--small{ padding:7px 14px; font-size:0.8rem; }

.magazyn-toolbar{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.magazyn-szukaj-wrap{ position:relative; flex:1; min-width:220px; display:flex; align-items:center; }
.magazyn-szukaj-wrap svg{ position:absolute; left:13px; color:var(--muted); pointer-events:none; }
.magazyn-szukaj{
  width:100%; padding:9px 14px 9px 38px; border:1px solid var(--line); border-radius:999px;
  font-family:inherit; font-size:0.86rem; background:var(--surface); color:var(--ink);
}
.magazyn-widok-przelacznik{ display:flex; gap:4px; border:1px solid var(--line); border-radius:999px; padding:3px; flex-shrink:0; }
.magazyn-widok-btn{
  width:32px; height:30px; border:none; border-radius:999px; background:none; color:var(--muted);
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:background 0.12s ease, color 0.12s ease;
}
.magazyn-widok-btn:hover{ background:var(--bg-alt); }
.magazyn-widok-btn.is-active{ background:var(--page-accent, var(--teal)); color:#fff; }

.magazyn-chipy{ display:flex; gap:7px; flex-wrap:wrap; margin-top:14px; }
.magazyn-chip{
  display:inline-flex; align-items:center; gap:5px;
  border:1px solid var(--line); background:var(--surface); color:var(--muted); border-radius:999px;
  padding:5px 13px; font-size:0.78rem; font-weight:600; cursor:pointer; transition:background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.magazyn-chip:hover{ border-color:var(--page-accent, var(--teal)); }
.magazyn-chip.is-active{ background:var(--page-accent, var(--teal)); border-color:var(--page-accent, var(--teal)); color:#fff; }
.magazyn-chip--ikona svg{ width:13px; height:13px; flex-shrink:0; }

/* Panel filtrów (kategoria/miejsce/grupa) — schowany domyślnie za
   przyciskiem "Filtry", żeby przy wielu kategoriach/skrzyniach/grupach
   tematycznych nie zaśmiecał widoku. Aktualnie wybrane filtry i tak są
   zawsze widoczne jako zdejmowalne "tagi" pod paskiem narzędzi, nawet gdy
   panel jest zamknięty. */
.magazyn-filtry-btn{ position:relative; }
.magazyn-filtry-licznik{
  display:inline-flex; align-items:center; justify-content:center; min-width:16px; height:16px; padding:0 4px;
  background:var(--page-accent, var(--teal)); color:#fff; border-radius:999px; font-size:0.68rem; font-weight:700;
}
.magazyn-filtry-btn[aria-expanded="true"]{ border-color:var(--page-accent, var(--teal)); color:var(--page-accent, var(--teal-deep)); }
.magazyn-filtry-panel{
  display:none; flex-direction:column; gap:12px; margin-top:14px; padding:14px 16px;
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-alt);
}
.magazyn-filtry-panel.is-open{ display:flex; }
.magazyn-filtry-sekcja{ display:flex; flex-direction:column; gap:6px; }
.magazyn-filtry-sekcja .magazyn-chipy{ margin-top:0; }
.magazyn-filtry-etykieta{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--muted); }

.magazyn-filtry-aktywne{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:14px; }
.magazyn-filtr-tag{
  border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:999px;
  padding:4px 11px; font-size:0.76rem; font-weight:600; cursor:pointer; transition:background 0.12s ease, border-color 0.12s ease;
}
.magazyn-filtr-tag:hover{ border-color:var(--danger); color:var(--danger); }
.magazyn-filtr-tag--wyczysc{ border-style:dashed; color:var(--muted); font-weight:500; }
.magazyn-filtr-tag--wyczysc:hover{ border-color:var(--muted); color:var(--ink); }

/* Siatka (domyślna) — karty w kolumnach, zdjęcie na górze. */
.magazyn-lista{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:14px; margin-top:16px;
}
.magazyn-karta{
  border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); overflow:hidden;
  cursor:pointer; transition:box-shadow 0.12s ease, transform 0.12s ease; display:flex; flex-direction:column;
}
.magazyn-karta:hover{ box-shadow:var(--shadow-card, 0 4px 14px rgba(0,0,0,0.08)); transform:translateY(-1px); }
.magazyn-karta-zdjecie{
  aspect-ratio:1/1; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.magazyn-karta-zdjecie img{ width:100%; height:100%; object-fit:cover; }
.magazyn-karta-brak-zdjecia{ color:var(--muted); opacity:0.5; }
.magazyn-karta-brak-zdjecia svg{ width:32px; height:32px; }
.magazyn-karta-tresc{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.magazyn-karta-naglowek{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.magazyn-karta-nazwa{ font-size:0.9rem; line-height:1.25; }
.magazyn-karta-ilosc{
  flex-shrink:0; font-size:0.72rem; font-weight:700; color:var(--page-accent, var(--teal-deep));
  background:var(--bg-alt); border-radius:999px; padding:2px 8px;
}
.magazyn-karta-kategoria{ font-size:0.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:0.02em; }
.magazyn-karta-lokalizacja{ display:inline-flex; align-items:center; gap:5px; font-size:0.78rem; color:var(--muted); }
.magazyn-karta-opis{
  font-size:0.78rem; color:var(--muted); margin:2px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Grupy tematyczne (etykiety niezależne od kategorii, np. "Świąteczne") —
   dymki na karcie przedmiotu oraz multi-select w formularzu dodawania/edycji. */
.magazyn-karta-grupy{ display:flex; flex-wrap:wrap; gap:4px; margin-top:2px; }
.magazyn-grupa-tag{
  display:inline-flex; align-items:center; gap:4px;
  font-size:0.68rem; font-weight:600; color:var(--page-accent, var(--teal-deep));
  background:var(--selected-bg, var(--bg-alt)); border-radius:999px; padding:2px 8px;
}
.magazyn-grupa-tag svg{ width:11px; height:11px; }
.magazyn-grupy-multiselect{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.magazyn-grupa-checkbox{
  display:inline-flex; align-items:center; gap:5px; font-size:0.8rem; font-weight:500;
  border:1px solid var(--line); border-radius:999px; padding:5px 12px 5px 10px; cursor:pointer;
  background:var(--surface); transition:border-color 0.12s ease;
}
.magazyn-grupa-checkbox:has(input:checked){ border-color:var(--page-accent, var(--teal)); background:var(--selected-bg, var(--bg-alt)); }

/* Lista — wiersze poziome, miniatura z lewej. */
.magazyn-lista[data-widok="lista"]{ display:flex; flex-direction:column; gap:8px; }
.magazyn-lista[data-widok="lista"] .magazyn-karta{ flex-direction:row; align-items:center; }
.magazyn-lista[data-widok="lista"] .magazyn-karta-zdjecie{ width:56px; height:56px; flex-shrink:0; aspect-ratio:auto; }
.magazyn-lista[data-widok="lista"] .magazyn-karta-brak-zdjecia{ font-size:1.3rem; }
.magazyn-lista[data-widok="lista"] .magazyn-karta-tresc{ flex-direction:row; align-items:center; flex-wrap:wrap; gap:6px 14px; padding:8px 14px; }
.magazyn-lista[data-widok="lista"] .magazyn-karta-naglowek{ flex-direction:row; gap:8px; }
.magazyn-lista[data-widok="lista"] .magazyn-karta-opis{ display:none; }
.magazyn-lista[data-widok="lista"] .magazyn-karta-grupy{ margin-top:0; }

/* Modal dodawania/edycji — podgląd zdjęcia obok przycisków wgrywania. */
.magazyn-form-zdjecie{ display:flex; gap:14px; align-items:center; margin-top:4px; }
.magazyn-form-zdjecie-podglad{
  width:76px; height:76px; flex-shrink:0; border-radius:var(--radius-sm); background:var(--bg-alt);
  display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line);
}
.magazyn-form-zdjecie-podglad img{ width:100%; height:100%; object-fit:cover; }
.magazyn-form-zdjecie-podglad span{ color:var(--muted); opacity:0.5; display:flex; }
.magazyn-form-zdjecie-podglad span svg{ width:28px; height:28px; }
.magazyn-form-zdjecie-akcje{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.magazyn-form-zdjecie-przyciski{ display:flex; gap:8px; flex-wrap:wrap; }

/* Modal "Zawartość skrzyń" — podsumowanie do spakowania przed imprezą. */
.magazyn-skrzynie-siatka{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:14px; margin-top:14px; }
.magazyn-skrzynia{ border:1px solid var(--line); border-radius:var(--radius-md); padding:12px 14px; background:var(--bg-alt); }
.magazyn-skrzynia h4{ margin:0 0 8px; font-size:0.92rem; display:flex; align-items:center; gap:6px; }
.magazyn-skrzynia-kategoria{
  font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--page-accent, var(--teal-deep));
  margin-top:10px;
}
.magazyn-skrzynia-kategoria:first-of-type{ margin-top:0; }
.magazyn-skrzynia-lista{ list-style:none; margin:4px 0 0; padding:0; }
.magazyn-skrzynia-lista li{ font-size:0.84rem; padding:2px 0; }

@media (max-width:600px){
  .magazyn-lista{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
}

/* ==========================================================
   GALERIA DLA GOŚCI — panel zarządzania (galeria_gosci.php).
   ========================================================== */
.galeria-info-siatka{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:14px; margin-top:14px; }
.galeria-info-blok{ display:flex; flex-direction:column; gap:6px; }
.galeria-info-etykieta{ font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--muted); }
.galeria-pin-duzy{
  font-family:'Anton',sans-serif; font-size:1.6rem; letter-spacing:0.1em; color:var(--purple);
  background:var(--bg-alt); border-radius:var(--radius-sm); padding:4px 14px;
}

.galeria-admin-siatka{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; margin-top:14px; }
.galeria-admin-karta{
  position:relative; border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:1/1; background:var(--bg-alt);
  border:2px solid transparent;
}
.galeria-admin-karta.jest-wyroznione{ border-color:var(--amber); }
.galeria-admin-karta img{ width:100%; height:100%; object-fit:cover; display:block; }
.galeria-admin-karta-akcje{
  position:absolute; top:6px; right:6px; display:flex; gap:4px; opacity:0; transition:opacity 0.12s ease;
}
.galeria-admin-karta:hover .galeria-admin-karta-akcje{ opacity:1; }
.galeria-admin-ikona-btn{
  width:28px; height:28px; border-radius:50%; border:none; background:rgba(255,255,255,0.92); color:var(--ink);
  cursor:pointer; font-size:0.9rem; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.galeria-admin-ikona-btn--usun:hover{ background:var(--danger); color:#fff; }
@media (max-width:820px){
  .galeria-admin-karta-akcje{ opacity:1; } /* na dotyk nie ma hover — przyciski muszą być zawsze widoczne */
}

/* --- Ustawienia → Układy wydruków: wizualny edytor pozycji/rozmiarów ramek --- */
.uw-admin-siatka{ display:grid; grid-template-columns:repeat(auto-fit, minmax(480px, 1fr)); gap:18px; margin-top:14px; }
.uw-admin-karta{ border:1px solid var(--line); border-radius:var(--radius-md); padding:16px; background:var(--bg-alt); }
.uw-admin-karta-glowa{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:4px; }
.uw-admin-karta-glowa strong{ font-size:0.95rem; }
.uw-admin-karta-wymiar{ font-size:0.74rem; color:var(--muted); font-weight:600; flex-shrink:0; }
.uw-admin-karta-opis{ margin:0 0 12px; font-size:0.78rem; color:var(--muted); line-height:1.4; }
.uw-admin-nazwa-input{
  font-size:0.95rem; font-weight:700; border:1px solid transparent; background:transparent; border-radius:6px;
  padding:2px 6px; margin:-2px 0 -2px -6px; color:var(--ink); font-family:inherit; flex:1; min-width:0;
}
.uw-admin-nazwa-input:hover, .uw-admin-nazwa-input:focus{ border-color:var(--line); background:var(--surface); outline:none; }
.uw-admin-opis-input{
  display:block; width:100%; box-sizing:border-box; margin:0 0 12px -6px; width:calc(100% + 6px);
  font-size:0.78rem; color:var(--muted); line-height:1.4; font-family:inherit;
  border:1px solid transparent; background:transparent; border-radius:6px; padding:2px 6px; resize:vertical;
}
.uw-admin-opis-input:hover, .uw-admin-opis-input:focus{ border-color:var(--line); background:var(--surface); outline:none; }

.uw-admin-uklad{ display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start; }
.uw-admin-plotno-strefa{
  flex:1 1 260px; display:flex; align-items:center; justify-content:center; height:400px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm); padding:14px;
}
.uw-admin-plotno{
  position:relative; background:#fff; border-radius:6px; overflow:hidden; flex-shrink:0;
  border:1px solid var(--line); box-shadow:0 2px 10px rgba(0,0,0,0.08); touch-action:none;
}
.uw-admin-plotno::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px);
  background-size:10% 10%;
}
.uw-admin-ramka{
  position:absolute; background:rgba(64,190,181,0.14); border:2px dashed var(--teal); border-radius:4px;
  display:flex; align-items:center; justify-content:center; cursor:grab; touch-action:none;
}
.uw-admin-ramka:active{ cursor:grabbing; }
.uw-admin-ramka.jest-aktywna{ border-style:solid; border-color:var(--orange); background:rgba(241,110,34,0.14); z-index:2; }
.uw-admin-ramka-numer{
  position:absolute; top:-9px; left:-9px; width:20px; height:20px; border-radius:50%; background:var(--teal-deep);
  color:#fff; font-size:0.68rem; font-weight:700; display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.uw-admin-uchwyt{
  position:absolute; right:-10px; bottom:-10px; width:20px; height:20px; border-radius:50%; background:var(--orange);
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.3); cursor:nwse-resize; touch-action:none;
}
.uw-admin-ramka-usun{
  position:absolute; right:-10px; top:-10px; width:20px; height:20px; border-radius:50%; background:#B5484B;
  border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,0.3); color:#fff; font-size:0.6rem; line-height:1; padding:0;
  display:none; align-items:center; justify-content:center; cursor:pointer;
}
.uw-admin-ramka.jest-aktywna .uw-admin-ramka-usun{ display:flex; }

.uw-admin-panel-liczby{ flex:0 0 220px; border:1.5px solid var(--orange); background:rgba(241,110,34,0.06); border-radius:var(--radius-sm); padding:12px 14px; }
.uw-admin-panel-liczby.jest-puste{ border-style:dashed; border-color:var(--line); background:transparent; }
.uw-admin-panel-liczby-puste{ margin:0; font-size:0.78rem; color:var(--muted); line-height:1.45; }
.uw-admin-panel-liczby-glowa{ display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.uw-admin-panel-liczby-kropka{ width:9px; height:9px; border-radius:50%; background:var(--orange); flex-shrink:0; }
.uw-admin-panel-liczby-glowa strong{ font-size:0.84rem; }
.uw-admin-pola{ display:grid; grid-template-columns:1fr 1fr; gap:8px 10px; }
.uw-admin-pole{ display:flex; flex-direction:column; gap:3px; }
.uw-admin-pole label{ font-size:0.64rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em; color:var(--muted); }
.uw-admin-pole input{ width:100%; }

.uw-admin-karta-stopka{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); flex-wrap:wrap; }
.uw-admin-link-reset{ background:none; border:none; color:var(--muted); font:inherit; font-size:0.78rem; text-decoration:underline; cursor:pointer; padding:2px 0; }
.uw-admin-link-reset:hover{ color:var(--teal-deep); }

.uw-admin-logo{ margin:0 0 20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.uw-admin-przyklady{ margin:14px 0 20px; padding-bottom:18px; border-bottom:1px solid var(--line); }
.uw-admin-przyklady-siatka{ display:grid; grid-template-columns:repeat(auto-fill, minmax(90px, 1fr)); gap:10px; margin-bottom:4px; }
.uw-admin-przyklad-karta{ position:relative; aspect-ratio:3/2; border-radius:8px; overflow:hidden; border:1px solid var(--line); background:var(--bg-alt); }
.uw-admin-przyklad-karta img{ width:100%; height:100%; object-fit:cover; display:block; }
.uw-admin-przyklad-karta form{ margin:0; }
.uw-admin-przyklad-usun{
  position:absolute; top:4px; right:4px; width:22px; height:22px; border-radius:50%; border:none;
  background:rgba(255,255,255,0.92); cursor:pointer; font-size:0.7rem; line-height:1; box-shadow:0 1px 4px rgba(0,0,0,0.25);
}
.uw-admin-przyklad-usun:hover{ background:var(--danger); color:#fff; }

/* --- tła: rząd klikalnych "kafelków", dokładnie jeden rozwinięty naraz —
   patrz JS w admin/ustawienia.php. Zaczyna zwinięte (żadna zawartość pod
   spodem widoczna), dopóki admin nie kliknie w konkretne tło. --- */
.uw-tla-kafelki{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.uw-tlo-kafelek{
  display:flex; align-items:center; gap:7px; padding:7px 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--surface); font-size:0.82rem; font:inherit; cursor:pointer; color:var(--ink);
}
.uw-tlo-kafelek:hover{ border-color:var(--page-accent, var(--teal)); }
.uw-tlo-kafelek.jest-aktywny{ background:var(--page-accent, var(--teal)); border-color:var(--page-accent, var(--teal)); color:#fff; }
.uw-tlo-kafelek-licznik{ background:rgba(0,0,0,0.08); border-radius:999px; padding:1px 7px; font-size:0.72rem; font-weight:700; }
.uw-tlo-kafelek.jest-aktywny .uw-tlo-kafelek-licznik{ background:rgba(255,255,255,0.28); }
.uw-tlo-tresc:not([hidden]){
  display:block; padding:14px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--bg-alt); margin-bottom:6px;
}

/* --- domyślne szablony: zwarta lista wierszy zamiast siatki zawsze
   otwartych edytorów — kliknięcie w wiersz otwiera edycję w modalu (patrz
   .uw-admin-modal-overlay niżej), więc na ekranie widać tylko JEDEN
   otwarty szablon naraz. --- */
.uw-szablony-lista{ display:flex; flex-direction:column; gap:6px; margin-top:12px; }
.uw-szablony-wiersz{
  display:flex; align-items:center; gap:12px; padding:10px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); cursor:pointer; text-align:left; font:inherit; color:var(--ink); width:100%; box-sizing:border-box;
}
.uw-szablony-wiersz:hover{ border-color:var(--page-accent, var(--teal)); background:var(--bg-alt); }
.uw-szablony-wiersz-nazwa{ font-weight:600; font-size:0.86rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.uw-szablony-wiersz-format{ font-size:0.74rem; color:var(--muted); flex-shrink:0; }
.uw-szablony-wiersz-liczba{ font-size:0.74rem; color:var(--muted); flex-shrink:0; }
.uw-szablony-wiersz-tlo{ flex-shrink:0; font-size:0.86rem; }
.uw-szablony-nowe{ margin-top:10px; padding-top:14px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:6px; }
.uw-szablony-wiersz--nowy{ border-style:dashed; color:var(--muted); justify-content:flex-start; }

/* --- modal edycji jednego domyślnego szablonu — position:fixed nad
   wszystkim, jeden na raz; treść w środku to dokładnie ta sama
   .uw-admin-karta (płótno + przeciąganie), co wcześniej siedziała wprost
   w siatce, więc cały JS przeciągania działa bez zmian. --- */
.uw-admin-modal-overlay:not([hidden]){
  position:fixed; inset:0; background:rgba(15,25,23,0.55); z-index:200;
  display:flex; align-items:center; justify-content:center; padding:20px; box-sizing:border-box;
}
.uw-admin-modal-box{
  background:var(--surface); border-radius:var(--radius-lg); padding:26px; max-width:1200px; width:100%;
  max-height:92vh; overflow-y:auto; position:relative; box-shadow:var(--shadow-pop); box-sizing:border-box;
}
.uw-admin-modal-zamknij{
  position:absolute; top:14px; right:14px; width:28px; height:28px; border-radius:50%; border:none;
  background:rgba(0,0,0,0.06); color:var(--muted); font-size:0.9rem; cursor:pointer; line-height:1; z-index:1;
}
.uw-admin-modal-zamknij:hover{ background:var(--danger); color:#fff; }

/* --- wariant .uw-admin-karta UŻYWANY TYLKO wewnątrz modala Ustawień
   (klasa-modyfikator, celowo NIE zmieniamy gołej .uw-admin-karta ani
   .uw-admin-uklad — tych samych klas bazowych używa też edytor szablonów w
   panelu jednej rezerwacji, admin/uklad_wydruku.php, który ma zostać przy
   swoim dotychczasowym, jednokolumnowym układzie). Płótno po lewej, duże i
   dobrze widoczne; wszystkie pozostałe opcje i przyciski po prawej, w
   wąskiej, przewijanej kolumnie. --- */
.uw-admin-karta--modal{ display:flex; gap:24px; align-items:flex-start; }
.uw-admin-karta-lewa{ flex:1 1 auto; min-width:0; }
.uw-admin-karta-prawa{ flex:0 0 360px; min-width:0; display:flex; flex-direction:column; gap:12px; }
.uw-admin-karta--modal .uw-admin-plotno-strefa{ height:min(66vh, 680px); min-height:360px; }
.uw-admin-karta--modal .uw-admin-panel-liczby{ flex-basis:auto; width:100%; box-sizing:border-box; }
.uw-admin-karta--modal .uw-admin-dodaj-zdjecie{ align-self:flex-start; }
.uw-admin-karta--modal .uw-admin-karta-stopka{ margin-top:4px; padding-top:0; border-top:none; }

.uw-domyslne-tlo{ margin-top:6px; padding-top:16px; border-top:1px dashed var(--line); }
.uw-domyslne-tlo-podglad{ position:relative; display:inline-block; margin-bottom:10px; }
.uw-domyslne-tlo-podglad img{ max-width:220px; max-height:140px; border-radius:var(--radius-sm); border:1px solid var(--line); display:block; }
.uw-domyslne-tlo-podglad form{ margin:0; }

/* --- znak wodny: podgląd na jasno-ciemnej szachownicy (żeby było widać
   przezroczyste tło PNG) + siatka 3×3 do wyboru rogu/krawędzi/środka. --- */
.uw-znak-wodny-podglad{
  width:170px; height:120px; border:1px dashed var(--line); border-radius:var(--radius-sm);
  background:
    linear-gradient(45deg, var(--bg-alt) 25%, transparent 25%, transparent 75%, var(--bg-alt) 75%, var(--bg-alt)),
    linear-gradient(45deg, var(--bg-alt) 25%, var(--surface) 25%, var(--surface) 75%, var(--bg-alt) 75%, var(--bg-alt));
  background-size:16px 16px; background-position:0 0, 8px 8px;
  display:flex; align-items:center; justify-content:center; overflow:hidden; padding:8px; box-sizing:border-box;
}
.uw-znak-wodny-podglad img{ max-width:100%; max-height:100%; object-fit:contain; }
.uw-znak-wodny-siatka{
  display:grid; grid-template-columns:repeat(3, 26px); grid-template-rows:repeat(3, 26px); gap:4px;
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px; background:var(--bg-alt); width:fit-content;
}
.uw-znak-wodny-pozycja{
  display:flex; align-items:center; justify-content:center; cursor:pointer; border-radius:4px;
  background:var(--surface); border:1px solid var(--line);
}
.uw-znak-wodny-pozycja:hover{ border-color:var(--page-accent, var(--teal)); }
.uw-znak-wodny-pozycja:has(input:checked){ background:var(--page-accent, var(--teal)); border-color:var(--page-accent, var(--teal)); }
.uw-znak-wodny-pozycja input{ margin:0; }

@media (max-width:600px){
  .uw-admin-uklad{ flex-direction:column; }
  .uw-admin-panel-liczby{ flex-basis:auto; width:100%; }
  .uw-admin-modal-box{ padding:20px; }
}
@media (max-width:900px){
  .uw-admin-karta--modal{ flex-direction:column; }
  .uw-admin-karta-prawa{ flex-basis:auto; width:100%; }
  .uw-admin-karta--modal .uw-admin-plotno-strefa{ height:min(50vh, 440px); }
}

/* --- Tło layoutu (admin/uklad_wydruku.php) — karta na format, z podglądem
   w proporcjach papieru zamiast płaskiej miniaturki, i akcjami uporządkowanymi
   w wyraźną hierarchię (zapis/zamiana na pierwszym planie, usuń jako ikonka
   na zdjęciu, pobranie PNG jako osobny, drugoplanowy przycisk). --- */
.tlo-layoutu-siatka{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:18px; margin-top:14px; }
.tlo-layoutu-karta{ border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; background:var(--bg-alt); }
.tlo-layoutu-glowa{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:10px; }
.tlo-layoutu-glowa strong{ font-size:0.92rem; }
.tlo-layoutu-wymiar{ font-size:0.72rem; color:var(--muted); font-weight:600; flex-shrink:0; }

.tlo-layoutu-podglad{
  position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden;
  background:var(--surface); border:1px solid var(--line);
}
/* Elementy ozdobne mają przezroczyste tło — bez szachownicy nie byłoby
   widać ich krawędzi na jasnym tle panelu (patrz sekcja "Elementy ozdobne
   klienta" w uklad_wydruku.php). */
.tlo-layoutu-podglad.ma-checker{
  background:
    linear-gradient(45deg, var(--bg-alt) 25%, transparent 25%, transparent 75%, var(--bg-alt) 75%, var(--bg-alt)),
    linear-gradient(45deg, var(--bg-alt) 25%, var(--surface) 25%, var(--surface) 75%, var(--bg-alt) 75%, var(--bg-alt));
  background-size:16px 16px; background-position:0 0, 8px 8px;
}
.tlo-layoutu-podglad img{ width:100%; height:100%; object-fit:contain; display:block; }
.tlo-layoutu-puste{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; text-align:center; padding:10px; color:var(--muted);
}
.tlo-layoutu-puste span{ font-size:1.6rem; opacity:0.5; }
.tlo-layoutu-puste p{ margin:0; font-size:0.72rem; line-height:1.4; }

.tlo-layoutu-png-link{ display:flex; }
.tlo-layoutu-stopka{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.uw-widocznosc-forma{ margin:0; }
.toggle-pill--mini{ font-size:0.7rem; margin:0; gap:6px; }
.toggle-pill--mini .toggle-pill-suwak{ width:30px; height:17px; }
.toggle-pill--mini .toggle-pill-suwak::before{ width:13px; height:13px; }
.toggle-pill--mini input:checked + .toggle-pill-suwak::before{ transform:translateX(13px); }

/* --- wersja "male" — karty własnego tła klienta / elementów ozdobnych
   klienta (patrz admin/uklad_wydruku.php): zajmowały za dużo miejsca przy
   większej liczbie wariantów/elementów, więc znacznie mniejsze niż karty
   modułu "Tło layoutu" wyżej. --- */
.tlo-layoutu-siatka--male{ grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; }
.tlo-layoutu-karta--male{ padding:8px; }
/* Nagłówek karty w kolumnie (nie obok siebie) — data wgrania ("wgrano 27
   sierpnia 2026") w wąskiej karcie nie mieści się już w jednej linii obok
   nazwy, więc zamiast wymuszać zawijanie w środku pojedynczego <span>
   (co i tak wystawało poza kartę przy długich datach), całą "głowę"
   układamy pionowo. */
.tlo-layoutu-karta--male .tlo-layoutu-glowa{ flex-direction:column; align-items:flex-start; gap:2px; margin-bottom:6px; }
.tlo-layoutu-karta--male .tlo-layoutu-glowa strong{ font-size:0.74rem; }
.tlo-layoutu-karta--male .tlo-layoutu-wymiar{ flex-shrink:1; white-space:normal; max-width:100%; }
.tlo-layoutu-podglad--male{ aspect-ratio:1/1; }
.tlo-layoutu-puste--male{ position:static; height:100%; padding:0; }
.tlo-layoutu-karta--male .btn-small{ font-size:0.68rem; padding:4px 8px; white-space:nowrap; }

/* --- tabela mm / historia zmian (przyciski w rez-header-links) --- */
.uw-admin-tabela-mm{
  margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--bg-alt);
}
.uw-admin-tabela-mm[hidden]{ display:none; }
.uw-admin-tabela-mm pre{ margin:0; white-space:pre-wrap; font-family:monospace; font-size:0.78rem; line-height:1.5; color:var(--ink); }

.uw-modal-overlay-admin{
  position:fixed; inset:0; z-index:100; background:rgba(14,22,19,0.55);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.uw-modal-overlay-admin[hidden]{ display:none; }
.uw-modal-box-admin{
  background:var(--surface); border-radius:var(--radius-md); padding:20px; max-width:520px; width:100%;
  max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.35);
}
.uw-modal-box-admin-glowa{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-shrink:0; }
.uw-modal-box-admin-zamknij{
  background:none; border:none; color:var(--muted); font-size:1.1rem; line-height:1; cursor:pointer; padding:4px; border-radius:50%;
}
.uw-modal-box-admin-zamknij:hover{ background:var(--bg-alt); }
.uw-historia-lista{ overflow-y:auto; display:flex; flex-direction:column; gap:10px; }
.uw-historia-wpis{ display:flex; gap:10px; align-items:flex-start; padding-bottom:10px; border-bottom:1px solid var(--line); }
.uw-historia-wpis:last-child{ border-bottom:none; padding-bottom:0; }
.uw-historia-znacznik{ font-size:1.1rem; flex-shrink:0; }
.uw-historia-tresc p{ font-size:0.84rem; line-height:1.4; }
.uw-historia-meta{ font-size:0.7rem; color:var(--muted); }
.uw-wersje-podglad-linki{ margin-top:4px; font-size:0.74rem; color:var(--muted); display:flex; gap:5px; flex-wrap:wrap; align-items:center; }
.uw-wersje-podglad-linki a{ color:var(--teal-deep); text-decoration:underline; }
.uw-wersje-podglad-link-btn{
  background:none; border:none; padding:0; font:inherit; color:var(--teal-deep); text-decoration:underline; cursor:pointer;
}
.uw-modal-box-admin--podglad{ max-width:min(90vw, 700px); }
.uw-wersja-podglad-obraz-strefa{
  flex:1; overflow:auto; display:flex; align-items:center; justify-content:center;
  background:var(--page-bg); border-radius:var(--radius-sm); min-height:200px;
}
.uw-wersja-podglad-obraz-strefa img{ max-width:100%; max-height:75vh; display:block; border-radius:var(--radius-sm); }

/* --- Panel nagłówka "Układ wydruku" (status/link/uprawnienia/akcje) --- */
.uw-uklad-panel{
  display:flex; flex-direction:column; gap:12px; margin-top:14px; padding:16px 18px;
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-lg);
}
.uw-uklad-status-wiersz{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.uw-uklad-chip{
  display:inline-flex; align-items:center; gap:4px; font-size:0.76rem; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px 10px;
}
.uw-uklad-link-wiersz{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.uw-uklad-link-etykieta{ font-size:0.82rem; color:var(--ink); font-weight:600; flex-shrink:0; }

/* Przełączniki uprawnień klienta — duplikat tych samych ustawień, co niżej w
   swoich pełnych sekcjach (Własne tło/Elementy ozdobne/dwie blokady), tylko
   w zwartej formie tu w belce, żeby dało się je zmienić bez przewijania. */
.uw-uklad-uprawnienia{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding-top:2px; border-top:1px dashed var(--line); padding-top:10px; }
.uw-uklad-uprawnienia-etykieta{ font-size:0.72rem; color:var(--muted); font-weight:700; text-transform:uppercase; letter-spacing:0.02em; }
.uw-uklad-uprawnienia .uw-widocznosc-forma{ display:inline-flex; }

.uw-uklad-akcje-wiersz{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.uw-uklad-akcje-grupa{ display:flex; gap:8px; flex-wrap:wrap; }
.uw-uklad-akcje-grupa--niebezpieczne{ opacity:0.75; }
.uw-uklad-akcje-grupa--niebezpieczne:hover,
.uw-uklad-akcje-grupa--niebezpieczne:focus-within{ opacity:1; }
@media (max-width:640px){
  .uw-uklad-akcje-wiersz{ flex-direction:column; align-items:stretch; }
}

/* --- Analityka (admin/analityka.php) --- */
.analityka-suma{ font-size:1.4rem; font-weight:700; }
.analityka-lista{ display:flex; flex-direction:column; gap:14px; }
.analityka-wiersz-glowa{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:5px; }
.analityka-pasek-tor{ height:10px; border-radius:999px; background:var(--bg-alt); overflow:hidden; }
.analityka-pasek-wypelnienie{ height:100%; border-radius:999px; background:var(--orange); transition:width 0.3s ease; }
.analityka-pasek-wypelnienie--blue{ background:var(--blue); }

.analityka-trend-wykres{ width:100%; max-width:640px; height:64px; display:block; margin-top:4px; }
.analityka-trend-etykiety{ display:flex; justify-content:space-between; max-width:640px; font-size:0.7rem; color:var(--muted); margin-top:2px; }

.analityka-donut-flex{ display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.analityka-donut-wrap{ position:relative; width:160px; height:160px; flex-shrink:0; }
.analityka-donut-wrap svg{ width:100%; height:100%; transform:rotate(-90deg); }
.analityka-donut-srodek{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; pointer-events:none;
}
.analityka-donut-srodek strong{ font-size:1.3rem; line-height:1.1; }
.analityka-donut-srodek span{ font-size:0.68rem; color:var(--muted); }
.analityka-donut-legenda{ display:flex; flex-direction:column; gap:7px; font-size:0.8rem; }
.analityka-donut-legenda-kropka{ display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; flex-shrink:0; }

.analityka-link-kod{ font-family:monospace; font-size:0.76rem; background:var(--bg-alt); padding:3px 7px; border-radius:5px; word-break:break-all; }

/* --- Analityka v2: przebudowany, zwijany układ --- */
.analityka-sekcja{ margin-bottom:14px; }
.analityka-sekcja summary{ font-size:0.92rem; }

.analityka-zakres-wlasny{ align-items:flex-end; gap:12px; flex-wrap:wrap; margin:10px 0 0; padding:12px; background:var(--bg-alt); border-radius:var(--radius-sm); }
.analityka-zakres-wlasny:not([hidden]){ display:flex; }
.analityka-zakres-wlasny label{ display:flex; flex-direction:column; gap:4px; font-size:0.78rem; color:var(--muted); }
.analityka-zakres-wlasny input[type=date]{ padding:6px 8px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); font:inherit; }

.analityka-delta{ display:inline-block; margin-top:2px; font-size:0.72rem; font-weight:700; padding:1px 6px; border-radius:999px; }
.analityka-delta--gora{ background:var(--tone-success-bg); color:var(--tone-success-fg); }
.analityka-delta--dol{ background:var(--tone-danger-bg); color:var(--tone-danger-fg); }
.analityka-delta--brak{ background:var(--tone-neutral-bg); color:var(--tone-neutral-fg); }
.analityka-delta--nowe{ background:var(--tone-warning-bg); color:var(--tone-warning-fg); }

.analityka-insight{
  margin:12px 0 0; padding:10px 14px; background:var(--tone-success-bg); color:var(--tone-success-fg);
  border-radius:var(--radius-sm); font-size:0.84rem;
}

.analityka-widok-przelacznik{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.analityka-widok-przelacznik button{
  padding:6px 12px; border:1px solid var(--line); border-radius:999px; background:var(--surface); color:var(--muted);
  font:inherit; font-size:0.78rem; font-weight:600; cursor:pointer;
}
.analityka-widok-przelacznik button.jest-aktywny{ background:var(--page-accent, var(--teal)); border-color:var(--page-accent, var(--teal)); color:#fff; }

.analityka-stronicowanie{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; flex-wrap:wrap; }
.analityka-stronicowanie .jest-wylaczony{ opacity:0.35; cursor:default; pointer-events:none; }

.analityka-multibar-legenda{ display:flex; gap:16px; font-size:0.76rem; color:var(--muted); margin-bottom:12px; flex-wrap:wrap; }
.analityka-multibar-wiersz{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.analityka-multibar-etykieta{ width:150px; flex-shrink:0; font-size:0.82rem; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.analityka-multibar-grupa{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
.analityka-multibar-tor{ height:7px; border-radius:999px; background:var(--bg-alt); overflow:hidden; }
.analityka-multibar-slupek{ height:100%; border-radius:999px; transition:width 0.3s ease; }

.analityka-tydzien{ display:flex; align-items:flex-end; gap:10px; height:110px; }
.analityka-tydzien-slupek{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; height:100%; }
.analityka-tydzien-tor{ display:flex; align-items:flex-end; height:70px; }
.analityka-tydzien-wypelnienie{ width:22px; min-height:2px; border-radius:4px 4px 0 0; background:var(--teal); }
.analityka-tydzien-slupek span{ font-size:0.7rem; color:var(--muted); }

/* Kropka statusu na liście "Układy wydruków" — pomarańczowa dopóki klient
   jeszcze nie ułożył i nie zapisał swoich zdjęć, zielona gdy już to zrobił. */
.uklady-wydruku-status-kropka{
  display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:6px; vertical-align:middle;
}
.uklady-wydruku-status-kropka.jest-oczekujace{ background:var(--orange); }
.uklady-wydruku-status-kropka.jest-gotowe{ background:var(--success); }

/* Wiersz/panel układu wydruku świeżo zaakceptowanego przez klienta, którego
   admin jeszcze w ogóle nie otworzył (patrz admin_zobaczono) — wyraźnie
   podświetlony i podpisany, żeby dało się od razu skojarzyć z alertem
   "Wymaga Twojej uwagi" na pulpicie, bez szukania po datach. Znika
   automatycznie, gdy admin otworzy pełne zarządzanie tą pozycją. */
.konta-wiersz.jest-nieprzejrzany{ background:rgba(241,110,34,0.09); border-color:var(--orange); }
.konta-wiersz.jest-nieprzejrzany:hover{ background:rgba(241,110,34,0.15); }
.uklady-wydruku-badge-nowe{
  display:inline-flex; align-items:center; flex-shrink:0; background:var(--orange); color:#fff;
  font-size:0.62rem; font-weight:700; text-transform:uppercase; letter-spacing:0.02em;
  padding:2px 7px; border-radius:999px; margin-left:6px; vertical-align:middle;
}

/* =========================================================
   Oś czasu rezerwacji — moduł "os_czasu" w admin/rezerwacje.php.
   Klasy .reservation-timeline__* portowane z os-czasu/timeline.css (wygląd
   bazowy znaczników/etykiet), reszta (.os-czasu-*) to układ/chrome specyficzne
   dla tego panelu — kolory kategorii/typów przychodzą z JS (inline style),
   bo są konfigurowalne w Ustawieniach → System → Oś czasu.
   ========================================================= */
.os-czasu-glowa{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:12px 16px;
  border-bottom:1px solid var(--line); flex-shrink:0;
}
.os-czasu-glowa strong{ flex:1; }
/* Mały, subtelny przycisk "+" (dodaj wydarzenie) — szary, bez tła, tylko
   ikona w kółku, żeby nie konkurował wizualnie z nagłówkiem kafelka. */
.os-czasu-dodaj-btn{
  display:flex; align-items:center; justify-content:center; width:26px; height:26px; flex-shrink:0;
  background:none; border:1.5px solid var(--line); border-radius:50%; color:var(--muted); cursor:pointer;
  font-size:0.82rem; padding:0; transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.os-czasu-dodaj-btn:hover{ background:var(--bg-alt); color:var(--ink); border-color:var(--muted); }

.os-czasu-plotno-wrap{
  flex:1; min-height:200px; overflow:auto; position:relative; padding:10px 0;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.os-czasu-plotno-wrap::-webkit-scrollbar{ width:8px; height:8px; }
.os-czasu-plotno-wrap::-webkit-scrollbar-track{ background:transparent; }
.os-czasu-plotno-wrap::-webkit-scrollbar-thumb{ background:var(--line); border-radius:999px; }
.os-czasu-plotno-wrap::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
.reservation-timeline{
  --timeline-color-manual:#993C1D; --timeline-color-auto:#0F6E56; --timeline-color-main:#BA7517;
  --timeline-axis-color:var(--line); --timeline-today-color:var(--blue);
  position:relative; width:100%; min-height:100%;
}
.reservation-timeline__axis{ position:absolute; background:var(--timeline-axis-color); }
.reservation-timeline__axis--vertical{ left:50%; top:0; width:2px; transform:translateX(-50%); }
.reservation-timeline__axis--horizontal{ left:0; right:0; height:2px; }
.reservation-timeline__today{ position:absolute; background:var(--timeline-today-color); z-index:1; }
.reservation-timeline__today-label{
  font-size:0.68rem; font-weight:700; color:var(--timeline-today-color);
  background:var(--surface); padding:1px 7px; border-radius:999px; z-index:2; white-space:nowrap;
}
.reservation-timeline__stem{ position:absolute; background:var(--line); }
/* Ikona na PEŁNYM, kontrastowym tle w kolorze kategorii (patrz SPEC.md pkt
   3.4) — inaczej ginie na tle reszty osi. Kolor tła ustawiany z JS (kolor
   TYPU wydarzenia — manual/auto/main), a nie tu w CSS. */
.reservation-timeline__dot{
  position:absolute; border-radius:50%; display:flex; align-items:center; justify-content:center;
  color:#fff; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,0.25); border:1.5px solid var(--surface);
  font-size:0.5rem;
}
.reservation-timeline__dot--main{ box-shadow:0 0 0 2px var(--timeline-color-main), 0 1px 5px rgba(0,0,0,0.3); font-size:0.66rem; }
.reservation-timeline__label{ position:absolute; cursor:pointer; max-width:128px; line-height:1.2; }
.reservation-timeline__label-title{ font-size:0.66rem; font-weight:600; color:var(--ink); }
.reservation-timeline__label-title--main{ font-size:0.72rem; color:var(--timeline-color-main); }
.reservation-timeline__label-date{ font-size:0.58rem; color:var(--muted); }
.reservation-timeline__detail{
  margin-top:3px; padding:6px 10px; background:var(--bg-alt); border-radius:var(--radius-sm);
  font-size:0.72rem; color:var(--ink); line-height:1.4; position:relative; z-index:3;
  max-width:220px; box-shadow:var(--shadow-pop);
}
.reservation-timeline__detail a{ color:var(--teal-deep); font-weight:600; }

/* Tryb PIONOWY — flaga w LEWO (manual), w PRAWO (auto), patrz SPEC pkt 2 —
   margines dopasowany do nowej długości "nóżki" (26px) + promienia kropki. */
.os-czasu-etykieta--left{ right:50%; margin-right:38px; text-align:right; transform:translateY(-50%); }
.os-czasu-etykieta--right{ left:50%; margin-left:38px; text-align:left; transform:translateY(-50%); }
.os-czasu-etykieta--main{ left:50%; margin-left:24px; text-align:left; transform:translateY(-50%); }

/* Tryb POZIOMY — etykiety wyśrodkowane pod swoim znacznikiem. */
.os-czasu-etykieta-h{ transform:translateX(-50%); text-align:center; }
.os-czasu-etykieta-h--gora{ }

.os-czasu-ikony-wybor{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(38px, 1fr)); gap:6px; max-width:320px;
}
.os-czasu-ikona-opcja{
  display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); cursor:pointer; color:var(--muted);
}
.os-czasu-ikona-opcja input{ position:absolute; opacity:0; width:0; height:0; }
.os-czasu-ikona-opcja:has(input:checked){ border-color:var(--teal-deep); background:var(--teal-deep); color:#fff; }
.os-czasu-modal-box{ max-width:420px; text-align:left; }
.os-czasu-modal-box label{ font-size:0.85rem; font-weight:600; }
.os-czasu-modal-box input[type="text"], .os-czasu-modal-box input[type="date"], .os-czasu-modal-box textarea{
  width:100%; box-sizing:border-box; font-weight:400; margin-top:4px;
}

/* =========================================================
   Pasek postępu rezerwacji (lista rezerwacji) — patrz
   os-czasu/progress-stepper.html i os-czasu/SPEC.md pkt 7. Osobny wiersz
   TUŻ POD wierszem rezerwacji (.rez-wiersz-postepu, colspan na całą
   szerokość tabeli) zamiast osobnej kolumny — stąd para reguł niżej, które
   scalają oba wiersze wizualnie w jedną "kartę" (bez linii między nimi,
   z linią dopiero pod parą, przed kolejną rezerwacją).
   ========================================================= */
tbody tr:has(+ .rez-wiersz-postepu) td{ border-bottom:none; padding-bottom:6px; }
tbody tr:has(+ .rez-wiersz-postepu):hover td{ background:none; }
.rez-wiersz-postepu td{ padding-top:0; padding-bottom:10px; }
.rez-wiersz-postepu:hover td{ background:none; }
/* Kolumna "Status" — odznaka(i) i przycisk "Szczegóły" OBOK siebie (nie jedno
   pod drugim), wyśrodkowane w pionie względem całej wysokości wiersza —
   dzięki temu (razem z brakiem e-maila w kolumnie Klient) cały wiersz
   rezerwacji mieści się w jednej linii i jest dużo niższy. */
.rez-status-komorka{ display:flex; align-items:center; flex-wrap:wrap; height:100%; gap:10px; }
/* Status + "Nowa wiadomość" jeden POD drugim (nie obok) — inaczej dwie
   odznaki obok siebie niepotrzebnie rozszerzały kolumnę "Status" na liście
   rezerwacji. */
.rez-status-badges{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
/* Przycisk "Szczegóły" (drugie dziecko) zawsze przy prawej krawędzi kolumny,
   niezależnie od szerokości odznaki statusu przed nim (inaczej krótsze
   statusy typu "Odrzucone" zostawiały przycisk bliżej lewej niż dłuższe jak
   "Zaakceptowane", więc przyciski w kolejnych wierszach nie były w jednej
   linii). */
.rez-status-komorka > div:last-child{ margin-left:auto; }
.rez-pasek-postepu{ display:flex; align-items:flex-start; gap:4px; width:100%; max-width:640px; }
.rez-pasek-krok{ display:flex; flex-direction:column; align-items:center; position:relative; flex:1; min-width:0; }
.rez-pasek-linia{ position:absolute; top:9px; left:50%; width:100%; height:2px; z-index:0; background:var(--line); }
/* Nóżka wewnątrz kroku N łączy go z krokiem N+1 (patrz szerokość 100% liczona
   od jego własnego środka) — ostatni krok nie ma kogo łączyć, więc TO on ma
   ukrytą linię, nie pierwszy (wcześniejszy błąd: :first-child zamiast
   :last-child — dlatego brakowało łącznika Zapytanie→Akceptacja). */
.rez-pasek-krok:last-child .rez-pasek-linia{ display:none; }
.rez-pasek-linia.jest-ukonczona{ background:var(--success); }
.rez-pasek-kolko{
  width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:0.64rem; z-index:1; color:#fff; font-weight:700; flex-shrink:0; background:transparent; border:2px solid var(--line);
}
.rez-pasek-kolko.jest-ukonczony{ background:var(--success); border-color:var(--success); }
.rez-pasek-kolko.jest-aktualny{ background:var(--amber); border-color:var(--amber); }
.rez-pasek-kolko.jest-przerwany{ background:var(--danger); border-color:var(--danger); }
/* Dzień imprezy — bardzo widoczne: zielone tło (impreza "w toku") + mrugająca
   czerwona obwódka (patrz ustalenia — ma rzucać się w oczy na liście). */
.rez-pasek-kolko.jest-dzisiaj{ background:var(--success); border-color:var(--danger); animation:rez-pasek-mrugniecie 1.1s ease-in-out infinite; }
/* Galeria nieutworzona co najmniej dzień po imprezie — czerwone tło + ta sama mrugająca obwódka. */
.rez-pasek-kolko.jest-ostrzezenie{ background:var(--danger); border-color:var(--danger); animation:rez-pasek-mrugniecie 1.1s ease-in-out infinite; }
@keyframes rez-pasek-mrugniecie{
  0%, 100%{ box-shadow:0 0 0 0 rgba(192,57,43,0.75); }
  50%{ box-shadow:0 0 0 9px rgba(192,57,43,0); }
}
.rez-pasek-etykieta{ font-size:0.6rem; text-align:center; margin-top:3px; line-height:1.2; color:var(--muted); white-space:nowrap; }
.rez-pasek-etykieta.jest-aktualny{ color:var(--amber); font-weight:700; }
.rez-pasek-etykieta.jest-przerwany{ color:var(--danger); }
.rez-pasek-etykieta.jest-dzisiaj{ color:var(--success); font-weight:700; }
.rez-pasek-etykieta.jest-ostrzezenie{ color:var(--danger); font-weight:700; }