/* ==========================================================================
   portal.css — PORTAL KONTRAHENTA (T-100 Etap 4)
   Bazuje na tokens.css (importowanym przez app.css) — żadnych własnych kolorów.

   Zasada układu: portal to REJESTR, nie dashboard. Stąd pasek podsumowania
   zamiast wielkich kafli KPI — wielka cyfra krzyczy „analityka", pasek mówi
   „oto co u was było". Wynika to z decyzji o zakresie (SPEC §3.3).

   Drugi wyznacznik: po nałożeniu reguł portalu 7 z 9 kontrahentów widzi mniej
   niż 10 pozycji, a 4 nie widzą nic. Widok ubogi i pusty to przypadek TYPOWY,
   dlatego .pempty jest pełnoprawnym stanem, a nie doklejką.
   ========================================================================== */

.pwrap{max-width:1120px;margin:0 auto;padding:0 22px 60px}

/* ===== TOPBAR ===== */
.ptop{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);
  background:color-mix(in oklab,var(--ink) 82%,transparent);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
.ptop-in{max-width:1120px;margin:0 auto;padding:13px 22px;display:flex;align-items:center;gap:16px}
.pbrand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--paper)}
.pbrand-mark{width:36px;height:36px;border-radius:11px;flex-shrink:0;
  background:radial-gradient(120% 120% at 20% 10%,#1d4b30 0%,#0a1f14 60%,#06130c 100%);
  border:1px solid var(--line-2);display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(156,255,87,.1),0 10px 30px -10px rgba(156,255,87,.3)}
.pbrand-mark svg{width:21px;height:21px}
.pbrand-txt{line-height:1}
.pbrand-txt .nm{font-weight:800;font-size:15px;letter-spacing:-.02em}
.pbrand-txt .nm em{font-style:normal;color:var(--green-neon)}
.pbrand-txt .sb{font-size:9px;color:var(--paper-dim);text-transform:uppercase;
  letter-spacing:.2em;margin-top:4px;display:block;opacity:.6}
.pnav{display:flex;gap:3px;margin-left:12px}
.pnav a{padding:7px 12px;border-radius:8px;text-decoration:none;color:var(--paper-dim);
  font-size:13px;font-weight:600;white-space:nowrap;transition:.15s}
.pnav a:hover{color:var(--paper);background:rgba(255,255,255,.04)}
.pnav a.on{background:rgba(156,255,87,.10);color:var(--green-neon)}
.pspacer{flex:1}

/* plakietka firmy — stoi tam, gdzie panel wewnętrzny ma liczniki Pulsona */
.pfirm{display:flex;align-items:center;gap:9px;padding:6px 13px 6px 9px;border-radius:999px;
  border:1px solid rgba(196,165,255,.3);background:rgba(196,165,255,.07)}
.pfirm svg{width:15px;height:15px;color:#c4a5ff;flex-shrink:0}
.pf-c{line-height:1.25;display:block}
.pf-n{font:700 12px 'Manrope';color:var(--paper);white-space:nowrap;display:block}
.pf-l{font:600 8.5px 'JetBrains Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#c4a5ff;display:block}
.pusr{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  font:800 11px 'JetBrains Mono',monospace;color:#1b1030;text-decoration:none;
  background:linear-gradient(140deg,#c4a5ff,#5b3a9e)}

/* wylogowanie — obok inicjałów, jak w panelu wewnętrznym */
.plogout{display:flex;align-items:center;gap:7px;margin-left:7px;flex-shrink:0;
  padding:7px 12px 7px 10px;border-radius:999px;text-decoration:none;
  border:1px solid var(--line-2);color:var(--paper-dim);transition:.15s}
.plogout svg{width:15px;height:15px}
.plogout .lbl{font:700 11px 'Manrope'}
.plogout:hover{color:var(--paper);border-color:var(--paper-dim);background:rgba(255,255,255,.04)}

/* podgląd dla pracownika Pulsona */
.ppreview{display:flex;align-items:center;gap:9px;padding:5px 12px;border-radius:999px;
  border:1px solid rgba(255,166,112,.35);background:rgba(255,106,26,.07)}
.pv-lab{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--warm-soft)}
.ppreview select{background:transparent;border:0;outline:0;color:var(--paper);cursor:pointer;
  font:600 12px 'Manrope';max-width:210px}
.ppreview select option{background:var(--ink-2);color:var(--paper)}
.pbanner{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:10px 22px;
  background:rgba(255,106,26,.08);border-bottom:1px solid rgba(255,166,112,.25);
  font:600 12px 'Manrope';color:var(--paper-dim)}
.pbanner svg{width:16px;height:16px;color:var(--warm-soft);flex-shrink:0}
.pbanner b{color:var(--paper)}
.pbanner a{margin-left:auto;color:var(--warm-soft);font:600 11px 'JetBrains Mono',monospace;
  text-decoration:none;border-bottom:1px dashed rgba(255,166,112,.4)}
/* Przełącznik firm mieszka w banerze (od 2026-09-15), nie w pasku: w pasku wypychał
   go poza ekran telefonu, a tu ma całą szerokość i `flex-wrap` banera pod sobą —
   przy wąskim ekranie schodzi po prostu do drugiego rzędu, zamiast cokolwiek ściskać. */
.pbanner .ppreview{flex-shrink:1;min-width:0}
.pbanner .ppreview select{max-width:46vw}
@media(max-width:760px){
  /* Link „wróć do panelu" ma margin-left:auto — w drugim rzędzie wyglądałby na
     zagubiony po prawej, więc przy zawinięciu oddajemy mu całą szerokość. */
  .pbanner{gap:9px}
  .pbanner .ppreview{order:3}
  .pbanner a{order:4;margin-left:0}
  .pbanner .ppreview select{max-width:52vw}
}

/* ===== NAGŁÓWEK STRONY ===== */
.phead{padding:30px 0 20px}
.ph1{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.03em;margin:0 0 6px}
.ph1 em{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  color:var(--green-neon);letter-spacing:-.02em}
.plede{color:var(--paper-dim);font-size:13.5px;margin:0;line-height:1.6;max-width:70ch}

/* ===== PASEK PODSUMOWANIA ===== */
.pstrip{display:flex;border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
  margin-bottom:18px;background:linear-gradient(180deg,#101a14 0%,#0a1410 100%)}
.pstrip .c{flex:1;padding:14px 18px;border-right:1px solid var(--line);min-width:0}
.pstrip .c:last-child{border-right:0}
.pstrip .k{font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-xdim);margin-bottom:6px}
.pstrip .v{font-weight:800;font-size:23px;letter-spacing:-.02em;line-height:1}
.pstrip .v.sm{font-size:16px;padding-top:5px}
/* „U nas w serwisie" — jedyna liczba o stanie BIEŻĄCYM wśród liczb historycznych.
   Kolor odróżnia ją od reszty paska, żeby nie czytało się jej jako kolejnej sumy. */
.pstrip .v.now{color:var(--green-neon)}
@media(max-width:720px){
  .pstrip{flex-wrap:wrap}
  .pstrip .c{flex:1 1 50%;border-bottom:1px solid var(--line)}
  .pstrip .c:nth-child(2n){border-right:0}
  /* Nieparzysta liczba kafelków (od 2026-08-31 jest ich 5): ostatni zostawał sam
     na pół szerokości z pustką obok. Rozciągamy go na cały rząd. */
  .pstrip .c:last-child:nth-child(odd){flex-basis:100%;border-right:0}
}

/* ===== SZUKAJKA ===== */
.pfind{display:flex;align-items:center;gap:11px;padding:12px 16px;margin-bottom:18px;
  border:1px solid var(--line-2);border-radius:13px;background:rgba(255,255,255,.02)}
.pfind:focus-within{border-color:rgba(156,255,87,.45)}
.pfind svg{width:17px;height:17px;color:var(--paper-xdim);flex-shrink:0}
.pfind input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);
  font:600 14px 'Manrope'}
.pfind input::placeholder{color:var(--paper-xdim);font-weight:500}
.pfind button{background:rgba(156,255,87,.12);border:1px solid rgba(156,255,87,.3);
  color:var(--green-neon);border-radius:9px;padding:7px 14px;cursor:pointer;
  font:700 12px 'Manrope';white-space:nowrap}
.pfind button:hover{background:rgba(156,255,87,.2)}
.pfind a.clr{color:var(--paper-xdim);text-decoration:none;font:600 11px 'JetBrains Mono',monospace;
  border:1px solid var(--line-2);border-radius:8px;padding:6px 10px;white-space:nowrap}
.pfind a.clr:hover{color:var(--paper)}

/* Kolejność listy (2026-09-15). Wyrównana do PRAWEJ i wyciszona — to pomoc, nie
   główna akcja strony; szukanie ma zostać tym, co widać najpierw.
   Próg 760 px, a NIE własny: przy tej szerokości tabela zamienia się w karty
   (sekcja niżej), więc kontrolka musi przełączyć się razem z nią, nie osobno. */
.psort{display:flex;align-items:center;justify-content:flex-end;gap:9px;
  margin:-8px 0 16px;flex-wrap:wrap}
.psort label{color:var(--paper-xdim);font:600 12px 'Manrope'}
.psort select{background:rgba(255,255,255,.03);border:1px solid var(--line-2);
  border-radius:9px;padding:7px 11px;color:var(--paper);font:600 12px 'Manrope';
  cursor:pointer;max-width:100%}
.psort select:focus{outline:0;border-color:rgba(156,255,87,.45)}
.psort button{background:rgba(156,255,87,.12);border:1px solid rgba(156,255,87,.3);
  color:var(--green-neon);border-radius:9px;padding:6px 12px;cursor:pointer;
  font:700 12px 'Manrope'}
@media(max-width:760px){
  /* Etykieta z lewej, pole z prawej — na telefonie nic się nie zmieści obok siebie
     inaczej, a samo pole bez podpisu nie mówi, czym jest. */
  .psort{justify-content:space-between;margin:-6px 0 14px}
  .psort select{flex:1;min-width:0;max-width:62%}
}

/* ===== TABELA ===== */
.ptbl{border:1px solid var(--line-2);border-radius:14px;overflow:hidden}
.ptr{display:grid;grid-template-columns:1.1fr 1.25fr .9fr .9fr .85fr;gap:14px;
  padding:13px 18px;align-items:center}
.pth{background:rgba(255,255,255,.03);border-bottom:1px solid var(--line);
  font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-xdim)}
.ptd{border-bottom:1px solid var(--line);font-size:13.5px}
.ptbl .ptd:last-child{border-bottom:0}
.ptd:hover{background:rgba(255,255,255,.02)}
.psn{font:700 13.5px 'JetBrains Mono',monospace;color:var(--paper);word-break:break-all}
.pdim{color:var(--paper-dim)}
.pmono{font-family:'JetBrains Mono',monospace;font-size:12.5px}
.pimei{display:block;font:500 10px 'JetBrains Mono',monospace;color:var(--paper-xdim);margin-top:3px}

.ppill{display:inline-block;font:700 9.5px 'JetBrains Mono',monospace;letter-spacing:.06em;
  padding:3px 8px;border-radius:6px;white-space:nowrap}
.ppill.gw{color:var(--green-neon);background:rgba(156,255,87,.10);border:1px solid rgba(156,255,87,.28)}
.ppill.po{color:var(--paper-dim);background:rgba(255,255,255,.04);border:1px solid var(--line-2)}
.ppill.brak{color:var(--paper-xdim);border:1px dashed var(--line-2)}

/* Desktop: plakietka mieszka w ostatniej kolumnie, etykiety mobilne schowane. */
.only-m,.lbl-m{display:none}

/* Telefon: ten sam markup układa się w kartę — SN z plakietką na górze,
   pod spodem model, na dole przyjęto (lewo) i wydano (prawo). */
@media(max-width:760px){
  .ptbl{border:0;border-radius:0;overflow:visible}
  .ptr.pth{display:none}
  .ptr.ptd{display:grid;grid-template-columns:1fr auto;gap:6px 10px;
    border:1px solid var(--line-2);border-radius:12px;padding:12px 13px;margin-bottom:9px;
    background:rgba(255,255,255,.02)}
  .ptr.ptd:hover{background:rgba(255,255,255,.02)}
  .c-sn{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:9px}
  .c-md{grid-column:1/-1;font-size:12px}
  .c-p{grid-column:1}
  .c-w{grid-column:2;text-align:right}
  .c-g{display:none}
  .only-m{display:inline-block}
  .lbl-m{display:inline;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.1em;
    text-transform:uppercase;color:var(--paper-xdim);margin-right:5px}
  .pwrap{padding:0 15px 46px}
  .ptop-in{padding:11px 15px;gap:10px}
  .pnav{margin-left:0;overflow-x:auto;scrollbar-width:none}
  .pnav::-webkit-scrollbar{display:none}
  .pfirm .pf-n{max-width:38vw;overflow:hidden;text-overflow:ellipsis}
  .plogout .lbl{display:none}
  .plogout{padding:7px 9px;margin-left:4px}

  /* `min-width:0` — bez tego element flex nie kurczy się poniżej swojej treści
     i `overflow-x:auto` wyżej nic nie daje (zgłoszenie Kamila 2026-09-15: pasek
     nie mieścił się na iPhonie 14 Pro w trybie podglądu). */
  .pnav{min-width:0}
}
/* bardzo wąsko: nazwa firmy i tak się nie zmieści obok nawigacji */
@media(max-width:520px){
  .pbrand-txt{display:none}
  .pfirm{padding:5px 10px 5px 8px}
  .pfirm .pf-l{display:none}
}

/* ===== STOPKI / NOTY ===== */
.pfoot{margin-top:14px;padding:12px 16px;border-radius:11px;font-size:12px;line-height:1.6;
  color:var(--paper-dim);background:rgba(255,255,255,.02);border:1px solid var(--line)}
.pfoot b{color:var(--paper)}
.pfoot + .pfoot{margin-top:10px}

/* ===== STAN PUSTY — u 4 z 9 kontrahentów to JEDYNY widok ===== */
.pempty{padding:56px 30px;text-align:center;border:1px dashed var(--line-2);border-radius:14px}
.pempty .ic{width:46px;height:46px;margin:0 auto 16px;border-radius:14px;display:grid;
  place-items:center;background:rgba(196,165,255,.08);border:1px solid rgba(196,165,255,.22)}
.pempty .ic svg{width:22px;height:22px;color:#c4a5ff}
.pempty .big{font-weight:800;font-size:16px;margin-bottom:8px}
.pempty .small{color:var(--paper-dim);font-size:13px;line-height:1.65;max-width:440px;margin:0 auto}
.pempty .small a{color:var(--green-neon);text-decoration:none;border-bottom:1px dashed rgba(156,255,87,.4)}

/* ===== STRONICOWANIE ===== */
.ppg{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;flex-wrap:wrap}
.ppg a,.ppg span{padding:8px 14px;border-radius:9px;text-decoration:none;
  font:600 12px 'JetBrains Mono',monospace;border:1px solid var(--line-2);color:var(--paper-dim)}
.ppg a:hover{color:var(--paper);border-color:var(--paper-dim)}
.ppg .cur{background:rgba(156,255,87,.10);border-color:rgba(156,255,87,.3);color:var(--green-neon)}
.ppg .off{opacity:.35;pointer-events:none}

/* ===== KARTY GWARANCJI ===== */
.pgw{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.pgw .card{border:1px solid var(--line-2);border-radius:14px;padding:16px 18px;
  background:linear-gradient(180deg,#101a14 0%,#0a1410 100%)}
.pgw .card .sn{font:800 16px 'JetBrains Mono',monospace;letter-spacing:-.01em;margin-bottom:3px}
.pgw .card .md{font-size:12.5px;color:var(--paper-dim);margin-bottom:13px}
.pgw .card .rowk{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-top:1px solid var(--line);font-size:12.5px}
.pgw .card .rowk .k{color:var(--paper-xdim)}
.pgw .card .rowk .v{color:var(--paper);font-weight:600;font-family:'JetBrains Mono',monospace;font-size:12px}
.pgw .card .top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}

/* ==========================================================================
   FORMULARZ KONTA (zmien-haslo.php w wariancie portalu)
   Zgłoszenie Kamila 2026-09-08: „różni się podstrona zmień hasło wyglądem, skalą
   i topbarem od tej portal. Zrób tak jak w portalu". Strona jest wspólna dla
   panelu i portalu — te klasy obowiązują TYLKO w gałęzi kontrahenta.
   ========================================================================== */
.pform{max-width:520px;border:1px solid var(--line-2);border-radius:14px;padding:22px;
  background:linear-gradient(180deg,#101a14 0%,#0a1410 100%)}
.pform .grp{display:flex;flex-direction:column;gap:16px}
.pform label{display:block;font:600 9.5px 'JetBrains Mono',monospace;letter-spacing:.14em;
  text-transform:uppercase;color:var(--paper-xdim);margin-bottom:7px}
.pform .inp{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:11px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.pform .inp:focus-within{border-color:rgba(156,255,87,.45)}
.pform .inp svg{width:16px;height:16px;color:var(--paper-xdim);flex-shrink:0}
.pform .inp input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);
  font:600 14px 'JetBrains Mono',monospace}
.pform .eye{background:none;border:0;padding:0;cursor:pointer;color:var(--paper-xdim);
  display:grid;place-items:center}
.pform .eye:hover{color:var(--paper)}
.pform .rules{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.pform .rule{display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:7px;
  border:1px solid var(--line-2);font:600 10.5px 'Manrope';color:var(--paper-xdim)}
.pform .rule svg{width:11px;height:11px;opacity:.35}
.pform .rule.ok{color:var(--green-neon);border-color:rgba(156,255,87,.3);background:rgba(156,255,87,.07)}
.pform .rule.ok svg{opacity:1}
.pform .help{display:block;margin-top:8px;font:600 11px 'JetBrains Mono',monospace;opacity:0}
.pform .acts{display:flex;align-items:center;gap:10px;margin-top:22px;padding-top:18px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.pform .acts .note{flex:1;min-width:180px;font-size:11px;color:var(--paper-xdim);line-height:1.5}
.pform .acts .go{display:flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap;
  background:rgba(156,255,87,.12);border:1px solid rgba(156,255,87,.3);color:var(--green-neon);
  border-radius:10px;padding:10px 17px;font:700 13px 'Manrope'}
.pform .acts .go:hover{background:rgba(156,255,87,.2)}
.pform .acts .go svg{width:15px;height:15px}
.pform .acts .cancel{text-decoration:none;color:var(--paper-dim);border:1px solid var(--line-2);
  border-radius:10px;padding:10px 15px;font:700 13px 'Manrope';white-space:nowrap}
.pform .acts .cancel:hover{color:var(--paper);border-color:var(--paper-dim)}

/* komunikaty — ten sam język wizualny co .pfoot, tylko z kolorem stanu */
.pmsg{display:flex;gap:11px;align-items:flex-start;padding:13px 16px;border-radius:11px;
  margin-bottom:18px;font-size:13px;line-height:1.6}
.pmsg svg{width:17px;height:17px;flex-shrink:0;margin-top:1px}
.pmsg.ok{color:var(--green-neon);border:1px solid rgba(156,255,87,.28);background:rgba(156,255,87,.07)}
.pmsg.bad{color:var(--warm-soft);border:1px solid rgba(255,166,112,.3);background:rgba(255,106,26,.07)}
.pmsg b{color:var(--paper)}