@font-face { font-family: 'Sharp'; src: url('fonty/SharpGroteskBook25.otf') format('opentype'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Sharp'; src: url('fonty/SharpGroteskMedium25.otf') format('opentype'); font-weight: 600; font-display: block; }
@font-face { font-family: 'Traulha'; src: url('fonty/Traulha.otf') format('opentype'); font-display: swap; }

:root {
  --czerwony: #FF3800;
  --krem: #FFFFE3;
  --tusz: #121212;
  --szary: #6b6a63;
  --linia: #e8e5d3;
  --zolty: #ffd23f;
  --ziel: #7fb03a;
  --zle: #e02b00;
  --uwaga: #c98a00;
  --tusz-ryciny: #3b2a20;
  --zloto: #d9a441;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Sharp', 'Assistant', -apple-system, Helvetica, Arial, sans-serif; color: var(--tusz); background: var(--krem); font-size: 15px; }

/* ziarno jak w cieniowaniu zwierzaków na wieczkach */
.ziarno-rog { position: relative; }
.ziarno-rog::after { content: ''; position: absolute; right: 0; bottom: 0; width: 520px; height: 100%; pointer-events: none;
  background: var(--czerwony); opacity: .16;
  -webkit-mask: url('grafiki/ziarno-rog.png') no-repeat right bottom / 520px 100%; mask: url('grafiki/ziarno-rog.png') no-repeat right bottom / 520px 100%; }

/* nagłówek */
.naglowek { background: var(--krem); }

/* scena w duchu wycinanek Gilliama – wiktoriańska rycina podmalowana ręcznie */
.scena { position: relative; height: 240px; overflow: hidden; border-bottom: 3px double var(--tusz-ryciny); }
.scena-tlo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ziarno-sceny { position: absolute; inset: 0; pointer-events: none; background: var(--tusz-ryciny); opacity: .10;
  -webkit-mask: url('grafiki/ziarno.png') repeat 0 0 / 160px; mask: url('grafiki/ziarno.png') repeat 0 0 / 160px; }
.eksponat, .chmura { transform-box: fill-box; transform-origin: 50% 100%; }

/* wiktoriańska ramka: papier z wklęsłymi narożnikami, podwójna linia tuszem, ozdobne rogi */
.ramka-wiktorianska { position: relative; background: #fffbea;
  --r: 14px;
  -webkit-mask: radial-gradient(circle var(--r) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle var(--r) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat; }
.ramka-wiktorianska::before { content: ''; position: absolute; inset: 7px 7px; border: 2px solid var(--tusz-ryciny); pointer-events: none; }
.ramka-wiktorianska::after { content: ''; position: absolute; inset: 12px; border: 1px solid var(--tusz-ryciny); pointer-events: none;
  background:
    radial-gradient(circle 3.5px, #c21d00 95%, #0000) 0 0 / 7px 7px no-repeat,
    radial-gradient(circle 3.5px, #c21d00 95%, #0000) 100% 0 / 7px 7px no-repeat,
    radial-gradient(circle 3.5px, #c21d00 95%, #0000) 0 100% / 7px 7px no-repeat,
    radial-gradient(circle 3.5px, #c21d00 95%, #0000) 100% 100% / 7px 7px no-repeat; }

.szyld-cien { position: absolute; left: 32px; top: 50%; transform: translateY(-50%); filter: drop-shadow(4px 6px 5px rgba(42,26,16,.45)); z-index: 2; }
.szyld { padding: 20px 30px 18px; text-align: center; max-width: 330px; }
.szyld .logo { height: 34px; display: block; margin: 0 auto 8px; }
h1 { font-family: 'Traulha', Georgia, serif; font-weight: 400; font-size: 40px; margin: 0; line-height: 1; color: var(--tusz-ryciny); }
/* „Magazyn” jak w napisie Latającego Cyrku: cyrkowe litery, granatowy obrys i cień, pomarańczowy pas */
.cyrk { font-family: 'Rye', 'Traulha', Georgia, serif; font-weight: 400; color: #fffbea; letter-spacing: 3px; text-transform: uppercase;
  text-shadow: 1.5px 0 #2c3786, -1.5px 0 #2c3786, 0 1.5px #2c3786, 0 -1.5px #2c3786, 1px 1px #2c3786, -1px -1px #2c3786, 1px -1px #2c3786, -1px 1px #2c3786,
    2px 2px #2c3786, 3px 3px #2c3786, 4px 4px #2c3786; }
h1.cyrk { font-size: 30px; line-height: 1; margin: 2px -30px 0; padding: 9px 30px 12px;
  background: #e0612b linear-gradient(#0000 0 3px, rgba(255,251,234,.5) 3px 4px, #0000 4px calc(100% - 4px), rgba(255,251,234,.5) calc(100% - 4px) calc(100% - 3px), #0000 0);
  border-top: 2px solid var(--tusz-ryciny); border-bottom: 2px solid var(--tusz-ryciny); position: relative; z-index: 1; }
/* wiktoriańskie róże z ryciny oplatają rogi szyldu i afisza */
.kwiaty { position: absolute; pointer-events: none; z-index: 3; }
.kwiaty-lewe { width: 150px; left: -40px; top: -30px; }
.kwiaty-prawe { width: 190px; right: -152px; bottom: -52px; }
.kwiaty-afisz { width: 300px; left: -170px; bottom: -160px; transform: rotate(-4deg); z-index: 5; }
.ozdobnik { display: block; width: 160px; height: 14px; margin: 8px auto 6px; }
.podtytul { margin: 0; color: #6a5545; font-size: 13px; letter-spacing: .3px; }

/* wejście (tylko raz, po zalogowaniu) – szarpany ruch klatka po klatce, jak wycinanki Gilliama:
   zwierzaki wyskakują jak z książeczki, chmury wjeżdżają */
.wejscie .eksponat { animation: wyskok .75s steps(5, end) both; }
.wejscie .chmura.z-lewej { animation: wjazd-lewa 2.2s steps(9, end) .3s both; }
.wejscie .chmura.z-prawej { animation: wjazd-prawa 2.2s steps(9, end) .3s both; }
/* kaczka drepcze przed fabryką: na wejściu kilka kroczków w prawo, obrót, z powrotem, potem staje */
.kaczka-drepcze, .kaczka-kolys { transform-box: fill-box; transform-origin: 50% 100%; }
.wejscie .kaczka-drepcze { animation: drepcze 6s steps(1, end) 1.4s both; }
.wejscie .kaczka-kolys { animation: kolys .5s steps(1, end) 1.4s 12; }
@keyframes drepcze { 0% { transform: translateX(0); } 8% { transform: translateX(6px); } 16% { transform: translateX(12px); } 24% { transform: translateX(18px); } 32% { transform: translateX(24px); }
  40% { transform: translateX(30px); } 46% { transform: translateX(30px) scaleX(-1); } 54% { transform: translateX(24px) scaleX(-1); } 62% { transform: translateX(18px) scaleX(-1); }
  70% { transform: translateX(12px) scaleX(-1); } 78% { transform: translateX(6px) scaleX(-1); } 86%, 100% { transform: translateX(0); } }
@keyframes kolys { 0% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .wejscie .kaczka-drepcze, .wejscie .kaczka-kolys { animation: none; } }
@keyframes wyskok { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wjazd-lewa { from { transform: translateX(-140px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wjazd-prawa { from { transform: translateX(140px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes szyld-opada { from { transform: translateY(-160%) rotate(-6deg); } to { transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) { .wejscie .eksponat, .wejscie .chmura, .wejscie .szyld-cien { animation: none; } }
@media (max-width: 700px) {
  .scena { height: 200px; }
  .szyld-cien { left: 50%; transform: translate(-50%, -50%); }
  .szyld { min-width: 0; padding: 18px 24px 16px; }
  .wejscie .szyld-cien { animation: none; }
}
.caly-magazyn { text-align: right; }
.caly-magazyn .etykieta { font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--szary); }
.caly-magazyn .kwota { font-size: 30px; font-weight: 600; color: var(--czerwony); line-height: 1.15; }
.caly-magazyn .rozbicie { font-size: 12.5px; color: var(--szary); }

/* po pierwszym kliknięciu zakładki zza biletu wyskakuje na sprężynce puszka wycięta z gazety (szarpanym ruchem) */
.naglowek { position: relative; }
.wyskok { position: absolute; z-index: 3; width: 64px; pointer-events: none; transform-origin: 50% 100%; transform: scaleY(0);
  animation: wyskok-puszki 1.9s steps(1, end) both; filter: drop-shadow(2px 3px 2px rgba(42,26,16,.4)); }
.wyskok img { display: block; width: 64px; height: auto; }
.wyskok svg { display: block; width: 14px; height: 26px; margin: -2px auto 0; }
@keyframes wyskok-puszki { 0% { transform: scaleY(0); } 8% { transform: scaleY(.55); } 15% { transform: scaleY(1.2); } 22% { transform: scaleY(.85); }
  29% { transform: scaleY(1.08); } 36% { transform: scaleY(.95) rotate(-4deg); } 43%, 72% { transform: scaleY(1) rotate(3deg); } 80% { transform: scaleY(.6); } 88%, 100% { transform: scaleY(0); } }
/* w menu z boku: sprężyna poziomo, puszka wyskakuje w prawo */
.wyskok.w-bok { display: flex; flex-direction: row-reverse; align-items: center; width: auto; transform-origin: 0 50%; animation-name: wyskok-w-bok; }
.wyskok.w-bok svg { transform: rotate(90deg); margin: 0 4px 0 0; }
@keyframes wyskok-w-bok { 0% { transform: scaleX(0); } 8% { transform: scaleX(.55); } 15% { transform: scaleX(1.2); } 22% { transform: scaleX(.85); }
  29% { transform: scaleX(1.08); } 36% { transform: scaleX(.95) rotate(-4deg); } 43%, 72% { transform: scaleX(1) rotate(3deg); } 80% { transform: scaleX(.6); } 88%, 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .wyskok { display: none; } }

/* świnka z wieczka w meloniku: raz na wizytę przechodzi przez dół ekranu z prawej na lewą i fika (klatka po klatce) */
#przemarsz { position: fixed; left: 0; bottom: 6px; z-index: 50; pointer-events: none; filter: drop-shadow(2px 3px 2px rgba(42,26,16,.35));
  animation: przemarsz 14s steps(56, end) forwards; }
#przemarsz svg { display: block; overflow: visible; }
#przemarsz .swinia4, #przemarsz .noga4, #przemarsz .melonik4, #przemarsz .teczka4, #przemarsz .parasol4 { transform-box: view-box; }
#przemarsz .swinia4 { transform-origin: 280px 280px; animation: fika 1.4s steps(1, end) infinite; }
#przemarsz .noga4 { animation: 1.4s steps(1, end) infinite; }
#przemarsz .n1 { animation-name: n1; } #przemarsz .n2 { animation-name: n2; } #przemarsz .n3 { animation-name: n3; } #przemarsz .n4 { animation-name: n4; }
#przemarsz .melonik4 { animation: melonik 1.4s steps(1, end) infinite; }
#przemarsz .teczka4 { animation: teczka 1.4s steps(1, end) infinite; }
#przemarsz .parasol4 { animation: parasol4 1.4s steps(1, end) infinite; }
@keyframes przemarsz { from { transform: translateX(calc(100vw + 20px)); } to { transform: translateX(-200px); } }
@keyframes fika { 0% { transform: translateY(-4px) rotate(-2deg); } 20% { transform: translateY(-16px) rotate(5deg); } 40% { transform: translateY(0) rotate(0); }
  60% { transform: translateY(-12px) rotate(-5deg); } 80% { transform: translateY(-2px) rotate(1deg); } }
@keyframes n1 { 0% { transform: rotate(0); } 20% { transform: rotate(50deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-15deg); } 80% { transform: rotate(0); } }
@keyframes n2 { 0% { transform: rotate(-15deg); } 20% { transform: rotate(5deg); } 40% { transform: rotate(30deg); } 60% { transform: rotate(55deg); } 80% { transform: rotate(10deg); } }
@keyframes n3 { 0% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(-45deg); } 60% { transform: rotate(0); } 80% { transform: rotate(20deg); } }
@keyframes n4 { 0% { transform: rotate(-20deg); } 20% { transform: rotate(10deg); } 40% { transform: rotate(0); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(-50deg); } }
@keyframes melonik { 0% { transform: translateY(0) rotate(-4deg); } 20% { transform: translateY(-22px) rotate(8deg); } 40% { transform: translateY(0) rotate(0); }
  60% { transform: translateY(-14px) rotate(-8deg); } 80% { transform: translateY(0) rotate(-2deg); } }
@keyframes teczka { 0% { transform: rotate(-8deg); } 20% { transform: rotate(18deg); } 40% { transform: rotate(4deg); } 60% { transform: rotate(-14deg); } 80% { transform: rotate(0); } }
@keyframes parasol4 { 0% { transform: rotate(2deg); } 20% { transform: rotate(-5deg); } 40% { transform: rotate(0); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-1deg); } }
/* wersja spokojna: świnka jako płaska sylwetka, jak zwierzaki w pasku nagłówka – bez kremowej obwódki i bez cienia (Beata 09.10.2026) */
body.spokojnie #przemarsz { filter: none; }
body.spokojnie #przemarsz [stroke="#fffbea"] { stroke: none; }
@media (prefers-reduced-motion: reduce) { #przemarsz { display: none; } }

/* menu z lewej: schowane, wystają tylko końcówki biletów; po najechaniu myszką wysuwa się całe nad treść */
.uklad { display: grid; grid-template-columns: 62px minmax(0, 1fr); align-items: start; }
.uklad > .zakladki { position: sticky; top: 12px; z-index: 30; width: 250px; flex-direction: column; align-items: stretch; gap: 10px; padding: 18px 16px 18px 22px; margin-top: 14px;
  background: #4a3426 repeating-linear-gradient(90deg, rgba(0,0,0,.0) 0 9px, rgba(0,0,0,.12) 9px 10px, rgba(255,255,255,.04) 10px 13px);
  border-radius: 0 12px 12px 0; transform: translateX(-188px); transition: transform .28s ease; }
.uklad > .zakladki:hover, .uklad > .zakladki:focus-within, .uklad > .zakladki.otwarte { transform: translateX(0); }
.uklad > .zakladki button { text-align: left; padding: 9px 10px 9px 16px; display: flex; align-items: center; gap: 10px; }
.zakladki .tekst { flex: 1; }
.zakladki .ikona { flex: none; width: 28px; height: 28px; display: grid; place-items: center; }
.zakladki .ikona svg, .zakladki .ikona img { width: 28px; height: 28px; display: block; object-fit: contain; }
.zakladki .ikona.szeroka { width: 46px; }
.zakladki .ikona.szeroka img { width: 46px; height: 28px; }
.zakladki button[aria-selected="true"] .ikona { filter: drop-shadow(0 0 1.5px #fffbea); }
.uklad > main { padding-left: 22px; padding-right: 22px; }
@media (max-width: 700px) {
  .uklad { display: block; }
  .uklad > .zakladki { position: relative; flex-direction: row; padding: 14px 14px; gap: 8px 10px; width: auto; transform: none; }
  .uklad > main { padding-left: 14px; }
}

/* zakładki jak wiktoriańskie bilety: wcięte rogi, cienka ramka tuszem; wybrana pomarańczowa z cyrkowym napisem */
.naglowek { border-bottom: 1px solid var(--linia); }
.zakladki { display: flex; flex-wrap: wrap; gap: 8px 10px; padding: 14px 32px 14px; position: relative; z-index: 4;
  filter: drop-shadow(0 0 .6px var(--tusz-ryciny)) drop-shadow(0 0 .6px var(--tusz-ryciny)) drop-shadow(1px 2px 1.5px rgba(42,26,16,.22)); }
.zakladki button { --r: 6px; position: relative; font: inherit; font-weight: 600; font-size: 14.5px; cursor: pointer; padding: 9px 17px 8px; border: 0;
  background: #f6edd3; color: var(--tusz-ryciny);
  -webkit-mask: radial-gradient(circle var(--r) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat;
  mask: radial-gradient(circle var(--r) at 0 0, #0000 98%, #000) top left / 51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 0, #0000 98%, #000) top right / 51% 51% no-repeat,
    radial-gradient(circle var(--r) at 0 100%, #0000 98%, #000) bottom left / 51% 51% no-repeat, radial-gradient(circle var(--r) at 100% 100%, #0000 98%, #000) bottom right / 51% 51% no-repeat; }
.zakladki button::before { content: ''; position: absolute; inset: 3.5px; border: 1.2px solid var(--tusz-ryciny); pointer-events: none; }
.zakladki button:hover { background: #fff7de; }
.zakladki button[aria-selected="true"] { background: #e0612b; color: #fffbea; font-family: 'Rye', 'Traulha', Georgia, serif; font-weight: 400; letter-spacing: 1px;
  text-shadow: 1px 0 #2c3786, -1px 0 #2c3786, 0 1px #2c3786, 0 -1px #2c3786, 2px 2px #2c3786; }
.zakladki button[aria-selected="true"]::before { border-color: #fffbea; }

/* treść */
main { padding: 26px 32px 40px; max-width: 1400px; }
.kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 18px; }
.kafel { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--linia); border-radius: 10px; padding: 14px 16px 16px; border-top: 5px solid var(--akcent, var(--tusz)); min-height: 112px; }
.kafel::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--akcent); opacity: .10;
  -webkit-mask: url('grafiki/ziarno-rog.png') no-repeat right bottom / 300px 100%; mask: url('grafiki/ziarno-rog.png') no-repeat right bottom / 300px 100%; }
.kafel .etykieta { font-size: 12px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--szary); position: relative; }
.kafel .liczba { font-size: 26px; font-weight: 600; line-height: 1.2; margin-top: 4px; position: relative; }
.kafel .pod { font-size: 13px; color: var(--szary); position: relative; z-index: 1; }
.kafel .zwierz { position: absolute; right: 10px; bottom: 8px; width: 84px; height: 42px; background: var(--akcent, var(--tusz)); opacity: .30;
  -webkit-mask: var(--maska) no-repeat right bottom / contain; mask: var(--maska) no-repeat right bottom / contain; }
.kafle.stany { grid-template-columns: repeat(3, 1fr); }
.kafle.stany .kafel { min-height: 138px; }
.kafle.stany .liczba { font-size: 34px; }
.kafle.stany .zwierz { width: 110px; height: 56px; }
@media (max-width: 700px) { .kafle.stany { grid-template-columns: 1fr; } }
/* mniejsze kafelki w zakładce Puszki */
.kafle.male { gap: 10px; margin-bottom: 12px; }
.kafle.male .kafel { min-height: 0; padding: 10px 14px 11px; }
.kafle.male .liczba, .kafle.stany.male .liczba { font-size: 22px; }
.kafle.male .pod { font-size: 12.5px; }
.kafle.male .zwierz, .kafle.stany.male .zwierz { width: 64px; height: 32px; right: 8px; bottom: 6px; }
.kafel.yabra { --akcent: #3aa7bd; } .kafel.droga { --akcent: #d9a400; } .kafel.bizflow { --akcent: #d8578b; }
.kafel.defekty { --akcent: #8a877a; } .kafel.wartosc { --akcent: var(--czerwony); }
.kafel.wartosc .liczba { color: var(--czerwony); }
.kafel.calosc { --akcent: var(--tusz); background: var(--tusz); color: var(--krem); }
.kafel.calosc .etykieta, .kafel.calosc .pod { color: #cfccb9; }
.kafel.calosc .liczba { color: #fff; }

.info { color: var(--szary); font-size: 13.5px; margin: 0 0 14px; }
.info b { color: var(--tusz); }

table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--linia); border-radius: 10px; overflow: hidden; }
th, td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--linia); white-space: nowrap; font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; white-space: normal; }
thead th { position: sticky; top: 0; background: #f3ead2; color: var(--tusz-ryciny); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .7px; z-index: 1;
  border-bottom: 3px double var(--tusz-ryciny); padding-top: 10px; padding-bottom: 9px; }
tbody tr:hover td { background: #fffbe8; }
tr.grupa td { background: var(--krem); font-family: 'Traulha', Georgia, serif; font-size: 19px; text-align: left; padding-top: 12px; }
tr.suma td { font-weight: 600; background: #fafaf3; border-top: 1px solid #cfcbb4; }
td.zero { color: #c9c6b8; }
td.minus { color: var(--zle); font-weight: 600; }
.wart { font-weight: 600; }
.maly { font-size: 12px; color: var(--szary); }
.chip { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 12px; margin-left: 4px; background: #f3f1e4; }
.pasek { display: inline-block; width: 64px; height: 6px; border-radius: 3px; vertical-align: middle; margin-left: 8px; background: #eeebdd; overflow: hidden; }
.pasek i { display: block; height: 100%; }
.ok i { background: var(--ziel); } .uwaga i { background: var(--zolty); } .zle i { background: var(--zle); }
h2 { font-family: 'Traulha', Georgia, serif; font-weight: 400; font-size: 24px; margin: 28px 0 10px; }
table.plan tr.nowa-paleta td { border-top: 2px solid #d9d4bb; }
td.nr-palety { text-align: center; font-family: 'Rye', 'Traulha', Georgia, serif; font-size: 20px; color: var(--czerwony); background: #fffbea; vertical-align: middle; }
table.plan tr.do-pary td:not(.nr-palety) { background: #f6f3e6; color: #6a5545; }
.chip.para { background: #e3eef5; color: #2c3786; }
.chip.zlozone { background: var(--ziel); color: #fff; font-weight: 600; margin-right: 6px; }
td.lewo { text-align: left; white-space: normal; min-width: 210px; }
table.plan td.uwagi { min-width: 150px; }
table.plan th:nth-child(2), table.plan th:nth-child(6) { text-align: left; }
td.uwagi { text-align: left; white-space: normal; color: var(--szary); font-size: 13px; }
h2 .maly { font-family: 'Sharp', sans-serif; font-size: 14px; margin-left: 6px; }
h2 .chip { font-family: 'Sharp', sans-serif; font-size: 12.5px; vertical-align: middle; }
.zalozenia { color: var(--szary); font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
details summary { cursor: pointer; font-weight: 600; margin: 18px 0 10px; color: var(--szary); }

.ramka-dashboard { background: #fff; border: 1px solid var(--linia); border-radius: 10px; overflow: hidden; height: calc(100vh - 230px); min-height: 520px; }
.ramka-dashboard iframe { width: 100%; height: 100%; border: 0; display: block; }
.info a { color: var(--czerwony); font-weight: 600; margin-left: 8px; }
.stopka { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 32px; border-top: 1px solid var(--linia); color: var(--szary); font-size: 12.5px; background: #fff; }

/* kurtyna po zalogowaniu: stoi chwilę, potem zbiera się do boków, dół zaokrągla się jak podpięta zasłona */
#kurtyna { position: fixed; inset: 0; z-index: 100; }
#kurtyna.otwarta { pointer-events: none; }
#kurtyna .pola { position: absolute; top: 0; bottom: 0; width: 50.5%; background-color: #c21d00;
  background-image: linear-gradient(90deg, rgba(0,0,0,.32) 0%, rgba(255,255,255,.10) 30%, rgba(255,255,255,.02) 55%, rgba(0,0,0,.26) 100%);
  background-size: 9% 100%;
  box-shadow: inset 0 -60px 80px rgba(0,0,0,.28), 0 0 30px rgba(0,0,0,.35);
  transition: width 2.4s cubic-bezier(.55,.05,.25,1), border-radius 2.4s cubic-bezier(.55,.05,.25,1), left 1s cubic-bezier(.5,0,.75,0), right 1s cubic-bezier(.5,0,.75,0); }
#kurtyna .pola::after { content: ''; position: absolute; inset: 0; background: #000; opacity: .22; border-radius: inherit;
  -webkit-mask: url('grafiki/ziarno-rog.png') no-repeat center bottom / 100% 60%; mask: url('grafiki/ziarno-rog.png') no-repeat center bottom / 100% 60%; }
#kurtyna .lewa { left: 0; border-bottom-right-radius: 30px 14px; }
#kurtyna .prawa { right: 0; border-bottom-right-radius: 30px 14px; transform: scaleX(-1); }
#kurtyna .lambrekin { position: absolute; left: 0; right: 0; top: 0; height: 74px; z-index: 2; background: #9e1700; transition: transform 1s cubic-bezier(.5,0,.75,0);
  background-image: radial-gradient(circle at 50% 100%, transparent 28px, #9e1700 29px), linear-gradient(#b81c00, #8e1500);
  background-size: 84px 74px, 100% 100%; box-shadow: 0 8px 14px rgba(0,0,0,.35); }
#kurtyna .lambrekin::after { content: ''; position: absolute; left: 0; right: 0; bottom: -20px; height: 22px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='22'%3E%3Cpath d='M42 0v7' stroke='%23d9a441' stroke-width='2'/%3E%3Ccircle cx='42' cy='8' r='3' fill='%23d9a441'/%3E%3Cpath d='M38 10h8l2 10h-12z' fill='%23d9a441'/%3E%3Cpath d='M39 12v7M42 12v8M45 12v7' stroke='%23a8741f' stroke-width='.8'/%3E%3C/svg%3E") -42px 0 / 84px 22px repeat-x; filter: drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
/* okno logowania wisi na kurtynie jak wiktoriański afisz; po „Wejdź” ucieka do góry, potem kurtyna się rozsuwa */
#kurtyna .okno-logowania { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(360px, calc(100% - 32px));
  transform: translate(-50%, -46%) rotate(-1deg); filter: drop-shadow(0 18px 22px rgba(0,0,0,.5));
  transition: transform .8s cubic-bezier(.6,-0.25,.75,.4); }
#kurtyna .okno-logowania.uciekla { transform: translate(-50%, calc(-100vh - 60%)) rotate(-8deg); }
.okno-logowania .papier { padding: 40px 32px 30px; }
.okno-logowania .papier > * { position: relative; z-index: 1; }
.okno-logowania .logo-okno { height: 32px; display: block; margin: 0 auto 6px; }
.okno-logowania p { margin: 4px 0 14px; color: #6a5545; font-size: 13px; text-align: center; }
.okno-logowania label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; color: var(--tusz-ryciny); }
.okno-logowania input { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid #cbb99a; border-radius: 2px; background: #fff; }
.okno-logowania input:focus { outline: 2px solid var(--czerwony); outline-offset: -1px; border-color: transparent; }
.okno-logowania input.zle { border-color: var(--zle); }
.blad-logowania { min-height: 18px; margin-top: 8px; color: var(--zle); font-size: 13px; }
.okno-logowania button { width: 100%; margin-top: 6px; font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; letter-spacing: .5px;
  padding: 12px; border: 0; border-radius: 2px; background: var(--czerwony); color: #fff; box-shadow: inset 0 0 0 2px #fffbea, inset 0 0 0 3px var(--czerwony); }
.okno-logowania button:hover { background: #e03100; }
/* czerwona wstęga z napisem, końce zawinięte za afisz */
.wstega { position: relative; z-index: 4; margin: 0 -22px -22px; text-align: center; font-family: 'Traulha', Georgia, serif; font-weight: 400; }
.wstega span { position: relative; z-index: 2; display: block; background: #e0612b; font-size: 34px; line-height: 1; padding: 10px 0 12px;
  background-image: linear-gradient(#0000 0 3px, rgba(255,251,234,.45) 3px 4px, #0000 4px calc(100% - 4px), rgba(255,251,234,.45) calc(100% - 4px) calc(100% - 3px), #0000 0);
  box-shadow: 0 4px 6px rgba(0,0,0,.3); }
.wstega::before, .wstega::after { content: ''; position: absolute; top: 12px; width: 44px; height: 100%; background: #a8421a; z-index: 1; }
.wstega::before { left: -26px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 34% 50%); }
.wstega::after { right: -26px; clip-path: polygon(0 0, 100% 0, 66% 50%, 100% 100%, 0 100%); }
#kurtyna.otwarta .pola { width: 13%; border-bottom-right-radius: 100% 58%; }

/* zebrana kurtyna odjeżdża za ekran: połówki na boki, falbana do góry */
#kurtyna.odjezdza .lewa { left: -20%; }
#kurtyna.odjezdza .prawa { right: -20%; }
#kurtyna.odjezdza .lambrekin { transform: translateY(-140%); }
@media (prefers-reduced-motion: reduce) { #kurtyna .pola, #kurtyna .okno-logowania { transition: none; } }

@media (max-width: 700px) {
  main, .zakladki { padding-left: 14px; padding-right: 14px; }
  .caly-magazyn { text-align: left; }
  .tabela-przewijana { overflow-x: auto; }
}


/* ===== WERSJA SPOKOJNA (propozycja 05.10.2026) – włączana adresem ?spokojnie; zwykły wygląd bez zmian ===== */
body.spokojnie .scena { height: 158px; border-bottom: 0; background: linear-gradient(180deg, #e6efe9 0%, #f6f1dc 60%, #fffdf2 100%); }
body.spokojnie .scena-tlo { display: none; }
body.spokojnie .ziarno-sceny, body.spokojnie .kwiaty, body.spokojnie .ozdobnik, body.spokojnie .wyskok { display: none !important; }
body.spokojnie .szyld-cien { filter: none; left: 0; right: 0; top: 0; bottom: 0; transform: none; }
body.spokojnie .szyld { height: 100%; max-width: none; padding: 26px 0 0; background: transparent; -webkit-mask: none; mask: none; display: flex; align-items: flex-start; justify-content: center; }
body.spokojnie .szyld::before, body.spokojnie .szyld::after { display: none; }
body.spokojnie .szyld .logo { position: absolute; left: 28px; top: 42px; transform: translateY(-50%); height: 32px; margin: 0; }
/* napis MAGAZYN: sam czerwony napis naszą czcionką (Sharp Grotesk), bez tła – wybór Beaty 05.10 (C1) */
body.spokojnie h1.cyrk { margin: 0; padding: 0; font-family: 'Sharp', -apple-system, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: 5px;
  text-transform: uppercase; color: var(--czerwony); text-shadow: none; border: 0; background: none; }
/* szlaczek: na przemian puszka i podskakujący zwierzaczek z wieczka, pas sunie w lewo (pomysł Beaty 05.10) */
.szlaczek { display: none; }
body.spokojnie .szlaczek { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; overflow: hidden; z-index: 1; border-bottom: 5px solid #b88a55; box-shadow: inset 0 -1px 0 #8a6038; }
.szlaczek .tor { display: flex; align-items: flex-end; gap: 26px; width: max-content; height: 100%; padding-bottom: 2px; animation: szlaczek-w-lewo 60s linear infinite; }
.szlaczek img { height: 56px; width: auto; display: block; filter: drop-shadow(1px 2px 2px rgba(42,26,16,.22)); }
.szlaczek .zw { width: 74px; height: 40px; flex: none; background: var(--k); -webkit-mask: var(--m) no-repeat center bottom / contain; mask: var(--m) no-repeat center bottom / contain;
  animation: zw-hop 1.1s steps(1, end) infinite; animation-delay: var(--o, 0s); }
@keyframes szlaczek-w-lewo { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes zw-hop { 0% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-7px) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(0); } 75% { transform: translateY(-9px) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .szlaczek .tor, .szlaczek .zw { animation: none; } }
@media (max-width: 700px) { body.spokojnie .szyld .logo { left: 14px; height: 24px; } body.spokojnie h1.cyrk { font-size: 26px; letter-spacing: 3px; margin-top: 4px; } }
/* menu w stylu szlaczka: płaskie kafelki w kolorach Eda, miniaturka w kremowym kółku, nazwa naszą czcionką */
body.spokojnie .uklad > .zakladki { background: #fffdf2; border: 1px solid var(--linia); border-left: 0; border-radius: 0 16px 16px 0; filter: none; box-shadow: 2px 3px 10px rgba(42,26,16,.10);
  gap: 8px; padding: 12px 10px 12px 14px; }
body.spokojnie .zakladki button { -webkit-mask: none; mask: none; background: var(--kol, #f6f0da); color: var(--tusz); border-radius: 12px; font-family: inherit; font-weight: 600; font-size: 12.5px;
  letter-spacing: 1.2px; text-transform: uppercase; text-shadow: none; padding: 7px 7px 7px 14px; transition: transform .15s ease, box-shadow .15s ease; }
body.spokojnie .zakladki button::before { display: none; }
body.spokojnie .zakladki button:nth-of-type(1) { --kol: #f784be; } body.spokojnie .zakladki button:nth-of-type(2) { --kol: #b084ff; }
body.spokojnie .zakladki button:nth-of-type(3) { --kol: #ffc21f; } body.spokojnie .zakladki button:nth-of-type(4) { --kol: #ff783c; }
body.spokojnie .zakladki button:nth-of-type(5) { --kol: #40b2aa; } body.spokojnie .zakladki button:nth-of-type(6) { --kol: #ff5a3c; }
body.spokojnie .zakladki button[data-zakladka="promocje"] { --kol: #9ccb5a; } body.spokojnie .zakladki button[data-zakladka="prognoza"] { --kol: #ff5a3c; }
body.spokojnie .zakladki button[data-zakladka="produkcja"] { --kol: #7db6e8; }
body.spokojnie .zakladki button[data-zakladka="prognozy-yk"] { --kol: #e3c98f; } /* kolor do oceny przez Beatę (07.10.2026) */
body.spokojnie .zakladki button:hover { background: var(--kol); transform: translateX(3px); }
body.spokojnie .zakladki button[aria-selected="true"] { background: var(--kol); color: var(--tusz); font-family: inherit; font-weight: 600; letter-spacing: 1.2px; text-shadow: none;
  box-shadow: inset 0 0 0 3px var(--tusz); }
body.spokojnie .zakladki .ikona, body.spokojnie .zakladki .ikona.szeroka { width: 38px; height: 38px; border-radius: 50%; background: #fffdf2; filter: none; }
body.spokojnie .zakladki .ikona svg, body.spokojnie .zakladki .ikona img { width: 26px; height: 26px; }
body.spokojnie .zakladki [data-zakladka="puszki"] .ikona img { content: url('grafiki/puszki/kaczka.png'); }
/* numery palet naszą czcionką (Sharp Grotesk), nie cyrkową */
body.spokojnie td.nr-palety { font-family: 'Sharp', -apple-system, Helvetica, Arial, sans-serif; font-weight: 600; font-size: 22px; color: var(--czerwony); background: #fffdf2; }
/* kafelki: same liczby */
body.spokojnie .kafel::before, body.spokojnie .kafel .zwierz { display: none; }
body.spokojnie .kafel { border-top-width: 3px; }
/* bez ruchu na wejściu */
body.spokojnie.wejscie .eksponat, body.spokojnie.wejscie .chmura, body.spokojnie.wejscie .kaczka-drepcze, body.spokojnie.wejscie .kaczka-kolys { animation: none; }

/* delikatna ramka wokół każdej tabeli (Beata 05.10.2026) */
table { border: 1.5px solid #cdbf9c; box-shadow: 0 1px 4px rgba(59,42,32,.06); }
/* Promocje B2C */
table.promocje th, table.promocje td { text-align: left; white-space: normal; vertical-align: top; }
table.promocje th.liczba, table.promocje td.liczba { text-align: right; white-space: nowrap; }
table.promocje td.termin { white-space: nowrap; }
table.promocje td.termin .chip { margin: 4px 0 0; }
td.plus { color: #3f7d1e; font-weight: 600; }
button.link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--czerwony); text-decoration: underline; cursor: pointer; }
.formularz { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 12px 14px; background: #fff; border: 1.5px solid #cdbf9c; border-radius: 10px; padding: 16px; max-width: 980px; }
.formularz label, .formularz .etykieta { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--szary); }
.formularz input:not([type=checkbox]):not([type=radio]), .formularz select { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--tusz);
  background: #fffdf2; border: 1px solid #cdbf9c; border-radius: 8px; }
.formularz .szeroki { grid-column: 1 / -1; }
.formularz label.wybor, .formularz label.prod { display: inline-block; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--tusz); margin: 6px 16px 0 0; }
.formularz .lista-prod { columns: 3 220px; column-gap: 20px; }
.formularz label.prod { display: block; margin: 3px 0; break-inside: avoid; }
.formularz .grupa-prod { font-weight: 600; margin: 8px 0 2px; break-after: avoid; }
.formularz details summary { margin: 10px 0 6px; }
.formularz button[type=submit] { border: 0; border-radius: 999px; background: var(--czerwony); color: #fff; font: inherit; font-weight: 600; padding: 9px 20px; cursor: pointer; margin-right: 12px; }
@media (max-width: 700px) { .formularz { grid-template-columns: 1fr 1fr; } }
table.promocje td.nazwa { min-width: 170px; } table.promocje td.zasady { min-width: 250px; }

/* Puszki (Beata 07.10.2026): zielone tło produktów wege, wyróżniona kolumna Bizflow, zwijane wycofane */
tr.wege td { background: #f0f7e4; }
tr.wege td:first-child { box-shadow: inset 4px 0 0 var(--ziel); }
tbody tr.wege:hover td { background: #e6f1d5; }
/* kolumna Bizflow: samo pogrubienie liczb (Beata 07.10: róż był za mocny) */
tbody td.kol-bizflow { font-weight: 600; color: var(--tusz); }
tbody td.kol-bizflow.zero { color: #c9c6b8; font-weight: 400; }
button.rozwin { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
button.rozwin .strzalka { display: inline-block; width: 18px; color: var(--czerwony); }
button.rozwin .maly { font-family: 'Sharp', -apple-system, Helvetica, Arial, sans-serif; font-size: 13px; margin-left: 8px; }
button.rozwin[aria-expanded="true"] .maly { display: none; }

/* Owijki: historia i wpisywanie (Beata 07.10.2026) */
table.historia th, table.historia td { text-align: left; white-space: normal; vertical-align: middle; }
table.historia th.liczba, table.historia td.liczba { text-align: right; white-space: nowrap; }
table.historia td.termin { white-space: nowrap; }
table.historia button.rozwin { font-weight: 600; white-space: nowrap; }
table.historia tr.szczegoly td { background: #fffdf2; padding: 10px 16px 14px 40px; }
table.historia tr.szczegoly:hover td { background: #fffdf2; }
ul.pozycje { list-style: none; margin: 0; padding: 0; columns: 3 240px; column-gap: 28px; font-size: 13.5px; }
ul.pozycje li { break-inside: avoid; padding: 2px 0; }
.potwierdz { display: inline-flex; gap: 6px; align-items: center; margin-left: 6px; }
.potwierdz input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #cdbf9c; border-radius: 6px; background: #fffdf2; }
button.maly-przycisk { border: 0; border-radius: 999px; background: var(--czerwony); color: #fff; font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; cursor: pointer; }
details.wpis { max-width: 980px; }
details.wpis summary { color: var(--tusz); }
.formularz .lista-ilosci { columns: 2 340px; column-gap: 28px; margin-top: 6px; }
.formularz label.ilosc { display: flex; align-items: center; justify-content: space-between; gap: 10px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--tusz); padding: 3px 0; break-inside: avoid; }
.formularz .lista-ilosci label.ilosc input[type=number] { display: block; width: 96px; flex: none; margin-top: 0; text-align: right; padding: 5px 8px; }
.sterowanie { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-top: 6px; }
.tabela-przewijana.przewijaj { overflow: auto; max-height: 470px; border: 1.5px solid #cdbf9c; border-radius: 10px; }
.tabela-przewijana.przewijaj table { border: 0; box-shadow: none; overflow: visible; }
table.historia td.stan-zam .chip { margin-left: 0; }
.sterowanie input { font: inherit; font-size: 13px; padding: 4px 6px; border: 1px solid #cdbf9c; border-radius: 6px; background: #fffdf2; }
button.maly-przycisk { white-space: nowrap; }
table.historia td.stan-zam { white-space: nowrap; }
button.maly-przycisk.obrys { background: #fff; color: var(--tusz); box-shadow: inset 0 0 0 1.5px var(--tusz); }
/* po dostawie „Edytuj” stoi tuż przy plakietce „dostarczone”, z jej prawej strony (Beata 07.10.2026) */
table.historia .obok { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* Kartony: formularze z dwiema liczbami przy rozmiarze (ilość + cena, wydano + stan) – Beata 07.10.2026 */
.formularz .lista-ilosci.dwa { columns: auto; max-width: 620px; }
.formularz .lista-ilosci.dwa .ilosc { display: grid; grid-template-columns: 1fr 96px 96px; gap: 8px; align-items: center; padding: 3px 0; font-size: 14px; color: var(--tusz); text-transform: none; letter-spacing: 0; }
.formularz .lista-ilosci.dwa .ilosc.naglowek { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--szary); text-align: right; }
.formularz .lista-ilosci.dwa .ilosc input { margin-top: 0; text-align: right; padding: 5px 8px; }

/* wgrywanie pliku od Bizflow */
.wgraj { background: #fff; border: 1.5px dashed #cdbf9c; border-radius: 10px; padding: 14px 16px; max-width: 980px; margin-bottom: 12px; }
.wgraj label.plik { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.wgraj input[type=file] { font: inherit; font-size: 14px; }
.wgraj p { margin: 8px 0 0; }
.z-pliku ul { margin: 6px 0 0; padding-left: 20px; }
.z-pliku li { margin: 5px 0; }
.z-pliku details summary { margin: 4px 0; font-weight: 400; font-size: 13px; }
.z-pliku .chip { margin-left: 0; }
/* data ostatniej aktualizacji stanu przy nagłówku „Stan” (Beata 07.10.2026) */
.data-stanu { display: block; font-size: 11.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--szary); }
/* Materiały: ostrzeżenie o brakującej dostawie */
.info.uwaga-luka { margin-top: 12px; padding: 10px 14px; background: #fff7dc; border: 1px solid #ecd58a; border-radius: 10px; color: var(--tusz); }

/* Zrealizowane produkcje: spis ze smakami widocznymi od razu pod datą */
.tabela-przewijana.przewijaj.wysoka { max-height: 640px; }
table.spis tr.dzien td { background: #f6efd9; font-weight: 600; font-size: 15.5px; border-top: 2px solid #d9cfae; }
table.spis tbody tr.dzien:hover td { background: #f6efd9; }
table.spis tr.dzien .maly { font-weight: 400; }
table.spis tr.smak td:first-child { padding-left: 30px; }
table.spis tr.smak td { padding-top: 6px; padding-bottom: 6px; }
table.spis td:first-child { min-width: 190px; }
table.spis th, table.spis td { padding-left: 9px; padding-right: 9px; }
table.spis th.liczba, table.spis td.liczba, table.spis td.akcja { width: 1%; }
table.spis td.akcja { text-align: right; white-space: nowrap; }
table.spis tr.dzien .zuzyto { margin-left: 10px; }
table.spis th .sklad { white-space: nowrap; line-height: 1.35; margin-top: 3px; }
table.spis thead th { vertical-align: top; }
/* usuwanie wpisu w trybie poprawiania */
button.link.usun { margin-left: 14px; color: var(--zle); }

/* Zamówienia Yabra → Bizflow: plan miesięczny dla prezesa (układ jak w arkuszu Beaty) */
.miesiace { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.miesiace button { font: inherit; font-size: 14px; font-weight: 600; padding: 7px 18px; border-radius: 999px; border: 1.5px solid var(--tusz); background: #fff; color: var(--tusz); cursor: pointer; text-transform: capitalize; }
.miesiace button[aria-pressed="true"] { background: var(--tusz); color: #fff; }
.plan-przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.plan-przyciski .wersja { font-size: 13px; color: var(--szary); }
.plan-przyciski .wersja .usun { margin-left: 4px; }
table.prezes { margin-bottom: 0; }
.tabela-przewijana.przewijaj:has(table.prezes) { margin-bottom: 16px; max-height: none; }
table.prezes th, table.prezes td { white-space: nowrap; }
table.prezes thead th { position: static; }
table.prezes th.grupa-kol { text-align: center; border-left: 2px solid #d9cfae; }
table.prezes th.grupa-kol.zreal { background: #e7f1d8; }
table.prezes th.pierwsza, table.prezes td.pierwsza { border-left: 2px solid #d9cfae; }
table.prezes td.platnosc { color: var(--zle); }
table.prezes td.czeka { text-align: center; color: var(--szary); font-size: 13px; }
table.prezes th.liczba, table.prezes td.liczba { text-align: right; }
h3.tydzien { font-family: 'Traulha', Georgia, serif; font-weight: 400; font-size: 21px; margin: 22px 0 8px; }
h3.tydzien .maly { font-family: 'Sharp', sans-serif; font-size: 14px; margin-left: 6px; }
h3.tydzien .chip { font-family: 'Sharp', sans-serif; font-size: 12.5px; vertical-align: middle; }

/* plan dla prezesa: dwa układy do porównania, tabela poprawek, formularz z trzema kwotami */
.miesiace.uklady { align-items: center; }
.miesiace.uklady button { text-transform: none; font-weight: 400; font-size: 13px; padding: 5px 14px; border-width: 1px; }
table.prezes.poprawki td.zmiana { font-weight: 600; background: #fff7dc; }
table.prezes th.zreal { background: #e7f1d8; }
.formularz .lista-ilosci.trzy { columns: auto; max-width: 720px; }
.formularz .lista-ilosci.trzy .ilosc { display: grid; grid-template-columns: 1fr 130px 130px 130px; gap: 8px; align-items: center; padding: 3px 0; font-size: 14px; color: var(--tusz); text-transform: none; letter-spacing: 0; }
.formularz .lista-ilosci.trzy .ilosc.naglowek { font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--szary); text-align: right; }
.formularz .lista-ilosci.trzy .ilosc.naglowek span:first-child { text-align: left; }
.formularz .lista-ilosci.trzy .ilosc input { margin-top: 0; text-align: right; padding: 5px 8px; }
details.wpis summary .maly { font-weight: 400; }
table.prezes.kalendarz tr.minelo td { color: var(--szary); }
table.prezes.kalendarz td, table.prezes.kalendarz th { text-align: left; }
table.prezes.kalendarz th.liczba, table.prezes.kalendarz td.liczba { text-align: right; }
table.prezes.poprawki { font-size: 12.5px; }
table.prezes.poprawki th, table.prezes.poprawki td { padding: 7px 4px 7px 5px; }
table.prezes.poprawki th:first-child, table.prezes.poprawki td:first-child { padding-left: 10px; }
table.prezes.poprawki thead th { font-size: 10.5px; letter-spacing: 0; }
table.prezes.poprawki td.termin .chip { margin-left: 2px; padding: 0 5px; font-size: 11px; }

/* przełącznik netto / brutto przy każdej tabeli planu (07.10.2026) */
.miesiace.uklady.przy-tabeli { margin: 26px 0 8px; gap: 8px; }
.miesiace.uklady.przy-tabeli h3.nazwa-tabeli { margin: 0 14px 0 0; font-size: 26px; line-height: 1.1; }

/* poprawki wpisywane prosto w tabeli planu (07.10.2026) */
table.prezes.poprawki td.edytowalna { padding: 3px 3px 3px 4px; }
table.prezes.poprawki input.w-tabeli { width: 106px; font: inherit; color: inherit; text-align: right; padding: 4px 5px; border: 1px solid #cdbf9c; border-radius: 6px; background: #fffdf2; }
table.prezes.poprawki input.w-tabeli:focus { outline: 2px solid var(--tusz); outline-offset: -1px; background: #fff; }
table.prezes.poprawki td.zmiana input.w-tabeli { font-weight: 600; background: #fff7dc; }
table.prezes.poprawki th .dodaj-kol { margin-top: 3px; font-size: 11px; padding: 2px 8px; text-transform: none; }
table.prezes.poprawki th .link.usun { margin-left: 3px; font-size: 13px; text-decoration: none; padding: 0 2px; }

/* promocja schodzi szybciej niż w planie (07.10.2026) */
.info.uwaga-luka.szybciej { margin-bottom: 18px; }
.info.uwaga-luka.szybciej p { margin: 0 0 10px; }
.info.uwaga-luka.szybciej table { margin-bottom: 0; background: #fff; }
.info.uwaga-luka.szybciej tr.zabraknie td { background: #fdecea; }

.info.opis-na-dole { margin-top: 22px; }

/* własne okienko pytania / komunikatu zamiast wbudowanych okien przeglądarki (07.10.2026) */
dialog.okienko { max-width: 420px; width: calc(100% - 40px); padding: 22px 24px 18px; border: 1.5px solid #cdbf9c; border-radius: 14px; background: #fffdf2; color: var(--tusz); font: inherit; box-shadow: 0 10px 34px rgba(42,26,16,.22); }
dialog.okienko::backdrop { background: rgba(42,26,16,.32); }
dialog.okienko p { margin: 0 0 18px; font-size: 15px; line-height: 1.4; white-space: pre-line; }
dialog.okienko .okienko-przyciski { display: flex; justify-content: flex-end; gap: 10px; }
dialog.okienko .okienko-przyciski button { font-size: 14px; padding: 7px 18px; }

/* zakładka „Prognoza produkcji” – tabela z danych portalu Oli (08.10.2026) */
table.prognoza-oli td:first-child, table.prognoza-oli th:first-child { text-align: left; }
table.prognoza-oli td .maly { display: block; white-space: nowrap; }
.chip.stan-zle { background: #fbdcd6; color: #9a2a14; font-weight: 600; margin-left: 0; }
.chip.stan-uwaga { background: #fdeeb5; color: #6b5200; font-weight: 600; margin-left: 0; }
.chip.stan-ok { background: #e2f0d2; color: #2f5d1c; margin-left: 0; }
table.prognoza-oli { font-size: 13.5px; }
table.prognoza-oli th, table.prognoza-oli td { padding: 8px 8px; }
table.prognoza-oli thead th { font-size: 11px; letter-spacing: .3px; white-space: normal; line-height: 1.25; vertical-align: bottom; }
table.prognoza-oli td:first-child { min-width: 170px; }
table.prognoza-oli .pasek { width: 44px; margin-left: 6px; }
table.prognoza-oli td .chip { white-space: nowrap; }

/* ---- kurtyna z logowaniem w spokojnym stylu (wybór Beaty 08.10.2026): gładka czerwona kurtyna, okno w stylu portalu, zwierzaki z paska rozsuwają ją po „Wejdź” ---- */
body.spokojnie #kurtyna .okno-logowania { display: flex; flex-direction: column; width: min(380px, calc(100% - 32px)); padding: 30px 30px 24px; background: #fffdf2; border: 1.5px solid #cdbf9c; border-radius: 16px;
  transform: translate(-50%, -52%); filter: none; box-shadow: 0 14px 40px rgba(42,26,16,.28); transition: transform .45s ease, opacity .35s ease; }
body.spokojnie #kurtyna .okno-logowania.uciekla { transform: translate(-50%, -60%); opacity: 0; }
body.spokojnie .okno-logowania .papier { display: contents; }
body.spokojnie .okno-logowania .ramka-wiktorianska::before, body.spokojnie .okno-logowania .ramka-wiktorianska::after { display: none; }
body.spokojnie .okno-logowania .kwiaty { display: none; }
body.spokojnie .okno-logowania .papier > * { order: 3; }
body.spokojnie .okno-logowania .papier > .logo-okno { order: 1; height: 30px; margin: 0 auto 12px; }
body.spokojnie .okno-logowania .wstega { order: 2; margin: 0 0 4px; font-family: 'Sharp', -apple-system, Helvetica, Arial, sans-serif; }
body.spokojnie .okno-logowania .wstega::before, body.spokojnie .okno-logowania .wstega::after { display: none; }
body.spokojnie .okno-logowania .wstega span.cyrk { padding: 0; background: none; box-shadow: none; font-family: inherit; font-weight: 600; font-size: 28px; letter-spacing: 5px; color: var(--czerwony); text-shadow: none; -webkit-text-stroke: 0; }
body.spokojnie .okno-logowania p { margin: 6px 0 10px; color: var(--szary); }
body.spokojnie .okno-logowania label { color: var(--tusz); }
body.spokojnie .okno-logowania input { border-color: #cdbf9c; border-radius: 8px; }
body.spokojnie .okno-logowania button { border-radius: 999px; box-shadow: none; margin-top: 4px; }
/* kurtyna: gładka czerwień z lekkimi fałdami – bez frędzli, falbany i podpinania; połówki odjeżdżają na boki razem ze zwierzakami */
body.spokojnie #kurtyna .pola { background-color: #d7381c; background-image: linear-gradient(90deg, rgba(0,0,0,.10) 0%, rgba(255,255,255,.05) 35%, rgba(0,0,0,.08) 100%); background-size: 12.5% 100%;
  box-shadow: none; border-radius: 0; transition: transform 2.4s cubic-bezier(.5,.05,.4,1) .35s; }
body.spokojnie #kurtyna .pola::after, body.spokojnie #kurtyna .lambrekin { display: none; }
body.spokojnie #kurtyna.otwarta .pola { width: 50.5%; border-radius: 0; }
body.spokojnie #kurtyna.otwarta .lewa { transform: translateX(-102%); }
body.spokojnie #kurtyna.otwarta .prawa { transform: translateX(102%) scaleX(-1); }
/* zwierzaki z paska: stoją u dołu przy środku kurtyny, po „Wejdź” podskakują i ciągną połówki na boki */
#kurtyna .ciagnie { display: none; }
body.spokojnie #kurtyna .ciagnie { display: block; position: absolute; right: var(--x); bottom: 16px; width: 124px; height: 66px; background: var(--k);
  -webkit-mask: var(--m) no-repeat center bottom / contain; mask: var(--m) no-repeat center bottom / contain; scale: var(--f, 1) 1; }
body.spokojnie #kurtyna.otwarta .ciagnie { animation: ciagnie-podskok .44s ease-in-out infinite; animation-delay: var(--o, 0s); }
@keyframes ciagnie-podskok { 0%, 100% { translate: 0 0; } 50% { translate: 0 -13px; } }
@media (prefers-reduced-motion: reduce) { body.spokojnie #kurtyna .okno-logowania, body.spokojnie #kurtyna .pola { transition: none; } body.spokojnie #kurtyna.otwarta .ciagnie { animation: none; } }

/* Składy puszek (Beata 14.10.2026): karta na produkt – makro w 100 g, skład, alergeny, receptura, przycisk „Popraw skład” */
body.spokojnie .zakladki button[data-zakladka="sklady"] { --kol: #b9dc8c; }
.sklad-filtry { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.sklad-filtry input[type=search] { flex: 1 1 260px; max-width: 420px; padding: 7px 12px; font: inherit; font-size: 14px; border: 1.5px solid #cdbf9c; border-radius: 999px; background: #fff; }
.sklad-karta { background: #fff; border: 1.5px solid #cdbf9c; border-radius: 10px; padding: 14px 16px; margin: 0 0 12px; max-width: 1100px; }
.sklad-karta header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; margin-bottom: 10px; }
.sklad-karta h3 { margin: 0 0 2px; font-size: 17px; }
.sklad-karta .maly { color: var(--szary); font-size: 12.5px; }
.sklad-akcje { display: flex; align-items: center; gap: 8px; }
.sklad-tresc { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.sklad-karta .etykieta { font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--szary); margin: 0 0 3px; }
.sklad-teksty p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.sklad-teksty .receptura-uwaga { margin: 0 0 4px; font-size: 12px; }
.receptura-tab { border-collapse: collapse; font-size: 13.5px; min-width: 260px; max-width: 420px; width: 100%; }
.receptura-tab td { padding: 2px 0; border: 0; }
.receptura-tab td.liczba { text-align: right; white-space: nowrap; padding-left: 16px; }
.sklad-karta .brak { color: var(--uwaga); font-style: italic; }
.sklad-makro table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sklad-makro td { padding: 3px 0; border-bottom: 1px solid var(--linia); }
.sklad-makro td.liczba { text-align: right; white-space: nowrap; }
.sklad-makro tr.wtym td:first-child { padding-left: 12px; color: var(--szary); }
.sklad-karta.edycja { border-color: var(--czerwony); }
.sklad-form { border: 0; padding: 0; max-width: none; grid-template-columns: 1fr; }
.formularz textarea { display: block; width: 100%; margin-top: 4px; padding: 8px 10px; font: inherit; font-size: 14px; line-height: 1.45; text-transform: none; letter-spacing: 0; color: var(--tusz); border: 1.5px solid #cdbf9c; border-radius: 8px; resize: vertical; box-sizing: border-box; }
.sklad-makro-pola { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 14px; margin-top: 6px; }
.sklad-form .link { margin-right: 12px; }
@media (max-width: 700px) { .sklad-tresc { grid-template-columns: 1fr; } .sklad-makro-pola { grid-template-columns: 1fr 1fr; } }
.sklad-form .blad { color: var(--zle); font-weight: 600; }
.sklad-narzedzia { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.sklad-narzedzia .maly { text-transform: none; letter-spacing: 0; color: var(--szary); font-size: 12px; }
.pole-sklad { min-height: 110px; padding: 8px 10px; font-size: 14px; line-height: 1.45; text-transform: none; letter-spacing: 0; color: var(--tusz); background: #fff; border: 1.5px solid #cdbf9c; border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pole-sklad:focus { outline: 2px solid var(--czerwony); outline-offset: 1px; }
.sklad-naglowek { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sklad-kopiuj { display: inline-flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; }
.sklad-kopiuj .maly-przycisk { font-size: 12px; padding: 3px 10px; }
.pozycje li.dostawca-faktura { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--linia); list-style: none; }

/* displaye: Bizflow / Yabra / razem (20.10.2026) */
table.displaye th.srodek { text-align: center; border-bottom: 1px solid currentColor; }
table.displaye th[rowspan] { vertical-align: bottom; }
/* formularz zamówienia kartonów: wartość pozycji, displaye, suma (20.10.2026) */
.formularz .kartony-zam .ilosc .wart { text-align: right; font-variant-numeric: tabular-nums; }
.formularz .kartony-zam .ilosc.naglowek span:first-child { text-align: left; }
.formularz .kartony-zam .ilosc.odstep { margin-top: 14px; }
.formularz .kartony-zam .ilosc select.dokad { margin-top: 0; padding: 5px 8px; }
.formularz .kartony-zam .ilosc.suma { border-top: 1px solid var(--szary); margin-top: 8px; padding-top: 8px; }
/* kalendarz płatności: odhaczanie zrobionych przelewów (20.10.2026) */
table.prezes.kalendarz label.odhacz { display: block; font-size: 11px; color: var(--szary); cursor: pointer; white-space: nowrap; margin-top: 2px; }
table.prezes.kalendarz label.odhacz input { margin: 0 3px 0 0; vertical-align: -1px; accent-color: var(--ziel); cursor: pointer; }
table.prezes.kalendarz td.zaplacona { background: #e3f0cf; }
table.prezes.kalendarz td.zaplacona label.odhacz { color: #4d7a1a; font-weight: 600; }
table.prezes.kalendarz tr.zaplacony td { background: #e3f0cf; }
table.prezes.kalendarz tr.suma.zostalo td { font-weight: 700; }
/* podsumowanie tygodnia w planie zamówień (20.10.2026) */
ul.podsumowanie-tyg { margin: 6px 0 10px; padding-left: 18px; font-size: 14px; line-height: 1.5; }
ul.podsumowanie-tyg li.propozycja { color: #4d7a1a; }
table.plan tr.propozycje-naglowek td { background: #eef5e3; color: #4d7a1a; padding-top: 10px; }
table.plan tr.propozycja td { background: #f6faef; color: #3d5f16; }
.chip.propozycja { background: #e3f0cf; color: #4d7a1a; }
table.plan tr.suma.propozycja td { color: #4d7a1a; }
label.akcept { display: inline-block; font-size: 12px; color: #4d7a1a; font-weight: 600; cursor: pointer; white-space: nowrap; margin-left: 4px; }
label.akcept input { accent-color: var(--ziel); margin: 0 3px 0 0; vertical-align: -1px; cursor: pointer; }
table.plan tr.musi-naglowek td { background: #fdeee6; color: #b02e00; padding-top: 8px; }
ul.lista-ekstra { margin: 8px 0 0; padding-left: 18px; font-size: 14px; }

/* korekta po spisie (22.10.2026) */
.formularz .lista-ilosci.spis .ilosc input { margin-top: 0; text-align: right; padding: 5px 8px; }
.formularz .lista-ilosci.spis .wart { text-align: right; }
.wart.plus, b.plus { color: #3f7d1e; font-weight: 600; }
.wart.minus, b.minus { color: var(--zle); font-weight: 600; }
details.historia-korekt { margin: 10px 0 18px; }
details.historia-korekt summary { cursor: pointer; font-weight: 600; color: var(--tusz); }
table.prezes th.zam-kol { background: #f6ecd2; }
table.prezes td.zam-kol { background: #fdf8ea; }
table.prezes tr.wiersz-ekstra td { background: #fbf3df; }

/* przeciąganie WZ / PZ (22.10.2026) */
.upusc { border: 2px dashed var(--szary); border-radius: 12px; padding: 14px 18px; margin: 4px 0 22px; background: rgba(255,255,255,.35); }
.upusc.nad { border-color: var(--tusz); background: #fdf3df; }
.upusc p { margin: 4px 0; }
.upusc label.link { cursor: pointer; text-decoration: underline; }
.dok-wynik { margin-top: 12px; }
.dok-wynik table { margin: 8px 0; }
.dok-wynik label.dok-do select { margin-left: 6px; }
td.plus { color: #3f7d1e; font-weight: 600; }
.zamow-w-yabrze { margin: 6px 0 10px; }
.sugestia-kartonow { border-radius: 12px; padding: 12px 16px; margin: 14px 0 22px; }
.sugestia-kartonow.trzeba { background: #fbe9e0; border: 1px solid #e8b9a3; }
.sugestia-kartonow.ok { background: #e7f1d8; border: 1px solid #c4dca6; }
.sugestia-kartonow h3 { margin: 0 0 4px; }
.chip.pilne { background: #e8542a; color: #fff; }
dialog.podglad-maila { max-width: 640px; width: calc(100% - 32px); border: 1px solid var(--szary); border-radius: 14px; padding: 18px 22px; background: #fffdf6; color: var(--tusz); }
dialog.podglad-maila::backdrop { background: rgba(40, 30, 20, .45); }
.naglowki-maila { border-bottom: 1px solid #e6dcc6; padding-bottom: 8px; margin-bottom: 12px; font-size: 14px; }
.naglowki-maila p { margin: 3px 0; }
.naglowki-maila span { display: inline-block; min-width: 110px; color: var(--szary); }
.tresc-maila { font-family: Arial, sans-serif; font-size: 14px; line-height: 1.45; }
.tresc-maila table { border-collapse: collapse; margin: 8px 0; }
.tresc-maila th, .tresc-maila td { border: 1px solid #cfc4ad; padding: 4px 10px; text-align: left; }
.przyciski-maila { margin-top: 14px; }
.tresc-maila table table, .tresc-maila td td { border: 0; }
.tresc-maila table.stopka { border: 0 !important; border-bottom: 4px solid #e8462a !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 4px 0 0 !important; padding: 0 !important; width: auto !important; min-width: 0 !important; display: inline-table !important; border-collapse: collapse !important; }
.tresc-maila table.stopka td { border: 0 !important; }

/* portal na serwerze: pasek „Zapisuję…” / „Zapisane ✓” i okno ustawiania hasła */
#pasek-zapisu { position: fixed; right: 16px; bottom: 16px; z-index: 50; padding: 8px 14px; border-radius: 6px; background: #3b2a20; color: #fff; font-size: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
#pasek-zapisu.zapisane { background: #2f7d4f; }
dialog.nowe-haslo input { width: 100%; max-width: 320px; margin: 4px 0 10px; padding: 6px 8px; }
/* konto Yabry (Beata 23.10.2026): bez „Prognoz Yabra KLM” */
body.rola-yabra .zakladki button[data-zakladka="prognozy-yk"], body.rola-yabra #prognozy-yk { display: none !important; }
/* „Wyloguj” w prawym górnym rogu nagłówka – na wysokości logo po lewej */
.naglowek .wyloguj { position: absolute; right: 28px; top: 42px; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--szary); }
.naglowek .wyloguj .maly-przycisk { margin: 0; }
@media (max-width: 1100px) { .naglowek .wyloguj .kto { display: none; } }
@media (max-width: 700px) { .naglowek .wyloguj { right: 14px; } }