/* Kolażownia — style narzędzia i arkuszy.
   Reguły czcionek siedzą w osobnym pliku _czcionki.css, generowanym z zawartości
   katalogu app/czcionki. */

:root{
  --atrament:#2A2A2A; --przygaszony:#8C8C8C; --linia:#DDDBD5; --tlo:#F7F6F3;
  --biurko:#E8E5E0; --akcent:#2F4858; --akcentTlo:#E4EDF1; --grozny:#9A3B22;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --pasek:52px;
  --zoom:1;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--biurko);color:var(--atrament);font-family:var(--font);
  overflow:hidden}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}
.ukryte{display:none !important}

/* ---------------- pasek górny ---------------- */

#pasek{height:var(--pasek);background:var(--tlo);border-bottom:1px solid var(--linia);
  display:flex;align-items:center;gap:14px;padding:0 12px;overflow-x:auto;white-space:nowrap}
.pasekGrupa{display:flex;align-items:center;gap:5px;flex:0 0 auto}
.pasekGrupa.prawa{margin-left:auto}
.pasekGrupa.tytul{flex-direction:column;align-items:flex-start;gap:0;min-width:130px}
.nazwa{border:none;background:none;padding:2px 0;font-size:14px;font-weight:600;cursor:pointer;
  max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.nazwa:hover{color:var(--akcent);text-decoration:underline}
.stanZapisu{font-size:10px;color:var(--przygaszony);letter-spacing:.04em}
.stanZapisu.roboczy{color:#8A6A2B}
.stanZapisu.brudny{color:var(--akcent)}
.licznik{font-size:12px;color:var(--przygaszony);min-width:46px;text-align:center}

button.ikona{width:28px;height:28px;padding:0;border:1px solid var(--linia);background:#fff;
  border-radius:3px;cursor:pointer;font-size:14px;line-height:1}
button.maly{padding:6px 10px;border:1px solid var(--linia);background:#fff;border-radius:3px;
  cursor:pointer;font-size:12px}
button.maly[aria-pressed="true"]{background:var(--akcent);color:#fff;border-color:var(--akcent)}
button.maly.mocny{background:var(--atrament);color:#fff;border-color:var(--atrament)}
button.maly.grozny{color:var(--grozny)}
button.maly:hover:not(:disabled),button.ikona:hover:not(:disabled){border-color:var(--atrament)}
button:disabled{opacity:.38;cursor:not-allowed}
.przycisk{padding:8px 15px;border:1px solid var(--atrament);background:var(--atrament);color:#fff;
  border-radius:3px;cursor:pointer;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.przycisk.jasny{background:#fff;color:var(--atrament)}
.przycisk.grozny{background:var(--grozny);border-color:var(--grozny)}

/* ---------------- układ ---------------- */

#korpus{display:flex;height:calc(100% - var(--pasek));align-items:stretch}
#lewy,#prawy{flex:0 0 306px;width:306px;background:var(--tlo);display:flex;flex-direction:column;
  min-height:0}
#lewy{border-right:1px solid var(--linia)}
#prawy{border-left:1px solid var(--linia)}
/* Zwinięty panel zostaje wąskim paskiem z samą strzałką. Wcześniej chował tylko
   zawartość, a pasek zakładek trzymał pełną szerokość — czyli miejsca nie
   przybywało i przycisk wyglądał na niedziałający. */
body.bezLewego #lewy,body.bezPrawego #prawy{flex:0 0 34px;width:34px;min-width:34px}
body.bezLewego #lewy .zawartoscPanelu,body.bezPrawego #prawy .zawartoscPanelu{display:none}
body.bezLewego #lewy .zakladka,body.bezPrawego #prawy .zakladki strong{display:none}
body.bezLewego #lewy .zakladki,body.bezPrawego #prawy .zakladki{padding:8px 3px;
  border-bottom:none}
.zakladki{display:flex;align-items:center;gap:4px;padding:8px 10px;
  border-bottom:1px solid var(--linia);flex:0 0 auto}
.zakladki strong{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--przygaszony)}
.zakladka{border:none;background:none;padding:6px 8px;border-radius:3px;cursor:pointer;
  font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--przygaszony)}
.zakladka.aktywna{background:var(--atrament);color:#fff}
.ikona.zwin{margin-left:auto}
.zawartoscPanelu{flex:1 1 auto;overflow-y:auto;padding:12px 12px 40px;
  display:flex;flex-direction:column;gap:12px;min-height:0}
.sekcjaPanelu{display:flex;flex-direction:column;gap:12px}
#panelWarstw{border-bottom:1px solid var(--linia);padding-bottom:14px}

#obszarRoboczy{flex:1 1 auto;min-width:0;overflow:auto;background:var(--biurko)}
#plotno{padding:26px 20px 70px;display:flex;flex-direction:column;align-items:center;gap:26px}

/* ---------------- kontrolki panelu ---------------- */

.pole{display:flex;flex-direction:column;gap:4px}
.pole>label{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--przygaszony)}
.pole input,.pole select,.pole textarea,.zawartoscPanelu input[type=search]{
  padding:7px 9px;border:1px solid var(--linia);border-radius:3px;background:#fff;
  font-size:13px;width:100%}
textarea{min-height:64px;line-height:1.5;resize:vertical}
.para{display:flex;gap:6px;flex-wrap:wrap}
.para>*{flex:1 1 auto}
.para.drobne>*{flex:0 0 auto}
.nota{font-size:11px;color:var(--przygaszony);line-height:1.5;margin:0}
.nota.blad,.blad{color:var(--grozny)}
.blok{border-top:1px solid var(--linia);padding-top:12px;display:flex;flex-direction:column;gap:10px}
.blok h3{margin:0;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--przygaszony)}
.siatkaPol{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.suwak{display:flex;align-items:center;gap:8px}
.suwak input[type=range]{flex:1 1 auto;width:auto;padding:0;border:none;background:none;
  accent-color:var(--akcent)}
.suwak .wartosc{flex:0 0 62px;text-align:right;font-size:11.5px;color:var(--przygaszony)}
.kolorPole{display:flex;gap:6px;align-items:center}
.kolorPole input[type=color]{width:38px;height:30px;padding:2px;flex:0 0 auto}
.kolorPole .kolorTekst{flex:1 1 auto;font-size:12px;font-variant-numeric:tabular-nums}
.przelacznikiGrupa{display:flex;gap:4px;flex-wrap:wrap}
.przelacznik{display:flex;align-items:center;gap:7px;font-size:12.5px;cursor:pointer}
.przelacznik input{width:15px;height:15px;accent-color:var(--akcent);flex:0 0 auto}
.znaczki{display:flex;flex-wrap:wrap;gap:5px}
.znaczek{padding:4px 9px;border:1px solid var(--linia);border-radius:20px;background:#fff;
  cursor:pointer;font-size:11.5px}
.znaczek[aria-pressed="true"]{background:var(--atrament);color:#fff;border-color:var(--atrament)}
.znaczek.czysc{color:var(--grozny)}

/* ---------------- biblioteka ---------------- */

/* Miniatury są duże celowo: w narzędziu do kolaży wybiera się okiem, nie po nazwie pliku. */
.siatkaGrafik{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:7px}
.kafelek{position:relative;aspect-ratio:1;border:1px solid var(--linia);border-radius:4px;
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  overflow:hidden;
  background-image:linear-gradient(45deg,#F0EEE9 25%,transparent 25%,transparent 75%,#F0EEE9 75%),
                   linear-gradient(45deg,#F0EEE9 25%,transparent 25%,transparent 75%,#F0EEE9 75%);
  background-size:12px 12px;background-position:0 0,6px 6px}
.kafelek:hover{border-color:var(--akcent);box-shadow:0 2px 8px rgba(0,0,0,.14)}
.kafelek img{max-width:94%;max-height:94%;object-fit:contain;pointer-events:none}
.kafelekMenu{position:absolute;top:2px;right:2px;width:20px;height:20px;padding:0;border:none;
  border-radius:3px;background:rgba(255,255,255,.9);cursor:pointer;font-size:12px;line-height:1;
  opacity:0}
.kafelek:hover .kafelekMenu{opacity:1}
.kafelekTagi{position:absolute;left:0;right:0;bottom:0;padding:2px 4px;font-size:8.5px;
  background:rgba(255,255,255,.88);color:var(--przygaszony);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}

/* ---------------- warstwy ---------------- */

.listaWarstw{display:flex;flex-direction:column;gap:3px;max-height:290px;overflow-y:auto}
.warstwa{display:flex;align-items:center;gap:7px;padding:4px 5px;border:1px solid transparent;
  border-radius:3px;background:#fff;cursor:pointer}
.warstwa:hover{border-color:var(--linia)}
.warstwa.wybrana{background:var(--akcentTlo);border-color:var(--akcent)}
.warstwa.ukryta{opacity:.45}
.warstwa.ciagniety{opacity:.35}
.warstwa.cel{border-color:var(--akcent);border-style:dashed}
.warstwaMini{flex:0 0 30px;width:30px;height:30px;border:1px solid var(--linia);border-radius:2px;
  display:flex;align-items:center;justify-content:center;background:#fff;overflow:hidden}
.warstwaMini img{max-width:100%;max-height:100%;object-fit:contain}
.warstwaLitera{font-size:14px;color:var(--przygaszony)}
.warstwaOpis{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.warstwaOpis b{font-size:12px;font-weight:500;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.warstwaOpis span{font-size:9.5px;color:var(--przygaszony);letter-spacing:.08em;
  text-transform:uppercase}
.warstwaIkona{flex:0 0 auto;width:22px;height:22px;padding:0;border:none;background:none;
  cursor:pointer;font-size:11px;opacity:.6}
.warstwaIkona:hover{opacity:1}

/* ---------------- ozdoby ---------------- */

.el .ozdoba{width:100%;height:100%}
.el .ozdoba svg{display:block;width:100%;height:100%}
.siatkaWariantow{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:6px}
.kafelekWariantu{position:relative;aspect-ratio:1;border:1px solid var(--linia);border-radius:4px;
  background:#fff;cursor:pointer;padding:6px 6px 14px;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.kafelekWariantu:hover{border-color:var(--akcent)}
.kafelekWariantu.wybrany{border-color:var(--akcent);background:var(--akcentTlo);
  box-shadow:inset 0 0 0 1px var(--akcent)}
.kafelekWariantu svg{width:100%;height:100%;pointer-events:none}
.podpisOzdoby{position:absolute;left:0;right:0;bottom:0;padding:1px 4px;font-size:8.5px;
  text-align:center;color:var(--przygaszony);background:rgba(255,255,255,.9);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------------- arkusz ---------------- */

.arkusz{position:relative;flex:0 0 auto;filter:drop-shadow(0 2px 12px rgba(0,0,0,.18))}
/* arkusz A4 w podglądzie jest białą kartką, na której leży strona kolażu */
.arkusz.naA4{background:#fff}
/* obwoluta wisi na środku arkusza — w trybie zwykłym pokrywa się z nim
   co do piksela, w trybie A4 siada pośrodku, tak jak wyjdzie z drukarki */
.obwoluta{position:absolute;left:50%;top:50%;transform-origin:center center}
.kartka{position:absolute;left:0;top:0;overflow:hidden;background:#fff}
/* szachownica pokazuje przezroczystość — tylko na ekranie, na papierze nic tu nie ma */
.kartka.przezroczysta{background-color:#fff;
  background-image:linear-gradient(45deg,#EDEBE6 25%,transparent 25%,transparent 75%,#EDEBE6 75%),
                   linear-gradient(45deg,#EDEBE6 25%,transparent 25%,transparent 75%,#EDEBE6 75%);
  background-size:6mm 6mm;background-position:0 0,3mm 3mm}
.tloStrony{position:absolute;left:0;top:0;pointer-events:none}
.definicje{position:absolute;width:0;height:0;overflow:hidden}
.numerStrony{position:absolute;left:0;bottom:-20px;font-size:10px;color:var(--przygaszony);
  letter-spacing:.1em}

.el{position:absolute;transform-origin:50% 50%;cursor:grab}
.el.zablokowany{cursor:default}
.el img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ramkaZdjecia{width:100%;height:100%;box-sizing:border-box}
.ramkaZdjecia img{width:100%;height:100%}
.el.typ-tekst{cursor:grab;overflow:visible}
.el .wiersz{white-space:pre;overflow-wrap:normal}
.el .plama{width:100%;height:100%;box-sizing:border-box}

/* Nakładka nie jest przycinana do kartki, więc uchwyt elementu dosuniętego
   do krawędzi nadal daje się złapać. */
.nakladka{position:absolute;left:0;top:0;pointer-events:none}
/* prowadnica jest wyraźnie niebieska, żeby nikt nie pomylił jej z linią cięcia:
   pierwsza istnieje tylko na ekranie, druga wyjdzie na papier */
.prowadnicaMarginesu{position:absolute;border:.2mm dashed #93B0C4}
.prowadnica{position:absolute;background:#D2456B;opacity:.9}
.prowadnica.pion{top:0;bottom:0;width:1px;margin-left:-.5px}
.prowadnica.poziom{left:0;right:0;height:1px;margin-top:-.5px}
.ramkaZazn{position:absolute;transform-origin:50% 50%;
  outline:calc(1.5px / var(--zoom)) solid var(--akcent);outline-offset:0}
.uchwyt{position:absolute;width:calc(11px / var(--zoom));height:calc(11px / var(--zoom));
  margin-left:calc(-5.5px / var(--zoom));margin-top:calc(-5.5px / var(--zoom));
  background:#fff;border:calc(1.5px / var(--zoom)) solid var(--akcent);border-radius:2px;
  pointer-events:auto;touch-action:none}
.u-nw{left:0;top:0;cursor:nwse-resize}
.u-n{left:50%;top:0;cursor:ns-resize}
.u-ne{left:100%;top:0;cursor:nesw-resize}
.u-e{left:100%;top:50%;cursor:ew-resize}
.u-se{left:100%;top:100%;cursor:nwse-resize}
.u-s{left:50%;top:100%;cursor:ns-resize}
.u-sw{left:0;top:100%;cursor:nesw-resize}
.u-w{left:0;top:50%;cursor:ew-resize}
.uchwytObrotu{position:absolute;left:50%;top:calc(-26px / var(--zoom));
  width:calc(13px / var(--zoom));height:calc(13px / var(--zoom));
  margin-left:calc(-6.5px / var(--zoom));
  background:#fff;border:calc(1.5px / var(--zoom)) solid var(--akcent);border-radius:50%;
  pointer-events:auto;cursor:grab;touch-action:none}

/* znaczniki cięcia — dokładajemy je tuż przed drukowaniem */
.znacznik{position:absolute}
.ramkaCiecia{position:absolute;left:0;top:0;width:100%;height:100%;
  border:.2mm dashed #9A9A9A;box-sizing:border-box;pointer-events:none}
.podpisCiecia{position:absolute;left:3mm;bottom:-6mm;font-size:6pt;color:#9A9A9A;
  letter-spacing:.08em;white-space:nowrap}

/* ---------------- okna ---------------- */

.modal{position:fixed;inset:0;background:rgba(30,30,28,.55);z-index:200;
  display:flex;align-items:center;justify-content:center;padding:24px}
.okno{background:#fff;border-radius:5px;max-width:460px;width:100%;max-height:84vh;
  display:flex;flex-direction:column}
.okno.szerokie{max-width:940px}
.oknoNaglowek{padding:13px 16px;border-bottom:1px solid var(--linia);
  display:flex;justify-content:space-between;align-items:center;gap:12px}
.oknoNaglowek h2{margin:0;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600}
.oknoTresc{padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.oknoAkcje{padding:0 16px 16px;justify-content:flex-end}
.oknoAkcje>*{flex:0 0 auto}

.siatkaDokumentow{display:grid;grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:14px}
.kartaDokumentu{border:1px solid var(--linia);border-radius:4px;padding:8px;
  display:flex;flex-direction:column;gap:5px;background:#fff}
.kartaDokumentu.biezaca{border-color:var(--akcent);background:var(--akcentTlo)}
.kartaDokumentu b{font-size:12.5px}
.kartaMini{height:132px;display:flex;align-items:center;justify-content:center;
  background:var(--biurko);border-radius:3px;overflow:hidden}
.kartaMini img{max-width:100%;max-height:100%;object-fit:contain}
.kartaAkcje{display:flex;flex-wrap:wrap;gap:4px;margin-top:auto}

/* ---------------- komunikaty i upuszczanie ---------------- */

#komunikat{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:var(--atrament);color:#fff;padding:10px 18px;border-radius:4px;font-size:13px;
  z-index:300;opacity:0;pointer-events:none;transition:opacity .18s;max-width:min(90vw,620px)}
#komunikat.widoczny{opacity:1}
#komunikat.blad{background:var(--grozny)}
#upuszczaniePodpis{position:fixed;inset:0;z-index:250;display:none;align-items:center;
  justify-content:center;background:rgba(47,72,88,.14);border:3px dashed var(--akcent);
  font-size:16px;color:var(--akcent);pointer-events:none}
body.upuszczanie #upuszczaniePodpis{display:flex}

/* ---------------- wydruk ---------------- */

@media print{
  html,body{height:auto;overflow:visible}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #pasek,#lewy,#prawy,#komunikat,#upuszczaniePodpis,.modal,.nakladka,.numerStrony{
    display:none !important}
  #korpus{display:block;height:auto}
  #obszarRoboczy{overflow:visible}
  #plotno{padding:0;gap:0;display:block;--zoom:1 !important}
  .arkusz{filter:none;width:auto !important;height:auto !important;margin:0 auto;
    break-after:page;page-break-after:always}
  .arkusz:last-child{break-after:auto;page-break-after:auto}
  .obwoluta{transform:none !important}
  .kartka.przezroczysta{background-image:none}
  /* w trybie „na A4 z liniami cięcia” strona siada na środku arkusza,
     a znaczniki mają gdzie wyjść poza jej krawędź */
  .arkusz{display:flex;align-items:center;justify-content:center}
  .obwoluta{position:relative;left:auto;top:auto}
  .arkusz.naA4{width:210mm !important;height:297mm !important}
}