/* Portal Lauron — system wizualny panelu operatora Ciemny, gęsty, liczby w czcionce maszynowej. Kolor wiodący: bursztyn. */ /* ── SKALA TEKSTU ── Rozmiary czcionek są w rem, więc wystarczy przestawić podstawę na . Odstępy i ramki zostają w px — rośnie TEKST, a nie cała maszyna, dzięki czemu przy „dużej" na ekran wchodzi wciąż tyle samo wierszy. */ html{font-size:16px;} html[data-czcionka="mala"]{font-size:15px;} html[data-czcionka="duza"]{font-size:18px;} :root{ --tlo:#12151a; --tlo2:#141820; --szyna:#0e1116; --karta:#171b21; --pole:#1c2128; --pole2:#1e2530; --kreska:#242c36; --kreska2:#2a323d; --kreska3:#3a4553; --tekst:#e9edf2; --tekst2:#98a3b2; --tekst3:#6b7686; --tekst4:#5c6675; /* ── KOLOR AKCENTU ── Nazwy --bursztyn* zostają, bo używa ich cały program — ale biorą wartość z --akcent*. Dzięki temu zmiana akcentu w paletce przestawia WSZYSTKO naraz, a nie trzeba niczego przepisywać ekran po ekranie. */ --akcent:#f0a92e; --akcent-c:#221806; --akcent-t:#241c0e; --akcent-k:#7a5511; --bursztyn:var(--akcent); --bursztyn-c:var(--akcent-c); --bursztyn-t:var(--akcent-t); --bursztyn-k:var(--akcent-k); --ok:#4ec48a; --ok-t:#12372a; --uwaga:#f2803f; --uwaga-t:#3d2214; --blad:#f2606a; --blad-t:#3d1a1e; /* okno modalne — celowo JASNIEJSZE od strony, zeby bylo widac ze cos sie otworzylo */ --okno:#1e2531; --okno-gora:#28323f; --okno-pole:#141920; --okno-sekcja:#171f28; --r:8px; --r2:6px; /* ── PODKŁADY WIERSZY ── ⚠️ Nazwane po ZNACZENIU, nie po barwie — dzięki temu w jasnym motywie wystarczy przestawić je w jednym miejscu, a nie szukać hexów po ekranach. Kolor wpisany na sztywno w ekranie zostaje ciemny na białej stronie i wygląda jak awaria. */ --w-uwaga:#1e1a12; /* czeka na uzupełnienie */ --w-poza:#141b1e; /* celowo poza obiegiem — np. nie na fakturze */ --w-martwy:#1a1416; /* anulowane, zablokowane */ --w-probny:#151a20; /* dokument próbny */ --w-paliwo:#121c19; /* paliwa i AdBlue — rabat kwotowy, nie narzut */ --w-sekcja:#1a1710; /* nagłówek sekcji wyróżnionej */ --w-alarm:#1c1416; /* kafel alarmowy */ --najazd:#1b2029; /* wiersz pod myszką */ } *{box-sizing:border-box;} html,body{height:100%;} body{ margin:0; background:var(--tlo); color:var(--tekst); font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:0.8125rem; line-height:1.55; -webkit-font-smoothing:antialiased; } a{color:var(--akcent);text-decoration:none;} a:hover{filter:brightness(1.18);text-decoration:underline;} :focus-visible{outline:2px solid var(--bursztyn);outline-offset:2px;border-radius:4px;} h1,h2,h3,.marka{font-family:"Bricolage Grotesque","Instrument Sans",sans-serif;letter-spacing:-.018em;} .num{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;} .lbl{font-size:0.625rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--tekst4);} /* ── układ ── */ .app{display:grid;grid-template-columns:216px 1fr;min-height:100vh;} /* ⚠️ MENU ZOSTAJE NA MIEJSCU przy przewijaniu. Przy liście 1400 pozycji przewinięcie w dół zabierało menu i żeby przejść gdziekolwiek indziej trzeba było wracać na samą górę. Górny pasek był przyklejony już wcześniej. ⚠️ Szyna musi mieć WŁASNE przewijanie: przy długim menu na niskim ekranie dolną część inaczej nie da się doklikać. */ .szyna{background:var(--szyna);border-right:1px solid var(--kreska);display:flex;flex-direction:column; position:sticky;top:0;height:100vh;overflow-y:auto;z-index:40;} .szyna-logo{display:flex;align-items:center;gap:9px;padding:19px 18px 17px;border-bottom:1px solid var(--kreska);} .kropka{width:9px;height:9px;border-radius:50%;background:var(--bursztyn);flex-shrink:0;} .marka{font-weight:700;font-size:1rem;} .menu{display:flex;flex-direction:column;gap:2px;padding:8px 10px;} .menu .lbl{padding:14px 11px 6px;} .mi{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:5px;color:var(--tekst2);font-weight:500;} .mi:hover{background:var(--tlo2);color:var(--tekst);} .mi.tu{background:var(--pole2);color:var(--bursztyn);} .mi svg{flex-shrink:0;} .mi .licznik{margin-left:auto;font-size:0.625rem;font-weight:700;padding:2px 6px;border-radius:4px;background:var(--akcent-t);color:var(--akcent);} .zrodla{margin-top:auto;padding:14px 16px 16px;border-top:1px solid var(--kreska);display:flex;flex-direction:column;gap:8px;} .zrodlo{display:flex;align-items:center;gap:8px;} .led{width:6px;height:6px;border-radius:50%;background:var(--tekst4);flex-shrink:0;} .led.ok{background:var(--ok);} .led.uwaga{background:var(--uwaga);} .led.blad{background:var(--blad);} .tresc{display:flex;flex-direction:column;min-width:0;} .gora{display:flex;align-items:center;gap:14px;padding:0 22px;height:58px;border-bottom:1px solid var(--kreska); background:var(--tlo2);position:sticky;top:0;z-index:20;} .gora h1{font-size:1.0625rem;font-weight:600;margin:0;} .srodek{padding:20px 22px 40px;display:flex;flex-direction:column;gap:16px;} /* ── elementy ── */ .karta{background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);} .karta-gl{display:flex;align-items:center;gap:11px;padding:14px 16px;border-bottom:1px solid var(--kreska);} .karta-gl h2{font-size:0.875rem;font-weight:600;margin:0;letter-spacing:-.005em;} .btn{display:inline-flex;align-items:center;gap:7px;border:0;border-radius:var(--r2);padding:8px 14px; font-family:inherit;font-size:0.8125rem;font-weight:600;cursor:pointer;background:var(--bursztyn);color:var(--bursztyn-c);} /* ⚠️ Rozświetlamy AKCENT, zamiast wpisywać drugi kolor — inaczej przycisk pod myszką wraca do bursztynu, choć człowiek wybrał niebieski. */ .btn:hover{filter:brightness(1.14);} .btn.duchy{background:transparent;border:1px solid var(--kreska2);color:var(--tekst2);font-weight:500;} .btn.duchy:hover{border-color:var(--kreska3);color:var(--tekst);background:var(--tlo2);} .btn[disabled]{opacity:.45;cursor:not-allowed;} /* ⚠️ `maly` i `glowny` były używane w kilkunastu miejscach, ale NIGDY nie istniały w arkuszu — czyli od zawsze nic nie robiły. Zamiast poprawiać kilkanaście miejsc, definiujemy je raz tutaj. */ .btn.maly{padding:5px 10px;font-size:0.6875rem;} .btn.glowny{font-weight:700;box-shadow:0 1px 0 rgba(0,0,0,.25);} /* Sekcja w oknie — ramka z paskiem po lewej, żeby okno nie było jedną płachtą. */ .okno-sekcja{position:relative;border:1px solid var(--kreska3);background:var(--okno-sekcja); border-radius:var(--r2);padding:15px 17px;overflow:hidden;} .okno-sekcja::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--akcent);} .okno-naglowek{font-size:0.6875rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase; color:var(--tekst3);margin-bottom:11px;} label{display:block;} .pole-etykieta{font-size:0.625rem;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--tekst4);margin-bottom:7px;} input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],select,textarea{ width:100%;background:var(--pole);border:1px solid var(--kreska2);border-radius:var(--r2); padding:11px 13px;color:var(--tekst);font-family:inherit;font-size:0.8125rem;} input:focus,select:focus,textarea:focus{border-color:var(--bursztyn);outline:none;} input::placeholder{color:var(--tekst4);} table{border-collapse:collapse;width:100%;} th{text-align:left;font-size:0.625rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--tekst3); padding:10px 14px;background:var(--tlo2);border-bottom:1px solid var(--kreska2);position:sticky;top:58px;z-index:5;} td{padding:11px 14px;border-bottom:1px solid #1e242d;} /* WARNING Tabela w kontenerze z overflow tworzy WLASNY kontekst przewijania. Naglowek z top:58px zostaje w nim zepchniety 58 px w dol i ZASLANIA PIERWSZY WIERSZ - wiersz jest w zrodle strony, ale nie ma go na ekranie. Wewnatrz takiego kontenera naglowek trzyma sie JEGO gory, czyli top:0. Kotwica 58px ma sens tylko dla tabel przyklejanych do paska strony. */ div[style*="overflow-x"] th, div[style*="overflow-y"] th, .przewijana th{top:0;} tbody tr:last-child td{border-bottom:none;} tbody tr:hover{background:var(--najazd);} .przewijak{overflow-x:auto;} /* ⚠️ Nagłówek przyklejamy do OKNA (top:58px = wysokość górnej belki), ale gdy tabela siedzi w kontenerze z własnym przewijaniem, przyklejenie liczy się od jego krawędzi — nagłówek zjeżdża 58 px w dół i ZASŁANIA PIERWSZY WIERSZ. Wiersz jest w źródle, na ekranie go nie ma, i nikt nie wie dlaczego. Wewnątrz .przewijak odsunięcie musi być zerowe. */ .przewijak th{top:0;} .plakietka{display:inline-flex;align-items:center;gap:5px;font-size:0.6875rem;font-weight:600;padding:3px 8px;border-radius:4px;white-space:nowrap;} .p-ok{background:var(--ok-t);color:var(--ok);} .p-uwaga{background:var(--uwaga-t);color:var(--uwaga);} .p-blad{background:var(--blad-t);color:var(--blad);} .p-bursztyn{background:var(--bursztyn-t);color:var(--bursztyn);} .p-szary{background:var(--pole2);color:var(--tekst2);} .komunikat{display:flex;align-items:flex-start;gap:11px;border-radius:var(--r);padding:14px 16px;line-height:1.55;} .k-blad{background:var(--blad-t);border:1px solid #5a2c2f;color:#ffb3b8;} .k-ok{background:var(--ok-t);border:1px solid #1d5b41;color:#8fe3b5;} .k-info{background:var(--akcent-t);border:1px solid var(--akcent-k);color:var(--tekst2);} .pusto{text-align:center;padding:56px 24px;color:var(--tekst3);} .pusto h3{font-size:1.0625rem;color:var(--tekst2);margin:0 0 8px;} /* ── logowanie / instalator ── */ /* ⚠️⚠️ JEDEN OBRAZ NA CAŁY EKRAN, PANEL NA SZKLE. Rafał 08.09.2026: „miesza się trochę ten temat z logowaniem, bo wpisuje swoje dane i przechodzi na model stary; chciałbym, aby to logowanie cały czas było oparte o ten model z przejściem tonalnym, dopiero po zalogowaniu wchodzi to okna app.lauron.eu". Wcześniej ekran był podzielony na dwie kolumny: zdjęcie po lewej, PEŁNA ŚCIANA po prawej. Człowiek szedł z wizytówki, gdzie panel jest ze szkła na tle stacji, i tu trafiał na inną stronę. Teraz jest tak samo: fotografia idzie przez całe okno, ma to samo przejście w czerń, a formularz siedzi w tym samym szklanym panelu z prawej. ⚠️ Na telefonie zdjęcie ZOSTAJE. Poprzednia wersja chowała je (`display:none`) i cały zabieg znikał dokładnie tam, gdzie loguje się większość ludzi. */ .wejscie{position:relative;min-height:100svh;display:flex;align-items:stretch; justify-content:flex-end;overflow:hidden;} .wejscie-foto{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%; object-fit:cover;object-position:50% 38%;} /* ⚠️ Ten sam gradient co na wizytówce lauron.eu — nie „podobny", ten sam. */ .wejscie-cien{position:absolute;top:0;left:0;right:0;bottom:0; background:linear-gradient(180deg,rgba(14,17,22,.42) 0%,rgba(14,17,22,.58) 38%, rgba(14,17,22,.94) 78%,#0e1116 100%);} /* ⚠️ Logo trzyma się tej samej wysokości co pasek na wizytówce (16 px od góry) — inaczej przy przejściu lauron.eu → logowanie znak firmowy przeskakuje w dół. */ .wejscie-lewa{position:relative;flex:1 1 auto;min-width:0;padding:18px 60px 56px; display:flex;flex-direction:column;} .wejscie-tresc{position:relative;} /* ⚠️ Szkło, nie ściana: krycie 0,46–0,58 i lekkie nasycenie, dokładnie jak szuflada na wizytówce. Niżej tekst zaczyna walczyć z tłem, wyżej robi się z tego znów ściana. */ .wejscie-prawa{position:relative;flex:0 0 auto;width:min(420px,100%); display:flex;flex-direction:column;justify-content:center;padding:56px 34px; background:linear-gradient(180deg,rgba(14,17,22,.46) 0%,rgba(14,17,22,.58) 100%); backdrop-filter:blur(10px) saturate(165%); border-left:1px solid rgba(255,255,255,.22);box-shadow:-30px 0 70px rgba(0,0,0,.4);} .wejscie-prawa input{background:rgba(0,0,0,.35);border-color:rgba(255,255,255,.22);} .wejscie h1{font-size:2.75rem;font-weight:600;line-height:1.08;letter-spacing:-.028em; margin:0 0 18px;max-width:15ch;text-wrap:balance;} .wejscie-prawa h1{font-size:1.625rem;max-width:none;margin:0 0 8px;} /* ══════ Pasek strony na ekranach wejścia ══════ ⚠️⚠️ STRONA NIE MOŻE ZNIKNĄĆ W TRAKCIE LOGOWANIA. Rafał 08.09.2026: „po wpisaniu adresu, a przed wpisaniem hasła strona można powiedzieć, że przestanie istnieć, bo jest app.lauron.eu — cały czas musi być dostęp do całej strony, także w trakcie tego logowania". Człowiek, który przyszedł z wizytówki, ma nad panelem logowania ten sam pasek co tam: logo wraca na stronę główną, a menu prowadzi wprost do „Paliw", „Stacji Snu", „Stacji Smaku" i „Kontaktu". Logowanie przestaje być ślepą uliczką — z każdej chwili da się wrócić do treści i nic się nie traci. ⚠️ WŁASNE NAZWY KLAS, nie `.pasek` i `.menu`. Te dwie są już zajęte w panelu (szyna boczna i pasek wersji) i przemalowałyby zalogowany program. ⚠️ Odnośniki są PEŁNE (https://lauron.eu/...), bo to inna domena niż app.lauron.eu. Względne „/#paliwa" prowadziłoby z powrotem na logowanie. */ /* ⚠️ Pasek siedzi W LEWEJ KOLUMNIE, nie na całej szerokości okna — ma kończyć się tam, gdzie zaczyna się szklany panel. Rozciągnięty na całe okno wchodził menu na formularz logowania. */ .wejscie-pasek{position:relative;flex:0 0 auto;margin-bottom:26px;} .wejscie-pasek-srodek{display:flex;align-items:center;gap:26px;} .wejscie-pasek img{height:26px;width:auto;display:block;} .wejscie-menu{display:flex;gap:24px;margin-left:auto;align-items:center; min-width:0;overflow-x:auto;scrollbar-width:none;} .wejscie-menu::-webkit-scrollbar{display:none;} /* ⚠️ Jaśniejszy tekst i cień: menu leży na FOTOGRAFII, a nad panelem wypada akurat na rozjaśnionej wiacie stacji. Szary napis bez cienia po prostu tam ginie. */ .wejscie-menu a{color:var(--tekst);text-decoration:none;font-size:0.9375rem; font-weight:500;white-space:nowrap;text-shadow:0 1px 3px rgba(0,0,0,.6);} .wejscie-menu a:hover{color:var(--tekst);text-decoration:none;} .szyna-logo img{max-width:150px;} /* ─────────── tablety ─────────── */ @media (max-width:1100px){ .app{grid-template-columns:180px 1fr;} .srodek{padding:16px 14px 32px;} .gora{padding:0 14px;} } /* ─────────── telefony ─────────── */ @media (max-width:760px){ body{font-size:0.9375rem;} /* ⚠️⚠️ minmax(0,1fr), NIGDY samo 1fr. `1fr` to skrót od `minmax(auto,1fr)`, a `auto` jako minimum znaczy „nie mniej, niż wymaga najszersza rzecz w środku". Wystarczyła jedna szeroka tabela i CAŁA STRONA rozciągała się do jej szerokości: na telefonie 375 px każdy ekran portalu miał 2515 px i wyglądał, jakby responsywności nie było wcale — choć cała reszta reguł na telefon była tu od dawna. Zero jako minimum pozwala kolumnie zejść do szerokości ekranu, a tabela przewija się w swoim przewijaku, zamiast rozpychać wszystko dookoła. */ .app{grid-template-columns:minmax(0,1fr);} /* ⚠️ To samo w drugą stronę dla elastycznych pojemników: element flex/grid domyślnie nie schodzi poniżej swojej zawartości, więc bez tego pojedyncza szeroka karta albo formularz znowu rozpychałyby stronę. */ .tresc, .srodek, .karta, .karta > *, form, details, .pasek-kafli{ min-width:0; } .przewijak, [style*="overflow-x"]{ max-width:100%; } /* ⚠️⚠️ `overflow:visible` JEST TU KONIECZNE. Na szerokim ekranie szyna ma własne przewijanie (długie menu na niskim monitorze), ale na telefonie to tylko pasek z logo i pastylkami — a odziedziczone `overflow-y:auto` PRZYCINAŁO wysuwaną paletkę wyglądu: panel wchodził pod krawędź paska i dawał się przewijać wewnątrz niego zamiast wyświetlić się w całości. */ .szyna{position:sticky;top:0;z-index:30;height:auto;flex-direction:column; overflow:visible;border-right:0;border-bottom:1px solid var(--kreska);} /* Panel paletki: pod ikonami, dosunięty do prawej, nigdy szerszy niż ekran. */ .szyna-logo .paletka{right:0;left:auto;max-width:calc(100vw - 20px);} .szyna-logo{padding:13px 16px;border-bottom:0;} .szyna-logo img{max-width:118px;} /* menu jako przewijany pasek zakładek — obsługa kciukiem, nie precyzją */ .menu{flex-direction:row;gap:6px;padding:0 12px 10px;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;} .menu::-webkit-scrollbar{display:none;} .menu .lbl{display:none;} .mi{white-space:nowrap;padding:11px 14px;min-height:44px;border-radius:22px; background:var(--tlo2);border:1px solid var(--kreska);} .mi.tu{background:var(--bursztyn);color:var(--bursztyn-c);border-color:var(--bursztyn);} .zrodla{display:none;} /* ⚠️⚠️ WALKA O GÓRĘ EKRANU. Rafał: „zmniejsz te informacje co najmniej o połowę, od »Moja trasa« do rzeczywistych tras zielonych". Na telefonie ta sama nazwa pojawiała się TRZY RAZY: jako pastylka w menu, jako nagłówek paska i jako tytuł strony. Do tego pas kafli i filtr dnia — w sumie kilkaset pikseli, zanim widać pierwszą dostawę. Zostawiamy jedną nazwę (tytuł strony), resztę ściskamy. */ .gora{height:auto;padding:5px 14px;gap:8px;flex-wrap:wrap;position:static;min-height:0;} .gora h1{display:none;} /* ta sama nazwa jest w tytule strony niżej */ .gora:empty{display:none;padding:0;border:0;} .ukryj-na-tel{display:none;} /* ⚠️ CELE POD KCIUK. Ikonka wygodna pod kursorem myszy ma 27 px i na telefonie wymaga celowania — a przez taką listę się przewija, więc chybione dotknięcie najpierw przewinie, a potem trafi w sąsiedni wiersz. Podnosimy do 38 px wszystko, co się klika: przycisk mapy przy stacji i ikony w pasku u góry. Reguły w medii nie ruszają wyglądu na komputerze. */ .mapa-btn{ min-width:38px; min-height:38px; justify-content:center; } .szyna-logo .mi, .gora .mi{ min-width:38px; min-height:38px; justify-content:center; } /* ── TABELA JAKO KARTY ──────────────────────────────────────────────────── ⚠️⚠️ Tabela z ośmioma kolumnami na ekranie 390 px przewija się w bok przy KAŻDYM wierszu. Odczytać się da, porównać już nie — a po to się na listę patrzy. Na telefonie wiersz staje się kartą: etykieta z lewej, wartość z prawej, jedna pod drugą. ⚠️ Etykieta siedzi w atrybucie `data-etyk` PRZY KOMÓRCE, nie w nagłówku: nagłówek na telefonie znika, a gdyby etykiety brały się z kolejności kolumn, rozjechałyby się przy pierwszej dołożonej kolumnie i nikt by tego nie zauważył. ⚠️ Komórka z pustym `data-etyk` to nagłówek karty (numer, data) — bez podpisu i większą czcionką. Komórka BEZ atrybutu zostaje bez podpisu, ale w tej samej linii co reszta: to zwykle przyciski. */ .tabela-kartami thead{ display:none; } .tabela-kartami, .tabela-kartami tbody, .tabela-kartami tr, .tabela-kartami td{ display:block; width:auto; } .tabela-kartami tr{ border:1px solid var(--kreska2); border-radius:var(--r2); margin:0 0 9px; padding:9px 11px; background:var(--karta); } .tabela-kartami td{ border:0 !important; padding:3px 0 !important; text-align:left !important; display:flex; gap:12px; align-items:baseline; justify-content:space-between; } .tabela-kartami td::before{ content:attr(data-etyk); color:var(--tekst4); font-size:0.75rem; flex:0 0 auto; white-space:nowrap; } .tabela-kartami td[data-etyk=""]{ font-size:1rem; font-weight:600; padding-bottom:7px !important; border-bottom:1px solid var(--kreska) !important; margin-bottom:5px; } .tabela-kartami td[data-etyk=""]::before{ display:none; } /* Puste komórki nie zostawiają pustych wierszy w karcie. */ .tabela-kartami td:empty{ display:none; } .tabela-kartami tfoot tr{ background:var(--pole); font-weight:600; } /* ⚠️⚠️ Pasek kanału NA CAŁEJ KARCIE, nie przy pierwszej komórce. Na szerokim ekranie barwna kreska przy krawędzi wiersza mówi, z którego świata jest zapis: bursztyn to karta Shell, zieleń to cysterna. Rysuje ją cień wewnętrzny pierwszej komórki i przy wierszu w jednej linii wygląda dokładnie tak, jak ma — jak pasek wzdłuż wiersza. Po zamianie wiersza w kartę pierwsza komórka jest już tylko NAGŁÓWKIEM karty, więc kreska przy KOMÓRCE kurczyła się do jednej linijki i wyglądała jak rysa obok logo (Rafał 06.09.2026: „na każdej z kart są takie kreski — patrz koło logo Shell"). Przenosimy ją na cały wiersz, czyli na całą kartę; barwę tła zostawiamy, bo to ten sam język: amber = karta, zieleń = cysterna. */ .tabela-kartami tr.w-karta > td:first-child, .tabela-kartami tr.w-cysterna > td:first-child{ box-shadow:none; } .tabela-kartami tr.w-karta { box-shadow: inset 3px 0 0 var(--bursztyn); background: rgba(214,168,46,.075); } .tabela-kartami tr.w-cysterna { box-shadow: inset 3px 0 0 var(--ok); background: rgba(56,158,94,.085); } /* Logo i menu — niższe, bez zmiany czytelności. */ .szyna-logo{padding:8px 16px 6px;} .szyna-logo img{max-width:98px;} .menu{padding:0 12px 7px;gap:5px;} .mi{padding:8px 13px;min-height:38px;} /* Tytuł strony: jeden, mniejszy, dosunięty do góry. ⚠️ Rafał: „moja trasa śmiało do góry o 5 mm i data też trochę do góry" — nad tytułem stał odstęp z `.srodek`, którego na telefonie nikt nie potrzebuje. */ .pas{gap:6px;margin:-8px 0 0;} .pas h1{font-size:1.1875rem;line-height:1.2;margin:0;} .pas .podtytul{font-size:0.8125rem;} /* Kafle wskaźnikowe — pasek, a nie trzy słupki. */ .pasek-kafli .kafelek{padding:5px 11px;} .pasek-kafli strong{font-size:0.9375rem;} .pasek-kafli .etyk{font-size:0.625rem;} /* Filtry: jeden ciasny rząd. ⚠️ Rafał: „samo słowo data obok kalendarza, aby było więcej miejsca". Podpis nad polem zabierał cały wiersz na jedno słowo — obok pola zajmuje zero. */ .filtry{padding:7px 11px;gap:6px 9px;align-items:center;} .filtry label{flex-direction:row;align-items:center;gap:6px;} .filtry .pole-etykieta{margin:0;white-space:nowrap;} .filtry select,.filtry input{padding:6px 8px;} /* ⚠️⚠️ WALKA O MIEJSCE NA TELEFONIE. Rafał: „podnieś paletkę, wylogowanie itd. do wysokości logo, po prawej". Ikony zajmowały osobny rząd pod menu i zjadały kilkadziesiąt pikseli wysokości, których w kabinie brakuje na treść. Przypinamy je NA STAŁE do prawego górnego rogu, na wysokości logo. Pasek z logo jest przyklejony do góry, więc ikony i tak muszą tam zostać przy przewijaniu — `fixed` daje dokładnie to, bez ruszania znaczników i bez drugiej kopii paletki. */ /* ⚠️⚠️ z-index MUSI być wyższy niż przyklejony pasek z logo (.szyna ma 40). Przy 31 ikony lądowały DOKŁADNIE POD nim — pasek ma własne tło, więc zasłaniał je w całości i wyglądało to jak brak ikon, a nie jak zła kolejność warstw. Nic nie znikało; było schowane. */ /* ⚠️ Ikony siedzą TERAZ FIZYCZNIE w pasku z logo (przestawia je skrypt w inc/layout.php), więc nie potrzebują pozycjonowania ani warstw — po prostu stoją w rzędzie, dosunięte do prawej. To jedyne podejście, które nie zależy od tego, co akurat jest przyklejone i z jakim z-indexem. */ .szyna-logo{display:flex;align-items:center;} .gora-ikony{margin-left:auto !important;gap:3px !important;} .gora-ikony .mi{padding:6px !important;min-height:0;border-radius:8px; background:var(--tlo2);border:1px solid var(--kreska2); color:var(--tekst2);} .gora-ikony .mi svg{width:15px;height:15px;} /* Kółko z inicjałami — mniejsze, ale zostaje: mówi, na czyim koncie się jest. */ .gora-ikony > span{width:24px !important;height:24px !important;font-size:0.5625rem !important;} .srodek{padding:9px 12px 40px;gap:9px;} .karta-gl{flex-wrap:wrap;gap:8px;padding:13px 14px;} .karta-gl h2{font-size:0.9375rem;} form[style*="grid"]{grid-template-columns:1fr !important;} .przewijak{margin:0 -12px;padding:0 12px;} th{position:static;font-size:0.5938rem;padding:9px 12px;} td{padding:12px;} /* palec potrzebuje miejsca; 16px w polach = iPhone nie przybliża ekranu */ .btn{min-height:44px;padding:11px 16px;} input,select,textarea{min-height:44px;font-size:1rem;} .plakietka{font-size:0.6875rem;padding:4px 9px;} .komunikat{padding:13px 14px;} .pusto{padding:36px 16px;} /* ⚠️⚠️ ZDJĘCIE ZOSTAJE NA TELEFONIE. Do 08.09.2026 stało tu `display:none` na lewej kolumnie — i cały tonalny wstęp znikał właśnie na telefonie, czyli tam, gdzie loguje się większość klientów. Teraz kolumny układają się jedna pod drugą: na górze zdjęcie z hasłem, na dole ten sam szklany panel z formularzem. */ .wejscie{flex-direction:column;justify-content:flex-end;min-height:100dvh;} .wejscie-lewa{flex:1 1 auto;padding:16px 22px 10px;justify-content:flex-end;} /* ⚠️ Na telefonie menu NIE ZNIKA — przewija się w bok. Ukryte znaczyłoby, że na telefonie strona jednak przestaje istnieć, czyli dokładnie to, co było źle. */ .wejscie-pasek-srodek{gap:14px;} .wejscie-menu{gap:16px;} .wejscie-menu a{font-size:0.875rem;} .wejscie-prawa{width:100%;padding:28px 22px 34px;justify-content:flex-start; border-left:0;border-top:1px solid rgba(255,255,255,.2); box-shadow:0 -30px 70px rgba(0,0,0,.38);} .wejscie h1{font-size:1.875rem;} } @media (max-width:400px){ .srodek{padding:12px 10px 36px;} .karta-gl{padding:12px;} td,th{padding:10px;} } @media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;}} /* ── Zielony pasek „nowa wersja" — na DOLE, pokazywany dopiero przy zmianie ── Rezerwuje sobie miejsce (body.z-paskiem), żeby nie zasłonić dolnych przycisków. */ .pasek-wersja{display:none;position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:900; align-items:center;gap:14px;width:min(560px,96vw);padding:13px 16px; background:linear-gradient(180deg,#059669,#047a56);color:#fff;font-weight:600; border:1px solid #10b981;border-bottom:0;border-radius:12px 12px 0 0; box-shadow:0 -8px 32px rgba(0,0,0,.45);} .pasek-wersja.widac{display:flex;animation:pw-wjazd .28s ease-out;} @keyframes pw-wjazd{from{transform:translate(-50%,100%);}to{transform:translate(-50%,0);}} @media (prefers-reduced-motion:reduce){.pasek-wersja.widac{animation:none;}} .pw-tekst{flex-grow:1;} .pw-btn{background:#fff;color:#065f46;border:0;border-radius:7px;padding:9px 17px; font-family:inherit;font-size:0.8125rem;font-weight:700;cursor:pointer;min-height:38px;} .pw-btn:hover{background:#ecfdf5;} .pw-x{background:transparent;border:0;color:#c9f2e0;font-size:0.9375rem;cursor:pointer; padding:6px 8px;min-width:34px;min-height:34px;line-height:1;} .pw-x:hover{color:#fff;} body.z-paskiem .srodek{padding-bottom:88px;} @media (max-width:760px){ .pasek-wersja{width:100vw;border-radius:0;border-left:0;border-right:0;padding:12px 13px;gap:10px;} .pw-btn{padding:11px 15px;min-height:44px;} } /* ── KAFLE PODSUMOWAŃ ── ⚠️ Były zdefiniowane TYLKO wewnątrz transakcje.php, więc każdy nowy ekran dostawał goły tekst zamiast kafli i nikt tego nie widział do momentu obejrzenia strony. Tu są raz, dla wszystkich. auto-fit zamiast repeat(4,1fr) — ekrany mają od 3 do 5 kafli. */ .kafle{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin:14px 0;} .kafel{background:var(--karta);border:1px solid var(--kreska);border-radius:var(--r);padding:14px 16px;} .kafel-l{font-size:1.375rem;font-weight:600;margin-top:4px;} @media (max-width:760px){ .kafle{grid-template-columns:repeat(2,1fr);gap:9px;} .kafel{padding:11px 12px;} .kafel-l{font-size:1.1875rem;} } /* ═════ KOLORY AKCENTU ═════ */ html[data-akcent="niebieski"]{ --akcent:#4a9eff; --akcent-c:#04162e; --akcent-t:#0e1b2c; --akcent-k:#1d4d80; } html[data-akcent="morski"] { --akcent:#2dd4bf; --akcent-c:#032420; --akcent-t:#0b241f; --akcent-k:#166b60; } html[data-akcent="zielony"] { --akcent:#4ec48a; --akcent-c:#04200f; --akcent-t:#0f2419; --akcent-k:#1d6640; } html[data-akcent="fioletowy"]{ --akcent:#a78bfa; --akcent-c:#170a33; --akcent-t:#1c1430; --akcent-k:#4a338c; } /* ═════ MOTYW JASNY ═════ ⚠️ Zmieniamy WYŁĄCZNIE zmienne, żadnych reguł wyglądu. Kolor zapisany gdzieś na sztywno w ekranie NIE zmieni się tutaj — dlatego takie miejsca trzeba zamieniać na zmienne, a nie dopisywać im wyjątków w tym bloku. */ html[data-motyw="jasny"]{ --w-uwaga:#fdf6e3; --w-poza:#eef3f7; --w-martwy:#fdeef0; --w-paliwo:#edf7f2; --w-probny:#eef2fa; --w-sekcja:#fdf6e6; --w-alarm:#fdeef0; --najazd:#eaf0f7; --tlo:#f2f5f9; --tlo2:#e9edf4; --szyna:#ffffff; --karta:#ffffff; --pole:#f7f9fc; --pole2:#eef2f8; --kreska:#e3e8f0; --kreska2:#cfd8e4; --kreska3:#a8b4c4; --tekst:#0f172a; --tekst2:#48566b; --tekst3:#6b7889; --tekst4:#8d99a9; --akcent:#b06f00; --akcent-c:#fff6e6; --akcent-t:#fdf3e0; --akcent-k:#e0b877; --ok:#0e7a4d; --ok-t:#e2f6ec; --uwaga:#b8541a; --uwaga-t:#fceee5; --blad:#c62936; --blad-t:#fdeaec; /* Okno ma ODSTAWAĆ od strony. W ciemnym jest jaśniejsze od tła — w jasnym musi być odwrotnie: strona lekko szara, okno białe. */ --okno:#ffffff; --okno-gora:#eef2f8; --okno-pole:#ffffff; --okno-sekcja:#f6f8fc; } html[data-motyw="jasny"][data-akcent="niebieski"]{ --akcent:#1663b8; --akcent-c:#eef5ff; --akcent-t:#e8f1fd; --akcent-k:#9cc2ec; } html[data-motyw="jasny"][data-akcent="morski"] { --akcent:#0d7d70; --akcent-c:#eafaf7; --akcent-t:#e2f6f2; --akcent-k:#8fcfc6; } html[data-motyw="jasny"][data-akcent="zielony"] { --akcent:#12784c; --akcent-c:#eafaf1; --akcent-t:#e2f5ea; --akcent-k:#92cfae; } html[data-motyw="jasny"][data-akcent="fioletowy"]{ --akcent:#6b3fc4; --akcent-c:#f4efff; --akcent-t:#efe8fd; --akcent-k:#bda6ee; } /* ═════ PALETKA WYGLĄDU ═════ */ .paletka-b{position:relative;} .paletka{position:absolute;right:0;top:calc(100% + 8px);width:262px;z-index:80; background:var(--okno);border:1px solid var(--kreska3);border-radius:var(--r); box-shadow:0 18px 44px rgba(0,0,0,.42);padding:14px;} .paletka[hidden]{display:none;} .paletka h4{margin:0 0 11px;font-size:0.625rem;letter-spacing:.11em;text-transform:uppercase; color:var(--tekst3);font-weight:600;} .paletka-lbl{font-size:0.6875rem;color:var(--tekst3);margin:13px 0 6px;} .paletka-rzad{display:flex;gap:7px;} .paletka-rzad button{flex:1;padding:8px 6px;border-radius:var(--r2);cursor:pointer; background:var(--okno-pole);border:1px solid var(--kreska2);color:var(--tekst2); font:inherit;font-size:0.75rem;display:flex;align-items:center;justify-content:center;gap:6px;} .paletka-rzad button:hover{color:var(--tekst);} .paletka-rzad button[aria-pressed="true"]{border-color:var(--akcent);background:var(--akcent-t);color:var(--tekst);font-weight:600;} .paletka-kropki{display:flex;gap:9px;} .paletka-kropki button{width:27px;height:27px;border-radius:50%;cursor:pointer;padding:0; border:2px solid transparent;outline:1px solid var(--kreska2);outline-offset:1px;} .paletka-kropki button[aria-pressed="true"]{border-color:var(--tekst);transform:scale(1.14);outline-color:var(--tekst3);} .paletka-stan{margin-top:12px;font-size:0.6875rem;line-height:1.45;color:var(--tekst4);min-height:1.2em;} .paletka-stan.zle{color:var(--blad);font-weight:600;} /* ── ZNAK FIRMOWY A MOTYW ── ⚠️ Logo z białymi literami znika na białej szynie. Wypisujemy OBIE wersje i przenikamy motywem — zamiast zgadywać po stronie serwera, który motyw ustawi sobie człowiek już po wczytaniu strony. */ .znak-ciemny{display:block;} .znak-jasny{display:none;} html[data-motyw="jasny"] .znak-ciemny{display:none;} html[data-motyw="jasny"] .znak-jasny{display:block;} /* Okno pojazdu i inne okna serwerowe (dialog open) - nad lista, ale nie na cala strone, zeby bylo widac, ze lista jest pod spodem. */ .okno-pojazd{position:fixed;top:5vh;left:50%;transform:translateX(-50%);z-index:40; max-width:960px;width:94vw;max-height:88vh;overflow:auto;padding:0; border:1px solid var(--kreska);border-radius:var(--r);background:var(--okno);color:var(--tekst); box-shadow:0 18px 48px rgba(0,0,0,.45);} .okno-pojazd::backdrop{background:transparent;} /* WARNING Naglowek okna jest przyklejony do gory OKNA, wiec top:0 - nie 58px. Kotwica 58px odnosi sie do paska strony, ktorego w oknie nie ma. */ .okno-pojazd th{top:0;} .tlo-okna{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:39;cursor:pointer;} /* Cysterny (WB TANK) w menu maja wlasny kolor - to inny podmiot niz Lauron. Zielen z kabin floty, zeby kolor cos znaczyl, a nie byl ozdoba. */ .lbl-cysterny{color:#5fc94a !important;} .grupa-cysterny{border-left:2px solid rgba(70,187,44,.5);margin-left:9px;padding-left:5px;} .grupa-cysterny .mi{color:#bfe6b3;} .grupa-cysterny .mi:hover{background:rgba(70,187,44,.12);color:#e6f7e0;} .grupa-cysterny .mi.tu{background:rgba(70,187,44,.18);color:#8fe07a;} .grupa-cysterny .mi.tu svg{stroke:#8fe07a;} /* WARNING W jasnym motywie ta sama zielen znika na bialym tle - kolor musi byc dobrany do TLA, nie skopiowany z ciemnego. Tu ciemniejsza zielen i delikatne wypelnienie zamiast jasnego tekstu. */ html[data-motyw="jasny"] .lbl-cysterny{color:#1f7a2e !important;} html[data-motyw="jasny"] .grupa-cysterny{border-left-color:#2f9e3d;background:rgba(47,158,61,.05);} html[data-motyw="jasny"] .grupa-cysterny .mi{color:#1f5c2a;} html[data-motyw="jasny"] .grupa-cysterny .mi:hover{background:rgba(47,158,61,.13);color:#14431e;} html[data-motyw="jasny"] .grupa-cysterny .mi.tu{background:rgba(47,158,61,.2);color:#14431e;} html[data-motyw="jasny"] .grupa-cysterny .mi.tu svg{stroke:#1f7a2e;} @media (prefers-color-scheme: light){ html:not([data-motyw="ciemny"]) .lbl-cysterny{color:#1f7a2e !important;} html:not([data-motyw="ciemny"]) .grupa-cysterny .mi{color:#1f5c2a;} } /* ⚠️⚠️ TE REGUŁY MUSZĄ ZOSTAĆ POZA . Wpisane 05.09.2026 wylądowały PRZYPADKIEM W ŚRODKU bloku druku — kilka linijek niżej stoi reguła, która zakładki na papierze ukrywa. Wyszło z tego coś gorszego niż brak stylu: styl istniał, wyglądał na naprawiony, a działał wyłącznie na wydruku, którego nikt nie ogląda. Na ekranie przez dwa dni zakładki zlepiały się w jedno zdanie („Wzór wiadomościTreści pism Historia wysyłek") — dokładnie ten sam objaw, który miały naprawić. Sprawdzone w przeglądarce: getComputedStyle(.zak).padding = 0px przed poprawką. */ /* ══════ ZAKŁADKI I PODZAKŁADKI ══════ ⚠️ Do 05.09.2026 te klasy NIE MIAŁY ŻADNEGO STYLU — istniały tylko w regułach druku, które je ukrywały. Na ekranie zlepiały się w jedno zdanie: „Faktury Doszło i prowizje Do zafakturowania", a w podzakładkach nazwa sklejała się z opisem („Okresamico dopłynęło do rozliczeń"). Wyglądało to jak błąd tekstu, a było brakiem stylu. ⚠️ Kreska pionowa MIĘDZY pozycjami, nie ramka wokół każdej: ramki robią z paska rząd guzików i zaczynają konkurować z prawdziwymi przyciskami obok. */ .zakladki{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0; border-bottom:1px solid var(--kreska2); } .zakladki .zak{ position:relative; padding:11px 18px; text-decoration:none; color:var(--tekst3); font-weight:600; font-size:0.9375rem; border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; } .zakladki .zak + .zak::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:1px; background:var(--kreska2); } .zakladki .zak:hover{ color:var(--tekst); } .zakladki .zak.tu{ color:var(--akcent); border-bottom-color:var(--akcent); } .kat-pasek{ display:flex; align-items:stretch; flex-wrap:wrap; gap:0; border:1px solid var(--kreska2); border-radius:10px; overflow:hidden; background:var(--karta); } .kat-pasek .kat{ position:relative; display:flex; flex-direction:column; gap:2px; padding:11px 18px; text-decoration:none; color:var(--tekst2); } .kat-pasek .kat + .kat::before{ content:""; position:absolute; left:0; top:8px; bottom:8px; width:1px; background:var(--kreska2); } .kat-pasek .kat strong{ font-size:0.9375rem; } .kat-pasek .kat span{ font-size:0.75rem; color:var(--tekst4); } .kat-pasek .kat.tu{ background:var(--akcent-t); } .kat-pasek .kat.tu strong{ color:var(--akcent); } /* ═════════════════════════ DRUK ═════════════════════════ ⚠️ Do tej pory nie było TU ŻADNEJ reguły druku, więc na papier szło wszystko: szyna z menu, górny pasek, filtry, przyciski i ciemne tło strony. Rafał: „jak ją drukuję, to drukuje mi z dziwnymi rzeczami". ⚠️ Kolory wywracamy na jasne PRZEZ ZMIENNE, a nie regułą na każdy element. Ekran jest ciemny; wydrukowany zjadłby toner i byłby nieczytelny, a dopisywanie `color:black` do pojedynczych klas zawsze kogoś pomija. */ @media print { :root{ --tlo:#fff; --tlo2:#fff; --karta:#fff; --pole:#fff; --pole2:#f2f2f2; --tekst:#000; --tekst2:#1a1a1a; --tekst3:#3d3d3d; --tekst4:#5c5c5c; --kreska:#8c8c8c; --kreska2:#c7c7c7; --kreska3:#b0b0b0; --akcent:#000; --akcent-t:#f2f2f2; --akcent-c:#fff; --ok:#0a6b3d; --ok-t:#eef7f2; --uwaga:#8a4b12; --uwaga-t:#faf3ec; --blad:#9b1c1c; --blad-t:#fbeeee; --najazd:transparent; --w-sekcja:#f7f7f7; --w-poza:#f7f7f7; --w-uwaga:#fdf6ee; --okno:#fff; --okno-gora:#f2f2f2; --okno-sekcja:#fff; --okno-pole:#fff; --szyna:#fff; } /* Na papierze nie ma nawigacji ani niczego, co się klika. */ .szyna, .gora, .zakladki, .pasek-wersja, .pasek-kafli, .kafle-w, .okno-tlo, .tlo-okna, .okno-pojazd, .okno-cyst-tlo, .btn, button, select, input[type=date], input[type=number], .sort-w, .rozwin, .nie-drukuj { display:none !important; } html, body { background:#fff !important; } /* ⚠️⚠️ SIATKA UKŁADU MUSI ZNIKNĄĆ NA PAPIERZE. Strona to siatka „menu | treść", a na wydruku menu chowamy — wtedy treść wskakuje w PIERWSZĄ kolumnę, czyli tę o szerokości menu, i cały wydruk schodzi do SŁUPKA szerokiego na 216 px, z pustą resztą kartki. Rafał 07.09.2026: „drukuje się nie jako raport, a jako ekran". Jeden blok na całą szerokość kartki — siatka nie ma tu po co istnieć. */ .app { display:block !important; } /* ⚠️ Zwinięte
rozwija SKRYPT przy `beforeprint` (inc/layout.php), nie CSS. Przeglądarka chowa zawartość zamkniętego
mechanizmem, którego `display` nie przebija — reguła CSS wyglądała na działającą i nie robiła nic. */ details > summary { list-style:none; } /* Pasek filtrów i wszystko, co się klika — na papierze nie ma czego filtrować. */ .filtry, .pm-wybor, .filtry-akcje, .kat-pasek, input[type=search], input[type=text], input[type=email], textarea { display:none !important; } /* ⚠️⚠️ Komunikaty to ROZMOWA Z CZŁOWIEKIEM PRZY EKRANIE: „wpisz stawkę", „uwaga na dane próbne", „zapisałem wpłatę". Mówią, co zrobić albo co się przed chwilą stało — na kartce nie ma czego robić i nic się przed chwilą nie stało. Rafał 07.09.2026, po usunięciu ich z samego raportu: „nadal są te napisy" — bo drukował ekran, a tam zostawały. Kartka ma podawać liczby. */ .komunikat, .paleta-uwaga, .pasek-wersja { display:none !important; } .srodek { padding:0 !important; margin:0 !important; max-width:none !important; } .karta { box-shadow:none !important; border:1px solid #8c8c8c; break-inside:avoid; } a { color:inherit !important; text-decoration:none !important; } /* Tabela dłuższa niż strona ma powtarzać nagłówek, a wiersz nie może pęknąć w pół. */ thead { display:table-header-group; } tr { break-inside:avoid; } /* ⚠️⚠️ NAJWAŻNIEJSZA REGUŁA DRUKU LIST — i jej brak psuł u nas wszystkie zestawienia. Każda tabela siedzi w pojemniku z `overflow-x:auto`, bo na ekranie ma się przewijać. Na papierze taki pojemnik OBCINA to, co wystaje: drukowało się tyle, ile akurat było widać, a reszta kolumn znikała bez śladu. Rozwiązanie wzięte wprost z BuildManagera, gdzie listy drukują się poprawnie od zawsze (Rafał: „zrób to jak w BM, tam nie było problemów z listami"). */ div:has(> table), .karta:has(table), div[style*="overflow"] { max-height:none !important; overflow:visible !important; } /* Tabela ma zająć całą szerokość kartki i zmieścić kolumny — 9 pt to granica, poniżej której liczby przestają być czytelne przy szybkim sprawdzaniu. */ table { width:100% !important; font-size:9pt !important; table-layout:auto !important; } th, td { padding:2pt 4pt !important; vertical-align:top; } /* ⚠️⚠️ JEDEN REKORD = JEDNA LINIA. To jest właściwy powód, dla którego lista 106 transakcji drukowała się na TRZYNASTU stronach: w komórkach siedzą dopiski pod spodem (nazwa stacji, kod produktu, druga linia klienta), każdy jako osobny
. Trzy linijki na wiersz to trzykrotność kartek. Dopisków NIE USUWAMY — wchodzą w tę samą linię, drobnym drukiem, po kropce. Wyrzucenie ich byłoby oszczędnością na treści, a nie na papierze. */ td div { display:inline !important; margin-left:4pt; font-size:7.5pt; color:#4a4a4a; } td div::before { content:"· "; } td br { display:none; } /* Liczby i daty nie mają prawa się łamać — złamana kwota czyta się jak dwie. */ .num, td.num, th.num { white-space:nowrap; } /* Filtry i szukajki to sposób dojścia do listy, nie jej treść. Bez tego na kartce zostawały same etykiety pól po ukryciu samych pól — gorzej niż nic. */ .filtry, .szukajka, .kat-pasek, .pod-pasek, .zakladki { display:none !important; } /* Nagłówek wydruku — na ekranie go nie ma, na papierze jest zawsze. */ .druk-naglowek{display:flex !important;justify-content:space-between;align-items:flex-start; gap:16px;padding:0 0 6pt;margin-bottom:8pt;border-bottom:1.5pt solid #000;} .dn-etyk{display:block;font-size:9pt;font-weight:700;letter-spacing:.26em; text-transform:uppercase;color:#111;margin-bottom:2pt;} .dn-lewo strong{font-size:12pt;display:block;} .dn-warunki{font-size:8pt;color:#444;display:block;margin-top:2pt;} .dn-prawo{font-size:8.5pt;text-align:right;line-height:1.4;} .dn-kiedy{color:#555;} @page { size:A4; margin:12mm; } } /* Na ekranie nagłówek wydruku nie istnieje. */ .druk-naglowek{display:none;} /* ═════════════ FILTRY — JEDNA LINIA ═════════════ ⚠️ `.filtry` nie miało DOTĄD ŻADNEGO stylu, więc pola układały się w słupek i zjadały pół ekranu przed pierwszym wierszem danych. Rafał: „w fakturach filtry zrób w jednej linii, to standard nasz". Ten sam styl działa na fakturach, kartach i transakcjach — te trzy ekrany mają identyczny formularz. */ .filtry{display:flex;flex-wrap:wrap;gap:8px 11px;align-items:flex-end;padding:11px 16px;} .filtry label{display:flex;flex-direction:column;gap:2px;min-width:0;} .filtry .pole-etykieta{margin:0;} .filtry select,.filtry input{padding:4px 8px;font-size:0.8125rem;} .filtry select{max-width:210px;} .filtry input[type=date]{max-width:150px;} .filtry .btn{margin-left:2px;} /* ═════════════ WĄSKI PASEK KAFLI ═════════════ ⚠️ Wskaźniki to liczby, na które się ZERKA — nie potrzebują kart na pół ekranu. Styl wyniesiony z inc/cysterna-kafle.php do wspólnego arkusza, bo używają go teraz dwa różne moduły; jedna definicja zamiast dwóch rozjeżdżających się kopii. */ .pasek-kafli{display:flex;gap:0;flex-wrap:wrap;align-items:stretch; border:1px solid var(--kreska2);border-radius:var(--r2);background:var(--karta);} .pasek-kafli .kafelek{display:flex;flex-direction:column;gap:1px;padding:7px 16px; border-right:1px solid var(--kreska2);} .pasek-kafli .kafelek:last-child{border-right:0;} .pasek-kafli .etyk{color:var(--tekst4);font-size:0.6875rem;text-transform:uppercase;letter-spacing:.04em;} .pasek-kafli strong{font-variant-numeric:tabular-nums;font-size:1.0625rem;line-height:1.25;} .pasek-kafli .jedn{font-size:0.6875rem;font-weight:400;color:var(--tekst3);} .pasek-kafli .pilny strong{color:var(--uwaga);} /* ═════════════ DWA PODMIOTY, DWA KOLORY ═════════════ ⚠️ Rafał: „WB TANK czy Lauron zrób jako gotowe kafle, a nie wybór z listy; a jeśli oba, to niech są dwa różne kolorki, zielone i niebieskie, ale delikatne". Lista faktur jest wspólna, ale to DWA REJESTRY SPRZEDAŻY dwóch podatników z osobnymi numeracjami. Kolor jest tu informacją, nie ozdobą — bez niego dwa rejestry czyta się jak jeden ciąg dokumentów. */ :root{ --pm-wb:#4ec48a; --pm-wb-t:#13291f; --pm-wb-k:#2c6b4c; --pm-lr:#6fb0f5; --pm-lr-t:#101f30; --pm-lr-k:#2d5580; } html[data-motyw="jasny"]{ --pm-wb:#0e7a4d; --pm-wb-t:#e8f7ef; --pm-wb-k:#a9d8c0; --pm-lr:#1c5da8; --pm-lr-t:#e9f1fc; --pm-lr-k:#b3cdec; } .pm{display:inline-block;border-radius:999px;padding:2px 10px;font-size:0.6875rem; font-weight:600;letter-spacing:.01em;white-space:nowrap; border:1px solid transparent;} .pm-wb{background:var(--pm-wb-t);border-color:var(--pm-wb-k);color:var(--pm-wb);} .pm-lr{background:var(--pm-lr-t);border-color:var(--pm-lr-k);color:var(--pm-lr);} /* ⚠️ Znak wchodzi do PLAKIETKI, a nie do każdego ekranu z osobna — dzięki temu pojawia się wszędzie tam, gdzie już pokazujemy podmiot: faktury, noty, bank, upomnienia, mailing, wywozy. Jedna zmiana zamiast kilkunastu. Cysterna to maska (bierze kolor plakietki), Shell to prawdziwe logo. */ .pm-wb, .pm-lr{ display:inline-flex; align-items:center; gap:.42em; } .pm-wb::before{ content:""; flex:none; width:1.62em; height:.97em; background:currentColor; -webkit-mask:url(/img/cysterna.svg) center/contain no-repeat; mask:url(/img/cysterna.svg) center/contain no-repeat; } .pm-lr::before{ content:""; flex:none; width:1.1em; height:1.1em; background:url(/img/shell-znak.png) center/contain no-repeat; } /* Kafelki wyboru podmiotu — zamiast listy rozwijanej. */ .pm-wybor{display:flex;gap:7px;flex-wrap:wrap;align-items:center;} .pm-wybor a{text-decoration:none;border:1px solid var(--kreska2);border-radius:var(--r2); padding:5px 13px;font-size:0.8125rem;color:var(--tekst3);line-height:1.2;} .pm-wybor a:hover{border-color:var(--kreska3);color:var(--tekst);} .pm-wybor a.tu{color:var(--tekst);font-weight:600;} .pm-wybor a.wb.tu{background:var(--pm-wb-t);border-color:var(--pm-wb-k);color:var(--pm-wb);} .pm-wybor a.lr.tu{background:var(--pm-lr-t);border-color:var(--pm-lr-k);color:var(--pm-lr);} .pm-wybor a .ile{color:var(--tekst4);font-weight:400;font-size:0.75rem;margin-left:5px; font-variant-numeric:tabular-nums;} @media print{ /* Na papierze kolor tła nie wychodzi wiernie — zostaje ramka i tekst. */ :root{ --pm-wb:#0a5c3a; --pm-wb-t:#fff; --pm-wb-k:#0a5c3a; --pm-lr:#123f6e; --pm-lr-t:#fff; --pm-lr-k:#123f6e; } .pm-wybor{display:none !important;} } /* ── Znaki kanałów: karta Shell / cysterna ────────────────────────────────── Cysterna jako maska, nie : dzięki temu bierze kolor otoczenia (zielony na plakietce, tekstowy w nagłówku) i nie potrzebuje osobnego pliku na motyw ciemny. Proporcje pliku to 60×36, stąd szerokość ×1,667. */ .znak-cysterna{ display:inline-block; height:var(--znak,17px); width:calc(var(--znak,17px) * 1.667); background:currentColor; vertical-align:-0.18em; flex:none; -webkit-mask:url(/img/cysterna.svg) center/contain no-repeat; mask:url(/img/cysterna.svg) center/contain no-repeat; } .znak-shell{ display:inline-block; height:var(--znak,17px); width:auto; vertical-align:-0.22em; flex:none; } .pl-znak{ display:inline-flex; align-items:center; gap:6px; } /* Całe WIERSZE w barwach kanału — Rafał: „chodzi mi o rekordy w tych kolorach". Pasek przy krawędzi niesie rozróżnienie nawet wtedy, gdy wiersz ma już własne tło (np. czerwone „po terminie"), bo tło da się nadpisać, a wewnętrzny cień nie. Odcienie są celowo ledwie widoczne: mają grupować wzrokiem, a nie krzyczeć. */ tr.w-karta > td:first-child{ box-shadow: inset 3px 0 0 var(--bursztyn); } tr.w-cysterna> td:first-child{ box-shadow: inset 3px 0 0 var(--ok); } tr.w-karta { background: rgba(214,168,46,.075); } tr.w-cysterna{ background: rgba(56,158,94,.085); } /* ── Podpis autora ───────────────────────────────────────────────────────── Cichy: ma być do znalezienia, nie do czytania w kółko. Na wydruku roboczym jedna linijka szarym drukiem u dołu. */ .podpis-autora{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:26px 16px 30px; text-align:center; line-height:1.55; } .podpis-autora .pa-kto{ font-size:0.8125rem; font-weight:600; color:var(--tekst3); } .podpis-autora .pa-co{ font-size:0.75rem; color:var(--tekst4); letter-spacing:.01em; } .podpis-autora .pa-dane{ display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:5px; font-size:0.75rem; } .podpis-autora .pa-dane a{ color:var(--tekst3); text-decoration:none; } .podpis-autora .pa-dane a:hover{ color:var(--akcent); text-decoration:underline; } .podpis-autora .pa-kropka{ color:var(--tekst4); } @media print{ .podpis-autora{ display:none !important; } } .podpis-druk{ margin-top:14px; padding-top:7px; border-top:1px solid #ddd; font-size:9.5px; color:#666; text-align:center; } /* ── Zdjęcie osoby do kontaktu ─────────────────────────────────────────────── */ .pan-zdjecie{ display:flex; gap:14px; align-items:flex-start; padding:0 16px 14px; } .pz-podglad{ flex:none; width:76px; height:76px; border-radius:50%; overflow:hidden; background:var(--pole2); border:1px solid var(--kreska2); display:flex; align-items:center; justify-content:center; } .pz-podglad img{ width:100%; height:100%; object-fit:cover; display:block; } .pz-brak{ font-size:1.5rem; font-weight:700; color:var(--tekst4); letter-spacing:.02em; } .pz-opis{ flex:1 1 240px; min-width:0; } .kt-twarz{ display:flex; align-items:center; gap:13px; padding:14px 16px 0; } .kt-foto{ flex:none; width:64px; height:64px; border-radius:50%; overflow:hidden; display:flex; align-items:center; justify-content:center; border:2px solid var(--kreska2); } .kt-foto img{ width:100%; height:100%; object-fit:cover; display:block; } .kt-foto.lauron{ background:var(--pm-lr-t); color:var(--pm-lr); border-color:var(--pm-lr-k); } .kt-foto.wbtank{ background:var(--pm-wb-t); color:var(--pm-wb); border-color:var(--pm-wb-k); } .kt-foto span{ font-size:1.3rem; font-weight:700; } .kt-osoba-imie{ font-weight:600; font-size:1rem; } .kt-osoba-rola{ color:var(--tekst4); font-size:0.75rem; margin-top:2px; } .pz-kadr{ display:flex; gap:10px; flex-wrap:wrap; margin-top:9px; } .pz-kadr select{ min-width:130px; } /* Kadrowanie zdjęcia z podglądem */ .kad{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; margin-top:12px; } .kad-plotno{ flex:none; width:150px; height:150px; border-radius:50%; background:var(--pole2); border:1px solid var(--kreska2); } .kad-suwaki{ flex:1 1 230px; display:flex; flex-direction:column; gap:9px; min-width:0; } .kad-suwaki input[type=range]{ width:100%; } .kad-info{ color:var(--tekst4); font-size:0.75rem; } /* Ceny SPOT — dzisiejsze notowania w jednej linii */ .spot-dzis{ display:flex; gap:22px; align-items:baseline; flex-wrap:wrap; padding:14px 16px; } .spot-p{ display:flex; gap:8px; align-items:baseline; } .spot-n{ font-size:0.6875rem; font-weight:700; letter-spacing:.06em; color:var(--tekst4); } .spot-c{ font-size:1.375rem; font-weight:700; letter-spacing:-.02em; } .spot-od{ color:var(--tekst3); font-size:0.8125rem; margin-left:auto; } /* ── Pulpit obsługi: wykresy i rankingi ─────────────────────────────────── */ .wyk-siatka{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:0; } .wyk-p1{ padding:14px 16px; border-right:1px solid var(--kreska); } .wyk-p1:last-child{ border-right:0; } .wyk-tyt{ display:flex; align-items:center; gap:7px; font-weight:600; font-size:0.875rem; color:var(--tekst2); margin-bottom:12px; } .wyk{ display:flex; align-items:flex-end; gap:3px; height:132px; } .wyk-k{ display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; min-width:0; } .wyk-l{ font-size:0.625rem; color:var(--tekst4); margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .wyk-s{ width:78%; border-radius:3px 3px 0 0; min-height:3px; } .wyk-p{ font-size:0.625rem; color:var(--tekst3); margin-top:5px; white-space:nowrap; } .wyk-uwaga{ padding:12px 16px; border-top:1px solid var(--kreska); color:var(--tekst3); font-size:0.8125rem; line-height:1.6; } .dwie-kolumny{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:1000px){ .dwie-kolumny{ grid-template-columns:1fr; } } .kier-lista{ display:flex; flex-direction:column; } .kier{ display:flex; align-items:center; gap:14px; padding:11px 16px; border-top:1px solid var(--kreska); } .kier:first-child{ border-top:0; } .kier-1{ background:var(--pm-wb-t); } .kier-m{ flex:none; width:28px; text-align:center; font-weight:700; color:var(--tekst4); } .kier-1 .kier-m{ color:var(--pm-wb); font-size:1.125rem; } .kier-d{ flex:1 1 auto; min-width:0; } .kier-n{ font-weight:600; } .kier-pasek{ height:6px; background:var(--pole2); border-radius:3px; margin-top:5px; overflow:hidden; } .kier-pasek span{ display:block; height:100%; background:var(--pm-wb); border-radius:3px; } .kier-l{ flex:none; text-align:right; } .kier-l strong{ font-size:1.0625rem; } /* Pasek wyboru okresu nad rankingami */ .rank-pasek{ display:flex; align-items:center; gap:11px; flex-wrap:wrap; margin:14px 0 -2px; } .rank-pasek select{ width:auto; padding:7px 10px; } .rank-zakres{ color:var(--tekst3); font-size:0.8125rem; } /* Wybor roku i rozwiniecie miesiecy w rankingach */ .rok-wybor{ display:inline-flex; align-items:center; gap:2px; border:1px solid var(--kreska2); border-radius:var(--r2); overflow:hidden; } .rok-strz{ padding:6px 12px; text-decoration:none; color:var(--tekst2); font-weight:700; } .rok-strz:hover{ background:var(--pole2); color:var(--akcent); } .rok-strz.nieczynny{ color:var(--kreska3); pointer-events:none; } .rok-teraz{ padding:6px 12px; font-weight:700; font-size:1rem; border-left:1px solid var(--kreska2); border-right:1px solid var(--kreska2); } .rozw-strz{ color:var(--tekst4); font-size:0.75rem; margin-left:3px; } tr.wybrany{ font-weight:600; } tr.rozw > td{ padding:0 !important; } .rozw-w{ display:flex; gap:4px; align-items:flex-end; padding:12px 16px 10px; background:var(--w-sekcja); border-top:1px solid var(--kreska); } .rozw-m{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; min-width:0; } .rozw-l{ font-size:0.625rem; color:var(--tekst4); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .rozw-s{ width:70%; height:52px; display:flex; align-items:flex-end; margin:3px 0; } .rozw-s span{ width:100%; border-radius:3px 3px 0 0; } .rozw-p{ font-size:0.625rem; color:var(--tekst3); } /* Rozklad ceny w oknie zamowienia: notowanie + stawka = cena klienta */ .cena-skl{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 13px; border:1px solid var(--kreska2); border-radius:var(--r2); background:var(--pole); margin-top:9px; } .cena-el{ display:flex; align-items:center; gap:9px; } .cena-logo{ height:24px; width:auto; flex:none; } .cena-et{ font-size:0.625rem; text-transform:uppercase; letter-spacing:.05em; color:var(--tekst4); font-weight:700; } .cena-w{ font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; } .cena-w em{ font-size:0.6875rem; font-style:normal; font-weight:600; color:var(--tekst3); } .cena-br{ font-size:0.8125rem; font-weight:600; color:var(--tekst3); } .cena-zn{ font-size:1.125rem; font-weight:700; color:var(--tekst4); } .cena-wynik .cena-w{ color:var(--akcent); font-size:1.1875rem; } .cena-dzien{ display:block; margin-top:6px; font-size:0.75rem; color:var(--tekst4); line-height:1.5; } /* ══════ ZWIJANY BLOK OKRESU / KLIENTA ══════ ⚠️ Te trzy klasy mieszkały w