/* ========================================================================== PION — język wizualny ewidencji sprzętu. Metafora: rysunek techniczny i przyrząd pomiarowy. Ciemny granatowy korpus, indygo jak linia na kalce, numer inwentarzowy jak odczyt dalmierza. Niebieski nie jest przypadkowy: to barwa oznaczania sieci wodociągowych, czyli tego, co ta firma buduje. Zasady: jedna kolorowa rzecz na ekran, głębia niesie informację, telefon dolnocentryczny, ruch tylko tam, gdzie tłumaczy. Kroje pakowane lokalnie — font, który się nie doładował w wykopie, to pusty ekran. ========================================================================== */ /* KROJE (5.61.0, wybór Sławka 05.10.2026: zestaw „Warsztat”). Chivo — cały tekst. „Kod Warsztat” — Chivo Mono z PRZEKREŚLONYM ZEREM (przerobione u nas, licencja OFL wymaga innej nazwy): numery inwentarzowe, rejestracyjne, seryjne. Zero i O nie do pomylenia. */ @font-face{font-family:"Chivo";font-style:normal;font-weight:400;font-display:swap;src:url(/fonty/chivo-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Chivo";font-style:normal;font-weight:400;font-display:swap;src:url(/fonty/chivo-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Chivo";font-style:normal;font-weight:500;font-display:swap;src:url(/fonty/chivo-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Chivo";font-style:normal;font-weight:500;font-display:swap;src:url(/fonty/chivo-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Chivo";font-style:normal;font-weight:600;font-display:swap;src:url(/fonty/chivo-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Chivo";font-style:normal;font-weight:600;font-display:swap;src:url(/fonty/chivo-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Chivo";font-style:normal;font-weight:700;font-display:swap;src:url(/fonty/chivo-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Chivo";font-style:normal;font-weight:700;font-display:swap;src:url(/fonty/chivo-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Kod Warsztat";font-style:normal;font-weight:500;font-display:swap;src:url(/fonty/kod-warsztat-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Kod Warsztat";font-style:normal;font-weight:500;font-display:swap;src:url(/fonty/kod-warsztat-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Kod Warsztat";font-style:normal;font-weight:600;font-display:swap;src:url(/fonty/kod-warsztat-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Kod Warsztat";font-style:normal;font-weight:600;font-display:swap;src:url(/fonty/kod-warsztat-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Kod Warsztat";font-style:normal;font-weight:700;font-display:swap;src:url(/fonty/kod-warsztat-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Kod Warsztat";font-style:normal;font-weight:700;font-display:swap;src:url(/fonty/kod-warsztat-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF} /* ---------------------------------------------------------------- kroje --- */ /* DWA KROJE NA CAŁY PROGRAM. Nie trzy. Archivo (od 5.61.0; wcześniej Wix Madefor Text) — WSZYSTKO, co jest słowem: szyna, nagłówki, treść, przyciski, plakietki. Groteska o rodowodzie technicznym, pasuje do napisu w logo; jedna odmiana zmienna (grubość i szerokość) zamiast ośmiu plików. Martian Mono — WYŁĄCZNIE numery inwentarzowe i to, co się przy nich czyta cyfra po cyfrze. Szeroki, o mocno rozróżnialnych znakach: N-0201 nie da się pomylić z N-O2Ol. Tam, gdzie pomyłka w znaku kosztuje wyjazd na budowę, to ma sens; wszędzie indziej mono tylko udaje technikę. Wix Madefor Display został WYCOFANY (5.17.0). Był krojem nagłówków — węższym, mocniej ściśniętym — przez co lewa szyna i prawa treść wyglądały jak dwa różne programy zszyte w jeden ekran. Zgłoszenie brzmiało dokładnie tak: „czcionka na lewym panelu mi się podoba, na prawym jest zła, lepiej żeby była podobna". Nagłówek nie potrzebuje innego kroju, żeby być nagłówkiem — wystarczy stopień i grubość. Jeden krój na wszystkie słowa to jedna decyzja mniej przy każdym nowym elemencie i o jeden plik mniej do pobrania w wykopie. Wszystko na licencji OFL, spakowane lokalnie w public/fonty. */ /* ---------------------------------------------------------------- barwy --- */ /* JASNY jest domyślny. Ciemny wchodzi przełącznikiem w rogu ekranu. Oba motywy projektowane osobno — żaden nie jest odwróceniem drugiego, dlatego oba komplety zmiennych są wypisane w całości. */ :root{ /* ŚWIAT: kwit z narzędziowni. Papier, kalka, ołówek kopiowy, zielony stempel „wydano", czerwony tusz na awarii. Nie jest to szarość neutralna — wszystko ma ciepły podkład, żeby ekran nie świecił jak arkusz kalkulacyjny. Wersja ciemna to ten sam papier w nocy: ciepły brąz, nie granat. */ --tlo:#14120F; /* korpus */ --p0:#1A1714; /* tło treści */ --p1:#211D19; /* karta */ --p2:#2A2521; /* nakładka, hover */ --wklesle:#100E0C; /* pole wprowadzania, skaner */ --t0:#F4F0E9; --t1:#B8B0A5; --t2:#A1998F; --t3:#5E574F; /* t2: 5.64.1 — było #8A8279, 4,4:1 na karcie */ --kr:rgba(255,255,255,.09); --kr2:rgba(255,255,255,.16); --kr3:rgba(255,255,255,.05); --akcent:#3E9C7C; --na-akcencie:#0C1512; --akcent-t:#63C4A2; /* akcent użyty jako TEKST/kontur — jaśniejszy, bo na ciemnym */ --baza:#9AA593; --droga:#8E9BD6; --awaria:#E0736A; --uwaga:#DDA24A; --baza-tlo:rgba(154,165,147,.13); --droga-tlo:rgba(142,155,214,.14); --awaria-tlo:rgba(224,115,106,.13); --akcent-tlo:rgba(62,156,124,.16); --uwaga-tlo:rgba(221,162,74,.13); --f:"Chivo","Segoe UI",system-ui,Arial,sans-serif; --fm:"Kod Warsztat","Cascadia Mono",Consolas,ui-monospace,monospace; --r-s:6px; --r-m:10px; --r-l:16px; --r-xl:22px; --e:cubic-bezier(.23,1,.32,1); --cien:0 1px 2px rgba(0,0,0,.5), 0 14px 32px -14px rgba(0,0,0,.7); --szyna:250px; color-scheme:dark; } :root[data-motyw="jasny"]{ --tlo:#F3F1EC; --p0:#FAF8F4; --p1:#FFFFFF; --p2:#FFFFFF; --wklesle:#EFEBE3; --t0:#1A1712; --t1:#57514A; --t2:#6F685F; --t3:#B5ADA2; /* t2: 5.64.1 — było #8A8279, 3,6:1 */ --kr:rgba(26,23,18,.11); --kr2:rgba(26,23,18,.20); --kr3:rgba(26,23,18,.06); /* Zielony stempel „wydano" — jedyny kolor akcji w całej aplikacji. Na papierze musi być ciemny, żeby biały napis na przycisku miał kontrast. */ --akcent:#1D5C4A; --na-akcencie:#FFFFFF; --akcent-t:#17513F; /* jako tekst na papierze */ --baza:#5E6A5A; /* leży w bazie — nic się nie dzieje, kolor stonowany (5.64.1: ciemniej, było 4,2:1) */ --droga:#4A5A94; /* w drodze / czeka na potwierdzenie — niebieski tusz */ --awaria:#A32B22; /* czerwony tusz */ --uwaga:#9A5B12; /* ołówek kopiowy */ --baza-tlo:rgba(111,122,107,.11); --droga-tlo:rgba(74,90,148,.10); --awaria-tlo:rgba(163,43,34,.09); --akcent-tlo:rgba(29,92,74,.10); --uwaga-tlo:rgba(154,91,18,.10); --cien:0 1px 2px -1px rgba(26,23,18,.10), 0 12px 28px -20px rgba(26,23,18,.35); color-scheme:light; } /* ============================================================== motyw „Żółty" === DOMYŚLNY od 5.15.0. Barwy odczytane z pikseli zrzutów panelu, który użytkownik wskazał jako wzór — nie dobrane z oka: żółty #FFD741, czerń nawigacji #100E10, tło treści #F2F2F2. DLACZEGO TO NIE JEST MODA. Czarny napis na tym żółtym ma kontrast 13,8:1. Poprzedni zielony przycisk z białym napisem miał 7,8:1 — też dobrze, ale nie tak. Na telefonie w pełnym słońcu, w rękawicy, ta różnica decyduje o tym, czy w ogóle widać, gdzie nacisnąć. To zresztą barwa tej branży: koparka, kamizelka odblaskowa, taśma ostrzegawcza — kolory, które istnieją po to, żeby rzucały się w oczy tam, gdzie jest jasno i brudno. CZERŃ TRZYMA NAWIGACJĘ, NIE TREŚĆ. Szyna, dolny pasek i belka telefonu są czarne, bo są stałe. Tabela na sto wierszy zostaje na papierze. ============================================================================== */ :root[data-motyw="zolty"]{ --tlo:#100E10; /* nawigacja: boczna szyna, dolny pasek, belka telefonu */ --p0:#F2F2F2; /* tło treści — dokładnie ich szarość */ --p1:#FFFFFF; --p2:#FAFAFA; --wklesle:#EFEFEF; --t0:#100E10; --t1:#4A4A4C; --t2:#7C7C7F; --t3:#B0B0B3; --kr:rgba(16,14,16,.12); --kr2:rgba(16,14,16,.22); --kr3:rgba(16,14,16,.06); --akcent:#FFD741; --na-akcencie:#100E10; /* czarny NA żółtym — 13,8:1 */ --akcent-t:#6B4A00; /* akcent użyty jako TEKST na białym: żółty jest nieczytelny (1,4:1), więc rolę tekstu bierze ciemny bursztyn — 8,1:1 */ --baza:#4F6B52; /* leży w magazynie */ --droga:#2F4B8F; /* w drodze, czeka na potwierdzenie */ --awaria:#C0271F; --uwaga:#8A5A00; --baza-tlo:rgba(79,107,82,.11); --droga-tlo:rgba(47,75,143,.10); --awaria-tlo:rgba(192,39,31,.09); --akcent-tlo:rgba(255,215,65,.26); --uwaga-tlo:rgba(138,90,0,.11); --r-s:4px; --r-m:8px; --r-l:12px; --r-xl:18px; /* ostrzejsze rogi — narzędzie, nie aplikacja */ --cien:0 1px 2px -1px rgba(16,14,16,.10), 0 12px 28px -20px rgba(16,14,16,.40); color-scheme:light; } /* Nawigacja na czerni — jedyne miejsce, gdzie treść leży na ciemnym tle. Aktywna pozycja to PEŁNE ŻÓŁTE POLE z czarnym napisem, nie podświetlenie: w szynie na osiemnaście pozycji delikatne tło gubi się po dwóch sekundach. */ :root[data-motyw="zolty"] .szyna{background:var(--tlo);border-right:0} :root[data-motyw="zolty"] .szyna .marka b{color:#fff} :root[data-motyw="zolty"] .szyna .marka small, :root[data-motyw="zolty"] .szyna .wersja{color:rgba(255,255,255,.45)} :root[data-motyw="zolty"] .szyna .marka .znak{background:var(--akcent);box-shadow:none} :root[data-motyw="zolty"] .szyna .marka .znak i{background:#100E10} :root[data-motyw="zolty"] .szyna .marka .znak i::after{background:#100E10} :root[data-motyw="zolty"] .szyna .sekcja-menu{color:rgba(255,255,255,.38)} :root[data-motyw="zolty"] .szyna nav a{color:rgba(255,255,255,.80)} :root[data-motyw="zolty"] .szyna nav a:hover{background:rgba(255,255,255,.10);color:#fff} :root[data-motyw="zolty"] .szyna nav a[aria-current="page"]{ background:var(--akcent);color:#100E10;font-weight:600;box-shadow:none} :root[data-motyw="zolty"] .szyna nav a[aria-current="page"] svg{opacity:1} :root[data-motyw="zolty"] .szyna .kto{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14)} :root[data-motyw="zolty"] .szyna .kto b{color:#fff} :root[data-motyw="zolty"] .szyna .kto span{color:rgba(255,255,255,.50)} :root[data-motyw="zolty"] .szyna .motyw, :root[data-motyw="zolty"] .szyna .wyjscie{ background:rgba(255,255,255,.08);color:rgba(255,255,255,.80);border-color:rgba(255,255,255,.16); } :root[data-motyw="zolty"] .szyna .motyw:hover, :root[data-motyw="zolty"] .szyna .wyjscie:hover{background:rgba(255,255,255,.16);color:#fff} @media (max-width:900px){ :root[data-motyw="zolty"] .gora{background:var(--tlo);border-bottom-color:rgba(255,255,255,.12)} :root[data-motyw="zolty"] .gora .marka b{color:#fff} :root[data-motyw="zolty"] .gora .marka small{color:rgba(255,255,255,.45)} :root[data-motyw="zolty"] .gora .marka .znak{background:var(--akcent)} :root[data-motyw="zolty"] .gora .marka .znak i, :root[data-motyw="zolty"] .gora .marka .znak i::after{background:#100E10} :root[data-motyw="zolty"] .gora .motyw{ background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.18); } :root[data-motyw="zolty"] .dol{background:var(--tlo);border-top-color:rgba(255,255,255,.12)} :root[data-motyw="zolty"] .dol a,:root[data-motyw="zolty"] .dol summary{color:rgba(255,255,255,.62)} :root[data-motyw="zolty"] .dol a[aria-current="page"], :root[data-motyw="zolty"] .dol summary.aktywna{color:var(--akcent)} :root[data-motyw="zolty"] .dol a[aria-current="page"]::before, :root[data-motyw="zolty"] .dol summary.aktywna::before{background:var(--akcent)} :root[data-motyw="zolty"] .dol .arkusz{background:var(--tlo);border-color:rgba(255,255,255,.14)} :root[data-motyw="zolty"] .dol .arkusz a{color:rgba(255,255,255,.82)} :root[data-motyw="zolty"] .dol .arkusz .sekcja-menu{color:rgba(255,255,255,.38)} :root[data-motyw="zolty"] .dol .arkusz a:hover{background:rgba(255,255,255,.10);color:#fff} :root[data-motyw="zolty"] .dol .arkusz a[aria-current="page"]{background:var(--akcent);color:#100E10} } *{box-sizing:border-box;-webkit-tap-highlight-color:transparent} /* `hidden` MA CHOWAĆ. Przeglądarka ma własną regułę `[hidden]{display:none}`, ale leży ona w arkuszu przeglądarki — a nasza `.osoba-kafel{display:grid}` jest tak samo szczegółowa i pochodzi z arkusza strony, więc wygrywa. Skutek: filtr osób ustawiał `hidden` na dwudziestu kafelkach i wszystkie DALEJ BYŁY WIDAĆ. Wyszło dopiero w teście sprawdzającym widoczność, nie samo istnienie atrybutu. Jedno `!important` na całą aplikację jest tańsze niż pamiętanie o tym przy każdym nowym `display:` w tym pliku. */ [hidden]{display:none !important} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--tlo);color:var(--t0); font-family:var(--f);font-size:15px;line-height:1.55; font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } a{color:inherit} ::selection{background:var(--akcent);color:var(--na-akcencie)} :focus-visible{outline:2px solid var(--akcent-t);outline-offset:2px;border-radius:3px} /* ================================================== pola wyboru (checkbox) === Natywny kwadracik przeglądarki jest najszybszym sygnałem, że interfejsu nikt nie projektował: ma inny kształt w każdym systemie, nie zna naszej palety i jest o połowę za mały na dotyk w rękawicy. Rysujemy własny — 20 px, z polem trafienia rozszerzonym do 44 px pseudoelementem, żeby wielkość celu nie zależała od wyglądu. */ input[type=checkbox],input[type=radio]{ appearance:none;-webkit-appearance:none;position:relative;flex:none; width:20px;height:20px;margin:0;cursor:pointer; background:var(--p1);border:1.5px solid var(--kr2);border-radius:5px; transition:background .12s var(--e),border-color .12s var(--e); } input[type=radio]{border-radius:50%} input[type=checkbox]::after{ content:"";position:absolute;inset:-12px; /* pole trafienia 44 px */ } input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--t2)} input[type=checkbox]:checked,input[type=radio]:checked{ background:var(--akcent);border-color:var(--akcent); } /* Ptaszek rysowany tłem, nie znakiem — znak zależałby od kroju pisma. */ input[type=checkbox]:checked{ background-image:linear-gradient(var(--akcent),var(--akcent)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.4-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:100% 100%,13px 13px;background-position:center,center;background-repeat:no-repeat; } input[type=radio]:checked{box-shadow:inset 0 0 0 4px var(--p1)} input[type=checkbox]:indeterminate{ background:var(--akcent);border-color:var(--akcent); background-image:linear-gradient(var(--akcent),var(--akcent)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8h8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); background-size:100% 100%,13px 13px;background-position:center,center;background-repeat:no-repeat; } input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{ outline:2px solid var(--akcent-t);outline-offset:2px; } /* ============================================== paski przewijania ============ Natywny pasek Windowsa na czarnej szynie to biała rynna z przyciskami-strzałkami. Nie da się go „prawie nie zauważyć" — a pasek przewijania ma być właśnie niezauważalny, dopóki nie jest potrzebny. PUŁAPKA, PRZEZ KTÓRĄ TE STYLE NIE DZIAŁAŁY (naprawione w 5.17.0). Były tu naraz dwa sposoby opisania paska: nowy standardowy (`scrollbar-width`, `scrollbar-color`) i stary `::-webkit-scrollbar`, który jako jedyny pozwala podać szerokość, zaokrąglenie i przezroczystą rynnę. Chrome i Edge od wersji 121 **wyłączają `::-webkit-scrollbar` na elemencie, który ma ustawione którekolwiek z dwóch pierwszych** — i robią to po cichu. Użytkownik na Windowsie oglądał więc systemowy pasek, mimo że własny był napisany od początku do końca. Dlatego standardowe własności siedzą w `@supports not selector(::-webkit-scrollbar)`: dostaje je wyłącznie przeglądarka, która starego sposobu nie zna (Firefox). Jedna droga na jedną przeglądarkę — nigdy obie naraz na tym samym elemencie. */ *::-webkit-scrollbar{width:9px;height:9px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{background:var(--kr2);border-radius:99px; border:2px solid transparent;background-clip:content-box} *::-webkit-scrollbar-thumb:hover{background:var(--t3);background-clip:content-box} *::-webkit-scrollbar-corner{background:transparent} .szyna nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);background-clip:content-box} .szyna nav::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.36);background-clip:content-box} @supports not selector(::-webkit-scrollbar){ *{scrollbar-width:thin;scrollbar-color:var(--kr2) transparent} .szyna nav{scrollbar-color:rgba(255,255,255,.22) transparent} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}} /* ================================================================ powłoka === */ .powloka{display:grid;grid-template-columns:var(--szyna) 1fr;min-height:100vh} /* --- szyna boczna (biuro) --- */ .szyna{ position:sticky;top:0;align-self:start;height:100vh; background:var(--p0);border-right:1px solid var(--kr); display:flex;flex-direction:column;padding:16px 12px 12px; } .marka{ display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit; padding:0 8px 14px;margin-bottom:2px; } .marka .znak{ flex:none;width:34px;height:34px;border-radius:9px;background:var(--p2); border:1px solid var(--kr2);display:grid;place-items:center; } .marka .znak i{display:block;width:2px;height:15px;background:var(--akcent);border-radius:1px} .marka .znak i::after{content:"";display:block;width:8px;height:8px;margin:13px 0 0 -3px; background:var(--akcent);border-radius:0 0 3px 3px;clip-path:polygon(50% 100%,0 0,100% 0)} .marka > span{min-width:0} .marka b{font-size:var(--t-b);font-weight:700;letter-spacing:-.02em;line-height:1.15;display:block} .marka small{display:block;font-family:var(--fm);font-size:var(--t-xs);font-weight:500; letter-spacing:.07em;text-transform:uppercase;color:var(--t2);margin-top:2px} .szyna nav{display:flex;flex-direction:column;gap:2px;flex:1;min-height:0;overflow-y:auto} .szyna nav a{ display:flex;align-items:center;gap:11px;padding:6px 12px;border-radius:var(--r-m);text-decoration:none; color:var(--t1);font-size:var(--t-m);font-weight:500;letter-spacing:-.005em; transition:background .15s var(--e),color .15s var(--e); } .szyna nav a svg{flex:none;width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;opacity:.85} .szyna nav a:hover{background:var(--p1);color:var(--t0)} /* Wybrana pozycja: całe pole w lekkim kolorze akcentu, bez kreski z boku. Kreska na zaokrąglonym polu wyglądała jak nawias „(" — zgłoszenie Sławka 30.09.2026 (5.49.2). */ .szyna nav a[aria-current="page"]{background:color-mix(in srgb,var(--akcent) 14%,var(--p1));color:var(--t0);font-weight:600; box-shadow:none} .szyna nav a[aria-current="page"] svg{color:var(--akcent-t)} .szyna nav a[aria-current="page"] svg{opacity:1} .szyna nav a .licznik{margin-left:auto} /* Nagłówek sekcji menu. Ma dzielić, a nie konkurować z pozycjami — stąd mały stopień, kolor najsłabszego tekstu i odstęp NAD, nie pod: odstęp jest tym, co naprawdę oddziela grupy, napis tylko je nazywa. Pierwszy nagłówek bez odstępu, bo nad nim jest już linia marki. */ .sekcja-menu{ margin:9px 0 2px;padding:0 12px; font:600 var(--t-xs)/1 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--t3); } .sekcja-menu:first-child{margin-top:0} /* Gdy pozycji jest więcej, niż mieści okno, szyna przewija się — i musi to WYGLĄDAĆ na zamierzone. Ścięta w połowie pozycja przy dolnej krawędzi wygląda jak błąd; ta sama pozycja rozpływająca się w nic mówi „jest tego więcej, przewiń". Maska działa tylko wtedy, gdy jest co przewijać — stąd `mask-image` na kontenerze, który przy braku nadmiaru i tak niczego nie przycina. */ .szyna nav{mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%); -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 22px),transparent 100%)} /* Licznik przy „Moje" i „Koszyk" — liczba rzeczy czekających na człowieka. */ .licznik{ display:inline-flex;align-items:center;justify-content:center; min-width:19px;height:19px;padding:0 5px;border-radius:999px; background:var(--akcent);color:var(--na-akcencie); font-family:var(--fm);font-size:var(--t-xs);font-weight:600;font-style:normal;line-height:1; } /* Stopka szyny: przelacznik motywu i wylogowanie stoja OBOK SIEBIE, nie jeden pod drugim. Ustawione pionowo zabieraly osiemdziesiat pikseli — czyli dwie pozycje menu — na rzeczy, po ktore siega sie raz dziennie i raz na tydzien. */ /* Stopka szyny w JEDNYM rzędzie. Trzy piętra (karta z nazwiskiem, przycisk motywu, wylogowanie) zajmowały 108 px — tyle, co trzy pozycje menu — na rzeczy, po które sięga się raz dziennie i raz na tydzień. */ .stopka-szyny{border-top:1px solid var(--kr);padding-top:8px;margin-top:8px;display:flex; align-items:center;gap:6px;flex-wrap:wrap} /* Numer wersji: własna linia nad kontem. W rzędzie z nazwiskiem, motywem i wyjściem nie ma dla niego 226 px, a urwany numer wersji jest gorszy niż jego brak. */ .wersja{flex:1 0 100%;order:-1;padding:0 6px 6px;font-size:var(--t-xs);color:var(--t2); text-decoration:none;letter-spacing:.02em} .wersja b{font-family:var(--fm);font-weight:600;letter-spacing:.04em} .wersja:hover{color:var(--t0)} .stopka-szyny .kto{flex:1 1 auto;min-width:0;padding:4px 6px;background:transparent;border:0; display:flex;align-items:center;gap:8px} .stopka-szyny .kto:hover{background:var(--p1)} .stopka-szyny .kto span.inicjaly{ flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center; background:var(--akcent);color:var(--na-akcencie); font:600 var(--t-xs)/1 var(--fm);letter-spacing:0;text-transform:none; } .stopka-szyny .kto b{flex:1 1 auto;min-width:0;font-size:var(--t-s)} .stopka-szyny .rzad-konta{display:flex;gap:4px;flex:none} /* Przycisk motywu schodzi do samej ikony: podpis „Jasny / Granat" i tak mówił tylko, co będzie po kliknięciu, a to widać po ikonie. Nazwa została w `aria-label`. */ .stopka-szyny .motyw{width:38px;padding:0} .stopka-szyny .motyw b{display:none} .stopka-szyny .motyw span{gap:0} .stopka-szyny .wyjscie{width:38px;padding:0} .stopka-szyny .wyjscie svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .kto{ flex:1;min-width:0;display:block;text-decoration:none;padding:8px 10px;border-radius:var(--r-m); background:var(--p1);border:1px solid var(--kr);transition:border-color .15s var(--e); } .kto:hover{border-color:var(--kr2)} .kto span{display:block;font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.07em; text-transform:uppercase;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kto b{display:block;font-size:var(--t-m);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .motyw{ width:100%;min-height:38px;border:1px solid var(--kr);border-radius:var(--r-m); background:var(--p1);color:var(--t1);cursor:pointer;padding:0 12px; font:inherit;transition:color .15s var(--e),border-color .15s var(--e); } .motyw span{display:flex;align-items:center;justify-content:center;gap:9px;min-height:36px} .motyw b{font-size:var(--t-m);font-weight:600} .motyw svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .motyw:hover{color:var(--t0);border-color:var(--kr2)} /* Podpis mówi, co się stanie po kliknięciu, nie jaki motyw jest teraz. Trzy motywy chodzą w kółko: żółty → jasny → ciemny → żółty. */ .motyw > span{display:none} :root[data-motyw="zolty"] .m-jasny{display:flex} :root[data-motyw="jasny"] .m-ciemny{display:flex} :root[data-motyw="ciemny"] .m-zolty{display:flex} :root:not([data-motyw="zolty"]):not([data-motyw="jasny"]):not([data-motyw="ciemny"]) .m-jasny{display:flex} .wyjscie{ display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 10px; border:1px solid var(--kr);border-radius:var(--r-m);background:var(--p1);text-decoration:none; color:var(--t2);font-size:var(--t-s);font-weight:500;transition:color .15s var(--e),border-color .15s var(--e); } .wyjscie:hover{color:var(--t0);border-color:var(--kr2)} /* --- pasek górny (telefon) --- */ .gora{display:none} /* --- obszar treści --- */ .plotno{background:var(--p0);min-width:0} main{max-width:1120px;margin:0 auto;padding:30px 30px 72px;display:flex;flex-direction:column;gap:20px} /* --- pasek dolny (telefon) --- */ .dol{display:none} /* Na telefonie wszystko o stopień większe: ekran ogląda się w słońcu, w rękawicach i z odległości wyciągniętej ręki, a nie na biurku. */ @media (max-width:900px){ body{font-size:16.5px} .pod{font-size:var(--t-m)} .oko,label,thead th,.kv dt,.kafel span,.odczyt-kto dt{font-size:var(--t-xs)} .plakietka{font-size:var(--t-xs);padding:4px 10px 4px 9px} .kv dd,.odczyt-kto dd{font-size:var(--t-l)} .powloka{grid-template-columns:1fr} .szyna{display:none} .gora{ display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30; padding:10px 16px;background:color-mix(in srgb, var(--p0) 88%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--kr); } .gora .marka{padding:0;margin:0;flex:1} /* 5.58.2: na telefonie sama ikonka (44 px). Napis „Jasny" zajmował najlepsze miejsce na górze ekranu, a w terenie motyw zmienia się raz, nie codziennie. */ .gora .motyw{width:44px;min-height:44px;flex:none;padding:0;background:var(--p1)} .gora .motyw b{display:none} .gora .motyw span{gap:0} main{padding:20px 16px calc(96px + env(safe-area-inset-bottom))} .dol{ display:grid;grid-auto-flow:column;grid-auto-columns:1fr; position:fixed;left:0;right:0;bottom:0;z-index:40; background:color-mix(in srgb, var(--p0) 90%, transparent); backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); border-top:1px solid var(--kr);padding-bottom:env(safe-area-inset-bottom); } .dol a,.dol summary{ position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px; min-height:60px;text-decoration:none;color:var(--t2);cursor:pointer;list-style:none; font-family:var(--f);font-size:var(--t-xs);letter-spacing:-.005em;font-weight:600; } .dol a::marker,.dol summary::marker,.dol summary::-webkit-details-marker{display:none;content:""} .dol a svg,.dol summary svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} /* Licznik siada na ikonie, nie pod podpisem — tak samo na pozycji i na „Więcej". Od 5.18.0 „Moje" jest w menu, więc to na trzech kropkach wisi liczba „ktoś Ci przekazał sprzęt i czeka na Twoje potwierdzenie". */ .dol a .licznik,.dol summary .licznik{position:absolute;top:7px;left:calc(50% + 4px); min-width:17px;height:17px;font-size:var(--t-xs)} .dol a[aria-current="page"]{color:var(--akcent-t)} .dol a[aria-current="page"]::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px; background:var(--akcent);border-radius:0 0 2px 2px} .dol details[open] summary{color:var(--t0)} .dol summary.aktywna{color:var(--akcent-t)} .dol summary.aktywna::before{content:"";position:absolute;top:0;left:22%;right:22%;height:2px; background:var(--akcent);border-radius:0 0 2px 2px} .dol .arkusz{ position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom)); background:var(--p2);border-top:1px solid var(--kr2);box-shadow:var(--cien); padding:8px;display:flex;flex-direction:column;gap:2px; animation:wjedz .22s var(--e); /* Administrator ma w schowku czternascie pozycji — bez tego arkusz wychodzil poza ekran gora i dolne pozycje bylyby nieklikalne. */ max-height:calc(100dvh - 130px);overflow-y:auto; } .dol .arkusz a{ flex-direction:row;justify-content:flex-start;gap:12px;min-height:48px;padding:0 14px; border-radius:var(--r-m);font-family:var(--f);font-size:var(--t-b);letter-spacing:0; text-transform:none;color:var(--t0);font-weight:500; } .dol .arkusz a:hover{background:var(--p1)} } @keyframes wjedz{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}} /* ============================================================== typografia === */ h1{font-family:var(--f);font-size:clamp(1.5rem,1.12rem + 1.5vw,1.95rem);font-weight:700;letter-spacing:-.018em;line-height:1.1;margin:0;text-wrap:balance} h2{font-family:var(--f);font-size:var(--t-l);font-weight:700;letter-spacing:-.008em;margin:0} h3{font-size:var(--t-m);font-weight:600;margin:0} p{margin:0 0 10px;max-width:68ch;color:var(--t1);text-wrap:pretty} p:last-child{margin-bottom:0} /* Tekst pomocniczy zwykłym krojem — monospace do zdań jest ciężki i szeroki, a na telefonie łamie każde zdanie na pięć linijek. Mono zostaje przy numerach, etykietach i nagłówkach tabel. */ .pod{font-size:var(--t-m);line-height:1.6;color:var(--t2)} .oko{font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--t2)} strong,b{font-weight:600} main > h1{margin-bottom:-6px} /* ================================================================== karty === */ /* Karta to kartka papieru położona na blacie, nie prostokąt obrysowany kreską. Uniesienie robi cień (pierścień 1px + dwie miękkie warstwy), nie ramka — dzięki temu przy pięciu kartach pod sobą ekran nie zamienia się w kratkę. */ .karta{ background:var(--p1);border-radius:var(--r-l); box-shadow:0 0 0 1px var(--kr), 0 2px 4px -2px rgba(26,23,18,.09), 0 12px 26px -22px rgba(26,23,18,.30); padding:22px 24px;display:flex;flex-direction:column;gap:14px; } :root:not([data-motyw="jasny"]) .karta{box-shadow:0 0 0 1px var(--kr)} .karta > h2 + p{margin-top:-8px} .rzad{display:flex;gap:10px;align-items:center;flex-wrap:wrap} .siatka{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))} /* --------- kafle liczbowe: odczyt z przyrządu, nie kartka z tabelką ------- */ .kafle{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))} a.kafel{text-decoration:none;color:inherit;transition:border-color .15s var(--e)} a.kafel:hover{border-color:var(--kr2)} .kafel{ position:relative;background:var(--p1);border:1px solid var(--kr);border-radius:var(--r-l); padding:18px 18px 16px;overflow:hidden; } .kafel::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px; background:var(--kr2);border-radius:0 0 2px 2px} .kafel b{ display:block;font-family:var(--f);font-size:2.05rem;font-weight:700;letter-spacing:-.022em;line-height:1; font-variant-numeric:tabular-nums; } .kafel span{display:block;font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--t2);margin-top:9px} .kafel.ost::before{background:var(--awaria)} .kafel.ost b{color:var(--awaria)} /* ============================================================== formularze === */ /* Etykieta pola ma się CZYTAĆ, a nie wyglądać technicznie. Kapitaliki w mono przy „Kiedy naprawdę (wpis wsteczny)" dawały napis nie do przeczytania. */ label{display:block;font-family:var(--f);font-size:var(--t-s);font-weight:600;letter-spacing:0; text-transform:none;color:var(--t1);margin-bottom:6px} .pole{margin-bottom:14px} .pole:last-child{margin-bottom:0} /* Uwaga: `` bez atrybutu type NIE pasuje do `input[type=text]`. Dlatego wybieramy przez wykluczenie — inaczej jedno pole zostaje szare. Wykluczenia siedzą w `:where()`, bo `:where()` NIE PODNOSI szczegółowości. Pięć gołych `:not()` dawało tej regule wagę (0,5,1) — więcej, niż da się napisać na pojedyncze pole. Skutek: lupa dostawiona do pola szukania osoby nie miała jak zrobić sobie miejsca (`padding-left` z reguły na to jedno pole przegrywał ze skrótem `padding` stąd) i wjeżdżała pod napis. Po zmianie ta reguła waży tyle, co samo `input` — czyli jest tym, czym miała być: ustawieniem domyślnym, które każda konkretniejsza reguła bije. */ input:where(:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden])), select,textarea{ width:100%;background-color:var(--wklesle);color:var(--t0); border:1px solid var(--kr);border-radius:var(--r-m); padding:11px 13px;font:inherit;font-size:var(--t-b); transition:border-color .15s var(--e),box-shadow .15s var(--e); } input::placeholder,textarea::placeholder{color:var(--t3)} input:hover,select:hover,textarea:hover{border-color:var(--kr2)} input:focus,select:focus,textarea:focus{ outline:none;border-color:var(--akcent);box-shadow:0 0 0 3px var(--akcent-tlo); } input[type=file]{padding:8px 10px;cursor:pointer} input[type=file]::file-selector-button{ margin-right:12px;min-height:30px;padding:0 13px;border-radius:var(--r-s); background:var(--p2);color:var(--t0);border:1px solid var(--kr2); font:inherit;font-size:var(--t-m);font-weight:600;cursor:pointer; } input[type=file]::file-selector-button:hover{background:var(--p1)} select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--t2) 50%),linear-gradient(135deg,var(--t2) 50%,transparent 50%); background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%; background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:34px} /* ============================================================== przyciski === */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:42px;padding:0 17px;border-radius:var(--r-m); background:var(--p1);color:var(--t0);border:1px solid var(--kr2); font-family:var(--f);font-size:var(--t-b);font-weight:600;letter-spacing:-.005em; box-shadow:0 1px 2px -1px rgba(26,23,18,.10); text-decoration:none;cursor:pointer;white-space:nowrap; transition:background .15s var(--e),border-color .15s var(--e),transform .1s var(--e); } .btn:hover{background:var(--p2);border-color:var(--t3)} .btn:active{transform:scale(.975)} .btn.pri{background:var(--akcent);color:var(--na-akcencie);border-color:transparent;font-weight:700; box-shadow:0 2px 6px -2px color-mix(in srgb,var(--akcent) 55%,transparent)} .btn.pri:hover{filter:brightness(1.07);background:var(--akcent)} .btn.zly{color:var(--awaria);border-color:color-mix(in srgb,var(--awaria) 45%,transparent);background:transparent} .btn.zly:hover{background:var(--awaria-tlo)} /* Nieaktywny przycisk NIE jest przygaszonym przyciskiem akcji. `opacity:.4` na żółtym dawało bladożółtą plamę, która wygląda na zepsuty element, a nie na „jeszcze nie teraz". Nieaktywny = obojętny: szare tło, szary napis, zero koloru akcji. */ .btn[disabled],.btn[aria-disabled="true"]{ background:var(--wklesle);color:var(--t3);border-color:var(--kr); box-shadow:none;cursor:default;pointer-events:none;filter:none; } .btn.pri[disabled]{background:var(--wklesle);color:var(--t3);border-color:var(--kr)} /* Karta i formularz to kolumny flex — pojedynczy przycisk rozciągałby się na całą szerokość i wyglądał jak pas. Trzyma się lewej krawędzi. */ .karta > .btn,.karta > form > .btn,form.karta > .btn{align-self:flex-start} @media (max-width:900px){.btn{min-height:48px;padding:0 18px}.btn.pri{min-height:52px}} /* Filtry to nie akcje — wybór, nie „zrób to teraz”. Bursztyn zostaje przy jednej akcji na ekranie, filtr dostaje jasny stan wybrania. */ /* `gap`, a nie spacja w HTML: pojemnik `inline-flex` POMIJA węzły tekstowe złożone z samych spacji, więc „Z magazynu 0" sklejało się w „Z magazynu0". */ .chip{ display:inline-flex;align-items:center;gap:5px;min-height:34px;padding:0 13px;border-radius:999px; background:transparent;color:var(--t2);border:1px solid var(--kr); font-size:var(--t-m);font-weight:500;text-decoration:none;white-space:nowrap; transition:color .15s var(--e),border-color .15s var(--e),background .15s var(--e); } .chip:hover{color:var(--t0);border-color:var(--kr2)} .chip.wybrany{background:var(--p2);color:var(--t0);border-color:var(--kr2);font-weight:600; box-shadow:inset 0 0 0 1px var(--kr2)} @media (max-width:900px){.chip{min-height:40px}} /* ================================================================= tabele === */ .tabela{ background:var(--p1);border:1px solid var(--kr);border-radius:var(--r-l); overflow-x:auto;overflow-y:hidden; } table{width:100%;border-collapse:collapse;font-size:var(--t-b)} th,td{text-align:left;padding:12px 16px;vertical-align:middle} /* Nagłówek kolumny: krój TREŚCI, nie mono. Mono w wersalikach na 9,5 px daje napis, który się rozpoznaje z kształtu, a nie czyta — a nagłówek kolumny czyta się raz, przy pierwszym spotkaniu z tabelą, i wtedy musi być jednoznaczny. */ thead th{ font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.055em;text-transform:uppercase; color:var(--t2);white-space:nowrap;padding-top:13px;padding-bottom:11px; border-bottom:1px solid var(--kr); } tbody tr{border-bottom:1px solid var(--kr3)} tbody tr:last-child{border-bottom:0} tbody tr:hover{background:var(--p2)} tbody td{color:var(--t1)} td.nr,th.nr{font-family:var(--fm);font-size:var(--t-m);font-weight:600;color:var(--t0);white-space:nowrap;letter-spacing:.02em} td.gdzie{color:var(--t2);font-size:var(--t-m)} td a{text-decoration:none;color:var(--t0);font-weight:600} td a:hover{color:var(--akcent-t)} tbody tr:hover td.nr a{color:var(--akcent-t)} /* Na telefonie tabela przestaje być tabelą. Cztery kolumny na 390 px to łamanie każdej nazwy na trzy linie — zamiast tego jeden wiersz to jedna kartka, z numerem inwentarzowym na górze. */ @media (max-width:640px){ .tabela{border-radius:var(--r-l);overflow:hidden} table,tbody,tr,td{display:block;width:auto} thead{display:none} tbody tr{padding:14px 16px} th,td{padding:0} td.nr{font-size:var(--t-l);margin-bottom:3px} td.nr a{color:var(--t0)} tbody td{color:var(--t1);font-size:var(--t-b)} tbody td:empty{display:none} td.gdzie{margin-top:4px;font-size:var(--t-s);letter-spacing:0} tbody td + td{margin-top:5px} /* Skoro nagłówki tabeli znikają, kolumna musi powiedzieć sama, czym jest. */ td[data-l]::before{content:attr(data-l);display:block; font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:var(--t2);margin-bottom:2px} td.nr[data-l]::before{margin-bottom:1px} th.pr,td.pr{text-align:left} } /* =============================================================== plakietki === */ /* Plakietka stanu pisana KROJEM TREŚCI, normalną pisownią. Mono wersalikami („AWARIA", „28 DNI PO TERMINIE") było trzecim krojem na ekranie i przy pięciu plakietkach w jednej tabeli robiło się głośno — a wersaliki czyta się wolniej, bo słowo traci kształt. Mono zostaje tam, gdzie zarabia na siebie: przy numerze inwentarzowym, gdzie pomyłka 0 z O kosztuje wyjazd na budowę. */ .plakietka{ display:inline-flex;align-items:center;gap:5px; font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:0;text-transform:none; padding:3px 9px 3px 8px;border-radius:var(--r-s);white-space:nowrap; background:var(--p2);color:var(--t1);border:1px solid var(--kr); } .plakietka::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none} .p-baza{color:var(--baza);background:var(--baza-tlo);border-color:color-mix(in srgb,var(--baza) 25%,transparent)} .p-poj{color:var(--droga);background:var(--droga-tlo);border-color:color-mix(in srgb,var(--droga) 25%,transparent)} .p-aw{color:var(--awaria);background:var(--awaria-tlo);border-color:color-mix(in srgb,var(--awaria) 30%,transparent)} .p-a{color:var(--t1);background:var(--p2);border-color:var(--kr2)} .p-uwaga{color:var(--uwaga);background:var(--uwaga-tlo);border-color:color-mix(in srgb,var(--uwaga) 28%,transparent)} /* =============================================================== komunikat === */ .komunikat{ position:relative;background:var(--p1);border:1px solid var(--kr);border-radius:var(--r-l); padding:15px 18px 15px 20px;font-size:var(--t-b);color:var(--t1);overflow:hidden; } .komunikat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--akcent)} .komunikat.ok::before{background:var(--baza)} .komunikat.zly::before{background:var(--awaria)} /* Tylko PIERWSZY jest nagłówkiem komunikatu. Bez `:first-child` każde pogrubienie w treści przechodziło do nowej linii i rozbijało zdanie. */ .komunikat > b:first-child{display:block;font-family:var(--f);font-size:var(--t-xs);font-weight:600; letter-spacing:.06em;text-transform:uppercase;color:var(--t2);margin-bottom:6px} .komunikat a{color:var(--akcent-t);font-weight:600;text-decoration:underline;text-underline-offset:3px} code{font-family:var(--fm);font-size:.88em;background:var(--wklesle);border:1px solid var(--kr); border-radius:var(--r-s);padding:1px 6px;color:var(--t0);overflow-wrap:anywhere} /* ================================================== odczyt (karta pozycji) === */ .wroc{ display:inline-flex;align-items:center;gap:7px;text-decoration:none;color:var(--t2); font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase; transition:color .15s var(--e);margin-bottom:-8px; } .wroc::before{content:"←";font-family:var(--f);font-size:var(--t-s);letter-spacing:0} .wroc:hover{color:var(--t0)} .odczyt{ background:var(--p1);border:1px solid var(--kr);border-radius:var(--r-l); padding:24px;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:start; } .odczyt .numer{ font-family:var(--fm);font-weight:600;font-size:clamp(2.1rem,1.2rem + 3.4vw,3.1rem); letter-spacing:.005em;line-height:1;margin:6px 0 10px;color:var(--t0); } .odczyt h1{font-size:var(--t-xl);font-weight:600;letter-spacing:-.012em;color:var(--t1);line-height:1.35} .odczyt .rzad{margin-top:12px} .odczyt .rzad:empty{display:none} .odczyt-kto{ margin:0;display:flex;flex-direction:column;gap:14px;min-width:210px; padding-left:24px;border-left:1px solid var(--kr); } .odczyt-kto dt{font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em; text-transform:uppercase;color:var(--t2);margin-bottom:3px} .odczyt-kto dd{margin:0;font-size:var(--t-l);font-weight:600;color:var(--t0)} /* Rzecz leżąca w magazynie nie ma ani budowy, ani daty wydania — wtedy ta kolumna jest pusta i zostawałaby po niej sama kreska. Pusta ramka udaje informację. */ .odczyt-kto:empty{display:none} @media (max-width:760px){ .odczyt{grid-template-columns:1fr;gap:20px;padding:20px} .odczyt-kto{flex-direction:row;flex-wrap:wrap;gap:18px 28px;padding:18px 0 0; border-left:0;border-top:1px solid var(--kr);min-width:0} } /* ========================================================= dane pozycji ===== */ .kv{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0;align-items:baseline} .kv dt{font-family:var(--f);font-size:var(--t-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--t2)} .kv dd{margin:0;font-size:var(--t-b);font-weight:500;color:var(--t0)} .hist{display:flex;flex-direction:column;gap:0;position:relative} .hist div{display:grid;grid-template-columns:132px 1fr;gap:14px;padding:9px 0 9px 18px;position:relative; border-bottom:1px solid var(--kr3);font-size:var(--t-m);color:var(--t1)} .hist div:last-child{border-bottom:0} .hist div::before{content:"";position:absolute;left:3px;top:16px;width:5px;height:5px;border-radius:50%; background:var(--t3)} .hist div:first-child::before{background:var(--akcent)} .hist div::after{content:"";position:absolute;left:5px;top:21px;bottom:-9px;width:1px;background:var(--kr)} .hist div:last-child::after{display:none} .hist time{font-family:var(--fm);font-size:var(--t-xs);color:var(--t2);white-space:nowrap} .hist a{text-decoration:none;color:var(--t0);font-weight:600;transition:color .15s var(--e)} .hist a:hover{color:var(--akcent-t)} @media (max-width:600px){.hist div{grid-template-columns:1fr;gap:2px}} /* ============================================== etap 2: skaner i przekazania === */ .btn.duzy{min-height:52px;padding:0 24px;font-size:var(--t-l)} @media (max-width:900px){.btn.duzy{min-height:58px;width:100%}} .btn.szeroki{width:100%;justify-content:center} .btn.maly{min-height:32px;padding:0 11px;font-size:var(--t-s);font-weight:500} .skaner-karta{padding:16px} .skaner{ position:relative;aspect-ratio:4/3;border-radius:var(--r-l);overflow:hidden; background:var(--wklesle);border:1px solid var(--kr);display:grid;place-items:center; } .skaner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0; transition:opacity .3s var(--e)} .skaner.aktywny video{opacity:1} .skaner-info{ position:relative;z-index:2;max-width:32ch;text-align:center;color:var(--t1);font-size:var(--t-b); background:color-mix(in srgb,var(--p1) 82%,transparent);padding:9px 14px;border-radius:var(--r-m); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin:0; } .skaner-info.ok{color:var(--baza)} .skaner-info.zle{color:var(--awaria)} /* Celownik: cztery narożniki, nie ramka. Ramka zasłania to, co się skanuje. */ .celownik{position:absolute;inset:16% 14%;z-index:1;pointer-events:none;opacity:0;transition:opacity .3s var(--e)} .skaner.aktywny .celownik{opacity:1;animation:oddech 2.4s var(--e) infinite} .celownik i{position:absolute;width:26px;height:26px;border:2px solid var(--akcent)} .celownik i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0} .celownik i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0} .celownik i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 8px} .celownik i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 8px 0} @keyframes oddech{0%,100%{opacity:1}50%{opacity:.45}} .skaner.trafiony{box-shadow:inset 0 0 0 3px var(--baza)} .przelacz{display:flex;align-items:flex-start;gap:11px;color:var(--t1);font-size:var(--t-b); cursor:pointer;padding:11px 13px;text-transform:none;letter-spacing:0;font-family:var(--f); border:1px solid var(--kr);border-radius:var(--r-m);background:var(--p0);margin-bottom:8px; transition:border-color .15s var(--e),background .15s var(--e)} .przelacz:hover{border-color:var(--kr2)} .przelacz:has(input:checked){border-color:var(--akcent);background:var(--akcent-tlo)} .przelacz input{width:20px;height:20px;accent-color:var(--akcent);margin:2px 0 0;flex:none} .przelacz b{color:var(--t0);font-weight:600} .przelacz .pod{font-size:var(--t-s);line-height:1.45} .zebrany{ display:flex;align-items:baseline;gap:12px;padding:11px 16px;background:var(--p1); border:1px solid var(--kr);border-radius:var(--r-m);margin-top:8px;animation:wjedz .2s var(--e); } .zebrany b{font-family:var(--fm);font-size:var(--t-m);font-weight:600} .zebrany span{color:var(--t1);font-size:var(--t-b)} .lista-potw{display:flex;flex-direction:column;gap:10px} .potw{ display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap; padding:14px 16px;background:var(--p2);border:1px solid var(--kr);border-radius:var(--r-l); border-left:3px solid var(--droga); } .potw > div:first-child{display:flex;flex-direction:column;gap:2px;min-width:0} .potw span{color:var(--t1);font-size:var(--t-b)} .numer-mini{font-family:var(--fm);font-size:var(--t-b);font-weight:600;color:var(--t0)} .spozniony{color:var(--uwaga)!important} .rozwin{border-top:1px solid var(--kr3);padding-top:14px} .rozwin > summary{ cursor:pointer;list-style:none;color:var(--t1);font-weight:600;font-size:var(--t-b); display:flex;align-items:center;gap:8px;padding:6px 0;min-height:40px; } .rozwin > summary::-webkit-details-marker{display:none} .rozwin > summary::before{content:"+";font-family:var(--fm);color:var(--t2);font-size:var(--t-l)} .rozwin[open] > summary::before{content:"–"} .rozwin > summary:hover{color:var(--t0)} .rozwin > form{padding-top:8px} /* Rozwijane W KOMÓRCE TABELI nie rysuje kreski nad sobą — tam kreski robi tabela, a nasza wisiała jako urwany odcinek nad słowem „Zmień". */ .tabela .rozwin{border-top:0;padding-top:0} .tabela .rozwin > summary{justify-content:flex-end;min-height:34px;white-space:nowrap} .tabela .rozwin[open] > summary{color:var(--t0)} .tabela .rozwin form{text-align:left;white-space:normal} /* Rozwijane, którego podgląd MA wyglądać jak zwykły przycisk (details+summary tylko po to, żeby kliknięcie otworzyło formularz obok) — bez znaczka +/– i bez rozciągania na całą szerokość, którego .rozwin normalnie chce dla podpisów w stylu "pokaż więcej". */ .rozwin > summary.btn{display:inline-flex;width:auto} .rozwin > summary.btn::before{content:none} .tabela .rozwin > summary.btn{justify-content:center} /* `.rozwin > summary` waży więcej niż `.btn` i zabierał przyciskowi boczne odstępy (padding 6px 0), a w tabeli wysokość (34px). Wymiary wracają do tych z `.btn`. */ .rozwin > summary.btn, .tabela .rozwin > summary.btn{padding:0 17px;min-height:42px;font-size:var(--t-b)} /* Rozwijane, które JEST czynnością, a nie przypisem. Na karcie sprzętu „Przekaż komuś innemu" wyglądało jak szary podpis obok wielkiego „Przejmuję" i ginęło — a to jest jedna z trzech rzeczy, które się na tej karcie robi. */ .rozwin.przycisk{border-top:0;padding-top:0;margin-top:10px} .rozwin.przycisk > summary{ justify-content:center;gap:10px;min-height:48px;padding:0 20px; border:1px solid var(--kr2);border-radius:var(--r-m);background:var(--p1); color:var(--t0);font-size:var(--t-l); transition:border-color .18s var(--e),background .18s var(--e); } .rozwin.przycisk > summary:hover{border-color:var(--akcent);background:var(--akcent-tlo)} .rozwin.przycisk[open] > summary{border-bottom-left-radius:0;border-bottom-right-radius:0;background:var(--wklesle)} .rozwin.przycisk[open] > form{ border:1px solid var(--kr2);border-top:0;border-radius:0 0 var(--r-m) var(--r-m); padding:16px;margin-top:-1px; } .akcje-karty{gap:10px} .akcje-karty > form{flex:1 1 220px;margin:0} .akcje-karty .btn{width:100%} .wstep{max-width:70ch;color:var(--t1);font-size:var(--t-l);margin:-4px 0 2px} .kroki{margin:0;padding-left:1.3em;color:var(--t1);display:flex;flex-direction:column;gap:8px} .kroki li{padding-left:4px} .kroki b{color:var(--t0)} /* ============================================== pulpit: sprawy i wykresy === */ /* Pulpit nie jest tablicą liczb, tylko listą spraw do załatwienia. Siedem jednakowych kafelków („12 pozycji" tak samo głośno jak „3 w awarii") nie mówiło nic — teraz każdy wiersz ma czynność i przycisk, a liczby są tłem, nie treścią. */ .pas-gorny{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap} .pas-gorny h1{margin-bottom:2px} .sprawy{gap:0;padding:0} .sprawy > .rzad{padding:18px 24px 14px;border-bottom:1px dashed var(--kr2)} .sprawa{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:18px; padding:15px 24px;border-bottom:1px solid var(--kr3)} .sprawa:last-child{border-bottom:0} .sprawa .bel{width:48px;height:48px;border-radius:var(--r-m);display:grid;place-items:center; font-family:var(--fm);font-weight:600;font-size:var(--t-l);font-variant-numeric:tabular-nums; background:var(--p2);color:var(--t1);border:1px solid var(--kr)} .sprawa.zle .bel{background:var(--awaria-tlo);color:var(--awaria);border-color:transparent} .sprawa.uwaga .bel{background:var(--uwaga-tlo);color:var(--uwaga);border-color:transparent} .sprawa.akcja .bel{background:var(--akcent-tlo);color:var(--akcent-t);border-color:transparent} .sprawa .tresc{min-width:0} .sprawa .tresc b{display:block;font-size:var(--t-l);font-weight:600;letter-spacing:-.012em} .sprawa .tresc span{display:block;color:var(--t2);font-size:var(--t-m);overflow-wrap:anywhere} .sprawa .btn{min-height:38px;padding:0 14px;font-size:var(--t-m)} @media (max-width:620px){ .sprawa{grid-template-columns:40px 1fr;gap:12px;padding:14px 18px} .sprawa .bel{width:40px;height:40px;font-size:var(--t-b)} .sprawa .btn{grid-column:1 / -1;justify-self:stretch;min-height:44px} .sprawy > .rzad{padding:16px 18px 12px} } /* Pasek proporcji: jedno spojrzenie i wiadomo, ile majątku jest w terenie. */ .proporcja{display:flex;height:44px;border-radius:var(--r-m);overflow:hidden;gap:3px} .proporcja div{display:flex;align-items:center;padding-left:13px;min-width:0; font-size:var(--t-s);font-weight:600;white-space:nowrap; font-variant-numeric:tabular-nums} /* Tło i napis chodzą PARAMI. Kolor napisu wpisany raz dla całego paska znaczy, że przy zmianie akcentu jeden kawałek robi się nieczytelny i nikt tego nie zauważa, bo pozostałe trzy wyglądają dobrze. Ta sama para obsługuje kwadracik w legendzie. */ .p-ludzi{background:var(--akcent);color:var(--na-akcencie)} .p-w-bazie{background:var(--baza);color:#fff} .p-w-naprawie{background:var(--awaria);color:#fff} .p-wycofane{background:var(--t3);color:var(--t0)} .legenda{display:flex;gap:8px 26px;flex-wrap:wrap;margin-top:-2px} .legenda a{display:flex;align-items:center;gap:9px;font-size:var(--t-m);color:var(--t1);text-decoration:none; padding:4px 0;transition:color .15s var(--e)} .legenda a:hover{color:var(--t0)} .legenda s{width:9px;height:9px;border-radius:3px;text-decoration:none;flex:none} .legenda b{font-family:var(--fm);font-weight:600;color:var(--t0);font-variant-numeric:tabular-nums} /* `min-width:0` na dzieciach siatki. Bez tego element siatki nie schodzi poniżej szerokości swojej treści (domyślne `min-width:auto`) — wykres słupkowy rozpychał kartę do 413 px na ekranie szerokim na 390 i cała strona jechała w bok. */ .dwie{display:grid;grid-template-columns:1.08fr 1fr;gap:16px} .dwie > *{min-width:0} @media (max-width:900px){.dwie{grid-template-columns:1fr}} .wielka{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:-4px 0 2px} .wielka > b{font-family:var(--f);font-size:2rem;font-weight:700;letter-spacing:-.022em;line-height:1; font-variant-numeric:tabular-nums} .wielka span{font-size:var(--t-m);color:var(--t2)} .wielka span b{font-family:var(--fm);font-size:var(--t-l);color:var(--t0);font-variant-numeric:tabular-nums} .wielka .wyr-uwaga{color:var(--uwaga)} .wykres{display:block;width:100%;overflow:visible} :root{--akcent-slaby:color-mix(in srgb,var(--akcent) 34%,var(--p1))} .osx{display:flex;justify-content:space-between;font-family:var(--fm);font-size:var(--t-xs);color:var(--t3);margin-top:-4px} .najdrozsze{border-top:1px solid var(--kr3);padding-top:12px;display:flex;flex-direction:column;gap:8px} .najdrozsze a{display:flex;justify-content:space-between;gap:14px;text-decoration:none;font-size:var(--t-m);color:var(--t1)} .najdrozsze a:hover em{color:var(--akcent-t)} .najdrozsze em{font-style:normal;color:var(--t0);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .najdrozsze b{font-family:var(--fm);font-weight:600;color:var(--t0);white-space:nowrap;font-variant-numeric:tabular-nums} /* Stan pusty ma mówić, co zrobić dalej — a nie „brak danych". */ .pusto{padding:18px 0;text-align:left} .pusto b{display:block;font-size:var(--t-l);font-weight:600;margin-bottom:3px} .pusto span{display:block;color:var(--t2);font-size:var(--t-m)} .pusto a{color:var(--akcent-t);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* Podpowiedź pod polem: po co to pole i co się stanie, jak zostawić puste. */ .podpowiedz{font-size:var(--t-s);line-height:1.45;color:var(--t2);margin:6px 0 0;max-width:60ch} .pole .podpowiedz{margin-bottom:0} /* ================================================== pasek postępu spisu === */ /* Przy stu pozycjach jedyne, co się liczy w terenie, to „ile jeszcze zostało". */ .postep{display:flex;flex-direction:column;gap:9px} .postep-pasek{height:12px;border-radius:999px;background:var(--wklesle);overflow:hidden; box-shadow:inset 0 0 0 1px var(--kr)} .postep-pasek i{display:block;height:100%;background:var(--akcent);border-radius:999px; transition:width .3s var(--e)} .postep-opis{font-size:var(--t-b);color:var(--t1)} .postep-opis b{font-family:var(--fm);font-weight:600;color:var(--t0);font-variant-numeric:tabular-nums} .wyr-uwaga{color:var(--uwaga);font-weight:600} .wyr-droga{color:var(--droga);font-weight:600} .protokol-sekcja{font-family:var(--f);font-size:var(--t-l);font-weight:700;letter-spacing:-.015em; margin:22px 0 4px;display:flex;align-items:baseline;gap:9px} .protokol-sekcja span{font-family:var(--fm);font-size:var(--t-xs);font-weight:600;color:var(--t2); background:var(--p2);border:1px solid var(--kr);border-radius:999px;padding:1px 8px} .protokol-podsumowanie{font-size:var(--t-l);color:var(--t1)} .protokol-podsumowanie b{font-family:var(--fm);color:var(--t0);font-variant-numeric:tabular-nums} /* ================================================= usterki i naprawy === */ /* Otwarta usterka to nie wiersz tabeli, tylko rzecz do załatwienia — dostaje własne pudełko z paskiem po lewej. Czerwony pasek = sprzęt stoi, pomarańczowy = pracuje, ale czeka na warsztat. */ .usterka{ position:relative;background:var(--p1);border:1px solid var(--kr);border-radius:var(--r-l); padding:14px 16px 12px;margin-bottom:10px;overflow:hidden; } .usterka::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--uwaga)} .usterka.blok::before{background:var(--awaria)} .usterka > .rzad > div{min-width:0} .usterka b{color:var(--t0);font-weight:600} .usterka-nr{margin:0 0 3px} .usterka-nr a{font-family:var(--fm);font-size:var(--t-b);font-weight:600;color:var(--t0); text-decoration:none;letter-spacing:.02em} .usterka-nr a:hover{color:var(--akcent-t)} .usterka-nr .pod{margin-left:8px} .usterka .rozwin{border-top:1px solid var(--kr3)} .usterka .rozwin > summary{font-size:var(--t-m)} /* Wybór jeden z dwóch, opisany słowami. Sam napis „blokuje" nic nie znaczy człowiekowi, który stoi w błocie i chce wiedzieć, czy może dalej pracować. */ .wybor{display:flex;flex-direction:column;gap:8px} .wybor > label{ display:flex;gap:10px;align-items:flex-start;cursor:pointer; padding:10px 12px;border:1px solid var(--kr);border-radius:var(--r-m);background:var(--p0); transition:border-color .15s var(--e),background .15s var(--e); } .wybor > label:hover{border-color:var(--kr2)} .wybor > label:has(input:checked){border-color:var(--akcent);background:var(--akcent-tlo)} .wybor input{margin-top:3px;flex:none} .wybor .pod{font-size:var(--t-s)} th.pr,td.pr{text-align:right} /* ================================================================ naklejki === */ .naklejki{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr))} /* Naklejka jest zawsze biało-czarna, niezależnie od motywu aplikacji — drukarka nie zna zmiennych CSS, a naklejka ma być czytelna po roku w błocie. Bohaterem jest NUMER: w terenie pada „gdzie jest N-0201", nie „gdzie jest zagęszczarka". Reszta linijek jest opcjonalna i włącza się w panelu nad wydrukiem. */ .nak{ background:#fff;color:#000;border:1px solid #9aa2a0;border-radius:6px; padding:9px;display:flex;gap:10px;align-items:center;break-inside:avoid; } .nak svg{flex:none;width:76px;height:76px} .nak.duza svg{width:104px;height:104px} .nak.mala svg{width:58px;height:58px} .nak .t{font-family:var(--fm);min-width:0;overflow-wrap:anywhere;line-height:1.25} .nak .t b{display:block;font-size:var(--t-xl);font-weight:700;letter-spacing:.01em;color:#000} .nak.duza .t b{font-size:25px} .nak.mala .t b{font-size:var(--t-b)} .nak .firma{display:block;font-size:var(--t-xs);font-weight:600;letter-spacing:.09em; text-transform:uppercase;color:#000;margin-bottom:2px} .nak .t span{display:block;font-size:var(--t-xs);margin-top:3px;color:#333} .nak .drobne{font-size:var(--t-xs);color:#555;margin-top:2px} /* Panel „co ma się wydrukować" — na ekranie, nigdy na papierze. */ .nak-pola{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:14px} .nak-pola label{display:flex;align-items:center;gap:7px;margin:0; font-family:var(--f);font-size:var(--t-b);letter-spacing:0;text-transform:none;color:var(--t1);cursor:pointer} .nak-pola input{flex:none} .nak-podglad{display:flex;gap:16px;align-items:center;flex-wrap:wrap; padding:14px;border:1px dashed var(--kr2);border-radius:var(--r-m);background:var(--wklesle)} /* ==================================== zaznaczanie wielu pozycji na liście === */ th.zazn,td.zazn{width:44px;padding-right:0} td.zazn input,th.zazn input{width:20px;height:20px;accent-color:var(--akcent);margin:0;cursor:pointer} .zaznaczanie tbody tr:has(input:checked){background:var(--akcent-tlo)} .pasek-zazn{ position:sticky;bottom:0;z-index:20;margin-top:-1px; display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:12px 16px;border:1px solid var(--kr);border-top:0; border-radius:0 0 var(--r-l) var(--r-l); /* NIEPRZEZROCZYSTY. Mleczna szyba z rozmyciem przepuszczała czerwoną plakietkę „awaria" z wiersza pod spodem — wyglądało to na błąd rysowania, a nie na efekt. Pasek stoi NAD listą i ma zasłaniać to, co pod nim; cień mówi, że coś tam jest. */ background:var(--p1); box-shadow:0 -10px 20px -14px rgba(0,0,0,.35); } /* ============================================================ terminy ==== */ /* Termin to nie wiersz tabeli, tylko kartka z badania: data jest bohaterem, a pilność widać z odległości po lewej krawędzi — bez czytania. */ .terminy-lista{display:flex;flex-direction:column;gap:12px} .termin{ border:1px solid var(--kr);border-left:4px solid var(--baza);border-radius:var(--r-m); padding:14px 16px;display:flex;flex-direction:column;gap:10px;background:var(--p1); } .termin.zbliza-sie{border-left-color:var(--uwaga);background:var(--uwaga-tlo)} .termin.po-terminie{border-left-color:var(--awaria);background:var(--awaria-tlo)} .termin-glowa{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between} .termin-glowa b{font:700 var(--t-l)/1.2 var(--f);color:var(--t0)} .termin .kv{margin:0} .data-mocna{font-family:var(--fm);font-weight:600;font-variant-numeric:tabular-nums;color:var(--t0)} .btn.maly{min-height:36px;padding:0 12px;font-size:var(--t-m)} /* ======================================================= kody obce ======= */ /* Surowa treść naklejki. Idzie monospacem i łamie się w dowolnym miejscu — kod Hilti bywa długim adresem, a obcięcie go wielokropkiem znaczyłoby, że nie da się porównać tego, co na ekranie, z tym, co na sprzęcie. */ .kod-surowy{ font:600 var(--t-b)/1.45 var(--fm);color:var(--t0);margin:4px 0 0; word-break:break-all;overflow-wrap:anywhere; } .kod-wpis{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap; border:1px solid var(--kr);border-left:4px solid var(--droga);border-radius:var(--r-m); padding:12px 14px;background:var(--p1); } .kod-wpis > div{min-width:0;flex:1 1 240px} /* ======================================================= własne pola ===== */ /* Pary nazwa-wartość. Dwie równe kolumny na komputerze, jedna pod drugą na telefonie — pole nazwy ma być tak samo szerokie jak wartość, bo „Wysokość podnoszenia" to nie jest krótsza etykieta niż „Kolor". */ .cechy{display:flex;flex-direction:column;gap:8px} .cecha{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:8px} @media (max-width:620px){.cecha{grid-template-columns:1fr}} .cecha input{width:100%} /* ============================================================== grupy ==== */ /* Podział rzeczowy przeniesiony z arkusza: nagłówek szuflady w tabeli i pigułki z licznikami nad listą. Nagłówek ma być czytelny jako PRZERWA, nie jako wiersz danych — stąd wcięcie na kolumnę zaznaczania i ciepłe tło. */ .grupa-naglowek td{ background:var(--wklesle);border-top:1px solid var(--kr);border-bottom:1px solid var(--kr); font:600 var(--t-xs)/1 var(--f);letter-spacing:.07em;text-transform:uppercase;color:var(--t1); padding:9px 16px 9px 60px!important; } .grupa-naglowek td span{font-weight:500;color:var(--t2);text-transform:none;letter-spacing:.02em;margin-left:8px} .grupa-naglowek td::before{content:none!important} @media (max-width:900px){ .grupa-naglowek td{padding-left:16px!important} .grupa-naglowek{display:block} } .chipy-grup{gap:6px;flex-wrap:wrap;margin:-6px 0 2px} .chipy-grup .chip b{font-family:var(--fm);font-weight:600;color:var(--t2);margin-left:4px} .chipy-grup .chip.wybrany b{color:var(--t0)} /* =============================================================== kroki === */ /* Pasek kroków dla wydania i zwrotu. Powód: „Krok 1 z 2" napisane szarym tekstem w akapicie nie jest widoczne — człowiek nie wie, ile jeszcze przed nim ani że na końcu czeka protokół do podpisu. Krok zrobiony jest KLIKALNY i wraca do siebie. */ .krok-pasek{ flex-direction:row; display:flex;align-items:center;gap:4px;flex-wrap:nowrap; list-style:none;margin:0 0 4px;padding:0;overflow-x:auto;-webkit-overflow-scrolling:touch; } .krok-pasek::-webkit-scrollbar{display:none} .krok-pasek li{display:flex;align-items:center;gap:4px;flex:0 0 auto} .krok-pasek li::after{ content:"";width:7px;height:7px;flex:0 0 7px;margin:0 6px; border-right:2px solid var(--t3);border-top:2px solid var(--t3);transform:rotate(45deg); } .krok-pasek li:last-child::after{display:none} .krok-pasek .krok{ display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px; border-radius:999px;font:600 var(--t-s)/1 var(--f);color:var(--t2); text-decoration:none;white-space:nowrap; } .krok-pasek .n{ width:24px;height:24px;flex:0 0 24px;border-radius:50%; display:grid;place-items:center;font:600 var(--t-xs)/1 var(--fm); background:var(--wklesle);color:var(--t2);border:1px solid var(--kr); } .krok-pasek .zrobiony .krok{color:var(--akcent-t)} .krok-pasek .zrobiony .n{background:var(--akcent);color:var(--na-akcencie);border-color:transparent} .krok-pasek .zrobiony .krok:hover{background:var(--akcent-tlo)} .krok-pasek .teraz .krok{background:var(--p1);color:var(--t0);box-shadow:var(--cien-maly,0 1px 2px rgba(0,0,0,.06)),inset 0 0 0 1px var(--kr2)} .krok-pasek .teraz .n{background:var(--akcent);color:var(--na-akcencie);border-color:transparent} @media (max-width:520px){ .krok-pasek .krok{font-size:var(--t-xs);padding:5px 10px 5px 5px;gap:6px} .krok-pasek .n{width:21px;height:21px;flex-basis:21px;font-size:var(--t-xs)} .krok-pasek li::after{margin:0 2px} /* Na telefonie trzy nazwy kroków nie mieszczą się w szerokości ekranu i ostatnia kończyła się urwanym „Protokó…". Urwane słowo wygląda na zepsuty program. Nazwę nosi krok, w którym się stoi; pozostałe zostają samymi numerami — i tak mówią to, co trzeba: ile kroków jest i który to z kolei. */ .krok-pasek li:not(.teraz) .nazwa{display:none} .krok-pasek li:not(.teraz) .krok{padding:5px} } /* ================================================== kafelek akcji ======== */ /* JEDNA wspólna klasa dla KAŻDEGO klikalnego kafelka-akcji w całej aplikacji — pulpit, tankowanie, tablet przy pompie, panel czynności na karcie sprzętu. Zgłoszenie wprost: „kafelki są stylowane każdy z osobna, więc się różnią — inne rogi, inne odstępy, inne rozmiary liter, czasem brakuje ikony. Chcę to raz a porządnie ujednolicić." Wcześniej to samo miejsce miało DWIE osobne definicje (`.akcja-duza` i `.czyn-btn`), które się rozjeżdżały niezależnie — ta sama treść z dwoma różnymi rogami i odstępami, zależnie od tego, na który ekran trafiłeś. Teraz jest jedna definicja, a różnicę niesie WYŁĄCZNIE modyfikator `--glowny`. IKONA JEST OBOWIĄZKOWA — żaden kafelek nie wychodzi bez niej w tym samym okrągłym tle. Element może być `` (przejście) albo `