/* Podglad faktury KSeF z pliku XML: pole wczytania, lista plikow, arkusz faktury i wydruk A4. */

/* Uklad strony (wlasne klasy: arkusz druku KP ma reguly wydruku, ktore schowalyby podglad). */
.pf-wrap{width:min(1180px,calc(100% - 40px));margin:0 auto}
.pf-intro{max-width:860px;margin:0 0 28px}
.pf-intro .guide-lead{margin:0 0 18px}
.pf-badges{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pf-badges li{padding:7px 12px;border-radius:999px;background:#fff;border:1px solid var(--surface-200);color:var(--surface-600);font:600 12px/1.3 var(--mono)}
.pf-guide{margin-top:0}
.guide-content .guide-cta a.pf-cta-link{color:#c7d2fe;font-weight:600}
.guide-content .guide-cta a.pf-cta-link:hover{color:#fff}
.pf-cta-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:0}

.pf-tool{margin:0 0 72px}
.pf-strefa{padding:34px 24px;border:2px dashed var(--surface-300);border-radius:16px;background:#fff;text-align:center;transition:border-color .15s,background-color .15s}
.pf-strefa.is-over{border-color:var(--primary-500);background:var(--primary-50)}
.pf-strefa-tytul{margin:0 0 6px;color:var(--surface-950);font-size:20px;font-weight:700;letter-spacing:-.01em}
.pf-strefa-opis{margin:0 0 18px;color:var(--surface-600);font-size:15px}
.pf-strefa-akcje{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pf-strefa-prywatnosc{margin:16px 0 0;color:var(--surface-500);font-size:13px}
.pf-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pf-noscript{margin:0 0 16px;padding:12px 14px;border-radius:10px;background:var(--warning-50);color:var(--warning-700);font-size:14px}

.pf-status{margin:14px 0 0;color:var(--surface-700);font-size:14.5px;font-weight:600}
.pf-status:empty{display:none}
.pf-lista-plikow{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.pf-lista-plikow[hidden],.pf-wynik[hidden]{display:none!important}
.pf-plik{display:block;width:100%;padding:11px 13px;border:1px solid var(--surface-200);border-radius:10px;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.pf-plik strong,.pf-blad strong{display:block;overflow:hidden;color:var(--surface-900);font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.pf-plik small,.pf-blad small{display:block;margin-top:3px;color:var(--surface-500);font-size:12.5px;line-height:1.4;overflow-wrap:anywhere}
.pf-plik:hover{border-color:var(--primary-400)}
.pf-plik:focus-visible{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(99,102,241,.25)}
.pf-plik.is-active{border-color:var(--primary-500);box-shadow:0 0 0 3px rgba(99,102,241,.16)}
.pf-blad{padding:11px 13px;border:1px solid #fecaca;border-radius:10px;background:var(--danger-50)}
.pf-blad small{color:var(--danger-700)}

.pf-wynik{margin:26px 0 0;scroll-margin-top:92px}
.pf-pasek{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:0 0 14px}
.pf-nazwa-pliku{margin:0;color:var(--surface-600);font:600 13px/1.4 var(--mono);overflow-wrap:anywhere}
.pf-akcje{display:flex;flex-wrap:wrap;gap:8px}

/* Arkusz faktury. Kolory i ramki sa stale (czarny na bialym), zeby ekran i wydruk wygladaly tak samo. */
.pf-arkusz{box-sizing:border-box;max-width:940px;margin:0 auto;padding:34px 38px 26px;border:1px solid var(--surface-200);border-radius:6px;background:#fff;box-shadow:var(--shadow-hi);color:#111;font-family:var(--font);font-size:13.5px;line-height:1.45;text-align:left;overflow-wrap:anywhere}
.pf-arkusz *{box-sizing:border-box}
.pf-arkusz h2,.pf-arkusz h3,.pf-arkusz h4,.pf-arkusz h5{margin:0;color:#111;letter-spacing:0}
.pf-nag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px 28px;align-items:start;margin:0 0 22px;padding:0 0 18px;border-bottom:2px solid #111}
.pf-nag h2{font-size:25px;font-weight:800;line-height:1.15}
.pf-numer{margin:6px 0 0;font-size:16px;font-weight:700}
.pf-dl{display:grid;gap:3px 0;margin:0}
.pf-dl > div{display:grid;grid-template-columns:minmax(0,11.5em) minmax(0,1fr);gap:0 12px}
.pf-dl dt{margin:0;color:#4a4a4a}
.pf-dl dd{margin:0;font-weight:600;white-space:pre-line}
.pf-strony{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 20px}
.pf-strona{padding:12px 14px;border:1px solid #bdbdbd;border-radius:4px}
.pf-strona h3,.pf-blok h3{margin:0 0 8px;color:#333;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.pf-nazwa{margin:0 0 6px;font-size:15px;font-weight:700}
.pf-strona .pf-dl > div{grid-template-columns:minmax(0,8.5em) minmax(0,1fr)}
.pf-blok{margin:0 0 20px}
.pf-pod{margin:8px 0 0;padding:0 0 0 12px;border-left:2px solid #d6d6d6}
.pf-pod h4,.pf-pod h5{margin:0 0 4px;font-size:12.5px;font-weight:700}
.pf-lista{margin:0;padding:0 0 0 18px}
.pf-lista li{margin:0 0 2px;font-weight:600}
.pf-akapit{margin:0 0 6px;white-space:pre-line}
.pf-tab-ramka{overflow-x:auto}
.pf-tab{width:100%;border-collapse:collapse;font-size:12.5px}
.pf-tab th,.pf-tab td{padding:6px 8px;border:1px solid #9a9a9a;text-align:left;vertical-align:top}
.pf-tab th{background:#f1f1f1;color:#222;font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1.3}
.pf-tab .pf-r{text-align:right;white-space:nowrap}
/* Krotkie komorki (Lp., szt., stawka) nie lamia sie w srodku slowa; dlugi tekst moze byc tylko w kolumnie z nazwa. */
.pf-tab th,.pf-tab td{overflow-wrap:normal;word-break:normal}
.pf-tab-szeroka td:nth-child(2){min-width:12em;overflow-wrap:anywhere}
.pf-podpis{display:block;margin-top:2px;color:#4a4a4a;font-size:11px;line-height:1.35;white-space:normal}
.pf-znak{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid #777;border-radius:3px;color:#333;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.pf-przed td{color:#555}
.pf-suma td{font-weight:700;background:#f7f7f7}
.pf-razem{margin:10px 0 0 auto;max-width:27em}
.pf-razem > div{grid-template-columns:minmax(0,1fr) auto;padding:4px 0;border-bottom:1px solid #d6d6d6}
.pf-razem > div:first-child dd{font-size:16px;font-weight:800}
.pf-razem dd{text-align:right}
.pf-tech{margin:0 0 14px;padding:10px 12px;border:1px solid #d6d6d6;border-radius:4px;color:#444;font-size:12px}
.pf-tech summary{cursor:pointer;font-weight:600}
.pf-tech .pf-dl{margin-top:8px}
.pf-tech .pf-dl > div{grid-template-columns:minmax(0,22em) minmax(0,1fr)}
.pf-zastrz{margin:18px 0 0;padding:10px 0 0;border-top:1px solid #bdbdbd;color:#555;font-size:11px;line-height:1.45}

/* Tylko ekran: kartka A4 ma ok. 700 px szerokosci i bez tego wydruk dostalby uklad telefonu. */
@media screen and (max-width:720px){
  .pf-strefa{padding:26px 16px}
  .pf-strefa-akcje .btn,.pf-akcje .btn{width:100%}
  .pf-akcje{width:100%}
  .pf-arkusz{padding:20px 16px 16px;font-size:13px}
  .pf-nag,.pf-strony{grid-template-columns:minmax(0,1fr)}
  .pf-nag h2{font-size:21px}
  .pf-dl > div,.pf-strona .pf-dl > div,.pf-tech .pf-dl > div{grid-template-columns:minmax(0,1fr);gap:0}
  .pf-dl > div{margin-bottom:4px}
  .pf-razem > div{grid-template-columns:minmax(0,1fr) auto}
  .pf-tab-szeroka{min-width:620px}
  .pf-tool{margin-bottom:52px}
  .pf-wrap{width:min(100% - 28px,1180px)}
  .pf-cta-actions .btn{width:100%}
}

/* Wydruk: tylko arkusz faktury, na kartkach A4. */
@media print{
  @page{size:A4 portrait;margin:12mm}
  html,body{margin:0;padding:0;background:#fff!important}
  body > :not(main),
  main > :not(.pf-wrap),
  .pf-wrap > :not(.pf-tool),
  .pf-tool > :not(.pf-wynik),
  .pf-wynik > :not(.pf-ramka){display:none!important}
  .guide-page{padding:0!important;background:#fff!important}
  .pf-wrap,.pf-tool,.pf-wynik,.pf-ramka{display:block!important;position:static!important;width:auto!important;height:auto!important;margin:0!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;box-shadow:none!important}
  .pf-arkusz{max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none;font-size:9.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .pf-tab{font-size:8.5pt}
  .pf-tab-szeroka{font-size:8pt}
  .pf-tab-szeroka td:nth-child(2){min-width:0}
  .pf-tab th,.pf-tab td{padding:4px 5px}
  .pf-tab-ramka{overflow:visible}
  .pf-tab tr,.pf-strona,.pf-razem,.pf-pod{break-inside:avoid;page-break-inside:avoid}
  .pf-blok h3{break-after:avoid;page-break-after:avoid}
  .pf-tech{display:none}
}