/* ============================================================================
12-uzytkownicy.css — kartoteka UŻYTKOWNICY: osoby (dział → funkcja → osoba) i macierz uprawnień
----------------------------------------------------------------------------
Wydzielone z arkusza-łaty 28-uzupelnienie-koncowe.css (K17, v14) — cała kartoteka w jednym miejscu,
ładowana zaraz po 12-kartoteki.css (szkielet tabel kartotek).
============================================================================ */
/* --- DEFINICJA ROLI — WIERSZ ROZWIJANY W TABELI -----------------------------
Droga do tego stanu: macierz z nagłówkami obróconymi o 90° (nieczytelna),
potem osobne okno modalne (rozbijało zarządzanie na trzy miejsca). Teraz rola
jest wierszem wysuwanym POD osobą, w tej samej tabeli. Siedzi w nim wszystko:
dwa ustawienia dostępu, prawa zapisu i zasady pisane po ludzku. */
/* Klucz techniczny pod etykietą — szary i mniejszy, bo to informacja dla admina,
nie element do klikania. */
/* Pola uprawnień: siatka, która sama dobiera liczbę kolumn do szerokości bloku.
Każde pole ma słowo obok — bez tego nie da się ich odróżnić. */
/* Zasady po ludzku — te same treści, które wcześniej były TYLKO w popupie „?". */
/* Nagłówek bierze kolor tekstu, NIE `--ok`/`--danger`: zielony na jasnym tle daje
4,1:1 przy 10 px, czyli poniżej normy 4,5:1. Znaczenie i tak niosą znaczki
✓ / ✕ przy pozycjach listy — tam kolor zostaje. */
/* --- KARTOTEKA UŻYTKOWNICY: dział → funkcja → osoba ------------------------
PRZEBUDOWA 13.08.2026. Poprzednio wiersz działu był JEDNĄ komórką na całą
szerokość, a układ w jego środku robił flex — dlatego pola i kosz działu
stały gdzie indziej niż kolumny wierszy funkcji i osoby. Zmierzone w oknie
1254 px: kosz działu kończył się na x=1017, kosz funkcji na x=1212 (195 px
różnicy, dwa osobne słupki ikon), a treść wiersza osoby była dociągnięta do
prawej, więc od krawędzi kolumny (634,6) do napisu „Aktywny" (799,1) ciągnęła
się dziura szeroka na 164 px. Teraz WSZYSTKIE trzy poziomy rysują TE SAME
pięć kolumn, a różni je tło, grubość tekstu i wcięcie pierwszej kolumny.
Wyściółka wierszy: pionowo var(--s-1). Wysokość wiersza wyznacza dopiero
.rg-poziom przez `min-height` z tokenu — wcześniej stało tu twarde zero
i wiersz osoby miał 33 px, czyli nazwisko sklejone z mailem bez oddechu. */
.uzy-master > tbody > tr > td { padding: var(--s-1); }
.uzy-grupa > td { background: var(--surface-2); border-top: 1px solid var(--line-strong); }
/* Poziomy układ wnętrza pierwszej kolumny. NIGDY flex na samym
— to kasuje
display:table-cell, komórka wypada z układu tabeli i colspan przestaje
działać. Wiersz działu jest o jeden stopień wyższy (var(--h-row) zamiast
var(--h-control)) — to on otwiera grupę i ma prawo ważyć więcej. */
.rg-poziom { display: flex; align-items: center; gap: var(--s-2); min-width: 0; min-height: var(--h-control); }
.uzy-grupa .rg-poziom { min-height: var(--h-row); }
/* E3 (27.09.2026): przy oknie 1280 kolumna działu ma 178 px i licznik „2 funkcje · 2 osoby” ucinał się o 1 px.
Strzałka stoi bliżej kropki koloru (4 px zamiast 8) — odstęp kropka–nazwa bez zmian. */
.uzy-grupa .rg-poziom { gap: var(--s-1); }
.uzy-grupa .rg-poziom > .dept-color { margin-right: var(--s-1); }
/* Dwie linijki opisu: nazwa u góry, drobny podpis pod spodem (funkcja: ile osób,
osoba: e-mail). Ten sam wzór na obu poziomach, żeby wiersze czytało się tak samo. */
.rg-etykieta { display: block; min-width: 0; }
.rg-etykieta > strong { display: block; overflow: hidden; color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); text-overflow: ellipsis; white-space: nowrap; }
input.uzy-grupa-nazwa:not([type="checkbox"]):not([type="radio"]) { flex: 0 1 240px; min-width: 0; padding-left: var(--s-1); border-color: transparent; background: transparent; font-size: var(--t-md); font-weight: var(--w-bold); }
input.uzy-grupa-nazwa:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--line); background: var(--surface); }
input.uzy-grupa-nazwa:not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--accent-strong); background: var(--surface); }
.uzy-grupa-nazwa-stala { flex: 0 1 240px; padding-left: var(--s-1); color: var(--text-muted); font-size: var(--t-md); font-weight: var(--w-bold); }
.uzy-grupa-licznik { flex: none; color: var(--text-muted); font-size: var(--t-xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Pole „nowa funkcja" stoi w paśmie scalonych kolumn reguł (patrz .rg-pasmo).
`margin-left: auto` ZDJĘTE 13.08.2026 — to ono wypychało pole i przycisk na
prawą krawędź wiersza działu, przez co nie stały pod żadną kolumną. */
/* `.uzy-nowa-rola` USUNIETE 17.08.2026 — pole „Nazwa nowej funkcji…" wisialo puste
w kazdym wierszu dzialu. Nazwe pyta teraz okienko po klinieciu „+" w kolumnie akcji.
Szczegoly w komentarzu przy `wierszDzialu` w public/js/widoki/. */
/* Ujednolicenie 11.08.2026 — próbka koloru działu jest klikalna (``, public/js/widoki/), a nie miała żadnej reakcji. Wzmocniona
obwódka wystarcza: wnętrze niesie wybrany kolor i nie wolno go przykryć.
Waga 0,4,1 — musi dorównać regule bazowej z tymi samymi `:not()`. */
input.dept-color:not([type="checkbox"]):not([type="radio"]) { flex: none; width: 18px; height: 18px; min-height: 0; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r-pill); cursor: pointer; transition: border-color var(--szybko); }
input.dept-color:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--line-strong); }
input.dept-color::-webkit-color-swatch-wrapper { padding: 0; }
input.dept-color::-webkit-color-swatch { border: 0; border-radius: var(--r-pill); } :root[data-ui="tablet"] input.dept-color:not([type="checkbox"]):not([type="radio"]) { --dept-d: 18px; box-sizing: content-box; width: var(--dept-d); height: var(--dept-d); padding: calc((var(--h-control) - var(--dept-d)) / 2); border: 0; margin: calc((var(--h-control) - var(--dept-d)) / -2); margin-right: calc(var(--s-1) + (var(--h-control) - var(--dept-d)) / -2); } :root[data-ui="tablet"] input.dept-color::-webkit-color-swatch { border: 1px solid var(--line-strong); } /* tablet: pole dotyku 44 px, kropka nadal 18 px */
/* Ujednolicenie 11.08.2026 — dodane `transition` na tło i kolor: strzałka miała
płynny obrót (reguła niżej), ale samo podświetlenie guzika wskakiwało skokiem. */
.uzy-rozwin { display: grid; place-items: center; flex: none; width: var(--h-control-sm); height: var(--h-control-sm); padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: background var(--szybko), color var(--szybko); }
.uzy-rozwin:hover { background: var(--surface); color: var(--text); }
.uzy-rozwin .icon { width: var(--s-4); height: var(--s-4); transition: transform var(--szybko); }
.uzy-rozwin[aria-expanded="true"] .icon { transform: rotate(180deg); }
/* TABELA OSÓB: wiersz działu, pod nim funkcje, pod funkcją jej ludzie.
`table-layout: fixed` dołożone 13.08.2026 razem z wyprowadzeniem kratek do
zakładki „Uprawnienia". Zmierzone: po ich zabraniu zostały cztery kolumny,
a nadwyżkę szerokości Chrome rozdzielał po równo na dwie listy — rosły do
691 px każda i zieleń pustego miejsca ciągnęła się przez pół ekranu.
Przy układzie stałym listy trzymają swoje 220 px, a całą nadwyżkę bierze
kolumna z nazwiskiem (jedyna bez podanej szerokości) — czyli ta, od której
zaczyna się czytanie wiersza.
GEOMETRIA KOLUMN W JEDNYM MIEJSCU (13.08.2026). Trzy zmienne niżej są jedynym
źródłem szerokości tej tabeli — używa ich i nagłówek, i pasmo scalonych
kolumn, więc nie da się ich rozjechać zmieniając jedną liczbę w połowie pliku.
--uzy-kol-regula 220 px — zmierzone: „wszystko + kalkulator" w liście mieści
się w jednej linii, węższa kolumna zaczyna ucinać;
--uzy-kol-stan 112 px — zmierzone: „Nieaktywny" ma 69 px przy 12 px/600,
plus kropka 8 + odstęp 8 + wyściółka 2×4 = 97 px;
--uzy-kol-akcja złożone z tokenów: dwa przyciski-ikony + odstęp między
nimi + wyściółka boczna. Ta sama szerokość na KAŻDYM
poziomie, żeby kosze stały w jednym słupku. */
/* ⛔ SZEROKOSCI KOLUMN — PRZELICZONE Z POMIARU 17.08.2026.
Tabela ma `table-layout: fixed`, wiec kolumny „Status", obie listy i akcje maja
SZTYWNE szerokosci, a pierwsza kolumna (dzial - funkcja - osoba) dostaje TO, CO ZOSTANIE.
Przy oknie 1000 px tabela ma 716 px, wiec przy starych wartosciach (2x220 + 112 + 86)
na nazwy zostawalo **78 px** — nazwy funkcji byly ucinane do dwoch liter
(„Kierownik Handlowcow" -> „Ki"). Wczesniej tego nie bylo widac, bo nazwa byla
zwyklym tekstem i po prostu znikala pod wielokropkiem; dopiero pole do poprawiania
nazwy pokazalo, jak malo tam miejsca.
ZMIERZONE, nie zgadniete (`getBoundingClientRect` na probniku z tym samym fontem):
· najdluzsza nazwa funkcji „Kierownik Handlowcow" = 143 px (+ ikona 14 + wciecie)
· najdluzsza opcja listy „wszystko + kalkulator" = 125 px (+ strzalka i wyscielenie)
· najdluzszy podpis „11 regul - 1 osoba" = ok. 100 px
Kolumna „Status" zeszla ze 112 na 84 px, bo zmierzona najszersza tresc („Aktywny"
z kropka) to 65 px, a naglowek 35 px — 112 px bylo tam po prostu niepotrzebne.
Listy zeszly z 220 na 166 px: po zwezeniu maja 133 px na tekst przy najdluzszej
opcji 125 px, czyli 8 px zapasu — sprawdzone probnikiem w przegladarce, nie na oko.
Nowy podzial przy 716 px: 166 + 166 + 84 + 86 = 502, na nazwy zostaje **214 px**.
Najdluzsza nazwa („Kierownik Handlowcow") potrzebuje 157 px razem z ikona — miesci sie
z zapasem. Przy szerszym oknie pierwsza kolumna rosnie sama. */
/* ⛔ PRZELICZONE NA CZTERY LISTY — 18.08.2026.
Doszly dwie kolumny wyboru („Ktore konstrukcje widzi", „Normy"), ktorych wczesniej
nie bylo w ogole. Stara geometria (2 x max(166px, 23%)) przy czterech kolumnach
nie miesci sie w waskim oknie: 4 x 166 + 84 + 86 = 834 px, a tabela przy oknie
1000 px ma 716 px — pierwsza kolumna (nazwy) zeszlaby do ZERA.
Dlatego:
· minimum listy zeszlo ze 166 na 148 px, a udzial z 23% na 17%;
· kolumna „Normy" dostala WLASNA, mniejsza szerokosc: stoi w niej najwyzej
napis „wszystkie normy", wiec nie ma po co dawac jej tyle, co calym zdaniom;
· napisy w listach zostaly skrocone tak, zeby miescily sie w 148 px, a pelne
wyjasnienie przenieslo sie do dymka nad lista i nad naglowkiem kolumny.
Wyliczenie przy 716 px: 3 x 148 + 118 + 84 + 86 = 732 — nadal o 16 px za duzo,
wiec szerokosci sa SPRAWDZANE POMIAREM w przegladarce zaraz po tej zmianie,
a nie przyjmowane na wiare. Wynik pomiaru i ewentualna korekta: patrz nizej. */
.rg-tabela { --uzy-kol-regula: 168px; --uzy-kol-norma: 124px; --uzy-kol-stan: 76px; --uzy-kol-akcja: calc(var(--h-ikona) * 2 + var(--s-2) + var(--s-3) * 2); width: 100%; border-collapse: collapse; table-layout: fixed; }
/* ⛔ KOLUMNY USTAWIEN ROSNA RAZEM Z OKNEM — poprawione 17.08.2026.
BYLO: sztywne 166 px. Poniewaz `table-layout: fixed` daje pierwszej kolumnie
CALA reszte, przy szerokim oknie wygladalo to tak:
okno 1600 px -> tabela 1314, pierwsza kolumna **812 px**, a pole nazwy w srodku
tylko 166 px, czyli **646 px PUSTKI**. Nazwiska lgnely do lewej krawedzi,
„Status", „Ktore projekty widzi" i „Co widzi z pieniedzy" do prawej, a przez
kazdy wiersz szedl pusty pas przez pol ekranu. Wzrok nie laczyl „Kierownik
Produkcji" z „ceny zakupu" — wlasciciel: „naglowek jest rozjechany wizualnie".
TERAZ: `max(166px, 23%)`. 166 px to zmierzone minimum (najdluzsza opcja
„wszystko + kalkulator" = 125 px + strzalka i wyscielenie), a 23% sprawia, ze przy
szerokim oknie WSZYSTKIE TRZY szerokie kolumny rosna rowno i pusty pas znika sam.
Sprawdzone: tabela 716 -> 166/166, na nazwy 214 (waskie okno bez zmian);
tabela 1314 -> 381/381, na nazwy 381 — kolumny rowne, wiersz czyta sie jako calosc.
⛔ NIE OBCINAC TABELI przez `max-width`. Probowalem — wiersze owszem sie sciesnily,
ale pasek nad tabela (zakladki, szukajka, „+ Osoba") NIE jest tabela i zostal
na pelnej szerokosci panelu. Przycisk „+ Osoba" wisial wtedy 300 px za prawa
krawedzia tabeli i wygladalo to gorzej niz problem, ktory naprawialem. */
/* ⛔⛔ FAKT ZMIERZONY, NIE ZAŁOŻONY — 18.08.2026, próbnik z tymi samymi arkuszami.
Przy `table-layout: fixed` przeglądarka **IGNORUJE** `max(168px, 15%)` ORAZ
`calc((100% - 286px) * 0.28)` na szerokości kolumny — w obu przypadkach dzieli
wolne miejsce PO RÓWNO. Cztery kolumny dostawały po 179 px, choć każda miała
podaną inną szerokość. DZIAŁAJĄ wyłącznie gołe piksele i gołe procenty.
⛔ To znaczy, że opis WYŻEJ (z 17.08.2026) mówi o szerokościach, których na
ekranie NIGDY NIE BYŁO — `max(166px, 23%)` też był ignorowany. Zostawiam tamten
akapit jako historię, ale liczby 166/381 z niego są nieprawdziwe. Nie liczyć
nic na ich podstawie.
GEOMETRIA, KTÓRA NAPRAWDĘ OBOWIĄZUJE:
· status, normy i akcje — twarde piksele, nie ruszają się;
· nazwa i trzy listy — dzielą resztę PO RÓWNO (domyślne zachowanie
przeglądarki). Przy szerokim oknie wygląda to dobrze i nie zostaje
pusty pas, czyli cel poprawki z 17.08.2026 jest utrzymany.
Kłopot jest tylko przy WĄSKIM oknie: równy podział daje 179 px, a wtedy ucina
się nazwa funkcji („Kierownik Handlowcow" = 157 px + 32 px wcięcia wiersza)
i adres e-mail (143 px + 48 px wcięcia) — obie dokładnie o 16 px. Stąd media
query niżej: poniżej 1280 px kolumna z nazwami dostaje twarde 200 px,
a listy dzielą resztę.
ZMIERZONY WYNIK KOŃCOWY (kto / status / projekty / konstrukcje / normy /
pieniądze / akcje):
okno 1000 px → 200 / 76 / 173 / 173 / 120 / 173 / 86 — ZERO uciętych napisów
okno 1600 px → 329 / 76 / 329 / 329 / 124 / 329 / 86 — ZERO uciętych napisów
Ikony akcji przy obu szerokościach stoją w jednym słupku (x = 961 px),
a lista w wierszu osoby zaczyna się na tej samej pionowej linii co lista
„Które projekty widzi" w wierszu funkcji (x = 280 px przy 1000 px). */
.rg-tabela th.rg-lista.rg-norma { width: var(--uzy-kol-norma); }
.rg-tabela th.rg-stan { width: var(--uzy-kol-stan); }
/* K12 (v14): 1279 to WYJĄTEK od kanonu 600/820/980/1180 — próg 1180 dałby przy 1181–1279 px równy podział
kolumn zamiast stałych 200 / 120 px (inny wygląd tabeli przy 1279 px), a 1280 zmieniłby tabelę przy 1280 px.
Opis kanonu: 00-tokens.css. */
@media (max-width: 1279px) {
.rg-tabela { --uzy-kol-norma: 120px; }
.rg-tabela th.rg-kto { width: 200px; }
}
.rg-tabela th { padding: var(--s-2) var(--s-1); border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-2xs); font-weight: var(--w-bold); text-align: left; white-space: nowrap; }
.rg-tabela td { padding: var(--s-1) var(--s-1); border-bottom: 1px solid var(--line); vertical-align: middle; }
.rg-tabela tbody tr:last-child td { border-bottom: 0; }
/* ROZDZIELENIE POZIOMÓW — trzy stopnie jasności, od najciemniejszego u góry:
dział var(--surface-2) → funkcja w pół drogi do bieli → osoba biała.
Kierownik (funkcja widząca WSZYSTKIE projekty, scope: all) NIE dostaje już
własnego tła ani grubszej kreski: niebieska plama na 10% akcentu była
najgłośniejszym elementem tabeli, a 2-pikselowa kreska u góry robiła wiersze
kierowników o 0,4 px wyższe od pozostałych (zmierzone: 33,2 vs 32,8).
Kierownika znaczy teraz pełny pasek akcentu z lewej i kolor nazwy — dokładnie
ten sam język, co w reszcie aplikacji. */
.rg-tabela .rg-rola > td { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); border-top: 1px solid var(--line); }
/* `rg-szef` -> `rg-najszersza` (17.08.2026). Klasa nazywala sie „szef", ale
rozdawal ja warunek `scope === "all"`, ktory z rangą nie ma nic wspolnego —
akcent dostawaly przez to takze Design, Inzynier i Produkcja. Teraz znaczy
dokladnie to, co widac: funkcja o NAJSZERSZYM dostepie w swoim dziale,
policzona z faktycznie nadanych uprawnien. Nazwa funkcji nie ma tu nic do
rzeczy — wlasciciel nazywa funkcje jak chce i program tego nie interpretuje. */
.rg-tabela .rg-rola.rg-najszersza .rg-nazwa { color: var(--accent-strong); }
/* Kreska pionowa przy nazwie pokazuje poziom zagnieżdżenia bez wcinania tekstu.
Ujednolicenie 11.08.2026 — 3px → var(--s-1) (4 px). Pionowy pasek akcentu
z lewej jest w aplikacji jednym elementem języka i ma 12 wystąpień
z `inset var(--s-1) 0 0` (14:123, 14:188, 15:72, 15:314, 21:75, 22:194,
22:253, 25:55, 25:109, 25:174, 25:175, 25:177). Tu i w `.premium-tree-row`
(29:25) stało 3 px — ten sam pasek o piksel cieńszy. */
/* ⭐ CIĄGŁA LINIA DRZEWA W KOLORZE DZIAŁU — 18.08.2026, polecenie właściciela:
„zrób te boczne paski tak, żeby wyglądały na ciągłość drzewa — użyj koloru".
BYŁO (dwie reguły wyżej w historii): niebieski pasek akcentu TYLKO na wierszu
funkcji — przy dziale i przy ludziach się urywał, więc zamiast drzewa były
porozrzucane kreski. TERAZ: jedna linia od nagłówka działu przez funkcje po
ostatnią osobę, w KOLORZE DZIAŁU (`--linia-dzialu` — ta sama dana, która
koloruje kropkę działu i awatary; wiersz dostaje ją przy renderze).
Dlaczego `border-left`, a nie box-shadow jak w reszcie aplikacji: cień inset
maluje się tylko po wewnętrznej stronie komórki i URYWA na jej dolnej krawędzi
(1 px linii siatki robił przerwę w każdej granicy wierszy). Border biegnie
przez pełną wysokość komórki razem z jej krawędzią — linia jest ciągła.
Przezroczysta podstawa na KAŻDEJ pierwszej komórce (też w grupach technicznych
i nagłówku) trzyma geometrię: bez niej wiersze z linią byłyby o 4 px szersze
w treści od wierszy bez. Wyróżnienie „najszerszej" funkcji zostaje w kolorze
nazwy (`.rg-najszersza .rg-nazwa`), pasek już tego nie dubluje. */
.rg-tabela tr > th:first-child, .rg-tabela tr > td:first-child { border-left: var(--s-1) solid transparent; }
.rg-tabela tr.uzy-grupa > td:first-child,
.rg-tabela tr.rg-rola > td:first-child,
.rg-tabela tr.rg-osoba > td:first-child,
.rg-tabela tr.rg-naglowek > th:first-child { border-left-color: var(--linia-dzialu, transparent); }
/* ERG5-11: wiersz nagłówka kolumn ustawień w rozwiniętym dziale — ten sam druk co nagłówek tabeli,
wcięty jak nazwy funkcji pod nim. */
.rg-tabela tr.rg-naglowek > th { background: var(--surface); border-top: 1px solid var(--line); }
.rg-tabela tr.rg-naglowek > th.rg-kto { padding-left: var(--s-6); }
/* Podświetlenie wiersza pod kursorem. 9% → 6% akcentu: po rozjaśnieniu tła
funkcji stary ton przeskakiwał o dwa stopnie naraz i wiersz „mrugał". */
.rg-tabela tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 6%, transparent); }
/* WCIĘCIE = HIERARCHIA. Trzy stopnie, liczone od lewej krawędzi komórki:
dział 12 px (tam zaczyna się strzałka rozwijania), funkcja 32, osoba 48.
Nagłówek kolumny stoi razem z działem, bo dział jest poziomem najwyższym —
wcześniej stał na 32 px, czyli nad funkcjami, a nie nad działami.
Skala odstępów kończy się na --s-7 (48 px); --s-8 nie istnieje. */
.rg-tabela th.rg-kto { padding-left: var(--s-3); }
/* Bez `width` — od 13.08.2026 tabela ma układ stały, a przy nim szerokości kolumn
bierze się WYŁĄCZNIE z pierwszego wiersza (nagłówka). Podawanie ich jeszcze raz
na komórkach ciała nic nie robiło (zmierzone: kolumna i tak miała 1172 px), a
czytającemu kłamało, że nazwisko ma stałe 230 px. */
.rg-tabela td.rg-kto-dzial { padding-left: var(--s-3); }
.rg-tabela td.rg-kto-funkcja { padding-left: var(--s-6); }
.rg-tabela td.rg-kto-osoba { padding-left: var(--s-7); }
.rg-nazwa { display: inline-flex; align-items: center; gap: var(--s-1); max-width: 100%; overflow: hidden; color: var(--text); font-size: var(--t-base); font-weight: var(--w-bold); cursor: help; }
/* `.rg-nazwa .icon` USUNIETE 17.08.2026 razem z ikonka znaku zapytania przy nazwie
funkcji. Wlasciciel: „ta ikona jest martwa, usun ja” — i mial racje: nie miala
ZADNEJ obslugi klikniecia w calym programie, byla tylko sygnalem, ze jest dymek.
Dymek zostaje i dziala: `title` siedzi na `.rg-nazwa`, czyli na rodzicu pola,
wiec pokazuje sie po najechaniu na nazwe. Nie przywracac ozdobnika. */
/* NAZWA FUNKCJI DO POPRAWIENIA i DZIAŁ DO ZMIANY — dopisane 17.08.2026.
Do tej pory nazwa funkcji stała jako martwy tekst, a działu nie dało się ruszyć:
literówka zostawała na zawsze, a przeniesienie funkcji do innego zespołu wymagało
skasowania jej i założenia od nowa (czego program nie pozwala, gdy ktoś ją pełni).
Wygląd 1:1 jak nazwa działu (`.uzy-grupa-nazwa`) — pole niewidoczne dopóki nie
najedziesz: bez ramki i bez tła, ramka pojawia się dopiero pod kursorem. Dzięki temu
wiersz czyta się dalej jak tekst, a nie jak formularz. `cursor` nadpisuje `help`
z `.rg-nazwa`, inaczej nad polem tekstowym stałby znak zapytania. */
/* `flex: 1 1 auto` + sufit — dopisane 17.08.2026. Przy `0 1 220px` pole stalo w miejscu,
wiec na szerokim oknie obok nazwy funkcji ziala pustka, a wiersz osoby tuz nizej byl
wypelniony po brzegi (nazwisko + e-mail). Teraz pole dociaga sie do szerokosci kolumny,
ale nie dalej niz 360 px — nazwa funkcji ma kilkanascie znakow, wiec pole na pol ekranu
wygladaloby jak pomylka, a nie jak pole do wpisania nazwy. */
/* Zeby pole nazwy MOGLO urosnac, musza urosnac takze jego dwa pojemniki: `.rg-etykieta`
(element potomny paska `.rg-poziom`) i sama `.rg-nazwa`, ktora domyslnie jest
`inline-flex`, czyli dopasowuje sie do TRESCI i nigdy nie wypelnia komorki.
Zawezone do wiersza funkcji (`.rg-rola`) — wiersz osoby i dzialu maja swoj uklad
i nie ma powodu ich ruszac. */
.rg-tabela .rg-rola .rg-etykieta { flex: 1 1 auto; }
.rg-tabela .rg-rola .rg-nazwa { display: flex; }
input.rg-nazwa-pole:not([type="checkbox"]):not([type="radio"]) { flex: 1 1 auto; min-width: 0; max-width: 360px; padding-left: var(--s-1); border-color: transparent; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; cursor: text; }
input.rg-nazwa-pole:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--line); background: var(--surface); }
input.rg-nazwa-pole:not([type="checkbox"]):not([type="radio"]):focus { border-color: var(--accent-strong); background: var(--surface); }
/* `.rg-dzial-pole` USUNIETE 17.08.2026 — lista dzialu w wierszu funkcji byla dublem:
wiersz i tak stoi pod naglowkiem swojego dzialu. Szczegoly w komentarzu przy
`wierszFunkcji` w public/js/widoki/. Nie przywracac bez decyzji wlasciciela. */
/* Podpis pod nazwą (e-mail, „3 osoby"). 10 → 11 px: wiersz ma teraz na to
miejsce, a e-mail to jedyny sposób odróżnienia dwóch osób o tym samym imieniu. */
.rg-kto small { display: block; overflow: hidden; color: var(--text-muted); font-size: var(--t-xs); text-overflow: ellipsis; white-space: nowrap; }
/* Listy reguł wypełniają swoją kolumnę. Zawężone 13.08.2026 do .rg-lista —
lista „przenieś do innej funkcji" w wierszu osoby stoi w paśmie scalonych
kolumn i ma trzymać szerokość JEDNEJ kolumny, a nie całego pasma. */
.rg-tabela .rg-lista select, .rg-tabela .rg-lista .combo { width: 100%; min-width: 0; }
.rg-tabela th.rg-tak, .rg-tabela td.rg-tak { width: 74px; text-align: center; }
.rg-tabela td.rg-tak input { margin: 0; cursor: pointer; }
/* Kolumna akcji: szerokość WYŁĄCZNIE na nagłówku (układ stały), a wyrównanie
do prawej i wyściółka na komórkach ciała. Wiersz osoby ma dwie ikony, dział
i funkcja po jednej — kolumna jest ta sama, więc ikony stoją w jednym słupku. */
.rg-tabela th.rg-akcja { width: var(--uzy-kol-akcja); }
.rg-tabela th.rg-akcja, .rg-tabela td.rg-akcja { padding-right: var(--s-3); text-align: right; }
.rg-tabela td.rg-akcja .inline-actions { justify-content: flex-end; }
/* PASMO SCALONYCH KOLUMN REGUŁ. „Które projekty widzi" i „Co widzi z pieniędzy"
opisują WYŁĄCZNIE funkcję. Wiersz działu i wiersz osoby scalają obie kolumny
(colspan 2) i wstawiają w nie własną treść DOSUNIĘTĄ DO LEWEJ — czyli na tę
samą pionową linię, na której zaczyna się lista w wierszu funkcji. Wcześniej
stało tu `justify-content: flex-end` i od krawędzi kolumny do treści ciągnęła
się 164-pikselowa dziura (zmierzone: krawędź 634,6 → napis „Aktywny" 799,1).
NIGDY flex na
— to kasuje display:table-cell, komórka wypada z układu
tabeli i colspan przestaje działać (ikony akcji zjeżdżały o 816 px w lewo). */
.rg-pasmo-tresc { display: flex; align-items: center; gap: var(--s-2); min-height: var(--h-control); }
/* Szerokość listy w paśmie = kolumna MINUS jej boczna wyściółka. Bez odjęcia
lista osoby wychodziła o 8 px poza prawą krawędź listy w wierszu funkcji
(zmierzone: 1715,4 zamiast 1707,4) i pionowa linia się rozjeżdżała. */
.rg-pasmo-tresc .combo, .rg-pasmo-tresc select { flex: 0 0 calc(var(--uzy-kol-regula) - var(--s-1) * 2); width: calc(var(--uzy-kol-regula) - var(--s-1) * 2); }
/* PODPIS POD LISTĄ w wierszu osoby (18.08.2026). Kolumna: lista, pod nią jedno
zdanie, co ta lista ustawia. Musi być `column`, żeby podpis NIE odsuwał listy
w bok — lewa krawędź listy zostaje na tej samej pionowej linii co lista
w wierszu funkcji wyżej (zmierzone 17.08.2026, nie psuć).
Podpis ma `flex: none`, inaczej rozciąga wysokość wiersza w nieskończoność. */
.rg-pasmo-tresc .rg-pole { display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.rg-pasmo-tresc .rg-pole > small { flex: none; color: var(--text-muted); font-size: var(--t-2xs); line-height: 1.2; white-space: nowrap; }
/* Wewnątrz `.rg-pole` szerokość bierze się z rodzica, a nie z własnego `flex` —
inaczej lista i podpis liczyłyby ją dwa razy i wychodziłyby poza pasmo. */
/* Szerokość pola w paśmie: 204 px, nie szerokość kolumny (18.08.2026).
Odkąd pole combo wypełnia pojemnik (naprawa w 03-kontrolki), to TU decyduje się
szerokość — a najdłuższa nazwa funkcji („Kierownik Handlowcow" = 157 px tekstu
+ strzałka combo 36 px + wyściółka) potrzebuje ~204 px. Pasmo scala cztery
kolumny, więc miejsce jest; lewa krawędź pierwszego pola dalej stoi w jednej
linii z listą „Które projekty widzi" wyżej (pilnowane od 17.08). */
.rg-pasmo-tresc .rg-pole { flex: 0 0 204px; width: 204px; }
.rg-pasmo-tresc .rg-pole .combo, .rg-pasmo-tresc .rg-pole select { flex: none; width: 100%; }
/* FUNKCJE DODATKOWE przy osobie (DECYZJA 3, 26.09.2026): rozwijane pole z kratkami — wygląda jak lista
obok (ta sama wysokość, ramka i tło co `select`). Rozwinięta lista kratek wchodzi W wiersz (komórka
pasma ma overflow: hidden — pływająca lista byłaby ucięta, zmierzone 26.09). */
.rg-funkcje-dodatkowe > details > summary { list-style: none; min-height: var(--h-control); padding: 7px 9px; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: var(--t-base); line-height: var(--lh-tight); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.rg-funkcje-dodatkowe > details > summary::-webkit-details-marker { display: none; }
.rg-funkcje-dodatkowe-lista { display: flex; flex-direction: column; gap: var(--s-1); margin-top: var(--s-1); padding: var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--surface); }
.rg-funkcje-dodatkowe-lista label { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--t-sm); }
.rg-funkcje-dodatkowe-lista label input { flex: none; margin-top: 3px; }
/* DECYZJA 3b: przy każdej funkcji nazwa i pod nią, co DOKŁADA tej osobie (pieniądze, projekty, uprawnienia). */
.rg-funkcja-opis { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rg-funkcja-opis > strong { color: var(--text); font-weight: var(--w-bold); white-space: nowrap; }
.rg-funkcja-opis > small { color: var(--text-muted); font-size: var(--t-xs); font-weight: var(--w-regular); line-height: var(--lh-tight); white-space: normal; }
/* Rozwinięta lista potrzebuje miejsca na opisy — pole rośnie tylko na czas rozwinięcia (pasmo ma cztery kolumny). */
.rg-pasmo-tresc .rg-pole.rg-funkcje-dodatkowe:has(> details[open]) { flex-basis: 360px; width: 360px; }
.app-confirm.app-info.app-info-funkcja { --okno-w: 680px; }
.app-info-funkcja .app-info-content { max-height: min(70vh / var(--skala-ui), 640px); overflow: auto; }
/* Reguly `.uzy-stopka*` USUNIETE 17.08.2026 razem ze stopka tabeli Uzytkownikow.
Dodawanie dzialu przeniesione do paska u gory (przycisk „+ Dzial”). Nie przywracac. */
/* Komunikat „Dział bez funkcji". Selektor podniesiony 13.08.2026 z `.rg-pusto`
na `.rg-tabela td.rg-pusto` — to nie jest podbijanie specyficzności dla
wygranej, tylko wyrównanie do kształtu sąsiednich reguł (`.rg-tabela td.rg-kto-*`).
Sprawdzone na żywej stronie: sama `.rg-pusto` przegrywała z regułą wyściółki
wszystkich komórek i wyliczało się 4 px zamiast zadeklarowanych 12/32. */
.rg-tabela td.rg-pusto { margin: 0; padding: var(--s-3) var(--s-3) var(--s-3) var(--s-6); font-size: var(--t-base); }
/* STATUS = KROPKA + SŁOWO (preferencja właściciela: statusy czyta się z kropki,
napis tylko ją nazywa). Kropka bierze ton z --ton, tak jak `.status-pill`
i `.stage-dot` w reszcie aplikacji — żadnej nowej barwy. Napis „Nieaktywny"
dostaje kolor, bo to stan wyjątkowy; „Aktywny" zostaje spokojnie szary.
SLOWNIK-NAZW.md (tura 5): czerwień znaczy tylko błąd — „Nieaktywny" to stan, nie błąd: szara kropka i szary napis. */
.uzy-status { --ton: var(--ok); display: inline-flex; align-items: center; gap: var(--s-2); color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-medium); white-space: nowrap; }
.uzy-kropka { flex: none; width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: var(--ton); }
.uzy-status.nieaktywny { --ton: var(--text-faint); color: var(--text-muted); }
/* --- MACIERZ UPRAWNIEŃ: zakładka „Uprawnienia" -----------------------------
Przełącznik zakładek to zwykły `.segmented` (05-komponenty.css) — ten sam
komponent, co „Tydzień/Miesiąc" i „Mój/Wszystko" na Timeline. Tu tylko odsuwamy
go od szukajki; reszta wyglądu jest wspólna. */
/* ⛔ ZAKLADKI MUSZA STAC W JEDNEJ LINII Z SZUKAJKA (17.08.2026).
ZMIERZONE PRZED POPRAWKA: dolna krawedz zakladek na 54 px, a szukajki, filtra
statusu i przycisku „Osoba" na 61 px — zakladki wisialy 7 px WYZEJ niz reszta
paska. Zglosil to wlasciciel: „przyciski osoby i uprawnienia nie sa w jednej
linii z oknem do wpisywania szukaj".
PRZYCZYNA: pasek kartoteki wyrownuje do DOLU (align-items: end), bo pola maja
etykiete nad soba i rownac trzeba ich dolne krawedzie. Ale grupa filtrow
w srodku wyrownuje do SRODKA (align-items: center, 12-kartoteki.css:113).
Zakladki nie maja etykiety, wiec przy centrowaniu ich srodek trafial w srodek
pary "etykieta + pole", czyli ponad linie samych pol.
align-self: end wypisuje je z tego centrowania — dolne krawedzie sie zgadzaja.
Druga rzecz: segmented ma min-height: var(--h-control) NA PRZYCISKACH plus
1 px ramki z gory i z dolu, wiec caly przelacznik mial 34 px przy 32 px reszty.
Zdejmujemy te 2 px z przyciskow, zeby suma wyszla dokladnie --h-control. */
.uzy-zakladki { flex: none; align-self: end; margin-right: var(--s-2); }
.uzy-zakladki button { min-height: calc(var(--h-control) - 2px); }
/* UKŁAD ODWRÓCONY: wiersz = uprawnienie, kolumna = funkcja. Funkcji jest ~10
i tyle zostanie, uprawnień będzie 25+ — długa lista musi rosnąć w dół, bo
w dół strona się przewija. Nagłówek (`.catalog-table thead th`) jest już
przyklejony u góry, więc przy przewijaniu w dół nazwy funkcji zostają. */
/* Układ STAŁY i szerokości podane WPROST — zmierzone, nie wybrane na oko.
Wariant „kolumna nazw bierze resztę" (bez `width`) w oknie 600 px kurczył ją
DO ZERA i nie było widać, czego dotyczy rządek kratek. Przy stałych 280 px
tabela nigdy się nie składa: w wąskim oknie wyjeżdża w bok (od tego jest
przyklejona pierwsza kolumna niżej), a w szerokim nadwyżkę dostają wszystkie
kolumny po równo — nazwy rosną do ~497 px, słupki funkcji do ~128 px, czyli
akurat tyle, żeby „Administrator" zmieścił się w jednej linii. */
.mu-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
.mu-tabela thead th.mu-nazwa { width: 240px; }
/* Kolumna z nazwą uprawnienia PRZYKLEJONA z lewej: w wąskim oknie tabela wyjeżdża
w bok, a wtedy sam rządek kratek nic nie znaczy — nie wiadomo, czego dotyczy.
Komórka NIE MOŻE dostać `overflow: hidden` (element z ucinaniem staje się
własnym kontenerem przewijania i przyklejanie przestaje działać) — dlatego
nazwa siedzi w `
`, poza wspólną regułą `.catalog-table tbody td`,
a ucinanie dostaje dopiero podpis w środku. */
.mu-tabela .mu-nazwa { position: sticky; left: 0; text-align: left; }
.mu-tabela thead th.mu-nazwa { z-index: 3; background: var(--surface-2); }
.mu-tabela tbody th.mu-nazwa { z-index: 1; padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--line); background: var(--surface); box-shadow: 1px 0 0 var(--line); font-weight: var(--w-regular); vertical-align: middle; }
.mu-tabela tbody tr:hover > th.mu-nazwa { background: var(--surface-2); }
.mu-nazwa-tresc { display: block; }
.mu-nazwa-tresc strong { display: block; color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold); }
.mu-opis { display: block; overflow: hidden; color: var(--text-muted); font-size: var(--t-2xs); white-space: nowrap; text-overflow: ellipsis; }
/* Nagłówek kolumny funkcji: wąski słupek. ROL-5 (przegląd 26.09): łamanie W ŚRODKU słowa dawało
„Administrat-or” i „Handlowcó-w” — słupek 84 px mieści najdłuższe słowo nazwy (zmierzone: 74 px przy
11 px), a łamie się tylko między słowami. Dawniej: tekst łamany W ŚRODKU słowa
(`overflow-wrap: anywhere` — tylko ono zbija szerokość minimalną komórki,
`break-word` jej nie rusza). Skrót w treści, pełna nazwa w dymku. */
/* ERG5-11 (26.09.2026): napis nagłówka OBRÓCONY pionowo, słupek 44 px. Przy 84 px na 15 kolumn tabela
miała 1540 px i na 1440/1366/1280 kolumny Inżynierii (i część Designu) wypadały poza ekran. Teraz
240 + 15 × 44 = 900 px — mieści się przy rozwiniętym menu także na 1280. Nazwa zostaje w całości
(słowa się nie łamią), czyta się od dołu do góry; pełna nazwa i liczba osób dalej w dymku. */
.mu-tabela th.mu-funkcja { width: 44px; height: 128px; padding: var(--s-2) 0; overflow-wrap: normal; text-align: center; vertical-align: bottom; white-space: nowrap; cursor: help; }
.mu-funkcja-napis { display: inline-block; max-height: 116px; overflow: hidden; text-overflow: ellipsis; writing-mode: vertical-rl; transform: rotate(180deg); }
.mu-tabela td.mu-tak { width: 44px; padding: var(--s-1); border-bottom: 1px solid var(--line); text-align: center; }
/* DECYZJA 3b: wiersz „Co widzi z pieniędzy” — skrót poziomu cen w słupku funkcji (pełne zdanie w dymku). */
button.mu-ceny-napis { display: inline-block; max-width: 100%; min-height: 0; padding: 0; overflow: hidden; border: 0; background: none; color: var(--text-muted); font-size: var(--t-2xs); font-weight: var(--w-bold); text-decoration: underline dotted; text-underline-offset: 3px; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
button.mu-ceny-napis.is-pelny { color: var(--text); }
button.mu-ceny-napis:hover { color: var(--accent-strong); }
/* Legenda nad macierzą — wzory kratek + zdanie o kolumnie działu. */
.mu-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--line); color: var(--text-muted); font-size: var(--t-xs); }
.mu-legenda-poz { display: inline-flex; align-items: center; gap: var(--s-1); }
.mu-legenda-poz input { margin: 0; }
.mu-legenda-dzial { font-weight: var(--w-bold); }
.mu-tabela td.mu-tak input { margin: 0; cursor: pointer; }
/* POPR-n13 (audyt 28.09.2026): kratka uprawnienia miała na tablecie 16 × 16 px celu dla palca. Kratka siedzi w etykiecie
(klik w etykietę = klik w kratkę), a na tablecie etykieta ma 44 × 44 px — cały kwadrat komórki reaguje na dotyk. */
.mu-cel { display: inline-grid; place-items: center; vertical-align: middle; cursor: pointer; }
:root[data-ui="tablet"] .mu-cel { min-width: var(--h-control); min-height: var(--h-control); }
:root[data-ui="tablet"] .mu-tabela td.mu-tak { padding: 0; }
:root[data-ui="tablet"] .mu-cel > input { width: 20px; height: 20px; }
/* ⭐ KOLUMNA CAŁEGO DZIAŁU (18.08.2026). Musi być widocznie inna od kolumn funkcji,
bo jedno kliknięcie w niej zmienia uprawnienie CAŁEMU zespołowi naraz — pomylenie
jej z kolumną pojedynczej funkcji byłoby drogie.
Odróżnia ją: cieplejsze tło, pogrubiony nagłówek i kreska po lewej, która
otwiera blok działu. Wszystko z tokenów — zero surowych kolorów. */
.mu-tabela th.mu-dzial-naglowek { color: var(--text); font-weight: var(--w-bold); } /* POPR-n45: bez kreski z lewej — blok działu niesie tło */
.mu-tabela th.mu-dzial-naglowek, .mu-tabela td.mu-dzial-kom { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.mu-tabela tbody tr:hover > td.mu-dzial-kom { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.mu-tabela tbody tr:last-child > th, .mu-tabela tbody tr:last-child > td { border-bottom: 0; }
/* Wiersz grupujący — ten sam ton, co wiersz działu w zakładce „Osoby”. Etykieta
jest osobnym elementem, żeby dało się ją przykleić z lewej razem z kolumną
nazw (sama komórka rozciąga się przez wszystkie funkcje). */
.mu-tabela .mu-grupa-kom { padding: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-2); text-align: left; }
.mu-grupa-tresc { position: sticky; left: 0; display: inline-flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-3); color: var(--text); font-size: var(--t-sm); font-weight: var(--w-bold); }