/* linkbuilding-panel — system wyglądu (Z2, makieta zaakceptowana 07.11). Tokeny: kontrast tekstu ≥ 4,5:1 na --tlo/--pow. */
:root{
  --tlo:#F6F7F9; --pow:#FFFFFF; --pow2:#F9FAFB; --linia:#E5E7EB; --linia2:#D1D5DB;
  --tekst:#111827; --tekst2:#374151; --szary:#4B5563;
  --akcent:#2563EB; --akcent-tekst:#1D4ED8; --akcent-tlo:#EFF6FF; --akcent-ciemny:#1E3A8A; --akcent-jasny:#DBEAFE;
  --rabat:#9A3412; --rabat-tlo:#FFEDD5; --rabat-mocny:#C2410C; --rabat-jasny:#FFF7ED;
  --ok:#166534; --ok-tlo:#DCFCE7; --blad:#991B1B; --blad-tlo:#FEE2E2; --uwaga:#854D0E; --uwaga-tlo:#FEF9C3;
  --menu:#111827; --menu-tekst:#D1D5DB; --menu-aktywny:#1F2937;
  --r:10px; --r2:14px; --cien:0 1px 2px rgba(17,24,39,.04);
  --font:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--tlo);color:var(--tekst);font:14px/1.5 var(--font)}
a{color:var(--akcent-tekst)}a:hover{color:var(--akcent-ciemny)}
h1,h2,h3{margin:0;line-height:1.25}
h1{font-size:26px;font-weight:700;letter-spacing:-.02em}
h2{font-size:18px;font-weight:700}
h3{font-size:15px;font-weight:600}
p{margin:0}
small,.maly{font-size:12px;color:var(--szary)}
.szary{color:var(--szary)}
:focus-visible{outline:3px solid #93C5FD;outline-offset:2px}

/* układ */
.uklad{min-height:100vh;display:flex}
.menu{flex:0 0 252px;background:var(--menu);color:var(--menu-tekst);padding:22px 14px;display:flex;flex-direction:column;gap:2px;position:sticky;top:0;height:100vh;overflow-y:auto}
.menu .logo{display:flex;align-items:center;gap:10px;padding:0 8px 22px;color:#fff;font-weight:600;font-size:15px;text-decoration:none}
.menu .logo span{width:32px;height:32px;border-radius:8px;background:var(--akcent);display:flex;align-items:center;justify-content:center;font-weight:700}
.menu a.poz{display:flex;align-items:center;gap:10px;padding:10px 12px;white-space:nowrap;border-radius:8px;color:var(--menu-tekst);text-decoration:none;font-size:14px;min-height:44px}
.menu a.poz:hover{background:var(--menu-aktywny);color:#fff}
.menu a.poz[aria-current=page]{background:var(--menu-aktywny);color:#fff;font-weight:600}
.menu a.poz svg{flex:none}
.menu .licznik{margin-left:auto;border-radius:999px;padding:1px 8px;font-size:12px;color:#fff;background:var(--akcent)}
.menu .licznik.rabat{background:var(--rabat-mocny)}
.menu .stopka{margin-top:auto;padding:16px 12px 0;font-size:12px;color:#9CA3AF;line-height:1.5}
.menu .stopka b{color:#E5E7EB;font-weight:500}
.tresc{flex:1 1 auto;min-width:0;padding:28px 32px 48px;display:flex;flex-direction:column;gap:20px;max-width:1500px}
.poufne{font-size:12px;color:var(--szary)}

/* nagłówek strony */
.naglowek{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px}
.naglowek .opis{display:flex;flex-direction:column;gap:4px;min-width:0}
.naglowek .opis p{font-size:14px;color:var(--szary)}

/* przełącznik segmentowy */
.segmenty{display:flex;flex-wrap:wrap;gap:6px;background:var(--pow);border:1px solid var(--linia);border-radius:12px;padding:4px}
.segmenty a,.segmenty button{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border-radius:9px;border:0;background:transparent;color:var(--tekst2);font:600 14px var(--font);text-decoration:none;cursor:pointer}
.segmenty [aria-current=true],.segmenty [aria-pressed=true]{background:var(--tekst);color:#fff}
.segmenty .ile{opacity:.75;font-weight:500}

/* kafelki */
.kafelki{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.kafel{background:var(--pow);border:1px solid var(--linia);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--cien)}
.kafel .et{font-size:13px;color:var(--szary)}
.kafel .liczba{font-size:28px;font-weight:700;line-height:1.1}
.kafel .liczba.akcent{color:var(--akcent-tekst)}.kafel .liczba.rabat{color:var(--rabat-mocny)}
.kafel .pod{font-size:12px;color:var(--szary)}

/* karty i sekcje */
.karta{background:var(--pow);border:1px solid var(--linia);border-radius:var(--r2);box-shadow:var(--cien)}
.karta.wn{padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.karta-naglowek{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.siatka2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px}
.uklad-szczegoly{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.uklad-szczegoly>.glowna{flex:999 1 560px;min-width:0}
.uklad-szczegoly>.boczna{flex:1 1 340px;max-width:440px;min-width:0;position:sticky;top:16px}

/* pasek narzędzi i filtry */
.narzedzia{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pole,select.pole,textarea.pole{height:44px;border:1px solid var(--linia2);border-radius:var(--r);padding:0 14px;font:14px var(--font);background:var(--pow);color:var(--tekst);min-width:0}
textarea.pole{height:auto;padding:10px 14px;min-height:72px}
.pole.szukaj{flex:1 1 220px;min-width:180px}
.chip{display:inline-flex;align-items:center;height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--linia2);background:var(--pow);color:var(--tekst2);font:500 13px var(--font);cursor:pointer;text-decoration:none;user-select:none}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip:has(input:checked),.chip[aria-pressed=true]{border-color:var(--akcent);background:var(--akcent-tlo);color:var(--akcent-ciemny);font-weight:600}
.chip:has(input:focus-visible){outline:3px solid #93C5FD;outline-offset:2px}
label.et{font-size:13px;color:var(--szary)}

/* przyciski */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--r);border:1px solid var(--linia2);background:var(--pow);color:var(--tekst);font:600 14px var(--font);text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{border-color:#9CA3AF}
.btn.glowny{background:var(--akcent);border-color:var(--akcent);color:#fff}
.btn.glowny:hover{background:var(--akcent-tekst)}
.btn.niebezp{color:var(--blad);border-color:#FCA5A5}
.btn.maly{min-height:36px;padding:0 12px;font-size:13px}
.ikona{width:44px;height:44px;padding:0;border-radius:var(--r);border:1px solid var(--linia);background:var(--pow);color:var(--szary);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none;text-decoration:none}
.ikona:hover{border-color:#9CA3AF;color:var(--tekst)}
.ikona.gwiazda[aria-pressed=true]{border-color:#F59E0B;background:#FFFBEB;color:#B45309}
.btn-link{border:0;background:none;color:var(--akcent-tekst);font:600 13px var(--font);cursor:pointer;min-height:44px;padding:0 4px;text-decoration:underline}
form.inline{display:inline}

/* odznaki */
.odz{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap;background:#F3F4F6;color:var(--tekst2)}
.odz.nowe,.odz.akcent{background:var(--akcent-jasny);color:var(--akcent-ciemny)}
.odz.rabat{background:var(--rabat-tlo);color:var(--rabat);border-radius:6px}
.odz.ok{background:var(--ok-tlo);color:var(--ok)}
.odz.blad{background:var(--blad-tlo);color:var(--blad)}
.odz.uwaga{background:var(--uwaga-tlo);color:var(--uwaga)}
.zmiana{font-size:13px;font-weight:700;padding:2px 8px;border-radius:6px;background:#F3F4F6;color:var(--tekst2)}
.zmiana.dol{background:var(--akcent-jasny);color:var(--akcent-ciemny)}
.zmiana.gora{background:var(--rabat-tlo);color:var(--rabat)}

/* lista (siatka wierszy) */
.lista{overflow-x:auto}
.lista .wiersze{min-width:var(--min,760px)}
.lista .glowka,.lista .w{display:grid;grid-template-columns:var(--kol);gap:16px;align-items:center;padding:12px 20px}
.lista .glowka{font-size:12px;font-weight:600;color:var(--szary);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--linia);background:var(--pow2);border-radius:var(--r2) var(--r2) 0 0}
.lista .glowka a{color:inherit;text-decoration:none}.lista .glowka a:hover{text-decoration:underline}
.lista .w{border-bottom:1px solid #F3F4F6}
.lista .w:last-child{border-bottom:0}
.lista .w:hover{background:var(--pow2)}
.lista .w.wybrany{background:var(--akcent-tlo);box-shadow:inset 3px 0 0 var(--akcent)}
.lista .pusto{padding:40px 20px;text-align:center;color:var(--szary)}
.portal-btn{all:unset;cursor:pointer;display:flex;flex-direction:column;gap:2px;min-width:0;min-height:44px;justify-content:center}
.portal-btn:focus-visible{outline:3px solid #93C5FD;outline-offset:2px;border-radius:6px}
.portal-btn .nazwa{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px;overflow-wrap:anywhere}
.akcje{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap}
.pasek{flex:1;height:6px;background:var(--linia);border-radius:999px;overflow:hidden}
.pasek>i{display:block;height:100%;background:var(--akcent);border-radius:999px}
.dopas{display:flex;align-items:center;gap:8px}
.dopas b{font-size:13px;width:30px;text-align:right}
.cena{display:flex;flex-direction:column;gap:2px}
.cena .teraz{display:flex;align-items:baseline;gap:8px;font-size:16px;font-weight:700;white-space:nowrap;flex-wrap:wrap}
.cena s{font-size:12px;color:var(--szary)}

/* tabela klasyczna */
.tabela{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid #F3F4F6;vertical-align:top}
th{font-size:12px;font-weight:600;color:var(--szary);text-transform:uppercase;letter-spacing:.04em;background:var(--pow2);border-bottom:1px solid var(--linia);white-space:nowrap}
tr:last-child td{border-bottom:0}
td.liczba,th.liczba{text-align:right;font-variant-numeric:tabular-nums}

/* szuflada szczegółów (z prawej, nad listą) */
.szuflada{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--pow);border-left:1px solid var(--linia);box-shadow:-12px 0 32px rgba(17,24,39,.12);overflow-y:auto;z-index:20;display:none}
.szuflada:has([data-testid=szczegoly-portalu]){display:block}
.tlo-szuflady{display:none;position:fixed;inset:0;background:rgba(17,24,39,.35);z-index:19}
body:has(.szuflada [data-testid=szczegoly-portalu]) .tlo-szuflady{display:block}
/* szczegóły (panel boczny) */
.szczegoly{padding:20px;display:flex;flex-direction:column;gap:16px}
.mini3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mini3>div{background:var(--pow2);border-radius:var(--r);padding:10px 12px}
.mini3>div.rabat{background:var(--rabat-jasny)}
.mini3 .et{font-size:12px;color:var(--szary)}.mini3>div.rabat .et,.mini3>div.rabat b{color:var(--rabat)}
.mini3 b{font-size:16px}
.argumenty{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none}
.argumenty li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45}
.argumenty svg{flex:none;margin-top:2px}

/* karty cen */
.karty{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
a.kartac{display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:var(--r2);background:var(--pow);border:1px solid var(--linia);text-decoration:none;color:inherit;box-shadow:var(--cien)}
a.kartac:hover{border-color:#93C5FD}
a.kartac[aria-current=true]{border:2px solid var(--akcent);padding:15px}
.kartac .gora{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kartac .duza{font-size:22px;font-weight:700}

/* wykresy */
svg.wykres{display:block;width:100%;height:auto;overflow:visible}

/* komunikaty */
.komunikat{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r);background:var(--akcent-tlo);color:var(--akcent-ciemny);border:1px solid #BFDBFE;font-size:14px}
.komunikat.blad{background:var(--blad-tlo);color:var(--blad);border-color:#FCA5A5}
.pomoc{font-size:13px;color:var(--szary);line-height:1.5}
details.rozwin>summary{cursor:pointer;list-style:none;display:inline-flex}
details.rozwin>summary::-webkit-details-marker{display:none}
.formularz{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.formularz label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--szary)}
.formularz .caly{grid-column:1/-1}
.formularz label.chip{flex-direction:row;align-items:center;gap:8px;color:var(--tekst2);font-size:13px}
.htmx-request .ladowanie{opacity:1}
.ladowanie{opacity:0;transition:opacity .2s}
[hx-get].htmx-request,.htmx-request>.lista{opacity:.6;transition:opacity .15s}

/* logowanie */
.logowanie{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px}
.logowanie .karta{width:100%;max-width:380px;padding:28px;display:flex;flex-direction:column;gap:16px}
.logowanie label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--szary)}

/* telefon / wąski ekran */
@media (max-width:900px){
  .uklad{flex-direction:column}
  .menu{position:sticky;top:0;z-index:10;height:auto;flex:none;flex-direction:row;flex-wrap:nowrap;align-items:center;padding:6px 8px;gap:2px;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
  .menu::-webkit-scrollbar{display:none}
  .menu .logo{padding:0 6px 0 2px;flex:none}
  .menu .logo{font-size:0;gap:0}
  .menu .logo span{font-size:15px}
  .segmenty{flex-wrap:nowrap;overflow-x:auto;max-width:100%;scrollbar-width:thin}
  .segmenty a,.segmenty button{flex:none;white-space:nowrap}
  .naglowek>.segmenty{width:100%}
  .menu a.poz{padding:8px 10px;font-size:13px;flex:none;white-space:nowrap}
  .menu a.poz svg{display:none}
  .menu .stopka{display:none}
  .tresc{padding:16px 16px 40px;gap:16px}
  h1{font-size:22px}
  .kafelki{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kafel{padding:12px 14px}
  .kafel .liczba{font-size:22px}
  .uklad-szczegoly>.boczna{position:static;max-width:none}
  .tabela table.mob-karty,.tabela table.mob-karty tbody,.tabela table.mob-karty tr,.tabela table.mob-karty td{display:block;width:auto}
  .tabela table.mob-karty tr:first-child{display:none}
  .tabela table.mob-karty tr{border-bottom:1px solid var(--linia);padding:10px 4px}
  .tabela table.mob-karty td{border:0;padding:4px 12px;text-align:left;max-width:none!important;min-width:0!important}
  .tabela table.mob-karty td[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;color:var(--szary);text-transform:uppercase;letter-spacing:.04em}
  .tabela table.mob-karty td.liczba{text-align:left}
  .segmenty,.menu{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .lista .wiersze{min-width:0}
  .lista .glowka{display:none}
  .lista .w{grid-template-columns:1fr;gap:8px;padding:14px 16px}
  .lista .w .akcje{justify-content:flex-start}
  .lista .w svg.wykres{max-width:200px}
}