/* Panel klienta FORMEE. Układ jak w generatorze: górny pasek, pasek modułów, nagłówek budowy. */
:root{
  --tlo:#f3f4f7;--karta:#fff;--tekst:#22272b;--slaby:#687080;--linia:#e3e5ec;--miekki:#f0f2f6;
  --marka:#0d0e10;--akcent:#3a3f46;--akcent-tlo:#eceef1;--logo:#e3fd3e;--pasek:#2b2f35;--pasek-on:#3c4149;--link:#2b2f35;
  --ok:#2e7d4f;--ok-tlo:#e5f2e8;--zle:#c0392b;--zle-tlo:#fbe9e7;--uwaga:#9a6000;--uwaga-tlo:#fff3dc;--pin:#e3760c;
  --r:8px;--cien:0 1px 2px rgba(16,24,40,.05),0 2px 8px rgba(16,24,40,.05);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--tlo);color:var(--tekst)}
a{color:var(--link)}
button,input,select,textarea{font:inherit;color:inherit}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}

/* szkielet */
.app{display:grid;grid-template-rows:48px 1fr;grid-template-columns:72px 1fr;height:100vh}
.app.bez-paska{grid-template-columns:1fr}
.gora{grid-column:1/-1;background:var(--marka);color:#fff;display:flex;align-items:center;gap:6px;padding:0 16px;min-width:0}
.gora .logo{display:flex;align-items:center;margin-right:14px}.gora .logo img{display:block;height:22px;width:auto}
.gora .menu{display:flex;align-self:stretch}
.gora .menu a{color:#fff;opacity:.72;text-decoration:none;font-weight:500;padding:0 12px;display:flex;align-items:center;border-bottom:3px solid transparent}
.gora .menu a.on{opacity:1;border-bottom-color:var(--logo)}
.gora .okruszki{display:flex;align-items:center;gap:6px;margin-left:10px;min-width:0;opacity:.95;font-size:13.5px}
.gora .okruszki .sep{opacity:.5}
.gora .sp{flex:1}
.wybor{position:relative}
.wybor>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.28);border-radius:6px;padding:4px 10px;white-space:nowrap;max-width:420px;overflow:hidden;text-overflow:ellipsis}
.wybor>summary::-webkit-details-marker{display:none}
.wybor>summary:after{content:"▾";font-size:11px;opacity:.8}
.wybor[open]>summary{background:rgba(255,255,255,.1)}
.lista-wyboru{position:absolute;top:calc(100% + 6px);left:0;z-index:20;background:var(--karta);color:var(--tekst);border:1px solid var(--linia);border-radius:var(--r);box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:280px;max-height:60vh;overflow:auto;padding:6px}
.lista-wyboru.prawo{left:auto;right:0}
.lista-wyboru a,.lista-wyboru button{display:block;width:100%;text-align:left;padding:7px 10px;border-radius:6px;text-decoration:none;color:inherit;background:none;border:0}
.lista-wyboru a:hover,.lista-wyboru button:hover{background:var(--miekki)}
.lista-wyboru .on{background:var(--akcent-tlo)}
.lista-wyboru .opis{display:block;color:var(--slaby);font-size:12px}
.lista-wyboru hr{border:0;border-top:1px solid var(--linia);margin:6px 0}
.osoba>summary{border-color:transparent;font-size:13px}

/* pasek modułów */
.pasek{background:var(--pasek);display:flex;flex-direction:column;padding-top:6px;overflow-y:auto}
.pasek a{color:#c3c7cd;text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 2px 9px;font-size:11.5px;border-left:3px solid transparent;position:relative}
.pasek a svg.i{width:20px;height:20px}
.pasek a:hover{color:#fff;background:rgba(255,255,255,.04)}
.pasek a.on{color:#fff;background:var(--pasek-on);border-left-color:var(--logo)}
.pasek a.wkrotce{opacity:.55}
.pasek .licznik{position:absolute;top:6px;right:14px;background:var(--pin);color:#fff;border-radius:99px;font-size:10px;padding:0 5px;line-height:15px}
.pasek .rh{color:#8a9099;font-size:10px;letter-spacing:.08em;text-transform:uppercase;text-align:center;margin:10px 0 4px;border-top:1px solid #434850;padding-top:10px}

main{overflow:auto;min-width:0;display:flex;flex-direction:column}
.naglowek{background:var(--karta);border-bottom:1px solid var(--linia);padding:12px 20px 12px 18px;display:flex;gap:16px;align-items:flex-start}
.naglowek .sekcja{color:var(--akcent);font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.naglowek h1{font-size:18px;margin:2px 0 2px}
.naglowek .pod{color:var(--slaby);font-size:13px}
.naglowek .akcje{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.tresc{padding:16px 20px 32px 18px}
.tresc.pelna{padding:0;flex:1;min-height:0;display:flex}

/* elementy */
.karta{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);box-shadow:var(--cien);padding:16px;margin-bottom:16px}
.karta h3{margin:0 0 12px;font-size:15px}
h2{font-size:15px;margin:20px 0 10px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:6px;border:1px solid var(--linia);background:var(--karta);color:var(--tekst);text-decoration:none;cursor:pointer;white-space:nowrap;line-height:1.3}
.btn:hover{border-color:#c9ccd6}
.btn.pri{background:var(--marka);border-color:var(--marka);color:#fff}
.btn.akc{background:var(--akcent);border-color:var(--akcent);color:#fff}
.btn.sm{padding:3px 9px;font-size:13px}
.btn.niebezp{color:var(--zle);border-color:#efc2bc}
.btn.ikona{padding:4px 7px}
.btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.f{border:1px solid var(--linia);border-radius:6px;padding:6px 10px;background:var(--karta);min-width:0}
.f:focus,.btn:focus-visible{outline:2px solid var(--akcent-tlo);border-color:var(--akcent)}
label.e{display:block;font-size:12.5px;color:var(--slaby);margin-bottom:4px}
.wiersz{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.wiersz .pole{flex:1 1 180px}
.wiersz .pole .f{width:100%}
form.wbudowany{display:inline}
.chip{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;background:var(--miekki);white-space:nowrap}
.chip.ok{background:var(--ok-tlo);color:var(--ok)}.chip.zle{background:var(--zle-tlo);color:var(--zle)}
.chip.uwaga{background:var(--uwaga-tlo);color:var(--uwaga)}.chip.info{background:var(--akcent-tlo);color:var(--akcent)}
.wersja{display:inline-block;min-width:22px;text-align:center;padding:0 7px;border-radius:99px;background:var(--akcent-tlo);color:var(--akcent);font-size:12px;font-weight:600}
.typ{display:inline-block;min-width:38px;text-align:center;padding:2px 5px;border-radius:4px;color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.03em}
.slaby{color:var(--slaby)} .male{font-size:12.5px}
.komunikat{padding:10px 14px;border-radius:6px;margin-bottom:14px;border:1px solid var(--linia);background:var(--karta)}
.komunikat.blad{border-color:#efc2bc;background:var(--zle-tlo);color:var(--zle)}
.komunikat.ok{border-color:#bfe0c9;background:var(--ok-tlo);color:var(--ok)}
.pusto{padding:48px 20px;text-align:center;color:var(--slaby)}
.pusto svg.i{width:34px;height:34px;opacity:.6;margin-bottom:8px}
.kod{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all}
.segment{display:inline-flex;border:1px solid var(--linia);border-radius:6px;overflow:hidden;background:var(--karta)}
.segment a{padding:5px 12px;text-decoration:none;color:var(--tekst);border-right:1px solid var(--linia);font-size:13.5px}
.segment a:last-child{border-right:0}
.segment a.on{background:var(--akcent);color:#fff}
.segment a span{opacity:.7;font-size:12px;margin-left:4px}

/* tabele */
.tabela{overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:12.5px;color:var(--slaby);font-weight:600;text-align:left;padding:8px 10px;background:var(--miekki);border-bottom:1px solid var(--linia);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--linia);vertical-align:middle}
td.num,th.num{text-align:right;white-space:nowrap}
tr.wyb td{background:var(--akcent-tlo)}
tr.klik:hover td{background:#f7f8fb}
.nazwa-pliku{display:flex;align-items:center;gap:10px}
.nazwa-pliku a{color:var(--tekst);text-decoration:none;font-weight:600}
.nazwa-pliku a:hover{color:var(--akcent)}

/* Dane: eksplorator */
.eks{display:grid;grid-template-columns:250px 1fr 300px;flex:1;min-height:0;background:var(--karta)}
.eks .drzewo{border-right:1px solid var(--linia);padding:10px 0;overflow:auto}
.eks .drzewo a{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 26px;color:var(--tekst);text-decoration:none;border-left:3px solid transparent}
.eks .drzewo a.korzen{padding-left:14px;font-weight:600}
.eks .drzewo a.on{background:var(--akcent-tlo);border-left-color:var(--akcent)}
.eks .drzewo a .n{margin-left:auto;color:var(--slaby);font-size:12px}
.eks .drzewo a.pusty{color:var(--slaby)}
.eks .drzewo .odstep{border-top:1px solid var(--linia);margin:8px 0}
.eks .lista{overflow:auto;border-right:1px solid var(--linia);min-width:0}
.eks .lista .hd{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--linia)}
.eks .lista .hd .sciezka{font-weight:600}
.eks .szczegoly{padding:14px;overflow:auto}
.eks .szczegoly h4{margin:0 0 10px;font-size:14px;word-break:break-all}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px;margin-bottom:12px}
.kv>span:nth-child(odd){color:var(--slaby)}
.wer{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--linia);font-size:13px}

/* Rysunki: przeglądarka */
.przeg{display:grid;grid-template-columns:270px 1fr;flex:1;min-height:0}
.przeg .arkusze{background:var(--karta);border-right:1px solid var(--linia);display:flex;flex-direction:column;min-height:0}
.przeg .arkusze .hd{padding:10px;border-bottom:1px solid var(--linia);display:flex;flex-direction:column;gap:8px}
.przeg .arkusze .lst{overflow:auto}
.przeg .arkusze a{display:flex;gap:10px;align-items:center;padding:8px 10px;color:var(--tekst);text-decoration:none;border-left:3px solid transparent;border-bottom:1px solid var(--linia)}
.przeg .arkusze a.on{background:var(--akcent-tlo);border-left-color:var(--akcent)}
.przeg .arkusze img{width:64px;height:45px;object-fit:contain;background:#fff;border:1px solid var(--linia);border-radius:3px}
.przeg .widok{display:flex;flex-direction:column;min-width:0;min-height:0}
.przeg .pasek-n{background:var(--karta);border-bottom:1px solid var(--linia);padding:8px 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.przeg .pasek-n .tyt{font-weight:600;margin-right:6px}
.przeg .plotno{flex:1;background:#d8dbe2;overflow:hidden;position:relative;cursor:grab;touch-action:none}
.przeg .plotno img{position:absolute;left:0;top:0;transform-origin:0 0;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18);user-select:none;-webkit-user-drag:none;max-width:none}
.grupa-btn{display:inline-flex}
.grupa-btn .btn{border-radius:0;margin-left:-1px}
.grupa-btn .btn:first-child{border-radius:6px 0 0 6px;margin-left:0}
.grupa-btn .btn:last-child{border-radius:0 6px 6px 0}

/* Aktywność */
.akt-dzien{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--slaby);margin:16px 0 4px;padding-bottom:6px;border-bottom:1px solid var(--linia)}
.akt-dzien:first-of-type{margin-top:4px}
.akt{display:flex;gap:12px;align-items:center;padding:8px 4px;border-bottom:1px solid var(--miekki)}
.akt .g{color:var(--slaby);width:44px;font-variant-numeric:tabular-nums}
.akt .ik{color:var(--akcent)}
.akt .kto{color:var(--slaby);font-size:12.5px}

/* strony bez budowy */
.waski{max-width:420px;margin:48px auto}
.siatka-budow{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.budowa-karta{display:block;text-decoration:none;color:inherit;background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);box-shadow:var(--cien);padding:14px 16px}
.budowa-karta:hover{border-color:var(--akcent)}
.budowa-karta b{display:block;font-size:15px;margin:2px 0}

@media (max-width:900px){
  .app{grid-template-columns:1fr;grid-template-rows:48px auto 1fr}
  .pasek{flex-direction:row;overflow-x:auto;padding:0}
  .pasek a{padding:8px 10px;border-left:0;border-bottom:3px solid transparent;min-width:72px}
  .pasek a.on{border-bottom-color:var(--logo)}
  .pasek .rh{display:none}
  .gora .menu,.gora .okruszki .klient,.gora .okruszki .sep{display:none}
  .app>*{min-width:0}
  .gora{gap:4px;padding:0 10px}
  .gora .logo{margin-right:4px}
  .gora .okruszki{flex:1 1 auto;margin-left:0;min-width:0}
  .gora .okruszki .wybor{min-width:0;flex:0 1 auto}
  .wybor>summary{max-width:100%;overflow:hidden}
  .gora .sp{flex:0 0 0}
  .eks .lista th:nth-child(4),.eks .lista td:nth-child(4){display:none}
  .nazwa-pliku a{word-break:normal;white-space:nowrap}
  .gora .osoba{flex:0 1 96px;min-width:0}
  .gora .osoba>summary{max-width:96px;overflow:hidden;text-overflow:ellipsis;padding:4px 6px}
  .eks,.przeg{grid-template-columns:1fr}
  .eks .drzewo,.przeg .arkusze{max-height:220px;border-right:0;border-bottom:1px solid var(--linia)}
  .eks .szczegoly{border-top:1px solid var(--linia)}
  .przeg .plotno{min-height:60vh}
  .naglowek{flex-wrap:wrap}
  .naglowek .akcje{margin-left:0}
}

/* formularze i strony kont (wspólne klasy starszych szablonów) */
.karta label:not(.e){display:block;font-size:12.5px;color:var(--slaby);margin-bottom:4px}
.karta input[type=text],.karta input[type=email],.karta input[type=password],.karta select,.karta textarea{border:1px solid var(--linia);border-radius:6px;padding:7px 10px;background:var(--karta);width:100%;min-width:0}
.karta input[type=file]{max-width:100%}
.karta p{margin:0 0 12px}
button,.przycisk{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:6px;border:1px solid var(--marka);background:var(--marka);color:#fff;cursor:pointer;text-decoration:none;line-height:1.3}
button.drugi,.przycisk.drugi{background:var(--karta);color:var(--tekst);border-color:var(--linia)}
button.maly{padding:3px 9px;font-size:13px}
button.niebezp{background:var(--karta);color:var(--zle);border-color:#efc2bc}
.lista-wyboru button{color:inherit}
button.btn{background:var(--karta);color:var(--tekst);border-color:var(--linia)}
button.btn.akc{background:var(--akcent);border-color:var(--akcent);color:#fff}
button.btn.pri{background:var(--marka);border-color:var(--marka);color:#fff}
button.btn.niebezp{color:var(--zle);border-color:#efc2bc}
.znak{display:inline-block;padding:1px 8px;border-radius:99px;font-size:12px;background:var(--miekki);white-space:nowrap}
.znak.ok{background:var(--ok-tlo);color:var(--ok)} .znak.ostrz{background:var(--uwaga-tlo);color:var(--uwaga)} .znak.slaby{color:var(--slaby)}
form.wiersz{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
form.wiersz .pole{flex:1 1 180px}
.akcje-wiersz{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
h1.strona{font-size:20px;margin:0 0 4px}
p.pod{color:var(--slaby);margin:0 0 16px}
.tabela table{background:var(--karta);border:1px solid var(--linia);border-radius:var(--r)}

/* Zespół: rola do zmiany w tej samej kolumnie */
.rola-edycja { display: flex; gap: 6px; align-items: center; }
.rola-edycja select.f { width: auto; min-width: 170px; padding: 5px 8px; font-size: 13px; }
.skrot{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* Projekty i Klienci (strony główne, jak w generatorze) */
.dom{max-width:1400px}
.dom-hd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:4px 0 18px}
.dom-hd h1{font-size:22px;margin:0 8px 0 0}
.dom-hd input[type=search].f{flex:0 1 340px;min-width:180px}
.chipy{display:flex;gap:5px;flex-wrap:wrap;margin:6px 0}
.grupa-projektow{margin-bottom:22px}
.grupa-projektow h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 10px}
.grupa-projektow h3 a{color:inherit;text-decoration:none}.grupa-projektow h3 a:hover{text-decoration:underline}
.siatka-projektow{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:16px}
.pkarta{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--karta);border:1px solid var(--linia);border-radius:var(--r);box-shadow:var(--cien);overflow:hidden}
.pkarta:hover{border-color:var(--akcent);box-shadow:0 4px 14px rgba(16,24,40,.1)}
.pk-gora{display:flex;align-items:center;gap:8px;padding:16px 14px;background:linear-gradient(135deg,#0d0e10,#3a3f46);color:#fff;font-size:16px}
.pk-gora svg.i{width:22px;height:22px;color:var(--logo)}
.pk-gora.brak{background:linear-gradient(135deg,#6b7078,#8d929a)}
.pk-tresc{padding:10px 14px 12px}
.pk-nazwa{font-weight:600}
.pk-stopka{color:var(--slaby);font-size:12px}
.siatka-klientow{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;margin-bottom:16px}
.klient-karta{margin:0}.klient-karta a{color:inherit;text-decoration:none}
.klient-karta .wiersz .btn{color:var(--tekst)}.klient-karta .wiersz .btn.akc{color:#fff}
.zakladki{display:flex;gap:2px;border-bottom:1px solid var(--linia);margin:-6px 0 16px}
.zakladki a{padding:8px 14px;text-decoration:none;color:var(--slaby);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px}
.zakladki a.on{color:var(--tekst);border-bottom-color:var(--akcent)}
.zakladki .n{margin-left:6px;font-size:12px;background:var(--miekki);border-radius:99px;padding:0 7px}
.gora .okruszki .klient a{color:#fff;text-decoration:none}.gora .okruszki .klient a:hover{text-decoration:underline}

/* czarno-grafitowa wersja: akcenty limonkowe, aktywne zakładki i zaznaczenia grafitowe */
.btn.akc:hover,button.btn.akc:hover{background:#2b2f35;border-color:#2b2f35}
.btn.pri:hover,button.btn.pri:hover,button:not(.btn):not(.niebezp):not(.drugi):hover{background:#26292e;border-color:#26292e}
.zakladki a.on,.gora .menu a.on{border-bottom-color:var(--logo)}
.zakladki a.on{border-bottom-color:var(--akcent)}
.eks .drzewo a.on,.przeg .arkusze a.on{border-left-color:var(--logo)}
a:focus-visible,button:focus-visible,.f:focus{outline:2px solid #9aa86a;outline-offset:1px}